/* 响应式样式文件 */

/* 基础响应式断点 */
/* 
  xs: 0-575px (手机竖屏)
  sm: 576-767px (手机横屏)
  md: 768-991px (平板竖屏)
  lg: 992-1199px (平板横屏/小屏笔记本)
  xl: 1200px+ (桌面)
*/

/* 超大屏幕优化 (1400px+) */
@media (min-width: 1400px) {
    .hospital-dashboard {
        padding: 30px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
    }
    
    .stat-card {
        padding: 30px;
    }
    
    .dashboard-main {
        gap: 40px;
    }
    
    .widget-header {
        padding: 24px 30px;
    }
    
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .bed-item {
        width: 120px;
        height: 120px;
        font-size: 14px;
    }
}

/* 大屏幕 (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .hospital-dashboard {
        padding: 25px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 25px;
    }
    
    .dashboard-main {
        gap: 35px;
    }
}

/* 中大屏幕 (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hospital-dashboard {
        padding: 20px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .dashboard-main {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 平板竖屏 (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .main-content {
        margin-left: 0;
        padding-top: 70px;
    }
    
    .hospital-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1001;
    }
    
    .hospital-sidebar.open {
        transform: translateX(0);
    }
    
    .hospital-dashboard {
        padding: 15px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-card {
        padding: 18px;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .stat-number {
        font-size: 26px;
    }
    
    .dashboard-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 6px;
    }
    
    .bed-item {
        width: 50px;
        height: 50px;
        font-size: 10px;
    }
    
    .widget-header {
        padding: 16px 20px;
    }
    
    .widget-header h2 {
        font-size: 16px;
    }
    
    .patient-list,
    .alert-list,
    .bed-grid-container,
    .chart-container {
        padding: 16px 20px 20px;
    }
    
    .chart-container {
        height: 250px;
    }
    
    .quick-actions {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .quick-action-btn {
        padding: 12px 16px;
        flex-direction: column;
        text-align: center;
    }
    
    .quick-action-btn i {
        margin-right: 0;
        margin-bottom: 8px;
        font-size: 24px;
    }
}

/* 手机横屏 (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .main-content {
        margin-left: 0;
        padding-top: 70px;
    }
    
    .hospital-sidebar {
        transform: translateX(-100%);
        width: 260px;
    }
    
    .hospital-dashboard {
        padding: 12px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-right: 12px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 13px;
    }
    
    .dashboard-main {
        gap: 15px;
    }
    
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        gap: 5px;
        max-height: 300px;
    }
    
    .bed-item {
        width: 45px;
        height: 45px;
        font-size: 9px;
    }
    
    .bed-legend {
        gap: 12px;
        justify-content: center;
    }
    
    .legend-item {
        font-size: 11px;
    }
    
    .patient-card {
        padding: 12px;
    }
    
    .patient-avatar {
        width: 40px;
        height: 40px;
    }
    
    .patient-name {
        font-size: 15px;
    }
    
    .patient-details {
        font-size: 13px;
    }
    
    .alert-item {
        padding: 10px 14px;
    }
    
    .alert-title {
        font-size: 13px;
    }
    
    .alert-description {
        font-size: 12px;
    }
    
    .chart-container {
        height: 220px;
        padding: 16px;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .quick-action-btn {
        padding: 12px;
        font-size: 13px;
    }
    
    .quick-action-btn i {
        font-size: 18px;
    }
}

/* 手机竖屏 (最大575px) */
@media (max-width: 575px) {
    .main-content {
        margin-left: 0;
        padding-top: 70px;
    }
    
    .hospital-sidebar {
        transform: translateX(-100%);
        width: 100%;
    }
    
    .hospital-dashboard {
        padding: 10px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .stat-card {
        padding: 16px;
        flex-direction: column;
        text-align: center;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 12px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .stat-label {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .dashboard-main {
        gap: 15px;
    }
    
    .widget {
        margin-bottom: 15px;
    }
    
    .widget-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .widget-header h2 {
        font-size: 16px;
    }
    
    .bed-legend {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    .legend-item {
        font-size: 10px;
    }
    
    .bed-grid-container {
        padding: 12px 16px 16px;
    }
    
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 4px;
        max-height: 250px;
    }
    
    .bed-item {
        width: 40px;
        height: 40px;
        font-size: 8px;
        border-radius: 6px;
    }
    
    .patient-list,
    .alert-list {
        padding: 12px 16px 16px;
    }
    
    .patient-card {
        padding: 10px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .patient-avatar {
        width: 50px;
        height: 50px;
        margin-right: 0;
        margin-bottom: 8px;
    }
    
    .patient-info {
        margin-bottom: 8px;
    }
    
    .patient-name {
        font-size: 16px;
        margin-bottom: 4px;
    }
    
    .patient-details {
        font-size: 14px;
    }
    
    .patient-status {
        align-self: center;
    }
    
    .alert-item {
        padding: 8px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .alert-icon {
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .alert-title {
        font-size: 14px;
    }
    
    .alert-description {
        font-size: 12px;
    }
    
    .chart-container {
        height: 200px;
        padding: 12px 16px 16px;
    }
    
    .chart-controls {
        margin-bottom: 12px;
    }
    
    .chart-controls select {
        width: 100%;
        padding: 8px 12px;
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 15px;
    }
    
    .quick-action-btn {
        padding: 14px 16px;
        justify-content: center;
    }
    
    .quick-action-btn i {
        font-size: 20px;
        margin-right: 10px;
    }
    
    .quick-action-btn span {
        font-size: 14px;
    }
}

/* 超小屏幕 (最大375px) */
@media (max-width: 375px) {
    .hospital-dashboard {
        padding: 8px;
    }
    
    .stats-grid {
        gap: 8px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    .stat-trend {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .widget-header {
        padding: 12px 14px;
    }
    
    .widget-header h2 {
        font-size: 14px;
    }
    
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
        gap: 3px;
    }
    
    .bed-item {
        width: 35px;
        height: 35px;
        font-size: 7px;
    }
    
    .patient-avatar {
        width: 45px;
        height: 45px;
    }
    
    .patient-name {
        font-size: 15px;
    }
    
    .patient-details {
        font-size: 13px;
    }
    
    .chart-container {
        height: 180px;
        padding: 10px 14px 14px;
    }
    
    .quick-action-btn {
        padding: 12px 14px;
    }
    
    .quick-action-btn i {
        font-size: 18px;
    }
    
    .quick-action-btn span {
        font-size: 13px;
    }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .hospital-sidebar {
        width: 240px;
    }
    
    .sidebar-header {
        padding: 16px;
    }
    
    .brand-text h3 {
        font-size: 16px;
    }
    
    .nav-link {
        padding: 8px 16px;
    }
    
    .sidebar-footer {
        padding: 12px 16px;
    }
    
    .user-info {
        margin-bottom: 12px;
        padding: 8px;
    }
    
    .chart-container {
        height: 150px;
    }
    
    .bed-grid {
        max-height: 200px;
    }
}

/* 打印样式 */
@media print {
    .hospital-sidebar,
    .quick-actions,
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    .hospital-dashboard {
        padding: 20px !important;
        background: #fff !important;
    }
    
    .stat-card,
    .widget {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        break-inside: avoid;
    }
    
    .dashboard-main {
        grid-template-columns: 1fr !important;
    }
    
    .chart-container {
        height: auto !important;
    }
    
    .bed-grid {
        max-height: none !important;
    }
    
    .patient-card:hover,
    .bed-item:hover,
    .alert-item:hover {
        transform: none !important;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .stat-card,
    .widget {
        border: 2px solid #2d3748;
    }
    
    .bed-item {
        border: 2px solid #fff;
    }
    
    .patient-card {
        border: 2px solid #2d3748;
    }
    
    .alert-item {
        border: 2px solid #2d3748;
        border-left-width: 6px;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .stat-card::before,
    .progress-bar::after,
    .nav-badge,
    .nav-indicator {
        animation: none !important;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .hospital-dashboard {
        background: #1a202c;
        color: #e2e8f0;
    }
    
    .stat-card,
    .widget {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .widget-header {
        border-bottom-color: #4a5568;
        background: #2d3748;
    }
    
    .patient-card {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .alert-item {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .alert-item.warning {
        background: rgba(237, 137, 54, 0.1);
    }
    
    .alert-item.danger {
        background: rgba(245, 101, 101, 0.1);
    }
}