/* ========================================================================== Encounter Architect - modern theme -------------------------------------------------------------------------- Bootstrap 5.3 remains the component base (vendored, offline). This layer provides the app chrome, the workspace layout, the sticky app/dock bars, and a refined design system on top of Bootstrap. All class/ID hooks required by script/*.js are preserved. ========================================================================== */ :root { /* Palette */ --eb-bg: #eef1f8; --eb-surface: #ffffff; --eb-surface-raised: #f8fafd; --eb-border: #e3e8f0; --eb-border-strong: #cbd5e1; --eb-text: #101828; --eb-muted: #667085; --eb-success: #16a34a; --eb-danger: #dc2626; --eb-warning: #d97706; /* Accent: a single source of truth; every accent-derived token below is generated from it with color-mix, so switching accent only needs the base hex (JS sets inline on for custom/preset accents). */ --eb-accent: #4f46e5; --eb-primary: var(--eb-accent); --eb-primary-hover: color-mix(in srgb, var(--eb-accent), #000 18%); --eb-primary-strong: color-mix(in srgb, var(--eb-accent), #000 28%); --eb-primary-soft: color-mix(in srgb, var(--eb-accent) 13%, #fff); --eb-primary-rgb: 79, 70, 229; /* Theme-adaptive surfaces */ --eb-chrome-bg: rgba(255, 255, 255, 0.9); --eb-glow-a: color-mix(in srgb, var(--eb-accent) 10%, transparent); --eb-glow-b: color-mix(in srgb, var(--eb-accent) 8%, transparent); --eb-striped: rgba(16, 24, 40, 0.025); --eb-inverse-bg: #101828; --eb-inverse-text: #ffffff; --eb-focus-ring: color-mix(in srgb, var(--eb-accent) 20%, transparent); --eb-focus-ring-strong: color-mix(in srgb, var(--eb-accent) 40%, transparent); --eb-accent-filter: brightness(0) saturate(100%) invert(28%) sepia(60%) saturate(5600%) hue-rotate(232deg) brightness(94%) contrast(92%); --eb-dock-shadow: 0 -8px 28px rgba(16, 24, 40, 0.08); --eb-switch-off: #cbd5e1; --eb-brand-filter: none; /* Geometry & depth */ --eb-radius-lg: 16px; --eb-radius: 12px; --eb-radius-sm: 9px; --eb-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --eb-shadow: 0 1px 3px rgba(16, 24, 40, 0.07), 0 10px 28px rgba(16, 24, 40, 0.06); --eb-shadow-lg: 0 14px 44px rgba(16, 24, 40, 0.16); /* App chrome */ --eb-topbar-h: 62px; --eb-dock-h: 62px; --eb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* ========================================================================== Dark theme (generic, best-practice dark gray) - shared base, refined for OLED below. selection is applied in on the element via data-theme="dark"|"oled" (+ data-bs-theme="dark") to avoid FOUC. ========================================================================== */ :root[data-theme='dark'], :root[data-theme='oled'] { color-scheme: dark; --eb-bg: #0d1117; --eb-surface: #151b23; --eb-surface-raised: #1c2129; --eb-border: #2a3038; --eb-border-strong: #3a414b; --eb-text: #e6edf3; --eb-muted: #98a1b3; --eb-success: #3fb950; --eb-danger: #f85149; --eb-warning: #d3a625; /* Accent lifted for contrast against dark surfaces */ --eb-primary: color-mix(in oklch, var(--eb-accent) 68%, #fff); --eb-primary-hover: color-mix(in srgb, var(--eb-primary), #000 14%); --eb-primary-strong: color-mix(in srgb, var(--eb-primary), #fff 24%); --eb-primary-soft: color-mix(in srgb, var(--eb-primary) 22%, transparent); --eb-primary-rgb: 120, 130, 245; --eb-chrome-bg: rgba(13, 17, 23, 0.8); --eb-glow-a: color-mix(in srgb, var(--eb-primary) 14%, transparent); --eb-glow-b: color-mix(in srgb, var(--eb-primary) 10%, transparent); --eb-striped: rgba(230, 237, 243, 0.045); --eb-inverse-bg: #e6edf3; --eb-inverse-text: #0d1117; --eb-focus-ring: color-mix(in srgb, var(--eb-primary) 35%, transparent); --eb-focus-ring-strong: color-mix(in srgb, var(--eb-primary) 48%, transparent); --eb-accent-filter: brightness(0) saturate(100%) invert(28%) sepia(55%) saturate(5200%) hue-rotate(232deg) brightness(140%) contrast(96%); --eb-dock-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55); --eb-switch-off: #3a414b; --eb-brand-filter: brightness(1.4) saturate(0.9); --eb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --eb-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45); --eb-shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.6); } /* OLED pitch-black refinements on top of the dark base */ :root[data-theme='oled'] { --eb-bg: #000000; --eb-surface: #0b0b0c; --eb-surface-raised: #151517; --eb-border: #1e1e22; --eb-border-strong: #303036; --eb-text: #f1f1f3; --eb-muted: #9898a0; --eb-primary: #7d84f0; --eb-primary-hover: #6f76e4; --eb-primary-strong: #a7a9f8; --eb-primary-soft: rgba(125, 132, 240, 0.16); --eb-primary-rgb: 125, 132, 240; --eb-success: #48c47e; --eb-danger: #f26666; --eb-warning: #d9a64b; /* Accent slightly softened for OLED (less glow, still legible) */ --eb-primary: color-mix(in oklch, var(--eb-accent) 62%, #fff); --eb-primary-hover: color-mix(in srgb, var(--eb-primary), #000 12%); --eb-primary-strong: color-mix(in srgb, var(--eb-primary), #fff 20%); --eb-primary-soft: color-mix(in srgb, var(--eb-primary) 20%, transparent); --eb-primary-rgb: 125, 132, 240; --eb-chrome-bg: rgba(0, 0, 0, 0.85); --eb-glow-a: color-mix(in srgb, var(--eb-primary) 10%, transparent); --eb-glow-b: color-mix(in srgb, var(--eb-primary) 6%, transparent); --eb-striped: rgba(241, 241, 243, 0.05); --eb-inverse-bg: #f1f1f3; --eb-inverse-text: #000000; --eb-focus-ring: color-mix(in srgb, var(--eb-primary) 30%, transparent); --eb-focus-ring-strong: color-mix(in srgb, var(--eb-primary) 45%, transparent); --eb-accent-filter: brightness(0) saturate(100%) invert(32%) sepia(55%) saturate(4800%) hue-rotate(232deg) brightness(128%) contrast(97%); --eb-dock-shadow: 0 -8px 28px rgba(0, 0, 0, 0.8); --eb-switch-off: #303036; --eb-brand-filter: brightness(1.55) saturate(0.85); --eb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); --eb-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 10px 28px rgba(0, 0, 0, 0.6); --eb-shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.8); } /* ---- Retune Bootstrap to the palette ---- */ body { --bs-body-bg: var(--eb-bg); --bs-body-color: var(--eb-text); --bs-primary: var(--eb-primary); --bs-primary-rgb: var(--eb-primary-rgb); --bs-link-color: var(--eb-primary); --bs-link-hover-color: var(--eb-primary-strong); --bs-border-radius: var(--eb-radius-sm); --bs-border-radius-sm: var(--eb-radius-sm); --bs-border-radius-lg: var(--eb-radius-lg); } html, body { height: 100%; } body { margin: 0; font-family: var(--eb-font); font-size: 14.5px; color: var(--eb-text); background: radial-gradient(1100px 420px at 85% -10%, var(--eb-glow-a), transparent 60%), radial-gradient(900px 380px at -10% 110%, var(--eb-glow-b), transparent 60%), var(--eb-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================================== Top app bar ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--eb-topbar-h); padding: 0 22px; background: var(--eb-chrome-bg); backdrop-filter: blur(10px) saturate(1.4); border-bottom: 1px solid var(--eb-border); } .topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { height: 32px; width: auto; filter: var(--eb-brand-filter); } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .brand-sub { font-size: 11.5px; color: var(--eb-muted); white-space: nowrap; } .topbar-actions { display: flex; align-items: center; gap: 8px; } /* ========================================================================== Work area: main workspace + manage sidebar (in flow; toggled by #admin-view) Opening the sidebar reflows the workspace to the left (no overlay/backdrop). ========================================================================== */ .app-main { display: flex; align-items: stretch; } .admin-sidebar { order: 2; flex: 0 0 auto; width: min(400px, 30vw); position: sticky; top: var(--eb-topbar-h); max-height: calc(100vh - var(--eb-topbar-h) - var(--eb-dock-h)); display: flex; flex-direction: column; background: var(--eb-surface); border-left: 1px solid var(--eb-border); box-shadow: var(--eb-shadow-lg); animation: eb-sidebar-in 0.18s ease; } @keyframes eb-sidebar-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .admin-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--eb-border); } .admin-sidebar-title h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; display: flex; align-items: center; } .admin-sidebar-sub { margin: 0; font-size: 12px; color: var(--eb-muted); } .admin-sidebar-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 18px 8px; } .manage-group { margin-bottom: 18px; } .manage-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .manage-group-head h3 { font-size: 13px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; } .manage-count { font-size: 11.5px; font-weight: 700; color: var(--eb-muted); background: var(--eb-primary-soft); color: var(--eb-primary-strong); border: 1px solid var(--eb-border); border-radius: 999px; padding: 1px 8px; } .manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .manage-actions .btn { justify-content: flex-start; text-align: left; font-size: 13px; } .manage-actions .admin-action.active { --bs-btn-active-color: #fff; } .admin-detail { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--eb-border); border-radius: var(--eb-radius); background: var(--eb-surface-raised); } .admin-detail > label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eb-muted); margin-bottom: 6px; } .admin-detail .form-control, .admin-detail .form-select { font-size: 13.5px; } .admin-detail-actions { display: flex; gap: 6px; margin-top: 8px; } .admin-detail-actions .btn-success { --bs-btn-bg: var(--eb-success); --bs-btn-border-color: var(--eb-success); } /* Data tools */ .admin-sidebar-data { padding: 12px 18px 16px; border-top: 1px solid var(--eb-border); background: var(--eb-surface-raised); } .admin-sidebar-data .manage-actions { grid-template-columns: 1fr 1fr; } .admin-sidebar-hint { margin: 8px 0 0; font-size: 12px; color: var(--eb-muted); line-height: 1.45; } /* ========================================================================== Workspace ========================================================================== */ .workspace { order: 1; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: clamp(330px, 30vw, 440px) minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 22px calc(var(--eb-dock-h) + 26px); } .workspace-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; } @media (max-width: 991.98px) { .workspace { grid-template-columns: 1fr; padding-bottom: 22px; } .panel-filters { max-height: none; } } @media (max-width: 767.98px) { .app-main { flex-direction: column; } .admin-sidebar { width: 100%; max-height: none; position: static; border-left: none; } } .panel { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow); padding: 18px 18px 16px; min-width: 0; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--eb-border); } .panel-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 8px; } .panel-head h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient( var(--eb-primary), color-mix(in srgb, var(--eb-primary), #fff 35%) ); } .panel-hint { font-size: 12px; color: var(--eb-muted); text-align: right; } /* ========================================================================== Forms ========================================================================== */ .form-label, .field > label, .field-label { font-size: 12px; font-weight: 600; color: var(--eb-muted); margin-bottom: 6px; display: block; } .form-control, .form-select { border-color: var(--eb-border-strong); border-radius: var(--eb-radius-sm); background-color: var(--eb-surface); font-size: 14px; padding: 8px 12px; } body .form-control:focus, body .form-select:focus { border-color: var(--eb-primary); box-shadow: 0 0 0 3px var(--eb-focus-ring); } .input-group-text { border-color: var(--eb-border-strong); background: var(--eb-surface-raised); color: var(--eb-muted); font-size: 13px; width: 92px; font-weight: 600; } .party-panel-label-width { width: 92px; } /* ========================================================================== Buttons ========================================================================== */ .btn { border-radius: var(--eb-radius-sm); font-weight: 600; letter-spacing: 0.01em; } /* Bootstrap is loaded after this sheet, so rules that retune its button tokens need one extra step of specificity to win; otherwise primary buttons keep Bootstrap's hard-coded blue and ignore the accent. */ body .btn:focus-visible { box-shadow: 0 0 0 3px var(--eb-focus-ring-strong); } .btn-group > .btn { border-radius: 0; } .btn-group > .btn:first-child { border-start-start-radius: var(--eb-radius-sm); border-end-start-radius: var(--eb-radius-sm); } .btn-group > .btn:last-child { border-start-end-radius: var(--eb-radius-sm); border-end-end-radius: var(--eb-radius-sm); } body .btn-primary { --bs-btn-bg: var(--eb-primary); --bs-btn-border-color: var(--eb-primary); --bs-btn-hover-bg: var(--eb-primary-hover); --bs-btn-hover-border-color: var(--eb-primary-hover); --bs-btn-active-bg: var(--eb-primary-hover); --bs-btn-active-border-color: var(--eb-primary-hover); --bs-btn-disabled-bg: var(--eb-primary); --bs-btn-disabled-border-color: var(--eb-primary); } body .btn-outline-primary { --bs-btn-color: var(--eb-primary); --bs-btn-border-color: var(--eb-primary); --bs-btn-hover-bg: var(--eb-primary); --bs-btn-hover-border-color: var(--eb-primary); --bs-btn-active-bg: var(--eb-primary-strong); --bs-btn-active-border-color: var(--eb-primary-strong); --bs-btn-disabled-color: var(--eb-primary); --bs-btn-disabled-border-color: var(--eb-primary); } /* ========================================================================== Theme control -------------------------------------------------------------------------- #theme-toggle lives in the topbar; .theme-option switches live in the manage sidebar ("Theme" group). Both reflect `data-theme` on and behind `aria-checked` (role="switch"). ========================================================================== */ .theme-toggle .theme-icon-light { display: none; } [data-theme='light'] .theme-toggle .theme-icon-light, :root:not([data-theme]) .theme-toggle .theme-icon-light { display: none; } [data-theme='light'] .theme-toggle .theme-icon-dark, :root:not([data-theme]) .theme-toggle .theme-icon-dark { display: inline-block; } [data-theme='dark'] .theme-toggle .theme-icon-dark, [data-theme='oled'] .theme-toggle .theme-icon-dark { display: none; } [data-theme='dark'] .theme-toggle .theme-icon-light, [data-theme='oled'] .theme-toggle .theme-icon-light { display: inline-block; } .theme-options { display: flex; flex-direction: column; gap: 8px; } .theme-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid var(--eb-border); border-radius: var(--eb-radius); background: var(--eb-surface-raised); color: var(--eb-text); font: inherit; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .theme-option:hover:not(:disabled) { border-color: var(--eb-primary); } .theme-option:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--eb-focus-ring-strong); } .theme-option:disabled { opacity: 0.5; cursor: not-allowed; } .theme-option-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--eb-primary-soft); color: var(--eb-primary); font-size: 15px; } .theme-option-copy { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; } .theme-option-name { font-size: 13px; font-weight: 600; } .theme-option-sub { font-size: 11.5px; color: var(--eb-muted); } .theme-option-knob { flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: var(--eb-switch-off); position: relative; transition: background-color 0.15s ease; } .theme-option-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease; } .theme-option[aria-checked='true'] .theme-option-knob { background: var(--eb-primary); } .theme-option[aria-checked='true'] .theme-option-knob::after { transform: translateX(16px); } .theme-option[aria-checked='true'] .theme-option-icon { background: var(--eb-primary); color: var(--eb-inverse-text); } /* Accent colour presets + custom colour editor */ .theme-accent-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--eb-border); } .theme-accent-label span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eb-muted); } .accent-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin-bottom: 10px; } .accent-swatch { position: relative; display: block; width: 100%; aspect-ratio: 1; max-width: 52px; margin: 0 auto; padding: 0; border: 2px solid var(--eb-border); border-radius: var(--eb-radius-sm); background: var(--swatch-accent, var(--eb-accent)); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .accent-swatch:hover { transform: translateY(-1px); border-color: var(--eb-primary); } .accent-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--eb-focus-ring-strong); } .accent-swatch[aria-pressed='true'] { border-color: var(--eb-primary); box-shadow: 0 0 0 2px var(--eb-primary-strong) inset, 0 0 0 3px var(--eb-focus-ring); } .accent-swatch::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.12s ease; } .accent-swatch[aria-pressed='true']::after { opacity: 1; background: transparent; border: 2px solid var(--eb-inverse-text); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.9); } .accent-custom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; } .accent-custom input[type='color'] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-sm); background: var(--eb-surface); cursor: pointer; } .accent-custom input[type='text'] { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .theme-accent-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--eb-muted); } /* ========================================================================== Packs (module selector) ========================================================================== */ .packs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } .packs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eb-muted); } /* Pack selector: a multi-select combobox that takes the row width. Its tag list scrolls once a lot of packs are selected, so hundreds of packs stay manageable. */ .packs-row .packs-combobox { flex: 1 1 260px; min-width: 0; } /* Party player-option facets use the shared facet grid; give them a touch of separation from the pack toggles and from the form controls below. */ #party-options { margin: 0 0 14px; padding: 12px 14px; background: var(--eb-surface-raised); border: 1px solid var(--eb-border); border-radius: var(--eb-radius); } #party-options .packs-row { margin-bottom: 10px; } /* Party player-option facets: labels stack above full-width controls so the selects never collapse, the grid grows with available width (wrapping to one column on narrow panels), and pack selects are grouped by module kind so they stay scannable even with many content packs. */ #party-options .party-options-facets { grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 14px; margin-top: 2px; } #party-options .facet.facet-stacked { flex-direction: column; align-items: stretch; gap: 4px; } #party-options .facet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } #party-options .facet-label { width: auto; min-width: 0; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-combobox-host { width: 100%; min-width: 0; } #party-options .facet .facet-clear { flex: 0 0 auto; width: 22px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--eb-muted); font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } #party-options .facet .facet-clear:hover { color: var(--eb-danger, #dc3545); background: rgba(220, 53, 69, 0.1); } .party-option-count { display: block; margin-top: 8px; font-size: 12.5px; } /* ========================================================================== Combobox (searchable dropdown) Reusable type-to-filter dropdown: a text input with a filterable listbox. Typing narrows options instantly, so long lists (content packs, sources, species, classes) stay readable without a third-party widget. ========================================================================== */ .eb-combobox { position: relative; width: 100%; min-width: 0; } .eb-combobox-input { width: 100%; padding-right: 2rem; } .eb-combobox--has-value .eb-combobox-input { color: var(--eb-primary-strong); font-weight: 600; } .eb-combobox-chevron { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--eb-muted); pointer-events: none; } .eb-combobox-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; max-height: 260px; overflow-y: auto; background: var(--eb-surface); border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius); box-shadow: 0 10px 24px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.08); } .eb-combobox-opt { padding: 6px 12px; font-size: 0.9rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-combobox-opt--selected { font-weight: 600; color: var(--eb-primary-strong); } .eb-combobox-opt--selected::after { content: "\2713"; float: right; margin-left: 8px; color: var(--eb-primary); } .eb-combobox-opt--active { background: var(--eb-primary-soft); color: var(--eb-primary-strong); } .eb-combobox-group { padding: 8px 12px 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eb-muted); } .eb-combobox-empty { padding: 8px 12px; font-size: 0.9rem; font-style: italic; color: var(--eb-muted); } /* Multi-select combobox: selected rows fill with the accent colour and the closed control shows the selection as removable tags, so many packs stay manageable at a glance. */ .eb-combobox--multiple .eb-combobox-input { color: var(--bs-body-color); font-weight: 400; } .eb-combobox--multiple .eb-combobox-opt--active { background: var(--eb-primary-soft); color: var(--eb-primary-strong); } .eb-combobox--multiple .eb-combobox-opt--active.eb-combobox-opt--selected { background: var(--eb-primary); color: #fff; } .eb-combobox--multiple .eb-combobox-opt--selected { background: var(--eb-primary); color: #fff; font-weight: 600; } .eb-combobox--multiple .eb-combobox-opt--selected::after { color: #fff; } .eb-combobox-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-height: 96px; overflow-y: auto; } .eb-combobox-tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--eb-primary); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.6; } .eb-combobox-tag-remove { border: 0; background: transparent; color: inherit; padding: 0 3px; display: inline-flex; align-items: center; font-size: 9px; line-height: 1; opacity: 0.85; cursor: pointer; } .eb-combobox-tag-remove:hover { opacity: 1; } /* ========================================================================== Filters & search ========================================================================== */ .search-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } #search-adversary { flex: 1 1 auto; } .filters-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } #filter-count { display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--eb-primary); color: #fff; font-size: 11px; font-weight: 700; margin-top: 2px; } #filter-count.show { display: inline-flex; } .filter-help { font-size: 12px; color: var(--eb-muted); } /* Filters panel (left column): always visible, own scroll area */ .panel-filters { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - var(--eb-topbar-h) - var(--eb-dock-h) - 40px); } .filters-scroll { min-height: 0; overflow-y: auto; padding-right: 2px; } /* Filter panel: every facet visible side by side (progressive disclosure) */ .filter-panel { margin: 0; padding: 14px; background: var(--eb-surface-raised); border: 1px solid var(--eb-border); border-radius: var(--eb-radius); } /* Packs filter facet: full-width, label above the multi-select control so tags and long option lists stay readable. Its popup opens upward to remain visible inside the panel's own scroll area. */ #filter-panel .facet.facet-stacked { flex-direction: column; align-items: stretch; gap: 4px; } #filter-panel .facet.facet-pack-filter { grid-column: 1 / -1; } #filter-panel .facet.facet-stacked .facet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } #filter-panel .facet.facet-stacked .facet-label { width: auto; min-width: 0; } #filter-panel .facet-pack-filter .eb-combobox-list { top: auto; bottom: calc(100% + 4px); } .facet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 12px; } .facet { display: flex; align-items: center; gap: 6px; min-width: 0; } .facet-label { flex: 0 0 auto; width: 72px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eb-muted); display: flex; align-items: center; gap: 4px; margin: 0; } .facet.active .facet-label { color: var(--eb-primary-strong); } /* active indicator dot */ .facet.active .facet-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--eb-primary); flex: 0 0 auto; } .facet .form-select, .facet .form-control { flex: 1 1 auto; min-width: 0; } .facet-xp { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; } /* XP range row spans the full facet width so both inputs stay usable */ .facet.facet-xp { grid-column: 1 / -1; } .facet-xp .form-control { width: 0; flex: 1 1 0; } .facet-xp-sep { color: var(--eb-muted); font-weight: 600; } .facet-clear { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--eb-muted); border-radius: 50%; } .facet-clear:hover { background: var(--eb-primary-soft); color: var(--eb-primary-strong); } .facet.active .facet-clear { display: inline-flex; } #adversary-count { flex: 0 0 auto; min-width: 80px; text-align: center; padding: 6px 12px; background: var(--eb-inverse-bg); color: var(--eb-inverse-text); border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } #applied-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; min-height: 0; } .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--eb-primary-soft); color: var(--eb-primary-strong); border: 1px solid var(--eb-border); font-size: 12px; } .filter-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; background: transparent; color: var(--eb-primary-strong); border-radius: 50%; font-size: 11px; } .filter-chip-remove:hover { background: var(--eb-primary); color: #fff; } #clear-filters:disabled { opacity: 0.45; } /* ========================================================================== Adversary list ========================================================================== */ #adversary-list { background: var(--eb-surface); border: 1px solid var(--eb-border); border-radius: var(--eb-radius-sm); min-height: 220px; max-height: calc( 100vh - var(--eb-topbar-h) - var(--eb-dock-h) - 240px ); overflow: auto; color: var(--eb-muted); font-size: 13.5px; padding: 4px; } .adversary-table-wrapper { max-height: 100%; overflow: auto; } /* ========================================================================== Tables ========================================================================== */ .table { --bs-table-bg: transparent; --bs-table-striped-color: var(--eb-text); --bs-table-striped-bg: var(--eb-striped); margin-bottom: 0; } .table > :not(caption) > * > * { padding: 9px 12px; border-bottom-color: var(--eb-border); } .table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eb-muted); background: var(--eb-surface-raised); } .sticky-header thead th { position: sticky; top: 0; z-index: 2; background: var(--eb-surface-raised); box-shadow: 0 1px 0 var(--eb-border); } .table-card { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .table-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .table-card-head h3 { font-size: 13.5px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; } .table-card-head .muted-hint { font-size: 12px; color: var(--eb-muted); } .table-scroll { max-height: 300px; overflow: auto; border: 1px solid var(--eb-border); border-radius: var(--eb-radius-sm); } [class*="remove-"] i { pointer-events: none; } .remove-character, .remove-adversary { padding: 3px 8px; } /* ========================================================================== Party member class icon ========================================================================== */ .party-class-icon { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; } .silhouette_color { filter: var(--eb-accent-filter); } /* ========================================================================== Sticky dock (summary bar) ========================================================================== */ .dockbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; min-height: var(--eb-dock-h); padding: 8px 22px; background: var(--eb-chrome-bg); backdrop-filter: blur(10px) saturate(1.4); border-top: 1px solid var(--eb-border); box-shadow: var(--eb-dock-shadow); } .dock-group { display: flex; align-items: center; gap: 8px; } .dock-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eb-muted); } .dock-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Stat boxes */ .stat-box { display: flex; align-items: stretch; overflow: hidden; border-radius: var(--eb-radius-sm); background: var(--eb-surface-raised); border: 1px solid var(--eb-border); box-shadow: var(--eb-shadow-sm); } .stat-label { display: flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--eb-inverse-bg); color: var(--eb-inverse-text); } .stat-value { display: flex; align-items: center; justify-content: center; min-width: 92px; font-size: 15px; font-weight: 700; color: var(--eb-text); padding: 0 4px; } /* ========================================================================== Toast & modal ========================================================================== */ .toast { border: none; border-radius: var(--eb-radius); box-shadow: var(--eb-shadow-lg); } .modal-content { border: none; border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-lg); } .modal-header { border-bottom: 1px solid var(--eb-border); } .modal-footer { border-top: 1px solid var(--eb-border); } /* ========================================================================== Scrollbars ========================================================================== */ * { scrollbar-width: thin; scrollbar-color: var(--eb-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--eb-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } /* ========================================================================== Print ========================================================================== */ @media print { * { font-family: Georgia, "Times New Roman", serif !important; } body > *:not(#print-summary) { display: none !important; } #print-summary { display: block !important; } .print-header img { max-width: 100%; display: block; margin: 0 auto 20px; } .print-title { font-family: Georgia, "Times New Roman", serif !important; color: #6c757d !important; font-size: 28px; font-weight: bold; text-align: center; margin-top: 10px; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } h2, h3 { font-family: Georgia, "Times New Roman", serif !important; color: #6c757d !important; font-weight: bold; text-align: center; font-size: 20px; } .encounter-feedback { border: 2px solid black; padding: 10px; margin-top: 20px; background-color: #f8f9fa; text-align: center; font-style: italic; } } /* ========================================================================== Encounter generator panel ========================================================================== */ #encounter-generator .gen-party-summary { font-size: 12.5px; margin: -6px 0 12px; color: var(--eb-muted); } #encounter-generator .gen-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } #encounter-generator .gen-fieldset { border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-sm); padding: 10px 12px 12px; margin: 0 0 12px; min-width: 0; } #encounter-generator .gen-fieldset legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eb-muted); width: auto; padding: 0 6px; margin: 0; float: none; } #encounter-generator .gen-composition { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } #encounter-generator .gen-composition .btn { flex: 1 1 auto; white-space: nowrap; } #encounter-generator .gen-exact { display: flex; align-items: center; gap: 10px; margin-top: 6px; } #encounter-generator .gen-exact-input { max-width: 90px; } /* Profile facets reuse the stacked label-above-control layout of the party options so long option lists stay readable. */ #encounter-generator .gen-facet-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 12px; } #encounter-generator .facet.facet-stacked { flex-direction: column; align-items: stretch; gap: 4px; } #encounter-generator .facet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } #encounter-generator .facet-label { width: auto; min-width: 0; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #encounter-generator .facet .facet-clear { flex: 0 0 auto; width: 22px; height: 18px; padding: 0; border: 0; background: transparent; color: var(--eb-muted); font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } #encounter-generator .gen-profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; } #encounter-generator .gen-profile-actions { display: flex; gap: 6px; margin-left: auto; } #encounter-generator .gen-match-count { font-size: 12px; } #encounter-generator .gen-actions { display: flex; gap: 8px; margin-top: 2px; } #encounter-generator .gen-generate { flex: 1 1 auto; } #encounter-generator .gen-hint { font-size: 12px; color: var(--eb-muted); margin: 10px 0 0; } #encounter-generator kbd { font-size: 11px; border: 1px solid var(--eb-border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; } #encounter-generator .gen-idle { font-size: 12.5px; line-height: 1.5; margin-top: 10px; color: var(--eb-muted); } #encounter-generator .gen-match-count.searching { color: var(--eb-primary-strong); font-weight: 600; } #encounter-generator .gen-results { margin-top: 12px; border-top: 1px dashed var(--eb-border-strong); padding-top: 10px; } #encounter-generator .gen-result-summary { font-size: 13.5px; font-weight: 600; margin: 0 0 8px; } #encounter-generator .gen-results-list { list-style: none; padding: 0; margin: 0 0 8px; max-height: 260px; overflow: auto; } #encounter-generator .gen-results-list li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--eb-border); } #encounter-generator .gen-results-list li:last-child { border-bottom: none; } #encounter-generator .gen-result-tags { font-size: 11.5px; color: var(--eb-muted); flex: 1 1 100%; padding-left: 4px; } #encounter-generator .gen-result-matched { font-size: 12px; color: var(--eb-muted); margin: 4px 0 8px; } #encounter-generator .gen-result-empty { color: var(--eb-muted); margin: 0; } #encounter-generator .gen-result-warnings { border: 1px solid var(--eb-warning-border, rgba(245, 158, 11, 0.4)); border-radius: var(--eb-radius-sm); background: var(--eb-warning-bg, rgba(245, 158, 11, 0.08)); padding: 8px 10px; font-size: 12.5px; } #encounter-generator .gen-result-warnings strong { display: block; margin-bottom: 4px; } #encounter-generator .gen-result-warnings ul { margin: 0; padding-left: 18px; }