/* ========================================
   PAGE-SPECIFIC COMPONENT STYLES
   Dashboard, Cards, Charts, Tables
   ======================================== */

/* Icon Box (used with stat cards) */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-icon);
}

.icon-box.bg-lavender { background-color: var(--smm-lavender); color: var(--smm-primary); }
.icon-box.bg-success-subtle { background-color: #DCFCE7; color: var(--smm-success); }
.icon-box.bg-warning-subtle { background-color: #FEF3C7; color: var(--smm-warning); }
.icon-box.bg-danger-subtle { background-color: #FEE2E2; color: var(--smm-danger); }

/* KPI Card (Dashboard metrics) */
.kpi-card {
    display: flex;
    flex-direction: column;
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.kpi-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.kpi-label {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Chart Container */
.chart-container {
    position: relative;
    min-height: 300px;
    background: linear-gradient(180deg, var(--smm-lavender) 0%, transparent 100%);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder {
    text-align: center;
    color: var(--text-muted);
    opacity: 0.5;
}

.chart-placeholder i {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

/* Donut Chart Legend */
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-value {
    margin-left: auto;
    font-weight: 600;
}

/* Chart Section Header */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.chart-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0;
}

.chart-controls {
    display: flex;
    gap: 8px;
}

.chart-period-btn {
    padding: 6px 16px;
    border: 1px solid var(--smm-grey-mid);
    background: transparent;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-base);
    color: var(--text-body);
}

.chart-period-btn.active {
    background: var(--smm-primary);
    border-color: var(--smm-primary);
    color: white;
}

.chart-period-btn:hover {
    border-color: var(--smm-primary);
}

/* Enhanced Table Styles */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-card);
}

.table-sm {
    font-size: 13px;
}

.table-sm th,
.table-sm td {
    padding: 10px 12px;
}

.table-striped tbody tr:nth-child(odd) {
    background-color: var(--smm-off-white);
}

.table tbody tr:hover {
    background-color: var(--smm-grey-light);
}

/* Action Buttons in Tables */
.action-buttons {
    display: flex;
    gap: 6px;
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.action-btn:hover {
    background: var(--smm-grey-light);
    color: var(--smm-primary);
}

/* Responsive Table Adjustments */
@media (max-width: 767px) {
    .table-wrapper { margin: 0 -16px; border-radius: 0; }
    .table-hide-mobile { display: none; }
    .chart-controls { width: 100%; }
}

/* Campaign Progress Bar */
.campaign-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.campaign-status-bar {
    flex: 1;
}

.campaign-status-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* List Items with Avatars */
.list-item-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--smm-grey-mid);
}

.list-item-avatar:last-child {
    border-bottom: none;
}

.list-item-content {
    flex: 1;
}

.list-item-title {
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 2px;
}

.list-item-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

/* Badge Collections */
.badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Stat Row (side-by-side stats) */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.stat-item {
    text-align: center;
    padding: 16px;
    background: var(--smm-off-white);
    border-radius: var(--radius-btn);
}

.stat-item-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--smm-primary);
    margin-bottom: 4px;
}

.stat-item-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Quick Stats Display */
.quick-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--smm-grey-mid);
}

.quick-stat:last-child {
    border-bottom: none;
}

.quick-stat-label {
    color: var(--text-body);
    font-size: 14px;
}

.quick-stat-value {
    font-weight: 700;
    color: var(--text-heading);
    font-size: 16px;
}

/* Activity Feed */
.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--smm-grey-mid);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 2px;
    font-size: 14px;
}

.activity-time {
    font-size: 12px;
    color: var(--text-muted);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--smm-grey-mid);
    margin-bottom: 24px;
}

.tab {
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--transition-base);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tab:hover {
    color: var(--text-heading);
}

.tab.active {
    color: var(--smm-primary);
    border-bottom-color: var(--smm-primary);
}

/* Pills/Tags */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--smm-lavender);
    color: var(--smm-primary);
}

.pill.outline {
    background: transparent;
    border: 1px solid var(--smm-primary);
}

/* Empty State Variations */
.empty-state-large {
    padding: 100px 40px;
    text-align: center;
}

.empty-state-large-icon {
    font-size: 80px;
    opacity: 0.3;
    margin-bottom: 24px;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .stat-row { grid-template-columns: 1fr 1fr; }
    .chart-header { flex-direction: column; align-items: flex-start; }
    .chart-title { font-size: 16px; }
    .kpi-value { font-size: 22px; }
    .empty-state-large { padding: 60px 20px; }
    .empty-state-large-icon { font-size: 60px; }
}

@media (max-width: 575px) {
    .stat-row { grid-template-columns: 1fr; }
    .stat-item { padding: 12px; }
    .kpi-value { font-size: 18px; }
    .action-buttons { justify-content: flex-end; }
}

/* Focus States for Keyboard Navigation */
.action-btn:focus-visible {
    outline: 2px solid var(--smm-primary);
    outline-offset: 2px;
}

.tab:focus-visible {
    outline: 2px solid var(--smm-primary);
    outline-offset: -2px;
}

.pill:focus-visible {
    outline: 2px solid var(--smm-primary);
    outline-offset: 2px;
}