/* ============================================================================ SAPE UI Kit · Reference component stylesheet (v0.2.0) ---------------------------------------------------------------------------- Class prefix: sape- · utility prefix: u- · state classes: is-* Consumes: sape-ui-kit-foundations.css + sape-ui-kit-tokens.css Theme: set data-theme="light" | "dark" on . Light is the default. ============================================================================ */ /* Consumes tokens/foundations.css + tokens/component-tokens.css (loaded via styles.css). */ /* ---- reset + base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sape-font-family-primary); font-size: var(--sape-font-size-14); line-height: var(--sape-font-line-height-normal); color: var(--sape-color-text-primary); background: var(--sape-color-background-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--sape-motion-duration-base) var(--sape-motion-easing-standard), color var(--sape-motion-duration-base) var(--sape-motion-easing-standard); } h1, h2, h3, h4 { font-family: var(--sape-font-family-primary); color: var(--sape-color-text-primary); text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--sape-color-text-brand); text-decoration: none; } a:hover { color: var(--sape-color-brand-primary-strong); text-decoration: underline; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--sape-border-width-strong) solid var(--sape-color-border-focus); outline-offset: 2px; border-radius: var(--sape-radius-sm); } ::selection { background: var(--sape-color-primary-200); color: var(--sape-color-neutral-900); } :root[data-theme="dark"] ::selection { background: var(--sape-color-primary-800); color: var(--sape-color-neutral-0); } /* refined scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--sape-color-border-base) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--sape-color-border-base); border-radius: var(--sape-radius-full); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--sape-color-border-control); } /* ---- utilities ---------------------------------------------------------- */ .u-muted { color: var(--sape-color-text-secondary); } .u-num { font-family: var(--sape-font-family-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: right; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sape-spacing-3); } .u-stack { display: grid; gap: var(--sape-spacing-3); } .u-split { display: flex; align-items: center; justify-content: space-between; gap: var(--sape-spacing-3); } .u-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sape-spacing-4); } .u-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sape-spacing-4); } .u-eyebrow { font-size: var(--sape-font-size-12); font-weight: var(--sape-font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sape-color-text-muted); } /* ---- app shell ---------------------------------------------------------- */ .sape-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sape-component-navigation-sidebar-width) 1fr; grid-template-rows: var(--sape-component-navigation-height) 1fr; transition: grid-template-columns var(--sape-motion-duration-base) var(--sape-motion-easing-emphasized); } .sape-shell.is-collapsed { grid-template-columns: var(--sape-component-navigation-sidebar-collapsed) 1fr; } .sape-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sape-spacing-4); padding: 0 var(--sape-spacing-5); background: color-mix(in srgb, var(--sape-color-surface-base) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); position: sticky; top: 0; z-index: var(--sape-motion-z-index-sticky); } .sape-brand { display: flex; align-items: center; gap: var(--sape-spacing-3); min-width: 0; } .sape-brand img { height: 34px; width: auto; display: block; } .sape-brand .sape-brand__logo-dark { display: none; } :root[data-theme="dark"] .sape-brand .sape-brand__logo-light { display: none; } :root[data-theme="dark"] .sape-brand .sape-brand__logo-dark { display: block; } .sape-sidebar { grid-row: 2; grid-column: 1; border-right: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); background: var(--sape-color-surface-base); padding: var(--sape-spacing-4); overflow: auto; } .sape-main { grid-row: 2; grid-column: 2; min-width: 0; padding: var(--sape-spacing-6); overflow: auto; } /* ---- section rhythm ----------------------------------------------------- */ .sape-section { padding: var(--sape-spacing-8) 0; border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); scroll-margin-top: 88px; } .sape-section:last-child { border-bottom: 0; } .sape-section > h1 { font-size: var(--sape-font-size-40); line-height: var(--sape-font-line-height-tight); margin: 0 0 var(--sape-spacing-3); letter-spacing: -0.02em; } .sape-section > h2 { font-size: var(--sape-font-size-24); line-height: var(--sape-font-line-height-snug); margin: 0 0 var(--sape-spacing-1); letter-spacing: -0.01em; } .sape-section > h3 { font-size: var(--sape-font-size-18); margin: var(--sape-spacing-5) 0 var(--sape-spacing-2); } .sape-section > p { margin: 0 0 var(--sape-spacing-4); max-width: var(--sape-size-content-measure); color: var(--sape-color-text-secondary); } .sape-demo { display: grid; gap: var(--sape-spacing-4); margin-top: var(--sape-spacing-4); } /* ---- navigation list ---------------------------------------------------- */ .sape-nav-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .sape-nav-item { min-height: var(--sape-component-navigation-item-height); display: flex; align-items: center; gap: var(--sape-spacing-3); padding: 0 var(--sape-spacing-3); border-radius: var(--sape-radius-md); color: var(--sape-color-text-secondary); font-weight: var(--sape-font-weight-medium); text-decoration: none; white-space: nowrap; transition: background var(--sape-motion-duration-fast) var(--sape-motion-easing-standard), color var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-nav-item .sape-icon { color: var(--sape-color-text-muted); } .sape-nav-item:hover { background: var(--sape-color-surface-hover); color: var(--sape-color-text-primary); text-decoration: none; } .sape-nav-item[aria-current="page"], .sape-nav-item.is-active { background: var(--sape-component-navigation-active); color: var(--sape-color-text-brand); box-shadow: inset 3px 0 0 var(--sape-color-brand-primary); } .sape-nav-item[aria-current="page"] .sape-icon, .sape-nav-item.is-active .sape-icon { color: var(--sape-color-text-brand); } .sape-nav-item[aria-disabled="true"] { color: var(--sape-color-text-muted); opacity: var(--sape-motion-opacity-disabled); cursor: not-allowed; } .sape-nav-group-label { padding: var(--sape-spacing-4) var(--sape-spacing-3) var(--sape-spacing-1); } /* ---- buttons ------------------------------------------------------------ */ .sape-btn { min-height: var(--sape-component-button-height-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--sape-component-button-padding-gap); padding: 0 var(--sape-component-button-padding-inline); border-radius: var(--sape-component-button-radius); border: var(--sape-border-width-hairline) solid transparent; font-family: inherit; font-weight: var(--sape-component-button-font-weight); font-size: var(--sape-component-button-font-size); line-height: 1; text-decoration: none; cursor: pointer; user-select: none; transition: background var(--sape-motion-duration-fast) var(--sape-motion-easing-standard), border-color var(--sape-motion-duration-fast) var(--sape-motion-easing-standard), box-shadow var(--sape-motion-duration-fast) var(--sape-motion-easing-standard), transform var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-btn:hover { text-decoration: none; } .sape-btn:active { transform: translateY(0.5px); } .sape-btn--sm { min-height: var(--sape-component-button-height-sm); padding-inline: var(--sape-spacing-3); font-size: var(--sape-font-size-12); } .sape-btn--lg { min-height: var(--sape-component-button-height-lg); padding-inline: var(--sape-spacing-5); font-size: var(--sape-font-size-16); } .sape-btn--full { width: 100%; } .sape-btn--icon { width: var(--sape-size-control-md); padding: 0; } .sape-btn--icon.sape-btn--sm { width: var(--sape-size-control-sm); } .sape-btn--primary { background: var(--sape-component-button-primary-background-default); color: var(--sape-component-button-primary-text); box-shadow: var(--sape-shadow-level-1); } .sape-btn--primary:hover { background: var(--sape-component-button-primary-background-hover); box-shadow: var(--sape-shadow-level-2); } .sape-btn--primary:active { background: var(--sape-component-button-primary-background-active); } .sape-btn--secondary { background: var(--sape-component-button-secondary-background); color: var(--sape-component-button-secondary-text); border-color: var(--sape-component-button-secondary-border); box-shadow: var(--sape-shadow-level-1); } .sape-btn--secondary:hover { background: var(--sape-component-button-secondary-hover); border-color: var(--sape-color-border-base); } .sape-btn--tertiary { background: var(--sape-component-button-tertiary-background); color: var(--sape-component-button-tertiary-text); } .sape-btn--tertiary:hover { background: var(--sape-component-button-tertiary-hover); } .sape-btn--ghost { background: var(--sape-component-button-ghost-background); color: var(--sape-component-button-ghost-text); } .sape-btn--ghost:hover { background: var(--sape-component-button-ghost-hover); color: var(--sape-color-text-primary); } .sape-btn--destructive { background: var(--sape-component-button-destructive-background-default); color: var(--sape-component-button-destructive-text); box-shadow: var(--sape-shadow-level-1); } .sape-btn--destructive:hover { background: var(--sape-component-button-destructive-background-hover); box-shadow: var(--sape-shadow-level-2); } .sape-btn[disabled], .sape-btn[aria-disabled="true"] { opacity: var(--sape-motion-opacity-disabled); cursor: not-allowed; pointer-events: none; box-shadow: none; } .sape-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .sape-btn.is-loading::after { content: ""; position: absolute; width: var(--sape-size-icon-sm); height: var(--sape-size-icon-sm); border-radius: var(--sape-radius-full); border: 2px solid currentColor; border-top-color: transparent; color: var(--sape-component-button-primary-text); animation: sape-spin 0.7s linear infinite; } .sape-btn--secondary.is-loading::after, .sape-btn--ghost.is-loading::after, .sape-btn--tertiary.is-loading::after { color: var(--sape-color-text-brand); } .sape-icon { width: var(--sape-size-icon-md); height: var(--sape-size-icon-md); display: inline-block; flex: 0 0 auto; stroke-width: 1.75; } .sape-icon--sm { width: var(--sape-size-icon-sm); height: var(--sape-size-icon-sm); } /* ---- fields ------------------------------------------------------------- */ .sape-field { display: grid; gap: var(--sape-spacing-1); } .sape-label { font-size: var(--sape-font-size-14); font-weight: var(--sape-font-weight-medium); letter-spacing: var(--sape-font-letter-spacing-label); color: var(--sape-color-text-primary); } .sape-label .sape-req { color: var(--sape-color-semantic-error-icon); } .sape-control, .sape-select, .sape-textarea { width: 100%; min-height: var(--sape-component-field-height-md); border: var(--sape-border-width-hairline) solid var(--sape-component-field-border-default); border-radius: var(--sape-component-field-radius); background: var(--sape-component-field-background); color: var(--sape-component-field-text-default); padding: var(--sape-component-field-padding-block) var(--sape-component-field-padding-inline); font: inherit; transition: border-color var(--sape-motion-duration-fast) var(--sape-motion-easing-standard), box-shadow var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-control::placeholder, .sape-textarea::placeholder { color: var(--sape-color-text-muted); } .sape-textarea { min-height: 96px; resize: vertical; line-height: var(--sape-font-line-height-normal); } .sape-control:hover, .sape-select:hover, .sape-textarea:hover { border-color: var(--sape-color-border-base); } .sape-control:focus, .sape-select:focus, .sape-textarea:focus { border-color: var(--sape-component-field-border-focus); outline: none; box-shadow: 0 0 0 3px var(--sape-color-focus-ring); } .sape-control[disabled], .sape-select[disabled], .sape-textarea[disabled] { border-color: var(--sape-component-field-border-disabled); background: var(--sape-color-surface-sunken); color: var(--sape-color-text-muted); cursor: not-allowed; } .sape-control[readonly], .sape-textarea[readonly] { background: var(--sape-color-surface-sunken); } .sape-select { appearance: none; -webkit-appearance: none; padding-right: var(--sape-spacing-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767B83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sape-spacing-3) center; } :root[data-theme="dark"] .sape-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A7ACB3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .sape-field--error .sape-control, .sape-field--error .sape-select, .sape-field--error .sape-textarea { border-color: var(--sape-component-field-border-error); } .sape-field--error .sape-control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sape-color-semantic-error-solid) 30%, transparent); } .sape-field--warning .sape-control, .sape-field--warning .sape-select, .sape-field--warning .sape-textarea { border-color: var(--sape-component-field-border-warning); } .sape-field--success .sape-control, .sape-field--success .sape-select, .sape-field--success .sape-textarea { border-color: var(--sape-component-field-border-success); } .sape-help { color: var(--sape-color-text-secondary); font-size: var(--sape-font-size-12); } .sape-error { color: var(--sape-color-semantic-error-text); font-size: var(--sape-font-size-12); font-weight: var(--sape-font-weight-medium); display: flex; align-items: center; gap: var(--sape-spacing-1); } .sape-input-group { display: flex; align-items: stretch; } .sape-input-group .sape-control { border-radius: 0; } .sape-input-group > :first-child { border-radius: var(--sape-radius-md) 0 0 var(--sape-radius-md); } .sape-input-group > :last-child { border-radius: 0 var(--sape-radius-md) var(--sape-radius-md) 0; } .sape-input-group > :not(:first-child) { margin-left: -1px; } .sape-input-group .sape-btn { position: relative; z-index: 1; } .sape-input-addon { display: inline-flex; align-items: center; gap: var(--sape-spacing-1); padding: 0 var(--sape-spacing-3); border: var(--sape-border-width-hairline) solid var(--sape-color-border-control); background: var(--sape-color-surface-sunken); color: var(--sape-color-text-secondary); white-space: nowrap; } /* ---- choice: checkbox / radio / switch ---------------------------------- */ .sape-choice { display: flex; gap: var(--sape-spacing-2); align-items: flex-start; min-height: var(--sape-size-control-touch-min); cursor: pointer; } .sape-choice input { width: var(--sape-component-choice-size); height: var(--sape-component-choice-size); accent-color: var(--sape-component-choice-selected); margin: 3px 0 0; flex: 0 0 auto; cursor: pointer; } .sape-choice input[disabled] { cursor: not-allowed; } .sape-choice > span { display: grid; gap: 2px; } .sape-choice-group { display: grid; gap: var(--sape-spacing-2); border: 0; padding: 0; margin: 0; } .sape-choice-group--horizontal { display: flex; flex-wrap: wrap; gap: var(--sape-spacing-5); } .sape-switch { display: inline-flex; align-items: center; gap: var(--sape-spacing-3); min-height: var(--sape-size-control-touch-min); cursor: pointer; } .sape-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .sape-switch__track { width: var(--sape-component-switch-width); height: var(--sape-component-switch-height); border-radius: var(--sape-radius-full); background: var(--sape-component-switch-track-off); position: relative; flex: 0 0 auto; transition: background var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-switch__track::after { content: ""; position: absolute; width: var(--sape-component-switch-thumb); height: var(--sape-component-switch-thumb); border-radius: var(--sape-radius-full); background: #FFFFFF; left: 3px; top: 3px; box-shadow: var(--sape-shadow-level-1); transition: transform var(--sape-motion-duration-base) var(--sape-motion-easing-emphasized); } .sape-switch input:checked + .sape-switch__track { background: var(--sape-component-switch-track-on); } .sape-switch input:checked + .sape-switch__track::after { transform: translateX(16px); } .sape-switch input:focus-visible + .sape-switch__track { box-shadow: 0 0 0 3px var(--sape-color-focus-ring); } .sape-switch input[disabled] + .sape-switch__track { opacity: var(--sape-motion-opacity-disabled); } /* ---- segmented control -------------------------------------------------- */ .sape-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--sape-component-segmented-background); border-radius: var(--sape-component-segmented-radius); border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); } .sape-segmented button { border: 0; background: transparent; color: var(--sape-color-text-secondary); font: inherit; font-weight: var(--sape-font-weight-medium); font-size: var(--sape-font-size-14); padding: 0 var(--sape-spacing-3); min-height: calc(var(--sape-component-segmented-height) - 6px); border-radius: var(--sape-radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sape-spacing-1); } .sape-segmented button[aria-pressed="true"], .sape-segmented button.is-active { background: var(--sape-component-segmented-selected-background); color: var(--sape-component-segmented-selected-text); box-shadow: var(--sape-shadow-level-1); } /* ---- tabs --------------------------------------------------------------- */ .sape-tabs { display: flex; gap: var(--sape-spacing-1); border-bottom: var(--sape-border-width-hairline) solid var(--sape-component-tab-border); overflow-x: auto; } .sape-tab { min-height: var(--sape-component-tab-height); border: 0; background: transparent; padding: 0 var(--sape-component-tab-padding); color: var(--sape-color-text-secondary); border-bottom: var(--sape-border-width-strong) solid transparent; cursor: pointer; white-space: nowrap; font: inherit; font-weight: var(--sape-font-weight-medium); transition: color var(--sape-motion-duration-fast) var(--sape-motion-easing-standard), border-color var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-tab:hover { color: var(--sape-color-text-primary); } .sape-tab[aria-selected="true"] { color: var(--sape-component-tab-active); border-bottom-color: var(--sape-component-tab-active); } .sape-tab[disabled] { opacity: var(--sape-motion-opacity-disabled); cursor: not-allowed; } .sape-tabs--contained { border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-md); padding: var(--sape-spacing-1); background: var(--sape-color-surface-sunken); } .sape-tabs--contained .sape-tab { border-bottom: 0; border-radius: var(--sape-radius-sm); } .sape-tabs--contained .sape-tab[aria-selected="true"] { background: var(--sape-color-surface-base); color: var(--sape-color-text-primary); box-shadow: var(--sape-shadow-level-1); } .sape-tab-panels { display: grid; gap: var(--sape-spacing-3); margin: var(--sape-spacing-4) 0; } /* ---- breadcrumb --------------------------------------------------------- */ .sape-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sape-spacing-2); color: var(--sape-color-text-secondary); font-size: var(--sape-font-size-14); } .sape-breadcrumb a { color: inherit; } .sape-breadcrumb .sape-breadcrumb__sep { color: var(--sape-color-text-muted); } .sape-breadcrumb [aria-current="page"] { color: var(--sape-color-text-primary); font-weight: var(--sape-font-weight-medium); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- table + data grid -------------------------------------------------- */ .sape-table-wrap { position: relative; overflow: auto; border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-lg); background: var(--sape-color-surface-base); box-shadow: var(--sape-shadow-level-1); } .sape-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--sape-font-size-12); } .sape-table.sape-grid { table-layout: fixed; } .sape-table th, .sape-table td { padding: 0 var(--sape-spacing-3); height: var(--sape-component-table-row-height-standard); border-bottom: var(--sape-border-width-hairline) solid var(--sape-component-table-border); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sape-table thead th { position: sticky; top: 0; z-index: 3; height: var(--sape-component-table-header-height); background: var(--sape-component-table-header-background); font-weight: var(--sape-font-weight-semibold); color: var(--sape-color-text-secondary); letter-spacing: var(--sape-font-letter-spacing-label); border-bottom: var(--sape-border-width-strong) solid var(--sape-color-border-base); } .sape-table--compact th, .sape-table--compact td { height: var(--sape-component-table-row-height-compact); } .sape-table--comfortable th, .sape-table--comfortable td { height: var(--sape-component-table-row-height-comfortable); } .sape-table--zebra tbody tr:nth-child(even) td { background: var(--sape-component-table-zebra); } .sape-table tbody tr { transition: background var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-table tbody tr:hover td { background: var(--sape-component-table-hover); } .sape-table tr.is-selected td { background: var(--sape-component-table-selected); } .sape-table tr.is-disabled { opacity: var(--sape-motion-opacity-disabled); } .sape-table tr.is-error td { box-shadow: inset 3px 0 0 var(--sape-color-semantic-error-solid); } .sape-table tfoot td { position: sticky; bottom: 0; background: var(--sape-color-surface-sunken); font-weight: var(--sape-font-weight-semibold); border-top: var(--sape-border-width-strong) solid var(--sape-color-border-base); } /* sticky / pinned columns */ .sape-table .is-sticky, .sape-table .is-pinned-left { position: sticky; left: 0; z-index: 2; background: var(--sape-color-surface-base); } .sape-table thead .is-sticky, .sape-table thead .is-pinned-left { z-index: 4; background: var(--sape-component-table-header-background); } .sape-table tbody tr:hover .is-sticky, .sape-table tbody tr:hover .is-pinned-left { background: var(--sape-component-table-hover); } .sape-table tr.is-selected .is-sticky, .sape-table tr.is-selected .is-pinned-left { background: var(--sape-component-table-selected); } .sape-table .is-pinned-left.is-pin-edge::after { content: ""; position: absolute; top: 0; right: 0; bottom: -1px; width: 12px; transform: translateX(100%); pointer-events: none; box-shadow: inset 8px 0 8px -8px rgba(5,6,8,0.28); } /* grid header: sort + resize + reorder */ .sape-grid th { position: sticky; top: 0; user-select: none; } .sape-grid th.is-sortable { cursor: pointer; } .sape-grid th .sape-grid__th { display: flex; align-items: center; gap: var(--sape-spacing-1); height: 100%; } .sape-grid th.u-num .sape-grid__th { justify-content: flex-end; } .sape-grid th .sape-grid__sort { display: inline-flex; opacity: 0; color: var(--sape-component-grid-sort-indicator); transition: opacity var(--sape-motion-duration-fast); } .sape-grid th.is-sortable:hover .sape-grid__sort { opacity: 0.5; } .sape-grid th.is-sorted-asc .sape-grid__sort, .sape-grid th.is-sorted-desc .sape-grid__sort { opacity: 1; } .sape-grid th.is-sorted-desc .sape-grid__sort svg { transform: rotate(180deg); } .sape-grid th .sape-grid__resizer { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; } .sape-grid th .sape-grid__resizer::after { content: ""; position: absolute; top: 20%; right: 3px; height: 60%; width: 2px; background: var(--sape-color-border-base); border-radius: var(--sape-radius-full); opacity: 0; transition: opacity var(--sape-motion-duration-fast); } .sape-grid th:hover .sape-grid__resizer::after { opacity: 1; } .sape-grid th.is-resizing .sape-grid__resizer::after { opacity: 1; background: var(--sape-component-grid-resize-handle); width: var(--sape-component-grid-resize-handle-width); } .sape-grid.is-resizing { cursor: col-resize; user-select: none; } .sape-grid th[draggable="true"] { cursor: grab; } .sape-grid th.is-dragging { opacity: 0.4; background: var(--sape-component-grid-drag-ghost); } .sape-grid th.is-drop-before { box-shadow: inset 3px 0 0 var(--sape-component-grid-drop-indicator); } .sape-grid th.is-drop-after { box-shadow: inset -3px 0 0 var(--sape-component-grid-drop-indicator); } .sape-grid td.is-editing { padding: 0; } .sape-grid td .sape-grid__edit { width: 100%; height: 100%; border: var(--sape-border-width-strong) solid var(--sape-color-border-focus); border-radius: 0; padding: 0 var(--sape-spacing-3); font: inherit; background: var(--sape-color-surface-base); color: var(--sape-color-text-primary); box-shadow: 0 0 0 3px var(--sape-color-focus-ring); } .sape-grid td.is-editable { cursor: text; } .sape-grid td.is-editable:hover { box-shadow: inset 0 0 0 1px var(--sape-color-border-base); } .sape-grid__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sape-spacing-2); padding: var(--sape-spacing-3) var(--sape-spacing-3) var(--sape-spacing-3) var(--sape-spacing-4); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); background: var(--sape-color-surface-base); border-radius: var(--sape-radius-lg) var(--sape-radius-lg) 0 0; } .sape-grid__toolbar .sape-grid__title { font-weight: var(--sape-font-weight-semibold); font-size: var(--sape-font-size-14); } .sape-grid__toolbar .sape-grid__spacer { flex: 1; } .sape-grid-shell { border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-lg); background: var(--sape-color-surface-base); box-shadow: var(--sape-shadow-level-1); overflow: hidden; } .sape-grid-shell .sape-table-wrap { border: 0; border-radius: 0; box-shadow: none; } /* ---- tree view ---------------------------------------------------------- */ .sape-tree, .sape-tree ul { list-style: none; margin: 0; padding: 0; } .sape-tree { font-size: var(--sape-font-size-14); } .sape-tree__row { display: flex; align-items: center; gap: var(--sape-spacing-2); min-height: var(--sape-component-tree-row-height); padding: 0 var(--sape-spacing-2); border-radius: var(--sape-radius-md); color: var(--sape-color-text-primary); cursor: pointer; position: relative; } .sape-tree__row:hover { background: var(--sape-component-tree-hover); } .sape-tree__row[aria-selected="true"] { background: var(--sape-component-tree-selected); color: var(--sape-color-text-brand); font-weight: var(--sape-font-weight-medium); } .sape-tree__caret { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--sape-component-tree-caret); flex: 0 0 auto; transition: transform var(--sape-motion-duration-fast) var(--sape-motion-easing-standard); } .sape-tree__caret.is-leaf { visibility: hidden; } .sape-tree__row[aria-expanded="true"] > .sape-tree__caret { transform: rotate(90deg); } .sape-tree__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sape-tree__icon { color: var(--sape-color-text-muted); flex: 0 0 auto; } .sape-tree__row[aria-selected="true"] .sape-tree__icon { color: var(--sape-color-text-brand); } .sape-tree__badge { margin-left: auto; } .sape-tree ul { margin-left: var(--sape-component-tree-indent); border-left: var(--sape-border-width-hairline) solid var(--sape-component-tree-guide); padding-left: var(--sape-spacing-2); } .sape-tree li[hidden] { display: none; } /* ---- cards + panels ----------------------------------------------------- */ .sape-card, .sape-panel { background: var(--sape-component-card-background); border: var(--sape-border-width-hairline) solid var(--sape-component-card-border); border-radius: var(--sape-component-card-radius); padding: var(--sape-component-card-padding); box-shadow: var(--sape-component-card-shadow); } .sape-card { display: grid; gap: var(--sape-spacing-2); align-content: start; } .sape-card--interactive { cursor: pointer; transition: box-shadow var(--sape-motion-duration-base) var(--sape-motion-easing-standard), transform var(--sape-motion-duration-base) var(--sape-motion-easing-standard), border-color var(--sape-motion-duration-base) var(--sape-motion-easing-standard); } .sape-card--interactive:hover { box-shadow: var(--sape-component-card-interactive-shadow); border-color: var(--sape-color-border-selected); transform: translateY(-2px); } .sape-card--selected { border-color: var(--sape-color-border-selected); background: var(--sape-color-surface-selected); box-shadow: 0 0 0 1px var(--sape-color-border-selected); } .sape-card__header, .sape-card__footer, .sape-panel__header { display: flex; justify-content: space-between; gap: var(--sape-spacing-3); align-items: center; } .sape-card__footer { border-top: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); padding-top: var(--sape-spacing-3); margin-top: var(--sape-spacing-1); } .sape-metric { font-family: var(--sape-font-family-mono); font-variant-numeric: tabular-nums; font-size: var(--sape-font-size-32); line-height: var(--sape-font-line-height-tight); font-weight: var(--sape-font-weight-semibold); letter-spacing: -0.01em; } /* ---- modal + drawer ----------------------------------------------------- */ .sape-modal-backdrop { position: fixed; inset: 0; background: var(--sape-component-modal-backdrop); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: var(--sape-spacing-5); z-index: var(--sape-motion-z-index-modal); } .sape-modal-backdrop.is-open { display: flex; animation: sape-fade var(--sape-motion-duration-base) var(--sape-motion-easing-standard); } .sape-modal { width: min(100%, var(--sape-component-modal-width-md)); max-height: 90vh; overflow: auto; background: var(--sape-color-surface-base); border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-component-modal-radius); box-shadow: var(--sape-component-modal-shadow); animation: sape-pop var(--sape-motion-duration-base) var(--sape-motion-easing-emphasized); } .sape-modal--sm { width: min(100%, var(--sape-component-modal-width-sm)); } .sape-modal--lg { width: min(100%, var(--sape-component-modal-width-lg)); } .sape-modal__header, .sape-modal__body, .sape-modal__footer { padding: var(--sape-spacing-5); } .sape-modal__header { display: flex; justify-content: space-between; align-items: center; gap: var(--sape-spacing-3); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); } .sape-modal__header h3 { margin: 0; font-size: var(--sape-font-size-18); } .sape-modal__body { display: grid; gap: var(--sape-spacing-4); } .sape-modal__footer { display: flex; justify-content: flex-end; gap: var(--sape-spacing-2); border-top: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); } .sape-drawer { position: fixed; top: 0; bottom: 0; width: min(100vw, var(--sape-component-drawer-width-md)); background: var(--sape-component-drawer-background); box-shadow: var(--sape-component-drawer-shadow); padding: var(--sape-spacing-5); z-index: var(--sape-motion-z-index-modal); display: grid; gap: var(--sape-spacing-4); align-content: start; transition: transform var(--sape-motion-duration-slow) var(--sape-motion-easing-emphasized); } .sape-drawer--left { left: 0; border-right: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); transform: translateX(-105%); } .sape-drawer--right { right: 0; border-left: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); transform: translateX(105%); } .sape-drawer.is-open { transform: translateX(0); } /* ---- alerts + toast ----------------------------------------------------- */ .sape-alert { display: flex; align-items: flex-start; gap: var(--sape-spacing-3); padding: var(--sape-component-alert-padding); border-radius: var(--sape-component-alert-radius); border: var(--sape-border-width-hairline) solid; } .sape-alert__icon { flex: 0 0 auto; margin-top: 1px; } .sape-alert__body { display: grid; gap: 2px; } .sape-alert--info { background: var(--sape-component-alert-info); border-color: var(--sape-color-semantic-info-border); color: var(--sape-color-semantic-info-text); } .sape-alert--info .sape-alert__icon { color: var(--sape-color-semantic-info-icon); } .sape-alert--success { background: var(--sape-component-alert-success); border-color: var(--sape-color-semantic-success-border); color: var(--sape-color-semantic-success-text); } .sape-alert--success .sape-alert__icon { color: var(--sape-color-semantic-success-icon); } .sape-alert--warning { background: var(--sape-component-alert-warning); border-color: var(--sape-color-semantic-warning-border); color: var(--sape-color-semantic-warning-text); } .sape-alert--warning .sape-alert__icon { color: var(--sape-color-semantic-warning-icon); } .sape-alert--error { background: var(--sape-component-alert-error); border-color: var(--sape-color-semantic-error-border); color: var(--sape-color-semantic-error-text); } .sape-alert--error .sape-alert__icon { color: var(--sape-color-semantic-error-icon); } .sape-alert--neutral { background: var(--sape-component-alert-neutral); border-color: var(--sape-color-semantic-neutral-border); color: var(--sape-color-semantic-neutral-text); } .sape-toast-region { position: fixed; right: var(--sape-spacing-5); bottom: var(--sape-spacing-5); display: grid; gap: var(--sape-spacing-2); width: min(420px, calc(100vw - 40px)); z-index: var(--sape-motion-z-index-toast); } .sape-toast { box-shadow: var(--sape-shadow-level-4); opacity: 0; transform: translateY(var(--sape-spacing-3)); transition: opacity var(--sape-motion-duration-base) var(--sape-motion-easing-standard), transform var(--sape-motion-duration-base) var(--sape-motion-easing-emphasized); } .sape-toast.is-open { opacity: 1; transform: translateY(0); } /* ---- tooltip + popover -------------------------------------------------- */ .sape-tooltip { display: inline-block; position: relative; } .sape-tooltip__bubble { position: absolute; z-index: var(--sape-motion-z-index-popover); width: max-content; max-width: 240px; padding: var(--sape-component-tooltip-padding) var(--sape-spacing-3); border-radius: var(--sape-component-tooltip-radius); background: var(--sape-component-tooltip-background); color: var(--sape-component-tooltip-text); font-size: var(--sape-font-size-12); bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; transition: opacity var(--sape-motion-duration-fast), transform var(--sape-motion-duration-fast); box-shadow: var(--sape-shadow-level-3); } .sape-tooltip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--sape-component-tooltip-background); } .sape-tooltip:hover .sape-tooltip__bubble, .sape-tooltip:focus-within .sape-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); } .sape-popover-anchor { position: relative; display: inline-block; } .sape-popover { width: min(100%, var(--sape-component-popover-width)); background: var(--sape-component-popover-background); border: var(--sape-border-width-hairline) solid var(--sape-component-popover-border); border-radius: var(--sape-component-popover-radius); box-shadow: var(--sape-component-popover-shadow); padding: var(--sape-spacing-4); } .sape-popover--floating { position: absolute; top: calc(100% + var(--sape-spacing-2)); left: 0; display: none; z-index: var(--sape-motion-z-index-popover); } .sape-popover--floating.is-open { display: grid; gap: var(--sape-spacing-3); animation: sape-pop var(--sape-motion-duration-fast) var(--sape-motion-easing-emphasized); } /* ---- command palette ---------------------------------------------------- */ .sape-palette-backdrop { position: fixed; inset: 0; background: var(--sape-component-modal-backdrop); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 12vh var(--sape-spacing-5) var(--sape-spacing-5); z-index: var(--sape-motion-z-index-modal); } .sape-palette-backdrop.is-open { display: flex; animation: sape-fade var(--sape-motion-duration-fast); } .sape-palette { width: min(100%, var(--sape-component-palette-width)); background: var(--sape-component-palette-background); border: var(--sape-border-width-hairline) solid var(--sape-component-palette-border); border-radius: var(--sape-component-palette-radius); box-shadow: var(--sape-component-palette-shadow); overflow: hidden; animation: sape-pop var(--sape-motion-duration-base) var(--sape-motion-easing-emphasized); } .sape-palette__input { display: flex; align-items: center; gap: var(--sape-spacing-3); padding: var(--sape-spacing-4) var(--sape-spacing-5); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); } .sape-palette__input input { flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--sape-font-size-16); color: var(--sape-color-text-primary); } .sape-palette__input input:focus { outline: none; } .sape-palette__list { max-height: 340px; overflow: auto; padding: var(--sape-spacing-2); display: grid; gap: 2px; } .sape-palette__group { font-size: var(--sape-font-size-10); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sape-color-text-muted); padding: var(--sape-spacing-2) var(--sape-spacing-3) var(--sape-spacing-1); } .sape-palette__item { display: flex; align-items: center; gap: var(--sape-spacing-3); padding: var(--sape-spacing-2) var(--sape-spacing-3); border-radius: var(--sape-radius-md); cursor: pointer; color: var(--sape-color-text-primary); } .sape-palette__item .sape-icon { color: var(--sape-color-text-muted); } .sape-palette__item[aria-selected="true"], .sape-palette__item:hover { background: var(--sape-component-palette-active); color: var(--sape-color-text-brand); } .sape-palette__item[aria-selected="true"] .sape-icon { color: var(--sape-color-text-brand); } .sape-palette__hint { margin-left: auto; } .sape-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 6px; justify-content: center; font-family: var(--sape-font-family-mono); font-size: var(--sape-font-size-10); color: var(--sape-color-text-secondary); background: var(--sape-color-surface-sunken); border: var(--sape-border-width-hairline) solid var(--sape-color-border-base); border-radius: var(--sape-radius-sm); box-shadow: 0 1px 0 var(--sape-color-border-base); } /* ---- pagination --------------------------------------------------------- */ .sape-pagination { display: flex; flex-wrap: wrap; gap: var(--sape-spacing-1); align-items: center; } .sape-page { min-width: var(--sape-component-pagination-item-size); height: var(--sape-component-pagination-item-size); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sape-spacing-2); border: var(--sape-border-width-hairline) solid var(--sape-component-pagination-border); background: var(--sape-color-surface-base); color: var(--sape-color-text-primary); border-radius: var(--sape-radius-md); cursor: pointer; font: inherit; font-size: var(--sape-font-size-12); } .sape-page:hover:not([disabled]):not([aria-current="page"]) { background: var(--sape-color-surface-hover); } .sape-page[aria-current="page"] { background: var(--sape-component-pagination-active); color: #FFFFFF; border-color: var(--sape-component-pagination-active); font-weight: var(--sape-font-weight-semibold); } .sape-page[disabled] { opacity: var(--sape-motion-opacity-disabled); cursor: not-allowed; } /* ---- loaders / progress / skeleton / empty ------------------------------ */ .sape-spinner { width: var(--sape-component-loader-size-md); height: var(--sape-component-loader-size-md); border: 3px solid var(--sape-component-loader-track); border-top-color: var(--sape-component-loader-color); border-radius: var(--sape-radius-full); animation: sape-spin 0.7s linear infinite; flex: 0 0 auto; } .sape-loader-inline { display: inline-flex; align-items: center; gap: var(--sape-spacing-2); min-height: var(--sape-size-control-touch-min); color: var(--sape-color-text-secondary); } .sape-page-loader { min-height: 220px; display: grid; place-items: center; gap: var(--sape-spacing-3); text-align: center; border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-lg); background: var(--sape-color-surface-base); } .sape-page-loader .sape-spinner { width: var(--sape-component-loader-size-lg); height: var(--sape-component-loader-size-lg); } .sape-progress { height: 8px; border-radius: var(--sape-radius-full); background: var(--sape-component-loader-track); overflow: hidden; } .sape-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sape-color-brand-primary), var(--sape-color-primary-400)); transition: width var(--sape-motion-duration-slow) var(--sape-motion-easing-emphasized); } .sape-skeleton { border-radius: var(--sape-radius-md); background: linear-gradient(90deg, var(--sape-color-surface-sunken), var(--sape-color-surface-hover), var(--sape-color-surface-sunken)); background-size: 200% 100%; animation: sape-shimmer 1.3s linear infinite; min-height: 16px; } .sape-skeleton-table { display: grid; gap: var(--sape-spacing-2); } .sape-skeleton-row { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.6fr; gap: var(--sape-spacing-3); } .sape-empty { display: grid; gap: var(--sape-spacing-3); justify-items: center; text-align: center; padding: var(--sape-spacing-8); border: var(--sape-border-width-hairline) dashed var(--sape-color-border-base); border-radius: var(--sape-radius-lg); background: var(--sape-color-surface-base); min-height: 200px; align-content: center; } .sape-empty__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--sape-radius-full); background: var(--sape-color-surface-selected); color: var(--sape-color-text-brand); } .sape-empty--error { border-style: solid; border-color: var(--sape-color-border-error); background: var(--sape-color-semantic-error-subtle); } .sape-empty--error .sape-empty__icon { background: color-mix(in srgb, var(--sape-color-semantic-error-solid) 16%, transparent); color: var(--sape-color-semantic-error-icon); } .sape-empty--permission { border-style: solid; border-color: var(--sape-color-border-warning); background: var(--sape-color-semantic-warning-subtle); } .sape-empty--permission .sape-empty__icon { background: color-mix(in srgb, var(--sape-color-semantic-warning-solid) 16%, transparent); color: var(--sape-color-semantic-warning-icon); } /* ---- badges + status ---------------------------------------------------- */ .sape-badge { display: inline-flex; align-items: center; gap: var(--sape-spacing-1); min-height: var(--sape-component-badge-height-md); padding: 0 var(--sape-component-badge-padding); border-radius: var(--sape-component-badge-radius); font-size: var(--sape-font-size-12); font-weight: var(--sape-font-weight-medium); border: var(--sape-border-width-hairline) solid transparent; white-space: nowrap; } .sape-badge--neutral { background: var(--sape-color-semantic-neutral-subtle); color: var(--sape-color-semantic-neutral-text); border-color: var(--sape-color-semantic-neutral-border); } .sape-badge--info { background: var(--sape-color-semantic-info-subtle); color: var(--sape-color-semantic-info-text); border-color: var(--sape-color-semantic-info-border); } .sape-badge--success { background: var(--sape-color-semantic-success-subtle); color: var(--sape-color-semantic-success-text); border-color: var(--sape-color-semantic-success-border); } .sape-badge--warning { background: var(--sape-color-semantic-warning-subtle); color: var(--sape-color-semantic-warning-text); border-color: var(--sape-color-semantic-warning-border); } .sape-badge--error { background: var(--sape-color-semantic-error-subtle); color: var(--sape-color-semantic-error-text); border-color: var(--sape-color-semantic-error-border); } .sape-dot { width: 8px; height: 8px; border-radius: var(--sape-radius-full); background: currentColor; flex: 0 0 auto; } .sape-badge--success .sape-dot { background: var(--sape-color-semantic-success-solid); } .sape-badge--error .sape-dot { background: var(--sape-color-semantic-error-solid); } .sape-badge--warning .sape-dot { background: var(--sape-color-semantic-warning-solid); } .sape-badge--info .sape-dot { background: var(--sape-color-semantic-info-solid); } /* ---- filters + chips ---------------------------------------------------- */ .sape-filter-bar { display: flex; flex-wrap: wrap; gap: var(--sape-component-filter-bar-gap); align-items: flex-end; padding: var(--sape-spacing-4); background: var(--sape-color-surface-base); border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-lg); box-shadow: var(--sape-shadow-level-1); } .sape-filter-bar .sape-field { min-width: 180px; } .sape-chip { display: inline-flex; align-items: center; gap: var(--sape-spacing-1); min-height: var(--sape-component-filter-chip-height); padding: 0 var(--sape-spacing-1) 0 var(--sape-spacing-3); border-radius: var(--sape-radius-full); background: var(--sape-color-surface-selected); color: var(--sape-color-text-brand); border: var(--sape-border-width-hairline) solid var(--sape-color-border-selected); font-size: var(--sape-font-size-12); font-weight: var(--sape-font-weight-medium); } .sape-chip .sape-chip__x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--sape-radius-full); border: 0; background: transparent; color: inherit; cursor: pointer; } .sape-chip .sape-chip__x:hover { background: color-mix(in srgb, var(--sape-color-brand-primary) 18%, transparent); } /* ---- dashboards --------------------------------------------------------- */ .sape-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--sape-component-dashboard-kpi-min), 1fr)); gap: var(--sape-component-dashboard-panel-gap); } .sape-kpi { display: grid; gap: var(--sape-spacing-2); } .sape-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sape-spacing-2); } .sape-kpi__icon { width: 34px; height: 34px; border-radius: var(--sape-radius-md); display: grid; place-items: center; background: var(--sape-color-surface-selected); color: var(--sape-color-text-brand); } .sape-chart { display: grid; align-content: start; gap: var(--sape-spacing-4); padding: var(--sape-spacing-5); background: var(--sape-color-surface-base); border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-xl); box-shadow: var(--sape-shadow-level-1); } .sape-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sape-spacing-2); align-items: end; height: var(--sape-component-dashboard-chart-height); } .sape-bars > span { display: block; align-self: end; background: linear-gradient(180deg, var(--sape-color-primary-400), var(--sape-color-brand-primary)); border-radius: var(--sape-radius-sm) var(--sape-radius-sm) 0 0; min-height: 4px; transition: height var(--sape-motion-duration-slow) var(--sape-motion-easing-emphasized); } .sape-legend { display: flex; flex-wrap: wrap; gap: var(--sape-spacing-4); } .sape-legend span { display: inline-flex; align-items: center; gap: var(--sape-spacing-2); font-size: var(--sape-font-size-12); color: var(--sape-color-text-secondary); } .sape-legend span::before { content: ""; width: 10px; height: 10px; border-radius: var(--sape-radius-xs); background: var(--sape-swatch, var(--sape-color-data-categorical-1)); } .sape-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sape-spacing-1); } .sape-activity li { display: flex; gap: var(--sape-spacing-3); align-items: baseline; padding: var(--sape-spacing-2) 0; border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); } .sape-activity li:last-child { border-bottom: 0; } .sape-activity time { font-family: var(--sape-font-family-mono); font-size: var(--sape-font-size-10); color: var(--sape-color-text-muted); white-space: nowrap; } /* ---- gantt -------------------------------------------------------------- */ .sape-gantt { border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-xl); background: var(--sape-color-surface-base); box-shadow: var(--sape-shadow-level-1); overflow: hidden; } .sape-gantt__scroll { overflow: auto; } .sape-gantt__grid { position: relative; min-width: 720px; } .sape-gantt__timeline { display: grid; height: 36px; border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-base); background: var(--sape-color-surface-sunken); position: sticky; top: 0; z-index: 2; } .sape-gantt__timeline span { display: flex; align-items: center; justify-content: center; font-size: var(--sape-font-size-10); color: var(--sape-color-text-secondary); border-left: var(--sape-border-width-hairline) solid var(--sape-component-gantt-grid-line); font-weight: var(--sape-font-weight-medium); } .sape-gantt__row { display: grid; align-items: center; height: var(--sape-component-gantt-row-height); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); position: relative; } .sape-gantt__row:nth-child(even) { background: var(--sape-component-table-zebra); } .sape-gantt__cellgrid { position: absolute; inset: 0; display: grid; pointer-events: none; } .sape-gantt__cellgrid span { border-left: var(--sape-border-width-hairline) solid var(--sape-component-gantt-grid-line); } .sape-gantt__bar { position: relative; height: var(--sape-component-gantt-bar-height); border-radius: var(--sape-component-gantt-bar-radius); background: var(--sape-component-gantt-bar-fill); color: #fff; display: flex; align-items: center; padding: 0 var(--sape-spacing-2); font-size: var(--sape-font-size-10); font-weight: var(--sape-font-weight-medium); cursor: grab; box-shadow: var(--sape-shadow-level-1); z-index: 1; overflow: hidden; white-space: nowrap; user-select: none; } .sape-gantt__bar.is-critical { background: var(--sape-component-gantt-bar-critical); } .sape-gantt__bar.is-done { background: var(--sape-component-gantt-bar-done); } .sape-gantt__bar.is-dragging { cursor: grabbing; box-shadow: var(--sape-shadow-level-3); opacity: 0.92; } .sape-gantt__handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; } .sape-gantt__handle--start { left: 0; } .sape-gantt__handle--end { right: 0; } .sape-gantt__progress { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.28); border-right: 2px solid rgba(255,255,255,0.5); pointer-events: none; } .sape-gantt__today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sape-component-gantt-today-line); z-index: 3; pointer-events: none; } .sape-gantt__labels { border-right: var(--sape-border-width-hairline) solid var(--sape-color-border-base); } .sape-gantt__label { height: var(--sape-component-gantt-row-height); display: flex; align-items: center; padding: 0 var(--sape-spacing-3); font-size: var(--sape-font-size-12); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sape-gantt__label--head { height: 36px; background: var(--sape-color-surface-sunken); font-weight: var(--sape-font-weight-semibold); border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-base); } /* ---- toolbar ------------------------------------------------------------ */ .sape-toolbar { display: flex; align-items: center; gap: var(--sape-spacing-2); min-height: var(--sape-component-toolbar-height); padding: 0 var(--sape-spacing-3); background: var(--sape-component-toolbar-background); border: var(--sape-border-width-hairline) solid var(--sape-component-toolbar-border); border-radius: var(--sape-radius-lg); box-shadow: var(--sape-shadow-level-1); } .sape-toolbar__sep { width: 1px; align-self: stretch; margin: var(--sape-spacing-1) var(--sape-spacing-1); background: var(--sape-color-border-subtle); } .sape-toolbar__spacer { flex: 1; } /* ---- keyframes ---------------------------------------------------------- */ @keyframes sape-spin { to { transform: rotate(360deg); } } @keyframes sape-shimmer { to { background-position: -200% 0; } } @keyframes sape-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sape-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- responsive --------------------------------------------------------- */ @media (max-width: 1024px) { .sape-shell { grid-template-columns: 1fr; grid-template-rows: var(--sape-component-navigation-height) auto 1fr; } .sape-sidebar { grid-row: 2; grid-column: 1; border-right: 0; border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); } .sape-main { grid-row: 3; grid-column: 1; padding: var(--sape-spacing-5); } } @media (max-width: 768px) { .sape-main { padding: var(--sape-spacing-4); } .sape-topbar { padding: 0 var(--sape-spacing-4); } .sape-modal__header, .sape-modal__body, .sape-modal__footer { padding: var(--sape-spacing-4); } .sape-section > h1 { font-size: var(--sape-font-size-32); } }