/* assets/css/advanced_projects.css */
:root { 
    --main-bg: #f8fafc; 
    --card-bg: #1e293b; 
    --accent: #3498db; 
    --text: #ffffff; 
    --report-text: #1e293b; 
}

.calculator-card { 
    background: var(--card-bg); 
    width: 100%; 
    border-radius: 24px; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); 
    border-top: 6px solid var(--accent); 
    box-sizing: border-box; 
}
.main-title { text-align: center; color: var(--accent); font-size: 20px; font-weight: 800; margin-bottom: 25px; }

.saas-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #cbd5e1; }
html[dir="rtl"] .saas-label { text-align: right; }
html[dir="ltr"] .saas-label { text-align: left; }

.saas-input, .saas-select { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #475569; background: #334155; color: white; font-size: 15px; outline: none; margin-bottom: 16px; box-sizing: border-box; font-weight: 700; transition: all 0.3s; }
html[dir="rtl"] .saas-input, html[dir="rtl"] .saas-select { text-align: right; }
html[dir="ltr"] .saas-input, html[dir="ltr"] .saas-select { text-align: left; }

.saas-input:focus, .saas-select:focus { border-color: var(--accent); background: #1e293b; }

#reportOverlay { 
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; 
    background: white; overflow-y: auto; padding: 25px; box-sizing: border-box; color: #1e293b;
}

.report-header { text-align: center; border-bottom: 4px solid var(--accent); padding-bottom: 15px; margin-bottom: 25px; }
.section-title { background: #f8fafc; padding: 10px; font-weight: 800; margin: 24px 0 14px 0; font-size: 15px; color: #0f172a; }
html[dir="rtl"] .section-title { border-right: 5px solid var(--accent); text-align: right; }
html[dir="ltr"] .section-title { border-left: 5px solid var(--accent); text-align: left; }

.data-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
html[dir="rtl"] .data-table { direction: rtl; }
html[dir="ltr"] .data-table { direction: ltr; }
.data-table th, .data-table td { border: 1px solid #cbd5e1; padding: 12px; }
html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td { text-align: right; }
html[dir="ltr"] .data-table th, html[dir="ltr"] .data-table td { text-align: left; }
.data-table th { background: #f8fafc; color: #475569; width: 45%; font-weight: 700; }

.badge { background: #e8f8f0; color: #27ae60; padding: 3px 10px; border-radius: 6px; font-weight: 800; }
.print-bar { display: flex; gap: 12px; position: sticky; top: 0; background: white; padding: 12px 0; z-index: 100; border-bottom: 1px solid #e2e8f0; }

.auth-section { background: #1e293b; padding: 20px; border-radius: 16px; margin-bottom: 25px; border: 1px solid #334155; box-sizing: border-box; }
.projects-list { background: #0f172a; padding: 10px; border-radius: 12px; margin-top: 10px; margin-bottom: 15px; max-height: 160px; overflow-y: auto; border: 1px solid #1e293b; }
.project-item { display: flex; justify-content: space-between; align-items: center; background: #1e293b; padding: 10px 14px; margin-bottom: 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; transition: 0.2s; border: 1px solid #334155; }
.project-item:hover { border-color: var(--accent); color: var(--accent); }
.project-name { flex-grow: 1; font-weight: 700; }
html[dir="rtl"] .project-name { text-align: right; }
html[dir="ltr"] .project-name { text-align: left; }
.project-date { font-size: 11px; color: #64748b; margin-left: 12px; margin-right: 12px; font-family: monospace; }
.btn-delete { background: #ef4444; color: white; border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11px; font-weight: 700; }
.save-project-zone { display: flex; gap: 12px; margin-top: 15px; flex-wrap: wrap; }

@media print {
    @page { size: A4; margin: 1cm; }
    .no-print, header, footer, .print-bar { display: none !important; }
    #reportOverlay { position: static; display: block !important; padding: 0; visibility: visible; overflow: visible; }
    body { background: white; color: black; }
    html[dir="rtl"] body { direction: rtl; }
    html[dir="ltr"] body { direction: ltr; }
    .data-table { width: 100%; border: 1px solid #000; }
    .data-table th, .data-table td { border: 1px solid #000; color: black !important; }
    .section-title { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; }
    html[dir="rtl"] .section-title { border-right: 5px solid var(--accent) !important; }
    html[dir="ltr"] .section-title { border-left: 5px solid var(--accent) !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}