/* mobile_fixes.css - Mobile UI Refinements */


/* =========================================
   Sidebar & Layout Restructure (Mobile Zoom Fix)
   ========================================= */
@media screen and (max-width: 992px) {

    /* Hide sidebar by default */
    .sidebar {
        left: -260px;
        transition: left 0.3s ease;
        box-shadow: none;
        /* remove shadow when hidden */
    }

    /* Show when toggled (JS adds .show) */
    .sidebar.show {
        left: 0;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
    }

    /* Reset Main Content Margin */
    .main-content {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100vw;
        /* Prevent overflow */
    }

    /* Reduce Padding for visual comfort */
    .content-wrapper {
        padding: 15px !important;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }
}

@media screen and (max-width: 768px) {

    /* Force table to not behave like a table */
    /* TABLE TO CARD - VERTICAL STACK (Fail-Safe) */
    /* Force table to not behave like a table */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        /* More definition */
        padding: 8px;
    }

    td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        padding: 12px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        min-height: auto;
        /* Allow growth */
        font-size: 14px;
        color: #333;
        flex-wrap: wrap;
        /* CRITICAL: Allow wrapping */
        gap: 8px;
    }

    tr td:last-child {
        border-bottom: none;
    }

    /* Label logic */
    td:before {
        content: attr(data-label);
        font-weight: 700;
        color: #666;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
        margin-right: auto;
        /* Remove rigid width constraints */
        flex-basis: auto;
        max-width: 100%;
        margin-bottom: 2px;
        /* Push content down if wrapped */
    }

    /* Content styling */
    td>* {
        text-align: right;
        word-break: break-word;
        /* Prevent cutoffs */
    }

    /* Make content full width if it wraps */
    /* td:not(:first-child) { } */

    /* Action buttons cell */
    td.actions-cell,
    td[data-label="Ações"] {
        justify-content: flex-end;
        gap: 8px;
        background-color: #fafafa;
        border-top: 1px solid #eee;
        padding: 15px;
        border-radius: 0 0 10px 10px;
        flex-wrap: wrap;
    }

    td[data-label="Ações"]:before {
        display: none;
    }

    /* Adjust badges and icons alignment */
    .badge {
        display: inline-block;
        margin-left: 0;
        /* Let flex handle it */
    }
}

/* =========================================
   Financeiro Dashboard
   ========================================= */
@media screen and (max-width: 768px) {
    .finance-card {
        min-width: 100%;
        margin-bottom: 15px;
    }

    .finance-card .value {
        font-size: 1.5rem;
        word-wrap: break-word;
    }

    /* Filters Bar */
    .filters-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .filters-bar form {
        flex-direction: column !important;
        width: 100%;
    }

    .filters-bar .form-control,
    .filters-bar select,
    .filters-bar input,
    .filters-bar button,
    .filters-bar .btn-custom {
        width: 100% !important;
        margin: 5px 0;
    }

    /* Ensure icons in inputs align correctly */
    .filters-bar div[style*="display: flex"] {
        width: 100%;
    }

    /* Action Buttons in Financeiro Top */
    div[style*="display: flex; gap: 10px;"] {
        flex-direction: column;
        width: 100%;
    }
}

/* =========================================
   Relatórios
   ========================================= */
@media screen and (max-width: 768px) {

    /* Fix charts responsiveness if needed */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================
   Calendário
   ========================================= */
@media screen and (max-width: 768px) {

    /* Ensure the header buttons stack */
    .calendar-controls,
    .header-actions {
        flex-direction: column;
        gap: 10px;
    }

    /* Align "Nova Viagem" button to left (or full width) */
    .btn-custom.btn-primary.btn-lg {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   Marketing & Users List
   ========================================= */
@media screen and (max-width: 768px) {

    /* Marketing & Users List Fixes */
    .user-list-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        margin-bottom: 15px;
        border: 1px solid #eee;
    }

    .user-info {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .user-info h4 {
        font-size: 16px;
        margin: 0 0 5px 0;
        line-height: 1.4;
        color: #333;
    }

    .user-info p {
        font-size: 13px;
        color: #666;
        margin: 0;
        line-height: 1.5;
        word-break: break-all;
    }

    /* Table Cell Inner Div Fix (Fornecedores) */
    td>div {
        text-align: right;
        flex: 1;
        /* Allow sharing space with label */
        min-width: 0;
        /* Allow shrinking for text overflow */
        word-break: break-word;
    }

    /* Ensure label stays visible */
    td:before {
        flex-shrink: 0;
        /* Prevent label from collapsing */
        margin-right: 15px;
        /* Spacing between label and content */
    }

    .user-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        /* Right align buttons */
        gap: 10px;
        flex-wrap: wrap;
        border-top: 1px solid #f0f0f0;
        padding-top: 10px;
        margin-top: 10px;
    }
}

/* =========================================
   Oportunidades & Global Bold Fixes
   ========================================= */
@media screen and (max-width: 768px) {

    /* Fix horizontal scroll in Oportunidades */
    .content-wrapper {
        overflow-x: hidden;
    }

    /* Stack Header Controls (Filters + New Button) */
    .content-wrapper>div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px;
    }

    /* Filter Tabs */
    .filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .filter-btn {
        flex: 1 1 45%;
        /* 2 per row approx */
        text-align: center;
        justify-content: center;
        padding: 10px;
    }

    .btn-new {
        width: 100%;
        justify-content: center;
    }

    /* Bold Primary Fields Force */
    td[data-label="Nome"],
    td[data-label="Cliente"],
    td[data-label="Fornecedor"],
    td[data-label="Razão Social"] {
        font-weight: 600 !important;
        color: #334155 !important;
    }

    /* Ensure content inside inherits or is bold */
    td[data-label="Nome"] *,
    td[data-label="Cliente"] *,
    td[data-label="Fornecedor"] *,
    td[data-label="Razão Social"] * {
        font-weight: inherit;
    }

    /* Standard Colored Buttons for Mobile Card View */
    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        color: white;
        transition: opacity 0.2s;
        width: 35px !important;
        height: 35px !important;
        border-radius: 6px !important;
        margin: 0 2px;
    }

    .btn-icon.view {
        background-color: #0ea5e9;
    }

    /* Blue */
    .btn-icon.edit {
        background-color: #ffc107;
    }

    /* Amber/Orange */
    .btn-icon.delete {
        background-color: #ef4444;
    }

    /* Red */
    .btn-icon.email {
        background-color: #22c55e;
    }

    /* Green */
    .btn-icon.history {
        background-color: #6366f1;
    }

    /* Indigo */

    .btn-icon:hover {
        opacity: 0.9;
        color: white;
    }

    /* Specific icon adjustments */
    .btn-icon i {
        font-size: 14px !important;
    }
}

/* =========================================
   Global Header Standardization (Mobile)
   ========================================= */
/* =========================================
   Global Header Standardization (Mobile) - FIXED V3
   ========================================= */
@media screen and (max-width: 768px) {
    .top-header {
        padding: 0 10px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Left Side: Menu + Title */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        flex: 1;
        /* Take remaining space */
        min-width: 0;
        /* Allow shrinking */
        padding-right: 10px;
    }

    .menu-toggle {
        margin-right: 0 !important;
        font-size: 24px !important;
        min-width: 40px !important;
        /* Fixed width */
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1002;
        flex-shrink: 0 !important;
        /* CRITICAL: Prevent collapse */
        color: #333 !important;
        /* Ensure visible color */
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .menu-toggle i {
        font-size: 24px !important;
        /* Ensure icon size */
        color: #333 !important;
    }

    .page-title {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        margin: 0 !important;
        line-height: 1.2;
        flex: 1;
        /* Truncate properly */
    }

    /* Right Side: User Info */
    .user-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0;
        /* Do not shrink */
    }

    .user-name {
        font-size: 12px !important;
        display: inline-block;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-logout {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
}

/* =========================================
   Global Header Standardization (Mobile) - FIXED V4
   ========================================= */
@media screen and (max-width: 768px) {
    .top-header {
        padding: 0 10px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Left Side: Menu + Title */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        flex-grow: 1;
        min-width: 0;
        margin-right: 10px;
    }

    .menu-toggle {
        margin-right: 0 !important;
        font-size: 24px !important;
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1002;
        flex-shrink: 0 !important;
        color: #333 !important;
        border: none !important;
        background: transparent !important;
    }

    .menu-toggle i {
        font-size: 24px !important;
        color: #333 !important;
    }

    .page-title {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        margin: 0 !important;
        line-height: 1.2;
        flex: 1;
    }

    /* Right Side: User Info */
    .user-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0;
        margin-left: auto;
    }

    .user-name {
        font-size: 12px !important;
        display: inline-block;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-logout {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
}

/* =========================================
   Global Header Standardization (Mobile) - FIXED V5 (Strict Right)
   ========================================= */
@media screen and (max-width: 768px) {
    .top-header {
        padding: 0 30px !important;
        /* Increased to 30px per user request */
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Left Side: Menu + Title */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1;
        /* Occupy all text space */
        min-width: 0;
        margin-right: 5px;
    }

    .menu-toggle {
        margin-right: 0 !important;
        font-size: 24px !important;
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1002;
        flex-shrink: 0 !important;
        color: #333 !important;
        border: none !important;
        background: transparent !important;
    }

    .menu-toggle i {
        font-size: 24px !important;
        color: #333 !important;
    }

    .page-title {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        margin: 0 !important;
        line-height: 1.2;
    }

    /* Right Side: User Info - Strict Right Align */
    .user-info {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        flex-shrink: 0;
        margin-left: auto;
        /* Push to far right */
        padding-right: 0 !important;
    }

    .user-name {
        font-size: 11px !important;
        /* Slightly smaller to fit */
        display: inline-block;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
    }

    .btn-logout {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}