/* ============================================================================
   Teampulse — App view styles (app.css)
   Styles specific to the application views (auth, dashboards, cards, admin).
   Loaded after theme.css inside app.html.
   ============================================================================ */

/* ── Auth gate ─────────────────────────────────────────────────────────── */
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-aside { background: var(--brand-900); position: relative; overflow: hidden; padding: var(--s-9); display: flex; }
.auth-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 360px at 18% 12%, rgba(99,102,241,.35), transparent 60%), radial-gradient(560px 360px at 90% 100%, rgba(20,184,166,.28), transparent 60%); }
.auth-aside-inner { position: relative; display: flex; flex-direction: column; gap: var(--s-4); width: 100%; }
.auth-points { margin-top: var(--s-6); display: grid; gap: 12px; }
.auth-points li { display: flex; gap: 10px; color: #cdd5ee; font-size: var(--fs-sm); }
.auth-points li svg { color: var(--accent-2); flex: none; }
.auth-foot { color: #8a93bd; font-size: var(--fs-xs); margin-top: var(--s-6); }
.auth-main { display: grid; place-items: center; padding: var(--s-7); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-size: var(--fs-2xl); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-mut); font-weight: 600; margin-bottom: var(--s-5); }
.back-link svg { transform: rotate(180deg); }
.back-link:hover { color: var(--accent); }
.code-display { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.code-display b { font-size: var(--fs-lg); letter-spacing: .06em; color: var(--accent); }

/* ── Profile select ────────────────────────────────────────────────────── */
.select-wrap { min-height: 100vh; background:
  radial-gradient(680px 360px at 15% 0%, rgba(99,102,241,.12), transparent 60%),
  radial-gradient(620px 380px at 90% 5%, rgba(168,85,247,.1), transparent 60%), var(--bg); }
.persona { text-align: left; padding: var(--s-6); display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.persona-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.persona h3 { font-size: var(--fs-lg); }
.persona-go { margin-top: auto; padding-top: var(--s-5); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); font-size: var(--fs-sm); }
@media (max-width: 920px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } .persona-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .persona-grid { grid-template-columns: 1fr; } }

/* ── Hero welcome (home) ───────────────────────────────────────────────── */
.welcome { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--s-7); color: #fff; background: var(--brand-900); }
.welcome::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 280px at 88% -10%, rgba(168,85,247,.5), transparent 60%), radial-gradient(420px 280px at 0% 120%, rgba(20,184,166,.4), transparent 60%); }
.welcome > * { position: relative; }
.welcome h1 { font-size: var(--fs-2xl); color: #fff; }
.welcome p { color: #c5cdec; margin-top: 6px; }
.welcome .quick { display: flex; gap: 10px; margin-top: var(--s-6); flex-wrap: wrap; }
.welcome .quick .btn { backdrop-filter: blur(6px); }

/* Section title with link */
.sec-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.sec-title h2 { font-size: var(--fs-lg); }
.sec-title a { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); display: inline-flex; gap: 4px; align-items: center; }

/* ── Image covers (real photos with gradient fallback) ─────────────────── */
.img-cover { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c, #6366f1), color-mix(in srgb, var(--c, #6366f1) 55%, #0b1020)); }
.img-cover .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card.hover:hover .img-cover .cover-img { transform: scale(1.06); }
.img-cover .img-emoji { position: absolute; top: 10px; right: 12px; font-size: 1.4rem; z-index: 2; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.img-cover.img-failed .cover-img { display: none; }
/* image layer inside existing cover containers (event/group/campaign/hero) */
.ev-cover .cover-img, .grp-cover .cover-img, .camp-cover .cover-img, .detail-hero .cover-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.card.hover:hover .ev-cover .cover-img, .card.hover:hover .grp-cover .cover-img, .card.hover:hover .camp-cover .cover-img { transform: scale(1.06); }
.ev-cover .emoji, .ev-cover .ev-date, .grp-cover ~ * { position: relative; z-index: 2; }
.ev-cover .emoji { z-index: 2; }
/* legibility overlay so overlaid chips/titles stay readable on any photo */
.shade::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,16,32,.10) 0%, rgba(11,16,32,.50) 100%); pointer-events: none; }
.detail-hero > div, .detail-hero > .emoji { position: relative; z-index: 2; }
/* dashboard welcome background photo */
.welcome { position: relative; overflow: hidden; }
.welcome .welcome-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; z-index: 0; }
.welcome::before { z-index: 1; }
.welcome > *:not(.welcome-bg) { position: relative; z-index: 2; }
/* small cover for the lunch-roulette dashboard card */
.mini-cover { height: 84px; border-radius: var(--r-md); margin: -4px -4px 12px; }
.img-thumb { width: 64px; height: 64px; border-radius: var(--r-md); flex: none; }
.media-pic { width: 100%; aspect-ratio: 16/10; border-radius: var(--r-md); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
.pick-img { border: 2px solid transparent; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface-3); transition: border-color var(--motion), transform var(--motion); }
.pick-img img { width: 100%; height: 82px; object-fit: cover; display: block; }
.pick-img:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ── Rich text (WYSIWYG output) ────────────────────────────────────────── */
.richtext { line-height: 1.6; color: var(--text-soft); }
.richtext h2 { font-size: var(--fs-lg); margin: var(--s-4) 0 var(--s-2); color: var(--text); }
.richtext h3 { font-size: var(--fs-md); margin: var(--s-4) 0 var(--s-2); color: var(--text); }
.richtext p { margin: 0 0 var(--s-3); }
.richtext ul, .richtext ol { margin: 0 0 var(--s-3) var(--s-5); display: block; }
.richtext ul { list-style: disc; } .richtext ol { list-style: decimal; }
.richtext li { margin: 2px 0; }
.richtext a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.richtext blockquote { margin: var(--s-3) 0; padding: 8px 16px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-soft); font-style: italic; }
.richtext strong { color: var(--text); }
.rte { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rte-toolbar button { width: 32px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-soft); font-weight: 700; font-size: var(--fs-sm); transition: all var(--motion); }
.rte-toolbar button:hover { background: var(--surface-3); color: var(--text); }
.rte-area { padding: 12px 14px; min-height: 130px; max-height: 280px; overflow-y: auto; font-size: var(--fs-sm); outline: none; }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--text-faint); }

/* ── Event card ────────────────────────────────────────────────────────── */
.ev-card { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.ev-cover { height: 96px; position: relative; display: flex; align-items: flex-end; padding: 12px; }
.ev-cover .emoji { position: absolute; top: 10px; right: 12px; font-size: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.ev-date { background: var(--surface); border-radius: 10px; padding: 5px 10px; text-align: center; box-shadow: var(--sh-1); line-height: 1; }
.ev-date b { font-size: 1.1rem; display: block; }
.ev-date small { font-size: 10px; text-transform: uppercase; color: var(--text-mut); }
.ev-body { padding: var(--s-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ev-body h3 { font-size: var(--fs-md); line-height: 1.25; }
.ev-meta { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); color: var(--text-mut); margin-top: auto; }
.ev-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--s-5); border-top: 1px solid var(--line); }

/* Detail layouts */
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-6); align-items: start; }
.detail-hero { height: 180px; border-radius: var(--r-lg); position: relative; display: flex; align-items: flex-end; padding: var(--s-6); color: #fff; overflow: hidden; }
.detail-hero .emoji { position: absolute; top: 16px; right: 20px; font-size: 3rem; opacity: .9; }
.detail-hero h1 { color: #fff; font-size: var(--fs-2xl); position: relative; }
@media (max-width: 880px) { .detail-grid { grid-template-columns: 1fr; } }

/* Group card */
.grp-card { cursor: pointer; overflow: hidden; }
.grp-cover { height: 70px; position: relative; }
.grp-card .grp-body { padding: var(--s-5); margin-top: -28px; position: relative; }
.grp-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.4rem; box-shadow: var(--sh-2); border: 3px solid var(--surface); }

/* Listing (marketplace) row */
.listing { display: flex; gap: var(--s-4); padding: var(--s-5); cursor: pointer; }
.listing .type-flag { width: 4px; border-radius: 4px; flex: none; }
.listing .l-main { flex: 1; min-width: 0; }
.listing h3 { font-size: var(--fs-md); }

/* Discover / lunch roulette */
.roulette-result { display: grid; gap: 12px; }
.lunch-group { display: flex; align-items: center; gap: 14px; padding: var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.lunch-group .avatar-stack { flex: none; }

/* Lunch Roulette cards */
.lunch-card { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); }
.lunch-card.is-confirmed { border-left: 4px solid var(--ok); }
.lunch-card.is-pending { border-left: 4px solid var(--info); }
.lunch-card.is-needs_rematch { border-left: 4px solid var(--warn); }
.lunch-card.is-expired { border-left: 4px solid var(--line-strong); opacity: .92; }
.lunch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.lunch-meta { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-soft); }
.lunch-meta span { display: inline-flex; align-items: center; gap: 7px; }
.lunch-meta svg { color: var(--accent); }
.lunch-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: var(--s-5); }
.lunch-person { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.lunch-person .lp-main { flex: 1; min-width: 0; }
.lunch-person .lp-main b { font-size: var(--fs-sm); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lunch-person.me { background: rgba(99,102,241,.08); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.lunch-deadline { display: flex; align-items: center; gap: 8px; margin-top: var(--s-5); padding: 9px 12px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); font-size: var(--fs-sm); font-weight: 600; }
.lunch-deadline.ok { background: var(--ok-bg); color: var(--ok); }
.lunch-deadline.gone { background: var(--surface-3); color: var(--text-mut); }
.lunch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-5); }
.notif-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Culture map (legacy bubble class, kept for safety) */
.culture-map { position: relative; height: 360px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 50%, var(--surface-2), var(--surface)); border: 1px solid var(--line); overflow: hidden; }
.bubble { position: absolute; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; font-weight: 700; transform: translate(-50%, -50%); box-shadow: var(--sh-2); transition: transform var(--motion); cursor: default; }
.bubble:hover { transform: translate(-50%, -50%) scale(1.06); }
.bubble small { font-size: 10px; opacity: .85; font-weight: 600; }

/* ── Culture Map (interactive, data-driven) ── */
.cmap-bubble { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); box-shadow: var(--sh-2); cursor: pointer; padding: 0;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #0b1020)); transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s; }
.cmap-bubble::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 75%, #0b1020)); }
.cmap-bubble:hover, .cmap-bubble:focus-visible { transform: translate(-50%, -50%) scale(1.09); box-shadow: var(--sh-3); z-index: 6; outline: none; }
.cmap-bubble-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; }
.cmap-bubble-in { position: relative; z-index: 2; color: #fff; display: grid; gap: 2px; place-items: center; padding: 4px; }
.cmap-bubble-in b { font-size: clamp(.68rem, 1.5vw, .9rem); line-height: 1.05; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
.cmap-bubble-in small { font-size: 10px; opacity: .92; display: inline-flex; gap: 3px; align-items: center; }
.cmap-tooltip { position: absolute; transform: translate(-50%, -100%); background: var(--brand-900); color: #fff; padding: 10px 13px; border-radius: 12px; box-shadow: var(--sh-3); pointer-events: none; z-index: 20; min-width: 168px; }
.cmap-tooltip b { font-size: var(--fs-sm); }
.cmap-tip-row { color: #c5cdec; font-size: 11px; margin-top: 2px; }
.cmap-tip-action { color: #a5b4fc; font-weight: 700; margin-top: 7px; font-size: 11px; }
.cmap-legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: var(--s-4); }
.cmap-leg { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-soft); }
.cmap-leg i { display: inline-block; border-radius: 50%; background: var(--accent-grad); flex: none; }
.cmap-cards { display: none; }
.cmap-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; margin-bottom: 10px; box-shadow: var(--sh-1); transition: transform var(--motion); }
.cmap-card:active { transform: scale(.99); }
.cmap-card-main { flex: 1; min-width: 0; }
/* detail panel */
.cmap-detail-head { display: flex; gap: 8px; flex-wrap: wrap; }
.cmap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cmap-stat { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.cmap-stat b { font-size: 1.2rem; }
.cmap-stat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(99,102,241,.12); color: var(--accent); flex: none; }
.cmap-rel { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; }
.cmap-rel:hover { background: var(--surface-2); }

/* Discover responsive top layout */
.discover-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 860px) { .discover-top { grid-template-columns: 1fr; } }

/* Bottom sheet (mobile detail modal) */
@media (max-width: 640px) {
  .modal-backdrop.sheet-back { align-items: flex-end; padding: 0; }
  .modal.sheet { max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; animation: sheetup .28s cubic-bezier(.2,.8,.2,1); }
  @keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
  .cmap-bubbles { display: none; }
  .cmap-cards { display: block; }
}

/* Mobile bottom navigation (native-app feel) */
.bottom-nav { display: none; }
.bn-ic { position: relative; display: grid; place-items: center; }
.nav-badge { position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--accent-rose); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; display: grid; place-items: center; border: 2px solid var(--surface); }

/* compact search button content (full label on desktop, short on phone) */
.sb-in { display: flex; gap: 9px; align-items: center; color: var(--text-mut); min-width: 0; }
.sb-in .sb-full { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-in .sb-short { display: none; }

/* drawer scrim + mobile-only sidebar controls (hidden on desktop) */
.nav-scrim { display: none; }
.side-mobile { display: none; }
.side-ctl { margin: 4px 8px 8px; }
.side-ctl .lang-switch { width: max-content; }
.side-ctl-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: var(--r-md); color: #aeb7da; font-weight: 600; font-size: var(--fs-sm); transition: background var(--motion); }
.side-ctl-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.demo-banner .demo-short { display: none; }
.demo-banner .demo-brand { display: none; }

@media (max-width: 860px) {
  /* ── Bottom nav ── */
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(16,24,46,.10); }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: var(--text-mut); font-size: 10px; font-weight: 600; border-radius: var(--r-sm); min-width: 0; }
  .bottom-nav a span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav a.active { color: var(--accent); }
  .bottom-nav a.active .bn-ic::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; border-radius: 3px; background: var(--accent-grad); }
  .bottom-nav a svg { width: 22px; height: 22px; }
  .content { padding-bottom: calc(74px + env(safe-area-inset-bottom)); overflow-x: clip; }
  .watermark { display: none; }
  /* force inline grids to single column on phones (QR/modals live outside .content, unaffected) */
  .content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* section header links (See all / My lunches →) wrap instead of overflowing */
  .card-head { flex-wrap: wrap; row-gap: 4px; }
  .card-head > a { flex: none; }
  /* NB: the timeline/action row wrap lives in the block at the END of this file,
     so it sits AFTER the base .home-week/.home-act { display:flex } defaults and
     actually wins (equal specificity → source order). */
  .home-week > svg { flex: none; }

  /* lunch card embedded on the home: stack people 1-up so its min-width can't
     force the whole column wider than the phone */
  .lunch-people { grid-template-columns: 1fr; }
  .lunch-meta { gap: 6px 14px; }

  /* ── Drawer scrim ── */
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(11,16,32,.45); opacity: 0; pointer-events: none; transition: opacity var(--motion); }
  .shell.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .side-mobile { display: block; }

  /* ── Compact topbar ── */
  .topbar { padding: 8px var(--s-5); gap: 8px; }
  .topbar .lang-switch, #themeBtn, #roleBtn { display: none; }
  .searchbar { padding: 8px 12px; max-width: none; }
  .sb-in .sb-full { display: none; }
  .sb-in .sb-short { display: inline; }

  /* ── Compact demo banner with a Teampulse logo on the left ── */
  .demo-banner { padding: 5px var(--s-4); font-size: 11px; cursor: pointer; gap: 8px; justify-content: flex-start; }
  .demo-banner .demo-brand { display: inline-flex; align-items: center; gap: 5px; flex: none; }
  .demo-banner .demo-brand svg { flex: none; }
  .demo-banner .demo-brand b { font-size: 11px; font-weight: 800; letter-spacing: .01em; color: #fff; }
  .demo-banner .dotpulse { display: none; }
  .demo-banner .demo-full { display: none; }
  .demo-banner .demo-short { display: inline; opacity: .92; }
  .demo-banner.expanded .demo-full { display: inline; }
  .demo-banner.expanded .demo-short { display: none; }

  /* ── Compact connected hero ── */
  .welcome { padding: var(--s-5); border-radius: var(--r-lg); }
  .welcome h1 { font-size: var(--fs-lg); }
  .welcome p { font-size: var(--fs-sm); margin-top: 4px; }
  .welcome .badge { font-size: 10px; }
  .welcome .quick { margin-top: var(--s-4); gap: 8px; }
  .welcome .quick .btn { padding: 9px 13px; font-size: var(--fs-sm); }

  /* ── Compact stat grid (2-up, never a single tall column) ── */
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .home-stats .stat { padding: var(--s-4); }
  .home-stats .value { font-size: var(--fs-xl); }
  .home-stats .corner-ico { width: 28px; height: 28px; top: 10px; right: 10px; }
  .home-main { gap: var(--s-5); margin-top: var(--s-5); }
}

@media (max-width: 380px) {
  .welcome .quick { flex-direction: column; align-items: stretch; }
  .bottom-nav a span:last-child { font-size: 9px; }
}

/* Cohesion ring wrapper */
.cohesion { display: flex; align-items: center; gap: var(--s-7); flex-wrap: wrap; }
.cohesion .ring { position: relative; }
.cohesion .breakdown { flex: 1; min-width: 240px; display: grid; gap: 12px; }
.kv { display: flex; align-items: center; gap: 12px; }
.kv .kvl { width: 180px; font-size: var(--fs-sm); color: var(--text-soft); }
.kv .progress { flex: 1; }
.kv .kvv { width: 42px; text-align: right; font-weight: 700; font-size: var(--fs-sm); }

/* Key-value line (detail sidebars) */
.kv-line { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv-line:last-child { border-bottom: none; }
.kv-line svg { color: var(--accent); flex: none; }

/* Profile header */
.profile-head { display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Notifications */
.notif { display: flex; gap: 14px; padding: 14px var(--s-5); border-bottom: 1px solid var(--line); align-items: flex-start; }
.notif:last-child { border-bottom: none; }
.notif .ni { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(99,102,241,.1); color: var(--accent); flex: none; }
.notif.unread { background: var(--surface-2); }
.notif.unread .ni { background: var(--accent-grad); color: #fff; }

/* Admin status dot */
.sdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sdot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.sdot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.sdot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-bg); }

/* Module card (admin) */
.mreg { padding: var(--s-5); display: flex; flex-direction: column; gap: 10px; position: relative; }
.mreg .mreg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mreg .mreg-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(99,102,241,.1); color: var(--accent); }
.mreg.locked { opacity: .92; }
.mreg.locked .mreg-ic { background: var(--surface-3); color: var(--text-mut); }

/* Integration row */
.intg { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); }
.intg .intg-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-soft); flex: none; }

/* License panel */
.lic-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 880px) { .lic-grid { grid-template-columns: 1fr; } }
.lic-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.lic-row:last-child { border-bottom: none; }
.lic-row .k { color: var(--text-mut); }
.lic-row .v { font-weight: 600; }

/* Toolbar (filters) */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: var(--s-6); }
.toolbar .search-mini { flex: 1; min-width: 200px; max-width: 360px; }

/* ── Connected home (role-based dashboard) ─────────────────────────────── */
.home-stat { display: block; color: inherit; cursor: pointer; transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion); }
.home-stat:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
/* label/value must never run under the corner icon */
.home-stat .label { padding-right: 46px; }
.home-stat .value { padding-right: 46px; }
/* unread/pending indicator rides the corner icon (no overlap with the label) */
.corner-ico { position: absolute; }
.corner-ico .stat-ping { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-rose); border: 2px solid var(--surface); }

/* minmax(0,…) on the track AND min-width:0 on the items so a nowrap child
   (badge / link) can never blow a column wider than the viewport. */
.home-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-top: var(--s-6); }
.home-main > * { min-width: 0; }
.home-main .card, .home-main section { min-width: 0; max-width: 100%; }
@media (max-width: 980px) { .home-main { grid-template-columns: minmax(0, 1fr); } }

/* Action rows (Actions required / HR priority / etc.) */
.home-acts { display: grid; gap: 8px; }
.home-act { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: inherit; transition: background var(--motion), border-color var(--motion), transform var(--motion); }
.home-act:hover { background: var(--surface-2); border-color: var(--line-strong); }
.home-act:active { transform: scale(.995); }
.home-act-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(99,102,241,.1); color: var(--accent); }
.home-act-ic.sev-high { background: var(--err-bg); color: var(--err); }
.home-act-ic.sev-medium { background: var(--warn-bg); color: var(--warn); }
.home-act-ic.sev-low { background: var(--info-bg); color: var(--info); }
.home-act-main { flex: 1; min-width: 0; }
.home-act-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-act-cta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); flex: none; }

/* My week timeline + compact link rows */
.home-week-list { display: grid; gap: 4px; }
.home-week { display: flex; gap: 12px; align-items: center; padding: 9px 8px; border-radius: var(--r-md); color: inherit; transition: background var(--motion); }
.home-week:hover { background: var(--surface-2); }
.home-week-date { width: 38px; text-align: center; flex: none; line-height: 1.05; }
.home-week-date b { font-size: 1.05rem; display: block; }
.home-week-date small { font-size: 10px; text-transform: uppercase; color: var(--text-mut); }
.home-week-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c, #6366f1) 14%, transparent); color: var(--c, #6366f1); }
.home-week-main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.home-week-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-week-main .faint { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-week .badge { flex: none; white-space: nowrap; }
/* compact link rows (reco / communities / marketplace): a constrained grid so a
   long title ellipsizes inside its column instead of pushing the card wider.
   .home-week.home-cr (0,2,0) wins over the base .home-week flex (0,1,0). */
.home-week.home-cr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.home-cr .home-week-main { min-width: 0; }
.home-cr > svg { flex: none; align-self: center; }

/* IT / Super task rows with status + priority */
.home-task { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; flex-wrap: wrap; }
.home-task .sdot { flex: none; }
.home-task-main { flex: 1; min-width: 150px; }
.home-task .badge { flex: none; }

/* Product readiness checklist */
.home-readiness { display: grid; gap: 8px; }
.home-ready { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.home-ready .sdot { flex: none; }

/* responsive content tweaks */
@media (max-width: 600px) {
  .welcome .quick { flex-direction: column; align-items: stretch; }
}

/* ── Mobile row wrapping (MUST stay last: overrides the base flex defaults
   above by source order + a slightly higher specificity) ──────────────────
   On phones the status pill (timeline rows) and the CTA (action rows) drop
   onto their OWN line under the title, so they can never run out of frame. */
@media (max-width: 860px) {
  .home-week.home-tl {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "date ic main" "date ic badge";
    column-gap: 10px; row-gap: 3px; align-items: center; padding: 10px 8px;
  }
  .home-tl .home-week-date { grid-area: date; align-self: center; }
  .home-tl .home-week-ic { grid-area: ic; align-self: center; }
  .home-tl .home-week-main { grid-area: main; }
  .home-tl .badge { grid-area: badge; justify-self: start; max-width: 100%; margin-top: 1px; white-space: normal; }

  .home-acts .home-act {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic main" "ic cta";
    column-gap: 12px; row-gap: 4px; align-items: center;
  }
  .home-acts .home-act-ic { grid-area: ic; align-self: center; }
  .home-acts .home-act-main { grid-area: main; }
  .home-acts .home-act-cta { grid-area: cta; justify-self: start; }
}