/* Tenants, projects, breadcrumbs and admin extras (loaded after app.css) */

.crumbs { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: .84rem; margin-bottom: -.4rem; }
.crumbs__item { display: inline-flex; align-items: center; gap: .3rem; color: var(--at-muted); text-decoration: none; padding: .15rem .35rem; border-radius: 6px; }
.crumbs__item .rzi { font-size: 17px; }
a.crumbs__item:hover { color: var(--at-accent); background: var(--at-accent-soft); }
.crumbs__item--current { color: var(--rz-text-color); font-weight: 600; }
.crumbs__sep { font-size: 17px; color: var(--at-faint); }
.center { text-align: center; }
.title-icon { vertical-align: -3px; color: var(--at-accent); }
.title-dot { display: inline-block; width: 14px; height: 14px; border-radius: 5px; background: var(--c); margin-right: .45rem; vertical-align: 1px; }

/* A tenant's name as a member sees it, with the real name underneath */
.tenant-name { display: inline-flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tenant-name__mine { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.tenant-name__real { font-size: .74rem; font-weight: 500; color: var(--at-muted); letter-spacing: 0; }
.page-head__title .tenant-name__real { font-size: .82rem; margin-top: .15rem; }

/* Tenant list */
.tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.tenant-card { position: relative; padding: 1.15rem 1.2rem 1rem; display: flex; flex-direction: column; gap: .85rem; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tenant-card:hover { transform: translateY(-2px); box-shadow: var(--at-shadow-lg); border-color: color-mix(in srgb, var(--at-accent) 35%, transparent); }
.tenant-card--outside { border-style: dashed; }
.tenant-card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.tenant-card__top { display: flex; align-items: center; gap: .85rem; }
.tenant-card__titles { flex: 1; min-width: 0; font-size: 1.08rem; }
.tenant-card__menu { position: relative; z-index: 1; }
.tenant-card__mark { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 750; font-size: .95rem;
                     background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 6px 14px -8px var(--c); }
.tenant-card__mark--sm { width: 34px; height: 34px; border-radius: 10px; font-size: .75rem; }
.tenant-card__role { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.role { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 650; padding: .15rem .55rem; border-radius: 999px; background: var(--at-line); color: var(--at-muted); }
.role .rzi { font-size: 15px; }
.role--owner { background: rgba(202, 138, 4, .14); color: #a16207; }
.role--admin { background: var(--at-accent-soft); color: var(--at-accent); }
.role--super { background: rgba(124, 58, 237, .12); color: #7c3aed; }
html:has(link[href*="material-dark"]) .role--owner { color: #fcd34d; }
html:has(link[href*="material-dark"]) .role--super { color: #c4a5ff; }
.tenant-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--at-line); padding-top: .75rem; }
.tenant-card__stats div { display: flex; flex-direction: column; }
.tenant-card__stats strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.tenant-card__stats span { font-size: .74rem; color: var(--at-muted); }

/* Project list */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.project-card { --c: var(--at-accent); position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit;
                overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.project-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--at-shadow-lg); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.project-card__link { position: absolute; inset: 0; z-index: 0; }
.project-card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--at-accent-soft); color: var(--at-accent); }
.project-card__icon .rzi { font-size: 24px; }
.project-card__icon--tinted { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.project-card__body { flex: 1; min-width: 0; }
.project-card__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card__desc { font-size: .8rem; color: var(--at-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card__count { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--at-muted); }
.project-card__actions { position: relative; z-index: 1; display: flex; opacity: .6; transition: opacity .12s; }
.project-card:hover .project-card__actions, .project-card:focus-within .project-card__actions { opacity: 1; }
@media (hover: none) { .project-card__actions { opacity: 1; } }
.project-card--all { --c: var(--at-ink); }
html:has(link[href*="material-dark"]) .project-card--all { --c: #5fd4cc; }
.project-card--none { --c: #94a3b8; border-style: dashed; }
.project-card--none .project-card__icon { background: var(--at-line); color: var(--at-muted); }

/* Projects on a recording */
.project-chip { --c: var(--at-accent); display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem .25rem .45rem; border-radius: 8px; font-size: .82rem; font-weight: 600;
                background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
                color: color-mix(in srgb, var(--c) 80%, var(--rz-text-color)); }
.project-chip .rzi { font-size: 16px; color: var(--c); }
.project-chip a { color: inherit; text-decoration: none; }
.project-chip a:hover { text-decoration: underline; }
.project-add { width: 190px; }
.prop--wide { grid-column: 1 / -1; }
.tag-option__icon { font-size: 18px; color: var(--at-muted); }
.filter-dropdown--project { min-width: 230px; }
.project-preview { --c: var(--at-accent); display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 10px; font-weight: 650; align-self: flex-start;
                   background: color-mix(in srgb, var(--c) 12%, transparent); color: color-mix(in srgb, var(--c) 85%, var(--rz-text-color)); }
.project-preview .rzi { color: var(--c); }
.swatches--row { grid-template-columns: repeat(12, 1fr); gap: .35rem; }

/* Header and sidebar */
.app-header__sep { color: var(--at-faint); font-size: 20px; }
.app-header__tenant { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--rz-text-color); text-decoration: none; padding: .3rem .6rem;
                      border-radius: 8px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header__tenant:hover { background: var(--at-accent-soft); color: var(--at-accent); }
@media (max-width: 720px) { .brand__name { display: none; } }
.nav-section { margin: 1rem .75rem .35rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--at-faint);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you--owner { background: rgba(202, 138, 4, .14); color: #a16207; }
.you--super { background: rgba(124, 58, 237, .12); color: #7c3aed; }

/* Dialogs and sign-up */
.prompt { display: flex; flex-direction: column; gap: .75rem; }
.prompt__help { color: var(--at-muted); font-size: .85rem; line-height: 1.5; margin: 0; }
.auth__alt { text-align: center; margin-top: 1.4rem; color: var(--at-muted); font-size: .92rem; }