/* ========================================
   Auto Claude - Responsive Design System
   Mobile-First Approach | iOS Safe Areas
   ======================================== */

/* ==========================================
   SAFE AREA SUPPORT
   ----------------------------------------
   iOS notch, home bar, tablet bezels
   ========================================== */

/* Safe area değişkenleri */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Body safe area padding */
body {
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* App container safe area */
.app-container {
    padding-top: var(--safe-area-top);
}

/* ==========================================
   TOUCH TARGET MINIMUM SIZES
   ----------------------------------------
   Apple HIG: minimum 44x44pt
   ========================================== */

/* Tüm interaktif elemanlar minimum 44px */
.btn-circle,
.header-btn,
.quick-action-btn,
.toggle-pill,
.segment-btn,
.filter-btn,
.docs-tab,
.task-action-btn,
.input-btn,
.log-item-delete,
.stable-tag-rollback,
.task-menu-item,
.approval-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Daha küçük butonları büyüt */
.task-action-btn {
    width: 36px;
    height: 36px;
}

/* Input alanları */
.chat-input,
.chat-textarea,
.repo-input,
.history-search-box input {
    min-height: 44px;
}

/* ==========================================
   BASE RESPONSIVE - MOBILE FIRST
   ----------------------------------------
   0 - 479px: Extra Small (phones)
   ========================================== */

/* App Header - kompakt */
.app-header {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
}

.app-title {
    font-size: var(--text-body-sm);
}

.logo-icon {
    font-size: var(--text-h4);
}

/* Status indicator - küçült */
.status-indicator {
    padding: var(--space-1) var(--space-2);
}

.status-label {
    font-size: var(--text-micro);
}

/* Control Panel - dikey stack */
.control-panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

/* Model Segment Control - tam genişlik */
.model-segment-control {
    width: 100%;
    justify-content: center;
}

.segment-btn {
    flex: 1;
    min-width: 0;
    padding: var(--space-2);
}

.segment-label {
    display: none; /* Mobilde sadece ikon */
}

/* Toggle Pills - grid layout */
.toggle-pills-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    width: 100%;
}

.toggle-pill {
    justify-content: center;
    padding: var(--space-2);
}

.pill-label {
    font-size: var(--text-micro);
}

.pill-status {
    display: none; /* Mobilde gizle */
}

/* Status Bar - dikey stack */
.status-bar {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.status-item {
    flex: none;
    width: 100%;
}

/* Quick Actions Bar - horizontal scroll */
.quick-actions-bar {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}

.quick-action-btn {
    min-width: 64px;
    max-width: 80px;
    padding: var(--space-2) var(--space-3);
    min-height: 56px;
}

.action-icon {
    font-size: 18px;
}

.action-label {
    font-size: 9px;
}

/* Task Queue - tam genişlik */
.task-queue-container {
    padding: 0 var(--space-2);
}

/* Task Cards - kompakt */
.task-card {
    min-height: 48px;
}

.task-card-header {
    padding: var(--space-2);
}

.task-card-title {
    font-size: 13px;
}

.task-card-phase {
    font-size: 10px;
}

/* Chat Footer - safe area */
.chat-footer {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-3) + var(--safe-area-bottom));
}

.chat-input-inline {
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
}

.chat-input {
    font-size: var(--text-body-sm);
}

/* Overlay Panels - full screen mobile sheet */
.log-viewer-overlay {
    border-radius: 0;
}

.log-viewer-header {
    padding: var(--space-2) var(--space-3);
    padding-top: calc(var(--space-2) + var(--safe-area-top));
}

.log-viewer-title {
    font-size: var(--text-body-sm);
}

/* Docs tabs - scrollable */
.docs-nav-tabs {
    padding: var(--space-2);
    gap: var(--space-1);
    -webkit-overflow-scrolling: touch;
}

.docs-tab {
    padding: var(--space-2);
    font-size: var(--text-caption);
    white-space: nowrap;
}

.docs-tab-text {
    display: none; /* Mobilde sadece ikon */
}

/* History stats - 2 column grid */
.history-stats-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.history-stat-card {
    min-width: 0;
    padding: var(--space-2);
}

.history-stat-card .stat-value {
    font-size: var(--text-h4);
}

/* History filter bar - vertical stack */
.history-filter-bar {
    padding: var(--space-2) var(--space-3);
}

.history-filter-group {
    flex-direction: column;
    width: 100%;
}

.history-filter-group select {
    width: 100%;
    min-width: 0;
}

/* History items - kompakt */
.history-item {
    padding: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.history-item-main {
    width: 100%;
}

.history-item-right {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

/* Changelog timeline - kompakt */
.changelog-timeline {
    padding-left: var(--space-4);
}

.changelog-entry {
    padding: var(--space-3);
}

/* Roadmap phases - kompakt */
.roadmap-phase-item {
    padding: var(--space-3);
    flex-wrap: wrap;
}

.phase-id {
    width: 100%;
    text-align: center;
    margin-top: var(--space-2);
}

/* ==========================================
   SMALL TABLETS & LARGE PHONES
   ----------------------------------------
   480px - 767px
   ========================================== */

@media (min-width: 480px) {
    /* App Header - biraz genişlet */
    .app-header {
        padding: var(--space-3) var(--space-4);
    }

    .app-title {
        font-size: var(--text-h4);
    }

    /* Control Panel - yatay düzen */
    .control-panel {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: var(--space-3) var(--space-4);
    }

    .model-segment-control {
        width: auto;
        flex: 0 1 auto;
    }

    .segment-label {
        display: inline; /* Tablet'te göster */
    }

    /* Toggle Pills - 4 column grid */
    .toggle-pills-group {
        grid-template-columns: repeat(4, 1fr);
        width: auto;
        flex: 1;
    }

    .pill-status {
        display: inline; /* Tablet'te göster */
    }

    /* Status Bar - yatay */
    .status-bar {
        flex-direction: row;
        padding: var(--space-2) var(--space-4);
    }

    .status-item {
        flex: 1;
        width: auto;
    }

    /* Quick Actions - centered */
    .quick-actions-bar {
        justify-content: center;
        padding: var(--space-2) var(--space-4);
    }

    .quick-action-btn {
        max-width: 90px;
    }

    /* Task Queue */
    .task-queue-container {
        padding: 0 var(--space-3);
    }

    .task-card-title {
        font-size: 14px;
    }

    /* Docs tabs - show text */
    .docs-tab-text {
        display: inline;
    }

    /* History stats - 3 column */
    .history-stats-section {
        grid-template-columns: repeat(3, 1fr);
    }

    /* History filter - row */
    .history-filter-group {
        flex-direction: row;
        width: auto;
    }

    .history-filter-group select {
        width: auto;
        min-width: 120px;
    }

    /* History items - row layout */
    .history-item {
        flex-direction: row;
        align-items: center;
    }

    .history-item-right {
        flex-direction: column;
        align-items: flex-end;
        width: auto;
    }

    /* Roadmap phases */
    .roadmap-phase-item {
        flex-wrap: nowrap;
    }

    .phase-id {
        width: auto;
        margin-top: 0;
    }
}

/* ==========================================
   TABLETS & SMALL DESKTOPS
   ----------------------------------------
   768px - 1023px
   ========================================== */

@media (min-width: 768px) {
    /* App Header - full */
    .app-header {
        padding: var(--space-3) var(--space-4);
    }

    .app-title {
        font-size: var(--text-h4);
    }

    .status-indicator {
        padding: var(--space-1) var(--space-3);
    }

    .status-label {
        font-size: var(--text-caption);
    }

    /* Control Panel */
    .control-panel {
        flex-wrap: nowrap;
        gap: var(--space-4);
    }

    /* Toggle Pills - flex row */
    .toggle-pills-group {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
    }

    .toggle-pill {
        flex: 0 1 auto;
    }

    /* Status Bar */
    .status-bar {
        gap: var(--space-3);
    }

    /* Quick Actions */
    .quick-actions-bar {
        gap: var(--space-3);
        overflow-x: visible;
    }

    .quick-action-btn {
        min-width: 72px;
        max-width: 100px;
        min-height: 64px;
        padding: var(--space-3) var(--space-4);
    }

    .action-icon {
        font-size: 22px;
    }

    .action-label {
        font-size: var(--text-micro);
    }

    /* Task Queue */
    .task-queue-container {
        padding: 0 var(--space-4);
    }

    .task-card {
        min-height: 56px;
    }

    /* Chat Footer */
    .chat-footer {
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-4) + var(--safe-area-bottom));
    }

    /* Overlay Panels - modal style */
    .log-viewer-overlay {
        padding: var(--space-4);
        background: rgba(0, 0, 0, 0.7);
    }

    .log-viewer-overlay > *:not(.log-viewer-header):not(.log-filter-bar):not(.log-list-container):not(.log-content-view):not(.update-panel-content):not(.docs-nav-tabs):not(.docs-content-area):not(.history-stats-section):not(.history-filter-bar):not(.history-list-view):not(.history-detail-view):not(.history-search-results) {
        max-width: 800px;
        margin: 0 auto;
        border-radius: var(--radius-2xl);
    }

    /* History stats - 5 column */
    .history-stats-section {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================
   DESKTOPS
   ----------------------------------------
   1024px+
   ========================================== */

@media (min-width: 1024px) {
    /* Max width container */
    .app-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Quick Actions - daha geniş */
    .quick-action-btn {
        min-width: 80px;
        max-width: 110px;
    }

    /* Overlay Panels - centered modal */
    .log-viewer-overlay {
        padding: var(--space-8);
    }
}

/* ==========================================
   LARGE DESKTOPS
   ----------------------------------------
   1280px+
   ========================================== */

@media (min-width: 1280px) {
    .app-container {
        max-width: 1400px;
    }
}

/* ==========================================
   LANDSCAPE MODE ADJUSTMENTS
   ----------------------------------------
   Phones in landscape
   ========================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Kompakt header */
    .app-header {
        padding: var(--space-1) var(--space-3);
    }

    /* Status bar gizle */
    .status-bar {
        display: none;
    }

    /* Quick actions gizle */
    .quick-actions-bar {
        display: none;
    }

    /* Control panel kompakt */
    .control-panel {
        padding: var(--space-1) var(--space-3);
    }

    /* Task queue daha fazla alan */
    .task-queue-container {
        flex: 1;
    }

    /* Chat footer kompakt */
    .chat-footer {
        padding: var(--space-1) var(--space-3);
    }
}

/* ==========================================
   REDUCED MOTION
   ----------------------------------------
   Accessibility: Hareket azaltma
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   HIGH CONTRAST MODE
   ----------------------------------------
   Accessibility: Yüksek kontrast
   ========================================== */

@media (prefers-contrast: high) {
    :root {
        --border-primary: rgba(255, 255, 255, 0.3);
        --border-secondary: rgba(255, 255, 255, 0.25);
        --border-tertiary: rgba(255, 255, 255, 0.2);
    }

    .task-card,
    .stat-card,
    .history-item,
    .log-item,
    .quick-action-btn {
        border-width: 2px;
    }
}

/* ==========================================
   PRINT STYLES
   ----------------------------------------
   Yazdırma için optimize
   ========================================== */

@media print {
    .app-header,
    .control-panel,
    .quick-actions-bar,
    .chat-footer,
    .task-card-actions,
    .log-viewer-overlay {
        display: none !important;
    }

    .app-container {
        height: auto;
        overflow: visible;
    }

    .task-queue-container {
        overflow: visible;
    }

    .task-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ==========================================
   DARK MODE SPECIFIC
   ----------------------------------------
   VS Code dark tema uyumu
   ========================================== */

@media (prefers-color-scheme: dark) {
    /* Zaten dark mode, ek ayar gerekmiyor */
}

/* VS Code Light Theme desteği (gelecek için) */
@media (prefers-color-scheme: light) {
    /* Light mode stilleri buraya eklenecek */
}

/* ==========================================
   KEYBOARD NAVIGATION
   ----------------------------------------
   Focus states için iyileştirmeler
   ========================================== */

/* Focus-visible desteği olmayan tarayıcılar için fallback */
@supports not selector(:focus-visible) {
    *:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
}

/* ==========================================
   HOVER STATES - TOUCH DEVICES
   ----------------------------------------
   Touch cihazlarda hover efektlerini kaldır
   ========================================== */

@media (hover: none) {
    .task-card:hover,
    .quick-action-btn:hover,
    .toggle-pill:hover,
    .history-item:hover,
    .log-item:hover {
        transform: none;
        box-shadow: none;
    }

    /* Touch için active state kullan */
    .task-card:active,
    .quick-action-btn:active,
    .toggle-pill:active {
        transform: scale(0.98);
    }
}

/* ==========================================
   STICKY ELEMENTS FIX
   ----------------------------------------
   iOS Safari sticky fix
   ========================================== */

@supports (-webkit-touch-callout: none) {
    .app-header,
    .control-panel,
    .chat-footer {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}