/**
 * dc-mail.css — Mail-domain semantic layer for the DojoConnect UI plugin.
 *
 * Plugin-owned presentation hooks for com_dojomail (mailbox/folder rail, delivery-state
 * badges, thread/reading-pane specifics). Mirrors the dc-crm.css / dc-safeguarding.css
 * precedent: com_dojomail ships no component-local CSS — mail-specific classes live here
 * so every view styles consistently from one source.
 *
 * Generic primitives (cards, tables, buttons, stats, badges, empty-state, message/reply
 * thread, app-workspace) live in dc-system.css, NOT here. The `groups` pilot (Slice 1)
 * uses only generic primitives, so this sheet is currently a scaffold — mailbox/folder
 * and delivery-state classes are added as the inbox/log views migrate (Slices 2–4).
 *
 * @since 1.5.5
 */

/* ── Email-log detail: labelled meta rows (Slice 2b) ───────────────────────── */
.dc-mail-meta-row   { display: flex; padding: 5px 0; font-size: 0.8125rem; }
.dc-mail-meta-label { width: 110px; flex-shrink: 0; color: var(--dc-ink-500); font-size: 0.75rem; }
.dc-mail-meta-value { flex: 1; color: var(--dc-ink-800); }

/* ── Attachments (Slice 2b) ────────────────────────────────────────────────── */
.dc-mail-attachment            { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dc-ink-100); }
.dc-mail-attachment:last-child { border-bottom: none; }
.dc-mail-attachment__name      { font-size: 0.8125rem; font-weight: 500; color: var(--dc-ink-800); }
.dc-mail-attachment__meta      { font-size: 0.6875rem; color: var(--dc-ink-500); margin-top: 1px; }

/* ── Thread navigation list (email log) (Slice 2b) ─────────────────────────── */
.dc-mail-thread                 { display: flex; flex-direction: column; }
.dc-mail-thread__item           { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dc-ink-100); text-decoration: none; color: inherit; }
.dc-mail-thread__item:last-child { border-bottom: none; }
.dc-mail-thread__item:hover     { background: var(--dc-surface-sunken); }
.dc-mail-thread__item.is-active { background: var(--dc-info-tint); }

/* ── Compose recipient picker (Slice 2c) ───────────────────────────────────── */
.dc-mail-recipients          { border: 1px solid var(--dc-ink-200); border-radius: var(--dc-radius-sm); padding: 16px; background: var(--dc-surface-sunken); }
.dc-mail-recipients .dc-form-group:last-child { margin-bottom: 0; }
.dc-mail-recipients__label   { display: block; font-size: 0.875rem; font-weight: 600; color: var(--dc-ink-800); margin-bottom: 12px; }
.dc-mail-hint                { font-size: 0.75rem; color: var(--dc-ink-500); margin-top: 4px; }

/* Autocomplete dropdown */
.dc-mail-autocomplete            { position: relative; }
.dc-mail-autocomplete__results   { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--dc-surface); border: 1px solid var(--dc-ink-200); border-top: none; border-radius: 0 0 var(--dc-radius-sm) var(--dc-radius-sm); max-height: 200px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.dc-mail-autocomplete__item      { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.8125rem; cursor: pointer; border-bottom: 1px solid var(--dc-ink-100); }
.dc-mail-autocomplete__item:last-child { border-bottom: none; }
.dc-mail-autocomplete__item:hover { background: var(--dc-surface-sunken); }
.dc-mail-autocomplete__name      { color: var(--dc-ink-800); font-weight: 500; }
.dc-mail-autocomplete__email     { color: var(--dc-ink-500); font-size: 0.75rem; }
.dc-mail-autocomplete__empty     { padding: 12px; text-align: center; color: var(--dc-ink-500); font-size: 0.8125rem; }

/* Chips */
.dc-mail-chips               { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dc-mail-chip               { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 16px; font-size: 0.75rem; font-weight: 500; background: var(--dc-info-tint); color: var(--dc-ink-800); }
.dc-mail-chip--external      { background: var(--dc-surface-sunken); color: var(--dc-ink-500); }
.dc-mail-chip__remove        { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 0.875rem; line-height: 1; opacity: 0.7; color: inherit; }
.dc-mail-chip__remove:hover  { opacity: 1; }

.dc-mail-external-row        { display: flex; gap: 8px; align-items: center; }
.dc-mail-external-row .dc-form-control { flex: 1; }

/* ── Personal-mailbox folder rail (Slice 4) ──────────────────────────────────
   The rail rides on the shell's `.dc-sidebar` chrome (rendered in the sidebar slot
   via the shell's `sidebarHtml` option), so it matches the staff sidebar exactly —
   same column, white surface, item styling, active state. These classes only add
   the mail-specific extras: mailbox header, folders-heading action, per-folder hover
   actions, unread badge, and the footer (request button + forwarding toggle).
   ────────────────────────────────────────────────────────────────────────── */
.dc-sidebar.dc-mail-rail       { display: flex; flex-direction: column; overflow-y: auto; background: var(--dc-surface); }
.dc-mail-rail__mailbox         { padding: 0 var(--dc-space-3) var(--dc-space-2); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; color: var(--dc-ink-500); word-break: break-all; }
.dc-mail-rail__switcher        { margin-bottom: var(--dc-space-2); font-size: 0.75rem; }
.dc-mail-rail__heading         { display: flex; align-items: center; justify-content: space-between; }
.dc-mail-rail__heading-action  { background: none; border: none; color: var(--dc-ink-500); cursor: pointer; padding: 2px 4px; border-radius: 4px; display: inline-flex; }
.dc-mail-rail__heading-action:hover { color: var(--dc-ink-900); background: var(--dc-ink-50); }
.dc-mail-rail__badge           { margin-left: auto; font-size: 0.625rem; padding: 1px 6px; border-radius: 10px; background: var(--dc-brand-primary); color: #fff; font-weight: 700; line-height: 1.6; }
.dc-mail-rail__footer          { margin-top: auto; padding-top: var(--dc-space-3); display: grid; gap: var(--dc-space-3); }
.dc-mail-rail__forward small   { color: var(--dc-ink-500); font-size: 0.6875rem; }
.dc-mail-rail__forward-row     { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Folder item + hover actions (the link is a .dc-sidebar__link) */
.dc-mail-folder                { position: relative; }
.dc-mail-folder .dc-sidebar__link { padding-right: 44px; }
.dc-mail-folder__actions       { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; }
.dc-mail-folder:hover .dc-mail-folder__actions { display: flex; }
.dc-mail-folder:hover .dc-mail-rail__badge     { display: none; }
.dc-mail-folder__actions button { background: none; border: none; color: var(--dc-ink-500); cursor: pointer; padding: 3px; border-radius: 4px; display: inline-flex; }
.dc-mail-folder__actions button:hover { color: var(--dc-ink-900); background: var(--dc-ink-100); }

/* Message list */
.dc-mail-msg-wrap              { position: relative; z-index: 1; }
.dc-mail-msg-wrap.is-menu-open { z-index: 100; }
.dc-mail-msg                   { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--dc-ink-100); text-decoration: none; color: inherit; transition: background 0.1s; }
.dc-mail-msg-wrap .dc-mail-msg { padding-right: 44px; }
.dc-mail-msg:hover             { background: var(--dc-surface-sunken); }
.dc-mail-msg--unread .dc-mail-msg__from,
.dc-mail-msg--unread .dc-mail-msg__subject { font-weight: 600; }
.dc-mail-msg__dot              { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--dc-brand-primary); margin-top: 7px; }
.dc-mail-msg__dot--read        { background: transparent; }
.dc-mail-msg__body             { flex: 1; min-width: 0; }
.dc-mail-msg__top              { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dc-mail-msg__from             { font-size: 0.8125rem; color: var(--dc-ink-800); }
.dc-mail-msg__date             { font-size: 0.6875rem; color: var(--dc-ink-400); flex-shrink: 0; white-space: nowrap; }
.dc-mail-msg__subject          { font-size: 0.8125rem; color: var(--dc-ink-800); margin-top: 2px; }
.dc-mail-msg__preview          { font-size: 0.75rem; color: var(--dc-ink-400); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Per-row move-to-folder menu */
.dc-mail-msg-menu              { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.dc-mail-msg-menu__btn         { background: none; border: none; color: var(--dc-ink-400); cursor: pointer; padding: 6px; border-radius: 4px; display: inline-flex; }
.dc-mail-msg-menu__btn:hover   { color: var(--dc-ink-800); background: var(--dc-surface-sunken); }
.dc-mail-msg-menu__popup       { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--dc-surface); border: 1px solid var(--dc-ink-200); border-radius: var(--dc-radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 220px; z-index: 1000; padding: 4px; }
.dc-mail-msg-menu__popup[hidden] { display: none; }
.dc-mail-msg-menu__heading     { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dc-ink-400); padding: 8px 12px 4px; }
.dc-mail-move-option           { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; font-size: 0.8125rem; color: var(--dc-ink-800); cursor: pointer; border-radius: 4px; }
.dc-mail-move-option:hover     { background: var(--dc-surface-sunken); }

/* Folder create/rename modal (toggled by inline JS via [hidden]) */
.dc-mail-modal-overlay         { position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dc-mail-modal-overlay[hidden] { display: none; }
.dc-mail-modal                 { background: var(--dc-surface); border-radius: var(--dc-radius-md, 10px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); width: 100%; max-width: 420px; }
.dc-mail-modal__header         { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--dc-ink-100); }
.dc-mail-modal__title          { font-size: 0.95rem; font-weight: 600; margin: 0; }
.dc-mail-modal__close          { background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--dc-ink-500); }
.dc-mail-modal__body           { padding: 18px; }
.dc-mail-modal__footer         { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--dc-ink-100); }

/* Mobile: the shell hides .dc-sidebar__nav behind a toggle the folder rail doesn't
   ship. The rail is the mailbox's primary nav, so keep it visible — it stacks
   full-width above the content under the shell's 900px breakpoint. */
@media (max-width: 900px) {
    .dc-mail-rail .dc-sidebar__nav { display: grid; }
}