/* ============================================================
   PLIALU CRM — couche de couverture qui dissimule le jeu.
   Thème clair "logiciel d'entreprise" pour le réalisme.
   ============================================================ */

#crm{
  position:fixed; inset:0; z-index:50; overflow:auto;
  background:#eef1f6; color:#1f2733;
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; touch-action:auto;
  display:flex; flex-direction:column;
}

/* ---------- barre du haut ---------- */
#crm-top{
  display:flex; align-items:center; gap:18px;
  padding:0 18px; height:58px; flex:0 0 58px;
  background:#fff; border-bottom:1px solid #dde3ec;
  box-shadow:0 1px 3px rgba(20,30,50,.05); position:sticky; top:0; z-index:2;
}
.crm-brand{display:flex; align-items:center; gap:9px}
.crm-logo{
  display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg,#4263eb,#3b5bdb); color:#fff;
  font-weight:800; font-size:18px;
}
.crm-name{font-weight:800; font-size:18px; letter-spacing:.5px; color:#1f2733}
.crm-suite{font-size:12px; color:#8a96a8; border-left:1px solid #d6dce6; padding-left:9px}

#crm-searchform{
  flex:1; max-width:540px; position:relative; display:flex; align-items:center;
}
.crm-searchic{position:absolute; left:12px; font-size:14px; opacity:.6; pointer-events:none}
#crm-search{
  width:100%; height:38px; padding:0 14px 0 36px;
  border:1px solid #d6dce6; border-radius:9px; background:#f4f6fa;
  font-size:14px; color:#1f2733; outline:none; transition:border-color .15s, box-shadow .15s;
  -webkit-user-select:text; user-select:text;
}
#crm-search:focus{border-color:#4263eb; box-shadow:0 0 0 3px rgba(66,99,235,.15); background:#fff}
#crm-search.crm-nope{border-color:#e2554f; box-shadow:0 0 0 3px rgba(226,85,79,.15)}

.crm-user{display:flex; align-items:center; gap:10px; margin-left:auto}
.crm-avatar{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:#dfe6f5; color:#3b5bdb; font-weight:700; font-size:13px;
}
.crm-uinfo{display:flex; flex-direction:column; line-height:1.2}
.crm-uinfo b{font-size:13px}
.crm-uinfo small{font-size:11px; color:#8a96a8}
#crm-logout{
  margin-left:6px; padding:8px 13px; border:1px solid #d6dce6; border-radius:8px;
  background:#fff; color:#46556a; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s;
}
#crm-logout:hover{background:#f4f6fa; border-color:#c3ccda}

/* ---------- corps ---------- */
#crm-main{display:flex; flex:1; min-height:0}

#crm-side{
  flex:0 0 220px; background:#fff; border-right:1px solid #dde3ec; padding:14px 12px;
  display:flex; flex-direction:column; gap:3px;
}
.crm-nav{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:9px;
  font-size:14px; color:#46556a; cursor:pointer; user-select:none;
}
.crm-nav span{font-size:16px; width:20px; text-align:center}
.crm-nav:hover{background:#f1f4f9}
.crm-nav.active{background:#eef2fe; color:#3b5bdb; font-weight:600}

#crm-content{flex:1; padding:26px 30px; min-width:0; overflow:auto}
.crm-h1{font-size:24px; font-weight:800; margin-bottom:4px}
.crm-sub{color:#8a96a8; font-size:13px; margin-bottom:22px}

.crm-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:24px}
.crm-card{
  background:#fff; border:1px solid #e4e9f1; border-radius:13px; padding:17px 18px;
  display:flex; flex-direction:column; gap:6px; box-shadow:0 1px 2px rgba(20,30,50,.04);
}
.crm-klabel{font-size:12px; color:#8a96a8; text-transform:uppercase; letter-spacing:.5px}
.crm-kval{font-size:26px; font-weight:800; color:#1f2733}
.crm-kup{font-size:12px; color:#19a463; font-weight:600}
.crm-kdn{font-size:12px; color:#e08a1e; font-weight:600}

.crm-tablewrap{background:#fff; border:1px solid #e4e9f1; border-radius:13px; overflow:hidden}
.crm-thead-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid #eef1f6; font-size:15px;
}
.crm-pill{font-size:11px; color:#3b5bdb; background:#eef2fe; padding:4px 10px; border-radius:20px; font-weight:600}
.crm-table{width:100%; border-collapse:collapse; font-size:13.5px}
.crm-table th{
  text-align:left; padding:11px 18px; color:#8a96a8; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.4px; background:#fafbfd;
}
.crm-table td{padding:13px 18px; border-top:1px solid #f0f3f8; color:#2b3543}
.crm-table tbody tr:hover{background:#fafbfd}
.crm-st{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600}
.crm-st.ok{background:#e6f7ee; color:#19a463}
.crm-st.wait{background:#fff3e0; color:#e08a1e}
.crm-st.late{background:#fdecec; color:#e2554f}

.crm-foot{margin-top:22px; text-align:center; font-size:12px; color:#9aa6b6}

/* ---------- bouton Déconnexion dans le jeu (à côté du plein écran) ---------- */
#logoutbtn{
  position:absolute; top:10px; right:54px; z-index:12; cursor:pointer;
  font-size:18px; line-height:1; color:var(--ink);
  background:rgba(11,16,24,.74); border:2px solid var(--line); padding:7px 11px;
}
#logoutbtn:active{transform:translateY(1px)}

/* ---------- responsive : masque le menu latéral sur petit écran ---------- */
@media (max-width:720px){
  #crm-side{display:none}
  .crm-suite,.crm-uinfo{display:none}
  #crm-content{padding:18px 14px}
  #crm-search{font-size:13px}
}