/* ============================================================
   OutlookMS365 - Mail Modal
   ============================================================ */

/* ---- Button in navbar ---- */
.otm-nav-btn { position:relative; }
.otm-nav-btn .badge {
   position:absolute; top:-2px; right:-4px; font-size:9px; padding:2px 5px;
   background:#0078d4; color:#fff; border-radius:10px; line-height:1;
}

/* ---- Fullscreen modal ---- */
#otmMailModal .modal-dialog {
   max-width:100%; width:100%; height:100%;
   margin:0; padding:0;
}
#otmMailModal .modal-content {
   border:none; border-radius:0; height:100%;
   display:flex; flex-direction:column;
}
#otmMailModal .modal-header {
   flex-shrink:0;
   background:linear-gradient(135deg,#0078d4 0%,#005a9e 100%);
   color:#fff; padding:12px 24px; border:none;
}
#otmMailModal .modal-header .btn-close { filter:invert(1); opacity:.8; }
#otmMailModal .modal-header .btn-close:hover { opacity:1; }
#otmMailModal .modal-header h5 { font-weight:700; font-size:1rem; }

/* Toolbar inside modal */
.otm-bar {
   flex-shrink:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
   padding:10px 24px; background:#f9fafb; border-bottom:1px solid #e4e7ec;
}
.otm-bar-search {
   flex:1 1 200px; max-width:360px;
   border:1px solid #d0d5dd; border-radius:8px; padding:7px 12px 7px 34px; font-size:13px;
   background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2398a2b3' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") 10px center no-repeat;
   color:#344054; outline:none;
}
.otm-bar-search:focus { border-color:#0078d4; box-shadow:0 0 0 3px rgba(0,120,212,.1); }
.otm-bar-search::placeholder { color:#98a2b3; }
.otm-bar-select {
   border:1px solid #d0d5dd; border-radius:8px; padding:7px 12px; font-size:13px;
   background:#fff; color:#344054; min-width:200px; outline:none;
}
.otm-bar-btn {
   display:inline-flex; align-items:center; gap:5px; padding:7px 14px;
   border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
   background:#fff; color:#344054; border:1px solid #d0d5dd; transition:.15s; white-space:nowrap;
}
.otm-bar-btn:hover { background:#f2f4f7; }

/* ---- Mail list (scrolls inside modal) ---- */
.otm-scroll { flex:1 1 0; overflow-y:auto; min-height:0; }

.otm-mhdr {
   display:grid; grid-template-columns:28px 110px 240px 1fr 36px;
   padding:0 24px; height:34px; gap:10px; align-items:center;
   background:#f9fafb; border-bottom:1px solid #e4e7ec;
   font-size:10px; font-weight:700; color:#667085; text-transform:uppercase; letter-spacing:.6px;
   position:sticky; top:0; z-index:2;
}
.otm-mrow {
   display:grid; grid-template-columns:28px 110px 240px 1fr 36px;
   align-items:center; padding:0 24px; min-height:50px; gap:10px;
   border-bottom:1px solid #f2f4f7; font-size:13px; color:#475467;
   cursor:pointer; transition:.06s;
}
.otm-mrow:hover { background:#f0f6ff; }
.otm-mrow.otm-unread { font-weight:600; color:#1d2939; }
.otm-mrow.otm-filtered { display:none; }

.otm-mdot { width:8px; height:8px; border-radius:50%; background:#0078d4; margin:auto; }
.otm-mdot-e { width:8px; height:8px; margin:auto; }
.otm-mdate { white-space:nowrap; font-size:12px; color:#667085; }
.otm-mrow.otm-unread .otm-mdate { color:#344054; }
.otm-mfrom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.otm-msubj { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.otm-mchev { opacity:.25; font-size:16px; color:#667085; transition:.15s; }
.otm-mrow:hover .otm-mchev { opacity:1; }
.otm-mclip { color:#98a2b3; font-size:13px; margin-left:3px; }
.otm-mcount {
   position:sticky; bottom:0; z-index:2;
   padding:8px 24px; font-size:12px; color:#98a2b3; text-align:right;
   background:#f9fafb; border-top:1px solid #f2f4f7;
}
.otm-mno { text-align:center; padding:50px; color:#98a2b3; font-size:13px; display:none; }
.otm-mloading { text-align:center; padding:60px 0; color:#667085; }
.otm-mloading .spinner-border { width:24px; height:24px; border-width:3px; color:#0078d4; }

/* ---- Preview / Ticket / User sub-modals ---- */
#otmPreviewModal .modal-dialog { max-width:80%; width:80%; }
#otmTicketModal .modal-dialog { max-width:80%; width:80%; }
.otm-sub .modal-content { border-radius:14px; border:none; box-shadow:0 24px 64px rgba(0,0,0,.2); }
.otm-sub .modal-header { background:linear-gradient(135deg,#0078d4,#005a9e); color:#fff; padding:16px 24px; border:none; }
.otm-sub .modal-header .btn-close { filter:invert(1); }
.otm-sub .modal-header h5 { font-weight:700; font-size:.95rem; }
.otm-sub .modal-body { padding:20px 24px; }
.otm-sub .modal-footer { padding:12px 24px; border-top:1px solid #f2f4f7; background:#f9fafb; }
.otm-sub-green .modal-header { background:linear-gradient(135deg,#12b76a,#039855); }

.otm-pmeta { padding:12px 20px; background:#f8f9fb; border-bottom:1px solid #f2f4f7; font-size:13px; color:#475467; line-height:1.7; }
.otm-pmeta strong { color:#344054; }
.otm-pbody { padding:16px 20px; max-height:460px; overflow-y:auto; }
.otm-tdesc { border:1px solid #e4e7ec; border-radius:8px; padding:12px; min-height:160px; max-height:320px; overflow-y:auto; font-size:13px; background:#fff; }
.otm-sbtn {
   display:inline-flex; align-items:center; gap:5px; padding:7px 16px;
   border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:.12s;
}
.otm-sbtn-blue { background:#0078d4; color:#fff; }
.otm-sbtn-blue:hover { background:#106ebe; }
.otm-sbtn-green { background:#12b76a; color:#fff; }
.otm-sbtn-green:hover { background:#039855; }
.otm-sbtn-gray { background:#fff; color:#344054; border:1px solid #d0d5dd; }
.otm-sbtn-gray:hover { background:#f9fafb; }

/* ---- Responsive ---- */
@media (max-width:992px) {
   .otm-mhdr, .otm-mrow { grid-template-columns:24px 80px 1fr 30px; }
   .otm-mfrom { display:none; }
   .otm-mhdr > div:nth-child(3) { display:none; }
   .otm-bar { padding:8px 16px; }
}
@media (max-width:576px) {
   .otm-mhdr, .otm-mrow { grid-template-columns:20px 1fr 24px; padding:0 12px; }
   .otm-mdate, .otm-mfrom { display:none; }
   .otm-mhdr > div:nth-child(2), .otm-mhdr > div:nth-child(3) { display:none; }
}