/**
 * Semtix Mobile CSS Addon
 * ========================
 * This file contains mobile-only styles that override desktop defaults.
 * Keep this separate from main CSS to avoid conflicts.
 * 
 * Breakpoints:
 * - Mobile: max-width 768px
 * - Small mobile: max-width 480px
 */

/* ===== MOBILE BURGER MENU ===== */
@media (max-width: 768px) {
    
    /* ============================================
       ALL MODALS - Consistent mobile design
       ============================================ */
    .modal-overlay {
        padding: 16px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .modal,
    .bc-ai-modal,
    .bc-ai-modal.bc-ai-modal-compact,
    .bc-ai-modal.bc-ai-modal-expanded {
        position: relative !important;
        width: 90vw !important;
        max-width: 90vw !important;
        min-width: unset !important;
        max-height: 85vh !important;
        margin: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
    }
    
    .modal .modal-body,
    .bc-ai-modal .modal-body {
        max-height: calc(85vh - 120px) !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }
    
    .modal .modal-header,
    .bc-ai-modal .modal-header {
        padding: 12px 16px !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    
    .modal .modal-footer,
    .bc-ai-modal .modal-footer {
        padding: 12px 16px !important;
        border-top: 1px solid #e5e5e5 !important;
    }
    
    /* Hide desktop nav - bottom nav handles navigation */
    .bc-topbar-nav,
    .bc-nav {
        display: none !important;
    }
    
    /* Hide old burger menu - replaced by bottom nav */
    .bc-mobile-burger {
        display: none !important;
    }
    
    .bc-mobile-burger-icon {
        display: none !important;
    }
    
    .bc-mobile-burger-icon span {
        display: none !important;
    }
    
    .bc-mobile-burger.active .bc-mobile-burger-icon span:nth-child(1) {
        display: none !important;
    }
    
    .bc-mobile-burger.active .bc-mobile-burger-icon span:nth-child(2) {
        display: none !important;
    }
    
    .bc-mobile-burger.active .bc-mobile-burger-icon span:nth-child(3) {
        display: none !important;
    }
    
    /* Mobile slide-out menu - HIDDEN, replaced by bottom nav */
    .bc-mobile-menu {
        display: none !important;
    }
    
    .bc-mobile-menu.open {
        display: none !important;
    }
    
    .bc-mobile-menu-item {
        display: none !important;
    }
    
    .bc-mobile-menu-item:hover,
    .bc-mobile-menu-item.active {
        display: none !important;
    }
    
    .bc-mobile-menu-item i {
        display: none !important;
    }
    
    .bc-mobile-menu-divider {
        display: none !important;
    }
}

/* ===== MOBILE TOPBAR ===== */
@media (max-width: 768px) {
    .bc-topbar {
        padding: 8px 12px !important;
        height: 48px !important;
    }
    
    .bc-topbar-left {
        gap: 8px !important;
    }
    
    .bc-logo {
        font-size: 16px !important;
    }
    
    .bc-search-wrapper {
        display: none !important;
    }
    
    /* Mobile search toggle - show in header */
    .bc-mobile-search-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text);
        font-size: 16px;
    }
    
    /* Full-screen mobile search */
    .bc-mobile-search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--surface);
        z-index: 1001;
        padding: 16px;
        display: none;
    }
    
    .bc-mobile-search-overlay.open {
        display: block;
    }
    
    .bc-mobile-search-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .bc-mobile-search-input {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: 16px;
        background: var(--surface);
    }
    
    .bc-mobile-search-close {
        padding: 12px;
        background: transparent;
        border: none;
        font-size: 18px;
        cursor: pointer;
    }
}

/* ===== MOBILE MAIN LAYOUT ===== */
@media (max-width: 768px) {
    .bc-main {
        padding: 12px !important;
    }
    
    .bc-content {
        padding: 0 !important;
    }
    
    /* Sidebar hidden on mobile */
    .bc-sidebar {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        z-index: 998 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        background: var(--surface) !important;
        border-right: 1px solid var(--border) !important;
    }
    
    .bc-sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    
    .bc-sidebar-overlay {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 997;
        display: none;
    }
    
    .bc-sidebar-overlay.visible {
        display: block;
    }
}

/* ===== MOBILE PROJECT DETAIL ===== */
@media (max-width: 768px) {
    /* Project Hero - COMPLETE MOBILE OVERRIDE */
    .bc-project-hero {
        padding: 16px 16px 20px !important;
        text-align: center !important;
        position: relative !important;
    }
    
    /* MOBILE TOP ROW: Back + Settings on same line */
    .bc-project-hero > .bc-back-btn-wrapper,
    .bc-project-hero > .bc-project-actions {
        display: inline-flex !important;
        position: static !important;
        vertical-align: middle !important;
    }
    
    /* Back button wrapper - inline on left */
    .bc-back-btn-wrapper {
        position: static !important;
        top: auto !important;
        left: auto !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        margin-right: 12px !important;
    }
    
    .bc-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    
    /* Project actions - inline on right */
    .bc-project-actions {
        position: static !important;
        width: auto !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
        top: auto !important;
        right: auto !important;
    }
    
    /* Settings button - smaller on mobile */
    .bc-project-actions .bc-billing-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    
    /* Container for top controls row */
    .bc-project-hero::before {
        content: '' !important;
        display: block !important;
        margin-bottom: 12px !important;
    }
    
    /* HIDE PEOPLE ROW ON MOBILE - accessible via modal */
    .bc-people-row {
        display: none !important;
    }
    
    /* Info box with Cached badge */
    .bc-project-info-box {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 10px 14px !important;
    }
    
    .bc-info-status {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Cached badge */
    .bc-sync-cached {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    
    /* Settings and progress buttons */
    .bc-billing-btn,
    .bc-billing-progress {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    /* Client label */
    .bc-project-hero-client {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    
    /* Project name */
    .bc-project-hero-name {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin: 0 0 12px !important;
        word-break: break-word !important;
    }
    
    /* BC indicator badge in title */
    .bc-project-hero-name span[style*="campground"] {
        display: inline-block !important;
        margin-top: 8px !important;
        margin-left: 0 !important;
        font-size: 12px !important;
    }
    
    /* Project description */
    .bc-project-hero-desc {
        max-width: 100% !important;
        font-size: 14px !important;
        padding: 0 8px !important;
    }
    
    /* Description edit button and visibility badges */
    .bc-desc-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .bc-desc-visibility-badges {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    /* Project URL */
    .bc-project-hero-url {
        font-size: 13px !important;
        word-break: break-all !important;
    }
    
    /* Project header (generic) */
    .bc-project-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .bc-project-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    /* Info blocks - stack vertically */
    .bc-project-info-blocks,
    .bc-info-grid,
    .bc-project-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .bc-info-block {
        width: 100% !important;
    }
    
    /* Stat cards - full width except in stats-grid */
    .bc-stat-card {
        width: 100% !important;
    }
    
    .bc-stats-grid .bc-stat-card {
        width: auto !important;
    }
    
    /* Team section */
    .bc-team-section {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .bc-team-avatars {
        flex-wrap: wrap !important;
    }
    
    /* Project people card */
    .bc-people-on-project {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .bc-people-avatars {
        flex-wrap: wrap !important;
    }
    
    .bc-setup-people-btn {
        width: 100% !important;
    }
}

/* ===== MOBILE BASECAMP RESYNC BAR ===== */
@media (max-width: 768px) {
    /* Basecamp sync bar */
    .bc-basecamp-resync-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px 16px !important;
        margin: 12px 16px 20px !important;
        max-width: calc(100% - 32px) !important;
        text-align: center !important;
    }
    
    .bc-basecamp-resync-bar > i {
        display: none !important;
    }
    
    .bc-basecamp-resync-bar > span {
        margin-left: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
    }
    
    .bc-basecamp-resync-bar button {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ===== MOBILE PROJECT SETTINGS ===== */
@media (max-width: 768px) {
    .bc-project-settings {
        padding: 0 !important;
        margin: 0 0 20px !important;
        border-radius: var(--radius) !important;
    }
    
    /* Settings Tabs - scrollable horizontal */
    .bc-settings-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }
    
    .bc-settings-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .bc-settings-tab {
        flex: 0 0 auto !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .bc-settings-tab span {
        display: inline !important;
    }
    
    .bc-settings-tab i {
        font-size: 12px !important;
    }
    
    .bc-settings-content {
        padding: 16px !important;
    }
    
    .bc-settings-tab-content {
        width: 100% !important;
    }
    
    .bc-settings-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .bc-settings-section {
        padding: 14px !important;
    }
    
    /* Status section - make it full width */
    .bc-settings-status-section > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .bc-settings-status-section button {
        width: 100% !important;
    }
    
    /* Inline flex sections inside settings */
    .bc-settings-section > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .bc-settings-section input[style*="width: 150px"],
    .bc-settings-section input[style*="width: 180px"] {
        width: 100% !important;
    }
    
    /* Basecamp ID section */
    .bc-settings-section[style*="linear-gradient"] > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .bc-settings-section[style*="linear-gradient"] > div > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    /* Variables list */
    .bc-variables-list {
        gap: 10px !important;
    }
    
    .bc-variable-item {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .bc-variable-key,
    .bc-variable-value {
        flex: 1 1 100% !important;
    }
    
    /* Add variable form */
    .bc-add-variable-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .bc-variable-input-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .bc-variable-input-group input {
        width: 100% !important;
    }
    
    /* Billing tabs and forms */
    .bc-billing-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .bc-billing-tab {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .bc-billing-form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .bc-billing-form-grid .form-group {
        width: 100% !important;
    }
    
    .input-with-suffix {
        flex-direction: row !important;
    }
    
    .bc-billing-coming-soon {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    /* Management section */
    .bc-management-actions {
        gap: 12px !important;
    }
    
    .bc-management-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        text-align: center !important;
    }
    
    .bc-management-item button {
        width: 100% !important;
    }
    
    /* Offer items table mobile */
    .bc-offer-items-table {
        overflow-x: auto !important;
    }
    
    .bc-offer-item-header,
    .bc-offer-item-row {
        min-width: 400px !important;
    }
}

/* ===== MOBILE TODO LIST ===== */
@media (max-width: 768px) {
    /* Todolist header - title with inline + button */
    .bc-todolist-header {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        text-align: left !important;
    }
    
    /* Hide the full "New list" button on mobile - we have inline + button */
    .bc-todolist-header-actions.bc-hide-mobile {
        display: none !important;
    }
    
    .bc-todolist-header h2 {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 100% !important;
        text-align: left !important;
        font-size: 18px !important;
        flex-wrap: wrap !important;
    }
    
    .bc-todolist-title {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    /* Todo list card - name wrapping fix */
    .bc-list-header {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    .bc-list-header-content {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .bc-list-header-main {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .bc-list-name {
        font-size: 16px !important;
        word-break: break-word !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    
    .bc-list-comments-count {
        font-size: 12px !important;
    }
    
    .bc-list-time {
        font-size: 11px !important;
    }
    
    .bc-list-groups-badges {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    .bc-group-badge-sm {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* List progress and icons */
    .bc-list-progress-text {
        font-size: 11px !important;
    }
    
    .bc-list-header-actions {
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }
    
    .bc-visibility-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .bc-todo-list-container {
        padding: 12px !important;
    }
    
    /* Hide elements on mobile */
    .bc-hide-mobile {
        display: none !important;
    }
    
    /* Show inline new list button on mobile */
    .bc-new-list-btn-inline {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Hide edit button on mobile - edit via click on title only */
    .bc-list-edit-btn {
        display: none !important;
    }
    
    /* Todo items - flex wrap for two-row layout */
    .bc-todo-item,
    .bc-todo-item.completed,
    li.bc-todo-item,
    ul.bc-todo-list > li {
        display: flex !important;
        grid-template-columns: unset !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 8px !important;
        padding: 10px 12px 10px 44px !important;
        border-bottom: 1px solid var(--border, #e5e7eb) !important;
        background: white !important;
        position: relative !important;
        min-height: 44px !important;
        margin: 0 !important;
    }
    
    /* CHECKBOX - Absolute left position */
    .bc-todo-item .bc-todo-checkbox,
    .bc-todo-item > .bc-todo-checkbox,
    li.bc-todo-item .bc-todo-checkbox,
    .bc-todo-list .bc-todo-checkbox {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        flex-shrink: 0 !important;
        border: 2px solid #d1d5db !important;
        border-radius: 4px !important;
        background: white !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }
    
    .bc-todo-item .bc-todo-checkbox.checked,
    .bc-todo-item.completed .bc-todo-checkbox {
        background: #10b981 !important;
        border-color: #10b981 !important;
    }
    
    .bc-todo-item .bc-todo-checkbox i {
        font-size: 12px !important;
        color: white !important;
    }

    /* Title wrapper div - FULL WIDTH first row */
    .bc-todo-item > div[style*="display: flex"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 6px !important;
        order: 1 !important;
    }

    /* Title - inline, full width available */
    .bc-todo-item .bc-todo-title {
        display: inline !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    /* Meta items - second row */
    .bc-todo-item > .bc-todo-meta-item,
    .bc-todo-item > .bc-todo-date-wrapper,
    .bc-todo-item > .bc-todo-assignees,
    .bc-todo-item > span {
        order: 10 !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide drag handle, options, etc on mobile */
    .bc-todo-item .bc-todo-drag,
    .bc-todo-item .bc-todo-options,
    .bc-todo-item .bc-todo-archive-btn,
    .bc-todo-item .bc-todo-play,
    .bc-todo-item .bc-todo-recurrence-btn,
    .bc-todo-item .bc-todo-snooze-btn,
    .bc-todo-item .bc-link-icon,
    .bc-todo-item .bc-subtodo-bar,
    .bc-todo-item .bc-collapse-toggle {
        display: none !important;
    }
    
    /* Subtodos - same colors as desktop, smaller indent - HIGH SPECIFICITY */
    li.bc-todo-item.bc-subtodo,
    .bc-todo-list li.bc-todo-item.bc-subtodo {
        background: #fffbeb !important;
    }
    li.bc-todo-item.bc-depth-1,
    .bc-todo-list li.bc-todo-item.bc-depth-1 {
        margin-left: 20px !important;
        padding-left: 44px !important;
        background: #fffbeb !important;
    }
    li.bc-todo-item.bc-depth-2,
    .bc-todo-list li.bc-todo-item.bc-depth-2 {
        margin-left: 36px !important;
        padding-left: 44px !important;
        background: #fef3c7 !important;
    }
    li.bc-todo-item.bc-depth-3,
    .bc-todo-list li.bc-todo-item.bc-depth-3 {
        margin-left: 52px !important;
        padding-left: 44px !important;
        background: #fde68a !important;
    }
    
    /* Parent todo - blue left border */
    li.bc-todo-item.bc-parent-todo,
    .bc-todo-list li.bc-todo-item.bc-parent-todo {
        border-left: 3px solid #3b82f6 !important;
    }
    
    /* Parent waiting - green gradient */
    li.bc-todo-item.bc-parent-waiting,
    .bc-todo-list li.bc-todo-item.bc-parent-waiting {
        background: linear-gradient(to right, #f0fdf4, #fefce8) !important;
        border-left: 3px solid #22c55e !important;
    }

    /* Meta row - compact inline */
    .bc-todo-item .bc-todo-meta-item,
    .bc-todo-item .bc-todo-date-wrapper,
    .bc-todo-item .bc-todo-assignees {
        position: static !important;
        margin: 0 !important;
        font-size: 11px !important;
        order: 10 !important;
    }

    .bc-todo-item .bc-todo-date-wrapper {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    
    .bc-todo-item .bc-todo-date-text {
        font-size: 11px !important;
    }

    .bc-todo-item .bc-todo-assignees {
        display: inline-flex !important;
        margin-left: auto !important;
    }
    
    .bc-todo-item .bc-avatar {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        font-size: 8px !important;
    }

    .bc-todo-item .bc-todo-meta-item.time-badge {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }
    
    .bc-todo-item .bc-todo-meta-item.comments {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }

    /* Hide empty placeholders */
    .bc-todo-item > span:empty,
    .bc-todo-item > div:empty:not(.bc-todo-checkbox) {
        display: none !important;
    }

    /* Completed todos - same compact style */
    .bc-completed-list .bc-todo-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        gap: 4px 8px !important;
        background: #f9fafb !important;
    }
    
    .bc-completed-list .bc-todo-item .bc-todo-title {
        font-size: 13px !important;
        color: #9ca3af !important;
        text-decoration: line-through !important;
    }
    
    /* Extra work todo - yellow accent */
    .bc-todo-item.extra-work {
        background: linear-gradient(135deg, #fef3c7 0%, white 30%) !important;
        border-left: 3px solid #fcd34d !important;
    }

    .bc-todo-item-main {
        width: 100% !important;
    }
    
    .bc-todo-item-meta {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .bc-todo-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Todo item actions */
    .bc-todo-actions {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Add todo button */
    .bc-add-todo {
        padding: 8px 0 !important;
        margin-left: 32px !important;
    }
    
    .bc-add-todo-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 14px !important;
    }
    
    .bc-add-todo-text {
        font-size: 14px !important;
    }

    /* MyTasks - Priority badge spacing from title */
    .bc-todo-priority-cell {
        margin-right: 8px !important;
    }
    
    .bc-todo-priority-cell .bc-priority-badge {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }
}

/* ===== MOBILE TODO DETAIL (MODAL/PANEL) ===== */
@media (max-width: 768px) {
    .bc-todo-detail,
    .bc-todo-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        z-index: 1000 !important;
    }
    
    .bc-todo-detail-header {
        padding: 16px !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--surface) !important;
        z-index: 10 !important;
        border-bottom: 1px solid var(--border) !important;
    }
    
    .bc-todo-detail-body {
        padding: 16px !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    /* Stack detail sections */
    .bc-todo-detail-grid,
    .bc-todo-detail-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .bc-todo-detail-sidebar {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        padding-top: 16px !important;
    }
}

/* ===== MOBILE CARDS & BLOCKS ===== */
@media (max-width: 768px) {
    /* Generic card grid to single column */
    .bc-card-grid,
    .bc-blocks-grid,
    .bc-dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Stats grid - 2x2 layout on mobile */
    .bc-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Force 2x2 layout for stat cards in stats-grid */
    .bc-stats-grid > .bc-stat-card {
        width: auto !important;
        min-width: 0 !important;
    }
    
    /* Charts grid - single column on mobile */
    .bc-charts-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .bc-card,
    .bc-block,
    .bc-dashboard-card {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Offer/Billing section */
    .bc-offer-section,
    .bc-billing-section {
        padding: 16px !important;
    }
    
    .bc-offer-grid,
    .bc-billing-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Fakturace box */
    .bc-billing-box,
    .bc-fakturace-box {
        padding: 16px !important;
    }
    
    .bc-billing-row {
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* ===== MOBILE MODALS ===== */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
    }
    
    .modal-header {
        padding: 16px !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--surface) !important;
        z-index: 10 !important;
    }
    
    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: 16px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--surface) !important;
        border-top: 1px solid var(--border) !important;
    }
    
    /* Form inputs in modal */
    .modal .form-input,
    .modal input[type="text"],
    .modal input[type="email"],
    .modal input[type="password"],
    .modal textarea,
    .modal select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ===== MOBILE FORMS ===== */
@media (max-width: 768px) {
    .form-row,
    .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .form-group {
        width: 100% !important;
    }
    
    /* Two column forms to single */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== MOBILE TABLES ===== */
@media (max-width: 768px) {
    .bc-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Card-style table on mobile */
    .bc-table-mobile-cards tbody tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        margin-bottom: 8px !important;
        background: var(--surface) !important;
    }
    
    .bc-table-mobile-cards thead {
        display: none !important;
    }
    
    .bc-table-mobile-cards td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 8px 0 !important;
        border: none !important;
    }
    
    .bc-table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 8px;
    }
}

/* ===== MOBILE BUTTONS ===== */
@media (max-width: 768px) {
    .btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    .btn-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* Full width buttons on mobile */
    .btn-mobile-full {
        width: 100% !important;
    }
    
    /* Floating action button */
    .bc-fab {
        position: fixed !important;
        bottom: 24px !important;
        right: 24px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        font-size: 24px !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== MOBILE COMMENTS ===== */
@media (max-width: 768px) {
    .bc-comment {
        padding: 12px !important;
    }
    
    .bc-comment-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .bc-comment-input {
        font-size: 16px !important;
    }
    
    .bc-comment-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ===== MOBILE ATTACHMENTS ===== */
@media (max-width: 768px) {
    .bc-attachments-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .bc-attachment-card {
        padding: 8px !important;
    }
    
    .bc-attachment-preview {
        height: 80px !important;
    }
}

/* ===== MOBILE ADMIN PANEL ===== */
@media (max-width: 768px) {
    .bc-admin-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        flex-wrap: nowrap !important;
    }
    
    .bc-admin-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .bc-admin-content {
        padding: 16px !important;
    }
    
    .bc-admin-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Prompt Library - Single column on mobile */
    .bc-prompt-library {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .bc-prompt-card {
        padding: 14px !important;
    }
    
    .bc-prompt-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .bc-prompt-key,
    .bc-prompt-category,
    .bc-prompt-trigger {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* Task Estimates - Sub-tabs scrollable */
    .bc-subtabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 8px !important;
    }
    
    .bc-subtabs button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    /* Task Estimates - Stats grid */
    .bc-stat-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .bc-stat-card {
        padding: 14px !important;
    }
    
    .bc-stat-card > div:first-child {
        font-size: 24px !important;
    }
    
    /* Task Estimates - Table wrapper horizontal scroll */
    .bc-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }
    
    .bc-table {
        min-width: 600px !important;
        font-size: 12px !important;
    }
    
    .bc-table th,
    .bc-table td {
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
    
    .bc-table th:first-child,
    .bc-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: var(--surface) !important;
        z-index: 1 !important;
    }
}

/* ===== MOBILE PROFILE PAGE ===== */
@media (max-width: 768px) {
    .bc-profile-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .bc-profile-avatar {
        margin: 0 auto !important;
    }
    
    .bc-profile-stats {
        justify-content: center !important;
    }
}

/* ===== MOBILE DASHBOARD ===== */
@media (max-width: 768px) {
    .bc-dashboard-welcome {
        padding: 16px !important;
    }
    
    .bc-dashboard-cards {
        grid-template-columns: 1fr !important;
    }
    
    .bc-dashboard-card {
        padding: 16px !important;
    }
    
    /* Quick actions */
    .bc-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .bc-quick-action {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }
}

/* ===== MOBILE NOTIFICATIONS ===== */
@media (max-width: 768px) {
    .bc-notification-dropdown {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    
    .bc-notification-item {
        padding: 12px 16px !important;
    }
}

/* ===== MOBILE TYPOGRAPHY ===== */
@media (max-width: 768px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    
    .bc-page-title {
        font-size: 22px !important;
        text-align: center !important;
        width: 100% !important;
        color: var(--text-primary, #1f2937) !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
    }
    
    /* bc-hey-title same style */
    .bc-hey-title {
        font-size: 22px !important;
        text-align: center !important;
        width: 100% !important;
        color: var(--text-primary, #1f2937) !important;
        margin-bottom: 0 !important;
    }
    
    /* Page header - compact */
    .bc-page-header {
        margin-bottom: 12px !important;
        padding: 12px !important;
    }
    
    /* Page header with back button - center title, hide back button on mobile */
    .bc-page-header > div:first-child {
        width: 100% !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .bc-page-header > div:first-child > .btn-ghost,
    .bc-page-header > div:first-child > button:first-child {
        display: none !important;
    }
}

/* ===== MOBILE SPACING UTILITIES ===== */
@media (max-width: 768px) {
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }
    .mobile-flex { display: flex !important; }
    
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-2 { padding: 8px !important; }
    .mobile-p-4 { padding: 16px !important; }
    
    .mobile-mb-2 { margin-bottom: 8px !important; }
    .mobile-mb-4 { margin-bottom: 16px !important; }
    
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
}

/* ===== MOBILE HEADER / AI BUTTON / SEARCH ===== */
@media (max-width: 768px) {
    /* Header layout - 5 equal columns grid */
    .bc-header {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        align-items: center !important;
        padding: 8px 8px !important;
        gap: 4px !important;
        height: 56px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1100 !important;
    }
    
    /* Column 1: Hamburger menu */
    .bc-mobile-burger {
        grid-column: 1 !important;
        justify-self: center !important;
        width: 44px !important;
        height: 44px !important;
        order: unset !important;
    }
    
    /* Column 2: AI/Plus button */
    .bc-header-center {
        grid-column: 2 !important;
        position: static !important;
        transform: none !important;
        justify-self: center !important;
        z-index: 1 !important;
    }
    
    /* Column 3: Search button */
    .bc-header-right .bc-mobile-search-toggle {
        grid-column: 3 !important;
        justify-self: center !important;
    }
    
    /* Column 4: Online users */
    .bc-header-right .bc-online-indicator {
        grid-column: 4 !important;
        justify-self: center !important;
    }
    
    /* Column 5: User avatar/dropdown */
    .bc-header-right .bc-user-dropdown {
        grid-column: 5 !important;
        justify-self: center !important;
    }
    
    /* Hide left nav and header-left completely */
    .bc-header-left {
        display: none !important;
    }
    
    /* Header-right becomes grid items container */
    .bc-header-right {
        display: contents !important;
    }
    
    /* Hide desktop search container */
    .bc-header-right .bc-search-container {
        display: none !important;
    }
    
    /* User menu layout in grid */
    .bc-user-menu {
        display: contents !important;
    }
    
    /* AI button - round and centered */
    .bc-ai-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--success, #22c55e) !important;
        color: white !important;
        font-size: 18px !important;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4) !important;
    }
    
    /* Search toggle button */
    .bc-mobile-search-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text);
        font-size: 18px;
        flex-shrink: 0;
        border-radius: 50%;
    }
    
    .bc-mobile-search-toggle:hover {
        background: var(--bg);
    }
    
    /* Online indicator compact */
    .bc-online-indicator {
        flex-shrink: 0 !important;
    }
    
    .bc-online-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 50% !important;
        background: var(--bg) !important;
        font-size: 13px !important;
    }
    
    .bc-online-btn .bc-online-dot {
        width: 6px !important;
        height: 6px !important;
    }
    
    /* User dropdown compact */
    .bc-user-dropdown-trigger {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .bc-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    /* Mobile Search Modal Overlay */
    .bc-mobile-search-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--surface);
        z-index: 2000;
        padding: 16px;
        display: none;
        flex-direction: column;
    }
    
    .bc-mobile-search-modal.open {
        display: flex;
    }
    
    .bc-mobile-search-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .bc-mobile-search-input {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius, 8px);
        font-size: 16px;
        background: var(--surface);
    }
    
    .bc-mobile-search-close {
        padding: 12px;
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: var(--text);
    }
    
    .bc-mobile-search-results {
        flex: 1;
        overflow-y: auto;
    }
}

/* ===== MOBILE PROGRESS BAR - MINIMALIST ===== */
@media (max-width: 768px) {
    .bc-project-progress-bar {
        padding: 0 !important;
    }
    
    .bc-progress-content {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 16px !important;
        gap: 8px !important;
    }
    
    /* Minimalist mobile progress bar */
    .bc-progress-track {
        flex: none !important;
        width: 100% !important;
        height: 8px !important;
        order: 1 !important;
    }
    
    /* Hide detailed info on mobile by default */
    .bc-progress-info {
        display: none !important;
    }
    
    /* Show compact summary only */
    .bc-progress-mobile-summary {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 12px !important;
        color: var(--text-muted) !important;
        order: 2 !important;
    }
    
    .bc-progress-mobile-summary strong {
        color: var(--text) !important;
    }
    
    /* Hide link icon on mobile */
    .bc-progress-link-icon {
        display: none !important;
    }
}

/* Hide mobile summary on desktop */
.bc-progress-mobile-summary {
    display: none;
}

/* ===== MOBILE TEAM SECTION - COMPACT ===== */
@media (max-width: 768px) {
    /* People row compact */
    .bc-people-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    
    /* Groups display horizontal scroll */
    .bc-groups-display {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    
    /* Smaller group chips on mobile */
    .bc-group-chip {
        padding: 4px 10px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .bc-group-chip-avatars {
        gap: -4px !important;
    }
    
    .bc-group-chip-avatars .bc-avatar {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }
    
    .bc-group-chip-name {
        font-size: 11px !important;
    }
    
    /* Setup people button - compact */
    .bc-setup-people-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        height: auto !important;
        min-height: 32px !important;
        margin-left: 0 !important;
        border-radius: 16px !important;
    }
    
    /* Avatar stack compact */
    .bc-avatar-stack {
        justify-content: center !important;
    }
    
    .bc-avatar-stack .bc-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
        margin-left: -6px !important;
    }
    
    .bc-avatar-stack .bc-avatar:first-child {
        margin-left: 0 !important;
    }
}

/* ===== SMALL MOBILE (< 480px) ===== */
@media (max-width: 480px) {
    .bc-topbar {
        padding: 8px !important;
    }
    
    .bc-main {
        padding: 8px !important;
    }
    
    .modal {
        max-height: 95vh !important;
    }
    
    .bc-attachments-grid {
        grid-template-columns: 1fr !important;
    }
    
    .bc-quick-actions {
        grid-template-columns: 1fr !important;
    }
    
    .btn-group {
        flex-direction: column !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
    }
}

/* ===== PWA INSTALL PROMPT ===== */
.bc-pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 16px;
    display: none;
    align-items: center;
    gap: 16px;
    z-index: 1001;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}

.bc-pwa-install-banner.show {
    display: flex;
}

.bc-pwa-install-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.bc-pwa-install-content {
    flex: 1;
}

.bc-pwa-install-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}

.bc-pwa-install-desc {
    font-size: 13px;
    color: var(--text-muted);
}

.bc-pwa-install-actions {
    display: flex;
    gap: 8px;
}

.bc-pwa-install-btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.bc-pwa-install-btn-primary {
    background: var(--primary);
    color: white;
}

.bc-pwa-install-btn-secondary {
    background: transparent;
    color: var(--text-muted);
}

/* ===== PUSH NOTIFICATION PERMISSION ===== */
.bc-notif-permission-banner {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: none;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    max-width: 420px;
    width: calc(100% - 32px);
}

.bc-notif-permission-banner.show {
    display: flex;
}

.bc-notif-permission-icon {
    width: 40px;
    height: 40px;
    background: #fef3c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    font-size: 18px;
    flex-shrink: 0;
}

.bc-notif-permission-content {
    flex: 1;
}

.bc-notif-permission-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.bc-notif-permission-desc {
    font-size: 13px;
    color: var(--text-muted);
}

.bc-notif-permission-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== SERVICE WORKER UPDATE BANNER ===== */
.bc-sw-update-banner {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: var(--radius);
    padding: 16px 20px;
    display: none;
    align-items: center;
    gap: 16px;
    z-index: 1002;
    box-shadow: 0 4px 24px rgba(16, 185, 129, 0.35);
    max-width: 450px;
    width: calc(100% - 32px);
    color: white;
}

.bc-sw-update-banner.show {
    display: flex;
    animation: bc-sw-update-slide-in 0.3s ease-out;
}

@keyframes bc-sw-update-slide-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.bc-sw-update-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    animation: bc-sw-update-spin 2s linear infinite;
}

@keyframes bc-sw-update-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bc-sw-update-banner.show .bc-sw-update-icon {
    animation: none;
}

.bc-sw-update-content {
    flex: 1;
}

.bc-sw-update-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    color: white;
}

.bc-sw-update-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.bc-sw-update-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bc-sw-update-banner .bc-pwa-install-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.bc-sw-update-banner .bc-pwa-install-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

.bc-sw-update-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white !important;
    color: #059669 !important;
    font-weight: 600;
}

.bc-sw-update-btn:hover {
    background: #f0fdf4 !important;
}

@media (max-width: 480px) {
    .bc-sw-update-banner {
        flex-direction: column;
        text-align: center;
        top: auto;
        bottom: 70px;
    }
    
    .bc-sw-update-actions {
        width: 100%;
        justify-content: center;
    }
    
    .bc-sw-update-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .bc-notif-permission-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .bc-notif-permission-actions {
        width: 100%;
        justify-content: center;
    }
}

/* ===== SAFE AREA FOR NOTCH DEVICES ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    .bc-topbar {
        padding-top: max(8px, env(safe-area-inset-top));
    }
    
    .bc-mobile-menu {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    .bc-fab {
        bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    }
    
    /* PWA Install Banner - Mobile optimized */
    .bc-pwa-install-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        bottom: 68px !important;
        left: 12px !important;
        right: 12px !important;
        border-radius: 16px !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    }
    
    .bc-pwa-install-banner .bc-pwa-install-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .bc-pwa-install-banner .bc-pwa-install-content {
        margin-bottom: 12px !important;
    }
    
    .bc-pwa-install-banner .bc-pwa-install-title {
        font-size: 16px !important;
    }
    
    .bc-pwa-install-banner .bc-pwa-install-desc {
        font-size: 12px !important;
    }
    
    .bc-pwa-install-banner .bc-pwa-install-actions {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .bc-pwa-install-banner .bc-pwa-install-btn {
        flex: 1 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Touch targets - only for specific interactive elements, not all buttons */
    .bc-todo-checkbox {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Todo item - keep padding-left for checkbox! */
    .bc-todo-item {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        /* padding-left is set elsewhere for checkbox positioning */
    }
    
    /* Remove hover states on touch */
    .btn:hover {
        transform: none;
    }
    
    /* Active state for touch feedback */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .bc-todo-item:active {
        background: var(--primary-light);
    }
}

/* ===== REPORTING DASHBOARD MOBILE FIXES - HIGH PRIORITY ===== */
@media (max-width: 768px) {
    /* Force stats grid to 2x2 layout */
    div.bc-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        flex-direction: initial !important;
    }
    
    div.bc-stats-grid > div.bc-stat-card {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
    }
    
    /* Charts grid single column */
    div.bc-charts-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ===== TODO DETAIL PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Fix z-index hierarchy so menu is not blocked */
    .bc-header {
        z-index: 1100 !important;
        position: fixed !important;
    }
    
    /* Todo layout - maximize space */
    .bc-todo-layout-container {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Hide quick bar on mobile - info is in main card */
    .bc-todo-quick-bar {
        display: none !important;
    }
    
    .bc-todo-page-wrapper {
        padding: 0 !important;
        padding-top: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Breadcrumb bar - smaller and relative on mobile */
    .bc-todo-header-bar {
        width: 100% !important;
        padding: 8px 12px !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 10 !important;
    }
    
    .bc-breadcrumb-center {
        font-size: 12px !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .bc-breadcrumb-center a {
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Main todo card - maximize space */
    .bc-todo-main-card {
        padding: 16px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    
    /* Todo title - smaller */
    .bc-todo-main-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    /* Action buttons row - compact */
    .bc-todo-actions-row {
        margin-bottom: 10px !important;
        gap: 6px !important;
    }
    
    /* Meta grid - compact, closer to title */
    .bc-meta-grid {
        gap: 6px !important;
        margin-top: 0 !important;
    }
    
    .bc-meta-row {
        padding: 4px 0 !important;
    }
    
    .bc-meta-label {
        width: 70px !important;
        min-width: 70px !important;
        font-size: 11px !important;
    }
    
    .bc-meta-value {
        font-size: 13px !important;
    }
    
    /* AI Status Card - lower z-index so it doesn't block navigation */
    .bc-ai-status-card {
        position: relative !important;
        z-index: 1 !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .bc-ai-status-label {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }
    
    .bc-ai-profit-badge {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .bc-ai-status-desc {
        font-size: 12px !important;
        margin-top: 6px !important;
    }
    
    /* AI Sections - compact */
    .bc-ai-section {
        z-index: 1 !important;
        position: relative !important;
    }
    
    .bc-ai-tip-card {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Checkbox smaller */
    .bc-todo-checkbox-large {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    
    /* Notes section - less padding */
    .bc-todo-notes {
        padding: 12px !important;
    }
    
    /* Todo actions menu */
    .bc-todo-actions-menu {
        right: 8px !important;
        top: 8px !important;
        z-index: 10 !important;
    }
    
    /* Make room for actions menu on mobile */
    .bc-todo-main-title {
        padding-right: 40px !important;
    }
    
    .bc-meta-row-title .bc-meta-value {
        padding-right: 35px !important;
    }
    
    /* Who's viewing bar - compact */
    .bc-todo-viewers-bar {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    .bc-todo-viewers-avatar,
    .bc-todo-viewers-initial {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }
    
    /* ============================================
       COMMENTS SECTION - Mobile (Desktop-like but compact)
       ============================================ */
    
    /* Comments container - keep desktop card style with smaller padding */
    .bc-comments-section,
    .bc-comments-section-new {
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1px solid #d4d4d4 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        padding: 16px 12px !important;
        margin: 20px 8px 16px 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Section title - like desktop but smaller */
    .bc-section-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 0 16px 0 !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #1d1c1d !important;
    }
    
    /* Add comment link - keep text style like desktop */
    .bc-add-comment-link {
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--primary, #3b82f6) !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: auto !important;
        background: none !important;
        padding: 0 !important;
    }
    
    /* Comment row - grid layout like desktop */
    .bc-comment-row {
        display: grid !important;
        grid-template-columns: 45px 1fr !important;
        gap: 10px !important;
        padding: 12px 4px !important;
        margin: 0 !important;
        border-bottom: 1px solid #e8e1d8 !important;
    }
    
    .bc-comment-row:last-child {
        border-bottom: none !important;
    }
    
    /* Date column */
    .bc-comment-date-col {
        text-align: right !important;
        padding-top: 2px !important;
        width: 45px !important;
        min-width: 45px !important;
    }
    
    .bc-comment-date {
        font-size: 11px !important;
        color: var(--text-muted, #6e6d7a) !important;
        white-space: nowrap !important;
    }
    
    /* Main comment content */
    .bc-comment-main {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Comment header with avatar and name */
    .bc-comment-header-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 6px !important;
    }
    
    .bc-comment-avatar,
    .bc-comment-avatar-col .bc-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 50% !important;
    }
    
    .bc-comment-author {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1d1c1d !important;
    }
    
    /* Comment text content */
    .bc-comment-content,
    .bc-comment-body-content {
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: #1d1c1d !important;
    }
    
    .bc-comment-content p,
    .bc-comment-body-content p {
        margin: 0 0 6px 0 !important;
        font-size: 13px !important;
    }
    
    .bc-comment-content p:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Comment images */
    .bc-comment-content img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        margin: 8px 0 !important;
    }
    
    /* ============================================
       COMMENT FORM - Full width editor
       ============================================ */
    
    .bc-add-comment-form {
        padding: 16px 4px 0 4px !important;
        margin: 0 !important;
        width: 100% !important;
        border-top: 1px solid #e8e1d8 !important;
        display: block !important;
    }
    
    /* Hide avatar column next to editor */
    .bc-add-comment-form > .bc-comment-avatar-col,
    .bc-add-comment-form > .bc-avatar {
        display: none !important;
    }
    
    /* Input row - full width */
    .bc-comment-input-row {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* TinyMCE editor - full width */
    .tox-tinymce {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bc-comment-form textarea {
        min-height: 60px !important;
        font-size: 14px !important;
        padding: 10px !important;
        width: 100% !important;
        border-radius: 6px !important;
    }
    
    /* File upload area */
    .bc-file-upload-area {
        padding: 10px !important;
        font-size: 12px !important;
    }
    
    /* Submit button row */
    .bc-comment-form-actions {
        padding: 10px 0 !important;
    }
    
    /* ============================================
       SUBSCRIBERS SECTION
       ============================================ */
    
    .bc-subscribers-section,
    div.bc-subscribers-section {
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1px solid #d4d4d4 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        padding: 16px 12px !important;
        margin: 16px 8px !important;
        width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }
    
    .bc-subscribers-section h4,
    .bc-subscribers-section h5,
    div.bc-subscribers-section h4,
    div.bc-subscribers-section h5 {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin: 0 0 8px 0 !important;
        padding: 0 4px !important;
    }
    
    .bc-subscribers-section p,
    div.bc-subscribers-section p {
        font-size: 12px !important;
        color: var(--text-muted, #6e6d7a) !important;
        padding: 0 4px !important;
        margin: 0 0 12px 0 !important;
    }
    
    .bc-subscribers-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 0 4px !important;
        margin-bottom: 12px !important;
    }
    
    .bc-add-subscriber-btn {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    
    .bc-your-subscription {
        border-top: 1px solid #e8e1d8 !important;
        padding-top: 12px !important;
        margin-top: 12px !important;
    }
    
    /* Subscribe button - full width on mobile */
    .bc-your-subscription .btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    /* Attachments - compact */
    .bc-attachments-grid {
        gap: 8px !important;
    }
    
    .bc-attachment-item {
        padding: 8px !important;
    }
    
    .bc-attachment-preview {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Activity log - compact */
    .bc-activity-log {
        padding: 8px 12px !important;
    }
    
    .bc-activity-item {
        padding: 6px 0 !important;
        font-size: 12px !important;
    }
    
    /* ===== DROPDOWN MODALS (Snooze, Recurrence, Time) - CENTERED ===== */
    .bc-action-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10000 !important;
        min-width: 280px !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
        border-radius: 12px !important;
    }
    
    .bc-action-dropdown-header {
        padding: 12px 16px !important;
        font-size: 14px !important;
        position: sticky !important;
        top: 0 !important;
        background: white !important;
    }
    
    .bc-action-dropdown-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    .bc-dropdown-input {
        font-size: 14px !important;
        padding: 8px 12px !important;
        width: 70px !important;
    }
    
    .bc-dropdown-btn {
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* ===== COMMENTS - FIX VIEWPORT OVERFLOW ===== */
    /* Note: Main section styling is above in COMMENTS SECTION block */
    
    .bc-comment {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    
    /* Comment form textarea - normal size */
    .bc-comment-form textarea,
    .bc-comment-input,
    .bc-reply-input {
        font-size: 14px !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* Timeline comments */
    .bc-comments-timeline {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .bc-timeline-item {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ===== MOBILE BOTTOM NAVIGATION (Basecamp Style) ===== */
@media (max-width: 768px) {
    /* Hide the old slide-out menu and burger (redundant but ensuring) */
    .bc-mobile-burger {
        display: none !important;
    }
    
    .bc-mobile-menu {
        display: none !important;
    }
    
    .bc-sidebar-overlay {
        display: none !important;
    }
    
    /* Show minimal header with just logo and online count */
    .bc-header {
        display: flex !important;
        height: 48px !important;
        padding: 0 12px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1100 !important;
    }
    
    .bc-header-left {
        flex: 1;
    }
    
    /* Hide nav in header - moved to bottom */
    .bc-header-left .bc-nav,
    .bc-header-left .bc-topbar-nav {
        display: none !important;
    }
    
    /* Center AI button - make smaller */
    .bc-header-center {
        display: none !important; /* AI btn moved to bottom add menu */
    }
    
    /* Keep right side minimal - search + tiny online indicator */
    .bc-header-right {
        flex: 0 !important;
        gap: 8px !important;
    }
    
    .bc-header-right .bc-search-container {
        display: none !important;
    }
    
    .bc-header-right .bc-user-dropdown {
        display: none !important;
    }
    
    /* Show search toggle in header */
    .bc-header-right .bc-mobile-search-toggle {
        display: flex !important;
    }
    
    /* Tiny online indicator in header */
    .bc-header-right .bc-online-indicator {
        display: flex !important;
    }
    
    .bc-online-btn {
        font-size: 10px !important;
        padding: 2px 6px !important;
        background: transparent !important;
        border: none !important;
        color: #6b7280 !important;
        gap: 3px !important;
    }
    
    .bc-online-dot {
        width: 6px !important;
        height: 6px !important;
    }
    
    .bc-online-btn span:last-child {
        font-size: 10px !important;
    }
    
    /* Adjust main content padding for bottom nav */
    .bc-main,
    .app-main {
        padding-bottom: 72px !important;
        padding-top: 48px !important;
    }
    
    body {
        padding-bottom: 72px;
        /* padding-top handled by .bc-main/.app-main */
    }
    
    /* ===== BOTTOM NAVIGATION BAR ===== */
    .bc-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        z-index: 9999;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -1px 8px rgba(0,0,0,0.06);
    }
    
    /* Navigation items - 5 equal items */
    .bc-bottom-nav-item {
        flex: 1;
        max-width: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px 8px;
        color: #6b7280;
        text-decoration: none;
        font-size: 10px;
        font-weight: 500;
        transition: all 0.15s ease;
        position: relative;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    
    .bc-bottom-nav-item:active {
        transform: scale(0.95);
    }
    
    .bc-bottom-nav-item.active {
        color: #2563eb;
    }
    
    .bc-bottom-nav-item.active .bc-bottom-nav-icon {
        color: #2563eb;
    }
    
    .bc-bottom-nav-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        background: #2563eb;
        border-radius: 0 0 2px 2px;
    }
    
    /* Icon styling */
    .bc-bottom-nav-icon {
        font-size: 20px;
        line-height: 1;
        color: #6b7280;
        transition: color 0.15s;
    }
    
    /* Label styling */
    .bc-bottom-nav-label {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }
    
    /* Badge on nav items */
    .bc-bottom-nav-badge {
        position: absolute;
        top: 2px;
        left: 50%;
        margin-left: 6px;
        background: #ef4444;
        color: white;
        font-size: 9px;
        font-weight: 600;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        text-align: center;
    }
    
    /* ===== GREEN ADD BUTTON (inline with others) ===== */
    .bc-bottom-nav-add-item {
        color: #6b7280;
    }
    
    .bc-bottom-nav-add-item .bc-bottom-nav-add-btn {
        width: 36px;
        height: 36px;
        background: #22c55e;
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
        transition: all 0.15s ease;
    }
    
    .bc-bottom-nav-add-item:active .bc-bottom-nav-add-btn {
        transform: scale(0.92);
    }
    
    /* Tiny online indicator */
    .bc-bottom-nav-online {
        position: absolute;
        top: 4px;
        right: 8px;
        min-width: 14px;
        height: 14px;
        line-height: 14px;
        background: #22c55e;
        color: white;
        font-size: 8px;
        font-weight: 600;
        border-radius: 7px;
        text-align: center;
        padding: 0 3px;
    }
    
    /* ===== HOME SUBMENU (Expandable) ===== */
    .bc-bottom-nav-submenu {
        position: fixed;
        bottom: 68px;
        left: 8px;
        right: 8px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
        padding: 8px 0;
        z-index: 9998;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .bc-bottom-nav-submenu.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .bc-bottom-nav-submenu-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        color: #374151;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: background 0.15s;
        border: none;
        background: none;
        width: 100%;
        cursor: pointer;
        text-align: left;
    }
    
    .bc-bottom-nav-submenu-item:active {
        background: #f3f4f6;
    }
    
    .bc-bottom-nav-submenu-item i {
        width: 24px;
        font-size: 18px;
        color: #6b7280;
        text-align: center;
    }
    
    .bc-bottom-nav-submenu-item.active {
        color: #1d4ed8;
        background: #eff6ff;
    }
    
    .bc-bottom-nav-submenu-item.active i {
        color: #1d4ed8;
    }
    
    .bc-bottom-nav-submenu-divider {
        height: 1px;
        background: #e5e7eb;
        margin: 8px 16px;
    }
    
    /* Danger styling for logout button in submenu */
    .bc-bottom-nav-submenu-danger {
        color: #dc2626 !important;
    }
    
    .bc-bottom-nav-submenu-danger i {
        color: #dc2626 !important;
    }
    
    /* Badge styling for trash count in submenu */
    .bc-bottom-nav-submenu-badge {
        margin-left: auto;
        padding: 2px 8px;
        background: var(--primary, #1d4ed8);
        color: white;
        font-size: 11px;
        font-weight: 600;
        border-radius: 10px;
    }
    
    /* Overlay for submenu */
    .bc-bottom-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 60px;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9997;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .bc-bottom-nav-overlay.open {
        opacity: 1;
        visibility: visible;
    }
}

/* ===== HIDE BOTTOM NAV ON DESKTOP ===== */
@media (min-width: 769px) {
    .bc-bottom-nav,
    .bc-bottom-nav-overlay,
    .bc-bottom-nav-submenu,
    .bc-mobile-search-inline,
    .bc-mytasks-mobile-select {
        display: none !important;
    }
}

/* ===== MOBILE SEARCH INLINE (in header) ===== */
@media (max-width: 768px) {
    .bc-mobile-search-inline {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex: 1;
        max-width: 200px;
        background: #f3f4f6;
        border-radius: 8px;
        padding: 8px 12px;
        color: #9ca3af;
        font-size: 13px;
        cursor: pointer;
        margin-right: 8px;
    }
    
    .bc-mobile-search-inline i {
        font-size: 14px;
    }
    
    .bc-mobile-search-inline span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Hide old search toggle */
    .bc-mobile-search-toggle {
        display: none !important;
    }
}

/* ===== HEY PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Hey header - stack buttons vertically */
    .bc-hey-header,
    [class*="hey"] .bc-page-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* Hey action buttons - full width row */
    .bc-hey-actions,
    .bc-hey-header .bc-btn-group,
    [class*="hey"] .bc-page-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .bc-hey-actions .btn,
    .bc-hey-header .btn {
        flex: 1 !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        justify-content: center !important;
    }
    
    /* Sync button and mark as read - equal width */
    .bc-hey-header button,
    .bc-hey-actions button {
        flex: 1 !important;
        white-space: nowrap !important;
    }
}

/* ===== MY TASKS PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Hide the avatar completely on mobile */
    .bc-mytasks-avatar-wrapper {
        display: none !important;
    }
    
    /* Reduce header padding on mytasks */
    .bc-mytasks-header {
        padding: 8px 12px 8px !important;
    }
    
    /* Smaller title */
    .bc-mytasks-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    /* Hide pill nav on mobile, show select instead */
    .bc-mytasks-pill-nav-desktop {
        display: none !important;
    }
    
    /* Mobile select dropdown for mytasks */
    .bc-mytasks-mobile-select {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border: 1px solid var(--border, #e5e7eb) !important;
        border-radius: 8px !important;
        background: white !important;
        color: var(--text, #111827) !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 16px !important;
        padding-right: 40px !important;
    }
    
    /* More compact pill nav - horizontal scroll (fallback) */
    .bc-pill-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .bc-pill-nav-item {
        padding: 5px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide scrollbar but keep functionality */
    .bc-pill-nav::-webkit-scrollbar {
        display: none;
    }
    
    .bc-pill-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* ===== TRASH PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
    /* Trash page header - stack vertically */
    .bc-page-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Trash header action buttons - full width */
    .bc-trash-header-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .bc-trash-header-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        position: relative !important;
        z-index: 11 !important;
    }
    
    /* Trash action bar above list */
    .bc-trash-actions-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .bc-trash-actions-bar .btn {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }
    
    .bc-trash-actions-bar .btn-danger {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        color: #fff !important;
    }
    
    /* Trash info card - more margin below */
    .bc-trash-info-card {
        padding: 12px 14px !important;
        margin-bottom: 20px !important;
    }
    
    .bc-trash-info-card > div {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Trash filter tabs - horizontal scroll, clear separation */
    .bc-trash-filter-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
        margin-top: 4px !important;
    }
    
    .bc-trash-filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .bc-trash-filter-tabs .btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* =====================================================
       TODO DETAIL MOBILE FIXES
       ===================================================== */
    
    /* Hide checkbox in header/breadcrumbs on mobile */
    .bc-header-checkbox-wrapper {
        display: none !important;
    }
    
    /* AI Assistant block - proper margins */
    .bc-rag-assistant-block {
        margin: 16px 12px !important;
        border-radius: 8px !important;
    }
    
    /* Sent Emails section - mobile COMPACT */
    .bc-emails-section {
        margin: 12px 8px !important;
        overflow: hidden !important;
        padding: 10px !important;
    }
    
    .bc-emails-section .bc-subscribers-title {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    
    .bc-emails-section .bc-subscribers-desc {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    .bc-emails-table {
        display: block !important;
        width: 100% !important;
    }
    
    .bc-emails-table tbody {
        display: block !important;
    }
    
    /* COMPACT email row - single line with inline layout */
    .bc-emails-table tr.bc-email-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 6px 8px !important;
        margin-bottom: 4px !important;
        background: var(--surface-secondary, #f9fafb) !important;
        border-radius: 6px !important;
        border: 1px solid var(--border-light, #e5e7eb) !important;
        gap: 6px !important;
    }
    
    .bc-emails-table td {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        width: auto !important;
    }
    
    /* Status icon - small and left */
    .bc-emails-table td.bc-email-status-icon {
        order: 1 !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
    }
    
    /* Recipient name - compact */
    .bc-emails-table td.bc-email-to {
        order: 2 !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100px !important;
    }
    
    /* Subject/type - compact, truncated */
    .bc-emails-table td.bc-email-subject {
        order: 3 !important;
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 11px !important;
        color: var(--text-muted, #6b7280) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Hide email preview on mobile */
    .bc-emails-table td.bc-email-subject .bc-email-preview {
        display: none !important;
    }
    
    /* Date - small, muted */
    .bc-emails-table td.bc-email-date {
        order: 4 !important;
        font-size: 10px !important;
        color: var(--text-muted, #6b7280) !important;
        white-space: nowrap !important;
    }
    
    /* Action button - small */
    .bc-emails-table td.bc-email-action {
        order: 5 !important;
        flex-shrink: 0 !important;
    }
    
    .bc-emails-table td.bc-email-action .btn {
        padding: 2px 6px !important;
        font-size: 11px !important;
    }
    
    /* Pending badge - smaller */
    .bc-pending-badge {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }
    
    /* Batch badge - smaller */
    .bc-batch-badge {
        font-size: 9px !important;
        padding: 1px 3px !important;
    }
    
    /* Emails section header - compact on mobile */
    .bc-emails-section .bc-subscribers-title {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 13px !important;
    }
    
    .bc-emails-section .bc-subscribers-title > span:first-child {
        font-size: 12px !important;
    }
    
    .bc-emails-section .bc-subscribers-title .btn-xs {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }

    /* AI Advisor Panel - collapsible block on mobile instead of overlay */
    .bc-ai-advisor-panel {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: fixed !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .bc-ai-advisor-panel.open {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        z-index: 1200 !important;
        background: var(--surface, white) !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }
    
    .bc-ai-advisor-panel.open .bc-ai-panel-header {
        position: sticky !important;
        top: 0 !important;
        background: var(--surface, white) !important;
        padding: 12px 0 !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid var(--border-light, #e5e7eb) !important;
        z-index: 10 !important;
    }
    
    .bc-ai-advisor-panel.open .bc-ai-panel-close {
        font-size: 28px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .bc-ai-advisor-panel.open .bc-ai-panel-body {
        padding-bottom: 60px !important;
    }
    
    /* =====================================================
       COMMENTS - MOBILE LAYOUT
       ===================================================== */
    
    /* Comment row - mobile 2-line layout */
    .bc-comment-row {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        gap: 8px !important;
        padding: 12px 8px !important;
    }
    
    /* Date column - hide (integrated into header) */
    .bc-comment-date-col {
        display: none !important;
    }
    
    /* Main comment area */
    .bc-comment-main {
        width: 100% !important;
    }
    
    /* Header row: date, avatar, name, badges, actions - all on one line */
    .bc-comment-header-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    
    /* Show date inline in header on mobile */
    .bc-comment-date-inline {
        display: inline-block !important;
        font-size: 11px !important;
        color: var(--text-muted, #6b7280) !important;
        margin-right: 4px !important;
    }
    
    /* Avatar smaller */
    .bc-comment-header-row .bc-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 10px !important;
    }
    
    /* Author name */
    .bc-comment-author {
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    
    /* Group badge */
    .bc-comment-group-badge {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
    
    /* Actions menu - push to right */
    .bc-comment-actions-menu {
        margin-left: auto !important;
        display: flex !important;
        gap: 2px !important;
    }
    
    .bc-comment-actions-menu .btn-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    /* Comment content - full width second row */
    .bc-comment-body-content {
        width: 100% !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    /* =====================================================
       TINYMCE - MOBILE FIXES (COMPACT UI)
       ===================================================== */
    
    /* TinyMCE container */
    .tox-tinymce {
        border-radius: 6px !important;
        overflow: visible !important;
        min-height: 100px !important;
    }
    
    /* Editor header - toolbar area */
    .tox .tox-editor-header {
        overflow: visible !important;
        position: relative !important;
        padding: 2px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .tox .tox-toolbar-overlord {
        overflow: visible !important;
    }
    
    /* Toolbar - wrap to multiple rows */
    .tox .tox-toolbar__primary {
        flex-wrap: wrap !important;
        overflow: visible !important;
        max-height: none !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    .tox .tox-toolbar__group {
        flex-wrap: nowrap !important;
        padding: 0 1px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    /* Toolbar buttons - VERY compact 24px */
    .tox .tox-tbtn {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 2px !important;
        flex-shrink: 0 !important;
        border-radius: 3px !important;
    }
    
    .tox .tox-tbtn__select-label {
        font-size: 10px !important;
    }
    
    /* Split button (dropdown) - compact */
    .tox .tox-split-button {
        height: 24px !important;
        margin: 0 !important;
    }
    
    .tox .tox-split-button__chevron {
        width: 12px !important;
    }
    
    /* Group separator */
    .tox .tox-toolbar__group::before {
        display: none !important;
    }
    
    /* Content area - smaller */
    .tox .tox-edit-area__iframe {
        min-height: 60px !important;
    }
    
    /* Placeholder text - SMALL */
    .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
        font-size: 13px !important;
        color: var(--text-muted, #9ca3af) !important;
        line-height: 1.4 !important;
        padding: 4px 8px !important;
    }
    
    /* Status bar - hide on mobile */
    .tox .tox-statusbar {
        display: none !important;
    }
    
    /* AI buttons container - horizontal on mobile */
    .bc-comment-ai-buttons {
        flex-direction: row !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    
    .bc-comment-ai-btn,
    .bc-comment-grammar-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    /* @ Mention autocomplete - compact, positioned ABOVE editor */
    .mention-autocomplete {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 100% !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 5px !important;
        max-height: 180px !important;
        width: 100% !important;
        z-index: 100000 !important;
        border-radius: 8px !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
    }
    
    .mention-item {
        padding: 8px 12px !important;
        min-height: 40px !important;
        touch-action: manipulation !important;
        gap: 8px !important;
    }
    
    .mention-item .bc-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
    
    .mention-item-name {
        font-size: 13px !important;
    }
    
    .mention-item-email {
        font-size: 10px !important;
    }
    
    /* Comment form actions - stack vertically on mobile */
    .bc-comment-form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .bc-comment-form-actions .bc-hint {
        order: 2 !important;
        text-align: center !important;
        font-size: 11px !important;
    }
    
    .bc-comment-form-actions .bc-comment-buttons {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Unified button style on mobile */
    .bc-comment-btn,
    .bc-comment-btn-secondary {
        flex: 1 !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    /* Reassign button group - full width on mobile */
    .bc-comment-reassign-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }
    
    .bc-comment-reassign-btn-group {
        width: 100% !important;
        display: flex !important;
    }
    
    .bc-comment-reassign-main {
        flex: 1 !important;
        padding: 12px 10px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .bc-comment-reassign-toggle {
        padding: 12px 10px !important;
        flex-shrink: 0 !important;
    }
    
    /* Reassign dropdown - position fixed for mobile, centered */
    .bc-comment-reassign-dropdown {
        position: fixed !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        max-height: 70vh !important;
        margin: 0 !important;
        z-index: 10001 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important;
    }
    
    /* =====================================================
       MYTASKS - HIDE PILL NAV, SHOW SELECT
       ===================================================== */
    
    .bc-mytasks-pill-nav-desktop,
    .bc-pill-nav.bc-mytasks-pill-nav-desktop {
        display: none !important;
    }
    
    .bc-mytasks-mobile-select {
        display: block !important;
    }
    
    /* =====================================================
       CHAT INPUT - Hide grammar buttons on mobile
       ===================================================== */
    
    .bc-chat-input-row {
        gap: 4px !important;
    }
    
    /* Hide grammar check and auto-grammar buttons on mobile */
    .bc-chat-grammar-btn,
    .bc-chat-autogrammar-btn {
        display: none !important;
    }
    
    /* Make attach button smaller */
    .bc-chat-attach-btn {
        padding: 6px !important;
    }
    
    .bc-chat-attach-btn i {
        font-size: 18px !important;
    }
    
    /* Ensure send button is always visible */
    .bc-chat-send-btn {
        padding: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .bc-chat-send-btn i {
        font-size: 18px !important;
    }    
    /* =====================================================
       CHAT HEADER - Compact WhatsApp style
       ===================================================== */
    
    .bc-chat-header {
        padding: 8px 8px 8px 4px !important;
        gap: 8px !important;
        background: #008069 !important;
    }
    
    .bc-chat-back-btn {
        padding: 4px !important;
        margin: 0 !important;
    }
    
    .bc-chat-header-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .bc-chat-header-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .bc-chat-header-members {
        max-width: none !important;
    }
    
    .bc-chat-header-action {
        padding: 6px !important;
    }
}