/* --- GLOBAL STYLES --- */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background: #f4f4f9; display: flex; height: 100vh; overflow: hidden; }
* { box-sizing: border-box; }

/* --- LOGIN SCREEN --- */
#login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f4f4f9; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; }
.login-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 320px; }
.login-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; }
.btn-primary { width: 100%; padding: 12px; background: #6200ee; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1rem; }
.btn-primary:hover { background: #3700b3; }
.error { color: red; font-size: 0.9em; margin-bottom: 10px; text-align: center; display: none; }

/* --- MAIN LAYOUT --- */
#app-container { display: none; width: 100%; height: 100%; }
.sidebar { width: 250px; background: #e0e0e0; display: flex; flex-direction: column; padding: 20px; border-right: 1px solid #ccc; }
.sidebar h2 { margin-top: 0; color: #333; font-size: 1.4rem; }
.nav-group { margin-top: 20px; }
.nav-label { color: #6200ee; font-weight: bold; margin-bottom: 10px; display: block; font-size: 0.9rem; text-transform: uppercase; }
.nav-btn { display: block; width: 100%; text-align: left; padding: 12px 15px; margin-bottom: 5px; background: none; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; color: #333; }
.nav-btn:hover { background: #d0d0d0; }
.nav-btn.active { background: #bbdefb; color: #000; font-weight: bold; }
.logout-btn { margin-top: auto; background: #ffcccb; }
.content { flex: 1; padding: 30px; overflow-y: auto; position: relative; }
.view-section { display: none; max-width: 1200px; margin: 0 auto; }
.view-section.active { display: block; }

/* --- PAST DUE BANNER --- */
.past-due-banner { position: absolute; top: 20px; right: 20px; background: #d32f2f; color: white; padding: 10px 20px; border-radius: 4px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer; z-index: 500; display: flex; align-items: center; gap: 10px; }
.past-due-banner:hover { background: #b71c1c; }

/* --- FORMS & TABLES --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; }
.form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.checkbox-group { display: flex; align-items: center; margin-top: 10px; }
.checkbox-group input { width: auto; margin-right: 10px; }
.gp-display { background: #e0e0e0; color: #333; padding: 15px; border-radius: 6px; text-align: center; margin-top: 20px; }
.gp-value { font-size: 1.8rem; font-weight: bold; }
.gp-positive { color: #2e7d32; }
.gp-negative { color: #d32f2f; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
th { background-color: #6200ee; color: white; }
tr { cursor: pointer; transition: background 0.2s; }
tr:hover { background-color: #f1f1f1; }

/* COLLAPSIBLE SECTION */
.collapsible-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-top: 20px; }
.collapsible-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.collapsible-header h3 { margin: 0; color: #6200ee; }
.collapsible-content { display: none; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
.collapsible-content.show { display: block; }

/* SEARCH BAR */
.log-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.search-container { display: flex; align-items: center; background: white; border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px; }
.search-container input { border: none; outline: none; padding: 5px; width: 200px; font-size: 1rem; }
.search-container i { color: #666; cursor: pointer; }

/* DETAIL VIEW */
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
.detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; }
.detail-label { font-weight: 600; color: #555; }
.detail-val { color: #000; }
.status-badge { padding: 5px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; margin-left: 10px; display: inline-block; }
.status-pending { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe0b2; }
.status-bought { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.status-traded { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.back-btn { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: #555; margin-right: 15px; }
.edit-btn { background: #ff9800; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }

/* ACTION MENU */
.action-menu-container { position: relative; display: inline-block; margin-right: 10px; }
.action-menu-btn { background: #ddd; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 1rem; }
.action-menu-btn:hover { background: #ccc; }
.action-dropdown { 
    display: none; 
    position: absolute; 
    right: 100%; /* Expand to the left */
    top: 0;
    margin-right: 10px; /* Spacing between menu button and dropdown items */
    background: transparent; /* Transparent container for buttons */
    /* We want buttons in a row */
    flex-direction: row;
    gap: 10px;
    white-space: nowrap;
}
.action-dropdown.show { display: flex; }
.action-btn { border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; color: white; }
.btn-share { background: #6200ee; } /* Purple */
.btn-share:hover { background: #3700b3; }
.btn-delete { background: #d32f2f; } /* Red */
.btn-delete:hover { background: #b71c1c; }
.btn-print { background: #009688; } /* Teal */
.btn-print:hover { background: #00796b; }

/* MODALS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.modal-box { background: white; padding: 30px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.btn-secondary { background: #ccc; color: #333; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.btn-danger { background: #d32f2f; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

/* COMMENTS SECTION */
.comments-section { margin-top: 30px; border-top: 1px solid #ddd; padding-top: 20px; }
.comment-item { background: #fff; padding: 10px; border-radius: 4px; border: 1px solid #eee; margin-bottom: 10px; }
.comment-meta { font-size: 0.85rem; color: #777; margin-bottom: 4px; }
.comment-text { color: #333; font-size: 1rem; white-space: pre-wrap; }
.legacy-comment { border-left: 3px solid #6200ee; }

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

/* --- PRINT STYLES --- */
@media print {
    /* Force background colors */
    body { 
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact; 
        background: white;
    }

    /* Hide Everything non-essential */
    .sidebar, .login-box, #login-screen, .past-due-banner, 
    .detail-header, .comments-section .btn-primary, #new-comment-input,
    .edit-btn, .action-menu-container, 
    .detail-view-title, .detail-view-date /* Hide original title/date */
    { display: none !important; }
    
    #app-container { display: block; width: 100%; height: auto; }
    .content { padding: 0; overflow: visible; }
    .view-section { display: none !important; }
    #view-detail { display: block !important; max-width: 100%; }
    
    /* Custom Print Header */
    #print-header { 
        display: flex !important; /* Use Flexbox */
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
        min-height: 100px; /* Ensure enough height for logo */
    }
    #print-meta { 
        display: block !important; 
        width: 100%;
        margin-bottom: 20px;
    }
    
    /* Adjust Layout for Print */
    #detail-content { 
        font-family: Arial, sans-serif; 
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto; /* Headers then content */
        gap: 20px !important;
        align-items: start;
    }
    
    /* Print Elements Injection logic puts header/meta inside detail-content.
       We need them to span both columns.
    */
    #print-header, #print-meta {
        grid-column: 1 / -1; /* Span full width */
    }
    
    /* Left Column: Financials & Logistics */
    .detail-main-grid {
        grid-column: 1;
        display: block !important;
    }
    
    /* Right Column: Comments */
    .comments-section {
        grid-column: 2;
        margin-top: 0 !important;
        border-top: none !important;
        padding-top: 0 !important;
    }

    /* Styling */
    #detail-content h3, .comments-section h3 { 
        background: #6200ee !important; 
        color: white !important; 
        padding: 8px 15px; 
        font-size: 14px; 
        margin-top: 0; 
        margin-bottom: 10px;
        border-radius: 4px;
        text-transform: uppercase;
        font-weight: bold;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .detail-section-logistics h3 { margin-top: 20px !important; }

    #detail-content .detail-row { 
        border-bottom: 1px solid #eee; 
        padding: 6px 5px; 
        font-size: 12px; 
        display: flex; 
        justify-content: space-between;
    }
    
    .comment-item { border: none; border-bottom: 1px solid #eee; padding: 8px 0; font-size: 11px; }
}

/* Hidden Print Header Element */
#print-header {
    display: none;
    background: #6200ee;
    color: white;
    padding: 15px 20px;
    border-radius: 6px;
    /* Position relative removed in favor of flexbox in media print */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
#print-header h1 { margin: 0; font-size: 24px; text-transform: uppercase; }
#print-header .sub { font-size: 14px; opacity: 0.9; font-weight: bold; margin-top: 2px; }
#print-logo { 
    /* Removed absolute positioning here, relying on flexbox alignment */
    height: 80px; 
    width: auto;
    display: block;
}

/* Print Meta Info (Second Banner) */
#print-meta {
    display: none;
    background: #f5f5f5; /* Subtle background */
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    font-family: Arial, sans-serif;
    border-left: 4px solid #6200ee;
}