/* Mobile Responsiveness - Tablet and below */
@media (max-width: 1000px) {

    /* Header Adjustments */
    .header {
        padding: 1rem;
    }

    .title {
        display: none;
        /* Hide title on mobile to save space */
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Hide button text, show only icons */
    .btn span:not(.btn-icon) {
        display: none;
    }

    .btn {
        padding: 0.5rem;
    }

    /* View Mode Switcher - Text Only (hide icons) */
    .view-btn {
        padding: 0.5rem 0.75rem;
    }

    /* Hide icons in mobile mode */
    .view-btn .view-icon {
        display: none;
    }

    /* Tab Bar */
    .tab-bar {
        padding: 0.5rem;
    }

    /* Sidebar */
    .sidebar {
        width: 250px;
    }

    .page-tree {
        font-size: 0.9rem;
    }

    /* List View - Table to Cards */
    .pages-table,
    .pages-table thead,
    .pages-table tbody,
    .pages-table th,
    .pages-table tr,
    .pages-table td {
        display: block;
    }

    .pages-table thead {
        display: none;
        /* Hide table headers */
    }

    .pages-table tr {
        background: rgba(26, 26, 46, 0.6);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 1rem;
        padding: 1rem;
        position: relative;
    }

    .pages-table td {
        padding: 0.5rem 0;
        border: none;
        text-align: left;
    }

    .col-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .col-space,
    .col-parent,
    .col-modified {
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

    .col-space::before {
        content: "Space: ";
        font-weight: 600;
        color: var(--text-primary);
    }

    .col-parent::before {
        content: "Parent: ";
        font-weight: 600;
        color: var(--text-primary);
    }

    .col-modified::before {
        content: "Modified: ";
        font-weight: 600;
        color: var(--text-primary);
    }

    .col-actions {
        border-top: 1px solid var(--border-color);
        padding-top: 1rem;
        margin-top: 1rem;
        display: flex;
        justify-content: flex-end;
    }

    /* Trash View Optimizations */
    .trash-header .header-actions .btn .btn-text {
        display: none;
    }

    .trash-header .header-actions .btn {
        padding: 0.5rem;
    }

    .trash-grid {
        grid-template-columns: 1fr;
        /* Single column on mobile */
    }

    /* Modal Responsiveness */
    .modal-content {
        min-width: auto;
        width: 90%;
        margin: 0 5%;
    }

    /* Search Input */
    .search-input {
        width: 150px;
    }

    /* Editor Toolbar - Wrap on mobile */
    .editor-toolbar {
        gap: 0.25rem;
        flex-wrap: wrap;
        position: relative;
    }

    .toolbar-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    /* Hide advanced toolbar features on mobile (but not in dropdown) */
    .editor-toolbar .toolbar-btn[data-command="strikeThrough"],
    .editor-toolbar .toolbar-btn[data-value="h3"],
    .editor-toolbar .toolbar-btn[data-command="indent"],
    .editor-toolbar .toolbar-btn[data-command="outdent"],
    .editor-toolbar .toolbar-btn[data-value="pre"],
    .editor-toolbar .toolbar-btn[data-value="blockquote"],
    .editor-toolbar .toolbar-btn[data-command="insertHorizontalRule"],
    .editor-toolbar .toolbar-btn[data-command="justifyLeft"],
    .editor-toolbar .toolbar-btn[data-command="justifyCenter"],
    .editor-toolbar .toolbar-btn[data-command="justifyRight"],
    .editor-toolbar #insertTableBtn,
    .editor-toolbar .toolbar-color,
    .editor-toolbar .toolbar-btn[data-command="subscript"],
    .editor-toolbar .toolbar-btn[data-command="superscript"] {
        display: none;
    }

    /* Show more button on mobile */
    #mobileMoreBtn {
        display: flex !important;
    }

    /* Mobile toolbar dropdown */
    .mobile-toolbar-dropdown {
        display: none !important;
        position: fixed;
        top: auto;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        background: #1a1a2e;
        border: 3px solid #6366f1;
        border-radius: 12px;
        padding: 1rem;
        z-index: 99999;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.9);
        max-height: 60vh;
        overflow-y: auto;
    }

    .mobile-toolbar-dropdown.active {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: flex-start;
        align-content: flex-start;
    }

    /* Ensure toolbar has proper positioning context */
    .editor-toolbar {
        position: relative;
        overflow: visible !important;
    }

    /* Ensure editor container doesn't clip dropdown */
    .editor-container {
        overflow: visible !important;
    }

    /* Enable scrolling in editor content */
    .editor-content {
        overflow-y: auto !important;
        max-height: calc(100vh - 300px);
    }
}