| /* ========================================================================== |
| 1. VARIABLES & THEME CONFIGURATION |
| ========================================================================== */ |
| :root { |
| /* --- Colors: Backgrounds --- */ |
| --bg-body: #f8fafc; |
| /* --- Colors: Borders --- */ |
| --border-color: #e2e8f0; |
| /* --- Colors: Functional (Status) --- */ |
| --text-green-600: oklch(37.1% 0 0); |
| /* --- Colors: Palette (Extended) --- */ |
| --text-blue-600: #2563eb; |
| /* --- Colors: Text --- */ |
| --text-main: #0f172a; |
| /* --- Shadows --- */ |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| /* --- Typography --- */ |
| --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| --bg-active: #e5e7eb; |
| --bg-card: #ffffff; |
| --bg-green-light: #dcfce7; |
| --bg-header: #ffffff; |
| --bg-hover: #f3f4f6; |
| --bg-red-light: #fee2e2; |
| --bg-selected: #eff6ff; |
| --bg-subtle: #f9fafb; |
| --bg-tooltip: #1f2937; |
| --bg-yellow-light: #fef9c3; |
| --border-interactive: #d1d5db; |
| --border-light: #f1f5f9; |
| --font-family-mono: "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace; |
| --text-muted: #94a3b8; |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); |
| --text-blue-700: #1d4ed8; |
| --text-gray-500: #6b7280; |
| --text-gray-900: #111827; |
| --text-inverse: #ffffff; |
| --text-link-hover: #1d4ed8; |
| --text-link: #2563eb; |
| --text-orange-600: #ea580c; |
| --text-red-600: #dc2626; |
| --text-subtle: #64748b; |
| --text-yellow-600: #ca8a04; |
| } |
| |
| /* ========================================================================== |
| 2. RESET & BASE STYLES |
| ========================================================================== */ |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| scrollbar-color: var(--border-color) transparent; |
| scrollbar-width: thin; |
| } |
| |
| /* Custom Scrollbar */ |
| ::-webkit-scrollbar { |
| height: 8px; |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background-color: #cbd5e1; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background-color: #94a3b8; |
| } |
| |
| html, |
| body { |
| height: 100%; |
| overflow: hidden; |
| } |
| |
| body { |
| background-color: var(--bg-body); |
| color: var(--text-main); |
| display: flex; |
| flex-direction: column; |
| font-family: var(--font-family-base); |
| -webkit-font-smoothing: antialiased; |
| line-height: 1.5; |
| } |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| input { |
| font-family: inherit; |
| outline: none; |
| } |
| |
| button { |
| background: none; |
| border: none; |
| cursor: pointer; |
| font-family: inherit; |
| outline: none; |
| } |
| |
| /* ========================================================================== |
| 3. UTILITY CLASSES |
| ========================================================================== */ |
| .hidden { |
| display: none !important; |
| } |
| |
| .flex { |
| display: flex; |
| } |
| |
| .flex-col { |
| flex-direction: column; |
| } |
| |
| .flex-1 { |
| flex: 1 1 0%; |
| } |
| |
| .items-center { |
| align-items: center; |
| } |
| |
| .justify-between { |
| justify-content: space-between; |
| } |
| |
| .justify-center { |
| justify-content: center; |
| } |
| |
| .relative { |
| position: relative; |
| } |
| |
| .text-center { |
| text-align: center; |
| } |
| |
| .text-left { |
| text-align: left; |
| } |
| |
| .font-bold { |
| font-weight: 700; |
| } |
| |
| .font-medium { |
| font-weight: 500; |
| } |
| |
| .text-sm { |
| font-size: 0.875rem; |
| } |
| |
| .text-xs { |
| font-size: 0.75rem; |
| } |
| |
| .truncate { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .cursor-pointer { |
| cursor: pointer; |
| } |
| |
| /* Colors */ |
| .text-green-600 { |
| color: var(--text-green-600); |
| } |
| |
| .text-yellow-600 { |
| color: var(--text-yellow-600); |
| } |
| |
| .text-orange-600 { |
| color: var(--text-orange-600); |
| } |
| |
| .text-red-600 { |
| color: var(--text-red-600); |
| } |
| |
| .text-gray-500 { |
| color: var(--text-gray-500); |
| } |
| |
| /* Backgrounds & Interaction */ |
| .hover-bg-gray-100:hover { |
| background-color: var(--bg-hover) !important; |
| } |
| |
| .bg-gray-200 { |
| background-color: var(--bg-active) !important; |
| color: var(--text-gray-900) !important; |
| font-weight: 500; |
| } |
| |
| /* ========================================================================== |
| 4. LAYOUT & CONTAINER |
| ========================================================================== */ |
| header { |
| background-color: var(--bg-header); |
| border-bottom: 1px solid var(--border-color); |
| box-shadow: var(--shadow-sm); |
| flex-shrink: 0; |
| z-index: 50; |
| } |
| |
| .container-custom { |
| display: flex; |
| flex-direction: column; |
| flex: 1; |
| margin: 0 auto; |
| max-width: 1800px; |
| min-height: 0; |
| overflow: visible; |
| padding: 1.5rem; |
| width: 100%; |
| } |
| |
| main { |
| display: flex; |
| flex-direction: column; |
| flex: 1; |
| min-height: 0; |
| overflow: visible; |
| } |
| |
| /* ========================================================================== |
| 5. HEADER COMPONENTS |
| ========================================================================== */ |
| .header-top-row { |
| align-items: center; |
| border-bottom: 1px solid var(--border-light); |
| display: flex; |
| justify-content: space-between; |
| margin: 0 auto; |
| max-width: 1800px; |
| padding: 0.5rem 1.5rem; |
| } |
| |
| .header-branding { |
| /* border-right: 1px solid var(--border-color); */ |
| display: flex; |
| flex-direction: column; |
| padding-right: 1rem; |
| } |
| |
| .header-branding .header-title { |
| color: var(--text-main); |
| font-size: 1.25rem; |
| font-weight: 700; |
| letter-spacing: -0.025em; |
| } |
| |
| p#report-date { |
| font-size: 0.8125rem; |
| color: var(--text-subtle); |
| margin-top: 0.125rem; |
| } |
| |
| #ts-all-state { |
| align-items: center; |
| display: flex; |
| gap: 0.2rem; |
| justify-content: center; |
| } |
| |
| .header-stats { |
| display: flex; |
| gap: 2rem; |
| } |
| |
| .stat-item { |
| align-items: flex-start; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .stat-label { |
| color: var(--text-muted); |
| font-size: 0.7rem; |
| font-weight: 500; |
| text-transform: uppercase; |
| } |
| |
| .stat-value { |
| font-size: 0.95rem; |
| font-weight: 700; |
| } |
| |
| .header-toolbar { |
| background-color: #ffffff; |
| } |
| |
| .header-toolbar-inner { |
| align-items: center; |
| display: flex; |
| gap: 1rem; |
| height: 46px; |
| justify-content: space-between; |
| margin: 0 auto; |
| max-width: 1800px; |
| padding: 0 1.5rem; |
| width: 100%; |
| } |
| |
| /* ========================================================================== |
| 6. INTERACTIVE COMPONENTS (Buttons, Inputs, Chips) |
| ========================================================================== */ |
| /* Icon Buttons */ |
| .icon-btn { |
| background: transparent; |
| border-radius: 0.375rem; |
| border: 1px solid transparent; |
| color: var(--text-subtle); |
| cursor: pointer; |
| display: flex; |
| height: 32px; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.2s; |
| width: 32px; |
| color: var(--text-subtle); |
| } |
| |
| button#group-by-btn:hover, |
| .icon-btn:hover, |
| .icon-btn.active { |
| background-color: var(--bg-hover) !important; |
| color: var(--text-main) !important; |
| } |
| |
| /* Filter Chips */ |
| .filter-chip { |
| /* blue-50 */ |
| color: #1e40af; |
| /* blue-800 */ |
| border: 1px solid #dbeafe; |
| /* blue-100 */ |
| border-radius: 9999px; |
| align-items: center; |
| background-color: #eff6ff; |
| cursor: pointer; |
| display: inline-flex; |
| font-size: 0.8125rem; |
| font-weight: 500; |
| gap: 0.375rem; |
| padding: 0.25rem 0.5rem; |
| transition: all 0.2s; |
| white-space: nowrap; |
| } |
| |
| .filter-chip:hover { |
| background-color: #dbeafe; |
| } |
| |
| .filter-chip.active { |
| box-shadow: 0 0 0 2px #2563eb; |
| } |
| |
| .chip-close { |
| border-radius: 9999px; |
| color: #2563eb; |
| display: inline-flex; |
| margin-left: 0.25rem; |
| margin-right: -0.25rem; |
| padding: 0.125rem; |
| transition: background-color 0.2s, color 0.2s; |
| } |
| |
| .chip-close:hover { |
| background-color: #bfdbfe; |
| color: #1e40af; |
| } |
| |
| .filter-icon { |
| align-items: center; |
| color: var(--text-gray-500); |
| display: flex; |
| justify-content: center; |
| } |
| |
| /* Add Filter Button */ |
| .add-filter-btn { |
| align-items: center; |
| background: transparent; |
| border-radius: 0.375rem; |
| border: 1px dashed var(--border-interactive); |
| color: var(--text-gray-500); |
| cursor: pointer; |
| display: flex; |
| font-size: 0.8125rem; |
| font-weight: 500; |
| gap: 0.25rem; |
| padding: 0.25rem 0.5rem; |
| transition: all 0.2s; |
| } |
| |
| .add-filter-btn:hover { |
| background-color: var(--bg-hover); |
| border-color: var(--text-gray-500); |
| color: var(--text-gray-900); |
| } |
| |
| /* Segmented Controls */ |
| .segmented-control { |
| background-color: var(--bg-hover); |
| border-radius: 0.375rem; |
| display: flex; |
| padding: 2px; |
| } |
| |
| .segment-btn { |
| align-items: center; |
| background-color: transparent; |
| border-radius: 0.25rem; |
| border: none; |
| color: var(--text-gray-500); |
| cursor: pointer; |
| display: flex; |
| font-size: 0.8125rem; |
| font-weight: 500; |
| height: 24px; |
| justify-content: center; |
| padding: 0 1rem; |
| transition: all 0.2s ease; |
| } |
| |
| .segment-btn:hover:not(.active) { |
| color: var(--text-gray-900); |
| } |
| |
| .segment-btn.active { |
| background-color: #ffffff; |
| box-shadow: var(--shadow-sm); |
| color: var(--text-link); |
| } |
| |
| /* Search Bar */ |
| .search-bar-container { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 32px; |
| height: 32px; |
| border-radius: 0.375rem; |
| border: 1px solid transparent; |
| background: transparent; |
| color: var(--text-subtle); |
| transition: all 0.2s; |
| cursor: pointer; |
| } |
| |
| .search-bar-container:hover { |
| background-color: var(--bg-hover); |
| color: var(--text-main); |
| } |
| |
| .search-bar-container.active { |
| border-color: var(--border-interactive); |
| background-color: #ffffff; |
| padding: 0.25rem 0.5rem; |
| width: auto; |
| height: auto; |
| } |
| |
| .search-bar-input { |
| border: none; |
| outline: none; |
| padding: 0; |
| font-size: 0.8125rem; |
| width: 0; |
| transition: width 0.2s, padding 0.2s; |
| background: transparent; |
| } |
| |
| .search-bar-container.active .search-bar-input { |
| width: 150px; |
| padding: 0.25rem 0.5rem; |
| } |
| |
| .search-bar-icon { |
| color: var(--text-gray-500); |
| width: 16px; |
| height: 16px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| /* Dropdowns */ |
| .dropdown-menu { |
| /* Changed from hidden to allow submenus */ |
| animation: fadeIn 0.1s ease-out; |
| background: var(--bg-card); |
| border-radius: 0.5rem; |
| border: 1px solid var(--border-color); |
| box-shadow: var(--shadow-lg); |
| left: 0; |
| margin-top: 0.5rem; |
| min-width: 180px; |
| overflow: visible; |
| position: absolute; |
| top: 100%; |
| z-index: 100; |
| } |
| |
| .dropdown-menu.right-0 { |
| left: auto; |
| right: 0; |
| } |
| |
| .dropdown-menu:not(.hidden) { |
| display: block; |
| } |
| |
| /* Ensure visibility toggling works */ |
| .dropdown-item { |
| color: var(--text-gray-900); |
| cursor: pointer; |
| display: block; |
| font-size: 0.875rem; |
| padding: 0.5rem 1rem; |
| transition: background-color 0.15s; |
| } |
| |
| .dropdown-item:hover { |
| background-color: var(--bg-hover); |
| } |
| |
| /* Popover Content */ |
| .popover-search-container { |
| background: var(--bg-card); |
| border-bottom: 1px solid var(--border-color); |
| padding: 0.5rem; |
| position: sticky; |
| top: 0; |
| z-index: 2; |
| } |
| |
| .popover-search { |
| border-radius: 0.375rem; |
| border: 1px solid var(--border-interactive); |
| font-size: 0.8125rem; |
| padding: 0.375rem 0.5rem; |
| width: 100%; |
| } |
| |
| .popover-search:focus { |
| border-color: var(--text-link); |
| } |
| |
| .popover-list { |
| max-height: 250px; |
| overflow-y: auto; |
| padding: 0.25rem 0; |
| } |
| |
| .popover-item { |
| align-items: center; |
| color: var(--text-gray-900); |
| cursor: pointer; |
| display: flex; |
| font-size: 0.875rem; |
| gap: 0.5rem; |
| padding: 0.375rem 1rem; |
| transition: background-color 0.15s; |
| } |
| |
| .popover-item:hover { |
| background-color: var(--bg-hover); |
| } |
| |
| .active-item { |
| background-color: var(--bg-selected); |
| color: var(--text-link); |
| font-weight: 600; |
| } |
| |
| .popover-checkbox { |
| accent-color: var(--text-link); |
| height: 1rem; |
| margin-top: 1px; |
| width: 1rem; |
| } |
| |
| /* Action-Based Dropdown Styles */ |
| .dropdown-action-zone { |
| align-items: center; |
| background-color: var(--bg-subtle); |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| justify-content: space-between; |
| padding: 0.5rem 1rem; |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| } |
| |
| .dropdown-action-btn { |
| background: none; |
| border: none; |
| color: var(--text-link); |
| cursor: pointer; |
| font-size: 0.8125rem; |
| font-weight: 600; |
| padding: 0; |
| } |
| |
| .dropdown-action-btn:hover { |
| color: var(--text-link-hover); |
| text-decoration: underline; |
| } |
| |
| .dropdown-scroll-zone { |
| max-height: 250px; |
| overflow-y: auto; |
| padding: 0.25rem 0; |
| } |
| |
| /* ========================================================================== |
| 7. BREADCRUMBS |
| ========================================================================== */ |
| .breadcrumb-row { |
| align-items: center; |
| display: flex; |
| height: 28px; |
| justify-content: space-between; |
| margin-bottom: 1rem; |
| } |
| |
| .breadcrumb-pill { |
| border-radius: 0.375rem; |
| color: #4b5563; |
| cursor: pointer; |
| font-size: 0.875rem; |
| font-weight: 500; |
| padding: 0.25rem 0.5rem; |
| transition: all 0.2s; |
| } |
| |
| .breadcrumb-pill:hover { |
| background-color: var(--bg-selected); |
| border-color: var(--text-link); |
| color: var(--text-link-hover); |
| } |
| |
| .breadcrumb-text { |
| color: var(--text-gray-900); |
| font-size: 0.875rem; |
| font-weight: 600; |
| padding: 0.25rem 0.5rem; |
| } |
| |
| div#flat-breadcrumbs .mx-1 { |
| opacity: .2; |
| } |
| |
| /* ========================================================================== |
| 8. TABLES & DATA GRID |
| ========================================================================== */ |
| .table-container { |
| background: var(--bg-card); |
| border-radius: 0.5rem; |
| border: 1px solid var(--border-color); |
| box-shadow: var(--shadow-sm); |
| flex: 1; |
| overflow-x: auto; |
| } |
| |
| table { |
| border-collapse: collapse; |
| min-width: 800px; |
| text-align: left; |
| width: 100%; |
| } |
| |
| thead { |
| background: #f8fafc; |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| } |
| |
| th { |
| border-bottom: 1px solid var(--border-color); |
| color: var(--text-subtle); |
| font-size: 0.75rem; |
| font-weight: 600; |
| letter-spacing: 0.05em; |
| padding: 0.75rem 1rem; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
| |
| td { |
| border-bottom: 1px solid var(--border-color); |
| color: var(--text-main); |
| font-size: 0.875rem; |
| padding: 0.75rem 1rem; |
| transition: padding 0.2s ease; |
| white-space: nowrap; |
| } |
| |
| tr { |
| background: var(--bg-card); |
| transition: background 0.2s; |
| } |
| |
| tbody tr:hover { |
| background-color: var(--bg-selected) !important; |
| } |
| |
| /* Sticky Columns (Name) */ |
| .sticky-name { |
| background: inherit; |
| border-right: 1px solid var(--border-color); |
| box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.05); |
| left: 0; |
| max-width: 400px; |
| position: sticky; |
| white-space: normal; |
| width: 400px; |
| word-break: break-all; |
| z-index: 10; |
| } |
| |
| thead th.sticky-name { |
| z-index: 30; |
| } |
| |
| th.truncate, |
| td.truncate { |
| border-right: 1px solid var(--border-color); |
| max-width: 150px !important; |
| } |
| |
| td.truncate span { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(-4px); |
| } |
| |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes blink-animation { |
| 0% { |
| background-color: rgba(253, 224, 71, 0.5); |
| } |
| |
| 50% { |
| background-color: rgba(253, 224, 71, 0.1); |
| } |
| |
| 100% { |
| background-color: transparent; |
| } |
| } |
| |
| /* CSS Tooltip */ |
| [data-tooltip] { |
| position: relative; |
| } |
| |
| [data-tooltip]:hover::after { |
| animation: 0.15s ease-out; |
| background-color: var(--bg-tooltip); |
| border-radius: 0.25rem; |
| top: 150%; |
| box-shadow: var(--shadow-md); |
| color: var(--text-inverse); |
| content: attr(data-tooltip); |
| font-size: 0.75rem; |
| left: 50%; |
| padding: 0.25rem 0.5rem; |
| pointer-events: none; |
| position: absolute; |
| transform: translateX(-50%); |
| white-space: normal; |
| z-index: 1000; |
| width: 260px; |
| text-transform: none; |
| font-size: 12px; |
| font-weight: 300; |
| } |
| |
| /* Impact Tags */ |
| .impact-container { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
| |
| .impact-tag { |
| background-color: var(--bg-hover); |
| border-radius: 0.25rem; |
| border: 1px solid var(--border-color); |
| color: var(--text-gray-900); |
| font-size: 0.7rem; |
| font-weight: 600; |
| letter-spacing: 0.025em; |
| padding: 0.125rem 0.375rem; |
| text-transform: uppercase; |
| } |
| |
| #report-view .breadcrumb-row { |
| margin-bottom: 1rem !important; |
| } |
| |
| /* Floating Action Button */ |
| .fab { |
| position: fixed; |
| bottom: 1.5rem; |
| right: 1.5rem; |
| padding: 0.5rem 1rem; |
| border-radius: 2rem; |
| background-color: #1a202c; |
| color: #ffffff; |
| display: none; |
| align-items: center; |
| gap: 0.5rem; |
| box-shadow: var(--shadow-lg); |
| cursor: pointer; |
| transition: transform 0.2s, background-color 0.2s; |
| z-index: 1000; |
| border: none; |
| font-size: 0.875rem; |
| font-weight: 600; |
| } |
| |
| .fab:hover { |
| background-color: #2d3748; |
| transform: scale(1.05); |
| } |
| |
| /* Side Panel */ |
| .side-panel { |
| position: fixed; |
| top: 0; |
| right: 0; |
| width: 400px; |
| height: 100%; |
| background-color: #ffffff; |
| box-shadow: var(--shadow-lg); |
| z-index: 1001; |
| display: flex; |
| flex-direction: column; |
| transition: transform 0.3s ease-in-out; |
| transform: translateX(100%); |
| border-left: 1px solid var(--border-color); |
| } |
| |
| .side-panel.open { |
| transform: translateX(0); |
| } |
| |
| .side-panel-header { |
| padding: 1rem 1.5rem; |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .side-panel-header .header-left { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .side-panel-header h2 { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: #000000; |
| } |
| |
| .side-panel-content { |
| padding: 1.5rem; |
| overflow-y: auto; |
| flex: 1; |
| } |
| |
| .help-section { |
| margin-bottom: 1.5rem; |
| } |
| |
| .help-section-title { |
| font-size: 0.75rem; |
| font-weight: 700; |
| color: #718096; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| margin-bottom: 0.75rem; |
| } |
| |
| .help-section p { |
| font-size: 0.875rem; |
| color: #2d3748; |
| line-height: 1.6; |
| } |
| |
| /* Legend Cards (Accordion) */ |
| .legend-list { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| |
| .legend-item { |
| background-color: #ffffff; |
| border: 1px solid #e2e8f0; |
| border-radius: 0.5rem; |
| cursor: pointer; |
| transition: background-color 0.2s, border-color 0.2s; |
| overflow: hidden; |
| } |
| |
| .legend-item:hover { |
| background-color: #f8fafc; |
| border-color: #cbd5e1; |
| } |
| |
| .legend-item-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.75rem 1rem; |
| } |
| |
| .legend-item-title { |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: #1a202c; |
| } |
| |
| .legend-item-arrow { |
| color: #a0aec0; |
| transition: transform 0.2s; |
| } |
| |
| .legend-item.open .legend-item-arrow { |
| transform: rotate(90deg); |
| } |
| |
| .legend-item-content { |
| padding: 0 1rem 0.75rem 1rem; |
| font-size: 0.875rem; |
| color: #4a5568; |
| line-height: 1.5; |
| display: none; |
| } |
| |
| .legend-item.open .legend-item-content { |
| display: block; |
| } |
| |
| /* Documentation Links (Cards) */ |
| .doc-list { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
| |
| .doc-card { |
| display: flex; |
| justify-content: space-between; |
| align-items: self-start; |
| padding: 0.75rem 1rem; |
| background-color: #ffffff; |
| border: 1px solid #e2e8f0; |
| border-radius: 0.5rem; |
| text-decoration: none; |
| transition: background-color 0.2s, border-color 0.2s; |
| } |
| |
| .doc-card:hover { |
| background-color: #f8fafc; |
| border-color: #cbd5e1; |
| } |
| |
| .doc-card-info { |
| display: flex; |
| flex-direction: column; |
| gap: 0.25rem; |
| } |
| |
| .doc-card-title { |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: #2563eb; |
| } |
| |
| .doc-card-domain { |
| font-size: 0.75rem; |
| color: #718096; |
| } |
| |
| .doc-card-desc { |
| font-size: 0.75rem; |
| color: #4a5568; |
| } |
| |
| .doc-card-icon { |
| color: #a0aec0; |
| } |
| |
| |
| |
| /* Tooltip Icon */ |
| .tooltip-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 1rem; |
| height: 1rem; |
| color: #a0aec0; |
| cursor: pointer; |
| margin-left: 0.25rem; |
| vertical-align: middle; |
| border: 1px solid #a0aec0; |
| border-radius: 50%; |
| font-size: 0.75rem; |
| } |
| |
| .tooltip-icon:hover { |
| color: #718096; |
| } |
| |
| .divider { |
| border-top: 1px solid #e2e8f0; |
| margin: 1.5rem 0; |
| } |
