/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }

    :root {
        --sidebar-width: 220px;
    }

    .main-content {
        padding: 24px;
    }

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

@media (max-width: 768px) {
    :root {
        --sidebar-width: 64px;
    }

    .sidebar {
        width: 64px;
    }

    .sidebar .logo span {
        display: none;
    }

    .sidebar .logo {
        justify-content: center;
        padding: 20px 12px;
    }

    .sidebar-nav {
        padding: 12px 8px;
    }

    .nav-item {
        justify-content: center;
        padding: 12px;
    }

    .nav-item span {
        display: none;
    }

    .nav-item-logout {
        justify-content: center;
        padding: 12px;
    }

    .nav-item-logout span {
        display: none;
    }

    .sidebar-logout span {
        display: none;
    }

    .sidebar-logout {
        justify-content: center;
        padding: 12px;
    }

    .back-home span {
        display: none;
    }

    .back-home {
        justify-content: center;
    }

    .sidebar-theme span {
        display: none;
    }

    .sidebar-theme {
        justify-content: center;
        padding: 12px;
    }

    .main-content {
        padding: 20px 16px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-left,
    .filters-right {
        width: 100%;
    }

    .filters-right {
        flex-wrap: wrap;
    }

    .filters-date {
        flex-wrap: wrap;
        flex: 1;
    }

    .filter-select,
    .filter-select--compact {
        width: 100%;
        min-width: unset;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    .modal-content {
        max-width: 100%;
        margin: 10px;
    }
}

@media (max-width: 480px) {
    :root {
        --sidebar-width: 56px;
    }

    .sidebar {
        width: 56px;
    }

    .main-content {
        padding: 14px 10px;
    }

    /* ---- Typography & page header ---- */
    .page-header h1 {
        font-size: 20px;
    }

    .page-header {
        gap: 10px;
        margin-bottom: 16px;
    }

    /* ---- Buttons compact ---- */
    .btn-primary {
        padding: 9px 14px;
        font-size: 13px;
    }

    .btn-secondary {
        padding: 7px 12px;
        font-size: 13px;
    }

    /* ---- Modal: tighter padding on small screens ---- */
    .modal {
        padding: 8px;
    }

    .modal-content {
        margin: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .modal form,
    .modal-body {
        padding: 16px;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-actions {
        padding: 12px 16px 16px;
    }

    /* ---- Inputs compact ---- */
    .input-field,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    select {
        padding: 9px 12px;
        font-size: 13px;
        /* Prevent iOS Safari intrinsic min-width from overflowing modal */
        min-width: 0;
        max-width: 100%;
    }

    .filter-select {
        padding: 8px 12px;
        font-size: 12px;
    }

    .proj-select-trigger {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* ---- Date filter pill: compact quick-picks and date inputs ---- */
    .date-quick {
        padding: 3px 7px;
        font-size: 11px;
    }

    /* Specificity 0,2,1 — beats components.css input[type="date"] (0,1,1) */
    .filters-date input[type="date"] {
        width: 82px;
        font-size: 11px;
        padding: 2px 4px;
    }

    .filters-date {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Force date inputs onto their own row — pipe becomes a zero-height full-width spacer */
    .date-sep-pipe {
        flex-basis: 100%;
        height: 0;
        background: none;
        border: none;
    }

    /* ---- Project color bars: wider for visibility ---- */
    .entry-item,
    .today-project-item,
    .project-stat-item,
    .project-card {
        border-left-width: 8px;
    }

    .group-card {
        border-left-width: 8px;
    }

    /* ---- Project cards: compact on mobile (group cards stay large) ---- */
    .project-card {
        padding: 10px 14px;
        gap: 8px;
    }

    .project-card h3 {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .project-card p {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .project-mini-chart {
        gap: 3px;
    }

    .mini-bar {
        width: 7px;
    }

    .mini-bar-label {
        font-size: 8px;
    }

    .entry-card-color {
        width: 8px;
    }

    /* ---- Modal: clip iOS native date/time input overflow ---- */
    .modal .form-group {
        overflow: hidden;
    }

    /* ---- Section cards: reduce padding ---- */
    .chart-section,
    .recent-entries,
    .today-projects-summary,
    .projects-stats,
    .entries-table-container,
    .projects-management,
    .prog-donut-panel,
    .prog-scrubber-section,
    .prog-gaps-panel {
        padding: 16px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
    }

    .stat-value {
        font-size: 20px;
    }

    /* ---- Overview entry items compact ---- */
    .entry-item {
        padding: 10px 12px;
    }

    .entry-info h3 {
        font-size: 13px;
    }

    .entry-duration {
        font-size: 14px;
    }

    /* ---- Login / account boxes ---- */
    .login-box {
        padding: 24px 16px;
    }

    .export-box,
    .account-info {
        padding: 16px;
    }

    /* ---- Projects: single column grids ---- */
    .groups-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Filter bar collapse on mobile ---- */
    .filters-toggle-btn {
        display: inline-flex !important;
    }

    #entriesFilterBar {
        display: none;
        margin-bottom: 12px;
    }

    #entriesFilterBar.open {
        display: flex;
    }

    /* ---- Progress controls stack ---- */
    .prog-controls-row {
        width: 100%;
    }

    .prog-range-picker {
        width: 100%;
    }

    /* ---- Progress tab: reorder sections so play/scrubber sits under controls ---- */
    .prog-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .prog-controls-row      { order: 1; }
    .prog-scrubber-section  { order: 2; }
    .prog-donuts-row        { order: 3; }
    .prog-gaps-row          { order: 4; }

    /* ---- Progress donut/gap panels already stack at 768px ---- */
    /* Extra tightening for tiny screens */
    .prog-donut-svg {
        width: 160px !important;
        height: 160px !important;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {

    .btn-primary:hover,
    .btn-secondary:hover,
    .stat-card:hover,
    .project-card:hover {
        transform: none;
    }
}