/*
 * record-content.css — styles for the record-detail body (record-content.tpl.php):
 * the two-column layout, comments / activity / tasks side tabs, comment composer,
 * email comments, attachments, sub-tables, AND the record modal overrides + header
 * action icons.
 *
 * These MUST load app-wide (not just on the full record page) because the record
 * body is also hosted in a gModal opened from ANY data page — grid/kanban/gallery/
 * calendar list views, lookup fields, sub-tables. Previously these rules lived in an
 * inline <style> in record.tpl.php, so a modal opened from a grid page rendered
 * unstyled (mis-formatted comments, missing maximize/close icons). This file is
 * auto-included by app/partials/header.tpl.php's /public/css glob.
 *
 * Page-only chrome (html/body overflow lock, #content, footer-spacer, breadcrumb,
 * managed-info, page mobile layout) stays inline in record.tpl.php — it must NOT
 * leak onto a list page when a modal injects the body.
 */

.record-tools { display: inline-block; margin-right: 5px; }
.record-wrapper:not(.show-hidden) .record-hidden-field { display: none; }
.record-wrapper label { user-select: initial; }
.related-row .tab-body { max-height: 300px; overflow: auto; }
.related-row .tab-body > .alert { margin: 8px 4px; }
/* Sub-table tabstrip: scroll horizontally when there are many tabs instead
   of stretching the layout. min-width:0 lets the flex formvalue shrink so
   .tab-head's max-width:100%/overflow-x:auto take effect; tabs keep their
   natural size and scroll rather than squish. */
.related-row .formvalue { min-width: 0; }
.related-row .tab-tab { flex-shrink: 0; white-space: nowrap; }
.related-row .tab-tab .icon-adder { display: none; }
.related-row .tab-tab.active .icon-adder { display: inline-block; }
.related-row .icon-adder { margin-left: 10px;  color: var(--content); font-size: 1.1rem; margin-bottom: -2px; display: inline-block; cursor: pointer; }

.record-page-layout { display: flex; gap: 20px; align-items: stretch; height: calc(100vh - 65px); }
.record-main, .record-comments-list, .record-activity-list, .record-tasks-list { scrollbar-width: thin; scrollbar-color: var(--grey6) transparent; }
.record-main::-webkit-scrollbar, .record-comments-list::-webkit-scrollbar, .record-activity-list::-webkit-scrollbar, .record-tasks-list::-webkit-scrollbar { width: 6px; }
.record-main::-webkit-scrollbar-thumb, .record-comments-list::-webkit-scrollbar-thumb, .record-activity-list::-webkit-scrollbar-thumb, .record-tasks-list::-webkit-scrollbar-thumb { background: var(--grey6); border-radius: 3px; }
.record-main::-webkit-scrollbar-track, .record-comments-list::-webkit-scrollbar-track, .record-activity-list::-webkit-scrollbar-track, .record-tasks-list::-webkit-scrollbar-track { background: transparent; }
.record-main { flex: 1; min-width: 0; max-width: 1200px; padding-right: 10px; overflow-y: auto; }
.record-main .formrow:last-child { position: sticky; bottom: 0; background: var(--body-bg); padding: 10px 0 14px; z-index: 10; }
.record-comments { width: 28%; min-width: 340px; flex-shrink: 0; align-self: flex-start; min-height: 0; max-height: 100%; padding-right: 5px; padding-bottom: 14px; display: flex; flex-direction: column; }
.record-side-tabs { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.record-side-tabs > .tab-head { margin-top: 0; flex: 0 0 auto; }
.record-side-tabs > .tab-body { min-height: 0; padding: 10px; display: none; flex-direction: column; max-height: calc(100vh - 140px); overflow: hidden; }
.record-side-tabs > .tab-body.active { display: flex; }
.record-comments-list { flex: 1 1 auto; min-height: 0; padding-right: 6px; overflow-y: auto; }
.record-activity-list { flex: 1 1 auto; min-height: 0; font-size: 0.85em; overflow-y: auto; }
.record-activity-list .ra-row { padding: 8px 0; border-bottom: 1px solid var(--grey5); }
.record-activity-list .ra-row:last-child { border-bottom: none; }
.record-activity-list .ra-meta { color: var(--grey2); font-size: 0.9em; }
.record-activity-list .ra-who { font-weight: 600; color: var(--grey1); }
.record-activity-list .ra-what { color: var(--content); }
.record-activity-list .ra-changes { margin-top: 4px; }
.record-activity-list .ra-change { padding: 2px 0; }
.record-activity-list .ra-fname { font-weight: 600; color: var(--grey1); }
.record-activity-list .ra-old { background: #fee; padding: 0 3px; text-decoration: line-through; color: #933; }
.record-activity-list .ra-new { background: #efe; padding: 0 3px; color: #363; }
.record-activity-list .ra-viewdiff { color: var(--link); cursor: pointer; font-size: 0.85em; }
.record-activity-list .ra-empty { padding: 20px; text-align: center; color: var(--grey2); font-size: 1rem; }
.record-comments-input, .record-tasks-input { margin-top: 10px; }
.record-comments-input textarea, .record-tasks-input textarea { width: 100%; min-height: 40px; max-height: 120px; resize: none; transition: outline 0.1s; }
.record-comments-input button, .record-tasks-input button { margin-top: 5px; }
.record-comments-input.drop-target textarea { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--grey7, #f6f9ff); }

.comment-input-actions { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.comment-input-actions button { margin-top: 0; }
.comment-input-actions button.icon-only { padding: 4px 8px; min-width: 0; }
.comment-input-actions button.icon-only i { font-size: 0.95em; }
.comment-input-actions button[disabled] { opacity: 0.5; cursor: not-allowed; }

.comment-attachments-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.comment-attachments-chips:empty { display: none; }
.comment-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--grey5); border-radius: 12px; background: var(--grey7, #f5f5f5); font-size: 0.8em; max-width: 100%; }
.comment-chip i.fa-paperclip { color: var(--grey3); font-size: 0.85em; }
.comment-chip-size { color: var(--grey3); font-size: 0.85em; }
.comment-chip i.fa-times { cursor: pointer; color: var(--grey3); font-size: 0.85em; padding-left: 2px; }
.comment-chip i.fa-times:hover { color: var(--red, #c33); }

.comment-attach-dropzone { padding: 24px; border: 2px dashed var(--grey5); border-radius: 8px; text-align: center; transition: all 0.1s; background: var(--grey8);}
.comment-attach-dropzone.drop-target { border-color: var(--brand); background: var(--grey7, #f6f9ff); }
.comment-attach-prompt { color: var(--grey2); margin-bottom: 12px; }
.comment-attach-prompt a { color: var(--brand); text-decoration: underline; cursor: pointer; }
.comment-attach-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.comment-attach-progress:empty { margin-top: 0; }

.comment-attach-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8em; color: var(--grey3); margin-left: 6px; }
.comment-attach-badge i { font-size: 0.85em; }

.comment { margin-bottom: 12px; background: var(--grey8); }
.comment-header { display: flex; align-items: center; gap: 6px; font-size: 0.8em; color: var(--grey3); }
.comment-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7em; font-weight: bold; flex-shrink: 0; }
.comment-author { font-weight: 600; color: var(--grey1); }
.comment-time { flex: 1; }
.comment-actions { opacity: 0; transition: opacity 0.15s; }
.comment:hover .comment-actions { opacity: 1; }
.comment-actions i { cursor: pointer; margin-left: 4px; font-size: 0.85em; }
.comment-actions i:hover { color: var(--brand); }
.comment-body { margin-top: 3px; margin-left: 30px; font-size: 0.9em; white-space: pre-wrap; word-break: break-word; }
.comment-body.editing textarea { width: 100%; min-height: 40px; resize: none; }
.comment-edited { font-size: 0.75em; color: var(--grey4); margin-left: 4px; }
.comment-attachments { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.comment-attachments:empty { display: none; }
.comment-attachment { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 4px; cursor: pointer; font-size: 0.8em; max-width: 100%; }
.comment-attachment:hover { background: var(--grey7, #f5f5f5); }
.comment-attachment-icon { color: var(--grey3); font-size: 0.95em; line-height: 1; flex-shrink: 0; }
.comment-attachment-icon i, .comment-attachment-icon svg { font-size: 0.95em; }
.comment-attachment-name { color: var(--content); white-space: nowrap; overflow: hidden; }
.comment-attachment-size { color: var(--grey3); font-size: 0.9em; flex-shrink: 0; }

.email-comment { position: relative; padding: 6px 8px; border-left: 3px solid var(--grey5); margin-bottom: 12px; background: var(--grey8, #fafafa); }
.email-comment .comment-actions { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity 0.15s; z-index: 2; background: var(--grey8, #fafafa); padding: 2px 4px; border-radius: 4px; box-shadow: 0 0 4px rgba(0,0,0,0.08); }
.email-comment:hover .comment-actions { opacity: 1; }
.email-comment .comment-actions i { color: var(--grey2); cursor: pointer; }
.email-comment .comment-actions i:hover { color: var(--red, #c33); }
.email-comment.email-out { border-left-color: #3a7; }
.email-comment.email-in { border-left-color: #37a; }
.email-comment[data-status=bounced] { border-left-color: #c33; }
.email-comment[data-status=dropped] { border-left-color: #888; }
.email-comment .email-head { font-size: 0.78em; color: var(--grey2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.email-comment .email-icon { color: var(--grey3); }
.email-comment .email-time { color: var(--grey3); margin-left: auto; }
.email-comment .email-status-pill { color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 0.75em; text-transform: uppercase; }
.email-comment .email-subject { margin: 4px 0; font-size: 0.92em; }
.email-comment .email-snippet { font-size: 0.88em; white-space: pre-wrap; word-break: break-word; color: var(--content); }
.email-comment .email-status-reason { color: #c33; font-size: 0.8em; margin-top: 3px; }
.email-comment .email-full { margin-top: 4px; font-size: 0.85em; }
.email-comment .email-full a { color: var(--brand); text-decoration: underline; }
.email-comment .email-full a.email-full-link { color: var(--grey3); text-decoration: none; margin-left: 4px; }
.email-comment .email-full a.email-full-link:hover { color: var(--grey1); }
.email-btn-wrap { display: inline-block; line-height: 0; }
.email-btn-wrap > button[disabled] { pointer-events: none; }

/* Sub-record modal overrides — modal hosts the record body inside .record-modal-body
   instead of as a page wrapper. Viewport-locked rules above must NOT apply. The whole
   body is capped at 80vh and scrolls so a tall record never exceeds the viewport. */
.record-modal-body { max-height: 80vh; overflow-y: auto; }
.record-modal-body .record-page-layout { height: auto; flex-direction: column; }
.record-modal-body .record-main { overflow-y: visible; max-width: none; padding-right: 0; }
.record-modal-body .record-main .formrow:last-child { position: static; padding: 0; }
.record-modal-body .record-comments { width: 100%; min-width: 0; max-height: none; padding-right: 0; align-self: stretch; }
.record-modal-body .record-side-tabs > .tab-body { max-height: 350px; }
.record-modal-body .record-comments-list { max-height: 300px; }
.record-modal-body .text-h3 { display: none; }
/* Ellipsis lives in the modal header now, not the body. */
.record-modal-body .record-tools { display: none; }

/* Modal header actions: ellipsis + maximize anchored top-right of the
   modalguts (NOT inside .globalmodaltitle — that has overflow:hidden for
   text-overflow ellipsis, which would clip the dropmenu).
   Title gets right padding so its truncating text stops short of the icons. */
.modal .globalmodaltitle.has-actions { padding-right: 80px; }
.modal-header-actions { position: absolute; top: 0; right: 0; z-index: 101; padding: 13px 20px; display: flex; align-items: center; gap: 14px; line-height: 1; }
.modal-header-actions i { cursor: pointer; color: var(--grey2); font-size: 1rem; line-height: 1; }
.modal-header-actions i:hover { color: var(--content); }
/* Let the dropmenu wrap render its content unconstrained — inline-block
   on the wrap keeps it sized to the trigger, position:absolute on the
   menu content anchors to it. */
.modal-header-actions .gDropMenu { display: inline-flex; align-items: center; position: relative; }
.modal-header-actions .gDropMenuContent { right: 0; left: auto; top: 100%; margin-top: 4px; }

/* On phones the modal is fullscreen — let it use the whole height. */
@media (max-width: 900px) {
	.record-modal-body { max-height: none; }
}