/* ============================================================ AiAxia design system, v1 Tokens + base typography + onboarding surface styles. Theming: brand tokens (color + font) live in :root[data-theme=""] blocks below. Structural tokens (size, space, radius, motion) stay in :root and are shared by every tenant. The tenant slug is set on by the ResolveTenant middleware (server) or the theme switcher script (static preview). ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,400&display=swap"); /* Structural tokens — shared by all tenants */ :root { --size-display: clamp(2.25rem, 4.4vw, 3.25rem); --size-headline: clamp(1.625rem, 2.8vw, 2.125rem); --size-title: 1.25rem; --size-body: 1rem; --size-body-large: 1.0625rem; --size-label: 0.8125rem; --size-tiny: 0.75rem; --line-display: 1.08; --line-headline: 1.18; --line-body: 1.55; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --transition-quart: 250ms cubic-bezier(0.5, 1, 0.89, 1); --transition-soft: 180ms cubic-bezier(0.5, 1, 0.89, 1); --color-danger: oklch(48% 0.16 25); --color-danger-soft: oklch(94% 0.04 25); } /* Default theme = AiAxia. Applied when no [data-theme] is set so the page never flashes unstyled if middleware fails. */ :root, :root[data-theme="aiaxia"] { --color-accent: oklch(58% 0.10 130); --color-accent-deep: oklch(45% 0.12 130); --color-accent-soft: oklch(92% 0.05 130); --color-ink: oklch(22% 0.01 130); --color-ink-soft: oklch(35% 0.008 130); --color-whisper: oklch(55% 0.005 130); --color-parchment: oklch(98% 0.005 95); --color-field-cream: oklch(96% 0.008 95); --color-margin: oklch(88% 0.01 130); --color-margin-soft: oklch(93% 0.008 130); --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --shadow-modal: 0 12px 40px -12px oklch(20% 0.02 130 / 0.18); } /* EduAsiste — extracted from https://eduasiste.org/ (April 2026). Source palette: --accent #0077B6, --accent-dark #03045E, --accent-light #DBEBFF, page #f8fafc, card #ffffff, text #1e293b, muted #475569, border #e2e8f0. Inter-only typography (weights 400-800); no serif lane. */ :root[data-theme="eduasiste"] { --color-accent: oklch(53% 0.135 235); /* #0077B6 */ --color-accent-deep: oklch(20% 0.16 275); /* #03045E */ --color-accent-soft: oklch(94% 0.034 245); /* #DBEBFF */ --color-ink: oklch(28% 0.04 257); /* #1e293b */ --color-ink-soft: oklch(46% 0.04 257); /* #475569 */ --color-whisper: oklch(58% 0.025 257); --color-parchment: oklch(98.4% 0.003 247); /* #f8fafc */ --color-field-cream: oklch(99.5% 0.002 247); /* near-white card surface */ --color-margin: oklch(91% 0.013 248); /* #e2e8f0 */ --color-margin-soft: oklch(95% 0.008 248); --font-serif: "Inter", -apple-system, system-ui, sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --shadow-modal: 0 12px 40px -12px oklch(28% 0.04 257 / 0.18); } /* EduAsiste: heavier display weight, tighter letter-spacing — eduasiste.org carries weight 800 with -0.03em on hero h1; we mirror it on .ob-leadin without changing structure. */ :root[data-theme="eduasiste"] .ob-leadin, :root[data-theme="eduasiste"] .t-display { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em; color: var(--color-accent-deep); } :root[data-theme="eduasiste"] .ob-headline, :root[data-theme="eduasiste"] .t-headline { font-family: var(--font-sans); font-weight: 700; color: var(--color-accent-deep); } :root[data-theme="eduasiste"] .ob-btn--primary { border-radius: 10px; font-weight: 700; } :root[data-theme="eduasiste"] .ob-input, :root[data-theme="eduasiste"] .ob-textarea { border-radius: 8px; } :root[data-theme="eduasiste"] .ob-drop, :root[data-theme="eduasiste"] .ob-complete-summary { border-radius: 14px; } /* ProAsiste — warm brown identity. Type/structure derived from the TwinCloud chat shell (ctwin.ai); palette overridden to a leather-and- parchment register: caramel accent, espresso depth, tan neutrals. */ :root[data-theme="proasiste"] { --color-accent: oklch(52% 0.11 55); /* warm caramel */ --color-accent-deep: oklch(30% 0.06 50); /* espresso */ --color-accent-soft: oklch(94% 0.04 75); /* pale tan */ --color-ink: oklch(22% 0.025 55); /* dark coffee */ --color-ink-soft: oklch(46% 0.025 55); /* medium brown */ --color-whisper: oklch(60% 0.015 60); --color-parchment: oklch(98% 0.008 80); /* cream paper */ --color-field-cream: oklch(96% 0.014 75); /* warmer cream */ --color-margin: oklch(89% 0.015 60); --color-margin-soft: oklch(94% 0.010 60); --font-serif: system-ui, "Segoe UI", Roboto, sans-serif; --font-sans: system-ui, "Segoe UI", Roboto, sans-serif; --shadow-modal: 0 10px 15px -3px oklch(22% 0.02 55 / 0.10), 0 4px 6px -2px oklch(22% 0.02 55 / 0.05); } /* ProAsiste: H1 weight 500 + tight tracking, source headings are system-ui weight 500 with letter-spacing ratio -1.68/56 ≈ -0.03em. */ :root[data-theme="proasiste"] .ob-leadin, :root[data-theme="proasiste"] .t-display { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.03em; color: var(--color-ink); } :root[data-theme="proasiste"] .ob-headline, :root[data-theme="proasiste"] .t-headline { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); } :root[data-theme="proasiste"] .ob-btn--primary { border-radius: 8px; font-weight: 600; } :root[data-theme="proasiste"] .ob-input, :root[data-theme="proasiste"] .ob-textarea { border-radius: 6px; } :root[data-theme="proasiste"] .ob-drop, :root[data-theme="proasiste"] .ob-complete-summary { border-radius: 8px; } /* Reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--color-parchment); color: var(--color-ink); font-family: var(--font-sans); font-size: 16px; line-height: var(--line-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; } button { font-family: inherit; font-size: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } ::selection { background: var(--color-accent-soft); color: var(--color-ink); } /* Typography primitives */ .t-serif { font-family: var(--font-serif); } .t-display { font-family: var(--font-serif); font-size: var(--size-display); line-height: var(--line-display); font-weight: 400; letter-spacing: -0.005em; margin: 0; } .t-headline { font-family: var(--font-serif); font-size: var(--size-headline); line-height: var(--line-headline); font-weight: 400; letter-spacing: -0.005em; margin: 0; } .t-body { font-size: var(--size-body); line-height: var(--line-body); margin: 0; } .t-label { font-size: var(--size-label); font-weight: 500; letter-spacing: 0.02em; color: var(--color-ink-soft); margin: 0; } .t-helper { font-size: var(--size-label); color: var(--color-whisper); margin: 0; } /* ============================================================ Onboarding surface ============================================================ */ .ob-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--color-parchment); } .ob-topbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-6); font-size: var(--size-label); color: var(--color-whisper); letter-spacing: 0.04em; } .ob-wordmark { font-family: var(--font-serif); font-weight: 500; font-size: var(--size-title); letter-spacing: 0; color: var(--color-ink); font-style: italic; } .ob-brand { display: inline-flex; align-items: center; gap: 10px; } .ob-logo { height: 32px; width: auto; display: block; } .ob-logo[hidden] { display: none; } /* Static-preview theme switcher (not used in production Laravel) */ .ob-theme-switcher { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--color-margin); border-radius: 999px; background: var(--color-field-cream); } .ob-theme-switcher button { font-family: inherit; font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.02em; padding: 4px 12px; border: none; border-radius: 999px; background: transparent; color: var(--color-whisper); cursor: pointer; transition: background var(--transition-soft), color var(--transition-soft); } .ob-theme-switcher button:hover { color: var(--color-ink); } .ob-theme-switcher button[aria-pressed="true"] { background: var(--color-parchment); color: var(--color-ink); box-shadow: 0 1px 2px oklch(20% 0 0 / 0.06); } .ob-progress { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--color-ink-soft); } .ob-stage { display: grid; grid-template-rows: 1fr auto; padding: 0 var(--space-6) var(--space-7); } /* Onboarding inside the dashboard center column — no full-bleed centering. */ .ob-stage--in-dash { display: block; padding: var(--space-5) var(--space-6) var(--space-7); max-width: 720px; margin: 0 auto; } .ob-stage--in-dash .ob-content { padding-top: var(--space-5); max-width: none; } .ob-stage--in-dash .ob-progress { margin: 0 0 var(--space-4); font-size: var(--size-tiny); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-whisper); } .ob-content { width: 100%; max-width: 560px; margin: 0 auto; padding-top: var(--space-9); padding-bottom: var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); } .ob-content > * { margin: 0; } .ob-leadin { font-family: var(--font-serif); font-size: var(--size-display); line-height: var(--line-display); font-weight: 400; color: var(--color-ink); letter-spacing: -0.005em; max-width: 22ch; } .ob-subhead { font-size: var(--size-body-large); color: var(--color-ink-soft); max-width: 60ch; } /* Form field stack */ .ob-fields { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; border: none; } .ob-field { display: flex; flex-direction: column; gap: var(--space-2); } .ob-field-label { font-size: var(--size-label); font-weight: 500; letter-spacing: 0.01em; color: var(--color-ink-soft); } .ob-field-helper { font-size: var(--size-label); color: var(--color-whisper); margin-top: var(--space-1); } .ob-field-error { font-size: var(--size-label); color: var(--color-danger); margin-top: var(--space-1); } .ob-input, .ob-textarea { width: 100%; padding: 14px 16px; font-family: inherit; font-size: var(--size-body-large); line-height: 1.45; color: var(--color-ink); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); transition: border-color var(--transition-soft), box-shadow var(--transition-soft), background var(--transition-soft); -webkit-appearance: none; appearance: none; } .ob-input::placeholder, .ob-textarea::placeholder { color: var(--color-whisper); } .ob-input:hover, .ob-textarea:hover { border-color: var(--color-ink-soft); } .ob-input:focus, .ob-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); background: var(--color-parchment); } .ob-textarea { resize: vertical; min-height: 120px; } .ob-input--invalid, .ob-textarea--invalid { border-color: var(--color-danger); } /* CTA row */ .ob-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; } @media (min-width: 560px) { .ob-actions { flex-direction: row-reverse; align-items: center; justify-content: flex-start; } } .ob-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 14px 24px; font-family: inherit; font-size: var(--size-body); font-weight: 500; line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--color-ink); transition: background var(--transition-soft), color var(--transition-soft), border-color var(--transition-soft); } .ob-btn--primary { background: var(--color-accent); color: var(--color-parchment); } .ob-btn--primary:hover { background: var(--color-accent-deep); } .ob-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); } .ob-btn--primary[disabled], .ob-btn--primary[aria-disabled="true"] { background: var(--color-margin); color: var(--color-whisper); cursor: not-allowed; } .ob-btn--ghost { color: var(--color-ink-soft); } .ob-btn--ghost:hover { color: var(--color-ink); } .ob-btn-arrow { display: inline-block; transform: translateY(-1px); } .ob-back { align-self: flex-start; margin-top: var(--space-7); padding: 6px 0; background: transparent; border: none; color: var(--color-whisper); font-size: var(--size-label); letter-spacing: 0.01em; cursor: pointer; } .ob-back:hover { color: var(--color-ink-soft); } .ob-back:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; } /* Save state indicator */ .ob-save-state { font-size: var(--size-tiny); color: var(--color-whisper); letter-spacing: 0.04em; text-transform: uppercase; min-height: 16px; display: flex; align-items: center; gap: var(--space-2); } .ob-save-state--success::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } /* Welcome screen */ .ob-welcome { align-items: flex-start; } .ob-welcome .ob-leadin { max-width: 28ch; } /* Drag-drop / upload */ .ob-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); border: 1px dashed var(--color-margin); border-radius: var(--radius-lg); background: var(--color-field-cream); text-align: center; transition: background var(--transition-soft), border-color var(--transition-soft); } .ob-drop--dragging { background: var(--color-accent-soft); border-color: var(--color-accent); } .ob-drop-prompt { font-size: var(--size-body); color: var(--color-ink-soft); } .ob-drop-or { font-size: var(--size-tiny); color: var(--color-whisper); letter-spacing: 0.08em; text-transform: uppercase; } .ob-drop-browse { display: inline-flex; align-items: center; padding: 10px 20px; font-size: var(--size-body); font-weight: 500; color: var(--color-ink); background: var(--color-parchment); border: 1px solid var(--color-margin); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-soft), color var(--transition-soft); } .ob-drop-browse:hover { border-color: var(--color-ink-soft); } .ob-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ob-files { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .ob-file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; border: 1px solid var(--color-margin-soft); border-radius: var(--radius-md); background: var(--color-parchment); font-size: var(--size-body); } .ob-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ob-file-name { color: var(--color-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ob-file-size { color: var(--color-whisper); font-size: var(--size-tiny); } .ob-file-remove { background: transparent; border: none; color: var(--color-whisper); font-size: var(--size-label); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); } .ob-file-remove:hover { color: var(--color-danger); background: var(--color-danger-soft); } /* Skip link + popover */ .ob-skip-row { position: relative; margin-top: var(--space-4); text-align: center; } .ob-skip-link { background: transparent; border: none; color: var(--color-whisper); font-size: var(--size-label); cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); } .ob-skip-link:hover { color: var(--color-ink-soft); } .ob-popover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 280px; padding: var(--space-4) var(--space-5); background: var(--color-parchment); border: 1px solid var(--color-margin); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); display: none; z-index: 10; } .ob-popover[data-open="true"] { display: block; } .ob-popover-title { font-size: var(--size-label); color: var(--color-ink-soft); font-weight: 500; margin-bottom: var(--space-3); } .ob-popover-options { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .ob-popover-option { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; font-size: var(--size-body); color: var(--color-ink); cursor: pointer; } .ob-popover-option input { accent-color: var(--color-accent); margin: 0; } .ob-popover-actions { display: flex; gap: var(--space-3); justify-content: flex-end; } .ob-popover-actions button { padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-margin); background: transparent; font-size: var(--size-label); color: var(--color-ink-soft); cursor: pointer; } .ob-popover-actions button[type="submit"] { background: var(--color-ink); color: var(--color-parchment); border-color: var(--color-ink); } .ob-popover-actions button[type="submit"]:hover { background: oklch(28% 0.01 130); } /* Completion screen */ .ob-complete-summary { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-left: none; background: var(--color-field-cream); border-radius: var(--radius-lg); border: 1px solid var(--color-margin-soft); } .ob-complete-line { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--size-body); color: var(--color-ink-soft); } .ob-complete-line::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); transform: translateY(-3px); flex-shrink: 0; } .ob-complete-line strong { color: var(--color-ink); font-weight: 600; } /* ============================================================ Dashboard surface (mocks — Imagine / Map / Connect / Deliver) ============================================================ */ .dash-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--color-parchment); } .dash-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-9); display: flex; flex-direction: column; gap: var(--space-7); } .dash-greeting { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .dash-greeting h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.005em; color: var(--color-ink); margin: 0; } :root[data-theme="eduasiste"] .dash-greeting h1, :root[data-theme="proasiste"] .dash-greeting h1 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; } :root[data-theme="eduasiste"] .dash-greeting h1 { color: var(--color-accent-deep); font-weight: 800; letter-spacing: -0.03em; } .dash-project-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--color-margin); border-radius: 999px; font-size: var(--size-label); color: var(--color-ink-soft); background: var(--color-field-cream); } .dash-project-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); } /* Stage spine — accruing four-stage progression */ .dash-spine { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--color-margin); border-bottom: 1px solid var(--color-margin); } .dash-spine-step { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; text-decoration: none; color: var(--color-whisper); transition: color var(--transition-soft); } .dash-spine-step:hover { color: var(--color-ink-soft); } .dash-spine-step__index { font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .dash-spine-step__label { font-family: var(--font-serif); font-size: var(--size-title); font-weight: 500; color: inherit; letter-spacing: 0; } :root[data-theme="eduasiste"] .dash-spine-step__label, :root[data-theme="proasiste"] .dash-spine-step__label { font-family: var(--font-sans); font-weight: 600; } .dash-spine-step__hint { font-size: var(--size-label); color: var(--color-whisper); line-height: 1.4; } .dash-spine-step--complete { color: var(--color-ink-soft); } .dash-spine-step--complete .dash-spine-step__index::after { content: " ✓"; color: var(--color-accent); } .dash-spine-step--current { color: var(--color-ink); border-top: 2px solid var(--color-accent); margin-top: -1px; padding-top: var(--space-3); } .dash-spine-step--current .dash-spine-step__index { color: var(--color-accent-deep); } /* Two-pane content grid */ .dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-7); } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } } /* Section + lists */ .dash-section { display: flex; flex-direction: column; gap: var(--space-4); } .dash-section h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin: 0; color: var(--color-ink); } :root[data-theme="eduasiste"] .dash-section h2, :root[data-theme="proasiste"] .dash-section h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; } .dash-section-meta { font-size: var(--size-label); color: var(--color-whisper); } .dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dash-list-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-margin-soft); } .dash-list-item:last-child { border-bottom: none; } .dash-list-item__index { flex-shrink: 0; width: 28px; font-family: var(--font-serif); font-size: var(--size-body-large); color: var(--color-whisper); font-variant-numeric: tabular-nums; font-weight: 500; } .dash-list-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .dash-list-item__title { color: var(--color-ink); font-weight: 500; } .dash-list-item__meta { font-size: var(--size-label); color: var(--color-whisper); } .dash-list-item__action { background: transparent; border: none; font-size: var(--size-label); color: var(--color-ink-soft); cursor: pointer; padding: 4px 0; } .dash-list-item__action:hover { color: var(--color-accent-deep); } /* Add row */ .dash-add-row { display: flex; gap: var(--space-3); margin-top: var(--space-3); } /* Twin chat companion panel */ .dash-twin { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--color-field-cream); border: 1px solid var(--color-margin-soft); border-radius: var(--radius-lg); align-self: start; position: sticky; top: var(--space-5); } .dash-twin h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--size-title); margin: 0; color: var(--color-ink); } :root[data-theme="eduasiste"] .dash-twin h3, :root[data-theme="proasiste"] .dash-twin h3 { font-family: var(--font-sans); font-weight: 700; } .dash-twin-thread { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--size-label); line-height: 1.5; } .dash-twin-msg { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; max-width: 90%; } .dash-twin-msg--twin { align-self: flex-start; background: var(--color-parchment); border: 1px solid var(--color-margin-soft); color: var(--color-ink); } .dash-twin-msg--user { align-self: flex-end; background: var(--color-accent-soft); color: var(--color-ink); } .dash-twin-msg__role { font-size: var(--size-tiny); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-whisper); } .dash-twin-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 16px; background: var(--color-accent); color: var(--color-parchment); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--size-body); font-weight: 500; cursor: pointer; text-decoration: none; } .dash-twin-cta:hover { background: var(--color-accent-deep); color: var(--color-parchment); } /* Deliverables */ .dash-deliverables { border-top: 1px solid var(--color-margin); padding-top: var(--space-6); } .dash-deliverables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); } @media (max-width: 700px) { .dash-deliverables-grid { grid-template-columns: 1fr; } } .dash-deliverable { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); background: var(--color-field-cream); border: 1px solid var(--color-margin-soft); border-radius: var(--radius-md); } .dash-deliverable--locked { opacity: 0.5; } .dash-deliverable__name { font-family: var(--font-serif); font-weight: 500; font-size: var(--size-body-large); color: var(--color-ink); } :root[data-theme="eduasiste"] .dash-deliverable__name, :root[data-theme="proasiste"] .dash-deliverable__name { font-family: var(--font-sans); font-weight: 700; } .dash-deliverable__meta { font-size: var(--size-label); color: var(--color-whisper); } .dash-deliverable__lock-tag { font-size: var(--size-tiny); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-whisper); margin-top: var(--space-2); } /* Stage interior header */ .dash-stage-header { display: flex; flex-direction: column; gap: var(--space-2); } .dash-stage-header__eyebrow { font-size: var(--size-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-deep); } .dash-stage-header h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.005em; color: var(--color-ink); margin: 0; } :root[data-theme="eduasiste"] .dash-stage-header h1 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em; color: var(--color-accent-deep); } :root[data-theme="proasiste"] .dash-stage-header h1 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.03em; } .dash-stage-header__lede { font-size: var(--size-body-large); color: var(--color-ink-soft); max-width: 60ch; } /* Crumb + back */ .dash-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-label); color: var(--color-whisper); text-decoration: none; } .dash-crumb:hover { color: var(--color-ink-soft); } .dash-crumb::before { content: "←"; display: inline-block; } /* Inline editor look for "Add a pain point" rows */ .dash-add { display: flex; gap: var(--space-3); align-items: stretch; } .dash-add input { flex: 1; padding: 12px 14px; font-family: inherit; font-size: var(--size-body); color: var(--color-ink); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); } .dash-add input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .dash-add button { padding: 12px 20px; font-family: inherit; font-weight: 500; border: 1px solid var(--color-margin); border-radius: var(--radius-md); background: var(--color-parchment); color: var(--color-ink); cursor: pointer; } .dash-add button:hover { border-color: var(--color-ink-soft); } /* Compact twin transcripts on stage interiors */ .dash-transcript { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-field-cream); border: 1px solid var(--color-margin-soft); border-radius: var(--radius-md); font-size: var(--size-label); color: var(--color-ink-soft); line-height: 1.5; } .dash-transcript-meta { font-size: var(--size-tiny); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-whisper); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Server-rendered errors block */ .ob-errors { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-danger-soft); border: 1px solid var(--color-danger); border-radius: var(--radius-md); color: var(--color-danger); font-size: var(--size-label); } .ob-errors ul { margin: 0; padding-left: var(--space-5); } /* ============================================================ Dashboard v2 — workspace shell Topbar (logo + org name + user menu) over a 3-column body (left nav, center content, right twin chat rail). ============================================================ */ .dash-shell-v2 { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-parchment); } /* Topbar v2 */ .dash-topbar-v2 { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--color-parchment); border-bottom: 1px solid var(--color-margin); } .dash-topbar-v2__brand { display: inline-flex; align-items: center; gap: var(--space-3); } .dash-topbar-v2__logo { width: 75px; height: 75px; flex: 0 0 75px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--space-2); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); overflow: hidden; } .dash-topbar-v2__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .dash-topbar-v2__logo--placeholder { font-family: var(--font-serif); font-size: var(--size-title); font-weight: 500; color: var(--color-whisper); letter-spacing: 0.02em; } .dash-topbar-v2__company { font-family: var(--font-serif); font-weight: 500; font-size: var(--size-headline); line-height: var(--line-headline); color: var(--color-ink); letter-spacing: -0.005em; } :root[data-theme="eduasiste"] .dash-topbar-v2__company, :root[data-theme="proasiste"] .dash-topbar-v2__company { font-family: var(--font-sans); font-weight: 700; } :root[data-theme="proasiste"] .dash-topbar-v2__company { font-weight: 500; letter-spacing: -0.01em; } .dash-topbar-v2__spacer { flex: 1 1 auto; } .dash-topbar-v2__version-toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; margin-right: var(--space-3); font-size: var(--size-label); color: var(--color-ink-soft); text-decoration: none; border: 1px dashed var(--color-margin); border-radius: var(--radius-sm); transition: background var(--transition-soft), color var(--transition-soft), border-color var(--transition-soft); } .dash-topbar-v2__version-toggle:hover, .dash-topbar-v2__version-toggle:focus-visible { background: var(--color-field-cream); color: var(--color-ink); border-color: var(--color-ink-soft); outline: none; } .dash-topbar-v2__user { position: relative; } .dash-topbar-v2__user-trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; font-family: inherit; font-size: var(--size-body); font-weight: 500; color: var(--color-ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); transition: background var(--transition-soft), border-color var(--transition-soft); } .dash-topbar-v2__user-trigger:hover, .dash-topbar-v2__user-trigger[aria-expanded="true"] { background: var(--color-field-cream); border-color: var(--color-margin); } .dash-topbar-v2__user-trigger::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--color-ink-soft); border-bottom: 1.5px solid var(--color-ink-soft); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--transition-soft); } .dash-topbar-v2__user-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); } /* User menu popover */ .dash-usermenu { position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px; padding: var(--space-2); background: var(--color-parchment); border: 1px solid var(--color-margin); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); display: none; z-index: 30; } .dash-usermenu[data-open="true"] { display: block; } .dash-usermenu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 10px 12px; font-family: inherit; font-size: var(--size-body); color: var(--color-ink); background: transparent; border: none; border-radius: var(--radius-sm); text-align: left; cursor: pointer; transition: background var(--transition-soft); } .dash-usermenu__item:hover, .dash-usermenu__item:focus-visible { background: var(--color-field-cream); outline: none; } .dash-usermenu__divider { height: 1px; margin: var(--space-2) 0; background: var(--color-margin-soft); } /* 3-column body */ .dash-body { flex: 1 1 auto; display: grid; grid-template-columns: 232px 1fr 360px; min-height: 0; } .dash-body--rail-collapsed { grid-template-columns: 232px 1fr 56px; } /* Hamburger button at top of left nav rail. Toggles drawer overlay (with labels) at narrow viewports; hidden at desktop where labels already render inline. */ .dash-nav__hamburger { display: none; width: 40px; height: 40px; margin: 0 auto var(--space-2); align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 22px; cursor: pointer; color: var(--color-ink); padding: 0; } .dash-nav__hamburger:hover, .dash-nav__hamburger:focus-visible { background: var(--color-field-cream); border-color: var(--color-margin); outline: none; } @media (max-width: 1024px) { .dash-body, .dash-body--rail-collapsed { grid-template-columns: 200px 1fr 56px; } } /* Narrow viewport (≤640px). QA target: iPhone 16 Pro at 402×874 CSS px. Layout stays fluid 320–640; design must be visually correct at 402×874. Both rails always visible as collapsed icon strips. Hamburger at top of left nav opens labels drawer. Speech-bubble at top of right rail triggers fullscreen chat. */ @media (max-width: 640px) { .dash-body, .dash-body--rail-collapsed { grid-template-columns: 56px 1fr 56px; } /* Left nav: collapsed icon rail with hamburger at top */ .dash-nav { padding: var(--space-3) 0; } .dash-nav__group-label, .dash-nav__label { display: none; } .dash-nav__item { justify-content: center; padding: 12px 0; } .dash-nav__hamburger { display: inline-flex; } /* Right rail: force collapsed state at narrow (overrides expanded class so leftover localStorage state can't blow up the layout). */ .dash-twin-rail:not(.dash-twin-rail--fullscreen) { align-items: center; padding: var(--space-3) 0; } .dash-twin-rail:not(.dash-twin-rail--fullscreen) .dash-twin-rail__header, .dash-twin-rail:not(.dash-twin-rail--fullscreen) .dash-twin-rail__body { display: none; } .dash-twin-rail:not(.dash-twin-rail--fullscreen) .dash-twin-rail__rail-toggle { display: inline-flex; } /* Hide desktop-only "← Classic dashboard" link to save topbar space */ .dash-topbar-v2__version-toggle { display: none; } /* Truncate company name so topbar doesn't overflow */ .dash-topbar-v2__company { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dash-topbar-v2__brand { min-width: 0; flex: 1 1 auto; } /* Nav drawer overlay state — hamburger opens nav with labels */ .dash-nav.dash-nav--drawer-open { position: fixed; inset: 56px 0 0 0; width: min(80vw, 280px); z-index: 60; box-shadow: 0 4px 18px oklch(20% 0.02 80 / 0.18); background: var(--color-parchment); padding: var(--space-4) var(--space-3); overflow-y: auto; } .dash-nav.dash-nav--drawer-open .dash-nav__group-label, .dash-nav.dash-nav--drawer-open .dash-nav__label { display: revert; } .dash-nav.dash-nav--drawer-open .dash-nav__item { justify-content: flex-start; padding: 10px var(--space-3); } .dash-nav.dash-nav--drawer-open .dash-nav__hamburger { margin-left: auto; margin-right: 0; } /* Backdrop when nav drawer is open */ .dash-shell-v2.dash-shell-v2--drawer-open::before { content: ""; position: fixed; inset: 56px 0 0 0; background: oklch(20% 0.02 80 / 0.32); z-index: 55; } } /* Left nav */ .dash-nav { border-right: 1px solid var(--color-margin); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); background: var(--color-parchment); } .dash-nav__group-label { margin-top: var(--space-4); padding: 0 var(--space-3); font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-whisper); } .dash-nav__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); font-size: var(--size-body); font-weight: 500; color: var(--color-ink-soft); border-radius: var(--radius-md); transition: background var(--transition-soft), color var(--transition-soft); } .dash-nav__item:hover { background: var(--color-field-cream); color: var(--color-ink); } .dash-nav__item--active { background: var(--color-accent-soft); color: var(--color-accent-deep); } :root[data-theme="aiaxia"] .dash-nav__item--active { color: var(--color-ink); } /* Locked nav items during onboarding — dimmed, non-clickable. */ .dash-nav__item--locked { opacity: 0.5; cursor: not-allowed; color: var(--color-whisper); } .dash-nav__item--locked:hover { background: transparent; } .dash-nav__icon { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .dash-nav__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* Static-preview helper: hide the nav branch that doesn't match the resolved tenant. Production Blade renders one branch only based on $tenant->slug. */ .dash-nav__group { display: contents; } :root[data-theme="eduasiste"] .dash-nav__group--business { display: none; } :root:not([data-theme="eduasiste"]) .dash-nav__group--school { display: none; } .dash-nav__label { flex: 1 1 auto; } /* Center column */ .dash-center { flex: 1 1 auto; overflow-y: auto; padding: var(--space-7) var(--space-6); min-width: 0; } .dash-center > .dash-greeting:first-child, .dash-center > .dash-stage-header:first-child { margin-top: 0; } /* Twin rail (right column) */ .dash-twin-rail { border-left: 1px solid var(--color-margin); background: var(--color-parchment); display: flex; flex-direction: column; min-width: 0; position: relative; } .dash-twin-rail__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--color-margin-soft); } .dash-twin-rail__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--size-body-large); color: var(--color-ink); margin: 0; } :root[data-theme="eduasiste"] .dash-twin-rail__title, :root[data-theme="proasiste"] .dash-twin-rail__title { font-family: var(--font-sans); font-weight: 700; } .dash-twin-rail__toggle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-margin); border-radius: var(--radius-sm); color: var(--color-ink-soft); transition: background var(--transition-soft), border-color var(--transition-soft); } .dash-twin-rail__toggle:hover { background: var(--color-field-cream); border-color: var(--color-ink-soft); color: var(--color-ink); } .dash-twin-rail__body { flex: 1 1 auto; padding: var(--space-4); overflow-y: auto; } .dash-twin-rail__iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); } /* Onboarding rail variant — narration + sign-out footer. */ .dash-twin-rail--onboarding { display: flex; flex-direction: column; } .dash-twin-rail--onboarding .dash-twin-rail__body { display: flex; flex-direction: column; gap: var(--space-3); } .rail-footer { border-top: 1px solid var(--color-margin); padding: var(--space-3) var(--space-4); } .rail-footer__signout-form { margin: 0; } .rail-footer__signout { background: transparent; border: 0; padding: 0; font-size: var(--size-label); color: var(--color-whisper); cursor: pointer; text-decoration: none; } .rail-footer__signout:hover { color: var(--color-ink); text-decoration: underline; } .dash-twin-rail__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-ink-soft); font-size: var(--size-label); } /* Collapsed state */ .dash-twin-rail--collapsed { align-items: center; padding: var(--space-3) 0; } .dash-twin-rail--collapsed .dash-twin-rail__header, .dash-twin-rail--collapsed .dash-twin-rail__body { display: none; } .dash-twin-rail--collapsed .dash-twin-rail__rail-toggle { display: inline-flex; } .dash-twin-rail__rail-toggle { display: none; position: relative; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); color: var(--color-ink-soft); font-size: 18px; margin-top: var(--space-2); } .dash-twin-rail__rail-toggle:hover { background: var(--color-accent-soft); color: var(--color-accent-deep); } .dash-twin-rail__pulse { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; border: 2px solid var(--color-parchment); } /* Header action group (pop-out, fullscreen-close, collapse) */ .dash-twin-rail__actions { display: inline-flex; align-items: center; gap: var(--space-2); } .dash-twin-rail__action { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-margin); border-radius: var(--radius-sm); color: var(--color-ink-soft); font-size: 16px; text-decoration: none; transition: background var(--transition-soft), border-color var(--transition-soft), color var(--transition-soft); } .dash-twin-rail__action:hover, .dash-twin-rail__action:focus-visible { background: var(--color-field-cream); border-color: var(--color-ink-soft); color: var(--color-ink); outline: none; } /* Close button hidden by default, shown only when rail is fullscreen */ .dash-twin-rail__action--fullscreen-close { display: none; } .dash-twin-rail--fullscreen .dash-twin-rail__action--fullscreen-close { display: inline-flex; width: 44px; height: 44px; font-size: 22px; background: var(--color-ink); color: var(--color-parchment); border-color: var(--color-ink); font-weight: 600; } .dash-twin-rail--fullscreen .dash-twin-rail__action--fullscreen-close:hover, .dash-twin-rail--fullscreen .dash-twin-rail__action--fullscreen-close:focus-visible { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-parchment); } /* Make the rail header obvious when fullscreen — sticky, distinct background */ .dash-twin-rail--fullscreen .dash-twin-rail__header { position: sticky; top: 0; z-index: 1; background: var(--color-parchment); border-bottom: 1px solid var(--color-margin); padding: var(--space-3) var(--space-4); } .dash-twin-rail--fullscreen .dash-twin-rail__title { font-size: var(--size-headline, 1.25rem); } /* Fullscreen rail (mobile primary use, also available on desktop) */ .dash-twin-rail--fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; border-left: none; display: flex !important; } .dash-twin-rail--fullscreen .dash-twin-rail__header, .dash-twin-rail--fullscreen .dash-twin-rail__body { display: flex; } .dash-twin-rail--fullscreen .dash-twin-rail__body { flex-direction: column; } /* In fullscreen mode hide the desktop collapse toggle (it has no meaning) */ .dash-twin-rail--fullscreen .dash-twin-rail__toggle { display: none; } /* Lock body scroll while fullscreen rail is active */ body.dash-twin-rail-locked { overflow: hidden; } /* Mobile FAB to summon the rail (visible only ≤720px when twin available) */ .dash-twin-fab { display: none; position: fixed; right: var(--space-4); bottom: var(--space-4); width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-parchment); border: none; box-shadow: var(--shadow-modal); font-size: 22px; z-index: 50; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--transition-soft); } .dash-twin-fab:hover, .dash-twin-fab:focus-visible { transform: translateY(-2px); outline: none; } @media (max-width: 640px) { /* FAB hidden at narrow — header chat toggle replaces it. */ .dash-twin-fab { display: none; } /* Override the default hide-at-narrow rule when fullscreen is requested */ .dash-twin-rail--fullscreen { display: flex !important; } } /* Management table primitives (CSS grid, not ) */ .dash-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-margin); border-radius: var(--radius-md); background: var(--color-parchment); overflow: hidden; } .dash-table__header, .dash-table__row { display: grid; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .dash-table__header { background: var(--color-field-cream); font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-whisper); border-bottom: 1px solid var(--color-margin); } .dash-table__row { border-bottom: 1px solid var(--color-margin-soft); font-size: var(--size-body); color: var(--color-ink); transition: background var(--transition-soft); } .dash-table__row:last-child { border-bottom: none; } .dash-table__row:hover { background: var(--color-field-cream); } .dash-table__cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-table__cell--wrap { white-space: normal; } .dash-table__cell-strong { font-weight: 500; color: var(--color-ink); } .dash-table__cell-meta { font-size: var(--size-label); color: var(--color-whisper); } .dash-table__pills { display: inline-flex; flex-wrap: wrap; gap: 6px; } .dash-table__pill { display: inline-flex; align-items: center; padding: 2px 10px; font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.02em; color: var(--color-ink-soft); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: 999px; } .dash-table__pill--accent { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-deep); } .dash-table__row-actions { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; } .dash-table__icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-ink-soft); transition: background var(--transition-soft), color var(--transition-soft); } .dash-table__icon-btn:hover { background: var(--color-field-cream); border-color: var(--color-margin); color: var(--color-ink); } .dash-table__empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-whisper); font-size: var(--size-label); } /* Section header for management screens */ .dash-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .dash-section-head__titles h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-headline); line-height: var(--line-headline); color: var(--color-ink); margin: 0 0 var(--space-1); } :root[data-theme="eduasiste"] .dash-section-head__titles h1, :root[data-theme="proasiste"] .dash-section-head__titles h1 { font-family: var(--font-sans); font-weight: 700; } .dash-section-head__titles p { margin: 0; font-size: var(--size-label); color: var(--color-whisper); } .dash-add-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 18px; font-family: inherit; font-size: var(--size-body); font-weight: 500; background: var(--color-accent); color: var(--color-parchment); border: 1px solid var(--color-accent); border-radius: var(--radius-md); transition: background var(--transition-soft); } .dash-add-cta:hover { background: var(--color-accent-deep); } /* Edit card (Settings, Projects) */ .dash-edit-card { background: var(--color-parchment); border: 1px solid var(--color-margin); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-5); } .dash-edit-card__head h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-title); color: var(--color-ink); margin: 0 0 var(--space-1); } :root[data-theme="eduasiste"] .dash-edit-card__head h2, :root[data-theme="proasiste"] .dash-edit-card__head h2 { font-family: var(--font-sans); font-weight: 700; } .dash-edit-card__head p { margin: 0; font-size: var(--size-label); color: var(--color-whisper); } .dash-edit-card__row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 720px) { .dash-edit-card__row--two { grid-template-columns: 1fr 1fr; } } .dash-edit-card__actions { display: flex; justify-content: flex-end; gap: var(--space-3); } /* Logo control inside Settings */ .dash-logo-control { display: flex; align-items: center; gap: var(--space-5); } .dash-logo-preview { width: 75px; height: 75px; flex: 0 0 75px; display: flex; align-items: center; justify-content: center; padding: var(--space-2); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); overflow: hidden; } .dash-logo-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .dash-logo-preview--empty { color: var(--color-whisper); font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* Modal */ .dash-modal__backdrop { position: fixed; inset: 0; background: oklch(20% 0.02 130 / 0.32); z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .dash-modal__panel { width: 100%; max-width: 520px; background: var(--color-parchment); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .dash-modal__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-title); color: var(--color-ink); margin: 0; } :root[data-theme="eduasiste"] .dash-modal__title, :root[data-theme="proasiste"] .dash-modal__title { font-family: var(--font-sans); font-weight: 700; } .dash-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); } /* Multi-select chips (used in Class teacher / Student class assignment) */ .dash-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-2); border: 1px solid var(--color-margin); border-radius: var(--radius-md); background: var(--color-field-cream); min-height: 44px; } .dash-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--size-label); background: var(--color-accent-soft); color: var(--color-accent-deep); border-radius: 999px; } .dash-chip__remove { background: transparent; border: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } /* Specific column templates for the management tables */ .dash-table--employees .dash-table__header, .dash-table--employees .dash-table__row { grid-template-columns: 1.5fr 1.6fr 1fr 1.1fr 0.7fr; } .dash-table--classes .dash-table__header, .dash-table--classes .dash-table__row { grid-template-columns: 1.5fr 1fr 0.7fr 1.6fr 0.7fr 0.7fr; } .dash-table--students .dash-table__header, .dash-table--students .dash-table__row { grid-template-columns: 1.6fr 0.7fr 1.8fr 0.7fr; } @media (max-width: 640px) { /* Stacked row layout: name top, status row, indicators row, actions right */ .dash-table__header { display: none; } .dash-table--employees .dash-table__row, .dash-table--classes .dash-table__row, .dash-table--students .dash-table__row { grid-template-columns: 1fr auto; grid-template-areas: "name actions" "status actions" "pills actions"; column-gap: var(--space-3); row-gap: 6px; padding: var(--space-3) var(--space-4); align-items: start; } .dash-table__row [data-role="name"] { grid-area: name; font-size: var(--size-body-large, 1.0625rem); line-height: 1.3; } /* Multiple status cells (e.g. classes: subject + grade) flow inline with separator */ .dash-table__row [data-role="status"] { grid-area: status; display: inline; font-size: var(--size-label, 0.8125rem); color: var(--color-whisper); } .dash-table__row [data-role="status"] + [data-role="status"]::before { content: " · "; color: var(--color-margin); } .dash-table__row [data-role="indicator"] { grid-area: pills; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Multiple indicator cells stack into the same pills row */ .dash-table__row [data-role="indicator"] + [data-role="indicator"] { margin-left: 0; } .dash-table__row [data-role="actions"] { grid-area: actions; flex-direction: column; align-self: start; gap: 6px; padding-left: 0; } /* Bigger touch targets on narrow */ .dash-table__icon-btn { width: 40px; height: 40px; font-size: 20px; } } /* ============================================================ Onboarding repeater — repeating row pattern for teachers / courses / students. Used by the EduAsiste onboarding flow. ============================================================ */ .ob-repeater { display: flex; flex-direction: column; gap: var(--space-4); } .ob-row { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); } @media (min-width: 600px) { .ob-row--two { grid-template-columns: 1fr 1fr; } .ob-row--three { grid-template-columns: 1fr 1fr 1fr; } .ob-row--four { grid-template-columns: 1fr 1fr 1fr 1fr; } } .ob-row__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--size-label); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-whisper); } .ob-row__remove { background: transparent; border: 1px solid transparent; color: var(--color-whisper); font-size: var(--size-label); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-soft), color var(--transition-soft), border-color var(--transition-soft); } .ob-row__remove:hover { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); } .ob-row__full { grid-column: 1 / -1; } .ob-repeater__add { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 16px; font-family: inherit; font-size: var(--size-body); font-weight: 500; background: transparent; color: var(--color-accent-deep); border: 1px dashed var(--color-margin); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-soft), border-color var(--transition-soft); } .ob-repeater__add:hover { background: var(--color-accent-soft); border-color: var(--color-accent); } .ob-repeater__empty { font-size: var(--size-label); color: var(--color-whisper); } /* Multi-checkbox group inside a row (e.g. courses for a student) */ .ob-checkgroup { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); background: var(--color-parchment); border: 1px solid var(--color-margin); border-radius: var(--radius-sm); max-height: 220px; overflow-y: auto; } .ob-checkgroup__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-body); } .ob-checkgroup__item-meta { color: var(--color-whisper); font-size: var(--size-label); } .ob-checkgroup__empty { font-size: var(--size-label); color: var(--color-whisper); font-style: italic; } /* Logo upload preview pair (school logo on Step 1) */ .ob-logo-upload { display: flex; align-items: center; gap: var(--space-4); } .ob-logo-upload__preview { width: 75px; height: 75px; flex: 0 0 75px; display: flex; align-items: center; justify-content: center; padding: var(--space-2); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); overflow: hidden; } .ob-logo-upload__preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ob-logo-upload__preview-empty { font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-whisper); } .ob-logo-upload__controls { flex: 1 1 auto; } /* ============================================================ Inline add-row + table pattern (teachers / courses / students) ============================================================ */ .ob-add-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: end; padding: var(--space-4); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: var(--radius-md); } @media (min-width: 700px) { .ob-add-row--two { grid-template-columns: 1fr 1fr; } .ob-add-row--three { grid-template-columns: 1fr 1fr 1fr; } .ob-add-row--four { grid-template-columns: 1fr 1fr 1fr 1fr; } .ob-add-row--five { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } .ob-add-row .ob-field-label { margin-bottom: 4px; } .ob-add-row__cta { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 20px; font-family: inherit; font-size: var(--size-body); font-weight: 500; color: var(--color-parchment); background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: background var(--transition-soft); } .ob-add-row__cta:hover { background: var(--color-accent-deep); } .ob-add-row__cta:disabled, .ob-add-row__cta[aria-disabled="true"] { background: var(--color-margin); border-color: var(--color-margin); color: var(--color-whisper); cursor: not-allowed; } .ob-add-row__error { grid-column: 1 / -1; font-size: var(--size-label); color: var(--color-danger); margin: 0; } .ob-list-table { margin-top: var(--space-5); display: flex; flex-direction: column; border: 1px solid var(--color-margin); border-radius: var(--radius-md); background: var(--color-parchment); overflow: hidden; } .ob-list-table__header, .ob-list-table__row { display: grid; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .ob-list-table__header { background: var(--color-field-cream); font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-whisper); border-bottom: 1px solid var(--color-margin); } .ob-list-table__row { border-bottom: 1px solid var(--color-margin-soft); font-size: var(--size-body); color: var(--color-ink); } .ob-list-table__row:last-child { border-bottom: none; } .ob-list-table__cell--strong { font-weight: 500; } .ob-list-table__cell--meta { color: var(--color-whisper); font-size: var(--size-label); } .ob-list-table__row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } .ob-list-table__remove { background: transparent; border: 1px solid transparent; color: var(--color-whisper); padding: 4px 10px; font-size: var(--size-label); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-soft), color var(--transition-soft), border-color var(--transition-soft); } .ob-list-table__remove:hover { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); } .ob-list-table__empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-whisper); font-size: var(--size-label); } .ob-list-table__pills { display: inline-flex; flex-wrap: wrap; gap: 6px; } .ob-list-table__pill { display: inline-flex; align-items: center; padding: 2px 10px; font-size: var(--size-tiny); font-weight: 500; background: var(--color-accent-soft); color: var(--color-accent-deep); border-radius: 999px; } /* Column templates per page */ .ob-list-table--teachers .ob-list-table__header, .ob-list-table--teachers .ob-list-table__row { grid-template-columns: 1.6fr 1.8fr 0.6fr; } .ob-list-table--courses .ob-list-table__header, .ob-list-table--courses .ob-list-table__row { grid-template-columns: 1.4fr 1fr 0.6fr 1.2fr 0.6fr; } .ob-list-table--students .ob-list-table__header, .ob-list-table--students .ob-list-table__row { grid-template-columns: 1.4fr 2fr 0.6fr; } /* Course multi-pick chip group inside students add-row */ .ob-coursepick { display: flex; flex-direction: column; gap: 6px; } .ob-coursepick__list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--color-margin); border-radius: var(--radius-sm); background: var(--color-parchment); min-height: 44px; } .ob-coursepick__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--size-label); background: var(--color-field-cream); border: 1px solid var(--color-margin); border-radius: 999px; cursor: pointer; user-select: none; transition: background var(--transition-soft), border-color var(--transition-soft), color var(--transition-soft); } .ob-coursepick__chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-deep); } .ob-coursepick__chip:hover { border-color: var(--color-ink-soft); } .ob-coursepick__empty { font-size: var(--size-label); color: var(--color-whisper); padding: 8px; } @media (max-width: 700px) { .ob-list-table--teachers .ob-list-table__header, .ob-list-table--teachers .ob-list-table__row, .ob-list-table--courses .ob-list-table__header, .ob-list-table--courses .ob-list-table__row, .ob-list-table--students .ob-list-table__header, .ob-list-table--students .ob-list-table__row { grid-template-columns: 1fr; } .ob-list-table__header { display: none; } } /* Wider content surface for onboarding steps that show roster tables. */ .ob-content--wide { max-width: 920px; } /* Static-preview tenant visibility helpers. Production Blade renders one branch only based on $isSchool — these attributes are no-ops there. */ :root[data-theme="eduasiste"] [data-tenant-hide="eduasiste"] { display: none !important; } :root:not([data-theme="eduasiste"]) [data-tenant-show="eduasiste"] { display: none !important; } /* ============================================================ V2 dashboard home — admin action items + summary stats + chart ============================================================ */ .dash-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); } .dash-stat-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--color-field-cream); border: 1px solid var(--color-margin-soft); border-radius: var(--radius-md); } .dash-stat-card__value { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--color-ink); } :root[data-theme="eduasiste"] .dash-stat-card__value, :root[data-theme="proasiste"] .dash-stat-card__value { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; } .dash-stat-card__label { font-size: var(--size-label); color: var(--color-whisper); text-transform: uppercase; letter-spacing: 0.04em; } .dash-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .dash-action-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-parchment); border: 1px solid var(--color-margin); border-left: 3px solid var(--color-margin); border-radius: var(--radius-md); } .dash-action-item--high { border-left-color: var(--color-accent-deep); } .dash-action-item--medium { border-left-color: var(--color-accent); } .dash-action-item--low { border-left-color: var(--color-margin); } .dash-action-item__count { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; min-width: 36px; color: var(--color-ink); } :root[data-theme="eduasiste"] .dash-action-item__count, :root[data-theme="proasiste"] .dash-action-item__count { font-family: var(--font-sans); font-weight: 700; } .dash-action-item__label { font-size: var(--size-body); color: var(--color-ink); } .dash-action-item__cta { padding: 6px 14px; font-size: var(--size-label); font-weight: 500; color: var(--color-accent-deep); background: var(--color-accent-soft); border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; } .dash-action-item__cta:hover, .dash-action-item__cta:focus-visible { background: var(--color-accent); color: var(--color-parchment); outline: none; } .dash-bar-chart { display: flex; flex-direction: column; gap: 8px; } .dash-bar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr) auto; align-items: center; gap: var(--space-3); } .dash-bar-row__label { font-size: var(--size-body); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-bar-row__bar { display: block; height: 18px; background: var(--color-field-cream); border-radius: var(--radius-sm); overflow: hidden; } .dash-bar-row__fill { display: block; height: 100%; background: var(--color-accent); transition: width var(--transition-soft); } .dash-bar-row__value { font-size: var(--size-label); font-weight: 500; color: var(--color-ink); min-width: 32px; text-align: right; } .dash-data-table { width: 100%; border-collapse: collapse; font-size: var(--size-body); } .dash-data-table th, .dash-data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-margin-soft); } .dash-data-table th { font-size: var(--size-tiny); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-whisper); } @media (max-width: 640px) { .dash-action-item { grid-template-columns: auto 1fr; grid-template-areas: "count label" ". cta"; row-gap: 8px; } .dash-action-item__count { grid-area: count; } .dash-action-item__label { grid-area: label; } .dash-action-item__cta { grid-area: cta; justify-self: end; } .dash-bar-row { grid-template-columns: 1fr auto; grid-template-areas: "label value" "bar bar"; row-gap: 4px; } .dash-bar-row__label { grid-area: label; } .dash-bar-row__value { grid-area: value; } .dash-bar-row__bar { grid-area: bar; } }