@import "tailwindcss"; @plugin "daisyui"; @plugin "daisyui/theme" { name: "mcaverify"; default: true; color-scheme: light; --color-primary: #12915a; --color-primary-content: #ffffff; --color-secondary: #0e7a4c; --color-accent: #1f63d6; /* Neutral (slate) for avatars/chrome so not everything reads as green. */ --color-neutral: #334155; --color-neutral-content: #ffffff; /* Near-neutral bases (a whisper of green) instead of the previous green wash. */ --color-base-100: #ffffff; --color-base-200: #f5f6f7; --color-base-300: #e4e7ea; --color-base-content: #1c2b25; --font-sans: "Archivo", Arial, sans-serif; } /* Rendered markdown (credit memos) — scoped so we don't need the typography plugin. */ .markdown-body h1 { font-size: 1.25rem; font-weight: 800; margin: 0.75rem 0 0.25rem; } .markdown-body h2 { font-size: 1.05rem; font-weight: 700; margin: 0.75rem 0 0.25rem; } .markdown-body h3 { font-size: 0.95rem; font-weight: 700; margin: 0.5rem 0 0.25rem; } .markdown-body p { margin: 0.35rem 0; } .markdown-body ul { list-style: disc; padding-left: 1.25rem; margin: 0.35rem 0; } .markdown-body ol { list-style: decimal; padding-left: 1.25rem; margin: 0.35rem 0; } .markdown-body li { margin: 0.15rem 0; } .markdown-body strong { font-weight: 700; } .markdown-body em { font-style: italic; } .markdown-body table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.85rem; } .markdown-body th, .markdown-body td { border: 1px solid var(--color-base-300); padding: 0.25rem 0.5rem; text-align: left; } .markdown-body code { background: var(--color-base-200); padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.85em; } .markdown-body a { color: var(--color-primary); text-decoration: underline; } /* Collapsible sidebar rail (desktop only; mobile keeps the full drawer). Toggled by the `sidebar-collapsed` class on — see sidebar.js. */ #app-sidebar { transition: width 0.18s ease; } .sidebar-toggle svg { transition: transform 0.18s ease; } @media (min-width: 1024px) { /* --- shell: narrow rail, hide expanded-only chrome (menu-title kept: it becomes a labeled divider, see below) --- */ html.sidebar-collapsed #app-sidebar { width: 4.75rem; } html.sidebar-collapsed #app-sidebar .nav-label, html.sidebar-collapsed #app-sidebar .sidebar-foot, html.sidebar-collapsed #app-sidebar .sidebar-logo-full { display: none; } html.sidebar-collapsed #app-sidebar .sidebar-logo-mark { display: inline-flex; } html.sidebar-collapsed #app-sidebar .sidebar-head { flex-direction: column; gap: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); } /* --- list rhythm: centered column, tight consistent gaps --- */ html.sidebar-collapsed #app-sidebar .menu { align-items: center; gap: 0.25rem; padding: 0.5rem 0.375rem; } html.sidebar-collapsed #app-sidebar .menu li { width: auto; } /* --- uniform 40px rounded-square hit-targets; muted icon + real hover; anchor for badge overlay --- */ html.sidebar-collapsed #app-sidebar .menu li > a { position: relative; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border-radius: 0.625rem; /* rounded-square tile (theme --radius-field is only 0.25rem, too tight for a 40px tile) */ color: color-mix(in oklch, var(--color-base-content) 55%, transparent); transition: background-color 0.12s ease, color 0.12s ease; } html.sidebar-collapsed #app-sidebar .menu li > a:hover, html.sidebar-collapsed #app-sidebar .menu li > a:focus-visible { background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent); color: var(--color-base-content); } /* --- active: faint primary tint + short primary accent bar (restrained, not a solid pill) --- */ html.sidebar-collapsed #app-sidebar .menu li > a.active, html.sidebar-collapsed #app-sidebar .menu li > a.active:hover { background-color: color-mix(in oklch, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 400; /* neutralize the expanded-state font-semibold */ } html.sidebar-collapsed #app-sidebar .menu li > a.active::before { content: ""; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%); width: 0.1875rem; height: 1.25rem; border-radius: 999px; background-color: var(--color-primary); } /* --- badge -> corner-dot overlay on the icon (kills ml-auto flow) --- */ html.sidebar-collapsed #app-sidebar .menu li > a .badge { position: absolute; top: 0.25rem; right: 0.25rem; margin: 0; height: 1rem; min-height: 1rem; min-width: 1rem; padding: 0 0.1875rem; font-size: 0.625rem; line-height: 1; border: 2px solid var(--color-base-200); /* punch-out ring against the rail bg */ border-radius: 999px; pointer-events: none; } /* --- section titles become slim labeled dividers instead of vanishing --- */ html.sidebar-collapsed #app-sidebar .menu-title { display: block; width: 100%; margin: 0.4rem 0 0.2rem; padding: 0.2rem 0 0; text-align: center; border-top: 1px solid var(--color-base-300); font-size: 0; /* suppress the full word; keeps the real text for screen readers */ } html.sidebar-collapsed #app-sidebar .menu-title::after { content: attr(data-collapsed-label); display: block; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklch, var(--color-base-content) 45%, transparent); } } /* MCATRACK brand-blue button (their primary UI blue #2678bf) — used for the "Send to MCATRACK" action so it reads as a hand-off to the MCATRACK system. */ .btn-mcatrack { background-color: #2678bf; border-color: #2678bf; color: #fff; } .btn-mcatrack:hover { background-color: #1f6199; border-color: #1f6199; }