/** * Component-level compact styling for documents, metadata, settings, and logs. */ .app-shell { width: min(1820px, 100% - 2rem); margin: 0 auto; padding: var(--space-3) 0 var(--space-4); display: grid; gap: var(--space-3); } .app-shell > * { animation: rise-in 220ms ease both; } .app-shell > *:nth-child(2) { animation-delay: 40ms; } .app-shell > *:nth-child(3) { animation-delay: 70ms; } .topbar { position: sticky; top: var(--space-2); z-index: 50; display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(28, 42, 63, 0.96) 0%, rgba(20, 30, 47, 0.96) 100%); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); } .topbar h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 1.8vw, 2rem); letter-spacing: 0.02em; } .topbar p { margin: 0.3rem 0 0; color: var(--color-text-muted); font-size: 0.85rem; } .topbar-controls { display: grid; gap: var(--space-2); justify-items: end; } .topbar-nav-group, .topbar-document-group, .topbar-settings-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } .topbar-document-group .upload-actions-inline { display: flex; gap: var(--space-2); } .topbar-document-group .upload-actions-inline button { min-height: 2rem; } input:not([type='checkbox']):not([type='radio']), select, textarea { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: #111a2a; color: var(--color-text); padding: 0.45rem 0.6rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } input:not([type='checkbox']):not([type='radio'])::placeholder, textarea::placeholder { color: #72819e; } input:not([type='checkbox']):not([type='radio']):hover, select:hover, textarea:hover { border-color: var(--color-border-strong); } input:not([type='checkbox']):not([type='radio']):focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(63, 141, 255, 0.2); } input[type='checkbox'], input[type='radio'] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-accent); cursor: pointer; } input[type='checkbox']:focus-visible, input[type='radio']:focus-visible { outline: 2px solid rgba(63, 141, 255, 0.6); outline-offset: 2px; } select { appearance: none; padding-right: 1.9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 0.9rem; background-position: right 0.55rem center; } textarea { min-height: 7rem; resize: vertical; } button { border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); min-height: 1.95rem; padding: 0 0.68rem; background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-strong) 100%); color: #eef4ff; font-family: var(--font-display); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast); } button:hover { border-color: #88b4ff; transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(26, 65, 122, 0.3); } button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: none; filter: none; } .secondary-action { background: linear-gradient(180deg, #36465f 0%, #2a3750 100%); } .active-view-button { background: linear-gradient(180deg, #4d9dff 0%, #2f72d2 100%); border-color: #75adff; } .warning-action { background: linear-gradient(180deg, #cf9a3f 0%, #b3791f 100%); } .danger-action { background: linear-gradient(180deg, #c96d6d 0%, #aa4f4f 100%); } .small { font-size: 0.78rem; color: var(--color-text-muted); } .mono { font-family: var(--font-mono); } .upload-surface, .processing-log-panel, .settings-card, .document-viewer, .document-card, .panel-header, .settings-catalog-card, .provider-grid, .task-settings-block, .extracted-text-panel, .routing-suggestions-panel { background: linear-gradient(180deg, rgba(30, 43, 64, 0.9) 0%, rgba(20, 31, 47, 0.94) 100%); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .layout-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(400px, 1fr); align-items: start; gap: var(--space-3); } .panel-header { display: grid; gap: var(--space-2); padding: var(--space-3); } .panel-header h2 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.02em; } .document-panel-header { gap: var(--space-2); } .document-panel-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); } .document-panel-title-row p { margin: 0; color: var(--color-text-muted); font-size: 0.8rem; } .search-filters-bar { display: grid; gap: var(--space-2); } .search-filters-primary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); min-width: 0; } .search-filters-primary-row input { min-width: 0; min-height: 2rem; } .search-filters-primary-row button { min-height: 2rem; white-space: nowrap; } .search-filters-secondary-row { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) repeat(2, minmax(138px, auto)); gap: var(--space-2); } .search-filters-secondary-row select, .search-filters-secondary-row input { min-height: 1.9rem; } .search-filters-secondary-row input[type='date'] { min-width: 132px; } .document-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: 0.42rem 0.5rem; border: 1px solid rgba(70, 89, 122, 0.6); border-radius: var(--radius-xs); background: rgba(18, 27, 41, 0.75); } .document-toolbar-pagination, .document-toolbar-selection, .document-toolbar-export-path { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .document-pagination-strip { margin-top: var(--space-2); margin-bottom: var(--space-2); padding: 0.25rem 0.4rem; border: 1px solid rgba(70, 89, 122, 0.5); border-radius: var(--radius-xs); background: rgba(18, 27, 41, 0.6); } .document-toolbar-pagination .small { min-width: 5.7rem; text-align: center; } .document-toolbar-selection .small { margin: 0; } .document-toolbar-export-path { margin-left: auto; min-width: min(520px, 100%); } .document-toolbar-export-path .path-input { flex: 1; min-width: 220px; } .compact-pagination { gap: 0.35rem; } .compact-pagination button { min-height: 1.6rem; padding: 0 0.45rem; font-size: 0.64rem; } .compact-pagination .small { min-width: 5rem; font-size: 0.72rem; } .document-grid { margin-top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); align-items: stretch; } .document-card { display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; cursor: pointer; border-radius: var(--radius-xs); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .document-card:hover { transform: translateY(-1px); border-color: var(--color-border-strong); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .document-card.selected { border-color: var(--color-focus); animation: pulse-border 260ms ease; } .document-card-header { min-height: 2rem; padding: 0.45rem 0.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(70, 89, 122, 0.55); } .card-status-indicator { width: 0.55rem; height: 0.55rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.25); } .card-status-indicator.success { background: var(--color-success); } .card-status-indicator.progress { background: var(--color-warning); } .card-status-indicator.failed { background: var(--color-danger); } .card-checkbox { display: inline-flex; align-items: center; } .card-checkbox-compact { gap: 0; } .card-checkbox-compact input { width: 0.92rem; height: 0.92rem; margin: 0; } .document-preview { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid rgba(70, 89, 122, 0.55); background: linear-gradient(180deg, #f8f4ea 0%, #efe8d8 100%), repeating-linear-gradient(0deg, rgba(130, 117, 96, 0.06) 0, rgba(130, 117, 96, 0.06) 1px, transparent 1px, transparent 8px); } .document-preview img { width: 100%; height: 100%; object-fit: contain; background: #faf7ef; } .document-preview-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .document-content { display: grid; gap: 0.25rem; padding: 0.55rem 0.65rem; } .document-card-body { align-content: start; } .document-content h3 { margin: 0; font-size: 0.83rem; line-height: 1.3; overflow-wrap: anywhere; } .document-title-path { color: #7f90ad; font-family: var(--font-mono); font-size: 0.72rem; } .document-title-name { color: var(--color-text); font-weight: 600; } .document-date { margin: 0; color: var(--color-text-muted); font-size: 0.74rem; } .document-card-footer { display: grid; gap: var(--space-2); padding: 0.45rem 0.6rem 0.6rem; } .card-footer-discovery { display: grid; gap: 0.35rem; } .card-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .card-chip { border: 1px solid rgba(88, 114, 157, 0.65); background: rgba(50, 72, 104, 0.35); color: #d6e3fa; border-radius: var(--radius-xs); padding: 0.2rem 0.4rem; min-height: 1.35rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0; } .card-chip:hover { transform: none; filter: none; box-shadow: none; border-color: #7fa5e2; background: rgba(62, 100, 155, 0.35); } .path-chip { max-width: 100%; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } .card-icon-button { min-height: 1.95rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(88, 114, 157, 0.65); background: rgba(39, 54, 78, 0.78); color: #d5e2f9; } .card-icon-button svg { width: 0.95rem; height: 0.95rem; stroke-width: 2; } .card-icon-button:hover:not(:disabled) { border-color: #92b8f5; box-shadow: none; transform: translateY(-1px); } .card-icon-button.danger { color: #f0b0b0; border-color: rgba(192, 107, 107, 0.7); } .card-icon-button.danger:hover:not(:disabled) { background: rgba(109, 49, 49, 0.5); border-color: rgba(232, 139, 139, 0.9); } .document-viewer { padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; position: sticky; top: 4.8rem; } .document-viewer.empty { min-height: 340px; place-content: center; text-align: center; } .document-viewer h2 { margin: 0; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25; } .document-viewer > p { margin: 0; } .document-viewer label, .upload-settings label { display: grid; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: #c9d4e8; } .viewer-preview { overflow: hidden; border: 1px solid rgba(70, 89, 122, 0.7); border-radius: var(--radius-xs); background: #0f1726; min-height: 280px; } .viewer-preview iframe, .viewer-preview img { width: 100%; height: 360px; border: 0; display: block; } .viewer-preview img { object-fit: contain; } .viewer-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .viewer-inline-help { margin: 0; color: #8393af; font-size: 0.74rem; line-height: 1.35; } .tag-input, .path-input { position: relative; display: grid; gap: 0.35rem; } .path-input.disabled, .tag-input.disabled { opacity: 0.6; } .tag-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag-chip { border: 1px solid rgba(93, 124, 173, 0.7); border-radius: var(--radius-xs); background: rgba(48, 73, 110, 0.5); color: #dfebff; padding: 0.2rem 0.45rem; min-height: 1.45rem; font-size: 0.69rem; font-family: var(--font-mono); } .tag-chip:hover { transform: none; box-shadow: none; filter: none; border-color: #93baf6; background: rgba(61, 96, 146, 0.6); } .tag-suggestions, .path-suggestions { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 25; display: grid; gap: 1px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: #152238; overflow: hidden; box-shadow: var(--shadow-soft); } .path-suggestions { max-height: 240px; overflow-y: auto; } .tag-suggestion-item, .path-suggestion-item { border: 0; border-radius: 0; min-height: 1.8rem; padding: 0.32rem 0.55rem; text-align: left; background: transparent; color: #d5e1f8; font-family: var(--font-body); font-size: 0.8rem; } .tag-suggestion-item:hover, .path-suggestion-item:hover { transform: none; box-shadow: none; filter: none; background: rgba(84, 117, 170, 0.25); } .routing-suggestions-panel, .extracted-text-panel { display: grid; gap: var(--space-2); padding: var(--space-2); } .routing-suggestions-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .routing-suggestions-header h3, .extracted-text-panel h3 { margin: 0; font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.015em; } .routing-suggestion-group { display: grid; gap: 0.35rem; } .routing-suggestion-group p { margin: 0; } .routing-pill-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .routing-pill { min-height: 1.45rem; border: 1px solid rgba(90, 126, 178, 0.72); background: rgba(61, 96, 146, 0.45); color: #e2edff; border-radius: var(--radius-xs); padding: 0 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; } .routing-pill:hover { transform: none; box-shadow: none; filter: none; background: rgba(74, 116, 177, 0.6); } .extracted-text-panel pre { margin: 0; max-height: 220px; overflow: auto; border: 1px solid rgba(70, 89, 122, 0.75); border-radius: var(--radius-xs); background: #0f1a2b; color: #d6e6ff; padding: 0.6rem; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .processing-log-panel { display: grid; gap: var(--space-2); padding: var(--space-3); } .processing-log-panel .panel-header { padding: var(--space-2); background: rgba(18, 27, 41, 0.75); border: 1px solid rgba(70, 89, 122, 0.6); box-shadow: none; } .processing-log-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .processing-log-header-actions p { margin: 0; } .processing-log-terminal-wrap { max-height: 360px; overflow: auto; border: 1px solid #344560; border-radius: var(--radius-sm); background: #0a1019; } .processing-log-terminal { margin: 0; padding: var(--space-2); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.45; color: #b8d5ff; white-space: pre-wrap; word-break: break-word; } .terminal-empty { margin: 0; color: #7691b8; } .terminal-separator { margin: 0.25rem 0; color: #5e7596; } .terminal-row-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); } .terminal-unfold-button { min-height: 1.4rem; padding: 0 0.5rem; background: rgba(38, 52, 76, 0.9); border: 1px solid #4a617f; color: #c7dcfb; } .terminal-row-details { margin: 0.35rem 0 0.55rem; display: grid; gap: 0.2rem; color: #95b7e6; } .terminal-row-details pre { margin: 0; max-height: 190px; overflow: auto; border: 1px solid #33455f; border-radius: var(--radius-xs); background: #101b2c; color: #d9e8ff; padding: 0.45rem; } .terminal-idle-prompt { margin-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.2rem; color: #89abda; } .terminal-caret-blink { animation: terminal-blink 0.9s steps(1) infinite; } .upload-surface { display: grid; gap: var(--space-2); padding: var(--space-3); } .upload-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .upload-actions-inline { align-items: center; } .drop-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(20, 33, 52, 0.68); backdrop-filter: blur(3px); color: #d9e8ff; font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 2rem); letter-spacing: 0.03em; } .settings-layout { display: grid; gap: var(--space-3); } .settings-card { display: grid; gap: var(--space-3); padding: var(--space-3); } .settings-section { gap: var(--space-3); } .settings-section-header { display: grid; gap: 0.2rem; } .settings-section-header h3 { margin: 0; font-family: var(--font-display); font-size: 1.04rem; } .settings-section-header p { margin: 0; } .settings-field-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2); } .settings-field { grid-column: span 3; display: grid; gap: 0.35rem; align-content: start; font-size: 0.79rem; font-weight: 500; color: #cad7ed; } .settings-field-wide { grid-column: span 12; } .settings-field-spacer { grid-column: span 3; } .settings-checkbox-field { grid-column: span 6; } .settings-helper-text { grid-column: span 12; margin: 0; color: var(--color-text-muted); } .settings-field-hint { margin: 0; font-size: 0.72rem; font-weight: 400; color: #95a6c4; line-height: 1.35; } .settings-subsection-divider { grid-column: span 12; display: grid; gap: 0.2rem; padding-top: 0.2rem; border-top: 1px solid rgba(70, 89, 122, 0.55); } .settings-subsection-divider h4 { margin: 0; font-family: var(--font-display); font-size: 0.82rem; } .settings-subsection-divider p { margin: 0; } .inline-checkbox { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.45rem; min-height: 1.95rem; padding: 0.35rem 0.45rem; border: 1px solid rgba(70, 89, 122, 0.55); border-radius: var(--radius-xs); background: rgba(18, 27, 41, 0.62); font-size: 0.79rem; color: #cad7ed; cursor: pointer; } .inline-checkbox input { margin: 0; flex-shrink: 0; } .inline-checkbox input:disabled { cursor: not-allowed; } .settings-toggle { color: #dbe8ff; } .settings-checkbox-with-hint { align-items: start; } .settings-checkbox-copy { display: grid; gap: 0.15rem; } .settings-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .settings-catalog-card { padding: var(--space-2); display: grid; gap: var(--space-2); } .settings-catalog-card h4 { margin: 0; font-family: var(--font-display); font-size: 0.9rem; } .settings-catalog-add-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); } .settings-catalog-list { display: grid; gap: var(--space-2); max-height: 240px; overflow: auto; } .settings-catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); padding: 0.4rem 0.45rem; border: 1px solid rgba(70, 89, 122, 0.55); border-radius: var(--radius-xs); background: rgba(18, 27, 41, 0.75); } .settings-catalog-row span { font-family: var(--font-mono); font-size: 0.72rem; color: #d8e6ff; overflow-wrap: anywhere; } .provider-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); } .provider-grid { display: grid; gap: var(--space-2); padding: var(--space-2); } .provider-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .provider-header h4 { margin: 0; font-family: var(--font-display); font-size: 0.9rem; } .settings-section-actions { display: flex; justify-content: flex-start; gap: var(--space-2); } .task-settings-block { display: grid; gap: var(--space-2); padding: var(--space-2); } .task-block-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: 0.35rem; border-bottom: 1px solid rgba(70, 89, 122, 0.55); } .task-block-header h4 { margin: 0; font-family: var(--font-display); font-size: 0.9rem; } .task-settings-block textarea { min-height: 9rem; } .upload-settings { display: grid; gap: var(--space-2); padding: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .tags-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tags-row span { border-radius: var(--radius-xs); border: 1px solid rgba(93, 124, 173, 0.7); background: rgba(48, 73, 110, 0.5); color: #dfebff; padding: 0.15rem 0.38rem; font-family: var(--font-mono); font-size: 0.66rem; } .pagination-row { display: flex; justify-content: center; align-items: center; gap: var(--space-2); } .modal-backdrop { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: var(--space-3); background: rgba(8, 13, 21, 0.72); backdrop-filter: blur(3px); } .action-modal { width: min(520px, 100%); display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: linear-gradient(180deg, #1c2940 0%, #121c2d 100%); box-shadow: var(--shadow-strong); } .action-modal h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; } .action-modal p { margin: 0; color: var(--color-text-muted); } .action-modal-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } .error, .error-banner { margin: 0; color: #ffc5c5; } .error-banner { border: 1px solid rgba(181, 92, 92, 0.7); border-radius: var(--radius-sm); background: rgba(87, 34, 34, 0.6); padding: 0.45rem 0.6rem; } @media (max-width: 1480px) { .search-filters-secondary-row { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(126px, 1fr)); } } @media (max-width: 1240px) { .layout-grid { grid-template-columns: 1fr; } .document-viewer { position: static; top: auto; } .topbar { grid-template-columns: 1fr; } .topbar-controls { justify-items: stretch; } .topbar-nav-group, .topbar-document-group, .topbar-settings-group { justify-content: flex-start; } } @media (max-width: 1040px) { .search-filters-secondary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .document-toolbar-export-path { margin-left: 0; width: 100%; } .document-toolbar-export-path .path-input { min-width: 0; width: 100%; } .settings-field { grid-column: span 6; } .settings-field-wide, .settings-checkbox-field { grid-column: span 12; } .settings-catalog-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .app-shell { width: min(1820px, 100% - 1rem); } .search-filters-primary-row { grid-template-columns: 1fr 1fr; } .search-filters-primary-row input { grid-column: 1 / -1; } .search-filters-secondary-row { grid-template-columns: 1fr; } .document-panel-title-row { flex-direction: column; align-items: flex-start; } .document-toolbar-pagination, .document-toolbar-selection, .document-toolbar-export-path { width: 100%; } .document-pagination-strip .document-toolbar-pagination { width: auto; } .provider-list { grid-template-columns: 1fr; } .settings-field { grid-column: span 12; } .task-block-header { flex-direction: column; align-items: flex-start; } .processing-log-header-actions { width: 100%; justify-content: space-between; } } @media (max-width: 560px) { .topbar-nav-group, .topbar-document-group, .topbar-settings-group { width: 100%; } .topbar-nav-group button, .topbar-document-group button, .topbar-settings-group button { flex: 1; } .settings-catalog-row { grid-template-columns: 1fr; justify-items: start; } .card-action-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }