/**************************************************
 * MOBILE.CSS - Mobile-specific styles for CULDESA
 * Only activates on screens 768px and below
 **************************************************/

/* Only apply mobile styles on mobile screens */
@media screen and (max-width: 768px) {
    
    /**************************************************
     * FORCE MOBILE WIDTH CONSTRAINTS
     **************************************************/
    
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force all containers to respect mobile width */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        color: var(--primary);
    
    }
    
    /* Module containers */
    .module-container,
    #calculator .calculator-container,
    #tracker .tracker-container,
    #quotation .quotation-container,
    #invoice .invoice-container,
    #receipt .receipt-container,
    #dashboard .dashboard-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* All tables must fit mobile width */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    
    /* Form elements */
    input, select, textarea, button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /**************************************************
     * MOBILE HEADER
     **************************************************/
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: var(--primary, #84a59d);
        color: white;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        font-family: 'Open Sans', sans-serif;
    }

    .mobile-hamburger {
        background: none;
        border: none;
        color: white;
        font-size: 31px;
        cursor: pointer;
        padding: 10px;
        border-radius: 4px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-hamburger:hover {
        background-color: rgba(255,255,255,0.2);
    }

    .mobile-project-name {
        font-size: 16px;
        font-weight: 600;
        flex: 1;
        text-align: center;
        margin: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-user-icon {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        padding: 10px;
        border-radius: 4px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-user-icon:hover {
        background-color: rgba(255,255,255,0.2);
    }

    /**************************************************
     * LAYOUT ADJUSTMENTS
     **************************************************/
    
    /* Hide desktop header on mobile */
    .compact-header,
    header {
        display: none !important;
    }

    /* Adjust main content for mobile header */
    .main-content {
        margin-left: 0 !important;
        padding-top: 70px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }

    /* App container adjustments */
    .app-container {
        flex-direction: column;
    }

    /**************************************************
     * MOBILE SIDEBAR
     **************************************************/
    
    .sidebar {
        position: fixed !important;
        top: 60px !important;
        left: -280px !important;
        width: 280px !important;
        height: calc(100vh - 60px) !important;
        background-color: #f8f9fa !important;
        border-right: 1px solid #dee2e6 !important;
        transition: left 0.3s ease !important;
        z-index: 998 !important;
        overflow-y: auto !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
    }

    /* Sidebar overlay */
    .mobile-sidebar-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 997;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /**************************************************
     * MOBILE MODULE IMPROVEMENTS
     **************************************************/
    
    /* Tab navigation */
    .tabs {
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-bottom: 15px !important;
    }

    .tab-btn {
        flex: 1 1 auto !important;
        min-width: 90px !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    /* Touch targets - buttons and inputs (exclude sidebar and mobile header buttons) */
    button:not(.sidebar button):not(.sidebar .sidebar-btn):not(.sidebar .project-action-btn):not(.sidebar #sidebar-create-project-btn):not(.mobile-hamburger):not(.mobile-user-icon), 
    .control-btn:not(.sidebar .control-btn) {
        min-height: 25px !important;
/*         padding: 5px 8px !important; */
        /* font-size: 14px; */
        width: 80px;
        text-align: center;
    
    }

    input:not(.sidebar input):not(.mobile-header input), 
    select:not(.sidebar select), 
    textarea:not(.sidebar textarea) {
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        border-radius: 6px !important;
    }

    /**************************************************
     * MODULE-SPECIFIC MOBILE ADJUSTMENTS
     **************************************************/
    
    /* Calculator Module */
    #calculator .price-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #calculator .result-value {
        margin-right: 0 !important;
        text-align: center !important;
    }
    
    #calculator .tax-section {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Tracker Module */
    #tracker .kanban-board {
        flex-direction: column !important;
        gap: 15px !important;
    }

    #tracker .stage-column {
        width: 100% !important;
        margin-bottom: 15px !important;
        min-width: auto !important;
    }

    /* Quotation/Invoice/Receipt Headers */
    #quotation .header,
    #invoice .header,
    #receipt .header {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: left !important;
    }

    #quotation .header-left,
    #quotation .header-right,
    #invoice .header-left,
    #invoice .header-right,
    #receipt .header-left,
    #receipt .header-right {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    #quotation .company-info,
    #invoice .company-info,
    #receipt .company-info {
        flex-direction: column !important;
        gap: 15px !important;
    }

    #quotation .company-box,
    #invoice .company-box,
    #receipt .company-box {
        width: 100% !important;
    }
    
    /* Fix form elements that might overflow */
    #quotation .address-textarea,
    #invoice .address-textarea,
    #receipt .address-textarea,
    #quotation input,
    #invoice input,
    #receipt input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dashboard Module */
    #dashboard .summary-stats {
        flex-direction: column !important;
        gap: 15px !important;
    }

    #dashboard .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #dashboard .radio-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    /**************************************************
     * DASHBOARD TABLES - MOBILE OPTIMIZATION
     **************************************************/
    
    /* Force dashboard container and all sections to mobile width */
    #dashboard,
    #dashboard *,
    #dashboard .dashboard-container,
    #dashboard .dashboard-section,
    #dashboard .form-section,
    #dashboard .payment-form,
    #dashboard .section-title,
    #dashboard .summary-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    #dashboard .sync-info {
      font-size: 11px;
      margin-top: 10px;
      color: #666;
      text-align: center;
    }
    #dashboard .dashboard-header{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: stretch;
        align-items: center;
        /*! flex: 2; */
    }
    /* Dashboard container */
    #dashboard .dashboard-container {
        padding: 10px !important;
        margin: 0 !important;
        min-width: auto !important;
    }
    
    /* Dashboard sections */
    #dashboard .dashboard-section {
        margin-bottom: 15px !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Section content */
    #dashboard .form-section,
    #dashboard .summary-container {
        padding: 10px !important;
        width: 100% !important;
    }
   #dashboard .dashboard-header h1 {
      color: var(--green-teal);
      font-size: 24px;
      margin-left: 45%;
    }
    #dashboard .dashboard-controls{
        display:flex;
    }
    /* Payment form */
    #dashboard .payment-form {
        padding: 10px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }
    
    /* ALL dashboard tables - DON'T modify, leave normal */

    /* Table wrapper - both horizontal and vertical scroll with invisible scrollbars */
    #dashboard .mobile-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 400px !important; /* Limit height to force vertical scroll */
        overflow-x: auto !important;
        overflow-y: auto !important; /* Allow vertical scrolling */
        margin: 0 !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        
        /* Hide scrollbars but keep functionality */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* Internet Explorer 10+ */
    }
    
    /* Hide scrollbars for Webkit browsers (Chrome, Safari, Edge) */
    #dashboard .mobile-table-scroll::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    /* Alternative approach - make scrollbars transparent */
    #dashboard .mobile-table-scroll::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    #dashboard .mobile-table-scroll::-webkit-scrollbar-thumb {
        background: transparent !important;
    }

    /* ALL table cells - DON'T modify, leave normal */
    
    /* Tables - NO resizing, just overflow */
    @media screen and (max-width: 768px){
        /* Keep tables normal size, just allow overflow */
        #dashboard table {
            /* NO width, NO transform, NO scaling - just natural table size */
        }
        
        #dashboard table th,
        #dashboard table td {
            /* Keep normal table cell sizing */
        }
    }
    
    /* DON'T modify dashboard dropdowns and buttons - leave them normal */
    
    /* Dashboard section titles */
    #dashboard .section-title {
        font-size: 11px !important;
        padding: 3px 8px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Progress container */
    #dashboard .progress-container {
        margin: 5px 0 !important;
        padding: 5px !important;
        width: 100% !important;
    }
    
    /* Summary stats */
    #dashboard .stat-value {
        font-size: 16px !important;
    }
    
    #dashboard .stat-label {
        font-size: 10px !important;
    }
    
    /* Form elements in dashboard */
    #dashboard input,
    #dashboard select,
    #dashboard textarea,
    #dashboard button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
    }
    
    /* Dashboard control buttons */
    #dashboard .control-btn {
        font-size: 10px !important;
        /*! padding: 5px 12px !important; */
        width: 48% !important;
        margin: 0px !important;
    }
    
    /**************************************************
     * MOBILE RADIO BUTTONS FIX
     **************************************************/
    
    /* Make radio buttons SMALLER on mobile */
    input[type="radio"] {
        transform: scale(0.8) !important; /* Smaller */
        margin: 0 6px 0 0 !important;
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }
    
    /* Radio button labels */
    .radio-group label,
    .payment-type-option {
        font-size: 14px !important;
        margin: 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /**************************************************
     * MOBILE SIDEBAR FIXES
     **************************************************/
    
    /* User profile in sidebar - compact */
    .sidebar .user-profile {
        padding: 10px !important;
        min-height: auto !important;
    }
    
    .sidebar .user-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        margin-right: 8px !important;
    }
    
    .sidebar .user-info h3 {
        font-size: 12px !important;
        margin: 0 !important;
        color: var(--primary);
    
    }
    
    .sidebar .user-info p {
        font-size: 10px !important;
        margin: 2px 0 5px !important;
    }
    
    /* SIDEBAR SPECIFIC BUTTON STYLES */
    .sidebar .sidebar-btn,
    .sidebar button {
        font-size: 10px !important;
        padding: 4px 8px !important;
        margin: 2px 0 !important;
        min-height: 28px !important; /* Smaller than general mobile buttons */
        border-radius: 3px !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        cursor: pointer !important;
        transition: background-color 0.2s !important;
    }
    
    .sidebar .sidebar-btn:hover,
    .sidebar button:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Project action buttons in sidebar */
    .sidebar .project-action-btn {
        font-size: 10px !important;
        padding: 3px 5px !important;
        margin: 0 1px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        background-color: var(--green-teal) !important;
        color: white !important;
        border: none !important;
        border-radius: 2px !important;
        opacity: 0.8 !important;
    }
    
    .sidebar .project-action-btn:hover {
        opacity: 1 !important;
        background-color: var(--green-light) !important;
    }
    
    .sidebar .delete-project-btn:hover {
        background-color: #dc3545 !important;
    }
    
    .sidebar .project-actions {
        gap: 2px !important;
        opacity: 0.7 !important;
    }
    
    .sidebar .sidebar-project-item:hover .project-actions {
        opacity: 1 !important;
    }
    
    /* Project list in sidebar */
    .sidebar .sidebar-project-item {
        padding: 8px !important;
        margin-bottom: 3px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
        transition: background-color 0.2s !important;
    }
    
    .sidebar .project-name {
        font-size: 11px !important;
        line-height: 1.2 !important;
        color: #333 !important;
    }
    
    /* Sidebar create project section */
    .sidebar .sidebar-project-actions {
        margin-top: 10px !important;
        padding: 8px !important;
    }
    
    .sidebar #sidebar-new-project-name {
        width: 100% !important;
        padding: 6px !important;
        margin-bottom: 8px !important;
        font-size: 11px !important;
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        min-height: 32px !important; /* Override general mobile input height */
    }
    
    .sidebar #sidebar-create-project-btn {
        width: 100% !important;
        padding: 6px 0 !important;
        font-size: 11px !important;
        background-color: var(--green-teal) !important;
        color: white !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        min-height: 32px !important; /* Override general mobile button height */
    }
    
    .sidebar #sidebar-create-project-btn:hover {
        background-color: var(--green-light) !important;
    }
    
    /* Notification badge in sidebar */
    .sidebar .notification-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
        top: 6px !important;
        right: 6px !important;
        background-color: #ff4444 !important;
        color: white !important;
    }

 /**************************************************
 * MOBILE TABLES - SIMPLIFIED COLUMN HIDING
 **************************************************/

@media screen and (max-width: 768px) {
    /* Dashboard Tables - Hide less important columns */
    
    /* Documents Table - Show: Date, Type, Amount, Status (Hide Number) */
    #dashboard .documents-table th:nth-child(3),
    #dashboard .documents-table td:nth-child(3) {
        display: none !important;
    }
    
    /* Bookkeeping Table - Show: Date, Description, Balance, Action (Hide Debit, Credit, Category) */
    #dashboard .bookkeeping-table th:nth-child(3),
    #dashboard .bookkeeping-table td:nth-child(3),
    #dashboard .bookkeeping-table th:nth-child(4), 
    #dashboard .bookkeeping-table td:nth-child(4),
    #dashboard .bookkeeping-table th:nth-child(6),
    #dashboard .bookkeeping-table td:nth-child(6) {
        display: none !important;
    }
    
    /* Make remaining columns fit better */
    #dashboard table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    #dashboard table th,
    #dashboard table td {
        padding: 6px 4px !important;
        font-size: 10px !important;
        word-wrap: break-word !important;
    }
    
    /* Adjust specific column widths */
    #dashboard .documents-table th:nth-child(1),
    #dashboard .documents-table td:nth-child(1) { width: 25%; } /* Date */
    #dashboard .documents-table th:nth-child(2),
    #dashboard .documents-table td:nth-child(2) { width: 20%; } /* Type */
    #dashboard .documents-table th:nth-child(4),
    #dashboard .documents-table td:nth-child(4) { width: 30%; } /* Amount */
    #dashboard .documents-table th:nth-child(5),
    #dashboard .documents-table td:nth-child(5) { width: 25%; } /* Status */
    
    #dashboard .bookkeeping-table th:nth-child(1),
    #dashboard .bookkeeping-table td:nth-child(1) { width: 20%; } /* Date */
    #dashboard .bookkeeping-table th:nth-child(2),
    #dashboard .bookkeeping-table td:nth-child(2) { width: 40%; } /* Description */
    #dashboard .bookkeeping-table th:nth-child(5),
    #dashboard .bookkeeping-table td:nth-child(5) { width: 25%; } /* Balance */
    #dashboard .bookkeeping-table th:nth-child(7),
    #dashboard .bookkeeping-table td:nth-child(7) { width: 15%; } /* Action */
}

/* For very small screens, hide even more */
 @media screen and (max-width: 768px) {
    /* Bookkeeping - Show only Balance and Actions */
    #dashboard .bookkeeping-table th:nth-child(1),
    #dashboard .bookkeeping-table td:nth-child(1),
    #dashboard .bookkeeping-table th:nth-child(2),
    #dashboard .bookkeeping-table td:nth-child(2),
    #dashboard .bookkeeping-table th:nth-child(3),
    #dashboard .bookkeeping-table td:nth-child(3),
    #dashboard .bookkeeping-table th:nth-child(4),
    #dashboard .bookkeeping-table td:nth-child(4),
    #dashboard .bookkeeping-table th:nth-child(6),
    #dashboard .bookkeeping-table td:nth-child(6) {
        display: none !important;
        font-size: 10px;
    }
}
    /**************************************************
     * MOBILE MODALS
     **************************************************/
    
    .modal-backdrop,
    .dashboard-modal-backdrop {
        padding: 10px !important;
    }

    .modal-container,
    .dashboard-modal-container {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 0 !important;
        max-height: 90vh !important;
    }

    /**************************************************
     * MOBILE UTILITIES
     **************************************************/
    
    /* Hide on mobile */
    .mobile-hide {
        display: none !important;
    }

    /* Show only on mobile */
    .mobile-show {
        display: block !important;
    }

    /* Notification badge adjustments */
    .notification-badge,
    #notification-badge {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        top: 8px !important;
        right: 8px !important;
    }

} /* End of mobile media query */

/**************************************************
 * LANDSCAPE MOBILE ADJUSTMENTS
 **************************************************/
@media screen and (max-width: 768px) and (orientation: landscape) {
    .mobile-header {
        height: 50px !important;
    }

    .sidebar {
        top: 50px !important;
        height: calc(100vh - 50px) !important;
    }

    .mobile-sidebar-overlay {
        top: 50px !important;
    }

    .main-content {
        padding-top: 60px !important;
    }
}

/**************************************************
 * VERY SMALL SCREENS (< 400px)
 **************************************************/
@media screen and (max-width: 400px) {
    .main-content {
        padding: 70px 10px 10px 10px !important;
    }

    .tab-btn {
        min-width: 80px !important;
        font-size: 11px !important;
        padding: 8px 6px !important;
    }

    .mobile-project-name {
        font-size: 14px !important;
    }

    /* Stack action buttons vertically on very small screens */
    .module-controls {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .module-controls button {
        width: 100% !important;
    }
}