/* Sandclaw CRM — shell layout: app grid, sidebar nav, topbar, content wrapper. */

[hidden]:not([hidden=until-found i]){display:none!important}
img{max-width:100%}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }
html{overflow-x:hidden;}
body{margin:0; background:var(--bg-app); color:var(--text-primary); font-family:var(--font); font-size:13.5px; -webkit-font-smoothing:antialiased; font-optical-sizing:auto;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}

.app{display:grid; grid-template-columns:244px 1fr; min-height:100vh; transition:grid-template-columns 200ms var(--ease-out);}
.app.side-rail{grid-template-columns:68px 1fr;}

.cad{display:inline-flex; align-items:center; font-size:20px; line-height:1;}
.cad-word{font-family:'Outfit', var(--font-display); font-weight:700; color:var(--logo-ink); line-height:1;}
.cad-grow{font-family:'Outfit', var(--font-display); font-weight:700; color:var(--accent); margin-left:.01em;}

.side{background:var(--bg-sidebar); border-right:1px solid var(--border-subtle); padding:var(--sp-5) var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-6); position:sticky; top:0; height:100vh;}
.side-brand{padding:0 var(--sp-2); display:flex; align-items:center; justify-content:space-between; gap:6px;}
.side-rail-toggle{width:24px; height:24px; border-radius:var(--r-full); border:1px solid var(--border-subtle); background:var(--bg-surface-raised); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); flex:none; transition:background 140ms var(--ease-out), color 140ms var(--ease-out), transform 160ms var(--ease-out);}
.side-rail-toggle:hover{background:var(--bg-surface-hover); color:var(--text-primary);}
.side-rail-toggle svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.2;}
.app.side-rail .side-brand{justify-content:center; padding:0;}
.app.side-rail .side-brand .cad{display:none;}
.app.side-rail .side-rail-toggle svg{transform:rotate(180deg);}
.app.side-rail .nav-label{display:none;}
.app.side-rail .nav-item{justify-content:center; padding:9px; position:relative;}
.app.side-rail .nav-item .cnt{position:absolute; top:2px; right:2px; margin-left:0; font-size:8.5px; padding:1px 4px;}
.app.side-rail .nav-section-head{justify-content:center; padding:8px 0 4px; gap:0;}
.app.side-rail .nav-section-head span, .app.side-rail .nav-section-chevron{display:none;}
.app.side-rail .nav-section-head::before{content:''; width:22px; height:1px; background:var(--border-subtle);}
.app.side-rail .side-foot-inner{justify-content:center;}
.app.side-rail .side-foot-inner .who, .app.side-rail .side-foot-inner .role{display:none;}
.nav-group{display:flex; flex-direction:column; gap:1px; flex:1; overflow-y:auto; overflow-x:hidden; min-height:0;}
.nav-section{display:flex; flex-direction:column; gap:1px; margin-top:10px;}
.nav-section-head{display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; padding:6px 12px 5px; font-family:var(--font); font-size:10px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); transition:color 140ms var(--ease-out);}
.nav-section-head:hover{color:var(--text-secondary);}
.nav-section-chevron{width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.4; transition:transform 160ms var(--ease-out); flex:none;}
.nav-section.collapsed .nav-section-chevron{transform:rotate(-90deg);}
.nav-section.collapsed .nav-section-body{display:none;}
.nav-section-body{display:flex; flex-direction:column; gap:1px;}
.nav-item{width:100%; text-align:left; background:transparent; display:flex; align-items:center; gap:var(--sp-3); font-size:13.5px; font-family:var(--font); font-weight:var(--fw-medium); color:var(--text-secondary); text-decoration:none; padding:9px 12px; border-radius:var(--r-full); border:none; cursor:pointer; transition:background 160ms var(--ease-out), color 160ms var(--ease-out), transform 100ms var(--ease-out);}
.nav-item svg{width:16px;height:16px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none;}
.nav-item:hover:not(.active){background:var(--bg-surface-hover);}
.nav-item:active{transform:scale(.97);}
.nav-item.active{background:var(--accent-bg); color:var(--accent-t);}
.nav-item.active svg{stroke:var(--accent-t);}
.nav-item .cnt{margin-left:auto; font-size:10.5px; font-family:var(--mono); color:var(--text-muted); background:var(--bg-surface-raised); padding:1px 6px; border-radius:999px;}
.nav-item.crit .cnt{background:var(--danger-bg); color:var(--danger);}
.side-foot{margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--border-subtle);}
.side-foot-inner{display:flex; align-items:center; gap:9px; cursor:pointer; border-radius:var(--r-s); padding:6px; margin:0 -6px; transition:background 140ms var(--ease-out);}
.side-foot-inner:hover{background:var(--bg-surface-hover);}
.side-foot-inner:active{transform:scale(.98);}
.settings-tab-panel{display:none;}
.settings-tab-panel.active{display:block;}
.settings-section{max-width:640px; margin-bottom:var(--sp-7);}
.settings-section h3{font-size:14.5px; font-weight:var(--fw-semibold); margin-bottom:4px;}
.subhead{font-size:14.5px; font-weight:var(--fw-semibold); margin:0 0 4px;}
.subhead-sm{font-size:13px; font-weight:var(--fw-semibold); margin:0;}
.settings-section .ss-desc{font-size:12px; color:var(--text-muted); margin-bottom:14px;}
.settings-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-subtle);}
.settings-row:last-child{border-bottom:none;}
.settings-row .sr-title{font-size:13px; font-weight:var(--fw-medium);}
.settings-row .sr-desc{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.seg-toggle{display:flex; background:var(--bg-surface-raised); border:1px solid var(--border-subtle); border-radius:var(--r-full); padding:3px; max-width:100%; overflow-x:auto;}
.seg-toggle button{border:none; background:transparent; font-family:var(--font); font-size:12px; font-weight:var(--fw-semibold); color:var(--text-muted); padding:7px 14px; border-radius:var(--r-full); cursor:pointer; transition:background 140ms var(--ease-out), color 140ms var(--ease-out);}
.seg-toggle button.active{background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-pill);}
.switch{position:relative; width:38px; height:22px; flex:none; border-radius:999px; background:var(--bg-surface-raised); border:1px solid var(--border-strong); cursor:pointer; transition:background 160ms var(--ease-out), border-color 160ms var(--ease-out);}
.switch::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-muted); transition:transform 180ms var(--ease-spring), background 160ms var(--ease-out);}
.switch.on{background:var(--accent); border-color:var(--accent);}
.switch.on::after{transform:translateX(16px); background:var(--accent-fg);}
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:1000px){ .plan-grid{grid-template-columns:1fr;} }
.plan-card{border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:14px; background:var(--bg-surface-raised); position:relative;}
.plan-card.current{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.plan-card .pc-badge{align-self:flex-start; font-size:10px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.05em; color:var(--accent-t); background:var(--accent-bg); padding:3px 9px; border-radius:999px;}
.plan-card .pc-name{font-family:var(--font-display); font-size:16px; font-weight:700;}
.plan-card .pc-price{font-family:var(--font-display); font-size:26px; font-weight:800; margin-top:2px;}
.plan-card .pc-price span{font-size:12px; font-weight:var(--fw-medium); color:var(--text-muted);}
.plan-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1;}
.plan-card li{font-size:12.5px; color:var(--text-secondary); display:flex; align-items:flex-start; gap:8px;}
.plan-card li svg{width:14px;height:14px; stroke:var(--success); fill:none; stroke-width:2; flex:none; margin-top:1px;}
.usage-meter{margin-top:10px;}
body.density-compact .tbl td{padding:6px 12px;}
body.density-compact .tbl th{padding:0 12px 7px;}
body.density-compact .tl-item{padding-bottom:8px;}
body.density-compact .tl-dot{width:18px; height:18px;}
body.density-compact .tl-dot svg{width:9px; height:9px;}
body.density-compact .tl-line{left:8px; top:19px;}
.av{width:28px;height:28px;border-radius:var(--r-s); background:linear-gradient(155deg,var(--accent),color-mix(in srgb, var(--accent) 60%, black)); background-size:cover; background-position:center; flex:none;}
.av-editable{position:relative; cursor:pointer;}
.av-editable::after{content:''; position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity 120ms var(--ease-out); border-radius:inherit;}
.av-editable:hover::after{opacity:1;}
.av-editable .av-cam{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 120ms var(--ease-out); pointer-events:none;}
.av-editable:hover .av-cam{opacity:1;}
.av-cam svg{width:12px;height:12px; stroke:#fff; fill:none; stroke-width:2;}
.side-foot .who{font-size:12.5px; font-weight:var(--fw-semibold);}
.side-foot .role{font-size:11px; color:var(--text-muted);}

.topbar{display:grid; grid-template-columns:minmax(120px,1fr) minmax(180px,320px) auto; align-items:center; column-gap:var(--sp-4); padding:var(--sp-3) var(--sp-6); min-height:64px; border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg-app) 72%, transparent); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);}
.topbar-left{display:flex; align-items:center; gap:var(--sp-3); min-width:0;}
.topbar-center{display:flex; justify-content:center; min-width:0;}
.topbar-center .cmdk-trigger{width:100%; max-width:320px; height:34px; box-sizing:border-box; padding:0 12px; justify-content:flex-start;}
.topbar-center .cmdk-trigger kbd{margin-left:auto;}
.topbar-right{display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); min-width:0;}
.topbar-right .roadmap-wrap, .topbar-right #roadmapWrap{order:1;}
.topbar-right .ca-top{order:2;}
.topbar-right .bell-wrap:not(#roadmapWrap){order:3;}
.topbar-right #roadmapWrap .roadmap-chip{max-width:290px;}
.topbar-right #roadmapWrap .bell-panel{left:auto; right:0; transform-origin:top right;}
.crumb{font-size:12px; color:var(--text-muted);}
.crumb b{color:var(--text-primary); font-weight:var(--fw-semibold);}
.theme-toggle{display:flex; gap:2px; background:var(--bg-surface-raised); border:1px solid var(--border-subtle); border-radius:var(--r-full); padding:3px;}
.theme-toggle button{border:none; background:transparent; color:var(--text-muted); font-family:var(--font); font-size:11px; font-weight:var(--fw-semibold); padding:6px 12px; border-radius:var(--r-full); cursor:pointer; transition:background 160ms var(--ease-out), color 160ms var(--ease-out), transform 100ms var(--ease-out);}
.theme-toggle button:active{transform:scale(.94);}
.theme-toggle button.active{background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-pill);}

.swatches{display:flex; align-items:center; gap:6px; background:var(--bg-surface-raised); border:1px solid var(--border-subtle); border-radius:var(--r-full); padding:5px 6px;}
.swatches .sw{width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; transition:transform 120ms var(--ease-spring), border-color 120ms var(--ease-out); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.swatches .sw:hover{transform:scale(1.15);}
.swatches .sw:active{transform:scale(.92);}
.swatches .sw.active{border-color:var(--text-primary); transform:scale(1.12);}

/* ---- notification bell ---- */
.bell-wrap{position:relative;}
.bell-btn{position:relative; width:34px; height:34px; border-radius:var(--r-full); border:1px solid var(--border-subtle); background:var(--bg-surface-raised); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 140ms var(--ease-out), transform 100ms var(--ease-out);}
.bell-btn:hover{background:var(--bg-surface-hover);}
.bell-btn:active{transform:scale(.92);}
.bell-btn svg{width:16px;height:16px; stroke:var(--text-secondary); fill:none; stroke-width:1.7;}
.bell-dot{position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--bg-app);}
.bell-panel{position:absolute; top:calc(100% + 10px); right:0; width:360px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-lg); box-shadow:var(--shadow-popover); padding:14px; z-index:20; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity 160ms var(--ease-out), transform 160ms var(--ease-out); transform-origin:top right;}
.bell-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.bell-panel .bp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.bell-panel .bp-head b{font-size:13px; font-weight:var(--fw-semibold);}
.bell-panel .bp-head a{font-size:11px; color:var(--text-secondary); cursor:pointer;}
.bell-cats{display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap;}
.bell-cats .chip{padding:4px 10px; font-size:11px;}
.bell-list{max-height:340px; overflow-y:auto;}
.bell-item{display:flex; gap:9px; padding:9px 4px; border-radius:var(--r-s); cursor:default;}
.bell-item:hover{background:var(--bg-surface-hover);}
.bell-item .bi-dot{width:22px; height:22px; border-radius:var(--r-full); flex:none; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.bell-item .bi-dot svg{width:11px;height:11px; stroke:currentColor; fill:none; stroke-width:2.2;}
.bell-item b{font-size:12px; font-weight:var(--fw-semibold); display:block;}
.bell-item .bi-cat{display:inline-block; font-size:9px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--bg-surface-raised); border:1px solid var(--border-subtle); padding:1px 6px; border-radius:999px; margin-left:6px; vertical-align:middle;}
.bell-item span{font-size:11px; color:var(--text-muted);}

/* ---- roadmap, en blocs empilés (topbar popover + Paramètres) ---- */
.rm-scroll{ max-height:360px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.rm-month{ font-size:10.5px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); padding:12px 2px 6px; }
.rm-month:first-child{ padding-top:2px; }
.rm-item{ display:flex; gap:12px; padding:10px 2px; border-top:1px solid var(--border-subtle); border-radius:var(--r-s); transition:background 140ms var(--ease-out); }
.rm-item:first-of-type{ border-top:none; }
.rm-item.today{ background:var(--accent-bg); }
.rm-date{ font-family:var(--mono); font-size:10px; color:var(--text-muted); width:34px; flex:none; text-align:right; padding-top:2px; line-height:1.3; }
.rm-date b{ display:block; font-size:16px; color:var(--text-secondary); font-weight:var(--fw-semibold); font-family:var(--font-display); }
.rm-body{ min-width:0; flex:1; }
.rm-top{ display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
.rm-title{ font-size:12.5px; font-weight:var(--fw-semibold); color:var(--text-primary); }
.rm-desc{ font-size:11.5px; color:var(--text-secondary); line-height:1.4; }
.roadmap-chip{ height:34px; box-sizing:border-box; display:flex; align-items:center; gap:7px; background:var(--accent-bg); color:var(--accent-t); border:1px solid transparent; border-radius:var(--r-full); padding:0 13px; font-family:var(--font); font-size:12px; font-weight:var(--fw-semibold); cursor:pointer; white-space:nowrap; max-width:280px; transition:filter 140ms var(--ease-out), transform 100ms var(--ease-out);}
.roadmap-chip:hover{ filter:brightness(1.06); }
.roadmap-chip:active{ transform:scale(.97); }
.roadmap-chip svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }
.roadmap-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
@media (max-width:1240px){ .roadmap-chip span{ display:none; } .roadmap-chip{ padding:8px; } }
.roadmap-panel-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border-subtle); }
.roadmap-panel-foot a{ font-size:11.5px; color:var(--accent-t); cursor:pointer; font-weight:var(--fw-semibold); white-space:nowrap; }

/* ---- toasts ---- */
.toast-stack{position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:120; pointer-events:none;}
.toast{display:flex; align-items:center; gap:10px; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:0 16px 40px rgba(0,0,0,.22); padding:11px 16px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--text-primary); opacity:0; transform:translateY(8px) scale(.96); transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-spring);}
.toast.show{opacity:1; transform:translateY(0) scale(1);}
.toast .ti{width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--success-bg); color:var(--success);}
.toast .ti svg{width:11px;height:11px; stroke:currentColor; fill:none; stroke-width:2.6;}

/* ---- button loading state ---- */
.btn.is-loading{pointer-events:none; opacity:.85;}
.btn .spin{width:13px; height:13px; border-radius:50%; border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; animation:spin .7s linear infinite; display:none;}
.btn.is-loading .spin{display:inline-block;}
.btn.is-loading .btn-label{opacity:.001; width:0; overflow:hidden; white-space:nowrap;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .btn .spin{animation-duration:1.4s;} }

.content{padding:var(--sp-6); min-width:0;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-5); gap:16px; flex-wrap:wrap;}
.page-head h1{font-family:var(--font-display); font-size:25px; font-weight:var(--fw-heavy); letter-spacing:-.021em; line-height:1.15; margin:0; text-wrap:balance;}
.page-head .sub{font-size:12.5px; color:var(--text-muted); margin-top:4px; max-width:560px; letter-spacing:.001em;}

/* Panneaux fermés : hors écran ET hors du flux d'accessibilité. Sans ça, le panneau Roadmap
 * (520 px, opacité 0) élargissait toute la page sur téléphone et restait focalisable. */
.bell-panel:not(.open){visibility:hidden; transition:opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;}
.bell-panel.open{visibility:visible;}
body{overflow-x:clip;}
@media (max-width:640px){
  .bell-panel{position:fixed !important; top:60px !important; left:12px !important; right:12px !important; width:auto !important;}
}

/* Champs de saisie dans l'app : suivent le thème (la classe .login-input est sombre en dur). */
#page-root .login-input{background:var(--bg-surface-raised); color:var(--text-primary); border-color:var(--border-strong);}
#page-root .login-input::placeholder{color:var(--text-muted);}

/* Petits écrans : un tableau défile dans sa carte au lieu d'élargir la page ; les lignes de réglages passent à la ligne. */
@media (max-width:1000px){
  .card:has(table.tbl){overflow-x:auto;}
}
@media (max-width:640px){
  .settings-row{flex-wrap:wrap; gap:10px;}
}

.main{min-width:0;}

/* Petits écrans : les rangées de chiffres, d'alertes et de boutons passent à la ligne au lieu de dépasser. */
@media (max-width:640px){
  .stat-strip{flex-wrap:wrap;}
  .stat-strip .stat-cell{flex:1 1 40%; min-width:0; border-bottom:1px solid var(--border-subtle);}
  .alert-item{flex-wrap:wrap;}
  .alert-body{min-width:0; flex:1 1 60%;}
  .filter-wrap .filter-panel{left:auto; right:0; max-width:calc(100vw - 32px);}
  .conn-card{min-width:0;}
  .conn-actions{max-width:100%;}
  .toolbar, .cal-toolbar{flex-wrap:wrap;}
}

/* Barre du haut sur petits écrans : recherche réduite à l'icône, ClawAgent sans libellé. */
@media (max-width:1000px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto; padding:var(--sp-3) var(--sp-4);}
  .topbar-center{justify-content:flex-end;}
  .topbar-center .cmdk-trigger{width:auto;}
  .topbar-center .cmdk-trigger kbd{display:none;}
}
@media (max-width:640px){
  .topbar{column-gap:var(--sp-2);}
}

/* Panneau Roadmap de la barre : une ligne par étape, titres seulement. */
#roadmapPanel .rm-scroll{max-height:none; overflow:visible; margin:0; padding:0;}
.rm-line{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-s); font-size:13px; color:var(--text-secondary);}
.rm-line + .rm-line{margin-top:1px;}
.rm-n{font:var(--fw-semibold) 11px/1 var(--mono); color:var(--text-muted); width:20px; flex:none;}
.rm-t{flex:1; min-width:0; color:var(--text-primary); line-height:1.35;}
.rm-tag{font-size:10.5px; font-weight:var(--fw-semibold); color:var(--accent-t); background:var(--accent-bg); border-radius:999px; padding:3px 8px; flex:none;}
.rm-line.next{background:var(--accent-bg);}
.rm-line.next .rm-n{color:var(--accent-t);}
.rm-line.next .rm-t{font-weight:var(--fw-semibold);}
.rm-line.done .rm-n{color:var(--success);}
.rm-line.done .rm-t{color:var(--text-muted);}

.topbar-center .cmdk-trigger kbd{font-size:9px; padding:2px 4px; border-radius:4px;}