/* ============================================
   MOBILE RESPONSIVE - Kurumsal Tasarım
   Masaüstüne dokunmadan sadece mobil
   ============================================ */

@media screen and (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }

    body {
        overflow-x: hidden !important;
    }

    .container {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }

    /* --- SIDEBAR: Mobilde tamamen gizle --- */
    .sidebar {
        display: none !important;
    }

    /* --- CONTENT: Tam genişlik --- */
    .content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* --- HEADER: Hamburger menüye dönüştür --- */
    .quick-actions-dashboard {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        display: none !important;
        flex-direction: column !important;
        padding: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .quick-actions-dashboard.mobile-menu-open {
        display: flex !important;
    }

    .quick-actions-dashboard .quick-action-btn {
        padding: 14px 20px !important;
        border-bottom: 1px solid #f3f4f6 !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        color: #374151 !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        white-space: nowrap !important;
    }

    .quick-actions-dashboard .quick-action-btn:hover,
    .quick-actions-dashboard .quick-action-btn:active {
        background: #f9fafb !important;
        border-bottom-color: #f3f4f6 !important;
        transform: none !important;
    }

    .quick-actions-dashboard .quick-action-btn svg {
        width: 18px !important;
        height: 18px !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
    }

    .kurulum-badge {
        position: static !important;
        transform: none !important;
        font-size: 8px !important;
        padding: 2px 5px !important;
        margin-left: auto !important;
        order: 3 !important;
    }

    /* Mobilde çıkış butonu */
    .mobile-logout-btn {
        display: flex !important;
        color: #dc2626 !important;
        border-top: 1px solid #e5e7eb !important;
        border-bottom: none !important;
    }

    .mobile-logout-btn svg {
        color: #dc2626 !important;
    }

    /* --- MOBILE HEADER BAR --- */
    .mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        height: 52px !important;
        background: #1e293b !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 101 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }

    .mobile-header-title {
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
    }

    .mobile-hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        cursor: pointer !important;
        border-radius: 6px !important;
        padding: 0 !important;
    }

    .mobile-hamburger:active {
        background: rgba(255,255,255,0.1) !important;
    }

    .mobile-hamburger svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .mobile-header-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background: transparent !important;
        border: none !important;
        color: rgba(255,255,255,0.8) !important;
        cursor: pointer !important;
        border-radius: 6px !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

    .mobile-header-btn:active {
        background: rgba(255,255,255,0.1) !important;
    }

    .mobile-header-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* --- MAIL LIST --- */
    .mail-list {
        padding: 0 !important;
    }

    .mail-list-header {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 14px !important;
        gap: 8px !important;
        background: #f9fafb !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .mail-list-header h2 {
        font-size: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
    }

    .mail-actions-toolbar {
        flex-shrink: 0 !important;
    }

    .btn-delete-selected {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .mail-list table {
        width: 100% !important;
        font-size: 12px !important;
    }

    .mail-list th,
    .mail-list td {
        padding: 10px 6px !important;
        font-size: 12px !important;
    }

    /* Önizleme ve ek sütunlarını gizle */
    .mail-list th:nth-child(3),
    .mail-list td:nth-child(3),
    .mail-list th:nth-child(4),
    .mail-list td:nth-child(4) {
        display: none !important;
    }

    .mail-list th:first-child,
    .mail-list td:first-child {
        width: 28px !important;
        padding: 10px 4px !important;
    }

    .mail-list th:last-child,
    .mail-list td:last-child {
        width: 32px !important;
        padding: 10px 4px !important;
    }

    /* --- SPLIT VIEW --- */
    .split-view {
        flex-direction: column !important;
        height: auto !important;
    }

    .mail-list-panel {
        flex: none !important;
        height: 38vh !important;
        max-height: 38vh !important;
        border-right: none !important;
        border-bottom: 2px solid #e5e7eb !important;
        overflow-y: auto !important;
        width: 100% !important;
    }

    .mail-view-panel {
        flex: 1 !important;
        height: 62vh !important;
        overflow-y: auto !important;
        width: 100% !important;
    }

    /* --- MAIL DETAIL --- */
    .mail-detail-header {
        padding: 14px !important;
    }

    .mail-detail-header h2 {
        font-size: 15px !important;
        padding-right: 55px !important;
        line-height: 1.3 !important;
    }

    .btn-close {
        padding: 5px 10px !important;
        font-size: 11px !important;
        top: 14px !important;
        right: 14px !important;
    }

    .mail-meta p {
        font-size: 12px !important;
    }

    .mail-actions {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .btn-action {
        padding: 9px 10px !important;
        font-size: 11px !important;
        flex: 1 1 calc(50% - 3px) !important;
        justify-content: center !important;
    }

    .mail-detail-body {
        padding: 14px !important;
        font-size: 13px !important;
        word-break: break-word !important;
        overflow-x: hidden !important;
    }

    .mail-detail-body img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Attachments */
    .mail-attachments {
        padding: 12px 14px !important;
    }

    .attachment-list {
        grid-template-columns: 1fr !important;
    }

    /* --- COMPOSE --- */
    .compose-mail {
        padding: 0 !important;
    }

    .compose-mail h2 {
        font-size: 16px !important;
        padding: 14px !important;
        margin: 0 !important;
    }

    .compose-mail form {
        padding: 14px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .compose-header {
        padding: 14px !important;
    }

    .reply-form {
        padding: 14px !important;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .editor-toolbar {
        flex-wrap: wrap !important;
        padding: 6px !important;
    }

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

    .message-editor {
        min-height: 180px !important;
        font-size: 14px !important;
        padding: 12px !important;
    }

    .reply-form .btn-send {
        width: 100% !important;
    }

    /* --- STANDALONE MAIL VIEW --- */
    .mail-view {
        padding: 14px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .mail-header {
        padding: 14px !important;
        border-radius: 8px !important;
    }

    .mail-header h2 {
        font-size: 16px !important;
    }

    .mail-body {
        padding: 14px !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }

    .btn-back {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* --- LOGIN --- */
    .login-container {
        padding: 20px 16px !important;
        padding-top: 60px !important;
    }

    .login-container::before,
    .login-container::after {
        display: none !important;
    }

    .login-box {
        padding: 28px 20px !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    .logo {
        margin-bottom: 28px !important;
        padding: 16px !important;
    }

    .logo img {
        max-width: 200px !important;
    }

    /* --- BUTTONS --- */
    .btn-send,
    .btn-save {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* --- POPUP PAGES --- */
    .contacts-container,
    .folder-container,
    .profile-container,
    .ui-container,
    .rules-container,
    .setup-container {
        padding: 14px 12px !important;
    }

    .contacts-header,
    .folder-header,
    .profile-header,
    .ui-header,
    .rules-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .contacts-header h1,
    .folder-header h1,
    .profile-header h2,
    .ui-header h2,
    .rules-header h2 {
        font-size: 18px !important;
        margin: 0 !important;
    }

    .contacts-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-actions,
    .folder-actions,
    .rule-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

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

    .setting-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .setting-control {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .setting-control input,
    .setting-control select {
        width: 100% !important;
    }

    .theme-preview {
        flex-direction: column !important;
    }

    .profile-avatar {
        flex-direction: column !important;
        align-items: center !important;
    }

    .avatar-circle {
        width: 72px !important;
        height: 72px !important;
        font-size: 28px !important;
    }

    /* Setup pages */
    .setup-header {
        padding: 20px 14px !important;
    }

    .setup-header h1 {
        font-size: 18px !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
    }

    .step {
        padding: 16px 12px !important;
    }

    .step-content {
        margin-left: 0 !important;
        margin-top: 12px !important;
    }

    .settings-table {
        display: block !important;
        overflow-x: auto !important;
        font-size: 11px !important;
    }

    /* Signature */
    .signature-popup,
    .signature-settings {
        padding: 14px 12px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Theme toggle */
    .theme-toggle {
        width: 40px !important;
        height: 40px !important;
        bottom: 12px !important;
        right: 12px !important;
        font-size: 18px !important;
    }

    /* Alerts */
    .success, .error, .alert,
    .message-success, .message-error {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    .no-mail-selected {
        padding: 40px 20px !important;
        font-size: 13px !important;
    }

    /* User menu */
    #userMenu {
        display: none !important;
    }

    /* Autocomplete */
    .contact-suggestions {
        max-height: 200px !important;
    }

    .save-contact-form-actions {
        flex-direction: column !important;
    }

} /* END 768px */

/* ============================================
   480px - Küçük ekranlar
   ============================================ */
@media screen and (max-width: 480px) {
    .mail-list th,
    .mail-list td {
        padding: 8px 4px !important;
        font-size: 11px !important;
    }

    .mail-detail-header h2 {
        font-size: 14px !important;
    }

    .btn-action {
        font-size: 10px !important;
        padding: 8px !important;
    }

    .login-box {
        padding: 24px 16px !important;
    }

    .logo img {
        max-width: 180px !important;
    }

    .setup-header h1 {
        font-size: 16px !important;
    }

    .step h2 {
        font-size: 13px !important;
    }
}

/* ============================================
   360px - Çok küçük ekranlar
   ============================================ */
@media screen and (max-width: 360px) {
    .mail-list th,
    .mail-list td {
        padding: 6px 3px !important;
        font-size: 10px !important;
    }

    .mobile-header {
        height: 48px !important;
        padding: 0 10px !important;
    }

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

    .quick-actions-dashboard .quick-action-btn {
        padding: 12px 16px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   DARK MODE MOBİL
   ============================================ */
@media screen and (max-width: 768px) {
    [data-theme="dark"] .mobile-header {
        background: #0f172a !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    }

    [data-theme="dark"] .quick-actions-dashboard {
        background: #1f2937 !important;
        border-bottom-color: #374151 !important;
    }

    [data-theme="dark"] .quick-actions-dashboard .quick-action-btn {
        color: #e5e7eb !important;
        border-bottom-color: #374151 !important;
    }

    [data-theme="dark"] .quick-actions-dashboard .quick-action-btn:active {
        background: #374151 !important;
    }

    [data-theme="dark"] .quick-actions-dashboard .quick-action-btn svg {
        color: #9ca3af !important;
    }

    [data-theme="dark"] .mail-list-header {
        background: #1f2937 !important;
    }
}

/* Desktop'ta mobile header gizle */
.mobile-header {
    display: none;
}

/* Desktop'ta mobile logout gizle */
.mobile-logout-btn {
    display: none !important;
}