/* ═══════════════════════════════════════════════════════
   NexTask - Tam Responsive Stil Dosyası
   Tüm cihazlarda sorunsuz görüntü için media queries
   Breakpoint'ler: 480px (mobil), 768px (tablet), 1024px (küçük desktop)
═══════════════════════════════════════════════════════ */

/* ── Mobil Sidebar Toggle Butonu ── */
#sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    /* Sidebar'dan (1000) daha üstte olmalı */
    width: 44px;
    /* Standart dokunma alanı */
    height: 44px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

#sidebar-toggle-btn:active {
    transform: scale(0.95);
}

#sidebar-toggle-btn svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
    /* İkonun tıklamayı engellemesini önle */
}

/* ── Sidebar Overlay (Mobil) ── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Varsayılan olarak tıklamaları alt katmana geçir */
}

#sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
    /* Sidebar açıkken tıklanabilir yap (kapatmak için) */
}


/* ═══════════════════════════════════════════
   TABLET & KÜÇÜK DESKTOP (max-width: 1024px)
═════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Body padding küçült */
    body {
        padding: 8px !important;
        gap: 8px !important;
    }

    /* Sidebar daralt */
    #todo-container-sidebar {
        width: 260px !important;
    }

    /* Header view butonları - yazı gizle, sadece ikon */
    #view-switch-group button {
        font-size: 0;
        padding: 8px !important;
    }

    /* Kanban kolonları */
    .kanban-column {
        min-width: 250px;
        max-width: 350px;
    }

    /* Pomodoro panel */
    .pomo-panel {
        width: 95vw;
    }

    .pomo-left {
        width: 320px;
        min-width: 320px;
        padding: 36px 28px 32px;
    }

    .pomo-time {
        font-size: 88px;
        letter-spacing: -4px;
    }

    /* Radyo grid'i yeniden düzenle */
    .pomo-radio-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
    }

    /* Radyo dashboard kontrolleri */
    .rd-content {
        flex-wrap: wrap;
        gap: 16px;
    }

    .rd-volume {
        width: 100%;
    }

    /* Arama modalı */
    #search-modal .modal-content {
        max-width: 95vw !important;
    }

    /* Kesinti modalı */
    #interruptions-modal .modal-content {
        max-width: 95vw !important;
    }
}


/* ═══════════════════════════════════════════
   TABLET (max-width: 768px)
═════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Body ayarları */
    body {
        padding: 0 !important;
        gap: 0 !important;
        flex-direction: column !important;
    }

    /* Mobil sidebar toggle göster */
    #sidebar-toggle-btn {
        display: flex;
    }

    /* Sidebar mobil overlay moduna geç */
    #todo-container-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 1000 !important;
        border-radius: 0 16px 16px 0 !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: var(--shadow-xl) !important;
    }

    #todo-container-sidebar.mobile-open {
        transform: translateX(0) !important;
        display: flex !important;
    }

    #sidebar-overlay {
        display: block;
    }

    /* Main container tam genişlik */
    #todo-container-main {
        width: 100vw !important;
        border-radius: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* Header düzeni */
    #main-header {
        padding: 8px 12px !important;
        height: auto !important;
        min-height: 52px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Proje başlığı kısalt */
    #current-project-title {
        max-width: 120px !important;
        font-size: 12px !important;
    }

    /* Header sol taraftaki pulse dot + title + separator */
    #header-left {
        gap: 8px !important;
        flex-wrap: wrap;
    }

    /* View butonlarını sadece ikon yap */
    #view-switch-group {
        gap: 2px;
    }

    #view-list-btn,
    #view-kanban-btn,
    #view-timeline-btn,
    #view-notes-btn {
        font-size: 0 !important;
        padding: 6px 8px !important;
        gap: 0 !important;
    }

    #view-list-btn svg,
    #view-list-btn i,
    #view-kanban-btn svg,
    #view-kanban-btn i,
    #view-timeline-btn svg,
    #view-timeline-btn i,
    #view-notes-btn svg,
    #view-notes-btn i {
        width: 16px !important;
        height: 16px !important;
    }

    /* Header sağ taraf */
    #header-right {
        gap: 6px !important;
    }

    /* Header'daki ayraçları gizle */
    #header-left .h-6.w-px,
    #header-right .h-6.w-px {
        display: none !important;
    }

    /* Pomodoro widget */
    .pomodoro-widget {
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    .pomodoro-widget-time {
        font-size: 13px !important;
    }

    .pomodoro-widget-mode {
        display: none !important;
    }

    /* Arama butonu */
    #global-search-btn span {
        display: none !important;
    }

    #global-search-btn kbd {
        display: none !important;
    }

    #global-search-btn {
        padding: 6px 8px !important;
    }

    /* Yeni Sütun butonu */
    #add-column-btn {
        font-size: 0 !important;
        padding: 6px 8px !important;
    }

    /* Sidebar header left kısmına padding ekle (hamburger butonla çakışma önleme) */
    #todo-container-sidebar>.p-4:first-child {
        padding-left: 16px !important;
    }

    /* Liste görünümü - Input alanı */
    #list-view-container .sticky {
        padding: 8px 12px !important;
    }

    #todo-input {
        padding-right: 8px !important;
        font-size: 13px !important;
    }

    /* Tarih input gizle, sadece tıklanma ile göster */
    #new-todo-date {
        width: 24px !important;
        padding: 4px !important;
    }

    /* Todo listesi */
    #todo-list {
        padding: 8px 12px !important;
    }

    /* Kanban görünümü */
    #kanban-view-container {
        padding: 12px !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    .kanban-column {
        min-width: 260px !important;
        max-width: 280px !important;
        height: calc(100vh - 140px) !important;
        height: calc(100dvh - 140px) !important;
    }

    /* Timeline görünümü */
    #timeline-view-container {
        padding: 12px !important;
        height: calc(100vh - 100px) !important;
        height: calc(100dvh - 100px) !important;
    }

    .calendar-grid {
        gap: 4px !important;
    }

    .calendar-day {
        min-height: 70px !important;
        padding: 6px !important;
    }

    .calendar-month-title {
        font-size: 16px !important;
        min-width: 150px !important;
    }

    .calendar-legend {
        display: none !important;
    }

    /* Notes görünümü */
    #notes-view-container {
        padding: 12px !important;
        height: calc(100vh - 100px) !important;
        height: calc(100dvh - 100px) !important;
    }

    #notes-view-container .max-w-6xl {
        padding: 0 !important;
    }

    /* Kayıt (logs) - düzenle */
    .log-item-minimal {
        width: 100% !important;
        height: auto !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .log-content-area {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .log-time-area {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .log-action-btn {
        width: 32px !important;
        height: 32px !important;
    }

    /* Detail Modal - tam ekran */
    .detail-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    .detail-body {
        flex-direction: column !important;
    }

    .detail-info {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        max-height: 35vh !important;
        padding: 16px !important;
    }

    .detail-subtasks {
        padding: 12px !important;
    }

    .detail-kanban {
        flex-direction: column !important;
        overflow-y: auto !important;
        gap: 12px !important;
    }

    .detail-column {
        min-width: 100% !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .detail-title {
        font-size: 16px !important;
    }

    /* Pomodoro Panel - tam dikey */
    .pomo-panel {
        flex-direction: column !important;
        width: 95vw !important;
        max-width: 440px !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
    }

    .pomo-left {
        width: 100% !important;
        min-width: 0 !important;
        padding: 28px 20px 24px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .pomo-time {
        font-size: 64px !important;
        letter-spacing: -3px !important;
        margin: 4px 0 16px !important;
    }

    .pomo-play-btn {
        width: 60px !important;
        height: 60px !important;
    }

    .pomo-ctrl-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .pomo-right {
        max-height: 50vh !important;
    }

    /* Pomodoro sekme barı kaydırılabilir */
    .pomo-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }

    .pomo-tabs::-webkit-scrollbar {
        display: none;
    }

    .pomo-tab {
        padding: 12px 14px !important;
        font-size: 11px !important;
        gap: 6px !important;
    }

    .pomo-tab-pane {
        padding: 16px !important;
    }

    /* Pomodoro radyo grid */
    .pomo-radio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
    }

    /* Radio dashboard kontroller */
    .rd-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .rd-info {
        gap: 12px !important;
    }

    .rd-controls {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .rd-ctrl-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .rd-volume {
        width: 100% !important;
    }

    /* Sesler sekmesi */
    .pomo-sounds-grid {
        grid-template-columns: 1fr !important;
    }

    /* Arama modalı */
    #search-modal .modal-content {
        max-width: 100vw !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }

    #search-modal .flex.flex-col.lg\:flex-row {
        flex-direction: column !important;
        height: auto !important;
        max-height: calc(100vh - 70px) !important;
        max-height: calc(100dvh - 70px) !important;
    }

    /* Arama filtre sidebar */
    #search-modal .w-full.lg\:w-72 {
        width: 100% !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 12px !important;
    }

    /* Arama filtre satırları yan yana */
    #search-modal .w-full.lg\:w-72>div {
        display: inline-block;
        vertical-align: top;
        margin-right: 16px;
    }

    /* Arama sonuçları */
    #search-results {
        max-height: 50vh !important;
        padding: 12px !important;
    }

    /* Arama header mobile */
    #search-modal .px-8 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Arama input */
    #search-modal .p-6.border-b {
        padding: 12px !important;
    }

    #search-input {
        padding: 12px 12px 12px 40px !important;
        font-size: 14px !important;
    }

    #search-clear {
        padding: 12px 16px !important;
    }

    /* Kesinti modalı */
    #interruptions-modal .modal-content {
        max-width: 100vw !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }

    #interruptions-modal .flex.flex-col.lg\:flex-row {
        flex-direction: column !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
    }

    #interruptions-modal .w-full.lg\:w-64 {
        width: 100% !important;
        max-height: 150px !important;
        overflow-y: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 12px !important;
    }

    /* Kesinti filtreler */
    #interruptions-modal .p-4.border-b {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    #interruptions-modal .p-4.border-b select,
    #interruptions-modal .p-4.border-b .relative {
        flex: 1 1 100% !important;
    }

    /* Proje modalı */
    #project-modal .modal-content {
        max-width: 95vw !important;
        margin: 8px !important;
    }

    /* Quick add modal */
    #quick-add-modal .modal-content {
        max-width: 95vw !important;
        margin: 8px !important;
    }

    /* Confirm modal */
    #confirm-modal .modal-content {
        max-width: 90vw !important;
    }

    /* Toast */
    #toast {
        right: 12px !important;
        top: 12px !important;
        left: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Mini radio player */
    #mini-radio-player {
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
        min-width: auto !important;
    }

    .mp-controls {
        gap: 4px !important;
    }

    .mp-btn {
        width: 28px !important;
        height: 28px !important;
    }

    /* Kesinti bildir modal */
    .pomo-report-card {
        max-width: 95vw !important;
        margin: 0 8px !important;
    }

    /* Auth container */
    #auth-container .auth-card {
        max-width: 90vw !important;
        padding: 24px !important;
    }

    /* Ayarlar grid */
    .pomo-settings-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* İstatistik grid */
    .pomo-stat-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .pomo-stat-num {
        font-size: 24px !important;
    }
}


/* ═══════════════════════════════════════════
   MOBİL KÜÇÜK (max-width: 480px)
═════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Sidebar daha dar */
    #todo-container-sidebar {
        width: 260px !important;
    }

    /* Header daha compact */
    #main-header {
        padding: 6px 8px !important;
    }

    #current-project-title {
        max-width: 80px !important;
        font-size: 11px !important;
    }

    /* View butonları daha küçük */
    #view-list-btn,
    #view-kanban-btn,
    #view-timeline-btn,
    #view-notes-btn {
        padding: 5px 6px !important;
    }

    /* Pulse dot */
    .w-2.h-2.rounded-full.bg-primary {
        display: none !important;
    }

    /* Task card */
    .task-card {
        padding: 10px !important;
        gap: 8px !important;
    }

    /* Todo input */
    #todo-input {
        font-size: 12px !important;
        padding: 10px 8px 10px 32px !important;
    }

    /* Kanban kartları */
    .kanban-column {
        min-width: 240px !important;
        max-width: 260px !important;
    }

    .kanban-card {
        padding: 10px 12px 4px !important;
    }

    .kanban-card-title {
        font-size: 12px !important;
    }

    /* Calendar daha kompakt */
    .calendar-day {
        min-height: 56px !important;
        padding: 4px !important;
    }

    .calendar-day-number {
        font-size: 11px !important;
    }

    .calendar-weekday {
        font-size: 9px !important;
        padding: 4px !important;
    }

    .calendar-nav-btn {
        width: 30px !important;
        height: 30px !important;
    }

    .calendar-month-title {
        font-size: 14px !important;
        min-width: auto !important;
    }

    .calendar-task-dot {
        width: 16px !important;
        height: 16px !important;
    }

    /* Pomodoro daha kompakt */
    .pomo-time {
        font-size: 52px !important;
        letter-spacing: -2px !important;
    }

    .pomo-play-btn {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
    }

    .pomo-play-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    .pomo-ctrl-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .pomo-phase {
        font-size: 10px !important;
        padding: 4px 12px !important;
    }

    /* Pomodoro tab */
    .pomo-tab {
        padding: 10px 10px !important;
        font-size: 0 !important;
        gap: 0 !important;
    }

    .pomo-tab svg {
        width: 16px !important;
        height: 16px !important;
    }

    .pomo-tab.active {
        font-size: 11px !important;
        gap: 4px !important;
    }

    /* Radyo grid tek sütun */
    .pomo-radio-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .pomo-radio-card {
        padding: 8px 6px !important;
        min-height: 52px !important;
    }

    .radio-name {
        font-size: 0.65rem !important;
    }

    /* Detail modal daha kompakt */
    .detail-header {
        padding: 12px 16px !important;
    }

    .detail-info {
        padding: 12px !important;
        max-height: 30vh !important;
    }

    .detail-title {
        font-size: 14px !important;
    }

    .detail-desc {
        font-size: 12px !important;
    }

    .detail-column-header {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    /* Arama */
    #search-modal .w-10.h-10 {
        display: none !important;
    }

    /* Auth daha kompakt */
    #auth-container .auth-card {
        padding: 20px !important;
    }

    #auth-container .auth-card h2 {
        font-size: 24px !important;
    }

    /* Mini player daha kompakt */
    #mini-radio-player {
        padding: 8px 12px !important;
    }

    .mp-cover {
        width: 32px !important;
        height: 32px !important;
    }

    .mp-title {
        font-size: 11px !important;
    }

    .mp-status {
        font-size: 10px !important;
    }

    /* Confirm modal */
    #confirm-modal .p-6 {
        padding: 16px !important;
    }

    /* Day tasks modal */
    .day-tasks-content {
        width: 95vw !important;
    }

    .day-tasks-header {
        padding: 16px !important;
    }

    .day-tasks-list {
        padding: 12px !important;
    }

    /* Kesinti rapor */
    .pomo-report-card {
        border-radius: 16px !important;
    }

    .pomo-report-header {
        padding: 16px !important;
    }

    .pomo-report-header h3 {
        font-size: 15px !important;
    }

    .pomo-report-body {
        padding: 16px !important;
    }

    .pomo-report-footer {
        padding: 16px !important;
    }
}


/* ═══════════════════════════════════════════
   ÇOK KÜÇÜK EKRANLAR (max-width: 360px)
═════════════════════════════════════════════ */
@media (max-width: 360px) {

    /* Sidebar */
    #todo-container-sidebar {
        width: 240px !important;
    }

    /* Header'dan pomodoro widget gizle */
    .pomodoro-widget {
        display: none !important;
    }

    /* View butonları */
    #view-list-btn,
    #view-kanban-btn,
    #view-timeline-btn,
    #view-notes-btn {
        padding: 4px 5px !important;
    }

    /* Pomo time */
    .pomo-time {
        font-size: 44px !important;
    }
}


/* ═══════════════════════════════════════════
   YENİ BOYUTLAR İÇİN YAPI DÜZELTMELERİ
═════════════════════════════════════════════ */

/* Safe area (iPhone notch vb.) */
@supports (padding: env(safe-area-inset-bottom)) {
    #mini-radio-player {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Yatay modda (landscape) mobil cihazlar */
@media (max-height: 500px) and (orientation: landscape) {

    /* Pomodoro panelin yüksekliğini kısıtla */
    .pomo-panel {
        max-height: 95vh !important;
        max-height: 95dvh !important;
        flex-direction: row !important;
        max-width: 95vw !important;
        width: 95vw !important;
    }

    .pomo-left {
        width: 280px !important;
        min-width: 280px !important;
        padding: 20px !important;
        border-right: 1px solid var(--border) !important;
        border-bottom: none !important;
    }

    .pomo-time {
        font-size: 48px !important;
        margin: 4px 0 12px !important;
    }

    .pomo-play-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .pomo-ctrl-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .pomo-mini-stats {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    /* Detail modal */
    .detail-modal-content {
        height: 100vh !important;
        height: 100dvh !important;
    }

    .detail-body {
        flex-direction: row !important;
    }

    .detail-info {
        width: 35% !important;
        max-height: none !important;
        border-right: 1px solid var(--border) !important;
        border-bottom: none !important;
    }
}


/* ═══════════════════════════════════════════
   TOUCH CİHAZLAR - Dokunma Optimizasyonları
═════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

    /* Hover efektlerini kaldır (touch cihazlarda gereksiz) */
    .task-card:hover {
        transform: none !important;
    }

    .kanban-card:hover {
        transform: none !important;
    }

    .calendar-day.has-tasks:hover {
        transform: none !important;
    }

    /* Butonları daha büyük yap (dokunma hedefi min 44px) */
    .log-action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Sidebar item dokunma alanı */
    .sidebar-item {
        min-height: 44px !important;
    }

    /* Project actions her zaman görünür (hover yok) */
    .project-actions {
        opacity: 1 !important;
    }

    /* Kanban item delete her zaman görünür */
    .detail-kanban-item-delete {
        opacity: 1 !important;
    }

    /* Scroll davranışı */
    #kanban-view-container {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .kanban-column {
        scroll-snap-align: start;
    }

    /* Scrollbar gizle (touch cihazlarda gereksiz) */
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }
}


/* ═══════════════════════════════════════════
   YÜKSEK ÇÖZÜNÜRLÜK (4K vb.)
═════════════════════════════════════════════ */
@media (min-width: 1920px) {

    /* Kanban kolonları biraz daha geniş */
    .kanban-column {
        max-width: 450px;
    }

    /* Pomodoro panel biraz daha büyük */
    .pomo-panel {
        width: 1400px;
    }
}


/* ═══════════════════════════════════════════
   PRINT STILI
═════════════════════════════════════════════ */
@media print {

    #todo-container-sidebar,
    #mini-radio-player,
    #sidebar-toggle-btn,
    .pomodoro-widget,
    #global-search-btn,
    #add-column-btn,
    .modal-overlay {
        display: none !important;
    }

    body {
        background: white !important;
        padding: 0 !important;
    }

    #todo-container-main {
        border: none !important;
        box-shadow: none !important;
    }
}