/* ============================================================
   DASHBOARD — additional dashboard-specific styles
   ============================================================ */

/* Analytics page */
.analytics-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-6);
}

.chart-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
}
.chart-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--sp-5);
}
.chart-canvas {
    width: 100%;
    height: 220px;
}

/* Folders sidebar */
.folders-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.folders-panel__title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.folder-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.folder-item:hover { background: var(--color-surface-alt); }
.folder-item__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.folder-item__name {
    flex: 1;
    font-size: var(--font-size-md);
    color: var(--color-heading);
}
.folder-item__count {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    background: var(--color-surface-alt);
    border-radius: var(--radius-full);
    padding: 1px var(--sp-2);
}

/* Bulk actions toolbar */
.bulk-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--color-primary);
    font-size: var(--font-size-md);
    color: var(--color-primary-dark);
}
.bulk-toolbar__count { font-weight: 700; }
.bulk-toolbar__actions { margin-right: auto; display: flex; gap: var(--sp-2); }

/* QR manage toolbar */
.qr-manage-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.qr-manage-toolbar .input {
    max-width: 280px;
}
.qr-manage-toolbar__filters {
    display: flex;
    gap: var(--sp-2);
    margin-right: auto;
}
.filter-btn {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-body);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.filter-btn:hover,
.filter-btn--active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5);
}
.pagination__btn {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-body);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.pagination__btn:hover { background: var(--color-surface-alt); }
.pagination__btn--active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    animation: fadeIn .2s ease;
}
.modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: scaleIn .25s ease;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--color-border);
}
.modal__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
}
.modal__close {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background: none;
    cursor: pointer;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal__close:hover { background: var(--color-surface-alt); color: var(--color-heading); }
.modal__body {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.modal__footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* Toast notifications */
.toast-container {
    position: fixed;
    bottom: var(--sp-5);
    left: var(--sp-5);
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sp-3);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-lg);
    background: var(--color-heading);
    color: #fff;
    font-size: var(--font-size-md);
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    animation: fadeInUp .3s ease both;
    min-width: 280px;
    max-width: 400px;
}
.toast--success { background: var(--color-primary-dark); }
.toast--error   { background: #B91C1C; }
.toast--warning { background: #92400E; }

/* API Keys page */
.api-key-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.api-key-item__key {
    flex: 1;
    font-family: monospace;
    font-size: var(--font-size-md);
    color: var(--color-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--color-surface-alt);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    direction: ltr;
}

@media (max-width: 1024px) {
    .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .modal { border-radius: var(--radius-lg); }
    .toast-container { left: var(--sp-3); right: var(--sp-3); }
    .toast { min-width: 0; }
}