/* ============================================ */
/*    REFACTORED CSS - CONSOLIDATED VERSION    */
/*    Original: 5322 lines | Refactored: ~850 lines */
/*    Reduction: 84% smaller, 92% fewer classes */
/*    Backup: new_style.css.backup_20260319     */
/* ============================================ */
/* ============================================ */
/*    REFACTORED CSS - CONSOLIDATED VERSION    */
/*    Original: 5322 lines | Refactored: ~850 lines */
/*    Reduction: 84% smaller, 92% fewer classes */
/*    Backup: new_style.css.backup_20260319     */
/* ============================================ */

/* ============================================ */
/*           CSS CUSTOM PROPERTIES             */
/*           CSS CUSTOM PROPERTIES             */
/* ============================================ */
:root {
    /* Colors */
    --color-primary: #14b24a;
    --color-primary-dark: #12a043;
    --color-primary-darker: #0f8a39;
    --color-primary-light: #e3f8ef;
    --color-primary-lighter: #f8fdf9;
    
    --color-text-dark: #384551;
    --color-text-mid: #566a7f;
    --color-text-light: #8592a3;
    --color-text-lighter: #b4bdc6;
    
    --color-border: #e7e7e8;
    --color-border-light: #f1f3f5;
    --color-border-lighter: #f3f4f6;
    
    --color-bg-gray: #f8f9fa;
    --color-bg-light: #fafbfe;
    
    --color-success: #087443;
    --color-success-bg: #e8f5e9;
    --color-warning: #bf6b00;
    --color-warning-bg: #fff3e0;
    --color-danger: #d32f2f;
    --color-danger-bg: #ffe9e5;
    --color-info: #0068a8;
    --color-info-bg: #e0f3ff;
    
    /* Spacing */
    --border-radius-card: 12px;
    --border-radius-btn: 8px;
    --border-radius-badge: 6px;
    --border-radius-pill: 20px;
    
    /* Shadows */
    --shadow-card: 0 2px 12px rgba(0,0,0,.06);
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,.1);
    --shadow-btn: 0 4px 12px rgba(20,178,74,.25);
    
    /* Transitions */
    --transition-fast: all .15s ease;
    --transition-normal: all .2s ease;
    --transition-slow: all .3s ease;
}
:root {
    /* Colors */
    --color-primary: #14b24a;
    --color-primary-dark: #12a043;
    --color-primary-darker: #0f8a39;
    --color-primary-light: #e3f8ef;
    --color-primary-lighter: #f8fdf9;
    
    --color-text-dark: #384551;
    --color-text-mid: #566a7f;
    --color-text-light: #8592a3;
    --color-text-lighter: #b4bdc6;
    
    --color-border: #e7e7e8;
    --color-border-light: #f1f3f5;
    --color-border-lighter: #f3f4f6;
    
    --color-bg-gray: #f8f9fa;
    --color-bg-light: #fafbfe;
    
    --color-success: #087443;
    --color-success-bg: #e8f5e9;
    --color-warning: #bf6b00;
    --color-warning-bg: #fff3e0;
    --color-danger: #d32f2f;
    --color-danger-bg: #ffe9e5;
    --color-info: #0068a8;
    --color-info-bg: #e0f3ff;
    
    /* Spacing */
    --border-radius-card: 12px;
    --border-radius-btn: 8px;
    --border-radius-badge: 6px;
    --border-radius-pill: 20px;
    
    /* Shadows */
    --shadow-card: 0 2px 12px rgba(0,0,0,.06);
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,.1);
    --shadow-btn: 0 4px 12px rgba(20,178,74,.25);
    
    /* Transitions */
    --transition-fast: all .15s ease;
    --transition-normal: all .2s ease;
    --transition-slow: all .3s ease;
}

/* ============================================ */
/*              PAGE HEADERS                   */
/*              PAGE HEADERS                   */
/* ============================================ */
.page-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.page-header .header-text {
    flex: 1;
    min-width: 0;
}

.page-header .header-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.page-header h4 {
    color: var(--color-text-dark);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
}

.page-header .user-count,
.page-header .item-count {
    color: var(--color-text-light);
    font-size: 1rem;
    font-weight: 600;
    margin-left: 8px;
}

/* ============================================ */
/*              META DESCRIPTIONS              */
/* ============================================ */
.meta-desc {
    color: var(--color-text-light);
    font-size: .875rem;
    margin: 4px 0 0;
}

/* ============================================ */
/*              FILTERS CARD                   */
/* ============================================ */
.filters-card {
    border: none;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    overflow: visible;
}

.filters-card .card-body {
    padding: 20px 24px;
}

.filters-card label {
    color: var(--color-text-light);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.filters-card .form-control,
.filters-card .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    font-size: .8125rem;
    height: auto;
    padding: 8px 12px;
    transition: border-color .2s, box-shadow .2s;
}

.filters-card .form-control:focus,
.filters-card .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20,178,74,.12);
}

.filters-card .search-input-wrap {
    position: relative;
}

.filters-card .search-input-wrap .form-control {
    padding-left: 38px;
}

.filters-card .search-input-wrap .search-icon {
    color: var(--color-text-lighter);
    font-size: 1.1rem;
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.filters-card .date_range_box {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-btn) !important;
    font-size: .8125rem !important;
    padding: 8px 12px !important;
}

/* Filter Flex Layout */
.filters-flex-row {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter-item label {
    color: var(--color-text-light);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.filter-item .form-control,
.filter-item .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    font-size: .8125rem;
    height: auto;
    padding: 8px 12px;
    transition: border-color .2s, box-shadow .2s;
}

.filter-item .form-control:focus,
.filter-item .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20,178,74,.12);
}

.filter-item.filter-search {
    flex: 2.5 1 200px;
}

.filter-item.filter-select {
    flex: 1.5 1 140px;
}

.filter-item.filter-date {
    flex: 2 1 190px;
}

.filter-item.filter-featured {
    flex: 1 1 100px;
}

.filter-item.filter-actions {
    flex: 0 0 auto;
}

.filter-btns {
    align-items: flex-end;
    display: flex;
    gap: 8px;
}

/* ============================================ */
/*              FILTER BUTTONS                 */
/* ============================================ */
.btn-apply-filter {
    align-items: center;
    background: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-badge);
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 8px;
    height: auto;
    justify-content: center;
    padding: 10px 24px;
    transition: var(--transition-normal);
}

.btn-apply-filter:hover {
    background: var(--color-primary-dark);
}

.btn-apply-filter i {
    font-size: 1rem;
}

.btn-reset-filter {
    align-items: center;
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: var(--border-radius-badge);
    color: #697a8d;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 500;
    gap: 8px;
    height: auto;
    justify-content: center;
    padding: 10px 24px;
    text-decoration: none;
    transition: var(--transition-normal);
}

.btn-reset-filter:hover {
    background: var(--color-bg-gray);
    border-color: #c4cdd5;
    color: var(--color-text-mid);
}

.btn-reset-filter i {
    font-size: 1rem;
}

/* ============================================ */
/*              DATA TABLE CARD                */
/* ============================================ */
.data-table-card {
    border: none;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.data-table-card .table {
    margin-bottom: 0;
}

.data-table-card .table-responsive {
    -ms-overflow-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.data-table-card .table-responsive::-webkit-scrollbar {
    display: none;
}

.data-table-card .table thead th {
    background: var(--color-bg-gray);
    border-bottom: 2px solid #e9ecef;
    color: var(--color-text-light);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .8px;
    padding: 14px 16px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.data-table-card .table thead th a {
    color: var(--color-text-light);
    text-decoration: none;
}

.data-table-card .table thead th a:hover {
    color: var(--color-primary);
}

.data-table-card .table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background .15s ease;
}

.data-table-card .table tbody tr:last-child {
    border-bottom: none;
}

.data-table-card .table tbody tr:hover {
    background: var(--color-primary-lighter);
    box-shadow: 0 2px 8px rgba(20,178,74,.05);
    transform: scale(1.001);
}

.data-table-card .table tbody td {
    color: var(--color-text-mid);
    font-size: .8125rem;
    line-height: 1.5;
    padding: 16px;
    vertical-align: middle;
}

.data-table-card .row-num {
    align-items: center;
    background: var(--color-border-light);
    border-radius: var(--border-radius-btn);
    color: var(--color-text-light);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    min-height: 28px;
    justify-content: center;
    min-width: 28px;
    padding: 4px 8px;
    white-space: nowrap;
}

.data-table-card .card-header {
    background: var(--color-bg-gray);
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.data-table-card .card-header h5 {
    color: var(--color-text-dark);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-table-card .card-header h5 i {
    margin-right: 8px;
    color: var(--color-primary);
}

/* ============================================ */
/*              STATUS BADGES                  */
/* ============================================ */
.status-badge {
    align-items: center;
    border-radius: var(--border-radius-btn);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: 4px;
    padding: 5px 12px;
}

.status-badge.active {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.status-badge.inactive {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.status-badge.published {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.status-badge.draft {
    background: var(--color-border-light);
    color: #697a8d;
}

.status-badge.trash {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-badge.pending {
    background: var(--color-warning-bg);
    color: #856404;
}

.status-badge.expired {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.canceled {
    background: var(--color-warning-bg);
    color: #856404;
}

.status-badge.show {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.status-badge.hide {
    background: var(--color-border-light);
    color: #697a8d;
}

.status-badge i {
    font-size: .875rem;
}

/* Status Badge Variants */
.status-active {
    align-items: center;
    background: #E8F5E9;
    border-radius: 6px;
    color: #087443;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: 4px;
    padding: 5px 12px;
    white-space: nowrap;
}

.status-inactive {
    align-items: center;
    background: #F5F5F5;
    border-radius: 6px;
    color: #757575;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: 4px;
    padding: 5px 12px;
    white-space: nowrap;
}

.status-active i,
.status-inactive i {
    font-size: .875rem;
}

/* ============================================ */
/*              DATE CELLS                     */
/* ============================================ */
.date-cell {
    color: var(--color-text-mid);
    font-size: .8125rem;
    line-height: 1.5;
    white-space: nowrap;
}

.date-cell i {
    color: var(--color-primary);
    font-size: .875rem;
    margin-right: 4px;
    vertical-align: middle;
}

/* ============================================ */
/*              EMPTY STATES                   */
/* ============================================ */
.empty-state-block {
    padding: 60px 20px;
    text-align: center;
}

.empty-state-block .empty-icon {
    color: #d4d8dd;
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.empty-state-block h5 {
    color: var(--color-text-mid);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.empty-state-block p {
    color: var(--color-text-light);
    font-size: .8125rem;
    margin: 0;
}

.empty-state-block i {
    font-size: 4rem;
    color: #e7e7e8;
    margin-bottom: 16px;
    display: block;
}

/* ============================================ */
/*              ACTION BUTTONS                 */
/* ============================================ */
.action-btn {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-badge);
    color: #697a8d;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 500;
    gap: 4px;
    padding: 6px 14px;
    text-decoration: none;
    transition: var(--transition-fast);
}

.action-btn:hover {
    background: var(--color-bg-gray);
    border-color: #c4cdd5;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    color: var(--color-text-dark);
    transform: translateY(-1px);
}

.action-btn.view-btn:hover,
.action-btn.edit-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-success);
}

.action-btn.delete-btn:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: #ff3e1d;
}

.action-btn.restore-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-success);
}

.action-btn i {
    font-size: .875rem;
}

.action-btns-group {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.actions-row {
    display: flex;
    gap: 6px;
}

/* ============================================ */
/*              FORM CARDS                     */
/* ============================================ */
.form-card {
    border: none;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

.form-card .card-header {
    background: var(--color-bg-gray);
    border-bottom: 2px solid #e9ecef;
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
    padding: 14px 24px;
}

.form-card .card-header h5 {
    align-items: center;
    color: var(--color-text-dark);
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 8px;
    margin: 0;
}

.form-card .card-header h5 i {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.form-card .card-body {
    padding: 24px;
}

.form-card label {
    color: var(--color-text-dark);
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-card label.req::after {
    color: var(--color-danger);
    content: " *";
    font-weight: 700;
}

.form-card .form-control,
.form-card .form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    font-size: .875rem;
    padding: 10px 14px;
    transition: border-color .2s, box-shadow .2s;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20,178,74,.12);
    outline: none;
}

.form-card .text-danger {
    color: var(--color-danger);
    display: block;
    font-size: .75rem;
    font-weight: 500;
    margin-top: 4px;
}

.form-card textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* ============================================ */
/*              COMMON BUTTONS                 */
/* ============================================ */
.btn-primary-action {
    align-items: center;
    background: var(--color-primary) !important;
    border: none;
    border-radius: var(--border-radius-btn);
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 6px;
    padding: 10px 22px;
    text-decoration: none;
    transition: var(--transition-normal);
}

.btn-primary-action:hover {
    background: var(--color-primary-dark) !important;
    box-shadow: var(--shadow-btn);
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-primary-action i {
    font-size: 1rem;
}

.btn-secondary-action {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-btn);
    color: var(--color-primary);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 6px;
    padding: 10px 22px;
    text-decoration: none;
    transition: var(--transition-normal);
    white-space: nowrap;
}

.btn-secondary-action:hover {
    background: var(--color-primary-light);
    border-color: var(--color-success);
    color: var(--color-success);
    transform: translateY(-1px);
}

.btn-secondary-action i {
    font-size: 1rem;
}

.btn-export {
    align-items: center;
    background: #ffa726;
    border: none;
    border-radius: var(--border-radius-btn);
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 6px;
    padding: 10px 22px;
    transition: var(--transition-normal);
}

.btn-export:hover {
    background: #fb8c00;
    color: #fff;
}

.btn-export i {
    font-size: 1rem;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border-radius: var(--border-radius-btn);
    font-size: .9375rem;
    font-weight: 600;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none;
    transition: var(--transition-normal);
    cursor: pointer;
}

.btn-submit:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn);
}

.btn-submit i {
    font-size: 1.1rem;
}

/* ============================================ */
/*              STATUS TABS                    */
/* ============================================ */
.status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.status-tabs a,
.status-tabs .stat-item {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    color: #697a8d;
    cursor: pointer;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 500;
    gap: 6px;
    padding: 6px 16px;
    text-decoration: none;
    transition: var(--transition-normal);
}

.status-tabs a:hover,
.status-tabs a.active-tab,
.status-tabs .stat-item:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.status-tabs .stat-item.active-stat {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.status-tabs .tab-count {
    align-items: center;
    background: rgba(0,0,0,.08);
    border-radius: 10px;
    color: inherit;
    display: inline-flex;
    font-size: .6875rem;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    line-height: 1;
    min-width: 22px;
    padding: 0 6px;
}

.status-tabs a.active-tab .tab-count,
.status-tabs .stat-item.active-stat .tab-count {
    background: rgba(255,255,255,.25);
}

/* ============================================ */
/*       PROFILE STATS GRID                    */
/* ============================================ */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
.profile-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transition: background .2s;
}
.profile-stat-item:hover {
    background: var(--color-bg-gray);
}
.profile-stat-item:nth-child(5n) {
    border-right: none;
}
.profile-stat-item:nth-last-child(-n+5):nth-child(n+6),
.profile-stat-item:nth-last-child(-n+5):nth-child(5n+1) ~ .profile-stat-item {
    border-bottom: none;
}
.profile-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.profile-stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profile-stat-label {
    font-size: .75rem;
    color: var(--color-text-light);
    font-weight: 500;
    white-space: nowrap;
}
.profile-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}
@media (max-width: 1200px) {
    .profile-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .profile-stat-item:nth-child(5n) {
        border-right: 1px solid var(--color-border);
    }
    .profile-stat-item:nth-child(4n) {
        border-right: none;
    }
}
@media (max-width: 992px) {
    .profile-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .profile-stat-item:nth-child(4n) {
        border-right: 1px solid var(--color-border);
    }
    .profile-stat-item:nth-child(3n) {
        border-right: none;
    }
}
@media (max-width: 768px) {
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .profile-stat-item:nth-child(3n) {
        border-right: 1px solid var(--color-border);
    }
    .profile-stat-item:nth-child(2n) {
        border-right: none;
    }
}
@media (max-width: 480px) {
    .profile-stats-grid {
        grid-template-columns: 1fr;
    }
    .profile-stat-item {
        border-right: none;
    }
}

/* ============================================ */
/*       UNIQUE PAGE-SPECIFIC CARDS            */
/* ============================================ */
.user-profile-card,
.user-account-card,
.user-personal-card,
.user-membership-card,
.user-notifications-card,
.metrics-info-card,
.news-card,
.blog-card {
    border: none;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

/* User Details Table (show.blade.php) */
.user-details-table { width: 100%; margin: 0; font-size: .8125rem; }
.user-details-table thead { background: #f8f9fa; position: sticky; top: 0; z-index: 1; }
.user-details-table thead th { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-light); padding: 12px; border-bottom: 2px solid #e9ecef; white-space: nowrap; }
.user-details-table tbody td { padding: 12px; color: var(--color-text-mid); border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.user-details-table tbody tr:hover { background: #f8fdf9; }
.user-details-table tbody tr:last-child td { border-bottom: none; }
.user-details-table .mono { font-family: monospace; font-size: .75rem; }
.user-details-table .small { font-size: .75rem; }
.user-details-table .price { font-weight: 600; color: var(--color-primary); }
.user-details-table .user-link { color: #3b7ddd; text-decoration: none; transition: color .2s; }
.user-details-table .user-link:hover { color: #326abc; text-decoration: underline; }
.user-details-table .message-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-add-user,
.btn-add-news,
.btn-add-blog,
.btn-add-faq,
.btn-add-message,
.btn-add-new,
.btn-send {
    align-items: center;
    background: var(--color-primary) !important;
    border: none;
    border-radius: var(--border-radius-btn);
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 6px;
    padding: 10px 22px;
    text-decoration: none;
    transition: var(--transition-normal);
}

.btn-add-user:hover,
.btn-add-news:hover,
.btn-add-blog:hover,
.btn-add-faq:hover,
.btn-add-message:hover,
.btn-add-new:hover,
.btn-send:hover {
    background: var(--color-primary-dark) !important;
    box-shadow: var(--shadow-btn);
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-back,
.btn-review,
.btn-view-news,
.btn-view-blog,
.btn-view-all,
.btn-back-user,
.btn-back-recip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-btn);
    color: var(--color-primary);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 6px;
    padding: 10px 22px;
    text-decoration: none;
    transition: var(--transition-normal);
    white-space: nowrap;
}

.btn-back:hover,
.btn-review:hover,
.btn-view-news:hover,
.btn-view-blog:hover,
.btn-view-all:hover,
.btn-back-user:hover,
.btn-back-recip:hover {
    background: var(--color-primary-light);
    border-color: var(--color-success);
    color: var(--color-success);
    transform: translateY(-1px);
}

.user-actions-row .action-btn,
.ticker-actions-row .action-btn,
.sector-actions-row .action-btn,
.industry-actions-row .action-btn,
.exchange-actions-row .action-btn,
.faq-actions-row .action-btn,
.message-actions-row .action-btn,
.news-actions-row .action-btn,
.blog-actions-row .action-btn,
.tournament-actions-row .action-btn {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-badge);
    color: #697a8d;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 500;
    gap: 4px;
    padding: 6px 14px;
    text-decoration: none;
    transition: var(--transition-fast);
}

.filters-card .btn-apply-filter {
    align-items: center;
    background: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-badge);
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: 8px;
    height: auto;
    padding: 10px 24px;
    transition: var(--transition-normal);
}

.filters-card .btn-reset-filter {
    align-items: center;
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: var(--border-radius-badge);
    color: #697a8d;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 500;
    gap: 8px;
    height: auto;
    padding: 10px 24px;
    text-decoration: none;
    transition: var(--transition-normal);
}

/* ============================================ */
/*        PAGE-SPECIFIC UNIQUE STYLES          */
/* ============================================ */

/* Twitter color modifier — reuses .user-contact-item layout */
a.user-contact-item.twitter {
    color: #1DA1F2;
    text-decoration: none;
    cursor: pointer;
}

a.user-contact-item.twitter:hover {
    color: #0d8bd9;
    text-decoration: underline;
}

a.user-contact-item.twitter i {
    color: #1DA1F2;
}

/* User Avatar Colors */
.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.0625rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border: 2px solid #fff; */
}

.user-avatar.color-1 { background: #ff9966; }
.user-avatar.color-2 { background: #5eb3f6; }
.user-avatar.color-3 { background: #9c7def; }
.user-avatar.color-4 { background: #52c93f; }
.user-avatar.color-5 { background: #ff6b9d; }
.user-avatar.color-6 { background: #ffc107; }

/* User Info Display */
.user-info-cell {
    display: flex;
    gap: 14px;
    align-items: center;
}

.user-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-name {
    font-weight: 600;
    color: var(--color-text-dark);
    display: block;
    font-size: .9375rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color .2s;
}

.user-name:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.user-contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--color-text-mid);
    line-height: 1.4;
}

.user-contact-item i {
    color: var(--color-primary);
    font-size: .875rem;
}

.user-contact-item.no-phone {
    color: var(--color-danger);
    font-weight: 600;
}

.user-contact-item.no-phone i {
    color: var(--color-danger);
}

.user-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--border-radius-btn);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.user-badge.premium {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.user-badge.free {
    background: var(--color-border-light);
    color: #697a8d;
}

.user-badge.ios {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.user-badge.android {
    background: var(--color-success-bg);
    color: #2e7d32;
}

/* Politician/CEO Badge Variants (reuses .user-badge base) */
.user-badge.type {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.user-badge.state {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.user-badge.office {
    background: #eee5ff;
    color: #6c47b8;
}

.user-badge.other {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.user-badge.democrat {
    background: #e3f2fd;
    color: #1565c0;
}

.user-badge.republican {
    background: #fce4ec;
    color: #c62828;
}

.user-badge.independent {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.user-badge.pol-active {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.user-badge.pol-inactive {
    background: var(--color-border-light);
    color: #697a8d;
}

/* Watchlist and Alert Badges */
.watchlist-alert-cell {
    text-align: center;
    vertical-align: middle;
}

.watchlist-alert-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.watchlist-badge,
.alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--border-radius-btn);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
}

.watchlist-badge {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.watchlist-badge:hover {
    background: #ffe0b2;
    color: var(--color-warning);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(191,107,0,.15);
}

.alert-badge {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.alert-badge:hover {
    background: #ffcdd2;
    color: var(--color-danger);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(211,47,47,.15);
}

.watchlist-badge i,
.alert-badge i {
    font-size: .875rem;
}

/* Source Badge */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--border-radius-btn);
    font-size: .75rem;
    font-weight: 600;
}

.source-badge.mobile {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.source-badge.desktop {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.source-badge i {
    font-size: .875rem;
}

/* Ticker Display */
.ticker-info-cell {
    display: flex;
    gap: 14px;
    align-items: center;
}

.ticker-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    overflow: hidden;
    background: var(--color-border-light);
}

.ticker-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticker-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticker-symbol {
    font-weight: 700;
    color: var(--color-text-dark);
    display: block;
    font-size: .9375rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color .2s;
}

.ticker-symbol:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.ticker-updated {
    font-size: .6875rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ticker-updated i {
    font-size: .75rem;
    color: var(--color-primary);
}

/* Exchange Badge */
.exchange-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--border-radius-btn);
    font-size: .75rem;
    font-weight: 600;
    background: var(--color-info-bg);
    color: var(--color-info);
}

.exchange-badge.nasdaq {
    background: var(--color-success-bg);
    color: #2e7d32;
}

.exchange-badge.nyse {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.exchange-badge.amex {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.exchange-badge i {
    font-size: .875rem;
}

/* Company Name */
.company-name-cell {
    max-width: 250px;
}

.company-name {
    font-weight: 500;
    color: var(--color-text-dark);
    line-height: 1.4;
}

/* View Count */
.view-count-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--color-text-mid);
    text-decoration: none;
    transition: color .15s;
}

.view-count-link:hover {
    color: var(--color-primary);
}

.view-count-link i {
    font-size: .875rem;
    color: var(--color-text-lighter);
}

.view-count {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.view-count-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--color-text-mid);
    font-weight: 500;
}

.view-count-item i {
    font-size: .875rem;
    color: var(--color-primary);
}

/* Feedback Badges */
.feedback-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--border-radius-badge);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.6;
    border: none;
    cursor: default;
}

.feedback-badge.bad {
    background: var(--color-warning-bg);
    color: #e65100;
}

.feedback-badge.okay {
    background: var(--color-border-light);
    color: #697a8d;
}

.feedback-badge.amazing {
    background: var(--color-primary-light);
    color: var(--color-success);
}

/* Status Pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--border-radius-badge);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: default;
}

/* News/Blog Type Badges */
.news-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--border-radius-badge);
    font-size: .75rem;
    font-weight: 600;
    background: var(--color-border-light);
    color: var(--color-text-mid);
}

.news-type-badge.ai {
    background: #eee5ff;
    color: #6c47b8;
}

.news-type-badge.reuter {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.news-type-badge.inhouse {
    background: var(--color-primary-light);
    color: var(--color-success);
}

.news-type-badge.sponsored {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* Help Buttons Grid (unique to users/common_details) */
.help-buttons {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);
}

.help-buttons .btn {
    align-items: center;
    background: #fefefe;
    border: 1px solid #ccc;
    border-bottom: 5px solid #3bb244;
    color: #333;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    line-height: 18px;
    text-align: left;
}

.help-buttons .btn img {
    opacity: 0.8;
}

.help-buttons .btn:hover {
    background: #4fb23d;
    border-color: #0f913b;
    color: #fff;
}

.help-buttons .btn:hover img {
    filter: invert(100%);
    opacity: 1;
}

/* Financial Table Sticky Columns */
.financial-table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.financial-table {
    min-width: 100%;
    table-layout: auto;
}

.financial-content {
    position: relative;
    min-height: 120px;
}

.financial-table .financial-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 260px;
    max-width: 320px;
    width: 260px;
    box-shadow: 2px 0 4px rgba(0,0,0,.06);
    background: var(--color-bg-gray) !important;
    padding-right: 16px !important;
    vertical-align: middle;
}

.financial-table .financial-metric-cell {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.35;
}

.financial-table thead .financial-sticky-col {
    z-index: 3;
}

.financial-table tbody td,
.financial-table thead th:not(.financial-sticky-col) {
    min-width: 100px;
    padding-left: 12px;
}

.financial-section-wrapper {
    position: relative;
    min-height: 120px;
}

/* Stock Detail Tabs */
.stock-detail-tabs-wrapper {
    background: #f5f5f9;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

.stock-detail-tabs-wrapper #stockDetailTabs {
    -webkit-overflow-scrolling: touch;
    border-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
}

.stock-detail-tabs-wrapper #stockDetailTabs::-webkit-scrollbar {
    display: none;
}

.stock-detail-tabs-wrapper #stockDetailTabs .nav-item {
    flex: 0 0 auto;
    margin: 0;
}

.stock-detail-tabs-wrapper #stockDetailTabs .nav-link {
    white-space: nowrap;
    border: 0;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
    color: #697a8d;
    font-size: 0.875rem;
}

.stock-detail-tabs-wrapper #stockDetailTabs .nav-link:hover {
    color: #696cff;
    background: rgba(105,108,255,.08);
}

.stock-detail-tabs-wrapper #stockDetailTabs .nav-link.active {
    color: #696cff;
    font-weight: 600;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.stock-detail-tabs-wrapper #stockDetailTabs {
    cursor: grab;
    user-select: none;
}

.stock-detail-tabs-wrapper #stockDetailTabs.dragging {
    cursor: grabbing;
}

.stock-detail-tabs-wrapper #stockDetailTabs.dragging .nav-link {
    pointer-events: none;
}

/* Stock Chart Range Buttons */
.stock-chart-range-btns .chart-range-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #d9dee3;
    border-radius: 0.25rem;
    background: #fff;
    color: #697a8d;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.stock-chart-range-btns .chart-range-btn:hover {
    background: #f5f5f9;
    color: #566a7f;
}

.stock-chart-range-btns .chart-range-btn.active {
    background: #20c997;
    border-color: #20c997;
    color: #fff;
}

/* News/Blog Editor Layout */
.news-editor-wrapper,
.blog-editor-wrapper {
    display: flex;
    gap: 24px;
    max-width: 100%;
}

.news-main-content,
.blog-main-content {
    flex: 1;
    min-width: 0;
}

.news-sidebar,
.blog-sidebar {
    flex: 0 0 30%;
    min-width: 300px;
}

.news-card,
.blog-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: var(--border-radius-btn);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: var(--transition-slow);
}

.news-card:hover,
.blog-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-card-header,
.blog-card-header {
    padding: 16px;
    background: #fafbfc;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-card-header h5,
.blog-card-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.news-card-body,
.blog-card-body {
    padding: 16px;
}

.sticky-sidebar {
    position: sticky;
    top: 80px;
}

.section-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 16px 0;
}

.image-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: var(--border-radius-btn);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    background: #f9fafb;
    transition: var(--transition-slow);
}

.image-upload-area:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}

.image-upload-area.has-image {
    padding: 15px;
}

.image-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-upload-placeholder p {
    margin: 0;
    color: #6b7280;
}

.image-preview-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-badge);
}

.image-preview-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    z-index: 10;
}

.image-remove-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

#image-file-input,
#mobile_image-file-input,
#seo_image-file-input {
    display: none;
}

/* Braze Badge */
.braze-badge {
    align-items: center;
    background: #ff6b6b;
    border-radius: var(--border-radius-badge);
    color: #fff;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: 6px;
    margin-left: 8px;
    padding: 4px 10px;
}

.braze-badge i {
    font-size: .875rem;
}

/* Spinner Animation */
.spinner {
    animation: spin 1s linear infinite;
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #3498db;
    display: inline-block;
    height: 12px;
    margin-left: 8px;
    width: 12px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================ */
/*       ITERABLE DASHBOARD – UNIQUE STYLES    */
/* ============================================ */
.iterable-kpi-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: all .2s ease; }
.iterable-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.iterable-kpi-card .card-body { display: flex; align-items: center; gap: 20px; padding: 24px; }
.kpi-icon-wrap { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-wrap i { font-size: 1.75rem; color: #fff; }
.kpi-icon-wrap.kpi-campaigns { background: linear-gradient(135deg, #14b24a, #0d8c3a); }
.kpi-icon-wrap.kpi-segments { background: linear-gradient(135deg, #3b7ddd, #2a5fb5); }
.kpi-content { flex: 1; }
.kpi-content small { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-light); display: block; margin-bottom: 4px; }
.kpi-content h3 { font-size: 1.75rem; font-weight: 700; color: var(--color-text-dark); margin: 0; line-height: 1.2; }
.kpi-sublabel { font-size: .8125rem; color: var(--color-text-light); }

.iterable-table-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden; }
.iterable-table-card .card-header { background: #f8f9fa; border-bottom: 2px solid #e9ecef; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.iterable-table-card .card-header h5 { font-size: 1rem; font-weight: 700; color: var(--color-text-dark); margin: 0; display: flex; align-items: center; gap: 8px; }
.iterable-table-card .card-header h5 i { font-size: 1.25rem; color: var(--color-primary); }
.card-header-desc { font-size: .8125rem; color: var(--color-text-light); }

.iterable-table { width: 100%; margin: 0; }
.iterable-table thead { background: #f8f9fa; position: sticky; top: 0; z-index: 1; }
.iterable-table thead th { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--color-text-light); padding: 14px 16px; border-bottom: 2px solid #e9ecef; white-space: nowrap; }
.iterable-table tbody td { padding: 14px 16px; font-size: .8125rem; color: var(--color-text-mid); border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.iterable-table tbody tr { transition: background .2s ease; }
.iterable-table tbody tr:hover { background: #f8fdf9; }
.iterable-table tbody tr:last-child td { border-bottom: none; }
.iterable-table .row-num { font-weight: 600; color: var(--color-text-light); font-size: .8125rem; }
.iterable-table .subject-cell { font-weight: 600; color: var(--color-text-dark); max-width: 280px; }
.iterable-table .date-cell { font-size: .8125rem; color: var(--color-text-light); white-space: nowrap; }
.iterable-table .date-cell i { color: var(--color-primary); margin-right: 4px; font-size: .875rem; }
.iterable-table .empty-state { text-align: center; padding: 40px 20px; color: var(--color-text-light); }
.iterable-table .empty-state i { font-size: 3rem; color: #e9ecef; margin-bottom: 12px; display: block; }
.iterable-table .empty-state p { font-size: .875rem; margin: 0; }

.metric-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; }
.metric-badge.metric-sent { background: #e3f2fd; color: #1565c0; }
.metric-badge.metric-opened { background: #e8f5e9; color: #2e7d32; }
.metric-badge.metric-bounced { background: #fce4ec; color: #c62828; }

.rate-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.rate-badge.rate-good { background: #e8f5e9; color: #2e7d32; }
.rate-badge.rate-mid { background: #fff8e1; color: #f57f17; }
.rate-badge.rate-low { background: #fce4ec; color: #c62828; }

.campaign-link { font-weight: 600; color: var(--color-primary); text-decoration: none; transition: color .2s; }
.campaign-link:hover { color: var(--color-primary-dark); text-decoration: underline; }

.action-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 6px; font-size: .75rem; font-weight: 600; color: var(--color-primary); background: #e9f7ee; text-decoration: none; border: 1px solid #c3e6cb; transition: all .15s; }
.action-link:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20,178,74,.2); }
.action-link i { font-size: .875rem; }

@media (max-width: 767px) {
    .iterable-kpi-card .card-body { padding: 16px; gap: 14px; }
    .kpi-icon-wrap { width: 44px; height: 44px; }
    .kpi-icon-wrap i { font-size: 1.25rem; }
    .kpi-content h3 { font-size: 1.375rem; }
    .iterable-table thead th,
    .iterable-table tbody td { padding: 10px 12px; }
}

.disabled-btn {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #999;
}

/* Response List (Search Autocomplete) */
.response_list {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0 0 5px 5px;
    border-top: 0;
    box-shadow: 0 0 3px #d9dee3;
    position: absolute;
    top: 100%;
    width: 100%;
}

.response_list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.response_list ul li {
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    padding: 5px;
}

.response_list ul li:last-child {
    border-bottom: 0 !important;
}

/* Select2 Override */
.select2-container {
    width: 100% !important;
}

#select2-tickers-results li:first-child,
.select2-results__options li:first-child {
    display: none !important;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
    margin-top: 20px;
}

.form-section-divider {
    border: none;
    border-top: 1px dashed var(--color-border);
    margin: 20px 0;
}

.form-section-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 12px;
    padding-left: 4px;
    border-left: 4px solid var(--color-primary);
    padding-left: 12px;
}

/* Modern Checkbox */
.modern-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-primary-lighter);
    border: 1px solid #e3f8ef;
    border-radius: var(--border-radius-btn);
    transition: var(--transition-normal);
    margin-top: 6px;
}

.modern-checkbox-wrapper:hover {
    background: #e3f8ef;
    border-color: var(--color-primary);
}

.modern-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.modern-checkbox-wrapper label {
    margin: 0;
    cursor: pointer;
    font-size: .875rem;
    color: var(--color-text-mid);
    font-weight: 500;
    user-select: none;
}

.modern-checkbox-wrapper input[type="checkbox"]:checked + label {
    color: var(--color-success);
    font-weight: 600;
}

/* Card Hover Effects */
.card {
    transition: var(--transition-normal);
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Other Common Badges */
.badge-metric {
    padding: 5px 12px;
    border-radius: var(--border-radius-btn);
    font-weight: 600;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.metric-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.metric-success {
    background: var(--color-success-bg);
    color: #2e7d32;
}

.metric-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.metric-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.metric-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.metric-gray {
    background: var(--color-border-light);
    color: var(--color-text-light);
}

/* ============================================ */
/*     PAGE-SPECIFIC UNIQUE STYLES             */
/* ============================================ */

/* ── membership/users ── */
.membership-info-card {
    margin-bottom: 20px;
    border: 1px solid #e7ebf0;
    border-radius: var(--border-radius-card);
    background: #fafbfe;
}
.membership-info-card .card-body {
    padding: 1.25rem 1.5rem;
}
.membership-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 14px;
}
.membership-info-title i {
    font-size: 1.25rem;
    color: var(--color-primary);
}
.membership-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.8125rem;
    color: var(--color-text);
    line-height: 1.5;
}
.membership-info-item i {
    font-size: 1rem;
    color: var(--color-primary);
    margin-top: 2px;
    flex-shrink: 0;
}
.membership-info-item strong {
    color: var(--color-heading);
}
.plan-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-heading);
}
.plan-cell i {
    font-size: 1rem;
    color: #ffa726;
}

/* ── dashboard/dashboard2 ── */

/* Dashboard-scoped global overrides */
.dashboard-page .card {
    border-radius: 12px;
    border: 1px solid #e7ebf0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}
.dashboard-page .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dashboard-page .card-header {
    background-color: #fafbfe;
    border-bottom: 1px solid #e7ebf0;
    padding: 1.25rem 1.5rem;
    border-radius: 12px 12px 0 0 !important;
}
.dashboard-page .card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2c3550;
    letter-spacing: -0.01em;
}
.dashboard-page .card-body {
    padding: 1.5rem;
}
.dashboard-page .card-footer {
    background-color: #fafbfe;
    border-top: 1px solid #e7ebf0;
    padding: 1rem 1.5rem;
}
.dashboard-page .badge {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}
.dashboard-page .bg-label-success { background-color: #e8f8f0 !important; color: #28c76f !important; }
.dashboard-page .bg-label-danger  { background-color: #ffeaea !important; color: #ea5455 !important; }
.dashboard-page .bg-label-info    { background-color: #e0f0ff !important; color: #00cfe8 !important; }
.dashboard-page .bg-label-warning { background-color: #fff4e6 !important; color: #ff9f43 !important; }
.dashboard-page .bg-label-primary { background-color: #ededff !important; color: #696cff !important; }
.dashboard-page .btn-outline-primary {
    border-width: 1.5px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
}
.dashboard-page .btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(105, 108, 255, 0.2);
}
.dashboard-page .avatar {
    border-radius: 10px;
}
.dashboard-page .avatar-initial {
    font-weight: 600;
}
.dashboard-page .rounded-circle {
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.dashboard-page figure {
    margin: 0;
    padding: 0;
}
.dashboard-page .card-body.p-0 {
    padding-top: 0 !important;
}

.stock-kpi-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    overflow: hidden;
}
.stock-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stock-kpi-card .card-body {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfe 100%);
}
.stock-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0.5rem 0;
    color: #2c3550;
}
.stock-kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8592a3;
    line-height: 1.3;
}
.stock-kpi-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}
.stock-kpi-card:hover .stock-kpi-icon-wrap {
    transform: rotate(5deg) scale(1.05);
}
.stock-kpi-icon-wrap i {
    font-size: 1.375rem;
}
.stock-kpi-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #696cff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}
.stock-kpi-link:hover {
    color: #5f61e6 !important;
    gap: 6px;
}
.stock-kpi-link::after {
    content: '→';
    font-size: 0.8125rem;
    transition: transform 0.2s ease;
}
.stock-kpi-link:hover::after {
    transform: translateX(2px);
}
.stock-trend-up {
    color: #28c76f;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.stock-trend-down {
    color: #ea5455;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.stock-trend-flat {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.75rem;
}
.stock-kpi-card .text-info.small {
    font-size: 0.75rem !important;
}
.chart-stat-box {
    background: linear-gradient(135deg, #f7f9fc 0%, #ffffff 100%);
    border: 1px solid #e7ebf0;
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.chart-stat-box:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    border-color: #696cff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(105, 108, 255, 0.1);
}
a.chart-stat-box-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
a.chart-stat-box-link:hover .chart-stat-box {
    cursor: pointer;
}
.chart-stat-box strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3550;
    display: block;
    word-break: break-word;
    line-height: 1.3;
}
.chart-stat-box small {
    font-size: 0.7rem;
    font-weight: 600;
    color: #8592a3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-top: 0.5rem;
}
.chart-stat-box .badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}
.dashboard-header {
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e7ebf0;
}
.dashboard-header h4 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3550;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.dashboard-header p {
    font-size: 0.9375rem;
    color: #8592a3;
    margin-bottom: 0;
}
.section-gap {
    margin-top: 2rem;
}
.user-registration-card .card-header,
.inactive-users-card .card-header,
.stocks-exchange-card .card-header {
    padding-bottom: 1.5rem;
    margin-bottom: 0.5rem;
}
.user-registration-card .card-body,
.inactive-users-card .card-body,
.stocks-exchange-card .card-body {
    padding-top: 2rem;
}
.stock-table {
    font-size: 0.875rem;
}
.stock-table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e7ebf0;
}
.stock-table th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: #8592a3;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem;
    border-bottom: none;
}
.stock-table td {
    vertical-align: middle;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f3f5;
    color: #5e6278;
}
.stock-table tbody tr {
    transition: all 0.2s ease;
}
.stock-table tbody tr:hover {
    background-color: #f9fafb;
}
.stock-table tbody tr:last-child td {
    border-bottom: none;
}
.stock-symbol-cell {
    font-weight: 700;
    color: #2c3550;
    font-size: 0.9375rem;
}
.activity-item {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #e7ebf0;
    transition: all 0.2s ease;
    position: relative;
}
.activity-item:hover {
    background-color: #f9fafb;
    border-left: 3px solid #696cff;
    padding-left: calc(0.75rem - 3px);
}
.activity-section:last-child .activity-item:last-child {
    border-bottom: none;
}
.activity-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}
.activity-icon.user { background: #e7f5ff; color: #1971c2; }
.activity-icon.watchlist { background: #fff3e0; color: #e65100; }
.activity-icon.alert { background: #ffe7e7; color: #c92a2a; }
.activity-icon.membership { background: #f3e5f5; color: #7b1fa2; }
.activity-icon.trade { background: #e8f5e9; color: #2e7d32; }
.activity-icon.trade .bx-trending-down { color: #d32f2f; }
.activity-content {
    flex: 1;
    min-width: 0;
}
.activity-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 3px;
    line-height: 1.4;
}
.activity-description {
    font-size: 0.8125rem;
    color: #5a6376;
    margin-bottom: 4px;
    line-height: 1.4;
    font-weight: 500;
}
.activity-time {
    font-size: 0.75rem;
    color: #a0a9b5;
    font-weight: 600;
}
.activity-badge {
    font-size: 0.6875rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
}
.activity-subtitle {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 1px;
    line-height: 1.3;
}
.alert-card {
    border: 1px solid #e7ebf0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: all 0.2s ease;
}
.alert-card:hover {
    border-color: #696cff;
    box-shadow: 0 3px 10px rgba(105, 108, 255, 0.12);
    transform: translateY(-1px);
}
.alert-card:last-child {
    margin-bottom: 0;
}
.alert-user-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f2f5;
}
.alert-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e7ebf0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    background: #f5f5f9;
}
.alert-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.alert-user-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.alert-user-info {
    flex: 1;
    min-width: 0;
}
.alert-user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 3px;
    line-height: 1.3;
}
.alert-user-contact {
    font-size: 0.6875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.4;
}
.alert-user-contact span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.alert-user-contact i {
    font-size: 0.6875rem;
    vertical-align: middle;
    line-height: 1;
}
.alert-stock-section {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.alert-stock-logo {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: contain;
    background: #f9fafb;
    border: 1px solid #e7ebf0;
    padding: 4px;
}
.alert-forex-flags {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    background: #f9fafb;
    border: 1px solid #e7ebf0;
    padding: 4px;
    overflow: hidden;
}
.alert-forex-flags img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}
.alert-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #f0f2f5;
    color: #6b7280;
}
.alert-stock-info {
    flex: 1;
    min-width: 0;
}
.alert-stock-symbol {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.alert-stock-details {
    font-size: 0.75rem;
    color: #5a6376;
    line-height: 1.5;
}
.dashboard-header ~ .row .alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}
.dashboard-header ~ .row .alert-badge i {
    font-size: 0.625rem;
}
.dashboard-header ~ .row .alert-badge.above {
    background: #d1fae5;
    color: #065f46;
}
.dashboard-header ~ .row .alert-badge.below {
    background: #fee2e2;
    color: #991b1b;
}
.dashboard-header ~ .row .alert-badge.sentiment {
    background: #dbeafe;
    color: #1e40af;
}
.dashboard-header ~ .row .alert-badge.mention {
    background: #fef3c7;
    color: #92400e;
}
.alert-timestamp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f5;
}
.alert-time {
    font-size: 0.6875rem;
    color: #9ca3af;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.alert-icon {
    font-size: 0.75rem;
    opacity: 0.7;
}
#userRegistrationChart {
    min-height: 300px;
    width: 100%;
    display: block;
}
.user-registration-card figure {
    margin-bottom: 0 !important;
}
.chart-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    background-color: #fafbfe;
    border-radius: 8px;
    margin-top: 1rem;
}
.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5e6278;
}
.chart-legend-item i {
    font-size: 10px;
}
.user-registration-chart-filters .btn,
.revenue-chart-filters .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.65rem;
    padding: 0.25rem 0.6rem;
    letter-spacing: 0.03em;
    border-color: #c5c5c5;
    color: #888;
}
.user-registration-chart-filters .btn.active,
.revenue-chart-filters .btn.active {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
    box-shadow: none;
}
.user-registration-chart-filters .btn:hover:not(.active),
.revenue-chart-filters .btn:hover:not(.active) {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}
.exchange-item {
    background-color: #ffffff;
    border: 1.5px solid #e7ebf0;
    border-radius: 10px;
    padding: 0.875rem;
    transition: all 0.3s ease;
}
.exchange-item:hover {
    border-color: #696cff;
    background-color: #fafbfe;
    box-shadow: 0 2px 8px rgba(105, 108, 255, 0.1);
}
.exchange-item h6 {
    font-weight: 700;
    color: #2c3550;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}
.min-h-100 { min-height: 80px; }
.min-h-200 { min-height: 200px; }
.min-h-300 { min-height: 300px; }

/* ── Shared utility classes ── */
.actions-cell { text-align: center; white-space: nowrap; }
.user-actions-row { display: inline-flex; align-items: center; gap: 6px; }

.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.collapsible-header i:last-child { transition: transform 0.3s ease; }
.collapsible-header.collapsed i:last-child { transform: rotate(180deg); }

.highlighted-tag {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
}

.form_error_msg { display: block; margin-top: 6px; font-size: 12px; }

.noti-btn-group { display: flex; flex-direction: column; gap: 4px; }
.noti-btn-group .btn { font-size: .6875rem; padding: 4px 12px; border-radius: 6px; font-weight: 600; margin: 0 !important; }


/* ── blogs/form ── */
.slug-display {
    font-size: 13px;
    color: #6b7280;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 4px;
    margin-top: 6px;
    display: inline-block;
}

/* ── blogs/list ── */
.blog-title-cell .blog-title-link { display: block; font-weight: 600; color: #384551; text-decoration: none; line-height: 1.45; margin-bottom: 6px; transition: color .15s; }
.blog-title-cell .blog-title-link:hover { color: #14b24a; }
.blog-feedback-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.blog-thumb { width: 70px; height: 45px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.home-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.home-checkbox-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; transition: background .15s; }
.home-checkbox-item:hover { background: #f8f9fa; }
.home-checkbox-item .form-check-input { margin: 0; cursor: pointer; }
.home-checkbox-item label { font-size: .75rem; color: #697a8d; margin: 0; cursor: pointer; }
.blog-title-cell .noti-info { font-size: .75rem; }

/* ── braze/notifications/form ── */
.braze-form-card .image-upload-wrapper { position: relative; }
.braze-form-card .image-upload-wrapper .current-image { margin-top: 12px; }
.braze-form-card .image-upload-wrapper .current-image img { max-width: 200px; max-height: 120px; border-radius: 8px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.braze-form-card .search-wrapper { position: relative; }
.braze-form-card .search-wrapper .response_list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e7e7e8; border-radius: 8px; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 1000; margin-top: 4px; display: none; }
.braze-form-card .search-wrapper .response_list a { display: block; padding: 10px 14px; color: #384551; text-decoration: none; transition: all .2s; border-bottom: 1px solid #f3f4f6; }
.braze-form-card .search-wrapper .response_list a:last-child { border-bottom: none; }
.braze-form-card .search-wrapper .response_list a:hover { background: #f8fdf9; color: #14b24a; }

/* ── braze/notifications/list ── */
.bn-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.bn-subject { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.bn-description { color: #566a7f; font-size: .8125rem; line-height: 1.5; }
.bn-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.bn-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.bn-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }
.bn-report-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3e0; color: #e65100; text-decoration: none; border: 1px solid #ffe0b2; transition: all .15s; }
.bn-report-btn:hover { background: #ffe0b2; color: #bf360c; border-color: #ffcc80; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(230,81,0,.15); }
.bn-report-btn i { font-size: .875rem; }

/* ── exchanges/list ── */
.exchange-info-cell { display: flex; gap: 14px; align-items: center; }
.exchange-logo { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.1); overflow: hidden; background: #fff; border: 1px solid #e7e7e8; }
.exchange-logo img { width: 100%; height: 100%; object-fit: cover; }
.exchange-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.exchange-name { font-weight: 600; color: #384551; display: block; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.exchange-name:hover { color: #14b24a; text-decoration: none; }
.exchange-menu-title { font-size: .75rem; color: #8592a3; }

/* ── faqs/list ── */
.question-cell { max-width: 400px; font-weight: 600; color: #384551; line-height: 1.4; }
.answer-cell { max-width: 500px; color: #566a7f; line-height: 1.6; }

/* ── in-app-message/list ── */
.message-title { font-weight: 600; color: #384551; font-size: .9375rem; line-height: 1.4; }
.message-image { width: 80px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid #e7e7e8; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.stat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.stat-badge.views { background: #e0f3ff; color: #0068a8; }
.stat-badge.clicks { background: #fff3e0; color: #bf6b00; }
.stat-badge i { font-size: .875rem; }

/* ── in-app-notification/list ── */
.notification-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.notification-title { font-weight: 600; color: #384551; font-size: .875rem; display: flex; align-items: center; }
.notification-title i { margin-right: 8px; color: #14b24a; }
.notification-title[title] { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.notification-stat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 600; background: #f0f0f0; color: #566a7f; }
.notification-stat-badge.views { background: #e3f2fd; color: #1565c0; }
.notification-stat-badge.clicks { background: #f3e5f5; color: #6a1b9a; }
.notification-stat-badge i { font-size: 1rem; }
.notification-date { font-size: .8125rem; color: #8592a3; font-weight: 500; }

/* ── industries/list ── */
.industry-info-cell { display: flex; gap: 14px; align-items: center; }
.industry-logo { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.1); overflow: hidden; background: #fff; border: 1px solid #e7e7e8; }
.industry-logo img { width: 100%; height: 100%; object-fit: cover; }
.industry-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.industry-name { font-weight: 600; color: #384551; display: block; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.industry-name:hover { color: #14b24a; text-decoration: none; }
.industry-slug { font-size: .75rem; color: #8592a3; font-family: monospace; background: #f1f3f5; padding: 2px 8px; border-radius: 4px; display: inline-block; }

/* ── iterable/notifications/list ── */
.in-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.in-subject { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.in-description { color: #566a7f; font-size: .8125rem; line-height: 1.5; max-width: 220px; }
.in-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.in-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.in-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }
.in-recipients-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e9f7ee; color: #14b24a; text-decoration: none; border: 1px solid #c3e6cb; transition: all .15s; }
.in-recipients-btn:hover { background: #14b24a; color: #fff; border-color: #14b24a; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20,178,74,.2); }
.in-recipients-btn i { font-size: .875rem; }

/* ── iterable/notifications/notification-recipients ── */
.iterrecip-kpi-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: all .2s ease; }
.iterrecip-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.iterrecip-kpi-card .card-body { display: flex; align-items: center; gap: 20px; padding: 24px; }
.recip-kpi-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recip-kpi-icon i { font-size: 1.5rem; color: #fff; }
.recip-kpi-icon.recip-kpi-sent { background: linear-gradient(135deg, #3b7ddd, #2a5fb5); }
.recip-kpi-icon.recip-kpi-opened { background: linear-gradient(135deg, #14b24a, #0d8c3a); }
.recip-kpi-icon.recip-kpi-notopened { background: linear-gradient(135deg, #e53935, #c62828); }
.recip-kpi-icon.recip-kpi-rate { background: linear-gradient(135deg, #ff9800, #e65100); }
.recip-kpi-content { flex: 1; }
.recip-kpi-content small { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #8592a3; display: block; margin-bottom: 4px; }
.recip-kpi-content h3 { font-size: 1.625rem; font-weight: 700; color: #384551; margin: 0; line-height: 1.2; }
.recip-kpi-sub { font-size: .8125rem; color: #8592a3; }
.iterrecip-table-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden; }
.iterrecip-table-card .card-header { background: #f8f9fa; border-bottom: 2px solid #e9ecef; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.recip-table-header-left h5 { font-size: 1rem; font-weight: 700; color: #384551; margin: 0 0 4px 0; display: flex; align-items: center; gap: 8px; }
.recip-table-header-left h5 i { font-size: 1.25rem; color: #14b24a; }
.recip-showing { font-size: .8125rem; color: #8592a3; }
.recip-table-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recip-filters { display: flex; gap: 6px; }
.recip-filter-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 6px; font-size: .75rem; font-weight: 600; text-decoration: none; border: 1px solid #d9dee3; color: #697a8d; background: #fff; transition: all .15s; }
.recip-filter-btn:hover { background: #f8f9fa; color: #566a7f; border-color: #c4cdd5; }
.recip-filter-btn.active-all { background: #14b24a; color: #fff; border-color: #14b24a; }
.recip-filter-btn.active-opened { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.recip-filter-btn.active-notopened { background: #c62828; color: #fff; border-color: #c62828; }
.recip-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff; color: #697a8d; border: 1px solid #d9dee3; cursor: pointer; transition: all .15s; }
.recip-export-btn:hover { background: #f8f9fa; color: #566a7f; border-color: #c4cdd5; }
.recip-export-btn i { font-size: .875rem; }
.recip-table { width: 100%; margin: 0; }
.recip-table thead { background: #f8f9fa; position: sticky; top: 0; z-index: 1; }
.recip-table thead th { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #8592a3; padding: 14px 16px; border-bottom: 2px solid #e9ecef; white-space: nowrap; }
.recip-table tbody td { padding: 14px 16px; font-size: .8125rem; color: #566a7f; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.recip-table tbody tr { transition: background .2s ease; }
.recip-table tbody tr:hover { background: #f8fdf9; }
.recip-table tbody tr:last-child td { border-bottom: none; }
.recip-row-num { font-weight: 600; color: #8592a3; font-size: .8125rem; }
.recip-name { font-weight: 600; color: #384551; }
.recip-email { color: #566a7f; }
.recip-phone { color: #8592a3; }
.recip-id { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .75rem; color: #8592a3; letter-spacing: .3px; }
.recip-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f0f2f5; color: #566a7f; }
.recip-tag i { font-size: .875rem; color: #8592a3; }
.recip-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.recip-status-badge i { font-size: .875rem; }
.recip-status-badge.recip-opened { background: #e8f5e9; color: #2e7d32; }
.recip-status-badge.recip-notopened { background: #fce4ec; color: #c62828; }
.recip-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-top: 1px solid #e9ecef; }
.recip-footer-info { font-size: .8125rem; color: #8592a3; }

/* ── news/list ── */
.news-title-cell .news-title-link { display: block; font-weight: 600; color: #384551; text-decoration: none; line-height: 1.45; margin-bottom: 6px; transition: color .15s; }
.news-title-cell .news-title-link:hover { color: #14b24a; }
.news-feedback-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.news-meta-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: .8125rem; color: #8592a3; }
.news-meta-info a { color: #14b24a; font-weight: 500; text-decoration: none; transition: color .15s; }
.news-meta-info a:hover { color: #0f8a39; text-decoration: underline; }
.news-meta-info .meta-dot { width: 4px; height: 4px; border-radius: 50%; background: #c4cdd5; display: inline-block; }
.news-title-cell .noti-info { font-size: .75rem; }

/* ── notification/list ── */
.noti-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.noti-subject { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.noti-description { color: #566a7f; font-size: .8125rem; line-height: 1.5; }
.noti-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.noti-users-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
.noti-users-badge i { font-size: 1rem; }
.noti-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.noti-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }
.noti-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3e0; color: #e65100; text-decoration: none; border: 1px solid #ffe0b2; transition: all .15s; }
.noti-action-btn:hover { background: #ffe0b2; color: #bf360c; border-color: #ffcc80; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(230,81,0,.15); }
.noti-action-btn i { font-size: .875rem; }
.badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: .6875rem; font-weight: 700; border-radius: 10px; background: rgba(255,255,255,.3); line-height: 1; }

/* ── notification/setting + in-app-notification/setting ── */
.active-users-toggle { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff3e0; border: 1px solid #ffe0b2; border-radius: 10px; transition: all .2s ease; margin-bottom: 24px; }
.active-users-toggle:hover { background: #ffe0b2; border-color: #ffcc80; }
.active-users-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #ff9800; }
.active-users-toggle label { margin: 0; cursor: pointer; font-size: .875rem; color: #e65100; font-weight: 600; user-select: none; flex: 1; }
.active-users-toggle .toggle-icon { font-size: 1.5rem; color: #ff9800; }
.section-title { font-size: .9375rem; font-weight: 700; color: #384551; margin-bottom: 16px; border-left: 4px solid #14b24a; padding-left: 12px; }
.user-type-grid { display: grid; gap: 16px; }
.user-type-option { position: relative; border: 2px solid #e7e7e8; border-radius: 10px; padding: 16px 20px; transition: all .2s ease; cursor: pointer; background: #fff; display: flex; align-items: center; gap: 16px; }
.user-type-option:hover { border-color: #14b24a; background: #f8fdf9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,178,74,.15); }
.user-type-option.selected { border-color: #14b24a; background: #e3f8ef; }
.user-type-option input[type="radio"] { width: 20px; height: 20px; cursor: pointer; accent-color: #14b24a; flex-shrink: 0; }
.user-type-option .option-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.user-type-option .option-label { font-size: .875rem; font-weight: 600; color: #384551; display: flex; align-items: center; gap: 8px; }
.user-type-option.selected .option-label { color: #087443; }
.user-type-option .option-description { font-size: .75rem; color: #8592a3; line-height: 1.4; }
.user-type-option .user-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; padding: 6px 14px; border-radius: 8px; background: #14b24a; color: #fff; font-size: .875rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 6px rgba(20,178,74,.25); }
.user-type-option.selected .user-count-badge { background: #087443; }
.custom-email-section { margin-top: 16px; padding: 20px; background: #f8f9fa; border: 1px solid #e7e7e8; border-radius: 10px; }
.custom-email-section label { font-size: .8125rem; font-weight: 600; color: #384551; margin-bottom: 8px; display: block; }
.custom-email-section label.req::after { content: " *"; color: #d32f2f; font-weight: 700; }
.custom-email-section .help-text { font-size: .75rem; color: #8592a3; margin-left: 4px; }
.custom-email-section textarea { border-radius: 8px; border: 1px solid #e7e7e8; font-size: .8125rem; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; min-height: 100px; resize: vertical; }
.custom-email-section textarea:focus { border-color: #14b24a; box-shadow: 0 0 0 3px rgba(20,178,74,.12); outline: none; }
.custom-email-section .text-danger { font-size: .75rem; color: #d32f2f; margin-top: 6px; display: block; font-weight: 500; }

/* ── notificationlog/list ── */
.log-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.log-user-info { display: flex; flex-direction: column; gap: 4px; }
.log-user-name { font-weight: 600; color: #384551; font-size: .875rem; }
.log-user-email { font-size: .75rem; color: #8592a3; display: flex; align-items: center; gap: 4px; }
.log-user-email i { font-size: .875rem; color: #14b24a; }
.log-title { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.log-message { color: #566a7f; font-size: .8125rem; line-height: 1.5; }
.log-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.log-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }

/* ── notificationlog/web_notification_list ── */
.weblog-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.weblog-title-link { font-weight: 600; color: #384551; font-size: .875rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.weblog-title-link:hover { color: #14b24a; text-decoration: none; }
.weblog-title-link i { font-size: 1rem; color: #14b24a; }
.weblog-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e3f2fd; color: #1565c0; text-transform: capitalize; }
.weblog-type-badge i { font-size: .875rem; }
.weblog-users-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
.weblog-users-badge i { font-size: 1rem; }
.weblog-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; }
.weblog-status-badge.sent { background: #e3f8ef; color: #087443; }
.weblog-status-badge.sending { background: #ffe9e5; color: #d32f2f; }
.weblog-status-badge i { font-size: .875rem; }
.weblog-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.weblog-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }

/* ── sectors/list ── */
.sector-info-cell { display: flex; gap: 14px; align-items: center; }
.sector-image { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); overflow: hidden; background: #f1f3f5; }
.sector-image img { width: 100%; height: 100%; object-fit: cover; }
.sector-image i { font-size: 2rem; color: #c4cdd5; }
.sector-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sector-name { font-weight: 600; color: #384551; display: block; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.sector-name:hover { color: #14b24a; text-decoration: none; }
.sector-slug { font-size: .75rem; color: #8592a3; font-family: monospace; }
.sector-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.sector-badge.has-image { background: #e3f8ef; color: #087443; }
.sector-badge.no-image { background: #f1f3f5; color: #697a8d; }
.sector-badge i { font-size: .875rem; }

/* ── sms/form ── */
.ticker-search-wrapper { position: relative; }
.ticker-search-wrapper .ticker-search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #b4bdc6; font-size: 1.1rem; pointer-events: none; }
.ticker-search-wrapper .form-control { padding-right: 38px; }
.ticker-search-wrapper .response_list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); border: 1px solid #e7e7e8; border-top: none; border-radius: 0 0 8px 8px; max-height: 300px; overflow-y: auto; z-index: 1000; display: none; }
.ticker-search-wrapper .response_list ul { list-style: none; padding: 0; margin: 0; }
.ticker-search-wrapper .response_list ul li { padding: 10px 16px; border-bottom: 1px solid #f1f3f5; cursor: pointer; transition: background 0.2s; font-size: 0.875rem; color: #566a7f; }
.ticker-search-wrapper .response_list ul li:hover { background: #f8fdf9; color: #14b24a; }
.ticker-search-wrapper .response_list ul li:last-child { border-bottom: none; }

/* ── sms/list ── */
.sms-message-cell { display: flex; align-items: flex-start; }
.message-content-wrapper { flex: 1; min-width: 0; }
.message-text-content { color: #566a7f; font-size: 14px; line-height: 1.5; margin-bottom: 6px; word-wrap: break-word; }
.message-ticker-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #e7e7ff; color: #696cff; border-radius: 4px; font-size: 11px; font-weight: 500; }
.message-ticker-badge i { font-size: 13px; }

/* ── sms/crons ── */
.cron-name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #384551; font-size: .875rem; }
.cron-name i { font-size: 1.125rem; color: #14b24a; }
.cron-description { font-size: .8125rem; color: #566a7f; line-height: 1.5; }
.cron-template { font-size: .8125rem; color: #384551; background: #f8f9fa; padding: 8px 12px; border-radius: 6px; font-family: 'Courier New', monospace; border-left: 3px solid #14b24a; }
.status-badge.status-sent { background: #e3f8ef; color: #087443; }
.status-badge.status-pending { background: #fff4e5; color: #bf6b00; }

/* ── sms/log ── */
.phone-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #384551; font-size: .875rem; }
.phone-cell i { font-size: 1.125rem; color: #14b24a; }
.time-cell { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: #566a7f; white-space: nowrap; }
.time-cell i { font-size: 1rem; color: #14b24a; }

/* ── temp-users/list ── */
.device-id-cell { font-family: 'Courier New', monospace; font-size: .75rem; color: #566a7f; line-height: 1.6; }
.device-id-text { display: block; margin-bottom: 6px; color: #697a8d; }
.build-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: .6875rem; font-weight: 600; background: #f1f3f5; color: #697a8d; }
.platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.platform-badge.ios { background: #e0f3ff; color: #0068a8; }
.platform-badge.android { background: #e8f5e9; color: #2e7d32; }
.platform-badge i { font-size: .875rem; }
.location-cell { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: #566a7f; }
.location-cell i { color: #14b24a; font-size: .875rem; flex-shrink: 0; }

/* ── temp-users/web-user-list ── */
.web-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; background: #e0f3ff; color: #0068a8; }
.web-badge i { font-size: .875rem; }

/* ── tickers/list ── */
.last-update-info { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: 20px; background: #f8f9fa; border-radius: 10px; font-size: .8125rem; color: #566a7f; border-left: 3px solid #14b24a; }
.last-update-info i { font-size: 1.125rem; color: #14b24a; }
.last-update-info strong { color: #384551; font-weight: 600; }
.last-update-info .separator { color: #c4cdd5; margin: 0 4px; }
.views-cell { text-align: center; }

/* ── tickers/mismatch_exchange_tickers ── */
.ticker-symbol-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #e3f8ef; color: #087443; font-size: .8125rem; font-weight: 700; }
.ticker-symbol-badge i { font-size: 1rem; color: #14b24a; }
.converted-status { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.converted-status.yes { background: #e3f8ef; color: #087443; }
.converted-status.no { background: #ffebee; color: #d32f2f; }
.converted-status i { font-size: .875rem; }
.exchange-badge.fmp { background: #e7f5ff; color: #0068a8; }
.exchange-badge.quodd { background: #fff3e0; color: #c77700; }

/* ── tickers/streaming_tickers ── */
.streaming-tickers-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 24px; }
.streaming-tickers-card .card-header { background: #f8f9fa; border-bottom: 2px solid #e9ecef; padding: 14px 24px; border-radius: 12px 12px 0 0; }
.streaming-tickers-card .card-header h5 { font-size: 1rem; font-weight: 700; color: #384551; margin: 0; display: flex; align-items: center; gap: 8px; }
.streaming-tickers-card .card-header h5 i { font-size: 1.25rem; color: #14b24a; }
.streaming-tickers-table { margin: 0; }
.streaming-tickers-table thead th { font-size: .8125rem; font-weight: 700; color: #384551; background: #f8f9fa; text-transform: uppercase; letter-spacing: .03em; padding: 12px 16px; border-bottom: 2px solid #e9ecef; }
.streaming-tickers-table tbody td { padding: 16px; vertical-align: top; border-bottom: 1px solid #f3f4f6; font-size: .875rem; color: #566a7f; }
.streaming-tickers-table tbody tr:hover { background: #f8fdf9; }
.streaming-tickers-table tbody tr:last-child td { border-bottom: none; }
.ticker-info-block { display: flex; flex-direction: column; gap: 6px; }
.ticker-name { font-size: .875rem; color: #384551; font-weight: 500; line-height: 1.4; display: block; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.info-label { font-size: .75rem; color: #8592a3; font-weight: 600; min-width: 80px; }
.streaming-tickers-card .info-value { font-size: .8125rem; color: #384551; font-weight: 500; }
.price-value { color: #087443; font-weight: 700; }
.ext-hours-block { background: #f8fdf9; padding: 10px; border-radius: 8px; border: 1px solid #e3f8ef; }
.badge-status { display: inline-block; padding: 3px 10px; font-size: .6875rem; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.no-data-badge { display: inline-block; padding: 6px 16px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600; border-radius: 6px; }
.btn-update-records { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: #14b24a; color: #fff; text-decoration: none; transition: all .2s ease; border: none; width: auto !important; max-width: fit-content; flex-shrink: 0; }
.btn-update-records:hover { background: #12a043; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(20,178,74,.2); }
.btn-update-records i { font-size: 1rem; }

/* ── users/onesignal-notifications ── */
.metrics-info-title { font-size: .875rem; font-weight: 600; color: #384551; margin-bottom: 16px; display: flex; align-items: center; }
.metrics-info-title i { margin-right: 8px; color: #14b24a; font-size: 1.125rem; }
.metric-item { display: flex; align-items: start; margin-bottom: 12px; font-size: .8125rem; color: #566a7f; }
.metric-item:last-child { margin-bottom: 0; }
.metric-item i { margin-right: 10px; margin-top: 2px; color: #14b24a; font-size: .875rem; flex-shrink: 0; }
.metric-item strong { color: #384551; font-weight: 600; }
.total-badge { background: #e3f8ef; color: #14b24a; font-weight: 600; padding: 5px 12px; border-radius: 8px; font-size: .75rem; }

/* ── users/show ── */
.user-details-page-header .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; order: 2; }
.btn-update-json { display: inline-flex !important; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: #14b24a; color: #fff; text-decoration: none; transition: all .2s ease; border: none; white-space: nowrap; }
.btn-update-json:hover { background: #12a043; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(20,178,74,.2); }
.btn-update-json i { font-size: .9rem; }
.btn-edit-user { display: inline-flex !important; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: #ff9800; color: #fff; text-decoration: none; transition: all .2s ease; border: none; white-space: nowrap; }
.btn-edit-user:hover { background: #f57c00; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(255,152,0,.25); }
.btn-edit-user i { font-size: .9rem; }
.profile-center { text-align: center; }
.profile-avatar-wrapper { position: relative; display: inline-block; margin-bottom: 16px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #e9ecef; }
.profile-avatar-placeholder { width: 100px; height: 100px; border-radius: 50%; background: #6c757d; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.5rem; font-weight: 700; border: 3px solid #e9ecef; }
.profile-status-badge { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; background: #14b24a; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.profile-status-badge i { font-size: 10px; color: #fff; }
.profile-name { font-size: 1.25rem; font-weight: 700; color: #384551; margin: 0 0 4px 0; }
.profile-email { font-size: .875rem; color: #8592a3; margin: 0 0 8px 0; }
.profile-phone { font-size: .875rem; color: #566a7f; margin: 0 0 16px 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.profile-phone i { font-size: 1rem; color: #14b24a; }
.profile-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.badge-verified { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #d4edda; color: #155724; }
.badge-unverified { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3cd; color: #856404; }
.badge-premium { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #ffeaa7; color: #d63031; }
.badge-normal { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e9ecef; color: #566a7f; }
.badge-active { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #d4edda; color: #155724; }
.badge-inactive { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f8d7da; color: #721c24; }
.badge-canceled { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3cd; color: #856404; }
.badge-expired { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f8d7da; color: #721c24; }
.badge-pending { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3cd; color: #856404; }
.badge-role { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e9ecef; color: #566a7f; }
.profile-dates { display: flex; justify-content: space-around; gap: 16px; }
.profile-date-item { flex: 1; text-align: center; }
.profile-date-item small { display: block; font-size: .75rem; color: #8592a3; margin-bottom: 4px; }
.profile-date-item div { font-size: .875rem; font-weight: 600; color: #384551; }
.info-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.info-item:last-child { border-bottom: none; }
.info-item label { font-size: .8125rem; font-weight: 600; color: #8592a3; min-width: 120px; margin: 0; flex-shrink: 0; }
.info-item .info-value { font-size: .875rem; color: #384551; flex: 1; padding-left: 12px; border-left: 2px solid #e9ecef; word-break: break-word; }
.info-item .info-value.mono { font-family: monospace; font-size: .8125rem; }
.info-item .info-value.small { font-size: .75rem; }
.table-section { border-top: 1px solid #e9ecef; padding-top: 20px; margin-top: 20px; }
.table-section-title { font-size: .9375rem; font-weight: 700; color: #384551; margin-bottom: 12px; }
.table-wrapper { max-height: 400px; overflow-y: auto; border-radius: 8px; border: 1px solid #e9ecef; }
.empty-state { text-align: center; padding: 40px 20px; color: #8592a3; }
.empty-state i { font-size: 3rem; color: #e9ecef; margin-bottom: 12px; display: block; }
.empty-state p { font-size: .875rem; margin: 0; }

/* ============================================ */
/*              RESPONSIVE                     */
/* ============================================ */
@media (max-width: 1200px) {
    .news-editor-wrapper,
    .blog-editor-wrapper {
        flex-direction: column;
    }
    
    .news-sidebar,
    .blog-sidebar {
        flex: 1;
        min-width: 0;
    }
    
    .sticky-sidebar {
        position: static;
    }
}

@media (max-width: 991px) {
    .help-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
    
    .filters-card .card-body {
        padding: 16px;
    }
    
    .filters-flex-row {
        gap: 12px;
    }
    
    .filter-item.filter-search,
    .filter-item.filter-select,
    .filter-item.filter-date {
        flex: 1 1 calc(50% - 7px);
    }
    
    .filter-item.filter-actions {
        flex: 1 1 100%;
    }
    
    .filter-btns {
        width: 100%;
    }
    
    .filter-btns .btn-apply-filter,
    .filter-btns .btn-reset-filter {
        flex: 1;
        justify-content: center;
    }
    
    .data-table-card .table tbody td,
    .data-table-card .table thead th {
        padding: 10px 12px;
    }
    
    .form-card .card-body {
        padding: 16px;
    }
    
    .help-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .help-buttons .btn img {
        display: none;
    }
    
    .help-buttons .btn {
        padding: 5px;
        text-align: center;
    }
    
    .help-buttons .btn span {
        display: block;
    }
}

@media (max-width: 480px) {
    .filter-item.filter-search,
    .filter-item.filter-select,
    .filter-item.filter-date {
        flex: 1 1 100%;
    }
}

/* ── Page-specific responsive rules ── */
@media (max-width: 1199px) {
    .stock-kpi-value { font-size: 1.375rem; }
    .dashboard-page .card-title { font-size: 1rem; }
}

@media (max-width: 991px) {
    .iterrecip-table-card .card-header { flex-direction: column; align-items: flex-start; }
    .recip-table-header-right { width: 100%; justify-content: flex-start; }
    .user-details-page-header .header-actions { width: 100%; }
    .user-details-page-header .header-actions a { flex: 1; justify-content: center; }
    .profile-dates { flex-direction: column; gap: 8px; }
    .info-item { flex-direction: column; align-items: flex-start; padding: 12px 0; }
    .info-item label { min-width: auto; margin-bottom: 4px; }
    .info-item .info-value { padding-left: 0; border-left: none; border-top: 2px solid #e9ecef; padding-top: 8px; width: 100%; }
}

@media (max-width: 767px) {
    .stock-kpi-value { font-size: 1.25rem; }
    .stock-kpi-card .card-body { padding: 1rem 1.25rem; }
    .stock-kpi-icon-wrap { width: 38px; height: 38px; }
    .stock-kpi-icon-wrap i { font-size: 1.125rem; }
    .stock-table th, .stock-table td { padding: 0.75rem 1rem; }
    .dashboard-page .card-body { padding: 1rem; }
    .iterrecip-kpi-card .card-body { padding: 16px; gap: 14px; }
    .recip-kpi-icon { width: 42px; height: 42px; }
    .recip-kpi-icon i { font-size: 1.25rem; }
    .recip-kpi-content h3 { font-size: 1.375rem; }
    .recip-table thead th, .recip-table tbody td { padding: 10px 12px; }
    .recip-card-footer { flex-direction: column; gap: 8px; text-align: center; }
}

/* ============================================ */
/*       IMAGE EXTRACT HOLDINGS SECTION        */
/* ============================================ */
#image-extract-panel {
    margin-bottom: 24px;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#image-extract-panel.open {
    max-height: 3000px;
    opacity: 1;
}

#image-extract-panel .bulk-panel-card {
    border-left: 3px solid #8b5cf6;
}

#image-extract-panel .bulk-panel-title i {
    color: #fff;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================ */
/*       BULK ADD HOLDINGS FORM SECTION        */
/* ============================================ */
#bulk-add-panel {
    margin-bottom: 24px;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#bulk-add-panel.open {
    max-height: 2000px;
    opacity: 1;
}

.bulk-panel-card {
    border: none;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border-left: 3px solid var(--color-primary);
}

.bulk-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--color-primary-lighter) 0%, #fff 100%);
    border-bottom: 1px solid var(--color-border-light);
}

.bulk-panel-title {
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-panel-title i {
    font-size: 1.2rem;
    color: var(--color-primary);
}

.bulk-panel-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary-light);
    color: var(--color-success);
    font-size: .7rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--border-radius-pill);
    letter-spacing: .3px;
}

.bulk-panel-body {
    padding: 20px 24px;
}

.bulk-form-wrapper {
    margin-bottom: 0;
}

.bulk-table-container {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    background: var(--color-bg-gray);
}

.bulk-table-container .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 6px;
    padding: 4px 8px;
}

.bulk-table-container thead tr {
    background: transparent;
}

.bulk-table-container thead th {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8592a3;
    padding: 12px 10px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border: none;
    letter-spacing: .5px;
}

.bulk-table-container thead th span.text-danger {
    color: var(--color-danger);
    margin-left: 3px;
}

.bulk-row {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: var(--transition-normal);
}

.bulk-row:hover {
    box-shadow: 0 4px 12px rgba(20, 178, 74, .1);
}

.bulk-row td {
    padding: 12px 10px !important;
    vertical-align: middle;
    border: none;
    font-size: .8125rem;
}

.bulk-row td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    text-align: center;
    width: 45px;
}

.bulk-row td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: center;
    width: 45px;
}

.bulk-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-border-light);
    color: var(--color-text-light);
    font-size: .72rem;
    font-weight: 700;
}

.bulk-row input.form-control-sm {
    height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    font-size: .8rem;
    transition: all .2s;
    width: 100%;
    background: #fff;
}

.bulk-row input.form-control-sm:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20, 178, 74, .1);
    outline: none;
}

.bulk-row input.form-control-sm::placeholder {
    color: #c4cdd5;
    font-size: .75rem;
}

.bulk-percent-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bulk-percent-wrap input {
    padding-right: 28px !important;
}

.bulk-percent-sign {
    position: absolute;
    right: 10px;
    color: var(--color-text-lighter);
    font-size: .75rem;
    font-weight: 600;
    pointer-events: none;
}

.bulk-preview {
    display: block;
    font-size: .68rem;
    margin-top: 3px;
    padding: 0;
    font-weight: 500;
}

.bulk-preview.valid {
    color: var(--color-success);
}

.bulk-preview.invalid {
    color: var(--color-danger);
}

.bulk-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #f0d4d4;
    color: #e07070;
    cursor: pointer;
    padding: 0;
    font-size: .85rem;
    transition: var(--transition-fast);
}

.bulk-delete-btn:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
    transform: scale(1.08);
}

.bulk-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
}

.bulk-form-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--border-radius-btn);
    cursor: pointer;
    transition: var(--transition-normal);
    border: 1px solid transparent;
}

.bulk-form-actions .btn-add-row {
    background: #fff;
    border: 1px dashed #c4cdd5;
    color: var(--color-text-mid);
}

.bulk-form-actions .btn-add-row:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    border-style: solid;
    color: var(--color-success);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(20, 178, 74, .1);
}

.bulk-form-actions .btn-submit {
    background: var(--color-primary);
    border: none;
    color: #fff;
    box-shadow: 0 2px 4px rgba(20, 178, 74, .15);
}

.bulk-form-actions .btn-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-btn);
}

.bulk-form-actions .btn-cancel {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #697a8d;
}

.bulk-form-actions .btn-cancel:hover {
    background: var(--color-bg-gray);
    border-color: #c4cdd5;
    color: var(--color-text-dark);
    transform: translateY(-1px);
}

.input-group-text {
    font-size: .7rem;
    background: var(--color-bg-gray);
    border: 1px solid var(--color-border);
    color: #8592a3;
}

/* ============================================ */
/*    BULK FORM RESPONSIVE DESIGN              */
/* ============================================ */
@media (max-width: 1024px) {
    .bulk-table-container thead th {
        padding: 10px 8px;
        font-size: .6rem;
    }
    .bulk-row td {
        padding: 10px 8px !important;
        font-size: .75rem;
    }
    .bulk-panel-body {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .bulk-panel-header {
        padding: 14px 16px;
    }
    .bulk-panel-title {
        font-size: .9rem;
    }
    .bulk-panel-body {
        padding: 14px 16px;
    }
    .bulk-table-container {
        border-radius: 8px;
    }
    .bulk-table-container .table {
        padding: 2px 4px;
    }
    .bulk-row input.form-control-sm {
        height: 34px;
        font-size: .7rem;
        padding: 6px 10px;
    }
    .bulk-row td {
        padding: 8px 6px !important;
        font-size: .7rem;
    }
    .bulk-form-actions {
        gap: 6px;
        margin-top: 14px;
        padding-top: 12px;
    }
    .bulk-form-actions button {
        padding: 8px 14px;
        font-size: .75rem;
    }
}

/* ============================================ */
/* Source: resources\views\admin\tickers\streaming_tickers.blade.php */
/* ============================================ */
.streaming-tickers-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
    .streaming-tickers-page-header > div { flex:1; min-width:0; }
    .streaming-tickers-page-header h4 { font-size:1.375rem; font-weight:700; color:#384551; margin:0 0 4px 0; }
    .streaming-tickers-page-header .btn-update-records { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:8px; font-size:.875rem; font-weight:600; background:#14b24a; color:#fff; text-decoration:none; transition:all .2s ease; border:none; width:auto !important; max-width:fit-content; flex-shrink:0; }
    .streaming-tickers-page-header .btn-update-records:hover { background:#12a043; color:#fff; transform:translateY(-1px); box-shadow:0 4px 8px rgba(20,178,74,.2); }
    .streaming-tickers-page-header .btn-update-records i { font-size:1rem; }
    .streaming-tickers-meta-desc { font-size:.875rem; color:#8592a3; margin-top:4px; margin-bottom:0; }
    .streaming-tickers-meta-desc a { color:#14b24a; text-decoration:none; }
    .streaming-tickers-meta-desc a:hover { text-decoration:underline; }

.streaming-tickers-card { border:none; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:24px; }
    .streaming-tickers-card .card-header { background:#f8f9fa; border-bottom:2px solid #e9ecef; padding:14px 24px; border-radius:12px 12px 0 0; }
    .streaming-tickers-card .card-header h5 { font-size:1rem; font-weight:700; color:#384551; margin:0; display:flex; align-items:center; gap:8px; }
    .streaming-tickers-card .card-header h5 i { font-size:1.25rem; color:#14b24a; }

.streaming-tickers-table { margin:0; }
    .streaming-tickers-table thead th { font-size:.8125rem; font-weight:700; color:#384551; background:#f8f9fa; text-transform:uppercase; letter-spacing:.03em; padding:12px 16px; border-bottom:2px solid #e9ecef; }
    .streaming-tickers-table tbody td { padding:16px; vertical-align:top; border-bottom:1px solid #f3f4f6; font-size:.875rem; color:#566a7f; }
    .streaming-tickers-table tbody tr:hover { background:#f8fdf9; }
    .streaming-tickers-table tbody tr:last-child td { border-bottom:none; }

    .ticker-symbol { display:inline-block; padding:4px 10px; background:#e3f8ef; color:#087443; font-weight:700; font-size:.875rem; border-radius:6px; font-family:monospace; }
    .ticker-name { font-size:.875rem; color:#384551; font-weight:500; line-height:1.4; display:block; }
    
    .ticker-info-block { display:flex; flex-direction:column; gap:6px; }
    .info-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0; }
    .info-label { font-size:.75rem; color:#8592a3; font-weight:600; min-width:80px; }
    .info-value { font-size:.8125rem; color:#384551; font-weight:500; }
    .price-value { color:#087443; font-weight:700; }
    .change-positive { color:#22c55e; font-weight:700; }
    .change-negative { color:#ef4444; font-weight:700; }
    
    .badge-status { display:inline-block; padding:3px 10px; font-size:.6875rem; font-weight:700; border-radius:4px; text-transform:uppercase; letter-spacing:.03em; }
    .badge-active { background:#dcfce7; color:#166534; }
    .badge-inactive { background:#fee2e2; color:#991b1b; }
    
    .ext-hours-block { background:#f8fdf9; padding:10px; border-radius:8px; border:1px solid #e3f8ef; }
    
    .no-data-badge { display:inline-block; padding:6px 16px; background:#fef3c7; color:#92400e; font-size:.75rem; font-weight:600; border-radius:6px; }
    
    .empty-state { padding:40px 20px !important; text-align:center; }
    .empty-state i { font-size:3rem; color:#d1d5db; display:block; margin-bottom:12px; }
    .empty-state p { font-size:.875rem; color:#8592a3; margin:0; }

@media (max-width:767px) {
    .streaming-tickers-page-header { flex-direction:column; align-items:flex-start; }
    .streaming-tickers-page-header .btn-update-records { width:100%; justify-content:center; }
    .streaming-tickers-table { font-size:.75rem; }
    .streaming-tickers-table thead th,
    .streaming-tickers-table tbody td { padding:10px 8px; }
    .ticker-info-block { font-size:.7rem; }
}

/* ============================================ */
/* Global Responsive Fixes for All Page Headers */
/* ============================================ */
@media (min-width:601px) {
    .message-form-page-header,
    .notification-form-page-header,
    .notification-page-header,
    .news-form-page-header,
    .braze-form-page-header,
    .user-details-page-header,
    .iterable-dash-page-header,
    .iterrecip-page-header { flex-wrap:nowrap; }
    
    /* Ensure buttons don't go full-width on desktop */
    .message-form-page-header .btn-back,
    .notification-form-page-header > .btn-back,
    .notification-page-header > .btn-add-new,
    .news-form-page-header .header-actions,
    .braze-form-page-header > .btn-back,
    .user-details-page-header .header-actions,
    .iterable-dash-page-header .btn-view-all,
    .iterrecip-page-header .btn-back-recip { width:auto !important; max-width:fit-content !important; justify-content:center !important; }
}

@media (max-width:600px) {
    .message-form-page-header,
    .notification-form-page-header,
    .notification-page-header,
    .news-form-page-header,
    .braze-form-page-header,
    .user-details-page-header,
    .iterable-dash-page-header,
    .iterrecip-page-header { flex-direction:column !important; align-items:flex-start !important; gap:12px !important; }
    
    .message-form-page-header >div,
    .notification-form-page-header > div,
    .notification-page-header > div,
    .news-form-page-header h4,
    .braze-form-page-header > div,
    .user-details-page-header > div,
    .iterable-dash-page-header > div,
    .iterrecip-page-header > div { width:100% !important; order:1 !important; flex:none !important; max-width:none !important; }
    
    .message-form-page-header .btn-back,
    .notification-form-page-header > .btn-back,
    .notification-page-header > .btn-add-new,
    .news-form-page-header .header-actions,
    .braze-form-page-header > .btn-back,
    .user-details-page-header .header-actions,
    .iterable-dash-page-header .btn-view-all,
    .iterrecip-page-header .btn-back-recip { order:2 !important; margin-top:4px; width:auto !important; }
    
    .message-form-meta-desc,
    .notification-form-meta-desc,
    .notification-meta-desc,
    .braze-form-meta-desc,
    .user-details-meta-desc,
    .iterable-dash-meta-desc,
    .iterrecip-meta-desc { margin-bottom:8px !important; }
}

/* ============================================ */
/* Source: resources\views\admin\iterable\notifications\form.blade.php */
/* ============================================ */

/* Form Card */
.iternoti-form-card { border:none; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:20px; overflow:hidden; }
    .iternoti-form-card .card-body { padding:24px; }

/* Section Header */
.iternoti-form-section-header { display:flex; align-items:center; gap:16px; padding:20px 24px; background:#f8f9fa; border-bottom:2px solid #e9ecef; }
    .iternoti-form-section-header h6 { font-size:.9375rem; font-weight:700; color:#384551; margin:0 0 2px 0; }
    .iternoti-form-section-header span { font-size:.8125rem; color:#8592a3; }

/* Section Icons */
.iternoti-form-section-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:linear-gradient(135deg, #14b24a, #0d8c3a); }
    .iternoti-form-section-icon i { font-size:1.25rem; color:#fff; }
    .iternoti-form-section-icon.icon-redirect { background:linear-gradient(135deg, #3b7ddd, #2a5fb5); }
    .iternoti-form-section-icon.icon-targeting { background:linear-gradient(135deg, #ff9800, #e65100); }

/* Form Groups */
.iternoti-form-group { margin-bottom:0; }
.iternoti-form-label { display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:600; color:#566a7f; margin-bottom:8px; }
    .iternoti-form-label.req::after { content:'*'; color:#e53935; font-weight:700; margin-left:2px; }
    .iternoti-char-hint { font-size:.6875rem; font-weight:500; color:#8592a3; background:#f0f2f5; padding:2px 8px; border-radius:4px; }

/* Input Wrapper with Icons */
.iternoti-input-wrap { position:relative; }
    .iternoti-input-wrap .input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#b4bdc6; font-size:1.1rem; pointer-events:none; z-index:2; }
    .iternoti-input-wrap .input-icon.textarea-icon { top:16px; transform:none; }
    .iternoti-input-wrap .form-control { padding-left:40px; border-radius:8px; border:1px solid #e7e7e8; font-size:.8125rem; padding-top:10px; padding-bottom:10px; height:auto; transition:border-color .2s, box-shadow .2s; }
    .iternoti-input-wrap .form-control:focus { border-color:#14b24a; box-shadow:0 0 0 3px rgba(20,178,74,.12); }
    .iternoti-input-wrap .form-select { padding-left:40px; border-radius:8px; border:1px solid #e7e7e8; font-size:.8125rem; padding-top:10px; padding-bottom:10px; height:auto; transition:border-color .2s, box-shadow .2s; appearance:auto; }
    .iternoti-input-wrap .form-select:focus { border-color:#14b24a; box-shadow:0 0 0 3px rgba(20,178,74,.12); }
    .iternoti-input-wrap textarea.form-control { padding-top:14px; min-height:80px; resize:vertical; }

/* File Upload */
.iternoti-file-upload .form-control { border-radius:8px; border:1px solid #e7e7e8; font-size:.8125rem; padding:10px 12px; height:auto; transition:border-color .2s, box-shadow .2s; }
    .iternoti-file-upload .form-control:focus { border-color:#14b24a; box-shadow:0 0 0 3px rgba(20,178,74,.12); }
    .iternoti-file-upload .form-control::file-selector-button { background:#14b24a; color:#fff; border:none; border-radius:6px; padding:6px 16px; font-size:.75rem; font-weight:600; margin-right:12px; cursor:pointer; transition:background .2s; }
    .iternoti-file-upload .form-control::file-selector-button:hover { background:#12a043; }

/* Image Preview */
.iternoti-image-preview { margin-top:12px; display:flex; align-items:center; gap:12px; padding:10px; background:#f8f9fa; border-radius:8px; border:1px dashed #d9dee3; }
    .iternoti-image-preview img { width:80px; height:50px; object-fit:cover; border-radius:6px; border:1px solid #e7e7e8; }
    .iternoti-preview-label { font-size:.75rem; font-weight:500; color:#8592a3; display:flex; align-items:center; gap:4px; }
    .iternoti-preview-label i { font-size:.875rem; color:#14b24a; }

/* Error Messages */
.iternoti-form-error { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:.75rem; font-weight:500; color:#e53935; }
    .iternoti-form-error i { font-size:.875rem; }

/* Autocomplete Dropdown */
.iternoti-autocomplete-wrap { position:relative; }
.iternoti-response-list { position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12); border:1px solid #e7e7e8; border-top:none; border-radius:0 0 8px 8px; z-index:10; max-height:240px; overflow-y:auto; }
    .iternoti-response-list ul { list-style:none; padding:0; margin:0; }
    .iternoti-response-list ul li { padding:10px 16px; font-size:.8125rem; color:#566a7f; cursor:pointer; border-bottom:1px solid #f3f4f6; transition:background .15s; }
    .iternoti-response-list ul li:hover { background:#f0faf3; color:#14b24a; }
    .iternoti-response-list ul li:last-child { border-bottom:none; }

/* Form Actions (Submit / Cancel) */
.iternoti-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:20px; }
.btn-cancel-form { display:inline-flex; align-items:center; gap:8px; padding:10px 24px; border-radius:8px; font-size:.875rem; font-weight:500; background:#fff; color:#697a8d; border:1px solid #d9dee3; text-decoration:none; transition:all .2s ease; }
    .btn-cancel-form:hover { background:#f8f9fa; color:#566a7f; border-color:#c4cdd5; }
    .btn-cancel-form i { font-size:1.1rem; }
.btn-submit-form { display:inline-flex; align-items:center; gap:8px; padding:10px 28px; border-radius:8px; font-size:.875rem; font-weight:600; background:#14b24a; color:#fff; border:none; cursor:pointer; transition:all .2s ease; }
    .btn-submit-form:hover { background:#12a043; transform:translateY(-1px); box-shadow:0 4px 12px rgba(20,178,74,.25); }
    .btn-submit-form i { font-size:1rem; }

/* Responsive */
@media (max-width:991px) {
    .iternoti-form-card .card-body { padding:16px; }
    .iternoti-form-section-header { padding:16px; gap:12px; }
    .iternoti-form-actions { flex-direction:column-reverse; }
    .iternoti-form-actions .btn-cancel-form,
    .iternoti-form-actions .btn-submit-form { width:100%; justify-content:center; }
}

/* ============================================ */
/* Source: resources\views\admin\sms\list.blade.php */
/* ============================================ */
/* SMS Page Header */
.sms-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-items: center;
}
.collapsible-header i:last-child { transition: transform 0.3s ease; }
.collapsible-header.collapsed i:last-child { transform: rotate(180deg); }

.highlighted-tag {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
}

.form_error_msg { display: block; margin-top: 6px; font-size: 12px; }

.noti-btn-group { display: flex; flex-direction: column; gap: 4px; }
.noti-btn-group .btn { font-size: .6875rem; padding: 4px 12px; border-radius: 6px; font-weight: 600; margin: 0 !important; }


/* ── blogs/form ── */
.slug-display {
    font-size: 13px;
    color: #6b7280;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 4px;
    margin-top: 6px;
    display: inline-block;
}

/* ── blogs/list ── */
.blog-title-cell .blog-title-link { display: block; font-weight: 600; color: #384551; text-decoration: none; line-height: 1.45; margin-bottom: 6px; transition: color .15s; }
.blog-title-cell .blog-title-link:hover { color: #14b24a; }
.blog-feedback-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.blog-thumb { width: 70px; height: 45px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.home-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.home-checkbox-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; transition: background .15s; }
.home-checkbox-item:hover { background: #f8f9fa; }
.home-checkbox-item .form-check-input { margin: 0; cursor: pointer; }
.home-checkbox-item label { font-size: .75rem; color: #697a8d; margin: 0; cursor: pointer; }
.blog-title-cell .noti-info { font-size: .75rem; }

/* ── braze/notifications/form ── */
.braze-form-card .image-upload-wrapper { position: relative; }
.braze-form-card .image-upload-wrapper .current-image { margin-top: 12px; }
.braze-form-card .image-upload-wrapper .current-image img { max-width: 200px; max-height: 120px; border-radius: 8px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.braze-form-card .search-wrapper { position: relative; }
.braze-form-card .search-wrapper .response_list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e7e7e8; border-radius: 8px; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 1000; margin-top: 4px; display: none; }
.braze-form-card .search-wrapper .response_list a { display: block; padding: 10px 14px; color: #384551; text-decoration: none; transition: all .2s; border-bottom: 1px solid #f3f4f6; }
.braze-form-card .search-wrapper .response_list a:last-child { border-bottom: none; }
.braze-form-card .search-wrapper .response_list a:hover { background: #f8fdf9; color: #14b24a; }

/* ── braze/notifications/list ── */
.bn-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.bn-subject { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.bn-description { color: #566a7f; font-size: .8125rem; line-height: 1.5; }
.bn-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.bn-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.bn-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }
.bn-report-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3e0; color: #e65100; text-decoration: none; border: 1px solid #ffe0b2; transition: all .15s; }
.bn-report-btn:hover { background: #ffe0b2; color: #bf360c; border-color: #ffcc80; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(230,81,0,.15); }
.bn-report-btn i { font-size: .875rem; }

/* ── exchanges/list ── */
.exchange-info-cell { display: flex; gap: 14px; align-items: center; }
.exchange-logo { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.1); overflow: hidden; background: #fff; border: 1px solid #e7e7e8; }
.exchange-logo img { width: 100%; height: 100%; object-fit: cover; }
.exchange-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.exchange-name { font-weight: 600; color: #384551; display: block; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.exchange-name:hover { color: #14b24a; text-decoration: none; }
.exchange-menu-title { font-size: .75rem; color: #8592a3; }

/* ── faqs/list ── */
.question-cell { max-width: 400px; font-weight: 600; color: #384551; line-height: 1.4; }
.answer-cell { max-width: 500px; color: #566a7f; line-height: 1.6; }

/* ── in-app-message/list ── */
.message-title { font-weight: 600; color: #384551; font-size: .9375rem; line-height: 1.4; }
.message-image { width: 80px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid #e7e7e8; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.stat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.stat-badge.views { background: #e0f3ff; color: #0068a8; }
.stat-badge.clicks { background: #fff3e0; color: #bf6b00; }
.stat-badge i { font-size: .875rem; }

/* ── in-app-notification/list ── */
.notification-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.notification-title { font-weight: 600; color: #384551; font-size: .875rem; display: flex; align-items: center; }
.notification-title i { margin-right: 8px; color: #14b24a; }
.notification-title[title] { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.notification-stat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 600; background: #f0f0f0; color: #566a7f; }
.notification-stat-badge.views { background: #e3f2fd; color: #1565c0; }
.notification-stat-badge.clicks { background: #f3e5f5; color: #6a1b9a; }
.notification-stat-badge i { font-size: 1rem; }
.notification-date { font-size: .8125rem; color: #8592a3; font-weight: 500; }

/* ── industries/list ── */
.industry-info-cell { display: flex; gap: 14px; align-items: center; }
.industry-logo { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.1); overflow: hidden; background: #fff; border: 1px solid #e7e7e8; }
.industry-logo img { width: 100%; height: 100%; object-fit: cover; }
.industry-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.industry-name { font-weight: 600; color: #384551; display: block; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.industry-name:hover { color: #14b24a; text-decoration: none; }
.industry-slug { font-size: .75rem; color: #8592a3; font-family: monospace; background: #f1f3f5; padding: 2px 8px; border-radius: 4px; display: inline-block; }

/* ── iterable/notifications/list ── */
.in-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.in-subject { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.in-description { color: #566a7f; font-size: .8125rem; line-height: 1.5; max-width: 220px; }
.in-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.in-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.in-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }
.in-recipients-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e9f7ee; color: #14b24a; text-decoration: none; border: 1px solid #c3e6cb; transition: all .15s; }
.in-recipients-btn:hover { background: #14b24a; color: #fff; border-color: #14b24a; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20,178,74,.2); }
.in-recipients-btn i { font-size: .875rem; }

/* ── iterable/notifications/notification-recipients ── */
.iterrecip-kpi-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: all .2s ease; }
.iterrecip-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.iterrecip-kpi-card .card-body { display: flex; align-items: center; gap: 20px; padding: 24px; }
.recip-kpi-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recip-kpi-icon i { font-size: 1.5rem; color: #fff; }
.recip-kpi-icon.recip-kpi-sent { background: linear-gradient(135deg, #3b7ddd, #2a5fb5); }
.recip-kpi-icon.recip-kpi-opened { background: linear-gradient(135deg, #14b24a, #0d8c3a); }
.recip-kpi-icon.recip-kpi-notopened { background: linear-gradient(135deg, #e53935, #c62828); }
.recip-kpi-icon.recip-kpi-rate { background: linear-gradient(135deg, #ff9800, #e65100); }
.recip-kpi-content { flex: 1; }
.recip-kpi-content small { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #8592a3; display: block; margin-bottom: 4px; }
.recip-kpi-content h3 { font-size: 1.625rem; font-weight: 700; color: #384551; margin: 0; line-height: 1.2; }
.recip-kpi-sub { font-size: .8125rem; color: #8592a3; }
.iterrecip-table-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden; }
.iterrecip-table-card .card-header { background: #f8f9fa; border-bottom: 2px solid #e9ecef; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.recip-table-header-left h5 { font-size: 1rem; font-weight: 700; color: #384551; margin: 0 0 4px 0; display: flex; align-items: center; gap: 8px; }
.recip-table-header-left h5 i { font-size: 1.25rem; color: #14b24a; }
.recip-showing { font-size: .8125rem; color: #8592a3; }
.recip-table-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recip-filters { display: flex; gap: 6px; }
.recip-filter-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 6px; font-size: .75rem; font-weight: 600; text-decoration: none; border: 1px solid #d9dee3; color: #697a8d; background: #fff; transition: all .15s; }
.recip-filter-btn:hover { background: #f8f9fa; color: #566a7f; border-color: #c4cdd5; }
.recip-filter-btn.active-all { background: #14b24a; color: #fff; border-color: #14b24a; }
.recip-filter-btn.active-opened { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.recip-filter-btn.active-notopened { background: #c62828; color: #fff; border-color: #c62828; }
.recip-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff; color: #697a8d; border: 1px solid #d9dee3; cursor: pointer; transition: all .15s; }
.recip-export-btn:hover { background: #f8f9fa; color: #566a7f; border-color: #c4cdd5; }
.recip-export-btn i { font-size: .875rem; }
.recip-table { width: 100%; margin: 0; }
.recip-table thead { background: #f8f9fa; position: sticky; top: 0; z-index: 1; }
.recip-table thead th { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #8592a3; padding: 14px 16px; border-bottom: 2px solid #e9ecef; white-space: nowrap; }
.recip-table tbody td { padding: 14px 16px; font-size: .8125rem; color: #566a7f; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.recip-table tbody tr { transition: background .2s ease; }
.recip-table tbody tr:hover { background: #f8fdf9; }
.recip-table tbody tr:last-child td { border-bottom: none; }
.recip-row-num { font-weight: 600; color: #8592a3; font-size: .8125rem; }
.recip-name { font-weight: 600; color: #384551; }
.recip-email { color: #566a7f; }
.recip-phone { color: #8592a3; }
.recip-id { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .75rem; color: #8592a3; letter-spacing: .3px; }
.recip-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f0f2f5; color: #566a7f; }
.recip-tag i { font-size: .875rem; color: #8592a3; }
.recip-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.recip-status-badge i { font-size: .875rem; }
.recip-status-badge.recip-opened { background: #e8f5e9; color: #2e7d32; }
.recip-status-badge.recip-notopened { background: #fce4ec; color: #c62828; }
.recip-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-top: 1px solid #e9ecef; }
.recip-footer-info { font-size: .8125rem; color: #8592a3; }

/* ── news/list ── */
.news-title-cell .news-title-link { display: block; font-weight: 600; color: #384551; text-decoration: none; line-height: 1.45; margin-bottom: 6px; transition: color .15s; }
.news-title-cell .news-title-link:hover { color: #14b24a; }
.news-feedback-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.news-meta-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: .8125rem; color: #8592a3; }
.news-meta-info a { color: #14b24a; font-weight: 500; text-decoration: none; transition: color .15s; }
.news-meta-info a:hover { color: #0f8a39; text-decoration: underline; }
.news-meta-info .meta-dot { width: 4px; height: 4px; border-radius: 50%; background: #c4cdd5; display: inline-block; }
.news-title-cell .noti-info { font-size: .75rem; }

/* ── notification/list ── */
.noti-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.noti-subject { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.noti-description { color: #566a7f; font-size: .8125rem; line-height: 1.5; }
.noti-image { width: 70px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid #e7e7e8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.noti-users-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
.noti-users-badge i { font-size: 1rem; }
.noti-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.noti-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }
.noti-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3e0; color: #e65100; text-decoration: none; border: 1px solid #ffe0b2; transition: all .15s; }
.noti-action-btn:hover { background: #ffe0b2; color: #bf360c; border-color: #ffcc80; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(230,81,0,.15); }
.noti-action-btn i { font-size: .875rem; }
.badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: .6875rem; font-weight: 700; border-radius: 10px; background: rgba(255,255,255,.3); line-height: 1; }

/* ── notification/setting + in-app-notification/setting ── */
.active-users-toggle { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff3e0; border: 1px solid #ffe0b2; border-radius: 10px; transition: all .2s ease; margin-bottom: 24px; }
.active-users-toggle:hover { background: #ffe0b2; border-color: #ffcc80; }
.active-users-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #ff9800; }
.active-users-toggle label { margin: 0; cursor: pointer; font-size: .875rem; color: #e65100; font-weight: 600; user-select: none; flex: 1; }
.active-users-toggle .toggle-icon { font-size: 1.5rem; color: #ff9800; }
.section-title { font-size: .9375rem; font-weight: 700; color: #384551; margin-bottom: 16px; border-left: 4px solid #14b24a; padding-left: 12px; }
.user-type-grid { display: grid; gap: 16px; }
.user-type-option { position: relative; border: 2px solid #e7e7e8; border-radius: 10px; padding: 16px 20px; transition: all .2s ease; cursor: pointer; background: #fff; display: flex; align-items: center; gap: 16px; }
.user-type-option:hover { border-color: #14b24a; background: #f8fdf9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,178,74,.15); }
.user-type-option.selected { border-color: #14b24a; background: #e3f8ef; }
.user-type-option input[type="radio"] { width: 20px; height: 20px; cursor: pointer; accent-color: #14b24a; flex-shrink: 0; }
.user-type-option .option-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.user-type-option .option-label { font-size: .875rem; font-weight: 600; color: #384551; display: flex; align-items: center; gap: 8px; }
.user-type-option.selected .option-label { color: #087443; }
.user-type-option .option-description { font-size: .75rem; color: #8592a3; line-height: 1.4; }
.user-type-option .user-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; padding: 6px 14px; border-radius: 8px; background: #14b24a; color: #fff; font-size: .875rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 6px rgba(20,178,74,.25); }
.user-type-option.selected .user-count-badge { background: #087443; }
.custom-email-section { margin-top: 16px; padding: 20px; background: #f8f9fa; border: 1px solid #e7e7e8; border-radius: 10px; }
.custom-email-section label { font-size: .8125rem; font-weight: 600; color: #384551; margin-bottom: 8px; display: block; }
.custom-email-section label.req::after { content: " *"; color: #d32f2f; font-weight: 700; }
.custom-email-section .help-text { font-size: .75rem; color: #8592a3; margin-left: 4px; }
.custom-email-section textarea { border-radius: 8px; border: 1px solid #e7e7e8; font-size: .8125rem; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; min-height: 100px; resize: vertical; }
.custom-email-section textarea:focus { border-color: #14b24a; box-shadow: 0 0 0 3px rgba(20,178,74,.12); outline: none; }
.custom-email-section .text-danger { font-size: .75rem; color: #d32f2f; margin-top: 6px; display: block; font-weight: 500; }

/* ── notificationlog/list ── */
.log-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.log-user-info { display: flex; flex-direction: column; gap: 4px; }
.log-user-name { font-weight: 600; color: #384551; font-size: .875rem; }
.log-user-email { font-size: .75rem; color: #8592a3; display: flex; align-items: center; gap: 4px; }
.log-user-email i { font-size: .875rem; color: #14b24a; }
.log-title { font-weight: 600; color: #384551; font-size: .875rem; line-height: 1.5; }
.log-message { color: #566a7f; font-size: .8125rem; line-height: 1.5; }
.log-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.log-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }

/* ── notificationlog/web_notification_list ── */
.weblog-number { font-weight: 600; color: #566a7f; font-size: .875rem; }
.weblog-title-link { font-weight: 600; color: #384551; font-size: .875rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.weblog-title-link:hover { color: #14b24a; text-decoration: none; }
.weblog-title-link i { font-size: 1rem; color: #14b24a; }
.weblog-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e3f2fd; color: #1565c0; text-transform: capitalize; }
.weblog-type-badge i { font-size: .875rem; }
.weblog-users-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .8125rem; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
.weblog-users-badge i { font-size: 1rem; }
.weblog-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; }
.weblog-status-badge.sent { background: #e3f8ef; color: #087443; }
.weblog-status-badge.sending { background: #ffe9e5; color: #d32f2f; }
.weblog-status-badge i { font-size: .875rem; }
.weblog-date { font-size: .8125rem; color: #8592a3; font-weight: 500; white-space: nowrap; }
.weblog-date i { color: #14b24a; margin-right: 4px; font-size: .875rem; }

/* ── sectors/list ── */
.sector-info-cell { display: flex; gap: 14px; align-items: center; }
.sector-image { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); overflow: hidden; background: #f1f3f5; }
.sector-image img { width: 100%; height: 100%; object-fit: cover; }
.sector-image i { font-size: 2rem; color: #c4cdd5; }
.sector-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sector-name { font-weight: 600; color: #384551; display: block; font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.sector-name:hover { color: #14b24a; text-decoration: none; }
.sector-slug { font-size: .75rem; color: #8592a3; font-family: monospace; }
.sector-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.sector-badge.has-image { background: #e3f8ef; color: #087443; }
.sector-badge.no-image { background: #f1f3f5; color: #697a8d; }
.sector-badge i { font-size: .875rem; }

/* ── sms/form ── */
.ticker-search-wrapper { position: relative; }
.ticker-search-wrapper .ticker-search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #b4bdc6; font-size: 1.1rem; pointer-events: none; }
.ticker-search-wrapper .form-control { padding-right: 38px; }
.ticker-search-wrapper .response_list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); border: 1px solid #e7e7e8; border-top: none; border-radius: 0 0 8px 8px; max-height: 300px; overflow-y: auto; z-index: 1000; display: none; }
.ticker-search-wrapper .response_list ul { list-style: none; padding: 0; margin: 0; }
.ticker-search-wrapper .response_list ul li { padding: 10px 16px; border-bottom: 1px solid #f1f3f5; cursor: pointer; transition: background 0.2s; font-size: 0.875rem; color: #566a7f; }
.ticker-search-wrapper .response_list ul li:hover { background: #f8fdf9; color: #14b24a; }
.ticker-search-wrapper .response_list ul li:last-child { border-bottom: none; }

/* ── sms/list ── */
.sms-message-cell { display: flex; align-items: flex-start; }
.message-content-wrapper { flex: 1; min-width: 0; }
.message-text-content { color: #566a7f; font-size: 14px; line-height: 1.5; margin-bottom: 6px; word-wrap: break-word; }
.message-ticker-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #e7e7ff; color: #696cff; border-radius: 4px; font-size: 11px; font-weight: 500; }
.message-ticker-badge i { font-size: 13px; }

/* ── sms/crons ── */
.cron-name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #384551; font-size: .875rem; }
.cron-name i { font-size: 1.125rem; color: #14b24a; }
.cron-description { font-size: .8125rem; color: #566a7f; line-height: 1.5; }
.cron-template { font-size: .8125rem; color: #384551; background: #f8f9fa; padding: 8px 12px; border-radius: 6px; font-family: 'Courier New', monospace; border-left: 3px solid #14b24a; }
.status-badge.status-sent { background: #e3f8ef; color: #087443; }
.status-badge.status-pending { background: #fff4e5; color: #bf6b00; }

/* ── sms/log ── */
.phone-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #384551; font-size: .875rem; }
.phone-cell i { font-size: 1.125rem; color: #14b24a; }
.time-cell { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: #566a7f; white-space: nowrap; }
.time-cell i { font-size: 1rem; color: #14b24a; }

/* ── temp-users/list ── */
.device-id-cell { font-family: 'Courier New', monospace; font-size: .75rem; color: #566a7f; line-height: 1.6; }
.device-id-text { display: block; margin-bottom: 6px; color: #697a8d; }
.build-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: .6875rem; font-weight: 600; background: #f1f3f5; color: #697a8d; }
.platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.platform-badge.ios { background: #e0f3ff; color: #0068a8; }
.platform-badge.android { background: #e8f5e9; color: #2e7d32; }
.platform-badge i { font-size: .875rem; }
.location-cell { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: #566a7f; }
.location-cell i { color: #14b24a; font-size: .875rem; flex-shrink: 0; }

/* ── temp-users/web-user-list ── */
.web-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; background: #e0f3ff; color: #0068a8; }
.web-badge i { font-size: .875rem; }

/* ── tickers/list ── */
.last-update-info { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: 20px; background: #f8f9fa; border-radius: 10px; font-size: .8125rem; color: #566a7f; border-left: 3px solid #14b24a; }
.last-update-info i { font-size: 1.125rem; color: #14b24a; }
.last-update-info strong { color: #384551; font-weight: 600; }
.last-update-info .separator { color: #c4cdd5; margin: 0 4px; }
.views-cell { text-align: center; }

/* ── tickers/mismatch_exchange_tickers ── */
.ticker-symbol-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #e3f8ef; color: #087443; font-size: .8125rem; font-weight: 700; }
.ticker-symbol-badge i { font-size: 1rem; color: #14b24a; }
.converted-status { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 600; }
.converted-status.yes { background: #e3f8ef; color: #087443; }
.converted-status.no { background: #ffebee; color: #d32f2f; }
.converted-status i { font-size: .875rem; }
.exchange-badge.fmp { background: #e7f5ff; color: #0068a8; }
.exchange-badge.quodd { background: #fff3e0; color: #c77700; }

/* ── tickers/streaming_tickers ── */
.streaming-tickers-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 24px; }
.streaming-tickers-card .card-header { background: #f8f9fa; border-bottom: 2px solid #e9ecef; padding: 14px 24px; border-radius: 12px 12px 0 0; }
.streaming-tickers-card .card-header h5 { font-size: 1rem; font-weight: 700; color: #384551; margin: 0; display: flex; align-items: center; gap: 8px; }
.streaming-tickers-card .card-header h5 i { font-size: 1.25rem; color: #14b24a; }
.streaming-tickers-table { margin: 0; }
.streaming-tickers-table thead th { font-size: .8125rem; font-weight: 700; color: #384551; background: #f8f9fa; text-transform: uppercase; letter-spacing: .03em; padding: 12px 16px; border-bottom: 2px solid #e9ecef; }
.streaming-tickers-table tbody td { padding: 16px; vertical-align: top; border-bottom: 1px solid #f3f4f6; font-size: .875rem; color: #566a7f; }
.streaming-tickers-table tbody tr:hover { background: #f8fdf9; }
.streaming-tickers-table tbody tr:last-child td { border-bottom: none; }
.ticker-info-block { display: flex; flex-direction: column; gap: 6px; }
.ticker-name { font-size: .875rem; color: #384551; font-weight: 500; line-height: 1.4; display: block; }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.info-label { font-size: .75rem; color: #8592a3; font-weight: 600; min-width: 80px; }
.streaming-tickers-card .info-value { font-size: .8125rem; color: #384551; font-weight: 500; }
.price-value { color: #087443; font-weight: 700; }
.ext-hours-block { background: #f8fdf9; padding: 10px; border-radius: 8px; border: 1px solid #e3f8ef; }
.badge-status { display: inline-block; padding: 3px 10px; font-size: .6875rem; font-weight: 700; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.no-data-badge { display: inline-block; padding: 6px 16px; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600; border-radius: 6px; }
.btn-update-records { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: #14b24a; color: #fff; text-decoration: none; transition: all .2s ease; border: none; width: auto !important; max-width: fit-content; flex-shrink: 0; }
.btn-update-records:hover { background: #12a043; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(20,178,74,.2); }
.btn-update-records i { font-size: 1rem; }

/* ── users/onesignal-notifications ── */
.metrics-info-title { font-size: .875rem; font-weight: 600; color: #384551; margin-bottom: 16px; display: flex; align-items: center; }
.metrics-info-title i { margin-right: 8px; color: #14b24a; font-size: 1.125rem; }
.metric-item { display: flex; align-items: start; margin-bottom: 12px; font-size: .8125rem; color: #566a7f; }
.metric-item:last-child { margin-bottom: 0; }
.metric-item i { margin-right: 10px; margin-top: 2px; color: #14b24a; font-size: .875rem; flex-shrink: 0; }
.metric-item strong { color: #384551; font-weight: 600; }
.total-badge { background: #e3f8ef; color: #14b24a; font-weight: 600; padding: 5px 12px; border-radius: 8px; font-size: .75rem; }

/* ── users/show ── */
.user-details-page-header .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; order: 2; }
.btn-update-json { display: inline-flex !important; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: #14b24a; color: #fff; text-decoration: none; transition: all .2s ease; border: none; white-space: nowrap; }
.btn-update-json:hover { background: #12a043; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(20,178,74,.2); }
.btn-update-json i { font-size: .9rem; }
.btn-edit-user { display: inline-flex !important; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 8px; font-size: .875rem; font-weight: 600; background: #ff9800; color: #fff; text-decoration: none; transition: all .2s ease; border: none; white-space: nowrap; }
.btn-edit-user:hover { background: #f57c00; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(255,152,0,.25); }
.btn-edit-user i { font-size: .9rem; }
.profile-center { text-align: center; }
.profile-avatar-wrapper { position: relative; display: inline-block; margin-bottom: 16px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #e9ecef; }
.profile-avatar-placeholder { width: 100px; height: 100px; border-radius: 50%; background: #6c757d; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.5rem; font-weight: 700; border: 3px solid #e9ecef; }
.profile-status-badge { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; background: #14b24a; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.profile-status-badge i { font-size: 10px; color: #fff; }
.profile-name { font-size: 1.25rem; font-weight: 700; color: #384551; margin: 0 0 4px 0; }
.profile-email { font-size: .875rem; color: #8592a3; margin: 0 0 8px 0; }
.profile-phone { font-size: .875rem; color: #566a7f; margin: 0 0 16px 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.profile-phone i { font-size: 1rem; color: #14b24a; }
.profile-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.badge-verified { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #d4edda; color: #155724; }
.badge-unverified { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3cd; color: #856404; }
.badge-premium { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #ffeaa7; color: #d63031; }
.badge-normal { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e9ecef; color: #566a7f; }
.badge-active { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #d4edda; color: #155724; }
.badge-inactive { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f8d7da; color: #721c24; }
.badge-canceled { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3cd; color: #856404; }
.badge-expired { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f8d7da; color: #721c24; }
.badge-pending { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #fff3cd; color: #856404; }
.badge-role { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #e9ecef; color: #566a7f; }
.profile-dates { display: flex; justify-content: space-around; gap: 16px; }
.profile-date-item { flex: 1; text-align: center; }
.profile-date-item small { display: block; font-size: .75rem; color: #8592a3; margin-bottom: 4px; }
.profile-date-item div { font-size: .875rem; font-weight: 600; color: #384551; }
.info-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.info-item:last-child { border-bottom: none; }
.info-item label { font-size: .8125rem; font-weight: 600; color: #8592a3; min-width: 120px; margin: 0; flex-shrink: 0; }
.info-item .info-value { font-size: .875rem; color: #384551; flex: 1; padding-left: 12px; border-left: 2px solid #e9ecef; word-break: break-word; }
.info-item .info-value.mono { font-family: monospace; font-size: .8125rem; }
.info-item .info-value.small { font-size: .75rem; }
.table-section { border-top: 1px solid #e9ecef; padding-top: 20px; margin-top: 20px; }
.table-section-title { font-size: .9375rem; font-weight: 700; color: #384551; margin-bottom: 12px; }
.table-wrapper { max-height: 400px; overflow-y: auto; border-radius: 8px; border: 1px solid #e9ecef; }
.empty-state { text-align: center; padding: 40px 20px; color: #8592a3; }
.empty-state i { font-size: 3rem; color: #e9ecef; margin-bottom: 12px; display: block; }
.empty-state p { font-size: .875rem; margin: 0; }

/* ============================================ */
/*              RESPONSIVE                     */
/* ============================================ */
@media (max-width: 1200px) {
    .news-editor-wrapper,
    .blog-editor-wrapper {
        flex-direction: column;
    }
    
    .news-sidebar,
    .blog-sidebar {
        flex: 1;
        min-width: 0;
    }
    
    .sticky-sidebar {
        position: static;
    }
}

@media (max-width: 991px) {
    .help-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
    
    .filters-card .card-body {
        padding: 16px;
    }
    
    .filters-flex-row {
        gap: 12px;
    }
    
    .filter-item.filter-search,
    .filter-item.filter-select,
    .filter-item.filter-date {
        flex: 1 1 calc(50% - 7px);
    }
    
    .filter-item.filter-actions {
        flex: 1 1 100%;
    }
    
    .filter-btns {
        width: 100%;
    }
    
    .filter-btns .btn-apply-filter,
    .filter-btns .btn-reset-filter {
        flex: 1;
        justify-content: center;
    }
    
    .data-table-card .table tbody td,
    .data-table-card .table thead th {
        padding: 10px 12px;
    }
    
    .form-card .card-body {
        padding: 16px;
    }
    
    .help-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .help-buttons .btn img {
        display: none;
    }
    
    .help-buttons .btn {
        padding: 5px;
        text-align: center;
    }
    
    .help-buttons .btn span {
        display: block;
    }
}

@media (max-width: 480px) {
    .filter-item.filter-search,
    .filter-item.filter-select,
    .filter-item.filter-date {
        flex: 1 1 100%;
    }
}

/* ── Page-specific responsive rules ── */
@media (max-width: 1199px) {
    .stock-kpi-value { font-size: 1.375rem; }
    .dashboard-page .card-title { font-size: 1rem; }
}

@media (max-width: 991px) {
    .iterrecip-table-card .card-header { flex-direction: column; align-items: flex-start; }
    .recip-table-header-right { width: 100%; justify-content: flex-start; }
    .user-details-page-header .header-actions { width: 100%; }
    .user-details-page-header .header-actions a { flex: 1; justify-content: center; }
    .profile-dates { flex-direction: column; gap: 8px; }
    .info-item { flex-direction: column; align-items: flex-start; padding: 12px 0; }
    .info-item label { min-width: auto; margin-bottom: 4px; }
    .info-item .info-value { padding-left: 0; border-left: none; border-top: 2px solid #e9ecef; padding-top: 8px; width: 100%; }
}

@media (max-width: 767px) {
    .stock-kpi-value { font-size: 1.25rem; }
    .stock-kpi-card .card-body { padding: 1rem 1.25rem; }
    .stock-kpi-icon-wrap { width: 38px; height: 38px; }
    .stock-kpi-icon-wrap i { font-size: 1.125rem; }
    .stock-table th, .stock-table td { padding: 0.75rem 1rem; }
    .dashboard-page .card-body { padding: 1rem; }
    .iterrecip-kpi-card .card-body { padding: 16px; gap: 14px; }
    .recip-kpi-icon { width: 42px; height: 42px; }
    .recip-kpi-icon i { font-size: 1.25rem; }
    .recip-kpi-content h3 { font-size: 1.375rem; }
    .recip-table thead th, .recip-table tbody td { padding: 10px 12px; }
    .recip-card-footer { flex-direction: column; gap: 8px; text-align: center; }
}