/** * Design tokens — single source of truth for color, elevation, radius and type. * * Three layers: * 1. Semantic tokens (`--surface-*`, `--text-*`, `--border-*`, `--accent`, * `--success|warning|danger|info`) — the vocabulary components should use. * 2. Compatibility aliases (`--bg-card`, `--text-main`, `--primary`, …) — the * names already used across the codebase, re-pointed at semantic tokens so * the existing ~2,900 references keep working and adapt to the theme for * free. New code should prefer the semantic names above. * 3. Theme overrides — `:root` is the light theme; the dark theme is applied * either by the OS setting (`prefers-color-scheme`, unless the user forced * light) or by an explicit `data-theme="dark"` on (the in-app * toggle, which wins in both directions). See `useTheme.ts`. * * Only semantic tokens change between themes; radius / type / z-index do not. */ :root { color-scheme: light; /* ---- Typography ---- */ --font-family: 'Google Sans', sans-serif; /* Type scale — theme-invariant. 1rem = 16px. Use these instead of raw px / rem so density stays consistent across every surface. */ --text-2xs: 0.6875rem; /* 11px — overline, dense meta */ --text-xs: 0.75rem; /* 12px — table headers, badges, captions */ --text-sm: 0.8125rem; /* 13px — secondary body, compact controls */ --text-base: 0.875rem; /* 14px — default body, inputs, buttons */ --text-md: 0.9375rem; /* 15px — emphasised body */ --text-lg: 1.0625rem; /* 17px — card titles */ --text-xl: 1.25rem; /* 20px — page titles */ --text-2xl: 1.5rem; /* 24px — stat values, section display */ --text-3xl: 1.875rem; /* 30px — hero numbers */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Motion — theme-invariant ---- */ --duration-fast: 120ms; /* hover / press / colour swaps */ --duration-base: 180ms; /* entrances, tab / accordion transitions */ --duration-slow: 260ms; /* overlays, large surface moves */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* default, snappy in */ --ease-entrance: cubic-bezier(0, 0, 0, 1); /* decelerate on enter */ --ease-exit: cubic-bezier(0.3, 0, 1, 1); /* accelerate on leave */ /* ---- Spacing — 4px grid, opt-in ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* ---- Surfaces / elevation ladder ---- */ --bg-app: #f4f6fa; --surface-1: #ffffff; /* page body, cards, table container */ --surface-2: #f4f6fa; /* table headers, inset panels, input fields */ --surface-3: #ffffff; /* dropdowns, popovers, menus */ --surface-4: #ffffff; /* modals, drawers (highest) */ --surface-hover: #f1f5f9; /* row / item hover */ --surface-selected: rgba(241, 65, 79, 0.08); --overlay: rgba(15, 23, 42, 0.45); /* Always-on 1px edge for any raised surface (card, table, menu, panel). Softer than --border-default; pairs with the shadow rather than replacing it. */ --border-hairline: rgba(15, 23, 42, 0.08); /* Faint top-lit edge — layered as the first value of a box-shadow list. */ --surface-raise-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---- Text ---- */ --text-primary: #1a1b1d; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-disabled: #9ca3af; --text-on-accent: #ffffff; /* ---- Borders ---- */ --border-subtle: #eef0f3; --border-default: #e5e7eb; --border-strong: #d1d5db; --border-focus: var(--accent); /* ---- Brand accent ---- */ --accent: #f1414f; --accent-hover: #e0323e; --accent-active: #c62838; --accent-subtle: rgba(241, 65, 79, 0.10); --accent-text: #e0323e; /* accent used as link / inline text */ /* ---- Semantic status ---- default fill · subtle bg · text/icon ---- */ --success: #059669; --success-subtle: rgba(16, 185, 129, 0.12); --success-text: #047857; --warning: #d97706; --warning-subtle: rgba(245, 158, 11, 0.14); --warning-text: #b45309; --danger: #dc2626; --danger-subtle: rgba(239, 68, 68, 0.10); --danger-text: #dc2626; --info: #2563eb; --info-subtle: rgba(59, 130, 246, 0.10); --info-text: #1d4ed8; --neutral-subtle: rgba(107, 114, 128, 0.12); --neutral-text: var(--text-secondary); /* ---- Category tints (non-semantic hues for entity/type badges) ---- */ --category-indigo-subtle: rgba(99, 102, 241, 0.12); --category-indigo-text: #4338ca; --category-pink-subtle: rgba(236, 72, 153, 0.12); --category-pink-text: #be185d; --category-purple-subtle: rgba(139, 92, 246, 0.12); --category-purple-text: #7e22ce; --category-orange-subtle: rgba(249, 115, 22, 0.12); --category-orange-text: #c2410c; --category-teal-subtle: rgba(20, 184, 166, 0.12); --category-teal-text: #0f766e; /* ---- Focus ring ---- */ --focus-ring: rgba(241, 65, 79, 0.45); /* ---- Elevation (floating layers only) ---- */ --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06); --elevation-2: 0 6px 20px -4px rgba(15, 23, 42, 0.12); --elevation-3: 0 18px 44px -8px rgba(15, 23, 42, 0.18); /* Composites — one box-shadow value for menus / overlays: top highlight first, then the drop shadow. */ --elevation-menu: var(--surface-raise-highlight), var(--elevation-2); --elevation-overlay: var(--surface-raise-highlight), var(--elevation-3); /* ---- Radius ---- */ --border-radius-xs: 4px; --border-radius-sm: 6px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius: var(--border-radius-md); /* ---- Sidebar (intentionally dark in both themes) ---- */ --sidebar-bg: color-mix(in srgb, var(--accent) 6%, #101013); --sidebar-active: var(--accent); --sidebar-fg: #9ba3b4; --sidebar-fg-strong: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.07); --sidebar-border: rgba(255, 255, 255, 0.07); /* ---- Charts ---- */ --chart-1: #3b82f6; --chart-2: #f59e0b; --chart-3: #ec4899; --chart-4: #f97316; --chart-5: #10b981; --chart-6: #14b8a6; --chart-7: #8b5cf6; --chart-grid: #eef0f3; --chart-label: #6b7280; --chart-blue: var(--chart-1); --chart-yellow: var(--chart-2); --chart-pink: var(--chart-3); --chart-orange: var(--chart-4); --chart-green: var(--chart-5); --chart-teal: var(--chart-6); --chart-purple: var(--chart-7); /* ---- Legacy shadows (kept for existing references) ---- */ --shadow-sm: var(--elevation-1); --shadow-md: var(--elevation-2); --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.03); /* ================================================================ * Compatibility aliases — existing names → semantic tokens. * ================================================================ */ --bg-main: var(--bg-app); --bg-card: var(--surface-1); --card-bg: var(--surface-1); --surface-bg: var(--surface-1); --bg-hover: var(--surface-hover); --bg-selected: var(--surface-selected); --text-main: var(--text-primary); --text-muted: var(--text-tertiary); --border-color: var(--border-default); --error-color: var(--danger); --error-border: var(--danger); --primary: var(--accent); --primary-color: var(--accent); --primary-hover: var(--accent-hover); --primary-dark: var(--accent-active); } /* ================================================================== * DARK THEME * Applied when the OS prefers dark and the user has not forced light, * or when the in-app toggle sets data-theme="dark". * The two selectors carry identical declarations by necessity (plain * CSS cannot share a declaration block across a media query boundary). * ================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-app: #0e0f11; --surface-1: #16181c; --surface-2: #1e2126; --surface-3: #24282e; --surface-4: #2a2f37; --surface-hover: rgba(255, 255, 255, 0.04); --surface-selected: rgba(241, 65, 79, 0.16); --overlay: rgba(0, 0, 0, 0.65); --border-hairline: rgba(255, 255, 255, 0.08); --surface-raise-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); --text-primary: #e8eaed; --text-secondary: #adb2ba; --text-tertiary: #868c95; --text-disabled: #565b63; --text-on-accent: #ffffff; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --accent: #f1414f; --accent-hover: #f65964; --accent-active: #d63643; --accent-subtle: rgba(241, 65, 79, 0.18); --accent-text: #ff7a83; --success: #10b981; --success-subtle: rgba(16, 185, 129, 0.16); --success-text: #34d399; --warning: #f59e0b; --warning-subtle: rgba(245, 158, 11, 0.18); --warning-text: #fbbf24; --danger: #ef4444; --danger-subtle: rgba(239, 68, 68, 0.18); --danger-text: #f87171; --info: #3b82f6; --info-subtle: rgba(59, 130, 246, 0.18); --info-text: #60a5fa; --neutral-subtle: rgba(255, 255, 255, 0.09); --neutral-text: var(--text-secondary); --category-indigo-subtle: rgba(129, 140, 248, 0.20); --category-indigo-text: #a5b4fc; --category-pink-subtle: rgba(244, 114, 182, 0.20); --category-pink-text: #f9a8d4; --category-purple-subtle: rgba(167, 139, 250, 0.20); --category-purple-text: #d8b4fe; --category-orange-subtle: rgba(251, 146, 60, 0.20); --category-orange-text: #fdba74; --category-teal-subtle: rgba(45, 212, 191, 0.20); --category-teal-text: #5eead4; --focus-ring: rgba(255, 122, 131, 0.55); --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.24); --elevation-2: 0 6px 20px -4px rgba(0, 0, 0, 0.36); --elevation-3: 0 18px 44px -8px rgba(0, 0, 0, 0.5); --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.30); --sidebar-bg: #16181c; --chart-1: #60a5fa; --chart-2: #fbbf24; --chart-3: #f472b6; --chart-4: #fb923c; --chart-5: #34d399; --chart-6: #2dd4bf; --chart-7: #a78bfa; --chart-grid: rgba(255, 255, 255, 0.08); --chart-label: #868c95; } } :root[data-theme="dark"] { color-scheme: dark; --bg-app: #0e0f11; --surface-1: #16181c; --surface-2: #1e2126; --surface-3: #24282e; --surface-4: #2a2f37; --surface-hover: rgba(255, 255, 255, 0.04); --surface-selected: rgba(241, 65, 79, 0.16); --overlay: rgba(0, 0, 0, 0.65); --border-hairline: rgba(255, 255, 255, 0.08); --surface-raise-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); --text-primary: #e8eaed; --text-secondary: #adb2ba; --text-tertiary: #868c95; --text-disabled: #565b63; --text-on-accent: #ffffff; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.11); --border-strong: rgba(255, 255, 255, 0.18); --accent: #f1414f; --accent-hover: #f65964; --accent-active: #d63643; --accent-subtle: rgba(241, 65, 79, 0.18); --accent-text: #ff7a83; --success: #10b981; --success-subtle: rgba(16, 185, 129, 0.16); --success-text: #34d399; --warning: #f59e0b; --warning-subtle: rgba(245, 158, 11, 0.18); --warning-text: #fbbf24; --danger: #ef4444; --danger-subtle: rgba(239, 68, 68, 0.18); --danger-text: #f87171; --info: #3b82f6; --info-subtle: rgba(59, 130, 246, 0.18); --info-text: #60a5fa; --neutral-subtle: rgba(255, 255, 255, 0.09); --neutral-text: var(--text-secondary); --category-indigo-subtle: rgba(129, 140, 248, 0.20); --category-indigo-text: #a5b4fc; --category-pink-subtle: rgba(244, 114, 182, 0.20); --category-pink-text: #f9a8d4; --category-purple-subtle: rgba(167, 139, 250, 0.20); --category-purple-text: #d8b4fe; --category-orange-subtle: rgba(251, 146, 60, 0.20); --category-orange-text: #fdba74; --category-teal-subtle: rgba(45, 212, 191, 0.20); --category-teal-text: #5eead4; --focus-ring: rgba(255, 122, 131, 0.55); --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.24); --elevation-2: 0 6px 20px -4px rgba(0, 0, 0, 0.36); --elevation-3: 0 18px 44px -8px rgba(0, 0, 0, 0.5); --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.30); --sidebar-bg: #16181c; --chart-1: #60a5fa; --chart-2: #fbbf24; --chart-3: #f472b6; --chart-4: #fb923c; --chart-5: #34d399; --chart-6: #2dd4bf; --chart-7: #a78bfa; --chart-grid: rgba(255, 255, 255, 0.08); --chart-label: #868c95; } @font-face { font-family: 'Google Sans'; src: url('/font/Google_Sans/static/GoogleSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Google Sans'; src: url('/font/Google_Sans/static/GoogleSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Google Sans'; src: url('/font/Google_Sans/static/GoogleSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Google Sans'; src: url('/font/Google_Sans/static/GoogleSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Google Sans'; src: url('/font/Google_Sans/static/GoogleSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Google Sans'; src: url('/font/Google_Sans/static/GoogleSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } /* Design tokens live in ./shared/styles/tokens.css */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Visible keyboard focus on every surface, light or dark. Pointer clicks are unaffected (:focus-visible only). */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; border-radius: var(--border-radius-xs); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent-subtle); color: var(--text-primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html, body, #root { height: 100%; width: 100%; } body { font-family: var(--font-family); font-size: var(--text-base); line-height: var(--leading-normal); letter-spacing: -0.003em; background-color: var(--bg-main); color: var(--text-main); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Utilities */ .card { background: var(--bg-card); border-radius: var(--border-radius-lg); border: 1px solid var(--border-hairline); box-shadow: var(--surface-raise-highlight); padding: 1.25rem; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } /* Custom Scrollbar for inner areas */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /** * Primary sidebar styling. * * A single `--sidebar-w` custom property drives the width so the expanded -> * collapsed transition animates one value. Presentation is switched entirely * through the `data-collapsed` / `data-mobile` / `data-open` attributes set by * the Sidebar component. */ .sidebar { --sidebar-w: 256px; --sidebar-fg: #9ba3b4; --sidebar-fg-strong: #ffffff; --sidebar-border: rgba(255, 255, 255, 0.07); --sidebar-hover: rgba(255, 255, 255, 0.07); --sidebar-active: var(--accent-subtle); position: relative; z-index: 40; display: flex; flex-direction: column; flex-shrink: 0; width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100%; /* Subtle top-lit depth instead of a flat fill, framed by a soft lift off the light content area. */ background: linear-gradient( 180deg, color-mix(in srgb, var(--sidebar-bg), white 8%) 0%, var(--sidebar-bg) 40%, color-mix(in srgb, var(--sidebar-bg), black 14%) 100% ); box-shadow: 6px 0 24px -12px rgba(0, 0, 0, 0.45); color: var(--sidebar-fg); transition: width 0.24s ease, min-width 0.24s ease, transform 0.24s ease; } .sidebar[data-collapsed='true'] { --sidebar-w: 76px; } /* ---------- Header ---------- */ .sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--sidebar-border); } .sidebar__brand { display: flex; align-items: center; color: var(--sidebar-fg-strong); text-decoration: none; } .sidebar__logo { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; object-fit: cover; } .sidebar__icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 8px; background: transparent; color: var(--sidebar-fg); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.24s ease; } .sidebar__icon-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); } .sidebar__icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .sidebar[data-collapsed='true'] .sidebar__header { flex-direction: column; gap: 8px; height: auto; padding: 14px 0; } .sidebar[data-collapsed='true'] .sidebar__brand { justify-content: center; } .sidebar[data-collapsed='true'] .sidebar__collapse-btn { transform: rotate(180deg); } /* ---------- Nav ---------- */ .sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 0; } .sidebar__nav::-webkit-scrollbar { width: 4px; } .sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; } .sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } .sidebar__group { display: flex; flex-direction: column; gap: 2px; } .sidebar__group + .sidebar__group { margin-top: 10px; } .sidebar__group-heading { margin: 0; padding: 8px 26px 6px; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; color: var(--sidebar-fg); opacity: 0.7; white-space: nowrap; overflow: hidden; } .sidebar[data-collapsed='true'] .sidebar__group-heading { height: 0; padding: 0; margin: 10px 16px; border-top: 1px solid var(--sidebar-border); } .sidebar[data-collapsed='true'] .sidebar__group:first-child .sidebar__group-heading { margin-top: 0; border-top: none; } /* ---------- Items ---------- */ .sidebar-item { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; margin: 0 12px; padding: 0 12px; border-radius: 10px; color: inherit; font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-item:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); } .sidebar-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .sidebar-item__icon { display: flex; flex-shrink: 0; transition: color 0.15s ease; } .sidebar-item__label { overflow: hidden; transition: opacity 0.16s ease; } .sidebar-item.is-active { background: var(--sidebar-active); color: var(--sidebar-fg-strong); font-weight: var(--weight-semibold); } .sidebar-item.is-active .sidebar-item__icon { color: var(--primary); } .sidebar-item.is-active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--primary); } .sidebar[data-collapsed='true'] .sidebar-item { width: 44px; margin: 0 auto; padding: 0; justify-content: center; } .sidebar[data-collapsed='true'] .sidebar-item__label { opacity: 0; width: 0; } .sidebar[data-collapsed='true'] .sidebar-item.is-active::before { left: -16px; } /* ---------- Footer ---------- */ .sidebar__footer { padding: 10px 0; border-top: 1px solid var(--sidebar-border); } /* ---------- Collapsed tooltip ---------- */ .sidebar-tooltip { position: fixed; left: 84px; transform: translateY(-50%); padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--sidebar-bg), black 25%); color: #ffffff; font-size: 0.78rem; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 1000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .sidebar-tooltip::before { content: ''; position: absolute; left: -3px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); background: inherit; } /* ---------- Mobile overlay ---------- */ .sidebar-trigger { position: fixed; top: 14px; left: 14px; z-index: 45; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-main); box-shadow: var(--shadow-sm); cursor: pointer; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(15, 18, 26, 0.5); animation: sidebar-backdrop-in 0.2s ease; } @keyframes sidebar-backdrop-in { from { opacity: 0; } } .sidebar[data-mobile='true'] { --sidebar-w: 264px; position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); } .sidebar[data-mobile='true'][data-open='true'] { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .sidebar, .sidebar *, .sidebar__icon-btn, .sidebar-item, .sidebar-item__label { transition: none !important; animation: none !important; } } .cmdk { position: fixed; inset: 0; z-index: 3000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; } .cmdk__panel { width: 100%; max-width: 680px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border-default); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-overlay); animation: cmdk-rise 0.14s ease; } @keyframes cmdk-rise { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Field ---- */ .cmdk__field { display: flex; align-items: center; gap: 0.75rem; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--border-subtle); } .cmdk__field-icon { color: var(--text-tertiary); flex-shrink: 0; } .cmdk__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text-primary); font-size: 1rem; font-family: inherit; } .cmdk__input::placeholder { color: var(--text-tertiary); } .cmdk__esc, .cmdk__foot kbd { font-family: inherit; font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--border-radius-xs); padding: 0.125rem 0.375rem; line-height: 1.4; } /* ---- List ---- */ .cmdk__list { flex: 1; overflow-y: auto; padding: 0.5rem; } .cmdk__empty { padding: 2rem 1rem; text-align: center; color: var(--text-tertiary); font-size: 0.875rem; } .cmdk__section+.cmdk__section { margin-top: 0.25rem; } .cmdk__section-title { padding: 0.5rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .cmdk__item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background: transparent; color: var(--text-secondary); font-size: 0.9375rem; font-family: inherit; text-align: left; cursor: pointer; } .cmdk__item.is-active { background: var(--accent-subtle); color: var(--text-primary); } .cmdk__item-icon { display: flex; flex-shrink: 0; color: var(--text-tertiary); } .cmdk__item.is-active .cmdk__item-icon { color: var(--accent-text); } .cmdk__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; } .cmdk__item-label { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-sub { font-size: 0.75rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-tag { flex-shrink: 0; font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: var(--border-radius-xs); background: var(--surface-2); color: var(--text-secondary); text-transform: capitalize; } .cmdk__item-hint, .cmdk__item-enter { flex-shrink: 0; color: var(--text-tertiary); } .cmdk__item-hint { opacity: 0; } .cmdk__item.is-active .cmdk__item-hint { opacity: 0; } .cmdk__item-enter { color: var(--accent-text); } /* ---- Footer ---- */ .cmdk__foot { display: flex; gap: 1rem; padding: 0.625rem 1rem; border-top: 1px solid var(--border-subtle); font-size: 0.75rem; color: var(--text-tertiary); } .cmdk__foot span { display: inline-flex; align-items: center; gap: 0.3125rem; } @media (max-width: 640px) { .cmdk { padding-top: 8vh; } .cmdk__foot { display: none; } }/* Application header — command-first top bar. See TopNav.tsx. */ .topnav { position: sticky; top: 0; left: 0; z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: 68px; padding-inline: clamp(1.25rem, 2.4vw, 2.5rem); background: color-mix(in srgb, var(--surface-1) 82%, transparent); backdrop-filter: blur(12px) saturate(1.5); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.5); } .topnav__command { grid-column: 2; width: clamp(320px, 42vw, 620px); margin-inline: auto; display: flex; align-items: center; gap: 0.625rem; height: 46px; padding: 0 0.625rem 0 1rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-lg); background: var(--surface-2); color: var(--text-tertiary); font-family: inherit; cursor: text; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .topnav__command:hover { border-color: var(--border-strong); background: var(--surface-1); } .topnav__command:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .topnav__command-icon { flex-shrink: 0; } .topnav__command-text { flex: 1; text-align: left; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topnav__kbd { flex-shrink: 0; margin-left: auto; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); padding: 0.1875rem 0.4375rem; line-height: 1.35; } /* ---- Right: actions ---- */ .topnav__actions { grid-column: 3; display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; } .topnav__menu-anchor { position: relative; } .topnav__new { display: flex; align-items: center; gap: 0.5rem; height: 42px; padding: 0 0.875rem 0 1rem; border: none; border-radius: var(--border-radius-md); background: var(--primary); color: var(--text-on-accent); font-family: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .topnav__new:hover { background: var(--primary-hover); } .topnav__new-caret { transition: transform 0.15s ease; } .topnav__new-caret.is-open { transform: rotate(180deg); } .topnav__icon-btn { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .topnav__icon-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-primary); } .topnav__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--danger); color: #ffffff; font-size: 10px; font-weight: 700; border: 2px solid var(--surface-1); } /* ---- Popovers ---- */ .topnav__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1000; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); overflow: hidden; animation: dropdownFadeIn 0.16s ease; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .topnav__pop--menu { min-width: 184px; padding: 0.375rem; } .topnav__menu-item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: none; border-radius: var(--border-radius-sm); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; } .topnav__menu-item svg { color: var(--text-tertiary); flex-shrink: 0; } .topnav__menu-item:hover { background: var(--surface-hover); color: var(--text-primary); } .topnav__menu-item:hover svg { color: var(--accent-text); } /* ---- Notifications popover ---- */ .topnav__pop--notif { width: 360px; max-height: min(70vh, 520px); display: flex; flex-direction: column; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .notif-head-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); } .notif-head-actions { display: flex; align-items: center; gap: 0.25rem; } .notif-mark { display: flex; align-items: center; gap: 0.25rem; border: none; background: transparent; color: var(--accent-text); font-family: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer; padding: 0.25rem 0.375rem; border-radius: var(--border-radius-xs); } .notif-mark:hover { background: var(--surface-hover); } .notif-close { display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; padding: 0.25rem; border-radius: var(--border-radius-xs); } .notif-close:hover { background: var(--surface-hover); color: var(--text-primary); } .notif-list { flex: 1; overflow-y: auto; padding: 0.25rem; } .notif-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-tertiary); font-size: 0.875rem; } .notif-item { display: flex; gap: 0.75rem; width: 100%; padding: 0.625rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background: transparent; font-family: inherit; text-align: left; cursor: pointer; position: relative; } .notif-item:hover { background: var(--surface-hover); } .notif-item.is-unread { background: var(--surface-2); } .notif-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; } .notif-item-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); } .notif-item.is-unread .notif-item-title { font-weight: 600; } .notif-item-msg { font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-item-time { font-size: 0.6875rem; color: var(--text-disabled); margin-top: 0.125rem; } .notif-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 0.375rem; } .notif-foot { width: 100%; padding: 0.75rem 1rem; border: none; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--accent-text); font-family: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-align: center; flex-shrink: 0; } .notif-foot:hover { background: var(--surface-hover); } /* ---- Profile menu ---- */ .user-profile { position: relative; } .user-profile-trigger { display: flex; align-items: center; gap: 0.625rem; height: 42px; padding: 0 0.5rem 0 0.375rem; border: 1px solid transparent; background: transparent; border-radius: var(--border-radius-md); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .user-profile-trigger:hover { background: var(--surface-2); border-color: var(--border-default); } .avatar { width: 34px; height: 34px; background-color: var(--surface-2); border: 1px solid var(--border-default); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); flex-shrink: 0; } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .avatar-initial { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; } .user-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-skeleton, .user-name-skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; border-color: transparent; } .user-name-skeleton { display: inline-block; width: 72px; height: 0.875rem; border-radius: 4px; } @keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .dropdown-icon { color: var(--text-tertiary); flex-shrink: 0; } .profile-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 288px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownFadeIn 0.16s ease; } .profile-dropdown-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; } .profile-avatar-large { width: 48px; height: 48px; background-color: var(--surface-2); border: 1px solid var(--border-default); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); flex-shrink: 0; } .profile-info { flex: 1; min-width: 0; } .profile-dropdown .profile-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-dropdown .profile-email { font-size: 0.8125rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-dropdown .profile-role { font-size: 0.6875rem; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.125rem; } .profile-dropdown-divider { height: 1px; background: var(--border-subtle); } .profile-dropdown-links, .profile-dropdown-footer { padding: 0.5rem 0; } .profile-dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.625rem 1rem; border: none; background: transparent; cursor: pointer; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; text-align: left; transition: background 0.15s; } .profile-dropdown-item:hover { background: var(--surface-hover); } .profile-dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .profile-dropdown-item.logout-item, .profile-dropdown-item.logout-item svg { color: var(--danger-text); } /* Appearance (theme) selector */ .profile-theme { padding: 0.75rem 1rem; } .profile-theme__label { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .profile-theme__options { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-md); } .profile-theme__option { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem; border: none; border-radius: var(--border-radius-sm); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; } .profile-theme__option:hover { color: var(--text-primary); background: var(--surface-hover); } .profile-theme__option.is-active, .profile-theme__option.is-active:hover { background: var(--accent-subtle); color: var(--accent-text); } .profile-theme__option.is-active svg { color: var(--accent-text); } /* ---- Responsive ---- */ @media (max-width: 900px) { .topnav { height: 60px; padding-left: 68px; gap: 0.875rem; } .topnav__command { height: 42px; } } @media (max-width: 640px) { .topnav { gap: 0.625rem; } .topnav__command { flex: 0 0 auto; width: 42px; max-width: none; margin: 0; padding: 0; justify-content: center; } .topnav__command-text, .topnav__kbd { display: none; } .topnav__new-label { display: none; } .topnav__new { padding: 0 0.5rem; } .user-name, .dropdown-icon { display: none; } .topnav__pop--notif { width: calc(100vw - 1.5rem); } }.select-search-container { position: relative; width: 100%; } .select-search-value { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: 0.375rem; background-color: var(--surface-2); cursor: pointer; user-select: none; font-size: 0.875rem; color: var(--text-primary); transition: border-color 0.15s ease-in-out; min-height: 2.25rem; } .select-search-container.error .select-search-value { border-color: var(--danger); } .select-search-value.is-placeholder { color: var(--text-tertiary); } .select-search-value:hover { border-color: var(--border-strong); } .select-search-value.open { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .select-search-container.disabled .select-search-value { background-color: var(--surface-1); color: var(--text-disabled); cursor: not-allowed; border-color: var(--border-default); } .select-search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: var(--surface-3); border: 1px solid var(--border-default); border-radius: 0.375rem; box-shadow: var(--elevation-2); z-index: 50; overflow: hidden; } .select-search-input-wrapper { position: relative; padding: 0.5rem; border-bottom: 1px solid var(--border-subtle); background-color: var(--surface-2); } .select-search-input-wrapper .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; } .select-search-input-wrapper .select-search-input { width: 100%; padding: 0.375rem 0.5rem 0.375rem 2.25rem !important; border: 1px solid var(--border-default); border-radius: 0.25rem; font-size: 0.8125rem; outline: none; box-sizing: border-box; background-color: var(--surface-1); color: var(--text-primary); } .select-search-input-wrapper .select-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .select-search-options { max-height: 200px; overflow-y: auto; } .select-search-option { padding: 0.5rem 0.75rem; font-size: 0.875rem; cursor: pointer; color: var(--text-secondary); } .select-search-option:hover { background-color: var(--surface-hover); } .select-search-option.selected { background-color: var(--info-subtle); color: var(--info-text); font-weight: 500; } .select-search-option.empty { color: var(--text-tertiary); cursor: default; font-style: italic; text-align: center; padding: 1rem; } .select-search-option.empty:hover { background-color: transparent; } .preview-drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); z-index: 1000; display: flex; justify-content: flex-end; pointer-events: none; } .preview-drawer-overlay.visible { background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; animation: previewOverlayFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes previewOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } } .preview-drawer-panel { position: absolute; top: 0; right: 0; width: 90%; height: 100%; background-color: var(--bg-card, #ffffff); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .preview-drawer-panel.animating { transform: translateX(0); } .preview-drawer-overlay.visible .preview-drawer-panel { transform: translateX(0); } .preview-canvas-content { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; background: var(--surface-bg, var(--surface-2)); } .preview-subtitle { font-size: 0.9rem; color: var(--text-secondary, var(--text-muted)); margin-bottom: 2rem; } .preview-sections { display: flex; flex-direction: column; gap: 2rem; } .preview-section { background: var(--surface-1); border: 1px solid var(--border-color, var(--border-color)); border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .preview-section-title { font-size: 1rem; font-weight: 600; color: var(--text-primary, var(--text-primary)); margin: 0 0 1.25rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color, var(--border-color)); } .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .preview-field { display: flex; flex-direction: column; gap: 0.35rem; } .preview-field-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--text-tertiary, var(--text-tertiary)); } .preview-field-value { font-size: 0.9rem; color: var(--text-primary, var(--text-primary)); font-weight: 500; word-break: break-word; } .preview-field-empty { color: var(--text-tertiary, var(--text-tertiary)); font-style: italic; font-weight: 400; } /* Footer & Actions */ .preview-canvas-footer { padding: 1rem 2rem; background: var(--surface-1); border-top: 1px solid var(--border-color, var(--border-color)); display: flex; justify-content: space-between; align-items: center; } .preview-footer-actions { display: flex; gap: 0.75rem; } .preview-icon { margin-right: 0.5rem; } .preview-icon.spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .preview-btn-edit, .preview-btn-cancel, .preview-btn-save { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; border: none; } .preview-btn-edit { background: transparent; color: var(--text-secondary, var(--text-secondary)); } .preview-btn-edit:hover:not(:disabled) { background: var(--bg-hover, var(--surface-2)); color: var(--text-primary, var(--text-primary)); } .preview-btn-cancel { background: transparent; color: var(--error-color, var(--danger)); border: 1px solid var(--error-border, var(--danger)); } .preview-btn-cancel:hover:not(:disabled) { background: var(--danger-subtle); } .preview-btn-save { background: var(--primary-color, var(--info)); color: white; } .preview-btn-save:hover:not(:disabled) { background: var(--primary-hover, var(--info-text)); } .preview-btn-edit:disabled, .preview-btn-cancel:disabled, .preview-btn-save:disabled { opacity: 0.6; cursor: not-allowed; } /* Responsive Overrides */ @media (max-width: 640px) { .preview-drawer-panel { max-width: 100vw; } .preview-canvas-content { padding: 1rem; } .preview-canvas-footer { flex-direction: column; padding: 1rem; gap: 1rem; } .preview-footer-actions { width: 100%; justify-content: space-between; } .preview-btn-edit { width: 100%; } .preview-btn-cancel, .preview-btn-save { flex: 1; } } .toast-notification { bottom: auto !important; top: 2rem !important; animation: toastSlideDown 0.3s ease !important; } @keyframes toastSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100; display: flex; justify-content: flex-end; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer-panel { width: 400px; max-width: 90%; height: 100%; background-color: var(--bg-card); display: flex; flex-direction: column; box-shadow: var(--shadow-md); animation: slideIn 0.3s ease; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .drawer-header h2 { font-size: 1rem; font-weight: 600; color: var(--text-main); } .drawer-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); } .drawer-close:hover { background-color: var(--bg-main); color: var(--text-main); } .drawer-body { flex: 1; overflow-y: auto; padding: 1.5rem; } .lead-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.375rem; } .form-group label { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .form-group input, .form-group select, .form-group textarea { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--bg-card); color: var(--text-main); font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } .form-group input:disabled { background-color: var(--bg-main); color: var(--text-muted); cursor: not-allowed; } .form-group textarea { resize: vertical; min-height: 80px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .drawer-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); } .drawer-footer .btn { padding: 0.5rem 1rem; border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border-color); } .drawer-footer .btn-secondary { background-color: var(--bg-card); color: var(--text-main); } .drawer-footer .btn-secondary:hover { background-color: var(--bg-main); } .drawer-footer .btn-primary { background-color: var(--primary); color: white; border-color: var(--primary); } .drawer-footer .btn-primary:hover { background-color: var(--primary-hover); } .form-section-title { font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .error-text { font-size: 0.75rem; color: var(--primary); margin-top: 0.25rem; } .form-group input.error, .form-group select.error { border-color: var(--primary); } .phone-field-group { display: flex; gap: 0.5rem; } .phone-field-group .phone-country-code { flex: 0 0 auto; width: auto; max-width: 40%; } .phone-field-group input { flex: 1; min-width: 0; } .dropdown-search-container { position: relative; } .search-input-wrapper { position: relative; } .search-input-wrapper input { width: 100%; padding-left: 2rem; } .search-input-wrapper .search-icon-inner { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .dropdown-list { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md); z-index: 10; margin-top: 0.25rem; } .dropdown-list button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; background: transparent; font-size: 0.875rem; color: var(--text-main); cursor: pointer; text-align: left; } .dropdown-list button:hover { background-color: var(--bg-main); } .dropdown-loading { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text-muted); } .dropdown-no-results { padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text-muted); } @keyframes spin { to { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; } .selected-leads-list { display: flex; flex-direction: column; gap: 0.5rem; } .selected-leads-list label { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .leads-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lead-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); font-size: 0.75rem; color: var(--text-main); } .lead-tag button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .lead-tag button:hover { color: var(--primary); } .dropdown-list button:hover { background-color: var(--bg-main); } .additional-fields-heading { margin-bottom: 1rem; font-size: 1rem; font-weight: 600; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; cursor: pointer; font-size: 0.875rem; }.layout-container { display: flex; height: 100vh; width: 100vw; overflow: hidden; background-color: var(--bg-main); } .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .page-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; /* Horizontal overflow is owned by .page-body, not the whole column, so the sticky header never stretches past the viewport or scrolls sideways. */ overflow-x: hidden; position: relative; } .page-body { flex: 1; min-width: 0; overflow-x: auto; transition: opacity 0.15s ease; } .page-loader { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 100; } .loader-spinner { width: 48px; height: 48px; border: 4px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; box-shadow: var(--elevation-1); } @keyframes spin { to { transform: rotate(360deg); } } .auth-page { min-height: 100vh; display: flex; position: relative; overflow: hidden; } .auth-slider { display: flex; width: 200%; height: 100vh; transition: transform 0.3s ease; } .auth-slide { width: 50%; height: 100vh; flex-shrink: 0; } /* Desktop: show both panels side by side */ @media (min-width: 901px) { .auth-slider { width: 100%; } .auth-slide { width: 50%; } } /* The visual panel is intentionally a dark brand-red showcase in every theme. */ .auth-visual-panel { flex: 1; background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #450a0a 100%) !important; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; } .visual-content { position: relative; z-index: 10; } .visual-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 4rem; } .logo-mark { width: 48px; height: 48px; background: #ffffff; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #dc2626; font-weight: 800; font-size: 0.875rem; letter-spacing: -0.5px; } .logo-text { color: #ffffff; font-size: 1.5rem; font-weight: 600; } .visual-message { margin-bottom: 3rem; } .visual-message h2 { color: #ffffff; font-size: 2rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.2; } .visual-message p { color: rgba(255, 255, 255, 0.85); font-size: 1.0625rem; line-height: 1.6; margin: 0; max-width: 380px; } .visual-features { display: flex; flex-direction: column; gap: 1rem; } .feature-item { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.8); font-size: 0.9375rem; } .feature-item svg { color: rgba(255, 255, 255, 0.9); } .content-display { display: flex; flex-direction: column; align-items: flex-start; min-height: 220px; } .content-display .content-icon { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #ffffff; } .content-display h2 { color: #ffffff; font-size: 1.75rem; font-weight: 700; margin: 0 0 0.75rem; line-height: 1.2; } .content-display p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 380px; } .content-dots { display: flex; gap: 0.5rem; margin-top: 2rem; } .content-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; cursor: pointer; transition: all 0.3s; padding: 0; } .content-dot.active { background: #ffffff; transform: scale(1.3); } .content-dot:hover:not(.active) { background: rgba(255, 255, 255, 0.7); } .visual-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%); } .auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface-1); } .auth-card { width: 100%; max-width: 400px; } .auth-header { margin-bottom: 2.5rem; } .auth-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .auth-header p { color: var(--text-tertiary); font-size: 0.9375rem; margin: 0; } .auth-form { display: flex; flex-direction: column; gap: 1.5rem; } .auth-error { background: var(--danger-subtle); color: var(--danger-text); padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.875rem; border: 1px solid var(--danger); } .auth-form-group { display: flex; flex-direction: column; gap: 0.5rem; } .auth-form-group label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); } .input-wrapper-with-icon { position: relative; display: flex; align-items: center; width: 100%; height: 48px; } .input-wrapper-with-icon .input-icon-left { position: absolute; left: 14px; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; z-index: 10; } .input-wrapper-with-icon .input-icon-right { position: absolute; right: 14px; background: none; border: none; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 10; transition: color 0.2s; } .input-wrapper-with-icon .input-icon-right:hover { color: var(--text-secondary); } .input-wrapper-with-icon .form-input { width: 100%; height: 100%; padding: 0 44px 0 44px; border: 1px solid var(--border-default); border-radius: 10px; font-size: 0.9375rem; color: var(--text-primary); background: var(--surface-2); outline: none; transition: all 0.2s; } .input-wrapper-with-icon .form-input::placeholder { color: var(--text-tertiary); } .input-wrapper-with-icon .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .form-options { display: flex; justify-content: space-between; align-items: center; } .remember-me { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-tertiary); cursor: pointer; } .remember-me input { width: 16px; height: 16px; accent-color: var(--primary); } .forgot-link { background: none; border: none; font-size: 0.875rem; color: var(--accent-text); cursor: pointer; text-decoration: none; font-weight: 500; } .forgot-link:hover { text-decoration: underline; } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--primary); color: var(--text-on-accent); border: none; padding: 0.9375rem 1.5rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 0.5rem; } .auth-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-subtle); } .auth-btn:disabled { opacity: 0.7; cursor: not-allowed; } .auth-btn .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .auth-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-default); text-align: center; } .auth-footer p { font-size: 0.875rem; color: var(--text-tertiary); margin: 0; } /* Desktop: side by side layout */ @media (min-width: 901px) { .auth-slider { width: 100%; transform: none !important; } .auth-slide { width: 50%; } .pagination-dots { display: none !important; } .auth-visual-panel { display: flex !important; } } /* Mobile/Tablet: swipe behavior */ @media (max-width: 900px) { .auth-page { flex-direction: column; } .auth-slider { width: 100%; } .auth-slide { width: 100%; } .pagination-dots { display: flex; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); gap: 0.5rem; z-index: 100; } .auth-visual-panel { display: none; } /* When swiped to visual panel */ .auth-visual-panel.shown { display: flex; } } /* Pagination Dots */ .pagination-dots { display: none; } .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; cursor: pointer; transition: all 0.2s; padding: 0; } .dot.active { background: #ffffff; transform: scale(1.25); } .dot:hover:not(.active) { background: rgba(255, 255, 255, 0.7); } /* Social Login */ .social-login { margin-top: 1.5rem; } .social-divider { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); } .social-divider span { font-size: 0.8125rem; color: var(--text-tertiary); white-space: nowrap; } .social-buttons { display: flex; gap: 0.75rem; } .social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-1); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .social-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); } .signup-link { background: none; border: none; color: var(--accent-text); font-weight: 600; cursor: pointer; text-decoration: none; font-size: inherit; } .signup-link:hover { text-decoration: underline; } .auth-page { min-height: 100vh; display: flex; } .auth-visual-panel { flex: 1; background: #1e293b; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; } .visual-content { position: relative; z-index: 10; } .visual-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 4rem; } .logo-mark { width: 48px; height: 48px; background: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 0.875rem; letter-spacing: -0.5px; } .logo-text { color: #ffffff; font-size: 1.5rem; font-weight: 600; } .visual-message { margin-bottom: 3rem; } .visual-message h2 { color: #ffffff; font-size: 2rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.2; } .visual-message p { color: rgba(255, 255, 255, 0.65); font-size: 1.0625rem; line-height: 1.6; margin: 0; max-width: 380px; } .visual-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 60%); } .auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface-1); } .auth-card { width: 100%; max-width: 400px; } .auth-back-link { display: flex; align-items: center; gap: 0.375rem; background: none; border: none; color: var(--text-tertiary); font-size: 0.875rem; cursor: pointer; margin-bottom: 1.5rem; padding: 0; transition: color 0.2s; } .auth-back-link:hover { color: var(--text-primary); } .auth-header { margin-bottom: 2rem; } .auth-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .auth-header p { color: var(--text-tertiary); font-size: 0.9375rem; margin: 0; } .auth-form { display: flex; flex-direction: column; gap: 1.5rem; } .auth-error { background: var(--danger-subtle); color: var(--danger-text); padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.875rem; border: 1px solid var(--danger); } .auth-form-group { display: flex; flex-direction: column; gap: 0.5rem; } .auth-form-group label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); } .input-wrapper-with-icon { position: relative; display: flex; align-items: center; width: 100%; height: 48px; } .input-wrapper-with-icon .input-icon-left { position: absolute; left: 14px; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; z-index: 10; } .input-wrapper-with-icon .form-input { width: 100%; height: 100%; padding: 0 1rem 0 44px; border: 1px solid var(--border-default); border-radius: 10px; font-size: 0.9375rem; color: var(--text-primary); background: var(--surface-2); outline: none; transition: all 0.2s; } .input-wrapper-with-icon .form-input::placeholder { color: var(--text-tertiary); } .input-wrapper-with-icon .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--primary); color: #ffffff; border: none; padding: 0.9375rem 1.5rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 0.5rem; } .auth-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-subtle); } .auth-btn:disabled { opacity: 0.7; cursor: not-allowed; } .auth-btn .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .success-animation { display: flex; justify-content: center; color: var(--success); margin-bottom: 1.5rem; animation: scaleIn 0.3s ease; } @keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .auth-card h1 { text-align: center; font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .auth-card > p { text-align: center; color: var(--text-tertiary); font-size: 0.9375rem; margin: 0; } .phone-highlight { font-weight: 600 !important; color: var(--accent-text) !important; } .resend-text { text-align: center; color: var(--text-tertiary); font-size: 0.875rem; margin-top: 0.75rem; } .resend-link { background: none; border: none; color: var(--accent-text); cursor: pointer; font-size: 0.875rem; text-decoration: underline; font-weight: 500; } .auth-back-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; background: var(--surface-2); color: var(--text-primary); border: none; padding: 0.9375rem 1.5rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 500; cursor: pointer; margin-top: 2rem; transition: background 0.2s; } .auth-back-btn:hover { background: var(--surface-hover); } @media (max-width: 900px) { .auth-page { flex-direction: column; } .auth-visual-panel { display: none; } .auth-form-panel { min-height: 100vh; } }.auth-page { min-height: 100vh; display: flex; } .auth-visual-panel { flex: 1; background: #1e293b; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; } .visual-content { position: relative; z-index: 10; } .visual-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 4rem; } .logo-mark { width: 48px; height: 48px; background: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 0.875rem; letter-spacing: -0.5px; } .logo-text { color: #ffffff; font-size: 1.5rem; font-weight: 600; } .visual-message { margin-bottom: 3rem; } .visual-message h2 { color: #ffffff; font-size: 2rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.2; } .visual-message p { color: rgba(255, 255, 255, 0.65); font-size: 1.0625rem; line-height: 1.6; margin: 0; max-width: 380px; } .visual-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 60%); } .auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface-1); } .auth-card { width: 100%; max-width: 400px; } .auth-header { margin-bottom: 2rem; } .auth-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .auth-header p { color: var(--text-tertiary); font-size: 0.9375rem; margin: 0; } .auth-form { display: flex; flex-direction: column; gap: 1.5rem; } .auth-error { background: var(--danger-subtle); color: var(--danger-text); padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.875rem; border: 1px solid var(--danger); } .auth-form-group { display: flex; flex-direction: column; gap: 0.5rem; } .auth-form-group label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 1rem; color: var(--text-tertiary); pointer-events: none; } .form-input { width: 100%; padding: 0.875rem 1rem; padding-left: 2.75rem; border: 1px solid var(--border-default); border-radius: 10px; font-size: 0.9375rem; color: var(--text-primary); transition: all 0.2s; background: var(--surface-2); } .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .form-input::placeholder { color: var(--text-tertiary); } .password-toggle { position: absolute; right: 1rem; background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .password-toggle:hover { color: var(--text-tertiary); } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--primary); color: #ffffff; border: none; padding: 0.9375rem 1.5rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 0.5rem; } .auth-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-subtle); } .auth-btn:disabled { opacity: 0.7; cursor: not-allowed; } .auth-btn .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .success-animation { display: flex; justify-content: center; color: var(--success); margin-bottom: 1.5rem; animation: scaleIn 0.3s ease; } @keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .auth-card h1 { text-align: center; font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .auth-card > p { text-align: center; color: var(--text-tertiary); font-size: 0.9375rem; margin: 0; } .login-link-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; background: var(--text-primary); color: #ffffff; border: none; padding: 0.9375rem 1.5rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; margin-top: 2rem; transition: all 0.2s; } .login-link-btn:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 900px) { .auth-page { flex-direction: column; } .auth-visual-panel { display: none; } .auth-form-panel { min-height: 100vh; } }.dashboard-content { display: flex; flex-direction: column; gap: 1.5rem; /* padding now handled by PageContainer */ } .dashboard-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; margin-bottom: 20px; } .dashboard-title { font-size: 1.125rem; font-weight: 700; color: var(--text-main); padding-left: 0.75rem; border-left: 4px solid var(--primary); } .dashboard-filters { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .date-buttons { display: flex; gap: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; } .date-btn { padding: 0.375rem 0.75rem; border: none; background: var(--bg-card); font-size: 0.75rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.2s; border-right: 1px solid var(--border-color); } .date-btn:last-child { border-right: none; } .date-btn:hover { background: var(--bg-main); } .date-btn.active { background: var(--primary); color: #ffffff; } .custom-date-range { display: flex; align-items: center; gap: 0.5rem; } .date-input { padding: 0.375rem 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.75rem; background: var(--bg-card); color: var(--text-main); } .date-separator { font-size: 0.75rem; color: var(--text-muted); } .date-range-error { font-size: 0.75rem; color: var(--primary-hover); } .filter-dropdown { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); font-size: 0.75rem; font-weight: 500; color: var(--text-main); cursor: pointer; } .filter-select { border: none; background: transparent; font-size: 0.75rem; font-weight: 500; color: var(--text-main); cursor: pointer; outline: none; padding: 0; min-width: 60px; } .filter-label { color: var(--text-muted); } .filter-icon { color: var(--text-muted); } .widgets-grid { display: grid; gap: 1rem; margin-bottom: 20px; } .top-cards-grid { grid-template-columns: repeat(4, 1fr) 1.2fr 1.2fr; } .middle-cards-grid { grid-template-columns: repeat(4, 1fr); } .bottom-cards-grid { grid-template-columns: repeat(4, 1fr); } /* Adjustments for right alignment of filters with 2nd row */ .top-cards-grid { margin-bottom: 2rem; } /* Responsive adjustments */ @media (max-width: 1400px) { .top-cards-grid { grid-template-columns: repeat(3, 1fr); } .middle-cards-grid { grid-template-columns: repeat(2, 1fr); } .bottom-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .top-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .top-cards-grid { grid-template-columns: 1fr; } .middle-cards-grid { grid-template-columns: 1fr; } .bottom-cards-grid { grid-template-columns: 1fr; } .dashboard-header { grid-template-columns: 1fr; } }.page-container { padding: 1.5rem; background: var(--bg-main); min-height: calc(100vh - 60px); } @media (max-width: 768px) { .page-container { padding: 1rem; } }/* FeesManagementBanner.css */ .fees-banner-container { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--sidebar-bg), #1a1e27); border-radius: var(--border-radius-lg); padding: 1.5rem 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-md); color: #ffffff; min-height: 180px; /* approximately 5cm depending on DPI, gives substantial visual weight */ gap: 1.5rem; } .fees-banner-content { display: flex; align-items: flex-start; gap: 1.5rem; } .fees-banner-icon { background: rgba(241, 65, 79, 0.2); /* var(--primary) with opacity */ padding: 1rem; border-radius: 50%; color: var(--primary); display: flex; align-items: center; justify-content: center; } .fees-banner-text { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .fees-banner-title { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.2; } .fees-banner-description { font-size: 1rem; color: var(--text-tertiary); margin: 0; line-height: 1.5; max-width: 600px; } .fees-banner-action { flex-shrink: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; max-width: 200px; transform: scale(1); overflow: hidden; } .fees-banner-action--hidden { opacity: 0; max-width: 0; margin-left: 0; padding: 0; transform: scale(0.9); pointer-events: none; } .fees-banner-btn { background-color: var(--primary); color: #ffffff; border: none; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: var(--border-radius-sm); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .fees-banner-btn:hover { background-color: var(--primary-hover); } .fees-banner-btn:active { transform: scale(0.98); } /* Responsive */ @media (max-width: 768px) { .fees-banner-container { flex-direction: column; align-items: stretch; text-align: center; padding: 1.5rem; min-height: auto; } .fees-banner-content { flex-direction: column; align-items: center; gap: 1rem; } .fees-banner-action { display: flex; justify-content: center; margin-top: 1rem; } .fees-banner-btn { width: 100%; justify-content: center; } } .widget-base { display: flex; flex-direction: column; height: 300px; border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); border-top: 4px solid var(--chart-blue); padding: 1.5rem; background: var(--bg-card); box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .widget-base:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .widget-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text-main); } .list-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); } .list-item-left { display: flex; align-items: center; gap: 0.5rem; } .color-box { width: 12px; height: 12px; border-radius: 2px; } .list-item-value { font-weight: 600; color: var(--text-main); } /* Scrollable lists */ .list-container { overflow-y: auto; flex: 1; padding-right: 0.5rem; } .widget-status-text { font-size: 0.75rem; color: var(--text-muted); } /* Title + inline control (e.g. a currency toggle) on one row. Carries the same bottom spacing .widget-title has on its own. */ .widget-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; } .widget-header .widget-title { margin-bottom: 0; } .widget-inline-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-main); font-size: 0.75rem; font-weight: 600; cursor: pointer; } .activities-statistics-widget { grid-column: 1 / -1; height: auto; min-height: 300px; } .activities-statistics-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; flex: 1; min-height: 0; } .activities-statistics-column { display: flex; flex-direction: column; min-width: 0; } .activities-statistics-column-title { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; } @media (max-width: 768px) { .activities-statistics-columns { grid-template-columns: 1fr; } } /* Widget accent colors */ .middle-cards-grid .widget-base:nth-child(1) { border-top-color: var(--chart-blue); } .middle-cards-grid .widget-base:nth-child(2) { border-top-color: var(--chart-green); } .middle-cards-grid .widget-base:nth-child(3) { border-top-color: var(--chart-yellow); } .middle-cards-grid .widget-base:nth-child(4) { border-top-color: var(--chart-purple); } .bottom-cards-grid .widget-base:nth-child(1) { border-top-color: var(--chart-teal); } .bottom-cards-grid .widget-base:nth-child(2) { border-top-color: var(--chart-orange); } .bottom-cards-grid .widget-base:nth-child(3) { border-top-color: var(--chart-pink); } .bottom-cards-grid .widget-base:nth-child(4) { border-top-color: var(--chart-blue); }.skeleton { display: inline-block; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--border-radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.6; } } .lead-purpose-widget .purpose-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; } .purpose-item { display: flex; flex-direction: column; gap: 0.5rem; } .purpose-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; } .purpose-label { color: var(--text-muted); } .purpose-value { font-weight: 600; color: var(--text-main); } .purpose-bar-bg { width: 100%; height: 4px; background-color: var(--surface-2); border-radius: 2px; overflow: hidden; } .purpose-bar-fill { height: 100%; border-radius: 2px; } .tasks-widget { display: flex; flex-direction: column; } .tasks-overall { margin-bottom: 2rem; } .tasks-big-number { font-size: 2.5rem; font-weight: 700; color: var(--text-main); } .tasks-stats { display: flex; flex-direction: column; gap: 1.5rem; } .task-stat-item { display: flex; flex-direction: column; gap: 0.5rem; } .task-stat-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; } .task-stat-label { color: var(--text-muted); } .task-stat-value { font-weight: 600; color: var(--text-main); } .task-bar-bg { width: 100%; height: 4px; background-color: var(--surface-2); border-radius: 2px; overflow: hidden; } .task-bar-fill { height: 100%; border-radius: 2px; } .activities-widget .activities-list { display: flex; flex-direction: column; padding-left: 2rem; margin-top: 0.5rem; } .activity-item { display: flex; position: relative; padding-bottom: 2rem; } .timeline-dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--border-strong); position: absolute; left: -24px; top: 4px; z-index: 2; border: 2px solid white; } .timeline-dot-highlight { background-color: var(--text-main); } .timeline-line { position: absolute; left: -19px; top: 16px; width: 2px; height: calc(100% - 10px); background-color: var(--border-default); z-index: 1; } .activity-content { display: flex; flex-direction: column; } .activity-title { font-size: 0.875rem; font-weight: 500; color: var(--text-main); margin-bottom: 0.25rem; } .activity-time { font-size: 0.75rem; color: var(--text-muted); } .stat-card, .kpi-card { display: flex; flex-direction: column; justify-content: space-between; height: 100px; border-radius: var(--border-radius-lg); border-left: 4px solid var(--chart-blue); box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .stat-card:hover, .kpi-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .stat-value, .kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.5rem; margin-top: 0.25rem; } .stat-value-skeleton, .kpi-value-skeleton { margin-bottom: 0.5rem; margin-top: 0.25rem; } .stat-footer, .kpi-footer { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); } .stat-title, .kpi-title { font-size: 0.875rem; font-weight: 500; } .secondary-outline { border-left: 4px solid var(--chart-pink); } .primary-outline { border-left: 4px solid var(--chart-teal); } .highlighted { background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%); border-left: 4px solid #ffffff; } .highlighted .kpi-value, .highlighted .kpi-title, .highlighted .kpi-icon { color: #ffffff; } .highlighted .kpi-footer { color: rgba(255, 255, 255, 0.8); } .highlighted .kpi-value-skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.5) 37%, rgba(255, 255, 255, 0.25) 63%); background-size: 400% 100%; } /* Top cards colored left border variant */ .stat-card:nth-child(1) { border-left-color: var(--chart-blue); } .stat-card:nth-child(2) { border-left-color: var(--chart-green); } .stat-card:nth-child(3) { border-left-color: var(--chart-yellow); } .stat-card:nth-child(4) { border-left-color: var(--chart-purple); } .pipeline-picker-select { min-height: 36px; padding: 0.4rem 2rem 0.4rem 0.75rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); background-color: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem; transition: all 0.15s ease; } .pipeline-picker-select:hover { border-color: var(--border-strong); color: var(--text-primary); } .pipeline-picker-select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .deal-analytics-section { margin-bottom: 20px; } .deal-analytics-section__header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0.75rem; } .deal-analytics-section__header:empty { display: none; } .deal-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } /* These widgets (forecast summary + 220px chart, vertical stage funnel) are taller than the dashboard's default 300px widget box - let them size to their content instead of clipping / overflowing onto the next row. */ .deal-analytics-grid > .widget-base { height: auto; min-height: 300px; } @media (max-width: 900px) { .deal-analytics-grid { grid-template-columns: 1fr; } } .page-header { margin-bottom: 1rem; } .page-header-content { display: flex; justify-content: space-between; } .page-header-text { display: flex; flex-direction: column; gap: 0.25rem; } .page-title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--text-main); padding-left: 0.75rem; border-left: 3px solid var(--primary); border-radius: var(--border-radius-xs); } .page-description { font-size: var(--text-base); color: var(--text-secondary); margin-top: 0.25rem; } .page-header-action { display: flex; align-items: center; gap: 0.5rem; } .page-header-action .btn { display: flex; align-items: center; gap: 0.5rem; background: var(--primary); color: var(--text-on-accent); border: 1px solid transparent; padding: calc(0.5rem - 1px) calc(1rem - 1px); border-radius: var(--border-radius-md); font-size: var(--text-base); font-weight: var(--weight-medium); cursor: pointer; box-shadow: var(--elevation-1); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .page-header-action .btn:active { transform: translateY(0.5px) scale(0.992); } .page-header-action .btn:hover { background: var(--primary-hover); color: var(--text-on-accent); } .page-header-action .btn.active { background: var(--surface-1); color: var(--primary); border-color: var(--primary); } .page-header-action .btn.active:hover { background: var(--accent-subtle); color: var(--primary-hover); border-color: var(--primary-hover); } .page-breadcrumb { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; } .breadcrumb-separator { color: var(--text-muted); } .breadcrumb-item { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; } .breadcrumb-item:hover { color: var(--primary); } .breadcrumb-item.active { color: var(--text-main); font-weight: 500; } @media (max-width: 768px) { .page-header { margin-bottom: 0.75rem; } .page-header-content { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .page-title { font-size: 1rem; padding-left: 0.5rem; } .page-description { font-size: 0.8125rem; } }/* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .calendar-controls { display: flex; justify-content: space-between; align-items: center; background: var(--surface-1); padding: 16px 20px; border-radius: 8px; box-shadow: var(--elevation-1); margin-bottom: 16px; flex-wrap: wrap; gap: 16px; } .calendar-controls-left { display: flex; align-items: center; gap: 12px; } .agent-select-wrapper { position: relative; min-width: 180px; } .agent-select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 14px; } .agent-select-trigger:hover { border-color: var(--primary); } .dropdown-arrow { transition: transform 0.2s; } .dropdown-arrow.open { transform: rotate(90deg); } .agent-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: var(--elevation-2); z-index: 100; max-height: 250px; overflow: hidden; display: flex; flex-direction: column; } .agent-search-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); } .agent-search-box input { border: none; outline: none; font-size: 13px; flex: 1; } .agent-list { overflow-y: auto; flex: 1; } .agent-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; transition: background 0.2s; font-size: 14px; } .agent-option:hover { background: var(--surface-2); } .agent-option.selected { background: var(--info-subtle); color: var(--primary); } .calendar-controls-right { display: flex; align-items: center; gap: 16px; } .view-switch-buttons { display: flex; background: var(--surface-2); border-radius: 6px; padding: 3px; } .view-btn { padding: 6px 12px; border: none; background: transparent; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-tertiary); transition: all 0.2s; } .view-btn:hover { color: var(--text-primary); } .view-btn.active { background: var(--surface-1); color: var(--primary); box-shadow: var(--elevation-1); } .month-navigation { display: flex; align-items: center; gap: 12px; } .nav-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-default); background: var(--surface-1); border-radius: 6px; cursor: pointer; transition: all 0.2s; color: var(--text-tertiary); } .nav-btn:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); } .current-month { font-size: 15px; font-weight: 600; color: var(--text-primary); min-width: 120px; text-align: center; } .calendar-grid { background: var(--surface-1); border-radius: 16px; box-shadow: var(--elevation-2); overflow: hidden; position: relative; } .calendar-error-banner { background: var(--danger-subtle); color: var(--danger-text); border: 1px solid var(--danger); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 14px; } .calendar-loading-banner { position: absolute; top: 0; left: 0; right: 0; background: var(--info-subtle); color: var(--info-text); padding: 0.5rem 1rem; font-size: 13px; text-align: center; z-index: 1; } .month-view-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); } .month-nav-controls { display: flex; align-items: center; gap: 0.75rem; } .month-nav-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; color: var(--text-main); } .month-nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-hover); } .month-year-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); min-width: 160px; text-align: center; } .today-btn { padding: 0.5rem 1rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 8px; font-size: 0.875rem; font-weight: 500; color: var(--text-main); cursor: pointer; transition: all 0.2s ease; margin-left: 0.5rem; } .today-btn:hover { border-color: var(--primary); color: var(--primary); } .month-quick-jump { display: flex; gap: 0.5rem; } .month-dropdown-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; color: var(--text-main); } .month-dropdown-btn:hover { border-color: var(--primary); color: var(--primary); } .month-view-grid { padding: 0; } .month-weekday-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--border-color); } .month-weekday-cell { padding: 1rem; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .month-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .month-day-cell { min-height: 110px; padding: 0.75rem; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; background: var(--bg-card); } .month-day-cell:nth-child(7n) { border-right: none; } .month-day-cell:hover { background: var(--surface-hover); } .month-day-cell.today-cell { background: linear-gradient(135deg, rgba(241, 65, 79, 0.04) 0%, rgba(241, 65, 79, 0.08) 100%); } .month-day-cell.today-cell:hover { background: linear-gradient(135deg, rgba(241, 65, 79, 0.08) 0%, rgba(241, 65, 79, 0.12) 100%); } .month-day-cell.other-month { opacity: 0.4; } .month-day-cell.other-month .month-date-num { color: var(--text-muted); } .month-day-cell.past-month { opacity: 0.5; } .month-date-num { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); align-self: flex-end; margin-bottom: 0.5rem; } .month-date-num.today-num { width: 32px; height: 32px; background: var(--primary); color: var(--text-on-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(241, 65, 79, 0.35); } .month-events-container { display: flex; flex-direction: column; gap: 0.375rem; margin-top: auto; overflow: hidden; } .month-event-pill { padding: 0.375rem 0.625rem; border-radius: 6px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-on-accent); } .month-event-pill.high { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-text) 100%); } .month-event-pill.medium { background: linear-gradient(135deg, var(--warning) 0%, var(--warning-text) 100%); } .month-event-pill.low { background: linear-gradient(135deg, var(--success) 0%, var(--success-text) 100%); } .month-event-more { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); padding: 0.25rem 0.5rem; } @media (max-width: 1024px) { .month-day-cell { min-height: 90px; padding: 0.5rem; } .month-event-pill { font-size: 0.6875rem; padding: 0.25rem 0.5rem; } .month-date-num { font-size: 0.875rem; } } @media (max-width: 768px) { .month-view-header { padding: 1rem; flex-direction: column; gap: 1rem; } .month-nav-controls { width: 100%; justify-content: space-between; } .month-year-title { font-size: 1.125rem; min-width: auto; } .month-quick-jump { display: none; } .month-day-cell { min-height: 70px; padding: 0.375rem; } .month-date-num { font-size: 0.8125rem; margin-bottom: 0.25rem; } .month-date-num.today-num { width: 28px; height: 28px; } .month-events-container { gap: 0.25rem; } .month-event-pill { font-size: 0.625rem; padding: 0.25rem 0.375rem; border-radius: 4px; } .month-event-more { font-size: 0.5625rem; } .month-weekday-cell { padding: 0.75rem 0.5rem; font-size: 0.6875rem; } } .calendar-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--border-default); } .calendar-header-cell { padding: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; } .calendar-body { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-cell { min-height: 90px; padding: 8px; border-right: 1px solid var(--surface-2); border-bottom: 1px solid var(--surface-2); cursor: pointer; transition: background 0.2s; display: flex; flex-direction: column; } .calendar-cell:nth-child(7n) { border-right: none; } .calendar-cell:hover { background: var(--surface-2); } .calendar-cell.today { background: var(--success-subtle); } .calendar-cell.today .date-number { background: var(--success-text); color: #ffffff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .calendar-cell.other-month { opacity: 0.5; } .calendar-cell.other-month .date-number { color: var(--text-tertiary); } .date-number { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; } .task-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; } .task-dot { width: 8px; height: 8px; border-radius: 50%; } .task-dot.high { background: var(--danger); } .task-dot.medium { background: var(--warning); } .task-dot.low { background: var(--success); } .task-more { font-size: 11px; color: var(--text-tertiary); font-weight: 500; } .task-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .task-modal { background: var(--surface-1); border-radius: 12px; width: 100%; max-width: 600px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--elevation-3); } .task-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-default); } .task-modal-header h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; } .task-modal-header .close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--surface-2); border-radius: 6px; cursor: pointer; transition: all 0.2s; color: var(--text-tertiary); } .task-modal-header .close-btn:hover { background: var(--border-default); color: var(--text-primary); } .task-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .no-tasks-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--text-tertiary); gap: 12px; } .no-tasks-message p { font-size: 16px; margin: 0; } .task-card { background: var(--surface-2); border-radius: 10px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--border-default); } .task-card.completed { background: var(--success-subtle); border-color: var(--success-subtle); } .task-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .task-card-header h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1; line-height: 1.4; } .task-category { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; margin-left: 12px; } .task-category.call { background: var(--info-subtle); color: var(--info-text); } .task-category.follow-up { background: var(--warning-subtle); color: var(--warning-text); } .task-category.meeting { background: var(--info-subtle); color: var(--info-text); } .task-category.check-in { background: var(--success-subtle); color: var(--success-text); } .task-description { font-size: 13px; color: var(--text-tertiary); margin: 0 0 16px 0; line-height: 1.5; } .task-details-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; } .detail-item { display: flex; flex-direction: column; gap: 4px; } .detail-item svg { color: var(--text-tertiary); } .detail-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; } .detail-value { font-size: 13px; color: var(--text-primary); font-weight: 500; } .detail-value-phone { font-size: 13px; color: var(--primary); font-weight: 500; } .task-card-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border-default); } .complete-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--success-text); color: #ffffff; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .complete-btn:hover { background: var(--success-text); } .completed-badge { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--success); color: #ffffff; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: default; } .edit-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .edit-btn:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); } .close-btn-secondary { padding: 8px 14px; background: var(--surface-2); color: var(--text-tertiary); border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .close-btn-secondary:hover { background: var(--border-default); color: var(--text-primary); } .day-view { flex: 1; display: flex; flex-direction: column; background: var(--surface-1); border-radius: 12px; overflow: hidden; } .day-view-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-default); } .day-view-header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } .day-view-body { flex: 1; padding: 1.5rem; overflow-y: auto; } .day-task-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-2); border-radius: 10px; margin-bottom: 0.75rem; border-left: 4px solid var(--primary); } .day-task-card.completed { border-left-color: var(--success); opacity: 0.7; } .day-task-card .task-time { font-size: 0.875rem; font-weight: 600; color: var(--primary); min-width: 60px; } .day-task-card .task-info { flex: 1; } .day-task-card .task-info h4 { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); } .day-task-card .task-info p { margin: 0; font-size: 0.8125rem; color: var(--text-tertiary); } .day-task-card .task-status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; } .day-task-card .task-status-badge.pending { background: var(--warning-subtle); color: var(--warning-text); } .day-task-card .task-status-badge.completed { background: var(--success-subtle); color: var(--success-text); } .week-view { flex: 1; display: flex; flex-direction: column; background: var(--surface-1); border-radius: 12px; overflow: hidden; } .week-view-header { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-default); } .week-day-header { display: flex; flex-direction: column; align-items: center; padding: 0.75rem; text-align: center; } .week-day-header.today { background: var(--info-subtle); } .week-day-name { font-size: 0.75rem; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; } .week-date { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } .week-day-header.today .week-date { color: var(--primary); } .week-view-body { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; } .week-day-column { padding: 0.5rem; border-right: 1px solid var(--surface-2); min-height: 200px; } .week-day-column:last-child { border-right: none; } .week-day-column .no-tasks { text-align: center; color: var(--border-strong); padding: 2rem 0; } .week-task-item { padding: 0.375rem 0.5rem; border-radius: 6px; margin-bottom: 0.375rem; background: var(--info-subtle); font-size: 0.75rem; cursor: pointer; transition: transform 0.15s; } .week-task-item:hover { transform: scale(1.02); } .week-task-item.high { background: var(--danger-subtle); border-left: 3px solid var(--danger); } .week-task-item.medium { background: var(--warning-subtle); border-left: 3px solid var(--warning); } .week-task-item .week-task-time { display: block; font-weight: 600; color: var(--primary); font-size: 0.6875rem; } .week-task-item .week-task-title { display: block; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { .calendar-controls { flex-direction: column; align-items: stretch; } .calendar-controls-right { justify-content: space-between; } .calendar-cell { min-height: 70px; padding: 6px; } .date-number { font-size: 12px; } .task-details-grid { grid-template-columns: 1fr; } } .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); z-index: 1000; display: flex; justify-content: flex-end; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .day-drawer { width: 100%; max-width: 600px; height: 100%; background: var(--bg-card); display: flex; flex-direction: column; animation: slideIn 0.3s ease; box-shadow: var(--elevation-3); } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); flex-shrink: 0; } .drawer-back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 0; cursor: pointer; color: var(--text-main); transition: all 0.2s ease; } .drawer-back-btn:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--primary); } .drawer-title-wrap { flex: 1; } .drawer-title { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 0; } .drawer-subtitle { font-size: 0.875rem; color: var(--text-muted); } .add-task-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; height: 40px; border: none; background: var(--primary); color: var(--text-on-accent); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-radius: 0; transition: all 0.2s ease; } .add-task-btn:hover { background: var(--primary-hover); } .drawer-body { flex: 1; overflow-y: auto; padding: 1rem; } .no-tasks-message { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; color: var(--text-muted); gap: 1rem; } .no-tasks-message p { font-size: 1rem; } .timeline-container { display: flex; flex-direction: column; } .timeline-header-row { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 0.5rem; } .time-label-header { width: 60px; flex-shrink: 0; } .time-slots-header { flex: 1; display: flex; justify-content: space-between; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; } .timeline-grid { display: flex; flex-direction: column; gap: 0; } .timeline-row { display: flex; min-height: 60px; border-bottom: 1px solid var(--border-color); } .time-label { width: 60px; flex-shrink: 0; padding: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); display: flex; align-items: flex-start; } .time-slot { flex: 1; position: relative; padding: 0.25rem; display: flex; flex-direction: column; gap: 0.25rem; } .timeline-task { padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; border-left: 4px solid; } .timeline-task:hover { box-shadow: var(--elevation-2); transform: translateY(-1px); } .timeline-task.follow-up { background: var(--warning-subtle); border-color: var(--warning); } .timeline-task.call { background: var(--success-subtle); border-color: var(--success); } .timeline-task.meeting { background: var(--info-subtle); border-color: var(--info); } .timeline-task.important { background: var(--danger-subtle); border-color: var(--danger); } .timeline-task .task-time { font-size: 0.75rem; font-weight: 600; color: var(--text-main); } .task-header-row { display: flex; justify-content: space-between; align-items: center; } .task-delete-btn { width: 20px; height: 20px; border: none; background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; line-height: 1; } .task-delete-btn:hover { background: var(--danger-subtle); color: var(--danger); } .timeline-task .task-title { font-size: 0.875rem; font-weight: 500; color: var(--text-main); margin-top: 0.25rem; } .timeline-task[draggable="true"] { cursor: grab; } .timeline-task:active { cursor: grabbing; } .timeline-task.readonly { cursor: default; } .time-slot.drag-over { background: var(--accent-subtle); } .time-row.drag-over { background: var(--accent-subtle); } @media (max-width: 768px) { .day-drawer { max-width: 100%; } .drawer-header { padding: 1rem; } .drawer-title { font-size: 1.125rem; } } .modal-content { width: 100%; max-width: 450px; } .activity-count-section { display: flex; align-items: center; gap: 1rem; min-width: 180px; } .activity-count-icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; background: var(--primary); border-radius: var(--border-radius); color: #ffffff; } .activity-count-info { display: flex; flex-direction: column; } .activity-count-label { font-size: 0.875rem; color: var(--text-muted); } .activity-count-number { font-size: 2rem; font-weight: 700; color: var(--text-main); line-height: 1.1; } .activity-filters-section { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; } .filter-buttons { display: flex; gap: 0.75rem; align-items: center; } .filter-buttons .apply-btn, .filter-buttons .reset-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 42px; min-width: 120px; } .filter-buttons .apply-btn { background: var(--primary) !important; color: #ffffff !important; border: none !important; } .filter-buttons .apply-btn:hover { background: var(--primary-hover) !important; } .filter-buttons .apply-btn:disabled, .filter-buttons .reset-btn:disabled { opacity: 0.6; cursor: not-allowed; } .filter-buttons .reset-btn { background: #ffffff !important; color: var(--text-tertiary) !important; border: 1px solid var(--border-default) !important; } .filter-buttons .reset-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--surface-2) !important; } @media (max-width: 768px) { .activity-filters-section { flex-direction: column; align-items: stretch; } .filter-group { width: 100%; display: flex; flex-direction: column; } .filter-input { width: 100% !important; box-sizing: border-box; } .filter-buttons { width: 100%; margin-top: 0.5rem; } .filter-buttons .apply-btn, .filter-buttons .reset-btn { flex: 1; width: 100%; } } .timeline-card { background: var(--bg-card); border-radius: var(--border-radius); border: 1px solid var(--border-color); padding: 1rem 1.25rem; position: relative; } .timeline-content { display: flex; flex-direction: column; gap: 0.75rem; } .timeline-meta { display: flex; align-items: center; gap: 0.5rem; } .time-ago { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; } .timestamp { font-size: 0.8125rem; color: var(--text-muted); } .timeline-body { display: flex; gap: 1rem; } .timeline-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; flex-shrink: 0; } .timeline-details { flex: 1; } .timeline-title { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--text-main); margin-bottom: 0.5rem; } .entity-type-icon { color: var(--text-muted); flex-shrink: 0; } .activity-type-text { color: var(--text-muted); } .user-name { font-weight: 600; color: var(--text-main); } .timeline-related-lead { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; } .timeline-related-lead span { font-size: 0.8125rem; color: var(--primary); cursor: pointer; } .timeline-related-lead span:hover { text-decoration: underline; } .timeline-description { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.625rem; line-height: 1.5; } .timeline-changes { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.625rem; } .timeline-change-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8125rem; padding: 0.375rem 0.625rem; border-radius: calc(var(--border-radius) - 4px); background: var(--bg-main); border: 1px solid var(--border-color); } .change-field-label { font-weight: 600; color: var(--text-main); min-width: 6.5rem; } .change-old-value { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-muted); } .change-arrow { color: var(--text-muted); flex-shrink: 0; } .change-new-value { color: var(--primary); font-weight: 600; } .timeline-badges { display: flex; gap: 0.5rem; } .badge { padding: 0.25rem 0.625rem; border-radius: 1.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .badge.lead { background: var(--info-subtle); color: var(--info-text); } .badge.deal { background: var(--success-subtle); color: var(--success-text); } .badge.task { background: var(--warning-subtle); color: var(--warning-text); } .badge.campaign { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .badge.staff { background: var(--category-pink-subtle); color: var(--category-pink-text); } .badge.remark { background: var(--category-purple-subtle); color: var(--category-purple-text); } .badge.followup { background: var(--danger-subtle); color: var(--danger-text); } .badge.call { background: var(--success-subtle); color: var(--success-text); } @media (max-width: 768px) { .timeline-body { flex-direction: column; } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.75rem 1.25rem; background: var(--bg-card); border-radius: var(--border-radius); border: 1px solid var(--border-color); color: var(--text-muted); } .empty-state p { font-size: 1rem; margin: 0.75rem 0 0 0; } .activity-timeline { display: flex; flex-direction: column; gap: 0.75rem; } .activity-timeline-loading { padding: 2rem 0; text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .daily-activity-page { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; } .activity-summary-card { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; border-radius: var(--border-radius); background-color: var(--bg-card); border: 1px solid var(--border-color); } .modal-content { width: 100%; max-width: 450px; } @media (max-width: 768px) { .activity-summary-card { flex-direction: column; align-items: stretch; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .pipeline-visual { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); margin-bottom: 1.5rem; } .pipeline-stage-box { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .stage-box-color { width: 10px; height: 10px; border-radius: 50%; } .pipeline-stage-box span { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .pipeline-arrow { font-size: 1.25rem; color: var(--text-muted); font-weight: 600; } .setup-content { display: flex; flex-direction: column; gap: 1.5rem; } .setup-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; width: 100%; max-width: 900px; } .setup-card .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-main); } .setup-card .card-header h3 { margin: 0 0 0.25rem 0; font-size: 1rem; font-weight: 600; color: var(--text-main); } .setup-card .card-header p { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } .stages-flow { padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .stage-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .stage-drag { color: var(--text-muted); cursor: grab; } .stage-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .stage-name { font-size: 0.875rem; font-weight: 500; color: var(--text-main); cursor: pointer; } .stage-name:hover { color: var(--primary); } .stage-edit-form { display: flex; align-items: center; gap: 0.5rem; } .stage-edit-form input[type="text"] { padding: 0.375rem 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; } .stage-edit-form input[type="color"] { width: 28px; height: 28px; border: none; cursor: pointer; } .stage-edit-form button { display: flex; align-items: center; justify-content: center; padding: 0.375rem; background: var(--primary); color: #ffffff; border: none; border-radius: var(--border-radius-sm); cursor: pointer; } .stage-actions { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; } .stage-actions button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.75rem; color: var(--text-muted); cursor: pointer; } .stage-actions button:hover:not(:disabled) { background: var(--bg-card); color: var(--text-main); } .stage-actions button:disabled { opacity: 0.5; cursor: not-allowed; } .stage-actions .delete-btn:hover { background: var(--danger-subtle); border-color: var(--danger-text); color: var(--danger-text); } .stage-connector { color: var(--text-muted); display: flex; align-items: center; justify-content: center; } .add-stage-form { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); background: var(--bg-main); } .add-stage-form input[type="text"] { flex: 1; max-width: 200px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; } .add-stage-form input[type="color"] { width: 36px; height: 36px; border: none; cursor: pointer; } .add-stage-form button { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: var(--primary); color: #ffffff; border: none; border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; } .add-stage-form button:hover { background: var(--primary-dark); } .pipeline-preview { padding: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } .pipeline-node { display: flex; align-items: center; gap: 0.5rem; } .node-dot { width: 10px; height: 10px; border-radius: 50%; } .pipeline-node span { font-size: 0.8125rem; color: var(--text-main); } @media (max-width: 768px) { .stages-flow { flex-direction: column; align-items: flex-start; } .stage-connector { transform: rotate(90deg); margin-left: 1rem; } .add-stage-form { flex-direction: column; align-items: stretch; } .add-stage-form input[type="text"] { max-width: 100%; } } .modal-content { width: 100%; max-width: 450px; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .sp-page { display: flex; flex-direction: column; gap: 1.5rem; } .filter-wrapper { position: relative; } .filter-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; height: 44px; border: 1px solid var(--border-color); background: var(--bg-card); font-size: 0.875rem; font-weight: 500; color: var(--text-main); cursor: pointer; } .filter-btn:hover, .filter-btn.active { background: var(--bg-main); border-color: var(--primary); color: var(--primary); } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .filter-header span { font-size: 0.875rem; font-weight: 600; color: var(--text-main); } .clear-btn { padding: 0.25rem 0.5rem; border: none; background: transparent; color: var(--primary); font-size: 0.75rem; font-weight: 500; cursor: pointer; } .clear-btn:hover { text-decoration: underline; } .filter-inputs { display: flex; flex-direction: column; gap: 0.75rem; } .input-group { display: flex; flex-direction: column; gap: 0.375rem; } .input-group label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .date-input { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); font-size: 0.875rem; color: var(--text-main); background: var(--bg-main); width: 100%; } .date-input:focus { outline: none; border-color: var(--primary); } .sp-status { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.9375rem; } .sp-status-error { color: var(--danger-text); } .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .staff-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.5rem; text-decoration: none; display: flex; flex-direction: column; align-items: center; text-align: center; } .staff-card:hover { border-color: var(--primary); } .staff-card-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--danger) 0%, var(--danger-text) 100%); color: white; font-size: 1.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .staff-card-info { margin-bottom: 1rem; } .staff-card-name { font-size: 1.125rem; font-weight: 600; color: var(--text-main); } .staff-card-role { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; } .staff-card-stats { display: flex; justify-content: center; gap: 1.5rem; width: 100%; padding-top: 1rem; border-top: 1px solid var(--border-color); } .staff-stat { text-align: center; } .staff-stat span { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-main); } .staff-stat label { font-size: 0.75rem; color: var(--text-muted); } .sp-detail-page { display: flex; flex-direction: column; gap: 1.5rem; } .detail-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; } .back-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); text-decoration: none; font-size: 0.875rem; font-weight: 500; width: fit-content; } .back-link:hover { background: var(--bg-main); border-color: var(--primary); } .profile-section { display: flex; align-items: center; gap: 2rem; background: var(--bg-card); border: 1px solid var(--border-color); padding: 2rem; } .profile-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--danger) 0%, var(--danger-text) 100%); color: white; font-size: 2.5rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profile-info { flex: 1; } .profile-name { font-size: 1.75rem; font-weight: 700; color: var(--text-main); margin: 0 0 0.5rem 0; } .profile-role { font-size: 1rem; color: var(--primary); margin: 0 0 1rem 0; font-weight: 500; } .contact-info { display: flex; flex-wrap: wrap; gap: 1.25rem; } .contact-info span { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--text-muted); } .rating-badge { background: var(--warning-subtle); padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .rating-value { font-size: 2.5rem; font-weight: 700; color: var(--warning-text); line-height: 1; } .rating-label { font-size: 0.75rem; color: var(--warning-text); font-weight: 600; } .section-title { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .performance-table-section { background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.5rem; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .performance-table { width: 100%; border-collapse: collapse; } .performance-table th, .performance-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .performance-table th { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--bg-main); } .performance-table td { font-size: 0.9375rem; color: var(--text-main); } .performance-table tr:last-child td { border-bottom: none; } .performance-table tr:hover td { background: var(--bg-main); } .activity-section { background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.5rem; } .activity-list { display: flex; flex-direction: column; } .activity-item { display: flex; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border-color); } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-main); color: var(--primary); flex-shrink: 0; } .activity-content { flex: 1; } .activity-title { font-size: 0.9375rem; color: var(--text-main); } .activity-time { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; } @media (max-width: 1280px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .profile-section { flex-direction: column; text-align: center; gap: 1.5rem; } .contact-info { justify-content: center; } } @media (max-width: 768px) { .profile-section { flex-direction: column; text-align: center; gap: 1.5rem; } .contact-info { justify-content: center; } .section-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; } } .modal-content { width: 100%; max-width: 450px; } .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100; display: flex; justify-content: flex-end; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer-panel { width: 400px; max-width: 90%; height: 100%; background-color: var(--bg-card); display: flex; flex-direction: column; box-shadow: var(--shadow-md); animation: slideIn 0.3s ease; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .drawer-header h2 { font-size: 1rem; font-weight: 600; color: var(--text-main); } .drawer-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); } .drawer-close:hover { background-color: var(--bg-main); color: var(--text-main); } .drawer-body { flex: 1; overflow-y: auto; padding: 1.5rem; } .lead-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.375rem; } .form-group label { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .form-group input, .form-group select, .form-group textarea { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--bg-card); color: var(--text-main); font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } .form-group input:disabled { background-color: var(--bg-main); color: var(--text-muted); cursor: not-allowed; } .form-group textarea { resize: vertical; min-height: 80px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .drawer-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); } .drawer-footer .btn { padding: 0.5rem 1rem; border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border-color); } .drawer-footer .btn-secondary { background-color: var(--bg-card); color: var(--text-main); } .drawer-footer .btn-secondary:hover { background-color: var(--bg-main); } .drawer-footer .btn-primary { background-color: var(--primary); color: white; border-color: var(--primary); } .drawer-footer .btn-primary:hover { background-color: var(--primary-hover); } .form-section-title { font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .error-text { font-size: 0.75rem; color: var(--primary); margin-top: 0.25rem; } .form-group input.error, .form-group select.error { border-color: var(--primary); } .dropdown-search-container { position: relative; } .search-input-wrapper { position: relative; } .search-input-wrapper input { width: 100%; padding-left: 2rem; } .search-input-wrapper .search-icon-inner { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .dropdown-list { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md); z-index: 10; margin-top: 0.25rem; } .dropdown-list button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; background: transparent; font-size: 0.875rem; color: var(--text-main); cursor: pointer; text-align: left; } .dropdown-list button:hover { background-color: var(--bg-main); } .selected-leads-list { display: flex; flex-direction: column; gap: 0.5rem; } .selected-leads-list label { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .leads-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lead-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); font-size: 0.75rem; color: var(--text-main); } .lead-tag button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .lead-tag button:hover { color: var(--primary); } .dropdown-list button:hover { background-color: var(--bg-main); }/* Self-contained: doesn't rely on any host page's CSS, since this overlay is opened from both the Leads and Deals features. */ /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } .wa-picker-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 2rem; } .wa-picker-panel { background: var(--bg-main, #ffffff); width: min(900px, 100%); height: min(85vh, 800px); border-radius: var(--border-radius-md, 12px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; overflow: hidden; } .wa-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .wa-picker-header h5 { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--text-main); } .wa-picker-close { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; padding: 0.25rem; } .wa-picker-close:hover { color: var(--text-main); } .wa-picker-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; min-height: 0; } .wa-picker-plain { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px dashed #25d366; border-radius: var(--border-radius-sm, 8px); background: rgba(37, 211, 102, 0.06); color: #128c4a; font-size: 0.875rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .wa-picker-plain:hover { background: rgba(37, 211, 102, 0.12); } .wa-picker-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm, 8px); color: var(--text-muted); flex-shrink: 0; } .wa-picker-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.875rem; color: var(--text-main); } .wa-picker-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; } .wa-picker-loading, .wa-picker-empty { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1rem; font-size: 0.875rem; color: var(--text-muted); text-align: center; } .wa-picker-card { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm, 8px); padding: 0.875rem 1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; flex-shrink: 0; } .wa-picker-card:hover { border-color: #25d366; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.12); } .wa-picker-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .wa-picker-card-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .wa-picker-card-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(37, 211, 102, 0.12); color: #128c4a; flex-shrink: 0; } .wa-picker-card-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); word-break: break-word; } .wa-picker-card-send { display: flex; align-items: center; gap: 0.3125rem; padding: 0.375rem 0.6875rem; border: none; border-radius: var(--border-radius-sm, 6px); background: #25d366; color: #ffffff; font-size: 0.8125rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .wa-picker-card-send:hover { background: #1fb959; } .wa-picker-card-bubble { margin: 0.75rem 0 0; padding: 0.625rem 0.75rem; background: rgba(37, 211, 102, 0.07); border-radius: 4px 10px 10px 10px; font-size: 0.8125rem; color: var(--text-main); white-space: pre-wrap; word-break: break-word; line-height: 1.5; } .wa-picker-panel .table-footer { flex-shrink: 0; padding: 0.875rem 1.5rem; border-top: 1px solid var(--border-color); margin: 0; } .wa-picker-panel .spin { animation: waPickerSpin 0.8s linear infinite; } @keyframes waPickerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 640px) { .wa-picker-overlay { padding: 0; } .wa-picker-panel { width: 100%; height: 100%; border-radius: 0; } } .leaddrawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); z-index: 1000; display: flex; justify-content: flex-end; pointer-events: none; } .leaddrawer-overlay.visible { background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; animation: overlayFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } .leaddrawer-panel { position: absolute; top: 0; right: 0; width: 90%; height: 100%; background-color: var(--bg-card); display: flex; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .leaddrawer-panel.animating { transform: translateX(0); } .leaddrawer-overlay.visible .leaddrawer-panel { transform: translateX(0); } @media (max-width: 1024px) { .leaddrawer-panel { width: 100%; } } @media (max-width: 768px) { .leaddrawer-left-header { padding: 0.875rem 1rem; } .leaddrawer-left-header-left { gap: 0.375rem; } .leaddrawer-title { font-size: 0.9375rem; } } .leaddrawer-two-col { display: flex; width: 100%; height: 100%; } .leaddrawer-left { width: 25%; min-width: 280px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; overflow-y: auto; background-color: var(--bg-card); } .leaddrawer-left-header { display: flex; justify-content: space-between; align-items: center; padding: 7px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-card); flex-shrink: 0; position: sticky; top: 0; z-index: 10; } .leaddrawer-left-header-left { display: flex; align-items: center; gap: 0.5rem; } .leaddrawer-back-btn { display: flex; align-items: center; gap: 0.375rem; background: transparent; border: none; color: var(--primary); font-size: 0.875rem; font-weight: 500; cursor: pointer; padding: 0.375rem; border-radius: var(--border-radius-sm); transition: all 0.2s; } .leaddrawer-back-btn:hover { background-color: var(--bg-main); } .leaddrawer-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; } .leaddrawer-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 0.375rem; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); transition: all 0.2s; } .leaddrawer-close:hover { background-color: var(--bg-main); color: var(--text-main); } .leaddrawer-right { width: 75%; display: flex; flex-direction: column; overflow: hidden; } .leaddrawer-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-card); flex-shrink: 0; } .leaddrawer-header-left { display: flex; align-items: center; gap: 0.5rem; } .leaddrawer-header .leaddrawer-back-btn { padding: 0.5rem; } .leaddrawer-header .leaddrawer-close { padding: 0.5rem; } .leaddrawer-main { padding: 1.5rem; flex: 1; overflow-y: auto; } .leaddrawer-profile { text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; } .leaddrawer-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 600; margin: 0 auto 1rem; } .leaddrawer-name { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.5rem; } .leaddrawer-badges { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; } .leaddrawer-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; } .leaddrawer-badge.hot-lead { background-color: rgba(239, 68, 68, 0.1); color: var(--danger); } .leaddrawer-badge.warm-lead { background-color: rgba(245, 158, 11, 0.1); color: var(--warning); } .leaddrawer-badge.cold-lead { background-color: rgba(59, 130, 246, 0.1); color: var(--info); } .leaddrawer-badge.active { background-color: rgba(16, 185, 129, 0.1); color: var(--success); } .leaddrawer-badge.inactive { background-color: rgba(107, 114, 128, 0.1); color: var(--text-muted); } .leaddrawer-badge.pending { background-color: rgba(251, 191, 36, 0.1); color: var(--warning); } .leaddrawer-actions { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; } .leaddrawer-action-btn { width: 40px; height: 40px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all 0.2s; } .leaddrawer-action-btn:hover { background-color: var(--bg-main); border-color: var(--primary); color: var(--primary); } .leaddrawer-action-btn.delete:hover { border-color: var(--danger-text); color: var(--danger-text); } .leaddrawer-section { margin-bottom: 1.5rem; } .leaddrawer-section-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.75rem; } .leaddrawer-info-grid { display: flex; flex-direction: column; gap: 0.75rem; } .leaddrawer-info-item { display: flex; align-items: flex-start; gap: 0.625rem; } .leaddrawer-info-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-main); border-radius: var(--border-radius-sm); color: var(--text-muted); flex-shrink: 0; } .leaddrawer-info-content { flex: 1; display: flex; flex-direction: column; } .leaddrawer-info-label { font-size: 0.6875rem; color: var(--text-muted); } .leaddrawer-info-value { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .leaddrawer-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .leaddrawer-detail-card { background-color: var(--bg-main); border-radius: var(--border-radius-sm); padding: 0.75rem; } .leaddrawer-detail-label { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.25rem; } .leaddrawer-detail-value { font-size: 0.8125rem; font-weight: 500; color: var(--text-main); display: flex; align-items: center; gap: 0.375rem; cursor: pointer; } .leaddrawer-detail-value svg { opacity: 0; color: var(--text-muted); transition: opacity 0.2s; } .leaddrawer-detail-card:hover .leaddrawer-detail-value svg { opacity: 1; } .leaddrawer-detail-value svg:hover { color: var(--primary); } .leaddrawer-edit-input, .leaddrawer-edit-select { width: 100%; padding: 0.375rem 0.5rem; border: 1px solid var(--primary); border-radius: var(--border-radius-sm); font-size: 0.8125rem; background: var(--bg-card); color: var(--text-main); font-family: inherit; outline: none; } .leaddrawer-edit-field { display: flex; flex-direction: column; gap: 0.375rem; } .leaddrawer-edit-field .leaddrawer-note-edit-actions { margin-bottom: 0; } .leaddrawer-detail-full { grid-column: 1 / -1; } .leaddrawer-tabs { display: flex; gap: 0; padding: 0 1.25rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-card); flex-shrink: 0; overflow-x: auto; } .leaddrawer-tab { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; } .leaddrawer-tab:hover { color: var(--text-main); } .leaddrawer-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .leaddrawer-tab-content { flex: 1; overflow-y: auto; padding: 1.5rem; } .leaddrawer-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .leaddrawer-tab-heading { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; } .leaddrawer-activity-list { display: flex; flex-direction: column; gap: 1rem; } .leaddrawer-activity-card { display: flex; gap: 0.875rem; padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); } .leaddrawer-activity-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; } .leaddrawer-activity-content { flex: 1; display: flex; flex-direction: column; } .leaddrawer-activity-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .leaddrawer-activity-user { font-size: 0.875rem; font-weight: 600; color: var(--text-main); } .leaddrawer-activity-action { font-size: 0.875rem; color: var(--text-muted); } .leaddrawer-activity-time { font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-activity-desc { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.5; } .leaddrawer-loading, .leaddrawer-error, .leaddrawer-empty { padding: 2rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); } .leaddrawer-error { color: var(--danger-text); } .leaddrawer-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; text-align: center; } .leaddrawer-empty-icon { width: 64px; height: 64px; border-radius: 50%; background-color: var(--bg-main); color: var(--text-muted); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .leaddrawer-empty-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.375rem; } .leaddrawer-empty-text { font-size: 0.875rem; color: var(--text-muted); margin: 0; } .leaddrawer-note-card { display: flex; gap: 0.875rem; padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; } /* Deal drawer "Other Deals" tab: each sibling deal is a clickable card. */ button.leaddrawer-note-card--button { width: 100%; border: 1px solid var(--border-color); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s ease, background-color 0.15s ease; } button.leaddrawer-note-card--button:hover { border-color: var(--primary); background-color: var(--bg-card); } .leaddrawer-note-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; } .leaddrawer-note-content { flex: 1; display: flex; flex-direction: column; } .leaddrawer-note-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .leaddrawer-note-user { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .leaddrawer-note-time { font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-note-text { font-size: 0.875rem; color: var(--text-main); line-height: 1.5; } .leaddrawer-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .leaddrawer-note-action { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; border-radius: var(--border-radius-sm); transition: all 0.2s; } .leaddrawer-note-action:hover { color: var(--primary); background-color: var(--bg-card); } .leaddrawer-remark-edit-textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.8125rem; background: var(--bg-card); color: var(--text-main); font-family: inherit; min-height: 60px; resize: vertical; margin-bottom: 0.5rem; } .leaddrawer-remark-edit-textarea:focus { outline: none; border-color: var(--primary); } .leaddrawer-note-edit-actions { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .leaddrawer-task-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .leaddrawer-filter-btn { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .leaddrawer-filter-btn:hover { border-color: var(--primary); color: var(--primary); } .leaddrawer-filter-btn.active { background-color: var(--primary); border-color: var(--primary); color: white; } .leaddrawer-task-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; } .leaddrawer-task-info { flex: 1; } .leaddrawer-task-title { font-size: 0.875rem; font-weight: 500; color: var(--text-main); margin-bottom: 0.25rem; } .leaddrawer-task-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-task-badges { display: flex; gap: 0.375rem; } .leaddrawer-task-badge { padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; } .leaddrawer-task-badge.low { background-color: rgba(16, 185, 129, 0.1); color: var(--success); } .leaddrawer-task-badge.medium { background-color: rgba(251, 191, 36, 0.1); color: var(--warning); } .leaddrawer-task-badge.high { background-color: rgba(239, 68, 68, 0.1); color: var(--danger); } .leaddrawer-task-badge.pending { background-color: rgba(251, 191, 36, 0.1); color: var(--warning); } .leaddrawer-task-badge.in-progress { background-color: rgba(59, 130, 246, 0.1); color: var(--info); } .leaddrawer-task-badge.completed { background-color: rgba(16, 185, 129, 0.1); color: var(--success); } .leaddrawer-task-actions { display: flex; gap: 0.25rem; } .leaddrawer-deal-card { padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; } .leaddrawer-deal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .leaddrawer-deal-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); } .leaddrawer-deal-amount { font-size: 1rem; font-weight: 600; color: var(--primary); } .leaddrawer-deal-stage { padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.6875rem; font-weight: 500; } .leaddrawer-deal-stage.new { background-color: rgba(59, 130, 246, 0.1); color: var(--info); } .leaddrawer-deal-stage.proposal { background-color: rgba(139, 92, 246, 0.1); color: #8b5cf6; } .leaddrawer-deal-stage.won { background-color: rgba(16, 185, 129, 0.1); color: var(--success); } .leaddrawer-deal-stage.lost { background-color: rgba(107, 114, 128, 0.1); color: var(--text-muted); } .leaddrawer-deal-progress { height: 4px; background-color: var(--border-color); border-radius: 2px; margin-top: 0.75rem; overflow: hidden; } .leaddrawer-deal-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, #ff6b6b 100%); border-radius: 2px; } .leaddrawer-deal-meta { display: flex; justify-content: space-between; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-email-compose { padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); } .leaddrawer-email-compose .leaddrawer-form-group { margin-bottom: 0.75rem; } .leaddrawer-email-compose input, .leaddrawer-email-compose textarea { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background: var(--bg-card); color: var(--text-main); font-family: inherit; } .leaddrawer-email-compose input:focus, .leaddrawer-email-compose textarea:focus { outline: none; border-color: var(--primary); } .leaddrawer-email-compose textarea { min-height: 150px; resize: vertical; } .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; background-color: var(--bg-card); color: var(--text-main); transition: all 0.2s; } .btn:hover { background-color: var(--bg-main); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--primary-hover); } .btn-secondary { background-color: var(--bg-main); color: var(--text-muted); } .btn-secondary:hover { background-color: var(--border-color); color: var(--text-main); } .btn-danger { background-color: var(--danger-text); border-color: var(--danger-text); color: white; } .btn-danger:hover { background-color: var(--danger-text); } .leaddrawer-action-btn.disabled { opacity: 0.5; cursor: not-allowed; } .leaddrawer-note-textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background: var(--bg-card); color: var(--text-main); font-family: inherit; min-height: 80px; resize: vertical; } .leaddrawer-note-actions-container { margin-top: 0.5rem; } .leaddrawer-task-description { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }.cell-edit-popover { position: fixed; z-index: 9999; background: var(--surface-3); border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); box-shadow: var(--elevation-2); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .cell-edit-popover-label { font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); } .cell-edit-popover select, .cell-edit-popover input { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; color: var(--text-main); background: var(--surface-2); } .cell-edit-popover select:focus, .cell-edit-popover input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .cell-edit-popover-select { display: flex; flex-direction: column; gap: 0.5rem; } .cell-edit-popover-options { max-height: 150px; overflow-y: auto; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); background: var(--surface-2); } .cell-edit-popover-option { padding: 0.5rem 0.625rem; font-size: 0.875rem; cursor: pointer; color: var(--text-main); } .cell-edit-popover-option:hover { background: var(--surface-hover); } .cell-edit-popover-option.selected { background: var(--accent-subtle); font-weight: 500; } .cell-edit-popover-option.empty { color: var(--text-tertiary); cursor: default; } .cell-edit-popover-option.empty:hover { background: transparent; } .cell-edit-popover-actions { display: flex; justify-content: flex-end; gap: 0.375rem; } .cell-edit-popover-actions button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); background: var(--surface-2); color: var(--text-main); cursor: pointer; } .cell-edit-popover-actions button:first-child { color: var(--success-text); border-color: var(--success); } .cell-edit-popover-actions button:disabled { opacity: 0.6; cursor: not-allowed; } .cell-edit-popover .spin { animation: cellEditPopoverSpin 0.8s linear infinite; } @keyframes cellEditPopoverSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } .modal-content { width: 100%; max-width: 450px; } .loading-overlay { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); color: var(--text-muted); font-size: 0.875rem; } .loading-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .error-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--danger); border-radius: var(--border-radius-sm); background-color: var(--danger-subtle); color: var(--danger-text); font-size: 0.875rem; margin-bottom: 1rem; } .leaddrawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); z-index: 1000; display: flex; justify-content: flex-end; pointer-events: none; } .leaddrawer-overlay.visible { background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; animation: overlayFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } .leaddrawer-panel { position: absolute; top: 0; right: 0; width: 90%; height: 100%; background-color: var(--bg-card); display: flex; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .leaddrawer-panel.animating { transform: translateX(0); } .leaddrawer-overlay.visible .leaddrawer-panel { transform: translateX(0); } @media (max-width: 1024px) { .leaddrawer-panel { width: 100%; } } @media (max-width: 768px) { .leaddrawer-left-header { padding: 0.875rem 1rem; } .leaddrawer-left-header-left { gap: 0.375rem; } .leaddrawer-title { font-size: 0.9375rem; } } .leaddrawer-two-col { display: flex; width: 100%; height: 100%; } .leaddrawer-left { width: 25%; min-width: 280px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; overflow-y: auto; background-color: var(--bg-card); } .leaddrawer-left-header { display: flex; justify-content: space-between; align-items: center; padding: 7px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-card); flex-shrink: 0; position: sticky; top: 0; z-index: 10; } .leaddrawer-left-header-left { display: flex; align-items: center; gap: 0.5rem; } .leaddrawer-back-btn { display: flex; align-items: center; gap: 0.375rem; background: transparent; border: none; color: var(--primary); font-size: 0.875rem; font-weight: 500; cursor: pointer; padding: 0.375rem; border-radius: var(--border-radius-sm); transition: all 0.2s; } .leaddrawer-back-btn:hover { background-color: var(--bg-main); } .leaddrawer-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; } .leaddrawer-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 0.375rem; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); transition: all 0.2s; } .leaddrawer-close:hover { background-color: var(--bg-main); color: var(--text-main); } .leaddrawer-right { width: 75%; display: flex; flex-direction: column; overflow: hidden; } .leaddrawer-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-card); flex-shrink: 0; } .leaddrawer-header-left { display: flex; align-items: center; gap: 0.5rem; } .leaddrawer-header .leaddrawer-back-btn { padding: 0.5rem; } .leaddrawer-header .leaddrawer-close { padding: 0.5rem; } .leaddrawer-main { padding: 1.5rem; flex: 1; overflow-y: auto; } .leaddrawer-profile { text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; } .leaddrawer-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 600; margin: 0 auto 1rem; } .leaddrawer-name { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.5rem; } .leaddrawer-badges { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; } .leaddrawer-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; } .leaddrawer-badge.hot-lead { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; } .leaddrawer-badge.warm-lead { background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; } .leaddrawer-badge.cold-lead { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; } .leaddrawer-badge.active { background-color: rgba(16, 185, 129, 0.1); color: #10b981; } .leaddrawer-badge.inactive { background-color: rgba(107, 114, 128, 0.1); color: #6b7280; } .leaddrawer-badge.pending { background-color: rgba(251, 191, 36, 0.1); color: #fbbf24; } .leaddrawer-actions { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; } .leaddrawer-action-btn { width: 40px; height: 40px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all 0.2s; } .leaddrawer-action-btn:hover { background-color: var(--bg-main); border-color: var(--primary); color: var(--primary); } .leaddrawer-action-btn.delete:hover { border-color: #dc2626; color: #dc2626; } .leaddrawer-section { margin-bottom: 1.5rem; } .leaddrawer-section-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.75rem; } .leaddrawer-info-grid { display: flex; flex-direction: column; gap: 0.75rem; } .leaddrawer-info-item { display: flex; align-items: flex-start; gap: 0.625rem; } .leaddrawer-info-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-main); border-radius: var(--border-radius-sm); color: var(--text-muted); flex-shrink: 0; } .leaddrawer-info-content { flex: 1; display: flex; flex-direction: column; } .leaddrawer-info-label { font-size: 0.6875rem; color: var(--text-muted); } .leaddrawer-info-value { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .leaddrawer-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .leaddrawer-detail-card { background-color: var(--bg-main); border-radius: var(--border-radius-sm); padding: 0.75rem; } .leaddrawer-detail-label { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.25rem; } .leaddrawer-detail-value { font-size: 0.8125rem; font-weight: 500; color: var(--text-main); display: flex; align-items: center; gap: 0.375rem; cursor: pointer; } .leaddrawer-detail-value svg { opacity: 0; color: var(--text-muted); transition: opacity 0.2s; } .leaddrawer-detail-card:hover .leaddrawer-detail-value svg { opacity: 1; } .leaddrawer-detail-value svg:hover { color: var(--primary); } .leaddrawer-edit-input, .leaddrawer-edit-select { width: 100%; padding: 0.375rem 0.5rem; border: 1px solid var(--primary); border-radius: var(--border-radius-sm); font-size: 0.8125rem; background: var(--bg-card); color: var(--text-main); font-family: inherit; outline: none; } .leaddrawer-detail-full { grid-column: 1 / -1; } .leaddrawer-tabs { display: flex; gap: 0; padding: 0 1.25rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-card); flex-shrink: 0; overflow-x: auto; } .leaddrawer-tab { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; } .leaddrawer-tab:hover { color: var(--text-main); } .leaddrawer-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .leaddrawer-tab-content { flex: 1; overflow-y: auto; padding: 1.5rem; } .leaddrawer-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .leaddrawer-tab-heading { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; } .leaddrawer-activity-list { display: flex; flex-direction: column; gap: 1rem; } .leaddrawer-activity-card { display: flex; gap: 0.875rem; padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); } .leaddrawer-activity-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; } .leaddrawer-activity-content { flex: 1; display: flex; flex-direction: column; } .leaddrawer-activity-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .leaddrawer-activity-user { font-size: 0.875rem; font-weight: 600; color: var(--text-main); } .leaddrawer-activity-action { font-size: 0.875rem; color: var(--text-muted); } .leaddrawer-activity-time { font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-activity-desc { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.5; } .leaddrawer-loading, .leaddrawer-error, .leaddrawer-empty { padding: 2rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); } .leaddrawer-error { color: #dc2626; } .leaddrawer-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; text-align: center; } .leaddrawer-empty-icon { width: 64px; height: 64px; border-radius: 50%; background-color: var(--bg-main); color: var(--text-muted); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .leaddrawer-empty-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.375rem; } .leaddrawer-empty-text { font-size: 0.875rem; color: var(--text-muted); margin: 0; } .leaddrawer-note-card { display: flex; gap: 0.875rem; padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; } .leaddrawer-note-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; } .leaddrawer-note-content { flex: 1; display: flex; flex-direction: column; } .leaddrawer-note-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .leaddrawer-note-user { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .leaddrawer-note-time { font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-note-text { font-size: 0.875rem; color: var(--text-main); line-height: 1.5; } .leaddrawer-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .leaddrawer-note-action { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; border-radius: var(--border-radius-sm); transition: all 0.2s; } .leaddrawer-note-action:hover { color: var(--primary); background-color: var(--bg-card); } .leaddrawer-task-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .leaddrawer-filter-btn { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .leaddrawer-filter-btn:hover { border-color: var(--primary); color: var(--primary); } .leaddrawer-filter-btn.active { background-color: var(--primary); border-color: var(--primary); color: white; } .leaddrawer-task-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; } .leaddrawer-task-info { flex: 1; } .leaddrawer-task-title { font-size: 0.875rem; font-weight: 500; color: var(--text-main); margin-bottom: 0.25rem; } .leaddrawer-task-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-task-badges { display: flex; gap: 0.375rem; } .leaddrawer-task-badge { padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; } .leaddrawer-task-badge.low { background-color: rgba(16, 185, 129, 0.1); color: #10b981; } .leaddrawer-task-badge.medium { background-color: rgba(251, 191, 36, 0.1); color: #fbbf24; } .leaddrawer-task-badge.high { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; } .leaddrawer-task-badge.pending { background-color: rgba(251, 191, 36, 0.1); color: #fbbf24; } .leaddrawer-task-badge.in-progress { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; } .leaddrawer-task-badge.completed { background-color: rgba(16, 185, 129, 0.1); color: #10b981; } .leaddrawer-task-actions { display: flex; gap: 0.25rem; } .leaddrawer-deal-card { padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); margin-bottom: 0.75rem; } .leaddrawer-deal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .leaddrawer-deal-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); } .leaddrawer-deal-amount { font-size: 1rem; font-weight: 600; color: var(--primary); } .leaddrawer-deal-stage { padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.6875rem; font-weight: 500; } .leaddrawer-deal-stage.new { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; } .leaddrawer-deal-stage.proposal { background-color: rgba(139, 92, 246, 0.1); color: #8b5cf6; } .leaddrawer-deal-stage.won { background-color: rgba(16, 185, 129, 0.1); color: #10b981; } .leaddrawer-deal-stage.lost { background-color: rgba(107, 114, 128, 0.1); color: #6b7280; } .leaddrawer-deal-progress { height: 4px; background-color: var(--border-color); border-radius: 2px; margin-top: 0.75rem; overflow: hidden; } .leaddrawer-deal-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, #ff6b6b 100%); border-radius: 2px; } .leaddrawer-deal-meta { display: flex; justify-content: space-between; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } .leaddrawer-email-compose { padding: 1rem; background-color: var(--bg-main); border-radius: var(--border-radius-sm); } .leaddrawer-email-compose .leaddrawer-form-group { margin-bottom: 0.75rem; } .leaddrawer-email-compose input, .leaddrawer-email-compose textarea { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background: var(--bg-card); color: var(--text-main); font-family: inherit; } .leaddrawer-email-compose input:focus, .leaddrawer-email-compose textarea:focus { outline: none; border-color: var(--primary); } .leaddrawer-email-compose textarea { min-height: 150px; resize: vertical; } .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; background-color: var(--bg-card); color: var(--text-main); transition: all 0.2s; } .btn:hover { background-color: var(--bg-main); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--primary-hover); } .btn-secondary { background-color: var(--bg-main); color: var(--text-muted); } .btn-secondary:hover { background-color: var(--border-color); color: var(--text-main); } .btn-danger { background-color: #dc2626; border-color: #dc2626; color: white; } .btn-danger:hover { background-color: #b91c1c; }.followup-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .followup-stat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 1rem 1.25rem; background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, var(--border-color)); border-radius: var(--border-radius-lg, 12px); box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.2s ease; text-align: left; font: inherit; } .followup-stat-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .followup-stat-card.active { border-color: var(--primary); background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%); } .followup-stat-card.active .followup-stat-value, .followup-stat-card.active .followup-stat-label { color: #ffffff; } .followup-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-main); } .followup-stat-label { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); } @media (max-width: 768px) { .followup-stat-cards { grid-template-columns: repeat(2, 1fr); } } .drafts-list-container { padding: 1.5rem; background: var(--surface-bg, var(--surface-2)); border-radius: 0.5rem; min-height: calc(100vh - 200px); } .drafts-header { margin-bottom: 2rem; } .drafts-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary, var(--text-primary)); margin: 0 0 0.5rem 0; } .drafts-header p { font-size: 0.95rem; color: var(--text-secondary, var(--text-muted)); margin: 0; } .drafts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .draft-card { background: var(--surface-1); border: 1px solid var(--border-color, var(--border-color)); border-radius: 0.75rem; padding: 1.25rem; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; } .draft-card:hover { border-color: var(--primary-color, var(--info)); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .draft-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; } .draft-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary, var(--text-primary)); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draft-delete-btn { background: transparent; border: none; color: var(--text-tertiary, var(--text-tertiary)); cursor: pointer; padding: 0.25rem; border-radius: 0.375rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .draft-delete-btn:hover { background: var(--danger-subtle); color: var(--error-color, var(--danger)); } .draft-subtitle { font-size: 0.9rem; color: var(--text-secondary, var(--text-muted)); margin: 0 0 1.5rem 0; } .draft-card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color, var(--border-color)); padding-top: 1rem; } .draft-time { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-tertiary, var(--text-tertiary)); } .draft-resume { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--primary-color, var(--info)); opacity: 0; transform: translateX(-5px); transition: all 0.2s ease; } .draft-card:hover .draft-resume { opacity: 1; transform: translateX(0); } .drafts-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; background: var(--surface-1); border-radius: 0.5rem; border: 1px dashed var(--border-color, var(--border-color)); text-align: center; } .drafts-empty-icon { width: 80px; height: 80px; background: var(--bg-hover, var(--surface-2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary, var(--text-tertiary)); margin-bottom: 1.5rem; } .drafts-empty-state h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary, var(--text-primary)); margin: 0 0 0.5rem 0; } .drafts-empty-state p { font-size: 0.95rem; color: var(--text-secondary, var(--text-muted)); margin: 0; max-width: 400px; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; } .empty-state-icon { color: var(--text-tertiary); margin-bottom: 16px; } .empty-state-message { font-size: 15px; color: var(--text-secondary); margin: 0; } /* DateRangePicker - reusable preset + custom calendar filter control */ .date-range-trigger { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); background-color: var(--surface-2); color: var(--text-main); font-size: 0.875rem; cursor: pointer; outline: none; text-align: left; } .date-range-trigger svg { color: var(--text-tertiary); flex-shrink: 0; } .date-range-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .date-range-trigger.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .date-range-dropdown { min-width: 240px; } .date-range-dropdown-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; border-top: 1px solid var(--border-subtle); } .date-range-clear { border: none; background: transparent; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; padding: 0.25rem 0; } .date-range-clear:hover { color: var(--primary); } .date-range-apply { padding: 0.375rem 1rem; font-size: 0.8125rem; } .date-range-custom-view { padding-bottom: 0.25rem; } .date-range-custom-header { padding: 0.5rem 0.5rem 0; } .date-range-back { display: flex; align-items: center; gap: 0.25rem; border: none; background: transparent; color: var(--text-main); font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 0.375rem 0.5rem; } .date-range-custom-hint { padding: 0 1rem 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* MiniCalendar */ .mini-calendar { padding: 0 0.75rem 0.5rem; } .mini-calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.25rem 0.5rem; } .mini-calendar-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-main); } .mini-calendar-nav { display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--border-radius-sm); } .mini-calendar-nav:hover { background: var(--surface-hover); color: var(--text-main); } .mini-calendar-weekdays, .mini-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .mini-calendar-weekdays span { text-align: center; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); padding-bottom: 0.375rem; } .mini-calendar-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: none; background: transparent; border-radius: var(--border-radius-sm); font-size: 0.8125rem; color: var(--text-main); cursor: pointer; } .mini-calendar-day:hover:not(:disabled) { background: var(--surface-hover); } .mini-calendar-day.muted { color: var(--text-tertiary); } .mini-calendar-day.disabled { color: var(--text-disabled); cursor: not-allowed; } .mini-calendar-day.in-range { background: var(--accent-subtle); border-radius: 0; } .mini-calendar-day.selected { background: var(--primary); color: var(--text-on-accent); font-weight: 600; } .modal-content { width: 100%; max-width: 450px; } .toast-notification { position: fixed; bottom: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 6px; font-size: 14px; font-weight: 500; z-index: 9999; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: toastSlideIn 0.3s ease; } .toast-success { background: var(--success); color: #ffffff; } .toast-error { background: var(--danger-text); color: #ffffff; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* ─── Progress Cell ─── */ .progress-cell { display: flex; align-items: center; gap: 0.5rem; } .progress-bar { width: 60px; height: 6px; background-color: var(--bg-main); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background-color: var(--success); border-radius: 3px; transition: width 0.3s ease; } .error-banner { padding: 0.75rem 1rem; border: 1px solid var(--danger); border-radius: var(--border-radius-sm); background-color: var(--danger-subtle); color: var(--danger-text); font-size: 0.875rem; margin-bottom: 1rem; } /* ─── Agent Multi-Select ─── */ .multi-select-container { position: relative; width: 100%; } .multi-select-trigger { display: flex; align-items: center; gap: 0.5rem; min-height: 42px; padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; user-select: none; } .multi-select-trigger:hover { border-color: var(--border-strong); } .multi-select-trigger--open { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(241, 65, 79, 0.1); } .multi-select-trigger-inner { flex: 1; min-width: 0; } .multi-select-placeholder { color: var(--text-muted); font-size: 0.875rem; } .multi-select-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; } .multi-select-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem 0.125rem 0.125rem; background: var(--danger-subtle); border-radius: 20px; font-size: 0.8125rem; color: var(--danger-text); line-height: 1.4; } .multi-select-tag-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #ffffff; font-size: 0.625rem; font-weight: 600; flex-shrink: 0; } .multi-select-tag-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multi-select-tag-remove { flex-shrink: 0; cursor: pointer; color: var(--danger-text); border-radius: 50%; padding: 1px; transition: background-color 0.15s ease; } .multi-select-tag-remove:hover { background: rgba(153, 27, 27, 0.12); } .multi-select-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; } .multi-select-chevron--open { transform: rotate(180deg); } .multi-select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--elevation-2); animation: multiSelectSlideIn 0.2s ease forwards; overflow: hidden; } @keyframes multiSelectSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .multi-select-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border-color); } .multi-select-search-icon { flex-shrink: 0; color: var(--text-muted); } .multi-select-search-input { flex: 1; border: none; outline: none; font-size: 0.875rem; color: var(--text-main); background: transparent; font-family: var(--font-family); } .multi-select-search-input::placeholder { color: var(--text-muted); } .multi-select-options { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; } .multi-select-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; transition: background-color 0.12s ease; } .multi-select-option:hover, .multi-select-option--highlighted { background: var(--surface-2); } .multi-select-option--selected { background: var(--danger-subtle); } .multi-select-option--selected:hover, .multi-select-option--selected.multi-select-option--highlighted { background: var(--danger-subtle); } .multi-select-option-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #ffffff; font-size: 0.8125rem; font-weight: 600; flex-shrink: 0; margin-top: 1px; } .multi-select-option-info { flex: 1; min-width: 0; } .multi-select-option-name { font-size: 0.875rem; font-weight: 600; color: var(--text-main); line-height: 1.3; } .multi-select-option-meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 1px; } .multi-select-option-id, .multi-select-option-phone { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; } .multi-select-option-email { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; margin-top: 1px; } .multi-select-option-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 8px; color: var(--primary); } .multi-select-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; color: var(--text-muted); font-size: 0.875rem; } .multi-select-empty .spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Error state — matches project's .form-control.input-error */ .multi-select-container.input-error .multi-select-trigger { border-color: var(--danger-text); } .multi-select-container.input-error .multi-select-trigger:focus, .multi-select-container.input-error .multi-select-trigger--open { border-color: var(--danger-text); box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15); } /* ─── Assign Leads Drawer ─── */ .assign-leads-drawer .form-group { margin-bottom: 1.5rem; } .lead-search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .lead-search-box .form-control { border: none; padding-left: 0; } .lead-search-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; color: var(--text-muted); font-size: 0.875rem; } .lead-search-results { margin-top: 0.5rem; max-height: 220px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .lead-search-result-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); cursor: pointer; font-size: 0.875rem; } .lead-search-result-item:last-child { border-bottom: none; } .lead-search-result-item--assigned { color: var(--text-muted); cursor: not-allowed; } .lead-search-result-phone { color: var(--text-muted); font-size: 0.8125rem; } .lead-search-result-tag { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); } .assigned-leads-empty { color: var(--text-muted); font-size: 0.875rem; } .assigned-leads-list { display: flex; flex-direction: column; gap: 0.5rem; } .assigned-lead-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .assigned-lead-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .assigned-lead-name { font-weight: 500; font-size: 0.875rem; } .assigned-lead-phone { display: flex; align-items: center; gap: 0.25rem; color: var(--text-muted); font-size: 0.8125rem; } .assigned-lead-status { width: auto; height: 36px; } .assigned-lead-remove { color: var(--danger-text); } .claimed-lead-result { margin-top: 1rem; } .claimed-lead-source { color: var(--text-muted); font-size: 0.75rem; } .campaign-detail-summary { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); } .campaign-detail-description { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.875rem; } .campaign-detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.5rem; margin: 1rem 0 0; } .campaign-detail-meta dt { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.125rem; } .campaign-detail-meta dd { margin: 0; font-size: 0.875rem; font-weight: 500; } /* Visually hidden but still announced by screen readers - used to label the AgentMultiSelect search input, which only has a placeholder otherwise. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sortable-column-header { display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } .modal-content { width: 100%; max-width: 450px; } .table-sort-button { display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .pipeline-page { display: flex; flex-direction: column; padding: 1.5rem; background: var(--bg-main); min-height: 100vh; } .pipeline-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .pipeline-search { display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); } .pipeline-search .search-icon { color: var(--text-muted); } .pipeline-search .search-input { border: none; background: transparent; outline: none; font-size: 0.875rem; width: 220px; color: var(--text-main); height: 44px; } .pipeline-search .search-input::placeholder { color: var(--text-muted); } .pipeline-left { display: flex; align-items: center; gap: 0.75rem; } .date-filter-wrapper { position: relative; } .btn-filter { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; height: 44px; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--border-color); border-radius: 0; background: var(--bg-card); color: var(--text-main); cursor: pointer; transition: all 0.2s ease; } .btn-filter:hover { background: var(--bg-main); border-color: var(--primary); } .btn-filter.active { background: var(--bg-main); border-color: var(--primary); color: var(--primary); } .date-filter-dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 100; min-width: 280px; padding: 1rem; } .date-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .date-filter-header span { font-size: 0.875rem; font-weight: 600; color: var(--text-main); } .clear-filter { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 4px; } .clear-filter:hover { background: var(--bg-main); color: var(--primary); } .date-filter-inputs { display: flex; flex-direction: column; gap: 0.75rem; } .date-input-group { display: flex; flex-direction: column; gap: 0.375rem; } .date-input-group label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .date-input { padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0; font-size: 0.875rem; color: var(--text-main); background: var(--bg-main); width: 100%; } .date-input:focus { outline: none; border-color: var(--primary); } .date-input-group select.date-input { cursor: pointer; } .pipeline-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; } .pipeline-column { flex: 0 0 300px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0; display: flex; flex-direction: column; max-height: calc(100vh - 220px); } .column-header { padding: 1rem 1.25rem; border-top: 4px solid; border-radius: 0; } .column-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; } .column-probability { font-size: 0.75rem; color: var(--text-tertiary); } .column-name { font-size: 1rem; font-weight: 600; color: var(--text-main); } .column-count { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 600; background: var(--bg-main); border-radius: 0; color: var(--text-muted); } .column-value { font-size: 0.875rem; font-weight: 600; color: var(--primary); } .column-cards { flex: 1; overflow-y: auto; padding: 0 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .pipeline-column-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: var(--text-muted); text-align: center; } .pipeline-column-empty p { font-size: 0.8125rem; margin: 0.5rem 0 0 0; } .deal-card { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; cursor: grab; transition: all 0.2s ease; user-select: none; } .deal-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .deal-card:active { cursor: grabbing; } .deal-card--dragging { opacity: 0.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); pointer-events: none; cursor: grabbing; } .deal-card--overlay { cursor: grabbing; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24); transform: rotate(-2deg); width: 280px; } .pipeline-column--drop-target { border-color: var(--primary); background: rgba(241, 65, 79, 0.06); box-shadow: inset 0 0 0 2px var(--primary); transition: background 0.15s ease, box-shadow 0.15s ease; } .pipeline-column-empty--active { color: var(--primary); } .deal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .deal-company { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .deal-menu { color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.2s ease; } .deal-card:hover .deal-menu { opacity: 1; } .deal-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.75rem; line-height: 1.4; } .deal-priority-badge { display: inline-block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5rem; } .deal-value { display: flex; align-items: center; gap: 0.25rem; font-size: 1.125rem; font-weight: 700; color: var(--text-main); margin-bottom: 1rem; } .deal-value svg { color: var(--primary); } .deal-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color); } .deal-contact { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; } .contact-avatar { width: 28px; height: 28px; border-radius: 50%; color: white; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .deal-contact span { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deal-probability { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; margin-left: 0.5rem; } .deal-due { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-muted); } .deal-due svg { opacity: 0.7; } .add-card-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.75rem; padding: 0.75rem; border: 2px dashed var(--border-color); border-radius: 10px; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .add-card-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(241, 65, 79, 0.05); } .see-more-btn { display: flex; align-items: center; justify-content: center; margin: 0 0.75rem 0.75rem; padding: 0.625rem; border: 1px solid var(--border-color); border-radius: 0; background: var(--bg-main); color: var(--primary); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .see-more-btn:hover { background: var(--bg-card); border-color: var(--primary); } .see-more-btn:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 1024px) { .month-column { flex: 0 0 280px; } .pipeline-left { flex-wrap: wrap; } .date-filter-dropdown { left: auto; right: 0; } } @media (max-width: 768px) { .pipeline-toolbar { flex-direction: column; gap: 1rem; align-items: stretch; } .pipeline-left { width: 100%; } .pipeline-search { flex: 1; } .date-filter-wrapper { width: 100%; } .btn-filter { width: 100%; justify-content: center; } .pipeline-actions { width: 100%; justify-content: flex-end; } } .modal-content { width: 100%; max-width: 450px; } .pipeline-loading { font-size: 0.8125rem; color: var(--text-muted); padding: 0 0.5rem; } .toast-notification { position: fixed; bottom: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 6px; font-size: 14px; font-weight: 500; animation: toast-slide-in 0.3s ease; z-index: 9999; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .toast-success { background: var(--success); color: #ffffff; } .toast-error { background: var(--danger-text); color: #ffffff; } @keyframes toast-slide-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }/* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Company stats grid */ .company-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .company-stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .company-stat-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-sm); } .company-stat-info { display: flex; flex-direction: column; } .company-stat-value { font-size: 1.25rem; font-weight: 600; color: var(--text-main); } .company-stat-label { font-size: 0.75rem; color: var(--text-muted); } /* Plans list */ .plans-list { display: flex; flex-direction: column; gap: 0.75rem; } .plan-card { padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-main); } .plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .plan-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); } .current-badge { font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.375rem; background: var(--primary); color: white; border-radius: var(--border-radius-sm); } .plan-details { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .plan-date, .plan-price { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); } .renewal-btn { width: 100%; margin-top: 1rem; } .renewal-modal { max-width: 400px; } .plan-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: var(--border-radius-sm); font-size: 0.75rem; font-weight: 500; } /* Pagination container */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-controls { display: flex; align-items: center; gap: 0.5rem; } .pagination .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: all 0.2s; } .pagination .pagination-btn:hover:not(:disabled) { background-color: var(--bg-main); } .pagination .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .modal-content { width: 100%; max-width: 450px; } /* Stats grid override */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .stat-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-main); } .stat-icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); } .stat-info { display: flex; flex-direction: column; gap: 0.125rem; } .stat-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1; } .stat-value { font-size: 1.25rem; font-weight: 600; color: var(--text-main); line-height: 1.2; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } .subscription-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; } .subscription-back-link:hover { color: var(--text-main); } .subscription-overview-card, .subscription-renewal-card, .subscription-empty-state, .subscription-history-card { margin-bottom: 1.5rem; } .subscription-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-main); } .stat-icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); } .stat-info { display: flex; flex-direction: column; gap: 0.125rem; } .stat-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1; } .stat-value { font-size: 1.25rem; font-weight: 600; color: var(--text-main); line-height: 1.2; } .detail-item.full-width { grid-column: 1 / -1; } .subscription-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .subscription-total-preview { font-size: 0.875rem; color: var(--text-muted); margin: 0.75rem 0 1rem; } .subscription-total-preview strong { color: var(--text-main); } .subscription-empty-hint { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .card-header h5 { margin: 0; } .btn-danger { background-color: var(--danger-subtle); color: var(--danger-text); border-color: var(--danger); } .btn-danger:hover { background-color: var(--danger-subtle); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .facebook-view-leads-page { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .filter-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.25rem; } .filter-card-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: var(--text-main); } .filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: flex-end; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-separator { color: var(--text-muted); } .calendar-btn, .search-btn { display: flex; align-items: center; justify-content: center; width: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 0 6px 6px 0; margin-left: -1px; color: var(--text-muted); cursor: pointer; } .search-input-wrapper { display: flex; align-items: center; } .search-input-wrapper input { border-radius: 6px 0 0 6px; } .search-input-wrapper .search-btn { border-radius: 0 6px 6px 0; margin-left: -1px; } .filter-actions { display: flex; gap: 0.5rem; align-items: flex-end; } .summary-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .summary-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem 1.25rem; } .summary-card.blue { background: var(--info); color: #ffffff; } .summary-card.green { background: var(--success); color: #ffffff; } .summary-card.red { background: var(--danger); color: #ffffff; } .summary-card.teal { background: #14b8a6; color: #ffffff; } .summary-card.yellow { background: var(--warning); color: #ffffff; } .summary-content { display: flex; flex-direction: column; gap: 0.25rem; } .summary-title { font-size: 0.75rem; font-weight: 500; opacity: 0.9; } .summary-value { font-size: 1.5rem; font-weight: 700; } .table-controls { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.75rem 1rem; } .table-controls-left { display: flex; align-items: center; gap: 0.5rem; } .show-entries { font-size: 0.875rem; color: var(--text-muted); } .table-controls-left select { padding: 0.375rem 0.5rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.875rem; background: var(--bg-card); color: var(--text-main); } .live-search input { padding: 0.375rem 0.5rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.875rem; width: 150px; background: var(--bg-card); color: var(--text-main); } .live-search input:focus { outline: none; border-color: var(--primary); } .leads-table-wrapper { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .leads-table { width: 100%; border-collapse: collapse; } .leads-table th, .leads-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .leads-table th { background: var(--bg-main); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .leads-table td { font-size: 0.875rem; color: var(--text-main); } .leads-table tr:hover { background: var(--bg-main); } .view-data-btn { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 4px; cursor: pointer; color: var(--text-muted); } .view-data-btn:hover { border-color: var(--primary); color: var(--primary); } .status-badge.success { background: var(--success-subtle); color: var(--success-text); } .status-badge.failed { background: var(--danger-subtle); color: var(--danger-text); } .status-badge.pending { background: var(--warning-subtle); color: var(--warning-text); } .lead-status-badge { padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; } .lead-status-badge.new { background: var(--info-subtle); color: var(--info-text); } .lead-status-badge.existing { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .lead-status-badge.duplicate { background: var(--warning-subtle); color: var(--warning-text); } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-muted); } .empty-icon { margin-bottom: 1rem; opacity: 0.5; } .empty-state p { margin: 0; font-size: 1rem; } .detail-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); } .detail-label { font-size: 0.875rem; color: var(--text-muted); } .detail-value { font-size: 0.875rem; font-weight: 500; color: var(--text-main); } .detail-json { background: #1e293b; color: var(--border-default); padding: 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.75rem; max-height: 150px; overflow: auto; margin: 0; width: 100%; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border-color); } @media (max-width: 1200px) { .summary-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 992px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .summary-cards { grid-template-columns: repeat(2, 1fr); } .filter-grid { grid-template-columns: 1fr; } .leads-table-wrapper { overflow-x: auto; } } .modal-content { width: 100%; max-width: 450px; } .facebook-workflows-page { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .workflows-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .toolbar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .toolbar-right { display: flex; align-items: center; gap: 0.75rem; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; min-width: 220px; } .search-box input { border: none; background: transparent; outline: none; font-size: 0.875rem; width: 100%; color: var(--text-main); } .search-box input::placeholder { color: var(--text-muted); } .status-filter, .rows-per-page { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.875rem; background: var(--bg-card); color: var(--text-main); cursor: pointer; } /* Empty State */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; text-align: center; } .empty-illustration { color: var(--text-muted); margin-bottom: 1rem; opacity: 0.5; } .empty-state h3 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--text-main); } .empty-state p { margin: 0 0 1.5rem; color: var(--text-muted); } /* Table */ .workflows-table-wrapper { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .workflows-table { width: 100%; border-collapse: collapse; } .workflows-table th, .workflows-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .workflows-table th { background: var(--bg-main); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .workflows-table td { font-size: 0.875rem; color: var(--text-main); } .workflows-table tr:hover { background: var(--bg-main); } .workflow-name-link { background: none; border: none; font-size: 0.875rem; font-weight: 500; color: var(--primary); cursor: pointer; padding: 0; } .workflow-name-link:hover { text-decoration: underline; } .status-badge { padding: 0.25rem 0.625rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; } .status-badge.active { background: #d1fae5; color: #059669; } .status-badge.inactive { background: #fee2e2; color: #dc2626; } .actions-cell { position: relative; } .action-menu-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: var(--text-muted); } .action-menu-btn:hover { background: var(--bg-main); color: var(--text-main); } .action-dropdown { position: absolute; right: 0; top: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10; min-width: 120px; } .action-dropdown button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.625rem 0.75rem; border: none; background: transparent; font-size: 0.875rem; color: var(--text-main); cursor: pointer; text-align: left; } .action-dropdown button:hover { background: var(--bg-main); } .action-dropdown .delete-action { color: #dc2626; } /* Pagination */ .pagination-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; flex-wrap: wrap; gap: 1rem; } .showing-text { font-size: 0.875rem; color: var(--text-muted); } .pagination-controls { display: flex; gap: 0.25rem; } .pagination-btn { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 4px; font-size: 0.8125rem; cursor: pointer; color: var(--text-muted); } .pagination-btn:hover:not(:disabled) { background: var(--bg-main); border-color: var(--primary); color: var(--primary); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-number { width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 4px; font-size: 0.8125rem; cursor: pointer; color: var(--text-muted); } .pagination-number:hover { background: var(--bg-main); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Delete Modal */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--bg-card); border-radius: 8px; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); } .modal-header h3 { margin: 0; font-size: 1rem; } .modal-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: var(--bg-main); border-radius: 4px; cursor: pointer; color: var(--text-muted); } .modal-close:hover { background: var(--border-color); } .modal-body { padding: 1.25rem; } .delete-warning { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: #fef3c7; border-radius: 6px; color: #92400e; margin-bottom: 1rem; } .delete-warning p { margin: 0; font-size: 0.875rem; } .delete-message { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.5rem; } .delete-message strong { color: var(--text-main); } .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; } /* Buttons */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-outline { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-danger { background: #dc2626; color: #fff; border: 1px solid #dc2626; } .btn-danger:hover { background: #b91c1c; } .btn-danger-outline { background: transparent; color: #dc2626; border: 1px solid #dc2626; } .btn-danger-outline:hover { background: #fef2f2; } /* Create/Edit Page */ .create-workflow-page { padding: 1.5rem; } .page-header-with-toggle { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; } .header-actions { display: flex; align-items: center; gap: 1rem; } .facebook-connect-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #1877f2; color: #fff; border: none; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.2s; } .facebook-connect-btn:hover { background: #166fe5; } .facebook-connect-btn:disabled { opacity: 0.7; cursor: not-allowed; } .toast-notification { position: fixed; bottom: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 6px; font-size: 14px; font-weight: 500; animation: toastSlideIn 0.3s ease; z-index: 9999; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .toast-success { background: #22c55e; color: #fff; } .toast-error { background: #dc2626; color: #fff; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } .toggle-switch { position: relative; width: 48px; height: 26px; display: inline-block; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: 0.3s; border-radius: 26px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle-switch input:checked + .toggle-slider { background-color: #22c55e; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .header-toggle .toggle-btn { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 6px; font-size: 0.875rem; color: var(--text-muted); cursor: pointer; } .header-toggle .toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .workflow-form-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; width: 100%; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-main); margin-bottom: 0.5rem; } .required { color: #dc2626; } .form-group input, .form-group select { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.875rem; background: var(--bg-card); color: var(--text-main); } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); } .form-group input.error, .form-group select.error { border-color: #dc2626; } .error-message { display: block; font-size: 0.75rem; color: #dc2626; margin-top: 0.375rem; } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .mapping-rows { display: flex; flex-direction: column; gap: 0.75rem; } .mapping-row { display: flex; gap: 0.75rem; } .mapping-row input, .mapping-row select { flex: 1; } .mapping-row-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border: 1px solid transparent; border-radius: 6px; cursor: pointer; } .mapping-row-btn:disabled { opacity: 0.4; cursor: not-allowed; } .mapping-row-btn--delete { background: rgba(220, 38, 38, 0.1); color: #dc2626; } .mapping-row-btn--delete:hover:not(:disabled) { background: rgba(220, 38, 38, 0.18); } .mapping-row-btn--add { background: rgba(24, 119, 242, 0.1); color: #1877f2; } .mapping-row-btn--add:hover { background: rgba(24, 119, 242, 0.18); } .mapping-row--builder { align-items: flex-start; } .mapping-row--builder > select:first-child { flex: 0 0 180px; } .mention-template-input { flex: 1; position: relative; } .mention-template-input__editor { min-height: 2.25rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); font-size: 0.875rem; line-height: 1.5; outline: none; } .mention-template-input__editor:focus { border-color: var(--primary); } .mention-template-input__editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); } .mention-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.5rem; margin: 0 0.125rem; border-radius: 999px; background: rgba(24, 119, 242, 0.12); color: #1877f2; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; user-select: none; } .mention-chip__remove { display: inline-flex; align-items: center; border: none; background: transparent; color: inherit; cursor: pointer; padding: 0; opacity: 0.7; font-size: 0.875rem; line-height: 1; } .mention-chip__remove:hover { opacity: 1; } .mention-template-input__suggestions { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 180px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .mention-template-input__suggestion { padding: 0.5rem 0.75rem; font-size: 0.8125rem; cursor: pointer; } .mention-template-input__suggestion:hover { background: rgba(24, 119, 242, 0.08); color: #1877f2; } .form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } /* Responsive */ @media (max-width: 768px) { .workflows-toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; } .search-box { width: 100%; } .form-row { grid-template-columns: 1fr; } .workflows-table-wrapper { overflow-x: auto; } .pagination-bar { flex-direction: column; align-items: stretch; } .pagination-controls { justify-content: center; } .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; } }/* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .settings-page { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; } .settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .settings-card { display: flex; flex-direction: column; padding: 1.25rem; background-color: var(--surface-1); border: 1px solid var(--border-color); border-radius: 8px; text-decoration: none; transition: all 0.2s ease; min-width: 0; min-height: 160px; } .settings-card:hover { border-color: var(--primary); box-shadow: var(--elevation-2); } .settings-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--surface-2); border-radius: 8px; margin-bottom: 1rem; color: var(--text-muted); } .settings-card:hover .settings-icon { background-color: var(--accent-subtle); color: var(--primary); } .settings-card h6 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-main); } .settings-card > p { margin: 0.5rem 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; } .settings-link { margin-top: auto; padding-top: 1rem; } .settings-link p { margin: 0; font-size: 13px; color: var(--primary); font-weight: 500; } .modal-content { width: 100%; max-width: 450px; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Settings Layout: sidebar menu + content area pattern */ .settings-menu { width: 220px; flex-shrink: 0; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 0.5rem; height: fit-content; } .settings-menu .menu-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: var(--border-radius-sm); cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .settings-menu .menu-item:hover { background: var(--surface-hover); } .settings-menu .menu-item.active { background: var(--accent-subtle); font-weight: var(--weight-semibold); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); } .settings-content { flex: 1; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 1.5rem; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .content-header .header-left { display: flex; align-items: center; } .content-header .header-right { display: flex; align-items: center; gap: 1rem; } @media (max-width: 1024px) { .settings-menu { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; } .settings-menu .menu-item { width: auto; } } @media (max-width: 768px) { .settings-content { padding: 1rem; } } .lead-settings-page { padding: 1.5rem; } .color-pill { display: inline-block; width: 24px; height: 24px; border-radius: 4px; } .truncate-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .additional-fields-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; } .color-input { height: 50px; padding: 4px; cursor: pointer; } .modal-content { width: 100%; max-width: 450px; } @media (max-width: 768px) { .lead-settings-page { padding: 1rem; } } @media (max-width: 480px) { .lead-settings-page { padding: 0.75rem; } } @media (max-width: 1024px) { .additional-fields-layout { grid-template-columns: 1fr; } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Settings Layout: sidebar menu + content area pattern */ .settings-menu { width: 220px; flex-shrink: 0; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 0.5rem; height: fit-content; } .settings-menu .menu-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: var(--border-radius-sm); cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .settings-menu .menu-item:hover { background: var(--surface-hover); } .settings-menu .menu-item.active { background: var(--accent-subtle); font-weight: var(--weight-semibold); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); } .settings-content { flex: 1; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 1.5rem; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .content-header .header-left { display: flex; align-items: center; } .content-header .header-right { display: flex; align-items: center; gap: 1rem; } @media (max-width: 1024px) { .settings-menu { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; } .settings-menu .menu-item { width: auto; } } @media (max-width: 768px) { .settings-content { padding: 1rem; } } .lead-settings-page { padding: 1.5rem; } .color-pill { display: inline-block; width: 24px; height: 24px; border-radius: 4px; } .truncate-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .additional-fields-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; } .color-input { height: 50px; padding: 4px; cursor: pointer; } .modal-content { width: 100%; max-width: 450px; } .table-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-muted); } .table-loading .spin { animation: spin 1s linear infinite; margin-bottom: 0.75rem; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 768px) { .lead-settings-page { padding: 1rem; } } @media (max-width: 480px) { .lead-settings-page { padding: 0.75rem; } } @media (max-width: 1024px) { .additional-fields-layout { grid-template-columns: 1fr; } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Settings Layout: sidebar menu + content area pattern */ .settings-menu { width: 220px; flex-shrink: 0; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 0.5rem; height: fit-content; } .settings-menu .menu-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: var(--border-radius-sm); cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .settings-menu .menu-item:hover { background: var(--surface-hover); } .settings-menu .menu-item.active { background: var(--accent-subtle); font-weight: var(--weight-semibold); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); } .settings-content { flex: 1; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 1.5rem; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .content-header .header-left { display: flex; align-items: center; } .content-header .header-right { display: flex; align-items: center; gap: 1rem; } @media (max-width: 1024px) { .settings-menu { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; } .settings-menu .menu-item { width: auto; } } @media (max-width: 768px) { .settings-content { padding: 1rem; } } .lead-settings-page { padding: 1.5rem; } .color-pill { display: inline-block; width: 24px; height: 24px; border-radius: 4px; } .truncate-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .additional-fields-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; } .color-input { height: 50px; padding: 4px; cursor: pointer; } .modal-content { width: 100%; max-width: 450px; } @media (max-width: 768px) { .lead-settings-page { padding: 1rem; } } @media (max-width: 480px) { .lead-settings-page { padding: 0.75rem; } } @media (max-width: 1024px) { .additional-fields-layout { grid-template-columns: 1fr; } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Settings Layout: sidebar menu + content area pattern */ .settings-menu { width: 220px; flex-shrink: 0; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 0.5rem; height: fit-content; } .settings-menu .menu-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: var(--border-radius-sm); cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .settings-menu .menu-item:hover { background: var(--surface-hover); } .settings-menu .menu-item.active { background: var(--accent-subtle); font-weight: var(--weight-semibold); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); } .settings-content { flex: 1; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 1.5rem; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .content-header .header-left { display: flex; align-items: center; } .content-header .header-right { display: flex; align-items: center; gap: 1rem; } @media (max-width: 1024px) { .settings-menu { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; } .settings-menu .menu-item { width: auto; } } @media (max-width: 768px) { .settings-content { padding: 1rem; } } .lead-settings-page { padding: 1.5rem; } .color-pill { display: inline-block; width: 24px; height: 24px; border-radius: 4px; } .truncate-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .additional-fields-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; } .color-input { height: 50px; padding: 4px; cursor: pointer; } .modal-content { width: 100%; max-width: 450px; } @media (max-width: 768px) { .lead-settings-page { padding: 1rem; } } @media (max-width: 480px) { .lead-settings-page { padding: 0.75rem; } } @media (max-width: 1024px) { .additional-fields-layout { grid-template-columns: 1fr; } } .dropdown-value-row { display: flex; gap: 0.5rem; align-items: center; } .dropdown-value-row .form-control { flex: 1; } .dropdown-value-row .btn { min-width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; } .dropdown-values-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; } .dropdown-value-item { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: 4px; font-size: 0.875rem; } .remove-dropdown-value { background: none; border: none; color: var(--danger-text); cursor: pointer; padding: 2px; display: flex; align-items: center; } .remove-dropdown-value:hover { color: var(--danger-text); } @media (max-width: 768px) { .dropdown-value-row { flex-direction: column; align-items: stretch; } .dropdown-value-row .btn { width: 100%; height: 44px; } } /* Form-specific styles - uses shared form classes from forms.css */ .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .card-header-title { display: flex; align-items: center; gap: 0.5rem; } .card-header-title h5 { margin: 0; } .card--editing { border-left: 4px solid var(--primary); overflow: hidden; } .card--editing .card-header { margin: -1.25rem -1.25rem 1rem; padding: 0.875rem 1.25rem; background: var(--accent-subtle); } .card-header-icon { color: var(--primary); flex-shrink: 0; } .cancel-edit-btn { display: flex; align-items: center; gap: 0.25rem; background: none; border: none; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--border-radius-sm); } .cancel-edit-btn:hover { background: var(--surface-hover); color: var(--text-main); } .editing-subtitle { margin: -0.5rem 0 1rem; font-size: 0.8125rem; color: var(--primary); font-weight: 500; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Settings Layout: sidebar menu + content area pattern */ .settings-menu { width: 220px; flex-shrink: 0; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 0.5rem; height: fit-content; } .settings-menu .menu-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border: none; background: transparent; border-radius: var(--border-radius-sm); cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .settings-menu .menu-item:hover { background: var(--surface-hover); } .settings-menu .menu-item.active { background: var(--accent-subtle); font-weight: var(--weight-semibold); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); } .settings-content { flex: 1; background: var(--surface-1); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); padding: 1.5rem; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .content-header .header-left { display: flex; align-items: center; } .content-header .header-right { display: flex; align-items: center; gap: 1rem; } @media (max-width: 1024px) { .settings-menu { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; } .settings-menu .menu-item { width: auto; } } @media (max-width: 768px) { .settings-content { padding: 1rem; } } .lead-settings-page { padding: 1.5rem; } .color-pill { display: inline-block; width: 24px; height: 24px; border-radius: 4px; } .truncate-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .additional-fields-layout { display: grid; grid-template-columns: minmax(420px, 30%) 1fr; gap: 1.5rem; align-items: start; } .additional-form-panel, .additional-table-panel { min-width: 0; } .table-container { width: 100%; overflow-x: auto; } .color-input { height: 50px; padding: 4px; cursor: pointer; } .modal-content { width: 100%; max-width: 450px; } .table-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-muted); } .table-loading .spin { animation: spin 1s linear infinite; margin-bottom: 0.75rem; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn:disabled { opacity: 0.65; cursor: not-allowed; } .btn .spin { animation: spin 1s linear infinite; } @media (max-width: 1400px) { .additional-fields-layout { grid-template-columns: minmax(380px, 32%) 1fr; } } @media (max-width: 1024px) { .additional-fields-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .lead-settings-page { padding: 1rem; } .additional-fields-layout { gap: 1rem; } } @media (max-width: 480px) { .lead-settings-page { padding: 0.75rem; } } .pipeline-card { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); padding: var(--space-4); box-shadow: var(--elevation-1); display: flex; flex-direction: column; gap: var(--space-3); } .pipeline-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .pipeline-card__name { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin: 0; } .pipeline-card__badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.125rem var(--space-2); border-radius: 999px; } .pipeline-card__badge--default { background: var(--warning-subtle); color: var(--warning-text); } .pipeline-card__status-text { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); } .pipeline-card__status-text--active { color: var(--success-text); } .pipeline-card__status-text--inactive { color: var(--text-tertiary); } .pipeline-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .pipeline-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } .pipeline-list-empty { color: var(--text-tertiary); font-size: var(--text-sm); padding: var(--space-6); text-align: center; } /* this gets exported as style.css and can be used for the default theming */ /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */ .react-flow { direction: ltr; --xy-edge-stroke-default: #b1b1b7; --xy-edge-stroke-width-default: 1; --xy-edge-stroke-selected-default: #555; --xy-connectionline-stroke-default: #b1b1b7; --xy-connectionline-stroke-width-default: 1; --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5); --xy-minimap-background-color-default: #fff; --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6); --xy-minimap-mask-stroke-color-default: transparent; --xy-minimap-mask-stroke-width-default: 1; --xy-minimap-node-background-color-default: #e2e2e2; --xy-minimap-node-stroke-color-default: transparent; --xy-minimap-node-stroke-width-default: 2; --xy-background-color-default: transparent; --xy-background-pattern-dots-color-default: #91919a; --xy-background-pattern-lines-color-default: #eee; --xy-background-pattern-cross-color-default: #e2e2e2; background-color: var(--xy-background-color, var(--xy-background-color-default)); --xy-node-color-default: inherit; --xy-node-border-default: 1px solid #1a192b; --xy-node-background-color-default: #fff; --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25); --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08); --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b; --xy-node-border-radius-default: 3px; --xy-handle-background-color-default: #1a192b; --xy-handle-border-color-default: #fff; --xy-selection-background-color-default: rgba(0, 89, 220, 0.08); --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8); --xy-controls-button-background-color-default: #fefefe; --xy-controls-button-background-color-hover-default: #f4f4f4; --xy-controls-button-color-default: inherit; --xy-controls-button-color-hover-default: inherit; --xy-controls-button-border-color-default: #eee; --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-edge-label-background-color-default: #ffffff; --xy-edge-label-color-default: inherit; --xy-resize-background-color-default: #3367d9; } .react-flow.dark { --xy-edge-stroke-default: #3e3e3e; --xy-edge-stroke-width-default: 1; --xy-edge-stroke-selected-default: #727272; --xy-connectionline-stroke-default: #b1b1b7; --xy-connectionline-stroke-width-default: 1; --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25); --xy-minimap-background-color-default: #141414; --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6); --xy-minimap-mask-stroke-color-default: transparent; --xy-minimap-mask-stroke-width-default: 1; --xy-minimap-node-background-color-default: #2b2b2b; --xy-minimap-node-stroke-color-default: transparent; --xy-minimap-node-stroke-width-default: 2; --xy-background-color-default: #141414; --xy-background-pattern-dots-color-default: #555; --xy-background-pattern-lines-color-default: #333; --xy-background-pattern-cross-color-default: #333; --xy-node-color-default: #f8f8f8; --xy-node-border-default: 1px solid #3c3c3c; --xy-node-background-color-default: #1e1e1e; --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25); --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08); --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999; --xy-handle-background-color-default: #bebebe; --xy-handle-border-color-default: #1e1e1e; --xy-selection-background-color-default: rgba(200, 200, 220, 0.08); --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8); --xy-controls-button-background-color-default: #2b2b2b; --xy-controls-button-background-color-hover-default: #3e3e3e; --xy-controls-button-color-default: #f8f8f8; --xy-controls-button-color-hover-default: #fff; --xy-controls-button-border-color-default: #5b5b5b; --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-edge-label-background-color-default: #141414; --xy-edge-label-color-default: #f8f8f8; } .react-flow__background { background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default))); pointer-events: none; z-index: -1; } .react-flow__container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .react-flow__pane { z-index: 1; touch-action: none; } .react-flow__pane.draggable { cursor: grab; } .react-flow__pane.dragging { cursor: grabbing; } .react-flow__pane.selection { cursor: pointer; } .react-flow__viewport { transform-origin: 0 0; z-index: 2; pointer-events: none; } .react-flow__renderer { z-index: 4; } .react-flow__selection { z-index: 6; } .react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible { outline: none; } .react-flow__edge-path { stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default)); stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default)); fill: none; } .react-flow__connection-path { stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default)); stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default)); fill: none; } .react-flow .react-flow__edges { position: absolute; } .react-flow .react-flow__edges svg { overflow: visible; position: absolute; pointer-events: none; } .react-flow__edge { pointer-events: visibleStroke; } .react-flow__edge.selectable { cursor: pointer; } .react-flow__edge.animated path { stroke-dasharray: 5; animation: dashdraw 0.5s linear infinite; } .react-flow__edge.animated path.react-flow__edge-interaction { stroke-dasharray: none; animation: none; } .react-flow__edge.inactive { pointer-events: none; } .react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible { outline: none; } .react-flow__edge.selected .react-flow__edge-path, .react-flow__edge.selectable:focus .react-flow__edge-path, .react-flow__edge.selectable:focus-visible .react-flow__edge-path { stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default)); } .react-flow__edge-textwrapper { pointer-events: all; } .react-flow__edge .react-flow__edge-text { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Arrowhead marker styles - use CSS custom properties as default */ .react-flow__arrowhead polyline { stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default)); } .react-flow__arrowhead polyline.arrowclosed { fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default)); } .react-flow__connection { pointer-events: none; } .react-flow__connection .animated { stroke-dasharray: 5; animation: dashdraw 0.5s linear infinite; } svg.react-flow__connectionline { z-index: 1001; overflow: visible; position: absolute; } .react-flow__nodes { pointer-events: none; transform-origin: 0 0; } .react-flow__node { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: all; transform-origin: 0 0; box-sizing: border-box; cursor: default; } .react-flow__node.selectable { cursor: pointer; } .react-flow__node.draggable { cursor: grab; pointer-events: all; } .react-flow__node.draggable.dragging { cursor: grabbing; } .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; } .react-flow__nodesselection-rect { position: absolute; pointer-events: all; cursor: grab; } .react-flow__handle { position: absolute; pointer-events: none; min-width: 5px; min-height: 5px; width: 6px; height: 6px; background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default)); border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default)); border-radius: 100%; } .react-flow__handle.connectingfrom { pointer-events: all; } .react-flow__handle.connectionindicator { pointer-events: all; cursor: crosshair; } .react-flow__handle-bottom { top: auto; left: 50%; bottom: 0; transform: translate(-50%, 50%); } .react-flow__handle-top { top: 0; left: 50%; transform: translate(-50%, -50%); } .react-flow__handle-left { top: 50%; left: 0; transform: translate(-50%, -50%); } .react-flow__handle-right { top: 50%; right: 0; transform: translate(50%, -50%); } .react-flow__edgeupdater { cursor: move; pointer-events: all; } .react-flow__pane.selection .react-flow__panel { pointer-events: none; } .react-flow__panel { position: absolute; z-index: 5; margin: 15px; } .react-flow__panel.top { top: 0; } .react-flow__panel.bottom { bottom: 0; } .react-flow__panel.top.center, .react-flow__panel.bottom.center { left: 50%; transform: translateX(-15px) translateX(-50%); } .react-flow__panel.left { left: 0; } .react-flow__panel.right { right: 0; } .react-flow__panel.left.center, .react-flow__panel.right.center { top: 50%; transform: translateY(-15px) translateY(-50%); } .react-flow__attribution { font-size: 10px; background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default)); padding: 2px 3px; margin: 0; } .react-flow__attribution a { text-decoration: none; color: #999; } @keyframes dashdraw { from { stroke-dashoffset: 10; } } .react-flow__edgelabel-renderer { position: absolute; width: 100%; height: 100%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; left: 0; top: 0; } .react-flow__viewport-portal { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .react-flow__minimap { background: var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) ); } .react-flow__minimap-svg { display: block; } .react-flow__minimap-mask { fill: var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) ); stroke: var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) ); stroke-width: var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) ); } .react-flow__minimap-node { fill: var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) ); stroke: var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) ); stroke-width: var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) ); } .react-flow__background-pattern.dots { fill: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) ); } .react-flow__background-pattern.lines { stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) ); } .react-flow__background-pattern.cross { stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) ); } .react-flow__controls { display: flex; flex-direction: column; box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default)); } .react-flow__controls.horizontal { flex-direction: row; } .react-flow__controls-button { display: flex; justify-content: center; align-items: center; height: 26px; width: 26px; padding: 4px; border: none; background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default)); border-bottom: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) ); color: var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) ); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .react-flow__controls-button svg { width: 100%; max-width: 12px; max-height: 12px; fill: currentColor; } .react-flow__edge.updating .react-flow__edge-path { stroke: #777; } .react-flow__edge-text { font-size: 10px; } .react-flow__node.selectable:focus, .react-flow__node.selectable:focus-visible { outline: none; } .react-flow__node-input, .react-flow__node-default, .react-flow__node-output, .react-flow__node-group { padding: 10px; border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default)); width: 150px; font-size: 12px; color: var(--xy-node-color, var(--xy-node-color-default)); text-align: center; border: var(--xy-node-border, var(--xy-node-border-default)); background-color: var(--xy-node-background-color, var(--xy-node-background-color-default)); } .react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover { box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default)); } .react-flow__node-input.selectable.selected, .react-flow__node-input.selectable:focus, .react-flow__node-input.selectable:focus-visible, .react-flow__node-default.selectable.selected, .react-flow__node-default.selectable:focus, .react-flow__node-default.selectable:focus-visible, .react-flow__node-output.selectable.selected, .react-flow__node-output.selectable:focus, .react-flow__node-output.selectable:focus-visible, .react-flow__node-group.selectable.selected, .react-flow__node-group.selectable:focus, .react-flow__node-group.selectable:focus-visible { box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default)); } .react-flow__node-group { background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default)); } .react-flow__nodesselection-rect, .react-flow__selection { background: var(--xy-selection-background-color, var(--xy-selection-background-color-default)); border: var(--xy-selection-border, var(--xy-selection-border-default)); } .react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible, .react-flow__selection:focus, .react-flow__selection:focus-visible { outline: none; } .react-flow__controls-button:hover { background: var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) ); color: var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) ); } .react-flow__controls-button:disabled { pointer-events: none; } .react-flow__controls-button:disabled svg { fill-opacity: 0.4; } .react-flow__controls-button:last-child { border-bottom: none; } .react-flow__controls.horizontal .react-flow__controls-button { border-bottom: none; border-right: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) ); } .react-flow__controls.horizontal .react-flow__controls-button:last-child { border-right: none; } .react-flow__resize-control { position: absolute; } .react-flow__resize-control.left, .react-flow__resize-control.right { cursor: ew-resize; } .react-flow__resize-control.top, .react-flow__resize-control.bottom { cursor: ns-resize; } .react-flow__resize-control.top.left, .react-flow__resize-control.bottom.right { cursor: nwse-resize; } .react-flow__resize-control.bottom.left, .react-flow__resize-control.top.right { cursor: nesw-resize; } /* handle styles */ .react-flow__resize-control.handle { width: 5px; height: 5px; border: 1px solid #fff; border-radius: 1px; background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default)); translate: -50% -50%; } .react-flow__resize-control.handle.left { left: 0; top: 50%; } .react-flow__resize-control.handle.right { left: 100%; top: 50%; } .react-flow__resize-control.handle.top { left: 50%; top: 0; } .react-flow__resize-control.handle.bottom { left: 50%; top: 100%; } .react-flow__resize-control.handle.top.left { left: 0; } .react-flow__resize-control.handle.bottom.left { left: 0; } .react-flow__resize-control.handle.top.right { left: 100%; } .react-flow__resize-control.handle.bottom.right { left: 100%; } /* line styles */ .react-flow__resize-control.line { border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default)); border-width: 0; border-style: solid; } .react-flow__resize-control.line.left, .react-flow__resize-control.line.right { width: 1px; transform: translate(-50%, 0); top: 0; height: 100%; } .react-flow__resize-control.line.left { left: 0; border-left-width: 1px; } .react-flow__resize-control.line.right { left: 100%; border-right-width: 1px; } .react-flow__resize-control.line.top, .react-flow__resize-control.line.bottom { height: 1px; transform: translate(0, -50%); left: 0; width: 100%; } .react-flow__resize-control.line.top { top: 0; border-top-width: 1px; } .react-flow__resize-control.line.bottom { border-bottom-width: 1px; top: 100%; } .react-flow__edge-textbg { fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default)); } .react-flow__edge-text { fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default)); } .stage-node { width: 200px; padding: var(--space-3) var(--space-4); background: var(--surface-3); border: 1px solid var(--border-default); border-left-width: 4px; border-radius: var(--border-radius-md); box-shadow: var(--elevation-1); cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .stage-node--selected { border-color: var(--accent); box-shadow: var(--elevation-2); } .stage-node--inactive { opacity: 0.6; } .stage-node__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); } .stage-node__name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stage-node__outcome { flex-shrink: 0; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.125rem var(--space-2); border-radius: 999px; } .stage-node__outcome--open { background: var(--info-subtle); color: var(--info-text); } .stage-node__outcome--won { background: var(--success-subtle); color: var(--success-text); } .stage-node__outcome--lost { background: var(--danger-subtle); color: var(--danger-text); } .stage-node__probability { font-size: var(--text-sm); color: var(--text-secondary); } .stage-node__inactive-badge { margin-top: var(--space-1); font-size: var(--text-2xs); color: var(--text-tertiary); font-style: italic; } .stage-node__handle { width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--surface-3); } /* Retheme React Flow's own CSS variables onto this project's design * tokens, scoped to the canvas container so it stays correct across the * light/dark toggle without touching @xyflow/react's stylesheet directly. */ .pipeline-canvas { --xy-background-color: var(--surface-2); --xy-background-pattern-color: var(--border-default); --xy-edge-stroke: var(--border-strong); --xy-edge-stroke-width: 2; --xy-edge-stroke-selected: var(--accent); --xy-connectionline-stroke: var(--accent); --xy-connectionline-stroke-width: 2; --xy-handle-background-color: var(--accent); --xy-handle-border-color: var(--surface-3); --xy-controls-button-background-color: var(--surface-3); --xy-controls-button-background-color-hover: var(--surface-hover); --xy-controls-button-color: var(--text-secondary); --xy-controls-button-color-hover: var(--text-primary); --xy-controls-button-border-color: var(--border-default); --xy-controls-box-shadow: var(--elevation-1); --xy-minimap-background-color: var(--surface-3); --xy-minimap-mask-background-color: var(--surface-selected); --xy-minimap-node-background-color-default: var(--border-strong); --xy-attribution-background-color: transparent; width: 100%; height: calc(100vh - 220px); min-height: 480px; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); overflow: hidden; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .connect-page { padding: 1.5rem; } .connect-page .connect-content { /* max-width: 1200px; */ margin: 0 auto; } .connect-hero { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--surface-1) 55%, var(--danger-subtle) 100%); border: 1px solid var(--danger-subtle); border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; gap: 2rem; } .connect-hero-text { flex: 1; } .connect-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); background: var(--danger-subtle); padding: 0.25rem 0.625rem; border-radius: 999px; margin-bottom: 0.75rem; } .connect-hero-text h2 { font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 0 0 0.75rem; } .connect-hero-text p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 0.75rem; max-width: 640px; } .connect-hero-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .connect-hero-icon { width: 96px; height: 96px; background: var(--surface-1); box-shadow: var(--shadow-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); } .connect-hero-side .btn { white-space: nowrap; } .connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .connect-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; } .connect-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .connect-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .connect-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .connect-icon-facebook { background: var(--info-subtle); color: #1877f2; } .connect-icon-webhook { background: var(--category-purple-subtle); color: var(--category-purple-text); } .connect-icon-lead-api { background: var(--warning-subtle); color: var(--warning-text); } .connect-category { font-size: 11px; font-weight: 500; padding: 0.25rem 0.5rem; background: var(--surface-2); border-radius: 999px; color: var(--text-secondary); white-space: nowrap; } .connect-card h4 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text-primary); } .connect-card .connect-subtitle { display: block; font-size: 13px; color: var(--text-tertiary); margin-bottom: 0.75rem; } .connect-card .connect-description { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.25rem; flex: 1; } .connect-actions { display: flex; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--surface-2); } .connect-actions .btn { height: 38px; flex: 1; } .btn-outline { padding: 0 1rem; border: 1px solid var(--primary); border-radius: 6px; background: var(--surface-1); color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-outline:hover { background: var(--danger-subtle); } .connect-actions .btn-ghost { border: 1px solid var(--border-color); font-size: 13px; } .config-modal { max-width: 500px; } .config-modal .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .config-modal .modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; } .config-modal .modal-close { background: none; border: none; cursor: pointer; } .config-modal .modal-body { padding: 1.5rem; } .config-modal .form-group { margin-bottom: 1rem; } .config-modal .form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-secondary); } .config-modal .form-group input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: 6px; font-size: 14px; background: var(--surface-2); color: var(--text-primary); } .config-modal .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .api-docs-link { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; color: var(--info); cursor: pointer; margin-top: 1rem; } .config-modal .modal-footer { display: flex; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); } @media (max-width: 1024px) { .connect-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .connect-hero { flex-direction: column; text-align: center; } .connect-hero-text p { max-width: none; } .connect-grid { grid-template-columns: 1fr; } } .modal-content { width: 100%; max-width: 450px; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } .lead-api-page { padding: 1.5rem; } .api-page-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); } .api-tabs { display: flex; border-bottom: 1px solid var(--border-color); padding: 0 1rem; } .api-tab { padding: 1rem 1.5rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.2s; border-bottom: 2px solid transparent; margin-bottom: -1px; } .api-tab:hover { color: var(--text-main); } .api-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .api-content-section { padding: 1.5rem; } .api-tab-content h3 { margin: 0 0 1rem; font-size: 1.125rem; color: var(--text-main); } .api-tab-content h4 { margin: 1.5rem 0 0.75rem; font-size: 0.9375rem; color: var(--text-main); } .api-tab-content p { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; } .code-block { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 6px; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.8125rem; overflow-x: auto; margin: 0.5rem 0 1rem; line-height: 1.5; } .api-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.875rem; } .api-table th, .api-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .api-table th { background: var(--bg-main); font-weight: 600; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } .api-table td { color: var(--text-main); } .api-table code { background: var(--bg-main); padding: 0.125rem 0.375rem; border-radius: 4px; font-family: monospace; font-size: 0.8125rem; } .required-badge { padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .required-badge.yes { background: var(--danger-subtle); color: var(--danger-text); } .required-badge.no { background: var(--success-subtle); color: var(--success-text); } .status-badge { padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; } .status-badge.status-success { background: var(--success-subtle); color: var(--success-text); } .status-badge.status-failed { background: var(--danger-subtle); color: var(--danger-text); } .status-badge.status-pending { background: var(--warning-subtle); color: var(--warning-text); } .token-reveal { display: flex; gap: 0.5rem; margin: 0.5rem 0 1.5rem; } .token-input-group { display: flex; gap: 0.5rem; flex: 1; } .token-input-group input { flex: 1; padding: 0.625rem 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-family: monospace; font-size: 0.8125rem; background: var(--bg-main); letter-spacing: 1px; } .copy-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: 6px; cursor: pointer; color: var(--text-muted); transition: all 0.2s; } .copy-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .copy-btn:disabled { opacity: 0.5; cursor: not-allowed; } .token-view-btn { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; padding: 0 1rem; } .token-error { font-size: 0.8125rem; color: var(--danger-text); margin: -1rem 0 1.5rem; } .spin { animation: connect-api-spin 0.8s linear infinite; } @keyframes connect-api-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .request-log-row { cursor: pointer; } .request-log-row:hover { background: var(--bg-main); } .request-log-detail-row td { background: var(--bg-main); padding: 1rem; } .request-log-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .request-log-detail h4 { margin: 0 0 0.5rem; } .request-log-detail .code-block { margin: 0; max-height: 260px; overflow-y: auto; } .request-log-pagination { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: var(--text-muted); }/* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } .task-settings-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .task-category-table-wrapper.table-container { overflow: visible; } .task-category-table-wrapper .table-scroll { overflow: visible; } .task-category-table-wrapper .dropdown-container { position: relative; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } .task-settings-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .call-status-table-wrapper.table-container { overflow: visible; } .call-status-table-wrapper .table-scroll { overflow: visible; } .call-status-table-wrapper .dropdown-container { position: relative; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } .task-settings-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .call-reason-table-wrapper.table-container { overflow: visible; } .call-reason-table-wrapper .table-scroll { overflow: visible; } .call-reason-table-wrapper .dropdown-container { position: relative; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } .task-settings-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .meeting-outcome-table-wrapper.table-container { overflow: visible; } .meeting-outcome-table-wrapper .table-scroll { overflow: visible; } .meeting-outcome-table-wrapper .dropdown-container { position: relative; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } .modal-content { width: 100%; max-width: 450px; } /* Plan Details */ .plan-details-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; margin-bottom: 10px; } .plan-details-card .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-main); } .plan-details-card .card-header h6 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-main); } .plan-details-card .card-body { padding: 1.5rem; } .plan-details-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .plan-stat-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--border-radius-md); background: var(--bg-main); border: 1px solid var(--border-color); } .plan-stat-item .stat-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-sm); flex-shrink: 0; } .plan-stat-item .stat-icon.status-icon { background: rgba(16, 185, 129, 0.1); color: var(--success); } .plan-stat-item .stat-icon.plan-icon { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .plan-stat-item .stat-icon.expiry-icon { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .plan-stat-item .stat-icon.renewal-icon { background: var(--category-pink-subtle); color: var(--category-pink-text); } .plan-stat-item .stat-content { display: flex; flex-direction: column; gap: 0.25rem; } .plan-stat-item h5 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--text-main); line-height: 1; } .plan-stat-item p { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } /* Profile Sidebar */ .profile-sidebar-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 1.5rem; text-align: center; margin-bottom: 10px; } .user-avatar-section { margin-bottom: 1rem; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 1.75rem; font-weight: 600; color: #ffffff; } .profile-name-section { margin-bottom: 1rem; } .profile-name-section h5 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--text-main); } .contact-info-section { text-align: left; padding-top: 1rem; border-top: 1px solid var(--border-color); } .contact-info-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .contact-info-section .section-header h5 { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-main); } .contact-info-section .edit-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .contact-info-section .edit-icon:hover { background: var(--bg-main); color: var(--text-main); } .contact-info-section .contact-list { list-style: none; margin: 0; padding: 0; } .contact-info-section .contact-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.875rem; color: var(--text-main); border-bottom: 1px solid var(--border-color); } .contact-info-section .contact-list li:last-child { border-bottom: none; } .contact-info-section .contact-list li i { width: 16px; color: var(--text-muted); } /* Profile Details Card */ .profile-details-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .profile-details-card .details-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-main); } .profile-details-card .details-header h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-main); } .profile-details-card .details-header .btn { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border: none; border-radius: var(--border-radius-sm); background: var(--primary); color: #ffffff; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background 0.2s; } .profile-details-card .details-header .btn:hover { background: var(--primary-dark); } .profile-details-card .details-body { padding: 1.5rem; } .profile-details-card .detail-row { display: flex; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .profile-details-card .detail-row:last-child { border-bottom: none; } .profile-details-card .detail-row .detail-label { flex: 0 0 33.333%; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); margin: 0; } .profile-details-card .detail-row .detail-value { flex: 0 0 66.667%; font-size: 0.875rem; color: var(--text-main); margin: 0; } .toast-notification { position: fixed; bottom: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 6px; font-size: 14px; font-weight: 500; animation: toastSlideIn 0.3s ease; z-index: 9999; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .toast-success { background: var(--success); color: #ffffff; } .toast-error { background: var(--danger-text); color: #ffffff; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } .profile-fetch-error { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.25rem; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--danger-text); font-size: 0.875rem; } .profile-fetch-error span { flex: 1; } .btn .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Sidebar + content layout (account page pattern) */ .account-page { display: flex; flex-direction: column; padding: 1.5rem; overflow: hidden; } .account-layout { display: flex; gap: 1.5rem; flex: 1; overflow: hidden; } .account-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .action-btn:hover { background: var(--surface-hover); color: var(--text-main); } .action-btn.active { background: var(--primary); color: var(--text-on-accent); border-color: var(--primary); } @media (max-width: 992px) { .account-layout { flex-direction: column; } .account-sidebar { width: 100%; min-width: 100%; max-height: 200px; } } .modal-content { width: 100%; max-width: 450px; } /* Password Page Card */ .password-page-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .password-page-card .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-main); } .password-page-card .card-header h5 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-main); } .password-page-card .card-body { padding: 1.5rem; } /* Password Input Wrapper */ .password-input-wrapper { position: relative; display: flex; align-items: center; } .password-input-wrapper .input-icon { position: absolute; left: 0.875rem; color: var(--text-muted); pointer-events: none; display: flex; align-items: center; } .password-input-wrapper .form-control.with-icon { padding-left: 2.75rem; padding-right: 2.75rem; } .password-input-wrapper .field-icon { position: absolute; right: 0.875rem; background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: color 0.2s; } .password-input-wrapper .field-icon:hover { color: var(--text-main); } /* Password Strength */ .password-strength { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .strength-bar { flex: 1; height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; } .strength-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; } .strength-text { font-size: 0.75rem; font-weight: 500; min-width: 3rem; text-align: right; } /* Field-level error */ .field-error-text { display: block; color: var(--danger-text); font-size: 0.75rem; margin-top: 0.25rem; } /* Input error state */ .input-error { border-color: var(--danger-text) !important; } .input-error:focus { border-color: var(--danger-text) !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important; } /* Toast Notification */ .toast-notification { position: fixed; bottom: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 6px; font-size: 14px; font-weight: 500; animation: toastSlideIn 0.3s ease; z-index: 9999; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .toast-success { background: var(--success); color: #ffffff; } .toast-error { background: var(--danger-text); color: #ffffff; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } /* Spinner */ .btn .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .btn:disabled { opacity: 0.7; cursor: not-allowed; } /* Responsive */ @media (max-width: 768px) { .password-page-card .card-body { padding: 1rem; } .toast-notification { bottom: 1rem; right: 1rem; left: 1rem; font-size: 13px; } } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } .table-scroll { overflow: visible; } .modal-content { width: 100%; max-width: 450px; } .dropdown-value-row { display: flex; gap: 0.5rem; align-items: center; } .dropdown-value-row .form-control { flex: 1; } .dropdown-value-row .btn { min-width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; } .dropdown-values-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; } .dropdown-value-item { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: 4px; font-size: 0.875rem; color: var(--text-main); } .remove-dropdown-value { background: none; border: none; color: var(--danger-text); cursor: pointer; padding: 2px; display: flex; align-items: center; } .remove-dropdown-value:hover { color: var(--danger); } @media (max-width: 768px) { .dropdown-value-row { flex-direction: column; align-items: stretch; } .dropdown-value-row .btn { width: 100%; height: 44px; } } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } .additional-fields-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; margin-top: 1.5rem; } .additional-form-panel .card { border: 1px solid var(--border-color); border-radius: 8px; } .additional-form-panel .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--border-color); } .additional-form-panel .card-header h5 { margin: 0; font-size: 1rem; font-weight: 600; } .additional-form-panel .card-header-title { display: flex; align-items: center; gap: 0.5rem; } .additional-form-panel .card--editing { border-left: 4px solid var(--primary); overflow: hidden; } .additional-form-panel .card--editing .card-header { background: var(--accent-subtle); } .additional-form-panel .card-header-icon { color: var(--primary); flex-shrink: 0; } .additional-form-panel .cancel-edit-btn { display: flex; align-items: center; gap: 0.25rem; background: none; border: none; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--border-radius-sm); } .additional-form-panel .cancel-edit-btn:hover { background: var(--surface-hover); color: var(--text-main); } .additional-form-panel .editing-subtitle { margin: 0.5rem 1rem 0; font-size: 0.8125rem; color: var(--primary); font-weight: 500; } .additional-form-panel .card-body { padding: 1rem; } .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 14px; } .checkbox-item input { width: 16px; height: 16px; cursor: pointer; } .text-danger { color: var(--danger-text); } .btn:disabled { opacity: 0.65; cursor: not-allowed; } .btn .spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--surface-1); border-radius: 8px; width: 100%; max-width: 450px; box-shadow: var(--elevation-3); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); } .modal-header h5 { margin: 0; font-size: 1rem; font-weight: 600; } .modal-close { background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--text-muted); line-height: 1; } .modal-body { padding: 1rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem; border-top: 1px solid var(--border-color); } @media (max-width: 1024px) { .additional-fields-layout { grid-template-columns: 1fr; } } .additional-table-panel .table-scroll { overflow: visible; } .additional-table-panel .dropdown-container { position: relative; } .additional-table-panel .dropdown-menu { position: absolute; top: 100%; right: 0; z-index: 9999; min-width: 140px; margin-top: 6px; padding: 6px 0; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--elevation-2); } .additional-table-panel .dropdown-menu.dropup { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 6px; } .additional-table-panel .dropdown-item { padding: 10px 14px; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background-color 0.15s; border: none; background: transparent; width: 100%; text-align: left; } .additional-table-panel .dropdown-item:hover { background: var(--surface-2); } .additional-table-panel .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 4px 8px; border: none; border-radius: 6px; background: transparent; cursor: pointer; color: var(--text-muted); transition: background-color 0.15s; } .additional-table-panel .dropdown-toggle:hover { background: var(--surface-2); color: var(--text-secondary); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } .deals-stats-row { display: flex; justify-content: flex-end; gap: 2rem; padding: 0.75rem 1rem; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); margin-bottom: 1rem; } .stat-item { display: flex; align-items: center; gap: 0.5rem; } .stat-label { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; } .stat-value { font-size: 0.875rem; color: var(--success); font-weight: 600; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); height: 44px; } .search-icon { color: var(--text-muted); flex-shrink: 0; } .search-input { border: none; background: transparent; outline: none; font-size: 0.875rem; width: 200px; color: var(--text-main); height: 44px; line-height: 44px; } .search-input::placeholder { color: var(--text-muted); } .loading-overlay { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); color: var(--text-muted); font-size: 0.875rem; } .loading-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; } .error-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--danger); border-radius: var(--border-radius-sm); background-color: var(--danger-subtle); color: var(--danger-text); font-size: 0.875rem; margin-bottom: 1rem; } .status-pill { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .type-pill { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-muted); font-size: 0.875rem; } .table-container tbody tr.selected td { background-color: var(--danger-subtle); } .dropdown-container { position: relative; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .deal-action-dropdown { background: var(--surface-1); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--elevation-2); animation: dealDropdownIn 0.2s ease forwards; } .deal-action-dropdown.upward { animation: dealDropdownInUp 0.2s ease forwards; } @keyframes dealDropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dealDropdownInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .deal-action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color 0.15s ease; } .deal-action-dropdown button:hover { background-color: var(--surface-2); } .deal-action-dropdown button:active { background-color: var(--surface-hover); } .deal-action-dropdown button.delete { color: var(--danger-text); } .deal-action-dropdown button.delete:hover { background-color: var(--danger-subtle); } @media (max-width: 768px) { .deals-stats-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .search-input { width: 140px; } } .field-error-text { display: block; color: var(--danger-text); font-size: 12px; margin-top: 4px; } .form-control.input-error { border-color: var(--danger-text); } .form-control.input-error:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1); } .table-loading { display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--text-muted); font-size: 0.875rem; } .deal-board-view-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); padding: 2px; gap: 2px; } .deal-board-view-toggle__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.4rem var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); background: transparent; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .deal-board-view-toggle__btn:hover { color: var(--text-primary); } .deal-board-view-toggle__btn.is-active { background: var(--surface-3); color: var(--accent-text); box-shadow: var(--elevation-1); } .deal-board-stats-bar { display: flex; gap: var(--space-6); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); } .deal-board-stat { display: flex; flex-direction: column; gap: 0.125rem; } .deal-board-stat__label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.02em; } .deal-board-stat__value { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); } .deal-board-stat--currency { margin-left: auto; cursor: pointer; } .deal-board-stat__currency-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); background: var(--surface-1); color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; } /* DealBoardPage-specific overrides only - shared Kanban/card styles come * from sales-pipeline/pages/SalesPipelinePage.css (imported alongside). */ .deal-board-table-view { position: relative; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } .modal-content { width: 100%; max-width: 450px; } .report-tabs { display: flex; gap: 0.25rem; padding: 0 0 0 0; border-bottom: 1px solid var(--border-color); overflow-x: auto; margin-bottom: 10px; } .deal-stage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .deal-stage-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .deal-stage-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--border-radius-sm); } .deal-stage-info { display: flex; flex-direction: column; } .deal-stage-value { font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .deal-stage-label { font-size: 0.875rem; color: var(--text-muted); } .deal-stage-amount { margin-left: auto; font-size: 1.125rem; font-weight: 600; color: var(--text-main); } .report-section { margin-bottom: 1.5rem; } .report-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .report-section .section-header h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; } .daily-report-content { padding: 0px 0rem; } .report-page-heading { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin: 0; } .report-filter-section { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .report-filter-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .report-filter-grid { display: flex; align-items: center; gap: 0.75rem; } .report-filter-right { display: flex; align-items: center; gap: 0.5rem; } .report-filter-right .btn { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 0.75rem; height: 36px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background-color: var(--bg-card); color: var(--text-main); } .report-filter-right .btn:hover { background-color: var(--bg-main); } .report-filter-right .btn-primary { background-color: var(--primary); color: white; border-color: var(--primary); } .report-filter-right .btn-primary:hover { background-color: var(--primary-hover); } .report-table-section { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); overflow-x: auto; } .report-table-section .table-header-row { display: flex; justify-content: flex-end; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); } .report-table-section .export-btn { display: flex; align-items: center; gap: 0.375rem; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); padding: 0.375rem 0.75rem; border-radius: var(--border-radius-sm); font-size: 0.8125rem; font-weight: 500; cursor: pointer; } .report-table-section .export-btn:hover { background: white; } .report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .report-table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; color: var(--text-muted); background-color: var(--bg-main); border-bottom: 1px solid var(--border-color); } .report-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; } .report-table tbody tr td { background-color: var(--bg-card); } .report-table tbody tr:hover td { background-color: var(--bg-main); } .report-table .total-cell { font-weight: 700; color: var(--primary); } .report-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; text-decoration: none; } .report-tab:hover { color: var(--text-main); } .report-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .report-menu-item-content { display: flex; flex-direction: column; gap: 0.125rem; } .report-menu-title { font-size: 13px; font-weight: 500; line-height: 1.2; } .report-menu-desc { font-size: 10px; color: var(--text-muted); line-height: 1.2; } .account-menu-links a { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; color: var(--text-main); text-decoration: none; transition: all 0.2s; border-left: 3px solid transparent; margin: 2px 0; } .account-menu-links a>svg { flex-shrink: 0; margin-top: 2px; } .account-menu-links a:hover { background: var(--bg-main); } .account-menu-links a.active { background: rgba(241, 65, 79, 0.05); border-left-color: var(--primary); color: var(--primary); } .account-menu-links a.active .report-menu-title { font-weight: 600; } .report-content-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; text-align: center; } .report-content-empty h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text-main); } .report-content-empty p { margin: 0; font-size: 0.875rem; color: var(--text-muted); } .report-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .report-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; } .report-stat-icon { width: 48px; height: 48px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; } .report-stat-icon.primary { background: rgba(241, 65, 79, 0.1); color: var(--primary); } .report-stat-icon.success { background: rgba(16, 185, 129, 0.1); color: var(--success); } .report-stat-icon.warning { background: rgba(251, 191, 36, 0.1); color: var(--warning); } .report-stat-icon.info { background: rgba(59, 130, 246, 0.1); color: var(--info); } .report-stat-content { display: flex; flex-direction: column; gap: 0.25rem; } .report-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-main); } .report-stat-label { font-size: 0.75rem; color: var(--text-muted); } .report-chart-placeholder { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 2rem; text-align: center; color: var(--text-muted); } .report-table-header { padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .report-table-header h3 { margin: 0; font-size: 1rem; font-weight: 600; } .lead-reports-sidebar { position: fixed; left: 70px; top: 60px; width: 280px; bottom: 0; background: var(--surface-1); border-right: 1px solid var(--border-color); overflow-y: auto; z-index: 5; padding: 1rem 0; } .lead-reports-menu { display: flex; flex-direction: column; } .lead-reports-menu h4 { margin: 0; padding: 0.5rem 1rem 1rem; font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .lead-reports-menu a { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--text-main); text-decoration: none; transition: all 0.2s; border-left: 3px solid transparent; } .lead-reports-menu a:hover { background: var(--surface-2); } .lead-reports-menu a.active { background: rgba(241, 65, 79, 0.05); border-left-color: var(--primary); color: var(--primary); } .lead-reports-menu a.active .report-menu-title { font-weight: 600; } .lead-reports-menu a.active .report-menu-desc { color: var(--primary); } .report-content-wrapper { padding: 1.5rem; min-height: calc(100vh - 60px); } .lead-reports-container { padding: 0; } .lead-reports-list { display: flex; flex-direction: column; gap: 0.75rem; } .lead-report-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); text-decoration: none; color: var(--text-main); transition: all 0.2s; } .lead-report-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .lead-report-card-content { display: flex; flex-direction: column; gap: 0.25rem; } .lead-report-title { font-size: 0.9375rem; font-weight: 600; } .lead-report-desc { font-size: 0.75rem; color: var(--text-muted); } .report-filter-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 1.5rem; margin-bottom: 1.5rem; } .report-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .report-filter-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .report-data-table { width: 100%; border-collapse: collapse; } .report-data-table th, .report-data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .report-data-table th { background: var(--bg-main); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; } .report-data-table td { font-size: 0.875rem; } .report-content-wrapper.with-sidebar { padding: 0px; min-height: calc(100vh - 60px); } .report-card-arrow { color: var(--text-muted); transition: transform 0.2s; } .lead-report-card:hover .report-card-arrow { transform: translateX(4px); color: var(--primary); } .status-badge.present { background: rgba(16, 185, 129, 0.1); color: var(--success); } .status-badge.late { background: rgba(251, 191, 36, 0.1); color: var(--warning); } .status-badge.interested { background: rgba(16, 185, 129, 0.1); color: var(--success); } .status-badge.registered { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; } .status-badge.not-interested { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .status-badge.lost { background: rgba(107, 114, 128, 0.1); color: var(--text-muted); } .multi-select-dropdown { position: relative; } .multi-select-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); font-size: 0.875rem; color: var(--text-main); cursor: pointer; gap: 0.5rem; } .report-page-container { display: flex; flex-direction: column; padding-top: 15px; gap: 1.5rem; background: var(--bg-main); min-height: calc(100vh - 60px); } .report-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .header-left { display: flex; align-items: center; gap: 1rem; } .back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-main); cursor: pointer; transition: all 0.2s; } .back-btn:hover { background: var(--bg-main); color: var(--primary); border-color: var(--primary); } .header-title-section { display: flex; flex-direction: column; gap: 0.25rem; } .header-title { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .header-subtitle { margin: 0; font-size: 0.875rem; color: var(--text-muted); } .header-right { display: flex; align-items: center; gap: 0.75rem; } .stats-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .stats-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: all 0.2s; } .stats-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .stats-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--border-radius-sm); flex-shrink: 0; } .stats-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stats-card-value { font-size: 1.75rem; font-weight: 700; color: var(--text-main); line-height: 1; } .stats-card-label { font-size: 0.8125rem; color: var(--text-muted); } .stats-card-change { font-size: 0.75rem; font-weight: 600; } .filter-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .filter-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); } .filter-card-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-main); } .filter-toggle-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: none; background: transparent; color: var(--primary); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .filter-toggle-btn:hover { color: var(--primary-hover); } .filter-card-body { padding: 1.25rem; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .filter-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .table-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .table-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .table-header-left { display: flex; align-items: center; gap: 0.75rem; } .table-header-right { display: flex; align-items: center; gap: 0.75rem; } .table-container-wrapper { overflow-x: auto; } .table-scroll-container { min-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .report-table th.sortable { cursor: pointer; user-select: none; } .report-table th.sortable:hover { color: var(--text-main); } .report-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .report-table td strong { font-weight: 600; } .report-table tr.even-row { background: var(--bg-card); } .report-table tr.odd-row { background: var(--bg-main); } .report-table tr:hover td { background: rgba(241, 65, 79, 0.03); } .agent-cell { display: flex; align-items: center; gap: 0.75rem; } .agent-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: white; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .agent-name { font-weight: 500; color: var(--text-main); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .table-footer-left { display: flex; align-items: center; gap: 0.75rem; } .table-card-header { flex-direction: column; align-items: stretch; } .export-form-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 1.5rem; } .export-form-card .form-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } .export-form-card .form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .export-form-card .section-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .export-form-card .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; } .export-form-card .filter-row:last-child { margin-bottom: 0; } .export-form-card .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 200px; flex: 1; } .export-form-card .filter-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .export-form-card .filter-group select, .export-form-card .filter-group input[type="text"], .export-form-card .filter-group input[type="date"] { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--bg-card); color: var(--text-main); cursor: pointer; outline: none; width: 100%; } .export-form-card .filter-group select:focus, .export-form-card .filter-group input[type="text"]:focus, .export-form-card .filter-group input[type="date"]:focus { border-color: var(--primary); } .export-form-card .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .export-form-card .date-range-input input { flex: 1; min-width: 100px; } .export-form-card .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .export-form-card .file-name-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; } .export-form-card .fields-selection { display: flex; flex-direction: column; gap: 0.75rem; } .export-form-card .fields-selection .field-checkbox:first-child { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .export-form-card .fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem 1rem; } .export-form-card .field-checkbox label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; color: var(--text-main); } .export-form-card .field-checkbox input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; } .export-form-card .form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; } .export-form-card .submit-btn { min-width: 140px; height: 44px; font-size: 0.875rem; font-weight: 500; } .export-form-card .form-actions .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.25rem; height: 44px; border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .export-form-card .form-actions .btn-primary { background-color: var(--primary); color: white; border: 1px solid var(--primary); } .export-form-card .form-actions .btn-primary:hover { background-color: var(--primary-hover); } .export-form-card .form-actions .btn-secondary { background-color: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); } .export-form-card .form-actions .btn-secondary:hover { background-color: var(--bg-main); } .field-checkbox input[type="checkbox"] { accent-color: var(--primary); } .form-actions { display: flex; justify-content: flex-end; padding-top: 1rem; } .submit-btn { min-width: 120px; } .upload-section { margin-bottom: 1.5rem; } .upload-section label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.5rem; } .file-input-wrapper { display: flex; align-items: center; gap: 1rem; } .file-input-wrapper input[type="file"] { flex: 1; padding: 0.5rem; border: 1px dashed var(--border-color); border-radius: var(--border-radius-sm); } .btn-link { background: none; border: none; color: var(--primary); font-size: 0.875rem; text-decoration: underline; cursor: pointer; white-space: nowrap; } .btn-link:hover { color: var(--primary-hover); } .btn-link:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; } .selected-file-name { margin: 0.5rem 0 0 0; font-size: 0.8125rem; color: var(--text-muted); } .upload-error-text { background: var(--danger-subtle); color: var(--danger-text); padding: 0.75rem 1rem; border-radius: var(--border-radius-sm); font-size: 0.8125rem; margin: 0 0 1rem 0; } .required-fields { background: var(--bg-main); padding: 1rem; border-radius: var(--border-radius-sm); margin-bottom: 1rem; } .required-fields p { margin: 0 0 0.5rem 0; font-size: 0.875rem; color: var(--text-main); } .required-fields p:last-child { margin-bottom: 0; } .example-section { margin-bottom: 1rem; } .example-section p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; } .example-code { background: var(--surface-2); padding: 1rem; border-radius: var(--border-radius-sm); font-size: 0.75rem; font-family: monospace; color: var(--text-main); white-space: pre; margin: 0; overflow-x: auto; } .format-note { background: var(--warning-subtle); padding: 1rem; border-radius: var(--border-radius-sm); margin-bottom: 1.5rem; } .format-note p { margin: 0 0 0.5rem 0; font-size: 0.8125rem; color: var(--warning-text); } .format-note p:last-child { margin-bottom: 0; } .report-page-header-simple { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .header-title-simple { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .stats-card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .stat-card .stat-number { font-size: 1.75rem; font-weight: 700; color: var(--text-main); } .stat-card .stat-label { font-size: 0.8125rem; color: var(--text-muted); } .stat-card .stat-icon { margin-bottom: 0.25rem; } .stat-card-success .stat-icon { color: var(--success); } .stat-card-success .stat-number { color: var(--success); } .stat-card-warning .stat-icon { color: var(--warning); } .stat-card-warning .stat-number { color: var(--warning); } .stat-card-danger .stat-icon { color: var(--danger); } .stat-card-danger .stat-number { color: var(--danger); } .tabs-container { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .tab-btn { padding: 0.75rem 1.25rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; } .tab-btn:hover { color: var(--text-main); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .meta-cell { font-size: 0.75rem; color: var(--text-muted); } .call-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .call-stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .call-stat-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--border-radius-sm); } .call-stat-info { display: flex; flex-direction: column; } .call-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .call-stat-label { font-size: 0.875rem; color: var(--text-muted); } .charts-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .chart-card { padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .chart-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .chart-content { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .bar-chart { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .bar-item { display: flex; align-items: center; gap: 0.75rem; } .bar-label { width: 80px; font-size: 0.875rem; color: var(--text-muted); } .bar-container { flex: 1; height: 24px; background: var(--bg-hover); border-radius: var(--border-radius-xs); overflow: hidden; } .bar { height: 100%; border-radius: var(--border-radius-xs); transition: width 0.3s ease; } .bar-value { width: 30px; font-size: 0.875rem; font-weight: 500; color: var(--text-main); text-align: right; } .chart-legend { display: flex; gap: 1rem; justify-content: center; } .legend-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); padding: 0.25rem 0; } .legend-row { display: flex; align-items: center; gap: 0.5rem; } .legend-count { font-weight: 600; color: var(--text-main); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; } .donut-chart { position: relative; width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--success) 0deg 162deg, var(--danger) 162deg 198.36deg, var(--danger) 198.36deg 360deg); flex-shrink: 0; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: var(--bg-card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .donut-chart-wrapper { display: flex; align-items: center; justify-content: center; } .donut-legend { display: flex; flex-direction: column; width: 100%; gap: 0.75rem; } .donut-value { font-size: 1.25rem; font-weight: 600; color: var(--text-main); } .donut-label { font-size: 0.75rem; color: var(--text-muted); } .call-history-section { margin-bottom: 1.5rem; } .section-heading { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .call-history-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; } .call-history-main, .call-history-side { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; } .table-header-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); } .feedback-table-controls .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); height: 44px; } .feedback-table-controls .search-icon { color: var(--text-muted); } .feedback-table-controls .search-input { border: none; background: transparent; outline: none; font-size: 0.875rem; width: 200px; color: var(--text-main); height: 44px; line-height: 44px; } .feedback-table-controls .search-input::placeholder { color: var(--text-muted); } @media (max-width: 1024px) { .report-page-container { padding: 1rem; } .stats-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .report-page-header { flex-direction: column; align-items: flex-start; } .header-right { width: 100%; justify-content: flex-start; } .stats-cards-grid { grid-template-columns: 1fr; } .filter-grid { grid-template-columns: 1fr; } .report-header-section { flex-direction: column; align-items: flex-start; gap: 1rem; } .report-header-right { width: 100%; } } @media (max-width: 768px) { .stats-card-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .export-form-card { padding: 1rem; } .export-form-card .filter-row { flex-direction: column; } .export-form-card .filter-group { min-width: 100%; } .export-form-card .fields-grid { grid-template-columns: repeat(2, 1fr); } } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Stat Card Styles */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--surface-raise-highlight); } .stat-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--border-radius-md); flex-shrink: 0; } .stat-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stat-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); letter-spacing: -0.01em; } .stat-card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .stat-card-change { font-size: var(--text-xs); font-weight: 600; } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } .report-tabs { display: flex; gap: 0.25rem; padding: 0 0 0 0; border-bottom: 1px solid var(--border-color); overflow-x: auto; margin-bottom: 10px; } .deal-stage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .deal-stage-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .deal-stage-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--border-radius-sm); } .deal-stage-info { display: flex; flex-direction: column; } .deal-stage-value { font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .deal-stage-label { font-size: 0.875rem; color: var(--text-muted); } .deal-stage-amount { margin-left: auto; font-size: 1.125rem; font-weight: 600; color: var(--text-main); } .report-section { margin-bottom: 1.5rem; } .report-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .report-section .section-header h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; } .daily-report-content { padding: 0px 0rem; } .report-page-heading { font-size: 1.25rem; font-weight: 600; color: var(--text-main); margin: 0; } .report-filter-section { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .report-filter-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .report-filter-grid { display: flex; align-items: center; gap: 0.75rem; } .report-filter-right { display: flex; align-items: center; gap: 0.5rem; } .report-filter-right .btn { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0 0.75rem; height: 36px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background-color: var(--bg-card); color: var(--text-main); } .report-filter-right .btn:hover { background-color: var(--bg-main); } .report-filter-right .btn-primary { background-color: var(--primary); color: white; border-color: var(--primary); } .report-filter-right .btn-primary:hover { background-color: var(--primary-hover); } .report-table-section { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); overflow-x: auto; } .report-table-section .table-header-row { display: flex; justify-content: flex-end; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); } .report-table-section .export-btn { display: flex; align-items: center; gap: 0.375rem; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); padding: 0.375rem 0.75rem; border-radius: var(--border-radius-sm); font-size: 0.8125rem; font-weight: 500; cursor: pointer; } .report-table-section .export-btn:hover { background: white; } .report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .report-table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; color: var(--text-muted); background-color: var(--bg-main); border-bottom: 1px solid var(--border-color); } .report-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; } .report-table tbody tr td { background-color: var(--bg-card); } .report-table tbody tr:hover td { background-color: var(--bg-main); } .report-table .total-cell { font-weight: 700; color: var(--primary); } .report-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; text-decoration: none; } .report-tab:hover { color: var(--text-main); } .report-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .report-menu-item-content { display: flex; flex-direction: column; gap: 0.125rem; } .report-menu-title { font-size: 13px; font-weight: 500; line-height: 1.2; } .report-menu-desc { font-size: 10px; color: var(--text-muted); line-height: 1.2; } .account-menu-links a { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; color: var(--text-main); text-decoration: none; transition: all 0.2s; border-left: 3px solid transparent; margin: 2px 0; } .account-menu-links a>svg { flex-shrink: 0; margin-top: 2px; } .account-menu-links a:hover { background: var(--bg-main); } .account-menu-links a.active { background: rgba(241, 65, 79, 0.05); border-left-color: var(--primary); color: var(--primary); } .account-menu-links a.active .report-menu-title { font-weight: 600; } .report-content-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; text-align: center; } .report-content-empty h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text-main); } .report-content-empty p { margin: 0; font-size: 0.875rem; color: var(--text-muted); } .report-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .report-stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; } .report-stat-icon { width: 48px; height: 48px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; } .report-stat-icon.primary { background: rgba(241, 65, 79, 0.1); color: var(--primary); } .report-stat-icon.success { background: rgba(16, 185, 129, 0.1); color: var(--success); } .report-stat-icon.warning { background: rgba(251, 191, 36, 0.1); color: var(--warning); } .report-stat-icon.info { background: rgba(59, 130, 246, 0.1); color: var(--info); } .report-stat-content { display: flex; flex-direction: column; gap: 0.25rem; } .report-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-main); } .report-stat-label { font-size: 0.75rem; color: var(--text-muted); } .report-chart-placeholder { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 2rem; text-align: center; color: var(--text-muted); } .report-table-header { padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .report-table-header h3 { margin: 0; font-size: 1rem; font-weight: 600; } .lead-reports-sidebar { position: fixed; left: 70px; top: 60px; width: 280px; bottom: 0; background: var(--surface-1); border-right: 1px solid var(--border-color); overflow-y: auto; z-index: 5; padding: 1rem 0; } .lead-reports-menu { display: flex; flex-direction: column; } .lead-reports-menu h4 { margin: 0; padding: 0.5rem 1rem 1rem; font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .lead-reports-menu a { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--text-main); text-decoration: none; transition: all 0.2s; border-left: 3px solid transparent; } .lead-reports-menu a:hover { background: var(--surface-2); } .lead-reports-menu a.active { background: rgba(241, 65, 79, 0.05); border-left-color: var(--primary); color: var(--primary); } .lead-reports-menu a.active .report-menu-title { font-weight: 600; } .lead-reports-menu a.active .report-menu-desc { color: var(--primary); } .report-content-wrapper { padding: 1.5rem; min-height: calc(100vh - 60px); } .lead-reports-container { padding: 0; } .lead-reports-list { display: flex; flex-direction: column; gap: 0.75rem; } .lead-report-card { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); text-decoration: none; color: var(--text-main); transition: all 0.2s; } .lead-report-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .lead-report-card-content { display: flex; flex-direction: column; gap: 0.25rem; } .lead-report-title { font-size: 0.9375rem; font-weight: 600; } .lead-report-desc { font-size: 0.75rem; color: var(--text-muted); } .report-filter-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 1.5rem; margin-bottom: 1.5rem; } .report-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .report-filter-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .report-data-table { width: 100%; border-collapse: collapse; } .report-data-table th, .report-data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .report-data-table th { background: var(--bg-main); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; } .report-data-table td { font-size: 0.875rem; } .report-content-wrapper.with-sidebar { padding: 0px; min-height: calc(100vh - 60px); } .report-card-arrow { color: var(--text-muted); transition: transform 0.2s; } .lead-report-card:hover .report-card-arrow { transform: translateX(4px); color: var(--primary); } .status-badge.present { background: rgba(16, 185, 129, 0.1); color: var(--success); } .status-badge.late { background: rgba(251, 191, 36, 0.1); color: var(--warning); } .status-badge.interested { background: rgba(16, 185, 129, 0.1); color: var(--success); } .status-badge.registered { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; } .status-badge.not-interested { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .status-badge.lost { background: rgba(107, 114, 128, 0.1); color: var(--text-muted); } .multi-select-dropdown { position: relative; } .multi-select-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); font-size: 0.875rem; color: var(--text-main); cursor: pointer; gap: 0.5rem; } .report-page-container { display: flex; flex-direction: column; padding-top: 15px; gap: 1.5rem; background: var(--bg-main); min-height: calc(100vh - 60px); } .report-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .header-left { display: flex; align-items: center; gap: 1rem; } .back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-main); cursor: pointer; transition: all 0.2s; } .back-btn:hover { background: var(--bg-main); color: var(--primary); border-color: var(--primary); } .header-title-section { display: flex; flex-direction: column; gap: 0.25rem; } .header-title { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .header-subtitle { margin: 0; font-size: 0.875rem; color: var(--text-muted); } .header-right { display: flex; align-items: center; gap: 0.75rem; } .stats-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .stats-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: all 0.2s; } .stats-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .stats-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--border-radius-sm); flex-shrink: 0; } .stats-card-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .stats-card-value { font-size: 1.75rem; font-weight: 700; color: var(--text-main); line-height: 1; } .stats-card-label { font-size: 0.8125rem; color: var(--text-muted); } .stats-card-change { font-size: 0.75rem; font-weight: 600; } .filter-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .filter-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); } .filter-card-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-main); } .filter-toggle-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: none; background: transparent; color: var(--primary); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .filter-toggle-btn:hover { color: var(--primary-hover); } .filter-card-body { padding: 1.25rem; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .filter-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .table-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); overflow: hidden; } .table-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .table-header-left { display: flex; align-items: center; gap: 0.75rem; } .table-header-right { display: flex; align-items: center; gap: 0.75rem; } .table-container-wrapper { overflow-x: auto; } .table-scroll-container { min-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .report-table th.sortable { cursor: pointer; user-select: none; } .report-table th.sortable:hover { color: var(--text-main); } .report-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .report-table td strong { font-weight: 600; } .report-table tr.even-row { background: var(--bg-card); } .report-table tr.odd-row { background: var(--bg-main); } .report-table tr:hover td { background: rgba(241, 65, 79, 0.03); } .agent-cell { display: flex; align-items: center; gap: 0.75rem; } .agent-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: white; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .agent-name { font-weight: 500; color: var(--text-main); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .table-footer-left { display: flex; align-items: center; gap: 0.75rem; } .table-card-header { flex-direction: column; align-items: stretch; } .export-form-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 1.5rem; } .export-form-card .form-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } .export-form-card .form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .export-form-card .section-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .export-form-card .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; } .export-form-card .filter-row:last-child { margin-bottom: 0; } .export-form-card .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 200px; flex: 1; } .export-form-card .filter-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .export-form-card .filter-group select, .export-form-card .filter-group input[type="text"], .export-form-card .filter-group input[type="date"] { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--bg-card); color: var(--text-main); cursor: pointer; outline: none; width: 100%; } .export-form-card .filter-group select:focus, .export-form-card .filter-group input[type="text"]:focus, .export-form-card .filter-group input[type="date"]:focus { border-color: var(--primary); } .export-form-card .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .export-form-card .date-range-input input { flex: 1; min-width: 100px; } .export-form-card .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .export-form-card .file-name-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 0.875rem; } .export-form-card .fields-selection { display: flex; flex-direction: column; gap: 0.75rem; } .export-form-card .fields-selection .field-checkbox:first-child { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .export-form-card .fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem 1rem; } .export-form-card .field-checkbox label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; color: var(--text-main); } .export-form-card .field-checkbox input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; } .export-form-card .form-actions { display: flex; justify-content: flex-end; padding-top: 1rem; } .export-form-card .submit-btn { min-width: 140px; height: 44px; font-size: 0.875rem; font-weight: 500; } .export-form-card .form-actions .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.25rem; height: 44px; border-radius: var(--border-radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .export-form-card .form-actions .btn-primary { background-color: var(--primary); color: white; border: 1px solid var(--primary); } .export-form-card .form-actions .btn-primary:hover { background-color: var(--primary-hover); } .export-form-card .form-actions .btn-secondary { background-color: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-color); } .export-form-card .form-actions .btn-secondary:hover { background-color: var(--bg-main); } .field-checkbox input[type="checkbox"] { accent-color: var(--primary); } .form-actions { display: flex; justify-content: flex-end; padding-top: 1rem; } .submit-btn { min-width: 120px; } .upload-section { margin-bottom: 1.5rem; } .upload-section label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.5rem; } .file-input-wrapper { display: flex; align-items: center; gap: 1rem; } .file-input-wrapper input[type="file"] { flex: 1; padding: 0.5rem; border: 1px dashed var(--border-color); border-radius: var(--border-radius-sm); } .btn-link { background: none; border: none; color: var(--primary); font-size: 0.875rem; text-decoration: underline; cursor: pointer; white-space: nowrap; } .btn-link:hover { color: var(--primary-hover); } .required-fields { background: var(--bg-main); padding: 1rem; border-radius: var(--border-radius-sm); margin-bottom: 1rem; } .required-fields p { margin: 0 0 0.5rem 0; font-size: 0.875rem; color: var(--text-main); } .required-fields p:last-child { margin-bottom: 0; } .example-section { margin-bottom: 1rem; } .example-section p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; } .example-code { background: var(--surface-2); padding: 1rem; border-radius: var(--border-radius-sm); font-size: 0.75rem; font-family: monospace; color: var(--text-main); white-space: pre; margin: 0; overflow-x: auto; } .format-note { background: var(--warning-subtle); padding: 1rem; border-radius: var(--border-radius-sm); margin-bottom: 1.5rem; } .format-note p { margin: 0 0 0.5rem 0; font-size: 0.8125rem; color: var(--warning-text); } .format-note p:last-child { margin-bottom: 0; } .report-page-header-simple { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .header-title-simple { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .stats-card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .stat-card .stat-number { font-size: 1.75rem; font-weight: 700; color: var(--text-main); } .stat-card .stat-label { font-size: 0.8125rem; color: var(--text-muted); } .stat-card .stat-icon { margin-bottom: 0.25rem; } .stat-card-success .stat-icon { color: var(--success); } .stat-card-success .stat-number { color: var(--success); } .stat-card-warning .stat-icon { color: var(--warning); } .stat-card-warning .stat-number { color: var(--warning); } .stat-card-danger .stat-icon { color: var(--danger); } .stat-card-danger .stat-number { color: var(--danger); } .tabs-container { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .tab-btn { padding: 0.75rem 1.25rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; } .tab-btn:hover { color: var(--text-main); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .meta-cell { font-size: 0.75rem; color: var(--text-muted); } .call-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .call-stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .call-stat-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--border-radius-sm); } .call-stat-info { display: flex; flex-direction: column; } .call-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--text-main); } .call-stat-label { font-size: 0.875rem; color: var(--text-muted); } .charts-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .chart-card { padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); } .chart-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .chart-content { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .bar-chart { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .bar-item { display: flex; align-items: center; gap: 0.75rem; } .bar-label { width: 80px; font-size: 0.875rem; color: var(--text-muted); } .bar-container { flex: 1; height: 24px; background: var(--bg-hover); border-radius: var(--border-radius-xs); overflow: hidden; } .bar { height: 100%; border-radius: var(--border-radius-xs); transition: width 0.3s ease; } .bar-value { width: 30px; font-size: 0.875rem; font-weight: 500; color: var(--text-main); text-align: right; } .chart-legend { display: flex; gap: 1rem; justify-content: center; } .legend-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); padding: 0.25rem 0; } .legend-row { display: flex; align-items: center; gap: 0.5rem; } .legend-count { font-weight: 600; color: var(--text-main); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; } .donut-chart { position: relative; width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--success) 0deg 162deg, var(--danger) 162deg 198.36deg, var(--danger) 198.36deg 360deg); flex-shrink: 0; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: var(--bg-card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .donut-chart-wrapper { display: flex; align-items: center; justify-content: center; } .donut-legend { display: flex; flex-direction: column; width: 100%; gap: 0.75rem; } .donut-value { font-size: 1.25rem; font-weight: 600; color: var(--text-main); } .donut-label { font-size: 0.75rem; color: var(--text-muted); } .call-history-section { margin-bottom: 1.5rem; } .section-heading { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 1rem 0; } .call-history-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; } .call-history-main, .call-history-side { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; } .table-header-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); } .feedback-table-controls .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); height: 44px; } .feedback-table-controls .search-icon { color: var(--text-muted); } .feedback-table-controls .search-input { border: none; background: transparent; outline: none; font-size: 0.875rem; width: 200px; color: var(--text-main); height: 44px; line-height: 44px; } .feedback-table-controls .search-input::placeholder { color: var(--text-muted); } @media (max-width: 1024px) { .report-page-container { padding: 1rem; } .stats-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .report-page-header { flex-direction: column; align-items: flex-start; } .header-right { width: 100%; justify-content: flex-start; } .stats-cards-grid { grid-template-columns: 1fr; } .filter-grid { grid-template-columns: 1fr; } .report-header-section { flex-direction: column; align-items: flex-start; gap: 1rem; } .report-header-right { width: 100%; } } @media (max-width: 768px) { .stats-card-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .export-form-card { padding: 1rem; } .export-form-card .filter-row { flex-direction: column; } .export-form-card .filter-group { min-width: 100%; } .export-form-card .fields-grid { grid-template-columns: repeat(2, 1fr); } } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Status badge color variants — translucent tint + status-colored label, * theme-adaptive. See badges.css for the shared pattern. */ .badge-status-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-status-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-status-overdue { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-status-success { background: var(--success-subtle); color: var(--success-text); } .badge-status-failed { background: var(--danger-subtle); color: var(--danger-text); } .badge-status-active { color: var(--success-text); font-weight: 600; } .badge-status-inactive { color: var(--danger-text); font-weight: 600; } .badge-status-new { background: var(--info-subtle); color: var(--info-text); } .badge-status-existing { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .badge-status-duplicate { background: var(--warning-subtle); color: var(--warning-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } .task-settings-page .dropdown-menu { z-index: 9999; } .truncate-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .field-error-text { display: block; color: var(--danger-text); font-size: 12px; margin-top: 4px; } .form-control.input-error { border-color: var(--danger-text); } .form-control.input-error:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Status badge color variants — translucent tint + status-colored label, * theme-adaptive. See badges.css for the shared pattern. */ .badge-status-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-status-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-status-overdue { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-status-success { background: var(--success-subtle); color: var(--success-text); } .badge-status-failed { background: var(--danger-subtle); color: var(--danger-text); } .badge-status-active { color: var(--success-text); font-weight: 600; } .badge-status-inactive { color: var(--danger-text); font-weight: 600; } .badge-status-new { background: var(--info-subtle); color: var(--info-text); } .badge-status-existing { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .badge-status-duplicate { background: var(--warning-subtle); color: var(--warning-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } .task-settings-page .dropdown-menu { z-index: 9999; } .truncate-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .field-error-text { display: block; color: var(--danger-text); font-size: 12px; margin-top: 4px; } .form-control.input-error { border-color: var(--danger-text); } .form-control.input-error:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Status badge color variants — translucent tint + status-colored label, * theme-adaptive. See badges.css for the shared pattern. */ .badge-status-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-status-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-status-overdue { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-status-success { background: var(--success-subtle); color: var(--success-text); } .badge-status-failed { background: var(--danger-subtle); color: var(--danger-text); } .badge-status-active { color: var(--success-text); font-weight: 600; } .badge-status-inactive { color: var(--danger-text); font-weight: 600; } .badge-status-new { background: var(--info-subtle); color: var(--info-text); } .badge-status-existing { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .badge-status-duplicate { background: var(--warning-subtle); color: var(--warning-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } .task-settings-page .dropdown-menu { z-index: 9999; } .truncate-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .field-error-text { display: block; color: var(--danger-text); font-size: 12px; margin-top: 4px; } .form-control.input-error { border-color: var(--danger-text); } .form-control.input-error:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Status badge color variants — translucent tint + status-colored label, * theme-adaptive. See badges.css for the shared pattern. */ .badge-status-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-status-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-status-overdue { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-status-success { background: var(--success-subtle); color: var(--success-text); } .badge-status-failed { background: var(--danger-subtle); color: var(--danger-text); } .badge-status-active { color: var(--success-text); font-weight: 600; } .badge-status-inactive { color: var(--danger-text); font-weight: 600; } .badge-status-new { background: var(--info-subtle); color: var(--info-text); } .badge-status-existing { background: var(--category-indigo-subtle); color: var(--category-indigo-text); } .badge-status-duplicate { background: var(--warning-subtle); color: var(--warning-text); } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Drawer Styles */ .drawer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 1000; animation: fadeIn var(--duration-base) var(--ease-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .drawer { width: 520px; max-width: 100%; height: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .drawer-title-section { display: flex; align-items: flex-start; gap: 0.75rem; } .drawer-title-section svg { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; } .drawer-title-section > div { display: flex; flex-direction: column; } .drawer-title-section h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); margin: 0; line-height: var(--leading-tight); } .drawer-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; } .drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .drawer-close:hover { background: var(--surface-hover); color: var(--text-main); } .drawer-tabs { display: flex; gap: 0; padding: 0 1.5rem; border-bottom: 1px solid var(--border-default); } .drawer-tabs .tab { padding: 0.875rem 1rem; border: none; background: transparent; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .drawer-tabs .tab:hover { color: var(--text-main); } .drawer-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .drawer-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; } .tab-content { display: flex; flex-direction: column; gap: 1.5rem; } /* Drawer position variants */ .drawer-left { animation: slideInLeft 0.3s ease; } .drawer-right { position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100%; background: var(--surface-4); border-left: 1px solid var(--border-hairline); box-shadow: var(--elevation-overlay); animation: slideInRight var(--duration-slow) var(--ease-entrance); } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (max-width: 576px) { .drawer-header { padding: 1rem; } .drawer-content { padding: 1rem; } } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Tab Styles */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-default); overflow-x: auto; } .tab { padding: 0.625rem 1rem; border: none; background: transparent; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; } .tab:hover { color: var(--text-main); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } /* Settings tab navigation variant */ .settings-tabs { display: flex; gap: 0.25rem; padding: 0 0 1rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; overflow-x: auto; padding-bottom: 0; } .settings-tab { display: flex; align-items: center; padding: 0.5rem 0.875rem; border: none; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-standard); white-space: nowrap; text-decoration: none; } .settings-tab:hover { color: var(--text-main); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--weight-semibold); } .settings-tabs-container { padding: 0 1.5rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .settings-tabs-container .settings-tabs { margin-bottom: 0; padding: 0.5rem 0; border-bottom: none; } @media (max-width: 768px) { .settings-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 0.5rem 0.625rem; font-size: var(--text-xs); min-height: 44px; } .settings-tab span { padding-left: 6px !important; } } @media (max-width: 480px) { .settings-tab { padding: 0.5rem 0.5rem; font-size: var(--text-2xs); } .settings-tab span { display: none; } .settings-tabs-container { padding: 0 1rem; } } /* Shared Toolbar Styles */ .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } .toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: relative; } .toolbar-right { display: flex; align-items: center; } .search-box { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); background-color: var(--surface-2); height: 40px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .search-icon { color: var(--text-tertiary); } .search-input { border: none; background: transparent; outline: none; font-size: var(--text-base); width: 200px; color: var(--text-main); height: 38px; line-height: 38px; } .search-input::placeholder { color: var(--text-muted); } /* Enquiries/Leads page layout wrapper */ .enquiries-page { display: flex; flex-direction: column; gap: 1rem; } /* Enquiries toolbar alias (same as .toolbar) */ .enquiries-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 20px; } @media (max-width: 768px) { .enquiries-toolbar { flex-direction: column; align-items: stretch; } } @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: stretch; } .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; } .search-input { width: 150px; } } .task-settings-page .dropdown-menu { z-index: 9999; } .truncate-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .field-error-text { display: block; color: var(--danger-text); font-size: 12px; margin-top: 4px; } .form-control.input-error { border-color: var(--danger-text); } .form-control.input-error:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1); } .spin { animation: automation-spin 0.8s linear infinite; } @keyframes automation-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn-danger { background-color: var(--danger); color: var(--text-on-accent); border-color: var(--danger); } .btn-danger:hover { background-color: var(--danger-text); } /* Trigger type badges */ .badge-trigger-new-enquiry { background: var(--info-subtle); color: var(--info-text); } .badge-trigger-value-change { background: var(--category-purple-subtle); color: var(--category-purple-text); } .badge-trigger-reassign { background: var(--category-orange-subtle); color: var(--category-orange-text); } .badge-trigger-notification { background: var(--category-teal-subtle); color: var(--category-teal-text); } /* Execution status badges */ .badge-exec-success { background: var(--success-subtle); color: var(--success-text); } .badge-exec-failed { background: var(--danger-subtle); color: var(--danger-text); } .badge-exec-dead { background: rgba(107, 114, 128, 0.15); color: var(--text-secondary); } .badge-exec-queued { background: var(--info-subtle); color: var(--info-text); position: relative; padding-left: 1.25rem; } .badge-exec-queued::before { content: ''; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--info-text); animation: automation-pulse 1.4s ease-in-out infinite; } @keyframes automation-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* Inline row toggle + icon buttons */ .automation-row-actions { display: flex; align-items: center; gap: 0.375rem; } .automation-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: var(--border-radius-sm); color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .automation-icon-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-main); } .automation-icon-btn.danger:hover { background: rgba(239, 68, 68, 0.1); color: var(--danger-text); } /* Rule builder */ .automation-builder-section { background: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; margin-bottom: 1.25rem; } .automation-builder-section h3 { font-size: 1rem; margin-bottom: 1rem; } .automation-builder-section-desc { color: var(--text-muted); font-size: 0.85rem; margin: -0.5rem 0 1rem; } .automation-trigger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .automation-trigger-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--bg-card); cursor: pointer; text-align: left; transition: border-color 0.15s, box-shadow 0.15s; } .automation-trigger-card:hover { border-color: var(--primary); } .automation-trigger-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(241, 65, 79, 0.1); } .automation-trigger-card-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; background: rgba(241, 65, 79, 0.08); color: var(--primary); } .automation-trigger-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; } .automation-trigger-card-desc { font-size: 0.78rem; color: var(--text-muted); } .automation-config-panel { background: var(--bg-main); border-radius: var(--border-radius-md); padding: 1rem 1.25rem; margin-top: 0.5rem; } .automation-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .automation-field-row:last-child { margin-bottom: 0; } .automation-chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; } .automation-chip { padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); font-size: 0.8rem; cursor: pointer; color: var(--text-main); } .automation-chip.selected { background: var(--primary); border-color: var(--primary); color: white; } /* Actions list */ .automation-action-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .automation-action-card { border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--bg-card); } .automation-action-card.dragging { opacity: 0.5; } .automation-action-card-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; } .automation-drag-handle { cursor: grab; color: var(--text-muted); display: flex; } .automation-action-card-title { flex: 1; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.88rem; } .automation-action-card-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem; } .automation-add-action-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; padding: 0.9rem; border: 1px dashed var(--border-color); border-radius: var(--border-radius-md); margin-top: 0.75rem; } .automation-add-action-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer; font-size: 0.85rem; font-weight: 500; } .automation-add-action-option:hover { border-color: var(--primary); color: var(--primary); } .automation-builder-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; } .automation-field-error { color: var(--danger-text); font-size: 0.75rem; margin-top: 0.25rem; } .automation-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .automation-toggle input { opacity: 0; width: 0; height: 0; } .automation-toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--border-strong); transition: 0.2s; border-radius: 999px; } .automation-toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.2s; border-radius: 50%; } .automation-toggle input:checked + .automation-toggle-slider { background-color: var(--primary); } .automation-toggle input:checked + .automation-toggle-slider::before { transform: translateX(18px); } .automation-toggle.loading .automation-toggle-slider { opacity: 0.6; cursor: wait; } /* Execution logs */ .automation-log-row-expanded td { background: var(--bg-main); padding: 1rem 1.25rem; } .automation-webhook-history-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; } .automation-webhook-history-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-color); } .automation-webhook-history-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border-color); } .automation-clickable-row { cursor: pointer; } .automation-empty-hint { color: var(--text-muted); font-size: 0.85rem; } .automation-failure-count { font-weight: 600; } .automation-failure-count.warning { color: var(--danger-text); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } .automation-rules-page { padding: 1.5rem; } .automation-empty-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 4rem 1rem; color: var(--text-muted); text-align: center; } .automation-empty-page h3 { color: var(--text-main); margin-top: 0.5rem; } .automation-empty-page .btn { margin-top: 0.75rem; } /* Shared Form Styles */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 0.375rem; color: var(--text-secondary); letter-spacing: 0.005em; } .form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .form-group textarea { min-height: 76px; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); } .form-group input:hover:not(:focus):not(:disabled), .form-group select:hover:not(:focus):not(:disabled), .form-group textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { opacity: 0.6; cursor: not-allowed; } .form-group input[aria-invalid='true'], .form-group select[aria-invalid='true'], .form-group textarea[aria-invalid='true'] { border-color: var(--danger); } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Dropdown Container */ .dropdown-container { position: relative; } /* Checkbox Group */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Radio Group */ .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; } .radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); border-radius: 26px; } .toggle-slider:before { position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform var(--duration-base) var(--ease-standard); border-radius: 50%; box-shadow: var(--elevation-1); } .toggle-switch input:checked + .toggle-slider { background-color: var(--success); border-color: var(--success); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--border-focus); outline-offset: 2px; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); } .switch-field { display: flex; align-items: center; gap: 0.625rem; } .switch-field label:not(.toggle-switch) { margin-bottom: 0; cursor: pointer; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .automation-rules-page form { max-width: 960px; } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); } /* Shared Pagination Styles */ .pagination-container { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); flex-wrap: wrap; gap: 1rem; } .pagination-left { display: flex; align-items: center; gap: 0.75rem; } .rows-label { font-size: 0.875rem; color: var(--text-muted); } .rows-select { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-sm); font-size: 0.875rem; background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; } .pagination-info { font-size: 0.875rem; color: var(--text-muted); } .pagination-right { display: flex; align-items: center; gap: 0.5rem; } .pagination-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .pagination-btn:hover:not(:disabled) { background-color: var(--surface-hover); } .pagination-btn:active:not(:disabled) { background-color: var(--surface-selected); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 0.875rem; color: var(--text-muted); padding: 0 0.5rem; } .pagination-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--border-color); background: var(--bg-card); border-radius: var(--border-radius-sm); font-size: 0.8125rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); color: var(--text-muted); } .pagination-number:hover { background: var(--surface-hover); } /* Container for the windowed page-number buttons + ellipsis markers. Without an explicit `display: flex` here, this block-level div stacks its `display: flex` button/span children vertically (each becomes its own block box) instead of laying them out in a row. */ .pagination-numbers { display: flex; align-items: center; gap: 0.375rem; } .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-muted); font-size: 0.8125rem; } .pagination-number:active:not(.active) { background: var(--surface-selected); } .pagination-number.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .paginate-button { display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 0.875rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .paginate-button:hover:not(.disabled) { background-color: var(--surface-hover); } .paginate-button.disabled { opacity: 0.5; cursor: not-allowed; } .paginate-button.current { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-accent); box-shadow: var(--elevation-1); } .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 1rem; } .pagination { display: flex; align-items: center; gap: 0.5rem; } @media (max-width: 768px) { .pagination-container { flex-direction: column; align-items: flex-start; } .table-footer { flex-direction: column; gap: 0.75rem; padding: 0.75rem 1rem; } .pagination-controls { flex-wrap: wrap; justify-content: center; } } /* Shared Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-overlay-in var(--duration-base) var(--ease-standard); } @keyframes modal-overlay-in { from { opacity: 0; } } .modal-content { background: var(--surface-4); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--elevation-overlay); animation: modal-content-in var(--duration-base) var(--ease-entrance); } @keyframes modal-content-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-main); } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .modal-close:hover { background: var(--surface-hover); color: var(--text-main); } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } /* Delete confirmation modal styles */ .delete-modal-icon { width: 60px; height: 60px; background: var(--danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--danger-text); } .delete-warning { font-size: 14px; color: var(--text-main); margin-bottom: 1rem; text-align: center; } .delete-warning strong { color: var(--danger-text); } .delete-confirm-input { margin-top: 1rem; } .delete-confirm-input label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); } .delete-confirm-input input { width: 100%; min-height: 40px; padding: 0.625rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background: var(--surface-2); color: var(--text-main); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .delete-confirm-input input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } /* Shared Filter Panel Styles */ .filters-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); margin-bottom: 20px; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 0.375rem; min-width: 160px; flex: 1; } .filter-group label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; } .filter-group select, .filter-group input { min-height: 38px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--border-radius-md); font-size: var(--text-base); background-color: var(--surface-2); color: var(--text-main); cursor: pointer; outline: none; width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .filter-group select:focus, .filter-group input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); } .filter-group input[type="date"] { width: auto; min-width: 130px; } .date-range-input { display: flex; align-items: center; gap: 0.5rem; } .date-range-input input { flex: 1; } .date-range-input span { color: var(--text-muted); font-size: 0.875rem; } .filter-actions { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* Shared Dropdown / Popover Styles */ .btn-secondary.active { background: var(--surface-2); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--accent-subtle); } .btn-secondary svg:first-child { margin-right: 0.125rem; } .btn-secondary .rotate { transform: rotate(180deg); transition: transform 0.2s ease; } .premium-dropdown { position: absolute; top: calc(100% + 8px); min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 1000; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .premium-dropdown.closing { animation: dropdownSlideOut 0.15s ease forwards; } @keyframes dropdownSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } .dropdown-header { padding: 0.625rem 1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .premium-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .premium-dropdown .dropdown-item:hover { background: var(--surface-hover); } .premium-dropdown .dropdown-item.selected { background: var(--accent-subtle); color: var(--primary); } .premium-dropdown .dropdown-item span { flex: 1; font-weight: 400; } .premium-dropdown .dropdown-item svg { color: var(--text-tertiary); flex-shrink: 0; } .premium-dropdown .dropdown-item:hover svg { color: var(--text-secondary); } .premium-dropdown .dropdown-item.selected svg { color: var(--primary); } .premium-dropdown .dropdown-item.danger { color: var(--danger-text); } .premium-dropdown .dropdown-item.danger:hover { background: var(--danger-subtle); } .premium-dropdown .dropdown-item.danger svg { color: var(--danger-text); } .check-icon { color: var(--primary) !important; } .dropdown-divider { height: 1px; background: var(--border-default); margin: 0.25rem 0; } .actions-dropdown { right: 0; left: auto; } .sort-dropdown { position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 100; overflow: hidden; animation: actionDropdownSlide 0.2s ease forwards; } .sort-dropdown button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .sort-dropdown button:hover { background-color: var(--surface-hover); } .sort-dropdown button.active { background-color: var(--accent-subtle); color: var(--primary); } .sort-dropdown button .sort-indicator { font-size: 0.75rem; font-weight: 600; color: var(--primary); } .action-dropdown-portal { position: fixed; min-width: 220px; background: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-lg); box-shadow: var(--elevation-menu); z-index: 9999; overflow: hidden; animation: dropdownSlideIn 0.2s ease forwards; } .action-dropdown-portal.dropup { animation: dropdownSlideUp 0.2s ease forwards; } .action-dropdown-portal button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown-portal button:hover { background-color: var(--surface-hover); } .action-dropdown-portal button:active { background-color: var(--surface-selected); } .action-dropdown-portal button.delete { color: var(--danger-text); } .action-dropdown-portal button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown-portal button.whatsapp { color: #25d366; } .action-dropdown-portal button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown-portal button.message { color: var(--info); } .action-dropdown-portal button.message:hover { background-color: var(--info-subtle); } .action-dropdown-portal button.order { color: #8b5cf6; } .action-dropdown-portal button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Simple admin dropdown toggle/menu/item */ .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0.375rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background-color: var(--bg-card); cursor: pointer; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .dropdown-toggle:hover { background-color: var(--surface-hover); color: var(--text-main); } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 150px; background-color: var(--surface-3); border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); box-shadow: var(--elevation-menu); z-index: 10; margin-top: 4px; } .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: var(--text-base); color: var(--text-main); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .dropdown-item:hover { background-color: var(--surface-hover); } .dropdown-item:first-child { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .dropdown-item:last-child { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* Premium dropdown position variants */ .premium-dropdown.dropup { bottom: 100%; top: auto; margin-bottom: 4px; } .premium-dropdown.dropleft { right: 0; left: auto; } /* Legacy styles for non-portal dropdowns */ .action-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; } .action-dropdown.dropleft { right: auto; left: 0; } .action-dropdown.dropup { animation: actionDropdownSlideUp 0.2s ease forwards; } @keyframes actionDropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes actionDropdownSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .action-dropdown button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-dropdown button:hover { background-color: var(--surface-hover); } .action-dropdown button:active { background-color: var(--surface-selected); } .action-dropdown button.delete { color: var(--danger-text); } .action-dropdown button.delete:hover { background-color: var(--danger-subtle); } .action-dropdown button.whatsapp { color: #25d366; } .action-dropdown button.whatsapp:hover { background-color: rgba(37, 211, 102, 0.12); } .action-dropdown button.message { color: var(--info); } .action-dropdown button.message:hover { background-color: var(--info-subtle); } .action-dropdown button.order { color: #8b5cf6; } .action-dropdown button.order:hover { background-color: rgba(139, 92, 246, 0.14); } /* Shared Table Styles */ .table-container { border: 1px solid var(--border-hairline); border-radius: var(--border-radius-md); background-color: var(--bg-card); box-shadow: var(--surface-raise-highlight); overflow-x: auto; overflow-y: visible; max-height: none; position: relative; } .table-container table { min-width: unset; width: 100%; } .table-container table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table-container th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table-container th.sortable { cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); } .table-container th.sortable:hover { color: var(--text-secondary); } .table-container th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .table-container td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); vertical-align: middle; height: auto; line-height: var(--leading-normal); } .table-container tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .table-container tbody tr:hover td { background-color: var(--surface-hover); } .table-container tbody tr.is-selected td, .table-container tbody tr[aria-selected='true'] td { background-color: var(--surface-selected); } .table-container tbody tr.is-selected td:first-child, .table-container tbody tr[aria-selected='true'] td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .action-cell { width: 50px; text-align: center; } .action-menu-container { position: relative; } .lead-name-cell { color: var(--primary); cursor: pointer; font-weight: 500; white-space: nowrap; } .lead-name-cell:hover { text-decoration: underline; } .lead-cell-empty { color: var(--text-muted, #6b7280); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } .lead-cell-empty:hover { color: var(--primary); } .action-btn { display: flex; align-items: center; justify-content: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; border-radius: var(--border-radius-sm); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .action-btn:hover { background-color: var(--surface-hover); color: var(--text-main); } .action-btn:active { background-color: var(--surface-selected); } .action-buttons { display: flex; gap: 0.25rem; } /* Table header toolbar controls */ .table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); } .entries-select label { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; color: var(--text-muted); } .entries-select select { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-main); } /* Table search wrapper (Account.css pattern) */ .search-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: none; border-radius: var(--border-radius-sm); background-color: var(--bg-card); } .search-input input { border: none; outline: none; font-size: 14px; width: 200px; background: transparent; color: var(--text-main); } /* Scrollable table wrapper */ .table-scroll { overflow-x: auto; overflow-y: visible; max-height: none; } .table-scroll table { min-width: 100%; width: auto; } .table-scroll thead { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--border-default); } /* Alternate data-table class */ .data-table { width: 100%; border-collapse: collapse; } .data-table thead { background-color: var(--surface-2); } .data-table th { padding: 0.6875rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; font-size: var(--text-base); color: var(--text-main); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } .data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); } .data-table tbody tr:hover { background-color: var(--surface-hover); } /* Table footer info */ .table-info { font-size: 14px; color: var(--text-muted); } .table-footer-left { display: flex; align-items: center; } .limit-text { font-size: 13px; color: var(--text-muted); font-weight: 500; } @media (max-width: 768px) { .table-header-controls { flex-direction: column; gap: 0.75rem; align-items: stretch; padding: 0.75rem 1rem; } .entries-select label { flex-wrap: wrap; } .search-input { width: 100%; flex: 1; } .search-input input { width: 100%; } .table-container th, .table-container td, .data-table th, .data-table td { padding: 0.5rem 0.625rem; } } @media (max-width: 480px) { .table-header-controls > div:last-child { flex-direction: column !important; gap: 0.5rem !important; } .table-header-controls > div:last-child .search-input { width: 100%; } .table-header-controls > div:last-child .btn { width: 100%; justify-content: center; } } /* Enquiries-table alias */ .enquiries-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .enquiries-table th { text-align: left; padding: 0.6875rem 1rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background-color: var(--surface-2); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .enquiries-table th.sortable { cursor: pointer; user-select: none; } .enquiries-table th.sortable:hover { color: var(--text-main); } .enquiries-table th input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); } .enquiries-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; height: auto; line-height: 1.5; } .enquiries-table td:first-child { text-align: center; width: 50px; } .enquiries-table .badge { display: inline-block; height: auto; line-height: 1.5; vertical-align: middle; margin: 0; } /* Detail section layout */ .detail-section { margin-top: 0.5rem; } .detail-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } .detail-item { display: flex; flex-direction: column; gap: 0.25rem; } .detail-item label { font-size: 0.75rem; color: var(--text-muted); } .detail-item span { font-size: 0.875rem; color: var(--text-main); } .text-danger { color: var(--danger-text) !important; } /* Skeleton loading animation */ @keyframes skeleton-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } .skeleton-box { height: 14px; border-radius: var(--border-radius-xs); background: var(--surface-3); animation: skeleton-pulse 1.5s ease-in-out infinite; max-width: 180px; } .skeleton-box--action { max-width: 32px; margin: 0 auto; } /* Shared Button Styles */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 0.875rem; height: 40px; font-size: var(--text-base); font-weight: var(--weight-medium); border: 1px solid var(--border-default); border-radius: var(--border-radius-md); cursor: pointer; background-color: var(--surface-1); color: var(--text-main); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background-color: var(--surface-hover); } .btn:active { transform: translateY(0.5px) scale(0.992); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ---- Size modifier ---- */ .btn-sm { height: 32px; padding: 0 0.625rem; font-size: var(--text-sm); } /* ---- Primary ---- */ .btn-primary { background-color: var(--primary); color: var(--text-on-accent); border-color: var(--primary); box-shadow: var(--elevation-1); } .btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* ---- Secondary ---- */ .btn-secondary { color: var(--text-secondary); } /* ---- Text / link ---- */ .btn-text { border: none; background: transparent; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .btn-text:hover { background: transparent; color: var(--primary-hover); } .btn-text:active { transform: none; } /* ---- Ghost ---- */ .btn-ghost { border: none; background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--surface-hover); color: var(--text-main); } /* Shared Badge Styles * * One pattern only: a translucent status tint (`--*-subtle`) behind an * accessible status-colored label (`--*-text`). Both adapt per theme. Do not * reintroduce solid-pastel backgrounds — they read as bright blobs in dark. */ .badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; line-height: var(--leading-normal); white-space: nowrap; } .badge-active, .badge-success, .badge-completed { background-color: var(--success-subtle); color: var(--success-text); } .badge-inactive, .badge-expired, .badge-secondary { background-color: var(--neutral-subtle); color: var(--neutral-text); } .badge-pending { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-danger, .badge-overdue, .badge-lost { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-hot-lead { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-cold-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-warm-lead { background-color: var(--warning-subtle); color: var(--warning-text); } .status-badge { display: inline-block; padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-sm); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.01em; } /* Communication channel badges */ .badge-email { background-color: var(--info-subtle); color: var(--info-text); } .badge-sms { background-color: var(--success-subtle); color: var(--success-text); } .badge-whatsapp { background-color: rgba(37, 211, 102, 0.14); color: #25d366; } .badge-social { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-progress { background-color: var(--info-subtle); color: var(--info-text); } .badge-incoming, .badge-outgoing, .badge-missed, .badge-check-in, .badge-check-out { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); letter-spacing: 0.01em; } .badge-incoming { display: inline-flex; padding: 0.1875rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-outgoing { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--warning-text); background: var(--warning-subtle); border-radius: var(--border-radius-xs); } .badge-missed { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } .badge-lead { background-color: var(--info-subtle); color: var(--info-text); } .badge-deal { background-color: var(--success-subtle); color: var(--success-text); } .badge-task { background-color: var(--warning-subtle); color: var(--warning-text); } .badge-campaign { background-color: rgba(139, 92, 246, 0.14); color: #8b5cf6; } .badge-staff { background-color: var(--danger-subtle); color: var(--danger-text); } .badge-check-in { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--success-text); background: var(--success-subtle); border-radius: var(--border-radius-xs); } .badge-check-out { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger-text); background: var(--danger-subtle); border-radius: var(--border-radius-xs); } /* Status badge variants (Account admin tables) */ .status-active { background-color: var(--success-subtle); color: var(--success-text); } .status-admin { background-color: var(--accent-subtle); color: var(--accent-text); } .status-badge.active { background: var(--success-subtle); color: var(--success-text); } .status-badge.expired { background: var(--neutral-subtle); color: var(--neutral-text); }