/* =====================================================================
   FILE: assets/css/responsive.css
   PROJECT: daylikaj
   PURPOSE: Media queries for responsive layouts.
   ===================================================================== */

/* ===============================
   SMALL DEVICES (Mobile ≥ 576px)
   =============================== */
@media (min-width: 576px) {
    .dl-container { padding: var(--spacing-lg); }
    .dl-header .logo { font-size: 22px; }
}

/* ===============================
   MEDIUM DEVICES (Tablet ≥ 768px)
   =============================== */
@media (min-width: 768px) {
    body { font-size: 15px; }

    .dl-balance-row { flex-wrap: nowrap; }
    .dl-badge-balance { min-width: 200px; }

    .dl-job-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    .dl-job-card { margin-bottom: 0; }

    /* Hide bottom nav on tablet+ */
    .dl-bottom-nav { display: none; }
    .dl-main { min-height: calc(100vh - var(--header-height)); }
}

/* ===============================
   LARGE DEVICES (Desktop ≥ 992px)
   =============================== */
@media (min-width: 992px) {
    .dl-container { padding: var(--spacing-lg) var(--spacing-xl); }

    .dl-job-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .dl-sidebar-layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: var(--spacing-lg);
    }

    .dl-sidebar {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: var(--spacing-md);
        box-shadow: var(--shadow-card);
        height: fit-content;
        position: sticky;
        top: calc(var(--header-height) + 16px);
    }

    .dl-sidebar a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: var(--radius-md);
        color: var(--color-text);
        margin-bottom: 4px;
    }
    .dl-sidebar a:hover,
    .dl-sidebar a.active {
        background: rgba(0,128,128,0.08);
        color: var(--color-primary);
    }
}

/* ===============================
   EXTRA LARGE (≥ 1200px)
   =============================== */
@media (min-width: 1200px) {
    .dl-job-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===============================
   MOBILE ONLY (< 576px)
   =============================== */
@media (max-width: 575px) {
    .dl-header { padding: 0 12px; }
    .dl-header .logo { font-size: 18px; }
    .dl-header .user-avatar { width: 32px; height: 32px; }

    .dl-badge-balance {
        padding: 10px 12px;
        font-size: 13px;
    }
    .dl-badge-balance .amount { font-size: 16px; }

    .dl-filter-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .dl-job-card { padding: 12px; }
    .dl-job-card .job-title { font-size: 14px; }
    .dl-job-card .job-price { font-size: 16px; }

    .dl-btn { padding: 9px 16px; font-size: 13px; }

    .dl-toast-container { right: 10px; left: 10px; max-width: none; }
}

/* ===============================
   PRINT STYLES
   =============================== */
@media print {
    .dl-header,
    .dl-bottom-nav,
    .dl-marquee,
    .dl-btn { display: none !important; }

    body { background: #fff; }
}