/**
 * File: whatsapp-styles.css
 * Description: UI styles for WhatsApp Add-on (Wizard, Account, & Modern Views).
 * Version: 34.0.0 (Added Modern History List Styles)
 */

:root {
    --wa-primary: #008069;       /* WhatsApp Green */
    --wa-primary-dark: #005c4b;
    --wa-bg-gray: #f0f2f5;
    --wa-white: #ffffff;
    --wa-border-color: #e0e0e0;
    --wa-text-main: #111b21;
    --wa-text-sec: #54656f;
    --wa-danger: #dc3545;
    --wa-success: #198754;
    --wa-radius: 8px;
    --wa-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ===================================================================
   1. GLOBAL COMPONENTS & UTILS
   =================================================================== */
.crm-input { 
    width: 100%; padding: 10px; border: 1px solid var(--wa-border-color); 
    border-radius: 6px; font-size: 14px; background-color: #fff; 
    transition: border-color 0.2s; 
}
.crm-input:focus { outline: none; border-color: var(--wa-primary); box-shadow: 0 0 0 2px rgba(0, 128, 105, 0.1); }

.crm-input.sm { padding: 6px 10px; font-size: 13px; height: 32px; }
.crm-input.readonly { background-color: #f8f9fa; color: #666; cursor: default; }

.btn-icon {
    background: transparent; border: none; cursor: pointer; padding: 4px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--wa-text-sec); transition: 0.2s;
}
.btn-icon:hover { background-color: #f0f2f5; color: var(--wa-primary); }

.mh-spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Loaders & Empty States */
.modern-loader-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px; color: var(--wa-text-sec);
}
.empty-state-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; color: #888; text-align: center;
}
.empty-state-container .material-icons { font-size: 48px; color: #ddd; margin-bottom: 15px; }
.empty-state-container p { font-size: 1.1em; margin: 0; }

/* Status Badges */
.status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-badge.success { background-color: #d1e7dd; color: #0f5132; }
.status-badge.error { background-color: #f8d7da; color: #842029; }
.status-badge.total { background-color: #e2e3e5; color: #41464b; }

/* ===================================================================
   2. MODERN LISTS (Groups & History)
   =================================================================== */

/* Container Reset */
.mh-modern-list-container {
    background: var(--wa-white);
    border: 1px solid var(--wa-border-color);
    border-top: none;
    min-height: 400px;
    display: flex; flex-direction: column;
    position: relative;
    border-radius: 0 0 12px 12px;
}

.mh-scroll-container { flex: 1; overflow-y: auto; padding: 0; }

/* --- MESSAGE HISTORY SPECIFIC --- */

/* Header Row */
.mh-list-header {
    display: flex; align-items: center;
    background: #f8f9fa; border-bottom: 1px solid var(--wa-border-color);
    padding: 10px 20px; font-weight: 600; color: var(--wa-text-sec); font-size: 13px;
    position: sticky; top: 0; z-index: 10;
}

/* History Row/Card */
.mh-history-row {
    display: flex; align-items: center;
    background: var(--wa-white);
    border-bottom: 1px solid var(--wa-border-color);
    padding: 12px 20px;
    transition: background 0.2s;
    font-size: 14px;
}
.mh-history-row:hover { background-color: #fcfcfc; }
.mh-history-row:last-child { border-bottom: none; }

/* Columns */
.mh-col-check { width: 40px; text-align: center; flex-shrink: 0; }
.mh-col-content { flex-grow: 1; overflow: hidden; padding-right: 15px; display: flex; flex-direction: column; gap: 4px; }
.mh-col-stats { width: 120px; text-align: center; flex-shrink: 0; }
.mh-col-actions { width: 100px; text-align: left; flex-shrink: 0; display: flex; justify-content: flex-end; }

/* Content Styling */
.mh-history-content { display: flex; align-items: center; gap: 8px; }
.message-text {
    color: var(--wa-text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; display: block; font-weight: 500;
}
.mh-history-meta { display: flex; gap: 12px; font-size: 12px; color: var(--wa-text-sec); }
.mh-meta-date { display: flex; align-items: center; gap: 4px; }
.mh-meta-id { font-family: monospace; background: #eee; padding: 1px 6px; border-radius: 4px; font-size: 11px; }

/* Pagination */
.modern-pagination {
    display: flex; justify-content: center; align-items: center; gap: 15px;
    padding: 15px; border-top: 1px solid var(--wa-border-color);
    background: #f8f9fa; border-radius: 0 0 12px 12px;
}
.modern-pagination button {
    background: #fff; border: 1px solid var(--wa-border-color);
    padding: 5px 15px; border-radius: 6px; cursor: pointer; color: var(--wa-text-sec);
}
.modern-pagination button:hover:not(:disabled) { background: var(--wa-primary); color: #fff; border-color: var(--wa-primary); }
.modern-pagination button:disabled { opacity: 0.5; cursor: default; }

/* --- GROUP MANAGER CARDS --- */
.gm-group-card {
    background: var(--wa-white);
    border: 1px solid var(--wa-border-color);
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gm-group-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.gm-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--wa-white); }
.gm-group-info { display: flex; align-items: center; gap: 12px; flex-grow: 1; overflow: hidden; }
.gm-icon { color: var(--wa-text-sec); background: #e9edef; padding: 8px; border-radius: 50%; font-size: 20px; }
.gm-name { font-weight: 600; font-size: 15px; color: var(--wa-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-actions { display: flex; gap: 10px; flex-shrink: 0; }

.contact-editor-wrapper { border-top: 1px solid var(--wa-border-color); background-color: #fcfcfc; animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }
.contact-editor-content { padding: 20px; }
.editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.editor-table-wrapper { max-height: 300px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; background: #fff; }
.editor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.editor-table th { position: sticky; top: 0; background: #f8f9fa; color: var(--wa-text-sec); font-weight: 600; text-align: right; padding: 10px 12px; border-bottom: 1px solid #eee; z-index: 10; }
.editor-table td { padding: 8px 12px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.editor-table tr:hover { background-color: #f9f9f9; }

/* ===================================================================
   3. BUTTONS (Shared)
   =================================================================== */
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 6px; height: 32px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; }
.btn-xs { padding: 2px 6px; font-size: 12px; height: 24px; border-radius: 4px; }
.btn-primary.btn-sm { background-color: var(--wa-primary); color: #fff; }
.btn-primary.btn-sm:hover { background-color: var(--wa-primary-dark); }
.btn-secondary.btn-sm { background-color: #fff; border-color: var(--wa-border-color); color: var(--wa-text-main); }
.btn-secondary.btn-sm:hover { background-color: #f0f2f5; }

/* ===================================================================
   4. GROUP SEND WIZARD (EXISTING - 60/40)
   =================================================================== */
#groupSendModal .modal-content.gs-modal-content { width: 95vw !important; height: 90vh !important; max-width: 1600px !important; display: flex !important; flex-direction: column !important; background-color: #fff; border-radius: 12px; overflow: hidden !important; }
#groupSendModal .modal-header { height: 70px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wa-border-color); background: #fff; flex-shrink: 0; }
#gs-wizard-container { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; background-color: var(--wa-bg-gray); position: relative; }
.gs-step-indicator { background: #fff; padding: 20px 0; border-bottom: 1px solid var(--wa-border-color); display: flex; justify-content: center; gap: 60px; flex-shrink: 0; }
.gs-step-indicator .step { display: flex; flex-direction: column; align-items: center; opacity: 0.5; transition: 0.3s; }
.gs-step-indicator .step.active { opacity: 1; }
.gs-step-indicator .step-icon { width: 36px; height: 36px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 8px; }
.gs-step-indicator .step.active .step-icon { background: var(--wa-primary); color: #fff; }
.gs-filter-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 0; height: 100%; overflow: hidden; }
.gs-filter-panel { background-color: #fff; border-left: 1px solid var(--wa-border-color); overflow-y: auto; padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.gs-filter-results { padding: 30px; overflow-y: auto; background-color: var(--wa-bg-gray); display: flex; flex-direction: column; }
.gs-selected-filters-container { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid var(--wa-border-color); margin-bottom: 20px; min-height: 60px; }
.gs-selected-filter-tag { background: #e7f5ff; color: #007aff; border: 1px solid #b3d7ff; padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 500; margin: 2px; display: inline-flex; }
.gs-step-footer { height: 80px; background: #fff; border-top: 1px solid var(--wa-border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; flex-shrink: 0; }

/* Responsive */
@media (max-width: 992px) {
    .gs-filter-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .mh-list-header { display: none; } /* Hide header on mobile */
    .mh-history-row { flex-direction: column; align-items: flex-start; gap: 10px; position: relative; }
    .mh-col-check { position: absolute; top: 12px; left: 10px; }
    .mh-col-content { padding-left: 30px; width: 100%; }
    .mh-col-stats { width: 100%; text-align: right; padding-left: 30px; }
    .mh-col-actions { width: 100%; justify-content: flex-start; padding-left: 30px; }
    .gm-card-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .gm-actions { width: 100%; justify-content: space-between; }
}