/* assets/css/responsive.css */

/* Large Tablets */
@media (max-width: 1199px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    
    .charts-grid,
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablets */
@media (max-width: 991px) {
    .sidebar {
        width: 240px;
    }
    
    .main-content {
        margin-left: 240px;
    }
    
    .footer {
        margin-left: 240px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .card-count {
        font-size: var(--font-3xl);
    }
}

/* Mobile Landscape / Small Tablets */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        z-index: 1001;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
        padding: 20px;
    }
    
    .footer {
        margin-left: 0;
    }
    
    .header {
        padding: 0 16px;
    }
    
    .header-right {
        gap: 10px;
    }
    
    .tool-status-indicator {
        padding: 4px 12px;
        font-size: 0.7em;
    }
    
    .live-clock {
        display: none;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px;
    }
    
    .card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1em;
    }
    
    .card-count {
        font-size: var(--font-2xl);
    }
    
    .filter-bar {
        flex-direction: column;
    }
    
    .search-form {
        flex-direction: column;
    }
    
    .data-table thead {
        display: none;
    }
    
    .data-table tbody td {
        display: block;
        padding: 10px 16px;
        text-align: right;
    }
    
    .data-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: var(--font-xs);
    }
    
    .data-table tbody td:last-child {
        border-bottom: 2px solid var(--border);
    }
    
    .action-btns {
        justify-content: flex-end;
    }
    
    .charts-grid .chart-container {
        height: 300px;
    }
    
    .login-card {
        padding: 30px 24px;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .main-content {
        padding: 14px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .stat-card {
        padding: 14px;
        gap: 8px;
    }
    
    .card-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9em;
        border-radius: var(--radius-sm);
    }
    
    .card-count {
        font-size: var(--font-xl);
    }
    
    .card-label {
        font-size: var(--font-xs);
    }
    
    .page-header h2 {
        font-size: var(--font-lg);
    }
    
    .header .brand-name {
        font-size: var(--font-md);
    }
    
    .btn {
        padding: 8px 16px;
        font-size: var(--font-xs);
    }
    
    .login-card {
        padding: 24px 18px;
    }
    
    .login-header h1 {
        font-size: var(--font-xl);
    }
    
    .login-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8em;
    }
    
    .sidebar {
        width: 100%;
        max-width: 300px;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Very Small Devices */
@media (max-width: 360px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .stat-card {
        flex-direction: row;
        text-align: left;
    }
}