/* * Asset Registry front-end styles. * * Mobile-first and framework-free. Every selector is scoped under * .asset-registry (or the namespaced .asset-registry-modal) so the plugin * styling cannot leak into the host theme. Colors come from custom properties * to keep the palette in one place. The modal is appended to (outside * the .asset-registry container), so the palette is declared on both scopes. */ .asset-registry, .asset-registry-modal { --ar-bg: #ffffff; --ar-surface: #ffffff; --ar-surface-alt: #f7f8fa; --ar-border: #e2e5ea; --ar-text: #1f2530; --ar-text-muted: #5b6573; --ar-accent: #2563eb; --ar-accent-contrast: #ffffff; --ar-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --ar-shadow-hover: 0 6px 16px rgba(16, 24, 40, 0.12); --ar-radius: 10px; --ar-radius-sm: 6px; --ar-gap: 16px; --ar-status-active-bg: #e7f6ec; --ar-status-active-fg: #1a7f43; --ar-status-in_repair-bg: #fdf2dc; --ar-status-in_repair-fg: #9a6700; --ar-status-retired-bg: #f1f2f4; --ar-status-retired-fg: #5b6573; --ar-status-unknown-bg: #f1f2f4; --ar-status-unknown-fg: #5b6573; box-sizing: border-box; color: var(--ar-text); font-size: 16px; line-height: 1.5; } .asset-registry *, .asset-registry *::before, .asset-registry *::after { box-sizing: border-box; } /* ---------- Filter bar ---------- */ .asset-registry__filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--ar-gap); } .asset-registry__filter { flex: 1 1 100%; min-width: 0; } .asset-registry__search, .asset-registry__select { width: 100%; padding: 10px 12px; font-size: 1rem; font-family: inherit; color: var(--ar-text); background-color: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); appearance: none; } .asset-registry__search:focus, .asset-registry__select:focus { outline: 2px solid var(--ar-accent); outline-offset: 1px; border-color: var(--ar-accent); } @media (min-width: 600px) { .asset-registry__filter--search { flex: 2 1 240px; } .asset-registry__filter { flex: 1 1 160px; } } /* ---------- Status / loading / empty / error ---------- */ .asset-registry__status:empty { display: none; } .asset-registry__status { margin-bottom: var(--ar-gap); color: var(--ar-text-muted); font-size: 0.95rem; } .asset-registry__empty, .asset-registry__error { padding: 32px 16px; text-align: center; color: var(--ar-text-muted); background-color: var(--ar-surface-alt); border: 1px dashed var(--ar-border); border-radius: var(--ar-radius); } .asset-registry__error { color: #9b1c1c; background-color: #fdecec; border-color: #f5c2c2; border-style: solid; } /* ---------- Card grid ---------- */ .asset-registry__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ar-gap); } .asset-registry__card { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 16px; text-align: left; font-family: inherit; font-size: 1rem; color: var(--ar-text); background-color: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow); cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .asset-registry__card:hover { border-color: #cdd3dc; box-shadow: var(--ar-shadow-hover); transform: translateY(-2px); } .asset-registry__card:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .asset-registry__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .asset-registry__card-title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--ar-text); } .asset-registry__card-category { font-size: 0.9rem; color: var(--ar-text-muted); } .asset-registry__card-meta { font-size: 0.85rem; color: var(--ar-text-muted); } .asset-registry__card-cta { margin-top: auto; padding-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--ar-accent); } /* ---------- Status badge ---------- */ .asset-registry__badge { flex: 0 0 auto; display: inline-block; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; line-height: 1.6; white-space: nowrap; border-radius: 999px; background-color: var(--ar-status-unknown-bg); color: var(--ar-status-unknown-fg); } .asset-registry__badge--active { background-color: var(--ar-status-active-bg); color: var(--ar-status-active-fg); } .asset-registry__badge--in_repair { background-color: var(--ar-status-in_repair-bg); color: var(--ar-status-in_repair-fg); } .asset-registry__badge--retired { background-color: var(--ar-status-retired-bg); color: var(--ar-status-retired-fg); } /* ---------- Pagination ---------- */ .asset-registry__pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .asset-registry__pagination[hidden] { display: none; } .asset-registry__page-btn { padding: 8px 16px; font-size: 0.95rem; font-family: inherit; font-weight: 600; color: var(--ar-accent); background-color: var(--ar-surface); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-sm); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .asset-registry__page-btn:hover:not(:disabled) { background-color: var(--ar-surface-alt); border-color: #cdd3dc; } .asset-registry__page-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .asset-registry__page-btn:disabled { color: var(--ar-text-muted); cursor: not-allowed; opacity: 0.55; } .asset-registry__page-label { font-size: 0.95rem; color: var(--ar-text-muted); } /* ---------- Detail modal (namespaced separately) ---------- */ .asset-registry-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; background-color: rgba(16, 24, 40, 0.55); } .asset-registry-modal.is-open { display: flex; } body.asset-registry-modal-open { overflow: hidden; } .asset-registry-modal__dialog { width: 100%; max-width: 540px; margin: auto; background-color: var(--ar-bg, #ffffff); border-radius: 12px; box-shadow: 0 20px 48px rgba(16, 24, 40, 0.28); color: #1f2530; font-size: 16px; line-height: 1.5; animation: asset-registry-modal-in 0.18s ease; } @keyframes asset-registry-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .asset-registry-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid #e2e5ea; } .asset-registry-modal__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: #1f2530; } .asset-registry-modal__close { flex: 0 0 auto; width: 36px; height: 36px; font-size: 1.5rem; line-height: 1; color: #5b6573; background-color: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .asset-registry-modal__close:hover { background-color: #f1f2f4; color: #1f2530; } .asset-registry-modal__close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .asset-registry-modal__body { padding: 16px 20px 24px; max-height: 70vh; overflow-y: auto; } .asset-registry-modal__fields { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 16px; margin: 0; } .asset-registry-modal__term { margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #5b6573; } .asset-registry-modal__desc { margin: 0; word-break: break-word; color: #1f2530; } .asset-registry-modal__attachment { margin: 16px 0 0; font-size: 0.9rem; color: #1a7f43; } .asset-registry-modal__restricted { margin: 16px 0 0; padding: 12px 14px; font-size: 0.9rem; color: #1f2530; background-color: #f7f8fa; border: 1px solid #e2e5ea; border-radius: 8px; } .asset-registry-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .asset-registry-modal__action { display: inline-block; padding: 8px 14px; font-size: 0.9rem; font-weight: 600; color: #fff; text-decoration: none; background-color: var(--ar-accent); border-radius: 8px; } .asset-registry-modal__action:hover { filter: brightness(0.95); } .asset-registry-modal__action:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .asset-registry-modal__loading { margin: 0; color: #5b6573; } .asset-registry-modal__error { margin: 0; color: #9b1c1c; } @media (max-width: 480px) { .asset-registry-modal__fields { grid-template-columns: 1fr; gap: 2px 0; } .asset-registry-modal__desc { margin-bottom: 10px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .asset-registry__card, .asset-registry__page-btn { transition: none; } .asset-registry__card:hover { transform: none; } .asset-registry-modal__dialog { animation: none; } }