/* =========================================================
   WebMail App — webmail_app.css
   ---------------------------------------------------------
   Objectifs:
   - Layout 3 colonnes (folders / list / viewer)
   - UI "Outlook light" moderne
   - Responsive mobile
   - Fix overflow: vFrom trop long, wm-item-from trop long
   - Scroll infini, groupes Année+Mois
   - Unread background, multi-sélection, drag & drop
   - Modals + Toast + Context menu
   ========================================================= */


/* =========================================================
   0) Variables & Reset
   ========================================================= */

   :root{
    /* couleurs */
    --bg: #f6f7fb;
    --panel: #5e5e5e; /*rgba(255,255,255,.92);*/
    --panel-solid: #ffffff;
  
    --text: #dddddd; /*#0f172a;*/
    --muted: rgba(212, 212, 212, 0.62);
    --border: rgba(15, 23, 42, .10);
  
    --primary: #2563eb;
    --primary-soft: rgba(37,99,235,.10);
  
    --danger: #dc2626;
    --danger-soft: rgba(220,38,38,.12);
  
    --shadow: 0 18px 45px rgba(2, 6, 23, .12);
  
    /* radius */
    --r-xl: 12px;
    --r-lg: 12px;
    --r-md: 12px;
    --r-sm: 12px;
  
    /* spacing */
    --p-1: 8px;
    --p-2: 12px;
    --p-3: 16px;
    --p-4: 20px;
  
    /* heights */
    --topbar-h: 64px;
  
    /* typography */
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  }
  
/* Afficher les \n dans les modales UI */
#uiModalText{
  white-space: pre-wrap !important;
}


/*  
  *{ box-sizing:border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    font-family: var(--font);
    color: var(--text);
    background-color: whitesmoke;/*
    background: radial-gradient(1200px 650px at 10% 0%, rgba(37,99,235,.09), transparent 55%),
                radial-gradient(900px 500px at 90% 20%, rgba(220,38,38,.05), transparent 55%),
                var(--bg);
  }
*/

  /* Liens / inputs */
  a{ color:inherit; text-decoration:none; }
  button, input, select, textarea{font: inherit; color: white;}
  
  /* Aide globale pour les ellipsis: si un flex child doit pouvoir shrink,
     il faut min-width: 0 (très important) */
  .min0{ min-width:0; }
  
  
  /* =========================================================
     1) App Shell
     ========================================================= */
  
  .wm-app{
    width: min(1370px, 100%);
    margin: 0 auto;
    padding: 14px;
  }
  
  .wm-topbar{
    margin-top : 96px;
    height: var(--topbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    padding: 0 var(--p-4);
  }
  
  /* Topbar actions */
  .wm-actions{
    display:flex;
    align-items:center;
    gap: 20px;
    min-width:0;
    width: 100%;
  }
  
  /* Search */
  .wm-search{
    position: relative;
    flex: 1; 
    display:flex;
    align-items:center;
    gap: 8px;
    padding: 2px 14px;
    background-color: rgb(78, 78, 78); /* rgba(2,6,23,.04);*/
    border: 1px solid rgba(2,6,23,.08);
    border-radius: 999px;
    color: white;
  }

  .wm-search input {
    padding-right: 28px;
  }
  
  .wm-search-clear {
    position: absolute;
    right: 60px;
    top: 49%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    display: none;
    opacity: .6;
  }
  
  .wm-search-clear:hover {
    opacity: 1;
  }

#q{
line-height: 24px;
}




  #btnSearch{
  background-color: rgb(49, 49, 49);
  border-radius: 50%;
  height: 36px;
  width: 36px;
  padding-bottom: 11.5px;
  margin-bottom: 1px;
  }

  #btnRules,
  #btnNewFolder,
  #btnMonthsCloseAll,
  #btnMonthsOpenAll,
  #btnEmptyList,
  .wm-count{
  background-color: rgb(78, 78, 78);
  }

  #btnRefresh{
  background-color: rgb(49, 49, 49);}

  #btnCloseCompose,
  #btnAddFiles{
  color: rgb(34, 34, 34); 
  }








.wm-search{
margin-top: 1px;
}

  .wm-search input{
    border:0;
    outline:none;
    background:transparent;
    width: 100%;
    min-width: 120px;
    
  }
  
  #listTotal{
    color: var(--text);
  }


  /* =========================================================
     2) Buttons
     ========================================================= */
  
  .wm-btn{
    border: 1px solid rgba(2,6,23,.10);
    /*background: rgba(255,255,255,.85);*/
    /*color: var(--text);*/
    padding: 9px 12px;
    border-radius: 999px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  
#btnNewFolder:hover,
#btnRules:hover,
#btnMonthsCloseAll:hover,
#btnMonthsOpenAll:hover,
#btnEmptyList:hover,
#btnClearSelection:hover,
#btnSelectAll:hover{
background-color: rgb(150, 150, 150);
color: white;
}

#btnSearch:hover,
#btnRefresh:hover{
background-color: rgb(117, 117, 117);
}

#btnSelectAll,
#btnClearSelection{
background-color: rgb(78, 78, 78);}


#btnCloseRules,
#btnSaveRule,
#btnCancelEditRule,
#btnApplyRules,
#btnApplyRulesAll,
#rMoveTo{
color: black;
}

#rMoveTo{
  width: 455px;
color: black;
cursor: pointer;}


  .wm-btn:active{
    transform: translateY(0);
  }
  .wm-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
  }
  
  /* Variantes */
  .wm-btn-primary{
   /*border-color: rgba(37,99,235,.25);*/
    background: rgb(160, 160, 160);
    
    /*background: rgba(37,99,235,.10);*/
  }
  .wm-btn-primary:hover{ background: rgba(37, 100, 235, 0.678); }
  
  .wm-btn-danger{
    /*border-color: rgba(220,38,38,.25);*/
    background: rgba(203, 27, 27, 0.7);
  }
  .wm-btn-danger:hover{ background: rgb(203, 27, 27); }
  
  .wm-btn-ghost{
    background: transparent;
    border-color: rgba(2,6,23,.10);
  }
  .wm-btn-ghost:hover{
    background: rgba(2,6,23,.05);
  }
  
  /* Badge sélection */
  .wm-selected-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(2,6,23,.08);
    border: 1px solid rgba(2,6,23,.10);
  }
  
  /* Badge unseen inline (folders) */
  .wm-unseen-inline{
    margin-left: 6px;
    font-size: 16px;
    color:  #52a5e4d3;
    font-weight: 700;
  }
  
  
  /* =========================================================
     3) Main Layout (Sidebar / List / Viewer)
     ========================================================= */
  
#btnCompose{
padding-right: 40px;
padding-left: 40px;
color: white;
}

#btnCompose{
  background-color: rgb(150, 150, 150);
}

#btnSend:hover,
#btnCompose:hover{
  background: rgba(37, 100, 235, 0.678);
}


#btnSend{
  background-color: rgb(211, 211, 211);
}



.wm-main{
  margin-top: 6px;
  display:grid;
  grid-template-columns: 260px 360px 1fr;
  gap: 6px;
  /*min-height: calc(100vh - (var(--topbar-h) + 14px + 28px));*/
  height: 75vh;
}

/* Panels */
.wm-sidebar,
.wm-list,
.wm-view{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow: hidden; /* keep rounded corners */
}

/* Sidebar */
.wm-sidebar{
  display:flex;
  flex-direction:column;
  min-height: 520px;
}

.wm-sidebar-head{
  /*padding: var(--p-3);*/
  padding: 0px 4px 0px 10px;
  border-bottom: 1px solid rgb(29, 29, 29); /*var(--border);*/
  min-height: 74px;
  box-sizing:border-box;
  /*color: black;*/
}

.wm-sidebar-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

.wm-folders{
  padding: 10px;
  overflow:auto;
  flex: 1 1 auto;
}

.wm-sidebar-foot{
  padding: var(--p-3);
  border-top: 2px solid rgb(29, 29, 29);
}

/* List */
.wm-list{
  display:flex;
  flex-direction:column;
  min-height: 520px;
}
.wm-list-head{
  /*padding: var(--p-3);*/
  padding: 16px 10px 16px 6px;
  border-bottom: 1px solid rgb(29, 29, 29); /*var(--border)*/;
  display:flex;
  align-items:center;
  /*justify-content:space-between;*/
  gap: 12px;
  min-width:0;
  box-sizing:border-box;
  /*color: black;*/
}
.wm-list-title{
  font-weight: 850;
  font-size: 14px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-left: 8px;
  color: var(--text);
}
.wm-list-right{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}
.wm-list-total{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.wm-list-scroll{
  overflow:auto;
  padding: 10px;
  flex: 1 1 auto;
}
.wm-list-foot{
  padding: 10px var(--p-3);
  border-top: 1px solid rgb(29, 29, 29);
}

/* Viewer */
.wm-view{
  display:flex;
  flex-direction:column;
  min-height: 520px;
}

/* =========================================================
    4) Folders (tree, drop targets, active)
    ========================================================= */

.wm-folder{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 10px 10px;
  border-radius: var(--r-md);
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
  user-select:none;
}
.wm-folder:hover{
  background: rgba(229, 231, 235, 0.1);
  /*transform: translateY(-1px);*/
}
.wm-folder.is-active{
  background: rgba(229, 231, 235, 0.1);
  /*border: 1px solid rgba(37,99,235,.18);*/
}

/* left block inside folder item */
.wm-folder .wm-folder-left{
  display:flex;
  align-items:center;
  min-width:0;
}

/* label inside folder -> ellipsis safe */
.wm-folder .wm-folder-left span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* dot for indentation */
.wm-folder .wm-folder-dot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(2,6,23,.18);
  flex: 0 0 auto;
}

/* message count */
.wm-count{
  font-size: 12px;
  color: var(--text);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.08);
  
  /*background: rgba(255,255,255,.70);*/
  flex: 0 0 auto;
}

/* Drop target highlight */
.wm-folder.is-drop-target{
  outline: 2px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.08);
}


/* =========================================================
    5) Email list items (selection, unread, overflow FIX)
    ========================================================= */

/* item wrapper */
.wm-item{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--r-md);
  cursor:pointer;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
  min-width:0; /* 🔥 crucial pour ellipsis en flex */
}

.wm-item:hover{
  background: rgba(122, 123, 124, 0.527);
}

.wm-item.is-unread{
  background: rgba(37,99,235,.08);
  /*border-color: rgba(37,99,235,.10);*/
}

.wm-item.is-selected{
  background: rgba(203, 27, 27, 0.596);
  /*background: rgba(122, 123, 124, 0.527);*/
  /*border-color: rgba(2,6,23,.10);*/
}

.wm-item.is-opened {
  background: rgba(122, 123, 124, 0.527);
}

.wm-item.is-opened:hover {
  background: rgba(122, 123, 124, 0.692);
}




/* =========================================================
   Avatar expéditeur + checkbox type Outlook
   ---------------------------------------------------------
   - Avatar visible par défaut
   - Checkbox visible uniquement sur la zone avatar
   - Checkbox toujours visible si l'email est sélectionné
   - Fond fixe gris pour les avatars image (utile pour PNG transparents)
   ========================================================= */

.wm-item{
  align-items: flex-start;
  gap: 10px;
}

.wm-item-leading{
  position: relative;
  width: 32px;
  min-width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-top: 10px;
  margin-left: 4px;
}

/* Avatar rond façon Outlook */
.wm-avatar{
  position: absolute;
  inset: 0;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  user-select: none;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}

/* Fond fixe derrière les PNG transparents / avatars image */
.wm-avatar.has-image{
  color: transparent;
  background-color: rgb(43, 43, 43);
}

/* Checkbox centrée et cachée par défaut */
.wm-selectbox{
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: scale(.9);
  transition: opacity .12s ease, transform .12s ease;
}

/* Affichage de la checkbox uniquement sur la zone avatar */
.wm-item-leading:hover .wm-selectbox,
.wm-item.is-selected .wm-selectbox{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* On masque l'avatar uniquement quand on survole sa zone */
.wm-item-leading:hover .wm-avatar,
.wm-item.is-selected .wm-avatar{
  opacity: 0;
  transform: scale(.86);
}

/* main content */
.wm-item-content{
  flex: 1 1 auto;
  min-width:0; /* 🔥 crucial */
}

/* top line: from + date */
.wm-item-top{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  min-width:0; /* 🔥 crucial */
}

.wm-item-from{
  font-weight: 800;
  font-size: 13px;

  /* ✅ FIX overflow */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex: 1 1 auto;
}

.wm-item-date{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* subject + snippet */
.wm-item-subject{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wm-item-snippet{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Dragging feel */
.wm-item.is-dragging{
  opacity:.7;
  transform: scale(.99);
}

/* Sentinel (intersection observer) */
.wm-infinite-sentinel{
  height: 1px;
}


/* =========================================================
    6) Groupes Année+Mois (collapsible)
    ========================================================= */

.wm-month{
  border-radius: var(--r-lg);
  border: 1px solid rgb(73, 73, 73);
  background: rgb(83, 83, 83);
  overflow:hidden;
  margin-bottom: 10px;
}

.wm-month-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  cursor:pointer;
  user-select:none;
  /*background: rgba(2,6,23,.03);*/
  /*background-color: rgb(82, 82, 82);*/
  /*border-bottom: 1px solid rgba(27, 27, 27, 0.616);*/
}

.wm-month-title{
  font-weight: 900;
  font-size: 13px;
}

.wm-month-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.wm-month-count{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  background: rgb(78, 78, 78);
}

.wm-month-chevron{
  transform: rotate(90deg);
  opacity:.65;
  transition: transform .14s ease;
}

.wm-month:not(.is-open) .wm-month-chevron{
  transform: rotate(0deg);
}

.wm-month-body{
  padding: 6px;
  display:none;
  background-color: rgb(87, 87, 87);
}

.wm-month.is-open .wm-month-body{
  display:block;
}


/* =========================================================
    7) Viewer (header overflow FIX + iframe)
    ========================================================= */

/* Header top: meta (left) + actions (right) */
.wm-view-head{
  padding: var(--p-3);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  min-width:0;
  height: 74px;
  box-sizing:border-box;
  background-color: rgb(207, 207, 207);
}

#moveTo{
background-color: rgb(207, 207, 207);
color: rgb(49, 49, 49);
cursor: pointer;}





/* Meta block must be able to shrink */
.wm-view-meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width:0;           /* 🔥 crucial */
  flex: 1 1 auto;
}






.wm-view-subject{
  font-weight: 950;
  font-size: 14px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-top: 8px;
  color: rgb(39, 39, 39); /*var(--text);*/
}

/* ✅ FIX: vFrom long should never push buttons off screen */
#vFrom{
  color: rgb(39, 39, 39);
  font-size: 12px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 100%;
}

.wm-view-date{
  color: rgb(39, 39, 39);
  font-size: 12px;
}

/* Right actions must never shrink */
.wm-view-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Move select */
.wm-view-actions select{
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 9px 12px;
  outline:none;
}

/* Viewer body */
.wm-view-body{
  padding: 0;
  flex: 1 1 auto;
  min-height: 0; /* pour que l'iframe puisse prendre la hauteur en flex */
  
}

/* Iframe preview takes full available space */
#vFrame{
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  
}

.wm-attach-thumb-btn{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  padding: 2px;
  border-radius: 10px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.wm-attach-thumb{
  width: 36px;
  height: 36px;
  object-fit: cover; /* ✅ ici on veut une miniature cadrée */
  border-radius: 8px;
  display:block;
}


/* =========================================================
    8) Modals
    ========================================================= */

.wm-modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 8000;
  background: rgba(2,6,23,.40);
  backdrop-filter: blur(10px);
}

.wm-modal.is-open{ display:flex; }

.wm-modal-card{
  width: 540px; /*min(480px, 100%);*/
  min-height: 600px;
  background: rgb(240, 240, 240);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 70px rgba(2,6,23,.24);
  margin-bottom: 80px;
  color: rgb(37, 37, 37);
  overflow: auto;
}

.wm-modal-head{
  padding: 12px 16px 12px 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.wm-modal-title{
  font-weight: 950;
}

.wm-modal-body{
  padding: var(--p-3);
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow: auto;
}

.wm-modal-foot{
  padding: var(--p-3);
  border-top: 1px solid rgba(15,23,42,.10);
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* Fields */
.wm-field{
  display:flex;
  flex-direction:column;
  gap: 6px;

}
.wm-field span{
  font-size: 12px;
  color: rgb(26, 26, 26);
  font-weight: 700;
}
.wm-field input,
.wm-field textarea,
.wm-field select{
  border: 1px solid rgba(2,6,23,.12);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.92);
  padding: 10px 12px;
  outline:none;
  color: #2c2c2c;
}


#cBody{
  resize: vertical;
  height: 240px;
  color: black;
}



#cFilesList{
  display:none !important;
  width: 100%;
  height: 181px;
}


.composeAttachmentsView{
width: 100%;
}

#btnSaveDraft,
#btnCancelCompose,
#btnSend{
color: #141414;
}





/* Ligne MoveTo + Enabled */
.wm-field-row{
  display: flex;
  gap: 12px;
  align-items: flex-end;
}


.wm-field-enabled{
  flex: 0 0 calc(30% - 12px);
  max-width: calc(30% - 12px);
}

.wm-field-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  white-space: nowrap;
  margin-bottom: 0px;
}

.wm-rules-actions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

/* bouton principal pleine largeur */
#btnSaveRule{
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* boutons du dessous = 1/3 chacun */
#btnCancelEditRule,
#btnApplyRules,
#btnApplyRulesAll{
  width: 100%;
  text-align: center;
  justify-content: center; /* utile si flex dans .wm-btn */
}

#btnToggleRulesList{
color: rgb(22, 22, 22);
}



#rEnabled{
cursor: pointer;
width: 24px;
height: 24px;
}




/* =========================================================
    9) Toast
    ========================================================= */

.wm-toast{
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(50, 50, 58, 0.92);
  box-shadow: 0 18px 45px rgba(2,6,23,.18);
  z-index: 9000;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.wm-toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}


/* =========================================================
    10) Context menu (Right click on folders)
    ========================================================= */

.wm-ctx{
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
  padding: 6px;
}

.wm-ctx-item{
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}
.wm-ctx-item:hover{ background: rgba(2,6,23,.05); }

.wm-ctx-danger{ color: #b91c1c; }
.wm-ctx-danger:hover{ background: rgba(239,68,68,.12); }


/* =========================================================
    11) Utility text
    ========================================================= */

.wm-muted{
  color: rgb(37, 37, 37);
  font-size: 12px;
}

#pagingHint{
color: #b8b8b8;
}

/* =========================================================
    12) Responsive (Mobile)
    ---------------------------------------------------------
    - On empile: sidebar -> list -> viewer
    - Viewer devient pleine largeur sous la liste
    ========================================================= */
/*
@media (max-width: 1100px){
  .wm-main{
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto auto;
  }
  .wm-view{
    grid-column: 1 / -1;
    min-height: 520px;
  }
}

@media (max-width: 820px){
  .wm-app{ padding: 10px; }

  .wm-topbar{
    padding: 0 12px;
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    gap: 10px;
  }

  .wm-search input{
    width: 180px;
  }

  .wm-main{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .wm-sidebar,
  .wm-list,
  .wm-view{
    border-radius: var(--r-xl);
  }

  .wm-sidebar{ min-height: 260px; }
  .wm-list{ min-height: 360px; }
  .wm-view{ min-height: 420px; }

  /* Viewer actions wrap 
  .wm-view-actions{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 520px){
  .wm-search input{ width: 140px; }

  .wm-title-sub{ max-width: 220px; }

  .wm-btn{
    padding: 8px 10px;
  }

  .wm-item{
    padding: 10px 8px;
  }
}
*/
/* =========================================================
  UI tweak: wm-item now shows SUBJECT first
  ========================================================= */

/* top row becomes subject + date */
.wm-item-top{
display:flex;
justify-content:space-between;
gap: 12px;
min-width:0;
}

/* subject now lives in top row -> ellipsis */
.wm-item-subject{
flex: 1 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight: 850;
}

/* from is now second line -> also ellipsis */
.wm-item-from{
margin-top: 2px;
font-weight: 700;
font-size: 13px;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}

/* date fixed width */
.wm-item-date{
flex: 0 0 auto;
white-space:nowrap;
}

/* =========================================================
  Compact icon buttons in viewer header
  ========================================================= */

.wm-icon-btn{
width: 38px;
height: 38px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 999px;
border: 1px solid rgba(2,6,23,.12);
background: rgba(14, 14, 14, 0.219);
cursor:pointer;
transition: transform .12s ease, background .12s ease;
}

.wm-icon-btn:hover{/*
background: rgba(158, 158, 158, 0.767);
transform: translateY(-1px);*/
background-color: rgb(199, 199, 199);
}

.wm-icon-btn:active{ transform: translateY(0); }

.wm-icon-btn svg{
width: 18px;
height: 18px;
fill: white; /*rgba(2,6,23,.72);*/
}

.wm-icon-btn-danger{
border-color: rgba(220,38,38,.25);
background: rgba(220,38,38,.10);
}
.wm-icon-btn-danger:hover{
background: rgba(220,38,38,.14);
}
.wm-icon-btn-danger svg{
fill: rgba(185,28,28,.92);
}

/* =========================================================
  PATCH UI — wm-item layout (from > subject, date+time stacked)
  ========================================================= */

/* Un peu plus de hauteur/respiration */
.wm-item{
padding: 12px 10px 12px 0px;
}

/* Top row: from (left) + date/time (right) */
.wm-item-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap: 12px;
min-width:0;
}

/* From en haut à gauche */
.wm-item-from{
font-weight: 900;
font-size: 13px;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
flex: 1 1 auto;
}

/* Sujet en dessous */
.wm-item-subject{
margin-top: 3px;
font-weight: 800;
font-size: 13px;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* Snippet sur 2 lignes */
.wm-item-snippet{
margin-top: 4px;
color: var(--muted);
font-size: 12px;

/* 2 lignes max */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

/* Date + heure empilées 
.wm-item-date{
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
line-height: 1.1;
}
*/
.wm-item-date-line{
font-size: 12px;
color: var(--muted);
font-weight: 700;
}

.wm-item-time-line{
margin-top: 2px;
font-size: 12px;
color: rgba(15,23,42,.52);
font-weight: 700;
}

/* =========================================================
  PATCH UI — wm-month-count in a round badge
  ========================================================= */
/*  
.wm-month-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 28px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(2,6,23,.05);
border: 1px solid rgba(2,6,23,.10);
color: rgba(15,23,42,.75);
font-size: 12px;
font-weight: 800;
}
*/
/* =========================================================
  PATCH: Dossiers accordéon + separator
  ========================================================= */

  .wm-folder-sep{
  margin: 10px 10px 6px;
  padding: 6px 0px 6px 0px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-top: 1px black;
}

/* Petit bouton chevron (accordéon) */
.wm-folder-tog{
  width: 18px;
  height: 18px;
  border-radius: 8px;
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.75);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.wm-folder-tog::before{
  content: "›";
  display:block;
  font-weight: 900;
  opacity: .65;
  transform: rotate(0deg);
  transition: transform .14s ease;
}

.wm-folder-tog.is-open::before{
  transform: rotate(90deg);
}

/* Quand pas de chevron: spacer pour aligner */
.wm-folder-spacer{
  /*width: 18px;*/
  height: 18px;
  display:inline-block;
  flex: 0 0 auto;
}

/* =========================================================
    PATCH: wm-item + snippet visible + date/time stacked
    ========================================================= */

.wm-item-snippet{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;

  /* 2 lignes max */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.wm-item-date{
  text-align:right;
  line-height: 1.1;
}

.wm-item-date-line{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.wm-item-time-line{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(15,23,42,.52);
  font-weight: 800;
}

/* =========================================================
    PATCH: wm-month-count en rond/pill
    ========================================================= */

.wm-month-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(68, 68, 68);
  /*border: 1px solid rgba(2,6,23,.10);*/
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: 900;
}

/* =========================================================
  PATCH: wm-list-head anti-débordement (wrap safe)
  ========================================================= */

.wm-list-head{
display:flex;
align-items:center;
gap: 10px;
/*flex-wrap: wrap;            /* ✅ jamais de débordement */
min-height: 74px;
}
.wm-list-title{
flex: 1 1 170px;
}

.wm-list-right{
display:flex;
align-items:center;
justify-content:flex-end;
gap: 8px;
flex: 1 1 360px;/*
min-width: 240px;
flex-wrap: wrap;            /* ✅ le bouton delete peut passer à la ligne */
}

#options_sup {
  display: flex;
  gap: 8px;
  margin: 8px 4px 8px 4px;
}

#options_sup .wm-btn {
  flex: 1;              /* 👈 chaque bouton prend la même largeur */
  text-align: center;
  justify-content: center; /* si tu es en flex interne */
}


/* ✅ Le bouton ne sort jamais : si pas assez de place il prend la ligne */
#btnDeleteSelected{
max-width: 100%;
white-space: nowrap;
flex: 1 1 320px;
margin-left: auto;
}

/* =========================================================
  PATCH: icônes "ghost" compactes
  ========================================================= */

.wm-icon-btn.wm-icon-btn-ghost{
background: rgba(255,255,255,0);
border-color: rgba(2,6,23,.12);
}

.wm-icon-btn.wm-icon-btn-ghost:hover{
background: rgba(2,6,23,.05);
}


/* =========================================================
  PATCH: miniatures pièces-jointes
  ========================================================= */


.wm-attach-list{
display: flex; 
flex-direction: row; 
gap: 10px;
padding: 4px 10px 10px 10px;
/*
justify-content: center; 
align-items: center;*/
}











.wm-attach-preview{
margin-top:10px;
padding:12px;
border-radius:16px;
background: rgba(15,23,42,.04);
border: 1px solid rgba(15,23,42,.08);
}
.wm-attach-preview-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.wm-attach-preview-title{ font-weight:800; }
.wm-attach-preview-body{ overflow:hidden; border-radius:12px; }


/* Badge PDF */
.wm-badge-pdf{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.14);
background: rgba(15,23,42,.06);
font-weight: 800;
font-size: 12px;
line-height: 1;
}


/* Badges PJ cliquables */
.wm-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 2px 10px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.14);
background: rgba(15,23,42,.06);
font-weight: 900;
font-size: 12px;
line-height: 1;
cursor: pointer;
user-select:none;
}

.wm-badge:hover{
background: rgba(15,23,42,.10);
}

/* PDF badge exists already? Keep this class for backwards compat */
.wm-badge-pdf{ composes: wm-badge; } /* si ton CSS ne supporte pas composes, ignore */


/* Miniature image (déjà demandée) */
.wm-attach-thumb-btn{
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.55);
padding: 2px;
border-radius: 10px;
cursor: pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}

.wm-attach-thumb{
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 8px;
display:block;
}

.wm-attach-title,
.wm-attach-list{
background-color: rgb(218, 218, 218);
color: rgb(39, 39, 39);
}

.wm-attach-item{
flex: 1; /* Chaque item prend une part égale de l'espace disponible */
text-align: center;}


.wm-file-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
border:1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.55);
border-radius:12px;
margin-bottom:8px;
}
.wm-file-name{
font-weight:700;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width: 520px;
}
.wm-file-meta{
display:flex;
gap:10px;
align-items:center;
}
.wm-spinner{
width:16px;height:16px;
border:2px solid rgba(15,23,42,.2);
border-top-color: rgba(15,23,42,.7);
border-radius:50%;
display:inline-block;
animation: wmspin .8s linear infinite;
}

/* Par défaut: pas gras */
.wm-item-from,
.wm-item-subject{
font-weight: 500;
}

/* Non lu: gras */
.wm-item.is-unread .wm-item-from,
.wm-item.is-unread .wm-item-subject{
font-weight: 800;
}



/* Bouton OK en mode danger dans uiConfirm */
.wm-btn-danger-primary{
background: #dc2626;
color: #fff;
border: 1px solid rgba(220,38,38,.6);
}
.wm-btn-danger-primary:hover{
background: #dc2626;
color: #fff;
filter: brightness(.95);
}


/* =========================================================
   Rules modal — bascule Formulaire / Liste
   ========================================================= */

   .wm-rules-modal-card{
    display: flex;
    flex-direction: column;
  }
  
  .wm-rules-modal-body{
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }
  
  .wm-rules-view{
    display: none;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
  }
  
  .wm-rules-view.is-active{
    display: flex;
  }
  
  .wm-rules-list-scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
  }

/* =========================================================
   Compose modal : vue Message / vue Pièces jointes
   ========================================================= */

   .wm-compose-tab.has-files {
    color: #2563eb;
    font-weight: 700;
  }

/* Layout général */
.wm-compose-modal-body{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wm-compose-tab{
  border: none;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
  color: #64748b;
  border-radius: 6px;
}

.wm-compose-tab.is-active{
  background: rgba(15,23,42,.06);
  color: #0f172a;
}

/* Zone dynamique */
.wm-compose-body-switch{
  flex: 1 1 auto;
  min-height: 240;
  display: flex;
  flex-direction: column;
}

/* vues */
.wm-compose-view{
  display: none;
  flex: 1 1 auto;
  min-height: 0;
}

.wm-compose-view.is-active{
  display: flex;
}

/* textarea plein espace */
.wm-compose-textarea{
  width: 100%;
  height: 100%;
  resize: none;
}

/* PJ plein espace */
.wm-compose-attachments{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.wm-compose-attach-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  margin-bottom:10px;
}

.wm-compose-attach-list{
  margin-top: 10px;
  overflow: auto;
  flex: 1 1 auto;
}

.wm-compose-switch{
  display:flex;
  align-items:center;
  gap:10px;
}

/* pousse le bouton à droite */
.wm-compose-add-files{
  margin-left:auto;
}

/* =========================================================
   Scrollbars custom (dark UI cohérente)
   ========================================================= */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent; /* clean */
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  transition: background .2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35);
}

/* Version encore plus discrète dans panels */
.wm-folders::-webkit-scrollbar,
.wm-view-body::-webkit-scrollbar,
.wm-list-scroll::-webkit-scrollbar {
  width: 6px;
}

/* Firefox */
.wm-folders,
.wm-view-body,
.wm-list-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}











@keyframes wmspin{ to{ transform: rotate(360deg);} }