/* Hide icons with page names on mobile view for specific pages */

/* Default: Show desktop text, hide mobile text */
.dashboard-hero h2 .mobile-only-text {
    display: none;
}

.dashboard-hero h2 .desktop-only-text {
    display: inline;
}

@media (max-width: 768px) {
    /* Hide icons in page headers on mobile view for: Past Papers, Resources, Study Plan, Graph Plotter */
    .dashboard-hero h2 i {
        display: none !important;
    }
    
    /* Hide "Edexcel IAL Mathematics " text on mobile, show only "Study Plans" */
    .dashboard-hero h2 .desktop-only-text {
        display: none !important;
    }
    
    /* Show mobile-only text (e.g., "Grapher" instead of "Graph Plotter") */
    .dashboard-hero h2 .mobile-only-text {
        display: inline !important;
    }
    
    /* Fix Graph Plotter page card widths on mobile */
    .graph-plotter-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Fix dashboard-hero negative margins on mobile */
    .container > .dashboard-hero {
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: calc(100% + 20px) !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* ROOT CAUSE FIX: Graph Controls card has inline padding: 30px causing Clear button cutoff */
    .graph-controls,
    div.graph-controls {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
    }
    
    /* Override inline padding: 30px on graph-controls */
    .graph-controls[style*="padding: 30px"],
    div.graph-controls[style] {
        padding: 15px !important;
    }
    
    .graph-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* ROOT CAUSE FIX: Equation input group container */
    .equation-input-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }
    
    /* ROOT CAUSE FIX: Button container causing Clear button to be cut off */
    .equation-input-group > div[style*="display: flex"],
    .equation-input-group > div[style*="gap: 10px"],
    .graph-controls > div > div > div[style*="display: flex"] {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure both buttons fit properly */
    .equation-input-group button.generate-btn,
    .graph-controls button.generate-btn {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    /* Specifically fix Clear button - ensure it's fully visible and not cut off */
    button[onclick="clearGraph()"],
    .graph-controls button[onclick="clearGraph()"],
    .equation-input-group button[onclick="clearGraph()"] {
        flex: 0 0 auto !important;
        min-width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        width: auto !important;
    }
    
    /* Ensure Plot Graph button takes remaining space */
    button[onclick="plotGraph()"],
    .graph-controls button[onclick="plotGraph()"] {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    
    /* Override inline flex: 1 on Plot Graph button */
    button[onclick="plotGraph()"][style*="flex: 1"] {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    
    /* ROOT CAUSE FIX: Keyboard card - increased padding for larger keys */
    .on-screen-keyboard,
    #onScreenKeyboard,
    div.on-screen-keyboard {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Aggressively override inline styles - target by ID and attribute */
    #onScreenKeyboard[style],
    .on-screen-keyboard[style] {
        height: auto !important;
        padding: 12px !important;
        max-width: 100% !important;
    }
    
    /* Increase header margin-bottom for larger keys */
    .on-screen-keyboard > div:first-of-type,
    #onScreenKeyboard > div:first-of-type {
        margin-bottom: 10px !important;
    }
    
    /* Increase header font size */
    .on-screen-keyboard > div:first-of-type h4,
    #onScreenKeyboard > div:first-of-type h4 {
        font-size: 14px !important;
    }
    
    /* ROOT CAUSE FIX: Clear button getting cut off - parent container width issue */
    /* Header div has inline styles that need override */
    .on-screen-keyboard > div:first-of-type,
    #onScreenKeyboard > div:first-of-type {
        flex-wrap: nowrap !important;
        gap: 5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    /* Override ALL inline styles on header div */
    .on-screen-keyboard > div[style*="display: flex"],
    #onScreenKeyboard > div[style*="display: flex"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 5px !important;
    }
    
    /* Fix h4 to leave space for button */
    .on-screen-keyboard > div:first-of-type h4,
    #onScreenKeyboard > div:first-of-type h4 {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 60px) !important;
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ROOT CAUSE FIX: Clear button must not shrink or be cut off */
    .keyboard-btn-clear,
    button.keyboard-btn-clear,
    button[onclick="clearInput()"],
    #onScreenKeyboard button[onclick="clearInput()"] {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        padding: 4px 6px !important;
        font-size: 8px !important;
        margin-left: 5px !important;
        margin-right: 0 !important;
        min-width: auto !important;
        max-width: none !important;
        width: auto !important;
        overflow: visible !important;
    }
    
    /* Override inline style on clear button - target by attribute */
    button[onclick="clearInput()"][style],
    #onScreenKeyboard button[onclick="clearInput()"][style] {
        padding: 4px 6px !important;
        font-size: 8px !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* ROOT CAUSE FIX: Keyboard grid rows - increased spacing for larger keys */
    .keyboard-row,
    .on-screen-keyboard .keyboard-row,
    #onScreenKeyboard .keyboard-row,
    div.keyboard-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    
    /* Override inline margin-bottom: 4px on keyboard rows */
    .keyboard-row[style*="margin-bottom: 4px"],
    div.keyboard-row[style],
    div[class="keyboard-row"][style] {
        margin-bottom: 4px !important;
        gap: 4px !important;
    }
    
    /* ROOT CAUSE FIX: Keyboard keys - increased size and font for better visibility */
    .keyboard-key,
    .on-screen-keyboard .keyboard-key,
    #onScreenKeyboard .keyboard-key,
    button.keyboard-key {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 8px 4px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        height: 36px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Override inline min-height on keyboard keys */
    .keyboard-key[style*="min-height"],
    button.keyboard-key[style] {
        min-height: 36px !important;
        max-height: 36px !important;
        height: 36px !important;
        padding: 8px 4px !important;
        font-size: 13px !important;
    }
    
    /* Ensure keyboard content fits within card - remove last row margin */
    .on-screen-keyboard .keyboard-row:last-of-type,
    #onScreenKeyboard .keyboard-row:last-of-type {
        margin-bottom: 0 !important;
    }
    
    /* ROOT CAUSE FIX: Quick equations - slightly increased spacing */
    .quick-equations,
    #onScreenKeyboard .quick-equations,
    .on-screen-keyboard .quick-equations {
        margin-top: 10px !important;
        padding-top: 10px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Override inline flex: 1 and margin-top: 20px, padding-top: 20px */
    .quick-equations[style*="flex: 1"],
    div[class="quick-equations"][style],
    .quick-equations[style*="margin-top: 20px"] {
        flex: none !important;
        flex-grow: 0 !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
    }
    
    /* Increase spacing in quick examples label */
    .quick-equations label,
    .quick-equations > label {
        margin-bottom: 8px !important;
        font-size: 11px !important;
    }
    
    /* Increase spacing in quick examples grid */
    .quick-equations > div[style*="grid-template-columns"],
    .quick-equations > div[style*="display: grid"] {
        gap: 6px !important;
    }
    
    /* Increase padding on quick example buttons */
    .quick-btn,
    button.quick-btn {
        padding: 6px 8px !important;
        font-size: 10px !important;
        min-height: 32px !important;
    }
    
    /* Fix quick examples grid on mobile */
    .quick-equations > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    /* ROOT CAUSE FIX: Increase graph container height on mobile to push keyboard card down */
    .graph-container {
        overflow: hidden !important;
        padding: 20px !important;
        min-height: auto !important;
    }
    
    /* Override inline padding: 30px on graph-container */
    .graph-container[style*="padding: 30px"],
    div.graph-container[style] {
        padding: 20px !important;
    }
    
    /* ROOT CAUSE FIX: Increase graph height on mobile to push keyboard card down and give it more space */
    #graph,
    div#graph {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        height: 500px !important;
        min-height: 500px !important;
    }
    
    /* Override inline height: 600px on graph and any other height rules */
    #graph[style*="height: 600px"],
    #graph[style*="height: 400px"],
    div#graph[style] {
        height: 500px !important;
        min-height: 500px !important;
    }
    
    /* Fix coordinates display position on mobile */
    #coordinatesDisplay {
        top: 10px !important;
        right: 10px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    /* ROOT CAUSE FIX: Parent grid container constraining width */
    /* Fix the two-column grid layout container - target first child div */
    .graph-plotter-section > div:first-of-type,
    .graph-plotter-section > div[style*="grid-template-columns"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        gap: 15px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }
    
    /* Ensure child cards in grid don't exceed container */
    .graph-plotter-section > div:first-of-type > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure container doesn't overflow on mobile */
    .container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Override for testimonials section container to maintain centering */
    .testimonials-section .container {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Prevent horizontal scroll on mobile */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* Match assignment marks table style - simple block layout */
    .performance-summary-table-section .table-modern tbody tr {
        display: block !important;
        background: white !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Cells - simple content blocks, no card styling */
    .performance-summary-table-section .table-modern tbody td {
        display: block !important;
        padding: 12px 0 !important;
        border: none !important;
        text-align: left !important;
        position: relative !important;
        padding-left: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        background: transparent !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* First cell - no top border */
    .performance-summary-table-section .table-modern tbody td:first-child {
        border-top: none !important;
        padding-top: 0 !important;
    }
    
    /* Overall Average (2nd cell) and Grade (3rd cell) - side by side */
    .performance-summary-table-section .table-modern tbody td:nth-child(2),
    .performance-summary-table-section .table-modern tbody td:nth-child(3) {
        display: inline-block !important;
        width: calc(50% - 8px) !important;
        vertical-align: top !important;
        padding-right: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    
    .performance-summary-table-section .table-modern tbody td:nth-child(2) {
        padding-right: 8px !important;
    }
    
    .performance-summary-table-section .table-modern tbody td:nth-child(3) {
        padding-left: 8px !important;
        padding-right: 0 !important;
    }
    
    /* Assignments (4th cell) and Practice Papers (5th cell) - side by side */
    .performance-summary-table-section .table-modern tbody td:nth-child(4),
    .performance-summary-table-section .table-modern tbody td:nth-child(5) {
        display: inline-block !important;
        width: calc(50% - 8px) !important;
        vertical-align: top !important;
        padding-right: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    
    .performance-summary-table-section .table-modern tbody td:nth-child(4) {
        padding-right: 8px !important;
    }
    
    .performance-summary-table-section .table-modern tbody td:nth-child(5) {
        padding-left: 8px !important;
        padding-right: 0 !important;
    }
    
    /* Last cell - no bottom border */
    .performance-summary-table-section .table-modern tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    
    /* Label before content - more visible, dark blue, title case */
    .performance-summary-table-section .table-modern tbody td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: #1e40af !important;
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 0.85rem !important;
        text-transform: capitalize !important;
        letter-spacing: 0.3px !important;
        opacity: 1 !important;
        text-transform: capitalize !important;
    }
    
    /* Ensure all text in cards is title case */
    .performance-summary-table-section .table-modern tbody td,
    .performance-summary-table-section .table-modern tbody td * {
        text-transform: none !important;
    }
    
    .performance-summary-table-section .table-modern tbody td::before {
        text-transform: capitalize !important;
    }
    
    /* First cell (Unit) - no label, just strong text */
    .performance-summary-table-section .table-modern tbody td:first-child::before {
        content: none !important;
    }
    
    /* Ensure labels show for all cells except first */
    .performance-summary-table-section .table-modern tbody td:nth-child(2)::before,
    .performance-summary-table-section .table-modern tbody td:nth-child(3)::before,
    .performance-summary-table-section .table-modern tbody td:nth-child(4)::before,
    .performance-summary-table-section .table-modern tbody td:nth-child(5)::before,
    .performance-summary-table-section .table-modern tbody td:nth-child(6)::before {
        display: block !important;
    }
    
    /* Unit name styling */
    .performance-summary-table-section .table-modern tbody td:first-child strong {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }
    
    /* Value styling */
    .performance-summary-table-section .table-modern tbody td span,
    .performance-summary-table-section .table-modern tbody td strong {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #111827 !important;
        text-align: left !important;
        display: inline !important;
    }
    
    /* Grade - colored circle highlight */
    .performance-summary-table-section .table-modern tbody td span[style*="border-radius: 20px"],
    .performance-summary-table-section .table-modern tbody td:nth-child(3) span {
        padding: 8px 12px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 40px !important;
        height: 40px !important;
        margin-left: 0 !important;
        color: white !important;
    }
    
    /* Grade colors based on background color in inline style - A* = green circle */
    .performance-summary-table-section .table-modern tbody td span[style*="background: #10b981"],
    .performance-summary-table-section .table-modern tbody td span[style*="background: #059669"] {
        background: #10b981 !important;
        color: white !important;
    }
    
    /* A = blue circle */
    .performance-summary-table-section .table-modern tbody td span[style*="background: #3b82f6"],
    .performance-summary-table-section .table-modern tbody td span[style*="background: #2563eb"] {
        background: #3b82f6 !important;
        color: white !important;
    }
    
    /* B = purple circle */
    .performance-summary-table-section .table-modern tbody td span[style*="background: #8b5cf6"],
    .performance-summary-table-section .table-modern tbody td span[style*="background: #7c3aed"] {
        background: #8b5cf6 !important;
        color: white !important;
    }
    
    /* C = orange circle */
    .performance-summary-table-section .table-modern tbody td span[style*="background: #f59e0b"],
    .performance-summary-table-section .table-modern tbody td span[style*="background: #d97706"] {
        background: #f59e0b !important;
        color: white !important;
    }
    
    /* D = red circle */
    .performance-summary-table-section .table-modern tbody td span[style*="background: #ef4444"],
    .performance-summary-table-section .table-modern tbody td span[style*="background: #dc2626"] {
        background: #ef4444 !important;
        color: white !important;
    }
    
    /* Override white text color from inline style - ensure it stays white */
    .performance-summary-table-section .table-modern tbody td:nth-child(3) span[style*="color: white"] {
        color: white !important;
    }
    
    /* Nested divs - left aligned with title */
    .performance-summary-table-section .table-modern tbody td div {
        font-size: 0.7rem !important;
        color: #6b7280 !important;
        margin-top: 2px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        display: block !important;
    }
    
    /* Remove special cell styling - match assignment table simple style */
    
    /* Hover effects - match assignment table */
    .performance-summary-table-section .table-modern tbody tr:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
}