/* Modern CSS using Inter font and glassmorphism */
:root {
    --primary-color: #6366f1; /* Indigo */
    --primary-hover: #4f46e5;
    --secondary-color: #8b5cf6; /* Violet */
    --bg-gradient: linear-gradient(135deg, #f0fdfa 0%, #e0e7ff 100%);
    --surface-color: rgba(255, 255, 255, 0.7);
    --border-color: rgba(255, 255, 255, 0.5);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-gradient);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
}

.app-container {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Header */
.app-header {
    text-align: center;
    margin-bottom: 1rem;
}

.app-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.app-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Layout */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
    }
}

/* Glassmorphism Panels */
.glass-panel {
    background: var(--surface-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.1);
}

.glass-panel h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
    padding-bottom: 0.5rem;
}

/* Inputs */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group.row-align {
    flex-direction: row;
    align-items: center;
}

label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

input[type="text"], input[type="number"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

input[type="number"] {
    width: 80px;
}

input[type="text"]:focus, input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Buttons */
.button-row {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

button {
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease;
}

.primary-btn {
    background: var(--primary-color);
    color: white;
    flex: 1;
    box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3);
}

.primary-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.8);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    flex: 1;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Animations */
.pulse-on-hover:active {
    transform: scale(0.95);
}

/* Results Section */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.results-container {
    flex-grow: 1;
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(203, 213, 225, 0.5);
}

/* Custom Checkbox */
.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
    color: var(--text-primary);
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.custom-checkbox:hover {
    background-color: rgba(99, 102, 241, 0.05);
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: var(--primary-color);
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.list-controls {
    margin-top: -10px;
}

.print-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 1rem;
    border-top: 1px solid rgba(203, 213, 225, 0.5);
}

/* Modal */
.modal {
    display: none; 
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: #fff;
    max-width: 500px;
    width: 90%;
    position: relative;
    padding: 2.5rem;
}

.modal-content ol {
    margin-left: 1.5rem;
    margin-top: 1rem;
    line-height: 1.6;
}

.modal-content li {
    margin-bottom: 0.5rem;
}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #94a3b8;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover {
    color: var(--text-primary);
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* =========================================================================
   PRINT STYLES
   Exact mapping to the Python code's QPrinter behavior
   (A4 size, 3 columns, 4 rows, square cards with borders)
========================================================================= */

#print-area {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 5%; /* Approximates working_width offsets used in python code */
    }

    body * {
        visibility: hidden;
    }

    body {
        background: none;
        padding: 0;
        margin: 0;
    }

    #no-print-area {
        display: none !important;
    }

    #print-area, #print-area * {
        visibility: visible;
    }

    #print-area {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .print-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        width: 100%;
        /* A4 aspect ratio height to ensure cells scale appropriately. 
           We use 100vh of the print area, but rely on page margins for edges.
           We want the grid to fill the remaining space exactly. */
        height: 100vh;
        page-break-after: always;
    }

    .print-cell {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .print-card {
        /* Python code ensures square aspect, keeping bounds to 90% of cell */
        width: 90%;
        aspect-ratio: 1 / 1; 
        max-height: 90%;
        border: 3px solid black; /* Python 3px equivalent on 500x500 */
        box-sizing: border-box;
    }
    
    .print-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    
    /* Ensure page breaks happen between grid elements nicely 
       If we have >12 items, we want a new grid.
       We manage this via JS by chunking into separate .print-grid containers */
}