/* Wingleet CRM — portail (#/), barre des modules, logo « CRM », groupes interne / partagé de la page Projects.
   Chargé après style.css (web/index.html) : ses règles l'emportent à priorité égale. */
:root { --rail-w: 76px; --rail-h: 58px; }

/* ===== logo de la barre du haut et de la connexion ===== */
.crm-badge { display: inline-block; padding: 2px 6px; border-radius: 5px; background: var(--primary); color: #fff; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .06em; vertical-align: 2px; }
.topbar .logo { gap: 7px; color: var(--text); }
.topbar .logo .brand-name { letter-spacing: -.01em; }
.topbar.on-board .logo .crm-badge { background: #fff; color: var(--primary); }
/* Le W bleu reste lisible sur le fond (bleu, sombre) d'un tableau. */
.topbar.on-board .logo img { background: #fff; border-radius: 6px; padding: 3px; width: 26px; height: 26px; }
.login .logo { color: var(--text); }
.login .logo .crm-badge { font-size: 13px; line-height: 18px; padding: 2px 8px; border-radius: 6px; }

/* Le module où l'on est, à droite du logo (pas sur un tableau : son en-tête prend la place). */
.topbar .mod-sep { color: var(--line); font-size: 20px; font-weight: 300; margin: 0 2px; }
.topbar .mod-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; }
.topbar .mod-crumb:hover { background: var(--hover); text-decoration: none; }
.topbar .mod-crumb .icon { color: var(--primary); }

/* ===== barre des modules ===== */
/* Ordinateur : colonne fixe à gauche, sous la barre du haut. Le contenu s'écarte d'autant, la barre du haut garde toute la largeur. */
#app.with-rail { padding-left: var(--rail-w); }
#app.with-rail > .topbar { margin-left: calc(-1 * var(--rail-w)); }
.rail { position: fixed; z-index: 19; left: 0; top: var(--header-h); bottom: 0; width: var(--rail-w); display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; background: var(--surface-sunken); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.rail-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px; border-radius: 8px; color: var(--subtle); font-size: 11px; line-height: 13px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.rail-item .icon { width: 22px; height: 22px; stroke-width: 1.8; }
.rail-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.rail-item.on { background: var(--tint-blue); color: var(--primary); }
.rail-item.on::before { content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.rail-item:first-child { margin-bottom: 6px; }
.rail-item:first-child::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -5px; border-bottom: 1px solid var(--line); }
/* Sur un tableau : translucide, comme la barre du haut, par-dessus le fond du tableau. */
.rail.on-board { background: #0000003d; border-right: 0; backdrop-filter: blur(6px); }
.rail.on-board .rail-item { color: #ffffffe6; }
.rail.on-board .rail-item:hover { background: #ffffff33; color: #fff; }
.rail.on-board .rail-item.on { background: #fff; color: var(--primary); }
.rail.on-board .rail-item.on::before { background: #fff; }
.rail.on-board .rail-item:first-child::after { border-color: #ffffff40; }

/* Téléphone : barre d'onglets en bas de l'écran, sauf sur un tableau (le kanban garde toute la hauteur ; le logo ramène au portail). */
@media (max-width: 720px) {
  #app.with-rail { padding-left: 0; padding-bottom: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); }
  #app.with-rail > .topbar { margin-left: 0; }
  #app.rail-board { padding-bottom: 0; }
  .rail { top: auto; right: 0; width: auto; height: calc(var(--rail-h) + env(safe-area-inset-bottom, 0px)); flex-direction: row; gap: 0; padding: 4px 4px env(safe-area-inset-bottom, 0px); border-right: 0; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -2px 8px #091e4214; overflow-x: auto; overflow-y: hidden; }
  .rail.on-board { display: none; }
  .rail-item { flex: 1 1 0; min-width: 50px; padding: 6px 2px 4px; font-size: 10.5px; line-height: 12px; gap: 3px; border-radius: 8px; }
  .rail-item:first-child { margin-bottom: 0; }
  .rail-item:first-child::after { display: none; }
  .rail-item.on::before { left: 28%; right: 28%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  body:has(#app.with-rail:not(.rail-board)) #toast { bottom: calc(var(--rail-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  /* Logo : le W et « CRM » ; le module est rappelé à côté. */
  .topbar .logo .brand-name { display: none; }
  .topbar:not(.on-board) .logo .crm-badge { display: inline-block; }
  .topbar .mod-sep { display: none; }
  .topbar .mod-crumb { font-size: 14px; padding: 4px 6px; min-width: 0; overflow: hidden; }
  .topbar .mod-crumb span { overflow: hidden; text-overflow: ellipsis; }
}
@media print { .rail { display: none !important; } #app.with-rail { padding: 0; } #app.with-rail > .topbar { margin-left: 0; } }

/* ===== portail ===== */
.portal { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 24px 48px; }
.portal-head h1 { font-size: 26px; line-height: 32px; font-weight: 700; margin-bottom: 6px; }
.portal-head p { margin: 0 0 22px; font-size: 15px; line-height: 22px; max-width: 680px; }
.portal-digest { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 24px; border-radius: 10px; background: var(--surface-2); color: var(--text); }
.portal-digest:hover { text-decoration: none; background: var(--surface-3); }
.portal-digest.has-news { background: var(--tint-yellow); } .portal-digest.has-news:hover { background: var(--tint-yellow-2); }
.portal-digest .pd-bell { font-size: 18px; } .portal-digest .pd-text { flex: 1; min-width: 0; } .portal-digest .pd-title { font-weight: 600; }
.portal-digest .pt-go { color: var(--primary); }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.portal-tile { --mod: #0c66e4; --mod-bg: var(--tint-blue); position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 22px 20px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 1px 2px #091e4214; transition: border-color .12s, box-shadow .12s, transform .12s; }
.portal-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mod); }
.portal-tile:hover { text-decoration: none; border-color: var(--mod); box-shadow: 0 8px 20px #091e4224; transform: translateY(-2px); }
.portal-tile:focus-visible { outline: 3px solid var(--mod); outline-offset: 2px; }
.portal-tile .pt-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--mod-bg); color: var(--mod); margin-bottom: 4px; }
.portal-tile .pt-icon .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.portal-tile .pt-name { font-size: 18px; line-height: 24px; font-weight: 700; }
.portal-tile .pt-sub { flex: 1; color: var(--subtle); font-size: 13.5px; line-height: 19px; }
.portal-tile .pt-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pt-meta { padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--subtle); font-size: 12px; font-weight: 600; }
.pt-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--mod, var(--primary)); font-size: 13px; font-weight: 600; white-space: nowrap; }
.portal-tile .pt-go .icon { transition: transform .12s; } .portal-tile:hover .pt-go .icon { transform: translateX(3px); }
.portal-tile.mod-servers { --mod: #227d9b; --mod-bg: var(--tint-teal); }
.portal-tile.mod-api { --mod: #6e5dc6; --mod-bg: var(--tint-purple); }
.portal-tile.mod-wiki { --mod: #1f845a; --mod-bg: var(--tint-green); }
.portal-tile.mod-fiscal { --mod: #c25100; --mod-bg: var(--tint-orange); }
.portal-tile.mod-rd { --mod: #946f00; --mod-bg: var(--tint-yellow); }
.portal-quick { margin-top: 32px; }
.portal-quick h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 12px; }
.portal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 12px; border-radius: 16px; background: var(--surface-2); color: var(--text); font-weight: 500; }
.portal-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-chip:hover { background: var(--surface-3); text-decoration: none; }
@media (max-width: 720px) {
  .portal { padding: 18px 12px 24px; }
  .portal-head h1 { font-size: 22px; line-height: 28px; }
  .portal-head p { font-size: 14px; line-height: 20px; margin-bottom: 16px; }
  .portal-digest { flex-wrap: wrap; padding: 10px 12px; margin-bottom: 16px; }
  .portal-digest .pt-go { margin-left: 28px; }
  .portal-grid { grid-template-columns: 1fr; gap: 10px; }
  .portal-tile { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 0; padding: 14px 12px 12px 14px; }
  .portal-tile::before { right: auto; bottom: 0; width: 4px; height: auto; }
  .portal-tile .pt-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .portal-tile .pt-name { font-size: 16px; line-height: 20px; }
  .portal-tile .pt-sub { grid-column: 2 / span 2; font-size: 13px; line-height: 17px; }
  .portal-tile .pt-foot { grid-column: 3; grid-row: 1; margin: 0; }
  .portal-tile .pt-go { font-size: 0; gap: 0; }
  .portal-tile .pt-go .icon { font-size: 13px; }
  .portal-tile:hover { transform: none; }
}

/* ===== page Projects : groupes interne / partagé ===== */
.home .board-group + .board-group { margin-top: 8px; }
.home h3.group-h { flex-wrap: wrap; }
.group-n { padding: 0 8px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.group-hint { color: var(--muted); font-size: 13px; font-weight: 400; }
.tile .tile-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.vis-badge { padding: 1px 6px; border-radius: 10px; background: #ffffff38; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tile.has-logo .vis-badge.internal { background: var(--surface-3); color: var(--subtle); }
.tile.has-logo .vis-badge.public { background: var(--tint-green); color: var(--text-green); }
@media (max-width: 720px) {
  .group-hint { flex-basis: 100%; }
  .tile .foot { gap: 4px; }
  .tile .tile-meta { flex-wrap: wrap; row-gap: 2px; }
}