/* admin.css - admin panel, submission mode selector, research data entry modal, history modal (full + admin support) */
/* ============================================================================
   TASK 7 - ADMIN PANEL
   ============================================================================ */

/* Admin button in the top bar */
.admin-panel-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.admin-panel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(43, 108, 176, 0.4);
}

/* Admin modal box -- wider than auth modals */
.admin-modal {
    background: white;
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 1180px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    position: relative;
}

/* Toolbar row above the table */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-refresh-btn {
    padding: 7px 18px;
    background: #edf2f7;
    color: #2d3748;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.admin-refresh-btn:hover {
    background: #e2e8f0;
}

.admin-user-count {
    font-size: 0.82rem;
    color: #718096;
}

/* Scrollable table wrapper */
.admin-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-table thead th {
    background: #f7fafc;
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: #4a5568;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f4f8;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: #f7fafc;
}

/* Pin the Actions column (last column) to the right edge so the
   approve / revoke / grant buttons stay on screen even when the table
   is wider than the modal. The pinned cells need an opaque background
   so scrolled content does not show through, plus a soft left shadow
   to separate the column visually. */
.admin-table thead th:last-child,
.admin-table tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.15);
}

.admin-table thead th:last-child {
    background: #f7fafc;
}

.admin-table tbody td:last-child {
    background: #ffffff;
}

/* Keep the pinned cell background in sync with the row hover colour */
.admin-table tbody tr:hover td:last-child {
    background: #f7fafc;
}

/* Truncate the free-text columns (Email, Name, Organization) so long
   values do not blow out the table width. The full value is available
   on hover via the title attribute set in app-admin.js. */
.admin-table tbody td:nth-child(1) {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table tbody td:nth-child(2),
.admin-table tbody td:nth-child(3) {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role badge pills */
.admin-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-role-badge.pending {
    background: #fefcbf;
    color: #744210;
}

.admin-role-badge.user {
    background: #c6f6d5;
    color: #22543d;
}

.admin-role-badge.admin {
    background: #bee3f8;
    color: #2a4365;
}

/* Action buttons inside table cells */
.admin-action-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.80rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-right: 4px;
}

.admin-action-btn:last-child {
    margin-right: 0;
}

.admin-action-btn.approve {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
}

.admin-action-btn.approve:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(56, 161, 105, 0.35);
}

.admin-action-btn.approve:disabled {
    background: #c6f6d5;
    color: #68d391;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.admin-action-btn.grant {
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%);
    color: white;
}

.admin-action-btn.grant:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(90, 103, 216, 0.35);
}

.admin-action-btn.revoke {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
}

.admin-action-btn.revoke:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(197, 48, 48, 0.35);
}

.admin-action-btn.revoke:disabled {
    background: #fed7d7;
    color: #fc8181;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.admin-action-btn.history-link {
    background: linear-gradient(135deg, #319795 0%, #2c7a7b 100%);
    color: white;
}

.admin-action-btn.history-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(44, 122, 123, 0.35);
}

.admin-no-action {
    color: #a0aec0;
    font-size: 0.85rem;
}

.admin-table-loading {
    text-align: center;
    padding: 24px;
    color: #a0aec0;
    font-size: 0.9rem;
}

/* Inline grant-credits form shown below the table */
.admin-grant-form {
    margin-top: 18px;
    padding: 18px 20px;
    background: #ebf4ff;
    border-radius: 10px;
    border: 1px solid #bee3f8;
}

.admin-grant-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2a4365;
    margin-bottom: 12px;
}

.admin-grant-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-grant-input {
    padding: 8px 12px;
    border: 1px solid #bee3f8;
    border-radius: 8px;
    font-size: 0.9rem;
    width: 160px;
    outline: none;
    transition: border-color 0.2s;
}

.admin-grant-input:focus {
    border-color: #4299e1;
}

.admin-grant-confirm-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-grant-confirm-btn:hover {
    opacity: 0.9;
}

.admin-grant-cancel-btn {
    padding: 8px 16px;
    background: #edf2f7;
    color: #4a5568;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-grant-cancel-btn:hover {
    background: #e2e8f0;
}

@media (max-width: 768px) {
    .admin-modal {
        padding: 24px 16px 20px;
    }

    .admin-table thead th:nth-child(4),
    .admin-table thead th:nth-child(5),
    .admin-table tbody td:nth-child(4),
    .admin-table tbody td:nth-child(5) {
        display: none;
    }
}
/* ============================================================================
   SUBMISSION MODE SELECTOR
   ============================================================================ */

.submission-mode-section {
    margin-bottom: 20px;
}

.submission-mode-section h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.submission-mode-desc {
    font-size: 0.82rem;
    color: #718096;
    margin-top: 8px;
    min-height: 1.2em;
    font-style: italic;
}

/* ============================================================================
   RESEARCH DATA ENTRY MODAL
   ============================================================================ */

.research-entry-modal {
    max-width: 620px;
    width: 96%;
}

.research-preview-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.research-thumb {
    width: 120px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
    object-fit: contain;
    background: #f7fafc;
}

.research-predictions-display {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.research-pred-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.research-pred-label {
    font-size: 0.78rem;
    color: #718096;
    font-weight: 600;
    width: 110px;
    flex-shrink: 0;
}

.research-pred-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2d3748;
}

.research-pred-conf {
    font-size: 0.78rem;
    color: #a0aec0;
}

.research-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.research-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.research-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.research-form-group-full {
    grid-column: 1 / -1;
}

.research-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a5568;
}

.research-optional {
    font-weight: 400;
    color: #a0aec0;
}

.research-hint {
    font-size: 0.78rem;
    color: #718096;
    margin: 0;
}

.research-input {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}

.research-input:focus {
    border-color: #DA291C;
}

.research-textarea {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s;
}

.research-textarea:focus {
    border-color: #DA291C;
}

.research-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.research-radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.84rem;
    color: #2d3748;
    cursor: pointer;
}

.research-upload-label {
    display: inline-block;
    padding: 7px 16px;
    background: #edf2f7;
    border: 1px dashed #cbd5e0;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.2s;
}

.research-upload-label:hover {
    background: #e2e8f0;
}

.research-upload-label input[type="file"] {
    display: none;
}

.research-ref-preview {
    max-width: 200px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
    margin-top: 8px;
}

.research-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: flex-end;
}

/* ============================================================================
   HISTORY MODAL UPDATES (submission mode badges, admin column, private lock)
   ============================================================================ */

/* Submission mode badge in table */
.hm-mode-badge {
    display: inline-block;
    font-size: 0.70rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hm-mode-badge.standard {
    background: #edf2f7;
    color: #4a5568;
}

.hm-mode-badge.research {
    background: #e9d8fd;
    color: #553c9a;
}

.hm-mode-badge.private {
    background: #fed7d7;
    color: #c53030;
}

/* Private lock badge */
.hm-badge.private {
    background: #fc8181;
    color: white;
    font-style: normal;
}

/* Admin user column */
.hm-user {
    font-size: 0.78rem;
    color: #4a5568;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Admin filter row above history table */
.history-admin-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.history-filter-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #4a5568;
}

.history-filter-select {
    padding: 6px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #2d3748;
    background: white;
    outline: none;
    cursor: pointer;
    min-width: 200px;
}

/* Detail view mode badge */
.history-detail-mode {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 3px 10px;
    text-transform: uppercase;
}

.history-detail-mode.mode-standard {
    background: #edf2f7;
    color: #4a5568;
}

.history-detail-mode.mode-research {
    background: #e9d8fd;
    color: #553c9a;
}

.history-detail-mode.mode-private {
    background: #fed7d7;
    color: #c53030;
}

.history-detail-user {
    font-size: 0.80rem;
    color: #718096;
    margin-bottom: 4px;
}

/* History modal (full version with admin support) */
.history-modal {
    background: white;
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 960px;
    width: 96%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    position: relative;
}

.history-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.history-nav-btn {
    padding: 6px 16px;
    background: #edf2f7;
    color: #2d3748;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.history-nav-btn:hover:not(:disabled) { background: #e2e8f0; }
.history-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.history-page-info {
    font-size: 0.82rem;
    color: #718096;
}

.history-modal-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.history-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

.history-modal-table thead th {
    background: #f7fafc;
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: #4a5568;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.history-modal-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f0f4f8;
    vertical-align: middle;
}

.history-modal-table tbody tr:last-child td { border-bottom: none; }

.history-modal-row { cursor: pointer; transition: background 0.15s; }
.history-modal-row:hover { background: #ebf4ff; }
.history-modal-loading { text-align: center; padding: 24px; color: #a0aec0; font-size: 0.9rem; }

.hm-filename {
    font-weight: 600;
    color: #2d3748;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-date { white-space: nowrap; color: #718096; font-size: 0.82rem; }
.hm-level { font-size: 0.75rem; background: #edf2f7; color: #4a5568; border-radius: 4px; padding: 2px 7px; font-weight: 600; white-space: nowrap; }
.hm-type  { color: #2d3748; }
.hm-conf  { color: #a0aec0; font-size: 0.80rem; }
.hm-dir   { color: #c53030; font-weight: 600; white-space: nowrap; }
.hm-badges { white-space: nowrap; }

.hm-badge { display: inline-block; font-size: 0.68rem; border-radius: 3px; padding: 1px 5px; font-weight: 700; margin-right: 2px; }
.hm-badge.t  { background: #DA291C; color: white; }
.hm-badge.gt,
.hm-badge.gc { background: #6b46c1; color: white; }
.hm-badge.none { background: #edf2f7; color: #a0aec0; }

.history-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #edf2f7;
    color: #2d3748;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background 0.2s;
}
.history-back-btn:hover { background: #e2e8f0; }

.history-detail-header {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.history-detail-meta { flex: 1; min-width: 200px; }
.history-detail-filename { font-size: 1rem; font-weight: 700; color: #1a202c; word-break: break-all; margin-bottom: 4px; }
.history-detail-date { font-size: 0.82rem; color: #718096; margin-bottom: 8px; }
.history-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.history-detail-level { font-size: 0.78rem; background: #edf2f7; color: #4a5568; border-radius: 5px; padding: 3px 10px; font-weight: 600; }

.history-detail-predictions { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.history-detail-pred-row { display: flex; align-items: center; gap: 8px; }
.history-detail-label { font-size: 0.80rem; color: #718096; font-weight: 600; width: 64px; flex-shrink: 0; }
.history-detail-value { font-size: 0.92rem; font-weight: 700; color: #2d3748; }
.history-detail-conf  { font-size: 0.80rem; color: #a0aec0; }

.history-detail-img-loading { color: #a0aec0; font-size: 0.88rem; padding: 20px 0; text-align: center; }
.history-detail-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.detail-img-block { display: flex; flex-direction: column; gap: 6px; }
.detail-img-label { font-size: 0.75rem; font-weight: 700; color: #4a5568; text-transform: uppercase; letter-spacing: 0.04em; }
.detail-img { width: 100%; height: auto; border-radius: 8px; border: 1px solid #e2e8f0; object-fit: contain; background: #f7fafc; }
.hm-no-images { color: #a0aec0; font-size: 0.88rem; padding: 16px 0; }

/* History button -- teal so it stands out as the primary navigation action */
.history-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg, #319795 0%, #2c7a7b 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.history-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(44, 122, 123, 0.45); }

/* Account button -- slate, so it reads as settings rather than as an action */
.account-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.account-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(74, 85, 104, 0.45); }

/* ==========================================================================
   CONTACT PREFERENCE (registration checkbox, account modal, emailed link)
   ========================================================================== */

.contact-pref-group { margin-bottom: 14px; }

.contact-pref-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #4a5568;
    cursor: pointer;
}
/* 18px + the label's own hit area keeps this over the 44px touch minimum the
   2026-08-04 mobile sweep set for every control in the app. */
.contact-pref-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.contact-pref-panel {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    background: #f7fafc;
}
.contact-pref-heading {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2d3748;
}
.contact-pref-blurb {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
}
.contact-pref-choices { display: flex; flex-direction: column; gap: 8px; }
.contact-pref-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    color: #2d3748;
    cursor: pointer;
    transition: background 0.15s ease;
}
.contact-pref-radio:hover { background: #edf2f7; }
.contact-pref-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.contact-pref-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #718096;
    min-height: 1em;
}

/* The "keep sending me updates" button is the quieter of the two on the
   emailed-link page: someone who clicked an unsubscribe link should not have
   to hunt for the unsubscribe. */
.secondary-button {
    background: #edf2f7 !important;
    color: #4a5568 !important;
    margin-top: 10px;
}

/* ==========================================================================
   ADMIN: contact-preference badge + mailing list builder
   ========================================================================== */

.admin-pref-badge {
    padding: 3px 9px;
    border: none;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
}
.admin-pref-badge.yes   { background: #c6f6d5; color: #22543d; }
.admin-pref-badge.no    { background: #fed7d7; color: #742a2a; }
.admin-pref-badge.unset { background: #e2e8f0; color: #4a5568; }
.admin-pref-badge:disabled { opacity: 0.5; cursor: default; }

.admin-mailing {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    background: #f7fafc;
}
.admin-mailing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.admin-mailing-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}
.admin-mailing-bucket {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    font-size: 13px;
    color: #2d3748;
    cursor: pointer;
}
.admin-mailing-bucket input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}
.admin-mailing-bucket em { color: #718096; font-style: normal; }
.admin-mailing-bucket.opted-out span { color: #9b2c2c; }

.admin-mailing-warn {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fffaf0;
    border: 1px solid #f6ad55;
    color: #7b341e;
    font-size: 12.5px;
    line-height: 1.45;
}

.admin-mailing-box {
    width: 100%;
    box-sizing: border-box;
    /* 16px: anything smaller makes iOS zoom the page in when the field takes
       focus, which the 2026-08-04 mobile sweep pinned as a rule for every
       control in the app. */
    font-size: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.5;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    background: white;
    color: #2d3748;
    resize: vertical;
}

.admin-mailing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.admin-mailing-hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #718096;
}

@media (max-width: 768px) {
    .history-modal { padding: 24px 16px 20px; }
    .research-form-row { grid-template-columns: 1fr; }
    .hm-date,
    .history-modal-table thead th:nth-child(3),
    .history-modal-table tbody td:nth-child(3) { display: none; }
    .history-detail-img-grid { grid-template-columns: 1fr 1fr; }
}