/* Webmail additions on top of the Material Dashboard theme. */
.nav-link-text { font-size: 0.8125rem; }
#sidenav-main .folder-count { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: #344767; }
#sidenav-main .nav-link.active { background: rgba(52,71,103,.1); font-weight: 600; }
#sidenav-main .nav-link { display: flex; align-items: center; cursor: pointer; }
.sidenav-user { font-size: 0.75rem; color: #7b809a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compose: a pill at the top of the sidenav, and a floating button on
   screens where the sidenav is hidden (below Bootstrap's xl). */
.compose-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 1rem 0.5rem;
  padding: 0.7rem 1.25rem; border-radius: 1rem; background: #344767; color: #fff; font-size: 0.875rem;
  font-weight: 600; text-decoration: none; box-shadow: 0 2px 6px rgba(52,71,103,.25); }
.compose-btn:hover, .compose-btn:focus { color: #fff; background: #1f2b3e; }
.compose-btn .material-symbols-rounded { font-size: 20px; }
.compose-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: none; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.25rem; border-radius: 1.25rem; background: #344767; color: #fff; font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.compose-fab:hover, .compose-fab:focus { color: #fff; background: #1f2b3e; }
.compose-fab .material-symbols-rounded { font-size: 22px; }
@media (max-width: 1199.98px) { .compose-fab { display: inline-flex; } }
body.has-selection .compose-fab { display: none; }

/* Message list */
.msg-table { table-layout: fixed; width: 100%; margin-bottom: 0; }
.msg-table .col-check { width: 40px; padding: 0.55rem 0.25rem 0.55rem 0.85rem !important;
  text-align: left; vertical-align: middle; line-height: 0; }
.msg-table th.col-check { font-size: 0; }
.msg-table input.row-check { width: 17px; height: 17px; margin: 0; vertical-align: top; cursor: pointer; accent-color: #344767; }
.msg-table tr.selected td { background: rgba(26,115,232,.08); }
.msg-table tr.unread td.col-from::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: #1a73e8; vertical-align: 2px; }

/* Bulk actions: slides up from the bottom while rows are selected. */
.bulk-bar { position: fixed; bottom: 1rem; left: 0; right: 0; z-index: 1040; width: min(560px, calc(100% - 1.5rem)); margin: 0 auto;
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem 0.6rem 0.5rem; border-radius: 1rem;
  background: #1f2b3e; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transform: translateY(calc(100% + 2rem)); transition: transform .2s ease-out; }
.bulk-bar.show { transform: translateY(0); }
.bulk-bar .bulk-count { flex: 1; font-size: 0.875rem; font-weight: 600; }
.bulk-bar .btn-icon { background: transparent; border: 0; color: #fff; padding: 0.35rem; border-radius: 50%; line-height: 0; }
.bulk-bar .btn-icon:hover { background: rgba(255,255,255,.12); }
.bulk-bar .bulk-delete { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; border-radius: 0.6rem;
  padding: 0.5rem 0.9rem; background: #e53935; color: #fff; font-size: 0.8125rem; font-weight: 600; }
.bulk-bar .bulk-delete:hover { background: #c62828; }
.bulk-bar .bulk-delete:disabled { opacity: .6; }
.bulk-bar .material-symbols-rounded { font-size: 20px; }
@media (min-width: 1200px) { .bulk-bar { left: 17.125rem; } }

/* Toast */
.nm-toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 1060; max-width: calc(100% - 2rem); padding: 0.7rem 1.1rem;
  border-radius: 0.75rem; background: #323232; color: #fff; font-size: 0.875rem; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transform: translate(-50%, 200%); transition: transform .2s ease-out; pointer-events: none; }
.nm-toast.show { transform: translate(-50%, 0); }
body.has-selection .nm-toast { bottom: 5.5rem; }
.msg-table td, .msg-table th { padding: 0.55rem 0.75rem; vertical-align: middle; border-bottom: 1px solid #e9ecef; }
.msg-table th { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.02em; color: #8392a5; font-weight: 700; }
.msg-table td { font-size: 0.8125rem; color: #344767; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-table tr.unread td { font-weight: 700; }
.msg-table .col-from { width: 28%; }
.msg-table .col-date { width: 120px; text-align: right; }
.msg-table .col-size { width: 72px; text-align: right; color: #7b809a; }
.msg-table .flag { font-size: 16px; vertical-align: -3px; color: #fb8c00; margin-right: 4px; }
.msg-table .answered { font-size: 16px; vertical-align: -3px; color: #7b809a; margin-right: 4px; }
.msg-table tbody tr { cursor: pointer; }
.msg-table tbody tr:hover td { background: rgba(52,71,103,.04); }
.msg-table a.msg-link { color: inherit; text-decoration: none; }
.msg-table a.msg-link:hover, .msg-table a.msg-link:focus { text-decoration: underline; }
.msg-table .msg-snippet { font-weight: 400; color: #7b809a; }
.msg-table .msg-snippet mark { padding: 0; background: #fff3c4; color: #344767; font-weight: 600; }
.msg-table .folder-chip { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 9px;
  background: #e9ecef; color: #495057; font-size: 0.7rem; font-weight: 600; line-height: 1.5; vertical-align: 1px; }

.nm-search { position: relative; max-width: 720px; }
.nm-search input { width: 100%; height: 42px; padding: 0 2.75rem 0 1.1rem; border: 1px solid transparent; border-radius: 21px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 0.9rem; color: #344767; outline: none; }
.nm-search input:focus { border-color: #c4cbd3; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
.nm-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nm-search .nm-search-icon { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-size: 21px; color: #7b809a; pointer-events: none; }
.nm-search .nm-search-clear { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); display: none;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #7b809a; }
.nm-search .nm-search-clear:hover { background: rgba(52,71,103,.08); }
.nm-search .nm-search-clear i { font-size: 20px; vertical-align: middle; }
.nm-search.has-text input { padding-right: 4.6rem; }
.nm-search.has-text .nm-search-icon { right: 2.55rem; }
.nm-search.has-text .nm-search-clear { display: block; }
.msg-empty { padding: 2rem; text-align: center; color: #7b809a; font-size: 0.875rem; }

/* Message view */
.msg-head { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid #e9ecef; }
.msg-subject { font-size: 1.125rem; font-weight: 700; color: #344767; margin: 0 0 0.75rem; word-break: break-word; }
.msg-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; font-size: 0.8125rem; }
.msg-meta dt { color: #8392a5; font-weight: 600; }
.msg-meta dd { margin: 0; color: #344767; word-break: break-word; }
.msg-atts { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid #e9ecef; }
.msg-att { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.3rem 0.65rem;
  border: 1px solid #d2d6da; border-radius: 0.5rem; font-size: 0.75rem; color: #344767; text-decoration: none; background: #fff; }
.msg-att:hover { background: rgba(52,71,103,.06); color: #344767; }
.msg-att .material-symbols-rounded { font-size: 16px; }
.msg-att .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.msg-att .att-size { color: #7b809a; }
.msg-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin: 0 1rem 0.75rem; }
.msg-toolbar .btn { --bs-btn-padding-x: 0.65rem; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.msg-toolbar .btn .material-symbols-rounded { font-size: 16px; }
.msg-nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; min-width: 0; }
.msg-pos { font-size: 0.75rem; color: #7b809a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg-body { padding: 0; }
/* width 1px + min-width 100% stops iOS Safari from widening the frame to its content. */
.msg-frame { display: block; width: 1px; min-width: 100%; border: 0; }
.msg-body { overflow: hidden; }
.msg-toolbar .btn-trash { --bs-btn-padding-x: 0.55rem; }
@media (max-width: 399.98px) { .msg-pos { display: none; } }

/* Compose */
.compose-card { max-width: 900px; }
.compose-field { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1.25rem; border-bottom: 1px solid #e9ecef; }
.compose-field label { flex: 0 0 4rem; margin: 0; font-size: 0.8125rem; color: #8392a5; font-weight: 600; }
.compose-field input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0.45rem 0; font-size: 0.9375rem; color: #344767; background: transparent; }
.compose-field .cc-toggle { font-size: 0.8125rem; color: #7b809a; cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 0; }
.compose-field .cc-toggle:hover { color: #344767; text-decoration: underline; }
.compose-body { display: block; width: 100%; min-height: 320px; border: 0; outline: 0; resize: vertical; padding: 1rem 1.25rem;
  font-family: inherit; font-size: 0.9375rem; line-height: 1.5; color: #344767; }
.compose-actions { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid #e9ecef; }
.compose-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.compose-actions .material-symbols-rounded { font-size: 18px; }
.compose-error { margin: 0.75rem 1.25rem 0; padding: 0.6rem 0.9rem; border-radius: 0.5rem; background: #fdecea; color: #b71c1c; font-size: 0.8125rem; }
@media (max-width: 767.98px) {
  /* 16px stops iOS Safari zooming into the field on focus. */
  .compose-field input, .compose-body { font-size: 16px; }
  .compose-field { padding-left: 1rem; padding-right: 1rem; }
  .compose-body { padding-left: 1rem; padding-right: 1rem; min-height: 45vh; }
}

.msg-text { margin: 0; padding: 1rem 1.5rem 1.5rem; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 0.875rem; color: #344767; }

@media (max-width: 767.98px) {
  .msg-table .col-size { display: none; }
  .msg-table .col-from { width: 38%; }
  .msg-table .col-check { width: 34px; padding: 0.55rem 0.15rem 0.55rem 0.6rem !important; }
  .msg-table .col-date { width: 84px; }
  .msg-head, .msg-atts { padding-left: 1rem; padding-right: 1rem; }
  .msg-toolbar { margin: 0 0.25rem 0.75rem; gap: 0.375rem; }
  .msg-nav { gap: 0.375rem; }
  .msg-text { padding-left: 1rem; padding-right: 1rem; }
  /* 16px keeps iOS from zooming in when the box is tapped. */
  .nm-search { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .nm-search input { font-size: 16px; }
}