/* Responsive Styles */

/* 大屏 (>= 1920px) */
@media (min-width: 1920px) {
    .password-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 笔记本 (1024px - 1919px) */
@media (min-width: 1024px) and (max-width: 1919px) {
    .password-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 平板 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: 200px;
    }

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

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

    .header-center {
        max-width: 400px;
    }
}

/* 手机 (<= 767px) */
@media (max-width: 767px) {
    .header {
        padding: 0 10px;
    }

    .header-center {
        display: none;
    }

    .logo {
        font-size: 16px;
    }

    .sidebar {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        width: 80%;
        max-width: 280px;
        z-index: 999;
        transition: left 0.3s ease;
        box-shadow: var(--shadow-lg);
    }

    .sidebar.open {
        left: 0;
    }

    .content {
        padding: 15px;
    }

    .password-grid {
        grid-template-columns: 1fr;
    }

    .dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-icon {
        font-size: 24px;
    }

    .stat-info h3 {
        font-size: 20px;
    }

    .password-card {
        padding: 15px;
    }

    .modal {
        width: 95%;
        padding: 20px;
    }

    .modal-header h2 {
        font-size: 20px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .section-header .btn {
        width: 100%;
    }

    .login-box {
        padding: 30px 20px;
    }

    .login-header h1 {
        font-size: 24px;
    }
}

/* 超小屏幕 (<= 480px) */
@media (max-width: 480px) {
    .dashboard {
        grid-template-columns: 1fr;
    }

    .password-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .password-field-value {
        width: 100%;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-icon {
        min-height: 44px;
        min-width: 44px;
    }

    .category-item {
        padding: 15px;
    }

    .password-card {
        padding: 18px;
    }
}

/* 打印样式 */
@media print {
    .header,
    .sidebar,
    .btn,
    .modal-overlay {
        display: none !important;
    }

    .content {
        margin: 0;
        padding: 0;
    }

    .password-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}