/* Print Styles for Vue Components */

@media print {

    /* Base print settings */
    body {
        -webkit-print-color-adjust: exact;
        /* Keep exact colors */
        print-color-adjust: exact;
        /* Standard property */
        background: white !important;
        font-size: 12pt;
        line-height: 1.3;
        color: #000 !important;
        text-align: justify;
        text-justify: inter-word;
    }

    /* Page control utilities */
    .print\:page-break,
    .page-break {
        page-break-before: always;
        /* Force break before element */
    }

    .footer,
    footer {
        display: none !important;
    }

    .page-break-after {
        page-break-after: always;
        /* Force break after element */
    }

    .no-break {
        page-break-inside: avoid;
        /* Keep tables/items together */
    }

    /* Hide unnecessary elements for print */
    .print\:hidden,
    .no-print {
        display: none !important;
    }

    /* Show elements that should only appear in print */
    .print\:block {
        display: block !important;
    }

    .print\:inline {
        display: inline !important;
    }

    .print\:inline-block {
        display: inline-block !important;
    }

    /* Common elements to hide in print */
    button:not(.print-keep),
    .btn:not(.print-keep),
    nav:not(.print-keep),
    .navbar:not(.print-keep),
    .sidebar:not(.print-keep),
    .tab-buttons:not(.print-keep),
    .navigation:not(.print-keep),
    .floating-action:not(.print-keep),
    .tooltip:not(.print-keep),
    .modal:not(.print-keep),
    .dropdown:not(.print-keep) {
        display: none !important;
    }

    /* Tab content - show all tabs in print */
    .tab-content {
        display: block !important;
    }

    .tab-content>div {
        display: block !important;
        page-break-inside: avoid;
    }

    /* Hide tab buttons but keep tab headers */
    .analysis-tabs .tab-buttons {
        display: none !important;
    }

    .analysis-tabs .tab-content>div {
        display: block !important;
        margin-bottom: 1rem;
        border: 1px solid #e0e0e0;
        padding: 0.5rem;
        border-radius: 0.25rem;
    }

    /* Add tab labels for print */
    .analysis-tabs .tab-content>div::before {
        content: attr(data-tab-title);
        display: block;
        font-weight: bold;
        font-size: 1.1em;
        color: #667eea;
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
        border-bottom: 2px solid #667eea;
    }

    /* Layout adjustments for print */
    .container,
    .max-w-7xl {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Grid adjustments for print */
    /* .grid {
        display: block !important;
    } */

    .grid>* {
        margin-bottom: 0.5rem;
        page-break-inside: avoid;
    }

    /* Card and section styling for print */
    .card,
    .section,
    .analysis-section,
    .career-card,
    .major-card,
    .field-card,
    .insight-card {
        break-inside: avoid;
        margin-bottom: 0.5rem;
        border: 1px solid #e0e0e0 !important;
        padding: 0.5rem !important;
        border-radius: 0.25rem !important;
        text-align: justify;
    }

    /* Headers and titles */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #2c3e50 !important;
        break-after: avoid;
    }

    .section-title {
        border-bottom: 2px solid #667eea !important;
        padding-bottom: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Table styling for print */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        break-inside: avoid;
    }

    th,
    td {
        border: 1px solid #ccc !important;
        padding: 0.25rem !important;
        text-align: right !important;
        text-align: justify;
    }

    th {
        background-color: #f8f9fa !important;
        font-weight: bold !important;
    }

    /* Charts and visualizations */
    canvas {
        /* max-width: 100% !important; */
        height: auto !important;
    }

    .chart-container {
        break-inside: avoid;
        margin: 0.5rem 0;
    }

    /* Specific HCQ60 Analysis print styles */
    .hcq60-analysis-container {
        background: white !important;
        padding: 0 !important;
    }

    .analysis-header {
        background: none !important;
        color: #2c3e50 !important;
        border: 2px solid #2c3e50 !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }

    .holland-profile-card,
    .top-interests-section,
    .personality-profile,
    .career-recommendations,
    .education-recommendations,
    .action-plan {
        break-inside: avoid;
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
    }

    /* Force profile summary/metrics into a horizontal row on print (compact A4)
       Treat print like a smaller viewport but show metrics in a single row where possible */
    .profile-summary {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    .profile-metrics {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    .metric {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        /* distribute space evenly */
        max-width: 33% !important;
        /* allow three across */
        min-width: 80px !important;
        /* compact but consistent */
        padding: 0.25rem !important;
        margin: 0 !important;
    }


    .interests-grid,
    .careers-grid,
    .majors-grid,
    .technical-grid {
        display: block !important;
    }

    .interest-card,
    .career-card,
    .major-card,
    .field-card {
        display: block !important;
        margin-bottom: 0.5rem !important;
        break-inside: avoid;
        padding: 0.5rem !important;
    }

    /* Make the top interests display as a horizontal row in print with even spacing */
    .interests-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .interest-card {
        flex: 1 1 0 !important;
        /* distribute evenly */
        max-width: 33% !important;
        /* three across */
        min-width: 120px !important;
        padding: 0.5rem !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Ensure inner score layout remains compact in print */
    .interest-score {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }

    /* Timeline sections */
    .timeline-section {
        break-inside: avoid;
        margin-bottom: 1rem !important;
        padding: 0.5rem !important;
    }

    .action-item,
    .goal-item,
    .objective-item {
        break-inside: avoid;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
    }

    /* Links styling for print */
    a {
        color: inherit !important;
        text-decoration: underline !important;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Background adjustments */
    * {
        box-shadow: none !important;
    }

    /* Flexbox adjustments for print */
    /* .flex {
        display: block !important;
    } */

    /* .flex-wrap {
        display: block !important;
    } */

    .flex>* {
        margin-bottom: 0.25rem;
        break-inside: avoid;
    }

    /* Skills badges */
    .skill-badge {
        display: inline-block !important;
        margin: 0.2rem !important;
        padding: 0.3rem 0.8rem !important;
        border: 1px solid #667eea !important;
        border-radius: 1rem !important;
        background: none !important;
        color: #667eea !important;
    }

    /* Debug panel - always hide in print */
    .debug-panel {
        display: none !important;
    }

    /* Footer adjustments */
    .report-footer {
        background: none !important;
        border: 2px solid #2c3e50 !important;
        color: #2c3e50 !important;
        margin-top: 1rem !important;
        padding: 0.75rem !important;
    }

    /* Ensure proper spacing */
    .margin-print {
        margin: 0.5rem 0 !important;
    }

    /* Page margins */
    @page {
        margin: 1.5cm 1cm;
        size: A4;
    }

    /* Print-specific utilities */
    .print\:text-sm {
        font-size: 0.875rem !important;
    }

    .print\:text-base {
        font-size: 1rem !important;
    }

    .print\:text-lg {
        font-size: 1.125rem !important;
    }

    .print\:text-xl {
        font-size: 1.25rem !important;
    }

    .print\:mb-2 {
        margin-bottom: 0.25rem !important;
    }

    .print\:mb-4 {
        margin-bottom: 0.5rem !important;
    }

    .print\:mb-6 {
        margin-bottom: 0.75rem !important;
    }

    .print\:p-2 {
        padding: 0.25rem !important;
    }

    .print\:p-4 {
        padding: 0.5rem !important;
    }

    .print\:border {
        border: 1px solid #e0e0e0 !important;
    }

    .print\:border-2 {
        border: 2px solid #e0e0e0 !important;
    }

    /* Text justification for all content */
    p,
    div,
    li,
    td,
    th,
    span {
        text-align: justify !important;
        text-justify: inter-word;
    }

    /* Keep center alignment for specific elements */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .text-center,
    .section-title,
    .test-title,
    .interest-card,
    .metric {
        text-align: center !important;
    }

    /* Keep right alignment for RTL content */
    .text-right,
    .rtl,
    [dir="rtl"] {
        text-align: right !important;
    }
}

/* Print button styling (visible on screen, hidden in print) */
.print-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: #667eea;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.print-button:hover {
    background: #5a6fd8;
}

@media print {
    .print-button {
        display: none !important;
    }
}