/* =============================================
   KDMP - Responsive Overrides
   Mobile-first with progressive enhancement
   ============================================= */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
    .sidebar { width: var(--sidebar-collapsed); }
    .sidebar .brand-text, .sidebar .nav-section-title, .sidebar .nav-item span, .sidebar .user-info { display: none; }
    .sidebar .nav-item { justify-content: center; padding: 0; }
    .sidebar .nav-item i { margin: 0; }
    .sidebar .sidebar-brand { justify-content: center; }
    .sidebar .sidebar-footer { padding: 16px 10px; }
    .main-content { margin-left: var(--sidebar-collapsed); padding: 16px 20px; }
    .charts-row, .ceo-charts-row { grid-template-columns: 1fr; }
    .analysis-body-2col { grid-template-columns: 1fr; }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    .sidebar { width: 280px; transform: translateX(-100%); z-index: 100; transition: transform 0.25s ease; }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar .brand-text, .sidebar .nav-section-title, .sidebar .nav-item span, .sidebar .user-info { display: block; }
    .sidebar .nav-item { justify-content: flex-start; padding: 0 20px; }
    .sidebar .nav-item i { margin-right: 12px; }
    .sidebar .sidebar-brand { justify-content: flex-start; }
    .sidebar .sidebar-footer { padding: 16px 20px; }
    .main-content { margin-left: 0 !important; padding: 12px 16px; }

    .topbar { padding: 0 16px; }
    .breadcrumb { display: none; }
    .topbar-user .user-info-sm { display: none; }

    .page-title { font-size: 24px; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header-right { width: 100%; }
    .page-header-right .btn { width: 100%; margin-top: 8px; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-grid[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr); }
    .stat-grid[style*="repeat(3"] { grid-template-columns: repeat(2, 1fr); }
    .stat-card { padding: 16px; }
    .stat-value { font-size: 24px; }
    .stat-icon { width: 40px; height: 40px; font-size: 16px; }

    .financial-bar { grid-template-columns: repeat(2, 1fr); }
    .financial-item { padding: 16px 12px; }
    .financial-value { font-size: 20px; }

    .insight-grid { grid-template-columns: repeat(2, 1fr); }
    .insight-card { padding: 16px 12px; }
    .insight-value { font-size: 20px; }

    .project-stats { grid-template-columns: 1fr; }
    .user-stats { grid-template-columns: repeat(2, 1fr); }

    .status-card { flex-direction: column; text-align: center; padding: 20px; gap: 16px; }
    .status-card .btn { width: 100%; margin: 0; }
    .status-meta { justify-content: center; flex-wrap: wrap; }

    .project-item { flex-direction: column; align-items: flex-start; }
    .project-progress-section { max-width: 100%; width: 100%; }
    .project-actions { width: 100%; }
    .project-actions .btn { flex: 1; }

    .form-grid { grid-template-columns: 1fr; }
    .form-card-footer { flex-direction: column; }
    .form-card-footer .btn { width: 100%; }
    .form-input, .form-select { height: 48px; font-size: 16px; }
    .form-group { margin-bottom: 20px; }

    .photo-upload-grid { grid-template-columns: 1fr; }
    .photo-upload-slot { min-height: 160px; }

    .progress-slider-wrapper { flex-wrap: wrap; }
    .progress-slider { width: 100%; }
    .progress-number { width: 60px; font-size: 16px; }

    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-group { width: 100%; }
    .filter-select, .filter-date, .filter-search input { width: 100%; }

    .variation-2col { grid-template-columns: 1fr; }
    .variance-cards { grid-template-columns: 1fr; }
    .prediction-row { grid-template-columns: 1fr; }

    .export-layout { grid-template-columns: 1fr; }
    .filter-panel { position: static; }

    .exec-alert { flex-direction: column; text-align: center; padding: 16px; }
    .exec-alert .btn { width: 100%; margin-top: 8px; }

    .performer-main { flex-direction: column; text-align: center; }
    .performer-score { margin: 12px auto 0; }
    .performer-stats { grid-template-columns: repeat(2, 1fr); }

    .project-heatmap { grid-template-columns: repeat(2, 1fr); }

    .reminder-card { flex-direction: column; text-align: center; }
    .reminder-card .btn { width: 100%; margin-top: 12px; }

    .card-view-grid { grid-template-columns: 1fr; }

    .modal-dialog { margin: 10px; max-height: 95vh; }
    .modal-body { padding: 16px; max-height: 60vh; overflow-y: auto; }

    .batch-actions { width: calc(100% - 32px); left: 16px; transform: translateX(0) translateY(120%); padding: 10px 14px; }
    .batch-actions.active { transform: translateX(0) translateY(0); }

    .data-card-header { flex-direction: column; align-items: flex-start; }

    .week-visual { gap: 4px; }
    .week-day { padding: 6px 2px; font-size: 10px; }

    .recent-exports { margin-top: 16px; }

    .login-card { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .login-brand-panel { min-height: 160px; padding: 24px 16px; }
    .login-brand-panel .brand-logo-main { max-height: 56px; margin-bottom: 16px; }
    .login-brand-panel .company-name { font-size: 14px; }
    .login-brand-panel .system-name { font-size: 20px; }
    .login-brand-panel .feature-list, .login-brand-panel .gold-line { display: none; }
    .login-form-panel { padding: 16px; }
    .login-card { padding: 24px 20px; }

    .notification-dropdown { width: calc(100% - 32px); right: 16px; }
}

/* Wide: >= 1440px */
@media (min-width: 1440px) {
    .main-content { max-width: 1400px; margin-left: var(--sidebar-width); }
    .stat-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Smooth transitions for responsive */
.sidebar, .main-content, .stat-card, .data-card, .form-card, .project-item {
    transition: all 0.25s ease;
}