/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Full Phone Optimization
   ═══════════════════════════════════════════════════════════════ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
    .kpi-strip { grid-template-columns: repeat(3, 1fr); }
    .exec-grid { grid-template-columns: 1fr 1fr; }
    .panel-projects { grid-column: span 2; }
}

/* Mobile Landscape & Small Tablet (576px - 768px) */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); width: 260px; z-index: 9999; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .top-navbar { padding: 0 12px; }
    .page-title { font-size: 0.95rem; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi-strip-item { padding: 10px; }
    .kpi-strip-value { font-size: 0.95rem; }
    .kpi-strip-label { font-size: 0.65rem; }
    .exec-header { padding: 12px 16px; flex-direction: column; text-align: center; gap: 8px; }
    .exec-header-center { flex-direction: column; gap: 4px; }
    .exec-title { font-size: 0.85rem; }
    .exec-subtitle { font-size: 0.7rem; }
    .exec-grid { grid-template-columns: 1fr; }
    .panel-projects { grid-column: span 1; }
    .exec-panel { margin-bottom: 12px; }
    .exec-panel-body { padding: 12px; }
    .exec-panel-header { padding: 8px 12px; font-size: 0.75rem; }
    .hr-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hr-stat-value { font-size: 1.1rem; }
    .kpi-perf-grid { flex-direction: column; }
    .kpi-gauge-wrap { margin-top: 16px; }
    .exec-table { font-size: 0.7rem; }
    .exec-table th, .exec-table td { padding: 6px 8px; }
    .severity-row { gap: 6px; }
    .severity-label { font-size: 0.7rem; width: 50px; }
    .page-content { padding: 12px; }
    .dashboard-card { margin-bottom: 12px; }
    .card-header-custom { padding: 12px; }
    .card-body-custom { padding: 12px; }
}

/* Mobile Portrait (< 576px) */
@media (max-width: 576px) {
    .sidebar { width: 100%; transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .top-navbar { height: 50px; padding: 0 10px; }
    .sidebar-toggle { font-size: 1rem; }
    .page-title { font-size: 0.85rem; }
    .kpi-strip { grid-template-columns: 1fr 1fr; gap: 6px; }
    .kpi-strip-item { padding: 8px; flex-direction: column; text-align: center; gap: 6px; }
    .kpi-strip-icon { width: 32px; height: 32px; font-size: 0.85rem; }
    .kpi-strip-value { font-size: 0.85rem; }
    .exec-header { padding: 10px 12px; }
    .exec-title { font-size: 0.75rem; letter-spacing: 0.3px; }
    .company-logos-login img { height: 60px; }
    .company-name-login { font-size: 1rem; }
    .login-left { padding: 20px; }
    .login-right { padding: 20px; width: 100%; }
    .login-card { max-width: 100%; }
    .login-title { font-size: 1.2rem; }
    .demo-btn { font-size: 0.75rem; padding: 8px; }
    .hr-stats { grid-template-columns: 1fr; }
    .hr-stat-card { padding: 8px; }
    .exec-table { font-size: 0.65rem; display: block; overflow-x: auto; }
    .exec-table thead { display: table-header-group; }
    .exec-table tbody { display: table-row-group; }
    .exec-table tr { display: table-row; }
    .exec-table th, .exec-table td { display: table-cell; white-space: nowrap; padding: 5px 6px; }
    .mini-progress { width: 40px; }
    .badge-pill { font-size: 0.6rem; padding: 2px 6px; }
    .status-pill { font-size: 0.6rem; padding: 2px 6px; }
    .severity-bar-track { height: 16px; }
    .severity-bar-fill { height: 100%; }
    .issue-summary { flex-direction: column; gap: 8px; }
    .issue-stat { padding: 8px; }
    .login-btn, .demo-btn { min-height: 44px; }
    .btn { min-height: 44px; }
    .modal-dialog { margin: 10px; max-width: calc(100% - 20px); }
    .modal-body { padding: 12px; }
    .form-control { min-height: 44px; font-size: 16px; }
    .input-group-text { min-height: 44px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Extra small (< 375px) */
@media (max-width: 375px) {
    .kpi-strip { grid-template-columns: 1fr; }
    .kpi-strip-item { flex-direction: row; justify-content: space-between; }
    .exec-header { font-size: 0.7rem; }
    .exec-live { font-size: 0.65rem; padding: 3px 8px; }
    .company-logos-login img { height: 50px; }
    .company-name-login { font-size: 0.9rem; }
    .login-left-content p { font-size: 0.8rem; }
    .login-feature { font-size: 0.8rem; }
    .login-feature i { width: 28px; height: 28px; font-size: 0.75rem; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .sidebar-nav .nav-link { padding: 12px 16px; min-height: 48px; }
    .kpi-strip-item:hover { transform: none; }
    .demo-btn:active { background: #e2e8f0; }
    .login-btn:active { transform: scale(0.98); }
    .exec-panel:hover { transform: none; }
}

/* Safe area for notch devices */
@supports (padding: env(safe-area-inset-top)) {
    .top-navbar { padding-top: env(safe-area-inset-top); }
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* Print styles */
@media print {
    .sidebar, .top-navbar, .sidebar-toggle { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-content { padding: 10px !important; }
    .exec-panel { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    .exec-header { background: #1e293b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}