/* «ایمیل سازمانی» — README_corporate_email.md */
.ml-ic{width:18px; height:18px; flex:none;}
.ml-ic.rtl-flip{transform:scaleX(-1);}

/* badge next to «ایمیل سازمانی» in the sidebar / mobile sheet */
.mail-badge{display:none; margin-inline-start:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; align-items:center; justify-content:center; line-height:1;}
.mail-badge.on{display:inline-flex;}
#nav-email{position:relative;}
.app-nav.collapsed #nav-email .mail-badge{position:absolute; top:2px; left:4px; margin:0; min-width:16px; height:16px; font-size:9.5px; padding:0 4px;}

/* cards: link / not configured */
.ml-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; max-width:460px; margin:8px auto; box-shadow:0 1px 3px rgba(43,40,115,.06);}
.ml-card h3{margin:0 0 8px; font-size:17px; color:var(--navy);}
.ml-link{text-align:center;}
.ml-link form{text-align:right; margin-top:18px; display:flex; flex-direction:column; gap:12px;}
.ml-link-ic{width:56px; height:56px; border-radius:16px; background:var(--steel-tint, #eef2fa); color:var(--steel); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.ml-link-ic .ml-ic{width:28px; height:28px;}
.ml-muted{color:var(--text-dim); font-size:13.5px; line-height:1.9; margin:0;}
.ml-field{display:flex; flex-direction:column; gap:6px;}
.ml-field span{font-size:12.5px; font-weight:600; color:var(--text-dim);}
.ml-field input{font:inherit; font-size:15px; min-height:46px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; color:var(--text); text-align:left;}
.ml-field input:focus, .ml-cf input:focus, #ml-c-text:focus, .ml-search input:focus{outline:2px solid rgba(78,114,184,.35); outline-offset:0; border-color:var(--steel);}
.ml-err{color:var(--danger); font-size:13px; margin:0;}
.ml-err:empty{display:none;}
.ml-note{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--text-dim); line-height:1.8; margin:16px 0 0; text-align:right;}
.ml-note .ml-ic{width:15px; height:15px; margin-top:3px;}
.ml-note.small{margin:0 0 10px; font-size:11.5px; background:var(--bg); border-radius:8px; padding:6px 10px;}

/* layout */
.ml{display:grid; grid-template-columns:210px minmax(300px, 380px) 1fr; height:calc(100vh - 190px); min-height:520px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(43,40,115,.06);}
.ml-side{display:flex; flex-direction:column; gap:10px; padding:14px 10px; background:var(--bg); border-inline-end:1px solid var(--line); min-width:0;}
.ml-new{display:flex !important; align-items:center; justify-content:center; gap:8px; width:100%;}
.ml-folders{display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto;}
.ml-folder{font:inherit; display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:9px 10px; border-radius:10px; cursor:pointer; color:var(--text); font-size:13.5px; text-align:right; min-height:40px;}
.ml-folder:hover{background:rgba(78,114,184,.08);}
.ml-folder.on{background:#fff; color:var(--navy); font-weight:700; box-shadow:0 1px 3px rgba(43,40,115,.1);}
.ml-folder .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ml-folder .c{font-size:11.5px; font-weight:800; color:var(--steel);}
.ml-me{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); border-top:1px solid var(--line); padding-top:10px;}
.ml-me span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;}

.ml-icon-btn{font:inherit; width:38px; height:38px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; border-radius:10px; color:var(--text-dim); cursor:pointer;}
.ml-icon-btn:hover{background:rgba(78,114,184,.1); color:var(--navy);}
.ml-icon-btn.danger:hover{background:#fdecea; color:var(--danger);}
.ml-icon-btn.starred{color:#d99a00;}
.ml-icon-btn.starred .ml-ic{fill:currentColor;}

/* list */
.ml-list-pane{display:flex; flex-direction:column; min-width:0; border-inline-end:1px solid var(--line);}
.ml-bar{display:flex; align-items:center; gap:4px; padding:10px 10px 6px;}
.ml-folder-sel{display:none; font:inherit; font-size:13px; min-height:38px; border:1px solid var(--line); border-radius:10px; padding:4px 8px; background:#fff; max-width:42%;}
.ml-search{flex:1; display:flex; align-items:center; gap:6px; background:var(--bg); border-radius:10px; padding:0 10px; min-width:0;}
.ml-search .ml-ic{color:var(--text-dim); width:16px; height:16px;}
.ml-search input{font:inherit; font-size:13px; border:0; background:none; min-height:38px; flex:1; min-width:0; color:var(--text);}
.ml-search input:focus{outline:none;}
.ml-chips{display:flex; align-items:center; gap:6px; padding:2px 12px 8px; border-bottom:1px solid var(--line);}
.ml-chip{font:inherit; font-size:12px; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--text-dim); border-radius:99px; padding:4px 12px; cursor:pointer; min-height:30px;}
.ml-chip.on{background:var(--navy); border-color:var(--navy); color:#fff;}
.ml-count{margin-inline-start:auto; font-size:11.5px; color:var(--text-dim);}
.ml-list{flex:1; overflow:auto;}
.ml-row{display:flex; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); cursor:pointer; position:relative;}
.ml-row:hover{background:#f8f9fc;}
.ml-row.on{background:var(--steel-tint, #eef2fa);}
.ml-row:focus-visible{outline:2px solid var(--steel); outline-offset:-2px;}
.ml-row.unread::before{content:""; position:absolute; inset-inline-start:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--steel);}
.ml-av{width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:#e8ecf6; color:var(--navy); font-weight:800; font-size:14px;}
.ml-av.lg{width:42px; height:42px; font-size:16px;}
.ml-row-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ml-row-top, .ml-row-sub{display:flex; align-items:center; gap:8px; min-width:0;}
.ml-from{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:var(--text);}
.ml-date{font-size:11.5px; color:var(--text-dim); white-space:nowrap;}
.ml-subj{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--text-dim);}
.ml-row.unread .ml-from, .ml-row.unread .ml-subj{font-weight:800; color:var(--navy);}
.ml-row.unread .ml-date{color:var(--steel); font-weight:700;}
.ml-clip{color:var(--text-dim); display:inline-flex;}
.ml-clip .ml-ic{width:14px; height:14px;}
.ml-star{border:0; background:none; padding:2px; cursor:pointer; color:#c3cad5; display:inline-flex; border-radius:6px;}
.ml-star .ml-ic{width:16px; height:16px;}
.ml-star.on{color:#d99a00;}
.ml-star.on .ml-ic{fill:currentColor;}
.ml-more{display:block !important; margin:12px auto !important; width:auto !important;}
.ml-empty{padding:40px 16px; text-align:center; color:var(--text-dim); font-size:13px; line-height:1.9;}
.ml-empty.err{color:var(--danger);}

/* reader */
.ml-read{display:flex; flex-direction:column; min-width:0; min-height:0;}
.ml-placeholder{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#b3bcc8; font-size:13px;}
.ml-placeholder .ml-ic{width:44px; height:44px; stroke-width:1.3;}
.ml-r-bar{display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.ml-r-acts{display:flex; align-items:center; gap:4px;}
.ml-r-acts.end{margin-inline-start:auto;}
.ml-act{font:inherit; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:10px; padding:0 12px; min-height:36px; cursor:pointer; font-size:12.5px; font-weight:600;}
.ml-act:hover{border-color:var(--steel); color:var(--navy);}
.ml-act.primary{background:var(--navy); border-color:var(--navy); color:#fff;}
.ml-act.primary:hover{background:var(--steel); border-color:var(--steel); color:#fff;}
.ml-act .ml-ic{width:16px; height:16px;}
.ml-r-scroll{flex:1; overflow:auto; padding:18px 22px 24px;}
.ml-r-subj{margin:0 0 14px; font-size:18px; color:var(--navy); line-height:1.6; overflow-wrap:anywhere;}
.ml-r-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;}
.ml-r-meta{flex:1; min-width:0; font-size:13px; line-height:1.8;}
.ml-r-from b{color:var(--text);}
.ml-r-email{color:var(--text-dim); font-size:12px;}
.ml-r-to{color:var(--text-dim); font-size:12px; overflow-wrap:anywhere;}
.ml-r-date{font-size:12px; color:var(--text-dim); white-space:nowrap;}
.ml-atts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.ml-att{font:inherit; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fafbfd; border-radius:10px; padding:6px 10px; cursor:pointer; max-width:100%; min-height:38px;}
.ml-att:hover{border-color:var(--steel);}
.ml-att .n{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px;}
.ml-att .s{font-size:11px; color:var(--text-dim); white-space:nowrap;}
.ml-att .ml-ic{width:15px; height:15px; color:var(--text-dim);}
.ml-frame{width:100%; border:0; min-height:140px; display:block; background:#fff;}

/* compose / settings dialog */
.ml-overlay{position:fixed; inset:0; background:rgba(20,22,48,.42); display:flex; align-items:center; justify-content:center; z-index:2000; padding:16px;}
.ml-dialog{background:#fff; border-radius:16px; width:min(680px, 100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(20,22,48,.25);}
.ml-dialog.small{width:min(440px, 100%);}
.ml-d-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line);}
.ml-d-head h3{margin:0; font-size:15px; color:var(--navy);}
.ml-d-body{padding:12px 18px; overflow:auto; display:flex; flex-direction:column; gap:8px;}
.ml-cf{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line);}
.ml-cf span{font-size:12.5px; color:var(--text-dim); width:84px; flex:none;}
.ml-cf input{font:inherit; font-size:14px; border:0; min-height:42px; flex:1; min-width:0; background:none; color:var(--text);}
.ml-cf input:focus{outline:none; border:0;}
.ml-cc-toggle{text-align:left;}
.ml-cf{position:relative;}
.ml-sug{position:absolute; top:calc(100% + 2px); inset-inline:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(20,22,48,.16); z-index:10; max-height:320px; overflow:auto; padding:4px;}
.ml-sug-i{font:inherit; display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:7px 8px; border-radius:8px; cursor:pointer; text-align:right; min-height:44px;}
.ml-sug-i.on, .ml-sug-i:hover{background:var(--steel-tint, #eef2fa);}
.ml-sug-i .t{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.5;}
.ml-sug-i .t b{font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ml-sug-i .t span{font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;}
.ml-sug-i small{font-size:11px; color:var(--steel); background:#f1f4fa; border-radius:99px; padding:2px 8px; white-space:nowrap;}
.ml-av.sm{width:30px; height:30px; font-size:12.5px;}
.ml-link-btn{font:inherit; border:0; background:none; color:var(--steel); font-size:12px; cursor:pointer; padding:4px 0;}
#ml-c-text{font:inherit; font-size:14px; line-height:1.9; border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:200px; resize:vertical; margin-top:6px; color:var(--text);}
.ml-c-files{display:flex; flex-wrap:wrap; gap:6px;}
.ml-c-file{display:inline-flex; align-items:center; gap:6px; background:var(--bg); border-radius:8px; padding:4px 6px 4px 10px; font-size:12px; max-width:100%;}
.ml-c-file .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px;}
.ml-c-file .s{color:var(--text-dim);}
.ml-c-file button{border:0; background:none; cursor:pointer; color:var(--text-dim); display:inline-flex; padding:4px; border-radius:6px;}
.ml-c-file .ml-ic{width:14px; height:14px;}
.ml-d-foot{display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--line); flex-wrap:wrap;}
.ml-d-foot .btn{width:auto !important; display:inline-flex !important; align-items:center; gap:8px; padding:9px 18px !important; margin:0 !important;}
.ml-attach{cursor:pointer;}
.ml-c-hint{font-size:11.5px; color:var(--text-dim);}
.ml-danger{color:var(--danger) !important;}
.ml-set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.ml-set-row small{display:block; font-size:11.5px; color:var(--text-dim);}
.ml-switch input{width:20px; height:20px; flex:none;}

.ml-only-m, .ml-only-phone{display:none;}
#mobile-more-btn{position:relative;}
.mail-badge.mb{position:absolute; top:2px; left:calc(50% - 22px); margin:0; min-width:17px; height:17px; font-size:9.5px; padding:0 4px; border:2px solid #fff;}

/* tablet: folders move into the select */
@media (max-width:1180px){
  .ml{grid-template-columns:minmax(280px, 360px) 1fr;}
  .ml-side{display:none;}
  .ml-folder-sel{display:block; flex:1; max-width:none;}
  .ml-only-m{display:inline-flex;}
  .ml-bar{flex-wrap:wrap;}
  .ml-search{order:5; flex-basis:100%; margin-top:4px;}
  .ml-act span{display:none;}
  .ml-act{padding:0 10px;}
}
/* phone: one pane at a time */
@media (max-width:860px){
  .ml{grid-template-columns:1fr; height:calc(100vh - 170px); min-height:440px; border-radius:12px;}
  .ml-list-pane{border:0;}
  .ml-read{display:none;}
  .ml-only-phone{display:inline-flex;}
  .ml.reading .ml-list-pane{display:none;}
  .ml.reading .ml-read{display:flex;}
  .ml-r-scroll{padding:14px 14px 20px;}
  .ml-act span{display:none;}
  .ml-act{padding:0 10px;}
  .ml-r-subj{font-size:16px;}
  .ml-r-date{display:none;}
  .ml-overlay{padding:0; align-items:stretch;}
  .ml-dialog{border-radius:0; max-height:none; height:100%;}
  .ml-dialog:not(.small) .ml-d-body{flex:1;}
  #ml-c-text{flex:1;}
  .ml-dialog.small{height:auto; margin:auto 12px; border-radius:16px;}
  .ml-card{padding:22px 18px;}
}