/* Spaces as tabs (Audi 2026-10-16): one group per tab, ‹ › arrows, one deep-dive glass card per panel. */

/* ── Tab bar ─────────────────────────────────────────── */
.space-tabbar { max-width:1120px; margin-left:auto !important; margin-right:auto !important; position:sticky; top:calc(var(--ak-shell-height, 70px) + 8px); z-index:20; display:flex; align-items:center; gap:8px; margin:6px 0 22px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:linear-gradient(145deg,rgba(24,34,56,.94),rgba(9,14,28,.96)); box-shadow:0 12px 30px rgba(2,6,16,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.space-tabbar.is-searching .space-arrow { visibility:hidden; }
.space-tabs.home-jumps { flex:1 1 auto; min-width:0; display:flex; flex-wrap:nowrap; gap:4px; margin:0; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
.space-tabs::-webkit-scrollbar { display:none; }
.space-tabs.home-jumps a.space-tab { --c:#e2c98f; flex:1 0 auto; scroll-snap-align:center; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:8px 10px; border:1px solid transparent; border-radius:999px; background:transparent; color:#c9d3e4; font:600 .92rem/1.2 var(--font-body); white-space:nowrap; text-decoration:none; transition:background 220ms cubic-bezier(.22,.61,.36,1),color 180ms ease,border-color 180ms ease,box-shadow 220ms ease; }
.space-tab.tab-news { --c:#ff8a8a; } .space-tab.tab-task { --c:#f4c56a; } .space-tab.tab-people { --c:#f0a6c8; } .space-tab.tab-money { --c:#5fd9a2; } .space-tab.tab-knowledge { --c:#b9a4f7; } .space-tab.tab-system { --c:#74c5f8; } .space-tab.tab-products { --c:#ff9f6e; }
.space-tab-icon { font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif; font-size:1.05rem; line-height:1; }
.space-tab-count { min-width:0; height:auto; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; border-radius:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; color:#94a3b8; font-size:.78rem; font-weight:700; }
.space-tabs.home-jumps a.space-tab:hover { color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
.space-tabs.home-jumps a.space-tab[aria-selected="true"] { color:#f8fafc; background:linear-gradient(135deg, #684812 0%, #3b2708 100%); border:1.5px solid #c59738; box-shadow:0 6px 18px rgba(8,13,24,.45),inset 0 1px 0 rgba(255,255,255,.14); }
.space-tabs.home-jumps a.space-tab[aria-selected="true"] .space-tab-count { background:transparent !important; color:#e2c98f; }
.space-tabbar.is-searching .space-tab[aria-selected="true"] { color:#c9d3e4; background:transparent; box-shadow:none; }
.space-tabbar.is-searching .space-tab[aria-selected="true"] .space-tab-count { background:transparent !important; color:#dfe6f2; }
.space-tabs.home-jumps a.space-tab:focus-visible { outline:3px solid #e2c98f; outline-offset:2px; }
.space-arrow { flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(226,201,143,.45); border-radius:50%; background:rgba(226,201,143,.08); color:#f3dfae; font:500 1.6rem/1 var(--font-body); cursor:pointer; transition:background 180ms ease,color 180ms ease,transform 160ms ease; }
.space-arrow:hover { background:#e2c98f; color:#111620; }
.space-arrow:active { transform:translateY(2px); }
.space-arrow:focus-visible { outline:3px solid #e2c98f; outline-offset:2px; }

/* ── Panels: only the active group shows (search shows every match) ── */
.workspace-layout.is-tabbed .workspace-group { display:none; }
.workspace-layout.is-tabbed .workspace-group.is-active,
.workspace-layout.is-tabbed.is-searching .workspace-group:not([hidden]) { display:block; }
.workspace-layout.is-tabbed.is-searching .workspace-group + .workspace-group:not([hidden]) { margin-top:18px; }
.workspace-layout.is-tabbed .workspace-group + .workspace-group { margin-top:0; }

.workspace-layout.is-tabbed .workspace-group { position:relative; isolation:isolate; overflow:hidden; padding:clamp(22px,3vw,34px); border:1px solid rgba(255,255,255,.13); border-radius:20px; background:radial-gradient(circle at 0 0,rgba(var(--accent-rgb),.16),transparent 22rem),radial-gradient(circle at 100% 0,rgba(226,201,143,.08),transparent 18rem),linear-gradient(145deg,rgba(28,39,64,.96),rgba(10,15,30,.99)); box-shadow:0 24px 60px rgba(2,6,16,.42),inset 0 1px 0 rgba(255,255,255,.06); }
.workspace-layout.is-tabbed .workspace-group.slide-in-right { animation:space-in-right 420ms cubic-bezier(.16,1,.3,1); }
.workspace-layout.is-tabbed .workspace-group.slide-in-left { animation:space-in-left 420ms cubic-bezier(.16,1,.3,1); }
@keyframes space-in-right { from { opacity:.25; translate:36px 0; } to { opacity:1; translate:0 0; } }
@keyframes space-in-left { from { opacity:.25; translate:-36px 0; } to { opacity:1; translate:0 0; } }

/* Head: emoji tile + Sarabun title + one short line */
.workspace-layout.is-tabbed .workspace-group-head { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"emoji title" "emoji note"; column-gap:16px; align-items:center; padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid rgba(255,255,255,.1); }
.workspace-layout.is-tabbed .workspace-group-head::before { display:none; }
.workspace-group-emoji { grid-area:emoji; width:58px; height:58px; display:grid; place-items:center; border-radius:16px; border:1px solid rgba(var(--accent-rgb),.45); background:linear-gradient(145deg,rgba(var(--accent-rgb),.3),rgba(var(--accent-rgb),.06)); font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif; font-size:1.7rem; line-height:1; box-shadow:0 0 26px rgba(var(--accent-rgb),.22); }
.workspace-layout.is-tabbed .workspace-group-title { grid-area:title; margin:0; font-family:'AK Thai','Google Sans','Sarabun',var(--font-display); font-size:clamp(1.9rem,3vw,2.4rem); font-weight:500; line-height:1.15; letter-spacing:-.01em; color:#f4f6fb; }
.workspace-layout.is-tabbed .workspace-group-note { grid-area:note; max-width:none; margin:4px 0 0; color:#c3cddd; font-size:1rem; line-height:1.5; }

/* Body: live preview on the left, room links on the right (stacked on small screens) */
.workspace-layout.is-tabbed .workspace-list { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px,3vw,40px); align-items:start; background:transparent; border:0; padding:0; }
.workspace-layout.is-tabbed .workspace-list::before { display:none; }
.workspace-layout.is-tabbed.is-searching .workspace-list { grid-template-columns:1fr; }
.workspace-layout.is-tabbed.is-searching .ws-previews { display:none; }
.ws-previews { min-width:0; display:grid; gap:0; }
.workspace-layout.is-tabbed .home-preview { margin:0; padding:0 0 22px; border:0; border-radius:0; background:transparent; }
.workspace-layout.is-tabbed .home-preview + .home-preview { padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.workspace-layout.is-tabbed .home-preview .home-line { margin-bottom:16px; }
.workspace-layout.is-tabbed .home-preview h4 { color:rgb(var(--accent-rgb)); font-size:1.05rem; }
.ws-rooms { min-width:0; padding:4px 18px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(5,10,22,.35); }
.workspace-layout.is-tabbed .workspace-row { min-height:0; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.workspace-layout.is-tabbed .workspace-row:last-child { border-bottom:0; }
.workspace-layout.is-tabbed .workspace-index { display:none; }
.workspace-layout.is-tabbed .workspace-name strong { font-size:1.05rem; }
.workspace-layout.is-tabbed .workspace-name > span { font-size:.92rem; line-height:1.55; color:#bcc7d8; }
.workspace-layout.is-tabbed .workspace-row::before { inset:0 -18px; }

@media (max-width:1023px) {
  .workspace-layout.is-tabbed .workspace-list { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .space-tabbar { gap:4px; padding:4px; top:calc(var(--ak-shell-height, 70px) + 4px); }
  .space-arrow { flex-basis:40px; width:40px; height:40px; font-size:1.4rem; }
  .space-tabs.home-jumps a.space-tab { flex:0 0 auto; padding:8px 12px; min-height:44px; font-size:.88rem; }
  .space-tab:not([aria-selected="true"]) .space-tab-name,.space-tab:not([aria-selected="true"]) .space-tab-count { display:none; }
  .workspace-layout.is-tabbed .workspace-group { padding:20px 16px; border-radius:18px; }
  .workspace-group-emoji { width:48px; height:48px; font-size:1.4rem; border-radius:14px; }
  .workspace-layout.is-tabbed .workspace-group-title { font-size:1.6rem; }
  .ws-rooms { padding:2px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .workspace-layout.is-tabbed .workspace-group.slide-in-right,.workspace-layout.is-tabbed .workspace-group.slide-in-left { animation:none; }
  .space-tabs.home-jumps a.space-tab { transition:none; }
}
body.paused .workspace-layout.is-tabbed .workspace-group { animation:none !important; }
#spaces .home-toolbar,#spaces #home-filter-status,#spaces #home-access-note { max-width:1120px; margin-left:auto; margin-right:auto; }
/* Big monitors: the tab panel grows with the screen instead of sitting in a narrow column. */
@media (min-width:1800px) {
  #spaces .section-shell { width:min(1600px,calc(100vw - 120px)); }
  #spaces .workspace-layout,#spaces .space-tabbar,#spaces .home-toolbar,#spaces #home-filter-status,#spaces #home-access-note { max-width:none; }
}
@media (min-width:2300px) {
  #spaces .section-shell { width:min(1960px,calc(100vw - 160px)); }
  #spaces .workspace-layout .workspace-group { font-size:1.08rem; }
}
.space-tab-unit { margin-left:.3em; font-weight:600; }
@media (max-width:1279px) { .space-tab:not([aria-selected="true"]) .space-tab-unit { display:none; } }
/* 🔴 Alert dot: red = something late, failed or due within 3 days in that tab */
.space-tabs.home-jumps a.space-tab { position:relative; }
.space-tab-alert { min-width:22px; height:22px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:linear-gradient(145deg,#ff7a7a,#e5484d); color:#fff; font:800 .78rem/1 var(--font-body); box-shadow:0 0 0 2px rgba(9,14,28,.9),0 0 14px rgba(229,72,77,.6); animation:space-alert-pulse 2.4s ease-in-out infinite; }
.space-tab-alert::before { content:"!"; margin-right:3px; }
.space-tabs.home-jumps a.space-tab[aria-selected="true"] .space-tab-alert { box-shadow:0 0 0 2px rgba(255,255,255,.7); }
@keyframes space-alert-pulse { 0%,100% { box-shadow:0 0 0 2px rgba(9,14,28,.9),0 0 8px rgba(229,72,77,.45); } 50% { box-shadow:0 0 0 2px rgba(9,14,28,.9),0 0 18px rgba(229,72,77,.85); } }
@media (max-width:640px) { .space-tab:not([aria-selected="true"]) .space-tab-alert { display:inline-flex; } }
@media (prefers-reduced-motion:reduce) { .space-tab-alert { animation:none; } }
body.paused .space-tab-alert { animation:none; }
.home-badge.attention { color:#ffd2cf; background:#4a2328; }
/* An alert is worth more than the room count: on unselected tabs it takes the count's place so the bar still fits */
.space-tab[data-alerts]:not([aria-selected="true"]) .space-tab-count { display:none; }

/* 12d: emoji sit bare, no box behind them on any page (Audi 2026-10-18: "จำไว้ใช้กับทุกหน้าด้วย ไม่มีกล่องหลัง emoji") */
.workspace-group-emoji{background:none!important;border:0!important;box-shadow:none!important;outline:0;font-size:34px!important;line-height:1}
/* === Web Standard v2 tabs (2026-10-24, impeccable §1.3 + ak-ui .aku-ftab; replaces the 10-22 jewel-tone nth-child pills) === */
:is(.space-tabs.home-jumps a.space-tab){--g:var(--aku-primary);position:relative;background:none!important;border:0!important;box-shadow:none!important;border-radius:10px!important;
  color:var(--aku-copy)!important;font-family:var(--aku-font-body)!important;font-weight:600!important;
  filter:none!important;transform:none!important;transition:color 180ms ease,background 180ms ease!important}
:is(.space-tabs.home-jumps a.space-tab)::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:3px;background:var(--g);box-shadow:0 0 10px 1px var(--g);
  scale:0 1;transition:scale 240ms cubic-bezier(.16,1,.3,1);pointer-events:none}
:is(.space-tabs.home-jumps a.space-tab):is(:hover,:focus-visible){color:var(--aku-text)!important;background:color-mix(in srgb,var(--g) 9%,transparent)!important}
:is(.space-tabs.home-jumps a.space-tab):is(.active,.is-active,.is-on,.on,[aria-selected="true"],[aria-pressed="true"]){color:var(--aku-text)!important;
  background:radial-gradient(60% 90% at 50% 100%,color-mix(in srgb,var(--g) 24%,transparent),transparent 80%)!important}
:is(.space-tabs.home-jumps a.space-tab):is(.active,.is-active,.is-on,.on,[aria-selected="true"],[aria-pressed="true"])::after{scale:1 1}
:is(.space-tabs.home-jumps a.space-tab) :is(b,strong,small){color:inherit!important}
:is(.space-tabs.home-jumps a.space-tab):focus-visible{outline:2px solid var(--g);outline-offset:2px}
/* colour at rest like the old rainbow pills (Audi 2026-10-24: "แท็บขีดเส้นใต้ แต่ว่าช่วงแบ่งประเภท และสีเหมือนปุ่มสีรุ้ง"); tokens in ak-ui.css */
:is(.space-tabs.home-jumps a.space-tab){color:color-mix(in srgb,var(--g) 72%,var(--aku-text))!important}
html[data-theme="light"] :is(.space-tabs.home-jumps a.space-tab){color:color-mix(in srgb,var(--g) 55%,var(--aku-text))!important}
:is(.space-tabs.home-jumps a.space-tab)::after{scale:.32 1;opacity:.55}
:is(.space-tabs.home-jumps a.space-tab):is(:hover,:focus-visible)::after{scale:.7 1;opacity:.85}
:is(.space-tabs.home-jumps a.space-tab):is(.active,.is-active,.is-on,.on,[aria-selected="true"],[aria-pressed="true"])::after{opacity:1}
:is(.space-tabs.home-jumps a.space-tab):nth-child(6n+1){--g:var(--aku-r1)}:is(.space-tabs.home-jumps a.space-tab):nth-child(6n+2){--g:var(--aku-r2)}:is(.space-tabs.home-jumps a.space-tab):nth-child(6n+3){--g:var(--aku-r3)}
:is(.space-tabs.home-jumps a.space-tab):nth-child(6n+4){--g:var(--aku-r4)}:is(.space-tabs.home-jumps a.space-tab):nth-child(6n+5){--g:var(--aku-r5)}:is(.space-tabs.home-jumps a.space-tab):nth-child(6n+6){--g:var(--aku-r6)}
/* groups: add a divider between real groups by hand (see knowledge-map.css .kl-domains) */
html[data-theme="light"] :is(.space-tabs.home-jumps a.space-tab):is(.active,.is-active,.is-on,.on,[aria-selected="true"],[aria-pressed="true"]){color:color-mix(in srgb,var(--g) 85%,var(--aku-text))!important;font-weight:750!important}
@media (prefers-reduced-motion:reduce){:is(.space-tabs.home-jumps a.space-tab),:is(.space-tabs.home-jumps a.space-tab)::after{transition:none!important}}
/* the space tab bar stays a night panel in both themes: keep light ink there in light mode too */
html[data-theme="light"] .space-tabs.home-jumps.home-jumps.home-jumps a.space-tab.space-tab{color:color-mix(in srgb,var(--g) 30%,white)!important}
html[data-theme="light"] .space-tabs.home-jumps.home-jumps.home-jumps a.space-tab.space-tab:is(.active,.is-active,.is-on,.on,[aria-selected="true"],[aria-pressed="true"],:hover,:focus-visible){color:white!important}
/* === Web Standard v2 tabs END === */