/* ===================================
   Mobile Overrides (< 768px)
   =================================== */

/* 
   NOTE: This file inherits ALL styles from style.css.
   Only write CSS here if you want to CHANGE it for mobile.
*/

/* Import Mobile Modules */
/* Import Responsive Modules (Behavior-based) */
@import 'modules/nav-responsive.css';
@import 'modules/table-cards.css';
@import 'modules/modal-fullscreen.css';
@import 'modules/calendar-mobile.css';
/* Mobile Dashboard Overrides (Inlined) */
@media (max-width: 768px) {

    /* Override inline styles from tab-dashboard.php */
    .guardfolio-stats-grid,
    .guardfolio-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Adjust Widget Spacing */
    .guardfolio-widget {
        margin-bottom: 20px;
        /* Consistent with other mobile margins */
    }

    /* KPI Cards Height Adjustment */
    .guardfolio-kpi-card {
        height: auto !important;
        min-height: 120px;
    }

    /* Charts Container */
    .widget-body canvas {
        max-height: 350px !important;
    }

    /* Donut Charts Row -> Column */
    .guardfolio-dashboard-grid {
        display: flex !important;
        flex-direction: column;
    }

    /* 
       NOTE: Topbar layout is handled by inline styles in dashboard-header.php
       to prevent layout jumping. Do not override flex-direction here.
    */

    /* Fix: Intro Text & Filter Alignment - STRICT STACKING */
    .guardfolio-tab-intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 24px;
        width: 100%;
    }

    .guardfolio-tab-intro p {
        margin-bottom: 0 !important;
        width: 100%;
        line-height: 1.5;
    }

    /* Filter Container - Full Width & Side by Side */
    .guardfolio-date-filter {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Make dropdowns share space equally */
    .guardfolio-date-filter select {
        flex: 1 !important;
        min-width: 0 !important;
        min-height: 44px;
        /* Touch target */
    }

    /* Dropdowns Container (Topbar) */
    .guardfolio-controls {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 768px) {

    /* Global Mobile Adjustments */
    /* Global Mobile Adjustments */
    /* body { ... } */

    /* Utility: Hide elements on mobile */
    .desktop-only {
        display: none !important;
    }

    /* Reduce Main Container Padding */
    .guardfolio-main {
        padding: 12px !important;
    }

    /* --- TOUCH TARGETS (44px Rule) --- */
    button,
    .guardfolio-btn,
    .btn,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select,
    .guardfolio-btn-icon,
    .guardfolio-btn-icon-danger {
        min-height: 44px !important;
        /* Apple Recommendation */
        min-width: 44px !important;
    }

    /* Ensure icons inside buttons are centered if button grew */
    .guardfolio-btn-icon .dashicons,
    .guardfolio-btn-icon-danger .dashicons {
        line-height: 44px;
    }
}

/* ===================================
   Dashboard Header Mobile Overrides
   (Moved from inline styles in dashboard-header.php)
   =================================== */
@media (max-width: 768px) {

    /* Full-width mobile layout - remove borders */
    .guardfolio-app {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }

    .guardfolio-main {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }

    /* Date card - single line */
    .guardfolio-date-card {
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .guardfolio-date-card>div {
        display: inline !important;
    }

    /* Structural: Header Layout */
    .guardfolio-topbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Show hamburger on mobile */
    #guardfolio-mobile-toggle {
        display: flex !important;
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide greeting div completely */
    .guardfolio-topbar>div:first-of-type {
        display: none !important;
        flex: 0 !important;
    }

    /* Date takes remaining space and aligns right */
    .guardfolio-topbar>div:last-child {
        order: 2 !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* Structural: Widget Header Direction */
    .guardfolio-widget .widget-header {
        height: auto !important;
        min-height: auto !important;
        padding: 0 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .guardfolio-widget .widget-header>div {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 8px !important;
    }

    /* Description text styling */
    .guardfolio-widget .widget-header>div>span:first-child {
        font-size: 11px !important;
        line-height: 1.4 !important;
        display: block !important;
        width: 100% !important;
    }

    /* Toggle container */
    .chart-scale-toggle {
        transform: scale(0.85) !important;
        transform-origin: left center !important;
        margin-top: 4px !important;
    }



    /* Performance chart container mobile height */
    .performance-chart-container {
        height: 350px !important;
    }

    /* --- Compact Donut Charts for Mobile --- */
    /* Override inline 400px height */
    .guardfolio-dashboard-grid .guardfolio-widget {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Target donut charts specifically (they are in centered bodies) */
    .widget-body.centered canvas {
        max-height: 180px !important;
    }

    /* Reduce vertical spacing in donut cards */
    .widget-body.centered {
        padding: 15px !important;
    }

    .widget-body.centered p {
        margin-top: 10px !important;
        font-size: 12px !important;
    }

    /* --- DataTables Controls Mobile Fixes --- */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        /* DataTables adds margin-left by default */
        display: block !important;
        margin-top: 5px !important;
    }

    /* --- Form Layout Mobile Fixes --- */
    /* Force 2-col and 3-col form rows to have 2 columns on mobile (User Request) */
    .guardfolio-form-row.two-col,
    .guardfolio-form-row.three-col,
    .guardfolio-form-row[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
        gap: 10px !important;
    }

    /* Ensure inputs take full width */
    .guardfolio-form-group {
        width: 100% !important;
    }

    /* Date Input Compactness (User Request) */
    /* Date Input Compactness (User Request) */
    .guardfolio-form-group input[type="datetime-local"] {
        flex: 0 0 auto !important;
        /* Don't grow, don't shrink */
        width: 145px !important;
        /* Fixed compact width (~16 chars + icon) */
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 13px !important;
        /* Slightly smaller text to fit yyyy HH:mm */
        padding-right: 0 !important;
    }

    /* Fix Alignment: Force labels to same height (2 lines) to prevent input jumping */
    .guardfolio-form-group label {
        min-height: 42px !important;
        /* Increased height for 2 lines + Emoji */
        line-height: 1.2 !important;
        /* Tighter line height for wrapping */
        display: flex !important;
        align-items: flex-end !important;
        /* Force bottom alignment so inputs start at same level */
        padding-bottom: 4px !important;
        /* Slight space above input */
    }

    /* --- Open Trades Header Fixes (User Request) --- */
    /* Override generic widget-header column layout for this specific toggle */
    #toggle-open-trades {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        /* Visual breathing room */
    }

    /* Reset the inner div (Title + Badge) to be a row again */
    #toggle-open-trades>div {
        flex-direction: row !important;
        align-items: baseline !important;
        /* Align text on the same line */
        width: auto !important;
        gap: 20px !important;
        /* Move badge further right */
    }

    /* Apply same padding to Filter toggle for consistency */
    #toggle-trade-filters {
        padding: 15px 20px !important;
    }

    /* Fix "very large font" and alignment */
    #toggle-open-trades h3 {
        font-size: 16px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Style the badge to match */
    #toggle-open-trades .trade-count-badge {
        font-size: 14px !important;
        color: #6b7280 !important;
        font-weight: 500 !important;
        display: inline-block !important;
        /* Ensure it respects baseline */
    }

    /* SHOW MOBILE VIEW TOGGLE */
    .mobile-view-toggle {
        display: block !important;
    }

    /* Force 2-column layout for filters on mobile */
    #trade-filters-content>div {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        /* Slightly tighter gap for mobile */
    }

    /* --- NOTE MODAL FIXES (NUCLEAR OPTION) --- */
    /* Using 'body' prefix to override EVERYTHING */
    body #note-edit-modal.guardfolio-modal {
        padding: 10px !important;
        align-items: center !important;
        z-index: 999999 !important;
    }

    body #note-edit-modal .guardfolio-modal-content {
        /* Removed width/max-width - using global modal-fullscreen.css values */
        height: auto !important;
        max-height: 85vh !important;
        padding: 12px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* Fixed Selector: HTML uses .widget-header, not .modal-header */
    body #note-edit-modal .widget-header {
        margin-bottom: 0px !important;
        /* Minimized header gap */
        padding-bottom: 5px !important;
        flex: 0 0 auto !important;
    }

    body #note-edit-modal h3 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Fixed Selector: HTML uses .widget-body, not .modal-body */
    body #note-edit-modal .widget-body {
        flex: 1 1 auto;
        padding: 0 !important;
        overflow-y: visible !important;
    }

    /* COMPACT FORM ELEMENTS */
    body #note-edit-modal .guardfolio-form-group {
        margin-bottom: 6px !important;
        /* Even tighter */
    }

    /* LABELS: Aggressive Gap Handling */
    body #note-edit-modal label {
        font-size: 11px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.0 !important;
        display: block !important;
        min-height: 0 !important;
    }

    /* Force grids to stay side-by-side */
    #note-edit-modal div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 6px !important;
    }

    /* --- ADD/EDIT TRADE MODAL ALIGNMENT FIX (CRITICAL) --- */
    /* Force 1-column layout for input rows - STRICT stacking */
    #guardfolio-add-trade-form .guardfolio-form-row,
    #edit-trade-form .guardfolio-form-row {
        grid-template-columns: 1fr !important;
        display: block !important;
        /* Forces vertical stacking */
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Input Groups - Margin for vertical spacing */
    #guardfolio-add-trade-form .guardfolio-form-group,
    #edit-trade-form .guardfolio-form-group {
        width: 100% !important;
        margin-bottom: 15px !important;
        display: block !important;
    }

    /* Force inputs to full width */
    #guardfolio-add-trade-form input,
    #edit-trade-form input,
    #guardfolio-add-trade-form select,
    #edit-trade-form select {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* OpenTime/CloseTime: Ensure the input group container takes full width */
    #guardfolio-add-trade-form .guardfolio-form-group>div[style*="display: flex"],
    #edit-trade-form .guardfolio-form-group>div[style*="display: flex"] {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }

    /* Helper text (small): Allow wrapping and ensure visibility */
    #guardfolio-add-trade-form small {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        /* Allow wrapping */
        overflow: visible !important;
        height: auto !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }

    #guardfolio-add-trade-form .guardfolio-form-row .guardfolio-form-group label,
    #edit-trade-form .guardfolio-form-row .guardfolio-form-group label {
        display: block !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    /* ADD/EDIT TRADE MODAL INPUT STYLING */
    #guardfolio-add-trade-form input,
    #guardfolio-add-trade-form select,
    #edit-trade-form input,
    #edit-trade-form select {
        font-size: var(--fs-sm) !important;
        /* ~14px */
        padding: 6px 8px !important;
        height: auto !important;
        min-height: 32px !important;
    }

    /* --- CLOSE TRADE MODAL FIXES --- */
    /* Entry Info: 2x2 grid on mobile with tight spacing */
    .close-trade-entry-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
    }

    .close-trade-entry-info .guardfolio-form-group {
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .close-trade-entry-info label {
        margin-bottom: var(--space-xs) !important;
        font-size: calc(var(--fs-xs) * 0.9) !important;
        text-align: center !important;
        min-height: 0 !important;
        height: auto !important;
        display: block !important;
        align-items: unset !important;
        padding-bottom: 0 !important;
        line-height: 1.3 !important;
        color: var(--gtj-text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 500 !important;
    }

    .close-trade-entry-info .entry-info-value,
    .close-trade-entry-info input.guardfolio-input,
    .close-trade-entry-info input.entry-info-value,
    .close-trade-entry-info .guardfolio-input.entry-info-value {
        font-size: var(--fs-sm) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: var(--gtj-text-primary) !important;
        font-weight: 600 !important;
    }

    /* Input styling for Close Trade modal */
    #close-trade-form input,
    #close-trade-form select {
        font-size: var(--fs-sm) !important;
        padding: 6px 8px !important;
        height: auto !important;
        min-height: 32px !important;
    }

    /* Form group spacing */
    #close-trade-form .guardfolio-form-group {
        margin-bottom: 8px !important;
    }

    #close-trade-form label {
        font-size: var(--fs-xs) !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
    }

    /* TARGET TINYMCE EDITOR CONTAINER (Force Height) */
    body #note-edit-modal .tox-tinymce {
        height: 180px !important;
        /* Smaller Height */
        max-height: 180px !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        border: 1px solid #ddd !important;
    }

    /* HIDE TINYMCE STATUS BAR */
    body #note-edit-modal .tox-statusbar {
        display: none !important;
    }

    /* SHRINK TINYMCE ICONS (User Request) */
    body #note-edit-modal .tox-toolbar,
    body #note-edit-modal .tox-toolbar__primary {
        min-height: 28px !important;
        height: 28px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid #eee !important;
    }

    body #note-edit-modal .tox-toolbar__group {
        padding: 0 !important;
        height: 28px !important;
    }

    body #note-edit-modal .tox-tbtn {
        height: 24px !important;
        width: 24px !important;
        margin: 0 !important;
        transform: scale(0.9);
        /* Visual scaling override */
    }

    body #note-edit-modal .tox-tbtn svg {
        height: 16px !important;
        /* Actual icon shrink */
        width: 16px !important;
        fill: #555 !important;
    }

    /* Fallback */
    body #note-edit-modal textarea#note-content-editor-v2 {
        height: 180px !important;
    }

    body #note-edit-modal input,
    body #note-edit-modal select {
        font-size: var(--fs-sm) !important;
        /* Using design system variable (~14px) */
        padding: 6px 8px !important;
        height: auto !important;
        min-height: 32px !important;
        margin-top: 0 !important;
    }
}