@charset "UTF-8"; /** * Design System - Main Entry Point * Single SCSS entry point that imports all component styles. * * Build output: dist/styles.css * Usage: Services copy from dist/ via copy-design-system.js */ /** * Design System - CSS Tokens (Variables) * * Semantic naming convention without vendor prefixes. * HSL-ready format: use hsl(var(--name)). */ :root { color-scheme: light; --primary: 215 33% 25%; --primary-foreground: 0 0% 100%; --primary-hover: 215 33% 20%; --surface: 215 15% 96%; --accent: 177 47% 47%; --accent-hover: 177 47% 40%; --accent-foreground: 0 0% 100%; --background: 0 0% 100%; --muted: 215 17% 98%; --muted-subtle: 215 14% 96%; --muted-foreground: 215 10% 73%; --border: 215 14% 93%; --border-emphasis: 215 14% 83%; --foreground-secondary: 215 7% 56%; --foreground: 215 9% 31%; --foreground-strong: 215 33% 15%; --success: 145 63% 32%; --success-muted: 140 53% 90%; --success-foreground: 145 61% 23%; --success-text: 145 61% 23%; --warning: 25 95% 53%; --warning-muted: 38 100% 95%; --warning-foreground: 25 75% 28%; --destructive: 354 70% 54%; --destructive-foreground: 0 0% 100%; --destructive-hover: 354 70% 45%; --destructive-active: 354 70% 40%; --destructive-muted: 354 70% 95%; --destructive-text: 354 58% 30%; --info: 189 94% 43%; --info-muted: 189 67% 93%; --info-foreground: 189 75% 25%; --info-text: 189 75% 25%; --chart-pending: 212 10% 73%; --chart-inprogress: 25 95% 53%; --chart-completed: 145 63% 32%; --chart-expired: 354 70% 54%; --syntax-keyword: 289 72% 32%; --syntax-string: 115 100% 23%; --syntax-number: 242 99% 40%; --syntax-boolean: 354 67% 53%; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --radius-pill: 100px; --radius-card: 16px 16px 16px 4px; --header-main-height: 64px; --header-nav-height: 48px; --header-total-height: 112px; --status-sent-bg: 210 70% 94%; --status-sent-fg: 210 70% 38%; --status-opened-bg: 291 47% 95%; --status-opened-fg: 291 47% 38%; --status-inprogress-bg: 33 100% 94%; --status-inprogress-fg: 24 100% 47%; --status-completed-bg: 123 38% 93%; --status-completed-fg: 123 38% 24%; --status-expired-bg: 0 100% 95%; --status-expired-fg: 0 68% 47%; --loading-overlay: 0 0% 100% / 0.8; } /* Dark mode: applied via .dark class on */ .dark { color-scheme: dark; --primary: 215 45% 65%; --primary-foreground: 215 33% 10%; --primary-hover: 215 50% 72%; --surface: 215 20% 15%; --accent: 177 55% 55%; --accent-hover: 177 55% 62%; --accent-foreground: 177 50% 10%; --background: 220 25% 10%; --muted: 220 20% 13%; --muted-subtle: 220 18% 16%; --muted-foreground: 215 12% 55%; --border: 215 15% 22%; --border-emphasis: 215 15% 32%; --foreground-secondary: 215 10% 60%; --foreground: 215 15% 80%; --foreground-strong: 215 20% 92%; --success: 145 55% 45%; --success-muted: 145 30% 15%; --success-foreground: 145 50% 70%; --success-text: 145 50% 70%; --warning: 25 85% 58%; --warning-muted: 30 35% 15%; --warning-foreground: 25 80% 75%; --destructive: 354 65% 60%; --destructive-foreground: 0 0% 100%; --destructive-hover: 354 65% 65%; --destructive-active: 354 65% 55%; --destructive-muted: 354 30% 15%; --destructive-text: 354 60% 75%; --info: 189 80% 50%; --info-muted: 189 30% 15%; --info-foreground: 189 70% 75%; --info-text: 189 70% 75%; --chart-pending: 212 15% 55%; --chart-inprogress: 25 85% 58%; --chart-completed: 145 55% 45%; --chart-expired: 354 65% 60%; --syntax-keyword: 289 60% 70%; --syntax-string: 115 50% 55%; --syntax-number: 242 70% 70%; --syntax-boolean: 354 60% 65%; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --status-sent-bg: 212 35% 18%; --status-sent-fg: 212 60% 70%; --status-opened-bg: 289 25% 18%; --status-opened-fg: 289 50% 72%; --status-inprogress-bg: 30 35% 17%; --status-inprogress-fg: 25 80% 70%; --status-completed-bg: 145 30% 15%; --status-completed-fg: 145 50% 70%; --status-expired-bg: 354 30% 15%; --status-expired-fg: 354 60% 70%; --loading-overlay: 220 25% 10% / 0.8; } /** * Design System - Base Styles * Reset and foundational styles */ /* Inter font — self-hosted to avoid CSP issues and external dependencies */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/shared/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/shared/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/shared/fonts/inter-700.woff2") format("woff2"); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; /* Prevent layout shift from scrollbar appearing/disappearing */ overflow-y: scroll; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: hsl(var(--foreground)); background-color: hsl(var(--muted)); min-height: 100vh; } :focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } .skip-link { position: absolute; top: -100px; /* Must exceed element height to keep it fully off-screen until focused */ left: 0; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0.5rem 1rem; z-index: 100; } .skip-link:focus { top: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /** * Design System - Typography * Font families, headings, text styles */ h1, h2, h3, h4, h5, h6 { font-weight: 600; color: hsl(var(--foreground-strong)); line-height: 1.3; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.875rem; } .text-center { text-align: center; } .text-muted { color: hsl(var(--foreground-secondary)); } @view-transition { navigation: auto; } #header-container { display: block; min-height: var(--header-total-height); view-transition-name: site-header; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; } } /** * Design System - Buttons * * Signature corner pattern: 3 rounded corners, 1 sharp (bottom-right); * all corners round on hover. */ :root { --btn-radius-round: 16px; --btn-radius-sharp: 4px; /* Shorthand order: top-left, top-right, bottom-right, bottom-left */ --btn-radius: var(--btn-radius-round) var(--btn-radius-round) var(--btn-radius-sharp) var(--btn-radius-round); --btn-radius-hover: var(--btn-radius-round); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; min-height: 44px; /* Touch target accessibility minimum */ font-size: 0.9rem; font-weight: 600; border: none; border-radius: var(--btn-radius); cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease, color 0.2s ease; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover:not(:disabled) { background-color: hsl(var(--primary-hover)); border-radius: var(--btn-radius-hover); } .btn-primary:active:not(:disabled) { background-color: hsl(var(--primary-hover)); } .btn-secondary { background-color: transparent; color: hsl(var(--primary)); border: 2px solid hsl(var(--primary)); /* Shrink padding by the 2px border so total size matches .btn */ padding: calc(0.75rem - 2px) calc(1.5rem - 2px); } .btn-secondary:hover:not(:disabled) { background-color: hsl(var(--surface)); border-radius: var(--btn-radius-hover); } .btn-secondary:active:not(:disabled) { background-color: hsl(var(--surface)); } .btn-ghost { background-color: transparent; color: hsl(var(--foreground-secondary)); } .btn-ghost:hover:not(:disabled) { background-color: hsl(var(--muted-subtle)); color: hsl(var(--foreground)); border-radius: var(--btn-radius-hover); } .btn-ghost:active:not(:disabled) { background-color: hsl(var(--border)); } .btn-destructive, .btn-danger { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-destructive:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background-color: hsl(var(--destructive-hover)); border-radius: var(--btn-radius-hover); } .btn-destructive:active:not(:disabled), .btn-danger:active:not(:disabled) { background-color: hsl(var(--destructive-active)); } .btn-destructive-outline, .btn-danger-outline { background-color: transparent; color: hsl(var(--destructive)); border: 2px solid hsl(var(--destructive)); /* Shrink padding by the 2px border so total size matches .btn */ padding: calc(0.75rem - 2px) calc(1.5rem - 2px); } .btn-destructive-outline:hover:not(:disabled), .btn-danger-outline:hover:not(:disabled) { background-color: hsl(var(--destructive-muted)); border-radius: var(--btn-radius-hover); } .btn-destructive-outline:active:not(:disabled), .btn-danger-outline:active:not(:disabled) { background-color: hsl(var(--destructive-muted)); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; min-height: 36px; --btn-radius-round: 12px; --btn-radius-sharp: 3px; } .btn-lg { padding: 1rem 2rem; font-size: 1rem; min-height: 52px; --btn-radius-round: 20px; --btn-radius-sharp: 5px; } .btn-icon { padding: 0.375rem; min-width: 32px; min-height: 32px; gap: 0; --btn-radius-round: 8px; --btn-radius-sharp: 3px; } .btn-icon svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-icon[data-action=delete]:hover:not(:disabled) { color: hsl(var(--destructive)); background-color: hsl(var(--destructive-muted)); border-radius: var(--btn-radius-hover); } /** * Design System - Cards * Generic card component and domain-specific variants */ .card { background: hsl(var(--background)); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted)); border-radius: 16px 16px 0 0; /* Round only the top to meet the card's top corners */ } .card-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: hsl(var(--foreground-strong)); } .card-body { padding: 1.5rem; } .card-body p { margin: 0; color: hsl(var(--foreground-secondary)); line-height: 1.6; } .card-footer { padding: 1rem 1.5rem; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: 0.75rem; } .card-interactive { transition: box-shadow 0.2s, transform 0.2s; cursor: pointer; } .card-interactive:hover { box-shadow: 0 4px 12px hsl(var(--primary)/0.15); transform: translateY(-2px); } .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .stat-card { background: hsl(var(--background)); padding: 1.5rem; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); border-left: 4px solid hsl(var(--primary)); } .stat-card h3 { font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground-secondary)); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .stat-value { font-size: 2rem; font-weight: 700; color: hsl(var(--primary)); margin: 0; } .stat-card-gauge { position: relative; } .gauge-container { position: relative; width: 100px; height: 100px; margin: 0 auto; } .gauge-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.25rem; font-weight: 700; color: hsl(var(--primary)); } .chart-section { margin-bottom: 2rem; } .chart-card { background: hsl(var(--background)); padding: 1.5rem; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .chart-card h3 { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 1rem; } .chart-card canvas { max-height: 250px; } .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .member-card { background: hsl(var(--background)); border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s; } .member-card:hover { box-shadow: 0 4px 12px hsl(var(--primary)/0.15); transform: translateY(-2px); } .member-card h3 { color: hsl(var(--foreground-strong)); margin-bottom: 0.75rem; } .member-info-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; color: hsl(var(--foreground-secondary)); } .member-info-item .label { font-weight: 500; color: hsl(var(--foreground)); min-width: 60px; } .member-info-item .value { word-break: break-word; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .recent-activity { background: hsl(var(--background)); padding: 1.5rem; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .recent-activity h2 { margin-bottom: 1rem; color: hsl(var(--foreground-strong)); } /** * Design System - Forms * Form containers, inputs, validation */ .form-container { background: hsl(var(--background)); border-radius: var(--radius-card); padding: 2rem; box-shadow: var(--shadow-sm); max-width: 500px; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-weight: 600; font-size: 0.9rem; color: hsl(var(--foreground)); margin-bottom: 0.5rem; } .form-group .required { color: hsl(var(--destructive)); } .form-control, input[type=text], input[type=email], input[type=tel], input[type=search], select, textarea { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid hsl(var(--border)); border-radius: 4px; background-color: hsl(var(--background)); transition: border-color 0.2s, box-shadow 0.2s; } .form-control:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary)/0.15); } .form-control::placeholder, input::placeholder { color: hsl(var(--muted-foreground)); } .form-control.error { border-color: hsl(var(--destructive)); } .form-hint { font-size: 0.85rem; color: hsl(var(--foreground-secondary)); margin-top: 0.25rem; } .form-error { font-size: 0.85rem; color: hsl(var(--destructive)); margin-top: 0.25rem; } .form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--muted-subtle)); } .search-bar { margin-bottom: 1rem; } .search-bar input { max-width: 300px; } .search-container { width: 100%; max-width: 400px; } .search-input { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background-color: hsl(var(--background)); transition: border-color 0.2s, box-shadow 0.2s; } .search-input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary)/0.15); } .search-input::placeholder { color: hsl(var(--muted-foreground)); } /** * Design System - Tables * Table containers and styling */ .table-container { background: hsl(var(--background)); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; } table { width: 100%; border-collapse: collapse; } table th { text-align: left; padding: 1rem; background: hsl(var(--muted)); font-weight: 600; font-size: 0.8rem; color: hsl(var(--foreground-secondary)); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid hsl(var(--border)); } table td { padding: 1rem; border-bottom: 1px solid hsl(var(--muted-subtle)); color: hsl(var(--foreground)); } table tbody tr:last-child td { border-bottom: none; } /* Opt-in row interactivity via the .table-interactive modifier */ .table-interactive tbody tr { cursor: pointer; transition: all 0.15s ease; } .table-interactive tbody tr:hover { background-color: hsl(var(--surface)); box-shadow: 0 2px 8px hsl(var(--primary)/0.1); transform: translateY(-1px); } .table-interactive tbody tr:active { transform: translateY(0); } .table-interactive tbody tr:focus { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; } .table-header-cell--sortable { cursor: pointer; user-select: none; transition: background-color 0.15s ease; } .table-header-cell--sortable:hover { background-color: hsl(var(--muted-subtle)); } .table-header-cell--sortable:focus { /* Inset box-shadow instead of outline so the focus ring follows border-radius */ outline: none; box-shadow: inset 0 0 0 2px hsl(var(--primary)); border-radius: 4px; } .table-header-cell--sorted { font-weight: 700; color: hsl(var(--primary)); } .table-header-text { display: inline; } .table-sort-indicator { display: inline-block; margin-left: 4px; font-size: 0.75em; opacity: 0.8; } .table-header-selector-wrapper { display: flex; align-items: center; gap: 0.25rem; } .table-header-select { border: none; background: transparent; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: hsl(var(--foreground-secondary)); appearance: none; -webkit-appearance: none; cursor: pointer; padding: 0.15rem 1.25rem 0.15rem 0.25rem; min-width: 0; flex: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; background-size: 10px 6px; transition: color 0.15s ease; } .table-header-select:hover { color: hsl(var(--foreground)); } .table-header-select:focus { outline: none; box-shadow: inset 0 0 0 2px hsl(var(--primary)); border-radius: 4px; } .table-header-select--disabled { opacity: 0.5; cursor: not-allowed; } .translation-cell { border: 1px dashed hsl(var(--border)); border-radius: 4px; cursor: text; padding: 0.5rem; min-height: 1.5rem; transition: border-color 0.15s ease, border-style 0.15s ease, box-shadow 0.15s ease; overflow-wrap: break-word; } .translation-cell:hover { border-style: solid; border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)/0.15); } .translation-cell--empty { background-color: hsl(var(--warning-muted)); border-color: hsl(var(--warning)/0.4); color: hsl(var(--warning-foreground)); font-style: italic; font-size: 0.85rem; } .translation-cell--editing { padding: 0; border-style: solid; border-color: hsl(var(--primary)); } .translation-cell--editing input { width: 100%; padding: 0.5rem; border: none; border-radius: 3px; font-size: inherit; font-family: inherit; background: hsl(var(--background)); outline: none; } .translation-cell--saving { opacity: 0.5; } /* Ghost row: inline key creation */ .ghost-row { background: hsl(var(--muted-subtle)); } .ghost-row td { border-bottom: none; } .ghost-key-input, .ghost-input { width: 100%; padding: 0.5rem; border: 1px dashed hsl(var(--border)); border-radius: 4px; font-size: 0.875rem; font-family: inherit; background: hsl(var(--background)); color: hsl(var(--foreground)); transition: border-color 0.15s ease, border-style 0.15s ease; } .ghost-key-input::placeholder, .ghost-input::placeholder { color: hsl(var(--foreground-secondary)); font-style: italic; } .ghost-key-input:focus, .ghost-input:focus { outline: none; border-style: solid; border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)/0.15); } /** * Design System - DataTable Styles * * Pagination controls, loading/empty/error states, and skeleton animations. */ .data-table-wrapper { position: relative; } .data-table-content { min-height: 200px; } /* Filter input (opt-in) */ .data-table-filter { margin-bottom: 0.75rem; } .data-table-filter-input { width: 100%; max-width: 320px; padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 4px; font-size: 0.875rem; box-sizing: border-box; } .data-table-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: hsl(var(--loading-overlay)); display: flex; align-items: center; justify-content: center; z-index: 10; } .data-table-spinner { width: 40px; height: 40px; border: 3px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: data-table-spin 0.8s linear infinite; } @keyframes data-table-spin { to { transform: rotate(360deg); } } .data-table-empty { display: flex; align-items: center; justify-content: center; min-height: 300px; background: hsl(var(--background)); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .data-table-empty-content { text-align: center; padding: 2rem; } .data-table-empty-title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; color: hsl(var(--foreground)); } .data-table-empty-description { margin: 0; color: hsl(var(--foreground-secondary)); } .data-table-error { display: flex; align-items: center; justify-content: center; min-height: 300px; background: hsl(var(--destructive-muted)); border-radius: var(--radius-card); border: 1px solid hsl(var(--destructive)); } .data-table-error-content { text-align: center; padding: 2rem; } .data-table-error-icon { display: block; font-size: 2rem; margin-bottom: 1rem; } .data-table-error-title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; color: hsl(var(--destructive-text)); } .data-table-error-message { margin: 0 0 1rem; color: hsl(var(--destructive-text)); } .data-table-retry { margin-top: 0.5rem; } .data-table-skeleton { height: 1rem; background: linear-gradient(90deg, hsl(var(--muted-subtle)) 25%, hsl(var(--border)) 50%, hsl(var(--muted-subtle)) 75%); background-size: 200% 100%; border-radius: 4px; animation: data-table-skeleton-pulse 1.5s ease-in-out infinite; } .data-table-skeleton--short { width: 60%; } @keyframes data-table-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .data-table-skeleton-row td { padding: 1rem; } .data-table-actions { text-align: right; white-space: nowrap; } .data-table-actions button { margin-left: 0.5rem; } .data-table-actions button:first-child { margin-left: 0; } .table-pagination { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: hsl(var(--muted)); border-top: 1px solid hsl(var(--border)); flex-wrap: wrap; gap: 1rem; } .table-pagination--hidden { display: none; } .table-pagination-info { color: hsl(var(--foreground-secondary)); font-size: 0.875rem; } .table-pagination-controls { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .table-pagination-rows-per-page { display: flex; align-items: center; gap: 0.5rem; /* Keep the label and dropdown on one line */ flex-wrap: nowrap; white-space: nowrap; } .table-pagination-rows-per-page label { color: hsl(var(--foreground-secondary)); font-size: 0.875rem; white-space: nowrap; flex-shrink: 0; } .table-pagination-select { padding: 0.375rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 4px; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.875rem; cursor: pointer; } .table-pagination-select:focus { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; } .table-pagination-select:disabled { opacity: 0.6; cursor: not-allowed; } .table-pagination-pages { display: flex; align-items: center; gap: 0.5rem; } .table-pagination-numbers { display: flex; align-items: center; gap: 0.25rem; } .table-pagination-prev, .table-pagination-next { padding: 0.5rem 0.75rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 4px; color: hsl(var(--foreground)); font-size: 0.875rem; cursor: pointer; transition: all 0.15s ease; } .table-pagination-prev:hover:not(:disabled), .table-pagination-next:hover:not(:disabled) { background: hsl(var(--muted-subtle)); border-color: hsl(var(--border-emphasis)); } .table-pagination-prev:focus, .table-pagination-next:focus { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; } .table-pagination-prev:disabled, .table-pagination-next:disabled { opacity: 0.5; cursor: not-allowed; } .table-pagination-page { min-width: 2rem; padding: 0.5rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 4px; color: hsl(var(--foreground)); font-size: 0.875rem; text-align: center; cursor: pointer; transition: all 0.15s ease; } .table-pagination-page:hover:not(:disabled):not(.table-pagination-page--current) { background: hsl(var(--muted-subtle)); border-color: hsl(var(--border-emphasis)); } .table-pagination-page:focus { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; } .table-pagination-page:disabled { opacity: 0.5; cursor: not-allowed; } .table-pagination-page--current { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--background)); font-weight: 600; cursor: default; } .table-pagination-ellipsis { padding: 0.5rem 0.25rem; color: hsl(var(--muted-foreground)); } @media (max-width: 640px) { .table-pagination { flex-direction: column; align-items: stretch; } .table-pagination-info { text-align: center; } .table-pagination-controls { justify-content: center; } .table-pagination-rows-per-page { justify-content: center; } .table-pagination-pages { justify-content: center; } } /** * Design System - Header Component * * Two-row header: .header-main (white, 64px) over .header-nav (gray, 48px). * Height variables live in _tokens.scss. */ .header { box-shadow: 0 2px 8px hsl(var(--foreground-strong)/0.08); } .header-main { background-color: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); } .header-nav { background-color: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); } .header-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; } .header-main .header-container { height: var(--header-main-height); } .header-nav .header-container { height: var(--header-nav-height); justify-content: flex-start; } .header-brand { display: flex; align-items: center; gap: 1rem; } .header-logo { flex-shrink: 0; color: hsl(var(--primary)); } .header-logo svg { height: 28px; width: auto; display: block; } .header-brand-text { display: flex; flex-direction: column; line-height: 1.2; border-left: 1px solid hsl(var(--border)); padding-left: 1rem; } .header-brand-line1 { font-size: 0.85rem; font-weight: 600; color: hsl(var(--primary)); white-space: nowrap; } .header-brand-line2 { font-size: 0.85rem; font-weight: 600; color: hsl(var(--primary)); white-space: nowrap; } .nav { display: flex; gap: 0; height: 100%; } .nav a { color: hsl(var(--foreground)); text-decoration: none; padding: 0 1.25rem; font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; height: 48px; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s, background-color 0.2s; min-width: 100px; justify-content: center; } .nav a:hover, .nav a:focus { color: hsl(var(--primary)); background-color: hsl(var(--primary)/0.05); } .nav a.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--accent)); font-weight: 500; } .header-right { display: flex; align-items: center; gap: 1.5rem; } .notification-center-wrapper { position: relative; display: flex; align-items: center; } .user-info { display: flex; align-items: center; gap: 1rem; color: hsl(var(--foreground)); font-size: 0.9rem; line-height: 1; /* Consistent baseline alignment with logout button */ } .user-info .user-email { line-height: 1; display: flex; align-items: center; } .user-info .user-name { font-weight: 500; color: hsl(var(--foreground)); line-height: 1; } .tenant-selector-wrapper { display: flex; align-items: center; } .tenant-selector { display: flex; align-items: center; gap: 0.5rem; } .tenant-selector-label { font-size: 0.85rem; color: hsl(var(--foreground-secondary)); font-weight: 500; } .tenant-selector-dropdown { padding: 0.5rem 0.75rem; font-size: 0.9rem; border: 1px solid hsl(var(--border)); border-radius: 8px; background-color: hsl(var(--background)); color: hsl(var(--foreground)); cursor: pointer; transition: all 0.2s; min-width: 180px; } .tenant-selector-dropdown:hover { border-color: hsl(var(--primary)); background-color: hsl(var(--muted)); } .tenant-selector-dropdown:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary)/0.1); } .tenant-selector-empty, .tenant-selector-error { font-size: 0.85rem; color: hsl(var(--foreground-secondary)); padding: 0.5rem; } /* Signature corner pattern: 3 round, 1 square (top-right) */ .user-info .logout-link, .user-info .logout-btn { display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--primary)); text-decoration: none; padding: 0.5rem 1.25rem; background-color: transparent; border: 2px solid hsl(var(--primary)); border-radius: 100px 4px 100px 100px; font-size: 0.85rem; font-weight: 500; line-height: 1; /* Consistent alignment with adjacent user-info text */ cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s, border-radius 0.2s; } .user-info .logout-link:hover, .user-info .logout-link:focus, .user-info .logout-btn:hover, .user-info .logout-btn:focus { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: translateY(-1px); border-radius: 100px; } .user-info .logout-link:active, .user-info .logout-btn:active { transform: translateY(0); } .user-info .login-link { display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--primary)); text-decoration: none; padding: 0.5rem 1.25rem; background-color: transparent; border: 2px solid hsl(var(--primary)); border-radius: 100px 4px 100px 100px; font-size: 0.85rem; font-weight: 500; line-height: 1; /* Consistent alignment with adjacent user-info text */ cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s, border-radius 0.2s; } .user-info .login-link:hover, .user-info .login-link:focus { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: translateY(-1px); border-radius: 100px; } .user-info .login-link:active { transform: translateY(0); } /* Brighten the navy logo so it stays legible on the dark background */ .dark .header-logo svg { filter: brightness(2.2) saturate(0.9); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid hsl(var(--border)); border-radius: 8px; color: hsl(var(--foreground-secondary)); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .theme-toggle:hover { color: hsl(var(--primary)); background-color: hsl(var(--muted-subtle)); border-color: hsl(var(--primary)); } .theme-toggle:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /* Icon shows the target mode: moon in light mode, sun in dark mode */ .theme-toggle-icon--sun { display: none; } .theme-toggle-icon--moon { display: block; } .dark .theme-toggle-icon--sun { display: block; } .dark .theme-toggle-icon--moon { display: none; } /** * Design System - Panels * Slide panels and popovers/modals */ .popover-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } .popover-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; } .popover-card { background: hsl(var(--background)); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 90%; max-width: 450px; transform: scale(0.95) translateY(10px); transition: transform 0.2s ease; } .popover-overlay.visible .popover-card { transform: scale(1) translateY(0); } .popover-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted)); border-radius: 12px 12px 0 0; } .popover-header h3 { margin: 0; font-size: 1.1rem; color: hsl(var(--foreground-strong)); } .popover-close { background: none; border: none; font-size: 1.5rem; color: hsl(var(--muted-foreground)); cursor: pointer; line-height: 1; padding: 0.25rem; border-radius: 4px; transition: color 0.15s, background-color 0.15s; } .popover-close:hover { color: hsl(var(--foreground)); background-color: hsl(var(--border)); } .popover-close:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } .popover-card form { padding: 1.5rem; } .popover-actions, .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; } .popover-card h3, .modal-title { font-size: 1.1rem; font-weight: 600; color: hsl(var(--foreground-strong)); margin: 0; } .panel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .panel-overlay.visible { opacity: 1; visibility: visible; } .slide-panel { position: fixed; top: 0; right: 0; width: 60%; max-width: 600px; height: 100vh; height: 100dvh; /* Dynamic viewport height for mobile */ background: hsl(var(--background)); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15); z-index: 1000; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .slide-panel.open { transform: translateX(0); } @media (max-width: 768px) { .slide-panel { width: 85%; max-width: none; } } @media (max-width: 480px) { .slide-panel { width: 95%; } } .slide-panel .panel-header { position: sticky; top: 0; background: hsl(var(--primary)); color: hsl(var(--background)); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; z-index: 1; } .slide-panel .panel-header h2 { color: hsl(var(--background)); margin: 0; font-size: 1.25rem; } .slide-panel .panel-close { background: transparent; border: none; color: rgba(255, 255, 255, 0.8); cursor: pointer; font-size: 0.9rem; padding: 0.5rem 0.75rem; border-radius: 4px; transition: background-color 0.15s, color 0.15s; } .slide-panel .panel-close:hover { background: rgba(255, 255, 255, 0.1); color: hsl(var(--background)); } .slide-panel .panel-close:focus-visible { outline: 2px solid hsl(var(--background)); outline-offset: 2px; } .slide-panel .panel-content { padding: 1.5rem; } .member-info-section { margin-bottom: 2rem; } .member-info { display: grid; grid-template-columns: 100px 1fr; gap: 0.5rem 1rem; margin-bottom: 1rem; } .member-info dt { font-weight: 600; color: hsl(var(--foreground-secondary)); font-size: 0.85rem; } .member-info dd { color: hsl(var(--foreground)); } .flow-history-section h3 { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); } .flow-card { background: hsl(var(--muted)); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; border: 1px solid hsl(var(--border)); } .flow-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .flow-type { font-weight: 600; color: hsl(var(--primary)); } .flow-card-meta { font-size: 0.85rem; color: hsl(var(--foreground-secondary)); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .flow-events, .flow-answers { margin-top: 0.75rem; font-size: 0.85rem; } .flow-events summary, .flow-answers summary { cursor: pointer; color: hsl(var(--primary)); font-weight: 500; } .flow-events ul { margin: 0.5rem 0 0 1rem; padding: 0; list-style: none; } .flow-events li { display: flex; gap: 0.75rem; padding: 0.25rem 0; border-bottom: 1px solid hsl(var(--border)); } .flow-events li:last-child { border-bottom: none; } .event-time { color: hsl(var(--muted-foreground)); font-size: 0.8rem; } .event-type { color: hsl(var(--foreground)); } .flow-answers pre { background: hsl(var(--background)); padding: 0.75rem; border-radius: 4px; margin-top: 0.5rem; overflow-x: auto; font-size: 0.8rem; border: 1px solid hsl(var(--border)); } .empty-state { text-align: center; color: hsl(var(--muted-foreground)); padding: 2rem; font-style: italic; } /** * Design System - Toast Container & Messages * * Toast container positioning. Toast component styles are in _notifications.scss (BEM). * Inline message styles are here (not toasts, but related notification patterns). */ .toast-container { position: fixed; /* * Anchored below the header via header tokens: * --header-total-height reserves the header's vertical space, and * --toast-top-offset pushes toasts down while the notification panel is open. */ top: calc(var(--header-total-height, 112px) + 8px + var(--toast-top-offset, 0px)); /* Align with the header content's right edge: gutter on wide screens, 1.5rem on narrow */ right: max(1.5rem, (100vw - 1200px) / 2); z-index: 2000; display: flex; flex-direction: column; gap: 0.75rem; transition: top 0.2s ease-out; } /* Inline messages — not toasts, but share the notification palette */ .message { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; } .message-success { background-color: hsl(var(--success-muted)); color: hsl(var(--success-text)); border: 1px solid hsl(var(--success)/0.3); } .message-error { background-color: hsl(var(--destructive-muted)); color: hsl(var(--destructive-text)); border: 1px solid hsl(var(--destructive)/0.3); } .message-info { background-color: hsl(var(--info-muted)); color: hsl(var(--info-text)); border: 1px solid hsl(var(--info)/0.3); } /** * Design System - Notifications * * Inline field errors, notification bell + badge, panel, items, and toasts. */ .field-error { color: hsl(var(--destructive-text)); font-size: 0.85rem; margin-top: 0.25rem; padding: 0.25rem 0; } .form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea, .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: hsl(var(--destructive)); } .form-field.has-error input:focus, .form-field.has-error select:focus, .form-field.has-error textarea:focus, .form-group.has-error input:focus, .form-group.has-error select:focus, .form-group.has-error textarea:focus { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive)/0.2); } .form-field.is-valid input, .form-field.is-valid select, .form-field.is-valid textarea, .form-group.is-valid input, .form-group.is-valid select, .form-group.is-valid textarea { border-color: hsl(var(--success)); } .form-field.is-valid input:focus, .form-field.is-valid select:focus, .form-field.is-valid textarea:focus, .form-group.is-valid input:focus, .form-group.is-valid select:focus, .form-group.is-valid textarea:focus { border-color: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success)/0.2); } .notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; border-radius: 50%; cursor: pointer; transition: background-color 0.2s; } .notification-bell:hover { background-color: hsl(var(--muted-subtle)); } /* Bell keeps its hover background while the panel is open */ .notification-bell--active, .notification-bell--active:hover { background-color: hsl(var(--muted-subtle)); } .notification-bell--active .notification-bell__icon { color: hsl(var(--primary)); } .notification-bell:focus { outline: none; box-shadow: 0 0 0 3px hsl(var(--primary)/0.3); } .notification-bell__icon { font-size: 1.25rem; line-height: 1; color: hsl(var(--foreground-secondary)); } .notification-bell:hover .notification-bell__icon { color: hsl(var(--primary)); } .notification-bell__badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.7rem; font-weight: 600; line-height: 18px; text-align: center; color: hsl(var(--background)); background-color: hsl(var(--destructive)); border-radius: 9px; } .notification-panel { position: absolute; /* * The wrapper is vertically centered in the 64px header, so the panel must * drop ~12px below the wrapper to sit flush with the header's bottom edge. * The -290px right offset lines the panel's right edge up with the logout * button's, clearing the user-info section (email + gap + button ≈ 290px). */ top: calc(100% + 12px); right: -290px; width: 400px; max-width: calc(100vw - 32px); max-height: 500px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); z-index: 100; overflow: hidden; display: flex; flex-direction: column; } .notification-panel:focus { outline: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 3px hsl(var(--primary)/0.3); } .notification-panel:focus-within { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } /* Honour the hidden attribute despite display: flex */ .notification-panel[hidden] { display: none; } .notification-panel__header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted)); flex-shrink: 0; } .notification-panel__title { margin: 0; font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground-strong)); } .notification-panel__actions { display: flex; align-items: center; gap: 0.5rem; } .notification-panel__mark-all { padding: 0.375rem 0.75rem; font-size: 0.85rem; color: hsl(var(--primary)); background: transparent; border: 1px solid hsl(var(--primary)); border-radius: 4px; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .notification-panel__mark-all:hover:not(:disabled) { background-color: hsl(var(--primary)); color: hsl(var(--background)); } .notification-panel__mark-all:disabled { opacity: 0.5; cursor: not-allowed; } .notification-panel__clear-all { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: none; border-radius: 4px; cursor: pointer; color: hsl(var(--muted-foreground)); transition: color 0.2s, background-color 0.2s; } .notification-panel__clear-all:hover:not(:disabled) { color: hsl(var(--foreground-secondary)); background-color: hsl(var(--muted-subtle)); } .notification-panel__clear-all:disabled { opacity: 0.3; cursor: not-allowed; } .notification-panel__clear-all svg { width: 18px; height: 18px; } .notification-panel__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .notification-panel__empty { padding: 2rem; text-align: center; color: hsl(var(--foreground-secondary)); } .notification-panel__empty p { margin: 0; font-size: 0.9rem; } .notification-item { position: relative; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--muted-subtle)); cursor: pointer; transition: background-color 0.15s; } .notification-item:hover { background-color: hsl(var(--muted)); } .notification-item:focus { /* Inset box-shadow instead of outline so the focus ring follows border-radius */ outline: none; box-shadow: inset 0 0 0 2px hsl(var(--primary)); background-color: hsl(var(--muted-subtle)); } .notification-item--unread { background-color: hsl(var(--primary)/0.08); } .notification-item--unread .notification-item__title { font-weight: 700; } .notification-item--unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: hsl(var(--primary)); } .notification-item__header { display: flex; align-items: flex-start; gap: 0.75rem; } .notification-item__icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: bold; border-radius: 50%; } .notification-item__icon--success { color: hsl(var(--success)); background-color: hsl(var(--success-muted)); } .notification-item__icon--error { color: hsl(var(--destructive)); background-color: hsl(var(--destructive-muted)); } .notification-item__icon--warning { color: hsl(var(--warning)); background-color: hsl(var(--warning-muted)); } .notification-item__icon--info { color: hsl(var(--info)); background-color: hsl(var(--info-muted)); } .notification-item__content { flex: 1; min-width: 0; } .notification-item__title { font-weight: 600; font-size: 0.85rem; color: hsl(var(--foreground-strong)); margin-bottom: 0.25rem; } .notification-item__message { font-size: 0.8rem; color: hsl(var(--foreground-secondary)); overflow-wrap: break-word; } .notification-item__time { flex-shrink: 0; font-size: 0.7rem; color: hsl(var(--muted-foreground)); white-space: nowrap; } .notification-item__dismiss { flex-shrink: 0; width: 24px; height: 24px; margin-left: 0.5rem; padding: 0; font-size: 1rem; line-height: 1; color: hsl(var(--muted-foreground)); background: transparent; border: none; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .notification-item:hover .notification-item__dismiss, .notification-item:focus .notification-item__dismiss { opacity: 1; } .notification-item__dismiss:hover { color: hsl(var(--destructive)); } .notification-item__toggle { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; padding: 0; font-size: 0.8rem; color: hsl(var(--primary)); background: transparent; border: none; cursor: pointer; } .notification-item__toggle:hover { text-decoration: underline; } .notification-item__toggle-icon { font-size: 0.6rem; } .notification-item__details { margin-top: 0.75rem; padding: 0.75rem; font-size: 0.8rem; background-color: hsl(var(--muted)); border-radius: 4px; color: hsl(var(--foreground)); } .notification-item__details-list { margin: 0; padding: 0; } .notification-item__details-list dt { font-weight: 600; margin-top: 0.5rem; color: hsl(var(--foreground)); } .notification-item__details-list dt:first-child { margin-top: 0; } .notification-item__details-list dd { margin: 0.25rem 0 0 0; } .notification-item__details-list code { font-family: Consolas, Monaco, monospace; font-size: 0.85em; padding: 0.1rem 0.3rem; background-color: hsl(var(--border)); border-radius: 3px; } .notification-item__details-list ul { margin: 0.25rem 0 0; padding-left: 1.25rem; } .notification-item__details-list li { margin-bottom: 0.25rem; } /* Toast component (BEM); container positioning lives in _toasts.scss */ .toast { position: relative; display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; max-width: 400px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; animation: toast-slide-in 0.3s ease-out; } .toast__icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: bold; border-radius: 50%; } .toast__icon--success { color: hsl(var(--success)); background-color: hsl(var(--success-muted)); } .toast__icon--error { color: hsl(var(--destructive)); background-color: hsl(var(--destructive-muted)); } .toast__icon--warning { color: hsl(var(--warning)); background-color: hsl(var(--warning-muted)); } .toast__icon--info { color: hsl(var(--info)); background-color: hsl(var(--info-muted)); } .toast__content { flex: 1; min-width: 0; } .toast__title { font-weight: 600; font-size: 0.9rem; color: hsl(var(--foreground-strong)); } .toast__message { font-size: 0.85rem; color: hsl(var(--foreground-secondary)); margin-top: 0.25rem; overflow-wrap: break-word; } .toast__close { flex-shrink: 0; width: 24px; height: 24px; padding: 0; font-size: 1.1rem; line-height: 1; color: hsl(var(--muted-foreground)); background: transparent; border: none; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; } .toast__close:hover { opacity: 1; } .toast--success { background: hsl(var(--background)); border-left: 4px solid hsl(var(--success)); } .toast--error { background: hsl(var(--background)); border-left: 4px solid hsl(var(--destructive)); } .toast--warning { background: hsl(var(--background)); border-left: 4px solid hsl(var(--warning)); } .toast--info { background: hsl(var(--background)); border-left: 4px solid hsl(var(--info)); } .toast--dismissing { animation: toast-slide-out 0.3s ease-in forwards; } @keyframes toast-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .system-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: hsl(var(--info-muted)); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .system-banner--warning { background: hsl(var(--warning-muted)); } .system-banner--critical { background: hsl(var(--destructive-muted)); } .system-banner__icon { font-size: 1.25rem; line-height: 1; } .system-banner__content { flex: 1; } .system-banner__content strong { display: block; color: hsl(var(--foreground-strong)); } .system-banner__content p { margin: 0.25rem 0 0; font-size: 0.9rem; color: hsl(var(--foreground)); } @media (max-width: 480px) { .notification-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; max-height: 70vh; border-radius: 16px 16px 0 0; } .toast-container { right: 0.75rem; left: 0.75rem; } .toast { max-width: none; } } /** * Language Selector Component Styles * * Follows the tenant-selector pattern for consistency. */ .language-selector { position: relative; display: inline-flex; align-items: center; } .language-selector-trigger { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.35rem 0.6rem; border: 1px solid hsl(var(--border, 210 14% 93%)); border-radius: 4px; background: transparent; color: hsl(var(--foreground, 210 14% 11%)); font-size: 0.8rem; font-family: system-ui, -apple-system, sans-serif; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background-color 0.15s; } .language-selector-trigger:hover { border-color: hsl(var(--muted-foreground, 212 10% 73%)); background: hsl(var(--muted, 210 17% 98%)); } .language-selector-trigger:focus-visible { outline: 2px solid hsl(var(--primary, 240 33% 37%)); outline-offset: 1px; } .language-selector--compact .language-selector-trigger { padding: 0.25rem 0.4rem; border-color: transparent; background: transparent; } .language-selector--compact .language-selector-trigger:hover { background: hsl(var(--muted, 210 17% 98%)); border-color: hsl(var(--border, 210 14% 93%)); } .language-selector-flag { font-size: 1.1em; line-height: 1; } .language-selector-name { font-size: 0.8rem; } .language-selector-arrow { font-size: 0.65rem; opacity: 0.6; } .language-selector-dropdown { position: absolute; top: 100%; right: 0; z-index: 1000; min-width: 160px; margin-top: 4px; padding: 4px 0; background: hsl(var(--background, 0 0% 100%)); border: 1px solid hsl(var(--border, 210 14% 93%)); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .language-selector-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; background: transparent; color: hsl(var(--foreground, 210 14% 11%)); font-size: 0.8rem; font-family: system-ui, -apple-system, sans-serif; cursor: pointer; text-align: left; transition: background-color 0.1s; } .language-selector-option:hover { background: hsl(var(--muted, 210 17% 98%)); } .language-selector-option:focus-visible { outline: none; background: hsl(var(--muted, 210 17% 98%)); box-shadow: inset 2px 0 0 hsl(var(--primary, 240 33% 37%)); } .language-selector-option--active { font-weight: 500; } .language-selector-option-flag { font-size: 1.1em; line-height: 1; flex-shrink: 0; } .language-selector-option-name { flex: 1; } .language-selector-check { color: hsl(var(--primary, 240 33% 37%)); font-size: 0.75rem; flex-shrink: 0; } .tenant-selector-wrapper { display: flex; align-items: center; margin-right: 1rem; } .tenant-selector { display: flex; align-items: center; gap: 0.5rem; font-family: system-ui, -apple-system, sans-serif; } .tenant-selector.loading { color: hsl(var(--muted-foreground, 212 10% 73%)); font-size: 0.8rem; } .tenant-selector.empty { color: hsl(var(--muted-foreground, 212 10% 73%)); font-size: 0.8rem; } .tenant-selector.error { font-size: 0.8rem; color: hsl(var(--foreground-secondary, 210 7% 56%)); } .tenant-selector-spinner { width: 14px; height: 14px; border: 2px solid hsl(var(--border, 210 14% 93%)); border-top-color: hsl(var(--primary, 240 33% 37%)); border-radius: 50%; animation: tenant-selector-spin 0.8s linear infinite; } @keyframes tenant-selector-spin { to { transform: rotate(360deg); } } .tenant-selector-loading-text { font-size: 0.8rem; color: hsl(var(--muted-foreground, 212 10% 73%)); } .tenant-selector-empty-text { font-size: 0.8rem; color: hsl(var(--muted-foreground, 212 10% 73%)); } .tenant-selector-error-text { font-size: 0.8rem; color: hsl(var(--foreground-secondary, 210 7% 56%)); } .tenant-selector-label { font-weight: 500; color: hsl(var(--foreground-secondary, 210 7% 56%)); font-size: 0.8rem; white-space: nowrap; } .tenant-selector-dropdown { padding: 0.35rem 0.6rem; padding-right: 1.5rem; border: 1px solid hsl(var(--border, 210 14% 93%)); border-radius: 4px; font-size: 0.8rem; background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 210 9% 31%)); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 10px; min-width: 160px; max-width: 220px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .tenant-selector-dropdown:hover { border-color: hsl(var(--muted-foreground, 212 10% 73%)); } .tenant-selector-dropdown:focus { outline: none; border-color: hsl(var(--primary, 240 33% 37%)); box-shadow: 0 0 0 2px rgba(64, 64, 127, 0.15); } .tenant-selector-retry { padding: 0.2rem 0.5rem; font-size: 0.75rem; background: hsl(var(--background, 0 0% 100%)); border: 1px solid hsl(var(--border, 210 14% 93%)); border-radius: 3px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; margin-left: 0.5rem; } .tenant-selector-retry:hover { background: hsl(var(--muted, 210 17% 98%)); border-color: hsl(var(--muted-foreground, 212 10% 73%)); } .tenant-selector-retry:focus-visible { outline: 2px solid hsl(var(--primary, 240 33% 37%)); outline-offset: 1px; } /* Dark mode overrides */ .dark .tenant-selector-dropdown { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .dark .tenant-selector-dropdown option { background-color: hsl(var(--background, 220 25% 10%)); color: hsl(var(--foreground, 215 15% 80%)); } /** * Design System - Layout * Main content, page headers, sections */ .main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; } .page-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .page-header h2 { color: hsl(var(--foreground-strong)); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .section-header h2 { margin: 0; font-size: 1.25rem; } .section-actions { display: flex; gap: 0.75rem; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: hsl(var(--foreground-secondary)); } /* .loading-spinner lives in _utilities.scss */ /** * Design System - Utilities * Helper classes for spacing, visibility, etc. */ .hidden { display: none !important; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .status-None, .status-Pending { background-color: hsl(var(--muted-subtle)); color: hsl(var(--foreground-secondary)); } .status-Sent { background-color: hsl(var(--status-sent-bg)); color: hsl(var(--status-sent-fg)); } .status-Opened { background-color: hsl(var(--status-opened-bg)); color: hsl(var(--status-opened-fg)); } .status-InProgress { background-color: hsl(var(--status-inprogress-bg)); color: hsl(var(--status-inprogress-fg)); } .status-Completed { background-color: hsl(var(--status-completed-bg)); color: hsl(var(--status-completed-fg)); } .status-Expired { background-color: hsl(var(--status-expired-bg)); color: hsl(var(--status-expired-fg)); } .loading-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 1rem; } .loading-spinner::before { content: ""; width: 44px; height: 44px; border: 3px solid transparent; border-top-color: hsl(var(--primary)); border-right-color: hsl(var(--primary)); border-radius: 50%; animation: spinner-rotate 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite; box-shadow: 0 0 0 1px hsl(var(--primary)/0.1), 0 4px 12px hsl(var(--primary)/0.15); } .loading-spinner-text { color: hsl(var(--foreground-secondary)); font-size: 0.9rem; font-weight: 500; } .btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-right-color: currentColor; border-radius: 50%; animation: spinner-rotate 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite; vertical-align: middle; } .spinner-sm { width: 20px; height: 20px; border: 2px solid transparent; border-top-color: hsl(var(--primary)); border-right-color: hsl(var(--primary)); border-radius: 50%; animation: spinner-rotate 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .spinner-lg { width: 56px; height: 56px; border: 4px solid transparent; border-top-color: hsl(var(--primary)); border-right-color: hsl(var(--primary)); border-radius: 50%; animation: spinner-rotate 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite; box-shadow: 0 0 0 1px hsl(var(--primary)/0.1), 0 6px 16px hsl(var(--primary)/0.2); } @keyframes spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-dots { display: inline-flex; gap: 6px; align-items: center; } .loading-dots::before, .loading-dots::after, .loading-dots span { content: ""; width: 8px; height: 8px; background-color: hsl(var(--primary)); border-radius: 50%; animation: dot-pulse 1.4s ease-in-out infinite; } .loading-dots::before { animation-delay: 0s; } .loading-dots span { animation-delay: 0.2s; } .loading-dots::after { animation-delay: 0.4s; } @keyframes dot-pulse { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* Back-compat alias for callers still referencing the `spin` keyframe name */ @keyframes spin { to { transform: rotate(360deg); } } .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: 1rem; text-align: center; } .error-state-icon { font-size: 2.5rem; color: hsl(var(--muted-foreground)); } .error-state-message { color: hsl(var(--destructive)); font-weight: 500; } .error-state-detail { color: hsl(var(--foreground-secondary)); font-size: 0.9rem; } .btn-retry { margin-top: 0.5rem; padding: 0.5rem 1rem; background: hsl(var(--primary)); color: hsl(var(--background)); border: none; border-radius: 100px 4px 100px 100px; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease; } .btn-retry:hover { background-color: hsl(var(--primary-hover)); border-radius: 100px; } /** * Design System - Responsive * Media queries for different screen sizes */ @media (min-width: 768px) { .page-header { flex-direction: row; justify-content: space-between; align-items: center; } .search-container { width: auto; } } @media (max-width: 1024px) { .slide-panel { width: 80%; } .stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .header-main .header-container { height: auto; padding: 0.75rem 1rem; flex-direction: column; gap: 0.75rem; } .header-nav .header-container { height: auto; padding: 0; } .header-brand { flex-direction: column; gap: 0.5rem; } .header-brand-text { border-left: none; padding-left: 0; text-align: center; } .nav { width: 100%; } .nav a { flex: 1; justify-content: center; padding: 0.75rem 0.5rem; } .section-header { flex-direction: column; gap: 1rem; align-items: flex-start; } .slide-panel { width: 100%; max-width: none; } .stats-row { grid-template-columns: 1fr; } .member-info { grid-template-columns: 1fr; } .popover-card { width: 95%; margin: 1rem; } .dashboard-grid { grid-template-columns: repeat(2, 1fr); } table { font-size: 0.9rem; } table th, table td { padding: 0.75rem 0.5rem; } } @media (max-width: 480px) { html { font-size: 14px; } .header-container { padding: 0.5rem 1rem; } .main { padding: 1rem; } .form-container { padding: 1.5rem; } .member-card { padding: 1rem; } .members-grid { grid-template-columns: 1fr; gap: 1rem; } .dashboard-grid { grid-template-columns: 1fr; } .stat-value { font-size: 1.75rem; } .hide-on-mobile { display: none; } } /*# sourceMappingURL=styles.css.map */