/* ============================================================
   MS Garden Theme Stylesheet — Rizz Admin Edition
   Paleta: Oliva #3E422D | Champagne #C2B7AE | Terracota #916C50
   Visual: Inspirado no Template Rizz Admin (Bootstrap 5 aesthetic)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   1. DESIGN TOKENS / CSS VARIABLES
   ============================================================ */
:root {
    --msg-primary:        #3E422D;
    --msg-primary-rgb:    62, 66, 45;
    --msg-primary-hover:  #2b2e1e;
    --msg-secondary:      #C2B7AE;
    --msg-accent:         #916C50;
    --msg-accent-hover:   #7a5a41;
    --msg-body-bg:        #f7f9fb;
    --msg-card-bg:        #ffffff;
    --msg-card-header-bg: #f8f9fa;
    --msg-surface-alt:    #fbfbfa;
    --msg-text-heading:   #1f2118;
    --msg-text-body:      #3a3d2e;
    --msg-text-muted:     #96a0b5;
    --msg-text-label:     #6c725d;
    --msg-border:         #e2e7f1;
    --msg-border-subtle:  rgba(62, 66, 45, 0.10);
    --msg-border-dashed:  rgba(62, 66, 45, 0.18);
    --msg-shadow-card:    0 3px 16px rgba(142, 134, 171, 0.08);
    --msg-shadow-sm:      0 2px 8px rgba(62, 66, 45, 0.06);
    --msg-shadow-modal:   0 25px 60px rgba(0, 0, 0, 0.18);
    --msg-shadow-btn:     0 4px 12px rgba(62, 66, 45, 0.25);
    --msg-success:        #15803d;
    --msg-success-bg:     #f0fdf4;
    --msg-success-border: #bbf7d0;
    --msg-warning:        #b45309;
    --msg-warning-bg:     #fffbeb;
    --msg-warning-border: #fde68a;
    --msg-danger:         #b91c1c;
    --msg-danger-bg:      #fef2f2;
    --msg-danger-border:  #fecaca;
    --msg-info:           #0369a1;
    --msg-info-bg:        #f0f9ff;
    --msg-info-border:    #bae6fd;
    --msg-radius-xs:   4px;
    --msg-radius-sm:   6px;
    --msg-radius-md:   10px;
    --msg-radius-lg:   14px;
    --msg-radius-pill: 50px;
    --msg-font:        'Outfit', sans-serif;
    --msg-fs-xs:       11px;
    --msg-fs-sm:       12px;
    --msg-fs-base:     13.5px;
    --msg-fs-md:       15px;
    --msg-fs-lg:       18px;
    --msg-fs-xl:       22px;
    /* compatibilidade retroativa */
    --msg-card-border: #e2e7f1;
    --msg-text-light:  #96a0b5;
    --msg-tertiary:    #916C50;
}

/* ============================================================
   2. CSS ISOLATION
   ============================================================ */
.msg-wrapper,
.msg-modal-overlay {
    box-sizing: border-box !important;
    font-family: var(--msg-font) !important;
    color: var(--msg-text-body) !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
}
.msg-wrapper *,
.msg-modal-overlay * {
    box-sizing: border-box !important;
}
.msg-wrapper *:not(i):not([class^="fa"]):not([class*=" fa"]),
.msg-modal-overlay *:not(i):not([class^="fa"]):not([class*=" fa"]) {
    font-family: var(--msg-font) !important;
}

/* ============================================================
   3. WRAPPER PRINCIPAL
   ============================================================ */
.msg-wrapper {
    background: var(--msg-body-bg) !important;
    padding: 24px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

/* ============================================================
   4. CARDS — estrutura com header separado (padrão Rizz)
   ============================================================ */
.msg-wrapper .msg-card {
    background: var(--msg-card-bg) !important;
    border: none !important;
    border-radius: var(--msg-radius-lg) !important;
    box-shadow: var(--msg-shadow-card) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}
.msg-wrapper .msg-card-header {
    background: var(--msg-card-header-bg) !important;
    border-bottom: 1px solid var(--msg-border) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-height: 60px !important;
}
.msg-wrapper .msg-card-title {
    font-size: var(--msg-fs-md) !important;
    font-weight: 700 !important;
    color: var(--msg-text-heading) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -0.2px !important;
}
.msg-wrapper .msg-card-title i {
    color: var(--msg-primary) !important;
    font-size: 16px !important;
}
.msg-wrapper .msg-card-body {
    padding: 24px !important;
}
.msg-wrapper .msg-card-plain {
    padding: 24px !important;
}
.msg-wrapper .msg-section-subtitle {
    font-size: var(--msg-fs-sm) !important;
    color: var(--msg-text-muted) !important;
    margin-top: -4px !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   5. KPI / STATS CARDS
   ============================================================ */
.msg-wrapper .msg-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}
.msg-wrapper .msg-stat-card {
    background: var(--msg-card-bg) !important;
    border: none !important;
    border-radius: var(--msg-radius-lg) !important;
    box-shadow: var(--msg-shadow-card) !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.msg-wrapper .msg-stat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--msg-radius-md) !important;
    background: rgba(62, 66, 45, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: var(--msg-primary) !important;
    flex-shrink: 0 !important;
}
.msg-wrapper .msg-stat-icon.msg-icon-success { background: var(--msg-success-bg) !important; color: var(--msg-success) !important; }
.msg-wrapper .msg-stat-icon.msg-icon-warning { background: var(--msg-warning-bg) !important; color: var(--msg-warning) !important; }
.msg-wrapper .msg-stat-icon.msg-icon-danger  { background: var(--msg-danger-bg) !important;  color: var(--msg-danger) !important; }
.msg-wrapper .msg-stat-icon.msg-icon-accent  { background: rgba(145, 108, 80, 0.1) !important; color: var(--msg-accent) !important; }
.msg-wrapper .msg-stat-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.msg-wrapper .msg-stat-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--msg-text-heading) !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}
.msg-wrapper .msg-stat-label {
    font-size: var(--msg-fs-xs) !important;
    color: var(--msg-text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ============================================================
   6. TABELAS
   ============================================================ */
.msg-wrapper .msg-table-responsive,
.msg-wrapper .msg-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.msg-wrapper .msg-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: var(--msg-fs-base) !important;
    margin: 0 !important;
    background: #fff !important;
    padding: 0 !important;
    border: 0 !important;
}
.msg-wrapper .msg-table thead tr { background: #f4f6f9 !important; }
.msg-wrapper .msg-table thead th {
    padding: 11px 16px !important;
    font-size: var(--msg-fs-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--msg-text-label) !important;
    border-bottom: 1px solid var(--msg-border) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    background: #f4f6f9 !important;
}
.msg-wrapper .msg-table tbody tr {
    border-bottom: 1px solid var(--msg-border) !important;
    transition: background 0.15s ease !important;
}
.msg-wrapper .msg-table tbody tr:last-child { border-bottom: none !important; }
.msg-wrapper .msg-table tbody tr:hover { background: rgba(62, 66, 45, 0.025) !important; }
.msg-wrapper .msg-table tbody td {
    padding: 13px 16px !important;
    color: var(--msg-text-body) !important;
    vertical-align: middle !important;
    font-size: var(--msg-fs-base) !important;
    background: transparent !important;
    border: none !important;
}
.msg-wrapper .msg-table tbody td strong { color: var(--msg-text-heading) !important; font-weight: 600 !important; }
.msg-wrapper .msg-table .msg-td-actions { text-align: right !important; white-space: nowrap !important; }

/* ============================================================
   7. BADGES — subtle
   ============================================================ */
.msg-wrapper .msg-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: var(--msg-radius-pill) !important;
    font-size: var(--msg-fs-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.msg-wrapper .msg-badge-pending   { background: var(--msg-warning-bg) !important; color: var(--msg-warning) !important; border-color: var(--msg-warning-border) !important; }
.msg-wrapper .msg-badge-approved  { background: var(--msg-success-bg) !important; color: var(--msg-success) !important; border-color: var(--msg-success-border) !important; }
.msg-wrapper .msg-badge-cancelled { background: var(--msg-danger-bg) !important;  color: var(--msg-danger) !important;  border-color: var(--msg-danger-border) !important; }
.msg-wrapper .msg-badge-info      { background: var(--msg-info-bg) !important;    color: var(--msg-info) !important;    border-color: var(--msg-info-border) !important; }

/* ============================================================
   8. BOTÕES
   ============================================================ */
.msg-wrapper .msg-btn,
.msg-modal-overlay .msg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: var(--msg-radius-sm) !important;
    font-family: var(--msg-font) !important;
    font-size: var(--msg-fs-base) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.msg-wrapper .msg-btn-primary, .msg-modal-overlay .msg-btn-primary { background: var(--msg-primary) !important; border-color: var(--msg-primary) !important; color: #fff !important; }
.msg-wrapper .msg-btn-primary:hover, .msg-modal-overlay .msg-btn-primary:hover { background: var(--msg-primary-hover) !important; border-color: var(--msg-primary-hover) !important; transform: translateY(-1px) !important; box-shadow: var(--msg-shadow-btn) !important; }
.msg-wrapper .msg-btn-secondary, .msg-modal-overlay .msg-btn-secondary { background: #fff !important; border-color: var(--msg-border) !important; color: var(--msg-text-heading) !important; }
.msg-wrapper .msg-btn-secondary:hover, .msg-modal-overlay .msg-btn-secondary:hover { background: var(--msg-card-header-bg) !important; border-color: #c5cdd8 !important; }
.msg-wrapper .msg-btn-accent, .msg-modal-overlay .msg-btn-accent { background: var(--msg-accent) !important; border-color: var(--msg-accent) !important; color: #fff !important; }
.msg-wrapper .msg-btn-accent:hover, .msg-modal-overlay .msg-btn-accent:hover { background: var(--msg-accent-hover) !important; border-color: var(--msg-accent-hover) !important; }
.msg-wrapper .msg-btn-danger, .msg-modal-overlay .msg-btn-danger { background: var(--msg-danger-bg) !important; border-color: var(--msg-danger-border) !important; color: var(--msg-danger) !important; }
.msg-wrapper .msg-btn-danger:hover, .msg-modal-overlay .msg-btn-danger:hover { background: var(--msg-danger) !important; border-color: var(--msg-danger) !important; color: #fff !important; }
.msg-wrapper .msg-btn-compact, .msg-modal-overlay .msg-btn-compact { height: 32px !important; padding: 0 12px !important; font-size: var(--msg-fs-sm) !important; border-radius: var(--msg-radius-xs) !important; }
.msg-wrapper .msg-btn-full, .msg-modal-overlay .msg-btn-full { width: 100% !important; }

/* ============================================================
   9. FORMULÁRIOS
   ============================================================ */
.msg-wrapper .msg-form-group, .msg-modal-overlay .msg-form-group { margin-bottom: 18px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.msg-wrapper .msg-form-group label, .msg-modal-overlay .msg-form-group label { font-size: var(--msg-fs-sm) !important; font-weight: 700 !important; color: var(--msg-text-label) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 0 !important; }
.msg-wrapper .msg-input, .msg-modal-overlay .msg-input { width: 100% !important; height: 40px !important; padding: 0 14px !important; border: 1px solid var(--msg-border) !important; border-radius: var(--msg-radius-sm) !important; font-family: var(--msg-font) !important; font-size: var(--msg-fs-base) !important; color: var(--msg-text-body) !important; background: #fff !important; box-shadow: none !important; outline: 0 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; -webkit-appearance: none !important; appearance: none !important; }
.msg-wrapper .msg-input:focus, .msg-modal-overlay .msg-input:focus { border-color: var(--msg-primary) !important; box-shadow: 0 0 0 3px rgba(62, 66, 45, 0.10) !important; }
.msg-wrapper select.msg-input, .msg-modal-overlay select.msg-input { padding-right: 36px !important; }
.msg-wrapper textarea.msg-input, .msg-modal-overlay textarea.msg-input { height: auto !important; min-height: 90px !important; padding: 10px 14px !important; resize: vertical !important; }

/* ============================================================
   10. ABAS
   ============================================================ */
.msg-wrapper .msg-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; border-bottom: 2px solid var(--msg-border) !important; margin-bottom: 0 !important; padding: 0 !important; gap: 0 !important; }
.msg-wrapper .msg-tab-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 12px 18px !important; font-family: var(--msg-font) !important; font-size: var(--msg-fs-base) !important; font-weight: 600 !important; color: var(--msg-text-muted) !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px !important; cursor: pointer !important; white-space: nowrap !important; transition: all 0.18s ease !important; box-shadow: none !important; margin-top: 0 !important; border-radius: 0 !important; }
.msg-wrapper .msg-tab-btn:hover { color: var(--msg-text-heading) !important; background: rgba(62, 66, 45, 0.03) !important; }
.msg-wrapper .msg-tab-btn.msg-active, .msg-wrapper .msg-tab-btn.active { color: var(--msg-primary) !important; border-bottom-color: var(--msg-primary) !important; background: transparent !important; }
.msg-wrapper .msg-tab-btn i { font-size: 14px !important; }
.msg-wrapper .msg-tab-content { display: none !important; }
.msg-wrapper .msg-tab-content.msg-active, .msg-wrapper .msg-tab-content.active { display: block !important; }

/* ============================================================
   11. MODAL
   ============================================================ */
.msg-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.50) !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.25s ease, visibility 0.25s ease !important; }
.msg-modal-overlay.msg-active, .msg-modal-overlay.active { opacity: 1 !important; visibility: visible !important; }
.msg-modal-overlay .msg-modal { background: var(--msg-card-bg) !important; border-radius: var(--msg-radius-lg) !important; box-shadow: var(--msg-shadow-modal) !important; max-width: 600px !important; width: 100% !important; max-height: 90vh !important; overflow-y: auto !important; border: none !important; transform: scale(0.92) translateY(10px) !important; transition: transform 0.25s ease !important; }
.msg-modal-overlay.msg-active .msg-modal, .msg-modal-overlay.active .msg-modal { transform: scale(1) translateY(0) !important; }
.msg-modal-overlay .msg-modal-header { background: var(--msg-primary) !important; padding: 16px 22px !important; border-radius: var(--msg-radius-lg) var(--msg-radius-lg) 0 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.msg-modal-overlay .msg-modal-header h3,
.msg-modal-overlay .msg-modal-header h4 { margin: 0 !important; font-size: var(--msg-fs-md) !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -0.2px !important; }
.msg-modal-overlay .msg-modal-close { background: rgba(255,255,255,0.15) !important; border: 0 !important; color: #fff !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.15s ease !important; box-shadow: none !important; padding: 0 !important; }
.msg-modal-overlay .msg-modal-close:hover { background: rgba(255,255,255,0.25) !important; }
.msg-modal-overlay .msg-modal-body { padding: 24px 22px !important; }
.msg-modal-overlay .msg-modal-footer { padding: 14px 22px !important; border-top: 1px solid var(--msg-border) !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 8px !important; background: var(--msg-card-header-bg) !important; border-radius: 0 0 var(--msg-radius-lg) var(--msg-radius-lg) !important; }

/* ============================================================
   12. DETAIL LIST
   ============================================================ */
.msg-modal-overlay .msg-detail-list, .msg-wrapper .msg-detail-list { display: flex !important; flex-direction: column !important; gap: 0 !important; border: 1px solid var(--msg-border) !important; border-radius: var(--msg-radius-md) !important; overflow: hidden !important; margin-bottom: 16px !important; }
.msg-modal-overlay .msg-detail-item, .msg-wrapper .msg-detail-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 16px !important; border-bottom: 1px solid var(--msg-border) !important; font-size: var(--msg-fs-base) !important; }
.msg-modal-overlay .msg-detail-item:last-child, .msg-wrapper .msg-detail-item:last-child { border-bottom: none !important; }
.msg-modal-overlay .msg-detail-item:nth-child(odd), .msg-wrapper .msg-detail-item:nth-child(odd) { background: var(--msg-surface-alt) !important; }
.msg-modal-overlay .msg-detail-label, .msg-wrapper .msg-detail-label { font-weight: 600 !important; color: var(--msg-text-label) !important; font-size: var(--msg-fs-sm) !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; }
.msg-modal-overlay .msg-detail-value, .msg-wrapper .msg-detail-value { color: var(--msg-text-heading) !important; font-weight: 500 !important; text-align: right !important; }

/* ============================================================
   13. GRIDS
   ============================================================ */
.msg-wrapper .msg-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.msg-wrapper .msg-grid-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 16px !important; }
@media (max-width: 640px) {
    .msg-wrapper .msg-grid-2, .msg-wrapper .msg-grid-3 { grid-template-columns: 1fr !important; }
    .msg-wrapper .msg-stats-grid { grid-template-columns: 1fr 1fr !important; }
    .msg-wrapper { padding: 14px !important; }
}

/* ============================================================
   14. BUILDER DE CAMPOS
   ============================================================ */
.msg-wrapper .msg-builder-field-row { background: var(--msg-surface-alt) !important; border: 1px solid var(--msg-border) !important; border-radius: var(--msg-radius-md) !important; padding: 18px !important; margin-bottom: 12px !important; position: relative !important; }
.msg-wrapper .msg-builder-remove-btn { position: absolute !important; top: 12px !important; right: 12px !important; background: var(--msg-danger-bg) !important; border: 1px solid var(--msg-danger-border) !important; color: var(--msg-danger) !important; border-radius: var(--msg-radius-xs) !important; cursor: pointer !important; font-size: 13px !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; padding: 0 !important; transition: all 0.15s ease !important; }
.msg-wrapper .msg-builder-remove-btn:hover { background: var(--msg-danger) !important; color: #fff !important; }

/* ============================================================
   15. STEP INDICATOR
   ============================================================ */
.msg-wrapper .msg-step-indicator { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 32px !important; position: relative !important; }
.msg-wrapper .msg-step-indicator::before { content: '' !important; position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--msg-border) !important; z-index: 1 !important; transform: translateY(-50%) !important; }
.msg-wrapper .msg-step-line-active { position: absolute !important; top: 50% !important; left: 0 !important; width: 0% !important; height: 2px !important; background: var(--msg-primary) !important; z-index: 2 !important; transform: translateY(-50%) !important; transition: width 0.4s ease !important; }
.msg-wrapper .msg-step { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--msg-border) !important; color: var(--msg-text-muted) !important; font-weight: 700 !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; transition: all 0.3s ease !important; box-shadow: var(--msg-shadow-sm) !important; }
.msg-wrapper .msg-step.msg-active { border-color: var(--msg-primary) !important; background: var(--msg-primary) !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(62, 66, 45, 0.15) !important; }
.msg-wrapper .msg-step.completed { border-color: var(--msg-primary) !important; background: #fff !important; color: var(--msg-primary) !important; }
.msg-wrapper .msg-form-step { display: none !important; }
.msg-wrapper .msg-form-step.msg-active { display: block !important; animation: msgFadeUp 0.35s ease forwards !important; }
@keyframes msgFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   16. ESTADOS VAZIOS
   ============================================================ */
.msg-wrapper .msg-empty-state { text-align: center !important; padding: 48px 24px !important; color: var(--msg-text-muted) !important; }
.msg-wrapper .msg-empty-state i { font-size: 42px !important; color: var(--msg-border) !important; display: block !important; margin-bottom: 14px !important; }
.msg-wrapper .msg-empty-state p { font-size: var(--msg-fs-base) !important; margin-bottom: 18px !important; }

/* ============================================================
   17. TÍTULOS (compatibilidade)
   ============================================================ */
.msg-wrapper .msg-title { font-weight: 800 !important; color: var(--msg-text-heading) !important; margin-top: 0 !important; margin-bottom: 16px !important; letter-spacing: -0.4px !important; line-height: 1.25 !important; }
.msg-wrapper .msg-title-large  { font-size: 28px !important; }
.msg-wrapper .msg-title-medium { font-size: 20px !important; }
.msg-wrapper .msg-subtitle { font-size: var(--msg-fs-sm) !important; color: var(--msg-text-muted) !important; margin-bottom: 22px !important; }

/* ============================================================
   18. PRICING RULE (compatibilidade)
   ============================================================ */
.msg-wrapper .msg-card.msg-pricing-rule-row { background: var(--msg-surface-alt) !important; border: 1px solid var(--msg-border) !important; margin-bottom: 15px !important; padding: 20px !important; position: relative !important; }

/* ============================================================
   21. SCROLLBARS CUSTOMIZADAS (Rizz style)
   ============================================================ */
.msg-wrapper ::-webkit-scrollbar,
.msg-modal-overlay ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.msg-wrapper ::-webkit-scrollbar-track,
.msg-modal-overlay ::-webkit-scrollbar-track {
    background: transparent !important;
}
.msg-wrapper ::-webkit-scrollbar-thumb,
.msg-modal-overlay ::-webkit-scrollbar-thumb {
    background: rgba(62, 66, 45, 0.25) !important;
    border-radius: var(--msg-radius-pill) !important;
}
.msg-wrapper ::-webkit-scrollbar-thumb:hover,
.msg-modal-overlay ::-webkit-scrollbar-thumb:hover {
    background: var(--msg-primary) !important;
}
.msg-wrapper,
.msg-modal-overlay,
.msg-modal {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(62, 66, 45, 0.25) transparent !important;
}

/* ============================================================
   22. FILE UPLOAD STYLE (Modern/Rizz)
   ============================================================ */
.msg-file-upload-wrapper label {
    user-select: none !important;
}

/* ============================================================
   23. BOTÕES DE AÇÃO EM TABELAS (Soft Rizz Style)
   ============================================================ */
.msg-table-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-start !important;
}
.msg-table-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--msg-radius-sm) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
/* Botão Visualizar (Soft Slate) */
.msg-table-action-btn.btn-view {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
.msg-table-action-btn.btn-view:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}
/* Botão WhatsApp (Soft Green) */
.msg-table-action-btn.btn-wa {
    background-color: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}
.msg-table-action-btn.btn-wa:hover {
    background-color: #bbf7d0 !important;
    color: #166534 !important;
}
/* Botão Excluir (Soft Red) */
.msg-table-action-btn.btn-delete {
    background-color: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}
.msg-table-action-btn.btn-delete:hover {
    background-color: #fecaca !important;
    color: #991b1b !important;
}

/* ============================================================
   24. VISUALIZADOR DE PDF EM MODAL
   ============================================================ */
#msg-pdf-viewer-modal .msg-modal {
    max-width: 900px !important;
    width: 90% !important;
    height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}
#msg-pdf-viewer-modal .msg-modal-body {
    flex: 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}
#msg-pdf-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background-color: #525659 !important; /* Visual escuro padrão de PDFs */
}

/* Botão Aprovar (Soft Primary/Olive) */
.msg-table-action-btn.btn-approve {
    background-color: rgba(62, 66, 45, 0.08) !important;
    border-color: rgba(62, 66, 45, 0.15) !important;
    color: var(--msg-primary) !important;
}
.msg-table-action-btn.btn-approve:hover {
    background-color: var(--msg-primary) !important;
    color: #ffffff !important;
}

/* ============================================================
   25. RESPONSIVIDADE E OTIMIZAÇÃO MOBILE (Celular/Tablet)
   ============================================================ */
@media (max-width: 768px) {
    .msg-wrapper {
        padding: 16px 12px !important;
    }
    
    .msg-wrapper .msg-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 16px !important;
        gap: 15px !important;
    }
    
    .msg-wrapper .msg-card-header > div {
        text-align: center !important;
    }
    
    .msg-wrapper .msg-card-header .msg-btn,
    .msg-wrapper .msg-card-header a.msg-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .msg-wrapper .msg-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .msg-wrapper .msg-stat-card {
        padding: 15px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    
    .msg-wrapper .msg-stat-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 640px) {
    .msg-wrapper .msg-stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .msg-wrapper .msg-grid-2,
    .msg-wrapper .msg-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Tabelas convertidas em Cards no Mobile (Sem Scroll Horizontal) */
    .msg-wrapper .msg-table-container {
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    
    .msg-table-responsive-cards thead {
        display: none !important;
    }
    
    .msg-table-responsive-cards,
    .msg-table-responsive-cards tbody,
    .msg-table-responsive-cards tr,
    .msg-table-responsive-cards td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .msg-table-responsive-cards {
        border: none !important;
        background: transparent !important;
    }
    
    .msg-table-responsive-cards tr {
        background: #ffffff !important;
        border: 1px solid var(--msg-border) !important;
        border-radius: var(--msg-radius-md) !important;
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 4px 12px rgba(62, 66, 45, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .msg-table-responsive-cards td {
        border: none !important;
        padding: 8px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        font-size: 13.5px !important;
        border-bottom: 1px dashed rgba(62, 66, 45, 0.08) !important;
        background: transparent !important;
    }
    
    .msg-table-responsive-cards td:last-child {
        border-bottom: none !important;
        padding-top: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
    }
    
    .msg-table-responsive-cards td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: var(--msg-primary) !important;
        text-align: left !important;
        margin-right: 15px !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .msg-table-responsive-cards td:last-child::before {
        content: "Ações" !important;
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* Ajustar botões dentro do card no mobile */
    .msg-table-responsive-cards td:last-child div {
        width: 100% !important;
    }
    
    .msg-table-responsive-cards td:last-child .msg-btn {
        width: 100% !important;
        height: 44px !important;
        margin-bottom: 6px !important;
        justify-content: center !important;
    }
    
    /* Modal responsivo ocupando quase toda a tela */
    .msg-modal-overlay {
        padding: 8px !important;
        align-items: flex-end !important; /* Abre de baixo no celular estilo app */
    }
    
    .msg-modal-overlay .msg-modal {
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: var(--msg-radius-lg) var(--msg-radius-lg) 0 0 !important;
        margin: 0 !important;
        transform: translateY(100px) !important;
    }
    .msg-modal-overlay.msg-active .msg-modal {
        transform: translateY(0) !important;
    }
    
    .msg-modal-overlay .msg-modal-body {
        padding: 16px 14px !important;
    }
    
    .msg-modal-overlay .msg-modal-footer {
        padding: 12px 14px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    .msg-modal-overlay .msg-modal-footer .msg-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    #msg-pdf-viewer-modal .msg-modal {
        height: 90vh !important;
    }
    
    /* Repetidor de ajustes no mobile */
    .msg-adjustment-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        background: #fff !important;
        border: 1px solid var(--msg-border) !important;
        padding: 12px !important;
        border-radius: var(--msg-radius-sm) !important;
        position: relative !important;
    }
    
    .msg-adjustment-row input {
        height: 38px !important;
    }
    
    .msg-adjustment-row .btn-remove-adjustment-row {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Inputs maiores no celular */
    .msg-wrapper .msg-input,
    .msg-modal-overlay .msg-input {
        height: 44px !important;
        font-size: 14.5px !important;
    }
    
    .msg-wrapper textarea.msg-input,
    .msg-modal-overlay textarea.msg-input {
        height: auto !important;
    }

    .msg-wrapper .msg-btn,
    .msg-modal-overlay .msg-btn {
        height: 44px !important;
        font-size: 14.5px !important;
    }
    
    .msg-wrapper .msg-btn-compact,
    .msg-modal-overlay .msg-btn-compact {
        height: 36px !important;
        font-size: 13px !important;
    }
}