/* LEGACY: דורש רפקטור, לא להוסיף !important/inline/new Bootstrap */ /* ✅ הקובץ נקי מ-!important - כל ה-!important הוסרו */ /* ============================================ Modules CSS - Enterprise V9 - מאוחד תוכנית שידרוג עיצוב Enterprise מקיף ============================================ קובץ מאוחד - כל עיצובי המודולים אוחד מ-31 קבצי מודולים תאריך יצירה: 2025-01-27 גרסה: 2.0.0 (מאוחד) ============================================ */ @layer modules { /* ============================================ Accounts Module Styles ============================================ עיצוב ספציפי למודול Accounts כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* Progress bar large size */ .progress-lg { height: var(--spacing-5); } /* ===== contract_invoices.html - עיצוב מאוחד ===== */ /* הוסר כפילות - העיצובים נמצאים בקטע contract_invoices_fixed.html */ /* ===== contract_invoices_fixed.html - Style tag 1 ===== */ /* עיצוב חזק לטבלת החשבונות */ .contract-invoices-page .table { background-color: var(--card-bg); border: 1px solid var(--border-primary); color: var(--text-primary); width: 100%; table-layout: auto; min-width: 1300px; } /* תיקון למובייל - דריסה של min-width קשיח */ @media (max-width: 768px) { .contract-invoices-page .table { min-width: 0; width: 100%; } } /* overflow-x: auto רק במובייל - לא בדסקטופ */ .contract-invoices-page .table-responsive { overflow-x: auto; /* ✅ תיקון לפי חוק זהב #3 */ overflow-y: visible; max-width: 100%; width: 100%; display: block; } @media (max-width: 1023px) { .contract-invoices-page .table-responsive { overflow-x: auto; } } .contract-invoices-page .card-body { overflow-x: visible; overflow-y: visible; padding: 1.5rem; width: 100%; max-width: 100%; } @media (max-width: 1023px) { .contract-invoices-page .card-body { overflow-x: auto; } } .contract-invoices-page .table thead th { background-color: var(--bg-secondary); color: var(--text-primary); border-bottom: 2px solid var(--border-primary); font-weight: 600; text-align: center; padding: 8px 4px; font-size: 0.85rem; white-space: nowrap; } /* הגדרת רוחב עמודות ספציפי */ .contract-invoices-page .table th:nth-child(1), .contract-invoices-page .table td:nth-child(1) { width: 100px; min-width: 100px; max-width: 100px; } .contract-invoices-page .table th:nth-child(2), .contract-invoices-page .table td:nth-child(2) { width: 80px; min-width: 80px; max-width: 80px; } .contract-invoices-page .table th:nth-child(3), .contract-invoices-page .table td:nth-child(3) { width: 80px; min-width: 80px; max-width: 80px; } .contract-invoices-page .table th:nth-child(4), .contract-invoices-page .table td:nth-child(4) { width: 90px; min-width: 90px; max-width: 90px; } .contract-invoices-page .table th:nth-child(5), .contract-invoices-page .table td:nth-child(5) { width: 90px; min-width: 90px; max-width: 90px; } .contract-invoices-page .table th:nth-child(6), .contract-invoices-page .table td:nth-child(6) { width: 80px; min-width: 80px; max-width: 80px; } .contract-invoices-page .table th:nth-child(7), .contract-invoices-page .table td:nth-child(7) { width: 90px; min-width: 90px; max-width: 90px; } .contract-invoices-page .table th:nth-child(8), .contract-invoices-page .table td:nth-child(8) { width: 100px; min-width: 100px; max-width: 100px; } .contract-invoices-page .table th:nth-child(9), .contract-invoices-page .table td:nth-child(9) { width: 120px; min-width: 120px; max-width: 120px; } .contract-invoices-page .table th:nth-child(10), .contract-invoices-page .table td:nth-child(10) { width: 140px; min-width: 140px; max-width: 140px; } .contract-invoices-page .table tbody td { background-color: var(--card-bg); color: var(--text-primary); border-bottom: 1px solid var(--border-primary); vertical-align: middle; text-align: center; } .contract-invoices-page .table tbody tr:hover { background-color: var(--bg-secondary); } .contract-invoices-page .table tbody tr:hover td { color: var(--text-primary); } .contract-invoices-page .badge { font-size: 0.875em; padding: 0.375em 0.75em; color: var(--text-inverse); font-weight: 500; } .contract-invoices-page .badge-info { background-color: var(--info-500); } .contract-invoices-page .badge-success { background-color: var(--success-500); } .contract-invoices-page .badge-danger { background-color: var(--error-500); } .contract-invoices-page .badge-warning { background-color: var(--warning-500); color: var(--text-primary); } .contract-invoices-page .badge-secondary { background-color: var(--text-secondary); } .contract-invoices-page .progress { background-color: var(--border-primary); border: 1px solid var(--border-primary); height: var(--spacing-5); border-radius: 10px; overflow: hidden; } .contract-invoices-page .progress-bar { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); color: var(--text-inverse); font-weight: 600; text-align: center; line-height: 20px; font-size: 0.85rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 10px; min-width: 40px; } .contract-invoices-page .btn-group { display: flex; flex-wrap: wrap; gap: 2px; min-width: min(100%, 150px); justify-content: center; } /* ✅ גמיש - מתקפל במובייל */ .contract-invoices-page .btn-group .btn { margin: 0 2px; min-width: 35px; height: 35px; padding: 0.375rem 0.5rem; font-size: 0.875rem; white-space: normal; overflow: visible; word-wrap: break-word; } /* ✅ גמיש - טקסט יכול להישבר */ .contract-invoices-page .table th:nth-child(10), .contract-invoices-page .table td:nth-child(10) { width: min(100%, 160px); min-width: min(100%, 160px); max-width: min(100%, 160px); padding-right: 10px; padding-left: 10px; } /* ✅ גמיש - לא יוצר גלישה במובייל */ .contract-invoices-page .sort-buttons { display: inline-flex; flex-direction: column; gap: 2px; margin-left: 5px; vertical-align: middle; } .contract-invoices-page .sort-btn { padding: 2px 4px; font-size: 0.7rem; height: var(--spacing-5); width: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-primary); background-color: var(--bg-secondary); color: var(--text-secondary); transition: all 0.2s ease; } .contract-invoices-page .sort-btn:hover { background-color: var(--border-primary); color: var(--text-primary); border-color: var(--border-secondary); } .contract-invoices-page .sort-btn.active { background-color: var(--primary-500); color: var(--text-inverse); border-color: var(--primary-500); } .contract-invoices-page .table th { position: relative; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } /* ✅ גמיש - טקסט יכול להישבר במובייל */ /* ========= סטטיסטיקות מהירות (KPIs) ========= */ .contract-invoices-page .stats-card { background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-soft); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; height: 100%; } .contract-invoices-page .stats-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; } .contract-invoices-page .stats-primary::before { background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-700) 100%); } .contract-invoices-page .stats-success::before { background: linear-gradient(90deg, var(--success-500) 0%, var(--success-700) 100%); } .contract-invoices-page .stats-warning::before { background: linear-gradient(90deg, var(--warning-500) 0%, var(--warning-700) 100%); } .contract-invoices-page .stats-info::before { background: linear-gradient(90deg, var(--info-500) 0%, var(--info-700) 100%); } .contract-invoices-page .stats-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .contract-invoices-page .stats-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-inverse); flex-shrink: 0; } .contract-invoices-page .stats-primary .stats-icon { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); } .contract-invoices-page .stats-success .stats-icon { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-700) 100%); } .contract-invoices-page .stats-warning .stats-icon { background: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-700) 100%); } .contract-invoices-page .stats-info .stats-icon { background: linear-gradient(135deg, var(--info-500) 0%, var(--info-700) 100%); } .contract-invoices-page .stats-content { flex: 1; } .contract-invoices-page .stats-number { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 0.25rem; } .contract-invoices-page .stats-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; } .contract-invoices-page .actions-container { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: min(100%, 380px); } /* ✅ גמיש - לא יוצר גלישה במובייל */ .contract-invoices-page .basic-actions { display: flex; gap: 4px; align-items: center; } .contract-invoices-page .basic-actions .btn { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .contract-invoices-page .status-actions { display: flex; gap: 8px; align-items: center; width: 100%; } .contract-invoices-page .status-select, .contract-invoices-page .payment-status-select { border: 1px solid var(--border-primary); border-radius: 4px; background-color: var(--card-bg); color: var(--text-primary); padding: 6px 8px; font-size: 0.75rem; width: 140px; height: 32px; cursor: pointer; transition: all 0.2s ease; flex: 1; } .contract-invoices-page .status-select:hover, .contract-invoices-page .payment-status-select:hover { border-color: var(--primary-500); box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); } .contract-invoices-page .status-select:focus, .contract-invoices-page .payment-status-select:focus { border-color: var(--primary-500); box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25); outline: none; } .contract-invoices-page .delete-action { display: flex; align-items: center; } .contract-invoices-page .delete-action .btn { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .contract-invoices-page .status-select option, .contract-invoices-page .payment-status-select option { background-color: var(--card-bg); color: var(--text-primary); padding: 4px 8px; } .contract-invoices-page .table th:nth-child(10), .contract-invoices-page .table td:nth-child(10) { width: min(100%, 400px); min-width: min(100%, 400px); max-width: min(100%, 400px); padding-right: 10px; padding-left: 10px; } /* ✅ גמיש - לא יוצר גלישה במובייל */ .contract-invoices-page .table strong { color: var(--text-primary); font-weight: 600; } .contract-invoices-page .table span { color: inherit; } .contract-invoices-page .card { overflow: hidden; } .contract-invoices-page .table td { overflow: visible; word-wrap: break-word; white-space: normal; max-width: none; padding: 8px 6px; } .contract-invoices-page .badge { white-space: nowrap; overflow: visible; text-overflow: clip; display: inline-block; } .contract-invoices-page .progress { min-width: 100px; overflow: visible; } /* ===== contract_invoices_fixed.html - Style tag 2 ===== */ /* הוסר כפילות - העיצובים נמצאים בקטע Style tag 1 */ /* ===== contract_invoices_fixed.html - Style tag 3 ===== */ /* הוסר כפילות - .kpi-help-icon ו-.kpi-tooltip משתמשים בעיצוב הגלובלי */ .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: var(--spacing-4); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: var(--spacing-4); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* ===== add_payment.html - Style tag 1 ===== */ /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .add-payment-page .card { border: 2px solid var(--primary-500); border-radius: 15px; box-shadow: var(--shadow-md); margin-bottom: 30px; background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%); } .add-payment-page .card-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); color: var(--text-inverse); border-radius: 13px 13px 0 0; padding: 4px 12px; font-size: 0.9rem; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); min-height: 30px; max-height: 35px; } .add-payment-page .form-label { font-weight: 600; color: var(--text-primary); } .add-payment-page .form-control { border-radius: 8px; padding: 0.45rem 0.9rem; border: 1px solid var(--border-primary); transition: all 0.2s ease-in-out; } .add-payment-page .form-control:focus { border-color: var(--primary-600); box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.25); } .add-payment-page .page-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border-primary); } .add-payment-page .page-header h1 { color: var(--text-primary); font-weight: 600; margin-bottom: 0.5rem; } .add-payment-page .form-actions { border-top: 1px solid var(--border-primary); padding-top: 1rem; } /* ===== add_invoice.html - Style tag 1 ===== */ /* ⚠️ הוסר overflow-x: hidden - אסור על wrapper של דף לפי חוק זהב #9 */ /* טיפול בגלישות נעשה ברמת הרכיב/מודול הספציפי */ .add-invoice-page { max-width: 100%; margin: 0 auto; padding: var(--spacing-5); /* overflow-x: hidden; - הוסר - אסור על wrapper של דף */ } /* overflow-x: auto רק במובייל */ .add-invoice-page .table, .add-invoice-page .table-responsive { min-width: unset; overflow-x: auto; } /* ✅ תיקון לפי חוק זהב #3 */ @media (max-width: 1023px) { .add-invoice-page .table, .add-invoice-page .table-responsive { overflow-x: auto; } } /* עיצוב מותאם לטבלת פריטי עבודה */ .work-items-card { max-width: 100%; overflow: hidden; } /* הערה: עיצוב .work-items-table-responsive הועבר ל-modules/contracts.css */ /* כל ההגדרות הישנות עם nth-child הוסרו - משתמשים בעיצוב החדש עם classes (col-*) */ /* הערה: עיצוב responsive של .work-items-table-responsive הועבר ל-modules/contracts.css */ /* הגדרות ישנות הוסרו - משתמשים בעיצוב החדש */ /* עיצוב מותאם לרשימות סיכום */ .summary-list-container { max-width: 100%; overflow: visible; } .summary-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-secondary); font-size: var(--text-sm); } .summary-item:last-child { border-bottom: none; } .summary-label { font-weight: 600; color: var(--text-primary); flex: 1; text-align: right; padding-right: 15px; word-wrap: break-word; hyphens: auto; } .summary-value { font-weight: 500; color: var(--text-primary); flex: 0 0 auto; text-align: left; white-space: nowrap; min-width: 100px; } .summary-item.table-success { background-color: var(--primary-50); border-radius: 6px; padding: 10px 8px; margin-top: 5px; color: var(--success-600); font-weight: bold; } .summary-item.table-success .summary-label, .summary-item.table-success .summary-value { color: var(--success-600); font-weight: bold; } @media (max-width: 768px) { .summary-item { font-size: 0.8rem; padding: 6px 0; } .summary-label { padding-right: 10px; } .summary-value { min-width: 80px; } } /* ===== Page Headers ===== */ /* הוסר - page headers מעוצבים גלובלית */ /* ===== Cards ===== */ /* הוסר - cards מעוצבים ב-components/cards.css גלובלית */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ .form-control-sm { padding: 6px 10px; font-size: 0.875rem; } /* ===== Alerts ===== */ /* הוסר - alerts מעוצבים ב-alerts.css גלובלית */ .form-actions { background: var(--bg-secondary); padding: 25px; border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } /* ===== Buttons ===== */ /* הוסר - buttons מעוצבים ב-components/buttons.css גלובלית */ /* הוסר כפילות: .btn בסיסי (היה בשורות 1037-1043) */ .btn-secondary { background: var(--text-secondary); border: none; } .btn-secondary:hover { background: var(--text-secondary); transform: translateY(-2px); } .text-end { text-align: right; } @media (max-width: 768px) { .add-invoice-page { padding: 10px; } /* ===== Page Headers ===== */ /* הוסר - page headers מעוצבים גלובלית */ /* הערה: כללי responsive ספציפיים נשמרים */ .card-body { padding: var(--spacing-5); } .form-actions { padding: var(--spacing-5); } .btn { margin: 5px; width: 100%; } } /* ===== list.html - Style tag 1 ===== */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== dashboard.html - Style tag 1 ===== */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== edit_invoice.html - Style tag 1 ===== */ /* ⚠️ הוסר overflow-x: hidden - אסור על wrapper של דף לפי חוק זהב #9 */ .edit-invoice-page { max-width: 100%; margin: 0 auto; padding: var(--spacing-5); /* overflow-x: hidden; - הוסר - אסור על wrapper של דף */ } /* ===== Page Headers ===== */ /* הוסר - page headers מעוצבים גלובלית */ /* ===== Cards ===== */ /* הוסר - cards מעוצבים ב-components/cards.css גלובלית */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* ===== Alerts ===== */ /* הוסר - alerts מעוצבים ב-alerts.css גלובלית */ /* ===== Buttons ===== */ /* הוסר - buttons מעוצבים ב-components/buttons.css גלובלית */ /* הוסר כפילות: .btn בסיסי, .form-control-sm, .form-actions, .btn-secondary, .text-end (היו בשורות 1103-1135) */ /* עיצוב מותאם לטבלת פריטי עבודה */ /* הוסר כפילות - העיצובים נמצאים בקטע add_invoice.html (שורות 535-667) */ /* עיצוב מותאם לרשימות סיכום */ /* הוסר כפילות - העיצובים נמצאים בקטע add_invoice.html (שורות 625-667) */ @media (max-width: 768px) { .edit-invoice-page { padding: 10px; } /* ===== Page Headers ===== */ /* הוסר - page headers מעוצבים גלובלית */ /* הערה: כללי responsive ספציפיים נשמרים */ .card-body { padding: var(--spacing-5); } .form-actions { padding: var(--spacing-5); } .btn { margin: 5px; width: 100%; } .work-items-table-responsive .table { font-size: 0.75rem; min-width: min(100%, 1000px); /* ✅ גמיש - לא יוצר גלישה במובייל */ } .work-items-table-responsive .table th, .work-items-table-responsive .table td { padding: 4px 3px; } .summary-item { font-size: 0.8rem; padding: 6px 0; } .summary-label { padding-right: 10px; } .summary-value { min-width: 80px; } } /* ===== index.html - Style tag 1 ===== */ .accounts-page .card { border: 2px solid var(--primary-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: calc(var(--spacing-6) * 1.875); background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .accounts-page .card-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); color: var(--text-inverse); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--spacing-1) var(--spacing-3); font-size: var(--text-sm); font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); min-height: 30px; max-height: 35px; } .accounts-page .table th { background-color: var(--bg-secondary); border-top: none; font-weight: 600; color: var(--text-primary); } .accounts-page .table td { vertical-align: middle; } .accounts-page .badge { font-size: 0.85rem; padding: 0.4em 0.6em; color: var(--primary-900); background-color: var(--primary-50); border: 1px solid var(--primary-200); } .accounts-page .badge-danger { color: var(--error-900); background-color: var(--error-50); border: 1px solid var(--error-200); } .accounts-page .badge-success { color: var(--success-900); background-color: var(--success-50); border: 1px solid var(--success-200); } .accounts-page .badge-warning { color: var(--warning-600); background-color: var(--warning-50); border: 1px solid var(--warning-200); } .accounts-page .badge-secondary { color: var(--text-primary); background-color: var(--border-primary); border: 1px solid var(--border-primary); } .accounts-page .btn-group .btn { margin-right: var(--spacing-1); } /* ===== Page Headers ===== */ /* הוסר - page headers מעוצבים גלובלית ב-components/navigation.css */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ /* ===== add.html - Style tag 1 ===== */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* הוסר - .page-wrapper מעוצב ב-components/forms.css גלובלית */ /* ===== Account Card - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .account-card נמצאים ב-components/forms.css */ /* ===== Account Card Header - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .account-card-header נמצאים ב-components/forms.css */ /* ===== Account Card Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .account-card-title נמצאים ב-components/forms.css */ /* ===== Account Card Title Icon - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .account-card-title-icon נמצאים ב-components/forms.css */ /* ===== Account Card Body - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .account-card-body נמצאים ב-components/forms.css */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ .input-group-text { font-size: 0.8rem; background-color: var(--primary-soft); border-color: var(--border-primary); border-right: none; border-radius: var(--input-radius) 0 0 var(--input-radius); } .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* הוסר - .form-header-explanation מעוצב ב-modules/projects.css גלובלית */ /* הוסר - .form-section-explanation מעוצב ב-modules/projects.css גלובלית */ /* ===== Account Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .account-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* הוסר - .small-hint מעוצב ב-components/forms.css גלובלית */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* ===== edit.html - Style tag 1 ===== */ /* הוסר כפילות - העיצובים זהים לקטע add.html (שורות 971-1098) */ /* ===== view_invoice.html - Style tag 1 ===== */ /* עיצוב מאוחד - צמצום קוד */ @media print { html, body { font-size: 11px; margin: 0; padding: 0; background: var(--card-bg); width: 100%; max-width: 100%; } .invoice-container { box-shadow: none; border: 1px solid var(--text-primary); border-radius: 0; margin: 0; padding: 0; width: 100%; max-width: 100%; } .header, .invoice-details, .work-items-section, .detail-section { padding: 8px 10px; margin: 0; } .header h1, .header h2, .invoice-number { font-size: 1.2em; margin: 0; padding: 0; } .details-grid, .work-items-section h3, .detail-section h3 { gap: 10px; margin-bottom: 8px; padding-bottom: 4px; font-size: 1em; } table { width: 100%; border-collapse: collapse; margin: 0; } th, td { border: 1px solid var(--text-primary); padding: 2px 4px; font-size: 11px; vertical-align: middle; } .no-print { display: none; } .page-break { page-break-before: always; } .work-items-section, .invoice-details { page-break-inside: avoid; } } * { box-sizing: border-box; } body { font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */ .invoice-container { width: 100%; max-width: min(100%, 1200px); margin: 0 auto; padding-inline: var(--space-4); box-sizing: border-box; background: var(--surface-50); color: var(--secondary-900); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; } .invoice-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-600), var(--secondary-400), var(--error-500)); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .header { text-align: center; padding: 40px 30px; background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 50%, var(--text-primary) 100%); color: var(--text-inverse); position: relative; overflow: hidden; } .header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } .header h1 { margin: 0; font-size: 3.5em; font-weight: 800; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; } .header h2 { margin: 15px 0 0 0; font-size: 2.2em; opacity: 0.95; font-weight: 300; position: relative; z-index: 1; } .invoice-number { background: rgba(255, 255, 255, 0.2); padding: 10px 25px; border-radius: 50px; display: inline-block; margin-top: 15px; font-size: 1.4em; font-weight: 600; backdrop-filter: blur(10px); position: relative; z-index: 1; } .invoice-details { padding: 40px 30px; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border-primary) 100%); border-bottom: 3px solid var(--border-primary); } /* ✅ Mobile-First - ברירת מחדל למובייל */ .details-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* דסקטופ - 2 עמודות */ @media (min-width: 768px) { .details-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */ .detail-section { background: var(--surface-50); color: var(--secondary-900); padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border: 1px solid var(--border-primary); } .detail-section h3 { color: var(--text-primary); border-bottom: 3px solid var(--primary-500); padding-bottom: 15px; margin-bottom: 25px; font-size: 1.5em; font-weight: 700; position: relative; } .detail-section h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-600)); } .detail-label { font-weight: 600; color: var(--text-primary); font-size: 1.1em; } .detail-value { font-weight: 700; color: var(--text-primary); font-size: 1.1em; } /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */ .work-items-section { padding: 40px 30px; background: var(--surface-50); color: var(--secondary-900); } .work-items-section h3 { color: var(--text-primary); border-bottom: 3px solid var(--primary-500); padding-bottom: 15px; margin-bottom: 30px; font-size: 1.8em; font-weight: 700; position: relative; } .work-items-section h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-600)); } .work-items-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 25px; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .work-items-table th { background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); color: var(--text-inverse); padding: 18px 12px; text-align: center; font-weight: 700; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; } .work-items-table td { padding: 15px 12px; border-bottom: 1px solid var(--border-primary); text-align: center; font-weight: 500; transition: all 0.3s ease; } .work-items-table tr:nth-child(even) { background: var(--bg-secondary); } .work-items-table tr:hover { background: var(--primary-50); transform: scale(1.01); } .work-items-table tr:last-child td { border-bottom: none; } .summary-section { padding: 40px 30px; background: linear-gradient(135deg, var(--border-primary) 0%, var(--border-primary) 100%); border-top: 3px solid var(--border-primary); } .summary-section h3 { color: var(--text-primary); border-bottom: 3px solid var(--primary-500); padding-bottom: 15px; margin-bottom: 30px; font-size: 1.8em; font-weight: 700; position: relative; } .summary-section h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-600)); } .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */ .summary-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); background: var(--surface-50); color: var(--secondary-900); } .summary-table td { padding: 15px 20px; border-bottom: 1px solid var(--border-primary); transition: all 0.3s ease; } .summary-table tr:hover { background: var(--bg-secondary); } .summary-table .label { font-weight: 600; color: var(--text-primary); font-size: 1.1em; } .summary-table .value { font-weight: 700; color: var(--text-primary); text-align: right; font-size: 1.1em; } .cumulative-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-top: 25px; } /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */ .cumulative-card { background: var(--surface-50); color: var(--secondary-900); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid var(--border-primary); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .cumulative-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); padding: 20px; text-align: center; } .cumulative-header h4 { margin: 0; font-size: 1.2rem; font-weight: 600; } .cumulative-content { padding: 25px; } .summary-label { font-weight: 500; color: var(--text-primary); font-size: 0.95rem; } .summary-value { font-weight: 600; color: var(--text-primary); font-size: 1rem; } .financial-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-top: 25px; } /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */ .financial-card { background: var(--surface-50); color: var(--secondary-900); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid var(--border-primary); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .financial-header { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-500) 100%); color: var(--text-inverse); padding: 20px; text-align: center; } .financial-header h4 { margin: 0; font-size: 1.2rem; font-weight: 600; } .financial-content { padding: 25px; } .cumulative-section { background: linear-gradient(135deg, var(--primary-50) 0%, var(--info-50) 50%, var(--info-100) 100%); border-top: 3px solid var(--primary-600); } .cumulative-section h3 { color: var(--primary-600); border-bottom: 3px solid var(--primary-600); } .cumulative-section h3::after { background: linear-gradient(90deg, var(--primary-600), var(--primary-500)); } .cumulative-subtitle h4 { color: var(--primary-600); font-size: 1.3em; font-weight: 700; margin-bottom: 20px; text-align: center; background: rgba(41, 128, 185, 0.1); padding: 15px; border-radius: 10px; border: 2px solid rgba(41, 128, 185, 0.2); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .cumulative-total { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%); color: var(--text-inverse); font-weight: 800; font-size: 1.2em; } .cumulative-total .label, .cumulative-total .value { color: var(--text-inverse); font-weight: 800; } .cumulative-total .value { font-size: 1.3em; } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .footer { background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); color: var(--text-inverse); text-align: center; padding: 30px; font-size: 1.1em; } .footer p { margin: 5px 0; opacity: 0.9; } @keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .invoice-container { animation: slideIn 0.8s ease-out; } .detail-section, .summary-table { animation: fadeInUp 0.6s ease-out; } .currency-value { font-family: 'Courier New', monospace; font-weight: 700; color: var(--text-primary); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .btn { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* ===== view.html - Style tag 1 ===== */ /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .account-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--info-400) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .default-icon-large, .default-avatar-large נמצאים ב-components/cards.css */ /* .account-icon-large נשאר ספציפי למודול */ /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--info-400)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-500); padding-right: 10px; margin-bottom: 1rem; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } /* Contract Invoices Progress Bar */ .contract-invoices-page .progress { height: 20px; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ .transaction-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; } /* ===== סרגל ניווט מהיר בטאבים - עיצוב כמו דף עובדים ===== */ .accountsQuickNavTabs { border-bottom: 2px solid var(--border-primary); padding: 0; margin: 0; overflow-x: visible; /* overflow-x: auto רק במובייל */ overflow-y: hidden; -webkit-overflow-scrolling: touch; @media (max-width: 1023px) { overflow-x: auto; } scrollbar-width: thin; scrollbar-color: var(--border-primary) transparent; } .accountsQuickNavTabs::-webkit-scrollbar { height: 6px; } .accountsQuickNavTabs::-webkit-scrollbar-track { background: transparent; } .accountsQuickNavTabs::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 10px; } .accountsQuickNavTabs::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } .accountsQuickNavTabs .nav-item { flex-shrink: 0; } .accountsQuickNavTabs .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--text-secondary); padding: 0.85rem 1.25rem; font-weight: 500; transition: all 0.2s ease; background: transparent; text-decoration: none; white-space: nowrap; display: flex; align-items: center; position: relative; } .accountsQuickNavTabs .nav-link:hover { color: var(--primary-500); background: rgba(13, 110, 253, 0.05); border-bottom-color: rgba(13, 110, 253, 0.3); text-decoration: none; } .accountsQuickNavTabs .nav-link.active { color: var(--primary-500); background: transparent; border-bottom-color: var(--primary-500); font-weight: 600; } .accountsQuickNavTabs .nav-link i { margin-left: 0.5rem; font-size: 0.95rem; } /* ===== צבעים מותאמים לכל טאב ===== */ .accountsQuickNavTabs .nav-item:nth-child(1) .nav-link:hover { color: var(--info-500); border-bottom-color: rgba(23, 162, 184, 0.3); background: rgba(23, 162, 184, 0.05); } .accountsQuickNavTabs .nav-item:nth-child(1) .nav-link.active { color: var(--info-500); border-bottom-color: var(--info-500); } .accountsQuickNavTabs .nav-item:nth-child(2) .nav-link:hover { color: var(--warning-500); border-bottom-color: rgba(255, 193, 7, 0.3); background: rgba(255, 193, 7, 0.05); } .accountsQuickNavTabs .nav-item:nth-child(2) .nav-link.active { color: var(--warning-500); border-bottom-color: var(--warning-500); } .accountsQuickNavTabs .nav-item:nth-child(3) .nav-link:hover { color: var(--error-500); border-bottom-color: rgba(220, 53, 69, 0.3); background: rgba(220, 53, 69, 0.05); } .accountsQuickNavTabs .nav-item:nth-child(3) .nav-link.active { color: var(--error-500); border-bottom-color: var(--error-500); } .accountsQuickNavTabs .nav-item:nth-child(4) .nav-link:hover { color: var(--success-500); border-bottom-color: rgba(40, 167, 69, 0.3); background: rgba(40, 167, 69, 0.05); } .accountsQuickNavTabs .nav-item:nth-child(4) .nav-link.active { color: var(--success-500); border-bottom-color: var(--success-500); } .accountsQuickNavTabs .nav-item:nth-child(5) .nav-link:hover { color: var(--text-primary); border-bottom-color: rgba(52, 58, 64, 0.3); background: rgba(52, 58, 64, 0.05); } .accountsQuickNavTabs .nav-item:nth-child(5) .nav-link.active { color: var(--text-primary); border-bottom-color: var(--text-primary); } .accountsQuickNavTabs .nav-item:nth-child(6) .nav-link:hover { color: var(--primary-500); border-bottom-color: rgba(13, 110, 253, 0.3); background: rgba(13, 110, 253, 0.05); } .accountsQuickNavTabs .nav-item:nth-child(6) .nav-link.active { color: var(--primary-500); border-bottom-color: var(--primary-500); } @media (max-width: 767px) { .accountsQuickNavTabs .nav-link { padding: 0.75rem 1rem; font-size: 0.875rem; } .accountsQuickNavTabs .nav-link i { font-size: 0.85rem; margin-left: 0.375rem; } } @media (max-width: 575px) { .accountsQuickNavTabs .nav-link { padding: 0.65rem 0.75rem; font-size: 0.8rem; } .accountsQuickNavTabs .nav-link i { font-size: 0.75rem; margin-left: 0.25rem; } } /* Accounts Quick Nav Sticky */ .accounts-quick-nav-sticky { top: 20px; z-index: 1000; background: var(--card-bg); } /* Accounts Card Border */ .accounts-card-border { border-right: 4px solid var(--primary-500); } /* Accounts Small Hint */ .accounts-small-hint { opacity: 0.9; font-size: 0.75rem; } /* Update existing styles to use CSS Variables */ /* הוסר כפילות - העיצובים נמצאים בקטע accountsQuickNavTabs (שורות 824-864) */ .accountsQuickNavTabs .nav-link.active { color: var(--primary-500); border-bottom-color: var(--primary-500); } /* Add Invoice Page Styles */ /* ⚠️ הוסר overflow-x: hidden - אסור על wrapper של דף לפי חוק זהב #9 */ .add-invoice-page { max-width: 100%; margin: 0 auto; padding: var(--spacing-5); /* overflow-x: hidden; - הוסר - אסור על wrapper של דף */ } /* overflow-x: auto רק במובייל */ .add-invoice-page .table, .add-invoice-page .table-responsive { min-width: unset; overflow-x: auto; } /* ✅ תיקון לפי חוק זהב #3 */ @media (max-width: 1023px) { .add-invoice-page .table, .add-invoice-page .table-responsive { overflow-x: auto; } } /* הוסר כפילות - העיצובים נמצאים בקטע add_invoice.html (שורות 182-259) */ /* עיצוב מותאם לרשימות סיכום */ /* הוסר כפילות - העיצובים נמצאים בקטע add_invoice.html (שורות 625-667) */ .form-control-readonly { background-color: var(--bg-secondary); } .accounts-error-list { margin-right: 20px; } .select-modern-min-width { min-width: 140px; } /* Contract Invoices Page - Full Styles */ .contract-invoices-page { direction: rtl; } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .page-header-modern { background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); color: var(--text-inverse); padding: 2rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-right: 4px solid var(--primary-500); } .page-header-modern h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; padding-bottom: 12px; border-bottom: 3px solid var(--primary-500); display: inline-block; } .page-header-modern .subtitle { font-size: 1rem; opacity: 0.9; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } /* מובייל - 2 בשורה */ @media (max-width: 768px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } /* ===== KPI Cards ===== */ /* הוסר - KPIs מעוצבים ב-components/cards.css (מאוחד מ-unified-kpi.css ו-kpi-v2.css) */ .kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .kpi-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-inverse); } .kpi-icon-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); } .kpi-icon-success { background: linear-gradient(135deg, var(--success-500), var(--success-500)); } .kpi-icon-info { background: linear-gradient(135deg, var(--info-500), var(--info-600)); } .kpi-icon-warning { background: linear-gradient(135deg, var(--warning-500), var(--warning-600)); } .kpi-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 0.5rem; } .kpi-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .contract-info-card { background: var(--secondary-800); border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid var(--border-primary); margin-bottom: 2rem; border-right: 4px solid var(--primary-500); } .contract-info-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--primary-500); } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .info-item { display: flex; flex-direction: column; gap: 0.25rem; } .info-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .info-value { font-size: 1rem; color: var(--text-primary); font-weight: 600; } .invoices-table-card { background: var(--secondary-800); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid var(--border-primary); overflow: hidden; border-right: 4px solid var(--primary-500); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .invoices-table-header { background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); color: var(--text-inverse); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-right: 4px solid var(--primary-500); } .invoices-table-header h3 { font-size: 1.25rem; font-weight: 600; margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--primary-500); display: inline-block; } .table-modern { width: 100%; border-collapse: collapse; margin: 0; } .table-modern thead { background: var(--bg-secondary); } .table-modern th { padding: 1rem; text-align: right; font-weight: 600; font-size: 0.875rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-primary); } .table-modern td { padding: 1rem; text-align: right; font-size: 0.875rem; color: var(--text-primary); border-bottom: 1px solid var(--border-primary); } .table-modern tbody tr { transition: background-color 0.2s ease; cursor: pointer; } .table-modern tbody tr:hover { background-color: var(--bg-secondary); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .table-modern tbody tr a { text-decoration: none; color: inherit; display: block; } .badge-modern { display: inline-block; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge-success { background: var(--success-100); color: var(--success-700); } .badge-warning { background: var(--warning-100); color: var(--warning-800); } .badge-danger { background: var(--error-100); color: var(--error-800); } .badge-info { background: var(--primary-100); color: var(--primary-700); } .badge-secondary { background: var(--border-primary); color: var(--text-primary); } .progress-modern { width: 100%; height: 24px; background: var(--border-primary); border-radius: 12px; overflow: hidden; position: relative; } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .progress-bar-modern { height: 100%; background: linear-gradient(90deg, var(--success-500), var(--success-500)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-size: 0.75rem; font-weight: 600; transition: width 0.3s ease; } .actions-modern { display: flex; gap: 0.5rem; flex-wrap: wrap; } .btn-modern { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .btn-modern:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .btn-success-modern { background: var(--success-500); color: var(--text-inverse); } .btn-outline-modern { background: transparent; border: 1px solid var(--border-primary); color: var(--text-primary); } .select-modern { padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border-primary); font-size: 0.875rem; background: var(--secondary-800); color: var(--text-inverse); cursor: pointer; transition: all 0.2s ease; } .select-modern:hover { border-color: var(--primary-500); } .select-modern:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1); } .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-secondary); } .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state h4 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .empty-state p { margin-bottom: 1.5rem; } .nav-buttons { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; } /* Form Styles - Bank Reconciliation, Financial Transaction, Budget */ /* הוסר כפילות: :root (זהה לשורות 1323-1328) */ /* הוסר כפילות - העיצוב נמצא בקטע add.html (שורה 535) */ .reconciliation-card, .transaction-card, .budget-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(148, 163, 184, 0.12); max-width: 1100px; width: 100%; margin: 0 auto; overflow: hidden; border-right: 4px solid var(--primary-500); } .reconciliation-card-header, .transaction-card-header, .budget-card-header { background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); color: var(--card-bg); padding: 1.25rem 1.5rem 1rem; border-bottom: none; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border-right: 4px solid var(--primary-500); } .reconciliation-card-title, .transaction-card-title, .budget-card-title { display: flex; align-items: center; gap: 0.6rem; } .reconciliation-card-title-icon, .transaction-card-title-icon, .budget-card-title-icon { width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--card-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .reconciliation-card-title h1, .transaction-card-title h1, .budget-card-title h1 { font-size: 1.3rem; margin: 0; font-weight: 700; color: var(--card-bg); } .reconciliation-card-title small, .transaction-card-title small, .budget-card-title small { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); font-weight: 400; margin-top: 0.2rem; } .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--card-bg); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } .reconciliation-card-body, .transaction-card-body, .budget-card-body { padding: 1.5rem 1.5rem 1.3rem; } /* הוסר - כפילות של .section-title, .section-subtitle ו-.form-section (הגרסאות הראשונות נמצאות בשורות 1644-1650) */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ .required { color: var(--error-600); margin-left: 0.2rem; } /* ===== Buttons ===== */ /* הוסר - buttons מעוצבים ב-components/buttons.css גלובלית */ /* הוסר כפילות: .btn בסיסי (היה בשורות 2439-2444) */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ .difference-alert { padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; font-weight: 600; } .difference-zero { background: var(--success-50); color: var(--success-600); border: 1px solid var(--success-200); } .difference-positive { background: var(--warning-50); color: var(--warning-600); border: 1px solid var(--warning-200); } .difference-negative { background: var(--error-50); color: var(--error-700); border: 1px solid var(--error-100); } /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .card-header-custom { background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); color: var(--text-inverse); border-right: 4px solid var(--primary-500); } @media (max-width: 768px) { .add-invoice-page { padding: 10px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); /* 2 בשורה במובייל */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ } .info-grid { grid-template-columns: 1fr; } /* overflow-x: auto רק במובייל */ .table-responsive { overflow-x: auto; } /* ✅ תיקון לפי חוק זהב #3 */ @media (max-width: 1023px) { .table-responsive { overflow-x: auto; } } /* הערה: עיצוב responsive של .work-items-table-responsive הועבר ל-modules/contracts.css */ .summary-item { font-size: 0.8rem; padding: 6px 0; } .summary-label { padding-right: 10px; } .summary-value { min-width: 80px; } } } /* ============================================ עיצוב מודרני למודול חשבונות - Theme מבוסס על העיצוב המודרני עם ניגודיות מושלמת ============================================ */ /* ======================================== 1. צבעי בסיס ומשתנים ======================================== */ :root { --accounts-primary: var(--primary-500); --accounts-primary-dark: var(--primary-700); --accounts-bg-dark: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); --accounts-bg-light: var(--card-bg); --accounts-bg-light-gray: var(--bg-secondary); --accounts-text-on-dark: var(--text-inverse); --accounts-text-on-light: var(--text-primary); --accounts-text-muted: var(--text-secondary); --accounts-border-primary: var(--primary-500); --accounts-border-light: var(--border-primary); --accounts-shadow-md: var(--shadow-dark-md); --accounts-shadow-lg: var(--shadow-dark-lg); --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); } /* ======================================== 2. כותרת ראשית מעוצבת ======================================== */ /* הוסר - page headers מעוצבים גלובלית ב-components/navigation.css */ /* ======================================== 3. סרגל פעולות עליון - שקוף ======================================== */ .accounts-actions-bar { background: transparent; border-radius: 0; padding: 16px 24px; box-shadow: none; border: none; } .accounts-actions-bar .btn { border-radius: 8px; font-weight: 500; padding: 0.5rem 1rem; transition: all 0.2s ease; } .accounts-actions-bar .btn-outline-primary { color: var(--accounts-primary); border-color: var(--primary-200); background: var(--accounts-bg-light); } .accounts-actions-bar .btn-outline-primary:hover { background: var(--primary-50); border-color: var(--accounts-primary); color: var(--accounts-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-primary-md); } .accounts-actions-bar .btn-primary { background: var(--gradient-primary); border: none; color: var(--accounts-text-on-dark); } .accounts-actions-bar .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-lg); } /* ======================================== 4. כרטיסים - פס צד כחול ======================================== */ .accounts-page .card, .accounts-view-page .card { border: none; border-radius: 16px; box-shadow: var(--accounts-shadow-md); overflow: hidden; border-right: 4px solid var(--accounts-border-primary); } .accounts-page .card-header, .accounts-view-page .card-header { background: var(--accounts-bg-dark); color: var(--accounts-text-on-dark); padding: 16px 20px; border-radius: 16px 16px 0 0; border-bottom: none; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .accounts-page .card-header h5, .accounts-view-page .card-header h5 { color: var(--accounts-text-on-dark); margin: 0; font-weight: 600; } /* ===== Card Body - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של .card-body נמצאים ב-components/cards.css */ /* ======================================== 5. טאבים מודרניים - משתמש בעיצוב הגלובלי מ-forms.css ======================================== */ /* כל העיצובים של .nav-tabs-custom נמצאים ב-components/forms.css */ /* ======================================== 6. Info Boxes - משתמש בעיצוב הגלובלי מ-base.css ======================================== */ /* כל העיצובים של .info-box (כולל hover) נמצאים ב-base.css */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ /* ======================================== 7. כפתורים ======================================== */ .btn { border-radius: 8px; font-weight: 600; padding: 0.6rem 1.2rem; transition: all 0.3s ease; } .btn-primary { background: var(--gradient-primary); border: none; color: var(--accounts-text-on-dark); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-xl); } .btn-success { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); border: none; color: var(--accounts-text-on-dark); } .btn-danger { background: linear-gradient(135deg, var(--error-500) 0%, var(--warning-600) 100%); border: none; color: var(--accounts-text-on-dark); } .btn-info { background: linear-gradient(135deg, var(--info-500) 0%, var(--secondary-600) 100%); border: none; color: var(--accounts-text-on-dark); } .btn-secondary { background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-secondary) 100%); border: none; color: var(--accounts-text-on-dark); } .btn-outline-primary { color: var(--accounts-primary); border: 2px solid var(--accounts-primary); background: var(--accounts-bg-light); } .btn-outline-primary:hover { background: var(--accounts-primary); color: var(--accounts-text-on-dark); transform: translateY(-2px); } /* ======================================== 8. טבלאות ======================================== */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 9. Badges ======================================== */ /* ===== Badge ===== */ /* הוסר - badges מעוצבים ב-components-enhanced.css גלובלית */ /* ======================================== 10. התראות ======================================== */ .alert-danger { background: var(--rgba-error-10); color: var(--error-900); border-right: 4px solid var(--error-500); border-radius: 12px; } .alert-warning { background: var(--rgba-warning-10); color: var(--warning-900); border-right: 4px solid var(--warning-500); border-radius: 12px; } .alert-info { background: var(--rgba-info-10); color: var(--info-700); border-right: 4px solid var(--info-500); border-radius: 12px; } /* ======================================== 11. טפסים ======================================== */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 12. Modal ======================================== */ /* ===== Modals ===== */ /* הוסר - modals מעוצבים גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 13. סטטיסטיקות ו-KPI ======================================== */ .stat-box { margin-bottom: 1rem; } .stat-box h4 { color: var(--accounts-primary); font-weight: 700; margin: 0; } .stat-box p { color: var(--accounts-text-muted); font-size: 0.85rem; margin: 0.25rem 0 0; } /* ===== KPI Cards & Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* ======================================== 14. בלוקים נוספים ======================================== */ .search-card, .filter-card, .stats-card { border-right: 4px solid var(--accounts-border-primary); border-radius: 16px; overflow: hidden; } .section-title { font-weight: 700; font-size: 1.05rem; color: var(--accounts-text-on-light); border-right: 4px solid var(--accounts-primary); padding-right: 12px; margin-bottom: 1.25rem; } /* ======================================== 15. רספונסיביות ======================================== */ @media (max-width: 767.98px) { /* ===== Page Headers ===== */ /* הוסר - page headers מעוצבים גלובלית */ /* הערה: כללי responsive ספציפיים נשמרים */ .nav-tabs-custom .nav-link { padding: 0.5rem 1rem; font-size: 0.85rem; } } /* ============================================ Advanced Module Styles ============================================ עיצוב ספציפי למודול Advanced (Workflows) ============================================ */ /* ===== Progress ===== */ /* הוסר - progress מעוצב ב-components-enhanced.css גלובלית */ /* תיקון: העברת inline styles סטטיים ל-CSS */ /* דוגמה: progress bar עם 65% (מ-workflows/index.html) */ .progress-bar.example-65 { width: 65%; } } /* ============================================ AI Advanced Module Styles ============================================ עיצוב ספציפי למודול AI Advanced כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* עיצוב progress bars במודול AI */ .ai-advanced-progress { width: 60px; height: 8px; } /* תיקון: העברת inline styles סטטיים ל-CSS */ /* דוגמה: progress bar עם 85% (מ-ai/models/index.html) */ .progress-bar.example-85 { width: 85%; } } /* ============================================ Chat Module Styles ============================================ עיצוב ספציפי למודול Chat כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* Chat - Messages Container */ #messages-container { height: 600px; overflow-y: auto; } /* Chat - Message Max Width */ .chat-message { max-width: 300px; } /* Chat - Message Image Max Width */ .message-content img.img-thumbnail { max-width: 300px; } /* Responsive */ @media (max-width: 768px) { #messages-container { height: 400px; } .chat-message { max-width: 100%; } } } /* ============================================ Communication Advanced Module Styles ============================================ עיצוב ספציפי למודול Communication Advanced כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* Communication Advanced Module - General Styles */ /* No static styles found - all styles are dynamic or in base CSS */ } /* ============================================ Contractors Module Styles ============================================ עיצוב ספציפי למודול Contractors (קבלנים) ============================================ */ /* ===== Inline styles - תיקון: העברת inline styles סטטיים ל-CSS ===== */ /* תיקון: תצוגת רשימה מוסתרת (מ-index.html) */ #list-view:not(.show) { display: none; } #list-view.show { display: block; } /* תיקון: שדות טופס עם רוחב קבוע (מ-edit_form.html) */ #editContractorForm .form-control, #editContractorForm select.form-control { width: calc(var(--spacing-6) * 23.62); } #editContractorForm textarea.form-control { width: calc(var(--spacing-6) * 37.8); } /* תיקון: הודעות שגיאה מוסתרות (מ-edit_form.html) */ #generalErrors:not(.show) { display: none; } #generalErrors.show { display: block; } /* ===== עיצובי כרטיסים - הועברו ל-components/cards.css ===== */ /* .project-association-card - הועבר ל-components/cards.css */ /* .employee-card-modern - הועבר ל-components/cards.css */ /* ===== Utility Classes - עיצובים כלליים ===== */ /* .text-muted.large-icon, .flex-center, .text-muted.small-text - עיצובים ספציפיים למודול */ .text-muted.large-icon { font-size: 3rem; opacity: 0.5; } .flex-center { display: flex; align-items: center; } .text-muted.small-text { font-size: 0.8rem; } /* עיצוב PDF Modal */ /* ===== Custom Modal & Resize Handles - הועברו ל-components/modals.css ===== */ /* כל העיצובים של .custom-modal-overlay, .custom-modal, .resize-handle נמצאים ב-components/modals.css */ /* ===== PDF Viewer Styles - הועבר ל-components/modals.css ===== */ /* כל העיצובים של .pdf-popup, .pdf-popup-content, .pdf-popup-header, .pdf-controls, .btn-pdf-control נמצאים ב-components/modals.css */ /* ===== Custom Modal - הועבר ל-components/modals.css ===== */ /* כל העיצובים של .custom-modal-overlay, .custom-modal, .resize-handle נמצאים ב-components/modals.css */ /* ===== Contractor Card Styles (view.html) ===== */ /* עיצוב כרטיסי קבלנים - מותאם מהעובדים */ .contractor-card { background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%); border: 1px solid var(--border-primary); border-radius: 20px; box-shadow: var(--shadow-card); padding: 25px; margin-bottom: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; } .contractor-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--warning-500) 0%, var(--warning-600) 100%); } .contractor-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--primary-500); } .contractor-card .card-header { text-align: center; padding: 20px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border-radius: 15px 15px 0 0; margin: -25px -25px 25px -25px; position: relative; } .contractor-card .card-header .profile-image { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px auto; border: 4px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .contractor-card .card-header .default-avatar { width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 15px auto; border: 4px solid rgba(255, 255, 255, 0.3); font-size: var(--text-3xl); color: var(--text-inverse); } .contractor-card .card-header h3 { margin: 0; font-size: 1.5rem; font-weight: 700; } .contractor-card .card-header p { margin: 5px 0 0 0; opacity: 0.9; font-size: 0.9rem; } /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-badge.status-active, .status-badge.status-inactive נמצאים ב-components-enhanced.css */ /* ===== Info Row - עיצוב ספציפי למודול ===== */ .info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-secondary); } .info-row:last-child { border-bottom: none; } .info-label { font-weight: 600; color: var(--text-primary); min-width: 120px; } .info-value { color: var(--text-secondary); text-align: left; flex: 1; } /* ===== Document Item - הועבר ל-components/cards.css ===== */ /* .document-item - הועבר ל-components/cards.css */ /* .btn-group .btn - משתמש בעיצוב הגלובלי מ-components/buttons.css */ /* .card .card-header, .card .card-body, .card .text-center - משתמשים בעיצוב הגלובלי מ-components/cards.css */ /* ===== Alerts ===== */ /* הוסר - alerts מעוצבים ב-alerts.css גלובלית */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ .tab-explanation { /* משתמש בעיצוב הגלובלי מ-base.css */ } @media (max-width: 768px) { .contractor-card .card-header { padding: var(--spacing-4); } .contractor-card .card-header .profile-image, .contractor-card .card-header .default-avatar { width: 80px; height: 80px; font-size: 2rem; } .contractor-card .card-header h3 { font-size: 1.3rem; } .info-row { flex-direction: column; align-items: flex-start; } .info-value { margin-top: 5px; } /* .document-item - משתמש בעיצוב הגלובלי מ-components/cards.css */ } /* ===== Contractors Page Styles (index.html) ===== */ /* הוסר - עיצובים ישנים של contractors-page, contractors-header, contractors-title */ /* העיצובים החדשים נמצאים בשורות 2554-2618 עם design tokens */ /* הוסר - advanced-features ו-feature-link לא משמשים בתבניות */ /* ===== Stats Grid - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .stats-grid נמצאים ב-components/cards.css */ /* ===== Stat Cards (KPIs) ===== */ /* הוסר - KPIs מעוצבים ב-components/cards.css (מאוחד מ-unified-kpi.css ו-kpi-v2.css) */ /* הוסר - stat-header, stat-icon, stat-value, stat-label מעוצבים ב-components/cards.css גלובלית */ /* הוסר - search-filters לא משמש בתבניות */ /* העיצובים החדשים של חיפוש נמצאים בשורות 2700+ עם contractors-search-engine */ /* הוסר - עיצובים ישנים של contractors-page .contractor-card */ /* העיצובים החדשים נמצאים בשורות 2899+ עם design tokens */ /* הוסר - empty-state לא משמש בתבניות */ /* הוסר - עיצובים ישנים של contractors-table-wrapper ו-contractors-table */ /* העיצובים החדשים נמצאים בשורות 2922-2988 עם design tokens */ /* ===== קישורי קשר ===== */ .contractors-phone-link, .contractors-email-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); font-weight: 500; transition: color 0.2s ease; } .contractors-phone-link i, .contractors-email-link i { font-size: 0.75rem; } .contractors-phone-link:hover { color: var(--success-600); } .contractors-email-link:hover { color: var(--primary-600); } .contractors-email-link span { word-break: break-word; } .contractors-badge-icon { font-size: 0.7rem; } .contractors-status-icon { font-size: 0.5rem; } /* ===== סרגל צד ===== */ .quick-actions { position: sticky; top: 6rem; } .quick-actions .card { border-radius: var(--contractor-radius-lg); box-shadow: var(--contractor-shadow-sm); border: 1px solid var(--contractor-border); overflow: hidden; } .card-header-gradient { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); padding: 0.7rem 0.9rem; } .card-header-gradient h6 { margin: 0; font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; } .quick-actions .card-body { padding: 0.85rem 0.9rem 0.9rem; } .action-btn { width: 100%; margin-bottom: 0.45rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; } .action-btn i { margin-left: 0.4rem; } /* ===== Sidebar Metrics & Pagination - משתמשים בעיצוב הגלובלי ===== */ /* .sidebar-metrics, .pagination-wrapper, .pagination .page-link - משתמשים בעיצוב הגלובלי */ @media (max-width: 767.98px) { .contractors-page { padding-inline: 0.5rem; } .advanced-features { padding: 0.9rem 1rem; } .search-filters { padding-inline: 0.9rem; } } /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* אייקון עזרה קטן */ .kpi-help-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; background: var(--bg-muted); color: var(--text-secondary); font-size: 10px; font-weight: bold; cursor: help; margin-right: 4px; vertical-align: middle; transition: all 0.2s ease; } .kpi-help-icon:hover { background: var(--border-primary); transform: scale(1.1); } /* Tooltip */ .kpi-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: var(--shadow-md); font-size: 0.8rem; line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } .kpi-explanation { font-size: 0.75rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.5rem; line-height: 1.4; padding-top: 0.5rem; border-top: 1px dashed rgba(255, 255, 255, 0.3); } /* ===== Navigation Buttons (view.html) ===== */ .navigation-buttons { margin-bottom: 20px; } .navigation-buttons .btn-group { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border-radius: 20px; overflow: hidden; display: inline-flex; max-width: 400px; } .navigation-buttons .btn { border-radius: 20px; padding: 6px 12px; font-size: 0.85rem; min-width: 120px; transition: all 0.3s ease; } .navigation-buttons .btn:first-child { border-radius: 20px 0 0 20px; } .navigation-buttons .btn:last-child { border-radius: 0 20px 20px 0; } .navigation-buttons .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* ===== Icon Sizes (view.html) ===== */ .ri-mail-line, .ri-file-pdf-line { font-size: 1.1rem; } /* ===== Form Validation Styles - הועבר ל-components/forms.css ===== */ /* כל העיצובים של .required-field, .is-invalid, .is-valid, .error-message, .form-section, .required-note נמצאים ב-components/forms.css */ /* ===== Add Form Styles (add.html) ===== */ /* ===== :root, body, .page-wrapper - משתמשים בעיצוב הגלובלי מ-forms.css ===== */ /* ===== .contractor-card - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* ===== Contractor Card Header - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .contractor-card-header, .contractor-card-title, .contractor-card-title-icon נמצאים ב-components/forms.css */ /* .badge-soft - משתמש בעיצוב הגלובלי */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ .input-group-text { font-size: var(--fs-small); background-color: var(--primary-soft); border-color: var(--border-subtle); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); } /* .form-section - משתמש בעיצוב הגלובלי מ-components/forms.css */ .form-check-label { font-size: 0.8rem; } /* ===== Contractor Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .contractor-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* הוסר - .small-hint מעוצב ב-components/forms.css גלובלית */ /* .is-invalid ו-.invalid-feedback - משתמשים בעיצוב הגלובלי מ-components/forms.css */ /* .page-wrapper media query - משתמש בעיצוב הגלובלי מ-forms.css */ /* ===== Edit Form Styles (edit.html) ===== */ /* ===== :root, body, .page-wrapper - משתמשים בעיצוב הגלובלי מ-forms.css ===== */ /* ===== .contractor-card, .contractor-card-title - משתמשים בעיצוב הגלובלי מ-forms.css ===== */ @media (max-width: 767.98px) { .contractor-card-header { padding: 1rem 1.25rem 0.8rem; } .contractor-card-title h1 { font-size: 1.1rem; } .contractor-card-title-icon { width: 2rem; height: 2rem; } .contractor-card-body { padding: 1.25rem; } .nav-tabs-custom { padding: 0.3rem; border-radius: 0.6rem; } .nav-tabs-custom .nav-link { padding: 0.4rem 0.6rem; font-size: 0.8rem; } .contractor-card-footer { padding: 0.8rem 1.25rem 0.9rem; } /* .btn-sm-custom - הועבר ל-components/buttons.css (עם responsive) */ } /* ===== Modern Form Styles (_form.html) ===== */ /* הוסר - עיצובים ישנים של .contractor-form-modern, .form-section-modern, .btn-modern וכו' */ /* כל העיצובים המודרניים נמצאים ב-components/forms.css ו-components/buttons.css */ /* עיצוב שגיאות טופס */ .alert-danger ul { margin-right: 20px; } /* עיצוב תמונת פרופיל */ .img-thumbnail { max-height: 100px; } /* עיצוב אזור שיוך פרויקטים */ #project-associations { min-height: 80px; } /* עיצוב שדות טופס עם רוחב קבוע */ .form-control[style*="width:5cm"], .form-control[style*="width:8cm"] { width: calc(var(--spacing-6) * 23.62); } textarea.form-control[style*="width:8cm"] { width: calc(var(--spacing-6) * 37.8); } /* עיצוב שדות בטופס edit_form - הוסר כפילות (קיים בשורות 19-26) */ /* ===== תוכן נוסף מ-contractors.css מהתיקייה הראשית ===== */ /* הוסר - כפילות של .navigation-buttons (הגרסה הראשונה נמצאת בשורות 491-523) */ /* צבעים מיוחדים לקבלנים */ .text-warning { color: var(--warning-500); } .text-orange { color: var(--warning-500); } .bg-orange { background-color: var(--warning-500); } .border-orange { border-color: var(--warning-500); } /* הוסר - כפילות של .contractor-card (הגרסה הראשונה נמצאת בשורות 306-316) */ /* הוסר - כפילות של .contractor-card::before ו-.contractor-card:hover */ /* ===== Contractor Photo - עיצוב מאוחד ===== */ .contractor-photo, .contractor-card img.contractor-photo, .contractor-card .text-center img.contractor-photo, .contractor-card img[src*="get_logo"] { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 20px auto; border: 4px solid var(--card-bg); box-shadow: var(--shadow-soft); background: var(--card-bg); transition: all 0.3s ease; } .contractor-photo:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); } .contractor-card .contractor-photo.bg-secondary { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-size: 2rem; } .contractor-info { margin-bottom: 20px; padding: var(--spacing-4); background: rgba(255, 255, 255, 0.7); border-radius: var(--radius-md); border: 1px solid var(--border-primary); } .contractor-name { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; text-align: center; } .contractor-type { color: var(--primary-500); font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 15px; padding: 4px 12px; background: var(--primary-50); border-radius: 20px; display: inline-block; width: 100%; } .contractor-info div { margin-bottom: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-secondary); font-size: 14px; color: var(--text-secondary); } .contractor-info div:last-child { border-bottom: none; margin-bottom: 0; } .contractor-info strong { color: var(--text-primary); font-weight: 600; } /* עיצוב רשימת כרטיסים */ .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .card-list .contractor-card { margin-bottom: 0; } .row-list .card { margin-bottom: 15px; } /* כפתור החלפת תצוגה */ .toggle-view-btn { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); border: none; color: var(--text-inverse); padding: 8px 16px; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; margin-bottom: 20px; } .toggle-view-btn:hover { background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-700) 100%); transform: translateY(-1px); box-shadow: var(--shadow-soft); } .toggle-view-btn:focus { box-shadow: 0 0 0 3px var(--primary-200); } /* עיצוב טבלה */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* ===== רוחב עמודות טבלה - עיצוב מאוחד ===== */ .table th:nth-child(1), .table td:nth-child(1) { width: 15%; } .table th:nth-child(2), .table td:nth-child(2) { width: 20%; } .table th:nth-child(3), .table td:nth-child(3) { width: 15%; } .table th:nth-child(4), .table td:nth-child(4) { width: 15%; } .table th:nth-child(5), .table td:nth-child(5) { width: 15%; } .table th:nth-child(6), .table td:nth-child(6) { width: 10%; } .table th:nth-child(7), .table td:nth-child(7) { width: 10%; } /* ===== Buttons & Badges ===== */ /* .btn-sm - משתמש בעיצוב הגלובלי מ-components/buttons.css */ /* .bg-success, .bg-danger - משתמשים בעיצוב הגלובלי */ /* כפתור הוספת קבלן */ .btn-add { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-400) 100%); border: none; color: var(--text-inverse); padding: 12px 24px; border-radius: var(--radius-md); font-weight: 600; transition: all 0.3s ease; box-shadow: var(--shadow-soft); } .btn-add:hover { background: linear-gradient(135deg, var(--success-600) 0%, var(--success-500) 100%); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-inverse); } /* ===== Text & Page Title ===== */ /* .text-muted, .page-title, .table-responsive - משתמשים בעיצוב הגלובלי */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* .table td a - משתמש בעיצוב הגלובלי */ /* ===== עיצוב תצוגת רשימה ===== */ #list-view .table-responsive { border-radius: var(--radius-md); } #list-view .table { margin-bottom: 0; } #list-view .table th, #list-view .table td { padding: 12px 8px; vertical-align: middle; border-bottom: 1px solid var(--border-primary); } #list-view .btn-sm { padding: 4px 8px; font-size: 12px; } #list-view .d-flex.gap-2 { gap: 0.5rem; } /* ===== Info Row - עיצוב ספציפי למודול ===== */ .info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-secondary); } .info-row:last-child { border-bottom: none; } .info-label { font-weight: 600; color: var(--text-primary); min-width: 120px; } .info-value { color: var(--text-secondary); text-align: left; flex: 1; } /* ===== Document Item - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .document-item נמצאים ב-components/cards.css */ .document-icon { font-size: 2rem; color: var(--warning-500); margin-bottom: 10px; } /* .btn-group .btn - משתמש בעיצוב הגלובלי מ-components/buttons.css */ /* .card .card-header, .card .card-body, .card .text-center - משתמשים בעיצוב הגלובלי מ-components/cards.css */ /* ===== Alerts ===== */ /* הוסר - alerts מעוצבים ב-alerts.css גלובלית */ /* ===== תיקיות מסמכים - עיצוב מאוחד ===== */ /* העיצובים של .folder-section, .folder-title, .folder-toggle, .folder-content נמצאים בשורות 1093-1134 */ /* ===== Document Item - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .document-item נמצאים ב-components/cards.css */ /* .document-icon - הגרסה הראשונה נמצאת בשורות 927-931 */ /* ===== תצוגת רשימת מסמכים ===== */ .documents-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-width: 100%; } /* ===== Notification Toast - הועבר ל-components/modals.css ===== */ /* כל העיצובים של .notification-toast, .notification-content נמצאים ב-components/modals.css */ /* ===== אייקונים לתיקיות ===== */ .folder-section:nth-child(1) .folder-title i { color: var(--primary-500); } .folder-section:nth-child(2) .folder-title i { color: var(--warning-500); } .folder-section:nth-child(3) .folder-title i { color: var(--success-500); } .folder-section:nth-child(4) .folder-title i { color: var(--info-500); } /* ===== Empty Folder - Compact Design ===== */ .empty-folder { background: var(--bg-secondary); border: 1px dashed var(--border-primary); border-radius: 6px; padding: 12px; text-align: center; transition: all 0.3s ease; margin: 5px 0; } .empty-folder:hover { border-color: var(--primary-500); background: var(--primary-50); } .empty-folder .fa-folder-open { color: var(--text-secondary); margin-bottom: 5px; font-size: 1.2rem; } .empty-folder .btn-outline-primary { border-radius: 15px; padding: 4px 12px; font-size: 0.8rem; } /* ===== Compact Folder Section - הוסר כפילות ===== */ /* העיצובים של .folder-section, .folder-title נמצאים בשורות 949-980 */ /* רספונסיביות */ @media (max-width: 768px) { .card-list .contractor-card { margin-bottom: 15px; } .contractor-photo, .contractor-card img.contractor-photo { width: 80px; height: 80px; } .contractor-actions { flex-direction: column; } .toggle-view-btn { width: 100%; margin-bottom: 15px; } /* הסתרת עמודות בטבלה במובייל */ .table th:nth-child(4), .table td:nth-child(4) { display: none; } .table th:nth-child(1), .table td:nth-child(1) { width: 25%; } .table th:nth-child(2), .table td:nth-child(2) { width: 35%; } .table th:nth-child(3), .table td:nth-child(3) { width: 25%; } .table th:nth-child(5), .table td:nth-child(5) { width: 15%; } .table th:nth-child(7), .table td:nth-child(7) { display: none; } /* .contractor-card .card-header - הוסר כפילות (הגרסה הראשונה נמצאת בשורות 187-201) */ .info-row { flex-direction: column; align-items: flex-start; } .info-value { margin-top: 5px; } } /* ========================================================= Contractors Index – Premium Layout מותאם ל-RTL, Bootstrap 5 + Tailwind utility classes מבוסס על עיצוב מודול הפרויקטים ========================================================= */ /* -------- בסיס עמוד -------- */ .contractors-page { --contractors-radius: var(--radius-lg); --contractors-radius-lg: var(--radius-xl); --contractors-gap: var(--spacing-4); --contractors-border-subtle: var(--border-primary); --contractors-bg-soft: var(--bg-secondary); --contractors-bg-card: var(--card-bg); --contractors-text-muted: var(--text-secondary); --contractors-shadow-soft: var(--shadow-lg); --contractors-shadow-subtle: var(--shadow-md); --contractors-accent: var(--primary-500); --contractors-accent-soft: var(--primary-100); --contractors-danger-soft: var(--error-100); --contractors-success-soft: var(--success-100); --contractors-warning-soft: var(--warning-100); --contractors-radius-pill: var(--radius-full); background: transparent; min-height: calc(100vh - calc(var(--spacing-12) * 3.75)); } /* ===== כותרת עליונה ===== */ .contractors-header { border-radius: var(--contractors-radius-lg); background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); color: var(--text-primary); box-shadow: var(--shadow-md); border-right: var(--spacing-1) solid var(--primary-500); border-top: 1px solid var(--primary-200); border-bottom: 1px solid var(--primary-200); border-left: 1px solid var(--primary-200); padding: var(--spacing-5) var(--spacing-5); position: relative; overflow: hidden; } .contractors-header::before { content: none; display: none; } .contractors-header-main { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6); align-items: center; justify-content: space-between; z-index: 1; } .contractors-title-wrap { display: flex; flex-direction: column; gap: var(--spacing-1); } .contractors-title { font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; margin: 0; color: var(--text-primary); } .contractors-title-icon { font-size: var(--text-2xl); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-500); } .contractors-subtitle { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); } .contractors-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } /* ===== Button Add - עיצוב מאוחד ===== */ .contractors-header-actions .btn-action.btn-add, .contractors-empty-state .btn-action.btn-add { width: var(--spacing-7); height: var(--spacing-7); background: var(--card-bg); color: var(--success-500); border: 1px solid var(--success-200); } .contractors-header-actions .btn-action.btn-add:hover, .contractors-empty-state .btn-action.btn-add:hover { background: var(--success-50); border-color: var(--success-500); color: var(--success-600); } .contractors-header-actions .btn-action.btn-add i, .contractors-empty-state .btn-action.btn-add i { font-size: var(--text-xs); } /* ===== Icon Ghost Button - הועבר ל-components/buttons.css ===== */ /* .btn-icon-ghost - הועבר ל-components/buttons.css */ /* ===== פילטרים מהירים ===== */ .contractors-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-top: var(--spacing-3); } /* ===== Filter Chip & Status Chip - עיצוב מאוחד ===== */ .filter-chip, .status-chip { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-sm); font-size: var(--text-xs); border: 1px solid var(--border-primary); color: var(--text-secondary); text-decoration: none; background: var(--card-bg); transition: all var(--transition-fast); font-weight: 500; min-height: var(--spacing-6); cursor: pointer; white-space: nowrap; } .filter-chip i, .status-chip i { font-size: var(--text-xs); line-height: 1; } .filter-chip:hover, .status-chip:hover { background: var(--bg-secondary); border-color: var(--border-primary); color: var(--text-primary); transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: var(--shadow-xs); } .filter-chip-active, .status-chip-active { background: var(--card-bg); color: var(--text-primary); font-weight: 600; border-width: calc(var(--spacing-1) * 0.375); box-shadow: var(--shadow-sm); } .contractors-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .contractors-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .contractors-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .contractors-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .contractors-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .contractors-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .contractors-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } /* -------- סטטיסטיקות / KPI -------- */ /* ===== Stats Grid ===== */ /* הוסר - stats-grid מעוצב ב-components/cards.css גלובלית */ /* ===== Stat Cards (KPIs) ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* הוסר - stat-meta, stat-label, stat-value, stat-icon, stat-header מעוצבים ב-components/cards.css גלובלית */ /* עיצובים ספציפיים ל-Contractors בלבד */ .stat-caption { font-size: var(--text-xs); color: var(--contractors-text-muted); } .stat-mini-value { font-size: var(--text-xs); color: var(--contractors-text-muted); } /* -------- מנוע חיפוש וסינון -------- */ .contractors-search-engine { border-radius: var(--contractors-radius); border: 1px solid var(--contractors-border-subtle); background: var(--card-bg); box-shadow: var(--shadow-md); } .contractors-search-engine .card-body { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); } .contractors-search-form { display: flex; flex-direction: column; gap: var(--spacing-1); } .contractors-search-main { min-height: 0; } .search-label { font-size: var(--text-xs); color: var(--text-secondary); } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--contractors-text-muted); } .search-input-wrapper .form-control { padding-inline-start: var(--spacing-7); font-size: var(--text-xs); border-radius: var(--radius-full); border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-200); } .contractors-search-status { min-width: calc(var(--spacing-12) * 5); } .status-chip-group { display: flex; flex-wrap: wrap; gap: var(--spacing-1); background: transparent; border-radius: 0; padding: 0; border: none; } /* ===== Status Chip - משתמש בעיצוב המאוחד מ-.filter-chip ===== */ /* ===== Status Chip States ===== */ .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary); } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary); color: var(--text-primary); } .status-chip[value="active"]:not(.status-chip-active) { border-color: var(--success-50); color: var(--success-500); } .status-chip[value="active"]:not(.status-chip-active):hover { background: var(--success-50); border-color: var(--success-500); } .status-chip[value="active"].status-chip-active { border-color: var(--success-600); color: var(--success-700); background: var(--success-50); } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: var(--error-200); color: var(--error-500); } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: var(--error-50); border-color: var(--error-500); } .status-chip[value="inactive"].status-chip-active { border-color: var(--error-600); color: var(--error-700); background: var(--error-50); } /* ===== Search Actions Buttons ===== */ .contractors-search-actions .btn-action.btn-advanced, .contractors-search-actions .btn-action.btn-filter { width: calc(var(--spacing-6) * 0.92); height: calc(var(--spacing-6) * 0.92); background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); box-shadow: none; font-size: 0; min-width: calc(var(--spacing-6) * 0.92); font-weight: normal; } .contractors-search-actions .btn-action.btn-advanced { color: var(--text-secondary); border-color: var(--border-primary); } .contractors-search-actions .btn-action.btn-advanced:hover { background: var(--bg-secondary); border-color: var(--border-primary); color: var(--text-primary); transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: var(--shadow-xs); } .contractors-search-actions .btn-action.btn-filter { color: var(--primary-500); border-color: var(--primary-50); } .contractors-search-actions .btn-action.btn-filter:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-500); transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: var(--shadow-xs); } .contractors-search-actions .btn-action i { font-size: var(--text-xs); line-height: 1; display: block; margin: 0; } .contractors-search-actions { gap: var(--spacing-1); align-items: center; } .contractors-search-advanced .form-select { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); border-radius: var(--radius-md); } .clear-filters-link { font-size: var(--text-xs); } .contractors-search-summary { font-size: var(--text-xs); color: var(--contractors-text-muted); } .contractors-search-summary strong { color: var(--text-primary); } /* -------- כרטיסי קבלנים (Mobile-First) -------- */ .contractors-grid { display: grid; grid-template-columns: 1fr; /* ✅ Mobile-First - ברירת מחדל למובייל */ gap: var(--spacing-3); } .contractor-card { border-radius: var(--contractors-radius); background: var(--contractors-bg-card); border: 1px solid var(--border-primary); box-shadow: var(--contractors-shadow-subtle); overflow: hidden; } .contractor-card-inner { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); } .contractor-card-header { display: flex; justify-content: space-between; gap: var(--spacing-2); align-items: flex-start; border-bottom: 1px dashed var(--border-primary); padding-bottom: var(--spacing-2); } .contractor-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); } .contractor-card-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .contractor-card-code { font-size: var(--text-xs); color: var(--contractors-text-muted); display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .contractor-status-badge .badge { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); } .contractor-card-body { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-2); } .contractor-main-info { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-xs); } .contractor-info-row { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; } .contractor-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: var(--spacing-1); } .contractor-info-label i { font-size: var(--text-xs); color: var(--text-secondary); } .contractor-info-value { color: var(--text-primary); } .contractor-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== Contractor Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .contractor-card-footer נמצאים ב-components/forms.css */ .contractor-actions-left { display: flex; flex-wrap: wrap; gap: var(--spacing-1); align-items: center; width: 100%; } /* ===== Button Actions - עיצוב מאוחד ===== */ .contractor-card-footer .btn-action, .contractors-table-actions .btn-action, .contractor-actions-left .btn-action { display: inline-flex; align-items: center; justify-content: center; width: var(--spacing-6); height: var(--spacing-6); padding: 0; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); font-size: 0; cursor: pointer; transition: all var(--transition-fast); background: var(--card-bg); color: var(--text-secondary); box-shadow: none; position: relative; min-width: var(--spacing-6); font-weight: normal; } .contractor-card-footer .btn-action:hover, .contractors-table-actions .btn-action:hover, .contractor-actions-left .btn-action:hover { background: var(--bg-secondary); border-color: var(--border-primary); transform: none; box-shadow: var(--shadow-xs); } .contractor-card-footer .btn-action:active, .contractors-table-actions .btn-action:active, .contractor-actions-left .btn-action:active { background: var(--bg-secondary); transform: scale(0.95); } .contractor-card-footer .btn-action i, .contractors-table-actions .btn-action i, .contractor-actions-left .btn-action i { font-size: var(--text-xs); line-height: 1; display: block; margin: 0; } /* Button Variants */ /* עיצוב כפתורים הועבר לגלובלי ב-components/buttons.css */ /* ===== מצב ללא קבלנים ===== */ .contractors-empty-state { border-radius: var(--contractors-radius); background: var(--contractors-bg-card); border: 1px dashed var(--border-primary); text-align: center; padding: var(--spacing-7) var(--spacing-4); margin-top: var(--spacing-2); color: var(--text-secondary); } .contractors-empty-state i { color: var(--text-secondary); } .contractors-empty-state h3 { font-size: var(--text-base); margin-bottom: var(--spacing-1); color: var(--text-primary); } .contractors-empty-state p { font-size: var(--text-xs); margin-bottom: var(--spacing-3); } /* ===== טבלת קבלנים ===== */ .contractors-table-wrapper { margin-top: var(--spacing-2); } .contractors-table-responsive { border-radius: var(--contractors-radius); overflow: hidden; } .contractors-table { font-size: var(--text-xs); margin-bottom: 0; } .contractors-table thead tr { background: var(--bg-secondary); } .contractors-table thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding-block: var(--spacing-2); padding-inline: var(--spacing-3); white-space: nowrap; } .contractors-table tbody td { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); vertical-align: middle; border-color: var(--border-primary); } .contractors-table tbody tr { transition: background-color var(--transition-fast); } .contractors-table tbody tr:hover { background-color: var(--bg-secondary); } .contractors-td-ellipsis { max-width: calc(var(--spacing-12) * 4.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-contractor-name { font-weight: 600; text-decoration: none; color: var(--text-primary); } .link-contractor-name:hover { color: var(--primary-500); } .contractors-table .text-decoration-none { text-decoration: none; color: var(--text-secondary); } .contractors-table .text-decoration-none:hover { color: var(--primary-500); } /* ===== הסברים ===== */ /* Info Boxes, KPI Help Icon & Tooltip - משתמשים בעיצוב הגלובלי */ /* ===== רספונסיביות (Mobile-First) ===== */ @media (min-width: 768px) { .contractors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* טאבלט */ .contractors-title { font-size: var(--text-2xl); } } @media (min-width: 1024px) { .contractors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* דסקטופ */ } @media (max-width: 767.98px) { .contractors-search-main { flex-direction: column; align-items: stretch; } .contractors-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .contractors-search-actions { align-items: stretch; } } } /* ============================================ עיצוב מודרני למודול קבלנים - Theme מבוסס על העיצוב המודרני עם ניגודיות מושלמת זהה למודול עובדים - רק משתנים שונים ============================================ */ /* ======================================== 1. צבעי בסיס ומשתנים (קבלנים) ======================================== */ :root { /* צבעים ראשיים */ --contractor-primary: var(--primary-500); --contractor-primary-dark: var(--primary-700); --contractor-primary-light: var(--primary-300); /* רקעים כהים */ --contractor-bg-dark: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); --contractor-bg-dark-solid: var(--text-primary); /* רקעים בהירים */ --contractor-bg-light: var(--card-bg); --contractor-bg-light-gray: var(--bg-secondary); --contractor-bg-light-blue: var(--primary-50); /* טקסט - ניגודיות מושלמת */ --contractor-text-on-dark: var(--text-inverse); --contractor-text-on-light: var(--text-primary); --contractor-text-muted: var(--text-secondary); /* גבולות */ --contractor-border-primary: var(--primary-500); --contractor-border-light: var(--border-primary); /* צללים */ --contractor-shadow-sm: var(--shadow-dark-sm); --contractor-shadow-md: var(--shadow-dark-md); --contractor-shadow-lg: var(--shadow-dark-lg); --contractor-shadow-xl: var(--shadow-dark-xl); /* Gradients לכפתורים */ --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); --gradient-purple: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); --gradient-red: linear-gradient(135deg, var(--error-500) 0%, var(--warning-600) 100%); --gradient-teal: linear-gradient(135deg, var(--info-500) 0%, var(--secondary-600) 100%); } /* ======================================== 2. כותרת ראשית מעוצבת ======================================== */ .contractor-header-custom, .contractors-list-header, .contractor-card-header { background: var(--contractor-bg-dark); color: var(--contractor-text-on-dark); padding: 24px 28px; border-radius: 20px; margin-bottom: 24px; box-shadow: var(--contractor-shadow-lg); border: 1px solid var(--rgba-white-15); border-right: 4px solid var(--contractor-border-primary); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .contractor-header-custom h1, .contractor-header-custom h2, .contractors-list-header h1, .contractors-list-header h2, .contractor-card-header h1 { color: var(--contractor-text-on-dark); text-shadow: 0 2px 4px var(--rgba-black-10); padding-bottom: 12px; border-bottom: 3px solid var(--contractor-border-primary); display: inline-block; margin-bottom: 16px; } .contractor-header-custom .text-dark, .contractor-header-custom .text-muted, .contractor-header-custom p, .contractor-header-custom span:not(.badge), .contractors-list-header .text-dark, .contractors-list-header p, .contractor-card-header small { color: var(--rgba-white-95); } .contractor-header-custom .badge, .contractor-card-header .badge { background: var(--rgba-white-20); color: var(--contractor-text-on-dark); border: 1px solid var(--rgba-white-30); } /* ======================================== 3. סרגל פעולות עליון - שקוף ללא רקע ======================================== */ .contractor-actions-bar { background: transparent; border-radius: 0; padding: 16px 24px; box-shadow: none; border: none; } .contractor-actions-bar .btn { border-radius: 8px; font-weight: 500; padding: 0.5rem 1rem; transition: all 0.2s ease; } /* כפתורי Outline */ .contractor-actions-bar .btn-outline-primary { color: var(--contractor-primary); border-color: var(--primary-200); background: var(--contractor-bg-light); } .contractor-actions-bar .btn-outline-primary:hover { background: var(--contractor-bg-light-blue); border-color: var(--contractor-primary); color: var(--contractor-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-primary-md); } .contractor-actions-bar .btn-primary { background: var(--gradient-primary); border: none; color: var(--contractor-text-on-dark); } .contractor-actions-bar .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-lg); } .contractor-actions-bar .btn-outline-secondary { color: var(--contractor-text-on-light); border: 2px solid var(--border-primary); background: var(--contractor-bg-light); } .contractor-actions-bar .btn-outline-secondary:hover { background: var(--contractor-bg-light-gray); border-color: var(--contractor-text-muted); transform: translateY(-2px); } /* ======================================== 4. טאבים מודרניים ======================================== */ .nav-tabs-custom { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border-primary) 100%); padding: 0.75rem; border-radius: 20px; border: 1px solid var(--rgba-gray-30); box-shadow: var(--contractor-shadow-md); margin-bottom: 1.5rem; } .nav-tabs-custom .nav-link { border: none; background: transparent; border-radius: 999px; padding: 0.65rem 1.4rem; font-size: 0.9rem; font-weight: 500; color: var(--contractor-text-muted); transition: all 0.3s ease; } .nav-tabs-custom .nav-link:hover { background: var(--shadow-primary-soft); color: var(--contractor-primary); transform: translateY(-2px); } .nav-tabs-custom .nav-link.active { background: var(--gradient-primary); color: var(--contractor-text-on-dark); box-shadow: var(--shadow-primary-xxl); font-weight: 600; } .nav-tabs-custom .nav-link.active i { color: var(--contractor-text-on-dark); } /* ======================================== 5. כרטיסים ======================================== */ .card { border: none; border-radius: 16px; box-shadow: var(--contractor-shadow-md); overflow: hidden; border-right: 4px solid var(--contractor-border-primary); } .card-header, .gradient-header { background: var(--contractor-bg-dark); color: var(--contractor-text-on-dark); padding: 16px 20px; border-radius: 16px 16px 0 0; border-bottom: none; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .card-header h5, .gradient-header h5, .card-header h6, .gradient-header h6 { color: var(--contractor-text-on-dark); margin: 0; font-weight: 600; } .card-header i, .gradient-header i { color: var(--rgba-white-90); } /* ===== Card Body - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של .card-body נמצאים ב-components/cards.css */ /* ======================================== 6. Info Boxes - משתמש בעיצוב הגלובלי מ-base.css ======================================== */ /* כל העיצובים של .info-box (כולל hover) נמצאים ב-base.css */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ /* ======================================== 7. כפתורים ======================================== */ .btn { border-radius: 8px; font-weight: 600; padding: 0.6rem 1.2rem; transition: all 0.3s ease; } .btn-primary { background: var(--gradient-primary); border: none; color: var(--contractor-text-on-dark); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-xl); } .btn-success { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); border: none; color: var(--contractor-text-on-dark); } .btn-danger { background: var(--gradient-red); border: none; color: var(--contractor-text-on-dark); } .btn-info { background: var(--gradient-teal); border: none; color: var(--contractor-text-on-dark); } .btn-secondary { background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-secondary) 100%); border: none; color: var(--contractor-text-on-dark); } /* כפתורי Outline */ .btn-outline-primary { color: var(--contractor-primary); border: 2px solid var(--contractor-primary); background: var(--contractor-bg-light); } .btn-outline-primary:hover { background: var(--contractor-primary); color: var(--contractor-text-on-dark); transform: translateY(-2px); } .btn-outline-danger { color: var(--error-500); border: 2px solid var(--error-500); background: var(--contractor-bg-light); } .btn-outline-danger:hover { background: var(--error-500); color: var(--contractor-text-on-dark); transform: translateY(-2px); } /* ======================================== 8. אזור מסמכים ======================================== */ /* ===== Documents Card - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של documents-card, documents-card-header, documents-wrapper, folder-section, folder-name, docs-table נמצאים ב-components/cards.css */ /* ======================================== 9. Badges ======================================== */ /* ===== Badge ===== */ /* הוסר - badges מעוצבים ב-components-enhanced.css גלובלית */ .status-active { background: var(--success-50); color: var(--success-600); } .status-inactive { background: var(--border-primary); color: var(--text-secondary); } /* ======================================== 10. טבלה ======================================== */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 11. טפסים ======================================== */ /* הוסר - .form-card מעוצב ב-components/cards.css גלובלית */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* הוסר - .form-text מעוצב ב-components/forms.css גלובלית */ /* ======================================== 12. התראות ======================================== */ .alert-danger { background: var(--rgba-error-10); color: var(--error-900); border-right: 4px solid var(--error-500); border-radius: 12px; } .alert-warning { background: var(--rgba-warning-10); color: var(--warning-900); border-right: 4px solid var(--warning-500); border-radius: 12px; } .alert-info { background: var(--rgba-info-10); color: var(--info-700); border-right: 4px solid var(--info-500); border-radius: 12px; } /* ======================================== 13. Modal ======================================== */ /* ===== Modals ===== */ /* הוסר - modals מעוצבים גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 14. סטטיסטיקות ======================================== */ .stat-box { margin-bottom: 1rem; } .stat-box h4 { color: var(--contractor-primary); font-weight: 700; margin: 0; } .stat-box p { color: var(--contractor-text-muted); font-size: 0.85rem; margin: 0.25rem 0 0; } /* ======================================== 15. רספונסיביות ======================================== */ @media (max-width: 767.98px) { .contractor-header-custom, .contractors-list-header, .contractor-card-header { padding: 1rem 1.25rem; } .nav-tabs-custom .nav-link { padding: 0.5rem 1rem; font-size: 0.85rem; } .btn { padding: 0.5rem 1rem; font-size: 0.9rem; } } /* ======================================== 16. אנימציות ======================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-pane { animation: fadeIn 0.3s ease-in; } /* תיקוני עיצוב ספציפיים לקבלנים */ .contractor-card { border-radius: 16px; box-shadow: var(--contractor-shadow-md); overflow: hidden; border-right: 4px solid var(--contractor-border-primary); } .form-card { border-right: 4px solid var(--contractor-border-primary); } .table-card { border-right: 4px solid var(--contractor-border-primary); } /* בלוקים נוספים - כל הכרטיסים */ /* ===== KPI Cards & Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* כרטיסי חיפוש וסינון */ .contractors-search-panel, .search-filters-card { border-right: 4px solid var(--contractor-border-primary); background: var(--contractor-bg-light); border-radius: 16px; box-shadow: var(--contractor-shadow-md); } .contractor-card-body { background: var(--contractor-bg-light); color: var(--contractor-text-on-light); padding: 1.5rem; } .section-title { font-weight: 700; font-size: 1.05rem; color: var(--contractor-text-on-light); border-right: 4px solid var(--contractor-primary); padding-right: 12px; margin-bottom: 1.25rem; } /* ============================================ Contracts Module Styles ============================================ עיצוב ספציפי למודול Contracts כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* ===== תיקון: הסרת סרגל גלילה מבלוקים בדף view ===== */ /* בלוקים: תשלומים, סעיפים, אישורים, מסמכים, היסטוריה */ .contracts-page.contracts-view-page .card-body, .contracts-page.contracts-view-page .table-responsive, .contracts-view-page .card-body, .contracts-view-page .table-responsive { overflow-y: visible; overflow-x: visible; /* overflow-x: auto רק במובייל */ max-height: none; height: auto; } @media (max-width: 1023px) { .contracts-page.contracts-view-page .card-body, .contracts-page.contracts-view-page .table-responsive, .contracts-view-page .card-body, .contracts-view-page .table-responsive { overflow-x: auto; } } .contracts-page.contracts-view-page .card, .contracts-view-page .card { overflow: visible; } /* וידוא שאין max-height שגורם לסרגל גלילה */ .contracts-page.contracts-view-page .card-body[style*="max-height"], .contracts-page.contracts-view-page .table-responsive[style*="max-height"], .contracts-view-page .card-body[style*="max-height"], .contracts-view-page .table-responsive[style*="max-height"] { max-height: none; } .contracts-page.contracts-view-page .card-body[style*="overflow-y"], .contracts-page.contracts-view-page .table-responsive[style*="overflow-y"], .contracts-view-page .card-body[style*="overflow-y"], .contracts-view-page .table-responsive[style*="overflow-y"] { overflow-y: visible; } /* ===== Inline styles - תיקון: העברת inline styles סטטיים ל-CSS ===== */ /* תיקון: טפסים inline (מ-list.html) */ form.contract-form-inline, form[action*="toggle_status"], form[action*="delete"] { display: inline; } /* תיקון: שדות טופס דינמיים (מ-form.html) */ .form-control[style*="width:"] { /* width נשאר דינמי (מ-Jinja2) */ } /* Contracts View Page */ .contract-view-wrapper { max-width: 1200px; } .contract-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; color: var(--text-inverse); } .contract-header h2 { color: var(--text-inverse); margin-bottom: 0.5rem; } .default-icon-large { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } /* Contracts Form */ .contract-form-section { background: var(--bg-secondary); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; } .contract-form-section h5 { border-bottom: 2px solid var(--border-primary); padding-bottom: 0.5rem; margin-bottom: 1rem; } /* Contracts Details Card */ .contract-details-card { background: var(--card-bg); border-radius: 8px; padding: 1.5rem; box-shadow: var(--shadow-soft); margin-bottom: 1.5rem; } .bg-gradient-primary { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); } /* Payment Section */ .payment-section { background: var(--bg-secondary); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; } .payment-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--border-primary); } .payment-item:last-child { border-bottom: none; } /* Contracts Tabs */ .contract-tabs .nav-link { padding: 0.75rem 1.25rem; font-weight: 500; color: var(--text-secondary); border: none; border-bottom: 3px solid transparent; } .contract-tabs .nav-link:hover { background-color: var(--bg-secondary); } .contract-tabs .nav-link.active { background-color: var(--card-bg); color: var(--primary-500); border-bottom-color: var(--primary-500); } /* Contracts List */ .contracts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .contract-card { background: var(--card-bg); border-radius: 8px; padding: 1.5rem; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; } .contract-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Contracts Print */ .contract-print { max-width: 800px; margin: 0 auto; padding: 2rem; } .contract-print-header { text-align: center; margin-bottom: 2rem; border-bottom: 2px solid var(--border-primary); padding-bottom: 1rem; } /* Icon Sizes */ .share-email-btn i, .btn-outline-light i { font-size: 1.1rem; } /* Currency Amount */ .currency-amount { font-weight: 600; font-size: 1.1rem; color: var(--success-600); } /* Contracts Form Wrapper */ .contract-form-wrapper { padding: 0; } .contract-form-wrapper .card { border: none; border-radius: 0.85rem; box-shadow: var(--shadow-soft); margin-bottom: 1.1rem; overflow: hidden; background: var(--card-bg); } .contract-form-wrapper .card-header { background: linear-gradient(135deg, var(--primary-500), var(--info-400)); color: var(--text-inverse); border: none; padding: 0.75rem 1rem; font-weight: 600; } .contract-form-wrapper .card-header h4 { margin: 0; font-size: 0.95rem; color: var(--text-inverse); } .contract-form-wrapper .card-body { padding: 1rem; } .contract-form-wrapper .form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; } .contract-form-wrapper .form-control, .contract-form-wrapper .form-select { font-size: 0.88rem; padding: 0.45rem 0.6rem; border-radius: 0.65rem; border-color: var(--border-primary); } /* FIX: מניעת Collapsed Inline Text / Forced Column Layout Bug במובייל */ /* שימוש ב-specificity גבוה יותר במקום !important - לפי חוקי .cursorrules */ .contract-form-wrapper .contract-form-textarea { display: block; /* חובה: block בלבד, לא flex/grid */ width: 100%; max-width: 100%; resize: both; min-height: 60px; line-height: 1.6; /* חובה: line-height >= 1.4 למניעת פירוק טקסט */ white-space: normal; /* חובה: טקסט רגיל, לא vertical */ } .contract-form-wrapper .form-control:focus, .contract-form-wrapper .form-select:focus { border-color: var(--primary-500); box-shadow: 0 0 0 0.15rem var(--primary-200); } .contract-form-wrapper .btn { padding: 0.45rem 1.1rem; font-size: 0.85rem; border-radius: 999px; font-weight: 600; } .contract-form-wrapper .btn-primary { background: linear-gradient(135deg, var(--primary-500), var(--info-400)); border: none; } .contract-form-wrapper .btn-secondary { background: var(--text-secondary); border: none; } .contract-form-wrapper .form-actions { background: var(--bg-secondary); padding: 1rem 1.5rem; border-top: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .contract-form-wrapper .small-hint { font-size: 0.74rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; } .contract-form-wrapper .small-hint i { color: var(--primary-500); font-size: 0.75rem; } .signature-box { border: 2px dashed var(--border-secondary); height: 100px; display: flex; align-items: center; justify-content: center; margin: 20px 0; } /* Contracts Dashboard (List/Index) */ .contracts-dashboard { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); min-height: 100vh; padding: 20px; } .dashboard-header { background: var(--card-bg); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); } .header-title { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; } .header-subtitle { color: var(--text-secondary); font-size: 1.2rem; margin-bottom: 20px; } .quick-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-500); margin-bottom: 10px; } .stat-label { color: var(--text-secondary); font-size: 1rem; font-weight: 600; position: relative; } .filters-section { background: var(--surface-50); color: var(--secondary-900); border-radius: 20px; padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid var(--border-primary); } .filters-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .filter-group { display: flex; flex-direction: column; gap: 8px; } .filter-label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); } .filter-input { padding: 12px 15px; border: 2px solid var(--border-primary); border-radius: 10px; font-size: 0.9rem; transition: all 0.3s ease; background: var(--surface-50); color: var(--secondary-900); color: var(--text-primary); } .filter-input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } .filter-btn { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border: none; padding: 12px 25px; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; } .filter-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ✅ Mobile-First - ברירת מחדל למובייל */ .contracts-grid { display: grid; grid-template-columns: 1fr; gap: 25px; margin-bottom: 30px; } .contract-card-empty { background: var(--card-bg); border-radius: 20px; padding: 25px; box-shadow: var(--shadow-lg); transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px dashed var(--primary-200); display: flex; align-items: center; justify-content: center; min-height: 300px; } .contract-card-empty::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-600)); } .empty-card-content { text-align: center; color: var(--text-tertiary); } .empty-card-icon { font-size: 3rem; margin-bottom: 15px; opacity: 0.5; } .empty-card-text { font-size: 1rem; font-weight: 600; } .contract-card { background: var(--card-bg); border-radius: 20px; padding: 25px; box-shadow: var(--shadow-lg); transition: all 0.3s ease; position: relative; overflow: hidden; } .contract-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--primary-500), var(--secondary-600)); } .contract-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .contract-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .contract-title { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; } .contract-number { color: var(--primary-500); font-weight: 600; font-size: 0.9rem; } .contract-status { padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; } /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ .status-draft { background: var(--text-tertiary); color: var(--text-secondary); border: 1px solid var(--border-secondary); } .status-completed { background: var(--info-100); color: var(--info-600); border: 1px solid var(--info-200); } .status-cancelled { background: var(--error-100); color: var(--error-600); border: 1px solid var(--error-200); } /* ✅ Mobile-First - ברירת מחדל למובייל */ .contract-info { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 20px; } /* דסקטופ - 2 עמודות */ @media (min-width: 768px) { .contract-info { grid-template-columns: 1fr 1fr; gap: 15px; } } .info-item { display: flex; align-items: center; gap: 8px; } .info-icon { width: 20px; color: var(--primary-500); font-size: 0.9rem; } .info-text { font-size: 0.9rem; color: var(--text-secondary); } .info-link { color: var(--primary-500); text-decoration: none; font-weight: 600; } .info-link:hover { color: var(--secondary-600); text-decoration: underline; } .contract-amount { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); padding: 15px; border-radius: 15px; text-align: center; margin-bottom: 20px; } .amount-label { font-size: 0.9rem; opacity: 0.9; margin-bottom: 5px; } .amount-value { font-size: 1.5rem; font-weight: 700; } /* ✅ Mobile-First - ברירת מחדל למובייל */ .contract-dates { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 20px; } /* דסקטופ - 2 עמודות */ @media (min-width: 768px) { .contract-dates { grid-template-columns: 1fr 1fr; gap: 15px; } } .date-item { text-align: center; padding: 10px; background: var(--primary-50); border-radius: 10px; } .date-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 5px; } .date-value { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .contract-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .action-btn { padding: 8px 16px; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .btn-view { background: var(--primary-100); color: var(--primary-500); border: 1px solid var(--primary-200); } .btn-view:hover { background: var(--primary-500); color: var(--text-inverse); transform: translateY(-2px); } .btn-edit { background: var(--warning-100); color: var(--warning-600); border: 1px solid var(--warning-200); } .btn-edit:hover { background: var(--warning-500); color: var(--text-inverse); transform: translateY(-2px); } .btn-toggle { background: var(--success-100); color: var(--success-600); border: 1px solid var(--success-200); } .btn-toggle:hover { background: var(--success-500); color: var(--text-inverse); transform: translateY(-2px); } .btn-delete { background: var(--error-100); color: var(--error-600); border: 1px solid var(--error-200); } .btn-delete:hover { background: var(--error-500); color: var(--text-inverse); transform: translateY(-2px); } .add-contract-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); border: none; border-radius: 50%; color: var(--text-inverse); font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.3s ease; z-index: 1000; } .add-contract-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-lg); } .empty-state { background: var(--card-bg); border-radius: 20px; padding: 60px 30px; text-align: center; box-shadow: var(--shadow-md); } .empty-icon { font-size: 4rem; color: var(--primary-500); margin-bottom: 20px; } .empty-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .empty-text { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 30px; } .empty-btn { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border: none; padding: 15px 30px; border-radius: 10px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .empty-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-inverse); text-decoration: none; } /* KPI Help Icon & Tooltip */ .kpi-help-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: var(--text-inverse); font-size: 10px; font-weight: bold; cursor: help; margin-right: 4px; vertical-align: middle; transition: all 0.2s ease; } .kpi-help-icon:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .kpi-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: var(--shadow-md); font-size: 0.8rem; line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .dashboard-header { animation: fadeInUp 0.6s ease-out; } .quick-stats { animation: fadeInUp 0.6s ease-out; animation-delay: 0.2s; animation-fill-mode: both; } .contracts-grid { animation: fadeInUp 0.6s ease-out; animation-delay: 0.4s; animation-fill-mode: both; } /* Print Styles */ @media print { .no-print { display: none; } body { margin: 0; padding: 20px; } } .print-button { position: fixed; top: 20px; right: 20px; background: var(--primary-500); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } .print-button:hover { background: var(--primary-700); } .back-button { position: fixed; top: 20px; left: 20px; background: var(--text-secondary); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; } .back-button:hover { background: var(--text-tertiary); color: var(--text-inverse); text-decoration: none; } .contract-print-header { text-align: center; border-bottom: 3px solid var(--primary-500); padding-bottom: 20px; margin-bottom: 30px; } .contract-print-title { font-size: 28px; font-weight: bold; color: var(--primary-500); margin-bottom: 10px; } .contract-print-number { font-size: 18px; color: var(--text-secondary); } .work-items-table { width: 100%; border-collapse: collapse; margin-top: 15px; } .work-items-table th, .work-items-table td { border: 1px solid var(--border-primary); padding: 8px; text-align: right; } .work-items-table th { background-color: var(--bg-secondary); font-weight: bold; } .work-items-table .total-row { font-weight: bold; background-color: var(--bg-secondary); } /* Work Items Form Table Column Widths */ /* הערה: עיצוב #work-items-table הועבר ל-modules/contracts.css */ /* הגדרות ישנות הוסרו - משתמשים בעיצוב החדש עם .work-items-table-responsive */ /* Table Column Widths - Contracts View */ .contract-view-wrapper .table th { background-color: var(--bg-secondary); font-weight: 600; color: var(--text-primary); border-bottom: 2px solid var(--border-primary); } /* Work Items Table Column Widths */ .contract-view-wrapper .table th.col-code, .contract-view-wrapper .table td.col-code { width: 12%; } .contract-view-wrapper .table th.col-description, .contract-view-wrapper .table td.col-description { width: 35%; } .contract-view-wrapper .table th.col-unit, .contract-view-wrapper .table td.col-unit { width: 8%; } .contract-view-wrapper .table th.col-quantity, .contract-view-wrapper .table td.col-quantity { width: 12%; } .contract-view-wrapper .table th.col-price, .contract-view-wrapper .table td.col-price { width: 15%; } .contract-view-wrapper .table th.col-amount, .contract-view-wrapper .table td.col-amount { width: 18%; } /* Print Page - Info Items */ .info-item.mt-5 { margin-top: 20px; } /* Print Page - Signatures */ .signature-section { display: flex; justify-content: space-between; margin-top: 50px; } .signature-box-print { text-align: center; width: 45%; } .signature-line { border-bottom: 1px solid var(--text-primary); height: 50px; margin-bottom: 10px; } /* Print Page - Total Row */ .work-items-table .total-row { font-weight: bold; background-color: var(--bg-secondary); text-align: left; } /* Contracts Index - List View Toggle */ #list-view { display: none; } #list-view.show { display: block; } /* Dashboard - Small Text */ .dashboard .small-hint { opacity: 0.9; font-size: 0.75rem; } /* Responsive (Mobile-First) */ @media (min-width: 768px) { .contracts-grid { grid-template-columns: repeat(2, 1fr); /* טאבלט */ gap: 20px; } } @media (min-width: 1024px) { .contracts-grid { grid-template-columns: repeat(3, 1fr); /* דסקטופ */ gap: 20px; } } @media (min-width: 1200px) { .contracts-grid { grid-template-columns: repeat(4, 1fr); /* דסקטופ גדול */ gap: 20px; } } @media (max-width: 767.98px) { .contracts-dashboard { padding: 15px; } .header-title { font-size: 2rem; } .quick-stats { grid-template-columns: repeat(2, 1fr); gap: 15px; } .contract-info { grid-template-columns: 1fr; gap: 10px; } .contract-dates { grid-template-columns: 1fr; gap: 10px; } .filters-grid { grid-template-columns: 1fr; gap: 15px; } .add-contract-btn { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 1.2rem; } } /* ===== add.html - Style tag 1 ===== */ .card-body-custom { padding: 1.75rem; } .section-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .section-title i { font-size: 0.85rem; color: var(--primary); } /* ===== Forms ===== */ /* הערה: Forms - משתמש בעיצוב הגלובלי מ-forms.css */ /* העיצוב הבסיסי של .form-label .required, .btn-primary-modern, .btn-outline-secondary-modern נמצאים ב-components/forms.css ו-components/buttons.css */ .form-control::placeholder { color: var(--text-tertiary); font-size: 0.84rem; } .form-section { margin-bottom: 1.4rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--bg-secondary); border: 1px dashed var(--border-secondary); } .form-check-label { font-size: 0.88rem; } /* הוסר - .card-footer-custom מעוצב ב-components/forms.css גלובלית */ /* .btn-primary-modern - הועבר ל-components/buttons.css */ /* .btn-outline-secondary-modern - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* הערה: עיצוב .work-items-table-responsive הועבר ל-modules/contracts.css */ /* הגדרות ישנות הוסרו - משתמשים בעיצוב החדש עם classes (col-*) */ /* ===== edit.html - Style tag 1 ===== */ /* הערה: כל העיצובים של add.html ו-edit.html זהים, משתמשים באותם הגדרות מ-add.html למעלה */ /* ===== view.html - Style tag 1 ===== */ .contract-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--info-400) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: var(--shadow-md); } .default-icon-large { width: 130px; height: 130px; border-radius: 50%; border: 4px solid var(--card-bg); box-shadow: var(--shadow-md); background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-inverse); } /* ===== Cards ===== */ /* הוסר - cards מעוצבים ב-components/cards.css גלובלית */ .card-header h4 { margin: 0; font-size: 0.95rem; color: var(--text-inverse); } .currency-amount { font-family: 'Courier New', monospace; font-weight: 600; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-500); padding-right: 10px; margin-bottom: 1rem; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Progress ===== */ /* הוסר - progress מעוצב ב-components-enhanced.css גלובלית */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* עיצוב מותאם לטבלת סעיפי עבודה */ .work-items-table { max-width: 100%; overflow-x: auto; } /* ✅ תיקון לפי חוק זהב #3 */ @media (max-width: 1023px) { .work-items-table { overflow-x: auto; } } .work-items-table .table { font-size: 0.875rem; margin-bottom: 0; } .work-items-table .table th, .work-items-table .table td { padding: 0.5rem 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .work-items-table .table th:nth-child(2), .work-items-table .table td:nth-child(2) { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .work-items-table .table th:nth-child(3), .work-items-table .table td:nth-child(3) { text-align: center; min-width: 60px; } .work-items-table .table th:nth-child(4), .work-items-table .table td:nth-child(4), .work-items-table .table th:nth-child(5), .work-items-table .table td:nth-child(5), .work-items-table .table th:nth-child(6), .work-items-table .table td:nth-child(6) { text-align: right; min-width: 80px; } /* עיצוב כרטיסיות תשלומים */ .payment-card { height: 100%; } .payment-card .card-body dl { flex: 1; } @media (max-width: 768px) { .contract-content { padding: var(--spacing-4); } .page-title { font-size: 2rem; } .action-buttons { flex-direction: column; gap: 5px; } .navigation-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .action-buttons-main { display: flex; gap: 8px; flex-wrap: wrap; } .btn-sm { padding: 4px 8px; font-size: 0.875rem; } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--text-secondary); } .btn-outline-secondary:hover { background-color: var(--text-secondary); border-color: var(--text-secondary); color: var(--text-inverse); } .btn-outline-primary { color: var(--primary-500); border-color: var(--primary-500); } .btn-outline-primary:hover { background-color: var(--primary-500); border-color: var(--primary-500); color: var(--text-inverse); } .payment-card { margin-bottom: 15px; } } /* ===== index.html - Style tag 1 ===== */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* הערה: .kpi-help-icon ו-.kpi-tooltip כבר מוגדרים למעלה בשורה 462 */ /* Print Page Styles */ .header { text-align: center; border-bottom: 3px solid var(--primary-500); padding-bottom: 20px; margin-bottom: 30px; } .section { margin-bottom: 30px; page-break-inside: avoid; } /* ✅ Mobile-First - ברירת מחדל למובייל */ .info-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* דסקטופ - 2 עמודות */ @media (min-width: 768px) { .info-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } .info-label { font-weight: bold; color: var(--text-secondary); } .info-value { color: var(--text-primary); } .total-flex { font-weight: bold; background-color: var(--bg-secondary); } .footer { margin-top: 50px; text-align: center; font-size: 14px; color: var(--text-secondary); } /* Contracts View Page - Styles */ .contracts-view-page .card { border-right: 4px solid var(--primary-500); } .contracts-view-page .card-header h4 { padding-bottom: 8px; border-bottom: 3px solid var(--primary-500); display: inline-block; } /* Utility Classes */ .progress-sm { height: 8px; } .text-pre-wrap { white-space: pre-wrap; } .card-header-gradient { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-bottom: 1px solid var(--border-primary); } .card-header-title { color: var(--text-primary); } .table-row-clickable { cursor: pointer; } .contract-card-border { border-right: 4px solid var(--primary-500); } /* Contract Navigation Styles */ .contract-navigation-header { background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); border-right: 4px solid var(--primary-500); border-top: 1px solid rgba(var(--primary-500-rgb), 0.2); border-bottom: 1px solid rgba(var(--primary-500-rgb), 0.2); border-left: 1px solid rgba(var(--primary-500-rgb), 0.2); } .contract-navigation-icon { background: var(--primary-500); } .contract-navigation-title { color: var(--text-primary); } .contract-navigation-subtitle { color: var(--text-secondary); } /* Project Tab Modern Styles */ .project-tab-modern { border: none; background: transparent; border-radius: 999px; padding: 0.6rem 1.3rem; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; text-decoration: none; } .project-tab-modern i { font-size: 1rem; transition: transform 0.3s ease; } .project-tab-modern:hover { background: rgba(var(--primary-500-rgb), 0.08); color: var(--primary-500); transform: translateY(-2px); text-decoration: none; } .project-tab-modern:hover i { transform: scale(1.1); } .project-tab-modern.active { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: var(--text-inverse); box-shadow: 0 8px 20px rgba(var(--primary-500-rgb), 0.4); font-weight: 600; } .project-tab-modern.active i { color: var(--text-inverse); } .project-tab-modern::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.3s ease; } .project-tab-modern.active::before { opacity: 1; } /* Items Table Column Widths */ .col-num { width: 50px; } .col-code { width: 120px; } .col-unit { width: 100px; } .col-quantity { width: 100px; } .col-price { width: 120px; } .col-amount { width: 120px; } .col-actions { width: 120px; } /* FIX: מניעת Collapsed Inline Text / Forced Column Layout Bug במובייל */ /* שימוש ב-specificity גבוה יותר במקום !important - לפי חוקי .cursorrules */ .textarea-resize { display: block; /* חובה: block בלבד, לא flex/grid */ width: 100%; max-width: 100%; resize: vertical; min-height: 38px; line-height: 1.6; /* חובה: line-height >= 1.4 למניעת פירוק טקסט */ white-space: normal; /* חובה: טקסט רגיל, לא vertical */ } /* PDF View Styles */ .contract-title-subtitle { margin-top: 10px; font-size: 16px; color: var(--text-primary); } .table-footer-row { background-color: var(--bg-secondary); font-weight: bold; } .section-spaced { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-primary); } /* ===== Work Items Form Styles ===== */ .work-item-form-row { background: var(--background); border-bottom: 2px solid var(--border-color); } .work-item-row-editing { background: var(--warning-light); } #work-item-description { text-align: right; direction: rtl; } } /* ============================================ עיצוב מודרני למודול חוזים - Theme מבוסס על העיצוב המודרני עם ניגודיות מושלמת ============================================ */ /* ======================================== 1. צבעי בסיס ומשתנים ======================================== */ :root { --contracts-primary: var(--primary-500); --contracts-primary-dark: var(--primary-700); --contracts-secondary: var(--text-secondary); --contracts-accent: var(--warning-500); --contracts-text-on-dark: var(--text-inverse); --contracts-text-on-light: var(--text-primary); --contracts-background-light: var(--bg-secondary); --contracts-background-dark: var(--text-primary); --contracts-border-light: var(--border-primary); --contracts-border-primary: var(--primary-500); --contracts-shadow-light: var(--rgba-black-05); --contracts-shadow-medium: var(--rgba-black-10); --contracts-header-gradient: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); --contracts-card-gradient: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%); } /* ======================================== 2. כותרת ראשית מעוצבת ======================================== */ .contracts-header-custom, .contracts-list-header { background: var(--contracts-header-gradient); color: var(--contracts-text-on-dark); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px var(--contracts-shadow-medium); border-right: 4px solid var(--contracts-border-primary); border-bottom: 3px solid var(--contracts-border-primary); } .contracts-header-custom h1, .contracts-header-custom h2, .contracts-list-header h1, .contracts-list-header h2 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; color: var(--contracts-text-on-dark); padding-bottom: 12px; border-bottom: 3px solid var(--contracts-border-primary); display: inline-block; } .contracts-header-custom p, .contracts-list-header p { font-size: 1rem; opacity: 0.9; color: var(--rgba-white-80); } /* ======================================== 3. סרגל פעולות עליון - שקוף ======================================== */ .contracts-actions-bar { background: transparent; border-radius: 0; padding: 16px 24px; box-shadow: none; border: none; } /* ======================================== 4. כרטיסים ובלוקים - פס צד כחול ======================================== */ .contracts-page .card, .contracts-page .form-card, .contracts-page .table-card, .contracts-page .search-card, .contracts-page .filter-card, .contracts-page .stats-card, /* ===== KPI Cards & Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* .contracts-page .kpi-card, */ /* .contracts-page .stat-card, */ /* .contracts-page .stats-grid .stat-card, */ /* .contracts-page .stat-card-primary, */ /* .contracts-page .stat-card-success, */ /* .contracts-page .stat-card-warning, */ /* .contracts-page .stat-card-info, */ /* .contracts-page .stat-card-danger, */ .contracts-page .contracts-search-panel, .contracts-page .search-filters-card, .contracts-page .contract-card, .contracts-page .contract-info-card, .contracts-page .payment-card, .contracts-page .document-card, .contracts-page .approval-card, .contracts-page .item-card { border-right: 4px solid var(--contracts-border-primary); border-radius: 0.75rem; box-shadow: 0 4px 12px var(--contracts-shadow-light); background: var(--contracts-card-gradient); } /* ======================================== 5. כותרות כרטיסים ======================================== */ .contracts-page .card-header, .contracts-page .gradient-header, .contracts-page .card-header-custom { background: var(--contracts-header-gradient); color: var(--contracts-text-on-dark); border-bottom: none; border-radius: 0.75rem 0.75rem 0 0; padding: 1rem 1.25rem; font-weight: 600; border-right: 4px solid var(--contracts-border-primary); } .contracts-page .card-header h1, .contracts-page .card-header h2, .contracts-page .card-header h3, .contracts-page .card-header h4, .contracts-page .card-header h5, .contracts-page .card-header h6 { color: var(--contracts-text-on-dark); padding-bottom: 8px; border-bottom: 3px solid var(--contracts-border-primary); display: inline-block; } /* ======================================== 6. Info boxes ======================================== */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ======================================== 7. התאמות ספציפיות לדפי view ======================================== */ .contracts-view-page .card { border-right: 4px solid var(--contracts-border-primary); } /* ======================================== 8. KPI cards ספציפיים ======================================== */ /* ===== KPI Cards & Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* ======================================== 10. כותרת contracts-header קיימת ======================================== */ .contracts-header { background: var(--contracts-header-gradient); color: var(--contracts-text-on-dark); border-right: 4px solid var(--contracts-border-primary); border-bottom: 3px solid var(--contracts-border-primary); } .contracts-header h1, .contracts-header .contracts-title { color: var(--contracts-text-on-dark); padding-bottom: 12px; border-bottom: 3px solid var(--contracts-border-primary); display: inline-block; } /* ============================================ Dashboard Advanced Module Styles ============================================ עיצוב ספציפי למודול Dashboard Advanced כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* ===== Progress ===== */ /* הוסר - progress מעוצב ב-components-enhanced.css גלובלית */ /* הערה: אם יש צורך בגובה ספציפי לטבלאות, יש להשתמש ב-class ספציפי */ .dashboard-advanced-progress-lg { height: 20px; } } /* ============================================ Dashboard Module Styles ============================================ עיצוב ספציפי למודול Dashboard ============================================ */ /* ===== Dashboard Page ===== */ .dashboard-page { width: 100%; max-width: 100%; overflow: visible; height: auto; min-height: auto; display: block; } .dashboard-page-full-width { width: 100%; max-width: 100%; } .dashboard-container-wide { max-width: 1600px; width: min(100%, 1600px); margin-inline: auto; overflow: visible; height: auto; min-height: auto; display: block; } .dashboard-main { overflow: visible; height: auto; min-height: auto; display: block; } /* ===== Dashboard Hero Section - עיצוב חדש ונקי ===== */ .dashboard-hero { background: var(--surface-50); border: 1px solid var(--secondary-200); color: var(--secondary-900); padding: var(--space-6); border-radius: var(--radius-lg); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); } .dashboard-hero-inner { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 992px) { .dashboard-hero-inner { flex-direction: row; justify-content: space-between; } } .dashboard-hero-main { flex: 1; } .dashboard-breadcrumb { color: rgba(255, 255, 255, 0.5); margin-bottom: var(--spacing-2); font-size: var(--text-sm); } .dashboard-hero-icon { margin-bottom: 0.5rem; } .dashboard-title { /* כותרת - משתמשת ב-h2 גלובלי */ /* רק עיצוב ספציפי לדשבורד */ margin-bottom: 0.25rem; } .dashboard-subtitle { /* כותרת משנה - משתמשת ב-subtitle/text-muted גלובלי */ /* רק עיצוב ספציפי לדשבורד */ margin-bottom: var(--spacing-2); } .dashboard-hero-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-3); color: rgba(255, 255, 255, 0.5); font-size: var(--text-sm); } .dashboard-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; } @media (min-width: 992px) { .dashboard-hero-actions { align-items: flex-end; } } .dashboard-action-btn { /* כפתור - משתמש ב-btn-secondary גלובלי */ /* רק עיצוב ספציפי לדשבורד */ } .dashboard-action-btn:hover { /* hover - משתמש ב-btn-secondary גלובלי */ } .dashboard-hero-summary { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.75); margin-top: var(--spacing-2); } /* ===== Dashboard Alerts ===== */ /* הוסר - alerts מעוצבים ב-alerts.css גלובלית */ /* ===== Dashboard Sections ===== */ .dashboard-section { margin-bottom: 2rem; } .dashboard-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .dashboard-section-title { /* כותרת סקציה - משתמשת ב-h3 גלובלי */ /* רק עיצוב ספציפי לדשבורד */ margin-bottom: 0; } .dashboard-section-hint { /* טקסט משני - משתמש ב-text-muted גלובלי */ /* רק עיצוב ספציפי לדשבורד */ } /* ===== Stats Grid ===== */ /* הערה: stats-grid מעוצב ב-components/cards.css גלובלית */ .stats-grid-primary { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); display: grid; visibility: visible; opacity: 1; height: auto; min-height: auto; overflow: visible; } .stats-grid-secondary { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); display: grid; visibility: visible; opacity: 1; height: auto; min-height: auto; overflow: visible; } .stats-grid { display: grid; visibility: visible; opacity: 1; height: auto; min-height: auto; overflow: visible; } .stat-card { display: flex; visibility: visible; opacity: 1; height: auto; min-height: auto; overflow: visible; } /* ===== Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ .stat-badge { position: absolute; top: var(--spacing-4); right: var(--spacing-4); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; background: rgba(255, 255, 255, 0.2); color: var(--text-inverse); } .stat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .stat-icon { font-size: 2rem; opacity: 0.9; } .stat-header-meta { text-align: right; } .stat-tag { display: block; font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.25rem; } .stat-trend-mini { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; margin-top: 0.25rem; } .stat-trend-up { color: rgba(255, 255, 255, 0.9); } .stat-trend-down { color: rgba(255, 255, 255, 0.7); } .stat-main { margin-bottom: 1rem; } /* הוסר - stat-value ו-stat-label מעוצבים ב-components/cards.css (מאוחד מ-unified-kpi.css ו-kpi-v2.css) */ .stat-progress-wrapper { margin-top: 0.5rem; } .stat-progress { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: var(--radius-sm); overflow: hidden; } .stat-progress-bar { height: 100%; background: var(--card-bg); border-radius: 4px; transition: width 0.3s ease; } .stat-subtitle { margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8; display: flex; align-items: center; gap: 0.5rem; } /* ===== Info Box Explanation ===== */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Dashboard Alerts Row ===== */ .dashboard-alerts-row { margin-bottom: 1rem; } /* ===== Progress Bar in Dashboard ===== */ /* הערה: progress מעוצב ב-components-enhanced.css גלובלית */ /* ספציפי לדשבורד - גודל מותאם */ .dashboard-project-progress { width: 120px; height: 8px; } /* ===== Dashboard Main ===== */ /* הערה: .dashboard-main כבר מוגדר למעלה בשורה 29 */ /* ===== Dashboard Column Layouts ===== */ .dashboard-chart-col { flex: 0 0 66.666667%; max-width: 66.666667%; } .dashboard-activity-col { flex: 0 0 33.333333%; max-width: 33.333333%; } .dashboard-projects-col, .dashboard-worklogs-col { flex: 0 0 50%; max-width: 50%; } @media (max-width: 991px) { .dashboard-chart-col, .dashboard-activity-col, .dashboard-projects-col, .dashboard-worklogs-col { flex: 0 0 100%; max-width: 100%; } } /* ===== Responsive ===== */ @media (max-width: 768px) { .dashboard-hero { padding: 1.5rem; } /* הוסר - dashboard-title, stats-grid, stat-value מעוצבים גלובלית */ } /* ===== KPI Help Icon & Tooltip ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* ===== Dashboard Quick Links - 4 בשורה ===== */ .dashboard-page .dashboard-quick-link { min-height: 140px; } /* וידוא 4 בשורה בגדלים שונים */ @media (min-width: 1200px) { .dashboard-page .row.g-3 > .col-xl-3 { flex: 0 0 25%; max-width: 25%; } } @media (min-width: 992px) and (max-width: 1199px) { .dashboard-page .row.g-3 > .col-lg-3 { flex: 0 0 25%; max-width: 25%; } } @media (min-width: 768px) and (max-width: 991px) { .dashboard-page .row.g-3 > .col-md-3 { flex: 0 0 25%; max-width: 25%; } } /* ===== Activity Cards - 3 בשורה ===== */ @media (min-width: 1200px) { .dashboard-page #recent-activity-container .row > .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 992px) and (max-width: 1199px) { .dashboard-page #recent-activity-container .row > .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 768px) and (max-width: 991px) { .dashboard-page #recent-activity-container .row > .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } } /* וידוא כללי - 3 בשורה בכל המסכים הבינוניים ומעלה */ @media (min-width: 768px) { .dashboard-page #recent-activity-container .row > [class*="col-md-4"], .dashboard-page #recent-activity-container .row > [class*="col-lg-4"], .dashboard-page #recent-activity-container .row > [class*="col-xl-4"] { flex: 0 0 33.333333%; max-width: 33.333333%; } } } /* ============================================ Documents Module Styles ============================================ עיצוב ספציפי למודול Documents כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* @layer modules - מבוטל כדי להעלות specificity */ /* ===== list.html - Style tag 1 ===== */ /* תיקון צבע תיבת חיפוש */ .fm-search { color: var(--text-primary); } .fm-search:focus { color: var(--text-primary); } .fm-search::placeholder { color: var(--text-secondary); } /* תיקון z-index ו-display למודלים */ .modal { z-index: 1050; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--rgba-black-50); justify-content: center; align-items: center; } .modal-content { z-index: 1051; } .modal[style*="flex"] { display: flex; } /* Context menu disabled - all right-click functionality removed */ /* Folder Quick Actions - Small Icons Inside Folder Card */ .folder-quick-actions { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; gap: 0.3rem; z-index: 10; opacity: 0; transition: opacity 0.2s ease; } .file-card:hover .folder-quick-actions { opacity: 1; } .folder-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--rgba-black-10); border-radius: 0.25rem; background: var(--rgba-white-90); color: var(--text-primary); cursor: pointer; transition: all 0.2s ease; font-size: 0.75rem; } .folder-action-btn:hover { background: var(--rgba-white-100); border-color: var(--rgba-black-20); transform: scale(1.1); } .folder-action-btn i { font-size: 0.75rem; line-height: 1; } /* הסתרת כפתורי פעולה בתיקיות */ .folder-action-btn[title="שינוי שם"], .folder-action-btn[title="נעילה"], .folder-action-btn[title="ביטול נעילה"] { display: none; } .folder-action-btn[title="שינוי שם"]:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-500); } .folder-action-btn[title*="נעל"]:hover, .folder-action-btn[title*="פתח נעילה"]:hover { background: var(--warning-50); border-color: var(--warning-500); color: var(--warning-500); } .folder-action-btn[title="פרטים"]:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-500); } /* Secondary Toolbar - Compact Actions */ .fm-toolbar-secondary { display: flex; align-items: center; padding: 0.5rem 1rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); gap: 0.5rem; } .toolbar-secondary-left { display: flex; align-items: center; gap: 0.5rem; } .toolbar-secondary-right { display: flex; align-items: center; margin-right: 0; margin-right: 1rem; } .toolbar-secondary-right .fm-breadcrumbs { display: flex; align-items: center; } /* Compact Toolbar Buttons - Unified Size */ .btn-toolbar-compact { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border: 1px solid var(--border-primary); border-radius: 0.375rem; background: var(--card-bg); color: var(--text-primary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; min-width: auto; height: auto; } .btn-toolbar-compact i { font-size: 0.9rem; } .btn-toolbar-compact .btn-label { font-size: 0.75rem; font-weight: 400; } .btn-toolbar-compact:hover:not(:disabled) { background: var(--bg-secondary); border-color: var(--text-secondary); transform: translateY(-1px); } .btn-toolbar-compact:disabled { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; } .btn-toolbar-compact.btn-rename:hover:not(:disabled) { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-500); } .btn-toolbar-compact.btn-lock:hover:not(:disabled) { background: var(--warning-50); border-color: var(--warning-500); color: var(--warning-500); } .btn-toolbar-compact.btn-delete-secondary:hover:not(:disabled) { background: var(--error-50); border-color: var(--error-500); color: var(--error-500); } /* Unify all toolbar buttons to same size as copy button */ .btn-toolbar { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; border: 1px solid var(--border-primary); border-radius: 0.375rem; background: var(--card-bg); color: var(--text-primary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; min-width: auto; height: auto; } .btn-toolbar i { font-size: 0.9rem; } /* File Checkbox - Visible on White Background */ .file-checkbox { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.25rem; height: 1.25rem; cursor: pointer; z-index: 20; border: 2px solid var(--text-secondary); border-radius: 0.25rem; background-color: var(--card-bg); appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; padding: 0; box-shadow: var(--shadow-card-sm); transition: all 0.2s ease; } /* עיצוב למודל המותאם - כמו במודול העובדים */ .custom-modal-overlay { backdrop-filter: blur(5px); } .custom-modal { transition: all 0.3s ease; } .custom-modal.fullscreen { position: fixed; top: 0; left: 0; width: 100%; /* ✅ תיקון לפי חוק זהב #1 - לא 100vw */ max-width: 100%; /* ✅ תיקון לפי חוק זהב #1 */ height: 100vh; margin: 0; border-radius: 0; z-index: 10000; } /* עיצוב משופר לכפתורי שינוי גודל */ .resize-handle { opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; border-radius: 2px; z-index: 10; } .resize-handle:hover { opacity: 1; background: var(--rgba-black-40); } .custom-modal:hover .resize-handle { opacity: 0.3; } /* מניעת בחירת טקסט בזמן גרירה */ .custom-modal.dragging { user-select: none; } .file-checkbox:hover { border-color: var(--primary-500); box-shadow: var(--shadow-primary-hover); transform: scale(1.1); } .file-checkbox:checked { background-color: var(--primary-500); border-color: var(--primary-500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .file-checkbox:focus { outline: 2px solid var(--primary-500); outline-offset: 2px; border-color: var(--primary-500); } /* Ensure checkbox is visible on file cards */ .file-card { position: relative; } .file-card .file-checkbox { opacity: 0.7; } .file-card:hover .file-checkbox, .file-card .file-checkbox:checked, .file-card .file-checkbox:focus { opacity: 1; } /* ===== search.html - Style tag 1 ===== */ .search-results { padding: 20px; } .search-params { margin-bottom: 20px; padding: 10px; background: var(--bg-secondary); border-radius: 4px; } .search-params p { margin: 0; padding: 5px 0; } .document-item { display: flex; align-items: start; padding: 15px; border: 1px solid var(--border-primary); margin-bottom: 10px; border-radius: 4px; } .document-icon { font-size: 24px; margin-left: 15px; color: var(--text-secondary); } .document-info { flex: 1; } .document-meta { margin-top: 10px; } .path { color: var(--text-secondary); font-size: 0.9em; margin-bottom: 5px; } .document-actions { display: flex; gap: 5px; } /* ===== Badge ===== */ /* הערה: badges מעוצבים ב-components-enhanced.css גלובלית */ .no-results { text-align: center; padding: 50px; color: var(--text-secondary); } /* ===== add.html - Style tag 1 ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* ===== versions.html - Style tag 1 ===== */ .versions-container { padding: 20px; } .document-info { margin: 20px 0; padding: 15px; background: var(--bg-secondary); border-radius: 4px; } .document-info p { margin: 5px 0; } .versions-list { margin-top: 20px; } .badge-success { background-color: var(--success-500); color: var(--text-inverse); padding: 5px 10px; border-radius: 4px; } /* Documents - Hidden elements */ #info-panel[style*="display: none"] { display: none; } #file-input[style*="display: none"], #zip-input[style*="display: none"] { display: none; } .upload-progress[style*="display: none"] { display: none; } #destination-folder-select { min-height: 300px; } #grid-view[style*="display: none"] { display: none; } #grid-view.show { display: block; } /* ===== list.html - Sidebar Tree Styles ===== */ /* עיצוב עצמאי חדש לעץ תיקיות */ .fm-sidebar-new { width: 260px; min-width: 260px; max-width: 260px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; box-shadow: var(--shadow-card-sm); } .fm-sidebar-header { padding: 1rem; border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; color: var(--text-primary); background: var(--bg-secondary); border-radius: 8px 8px 0 0; } .fm-sidebar-header i { font-size: 1.2rem; color: var(--primary-500); } .fm-tree-wrapper { flex: 1; padding: 0.5rem; overflow-y: auto; max-height: 400px; min-height: 200px; } .fm-tree-wrapper::-webkit-scrollbar { width: 6px; } .fm-tree-wrapper::-webkit-scrollbar-thumb { background: var(--text-secondary); border-radius: 3px; } .fm-tree-wrapper::-webkit-scrollbar-thumb:hover { background: var(--text-primary); } .fm-sidebar-stats { padding: 1rem; border-top: 1px solid var(--border-primary); background: var(--bg-secondary); border-radius: 0 0 8px 8px; } .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; font-size: 0.875rem; } .stat-label { color: var(--text-secondary); font-weight: 500; } .stat-value { color: var(--text-primary); font-weight: 600; } /* עץ תיקיות פשוט */ #tree-view-new { font-family: inherit; } .folder-tree-item { margin: 0; padding: 0; list-style: none; } .folder-item-content { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; cursor: pointer; border-radius: 6px; transition: background 0.15s; font-size: 0.9rem; color: var(--text-primary); } .folder-item-content:hover { background: rgba(0, 0, 0, 0.03); } .folder-item-content.active { background: transparent; color: var(--primary-700); } .folder-item-content.active:hover { background: transparent; } .folder-item-content.locked { background: transparent; border-right: 3px solid var(--warning-500); } .folder-item-content.locked .folder-name { color: var(--warning-800); font-weight: 600; } .folder-expand-icon { width: 16px; text-align: center; color: var(--text-secondary); font-size: 0.75rem; transition: transform 0.2s; } .folder-expand-icon.expanded { transform: rotate(-90deg); } .folder-icon { font-size: 1rem; color: var(--warning-500); } .folder-icon.locked { color: var(--error-500); } .folder-icon.trash { color: var(--success-500); } .folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-lock-icon { font-size: 0.9rem; color: var(--error-500); background: var(--error-50); padding: 0.2rem 0.3rem; border-radius: 4px; border: 1px solid var(--error-200); } .folder-children { margin: 0; padding: 0 0 0 1.25rem; list-style: none; display: none; } .folder-children.show { display: block; } /* Documents Search Bar */ .documents-search-bar { padding: 1rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); } .documents-search-box { display: flex; align-items: center; gap: 0.5rem; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 6px; padding: 0.5rem 1rem; max-width: 500px; } .documents-search-icon { color: var(--text-secondary); font-size: 1.2rem; } .documents-search-input { border: none; outline: none; background: transparent; width: 100%; font-size: 0.95rem; color: var(--text-primary); } /* Documents Form Validation */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* ============================================ Email Module Styles ============================================ עיצוב ספציפי למודול Email כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* ===== compose.html - Style tag 1 ===== */ .attachment-remove { color: var(--error-500); cursor: pointer; font-size: 16px; } .template-selector { margin-bottom: 20px; padding: 15px; background: var(--bg-secondary); border-radius: 8px; } .template-selector select { width: 100%; padding: 10px; border: 1px solid var(--border-primary); border-radius: 6px; font-size: 14px; } .compose-footer { padding: 20px 30px; background: var(--bg-secondary); border-top: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: center; } .compose-footer .btn-compose { padding: 12px 24px; font-size: 16px; font-weight: 600; } .btn-send { background: var(--success-500); color: var(--text-inverse); } .btn-send:hover { background: var(--success-600); } .btn-draft { background: var(--text-secondary); color: var(--text-inverse); } .btn-draft:hover { background: var(--text-secondary); } .btn-cancel { background: var(--error-500); color: var(--text-inverse); } .btn-cancel:hover { background: var(--error-700); } .from-info { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 20px; } .from-info i { color: var(--primary-500); } .from-email { font-weight: 500; color: var(--text-primary); } .character-count { text-align: right; font-size: 12px; color: var(--text-secondary); margin-top: 5px; } /* ===== setup.html - Style tag 1 ===== */ /* עיצוב מותאם לממשק הגדרת דואר מודרני */ .setup-container { max-width: 600px; margin: 50px auto; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; direction: rtl; text-align: right; display: block; } .setup-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); padding: 35px; text-align: right; } .setup-header h2 { margin: 0 0 15px 0; font-size: 30px; font-weight: 700; text-align: right; } .setup-header p { margin: 0; opacity: 0.9; text-align: right; font-size: 16px; } .setup-content { padding: 45px; text-align: right; } .provider-options, .email-rtl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 35px; direction: rtl; width: 100%; } .provider-option { border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 25px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: var(--card-bg); box-shadow: var(--shadow-md); } .provider-option:hover { border-color: var(--primary-color); background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .provider-option.selected { border-color: var(--primary-color); background: rgba(108, 92, 231, 0.1); box-shadow: var(--shadow-lg); } .provider-icon { font-size: 36px; margin-bottom: 15px; color: var(--primary-color); } .provider-name { font-weight: 700; margin-bottom: 8px; color: var(--text-primary); font-size: 16px; } .provider-desc { font-size: 14px; color: var(--text-secondary); } .form-group { margin-bottom: 30px; text-align: right; } .form-group label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--text-primary); text-align: right; font-size: 15px; } .form-control { width: 100%; padding: 15px 18px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); font-size: 16px; transition: all 0.3s ease; text-align: right; background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1); background: rgba(255, 255, 255, 0.1); } .custom-settings { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 25px; margin-top: 25px; display: none; direction: rtl; text-align: right; } .custom-settings.show { display: block; } .btn-setup { width: 100%; padding: 18px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); border: none; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-sm); } .btn-setup:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .btn-back { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-color); text-decoration: none; font-weight: 600; margin-bottom: 25px; direction: rtl; transition: all 0.3s ease; } .btn-back:hover { color: var(--primary-dark); transform: translateX(-5px); } .step-indicator { display: flex; justify-content: center; margin-bottom: 35px; flex-direction: flex flex-wrap -mx-4-reverse; } .step { width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 12px; transition: all 0.3s ease; } .step.active { background: var(--primary-color); color: var(--text-inverse); box-shadow: var(--button-shadow); } .step.completed { background: var(--success-color); color: var(--text-inverse); box-shadow: var(--button-shadow); } #setupForm { width: 100%; max-width: 500px; margin: 0 auto; direction: rtl; } @media (max-width: 600px) { .provider-options, .email-rtl-grid { grid-template-columns: 1fr; } } /* ===== create_template.html - Style tag 1 ===== */ /* עיצוב מותאם לממשק יצירת תבנית דואר מודרני */ .create-template-container { max-width: 800px; margin: 30px auto; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .create-template-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); padding: 30px; display: flex; justify-content: space-between; align-items: center; } .create-template-header h2 { margin: 0; font-size: 26px; font-weight: 700; } .create-template-content { padding: 35px; } .form-group { margin-bottom: 30px; } .form-group label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--text-primary); font-size: 15px; } .form-control { width: 100%; padding: 15px 18px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); font-size: 16px; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1); background: rgba(255, 255, 255, 0.1); } .editor-container { border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); overflow: hidden; background: rgba(255, 255, 255, 0.05); } .ql-editor { min-height: 300px; font-size: 16px; line-height: 1.6; color: var(--text-primary); } .template-actions { display: flex; gap: 15px; margin-top: 35px; } .btn-template { padding: 15px 30px; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 16px; font-weight: 700; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--shadow-sm); } .btn-template:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .back-button { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-color); text-decoration: none; font-weight: 600; margin-bottom: 25px; padding: 12px 0; transition: all 0.3s ease; } .back-button:hover { color: var(--primary-dark); transform: translateX(-5px); } .template-info { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 25px; margin-bottom: 30px; box-shadow: var(--shadow-md); } .template-info h4 { margin: 0 0 15px 0; color: var(--text-primary); display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; } .template-info p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; } .character-count { text-align: right; font-size: 13px; color: var(--text-secondary); margin-top: 8px; font-weight: 500; } /* ===== templates.html - Style tag 1 ===== */ /* עיצוב מותאם לממשק תבניות דואר מודרני */ .templates-container { max-width: 900px; margin: 30px auto; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .templates-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); padding: 30px; display: flex; justify-content: space-between; align-items: center; } .templates-header h2 { margin: 0; font-size: 26px; font-weight: 700; } .templates-content { padding: 35px; } .template-list { margin-bottom: 35px; } .template-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 25px; margin-bottom: 20px; transition: all 0.3s ease; box-shadow: var(--shadow-md); } .template-item:hover { border-color: var(--primary-color); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .template-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .template-info h4 { margin: 0 0 8px 0; color: var(--text-primary); display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; } .template-subject { color: var(--text-secondary); font-size: 15px; font-style: italic; font-weight: 500; } .template-badge { padding: 6px 12px; border-radius: 15px; font-size: 13px; font-weight: 600; background: rgba(255, 193, 7, 0.1); color: var(--warning-color); } .template-preview { background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; max-height: 120px; overflow: hidden; position: relative; box-shadow: var(--shadow-sm); } .template-preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 25px; background: linear-gradient(transparent, var(--card-bg)); } .template-preview-text { color: var(--text-secondary); font-size: 15px; line-height: 1.5; } .template-actions { display: flex; gap: 12px; } .btn-template { padding: 12px 20px; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); } .btn-template:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .add-template-section { background: rgba(255, 255, 255, 0.05); border: 2px dashed rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 35px; text-align: center; margin-top: 35px; box-shadow: var(--shadow-md); } .add-template-section h3 { margin: 0 0 20px 0; color: var(--text-primary); font-weight: 700; font-size: 20px; } .add-template-section p { color: var(--text-secondary); margin-bottom: 25px; font-size: 16px; } .btn-add-template { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); border: none; border-radius: var(--radius-md); padding: 15px 30px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--button-shadow); } .btn-add-template:hover { transform: translateY(-3px); box-shadow: var(--button-shadow-hover); color: var(--text-inverse); text-decoration: none; } .back-button { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-500); text-decoration: none; font-weight: 500; margin-bottom: 20px; padding: 10px 0; } .back-button:hover { color: var(--primary-500); } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state i { font-size: 48px; margin-bottom: 20px; color: var(--text-secondary); } .template-icon { color: var(--primary-500); font-size: 18px; } /* ===== settings.html - Style tag 1 ===== */ /* עיצוב מותאם לממשק הגדרות דואר מודרני */ .settings-container { max-width: 800px; margin: 30px auto; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .settings-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); padding: 30px; display: flex; justify-content: space-between; align-items: center; } .settings-header h2 { margin: 0; font-size: 26px; font-weight: 700; } .settings-content { padding: 35px; } .account-list { margin-bottom: 35px; } .account-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 25px; margin-bottom: 20px; transition: all 0.3s ease; box-shadow: var(--shadow-md); } .account-item:hover { border-color: var(--primary-color); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .account-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .account-info { display: flex; align-items: center; gap: 20px; } .account-icon { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-inverse); box-shadow: var(--shadow-md); } .account-icon.gmail { background: var(--error-500); } .account-icon.outlook { background: var(--primary-600); } .account-icon.yahoo { background: var(--secondary-700); } .account-icon.custom { background: var(--secondary-color); } .account-details h4 { margin: 0 0 8px 0; color: var(--text-primary); font-weight: 700; font-size: 18px; } .account-email { color: var(--text-secondary); font-size: 15px; font-weight: 500; } .account-status { display: flex; align-items: center; gap: 12px; } .status-badge { padding: 6px 12px; border-radius: 15px; font-size: 13px; font-weight: 600; } .status-active { background: rgba(40, 167, 69, 0.1); color: var(--success-color); } .status-inactive { background: rgba(220, 53, 69, 0.1); color: var(--danger-color); } .default-badge { background: rgba(255, 193, 7, 0.1); color: var(--warning-color); padding: 6px 12px; border-radius: 15px; font-size: 13px; font-weight: 600; } .account-actions { display: flex; gap: 12px; } .btn-account { padding: 12px 20px; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); } .btn-account:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } .stat-item { text-align: center; padding: 15px; background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .stat-number { font-size: 20px; font-weight: bold; color: var(--primary-color); margin-bottom: 8px; } .stat-label { font-size: 12px; color: var(--text-secondary); } .add-account-section { background: var(--bg-secondary); border: 2px dashed var(--border-primary); border-radius: 8px; padding: 30px; text-align: center; margin-top: 30px; } .add-account-section h3 { margin: 0 0 15px 0; color: var(--text-primary); } .add-account-section p { color: var(--text-secondary); margin-bottom: 20px; } .btn-add-account { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border: none; border-radius: 8px; padding: 12px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-add-account:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); color: var(--text-inverse); text-decoration: none; } .back-button { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-500); text-decoration: none; font-weight: 500; margin-bottom: 20px; padding: 10px 0; } .back-button:hover { color: var(--primary-500); } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state i { font-size: 48px; margin-bottom: 20px; color: var(--text-secondary); } /* ===== settings.html - Style tag 2 ===== */ /* הערה: .kpi-help-icon ו-.kpi-tooltip הוסרו - כבר מוגדרים בשורה 12 */ /* ===== Inline styles - תיקון: העברת inline styles ל-CSS ===== */ /* תיקון: display: flex; gap: 10px; על compose-footer actions (מ-compose.html) */ .compose-footer > div { display: flex; gap: 10px; } /* ===== index.html - Style tag 1 ===== */ .stat-item { text-align: center; padding: 20px; background: var(--card-bg); border-radius: 12px; box-shadow: var(--card-shadow); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } .stat-number { font-size: 28px; font-weight: bold; color: var(--primary-color); margin-bottom: 8px; } .stat-label { font-size: 14px; color: var(--text-secondary); font-weight: 500; } .compose-btn { position: fixed; bottom: 30px; right: 30px; width: 65px; height: 65px; border-radius: 50%; background: var(--primary-color); color: var(--text-inverse); border: none; font-size: 24px; cursor: pointer; box-shadow: var(--floating-shadow); transition: all 0.3s ease; z-index: 1000; } .compose-btn:hover { background: var(--primary-dark); transform: scale(1.1) rotate(90deg); box-shadow: var(--floating-shadow-hover); } .email-importance { margin-right: 10px; color: var(--warning-color); font-size: 16px; } .email-star { margin-right: 10px; color: var(--star-color); cursor: pointer; font-size: 16px; transition: all 0.3s ease; } .email-star:hover { transform: scale(1.2); } .email-star.starred { color: var(--star-active); } .empty-state { text-align: center; padding: 80px 20px; color: var(--text-secondary); } .empty-state i { font-size: 64px; margin-bottom: 25px; color: var(--text-muted); opacity: 0.5; } .sidebar-flex flex-wrap -mx-4 { display: flex; flex-direction: flex flex-wrap -mx-4; gap: 16px; align-items: flex-start; } .email-stats { min-width: 140px; max-width: 180px; } .folder-list { display: flex; flex-direction: column; gap: 8px; } .folder-item { display: flex; flex-direction: flex flex-wrap -mx-4; align-items: center; gap: 12px; padding: 12px 20px; border-radius: var(--radius-md); background: none; border: none; transition: background 0.2s; } .folder-item.active, .folder-item:hover { background: var(--primary-bg, var(--primary-50)); } .folder-count { min-width: 32px; text-align: center; background: var(--accent-color); color: var(--card-bg); border-radius: 12px; font-size: 14px; font-weight: 700; margin-left: 4px; padding: 2px 8px; } .folder-icon { font-size: 18px; margin-left: 6px; color: var(--primary-color); } .folder-name { flex: 1; font-weight: 500; color: var(--text-primary); } /* ===== edit.html - Style tag 1 ===== */ /* עיצוב מותאם לממשק עריכת דואר מודרני */ .edit-container { max-width: 800px; margin: 30px auto; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; direction: rtl; text-align: right; } .edit-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: var(--text-inverse); padding: 30px; text-align: right; } .edit-header h2 { margin: 0; font-size: 26px; font-weight: 700; text-align: right; } .edit-content { padding: 35px; text-align: right; } .back-button { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-color); text-decoration: none; font-weight: 600; margin-bottom: 25px; direction: rtl; transition: all 0.3s ease; } .back-button:hover { color: var(--primary-dark); transform: translateX(-5px); } .form-group { margin-bottom: 30px; text-align: right; } .form-group label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--text-primary); text-align: right; font-size: 15px; } .form-control { width: 100%; padding: 15px 18px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); font-size: 16px; transition: all 0.3s ease; text-align: right; background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1); background: rgba(255, 255, 255, 0.1); } .recipients-flex flex-wrap -mx-4 { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; } .recipients-flex flex-wrap -mx-4 label { min-width: 80px; margin: 0; font-weight: 600; color: var(--text-primary); } .recipients-flex flex-wrap -mx-4 .form-control { flex: 1; } .priority-selector { display: flex; gap: 15px; margin-top: 15px; } .priority-option { flex: 1; padding: 15px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); text-align: center; cursor: pointer; transition: all 0.3s ease; font-size: 14px; font-weight: 500; background: var(--card-bg); } .priority-option:hover { border-color: var(--primary-color); background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .priority-option.selected { border-color: var(--primary-color); background: rgba(108, 92, 231, 0.1); color: var(--primary-color); } .priority-option.low.selected { border-color: var(--success-color); background: rgba(40, 167, 69, 0.1); color: var(--success-color); } .priority-option.high.selected { border-color: var(--warning-color); background: rgba(255, 193, 7, 0.1); color: var(--warning-color); } .priority-option.urgent.selected { border-color: var(--danger-color); background: rgba(220, 53, 69, 0.1); color: var(--danger-color); } .editor-container { border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); overflow: hidden; margin-top: 15px; background: rgba(255, 255, 255, 0.05); } .ql-editor { min-height: 200px; direction: rtl; text-align: right; color: var(--text-primary); } .attachments-section { margin-top: 25px; padding: 25px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .attachments-title { font-weight: 700; margin-bottom: 20px; color: var(--text-primary); font-size: 18px; } .attachments-list { display: flex; flex-direction: column; gap: 15px; } .attachment-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--card-bg); border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .attachment-item:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .attachment-icon { color: var(--primary-color); font-size: 20px; } .attachment-info { flex: 1; } .attachment-name { font-weight: 500; color: var(--text-primary); } .attachment-size { font-size: 12px; color: var(--text-secondary); } .attachment-remove { color: var(--error-500); cursor: pointer; padding: 5px; } .attachment-remove:hover { background: var(--card-bg)5f5; border-radius: 4px; } .edit-actions { display: flex; gap: 15px; margin-top: 30px; justify-content: flex-end; } .btn-edit { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-primary { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .btn-secondary { background: var(--text-secondary); color: var(--text-inverse); } .btn-secondary:hover { background: var(--text-secondary); } .btn-success { background: var(--success-500); color: var(--text-inverse); } .btn-success:hover { background: var(--success-600); } .character-count { text-align: right; font-size: 12px; color: var(--text-secondary); margin-top: 5px; } /* ===== view.html - Style tag 1 ===== */ .attachment-item:hover { border-color: var(--primary-color); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .attachment-icon { font-size: 24px; color: var(--primary-color); width: 35px; text-align: center; } .attachment-info { flex: 1; } .attachment-name { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .attachment-size { font-size: 12px; color: var(--text-secondary); } .attachment-download { padding: 6px 12px; background: var(--primary-500); color: var(--text-inverse); border: none; border-radius: 4px; cursor: pointer; font-size: 12px; transition: all 0.3s; } .attachment-download:hover { background: var(--primary-600); } .priority-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 10px; } .priority-low { background: var(--success-50); color: var(--success-900); } .priority-normal { background: var(--info-50); color: var(--info-700); } .priority-high { background: var(--card-bg)3cd; color: var(--warning-900); } .priority-urgent { background: var(--error-50); color: var(--error-900); } .email-date { font-size: 14px; color: var(--text-secondary); margin-top: 5px; } .no-attachments { text-align: center; color: var(--text-secondary); font-style: italic; padding: 20px; } .back-button { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-500); text-decoration: none; font-weight: 500; margin-bottom: 20px; padding: 10px 0; } .back-button:hover { color: var(--primary-500); } .email-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 10px; } .status-draft { background: var(--bg-secondary); color: var(--text-primary); } .status-sent { background: var(--success-50); color: var(--success-900); } .status-received { background: var(--info-50); color: var(--info-700); } /* Email - Hidden elements */ form[style*="display: none"] { display: none; } #attachments[style*="display: none"] { display: none; } /* Email - Layout */ .email-layout-flex { flex: 1; } .email-layout-padding { padding: 20px; } .email-header-title { margin: 0; color: var(--text-primary); } .email-header-small { color: var(--text-secondary); } .email-icon-color { color: var(--text-secondary); } /* Email - KPI labels */ .stat-label { position: relative; } /* Email - Provider icons */ .provider-icon[style*="color: var(--error-500)"] { color: var(--error-500); } .provider-icon[style*="color: var(--primary-600)"] { color: var(--primary-600); } .provider-icon[style*="color: var(--secondary-600)"] { color: var(--secondary-600); } .provider-icon[style*="color: var(--text-secondary)"] { color: var(--text-secondary); } /* Email - Setup page */ .setup-custom-title { margin-top: 0; color: var(--text-primary); } .setup-custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } /* Responsive */ @media (max-width: 768px) { .setup-custom-grid { grid-template-columns: 1fr; } } } /* ============================================ Employees Module Styles ============================================ עיצוב ספציפי למודול Employees כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* ===== Inline styles - תיקון: העברת inline styles סטטיים ל-CSS ===== */ /* תיקון: עיצוב תמונת פרופיל במודל (מ-view_modal.html) */ .employee-modal-content img[alt="תמונת פרופיל"] { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-500); box-shadow: var(--shadow-soft); } /* תיקון: עיצוב תמונת ברירת מחדל במודל (מ-view_modal.html) */ .employee-modal-default-avatar { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--text-inverse); font-weight: bold; font-size: var(--text-3xl); border: 4px solid var(--primary-500); box-shadow: var(--shadow-soft); } /* תיקון: עיצוב כותרת במודל (מ-view_modal.html) */ .employee-modal-content h4.mt-3.mb-1 { color: var(--text-primary); font-weight: 700; } /* תיקון: עיצוב badge במודל (מ-view_modal.html) */ .employee-modal-badge { background: linear-gradient(135deg, var(--success-600), var(--success-500)); color: var(--text-inverse); border-radius: var(--radius-full); padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-sm); } /* תיקון: עיצוב כותרת פרטי רישוי (מ-view_modal.html) */ .employee-modal-section-title { color: var(--text-primary); font-weight: 600; } .employee-modal-icon { color: var(--error-500); } /* תיקון: עיצוב תמונת פרופיל בעריכה (מ-edit.html) */ .employee-profile-thumbnail { max-height: 100px; } /* תיקון: תצוגת רשימה מוסתרת (מ-index.html, list.html) */ #list-view:not(.show) { display: none; } #list-view.show { display: block; } /* תיקון: תצוגת רשימה במודולים אחרים */ .contractors-table-wrapper, .employees-table-wrapper, .flex.flex-wrap.-mx-4-list { display: none; } .contractors-table-wrapper.show, .employees-table-wrapper.show, .flex.flex-wrap.-mx-4-list.show { display: block; } /* תיקון: הודעות שגיאה מוסתרות (מ-list.html) */ /* הערה: אין ערכי צבע ישירים כאן - רק display properties */ #addFormErrors:not(.show), #editFormErrors:not(.show) { display: none; } #addFormErrors.show, #editFormErrors.show { display: block; } /* ===== view.html - Style tag 1 ===== */ .employee-header { background: linear-gradient(135deg, var(--secondary-900), var(--primary-800)); color: var(--text-inverse); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); margin-bottom: var(--space-5); box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .employee-header h2 { color: var(--text-inverse); font-size: var(--text-xl); font-weight: var(--font-semibold); margin: 0 0 var(--space-1); } .employee-header .opacity-75 { opacity: 0.75; color: var(--text-inverse); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .employee-avatar-large, .default-avatar-large, .employee-icon-large, .default-icon-large נמצאים ב-components/cards.css */ /* ===== Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .badge-expired, .badge-expiring, .badge-valid נמצאים ב-components-enhanced.css */ .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--secondary-600)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* הסברים */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ .info-box-explanation i { margin-left: 0.5rem; font-size: 1.1rem; } .section-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-secondary); border-right: 3px solid var(--text-tertiary); } /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /********************** * אזור מסמכים – עיצוב פרימיום קומפקטי **********************/ /* מיכל הבלוק - רוחב 60% ומרוכז - הוסר כי הבלוק עבר לטאבים */ /* .row.mt-4 > .col-12 { max-width: 60%; margin: 0 auto; } */ /* ===== Documents Card - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של documents-card, documents-card-header, documents-wrapper, documents-icon-wrapper, folder-section, folder-name, docs-table נמצאים ב-components/cards.css */ /* התראות מסמכים שפג/עומד לפוג */ .documents-status-alert { border-radius: 0.75rem; font-size: 0.8rem; line-height: 1.4; } .documents-status-alert ul li { margin-bottom: 0.1rem; } /* רשימת תיקיות */ .documents-folders-list { margin-top: 0.3rem; } /* בלוק תיקייה יחיד */ .folder-section { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-primary); padding: 0.35rem 0.7rem; transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .folder-section + .folder-section { margin-top: 0.5rem; } .folder-section:hover { box-shadow: var(--shadow-soft); border-color: var(--border-secondary); transform: translateY(-1px); } /* כותרת תיקייה */ .folder-header { cursor: pointer; padding: 0.25rem 0; } .folder-title-main { direction: rtl; font-size: 0.86rem; } /* אייקון תיקייה עגול קטן */ .folder-icon-wrapper { width: 28px; height: 28px; background: var(--bg-muted); font-size: 0.9rem; } /* שם תיקייה + באדג' כמות */ .folder-name { color: var(--text-primary); } .folder-count-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 999px; } /* אזור כפתורי תיקייה */ /* .btn-xs - הועבר ל-components/buttons.css */ /* כפתור פתיחה/סגירה */ .folder-toggle { border: none; background: var(--bg-muted); width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background-color 0.15s ease, transform 0.12s ease; } .folder-toggle i { transition: transform 0.18s ease; } /* מצב פתוח – הופך את ה"+" ל"×" (סיבוב) */ .folder-toggle:not(.collapsed) i { transform: rotate(45deg); } .folder-toggle:hover { background: var(--border-primary); } /* תוכן תיקייה (טבלה / הודעת תיקייה ריקה) */ .folder-content { margin-top: 0.25rem; } /* collapsed – מנוהל ע"י JS (toggleFolder) */ .folder-content.collapsed { display: none; } /* טבלת מסמכים */ .docs-table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; } .docs-table thead th { border-bottom: 1px solid var(--border-primary); background: var(--bg-secondary); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.45rem; color: var(--text-primary); white-space: nowrap; } .docs-table tbody td { font-size: 0.8rem; padding: 0.38rem 0.45rem; vertical-align: middle; border-bottom: 1px solid var(--border-secondary); } /* אייקון קובץ */ .docs-table td.text-center i { font-size: 1rem; } /* שורת מסמך – hover */ .docs-table tbody tr:hover { background: var(--bg-secondary); } /* קבוצת כפתורים */ .docs-table .btn-group .btn { padding: 0.15rem 0.35rem; font-size: 0.78rem; border-radius: 999px; } .docs-table .btn-group .btn i { font-size: 0.85rem; } /* תיקייה ריקה */ .empty-folder { background: var(--bg-secondary); border-radius: 10px; border: 1px dashed var(--border-secondary); } .empty-folder i { font-size: 1.4rem; } /* מצב "אין מסמכים לעובד זה" */ .documents-wrapper > .text-center i.fa-file-alt { opacity: 0.7; } .documents-wrapper > .text-center p { font-size: 0.9rem; } /* כפתור העלאת מסמך ראשי */ .documents-card .btn-primary.btn-sm, .documents-card .btn-outline-primary.btn-sm { border-radius: 999px; } /* יוטיליטי קטן לכפתור XS (בשימוש בתיקיות) */ /* .btn-xs - הועבר ל-components/buttons.css */ /********************** * עיצוב טאבים - משתמש בעיצוב הגלובלי מ-forms.css **********************/ /* כל העיצובים של .nav-tabs-custom נמצאים ב-components/forms.css */ .tab-content { min-height: 400px; } .tab-pane { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /********************** * רספונסיביות – מובייל **********************/ @media (max-width: 767.98px) { .row.mt-4 > .col-12 { max-width: 100%; margin: 0; } .documents-card-header { padding: 0.75rem 0.9rem; } .tab-explanation { margin-top: 0.15rem; font-size: 0.78rem; } .documents-wrapper { padding: 0.75rem 0.8rem 0.9rem; } .folder-section { padding: 0.3rem 0.55rem; } .docs-table thead th, .docs-table tbody td { font-size: 0.78rem; padding: 0.32rem 0.35rem; } .documents-status-alert { font-size: 0.78rem; } } /* ===== PDF Toolbar, Custom Modal, Notification Toast - הועברו ל-components/modals.css ===== */ /* כל העיצובים של .pdf-toolbar, .custom-modal-overlay, .custom-modal, .resize-handle, .notification-toast נמצאים ב-components/modals.css */ /* ===== index.html - Style tag 1 ===== */ :root { --emp-primary: var(--primary-500); --emp-primary-soft: var(--primary-50); --emp-secondary: var(--info-500); --emp-bg: var(--bg-secondary); --emp-border: var(--border-primary); --emp-radius-lg: var(--radius-xl); --emp-radius-md: var(--radius-lg); --emp-radius-sm: var(--radius-md); --emp-shadow-soft: var(--shadow-md); --emp-shadow-subtle: var(--shadow-soft); --emp-text-muted: var(--text-secondary); --emp-text-dark: var(--text-primary); } body { background-color: var(--emp-bg); } /* כותרת עמוד + בר עליון */ .employees-page-header { background: var(--card-bg); border-radius: var(--emp-radius-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--emp-shadow-subtle); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .employees-page-title { display: flex; align-items: center; gap: 10px; } .employees-page-title h1 { font-size: 1.6rem; margin: 0; color: var(--emp-text-dark); font-weight: 700; } .employees-page-title-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--emp-primary-soft); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--emp-primary); } .employees-page-subtitle { margin: 0; color: var(--emp-text-muted); font-size: 0.9rem; } .employees-header-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .btn-main-add { border-radius: 999px; padding-inline: 18px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } /* .btn-outline-soft - הועבר ל-components/buttons.css */ /* תגיות ניווט קטנות / breadcrumbs */ .employees-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 0.8rem; color: var(--text-tertiary); } .employees-breadcrumbs span, .employees-breadcrumbs a { display: inline-flex; align-items: center; gap: 4px; } .employees-breadcrumbs a { color: var(--text-secondary); text-decoration: none; } .employees-breadcrumbs a:hover { color: var(--emp-primary); } /* תיבת תכונות מתקדמות */ .advanced-features { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border-radius: var(--emp-radius-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--emp-shadow-soft); position: relative; overflow: hidden; } .advanced-features::after { content: ""; position: absolute; inset-inline-start: -40px; top: -40px; width: 140px; height: 140px; background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 60%); opacity: 0.7; } .advanced-features-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; position: relative; z-index: 1; } .advanced-features h5 { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .advanced-features p { margin: 0; font-size: 0.85rem; opacity: 0.9; } .advanced-features-tags { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; padding: 6px 10px; border-radius: 999px; background: rgba(17, 24, 39, 0.28); } .advanced-features-links { margin-top: 10px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; } .feature-link { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.18); color: var(--text-inverse); padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: 0.85rem; transition: all 0.2s ease; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(4px); } .feature-link:hover { background: rgba(255,255,255,0.28); color: var(--text-inverse); transform: translateY(-1px); text-decoration: none; } /* כרטיסי סטטיסטיקה */ /* KPIs - כולם בשורה אחת (אם נמצאים בשורה נפרדת) */ .employees-stats-row { display: flex; flex-wrap: wrap; /* ✅ גמיש - מתקפל במובייל */ gap: 1rem; margin-bottom: 18px; } .employees-stats-row > div { flex: 1 1 0; min-width: 0; } @media (max-width: 991.98px) { .employees-stats-row { flex-wrap: wrap; } .employees-stats-row > div { flex: 0 0 calc(50% - 0.5rem); } } @media (max-width: 575.98px) { .employees-stats-row > div { flex: 0 0 100%; } } .stats-card { background: var(--card-bg); border-radius: var(--emp-radius-md); padding: 14px 14px 12px; box-shadow: var(--emp-shadow-subtle); border-inline-start: 3px solid var(--emp-primary-soft); display: flex; flex-direction: column; gap: 4px; height: 100%; } .stats-card-header { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; position: relative; } .stats-card-icon { width: 24px; height: 24px; border-radius: 999px; background: var(--emp-primary-soft); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--emp-primary); } .stats-number { font-size: 1.4rem; font-weight: 700; color: var(--emp-text-dark); line-height: 1.1; } .stats-caption { font-size: 0.75rem; color: var(--emp-text-muted); } /* חיפוש וסינון – בר מודרני */ .search-filters { background: var(--surface-50); color: var(--secondary-900); /* רקע לבן לקריאות מקסימלית */ border-radius: 16px; /* radius משופר */ padding: 24px; /* padding משופר */ margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.08); /* צל דו-שכבתי מקצועי */ border: 1px solid var(--border-subtle); transition: box-shadow 0.3s ease, transform 0.2s ease; } .search-filters:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12); /* צל משופר ב-hover */ } .search-filters-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .search-filters-header-title { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); /* טקסט כהה על רקע בהיר */ } .search-filters-header-title i { color: var(--emp-primary); font-size: 1rem; } .search-filters-meta { font-size: 0.8rem; color: var(--text-secondary); } .search-filters .form-label { font-size: 0.78rem; color: var(--text-primary); /* טקסט כהה */ font-weight: 500; margin-bottom: 6px; } .search-filters .form-control, .search-filters .form-select { font-size: 0.875rem; /* 14px */ border-radius: 10px; /* radius משופר */ border: 1.5px solid #d1d5db; /* גבול עדין */ background: var(--surface-50); color: var(--secondary-900); /* רקע לבן */ color: var(--text-main); /* טקסט כהה */ padding-block: 10px; /* padding משופר */ padding-inline: 14px; /* padding משופר */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .search-filters .form-control:hover, .search-filters .form-select:hover { border-color: var(--text-muted); } .search-filters .form-control:focus, .search-filters .form-select:focus { border-color: var(--emp-primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05); outline: none; transform: translateY(-1px); /* אפקט הרמה עדין */ } .btn-filter-submit { border-radius: var(--emp-radius-sm); font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .btn-filter-reset { border-radius: var(--emp-radius-sm); font-size: 0.8rem; color: var(--emp-text-muted); border: none; background: transparent; text-decoration: underline; padding: 0; } .btn-filter-reset:hover { color: var(--error-500); } .quick-actions { position: sticky; top: 84px; } .quick-actions .card { border-radius: var(--emp-radius-md); box-shadow: var(--emp-shadow-subtle); border: 1px solid var(--emp-border); } .quick-actions .card-header { padding: 10px 12px; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); border-radius: var(--emp-radius-md) var(--emp-radius-md) 0 0; } .quick-actions .card-body { padding: 12px 12px 10px; } .action-btn { width: 100%; margin-bottom: 8px; border-radius: var(--emp-radius-sm); font-weight: 500; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .action-btn:last-child { margin-bottom: 0; } .quick-actions-stats h4 { font-size: 1.2rem; margin-bottom: 2px; } .quick-actions-stats p { margin: 0; font-size: 0.8rem; color: var(--emp-text-muted); } .quick-actions-stats > div { padding-block: 4px; border-bottom: 1px dashed var(--border-primary); } .quick-actions-stats > div:last-child { border-bottom: none; } /* כרטיסי עובדים – נשארים כמו שהם, רק מוסיף צל ורקע עדין סביב הגריד */ .employees-cards-wrapper { background: transparent; } /* ===== Employee Card - Flavor קטן בלבד ===== */ /* העיצוב הבסיסי נמצא ב-components/cards.css */ /* כאן רק שינויים ספציפיים למודול */ .employee-card { /* Flavor קטן - רק שינויים ספציפיים למודול */ border-inline-start: 3px solid var(--primary-500); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .employee-avatar, .default-avatar נמצאים ב-components/cards.css */ .employee-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; } .meta-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 0.8rem; } .meta-item i { color: var(--emp-primary); font-size: 0.8rem; } /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .card-footer.bg-light { background: var(--bg-secondary); border-top: 1px solid var(--border-primary); padding: 8px 10px; } .btn-group .btn { font-size: 0.8rem; padding-block: 4px; } /* מצב אין נתונים */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state i { font-size: 3.2rem; color: var(--border-secondary); margin-bottom: 18px; } .empty-state h4 { font-size: 1.1rem; margin-bottom: 6px; } .pagination-wrapper { display: flex; justify-content: center; margin-top: 20px; } .pagination .page-link { border-radius: 999px; min-width: 32px; text-align: center; font-size: 0.85rem; } /* תצוגת טבלה */ #list-view { display: none; } /* ===== Employees Table - משתמש בעיצוב הגלובלי מ-tables.css ===== */ /* העיצוב הבסיסי של .employees-table ו-.employees-table-wrapper נמצא ב-tables.css */ /* כאן רק שינויים ספציפיים למודול אם נדרש */ /* ===== Badge ===== */ /* הוסר - badges מעוצבים ב-components-enhanced.css גלובלית */ /* מובייל */ @media (max-width: 767.98px) { .employees-page-header { padding: 14px 12px; } .employees-page-title h1 { font-size: 1.3rem; } .advanced-features { padding: 14px 12px; } .search-filters { padding: 12px 10px; } } /* הסברים */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ .info-box-explanation i { margin-left: 0.5rem; font-size: 1.1rem; } .stats-explanation { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem; line-height: 1.4; padding-top: 0.5rem; border-top: 1px dashed var(--border-secondary); } /* אייקון עזרה קטן */ .kpi-help-icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-500); font-size: 11px; font-weight: bold; cursor: help; margin-right: 6px; margin-left: 4px; vertical-align: middle; transition: all 0.2s ease; flex-shrink: 0; border: 1px solid var(--primary-200); } .kpi-help-icon:hover { background: var(--primary-200); color: var(--primary-700); transform: scale(1.15); border-color: var(--primary-300); } /* Tooltip */ .kpi-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: var(--shadow-md); font-size: 0.8rem; line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* ===== add.html - Style tag 1 ===== */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .page-wrapper נמצאים ב-components/forms.css */ /* ===== Employee Card - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* העיצוב הבסיסי נמצא ב-components/cards.css */ /* ===== Card Header Custom / Employee Header Custom - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .card-header-custom, .employee-header-custom נמצאים ב-components/forms.css */ /* ===== Card Body Custom - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .card-body-custom נמצאים ב-components/forms.css */ .badge-status { background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ /* העיצוב הבסיסי של .form-control::placeholder נמצא ב-components/forms.css */ .form-section { margin-bottom: 1.4rem; padding: 1rem 1.1rem; } /* הוסר - .form-section-explanation מעוצב ב-modules/projects.css גלובלית */ /* הוסר - .form-header-explanation מעוצב ב-modules/projects.css גלובלית */ .form-check-label { font-size: 0.88rem; } /* הוסר - .card-footer-custom מעוצב ב-components/forms.css גלובלית */ /* .btn-primary-modern - הועבר ל-components/buttons.css */ /* .btn-outline-secondary-modern - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ @media (max-width: 767.98px) { .card-header-custom { padding: 1.3rem 1.25rem 1rem; } /* ===== Card Body Custom - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .card-body-custom נמצאים ב-components/forms.css */ .card-body-custom-old { padding: 1.25rem; } .card-footer-custom { padding: 1rem 1.25rem 1.25rem; } .card-header-custom h1 { font-size: 1.3rem; } } /* ===== edit.html - Style tag 1 ===== */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Contractor Card - Flavor קטן בלבד ===== */ /* העיצוב הבסיסי נמצא ב-components/cards.css */ /* כאן רק שינויים ספציפיים למודול */ .contractor-card { /* Flavor קטן - רק שינויים ספציפיים למודול אם נדרש */ } .contractor-card-body { padding: 1.5rem 1.5rem 1.3rem; } /* ===== Nav Tabs Custom - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .nav-tabs-custom נמצאים ב-components/forms.css */ /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ .input-group-text { font-size: 0.8rem; background-color: var(--primary-soft); border-color: var(--border-primary); border-right: none; border-radius: var(--input-radius) 0 0 var(--input-radius); } .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed var(--border-secondary); } /* הוסר - .form-header-explanation מעוצב ב-modules/projects.css גלובלית */ .tab-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-secondary); border-right: 3px solid var(--text-tertiary); } .form-check-label { font-size: 0.8rem; } /* ===== Contractor Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי נמצא ב-components/forms.css */ /* כאן רק שינויים ספציפיים למודול אם נדרש */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ @media (max-width: 767.98px) { .contractor-card-header { padding: 1rem 1.25rem 0.8rem; } .contractor-card-title h1 { font-size: 1.1rem; } .contractor-card-title-icon { width: 2rem; height: 2rem; } .contractor-card-body { padding: 1.25rem; } /* ===== Nav Tabs Custom - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .nav-tabs-custom נמצאים ב-components/forms.css */ .contractor-card-footer { padding: 0.8rem 1.25rem 0.9rem; } /* .btn-sm-custom - הועבר ל-components/buttons.css (עם responsive) */ } /* ===== list.html - Style tag 1 ===== */ /* CSS ל-modals */ #addEmployeeModal .modal-dialog, #editEmployeeModal .modal-dialog { max-width: 95%; width: 95%; margin: 1rem auto; } @media (min-width: 992px) { #addEmployeeModal .modal-dialog, #editEmployeeModal .modal-dialog { max-width: 90%; width: 90%; } } .btn-close { opacity: 1; } .btn-close:hover { opacity: 0.75; } /* עיצוב רשימות */ .employees-page ul { padding-right: 1.5rem; } /* עיצוב טיפים */ .employees-page small { opacity: 0.8; } /* עיצוב spans */ .employees-page span[style*="position: relative"] { position: relative; } /* עיצוב תצוגת רשימה */ #list-view { display: none; } #list-view.show { display: block; } /* עיצוב קוד */ .employee-code { font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 600; color: var(--text-tertiary); } /* עיצוב קישורים */ .employee-link { font-weight: 600; color: var(--text-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .employee-link i { font-size: 0.7rem; opacity: 0.5; } .employee-contact-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 500; } .employee-contact-link i { font-size: 0.75rem; } /* ===== view_modal.html - Style tag 1 ===== */ .info-group { display: flex; flex-direction: column; gap: 4px; } .info-label { font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; margin: 0; } .info-value { color: var(--text-primary); font-size: 0.95rem; margin: 0; } .employee-modal-content { padding: 20px; } /* Employees View Page - Icon Sizes */ .share-email-btn i, .btn-outline-light i { font-size: 1.1rem; } /* Employees View Page - Tab Explanation Small */ .tab-explanation small { margin-top: 5px; display: block; } /* Employees View Page - Project Association Cards */ .card.shadow-sm.border-0 { background: rgba(27, 35, 48, 0.4); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } .card.shadow-sm.border-0 .card-body h6.mb-0 { color: var(--text-primary); font-weight: 600; } .card.shadow-sm.border-0 .card-body h6.mb-0 i.fas.fa-building { color: var(--primary-500); } .card.shadow-sm.border-0 .card-body small { color: var(--text-secondary); } /* עיצוב כרטיס הוספת פרויקט */ .add-project-card { background: linear-gradient(145deg, var(--success-50), var(--success-100)); } /* עיצוב טקסט מידע תפקיד */ .role-info-text { font-size: 0.75rem; } /* עיצוב כרטיס מסמכים ללא עיצוב */ .documents-card-no-style { border-radius: 0; box-shadow: none; border: none; } /* עיצוב טבלת מסמכים */ .docs-table-checkbox-col { width: 32px; } .docs-table-actions-col { width: 145px; } /* עיצוב אייקון מסמכים ריק */ .empty-documents-icon { font-size: 3rem; opacity: 0.5; } /* עיצוב Modal PDF */ /* הערה: .custom-modal-overlay, .custom-modal, .resize-handle, .pdf-toolbar מוגדרים כבר ב-components/modals.css - הוסרו כפילויות */ /* ========================================================= Employees Index – Premium Layout מותאם ל-RTL, Bootstrap 5 + Tailwind utility classes מבוסס על עיצוב מודול הפרויקטים ========================================================= */ /* -------- בסיס עמוד -------- */ .employees-page { /* שימוש ב-tokens גלובליים במקום משתנים מותאמים אישית */ background: transparent; min-height: calc(100vh - 90px); } /* -------- כותרת עליונה -------- */ .employees-header, .employee-header-custom { border-radius: var(--border-radius-2xl); background: linear-gradient(135deg, rgba(44, 62, 80, 0.1) 0%, rgba(52, 73, 94, 0.1) 25%, rgba(44, 62, 80, 0.1) 50%, rgba(26, 37, 47, 0.1) 75%, rgba(44, 62, 80, 0.1) 100%); color: var(--color-text-inverse); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); border-right: 4px solid rgba(52, 152, 219, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); padding: var(--spacing-5) var(--spacing-6); position: relative; overflow: hidden; } .employees-header::before { content: none; display: none; } .employees-header-main { position: relative; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; z-index: 1; } .employees-title-wrap { display: flex; flex-direction: column; gap: 0.2rem; } .employees-title { font-size: var(--fs-h3); font-weight: var(--fs-h3-weight); display: flex; align-items: center; margin: 0; color: var(--color-text-inverse); } .employees-title-icon { font-size: 1.4rem; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--border-radius-full); background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-600); } .employees-subtitle { margin: 0; font-size: var(--fs-body-small); color: rgba(255, 255, 255, 0.7); opacity: 0.9; } .employees-header-actions { display: flex; align-items: center; gap: 0.6rem; } /* לחצן הוספה מודרני וקומפקטי */ .employees-header-actions .btn-action.btn-add { width: 28px ; height: 28px ; background: var(--color-surface) ; color: var(--color-success) ; border-color: rgba(34, 197, 94, 0.3) ; border: 1px solid rgba(34, 197, 94, 0.3) ; } .employees-header-actions .btn-action.btn-add:hover { background: rgba(34, 197, 94, 0.1) ; border-color: var(--color-success) ; color: var(--color-success) ; } .employees-header-actions .btn-action.btn-add i { font-size: 12px ; } .employees-empty-state .btn-action.btn-add { width: 28px ; height: 28px ; background: var(--color-surface) ; color: var(--color-success) ; border-color: rgba(34, 197, 94, 0.3) ; border: 1px solid rgba(34, 197, 94, 0.3) ; } .employees-empty-state .btn-action.btn-add:hover { background: rgba(34, 197, 94, 0.1) ; border-color: var(--color-success) ; color: var(--color-success) ; } .employees-empty-state .btn-action.btn-add i { font-size: 12px ; } /* ===== Icon Ghost Button - הועבר ל-components/buttons.css ===== */ /* .btn-icon-ghost - הועבר ל-components/buttons.css */ /* -------- פילטרים מהירים (צ'יפים) -------- */ .employees-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; } .filter-chip { display: inline-flex ; align-items: center ; gap: var(--spacing-2) ; padding: var(--spacing-1) var(--spacing-2) ; border-radius: var(--border-radius-sm) ; font-size: var(--fs-muted) ; border: 1px solid var(--color-border) ; color: var(--color-dark) ; opacity: 0.7; text-decoration: none ; background: var(--color-surface) ; transition: all var(--transition-fast) ; font-weight: var(--fs-h5-weight) ; min-height: 24px ; } .filter-chip i { font-size: 0.65rem ; line-height: 1 ; } .filter-chip:hover { background: var(--color-light) ; border-color: var(--color-border) ; color: var(--color-dark) ; opacity: 1; transform: translateY(-1px) ; box-shadow: var(--shadow-sm) ; } .filter-chip-active { background: var(--color-surface) ; color: var(--color-dark) ; opacity: 1; font-weight: var(--fs-h3-weight) ; border-width: 1.5px ; box-shadow: var(--shadow-sm) ; } .employees-quick-filters > a:first-child.filter-chip-active { border-color: var(--color-dark) ; opacity: 0.5; color: var(--color-dark) ; } .employees-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: rgba(34, 197, 94, 0.3) ; color: var(--color-success) ; } .employees-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: rgba(34, 197, 94, 0.1) ; border-color: var(--color-success) ; } .employees-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--color-success) ; color: var(--color-success) ; background: rgba(34, 197, 94, 0.1) ; } .employees-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: rgba(220, 53, 69, 0.3) ; color: var(--color-danger) ; } .employees-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: rgba(220, 53, 69, 0.1) ; border-color: var(--color-danger) ; } .employees-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--color-danger) ; color: var(--color-danger) ; background: rgba(220, 53, 69, 0.1) ; } /* -------- סטטיסטיקות / KPI -------- */ /* הערה: .stats-grid ו-.stat-card הועברו ל-components/cards.css */ /* כל העיצובים של .stat-card, .stat-card-inner, .stat-icon, .stat-label, .stat-value וכו' נמצאים ב-components/cards.css */ /* -------- מנוע חיפוש וסינון -------- */ .employees-search-engine { border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(44, 62, 80, 0.1) 0%, rgba(52, 73, 94, 0.1) 25%, rgba(44, 62, 80, 0.1) 50%, rgba(26, 37, 47, 0.1) 75%, rgba(44, 62, 80, 0.1) 100%); box-shadow: var(--shadow-md); color: var(--color-text-inverse); } .employees-search-engine .card-body { padding-block: 0.55rem; padding-inline: 0.75rem; } .employees-search-form { display: flex; flex-direction: column; gap: 0.3rem; } .employees-search-main { min-height: 0; } .search-label { font-size: var(--fs-muted); color: rgba(255, 255, 255, 0.7); opacity: 0.9; } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--fs-body-small); color: rgba(255, 255, 255, 0.7); opacity: 0.9; } .search-input-wrapper .form-control { padding-inline-start: 1.8rem; font-size: var(--fs-body-small); border-radius: var(--border-radius-full); border-color: var(--color-border); } .search-input-wrapper .form-control:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 1px var(--color-primary-200); } .employees-search-status { min-width: 240px; } .status-chip-group { display: flex; flex-wrap: wrap; gap: 0.25rem; background: transparent; border-radius: 0; padding: 0; border: none; } .status-chip { border: 1px solid var(--color-border) ; background: var(--color-surface) ; border-radius: var(--border-radius-sm) ; padding: var(--spacing-1) var(--spacing-2) ; font-size: var(--fs-muted) ; color: var(--color-dark) ; opacity: 0.7; display: inline-flex ; align-items: center ; gap: var(--spacing-2) ; cursor: pointer ; white-space: nowrap ; transition: all var(--transition-fast) ; font-weight: var(--fs-h5-weight) ; min-height: 24px ; } .status-chip i { font-size: 0.65rem ; line-height: 1 ; } .status-chip:hover { background: var(--color-light) ; border-color: var(--color-border) ; color: var(--color-dark) ; opacity: 1; transform: translateY(-1px) ; box-shadow: var(--shadow-sm) ; } .status-chip-active { background: var(--color-surface) ; color: var(--color-dark) ; opacity: 1; font-weight: var(--fs-h3-weight) ; border-width: 1.5px ; box-shadow: var(--shadow-sm) ; } .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--color-border) ; } .status-chip[value=""].status-chip-active { border-color: var(--color-dark) ; opacity: 0.5; color: var(--color-dark) ; } .status-chip[value="active"]:not(.status-chip-active) { border-color: rgba(34, 197, 94, 0.3) ; color: var(--color-success) ; } .status-chip[value="active"]:not(.status-chip-active):hover { background: rgba(34, 197, 94, 0.1) ; border-color: var(--color-success) ; } .status-chip[value="active"].status-chip-active { border-color: var(--color-success) ; color: var(--color-success) ; background: rgba(34, 197, 94, 0.1) ; } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: rgba(220, 53, 69, 0.3) ; color: var(--color-danger) ; } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: rgba(220, 53, 69, 0.1) ; border-color: var(--color-danger) ; } .status-chip[value="inactive"].status-chip-active { border-color: var(--color-danger) ; color: var(--color-danger) ; background: rgba(220, 53, 69, 0.1) ; } /* לחצני חיפוש מודרניים וקומפקטיים */ .employees-search-actions .btn-action.btn-advanced, .employees-search-actions .btn-action.btn-filter { width: 22px ; height: 22px ; background: var(--card-bg) ; border: 1px solid var(--border-primary) ; border-radius: 4px ; padding: 0 ; display: inline-flex ; align-items: center ; justify-content: center ; cursor: pointer ; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) ; box-shadow: none ; font-size: 0 ; min-width: 22px ; font-weight: normal ; } .employees-search-actions .btn-action.btn-advanced { color: var(--color-dark) ; opacity: 0.7; border-color: var(--color-border) ; } .employees-search-actions .btn-action.btn-advanced:hover { background: var(--color-light) ; border-color: var(--color-border) ; color: var(--color-dark) ; opacity: 1; transform: translateY(-1px) ; box-shadow: var(--shadow-sm) ; } .employees-search-actions .btn-action.btn-advanced:active { background: var(--color-light) ; transform: scale(0.95) ; } .employees-search-actions .btn-action.btn-filter { color: var(--color-primary-600) ; border-color: var(--color-primary-200) ; } .employees-search-actions .btn-action.btn-filter:hover { background: var(--color-primary-100) ; border-color: var(--color-primary-600) ; color: var(--color-primary-700) ; transform: translateY(-1px) ; box-shadow: 0 2px 8px var(--color-primary-200) ; } .employees-search-actions .btn-action.btn-filter:active { background: var(--color-primary-200) ; transform: scale(0.95) ; } .employees-search-actions .btn-action i { font-size: 10px ; line-height: 1 ; display: block ; margin: 0 ; } .employees-search-actions { gap: 0.25rem ; align-items: center ; } .employees-search-advanced .form-select { font-size: 0.78rem; padding-block: 0.25rem; padding-inline: 0.45rem; border-radius: 0.6rem; } .clear-filters-link { font-size: 0.75rem; } .employees-search-summary { font-size: var(--fs-muted); color: var(--text-secondary); } .employees-search-summary strong { color: var(--text-primary); } /* -------- כרטיסי עובדים -------- */ .employees-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } /* עיצוב כרטיסי עובדים - גרסה משופרת */ /* שימוש ב-specificity גבוהה יותר כדי להבטיח שהעיצוב יעלה על עיצובים קודמים */ .employees-page .employees-grid .employee-card, .employees-page .employee-card { border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(44, 62, 80, 0.1) 0%, rgba(52, 73, 94, 0.1) 25%, rgba(44, 62, 80, 0.1) 50%, rgba(26, 37, 47, 0.1) 75%, rgba(44, 62, 80, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); overflow: hidden; transition: all 0.2s ease; padding: 0; margin-bottom: 0; position: relative; color: var(--color-text-inverse); } /* הסרת פס כחול למעלה */ .employees-page .employees-grid .employee-card::before, .employees-page .employee-card::before { display: none; content: none; } .employees-page .employees-grid .employee-card:hover, .employees-page .employee-card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, rgba(44, 62, 80, 0.15) 0%, rgba(52, 73, 94, 0.15) 25%, rgba(44, 62, 80, 0.15) 50%, rgba(26, 37, 47, 0.15) 75%, rgba(44, 62, 80, 0.15) 100%); } .employee-card-inner { padding: 0.75rem 0.95rem 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; } .employee-card-header { display: flex; justify-content: space-between; gap: 0.4rem; align-items: flex-start; border-bottom: 1px dashed rgba(209, 213, 219, 0.9); padding-bottom: 0.4rem; } .employee-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .employee-card-title { margin: 0; font-size: var(--fs-h5); font-weight: var(--fs-h5-weight); color: var(--color-text-inverse); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .employee-card-code { font-size: var(--fs-muted); color: rgba(255, 255, 255, 0.7); opacity: 0.9; display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .employee-status-badge .badge { font-size: 0.7rem; padding-block: 0.15rem; padding-inline: 0.5rem; } .employee-card-body { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; } .employee-main-info { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; } .employee-info-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .employee-info-label { flex-shrink: 0; color: rgba(255, 255, 255, 0.7); font-weight: 500; display: inline-flex; align-items: center; gap: 0.2rem; } .employee-info-label i { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } .employee-info-value { color: var(--color-text-inverse); } .employee-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .employee-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--border-primary); } .employee-actions-left { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; width: 100%; } /* לחצנים מודרניים וקומפקטיים */ .employee-card-footer .btn-action, .employees-table-actions .btn-action, .employee-actions-left .btn-action { display: inline-flex ; align-items: center ; justify-content: center ; width: 24px ; height: 24px ; padding: 0 ; border: 1px solid var(--color-border) ; border-radius: var(--border-radius-sm) ; font-size: 0 ; cursor: pointer ; transition: all var(--transition-fast) ; background: var(--color-surface) ; color: var(--color-dark) ; opacity: 0.7; box-shadow: none ; position: relative ; min-width: 24px ; font-weight: normal ; } .employee-card-footer .btn-action:hover, .employees-table-actions .btn-action:hover, .employee-actions-left .btn-action:hover { background: var(--color-light) ; border-color: var(--color-border) ; opacity: 1; transform: none ; box-shadow: var(--shadow-sm) ; } .employee-card-footer .btn-action:active, .employees-table-actions .btn-action:active, .employee-actions-left .btn-action:active { background: var(--color-light) ; transform: scale(0.95) ; } .employee-card-footer .btn-action i, .employees-table-actions .btn-action i, .employee-actions-left .btn-action i { font-size: 11px ; line-height: 1 ; display: block ; margin: 0 ; } /* צפייה - כחול עדין */ .employee-card-footer .btn-action.btn-view, .employees-table-actions .btn-action.btn-view, .employee-actions-left .btn-action.btn-view { color: var(--color-primary-600) ; border-color: var(--color-primary-200) ; background: var(--color-surface) ; opacity: 1; } .employee-card-footer .btn-action.btn-view:hover, .employees-table-actions .btn-action.btn-view:hover, .employee-actions-left .btn-action.btn-view:hover { background: var(--color-primary-100) ; border-color: var(--color-primary-600) ; color: var(--color-primary-700) ; } /* עריכה - כתום עדין */ .employee-card-footer .btn-action.btn-edit, .employees-table-actions .btn-action.btn-edit, .employee-actions-left .btn-action.btn-edit { color: var(--color-warning) ; border-color: rgba(255, 193, 7, 0.3) ; background: var(--color-surface) ; opacity: 1; } .employee-card-footer .btn-action.btn-edit:hover, .employees-table-actions .btn-action.btn-edit:hover, .employee-actions-left .btn-action.btn-edit:hover { background: rgba(255, 193, 7, 0.1) ; border-color: var(--color-warning) ; color: var(--color-warning) ; } /* מחיקה / pause - אדום עדין */ .employee-card-footer .btn-action.btn-delete, .employees-table-actions .btn-action.btn-delete, .employee-actions-left .btn-action.btn-delete { color: var(--color-danger) ; border-color: rgba(220, 53, 69, 0.3) ; background: var(--color-surface) ; opacity: 1; } .employee-card-footer .btn-action.btn-delete:hover, .employees-table-actions .btn-action.btn-delete:hover, .employee-actions-left .btn-action.btn-delete:hover { background: rgba(220, 53, 69, 0.1) ; border-color: var(--color-danger) ; color: var(--color-danger) ; } /* schedule / play - טורקיז עדין */ .employee-card-footer .btn-action.btn-schedule, .employees-table-actions .btn-action.btn-schedule, .employee-actions-left .btn-action.btn-schedule { color: var(--color-info) ; border-color: rgba(23, 162, 184, 0.3) ; background: var(--color-surface) ; opacity: 1; } .employee-card-footer .btn-action.btn-schedule:hover, .employees-table-actions .btn-action.btn-schedule:hover, .employee-actions-left .btn-action.btn-schedule:hover { background: rgba(23, 162, 184, 0.1) ; border-color: var(--color-info) ; color: var(--color-info) ; } /* -------- מצב ללא עובדים -------- */ .employees-empty-state { border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(44, 62, 80, 0.1) 0%, rgba(52, 73, 94, 0.1) 25%, rgba(44, 62, 80, 0.1) 50%, rgba(26, 37, 47, 0.1) 75%, rgba(44, 62, 80, 0.1) 100%); border: 2px dashed rgba(255, 255, 255, 0.2); text-align: center; padding: var(--spacing-8) var(--spacing-4); margin-top: var(--spacing-2); color: var(--color-text-inverse); opacity: 0.9; } .employees-empty-state i { color: rgba(255, 255, 255, 0.6); opacity: 0.8; } .employees-empty-state h3 { font-size: var(--fs-h4); margin-bottom: var(--spacing-1); color: var(--color-text-inverse); } .employees-empty-state p { font-size: var(--fs-body-small); margin-bottom: var(--spacing-3); color: rgba(255, 255, 255, 0.7); } /* -------- טבלת עובדים -------- */ /* .employees-table-wrapper - הועבר ל-tables.css */ /* .employees-table - הועבר ל-tables.css */ /* .employees-table thead* - הועבר ל-tables.css */ /* .employees-table tbody* - הועבר ל-tables.css */ /* עיצובים ספציפיים למודול - נשארים */ .employees-table-responsive { border-radius: var(--radius-card); overflow: hidden; } .employees-td-ellipsis { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-employee-name { font-weight: var(--fs-h4-weight); text-decoration: none; color: var(--text-primary); transition: color 0.2s ease; } .link-employee-name:hover { color: var(--primary-600); } .employees-table .text-decoration-none { text-decoration: none; color: var(--text-secondary); } .employees-table .text-decoration-none:hover { color: var(--primary-600); } /* -------- הסברים -------- */ .info-box-explanation { background: linear-gradient(135deg, rgba(44, 62, 80, 0.1) 0%, rgba(52, 73, 94, 0.1) 25%, rgba(44, 62, 80, 0.1) 50%, rgba(26, 37, 47, 0.1) 75%, rgba(44, 62, 80, 0.1) 100%); border-right: 4px solid rgba(52, 152, 219, 0.6); border-radius: var(--border-radius-lg); padding: var(--spacing-4) var(--spacing-5); margin-bottom: var(--spacing-4); font-size: var(--fs-body-small); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); border: 1px solid rgba(255, 255, 255, 0.1); } .info-box-explanation strong { color: var(--color-text-inverse); } .info-box-explanation ul, .info-box-explanation li { color: rgba(255, 255, 255, 0.8); } .info-box-explanation small { color: rgba(255, 255, 255, 0.7); } .info-box-explanation i { margin-left: 0.5rem; font-size: 1.1rem; } /* אייקון עזרה קטן */ .kpi-help-icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: var(--border-radius-full); background: var(--color-primary-200); color: var(--color-primary-600); font-size: 11px; font-weight: bold; cursor: help; margin-right: var(--spacing-2); margin-left: var(--spacing-1); vertical-align: middle; transition: all var(--transition-base); flex-shrink: 0; border: 1px solid var(--color-primary-300); } .kpi-help-icon:hover { background: var(--color-primary-300); color: var(--color-primary-700); transform: scale(1.15); border-color: var(--color-primary-400); } /* Tooltip */ .kpi-tooltip { position: absolute; z-index: var(--z-tooltip); max-width: 280px; padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); font-size: var(--fs-body-small); line-height: var(--line-height-normal); color: var(--color-dark); opacity: 0; pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--text-inverse); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-secondary); } /* -------- רספונסיביות (Mobile-First) -------- */ /* ברירת מחדל - מובייל - 2 בשורה */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ✅ Mobile-First - 2 בשורה */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .employees-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .employees-title { font-size: 1.5rem; } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .employees-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .employees-search-main { flex-direction: column; align-items: stretch; } .employees-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .employees-search-actions { align-items: stretch; } } /* -------- כפתורי פעולה עליונים -------- */ /* הערה: .employee-actions-bar מוגדר כבר ב-base.css (שורות 435-649) - הוסרו כפילויות */ /* -------- עיצוב inline styles שהוסרו -------- */ /* הערה: .icon-small, .icon-large, .cursor-pointer מוגדרים כבר ב-utilities.css - הוסרו כפילויות */ /* עיצוב text pre-wrap */ .text-pre-wrap { white-space: pre-wrap; } /* עיצוב page-header-actions */ .page-header-actions { display: flex; gap: var(--spacing-2); align-items: center; } /* ============================================ עיצוב דף צפייה בעובד - Employees View מותאם לעיצוב מודול הפרויקטים ============================================ */ /* החלפת צבעים ראשיים להתאמה למודול פרויקטים */ .employee-header .text-primary, .employee-header .text-primary i { color: var(--primary-500); } .tab-pane .text-primary, .card .text-primary { color: var(--primary-500); } /* סרגל פעולות עליון - מעל כותרת העובד */ /* הערה: .employee-actions-bar מוגדר כבר ב-base.css (שורות 435-649) - הוסרו כפילויות */ /* דריסת צבעי ה-badges */ .employee-header .bg-success { background-color: var(--success-500); } .employee-header .bg-secondary { background-color: var(--text-secondary); } /* צבעים נוספים בדף */ .employee-header h1 { color: var(--text-primary); } .employee-header .text-muted { color: var(--text-secondary); } .employee-header .text-dark { color: var(--text-primary); } /* תאימות כפתורים */ .employee-header .btn-primary { background-color: var(--primary-500); border-color: var(--primary-500); color: var(--text-inverse); } .employee-header .btn-primary:hover { background-color: var(--primary-700); border-color: var(--primary-700); } .employee-header .btn-outline-primary { color: var(--primary-500); border-color: var(--primary-500); background-color: rgba(255, 255, 255, 0.8); } .employee-header .btn-outline-primary:hover { background-color: var(--primary-500); border-color: var(--primary-500); color: var(--text-inverse); } .employee-header .btn-light { background-color: rgba(255, 255, 255, 0.9); border-color: rgba(33, 150, 243, 0.3); color: var(--primary-700); } .employee-header .btn-light:hover { background-color: var(--card-bg); border-color: var(--primary-500); color: var(--primary-700); } .employee-header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); color: var(--text-primary); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); border-right: 4px solid var(--primary-500); border-top: 1px solid rgba(148, 163, 184, 0.3); border-bottom: 1px solid rgba(148, 163, 184, 0.3); border-left: 1px solid rgba(148, 163, 184, 0.3); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .employee-avatar-large, .default-avatar-large נמצאים ב-components/cards.css */ /* ===== Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .badge-expired, .badge-expiring, .badge-valid נמצאים ב-components-enhanced.css */ .gradient-header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); color: var(--text-primary); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; border-bottom: 1px solid var(--border-primary); } /* כותרת כרטיסים מודרנית */ .card-header.bg-white { background: var(--surface-50); color: var(--secondary-900); border-bottom: 1px solid var(--border-secondary); padding: 1rem 1.25rem; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-600); padding-right: 10px; margin-bottom: 1rem; } .info-box { background: var(--bg-secondary); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--border-primary); transition: all 0.2s ease; } .info-box:hover { background: var(--bg-tertiary); border-color: var(--border-secondary); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .info-box span { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; } .info-box strong { font-size: 0.95rem; color: var(--text-primary); font-weight: 600; } /* הסברים */ .info-box-explanation { background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); border-right: 4px solid var(--primary-500); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--primary-700); box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1); } .info-box-explanation i { margin-left: 0.5rem; font-size: 1.1rem; } .section-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } .tab-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /********************** * אזור מסמכים – עיצוב פרימיום קומפקטי **********************/ /* כרטיס מסמכים כללי */ .documents-card { background: var(--card-bg); border-radius: 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06); overflow: hidden; } /* כותרת עליונה */ .documents-card-header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); color: var(--text-primary); padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border-primary); border-radius: 16px 16px 0 0; } .documents-card-header h5 { font-size: 1rem; margin: 0; } /* אייקון כותרת מסמכים */ .documents-icon-wrapper { width: 34px; height: 34px; background: var(--primary-50); border-radius: 999px; font-size: 0.95rem; color: var(--primary-600); } /* טקסט הסבר קצר מתחת לכותרת */ .documents-card-header .tab-explanation { font-size: 0.8rem; line-height: 1.4; padding: 0.45rem 0.6rem; border-radius: 0.75rem; background: transparent; border-right: 3px solid rgba(33, 150, 243, 0.5); color: var(--text-primary); } .documents-card-header .tab-explanation strong { color: var(--text-primary); } .documents-card-header .tab-explanation i { color: var(--primary-500); } /* גוף הכרטיס */ .documents-wrapper { padding: 0.9rem 1.1rem 1.1rem; background: var(--bg-muted); } /* התראות מסמכים שפג/עומד לפוג */ .documents-status-alert { border-radius: 0.75rem; font-size: 0.8rem; line-height: 1.4; } .documents-status-alert ul li { margin-bottom: 0.1rem; } /* רשימת תיקיות */ .documents-folders-list { margin-top: 0.3rem; } /* בלוק תיקייה יחיד */ .folder-section { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-primary); padding: 0.35rem 0.7rem; transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .folder-section + .folder-section { margin-top: 0.5rem; } .folder-section:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04); border-color: var(--border-secondary); transform: translateY(-1px); } /* כותרת תיקייה */ .folder-header { cursor: pointer; padding: 0.25rem 0; } .folder-title-main { direction: rtl; font-size: 0.86rem; } /* אייקון תיקייה עגול קטן */ .folder-icon-wrapper { width: 28px; height: 28px; background: var(--secondary-200); font-size: 0.9rem; } /* שם תיקייה + באדג' כמות */ .folder-name { color: var(--text-primary); } .folder-count-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 999px; } /* אזור כפתורי תיקייה */ /* .btn-xs - הועבר ל-components/buttons.css */ /* כפתור פתיחה/סגירה */ .folder-toggle { border: none; background: var(--secondary-200); width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background-color 0.15s ease, transform 0.12s ease; } .folder-toggle i { transition: transform 0.18s ease; } /* מצב פתוח – הופך את ה"+" ל"×" (סיבוב) */ .folder-toggle:not(.collapsed) i { transform: rotate(45deg); } .folder-toggle:hover { background: var(--border-primary); } /* תוכן תיקייה (טבלה / הודעת תיקייה ריקה) */ .folder-content { margin-top: 0.25rem; } /* collapsed – מנוהל ע"י JS (toggleFolder) */ .folder-content.collapsed { display: none; } /* טבלת מסמכים */ .docs-table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; } .docs-table thead th { border-bottom: 1px solid var(--border-primary); background: var(--bg-muted); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.45rem; color: var(--text-secondary); white-space: nowrap; } .docs-table tbody td { font-size: 0.8rem; padding: 0.38rem 0.45rem; vertical-align: middle; border-bottom: 1px solid var(--secondary-100); } /* אייקון קובץ */ .docs-table td.text-center i { font-size: 1rem; } /* שורת מסמך – hover */ .docs-table tbody tr:hover { background: var(--bg-muted); } /* קבוצת כפתורים */ .docs-table .btn-group .btn { padding: 0.15rem 0.35rem; font-size: 0.78rem; border-radius: 999px; } .docs-table .btn-group .btn i { font-size: 0.85rem; } /* תיקייה ריקה */ .empty-folder { background: var(--bg-muted); border-radius: 10px; border: 1px dashed var(--border-secondary); } .empty-folder i { font-size: 1.4rem; } /* מצב "אין מסמכים לעובד זה" */ .documents-wrapper > .text-center i.fa-file-alt { opacity: 0.7; } .documents-wrapper > .text-center p { font-size: 0.9rem; } /* כפתור העלאת מסמך ראשי */ .documents-card .btn-primary.btn-sm, .documents-card .btn-outline-primary.btn-sm { border-radius: 999px; } /* יוטיליטי קטן לכפתור XS (בשימוש בתיקיות) */ /* .btn-xs - הועבר ל-components/buttons.css */ /********************** * עיצוב טאבים - סגנון מודרני קפסולה **********************/ .nav-tabs-custom { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.3); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); margin-bottom: 1.5rem; } .nav-tabs-custom .nav-link { border: none; background: transparent; border-radius: 999px; padding: 0.6rem 1.3rem; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .nav-tabs-custom .nav-link i { font-size: 1rem; transition: transform 0.3s ease; } .nav-tabs-custom .nav-link:hover { background: rgba(33, 150, 243, 0.08); color: var(--primary-500); transform: translateY(-2px); } .nav-tabs-custom .nav-link:hover i { transform: scale(1.1); } .nav-tabs-custom .nav-link.active { background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: var(--text-inverse); box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4); font-weight: 600; } .nav-tabs-custom .nav-link.active i { color: var(--text-inverse); } .nav-tabs-custom .nav-link::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.3s ease; } .nav-tabs-custom .nav-link.active::before { opacity: 1; } .tab-content { min-height: 400px; } .tab-pane { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /********************** * רספונסיביות – מובייל **********************/ @media (max-width: 767.98px) { .row.mt-4 > .col-12 { max-width: 100%; margin: 0; } .employee-header { padding: 1rem 1.25rem; } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .employee-avatar-large, .default-avatar-large נמצאים ב-components/cards.css */ .employee-header h2 { font-size: 1.5rem; } .info-box { padding: 10px 12px; margin-bottom: 10px; } .section-title { font-size: 0.95rem; } .card-body { padding: 1rem; } .gradient-header { padding: 12px 16px; font-size: 0.95rem; } .stat-box { margin-bottom: 12px; } .stat-box h4 { font-size: 1.5rem; } .documents-card-header { padding: 0.75rem 0.9rem; } .tab-explanation { margin-top: 0.15rem; font-size: 0.78rem; } .documents-wrapper { padding: 0.75rem 0.8rem 0.9rem; } .folder-section { padding: 0.3rem 0.55rem; } .docs-table thead th, .docs-table tbody td { font-size: 0.78rem; padding: 0.32rem 0.35rem; } .documents-status-alert { font-size: 0.78rem; } .nav-tabs-custom .nav-link { padding: 0.75rem 1rem; font-size: 0.9rem; } } /* מודל PDF משופר – שמירה על מה שכבר עשית + עידון */ /* ===== PDF Toolbar, Custom Modal, Notification Toast - הועברו ל-components/modals.css ===== */ /* כל העיצובים של .pdf-toolbar, .custom-modal-overlay, .custom-modal, .resize-handle, .notification-toast נמצאים ב-components/modals.css */ /* =================== תיקונים ייחודיים למודול העובדים (אוחד מ-modules/employees/css/fixes.css) =================== */ /* תיקון לכפתורים - רק לכפתורים רגילים */ .btn:not(.btn-action) { direction: rtl; } /* תיקון לכרטיסי עובדים */ .employees-page .gradient-card { margin-bottom: 1.5rem; } /* תיקון לטבלאות עובדים */ .employees-page .table-responsive { border-radius: 8px; overflow: hidden; } /* תיקון לכרטיסי סטטיסטיקות עובדים */ .employees-page .stats-card { border-right: 4px solid transparent; } /* וידוא שה-CSS הגלובלי של stats-card עובד */ /* הערה: ההגדרה הראשית של .stats-card נמצאת בשורה 668 ומשתמשת ב-design tokens */ /* כאן מוסיפים רק תוספות ספציפיות */ .stats-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; } .stats-primary::before { background: linear-gradient(90deg, #4299e1 0%, #3182ce 100%); } .stats-success::before { background: linear-gradient(90deg, #48bb78 0%, #38a169 100%); } .stats-warning::before { background: linear-gradient(90deg, #ed8936 0%, #dd6b20 100%); } .stats-info::before { background: linear-gradient(90deg, #38b2ac 0%, #319795 100%); } .stats-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .stats-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-inverse); margin-bottom: 12px; } .stats-primary .stats-icon { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); } .stats-success .stats-icon { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); } .stats-warning .stats-icon { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); } .stats-info .stats-icon { background: linear-gradient(135deg, #38b2ac 0%, #319795 100%); } .stats-number { font-size: 28px; font-weight: 700; color: #1a202c; margin-bottom: 4px; } .stats-label { font-size: 14px; color: #718096; font-weight: 500; } .stats-content { flex: 1; } /* תיקון לכפתורי פעולה בעובדים */ .employees-page .btn-group { gap: 0.5rem; } /* תיקון לתצוגת מובייל בעובדים */ @media (max-width: 768px) { .employees-page .gradient-card { margin-bottom: 1rem; } .employees-page .table-responsive { font-size: 0.9rem; } } /* תיקון לכרטיסי פעילות בעובדים */ .employees-page .activity-card { border-left: 4px solid var(--primary-color, #4e73df); } /* תיקון לטפסי עובדים */ .employees-page .form-control { border-radius: 6px; } /* תיקון לכרטיסי פרטי עובד */ /* הערה: הוסר CSS שגורם לרקע ירוק-סגול לכרטיסי עובדים */ /* .employees-page .employee-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: var(--text-inverse); } */ /* תיקון לתמונות עובדים */ .employees-page .employee-photo { border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* תיקון לכרטיסי מסמכים של עובדים */ .employees-page .document-card { border-left: 4px solid var(--success-color, #28a745); } /* תיקון לכרטיסי פרטים אישיים */ .employees-page .personal-info-card { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: var(--text-inverse); } } /* ============================================ עיצוב מודרני למודול עובדים - Theme מבוסס על העיצוב מהתמונה עם ניגודיות מושלמת ============================================ */ /* ======================================== 1. צבעי בסיס ומשתנים ======================================== */ :root { /* צבעים ראשיים */ --employee-primary: var(--primary-500); --employee-primary-dark: var(--primary-700); --employee-primary-light: var(--primary-300); /* רקעים כהים */ --employee-bg-dark: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); --employee-bg-dark-solid: var(--text-primary); /* רקעים בהירים */ --employee-bg-light: var(--card-bg); --employee-bg-light-gray: var(--bg-secondary); --employee-bg-light-blue: var(--primary-50); /* טקסט - ניגודיות מושלמת */ --employee-text-on-dark: var(--text-inverse); --employee-text-on-light: var(--text-primary); --employee-text-muted: var(--text-secondary); /* גבולות */ --employee-border-primary: var(--primary-500); --employee-border-light: var(--border-primary); /* צללים */ --employee-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04); --employee-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08); --employee-shadow-lg: 0 8px 32px rgba(31, 38, 135, 0.15); --employee-shadow-xl: 0 12px 40px rgba(31, 38, 135, 0.2); /* Gradients לכפתורים */ --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); --gradient-purple: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); --gradient-red: linear-gradient(135deg, var(--error-500) 0%, var(--warning-600) 100%); --gradient-teal: linear-gradient(135deg, var(--info-500) 0%, var(--secondary-600) 100%); } /* ======================================== 2. כותרת ראשית מעוצבת (Employee Header) ======================================== */ .employee-header-custom { background: var(--employee-bg-dark); color: var(--employee-text-on-dark); padding: 24px 28px; border-radius: 20px; margin-bottom: 24px; box-shadow: var(--employee-shadow-lg); border: 1px solid rgba(255, 255, 255, 0.15); border-right: 4px solid var(--employee-border-primary); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .employee-header-custom h1, .employee-header-custom h2, .employee-header-custom h3 { color: var(--employee-text-on-dark); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding-bottom: 12px; border-bottom: 3px solid var(--employee-border-primary); display: inline-block; margin-bottom: 16px; } .employee-header-custom .text-dark, .employee-header-custom .text-muted, .employee-header-custom p, .employee-header-custom span:not(.badge) { color: rgba(255, 255, 255, 0.95); } .employee-header-custom .badge { background: rgba(255, 255, 255, 0.2); color: var(--employee-text-on-dark); border: 1px solid rgba(255, 255, 255, 0.3); } .employee-header-custom .badge.bg-success { background: rgba(16, 185, 129, 0.9); color: var(--employee-text-on-dark); } .employee-header-custom .badge.bg-secondary { background: rgba(107, 114, 128, 0.9); color: var(--employee-text-on-dark); } /* ======================================== 3. סרגל פעולות עליון - שקוף ללא רקע ======================================== */ .employee-actions-bar { background: transparent; border-radius: 0; padding: 16px 24px; box-shadow: none; border: none; } .employee-actions-bar .btn { border-radius: 8px; font-weight: 500; padding: 0.5rem 1rem; transition: all 0.2s ease; } .employee-actions-bar .btn-outline-primary { color: var(--employee-primary); border-color: var(--primary-200); background: var(--employee-bg-light); } .employee-actions-bar .btn-outline-primary:hover { background: var(--employee-bg-light-blue); border-color: var(--employee-primary); color: var(--employee-primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2); } .employee-actions-bar .btn-primary { background: var(--gradient-primary); border: none; color: var(--employee-text-on-dark); } .employee-actions-bar .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4); } .employee-actions-bar .btn-outline-info { color: var(--info-500); border-color: var(--info-100); background: var(--employee-bg-light); } .employee-actions-bar .btn-outline-info:hover { background: var(--info-50); border-color: var(--info-500); color: var(--info-700); transform: translateY(-2px); } /* ======================================== 4. טאבים מודרניים (קפסולות) ======================================== */ .nav-tabs-custom { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border-primary) 100%); padding: 0.75rem; border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.3); box-shadow: var(--employee-shadow-md); margin-bottom: 1.5rem; } .nav-tabs-custom .nav-link { border: none; background: transparent; border-radius: 999px; padding: 0.65rem 1.4rem; font-size: 0.9rem; font-weight: 500; color: var(--employee-text-muted); transition: all 0.3s ease; } .nav-tabs-custom .nav-link:hover { background: rgba(33, 150, 243, 0.08); color: var(--employee-primary); transform: translateY(-2px); } .nav-tabs-custom .nav-link.active { background: var(--gradient-primary); color: var(--employee-text-on-dark); box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4); font-weight: 600; } .nav-tabs-custom .nav-link.active i { color: var(--employee-text-on-dark); } /* ======================================== 5. כרטיסים וכותרות ======================================== */ .card { border: none; border-radius: 16px; box-shadow: var(--employee-shadow-md); overflow: hidden; border-right: 4px solid var(--employee-border-primary); } .card-header, .gradient-header { background: var(--employee-bg-dark); color: var(--employee-text-on-dark); padding: 16px 20px; border-radius: 16px 16px 0 0; border-bottom: none; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .card-header h5, .gradient-header h5, .card-header h6, .gradient-header h6 { color: var(--employee-text-on-dark); margin: 0; font-weight: 600; } .card-header i, .gradient-header i { color: rgba(255, 255, 255, 0.9); } /* ===== Card Body - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של .card-body נמצאים ב-components/cards.css */ /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ======================================== 6. Info Boxes - משתמש בעיצוב הגלובלי מ-base.css ======================================== */ /* כל העיצובים של .info-box (כולל hover) נמצאים ב-base.css */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ /* ======================================== 7. כפתורי פעולות (בסרגל צד) ======================================== */ .btn { border-radius: 8px; font-weight: 600; padding: 0.6rem 1.2rem; transition: all 0.3s ease; } .btn-primary { background: var(--gradient-primary); border: none; color: var(--employee-text-on-dark); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(33, 150, 243, 0.4); } .btn-success { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); border: none; color: var(--employee-text-on-dark); } .btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); } .btn-danger { background: var(--gradient-red); border: none; color: var(--employee-text-on-dark); } .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(220, 53, 69, 0.4); } .btn-info { background: var(--gradient-teal); border: none; color: var(--employee-text-on-dark); } .btn-info:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23, 162, 184, 0.4); } .btn-secondary { background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-secondary) 100%); border: none; color: var(--employee-text-on-dark); } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107, 114, 128, 0.4); } /* כפתורי Outline */ .btn-outline-primary { color: var(--employee-primary); border: 2px solid var(--employee-primary); background: var(--employee-bg-light); } .btn-outline-primary:hover { background: var(--employee-primary); color: var(--employee-text-on-dark); transform: translateY(-2px); } .btn-outline-secondary { color: var(--employee-text-on-light); border: 2px solid var(--border-primary); background: var(--employee-bg-light); } .btn-outline-secondary:hover { background: var(--employee-bg-light-gray); border-color: var(--employee-text-muted); transform: translateY(-2px); } .btn-outline-danger { color: var(--error-500); border: 2px solid var(--error-500); background: var(--employee-bg-light); } .btn-outline-danger:hover { background: var(--error-500); color: var(--employee-text-on-dark); transform: translateY(-2px); } /* ======================================== 8. אזור מסמכים - משתמש בעיצוב הגלובלי מ-cards.css ======================================== */ /* כל העיצובים של documents-card, documents-card-header, documents-wrapper, folder-section, folder-name, docs-table נמצאים ב-components/cards.css */ /* ======================================== 9. Badges ו-Status ======================================== */ /* ===== Badge ===== */ /* הוסר - badges מעוצבים ב-components-enhanced.css גלובלית */ .status-badge { border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 600; } .status-active { background: var(--success-50); color: var(--success-600); } .status-inactive { background: var(--border-primary); color: var(--text-secondary); } /* ======================================== 10. Avatar ======================================== */ .employee-avatar-large, .default-avatar-large { width: 130px; height: 130px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 20px rgba(33, 150, 243, 0.3); object-fit: cover; } .default-avatar-large { background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: var(--employee-text-on-dark); } /* ======================================== 11. התראות ======================================== */ .alert-danger { background: rgba(220, 53, 69, 0.1); color: var(--error-900); border-right: 4px solid var(--error-500); border-radius: 12px; } .alert-warning { background: rgba(251, 191, 36, 0.1); color: var(--warning-900); border-right: 4px solid var(--warning-500); border-radius: 12px; } .alert-info { background: rgba(8, 145, 178, 0.1); color: var(--info-700); border-right: 4px solid var(--info-500); border-radius: 12px; } /* ======================================== 12. סטטיסטיקות ======================================== */ .stat-box { margin-bottom: 1rem; } .stat-box h4 { color: var(--employee-primary); font-weight: 700; margin: 0; } .stat-box p { color: var(--employee-text-muted); font-size: 0.85rem; margin: 0.25rem 0 0; } /* ======================================== 13. כרטיס הוספת פרויקט ======================================== */ .add-project-card { background: var(--employee-bg-light); border: 1px solid var(--employee-border-light); border-radius: 12px; border-right: 4px solid var(--employee-border-primary); } .add-project-card .card-body { padding: 1.25rem; } .add-project-card .form-label { color: var(--employee-text-on-light); font-weight: 500; } .add-project-card .form-control, .add-project-card .form-select { border: 1px solid var(--border-primary); border-radius: 8px; color: var(--employee-text-on-light); } .add-project-card .form-control:focus, .add-project-card .form-select:focus { border-color: var(--employee-primary); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.15); } .role-info-text { color: var(--employee-text-muted); font-size: 0.8rem; } /* ======================================== 14. Modal ======================================== */ /* ===== Modals ===== */ /* הוסר - modals מעוצבים גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 15. רספונסיביות ======================================== */ @media (max-width: 767.98px) { .employee-header-custom { padding: 1rem 1.25rem; } .employee-avatar-large, .default-avatar-large { width: 90px; height: 90px; font-size: 2.5rem; } .nav-tabs-custom .nav-link { padding: 0.5rem 1rem; font-size: 0.85rem; } .btn { padding: 0.5rem 1rem; font-size: 0.9rem; } } /* ======================================== 16. אנימציות ======================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-pane { animation: fadeIn 0.3s ease-in; } /* ======================================== 17. דף רשימת עובדים (Index) ======================================== */ .employees-list-header { background: var(--employee-bg-dark); color: var(--employee-text-on-dark); padding: 1.5rem 2rem; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: var(--employee-shadow-lg); border-right: 4px solid var(--employee-border-primary); } .employees-list-header h1 { padding-bottom: 12px; border-bottom: 3px solid var(--employee-border-primary); display: inline-block; margin-bottom: 16px; } .employees-list-header h1, .employees-list-header h2 { color: var(--employee-text-on-dark); } .table-card { background: var(--employee-bg-light); border-radius: 16px; box-shadow: var(--employee-shadow-md); overflow: hidden; border-right: 4px solid var(--employee-border-primary); } .table-card .card-header { background: var(--employee-bg-dark); color: var(--employee-text-on-dark); } /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 18. דף טופס (Add/Edit) ======================================== */ /* הוסר - .form-card מעוצב ב-components/cards.css גלובלית */ .form-card .card-header { background: var(--employee-bg-dark); color: var(--employee-text-on-dark); } /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ .form-text { color: var(--employee-text-muted); } /* בלוקים נוספים - כל הכרטיסים */ .search-card, .filter-card, .stats-card { /* כרטיסים ספציפיים - לא KPIs */ } /* ===== KPI Cards & Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* כרטיסי חיפוש וסינון */ .employees-search-panel, .search-filters-card { border-right: 4px solid var(--employee-border-primary); background: var(--employee-bg-light); border-radius: 16px; box-shadow: var(--employee-shadow-md); } /* ============================================ Equipment Module Styles ============================================ עיצוב ספציפי למודול Equipment ============================================ */ /* ========================================================= Equipment Index – Premium Layout מותאם ל-RTL, Bootstrap 5 + Tailwind utility classes מבוסס על עיצוב מודול הפרויקטים ========================================================= */ /* -------- בסיס עמוד -------- */ .equipment-page { --equipment-radius: var(--radius-lg); --equipment-radius-lg: var(--radius-xl); --equipment-gap: var(--spacing-4); --equipment-border-subtle: var(--border-primary); --equipment-bg-soft: var(--bg-secondary); --equipment-bg-card: var(--card-bg); --equipment-text-muted: var(--text-secondary); --equipment-shadow-soft: var(--shadow-lg); --equipment-shadow-subtle: var(--shadow-md); --equipment-accent: var(--primary-500); --equipment-accent-soft: var(--primary-100); --equipment-danger-soft: var(--error-100); --equipment-success-soft: var(--success-100); --equipment-warning-soft: var(--warning-100); --equipment-radius-pill: var(--radius-full); background: transparent; min-height: calc(100vh - calc(var(--spacing-12) * 3.75)); } /* -------- כותרת עליונה -------- */ .equipment-header { border-radius: var(--equipment-radius-lg) ; background: var(--card-bg) ; color: var(--text-primary) ; box-shadow: var(--shadow-md) ; border: 1px solid var(--border-primary) ; padding: var(--spacing-4) var(--spacing-5); position: relative; overflow: hidden; } .equipment-header::before { content: none ; display: none ; } .equipment-header-main { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6); align-items: center; justify-content: space-between; z-index: 1; } .equipment-title-wrap { display: flex; flex-direction: column; gap: var(--spacing-1); } .equipment-title { font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; margin: 0; color: var(--text-primary); } .equipment-title-icon { font-size: var(--text-2xl); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-500); } .equipment-subtitle { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); } .equipment-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } .equipment-header-actions .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .equipment-header-actions .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .equipment-header-actions .btn-action.btn-add i { font-size: var(--text-xs) ; } .equipment-empty-state .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .equipment-empty-state .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .equipment-empty-state .btn-action.btn-add i { font-size: var(--text-xs) ; } .btn-icon-ghost { border-radius: var(--radius-full); border: 1px solid var(--border-primary); width: calc(var(--spacing-6) * 1.5); height: calc(var(--spacing-6) * 1.5); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--text-sm); transition: all var(--transition-base); } .btn-icon-ghost:hover { border-color: var(--primary-500); color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200); transform: translateY(calc(var(--spacing-1) * -1)) scale(1.02); } /* -------- פילטרים מהירים -------- */ .equipment-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-top: var(--spacing-3); } .filter-chip { display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; padding: var(--spacing-1) var(--spacing-2) ; border-radius: var(--radius-sm) ; font-size: var(--text-xs) ; border: 1px solid var(--border-primary) ; color: var(--text-secondary) ; text-decoration: none ; background: var(--card-bg) ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .filter-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .filter-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .filter-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .equipment-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .equipment-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .equipment-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .equipment-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .equipment-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .equipment-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .equipment-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } /* -------- סטטיסטיקות / KPI -------- */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ✅ Mobile-First - 2 בשורה */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ margin-top: var(--spacing-5); } /* ===== Stat Cards (KPIs) ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ .stat-meta { display: flex; flex-direction: column; gap: var(--spacing-1); } .stat-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .stat-caption { font-size: var(--text-xs); color: var(--equipment-text-muted); } .stat-value-row { display: flex; align-items: baseline; justify-content: space-between; } .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); } .stat-mini-value { font-size: var(--text-xs); color: var(--equipment-text-muted); } .stat-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-top: var(--spacing-1); } .stat-subtitle { font-size: var(--text-xs); color: var(--equipment-text-muted); display: inline-flex; align-items: center; gap: var(--spacing-1); } .stat-subtitle i { font-size: var(--text-xs); } /* -------- מנוע חיפוש וסינון -------- */ .equipment-search-engine { border-radius: var(--equipment-radius); border: 1px solid var(--equipment-border-subtle); background: var(--card-bg); box-shadow: var(--shadow-md); } .equipment-search-engine .card-body { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); } .equipment-search-form { display: flex; flex-direction: column; gap: var(--spacing-1); } .equipment-search-main { min-height: 0; } .search-label { font-size: var(--text-xs); color: var(--text-secondary); } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--equipment-text-muted); } .search-input-wrapper .form-control { padding-inline-start: var(--spacing-7); font-size: var(--text-xs); border-radius: var(--radius-full); border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-200); } .equipment-search-status { min-width: calc(var(--spacing-12) * 5); } .status-chip-group { display: flex; flex-wrap: wrap; gap: var(--spacing-1); background: transparent; border-radius: 0; padding: 0; border: none; } .status-chip { border: 1px solid var(--border-primary) ; background: var(--card-bg) ; border-radius: var(--radius-sm) ; padding: var(--spacing-1) var(--spacing-2) ; font-size: var(--text-xs) ; color: var(--text-secondary) ; display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; cursor: pointer ; white-space: nowrap ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .status-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .status-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .status-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary) ; } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .status-chip[value="active"]:not(.status-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .status-chip[value="active"]:not(.status-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .status-chip[value="active"].status-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .status-chip[value="inactive"].status-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } .equipment-search-actions .btn-action.btn-advanced, .equipment-search-actions .btn-action.btn-filter { width: 22px ; height: 22px ; background: var(--card-bg) ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; padding: 0 ; display: inline-flex ; align-items: center ; justify-content: center ; cursor: pointer ; transition: all var(--transition-fast) ; box-shadow: none ; font-size: 0 ; min-width: calc(var(--spacing-6) * 0.92) ; font-weight: normal ; } .equipment-search-actions .btn-action.btn-advanced { color: var(--text-secondary) ; border-color: var(--border-primary) ; } .equipment-search-actions .btn-action.btn-advanced:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .equipment-search-actions .btn-action.btn-filter { color: var(--primary-500) ; border-color: var(--primary-50) ; } .equipment-search-actions .btn-action.btn-filter:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .equipment-search-actions .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .equipment-search-actions { gap: 0.25rem ; align-items: center ; } .equipment-search-advanced .form-select { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); border-radius: var(--radius-md); } .clear-filters-link { font-size: var(--text-xs); } .equipment-search-summary { font-size: var(--text-xs); color: var(--equipment-text-muted); } .equipment-search-summary strong { color: var(--text-primary); } /* -------- כרטיסי ציוד -------- */ .equipment-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); } .equipment-card { border-radius: var(--equipment-radius); background: var(--equipment-bg-card); border: 1px solid var(--border-primary); box-shadow: var(--equipment-shadow-subtle); overflow: hidden; } .equipment-card-inner { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); } .equipment-card-header { display: flex; justify-content: space-between; gap: var(--spacing-2); align-items: flex-start; border-bottom: 1px dashed var(--border-primary); padding-bottom: var(--spacing-2); } .equipment-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); } .equipment-card-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .equipment-card-code { font-size: 0.74rem; color: var(--equipment-text-muted); display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .equipment-status-badge .badge { font-size: 0.7rem; padding-block: 0.15rem; padding-inline: 0.5rem; } .equipment-card-body { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: 0.4rem; } .equipment-main-info { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-xs); } .equipment-info-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .equipment-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: var(--spacing-1); } .equipment-info-label i { font-size: var(--text-xs); color: var(--text-secondary); } .equipment-info-value { color: var(--text-primary); } .equipment-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .equipment-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: var(--spacing-2); margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--border-primary); } .equipment-actions-left { display: flex; flex-wrap: wrap; gap: var(--spacing-1); align-items: center; width: 100%; } /* לחצנים מודרניים וקומפקטיים */ .equipment-card-footer .btn-action, .equipment-table-actions .btn-action, .equipment-actions-left .btn-action { display: inline-flex ; align-items: center ; justify-content: center ; width: 24px ; height: 24px ; padding: 0 ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; font-size: 0 ; cursor: pointer ; transition: all var(--transition-fast) ; background: var(--card-bg) ; color: var(--text-secondary) ; box-shadow: none ; position: relative ; min-width: 24px ; font-weight: normal ; } .equipment-card-footer .btn-action:hover, .equipment-table-actions .btn-action:hover, .equipment-actions-left .btn-action:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; transform: none ; box-shadow: var(--shadow-xs) ; } .equipment-card-footer .btn-action:active, .equipment-table-actions .btn-action:active, .equipment-actions-left .btn-action:active { background: var(--bg-secondary) ; transform: scale(0.95) ; } .equipment-card-footer .btn-action i, .equipment-table-actions .btn-action i, .equipment-actions-left .btn-action i { font-size: 11px ; line-height: 1 ; display: block ; margin: 0 ; } .equipment-card-footer .btn-action.btn-view, .equipment-table-actions .btn-action.btn-view, .equipment-actions-left .btn-action.btn-view { color: var(--primary-500) ; border-color: var(--primary-50) ; background: var(--card-bg) ; } .equipment-card-footer .btn-action.btn-view:hover, .equipment-table-actions .btn-action.btn-view:hover, .equipment-actions-left .btn-action.btn-view:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; } .equipment-card-footer .btn-action.btn-edit, .equipment-table-actions .btn-action.btn-edit, .equipment-actions-left .btn-action.btn-edit { color: var(--warning-600) ; border-color: var(--warning-200) ; background: var(--card-bg) ; } .equipment-card-footer .btn-action.btn-edit:hover, .equipment-table-actions .btn-action.btn-edit:hover, .equipment-actions-left .btn-action.btn-edit:hover { background: var(--warning-50) ; border-color: var(--warning-600) ; color: var(--warning-600) ; } .equipment-card-footer .btn-action.btn-delete, .equipment-table-actions .btn-action.btn-delete, .equipment-actions-left .btn-action.btn-delete { color: var(--error-500) ; border-color: var(--error-200) ; background: var(--card-bg) ; } .equipment-card-footer .btn-action.btn-delete:hover, .equipment-table-actions .btn-action.btn-delete:hover, .equipment-actions-left .btn-action.btn-delete:hover { background: var(--error-50) ; border-color: var(--error-500) ; color: var(--error-600) ; } /* -------- מצב ללא ציוד -------- */ .equipment-empty-state { border-radius: var(--equipment-radius); background: var(--equipment-bg-card); border: 1px dashed rgba(148, 163, 184, 0.7); text-align: center; padding: 1.8rem 1rem; margin-top: 0.4rem; color: var(--text-secondary); } .equipment-empty-state i { color: var(--text-secondary); } .equipment-empty-state h3 { font-size: 1rem; margin-bottom: 0.15rem; color: var(--text-primary); } .equipment-empty-state p { font-size: var(--text-xs); margin-bottom: 0.6rem; } /* -------- טבלת ציוד -------- */ .equipment-table-wrapper { margin-top: 0.5rem; } .equipment-table-responsive { border-radius: var(--equipment-radius); overflow: hidden; } .equipment-table { font-size: var(--text-xs); margin-bottom: 0; } .equipment-table thead tr { background: var(--bg-secondary); } .equipment-table thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding-block: 0.45rem; padding-inline: 0.6rem; white-space: nowrap; } .equipment-table tbody td { padding-block: 0.35rem; padding-inline: 0.6rem; vertical-align: middle; border-color: var(--border-primary); } .equipment-td-ellipsis { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .equipment-table-actions { display: inline-flex; gap: var(--spacing-1); align-items: center; justify-content: center; } .equipment-table-actions .btn-action { width: 22px ; height: 22px ; } .equipment-table-actions .btn-action i { font-size: var(--text-xs) ; } .link-equipment-name { font-weight: 600; text-decoration: none; color: var(--text-primary); } .link-equipment-name:hover { color: var(--primary-500); } /* -------- הסברים -------- */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ .kpi-help-icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(67, 97, 238, 0.2); color: var(--primary-500); font-size: 11px; font-weight: bold; cursor: help; margin-right: 6px; margin-left: 4px; vertical-align: middle; transition: all 0.2s ease; flex-shrink: 0; border: 1px solid rgba(67, 97, 238, 0.3); } .kpi-help-icon:hover { background: rgba(67, 97, 238, 0.35); color: var(--primary-600); transform: scale(1.15); border-color: rgba(67, 97, 238, 0.5); } .kpi-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* -------- רספונסיביות (Mobile-First) -------- */ /* ברירת מחדל - מובייל (כבר מוגדר למעלה) */ @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .equipment-title { font-size: 1.5rem; } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .equipment-search-main { flex-direction: column; align-items: stretch; } .equipment-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .equipment-search-actions { align-items: stretch; } } } /* GANTT MODULE STYLES */ /* Extracted from previous version */ /* From chart.html */ /* הגדרות בסיסיות לגרף */ .gantt_container { font-family: 'Open Sans', sans-serif; width: 100%; height: 100%; min-height: 400px; } /* וידוא שהגרף מופיע */ #gantt { width: 100%; height: 520px; min-height: 400px; border: 1px solid var(--border-primary); background: var(--card-bg); } /* הגדרות עמודות */ .gantt_grid_head_cell { background-color: var(--bg-secondary); border-color: var(--border-primary); font-weight: 600; } .gantt_task_row { border-color: var(--border-primary); } .gantt_task_cell { border-color: var(--border-primary); } .gantt_task_line { background-color: var(--primary-500); border-color: var(--primary-500); } /* וידוא שהגרף נראה */ .gantt_grid, .gantt_task { display: block; visibility: visible; } /* הגדרות נוספות */ .gantt_layout_cell { border: 1px solid var(--border-primary); } .gantt_grid_data { background: var(--card-bg); } .gantt_task_bg { background: var(--primary-500); } .gantt_task_progress { background: var(--success-500); } /* צבעים למשימות לפי סטטוס */ .gantt_task_in_progress { background: var(--warning-500); border-color: var(--warning-500); } .gantt_task_completed { background: var(--success-500); border-color: var(--success-500); } .gantt_task_pending { background: var(--primary-500); border-color: var(--primary-500); } /* הגדרות נוספות לגרף */ .gantt_grid_scale { background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); } .gantt_task_scale { background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); } .gantt_grid_data { background: var(--card-bg); } .gantt_task_bg { border-radius: 3px; } .gantt_task_line { border-radius: 3px; } /* וידוא שהגרף נראה כמו גרף גנט */ .gantt_layout_content { background: var(--card-bg); } .gantt_layout_cell { border: 1px solid var(--border-primary); } /* הגדרות לטקסט בתוך הברים */ .vis-item { color: var(--card-bg); font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); padding: 2px 6px; border-radius: 3px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 20px; } .vis-item .vis-item-content { color: var(--card-bg); font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; var(--card-bg)-space: nowrap; } /* עיצוב קווי התלויות */ .vis-item.vis-selected { border-color: var(--warning-500); border-width: 2px; } /* עיצוב קווי התלויות */ .vis-timeline .vis-item.vis-dependency { border-color: var(--error-500); border-width: 2px; border-style: dashed; } /* עיצוב חצים של תלויות */ .vis-timeline .vis-item.vis-dependency::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid var(--error-500); border-top: 3px solid transparent; border-bottom: 3px solid transparent; } /* עיצוב קווי תלויות */ .dependency-line { background-color: rgba(220, 53, 69, 0.3); border: 2px dashed var(--error-500); border-radius: 0; z-index: 1; } /* עיצוב קווי תלויות עם חצים */ .dependency-line::after { content: '→'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: var(--error-500); font-weight: bold; font-size: 14px; background: var(--card-bg); padding: 2px; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--error-500); } .gantt_grid_head_cell { background: var(--bg-secondary); border-color: var(--border-primary); font-weight: 600; text-align: center; } .gantt_task_row { border-color: var(--border-primary); } .gantt_task_cell { border-color: var(--border-primary); } /* הגדרות לשמות משימות בצד */ .vis-labelset .vis-label, .vis-labelset .vis-label span { var(--card-bg)-space: nowrap; overflow: visible; text-overflow: unset; display: block; width: fit-content; min-width: 0; max-width: none; direction: rtl; } .vis-labelset .vis-label { padding: 8px 12px; font-weight: 500; color: var(--text-primary); background: var(--bg-secondary); border-right: 1px solid var(--border-primary); width: fit-content; min-width: 0; max-width: none; } .vis-panel.vis-left { width: auto; min-width: 0; max-width: none; flex: 0 1 auto; } .vis-labelset { width: auto; min-width: 0; max-width: none; } .vis-labelset .vis-label, .vis-labelset .vis-label span { var(--card-bg)-space: nowrap; width: auto; min-width: 0; max-width: none; overflow: visible; text-overflow: unset; } /* עיצוב החצים */ #dependency-arrows { pointer-events: none; } #dependency-arrows line { stroke: var(--error-500); stroke-width: 2; stroke-dasharray: 5, 5; } #dependency-arrows polygon { fill: var(--error-500); } /* וידוא שהחצים נראים מעל הגרף */ #dependency-arrows { z-index: 1000; } /* הסר את עיצוב האייקון dep-arrow-icon */ .dep-arrow-icon { color: var(--error-500); font-size: 18px; font-weight: bold; margin-left: 6px; vertical-align: middle; direction: ltr; display: inline-block; } .vis-item[title] { pointer-events: auto; } .vis-item[title]:hover:after { display: none; content: none; } /* From comments.html */ .timeline { position: relative; } .timeline::before { content: ''; position: absolute; right: 20px; top: 0; bottom: 0; width: 2px; background: var(--border-primary); } .timeline-item { position: relative; } .timeline-marker { position: relative; z-index: 1; } /* From edit_task.html */ /* עיצוב רשימת התלויות */ .dependencies-select { min-height: 150px; max-height: 250px; } .dependencies-select option { padding: 10px 15px; border-bottom: 1px solid var(--border-primary); font-size: 14px; } .dependencies-select option:checked { background-color: var(--primary-500); color: var(--card-bg); font-weight: bold; } .dependencies-select option[value=""] { font-style: italic; color: var(--text-secondary); background-color: var(--bg-secondary); } /* עיצוב בחירת צבע */ .form-control-color { width: 60px; height: 40px; } .color-preset-select { width: auto; } /* From project_detail.html */ .tree-folder { cursor: pointer; user-select: none; } .tree-folder i.fa-caret-down { font-size: 0.9em; margin-right: 0.3em; } .category-container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .category-info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .category-actions { margin-right: 10px; opacity: 0; transition: opacity 0.2s ease; } .category-container:hover .category-actions { opacity: 1; } .category-header { display: flex; align-items: center; gap: 8px; } .category-name { font-weight: 500; color: var(--text-primary); } .category-dates { margin-right: 24px; font-size: 0.85em; } .tree li { margin-bottom: 0.5em; } .btn-group-sm .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .task-item { padding: 0.5rem 0; border-bottom: 1px solid var(--border-primary); } .task-item:last-child { border-bottom: none; } .task-flex flex-wrap -mx-4 { display: grid; grid-template-columns: 30px 180px 120px 120px 100px 100px 1fr; gap: 0 10px; align-items: center; padding: 8px 0; } .task-icon { text-align: center; } .task-name-container { width: 180px; margin-right: 1rem; flex-shrink: 0; } .task-name { font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; var(--card-bg)-space: nowrap; display: block; } .task-details { display: grid; grid-template-columns: 180px 120px 120px 100px 100px 1fr; align-items: center; gap: 0 10px; width: 100%; var(--card-bg)-space: nowrap; } .task-start-date, .task-end-date, .task-duration { var(--card-bg)-space: nowrap; } .task-id-icon { display: inline-block; font-size: 0.8em; color: var(--text-secondary); font-weight: bold; margin-right: 4px; vertical-align: middle; } .legend-flex flex-wrap -mx-4 { display: grid; grid-template-columns: 30px 180px 120px 120px 100px 100px 1fr; align-items: center; padding: 8px 0 0 0; margin-bottom: 0.5em; color: var(--text-primary); font-size: 0.9em; font-weight: 500; gap: 0 10px; } .legend-icon { text-align: center; grid-column: 1; } .legend-name { grid-column: 2; width: 180px; } .legend-start { grid-column: 3; width: 120px; } .legend-end { grid-column: 4; width: 120px; } .legend-duration { grid-column: 5; width: 100px; } .legend-dependency { grid-column: 6; width: 100px; } .legend-actions { grid-column: 7; text-align: center; } .fa-caret-down { transition: transform 0.3s ease; } [id^="cat-"] { transition: all 0.3s ease; } @media (max-width: 768px) { .task-flex flex-wrap -mx-4 { grid-template-columns: 1fr; gap: 8px; text-align: right; } .task-icon, .task-details { text-align: right; } .task-details { flex-direction: column; align-items: flex-start; } .task-flex flex-wrap -mx-4>div { padding: 2px 0; } } /* ========= עיצוב חדש למשימות ========= */ /* כותרות קבועות */ .sticky-header { position: sticky; top: 0; z-index: 1000; background: var(--card-bg); border-bottom: 1px solid var(--border-primary); } /* עיצוב תיקיות */ .category-header-container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .category-header { flex: 1; cursor: pointer; user-select: none; } .category-actions { margin-right: 10px; opacity: 0; transition: opacity 0.2s ease; } .category-header-container:hover .category-actions { opacity: 1; } .sticky-table-header { position: sticky; top: 60px; z-index: 999; background: var(--bg-secondary); border-bottom: 2px solid var(--border-primary); } /* מבנה העץ */ .tree-container { background: var(--card-bg); max-height: 70vh; overflow-y: auto; } .tree-folder-root { cursor: pointer; user-select: none; padding: 12px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); transition: background-color 0.2s ease; } .tree-folder-root:hover { background: var(--border-primary); } .folder-info { display: flex; flex-direction: column; gap: 4px; } .folder-header { display: flex; align-items: center; gap: 8px; } .folder-name { font-weight: 600; color: var(--text-primary); font-size: 1.1em; } .folder-dates { margin-right: 24px; font-size: 0.85em; } .category-item { border-bottom: 1px solid var(--border-primary); } .category-header { cursor: pointer; user-select: none; padding: 10px 16px 10px 32px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); transition: background-color 0.2s ease; } .category-header:hover { background: var(--bg-secondary); } .category-info { display: flex; flex-direction: column; gap: 4px; } .category-main { display: flex; align-items: center; gap: 8px; } .category-name { font-weight: 500; color: var(--text-primary); } .category-dates { margin-right: 24px; font-size: 0.85em; } .category-tasks { background: var(--card-bg); } /* כותרות הטבלה */ .table-header { background: var(--bg-secondary); border-bottom: 2px solid var(--border-primary); padding: 12px 16px; } .table-flex flex-wrap -mx-4 { display: grid; grid-template-columns: 4px 40px 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 12px; align-items: center; font-weight: 600; color: var(--text-secondary); font-size: 0.9em; text-align: center; } /* יישור ספציפי לכל עמודה */ .px-4-icon { text-align: center; } .px-4-id { text-align: center; } .px-4-name { text-align: right; } .px-4-status { text-align: center; } .px-4-progress { text-align: center; } .px-4-priority { text-align: center; } .px-4-start { text-align: center; } .px-4-end { text-align: center; } .px-4-duration { text-align: center; } .px-4-assigned { text-align: center; } .px-4-dependency { text-align: center; } .px-4-actions { text-align: center; } /* שורות משימות */ .task-flex flex-wrap -mx-4 { display: grid; grid-template-columns: 4px 40px 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-primary); background: var(--card-bg); transition: background-color 0.2s ease; } .task-flex flex-wrap -mx-4:hover { background: var(--bg-secondary); } .task-color-bar { width: 4px; height: 100%; border-radius: 2px; } .task-id { font-weight: 600; color: var(--primary-500); font-size: 0.9em; text-align: center; } .task-name { font-weight: 500; color: var(--text-primary); text-align: right; } .task-status { text-align: center; } .task-progress { text-align: center; } .task-priority { text-align: center; } .task-start { text-align: center; } .task-end { text-align: center; } .task-duration { text-align: center; } .task-assigned { text-align: center; } .task-dependency { text-align: center; } .task-actions { text-align: center; } /* באדג'ים */ .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 500; color: var(--card-bg); text-align: center; } .status-pending { background-color: var(--warning-500); } .status-in_progress { background-color: var(--primary-500); } .status-completed { background-color: var(--success-500); } .priority-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 500; color: var(--card-bg); text-align: center; } .priority-low { background-color: var(--text-secondary); } .priority-medium { background-color: var(--info-500); } .priority-high { background-color: var(--error-500); } /* פרוגרס בר */ .progress-bar { position: relative; width: 80px; height: 18px; background-color: var(--border-primary); border-radius: 9px; overflow: hidden; margin: 0 auto; } .progress-fill { height: 100%; border-radius: 9px; transition: width 0.3s ease; } .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.7em; font-weight: 600; color: var(--card-bg); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } /* עמודות מידע */ .task-start, .task-end, .task-duration, .task-assigned, .task-dependency { font-size: 0.85em; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; } .task-actions { display: flex; gap: 4px; } .task-actions .btn { padding: 4px 8px; font-size: 0.8em; } /* אייקונים וחצים */ .arrow-icon { transition: transform 0.3s ease; font-size: 0.9em; margin-right: 0.3em; } [id^="cat-"] { transition: all 0.3s ease; } /* התאמה למובייל */ @media (max-width: 768px) { .table-flex flex-wrap -mx-4, .task-flex flex-wrap -mx-4 { grid-template-columns: 1fr; gap: 8px; text-align: right; } .task-flex flex-wrap -mx-4 { padding: 8px; } .task-actions { justify-content: flex-end; } } /* From tasks.html */ /* הערה: כל העיצובים של tasks.html (חוץ מ-.stat-item) זהים ל-project_detail.html (שורה 16) */ /* הוסרו כפילויות - העיצובים נמצאים בשורה 16 */ .stat-item { padding: 15px; border-radius: 8px; background: var(--bg-secondary); transition: all 0.3s ease; } .stat-item:hover { background: var(--border-primary); transform: translateY(-2px); } /* From test_chart.html */ #gantt { height: 400px; width: 100%; } /* Progress bars height fix */ .gantt-progress-height { height: 6px; } .gantt-progress-small { width: 60px; height: 6px; } /* Gantt chart container */ .gantt-chart-container { height: 520px; width: 100%; border: 1px solid var(--border-primary); } /* Timeline marker */ .timeline-marker .bg-primary.rounded-full { width: 40px; height: 40px; } /* Edit milestone card */ .edit-milestone-card { max-width: 500px; margin: auto; } /* Category tasks - hidden by default */ .category-tasks { display: none; } .category-tasks.show { display: block; } /* Forms inline */ .gantt-module td form { display: inline-block; } /* ===== project_detail.html - Modern Tabs and Project Info Styles ===== */ /* עיצוב טאבים מודרני */ .gantt-view-modern-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border-primary) 100%); border-radius: 20px; border: 1px solid var(--border-primary); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); margin-bottom: 1.5rem; } .gantt-tab-modern { border: none; background: transparent; border-radius: 999px; padding: 0.6rem 1.3rem; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease; } .gantt-tab-modern:hover { background: rgba(var(--primary-500-rgb), 0.08); color: var(--primary-500); transform: translateY(-2px); } .gantt-tab-modern.active { background: linear-gradient(135deg, var(--primary-500), var(--primary-600)); color: var(--text-white); box-shadow: 0 8px 20px rgba(var(--primary-500-rgb), 0.4); font-weight: 600; } .gantt-tab-content { display: none; animation: fadeIn 0.4s ease; } .gantt-tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* כרטיס פרטי פרויקט */ .project-info-card { background: var(--card-bg); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); margin-bottom: 1.5rem; } .project-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .info-item { display: flex; flex-direction: column; } .info-label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 500; } .info-value { font-size: 1rem; color: var(--text-primary); font-weight: 600; } /* טבלאות משימות */ .tasks-table { background: var(--card-bg); border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .task-row { transition: all 0.2s ease; } .task-row:hover { background: var(--bg-secondary); } .category-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); color: var(--text-white); font-weight: 600; padding: 0.75rem 1rem; } .subcategory-header { background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%); color: var(--text-white); font-weight: 500; padding: 0.6rem 1rem; font-size: 0.95rem; } /* Empty state */ .empty-state { text-align: center; padding: 3rem 1rem; background: var(--card-bg); border-radius: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .empty-state-icon { font-size: 4rem; color: var(--text-secondary); margin-bottom: 1rem; } .empty-state-title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .empty-state-description { color: var(--text-secondary); margin-bottom: 1.5rem; } /* Gantt Task Item with Dynamic Border Color */ .gantt-task-item { background: var(--card-bg); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: all 0.2s ease; } /* Gantt Notification Item */ .gantt-notification-item { background: var(--card-bg); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .gantt-notification-item.unread { border-right: 4px solid var(--primary-500); } /* Gantt Project Tree */ .gantt-project-tree { background: var(--bg-secondary); border-radius: 1rem; padding: 1.5rem; } .gantt-project-root { background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%); color: var(--text-white); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.3); } .gantt-project-root-icon { font-size: 1.5rem; } .gantt-project-root-title { font-size: 1.1rem; } /* Gantt Category Container */ .gantt-category-container { background: var(--card-bg); border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .gantt-category-header { cursor: pointer; } .gantt-arrow-icon { transition: transform 0.3s ease; } /* Gantt Table Header */ .gantt-table-header { background: var(--bg-secondary); padding: 0.5rem 1rem; border-radius: 0.5rem; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.875rem; } /* Gantt Progress Bars */ .gantt-progress-lg { height: 25px; } .gantt-progress-md { height: 20px; } /* Gantt Drag Handle */ .gantt-drag-handle { color: var(--text-secondary); cursor: grab; } /* ============================================ Groups Module Styles ============================================ עיצוב ספציפי למודול Groups כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* ===== add.html, edit.html - Style tag 1 ===== */ /* הערה: עיצוב validation מאוחד (אוחד מ-add.html ו-edit.html) */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* ===== Inline styles - תיקון: העברת inline styles ל-CSS ===== */ /* תיקון: display:inline על forms (מ-list.html ו-members.html בגרסה הקודמת) */ form[style*="display:inline"] { display: inline; } /* או יותר ספציפי - forms בתוך td */ td form { display: inline; } } /* ============================================ Integrations Advanced Module Styles ============================================ עיצוב ספציפי למודול Integrations Advanced כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* Integrations Advanced Module - General Styles */ /* GPS Map Container */ #gpsMap { height: 400px; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; } /* Responsive */ @media (max-width: 768px) { #gpsMap { height: 300px; } } } /* INVOICES MODULE STYLES */ /* Extracted from previous version */ /* From create_invoice.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ .invoice-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-primary); max-width: 1400px; margin: 0 auto; width: 100%; overflow: hidden; } .invoice-card-header { background: linear-gradient(135deg, var(--primary-500), var(--info-500)); color: var(--text-inverse); padding: var(--spacing-5) var(--spacing-6) var(--spacing-4); border-bottom: none; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); } .invoice-card-title { display: flex; align-items: center; gap: var(--spacing-2); } .invoice-card-title-icon { width: 2.4rem; height: 2.4rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); box-shadow: var(--shadow-sm); } .invoice-card-title h1 { font-size: var(--text-xl); margin: 0; font-weight: 700; color: var(--text-inverse); } .invoice-card-title small { display: block; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.85); font-weight: 400; margin-top: var(--spacing-1); } .badge-soft { font-size: var(--text-xs); font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: var(--radius-full); padding: var(--spacing-1) var(--spacing-3); display: inline-flex; align-items: center; gap: var(--spacing-1); border: 1px solid rgba(255, 255, 255, 0.3); } .invoice-card-body { padding: var(--spacing-6) var(--spacing-6) var(--spacing-5); } .section-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spacing-2); display: flex; align-items: center; gap: var(--spacing-2); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; } .section-title i { font-size: var(--text-sm); color: var(--primary); } .section-subtitle { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--spacing-4); } .form-section { margin-bottom: var(--spacing-5); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-lg); background: var(--bg-secondary); border: 1px dashed var(--border-primary); } /* ===== Forms ===== */ /* הערה: כל העיצובים של .form-label .required, .btn-sm-custom נמצאים ב-components/forms.css ו-components/buttons.css (אוחד עם add.html) */ .invoice-card-footer { padding: var(--spacing-4) var(--spacing-6) var(--spacing-5); border-top: 1px solid var(--border-primary); background: var(--bg-secondary); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-3); } /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ .invoice-item { background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--spacing-4); margin-bottom: var(--spacing-4); } .summary-card { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: var(--spacing-4); border: 1px dashed var(--border-primary); } /* From edit_invoice.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ .invoice-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-primary); max-width: 1400px; margin: 0 auto; width: 100%; overflow: hidden; } .invoice-card-header { background: linear-gradient(135deg, var(--primary-500), var(--info-500)); color: var(--text-inverse); padding: var(--spacing-5) var(--spacing-6) var(--spacing-4); border-bottom: none; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); } .invoice-card-title { display: flex; align-items: center; gap: var(--spacing-2); } .invoice-card-title-icon { width: 2.4rem; height: 2.4rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); box-shadow: var(--shadow-sm); } .invoice-card-title h1 { font-size: var(--text-xl); margin: 0; font-weight: 700; color: var(--text-inverse); } .invoice-card-title small { display: block; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.85); font-weight: 400; margin-top: var(--spacing-1); } .badge-soft { font-size: var(--text-xs); font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: var(--radius-full); padding: var(--spacing-1) var(--spacing-3); display: inline-flex; align-items: center; gap: var(--spacing-1); border: 1px solid rgba(255, 255, 255, 0.3); } .invoice-card-body { padding: var(--spacing-6) var(--spacing-6) var(--spacing-5); } .section-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spacing-2); display: flex; align-items: center; gap: var(--spacing-2); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; } .section-title i { font-size: var(--text-sm); color: var(--primary); } .section-subtitle { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--spacing-4); } .form-section { margin-bottom: var(--spacing-5); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-lg); background: var(--bg-secondary); border: 1px dashed var(--border-primary); } /* ===== Forms ===== */ /* הערה: כל העיצובים של .form-label .required, .btn-sm-custom נמצאים ב-components/forms.css ו-components/buttons.css (אוחד עם add.html) */ .invoice-card-footer { padding: var(--spacing-4) var(--spacing-6) var(--spacing-5); border-top: 1px solid var(--border-primary); background: var(--bg-secondary); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-3); } /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* From index.html */ /* אייקון עזרה קטן */ .kpi-help-icon { display: inline-block; width: var(--spacing-3); height: var(--spacing-3); line-height: var(--spacing-3); text-align: center; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); font-size: var(--text-xs); font-weight: bold; cursor: help; margin-right: var(--spacing-1); vertical-align: middle; transition: all var(--transition-base); } .kpi-help-icon:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } /* Tooltip */ .kpi-tooltip { position: absolute; z-index: 1000; max-width: calc(var(--spacing-6) * 17); padding: var(--spacing-2) var(--spacing-3); background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-xs); line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* From view_invoice.html */ .invoice-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--info-500) 100%); color: var(--text-inverse); padding: var(--spacing-6) var(--spacing-7); border-radius: var(--radius-lg); margin-bottom: var(--spacing-6); box-shadow: var(--shadow-lg); } .default-icon-large { width: calc(var(--spacing-6) * 8); height: calc(var(--spacing-6) * 8); border-radius: var(--radius-full); border: var(--spacing-1) solid var(--card-bg); box-shadow: var(--shadow-lg); background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; font-size: var(--text-3xl); color: var(--text-inverse); } .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--info-500)); color: var(--text-inverse); padding: var(--spacing-3) var(--spacing-5); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: 600; } .section-title { font-weight: 700; font-size: var(--text-lg); border-right: var(--spacing-1) solid var(--primary-500); padding-right: var(--spacing-2); margin-bottom: var(--spacing-4); } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Status Badges ===== */ /* הערה: כל העיצובים של .status-badge נמצאים ב-components-enhanced.css */ .status-pending { background: var(--warning-50); color: var(--warning-900); } .status-paid { background: var(--success-50); color: var(--success-900); } .status-overdue { background: var(--error-50); color: var(--error-900); } .stat-box { margin-bottom: var(--spacing-4); } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: var(--text-sm); opacity: 0.75; } /* ===== Cards ===== */ /* הוסר - cards מעוצבים ב-components/cards.css גלובלית */ /* Form inputs height fix - for edit_budget.html and create_budget.html */ .invoices-module .form-control:not(.form-control-lg) { height: 36px; } .invoices-module .form-control-lg { height: 48px; } .invoices-module textarea.form-control { min-height: 48px; } /* Badge styles - for index.html and invoices_list.html */ .invoices-module table .badge-primary { font-size: var(--text-sm); padding: var(--spacing-2) var(--spacing-3); background-color: var(--primary-500); color: var(--text-inverse); } .invoices-module table .badge-success, .invoices-module table .badge-secondary, .invoices-module table .badge-warning, .invoices-module table .badge-info { font-size: var(--text-xs); padding: var(--spacing-1) var(--spacing-2); } .invoices-module table .text-success.font-weight-bold { font-size: var(--text-base); } /* Inline forms */ .invoices-module form#deleteForm { display: inline; } /* -------- טבלת תקציבים - עיצוב כמו בחוזים -------- */ #budgetTable thead tr { background: var(--bg-secondary); } #budgetTable thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding: var(--spacing-1) var(--spacing-2); white-space: nowrap; font-size: var(--text-xs); } #budgetTable tbody td { padding: var(--spacing-1) var(--spacing-2); vertical-align: middle; border-color: var(--border-primary); font-size: var(--text-xs); } #budgetTable tbody tr { transition: background-color var(--transition-base); } #budgetTable tbody tr:hover { background-color: var(--bg-secondary); } #budgetTable .text-decoration-none { text-decoration: none; } #budgetTable .text-decoration-none:hover { color: var(--primary-500); } #budgetTable .text-dark { color: var(--text-primary); } #budgetTable .text-dark:hover { color: var(--primary-500); } /* MATERIALS MODULE STYLES */ /* Extracted from previous version */ /* From add.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper, Material Card, Card Header, Card Title, Card Title Icon, Card Body ===== */ /* הערה: כל העיצובים של .page-wrapper, .material-card, .material-card-header, .material-card-title, .material-card-title-icon, .material-card-body נמצאים ב-components/forms.css */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ .input-group-text { font-size: var(--text-xs); background-color: var(--primary-soft); border-color: var(--border-primary); border-right: none; border-radius: var(--input-radius) 0 0 var(--input-radius); } .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* הוסר - .form-header-explanation מעוצב ב-modules/projects.css גלובלית */ /* הוסר - .form-section-explanation מעוצב ב-modules/projects.css גלובלית */ /* ===== Material Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .material-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ .image-preview { margin-top: 0.75rem; max-width: 200px; max-height: 200px; border-radius: 0.5rem; border: 1px solid var(--border-primary); } /* From edit.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper, Material Card, Card Header, Card Title, Card Title Icon, Card Body ===== */ /* הערה: כל העיצובים של .page-wrapper, .material-card, .material-card-header, .material-card-title, .material-card-title-icon, .material-card-body נמצאים ב-components/forms.css (אוחד עם add.html) */ /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ /* הערה: .badge-soft ו-.input-group-text כבר מוגדרים למעלה (מ-add.html) */ .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* הוסר - .form-header-explanation מעוצב ב-modules/projects.css גלובלית */ /* הוסר - .form-section-explanation מעוצב ב-modules/projects.css גלובלית */ /* ===== Material Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .material-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ .image-preview { margin-top: 0.75rem; max-width: 200px; max-height: 200px; border-radius: 0.5rem; border: 1px solid var(--border-primary); } .current-image { margin-top: 0.75rem; max-width: 200px; max-height: 200px; border-radius: 0.5rem; border: 1px solid var(--border-primary); } /* From index.html */ .info-box-explanation { background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); border-right: 4px solid var(--primary-500); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--primary-700); box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1); } /* -------- Materials Index Page Styles -------- */ /* בסיס עמוד */ .materials-page { --materials-radius: var(--radius-lg); --materials-radius-lg: var(--radius-xl); --materials-gap: var(--spacing-4); --materials-border-subtle: var(--border-primary); --materials-bg-soft: var(--bg-secondary); --materials-bg-card: var(--card-bg); --materials-text-muted: var(--text-secondary); --materials-shadow-soft: var(--shadow-lg); --materials-shadow-subtle: var(--shadow-md); --materials-accent: var(--primary-500); --materials-accent-soft: var(--primary-100); --materials-danger-soft: var(--error-100); --materials-success-soft: var(--success-100); --materials-warning-soft: var(--warning-100); --materials-radius-pill: var(--radius-full); background: transparent; min-height: calc(100vh - calc(var(--spacing-12) * 3.75)); } /* כותרת עליונה */ .materials-header { border-radius: var(--materials-radius-lg); background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); color: var(--text-primary); box-shadow: var(--shadow-md); border-right: var(--spacing-1) solid var(--primary-500); border-top: 1px solid var(--primary-200); border-bottom: 1px solid var(--primary-200); border-left: 1px solid var(--primary-200); padding: var(--spacing-5) var(--spacing-5); position: relative; overflow: hidden; } .materials-header::before { content: none; display: none; } .materials-header-main { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6); align-items: center; justify-content: space-between; z-index: 1; } .materials-title-wrap { display: flex; flex-direction: column; gap: var(--spacing-1); } .materials-title { font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; margin: 0; color: var(--text-primary); } .materials-title-icon { font-size: var(--text-2xl); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-500); } .materials-subtitle { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); } .materials-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } .materials-header-actions .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .materials-header-actions .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .materials-header-actions .btn-action.btn-add i { font-size: var(--text-xs) ; } .materials-empty-state .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .materials-empty-state .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .materials-empty-state .btn-action.btn-add i { font-size: var(--text-xs) ; } .btn-icon-ghost { border-radius: var(--radius-full); border: 1px solid var(--border-primary); width: calc(var(--spacing-6) * 1.5); height: calc(var(--spacing-6) * 1.5); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--text-sm); transition: all var(--transition-base); } .btn-icon-ghost:hover { border-color: var(--primary-500); color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200); transform: translateY(calc(var(--spacing-1) * -1)) scale(1.02); } /* פילטרים מהירים */ .materials-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-top: var(--spacing-3); } .filter-chip { display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; padding: var(--spacing-1) var(--spacing-2) ; border-radius: var(--radius-sm) ; font-size: var(--text-xs) ; border: 1px solid var(--border-primary) ; color: var(--text-secondary) ; text-decoration: none ; background: var(--card-bg) ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .filter-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .filter-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .filter-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .materials-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .materials-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .materials-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .materials-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .materials-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .materials-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .materials-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } /* סטטיסטיקות / KPI */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ✅ Mobile-First - 2 בשורה */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ margin-top: var(--spacing-5); } .stat-meta { display: flex; flex-direction: column; gap: var(--spacing-1); } .stat-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .stat-caption { font-size: var(--text-xs); color: var(--materials-text-muted); } .stat-value-row { display: flex; align-items: baseline; justify-content: space-between; } .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); } .stat-mini-value { font-size: var(--text-xs); color: var(--materials-text-muted); } .stat-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-top: var(--spacing-1); } .stat-subtitle { font-size: var(--text-xs); color: var(--materials-text-muted); display: inline-flex; align-items: center; gap: var(--spacing-1); } .stat-subtitle i { font-size: var(--text-xs); } /* מנוע חיפוש וסינון */ .materials-search-engine { border-radius: var(--materials-radius); border: 1px solid var(--materials-border-subtle); background: var(--card-bg); box-shadow: var(--shadow-md); } .materials-search-engine .card-body { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); } .materials-search-form { display: flex; flex-direction: column; gap: var(--spacing-1); } .materials-search-main { min-height: 0; } .search-label { font-size: var(--text-xs); color: var(--text-secondary); } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--materials-text-muted); } .search-input-wrapper .form-control { padding-inline-start: var(--spacing-7); font-size: var(--text-xs); border-radius: var(--radius-full); border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-200); } .materials-search-status { min-width: calc(var(--spacing-12) * 5); } .status-chip-group { display: flex; flex-wrap: wrap; gap: var(--spacing-1); background: transparent; border-radius: 0; padding: 0; border: none; } .status-chip { border: 1px solid var(--border-primary) ; background: var(--card-bg) ; border-radius: var(--radius-sm) ; padding: var(--spacing-1) var(--spacing-2) ; font-size: var(--text-xs) ; color: var(--text-secondary) ; display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; cursor: pointer ; white-space: nowrap ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .status-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .status-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .status-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary) ; } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .status-chip[value="active"]:not(.status-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .status-chip[value="active"]:not(.status-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .status-chip[value="active"].status-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .status-chip[value="inactive"].status-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } .materials-search-actions .btn-action.btn-advanced, .materials-search-actions .btn-action.btn-filter { width: 22px ; height: 22px ; background: var(--card-bg) ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; padding: 0 ; display: inline-flex ; align-items: center ; justify-content: center ; cursor: pointer ; transition: all var(--transition-fast) ; box-shadow: none ; font-size: 0 ; min-width: calc(var(--spacing-6) * 0.92) ; font-weight: normal ; } .materials-search-actions .btn-action.btn-advanced { color: var(--text-secondary) ; border-color: var(--border-primary) ; } .materials-search-actions .btn-action.btn-advanced:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .materials-search-actions .btn-action.btn-filter { color: var(--primary-500) ; border-color: var(--primary-50) ; } .materials-search-actions .btn-action.btn-filter:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .materials-search-actions .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .materials-search-actions { gap: 0.25rem ; align-items: center ; } .materials-search-advanced .form-select { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); border-radius: var(--radius-md); } .clear-filters-link { font-size: var(--text-xs); } .materials-search-summary { font-size: var(--text-xs); color: var(--materials-text-muted); } .materials-search-summary strong { color: var(--text-primary); } /* כרטיסי חומרים */ .materials-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); } .contractor-card { border-radius: var(--materials-radius); background: var(--materials-bg-card); border: 1px solid var(--border-primary); box-shadow: var(--materials-shadow-subtle); overflow: hidden; } .contractor-card-inner { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); } .contractor-card-header { display: flex; justify-content: space-between; gap: var(--spacing-2); align-items: flex-start; border-bottom: 1px dashed var(--border-primary); padding-bottom: var(--spacing-2); } .contractor-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); } .contractor-card-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .contractor-card-code { font-size: var(--text-xs); color: var(--materials-text-muted); display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .contractor-status-badge .badge { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); } .contractor-card-body { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-2); } .contractor-main-info { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-xs); } .contractor-info-row { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; } .contractor-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: var(--spacing-1); } .contractor-info-label i { font-size: var(--text-xs); color: var(--text-secondary); } .contractor-info-value { color: var(--text-primary); } .contractor-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contractor-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-2); padding-top: var(--spacing-2); border-top: 1px solid var(--border-primary); } .contractor-actions-left { display: flex; flex-wrap: wrap; gap: var(--spacing-1); align-items: center; width: 100%; } .contractor-card-footer .btn-action, .materials-table-actions .btn-action, .contractor-actions-left .btn-action { display: inline-flex ; align-items: center ; justify-content: center ; width: var(--spacing-6) ; height: var(--spacing-6) ; padding: 0 ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; font-size: 0 ; cursor: pointer ; transition: all var(--transition-fast) ; background: var(--card-bg) ; color: var(--text-secondary) ; box-shadow: none ; position: relative ; min-width: var(--spacing-6) ; font-weight: normal ; } .contractor-card-footer .btn-action:hover, .materials-table-actions .btn-action:hover, .contractor-actions-left .btn-action:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; transform: none ; box-shadow: var(--shadow-xs) ; } .contractor-card-footer .btn-action:active, .materials-table-actions .btn-action:active, .contractor-actions-left .btn-action:active { background: var(--bg-secondary) ; transform: scale(0.95) ; } .contractor-card-footer .btn-action i, .materials-table-actions .btn-action i, .contractor-actions-left .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .contractor-card-footer .btn-action.btn-view, .materials-table-actions .btn-action.btn-view, .contractor-actions-left .btn-action.btn-view { color: var(--primary-500) ; border-color: var(--primary-50) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-view:hover, .materials-table-actions .btn-action.btn-view:hover, .contractor-actions-left .btn-action.btn-view:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; } .contractor-card-footer .btn-action.btn-edit, .materials-table-actions .btn-action.btn-edit, .contractor-actions-left .btn-action.btn-edit { color: var(--warning-600) ; border-color: var(--warning-200) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-edit:hover, .materials-table-actions .btn-action.btn-edit:hover, .contractor-actions-left .btn-action.btn-edit:hover { background: var(--warning-50) ; border-color: var(--warning-600) ; color: var(--warning-600) ; } .contractor-card-footer .btn-action.btn-delete, .materials-table-actions .btn-action.btn-delete, .contractor-actions-left .btn-action.btn-delete { color: var(--error-500) ; border-color: var(--error-200) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-delete:hover, .materials-table-actions .btn-action.btn-delete:hover, .contractor-actions-left .btn-action.btn-delete:hover { background: var(--error-50) ; border-color: var(--error-500) ; color: var(--error-600) ; } /* מצב ללא חומרים */ .materials-empty-state { border-radius: var(--materials-radius); background: var(--materials-bg-card); border: 1px dashed var(--border-primary); text-align: center; padding: var(--spacing-7) var(--spacing-4); margin-top: var(--spacing-2); color: var(--text-secondary); } .materials-empty-state i { color: var(--text-secondary); } .materials-empty-state h3 { font-size: var(--text-base); margin-bottom: var(--spacing-1); color: var(--text-primary); } .materials-empty-state p { font-size: var(--text-xs); margin-bottom: var(--spacing-3); } /* טבלת חומרים */ .materials-table-wrapper { margin-top: var(--spacing-2); } .materials-table-responsive { border-radius: var(--materials-radius); overflow: hidden; } .materials-table { font-size: var(--text-xs); margin-bottom: 0; } .materials-table thead tr { background: var(--bg-secondary); } .materials-table thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding-block: var(--spacing-2); padding-inline: var(--spacing-3); white-space: nowrap; } .materials-table tbody td { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); vertical-align: middle; border-color: var(--border-primary); } .materials-td-ellipsis { max-width: calc(var(--spacing-12) * 4.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .materials-table-actions { display: inline-flex; gap: var(--spacing-1); align-items: center; justify-content: center; } .materials-table-actions .btn-action { width: calc(var(--spacing-6) * 0.92) ; height: calc(var(--spacing-6) * 0.92) ; } .materials-table-actions .btn-action i { font-size: var(--text-xs) ; } .link-contractor-name { font-weight: 600; text-decoration: none; color: var(--text-primary); } .link-contractor-name:hover { color: var(--primary-500); } /* אייקון עזרה קטן - גרסה משופרת */ .kpi-help-icon { display: inline-block; width: var(--spacing-4); height: var(--spacing-4); line-height: var(--spacing-4); text-align: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-500); font-size: var(--text-xs); font-weight: bold; cursor: help; margin-right: var(--spacing-2); margin-left: var(--spacing-1); vertical-align: middle; transition: all var(--transition-normal); flex-shrink: 0; border: 1px solid var(--primary-200); } .kpi-help-icon:hover { background: var(--primary-200); color: var(--primary-600); transform: scale(1.15); border-color: var(--primary-300); } /* Tooltip - גרסה משופרת */ .kpi-tooltip { position: absolute; z-index: 1000; max-width: calc(var(--spacing-12) * 5.83); padding: var(--spacing-3) var(--spacing-3); background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal), transform var(--transition-normal); transform: translateY(calc(var(--spacing-2) * -1.25)); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.5); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.75); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--border-primary); } /* רספונסיביות (Mobile-First) */ /* ברירת מחדל - מובייל (כבר מוגדר למעלה) */ @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .materials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .materials-title { font-size: var(--text-2xl); } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .materials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .materials-search-main { flex-direction: column; align-items: stretch; } .materials-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .materials-search-actions { align-items: stretch; } } /* From print.html */ @media print { .no-print { display: none; } body { margin: 0; padding: 20px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); margin: 0; padding: 20px; background: var(--card-bg); } .header { text-align: center; border-bottom: 3px solid var(--primary-500); padding-bottom: 20px; margin-bottom: 30px; } .material-title { font-size: 28px; font-weight: bold; color: var(--primary-500); margin-bottom: 10px; } .material-sku { font-size: 18px; color: var(--text-secondary); } .section { margin-bottom: 30px; page-break-inside: avoid; } .section-title { font-size: 20px; font-weight: bold; color: var(--primary-500); border-bottom: 2px solid var(--primary-500); padding-bottom: 5px; margin-bottom: 15px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .info-item { margin-bottom: 10px; } .info-label { font-weight: bold; color: var(--text-secondary); } .info-value { color: var(--text-primary); } .stock-table { width: 100%; border-collapse: collapse; margin-top: 15px; } .stock-table th, .stock-table td { border: 1px solid var(--border-primary); padding: 8px; text-align: right; } .stock-table th { background-color: var(--bg-secondary); font-weight: bold; } .footer { margin-top: 50px; text-align: center; font-size: 14px; color: var(--text-secondary); } .print-button { position: fixed; top: 20px; right: 20px; background: var(--primary-500); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } .print-button:hover { background: var(--primary-700); } .back-button { position: fixed; top: 20px; left: 20px; background: var(--text-secondary); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; } .back-button:hover { background: var(--text-secondary); color: var(--text-inverse); text-decoration: none; } .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; } .status-active { background-color: var(--success-50); color: var(--success-900); } .status-inactive { background-color: var(--error-50); color: var(--error-900); } .stock-warning { background-color: var(--warning-50); color: var(--warning-900); } .stock-danger { background-color: var(--error-50); color: var(--error-900); } /* From view.html */ .material-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .default-icon-large, .default-avatar-large נמצאים ב-components/cards.css */ /* .material-avatar-large נשאר ספציפי למודול */ /* Form Error List Styles */ /* ===== Form Errors List - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-errors-list נמצא ב-components/forms.css */ /* Image Preview - hidden by default, shown via JavaScript */ #imagePreview { display: none; } /* Material Image Styles */ .material-image-thumbnail { max-width: 150px; max-height: 150px; } .material-image-placeholder { width: 150px; height: 150px; } /* Material Quantity Display Styles */ .material-quantity-current { font-size: 1.2rem; color: var(--primary-500); } .material-quantity-available { font-size: 1.2rem; color: var(--success-600); } .material-quantity-min { font-size: 1.2rem; color: var(--warning-500); } .material-quantity-max { font-size: 1.2rem; color: var(--info-500); } .material-stock-value { color: var(--success-600); } /* Print Page Info Item Styles */ .info-item.mt-20 { margin-top: 20px; } /* Stat Label - Position Relative */ .stat-label { position: relative; } .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--secondary-600)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-500); padding-right: 10px; margin-bottom: 1rem; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ .tab-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } .stock-status-alert { border-radius: var(--radius-md); padding: 12px 16px; margin-top: 10px; } /* ORDERS MODULE STYLES */ /* Extracted from previous version */ /* From add.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper, Order Card, Card Header, Card Title, Card Title Icon, Card Body ===== */ /* הערה: כל העיצובים של .page-wrapper, .order-card, .order-card-header, .order-card-title, .order-card-title-icon, .order-card-body נמצאים ב-components/forms.css */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* הוסר - .form-header-explanation מעוצב ב-components/forms.css גלובלית */ .form-section-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ /* ===== Order Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .order-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ .order-item { background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 0.65rem; padding: 1rem; margin-bottom: 1rem; } /* ========================================================= Orders Index – Premium Layout מותאם ל-RTL, Bootstrap 5 + Tailwind utility classes מבוסס על עיצוב מודול הפרויקטים ========================================================= */ /* -------- בסיס עמוד -------- */ .orders-page { --orders-radius: var(--radius-lg); --orders-radius-lg: var(--radius-xl); --orders-gap: var(--spacing-4); --orders-border-subtle: var(--border-primary); --orders-bg-soft: var(--bg-secondary); --orders-bg-card: var(--card-bg); --orders-text-muted: var(--text-secondary); --orders-shadow-soft: var(--shadow-lg); --orders-shadow-subtle: var(--shadow-md); --orders-accent: var(--primary-500); --orders-accent-soft: var(--primary-100); --orders-danger-soft: var(--error-100); --orders-success-soft: var(--success-100); --orders-warning-soft: var(--warning-100); --orders-radius-pill: var(--radius-full); background: transparent; min-height: calc(100vh - calc(var(--spacing-12) * 3.75)); } /* -------- כותרת עליונה -------- */ .orders-header { border-radius: var(--orders-radius-lg) ; background: var(--card-bg) ; color: var(--text-primary) ; box-shadow: var(--shadow-md) ; border: 1px solid var(--border-primary) ; padding: var(--spacing-4) var(--spacing-5); position: relative; overflow: hidden; } .orders-header::before { content: none ; display: none ; } .orders-header-main { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6); align-items: center; justify-content: space-between; z-index: 1; } .orders-title-wrap { display: flex; flex-direction: column; gap: var(--spacing-1); } .orders-title { font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; margin: 0; color: var(--text-primary); } .orders-title-icon { font-size: var(--text-2xl); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-500); } .orders-subtitle { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); } .orders-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } .orders-header-actions .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .orders-header-actions .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .orders-header-actions .btn-action.btn-add i { font-size: var(--text-xs) ; } .orders-empty-state .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .orders-empty-state .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .orders-empty-state .btn-action.btn-add i { font-size: var(--text-xs) ; } .btn-icon-ghost { border-radius: var(--radius-full); border: 1px solid var(--border-primary); width: calc(var(--spacing-6) * 1.5); height: calc(var(--spacing-6) * 1.5); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--text-sm); transition: all var(--transition-base); } .btn-icon-ghost:hover { border-color: var(--primary-500); color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200); transform: translateY(calc(var(--spacing-1) * -1)) scale(1.02); } /* -------- פילטרים מהירים -------- */ .orders-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-top: var(--spacing-3); } .filter-chip { display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; padding: var(--spacing-1) var(--spacing-2) ; border-radius: var(--radius-sm) ; font-size: var(--text-xs) ; border: 1px solid var(--border-primary) ; color: var(--text-secondary) ; text-decoration: none ; background: var(--card-bg) ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .filter-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .filter-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .filter-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .orders-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .orders-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .orders-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .orders-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .orders-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .orders-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .orders-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } /* -------- סטטיסטיקות / KPI -------- */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ✅ Mobile-First - 2 בשורה */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ margin-top: var(--spacing-5); } /* ===== Stat Cards (KPIs) ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ .stat-meta { display: flex; flex-direction: column; gap: var(--spacing-1); } .stat-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .stat-caption { font-size: var(--text-xs); color: var(--orders-text-muted); } .stat-value-row { display: flex; align-items: baseline; justify-content: space-between; } .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); } .stat-mini-value { font-size: var(--text-xs); color: var(--orders-text-muted); } .stat-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-top: var(--spacing-1); } .stat-subtitle { font-size: var(--text-xs); color: var(--orders-text-muted); display: inline-flex; align-items: center; gap: var(--spacing-1); } .stat-subtitle i { font-size: var(--text-xs); } /* -------- מנוע חיפוש וסינון -------- */ .orders-search-engine { border-radius: var(--orders-radius); border: 1px solid var(--orders-border-subtle); background: var(--card-bg); box-shadow: var(--shadow-md); } .orders-search-engine .card-body { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); } .orders-search-form { display: flex; flex-direction: column; gap: var(--spacing-1); } .orders-search-main { min-height: 0; } .search-label { font-size: var(--text-xs); color: var(--text-secondary); } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--orders-text-muted); } .search-input-wrapper .form-control { padding-inline-start: var(--spacing-7); font-size: var(--text-xs); border-radius: var(--radius-full); border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-200); } .orders-search-status { min-width: calc(var(--spacing-12) * 5); } .status-chip-group { display: flex; flex-wrap: wrap; gap: var(--spacing-1); background: transparent; border-radius: 0; padding: 0; border: none; } .status-chip { border: 1px solid var(--border-primary) ; background: var(--card-bg) ; border-radius: var(--radius-sm) ; padding: var(--spacing-1) var(--spacing-2) ; font-size: var(--text-xs) ; color: var(--text-secondary) ; display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; cursor: pointer ; white-space: nowrap ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .status-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .status-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .status-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary) ; } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .status-chip[value="active"]:not(.status-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .status-chip[value="active"]:not(.status-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .status-chip[value="active"].status-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .status-chip[value="inactive"].status-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } .orders-search-actions .btn-action.btn-advanced, .orders-search-actions .btn-action.btn-filter { width: calc(var(--spacing-6) * 0.92) ; height: calc(var(--spacing-6) * 0.92) ; background: var(--card-bg) ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; padding: 0 ; display: inline-flex ; align-items: center ; justify-content: center ; cursor: pointer ; transition: all var(--transition-fast) ; box-shadow: none ; font-size: 0 ; min-width: calc(var(--spacing-6) * 0.92) ; font-weight: normal ; } .orders-search-actions .btn-action.btn-advanced { color: var(--text-secondary) ; border-color: var(--border-primary) ; } .orders-search-actions .btn-action.btn-advanced:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .orders-search-actions .btn-action.btn-filter { color: var(--primary-500) ; border-color: var(--primary-50) ; } .orders-search-actions .btn-action.btn-filter:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .orders-search-actions .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .orders-search-actions { gap: var(--spacing-1) ; align-items: center ; } .orders-search-advanced .form-select { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); border-radius: var(--radius-md); } .clear-filters-link { font-size: var(--text-xs); } .orders-search-summary { font-size: var(--text-xs); color: var(--orders-text-muted); } .orders-search-summary strong { color: var(--text-primary); } /* -------- כרטיסי הזמנות -------- */ .orders-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); } .order-card { border-radius: var(--orders-radius); background: var(--orders-bg-card); border: 1px solid var(--border-primary); box-shadow: var(--orders-shadow-subtle); overflow: hidden; } .order-card-inner { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); } .order-card-header { display: flex; justify-content: space-between; gap: var(--spacing-2); align-items: flex-start; border-bottom: 1px dashed var(--border-primary); padding-bottom: var(--spacing-2); } .order-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); } .order-card-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .order-card-code { font-size: var(--text-xs); color: var(--orders-text-muted); display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .order-status-badge .badge { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); } .order-card-body { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-2); } .order-main-info { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-xs); } .order-info-row { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; } .order-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: var(--spacing-1); } .order-info-label i { font-size: var(--text-xs); color: var(--text-secondary); } .order-info-value { color: var(--text-primary); } .order-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .order-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-2); padding-top: var(--spacing-2); border-top: 1px solid var(--border-primary); } .order-actions-left { display: flex; flex-wrap: wrap; gap: var(--spacing-1); align-items: center; width: 100%; } /* לחצנים מודרניים וקומפקטיים */ .order-card-footer .btn-action, .orders-table-actions .btn-action, .order-actions-left .btn-action { display: inline-flex ; align-items: center ; justify-content: center ; width: var(--spacing-6) ; height: var(--spacing-6) ; padding: 0 ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; font-size: 0 ; cursor: pointer ; transition: all var(--transition-fast) ; background: var(--card-bg) ; color: var(--text-secondary) ; box-shadow: none ; position: relative ; min-width: var(--spacing-6) ; font-weight: normal ; } .order-card-footer .btn-action:hover, .orders-table-actions .btn-action:hover, .order-actions-left .btn-action:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; transform: none ; box-shadow: var(--shadow-xs) ; } .order-card-footer .btn-action:active, .orders-table-actions .btn-action:active, .order-actions-left .btn-action:active { background: var(--bg-secondary) ; transform: scale(0.95) ; } .order-card-footer .btn-action i, .orders-table-actions .btn-action i, .order-actions-left .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .order-card-footer .btn-action.btn-view, .orders-table-actions .btn-action.btn-view, .order-actions-left .btn-action.btn-view { color: var(--primary-500) ; border-color: var(--primary-50) ; background: var(--card-bg) ; } .order-card-footer .btn-action.btn-view:hover, .orders-table-actions .btn-action.btn-view:hover, .order-actions-left .btn-action.btn-view:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; } .order-card-footer .btn-action.btn-edit, .orders-table-actions .btn-action.btn-edit, .order-actions-left .btn-action.btn-edit { color: var(--warning-600) ; border-color: var(--warning-200) ; background: var(--card-bg) ; } .order-card-footer .btn-action.btn-edit:hover, .orders-table-actions .btn-action.btn-edit:hover, .order-actions-left .btn-action.btn-edit:hover { background: var(--warning-50) ; border-color: var(--warning-600) ; color: var(--warning-600) ; } .order-card-footer .btn-action.btn-delete, .orders-table-actions .btn-action.btn-delete, .order-actions-left .btn-action.btn-delete { color: var(--error-500) ; border-color: var(--error-200) ; background: var(--card-bg) ; } .order-card-footer .btn-action.btn-delete:hover, .orders-table-actions .btn-action.btn-delete:hover, .order-actions-left .btn-action.btn-delete:hover { background: var(--error-50) ; border-color: var(--error-500) ; color: var(--error-600) ; } /* -------- מצב ללא הזמנות -------- */ .orders-empty-state { border-radius: var(--orders-radius); background: var(--orders-bg-card); border: 1px dashed var(--border-primary); text-align: center; padding: var(--spacing-7) var(--spacing-4); margin-top: var(--spacing-2); color: var(--text-secondary); } .orders-empty-state i { color: var(--text-secondary); } .orders-empty-state h3 { font-size: var(--text-base); margin-bottom: var(--spacing-1); color: var(--text-primary); } .orders-empty-state p { font-size: var(--text-xs); margin-bottom: var(--spacing-3); } /* -------- טבלת הזמנות -------- */ .orders-table-wrapper { margin-top: var(--spacing-2); } .orders-table-responsive { border-radius: var(--orders-radius); overflow: hidden; } .orders-table { font-size: var(--text-xs); margin-bottom: 0; } .orders-table thead tr { background: var(--bg-secondary); } .orders-table thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding-block: var(--spacing-2); padding-inline: var(--spacing-3); white-space: nowrap; } .orders-table tbody td { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); vertical-align: middle; border-color: var(--border-primary); } .orders-td-ellipsis { max-width: calc(var(--spacing-12) * 4.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orders-table-actions { display: inline-flex; gap: var(--spacing-1); align-items: center; justify-content: center; } .orders-table-actions .btn-action { width: calc(var(--spacing-6) * 0.92) ; height: calc(var(--spacing-6) * 0.92) ; } .orders-table-actions .btn-action i { font-size: var(--text-xs) ; } .link-order-name { font-weight: 600; text-decoration: none; color: var(--text-primary); } .link-order-name:hover { color: var(--primary-500); } /* -------- הסברים -------- */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ .kpi-help-icon { display: inline-block; width: var(--spacing-4); height: var(--spacing-4); line-height: var(--spacing-4); text-align: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-500); font-size: var(--text-xs); font-weight: bold; cursor: help; margin-right: var(--spacing-2); margin-left: var(--spacing-1); vertical-align: middle; transition: all var(--transition-normal); flex-shrink: 0; border: 1px solid var(--primary-200); } .kpi-help-icon:hover { background: var(--primary-200); color: var(--primary-600); transform: scale(1.15); border-color: var(--primary-300); } .kpi-tooltip { position: absolute; z-index: 1000; max-width: calc(var(--spacing-12) * 5.83); padding: var(--spacing-3) var(--spacing-3); background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal), transform var(--transition-normal); transform: translateY(calc(var(--spacing-2) * -1.25)); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.5); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.75); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--border-primary); } /* -------- רספונסיביות (Mobile-First) -------- */ /* ברירת מחדל - מובייל (כבר מוגדר למעלה) */ @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .orders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .orders-title { font-size: var(--text-2xl); } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .orders-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .orders-search-main { flex-direction: column; align-items: stretch; } .orders-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .orders-search-actions { align-items: stretch; } } /* From edit.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper, Order Card, Card Header, Card Title, Card Title Icon, Card Body ===== */ /* הערה: כל העיצובים של .page-wrapper, .order-card, .order-card-header, .order-card-title, .order-card-title-icon, .order-card-body נמצאים ב-components/forms.css (אוחד עם add.html) */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } /* ===== Section Title, Section Subtitle, Forms, Order Card Footer ===== */ /* הערה: כל העיצובים של .section-title, .section-subtitle, .form-label .required, .order-card-footer, .btn-sm-custom נמצאים ב-components/forms.css ו-components/buttons.css (אוחד עם add.html) */ .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* הוסר - .form-header-explanation מעוצב ב-components/forms.css גלובלית */ .form-section-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ .order-item { background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 0.65rem; padding: 1rem; margin-bottom: 1rem; } /* From index.html */ .info-box-explanation { background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); border-right: 4px solid var(--primary-500); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--primary-700); box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1); } /* -------- Orders Index Page Styles -------- */ /* בסיס עמוד */ .orders-page { --orders-radius: var(--radius-lg); --orders-radius-lg: var(--radius-xl); --orders-gap: var(--spacing-4); --orders-border-subtle: var(--border-primary); --orders-bg-soft: var(--bg-secondary); --orders-bg-card: var(--card-bg); --orders-text-muted: var(--text-secondary); --orders-shadow-soft: var(--shadow-lg); --orders-shadow-subtle: var(--shadow-md); --orders-accent: var(--primary-500); --orders-accent-soft: var(--primary-100); --orders-danger-soft: var(--error-100); --orders-success-soft: var(--success-100); --orders-warning-soft: var(--warning-100); --orders-radius-pill: var(--radius-full); background: transparent; min-height: calc(100vh - calc(var(--spacing-12) * 3.75)); } /* כותרת עליונה */ .orders-header { border-radius: var(--orders-radius-lg) ; background: var(--card-bg) ; color: var(--text-primary) ; box-shadow: var(--shadow-md) ; border: 1px solid var(--border-primary) ; padding: var(--spacing-4) var(--spacing-5); position: relative; overflow: hidden; } .orders-header::before { content: none ; display: none ; } .orders-header-main { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6); align-items: center; justify-content: space-between; z-index: 1; } .orders-title-wrap { display: flex; flex-direction: column; gap: var(--spacing-1); } .orders-title { font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; margin: 0; color: var(--text-primary); } .orders-title-icon { font-size: var(--text-2xl); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-500); } .orders-subtitle { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); } .orders-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } .orders-header-actions .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .orders-header-actions .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .orders-header-actions .btn-action.btn-add i { font-size: var(--text-xs) ; } .orders-empty-state .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .orders-empty-state .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .orders-empty-state .btn-action.btn-add i { font-size: var(--text-xs) ; } .btn-icon-ghost { border-radius: var(--radius-full); border: 1px solid var(--border-primary); width: calc(var(--spacing-6) * 1.5); height: calc(var(--spacing-6) * 1.5); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--text-sm); transition: all var(--transition-base); } .btn-icon-ghost:hover { border-color: var(--primary-500); color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200); transform: translateY(calc(var(--spacing-1) * -1)) scale(1.02); } /* פילטרים מהירים */ .orders-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-top: var(--spacing-3); } .filter-chip { display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; padding: var(--spacing-1) var(--spacing-2) ; border-radius: var(--radius-sm) ; font-size: var(--text-xs) ; border: 1px solid var(--border-primary) ; color: var(--text-secondary) ; text-decoration: none ; background: var(--card-bg) ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .filter-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .filter-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .filter-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .orders-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .orders-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .orders-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .orders-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .orders-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .orders-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .orders-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } /* סטטיסטיקות / KPI */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ✅ Mobile-First - 2 בשורה */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ margin-top: var(--spacing-5); } .stat-meta { display: flex; flex-direction: column; gap: var(--spacing-1); } .stat-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .stat-caption { font-size: var(--text-xs); color: var(--orders-text-muted); } .stat-value-row { display: flex; align-items: baseline; justify-content: space-between; } .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); } .stat-mini-value { font-size: var(--text-xs); color: var(--orders-text-muted); } .stat-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-top: var(--spacing-1); } .stat-subtitle { font-size: var(--text-xs); color: var(--orders-text-muted); display: inline-flex; align-items: center; gap: var(--spacing-1); } .stat-subtitle i { font-size: var(--text-xs); } /* מנוע חיפוש וסינון */ .orders-search-engine { border-radius: var(--orders-radius); border: 1px solid var(--orders-border-subtle); background: var(--card-bg); box-shadow: var(--shadow-md); } .orders-search-engine .card-body { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); } .orders-search-form { display: flex; flex-direction: column; gap: var(--spacing-1); } .orders-search-main { min-height: 0; } .search-label { font-size: var(--text-xs); color: var(--text-secondary); } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--orders-text-muted); } .search-input-wrapper .form-control { padding-inline-start: var(--spacing-7); font-size: var(--text-xs); border-radius: var(--radius-full); border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-200); } .orders-search-status { min-width: calc(var(--spacing-12) * 5); } .status-chip-group { display: flex; flex-wrap: wrap; gap: var(--spacing-1); background: transparent; border-radius: 0; padding: 0; border: none; } .status-chip { border: 1px solid var(--border-primary) ; background: var(--card-bg) ; border-radius: var(--radius-sm) ; padding: var(--spacing-1) var(--spacing-2) ; font-size: var(--text-xs) ; color: var(--text-secondary) ; display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; cursor: pointer ; white-space: nowrap ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .status-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .status-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .status-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary) ; } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .status-chip[value="active"]:not(.status-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .status-chip[value="active"]:not(.status-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .status-chip[value="active"].status-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .status-chip[value="inactive"].status-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } .orders-search-actions .btn-action.btn-advanced, .orders-search-actions .btn-action.btn-filter { width: calc(var(--spacing-6) * 0.92) ; height: calc(var(--spacing-6) * 0.92) ; background: var(--card-bg) ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; padding: 0 ; display: inline-flex ; align-items: center ; justify-content: center ; cursor: pointer ; transition: all var(--transition-fast) ; box-shadow: none ; font-size: 0 ; min-width: calc(var(--spacing-6) * 0.92) ; font-weight: normal ; } .orders-search-actions .btn-action.btn-advanced { color: var(--text-secondary) ; border-color: var(--border-primary) ; } .orders-search-actions .btn-action.btn-advanced:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .orders-search-actions .btn-action.btn-filter { color: var(--primary-500) ; border-color: var(--primary-50) ; } .orders-search-actions .btn-action.btn-filter:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .orders-search-actions .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .orders-search-actions { gap: var(--spacing-1) ; align-items: center ; } .orders-search-advanced .form-select { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); border-radius: var(--radius-md); } .clear-filters-link { font-size: var(--text-xs); } .orders-search-summary { font-size: var(--text-xs); color: var(--orders-text-muted); } .orders-search-summary strong { color: var(--text-primary); } /* כרטיסי הזמנות */ .orders-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); } .contractor-card { border-radius: var(--orders-radius); background: var(--orders-bg-card); border: 1px solid var(--border-primary); box-shadow: var(--orders-shadow-subtle); overflow: hidden; } .contractor-card-inner { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); } .contractor-card-header { display: flex; justify-content: space-between; gap: var(--spacing-2); align-items: flex-start; border-bottom: 1px dashed var(--border-primary); padding-bottom: var(--spacing-2); } .contractor-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); } .contractor-card-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .contractor-card-code { font-size: var(--text-xs); color: var(--orders-text-muted); display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .contractor-status-badge .badge { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); } .contractor-card-body { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-2); } .contractor-main-info { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-xs); } .contractor-info-row { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; } .contractor-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: var(--spacing-1); } .contractor-info-label i { font-size: var(--text-xs); color: var(--text-secondary); } .contractor-info-value { color: var(--text-primary); } .contractor-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contractor-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-2); padding-top: var(--spacing-2); border-top: 1px solid var(--border-primary); } .contractor-actions-left { display: flex; flex-wrap: wrap; gap: var(--spacing-1); align-items: center; width: 100%; } .contractor-card-footer .btn-action, .orders-table-actions .btn-action, .contractor-actions-left .btn-action { display: inline-flex ; align-items: center ; justify-content: center ; width: var(--spacing-6) ; height: var(--spacing-6) ; padding: 0 ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; font-size: 0 ; cursor: pointer ; transition: all var(--transition-fast) ; background: var(--card-bg) ; color: var(--text-secondary) ; box-shadow: none ; position: relative ; min-width: var(--spacing-6) ; font-weight: normal ; } .contractor-card-footer .btn-action:hover, .orders-table-actions .btn-action:hover, .contractor-actions-left .btn-action:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; transform: none ; box-shadow: var(--shadow-xs) ; } .contractor-card-footer .btn-action:active, .orders-table-actions .btn-action:active, .contractor-actions-left .btn-action:active { background: var(--bg-secondary) ; transform: scale(0.95) ; } .contractor-card-footer .btn-action i, .orders-table-actions .btn-action i, .contractor-actions-left .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .contractor-card-footer .btn-action.btn-view, .orders-table-actions .btn-action.btn-view, .contractor-actions-left .btn-action.btn-view { color: var(--primary-500) ; border-color: var(--primary-50) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-view:hover, .orders-table-actions .btn-action.btn-view:hover, .contractor-actions-left .btn-action.btn-view:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; } .contractor-card-footer .btn-action.btn-edit, .orders-table-actions .btn-action.btn-edit, .contractor-actions-left .btn-action.btn-edit { color: var(--warning-600) ; border-color: var(--warning-200) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-edit:hover, .orders-table-actions .btn-action.btn-edit:hover, .contractor-actions-left .btn-action.btn-edit:hover { background: var(--warning-50) ; border-color: var(--warning-600) ; color: var(--warning-600) ; } .contractor-card-footer .btn-action.btn-delete, .orders-table-actions .btn-action.btn-delete, .contractor-actions-left .btn-action.btn-delete { color: var(--error-500) ; border-color: var(--error-200) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-delete:hover, .orders-table-actions .btn-action.btn-delete:hover, .contractor-actions-left .btn-action.btn-delete:hover { background: var(--error-50) ; border-color: var(--error-500) ; color: var(--error-600) ; } /* מצב ללא הזמנות */ .orders-empty-state { border-radius: var(--orders-radius); background: var(--orders-bg-card); border: 1px dashed var(--border-primary); text-align: center; padding: var(--spacing-7) var(--spacing-4); margin-top: var(--spacing-2); color: var(--text-secondary); } .orders-empty-state i { color: var(--text-secondary); } .orders-empty-state h3 { font-size: var(--text-base); margin-bottom: var(--spacing-1); color: var(--text-primary); } .orders-empty-state p { font-size: var(--text-xs); margin-bottom: var(--spacing-3); } /* טבלת הזמנות */ .orders-table-wrapper { margin-top: var(--spacing-2); } .orders-table-responsive { border-radius: var(--orders-radius); overflow: hidden; } .orders-table { font-size: var(--text-xs); margin-bottom: 0; } .orders-table thead tr { background: var(--bg-secondary); } .orders-table thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding-block: var(--spacing-2); padding-inline: var(--spacing-3); white-space: nowrap; } .orders-table tbody td { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); vertical-align: middle; border-color: var(--border-primary); } .orders-td-ellipsis { max-width: calc(var(--spacing-12) * 4.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orders-table-actions { display: inline-flex; gap: var(--spacing-1); align-items: center; justify-content: center; } .orders-table-actions .btn-action { width: calc(var(--spacing-6) * 0.92) ; height: calc(var(--spacing-6) * 0.92) ; } .orders-table-actions .btn-action i { font-size: var(--text-xs) ; } .link-contractor-name { font-weight: 600; text-decoration: none; color: var(--text-primary); } .link-contractor-name:hover { color: var(--primary-500); } .kpi-help-icon { display: inline-block; width: var(--spacing-4); height: var(--spacing-4); line-height: var(--spacing-4); text-align: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-500); font-size: var(--text-xs); font-weight: bold; cursor: help; margin-right: var(--spacing-2); margin-left: var(--spacing-1); vertical-align: middle; transition: all var(--transition-normal); flex-shrink: 0; border: 1px solid var(--primary-200); } .kpi-help-icon:hover { background: var(--primary-200); color: var(--primary-600); transform: scale(1.15); border-color: var(--primary-300); } .kpi-tooltip { position: absolute; z-index: 1000; max-width: calc(var(--spacing-12) * 5.83); padding: var(--spacing-3) var(--spacing-3); background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal), transform var(--transition-normal); transform: translateY(calc(var(--spacing-2) * -1.25)); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.5); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.75); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--border-primary); } /* רספונסיביות (Mobile-First) */ /* ברירת מחדל - מובייל (כבר מוגדר למעלה) */ @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .orders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .orders-title { font-size: var(--text-2xl); } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .orders-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .orders-search-main { flex-direction: column; align-items: stretch; } .orders-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .orders-search-actions { align-items: stretch; } } /* From view.html */ .order-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--info-500) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .default-icon-large, .default-avatar-large נמצאים ב-components/cards.css */ /* .order-icon-large נשאר ספציפי למודול */ .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--info-500)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-500); padding-right: 10px; margin-bottom: 1rem; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge נמצאים ב-components-enhanced.css */ .status-pending { background: var(--warning-50); color: var(--warning-900); } .status-approved { background: var(--info-50); color: var(--info-900); } .status-completed { background: var(--success-50); color: var(--success-900); } .status-cancelled { background: var(--error-50); color: var(--error-900); } .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ .tab-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } /* ===== Cards ===== */ /* הוסר - cards מעוצבים ב-components/cards.css גלובלית */ /* Order Total Amount Style */ .order-total-amount { font-size: 1.2rem; } /* ===== Inline styles - תיקון: העברת inline styles ל-CSS ===== */ /* תיקון: position: relative על stat-label (מ-list.html) */ .stat-label { position: relative; } /* תיקון: margin-right על רשימות שגיאות (מ-add.html ו-edit.html) */ .mb-0.mt-2 { margin-right: 20px; } /* ============================================ Projects Module Styles - Enhanced ============================================ עיצוב ספציפי למודול Projects מעודכן לשימוש ב-Enhanced Design System - שימוש ב-CSS Variables (tokens) - תמיכה ב-Dark Mode - תמיכה ב-RTL מתקדמת ============================================ */ /* ===== KPI Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* ============================================ Project View – פרויקט: דף צפייה ============================================ */ /* מעטפת כללית */ .project-view-wrapper { padding-bottom: var(--spacing-8); background: var(--bg-secondary); max-width: var(--container); margin: 0 auto; margin-top: 1.5rem; padding-top: 0; padding: 0 var(--spacing-4) var(--spacing-8); } /* ===== HEADER – משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .project-header נמצאים ב-components/forms.css (.contractor-header-custom / .form-header-custom) */ .badge-circle-icon { font-size: 0.6rem; } /* כפתור שיתוף במייל */ .share-email-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; } /* תיקון: כפתור שיתוף במייל בכותרת גלובלית - ללא הגבלת גודל */ .page-header-actions .share-email-btn, .page-header-action-btn.premium-link-style.share-email-btn { width: auto; height: auto; min-width: auto; min-height: auto; padding: 0.5rem 0.75rem; border-radius: 10px; gap: 0.4rem; } .page-header-actions .share-email-btn span, .page-header-action-btn.premium-link-style.share-email-btn span { display: inline-block; white-space: nowrap; } /* ניווט לרשימה / פרויקטים קודמים/הבאים */ .navigation-buttons .btn { border-radius: 999px; } /* ===== תיבת הסבר על הדף ===== */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== KPI Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* אייקון עזרה קטן */ .kpi-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 999px; background: var(--border-primary); color: var(--text-secondary); font-size: 0.7rem; cursor: default; margin-inline-start: 0.25rem; } /* Tooltip מותאם KPI */ .kpi-tooltip { position: absolute; z-index: 9999; background: var(--text-primary); color: var(--text-inverse); padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.78rem; max-width: 260px; line-height: 1.4; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .kpi-tooltip.show { opacity: 1; transform: translateY(0); } /* ===== טאבים ===== */ .section-explanation { font-size: 0.84rem; color: var(--text-secondary); padding: 0.45rem 0.75rem; border-radius: 10px; background: rgba(15,23,42,0.03); border-inline-start: 3px solid var(--primary-500); } .section-explanation i { color: var(--primary-500); } /* פס הטאבים */ .project-tabs { border: none; border-radius: var(--radius-pill); padding: var(--spacing-1); } .project-tabs .nav-link { border: none; border-radius: var(--radius-pill); padding: 0.45rem 0.9rem; font-size: 0.85rem; color: var(--text-secondary); background: transparent; transition: var(--transition-base); } .project-tabs .nav-link i { font-size: 0.9rem; } .project-tabs .nav-link:hover { background: var(--primary-50); color: var(--primary-700); } .project-tabs .nav-link.active { background: linear-gradient(135deg, var(--primary-600), var(--info-500)); color: var(--text-inverse); box-shadow: var(--shadow-md); } /* ===== כותרות פנימיות - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* קופסת מידע שדה-ערך */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== תיקיות מסמכים בפרויקט ===== */ .folder-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-1); padding: 0.7rem 0.4rem; border-radius: var(--radius-lg); border: 1px solid var(--border-primary); background: var(--card-bg); cursor: pointer; transition: var(--transition-base); text-align: center; } .folder-item i { font-size: 1.5rem; } .folder-item span { font-size: 0.82rem; color: var(--text-primary); } .folder-item:hover { transform: translateY(-2px); border-color: var(--primary-200); box-shadow: var(--shadow-hover); background: var(--bg-muted); } .folder-item-disabled { cursor: default; opacity: 0.5; background: var(--bg-muted); } /* ===== טבלאות – קבלנים, עובדים, יומני עבודה, מסמכים ===== */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* רוחב עמודות ליישור טבלאות */ .col-wide { min-width: 160px; } .col-narrow { min-width: 120px; } .col-status { min-width: 110px; } .col-actions { min-width: 90px; } /* כפתורי פעולות בטבלה */ .table .btn-group .btn { border-radius: 999px; padding-inline: 0.45rem; padding-block: 0.2rem; font-size: 0.78rem; } .table .btn-group .btn i { font-size: 0.85rem; } /* שורת "אין נתונים" יפה יותר */ .table tbody tr td.text-center.text-muted { font-size: 0.9rem; } /* ===== כרטיסי פיננסי ===== */ .financial-card { background: var(--card-bg); border-radius: var(--radius-xl); border: 1px solid var(--border-primary); box-shadow: var(--shadow-soft); } .financial-card h6 { font-size: 0.92rem; } .financial-card .form-label { font-size: 0.78rem; } .financial-card h4 { font-size: 1.15rem; } /* progress בר פיננסי */ .progress.progress-lg { height: 18px; border-radius: var(--radius-pill); background: var(--border-primary); } .progress.progress-lg .progress-bar { font-size: 0.75rem; } /* ===== מודל PDF מותאם ===== */ /* הערה: .custom-modal-overlay, .custom-modal, .resize-handle, .pdf-toolbar מוגדרים כבר ב-components/modals.css - הוסרו כפילויות */ /* הערה: .pdf-container נשמר כי זה ספציפי למודול */ .pdf-container { position: relative; flex: 1; background: var(--text-primary); } .pdf-container iframe { width: 100%; height: 100%; border: none; } /* ===== מודאל שיתוף במייל ===== */ #emailShareModal .modal-content { border-radius: 16px; } #emailShareModal .modal-header { border-bottom: 1px solid var(--border-primary); } #emailShareModal .modal-title i { color: var(--primary-500); } /* ===== רספונסיביות ===== */ @media (max-width: 991.98px) { .project-header { padding: 1.2rem; } .project-header h1 { font-size: 1.4rem; } /* הוסר - kpi-card מעוצב גלובלית */ .project-tabs { border-radius: 14px; overflow-x: visible; /* overflow-x: auto רק במובייל */ white-space: nowrap; } @media (max-width: 1023px) { .project-tabs { overflow-x: auto; } } .project-tabs .nav-link { padding-inline: 0.7rem; font-size: 0.82rem; } .custom-modal { width: 94vw; height: 78vh; } } @media (max-width: 575.98px) { /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* .table thead - הועבר ל-tables.css */ /* .table tbody td - הועבר ל-tables.css */ /* כאן רק שינויים ספציפיים למודול אם נדרש */ } /* ===== End of view.html styles ===== */ /* ===== Edit/Add Forms Styles ===== */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ .project-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.15); max-width: 1200px; width: 100%; overflow: hidden; } .card-header-custom { background: linear-gradient(135deg, var(--primary-500), var(--info-400)); color: var(--text-inverse); padding: 1.75rem 1.75rem 1.25rem; } .card-header-custom h1 { font-size: 1.6rem; margin: 0; display: flex; align-items: center; gap: 0.75rem; } .card-header-custom p { margin: 0.35rem 0 0; opacity: 0.92; font-size: 0.95rem; } .badge-status { background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; } .card-body-custom { padding: 1.75rem; } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ .form-section { margin-bottom: 1.4rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--bg-muted); border: 1px dashed var(--border-secondary); } .form-check-label { font-size: 0.88rem; } .card-footer-custom { padding: 1.25rem 1.75rem 1.75rem; border-top: 1px solid var(--border-primary); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; } /* .btn-primary-modern - הועבר ל-components/buttons.css */ /* .btn-outline-secondary-modern - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* הסברים */ /* הוסר - .form-section-explanation מעוצב ב-modules/projects.css ספציפית למודול Projects */ /* הוסר - .form-section-explanation i מעוצב ב-modules/projects.css ספציפית למודול Projects */ /* הוסר - .form-header-explanation מעוצב ב-modules/projects.css ספציפית למודול Projects */ /* ===== Index Page Styles ===== */ /* הסברים */ /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Dashboard Styles ===== */ /* הערה: .kpi-help-icon ו-.kpi-tooltip מוגדרים כבר בתחילת הקובץ (שורות 62-96) - הוסרו כפילויות */ /* ===== Contracts Page Styles ===== */ /* הערה: .kpi-help-icon ו-.kpi-tooltip מוגדרים כבר בתחילת הקובץ (שורות 62-96) - הוסרו כפילויות */ /* ===== Print Page Styles ===== */ @media print { .no-print { display: none; } body { margin: 0; padding: 20px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); margin: 0; padding: 20px; background: var(--secondary-800); } .header { text-align: center; border-bottom: 3px solid var(--primary-500); padding-bottom: 20px; margin-bottom: 30px; } .project-title { font-size: 28px; font-weight: bold; color: var(--primary-500); margin-bottom: 10px; } .project-code { font-size: 18px; color: var(--text-secondary); } .section { margin-bottom: 30px; page-break-inside: avoid; } /* הערה: .section-title הועבר ל-components/forms.css */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .info-item { margin-bottom: 10px; } .info-label { font-weight: bold; color: var(--text-primary); } .info-value { color: var(--text-primary); } /* ===== Stats Grid ===== */ /* הערה: .stats-grid הועבר ל-components/cards.css */ /* ===== Stat Card ===== */ /* הערה: .stat-card הועבר ל-components/cards.css */ .stat-label { font-size: 14px; color: var(--text-secondary); margin-top: 5px; } .footer { margin-top: 50px; text-align: center; font-size: 14px; color: var(--text-secondary); } .print-button { position: fixed; top: 20px; right: 20px; background: var(--primary-500); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } .print-button:hover { background: var(--primary-600); } .back-button { position: fixed; top: 20px; left: 20px; background: var(--text-secondary); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; } .back-button:hover { background: var(--text-secondary); color: var(--text-inverse); text-decoration: none; } /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active נמצאים ב-components-enhanced.css */ .status-completed { background-color: var(--primary-100); color: var(--primary-800); } .status-planning { background-color: var(--warning-100); color: var(--warning-800); } .status-on-hold { background-color: var(--error-100); color: var(--error-800); } /* Dashboard Stats - Contracts Page */ .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .dashboard-stat-box { background: var(--card-bg); border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-stat-box:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .stat-title { position: relative; display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } .stat-value { display: block; font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; } .stat-desc { display: block; font-size: 0.8rem; color: var(--text-secondary); } .stat-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; } .bg-blue .stat-value { color: var(--primary-500); } .bg-green .stat-value { color: var(--success-500); } .bg-cyan .stat-value { color: var(--info-500); } .bg-yellow .stat-value { color: var(--warning-500); } /* Progress Bar - Contracts Table */ .table .progress { height: 20px; background-color: var(--bg-muted); border-radius: 4px; overflow: hidden; } /* ===== Progress ===== */ /* הערה: .progress-bar ו-.progress מעוצבים ב-components-enhanced.css גלובלית - הוסרו כפילויות */ /* הערה: .table .progress-bar נשמר כי זה ספציפי לטבלאות במודול */ /* List View Toggle */ #list-view { display: none; } #list-view.show { display: block; } /* Print Page Styles */ .info-item { margin-bottom: 0.75rem; } .info-item.mt-5 { margin-top: 1.25rem; } .stat-label { position: relative; } /* Projects Index Page */ .projects-page ul.mb-0 { padding-right: 1.5rem; } .projects-page small.d-block { opacity: 0.8; } #projects-table-view { display: none; } #projects-table-view.show { display: block; } /* Projects View Page - Icon Sizes */ .share-email-btn i, .btn-outline-primary.shadow-sm i { font-size: 1.1rem; } /* Projects View Page - KPI Labels */ .project-view-wrapper h6.fw-bold.mb-1 { position: relative; } /* Projects View Page - Progress Bars */ .project-view-wrapper .progress { height: 20px; background-color: var(--bg-muted); border-radius: 4px; overflow: hidden; } .project-view-wrapper .progress-lg { height: 22px; } /* סרגל פעולות עליון */ /* הערה: .employee-actions-bar ו-.project-actions-bar מוגדרים כבר ב-base.css (שורות 435-649) - הוסרו כפילויות */ /* ============================================ Projects Index Page – Premium Layout מותאם ל-RTL, Bootstrap 5 + Tailwind utility classes ============================================ */ /* -------- בסיס עמוד -------- */ .projects-page { /* שימוש ב-tokens גלובליים במקום משתנים מותאמים אישית */ background: transparent; min-height: calc(100vh - 90px); } /* -------- כותרת עליונה -------- */ .projects-header { border-radius: var(--border-radius-2xl); background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-tertiary) 100%); color: var(--text-primary); box-shadow: 0 6px 16px rgba(33, 150, 243, 0.15); border-right: 4px solid var(--primary-500); border-top: 1px solid rgba(33, 150, 243, 0.2); border-bottom: 1px solid rgba(33, 150, 243, 0.2); border-left: 1px solid rgba(33, 150, 243, 0.2); padding: 1.1rem 1.3rem; position: relative; overflow: hidden; } .projects-header::before { content: none; display: none; } .projects-header-main { position: relative; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; z-index: 1; } .projects-title-wrap { display: flex; flex-direction: column; gap: 0.2rem; } .projects-title { font-size: var(--fs-h3); font-weight: var(--fs-h3-weight); display: flex; align-items: center; margin: 0; color: var(--text-primary); } .projects-title-icon { font-size: 1.4rem; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--border-radius-full); background: var(--primary-50); color: var(--primary-600); box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.9), 0 6px 14px rgba(148, 163, 184, 0.5); } .projects-subtitle { margin: 0; font-size: var(--fs-body-small); color: var(--text-secondary); } .projects-header-actions { display: flex; align-items: center; gap: 0.6rem; } /* לחצן הוספה מודרני וקומפקטי - באותו סגנון */ .projects-header-actions .btn-action.btn-add { width: 28px; height: 28px; background: var(--text-inverse); color: var(--success-500); border-color: var(--success-200); border: 1px solid var(--success-200); } .projects-header-actions .btn-action.btn-add:hover { background: var(--success-50); border-color: var(--success-500); color: var(--success-600); } .projects-header-actions .btn-action.btn-add i { font-size: 12px; } /* ===== Icon Ghost Button ===== */ /* הערה: .btn-icon-ghost מוגדר כבר ב-components/buttons.css - הוסרה כפילות */ /* נשמר רק .projects-header-actions .btn-icon-ghost כי זה ספציפי למודול */ .projects-header-actions .btn-icon-ghost { background: var(--bg-muted); color: var(--text-primary); border-color: var(--border-secondary); } .projects-header-actions .btn-icon-ghost:hover { background: var(--border-primary); color: var(--text-primary); border-color: var(--text-tertiary); } /* -------- פילטרים מהירים (צ'יפים) -------- */ .projects-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; } /* פילטרים מהירים מודרניים וקומפקטיים */ .filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; border: 1px solid var(--secondary-600); color: var(--text-inverse); text-decoration: none; background: var(--secondary-800); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; min-height: 24px; } .filter-chip i { font-size: 0.65rem; line-height: 1; } .filter-chip:hover { background: var(--secondary-700); border-color: var(--secondary-500); color: var(--text-inverse); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /* פילטר פעיל - עם צבעים לפי סטטוס */ .filter-chip-active { background: var(--secondary-700); color: var(--text-inverse); font-weight: 600; border-width: 1.5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* "הכל" פעיל */ .projects-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary); color: var(--text-primary); } /* תכנון - כחול */ .projects-quick-filters > a[href*="status=planning"]:not(.filter-chip-active) { border-color: var(--primary-100); color: var(--primary-500); } .projects-quick-filters > a[href*="status=planning"]:not(.filter-chip-active):hover { background: var(--primary-50); border-color: var(--primary-500); } .projects-quick-filters > a[href*="status=planning"].filter-chip-active { border-color: var(--primary-600); color: var(--primary-700); background: var(--primary-50); } /* בביצוע - ירוק */ .projects-quick-filters > a[href*="status=in_progress"]:not(.filter-chip-active) { border-color: var(--success-100); color: var(--success-500); } .projects-quick-filters > a[href*="status=in_progress"]:not(.filter-chip-active):hover { background: var(--success-50); border-color: var(--success-500); } .projects-quick-filters > a[href*="status=in_progress"].filter-chip-active { border-color: var(--success-600); color: var(--success-700); background: var(--success-50); } /* מושהה - כתום */ .projects-quick-filters > a[href*="status=on_hold"]:not(.filter-chip-active) { border-color: var(--warning-300); color: var(--warning-600); } .projects-quick-filters > a[href*="status=on_hold"]:not(.filter-chip-active):hover { background: var(--warning-50); border-color: var(--warning-600); } .projects-quick-filters > a[href*="status=on_hold"].filter-chip-active { border-color: var(--warning-700); color: var(--warning-800); background: var(--warning-50); } /* הושלמו - טורקיז */ .projects-quick-filters > a[href*="status=completed"]:not(.filter-chip-active) { border-color: var(--info-200); color: var(--info-500); } .projects-quick-filters > a[href*="status=completed"]:not(.filter-chip-active):hover { background: var(--info-50); border-color: var(--info-500); } .projects-quick-filters > a[href*="status=completed"].filter-chip-active { border-color: var(--info-600); color: var(--info-700); background: var(--info-50); } /* בוטלו - אדום */ .projects-quick-filters > a[href*="status=cancelled"]:not(.filter-chip-active) { border-color: var(--error-200); color: var(--error-500); } .projects-quick-filters > a[href*="status=cancelled"]:not(.filter-chip-active):hover { background: var(--error-50); border-color: var(--error-500); } .projects-quick-filters > a[href*="status=cancelled"].filter-chip-active { border-color: var(--error-600); color: var(--error-700); background: var(--error-50); } /* -------- סטטיסטיקות / KPI -------- */ /* הערה: .stats-grid ו-.stat-card הועברו ל-components/cards.css */ /* כל העיצובים של .stat-card, .stat-card-inner, .stat-icon, .stat-label, .stat-value וכו' נמצאים ב-components/cards.css */ /* -------- חיפוש וסינון -------- */ .search-filter-card { border-radius: var(--radius-card); border: 1px solid var(--color-border); box-shadow: 0 6px 18px rgba(148, 163, 184, 0.15); overflow: hidden; } .search-filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; } .search-filter-title { margin: 0; font-size: 0.95rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; } .search-filter-title i { color: var(--primary-600); } .search-filter-form { margin-top: 0.3rem; } .search-filter-grid { display: grid; grid-template-columns: 1fr; /* ✅ Mobile-First - ברירת מחדל למובייל */ gap: 0.75rem; } .filter-field { display: flex; flex-direction: column; gap: 0.2rem; } .filter-field-wide { grid-column: span 2; } .filter-field .form-label { margin-bottom: 0; font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; } .filter-field .form-select, .filter-field .form-control { font-size: 0.78rem; padding-block: 0.25rem; padding-inline: 0.45rem; border-radius: 0.5rem; } .input-with-icon { position: relative; } .input-icon { position: absolute; inset-inline-start: 0.5rem; inset-block: 50%; transform: translateY(-50%); font-size: 0.78rem; color: var(--color-dark); opacity: 0.7; } .input-with-icon .form-control { padding-inline-start: 1.65rem; } .filter-actions { display: flex; align-items: flex-end; } .filter-actions .btn { font-size: 0.78rem; border-radius: 0.55rem; } /* -------- כרטיסי פרויקטים -------- */ .projects-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } .project-card { border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); overflow: hidden; } .project-card-inner { padding: 0.75rem 0.95rem 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; } .project-card-header { display: flex; justify-content: space-between; gap: 0.4rem; align-items: flex-start; border-bottom: 1px dashed rgba(209, 213, 219, 0.9); padding-bottom: 0.4rem; } .project-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .project-card-title { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .project-card-code { font-size: 0.74rem; color: var(--color-dark); opacity: 0.7; display: inline-flex; gap: 0.25rem; } .code-label { opacity: 0.85; } .project-status-badge .badge { font-size: 0.7rem; padding-block: 0.15rem; padding-inline: 0.5rem; } .project-card-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr); gap: 0.5rem 0.75rem; margin-top: 0.4rem; } .project-main-info, .project-side-info { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; } .project-info-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .project-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: 0.2rem; } .project-info-label i { font-size: 0.75rem; color: var(--text-tertiary); } .project-info-value { color: var(--text-primary); } .project-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-progress-block { margin-top: 0.25rem; } .project-progress-header { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; margin-bottom: 0.15rem; } .project-progress-text { font-size: 0.74rem; color: var(--color-dark); opacity: 0.7; } .progress-thin { height: 5px; border-radius: 999px; overflow: hidden; background-color: var(--border-primary); } .progress-thin .progress-bar { background: linear-gradient(90deg, var(--success-500), var(--success-600)); } .project-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--border-primary); } .project-actions-left { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; width: 100%; } /* לחצנים מודרניים וקומפקטיים - עיצוב מינימליסטי ואיכותי */ /* שימוש ב-selectors חזקים עם כדי לדרוס את projects.css */ .project-card-footer .btn-action, .projects-table-actions .btn-action, .project-actions-left .btn-action { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-primary); border-radius: 4px; font-size: 0; cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); background: var(--text-inverse); color: var(--text-secondary); box-shadow: none; position: relative; min-width: 24px; font-weight: normal; } .project-card-footer .btn-action:hover, .projects-table-actions .btn-action:hover, .project-actions-left .btn-action:hover { background: var(--bg-muted); border-color: var(--border-secondary); transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .project-card-footer .btn-action:active, .projects-table-actions .btn-action:active, .project-actions-left .btn-action:active { background: var(--bg-tertiary); transform: scale(0.95); } .project-card-footer .btn-action i, .projects-table-actions .btn-action i, .project-actions-left .btn-action i { font-size: 11px; line-height: 1; display: block; margin: 0; } /* צפייה - כחול עדין */ .project-card-footer .btn-action.btn-view, .projects-table-actions .btn-action.btn-view, .project-actions-left .btn-action.btn-view { color: var(--primary-500); border-color: var(--primary-100); background: var(--text-inverse); } .project-card-footer .btn-action.btn-view:hover, .projects-table-actions .btn-action.btn-view:hover, .project-actions-left .btn-action.btn-view:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-600); } /* לוח זמנים - טורקיז עדין */ .project-card-footer .btn-action.btn-schedule, .project-card-footer .btn-action.btn-info, .projects-table-actions .btn-action.btn-schedule, .projects-table-actions .btn-action.btn-info, .project-actions-left .btn-action.btn-schedule, .project-actions-left .btn-action.btn-info { color: var(--info-500); border-color: var(--info-200); background: var(--text-inverse); } .project-card-footer .btn-action.btn-schedule:hover, .project-card-footer .btn-action.btn-info:hover, .projects-table-actions .btn-action.btn-schedule:hover, .projects-table-actions .btn-action.btn-info:hover, .project-actions-left .btn-action.btn-schedule:hover, .project-actions-left .btn-action.btn-info:hover { background: var(--info-50); border-color: var(--info-500); color: var(--info-600); } /* עריכה - כתום עדין */ .project-card-footer .btn-action.btn-edit, .projects-table-actions .btn-action.btn-edit, .project-actions-left .btn-action.btn-edit { color: var(--warning-600); border-color: var(--warning-300); background: var(--text-inverse); } .project-card-footer .btn-action.btn-edit:hover, .projects-table-actions .btn-action.btn-edit:hover, .project-actions-left .btn-action.btn-edit:hover { background: var(--warning-50); border-color: var(--warning-600); color: var(--warning-700); } /* מחיקה - אדום עדין */ .project-card-footer .btn-action.btn-delete, .projects-table-actions .btn-action.btn-delete, .project-actions-left .btn-action.btn-delete { color: var(--error-500); border-color: var(--error-200); background: var(--text-inverse); } .project-card-footer .btn-action.btn-delete:hover, .projects-table-actions .btn-action.btn-delete:hover, .project-actions-left .btn-action.btn-delete:hover { background: var(--error-50); border-color: var(--error-500); color: var(--error-600); } /* תאימות לאחור - אם יש שימוש ב-btn-view/btn-edit/btn-delete ללא btn-action */ .project-card-footer .btn-view:not(.btn-action), .project-card-footer .btn-edit:not(.btn-action), .project-card-footer .btn-delete:not(.btn-action), .projects-table-actions .btn-view:not(.btn-action), .projects-table-actions .btn-edit:not(.btn-action), .projects-table-actions .btn-delete:not(.btn-action) { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-primary); border-radius: 4px; font-size: 0; cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); background: var(--text-inverse); box-shadow: none; } /* -------- מצב ללא פרויקטים -------- */ .projects-empty-state { border-radius: var(--radius-card); background: var(--color-surface); border: 1px dashed rgba(148, 163, 184, 0.7); text-align: center; padding: 1.8rem 1rem; margin-top: 0.4rem; color: var(--text-secondary); } /* לחצן הוספה במצב ריק */ .projects-empty-state .btn-action.btn-add { width: 28px; height: 28px; background: var(--text-inverse); color: var(--success-500); border-color: var(--success-200); border: 1px solid var(--success-200); } .projects-empty-state .btn-action.btn-add:hover { background: var(--success-50); border-color: var(--success-500); color: var(--success-600); } .projects-empty-state .btn-action.btn-add i { font-size: 12px; } .projects-empty-state i { color: var(--text-tertiary); } .projects-empty-state h3 { font-size: 1rem; margin-bottom: 0.15rem; color: var(--text-primary); } .projects-empty-state p { font-size: 0.8rem; margin-bottom: 0.6rem; } /* -------- טבלת פרויקטים -------- */ .projects-table-wrapper { margin-top: 0.5rem; } .projects-table-responsive { border-radius: var(--radius-card); overflow: hidden; } /* העיצוב הגלובלי של הטבלה נטען מ-tables.css - אין עיצוב ספציפי כאן */ .projects-td-ellipsis { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .projects-table-actions { display: inline-flex; gap: 0.2rem; align-items: center; justify-content: center; } .projects-table-actions .btn-action { width: 22px; height: 22px; } .projects-table-actions .btn-action i { font-size: 10px; } .link-project-name { font-weight: 600; text-decoration: none; } /* ===== PRO FILTER TOOLBAR ===== */ .projects-filter-toolbar { border-radius: var(--radius-card); border: 1px solid var(--color-border); box-shadow: 0 5px 20px rgba(15, 23, 42, 0.12); background: var(--text-inverse); } .projects-filter-toolbar .card-body { padding-block: 0.55rem; padding-inline: 0.8rem; } .filter-toolbar-title { font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; } .filter-toolbar-title i { font-size: 0.85rem; color: var(--primary-600); } .filter-toolbar-meta { font-size: 0.75rem; color: var(--color-dark); opacity: 0.7; } .pro-filter-pills { max-width: 100%; } .pro-filter-pill { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--primary-50); color: var(--primary-800); border: 1px solid var(--primary-100); white-space: nowrap; } .filter-toolbar-form .filter-label { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.1rem; } .filter-toolbar-form .form-control, .filter-toolbar-form .form-select { font-size: 0.78rem; padding-block: 0.25rem; padding-inline: 0.45rem; border-radius: 0.6rem; } .filter-input-with-icon { position: relative; } .filter-input-icon { position: absolute; inset-inline-start: 0.5rem; inset-block: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--color-dark); opacity: 0.7; } .filter-input-with-icon .form-control { padding-inline-start: 1.7rem; } /* Segmented status */ .pro-filter-status-group { display: flex; flex-direction: column; gap: 0.2rem; } .pro-status-segment { background: var(--bg-muted); padding: 0.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-primary); overflow-x: visible; /* overflow-x: auto רק במובייל */ } @media (max-width: 1023px) { .pro-status-segment { overflow-x: auto; } } .pro-status-segment .filter-status-btn { border-radius: 999px; border: none; padding: 0.2rem 0.6rem; font-size: 0.75rem; color: var(--text-secondary); background: transparent; white-space: nowrap; } .pro-status-segment .filter-status-btn i { font-size: 0.75rem; } .pro-status-segment .btn-check:checked + .filter-status-btn { background: var(--primary-600); color: var(--primary-50); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.6); } .pro-status-segment .filter-status-btn:hover { background: var(--border-primary); } .pro-advanced-toggle { font-size: 0.78rem; border-radius: 999px; padding-block: 0.25rem; padding-inline: 0.55rem; } .filter-submit-btn { border-radius: 999px; font-size: 0.78rem; padding-block: 0.25rem; padding-inline: 0.75rem; } .pro-clear-filters { font-size: 0.75rem; } /* ===== Projects Search Engine – קומפקטי מקצועי ===== */ .projects-search-engine { border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--text-inverse); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); } .projects-search-engine .card-body { padding-block: 0.55rem; padding-inline: 0.75rem; } .projects-search-form { display: flex; flex-direction: column; gap: 0.3rem; } .projects-search-main { min-height: 0; } .search-label { font-size: 0.75rem; color: var(--text-secondary); } /* חיפוש ראשי */ .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: 0.5rem; inset-block: 50%; transform: translateY(-50%); font-size: 0.8rem; color: var(--color-dark); opacity: 0.7; } .search-input-wrapper .form-control { padding-inline-start: 1.8rem; font-size: 0.8rem; border-radius: 999px; border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-600); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25); } /* צ'יפים לסטטוס */ .projects-search-status { min-width: 240px; } .status-chip-group { display: flex; flex-wrap: wrap; gap: 0.25rem; background: transparent; border-radius: 0; padding: 0; border: none; } /* לחצני סטטוס מודרניים וקומפקטיים */ .status-chip { border: 1px solid var(--border-primary); background: var(--text-inverse); border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.7rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; white-space: nowrap; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; min-height: 24px; } .status-chip i { font-size: 0.65rem; line-height: 1; } .status-chip:hover { background: var(--bg-muted); border-color: var(--border-secondary); color: var(--text-primary); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } /* סטטוס פעיל - עם צבעים שונים לפי סוג */ .status-chip-active { background: var(--text-inverse); color: var(--text-primary); font-weight: 600; border-width: 1.5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* סטטוס "הכל" פעיל */ .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary); } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary); color: var(--text-primary); } /* תכנון - כחול */ .status-chip[value="planning"]:not(.status-chip-active) { border-color: var(--primary-100); color: var(--primary-500); } .status-chip[value="planning"]:not(.status-chip-active):hover { background: var(--primary-50); border-color: var(--primary-500); } .status-chip[value="planning"].status-chip-active { border-color: var(--primary-600); color: var(--primary-700); background: var(--primary-50); } /* בביצוע - ירוק */ .status-chip[value="in_progress"]:not(.status-chip-active) { border-color: var(--success-100); color: var(--success-500); } .status-chip[value="in_progress"]:not(.status-chip-active):hover { background: var(--success-50); border-color: var(--success-500); } .status-chip[value="in_progress"].status-chip-active { border-color: var(--success-600); color: var(--success-700); background: var(--success-50); } /* מושהה - כתום */ .status-chip[value="on_hold"]:not(.status-chip-active) { border-color: var(--warning-300); color: var(--warning-600); } .status-chip[value="on_hold"]:not(.status-chip-active):hover { background: var(--warning-50); border-color: var(--warning-600); } .status-chip[value="on_hold"].status-chip-active { border-color: var(--warning-700); color: var(--warning-800); background: var(--warning-50); } /* הושלם - טורקיז */ .status-chip[value="completed"]:not(.status-chip-active) { border-color: var(--info-200); color: var(--info-500); } .status-chip[value="completed"]:not(.status-chip-active):hover { background: var(--info-50); border-color: var(--info-500); } .status-chip[value="completed"].status-chip-active { border-color: var(--info-600); color: var(--info-700); background: var(--info-50); } /* בוטל - אדום */ .status-chip[value="cancelled"]:not(.status-chip-active) { border-color: var(--error-200); color: var(--error-500); } .status-chip[value="cancelled"]:not(.status-chip-active):hover { background: var(--error-50); border-color: var(--error-500); } .status-chip[value="cancelled"].status-chip-active { border-color: var(--error-600); color: var(--error-700); background: var(--error-50); } /* כפתורי פעולה */ /* לחצני חיפוש מודרניים וקומפקטיים - קטנים ומעוצבים */ .projects-search-actions .btn-action.btn-advanced, .projects-search-actions .btn-action.btn-filter { width: 22px; height: 22px; background: var(--text-inverse); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; font-size: 0; min-width: 22px; font-weight: normal; } /* לחצן מתקדם - אפור עדין */ .projects-search-actions .btn-action.btn-advanced { color: var(--text-secondary); border-color: var(--border-primary); } .projects-search-actions .btn-action.btn-advanced:hover { background: var(--bg-muted); border-color: var(--border-secondary); color: var(--text-primary); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .projects-search-actions .btn-action.btn-advanced:active { background: var(--bg-tertiary); transform: scale(0.95); } /* לחצן סנן - כחול עדין */ .projects-search-actions .btn-action.btn-filter { color: var(--primary-500); border-color: var(--primary-100); } .projects-search-actions .btn-action.btn-filter:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-600); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(59, 130, 246, 0.15); } .projects-search-actions .btn-action.btn-filter:active { background: var(--primary-100); transform: scale(0.95); } .projects-search-actions .btn-action i { font-size: 10px; line-height: 1; display: block; margin: 0; } /* gap קטן יותר בין הלחצנים */ .projects-search-actions { gap: 0.25rem; align-items: center; } /* תאימות לאחור */ .projects-search-actions .advanced-toggle, .projects-search-actions .main-search-submit { font-size: 0.78rem; padding-block: 0.25rem; padding-inline: 0.7rem; border-radius: 999px; } .projects-search-actions .advanced-toggle i { font-size: 0.78rem; } /* אזור מתקדם */ .projects-search-advanced .form-select { font-size: 0.78rem; padding-block: 0.25rem; padding-inline: 0.45rem; border-radius: 0.6rem; } .clear-filters-link { font-size: 0.75rem; } /* שורת סיכום */ .projects-search-summary { font-size: 0.76rem; color: var(--color-dark); opacity: 0.7; } .projects-search-summary strong { color: var(--text-primary); } /* -------- עיצוב inline styles שהוסרו -------- */ /* עיצוב cursor pointer */ .cursor-pointer { cursor: pointer; } /* -------- עיצוב PDF viewer -------- */ .pdf-modal-body { height: calc(100vh - 120px); overflow-x: visible; /* overflow-x: auto רק במובייל */ overflow-y: hidden; position: relative; } @media (max-width: 1023px) { .pdf-modal-body { overflow-x: auto; } } .pdf-viewer { width: 100%; height: 100%; border: none; } .pdf-error { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 20px; background: var(--text-inverse); border: 2px solid var(--error-600); border-radius: 8px; } /* -------- רספונסיביות (Mobile-First) -------- */ /* ברירת מחדל - מובייל (כבר מוגדר למעלה) */ @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .search-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .filter-field-wide { grid-column: span 2; } .projects-title { font-size: 1.5rem; } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } .search-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .pro-filter-status-group { width: 100%; } .pro-status-segment { width: 100%; } .projects-filter-toolbar .card-body { padding-block: 0.7rem; } .projects-search-main { flex-direction: column; align-items: stretch; } .projects-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .projects-search-actions { align-items: stretch; } } } /* ============================================ עיצוב מודרני למודול פרויקטים - Theme מבוסס על העיצוב המודרני עם ניגודיות מושלמת ============================================ */ /* ======================================== 1. צבעי בסיס ומשתנים (פרויקטים) ======================================== */ :root { /* צבעים ראשיים */ --project-primary: var(--primary-500); --project-primary-dark: var(--primary-700); --project-primary-light: var(--primary-300); /* רקעים כהים */ --project-bg-dark: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%); --project-bg-dark-solid: var(--text-primary); /* רקעים בהירים */ --project-bg-light: var(--card-bg); --project-bg-light-gray: var(--bg-secondary); --project-bg-light-blue: var(--primary-50); /* טקסט - ניגודיות מושלמת */ --project-text-on-dark: var(--text-inverse); --project-text-on-light: var(--text-primary); --project-text-muted: var(--text-secondary); /* גבולות */ --project-border-primary: var(--primary-500); --project-border-light: var(--border-primary); /* צללים */ --project-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04); --project-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08); --project-shadow-lg: 0 8px 32px rgba(31, 38, 135, 0.15); --project-shadow-xl: 0 12px 40px rgba(31, 38, 135, 0.2); /* Gradients לכפתורים */ --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); --gradient-purple: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); --gradient-red: linear-gradient(135deg, var(--error-500) 0%, var(--warning-600) 100%); --gradient-teal: linear-gradient(135deg, var(--info-500) 0%, var(--secondary-600) 100%); } /* ======================================== 2. כותרת ראשית מעוצבת ======================================== */ /* הוסר - page headers מעוצבים גלובלית ב-components/navigation.css */ /* הערה: כללי ספציפיים לנושא נשמרים רק עבור project-card-header */ /* ===== Project Card Header - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .project-card-header נמצאים ב-components/forms.css (.contractor-header-custom / .form-header-custom) */ /* ======================================== 3. סרגל פעולות עליון - משתמש בעיצוב הגלובלי מ-base.css ======================================== */ /* כל העיצובים של .project-actions-bar נמצאים ב-base.css */ /* ======================================== 4. טאבים מודרניים - משתמש בעיצוב הגלובלי מ-forms.css ======================================== */ /* כל העיצובים של .nav-tabs-custom נמצאים ב-components/forms.css */ /* ======================================== 5. כרטיסים - משתמש בעיצוב הגלובלי מ-cards.css ======================================== */ /* כל העיצובים של .card נמצאים ב-components/cards.css */ /* ===== Card Header - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של .card-header נמצאים ב-components/cards.css */ /* ===== Card Body - משתמש בעיצוב הגלובלי מ-cards.css ===== */ /* כל העיצובים של .card-body נמצאים ב-components/cards.css */ /* ======================================== 6. Info Boxes - משתמש בעיצוב הגלובלי מ-base.css ======================================== */ /* כל העיצובים של .info-box (כולל hover) נמצאים ב-base.css */ /* ===== Info Box Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .info-box-explanation נמצאים ב-base.css */ /* ===== Tab Explanation - משתמש בעיצוב הגלובלי מ-base.css ===== */ /* כל העיצובים של .tab-explanation נמצאים ב-base.css */ /* ======================================== 7. כפתורים ======================================== */ .btn { border-radius: 8px; font-weight: 600; padding: 0.6rem 1.2rem; transition: all 0.3s ease; } .btn-primary { background: var(--gradient-primary); border: none; color: var(--project-text-on-dark); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(33, 150, 243, 0.4); } .btn-success { background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%); border: none; color: var(--project-text-on-dark); } .btn-danger { background: var(--gradient-red); border: none; color: var(--project-text-on-dark); } .btn-info { background: var(--gradient-teal); border: none; color: var(--project-text-on-dark); } .btn-secondary { background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-secondary) 100%); border: none; color: var(--project-text-on-dark); } /* כפתורי Outline */ .btn-outline-primary { color: var(--project-primary); border: 2px solid var(--project-primary); background: var(--project-bg-light); } .btn-outline-primary:hover { background: var(--project-primary); color: var(--project-text-on-dark); transform: translateY(-2px); } .btn-outline-danger { color: var(--error-500); border: 2px solid var(--error-500); background: var(--project-bg-light); } .btn-outline-danger:hover { background: var(--error-500); color: var(--project-text-on-dark); transform: translateY(-2px); } /* ======================================== 8. אזור מסמכים - משתמש בעיצוב הגלובלי מ-cards.css ======================================== */ /* כל העיצובים של documents-card, documents-card-header, documents-wrapper, folder-section, folder-name, docs-table נמצאים ב-components/cards.css */ /* ======================================== 9. Badges ======================================== */ /* ===== Badge ===== */ /* הוסר - badges מעוצבים ב-components-enhanced.css גלובלית */ .status-active { background: var(--success-50); color: var(--success-600); } .status-inactive { background: var(--border-primary); color: var(--text-secondary); } /* ======================================== 10. טבלה ======================================== */ /* ===== Tables ===== */ /* הוסר - tables מעוצבים ב-tables.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 11. טפסים ======================================== */ /* הוסר - .form-card מעוצב ב-components/cards.css גלובלית */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ .form-text { color: var(--project-text-muted); } /* ======================================== 12. התראות ======================================== */ .alert-danger { background: rgba(220, 53, 69, 0.1); color: var(--error-900); border-right: 4px solid var(--error-500); border-radius: 12px; } .alert-warning { background: rgba(251, 191, 36, 0.1); color: var(--warning-900); border-right: 4px solid var(--warning-500); border-radius: 12px; } .alert-info { background: rgba(8, 145, 178, 0.1); color: var(--info-700); border-right: 4px solid var(--info-500); border-radius: 12px; } /* ======================================== 13. Modal ======================================== */ /* ===== Modals ===== */ /* הוסר - modals מעוצבים גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי לנושא, יש להשתמש ב-class ספציפי */ /* ======================================== 14. סטטיסטיקות ======================================== */ .stat-box { margin-bottom: 1rem; } .stat-box h4 { color: var(--project-primary); font-weight: 700; margin: 0; } .stat-box p { color: var(--project-text-muted); font-size: 0.85rem; margin: 0.25rem 0 0; } /* ======================================== 15. רספונסיביות ======================================== */ @media (max-width: 767.98px) { .project-header-custom, .projects-list-header, .project-card-header { padding: 1rem 1.25rem; } .nav-tabs-custom .nav-link { padding: 0.5rem 1rem; font-size: 0.85rem; } .btn { padding: 0.5rem 1rem; font-size: 0.9rem; } } /* ======================================== 16. אנימציות ======================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tab-pane { animation: fadeIn 0.3s ease-in; } /* תיקוני עיצוב ספציפיים לפרויקטים */ .project-card { border-radius: 16px; box-shadow: var(--project-shadow-md); overflow: hidden; border-right: 4px solid var(--project-border-primary); } .form-card { border-right: 4px solid var(--project-border-primary); } .table-card { border-right: 4px solid var(--project-border-primary); } /* בלוקים נוספים - כל הכרטיסים */ .search-card, .filter-card, .stats-card { /* כרטיסים ספציפיים - לא KPIs */ } /* ===== KPI Cards & Stat Cards ===== */ /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */ /* כרטיסי חיפוש וסינון */ .projects-search-panel, .search-filters-card { border-right: 4px solid var(--project-border-primary); background: var(--secondary-800); border-radius: 16px; box-shadow: var(--project-shadow-md); } .project-card-body { background: var(--project-bg-light); color: var(--project-text-on-light); padding: 1.5rem; } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ============================================ Reports Module Styles ============================================ עיצוב ספציפי למודול Reports כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* ===== index.html - Style tag 1 ===== */ /* אייקון עזרה קטן */ .kpi-help-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; background: var(--rgba-white-20); color: var(--rgba-white-90); font-size: 10px; font-weight: bold; cursor: help; margin-right: 4px; vertical-align: middle; transition: all 0.2s ease; } .kpi-help-icon:hover { background: var(--rgba-white-30); transform: scale(1.1); } /* Tooltip */ .kpi-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: var(--shadow-overlay); font-size: 0.8rem; line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* ===== edit.html - Style tag 1 ===== */ .field-selector { border: 1px solid var(--border-primary); border-radius: 4px; padding: 10px; margin-bottom: 15px; max-height: 300px; overflow-y: auto; } .field-item { padding: 5px; cursor: pointer; border-radius: 4px; margin-bottom: 5px; } .field-item:hover { background-color: var(--bg-secondary); } .field-item.selected { background-color: var(--primary-500); color: var(--text-inverse); } .filter-section { border: 1px solid var(--border-primary); border-radius: 4px; padding: 15px; margin-bottom: 15px; } .sort-section { border: 1px solid var(--border-primary); border-radius: 4px; padding: 15px; margin-bottom: 15px; } /* ===== Inline styles - תיקון: העברת inline styles ל-CSS ===== */ /* תיקון: position: relative על stat-label (מ-index.html בגרסה הקודמת) */ .stat-label { position: relative; } /* תיקון: stat-progress-bar - width נשאר דינמי ({{ }}) אבל נוסיף עיצוב בסיסי */ .stat-progress { width: 100%; height: 6px; background: var(--rgba-white-20); border-radius: 999px; overflow: hidden; margin-top: 0.5rem; } .stat-progress-bar { height: 100%; background: var(--rgba-white-90); border-radius: 999px; transition: width 0.3s ease; } } /* ============================================ Safety Module Styles ============================================ עיצוב ספציפי למודול Safety גרסה מאוחדת ומצומצמת - הוסרו כפילויות ============================================ */ /* ===== משתני Safety - הגדרה אחת מרכזית ===== */ :root { --safety-bg: var(--bg-secondary); --safety-border: var(--border-primary); --safety-radius-lg: var(--radius-lg); --safety-radius-md: var(--radius-md); --safety-shadow-soft: var(--shadow-lg); --safety-shadow-subtle: var(--shadow-md); } /* משתני צבע ספציפיים - מוגדרים לפי דף */ /* ברירת מחדל: error (תקריות) */ :root { --safety-primary: var(--error-500); --safety-primary-soft: var(--error-100); --safety-secondary: var(--warning-500); } /* certifications: success */ body[class*="certifications"] :root, .certifications-page :root { --safety-primary: var(--success-500); --safety-primary-soft: rgba(40, 167, 69, 0.08); } /* periodic_inspections: info */ body[class*="periodic_inspections"] :root, .periodic-inspections-page :root { --safety-primary: var(--info-500); --safety-primary-soft: rgba(23, 162, 184, 0.08); } /* inspections: info */ body[class*="inspections"] :root, .inspections-page :root { --safety-primary: var(--info-500); --safety-primary-soft: rgba(23, 162, 184, 0.08); } /* alerts: error */ body[class*="alerts"] :root, .alerts-page :root { --safety-primary: var(--error-500); --safety-primary-soft: var(--error-100); } /* trainings: success */ body[class*="trainings"] :root, .trainings-page :root { --safety-primary: var(--success-500); --safety-primary-soft: rgba(40, 167, 69, 0.08); } /* equipment: warning */ body[class*="equipment"] :root, .equipment-page :root { --safety-primary: var(--warning-500); --safety-primary-soft: rgba(255, 193, 7, 0.08); } /* incidents: error */ body[class*="incidents"] :root, .incidents-page :root { --safety-primary: var(--error-500); --safety-primary-soft: var(--error-100); } /* ===== עיצובים משותפים - מוגדרים פעם אחת ===== */ body.safety-page { background-color: var(--safety-bg); } /* כותרת עמוד - עיצוב אחיד */ .safety-page-header { background: var(--card-bg); border-radius: var(--safety-radius-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--safety-shadow-subtle); } .safety-page-title { display: flex; align-items: center; gap: var(--spacing-2); } .safety-page-title h1 { font-size: var(--text-2xl); margin: 0; color: var(--text-primary); font-weight: 700; } .safety-page-title-icon { width: calc(var(--spacing-6) * 1.25); height: calc(var(--spacing-6) * 1.25); border-radius: var(--radius-full); background: var(--safety-primary-soft); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); color: var(--safety-primary); } .safety-header-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); justify-content: flex-end; } /* ===== KPI Cards ===== */ /* KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית - אין צורך בעיצובים כאן */ /* כרטיסי רשימה */ .list-card { background: var(--card-bg); border-radius: var(--safety-radius-md); box-shadow: var(--safety-shadow-subtle); margin-bottom: var(--spacing-5); height: 100%; } .list-card-header { padding: 16px 20px; border-bottom: 1px solid var(--safety-border); display: flex; justify-content: space-between; align-items: center; } .list-card-header h6 { margin: 0; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--spacing-2); } .list-card-body { padding: 16px 20px; } .list-item { padding: 12px 0; border-bottom: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: center; } .list-item:last-child { border-bottom: none; } .list-item-content h6 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .list-item-content small { color: var(--text-secondary); font-size: 0.85rem; } /* פעולות מהירות */ .quick-actions { background: var(--card-bg); border-radius: var(--safety-radius-md); box-shadow: var(--safety-shadow-subtle); padding: var(--spacing-5); } .quick-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-5); border-radius: var(--safety-radius-md); text-decoration: none; transition: all 0.2s ease; height: 100%; min-height: calc(var(--spacing-6) * 7.5); } .quick-action-btn:hover { transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: var(--safety-shadow-soft); } .quick-action-btn i { font-size: var(--text-3xl); margin-bottom: var(--spacing-2); } .quick-action-btn span { font-size: 0.9rem; font-weight: 600; } /* אייקון עזרה */ .kpi-help-icon { display: inline-block; width: var(--spacing-4); height: var(--spacing-4); line-height: var(--spacing-4); text-align: center; border-radius: 50%; background: var(--gray-200); color: var(--text-secondary); font-size: var(--text-xs); font-weight: bold; cursor: help; margin-right: var(--spacing-1); vertical-align: middle; transition: all 0.2s ease; } .kpi-help-icon:hover { background: var(--gray-300); color: var(--text-primary); transform: scale(1.1); } /* Tooltip */ .kpi-tooltip { position: absolute; z-index: 1000; max-width: calc(var(--spacing-6) * 17.5); padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: 0.8rem; line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: var(--spacing-4); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: var(--spacing-4); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } .list-explanation { background: var(--bg-secondary); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: var(--spacing-4); font-size: 0.85rem; color: var(--text-primary); border-right: 3px solid var(--text-secondary); } .quick-action-explanation { background: linear-gradient(135deg, var(--warning-50) 0%, var(--warning-100) 100%); border-right: 4px solid var(--warning-500); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--warning-900); box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15); } .quick-action-explanation i { margin-left: 0.5rem; font-size: 1.1rem; } /* ===== עיצובים משותפים לכל דפי add/edit/view ===== */ body.safety-form-page { background: radial-gradient(circle at top right, rgba(227, 242, 253, 0.4), var(--bg-secondary)); min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", "Rubik", "Alef", sans-serif; } .safety-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.15); max-width: 980px; width: 100%; margin: 0 auto; overflow: hidden; } .card-header-custom { background: linear-gradient(135deg, var(--info-500), var(--info-700)); color: var(--text-inverse); padding: 1.75rem 1.75rem 1.25rem; } .card-header-custom h1 { font-size: var(--text-2xl); margin: 0; display: flex; align-items: center; gap: 0.75rem; } .card-header-custom p { margin: 0.35rem 0 0; opacity: 0.92; font-size: 0.95rem; } .card-body-custom { padding: 1.75rem; } .section-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; } .section-title i { font-size: 0.85rem; color: var(--safety-primary); } /* עיצובים ספציפיים לפי דף */ .section-title[class*="inspections"] { border-right: 4px solid var(--info-500); } .section-title[class*="alerts"] { border-right: 4px solid var(--error-500); } .section-title[class*="trainings"] { border-right: 4px solid var(--success-500); } .section-title[class*="equipment"] { border-right: 4px solid var(--warning-500); } .section-title[class*="incidents"] { border-right: 4px solid var(--error-500); } .form-section { margin-bottom: 1.4rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.6); } .card-footer-custom { padding: 1.25rem 1.75rem 1.75rem; border-top: 1px solid var(--border-primary); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; } .card-header-custom .header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* עיצובים ספציפיים ל-certifications */ .card-header-custom[class*="certifications"] { background: linear-gradient(135deg, var(--success-500), var(--success-500)); } /* ===== Search Filters - עיצוב אחיד ===== */ .search-filters { background: var(--surface-50); color: var(--secondary-900); border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; transition: box-shadow 0.3s ease, transform 0.2s ease; } .search-filters:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12); } .search-filters-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-bottom: 12px; } .search-filters-header-title { display: flex; align-items: center; gap: var(--spacing-2); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .search-filters .form-label { font-size: 0.78rem; color: var(--text-primary); font-weight: 500; margin-bottom: 6px; } .search-filters .form-control, .search-filters .form-select { font-size: 0.875rem; border-radius: 10px; border: 1.5px solid #d1d5db; background: var(--surface-50); color: var(--secondary-900); color: #1f2937; padding-block: 10px; padding-inline: 14px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .search-filters .form-control:hover, .search-filters .form-select:hover { border-color: #9ca3af; } .search-filters .form-control:focus, .search-filters .form-select:focus { border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05); outline: none; transform: translateY(-1px); } /* ===== Table Card - עיצוב אחיד ===== */ .table-card { background: var(--card-bg); border-radius: var(--safety-radius-md); box-shadow: var(--safety-shadow-subtle); overflow: hidden; } .table-card-header { padding: 16px 20px; border-bottom: 1px solid var(--safety-border); display: flex; justify-content: space-between; align-items: center; } .table-card-header h6 { margin: 0; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--spacing-2); } /* ===== Tables ===== */ /* Tables מעוצבים ב-tables.css גלובלית */ /* ===== Empty State - עיצוב אחיד ===== */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state i { font-size: 3.2rem; color: var(--border-primary); margin-bottom: 12px; } /* ===== Nav Tabs ===== */ .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; } .nav-tabs .nav-link.active { color: var(--safety-primary); border-bottom-color: var(--safety-primary); background: transparent; } .nav-tabs .nav-link:hover { border-color: transparent; color: var(--safety-primary); } /* ===== File Info ===== */ .file-info { background: var(--primary-50); padding: 0.75rem 1rem; border-radius: 0.5rem; margin-top: 0.5rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; } .file-info i { color: var(--primary-600); } .file-remove { margin-right: auto; cursor: pointer; color: var(--error-500); font-weight: 600; } /* ===== Info Boxes ===== */ /* Info boxes מעוצבים גלובלית - רק עיצובים ספציפיים למודול נשמרים */ .info-box-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; } .info-box-value { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); } .info-box-value.empty { color: var(--text-secondary); font-style: italic; } .info-box p { margin: 0.35rem 0 0; opacity: 0.92; font-size: 0.95rem; } .info-item { display: flex; flex-direction: column; gap: 0.25rem; } .info-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .info-value { font-size: var(--text-base); color: var(--text-primary); font-weight: 500; } /* ===== Status Badges ===== */ /* הערה: כל העיצובים של Status Badges הועברו ל-components-enhanced.css */ .type-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.9rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; background: var(--info-50); color: var(--primary-700); } .alert-box { padding: 1rem 1.25rem; border-radius: 0.75rem; margin-bottom: var(--spacing-4); display: flex; align-items: center; gap: 0.75rem; } .alert-box.warning { background: var(--warning-50); border-right: 4px solid var(--warning-600); color: var(--warning-800); } .alert-box.danger { background: var(--error-50); border-right: 4px solid var(--error-600); color: var(--error-800); } .alert-box i { font-size: 1.25rem; } /* ===== KPI Icons (לפי דף dashboard) ===== */ .kpi-icon { width: calc(var(--spacing-6) * 1.5); height: calc(var(--spacing-6) * 1.5); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); margin-bottom: var(--spacing-3); } .kpi-primary .kpi-icon { background: var(--info-100); color: var(--info-500); } .kpi-success .kpi-icon { background: var(--success-100); color: var(--success-500); } .kpi-warning .kpi-icon { background: var(--warning-100); color: var(--warning-500); } .kpi-info .kpi-icon { background: rgba(13, 110, 253, 0.1); color: var(--primary-500); } .kpi-value { font-size: var(--text-3xl); font-weight: 700; color: var(--text-primary); margin: 8px 0 4px; } .kpi-label { font-size: 0.9rem; color: var(--text-secondary); margin: 0; } .action-card { background: var(--card-bg); border-radius: var(--safety-radius-md); box-shadow: var(--safety-shadow-subtle); padding: var(--spacing-5); text-align: center; transition: transform var(--transition-base), box-shadow var(--transition-base); height: 100%; } .action-card:hover { transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .action-card-icon { font-size: 3rem; margin-bottom: 12px; } /* ===== View Card ===== */ .view-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.15); max-width: 1100px; width: 100%; margin: 0 auto; overflow: hidden; } .view-card .card-header-custom { background: linear-gradient(135deg, var(--info-500), var(--info-500)); color: var(--text-inverse); padding: 1.75rem; } .view-card .card-header-custom h1 { font-size: var(--text-2xl); margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.75rem; } .header-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; opacity: 0.95; font-size: 0.9rem; } .header-meta-item { display: flex; align-items: center; gap: 0.4rem; } .view-content { padding: 1.75rem; } .section-header { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 1.5rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-primary); display: flex; align-items: center; gap: 0.5rem; } .section-header i { color: var(--safety-primary); } .content-box { background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: var(--spacing-4); } .sidebar { background: var(--bg-secondary); border-radius: 0.75rem; padding: 1.25rem; border: 1px solid var(--border-primary); } .sidebar-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .file-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-primary); } .file-item:last-child { border-bottom: none; } /* ===== עיצובים נוספים ===== */ .pre-wrap-text { white-space: pre-wrap; } form.inline-form { display: inline; } .modal-footer form { display: inline; } .btn-group-sm .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .periodic-inspections-dashboard .text-muted.small-text { font-size: 0.9rem; } /* ===== Print Styles (incidents/print.html) ===== */ @media print { .no-print { display: none; } body { margin: 0; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); background: var(--surface-50); color: var(--secondary-900); } .header { text-align: center; border-bottom: 3px solid var(--error-500); padding-bottom: 20px; margin-bottom: 30px; } .incident-title { font-size: 28px; font-weight: bold; color: var(--error-500); margin-bottom: 10px; } .incident-id { font-size: 18px; color: var(--text-secondary); } .section { margin-bottom: 30px; page-break-inside: avoid; } .section-title { font-size: 20px; font-weight: bold; color: var(--error-500); border-bottom: 2px solid var(--error-500); padding-bottom: 5px; margin-bottom: 15px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .info-item { margin-bottom: 10px; } .info-label { font-weight: bold; color: var(--text-secondary); } .info-value { color: var(--text-primary); } .footer { margin-top: 50px; text-align: center; font-size: 14px; color: var(--text-secondary); } .print-button { position: fixed; top: 20px; right: 20px; background: var(--error-500); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } .print-button:hover { background: var(--error-700); } .back-button { position: fixed; top: 20px; left: 20px; background: var(--text-secondary); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; } .back-button:hover { background: var(--text-secondary); color: var(--text-inverse); text-decoration: none; } .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; } .status-open { background-color: var(--error-50); color: var(--error-900); } .status-investigating { background-color: var(--warning-50); color: var(--warning-900); } .status-resolved { background-color: var(--success-50); color: var(--success-900); } .severity-critical, .severity-high { background-color: var(--error-50); color: var(--error-900); } .severity-medium { background-color: var(--warning-50); color: var(--warning-900); } .severity-low { background-color: var(--success-50); color: var(--success-900); } } } /* ============================================ Settings Module Styles ============================================ עיצוב ספציפי למודול Settings כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* Settings Module - General Styles */ /* No static styles found - all styles are dynamic or in base CSS */ } /* SUPPLIERS MODULE STYLES */ /* Extracted from previous version */ /* From add.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .page-wrapper נמצאים ב-components/forms.css */ /* ===== Supplier Card - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card נמצאים ב-components/forms.css */ /* ===== Supplier Card Header - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-header נמצאים ב-components/forms.css */ /* ===== Supplier Card Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-title נמצאים ב-components/forms.css */ /* ===== Supplier Card Title Icon - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-title-icon נמצאים ב-components/forms.css */ /* ===== Supplier Card Body - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-body נמצאים ב-components/forms.css */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } .section-title { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.45rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; } .section-title i { font-size: 0.88rem; color: var(--primary); } .section-subtitle { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.85rem; } /* ===== Forms, Supplier Card Footer ===== */ /* הערה: כל העיצובים של .form-label .required, .supplier-card-footer, .btn-sm-custom נמצאים ב-components/forms.css ו-components/buttons.css */ .input-group-text { font-size: var(--text-xs); background-color: var(--primary-soft); border-color: var(--border-primary); border-right: none; border-radius: var(--input-radius) 0 0 var(--input-radius); } .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* From edit.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .page-wrapper נמצאים ב-components/forms.css */ /* ===== Supplier Card - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card נמצאים ב-components/forms.css */ /* ===== Supplier Card Header - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-header נמצאים ב-components/forms.css */ /* ===== Supplier Card Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-title נמצאים ב-components/forms.css */ /* ===== Supplier Card Title Icon - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-title-icon נמצאים ב-components/forms.css */ /* ===== Supplier Card Body - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-body נמצאים ב-components/forms.css */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } /* ===== Nav Tabs Custom - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .nav-tabs-custom נמצאים ב-components/forms.css */ /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ /* הערה: .input-group-text כבר מוגדר למעלה בשורה 66 */ .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } .form-check-label { font-size: var(--text-xs); } /* ===== Supplier Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .supplier-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ @media (max-width: 767.98px) { .supplier-card-header { padding: 1rem 1.25rem 0.8rem; } .supplier-card-title h1 { font-size: 1.1rem; } .supplier-card-title-icon { width: 2rem; height: 2rem; } .supplier-card-body { padding: 1.25rem; } .nav-tabs-custom { padding: 0.3rem; border-radius: 0.6rem; } .nav-tabs-custom .nav-link { padding: 0.4rem 0.6rem; font-size: var(--text-xs); } .supplier-card-footer { padding: 0.8rem 1.25rem 0.9rem; } /* .btn-sm-custom - הועבר ל-components/buttons.css (עם responsive) */ } /* From print.html */ @media print { .no-print { display: none; } body { margin: 0; padding: 20px; } } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); margin: 0; padding: 20px; background: var(--card-bg); } .header { text-align: center; border-bottom: 3px solid var(--primary-500); padding-bottom: 20px; margin-bottom: 30px; } .supplier-title { font-size: 28px; font-weight: bold; color: var(--primary-500); margin-bottom: 10px; } .supplier-code { font-size: 18px; color: var(--text-secondary); } .section { margin-bottom: 30px; page-break-inside: avoid; } .section-title { font-size: 20px; font-weight: bold; color: var(--primary-500); border-bottom: 2px solid var(--primary-500); padding-bottom: 5px; margin-bottom: 15px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .info-item { margin-bottom: 10px; } .info-label { font-weight: bold; color: var(--text-secondary); } .info-value { color: var(--text-primary); } .footer { margin-top: 50px; text-align: center; font-size: 14px; color: var(--text-secondary); } .print-button { position: fixed; top: 20px; right: 20px; background: var(--primary-500); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } .print-button:hover { background: var(--primary-700); } .back-button { position: fixed; top: 20px; left: 20px; background: var(--text-secondary); color: var(--text-inverse); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; } .back-button:hover { background: var(--text-secondary); color: var(--text-inverse); text-decoration: none; } .status-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; } .status-active { background-color: var(--success-50); color: var(--success-900); } .status-inactive { background-color: var(--error-50); color: var(--error-900); } /* From view.html */ .supplier-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .default-icon-large, .default-avatar-large נמצאים ב-components/cards.css */ /* .supplier-avatar-large נשאר ספציפי למודול */ .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--secondary-600)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-500); padding-right: 10px; margin-bottom: 1rem; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /* ===== Form Errors List - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-errors-list נמצא ב-components/forms.css */ /* Print Page Info Item Styles */ .info-item.mt-20 { margin-top: 20px; } /* Suppliers Header Gradient */ .suppliers-header-gradient { background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); border-top: 1px solid rgba(33, 150, 243, 0.2); border-bottom: 1px solid rgba(33, 150, 243, 0.2); border-left: 1px solid rgba(33, 150, 243, 0.2); } /* Suppliers Card Border */ .suppliers-card-border { border-right: 4px solid var(--primary-500); } /* -------- Suppliers Index Page Styles -------- */ /* בסיס עמוד */ .suppliers-page { --suppliers-radius: var(--radius-lg); --suppliers-radius-lg: var(--radius-xl); --suppliers-gap: var(--spacing-4); --suppliers-border-subtle: var(--border-primary); --suppliers-bg-soft: var(--bg-secondary); --suppliers-bg-card: var(--card-bg); --suppliers-text-muted: var(--text-secondary); --suppliers-shadow-soft: var(--shadow-lg); --suppliers-shadow-subtle: var(--shadow-md); --suppliers-accent: var(--primary-500); --suppliers-accent-soft: var(--primary-100); --suppliers-danger-soft: var(--error-100); --suppliers-success-soft: var(--success-100); --suppliers-warning-soft: var(--warning-100); --suppliers-radius-pill: var(--radius-full); background: transparent; min-height: calc(100vh - calc(var(--spacing-12) * 3.75)); } /* כותרת עליונה */ .suppliers-header { border-radius: var(--suppliers-radius-lg); background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%); color: var(--text-primary); box-shadow: var(--shadow-md); border-right: var(--spacing-1) solid var(--primary-500); border-top: 1px solid var(--primary-200); border-bottom: 1px solid var(--primary-200); border-left: 1px solid var(--primary-200); padding: var(--spacing-5) var(--spacing-5); position: relative; overflow: hidden; } .suppliers-header::before { content: none; display: none; } .suppliers-header-main { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6); align-items: center; justify-content: space-between; z-index: 1; } .suppliers-title-wrap { display: flex; flex-direction: column; gap: var(--spacing-1); } .suppliers-title { font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; margin: 0; color: var(--text-primary); } .suppliers-title-icon { font-size: var(--text-2xl); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200), var(--shadow-md); color: var(--primary-500); } .suppliers-subtitle { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); } .suppliers-header-actions { display: flex; align-items: center; gap: var(--spacing-2); } .suppliers-header-actions .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .suppliers-header-actions .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .suppliers-header-actions .btn-action.btn-add i { font-size: var(--text-xs) ; } .suppliers-empty-state .btn-action.btn-add { width: var(--spacing-7) ; height: var(--spacing-7) ; background: var(--card-bg) ; color: var(--success-500) ; border-color: var(--success-200) ; border: 1px solid var(--success-200) ; } .suppliers-empty-state .btn-action.btn-add:hover { background: var(--success-50) ; border-color: var(--success-500) ; color: var(--success-600) ; } .suppliers-empty-state .btn-action.btn-add i { font-size: var(--text-xs) ; } .btn-icon-ghost { border-radius: var(--radius-full); border: 1px solid var(--border-primary); width: calc(var(--spacing-6) * 1.5); height: calc(var(--spacing-6) * 1.5); padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--text-sm); transition: all var(--transition-base); } .btn-icon-ghost:hover { border-color: var(--primary-500); color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 1px var(--primary-200); transform: translateY(calc(var(--spacing-1) * -1)) scale(1.02); } /* פילטרים מהירים */ .suppliers-quick-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-top: var(--spacing-3); } .filter-chip { display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; padding: var(--spacing-1) var(--spacing-2) ; border-radius: var(--radius-sm) ; font-size: var(--text-xs) ; border: 1px solid var(--border-primary) ; color: var(--text-secondary) ; text-decoration: none ; background: var(--card-bg) ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .filter-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .filter-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .filter-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .suppliers-quick-filters > a:first-child.filter-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .suppliers-quick-filters > a[href*="status=active"]:not(.filter-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .suppliers-quick-filters > a[href*="status=active"]:not(.filter-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .suppliers-quick-filters > a[href*="status=active"].filter-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .suppliers-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .suppliers-quick-filters > a[href*="status=inactive"]:not(.filter-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .suppliers-quick-filters > a[href*="status=inactive"].filter-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } /* סטטיסטיקות / KPI */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ✅ Mobile-First - 2 בשורה */ gap: 0.75rem; /* 12px - מרווח קטן יותר במובייל */ margin-top: var(--spacing-5); } .stat-meta { display: flex; flex-direction: column; gap: var(--spacing-1); } .stat-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .stat-caption { font-size: var(--text-xs); color: var(--suppliers-text-muted); } .stat-value-row { display: flex; align-items: baseline; justify-content: space-between; } .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); } .stat-mini-value { font-size: var(--text-xs); color: var(--suppliers-text-muted); } .stat-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-top: var(--spacing-1); } .stat-subtitle { font-size: var(--text-xs); color: var(--suppliers-text-muted); display: inline-flex; align-items: center; gap: var(--spacing-1); } .stat-subtitle i { font-size: var(--text-xs); } /* מנוע חיפוש וסינון */ .suppliers-search-engine { border-radius: var(--suppliers-radius); border: 1px solid var(--suppliers-border-subtle); background: var(--card-bg); box-shadow: var(--shadow-md); } .suppliers-search-engine .card-body { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); } .suppliers-search-form { display: flex; flex-direction: column; gap: var(--spacing-1); } .suppliers-search-main { min-height: 0; } .search-label { font-size: var(--text-xs); color: var(--text-secondary); } .search-input-wrapper { position: relative; } .search-input-icon { position: absolute; inset-inline-start: var(--spacing-2); inset-block: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--suppliers-text-muted); } .search-input-wrapper .form-control { padding-inline-start: var(--spacing-7); font-size: var(--text-xs); border-radius: var(--radius-full); border-color: var(--border-primary); } .search-input-wrapper .form-control:focus { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-200); } .suppliers-search-status { min-width: calc(var(--spacing-12) * 5); } .status-chip-group { display: flex; flex-wrap: wrap; gap: var(--spacing-1); background: transparent; border-radius: 0; padding: 0; border: none; } .status-chip { border: 1px solid var(--border-primary) ; background: var(--card-bg) ; border-radius: var(--radius-sm) ; padding: var(--spacing-1) var(--spacing-2) ; font-size: var(--text-xs) ; color: var(--text-secondary) ; display: inline-flex ; align-items: center ; gap: var(--spacing-1) ; cursor: pointer ; white-space: nowrap ; transition: all var(--transition-fast) ; font-weight: 500 ; min-height: var(--spacing-6) ; } .status-chip i { font-size: var(--text-xs) ; line-height: 1 ; } .status-chip:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .status-chip-active { background: var(--card-bg) ; color: var(--text-primary) ; font-weight: 600 ; border-width: calc(var(--spacing-1) * 0.375) ; box-shadow: var(--shadow-sm) ; } .status-chip[value=""]:not(.status-chip-active), .status-chip[value=""]:not(.status-chip-active):hover { border-color: var(--border-primary) ; } .status-chip[value=""].status-chip-active { border-color: var(--text-secondary) ; color: var(--text-primary) ; } .status-chip[value="active"]:not(.status-chip-active) { border-color: var(--success-50) ; color: var(--success-500) ; } .status-chip[value="active"]:not(.status-chip-active):hover { background: var(--success-50) ; border-color: var(--success-500) ; } .status-chip[value="active"].status-chip-active { border-color: var(--success-600) ; color: var(--success-700) ; background: var(--success-50) ; } .status-chip[value="inactive"]:not(.status-chip-active) { border-color: var(--error-200) ; color: var(--error-500) ; } .status-chip[value="inactive"]:not(.status-chip-active):hover { background: var(--error-50) ; border-color: var(--error-500) ; } .status-chip[value="inactive"].status-chip-active { border-color: var(--error-600) ; color: var(--error-700) ; background: var(--error-50) ; } .suppliers-search-actions .btn-action.btn-advanced, .suppliers-search-actions .btn-action.btn-filter { width: 22px ; height: 22px ; background: var(--card-bg) ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; padding: 0 ; display: inline-flex ; align-items: center ; justify-content: center ; cursor: pointer ; transition: all var(--transition-fast) ; box-shadow: none ; font-size: 0 ; min-width: calc(var(--spacing-6) * 0.92) ; font-weight: normal ; } .suppliers-search-actions .btn-action.btn-advanced { color: var(--text-secondary) ; border-color: var(--border-primary) ; } .suppliers-search-actions .btn-action.btn-advanced:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; color: var(--text-primary) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .suppliers-search-actions .btn-action.btn-filter { color: var(--primary-500) ; border-color: var(--primary-50) ; } .suppliers-search-actions .btn-action.btn-filter:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; transform: translateY(calc(var(--spacing-1) * -1)) ; box-shadow: var(--shadow-xs) ; } .suppliers-search-actions .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .suppliers-search-actions { gap: 0.25rem ; align-items: center ; } .suppliers-search-advanced .form-select { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); border-radius: var(--radius-md); } .clear-filters-link { font-size: var(--text-xs); } .suppliers-search-summary { font-size: var(--text-xs); color: var(--suppliers-text-muted); } .suppliers-search-summary strong { color: var(--text-primary); } /* כרטיסי ספקים */ .suppliers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); } .contractor-card { border-radius: var(--suppliers-radius); background: var(--suppliers-bg-card); border: 1px solid var(--border-primary); box-shadow: var(--suppliers-shadow-subtle); overflow: hidden; } .contractor-card-inner { padding: var(--spacing-3) var(--spacing-4) var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); } .contractor-card-header { display: flex; justify-content: space-between; gap: var(--spacing-2); align-items: flex-start; border-bottom: 1px dashed var(--border-primary); padding-bottom: var(--spacing-2); } .contractor-card-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); } .contractor-card-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .contractor-card-code { font-size: var(--text-xs); color: var(--suppliers-text-muted); display: inline-flex; gap: var(--spacing-1); } .code-label { opacity: 0.85; } .contractor-status-badge .badge { font-size: var(--text-xs); padding-block: var(--spacing-1); padding-inline: var(--spacing-2); } .contractor-card-body { display: flex; flex-direction: column; gap: var(--spacing-2); margin-top: var(--spacing-2); } .contractor-main-info { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-xs); } .contractor-info-row { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; } .contractor-info-label { flex-shrink: 0; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; gap: var(--spacing-1); } .contractor-info-label i { font-size: var(--text-xs); color: var(--text-secondary); } .contractor-info-value { color: var(--text-primary); } .contractor-info-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contractor-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-2); padding-top: var(--spacing-2); border-top: 1px solid var(--border-primary); } .contractor-actions-left { display: flex; flex-wrap: wrap; gap: var(--spacing-1); align-items: center; width: 100%; } .contractor-card-footer .btn-action, .suppliers-table-actions .btn-action, .contractor-actions-left .btn-action { display: inline-flex ; align-items: center ; justify-content: center ; width: var(--spacing-6) ; height: var(--spacing-6) ; padding: 0 ; border: 1px solid var(--border-primary) ; border-radius: var(--radius-sm) ; font-size: 0 ; cursor: pointer ; transition: all var(--transition-fast) ; background: var(--card-bg) ; color: var(--text-secondary) ; box-shadow: none ; position: relative ; min-width: var(--spacing-6) ; font-weight: normal ; } .contractor-card-footer .btn-action:hover, .suppliers-table-actions .btn-action:hover, .contractor-actions-left .btn-action:hover { background: var(--bg-secondary) ; border-color: var(--border-primary) ; transform: none ; box-shadow: var(--shadow-xs) ; } .contractor-card-footer .btn-action:active, .suppliers-table-actions .btn-action:active, .contractor-actions-left .btn-action:active { background: var(--bg-secondary) ; transform: scale(0.95) ; } .contractor-card-footer .btn-action i, .suppliers-table-actions .btn-action i, .contractor-actions-left .btn-action i { font-size: var(--text-xs) ; line-height: 1 ; display: block ; margin: 0 ; } .contractor-card-footer .btn-action.btn-view, .suppliers-table-actions .btn-action.btn-view, .contractor-actions-left .btn-action.btn-view { color: var(--primary-500) ; border-color: var(--primary-50) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-view:hover, .suppliers-table-actions .btn-action.btn-view:hover, .contractor-actions-left .btn-action.btn-view:hover { background: var(--primary-50) ; border-color: var(--primary-500) ; color: var(--primary-500) ; } .contractor-card-footer .btn-action.btn-edit, .suppliers-table-actions .btn-action.btn-edit, .contractor-actions-left .btn-action.btn-edit { color: var(--warning-600) ; border-color: var(--warning-200) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-edit:hover, .suppliers-table-actions .btn-action.btn-edit:hover, .contractor-actions-left .btn-action.btn-edit:hover { background: var(--warning-50) ; border-color: var(--warning-600) ; color: var(--warning-600) ; } .contractor-card-footer .btn-action.btn-delete, .suppliers-table-actions .btn-action.btn-delete, .contractor-actions-left .btn-action.btn-delete { color: var(--error-500) ; border-color: var(--error-200) ; background: var(--card-bg) ; } .contractor-card-footer .btn-action.btn-delete:hover, .suppliers-table-actions .btn-action.btn-delete:hover, .contractor-actions-left .btn-action.btn-delete:hover { background: var(--error-50) ; border-color: var(--error-500) ; color: var(--error-600) ; } /* מצב ללא ספקים */ .suppliers-empty-state { border-radius: var(--suppliers-radius); background: var(--suppliers-bg-card); border: 1px dashed var(--border-primary); text-align: center; padding: var(--spacing-7) var(--spacing-4); margin-top: var(--spacing-2); color: var(--text-secondary); } .suppliers-empty-state i { color: var(--text-secondary); } .suppliers-empty-state h3 { font-size: var(--text-base); margin-bottom: var(--spacing-1); color: var(--text-primary); } .suppliers-empty-state p { font-size: var(--text-xs); margin-bottom: var(--spacing-3); } /* טבלת ספקים */ .suppliers-table-wrapper { margin-top: var(--spacing-2); } .suppliers-table-responsive { border-radius: var(--suppliers-radius); overflow: hidden; } .suppliers-table { font-size: var(--text-xs); margin-bottom: 0; } .suppliers-table thead tr { background: var(--bg-secondary); } .suppliers-table thead th { border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); padding-block: var(--spacing-2); padding-inline: var(--spacing-3); white-space: nowrap; } .suppliers-table tbody td { padding-block: var(--spacing-2); padding-inline: var(--spacing-3); vertical-align: middle; border-color: var(--border-primary); } .suppliers-td-ellipsis { max-width: calc(var(--spacing-12) * 4.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suppliers-table-actions { display: inline-flex; gap: var(--spacing-1); align-items: center; justify-content: center; } .suppliers-table-actions .btn-action { width: 22px ; height: 22px ; } .suppliers-table-actions .btn-action i { font-size: var(--text-xs) ; } .link-contractor-name { font-weight: 600; text-decoration: none; color: var(--text-primary); } .link-contractor-name:hover { color: var(--primary-500); } .kpi-help-icon { display: inline-block; width: var(--spacing-4); height: var(--spacing-4); line-height: var(--spacing-4); text-align: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-500); font-size: var(--text-xs); font-weight: bold; cursor: help; margin-right: var(--spacing-2); margin-left: var(--spacing-1); vertical-align: middle; transition: all var(--transition-normal); flex-shrink: 0; border: 1px solid var(--primary-200); } .kpi-help-icon:hover { background: var(--primary-200); color: var(--primary-600); transform: scale(1.15); border-color: var(--primary-300); } .kpi-tooltip { position: absolute; z-index: 1000; max-width: calc(var(--spacing-12) * 5.83); padding: var(--spacing-3) var(--spacing-3); background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal), transform var(--transition-normal); transform: translateY(calc(var(--spacing-2) * -1.25)); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.5); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: calc(var(--spacing-2) * -1.75); right: var(--spacing-4); width: 0; height: 0; border-left: var(--spacing-2) solid transparent; border-right: var(--spacing-2) solid transparent; border-bottom: var(--spacing-2) solid var(--border-primary); } /* רספונסיביות (Mobile-First) */ /* ברירת מחדל - מובייל (כבר מוגדר למעלה) */ @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .suppliers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */ } .suppliers-title { font-size: var(--text-2xl); } } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */ } } @media (min-width: 1200px) { .suppliers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ */ } } @media (max-width: 767.98px) { .suppliers-search-main { flex-direction: column; align-items: stretch; } .suppliers-search-status { width: 100%; } .status-chip-group { justify-content: flex-start; } .suppliers-search-actions { align-items: stretch; } } /* USERS MODULE STYLES */ /* Extracted from previous version */ /* From add.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ /* ===== Page Wrapper, User Card, Card Header, Card Title, Card Title Icon, Card Body ===== */ /* הערה: כל העיצובים של .page-wrapper, .user-card, .user-card-header, .user-card-title, .user-card-title-icon, .user-card-body נמצאים ב-components/forms.css */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ .input-group-text { font-size: var(--text-xs); background-color: var(--primary-soft); border-color: var(--border-primary); border-right: none; border-radius: var(--input-radius) 0 0 var(--input-radius); } .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* ===== User Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .user-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* From edit.html */ /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */ .user-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(148, 163, 184, 0.12); max-width: 1100px; margin: 0 auto; width: 100%; overflow: hidden; } .user-card-header { background: linear-gradient(135deg, rgba(13, 110, 253, 0.95), rgba(0, 188, 212, 0.9)); color: var(--text-inverse); padding: 1.25rem 1.5rem 1rem; border-bottom: none; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .user-card-title { display: flex; align-items: center; gap: 0.6rem; } .user-card-title-icon { width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--text-inverse); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .user-card-title h1 { font-size: 1.3rem; margin: 0; font-weight: 700; color: var(--text-inverse); } .user-card-title small { display: block; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.85); font-weight: 400; margin-top: 0.2rem; } .user-card-body { padding: 1.5rem 1.5rem 1.3rem; } /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-title נמצאים ב-components/forms.css */ /* ===== Section Subtitle - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .section-subtitle נמצאים ב-components/forms.css */ /* ===== Forms ===== */ /* הוסר - forms מעוצבים ב-components/forms.css גלובלית */ /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-label .required נמצא ב-components/forms.css */ /* הערה: .badge-soft ו-.input-group-text כבר מוגדרים למעלה (מ-add.html) */ .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* ===== User Card Footer - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* כל העיצובים של .user-card-footer נמצאים ב-components/forms.css */ /* .btn-sm-custom - הועבר ל-components/buttons.css */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* From login.html */ :root { --auth-primary: var(--primary-500); --auth-primary-soft: var(--primary-400); --auth-accent: var(--warning-500); --auth-dark: var(--text-primary); --auth-surface: rgba(15, 23, 42, 0.94); --auth-border: rgba(148, 163, 184, 0.7); --auth-shadow: 0 18px 45px rgba(15, 23, 42, 0.9); --auth-radius-lg: 1.75rem; --auth-radius-md: 1.25rem; --auth-blur: 22px; --auth-transition: all 0.25s ease; } .auth-page-wrapper { min-height: calc(100vh - 80px); padding: 80px 0 60px; background: radial-gradient(circle at top right, var(--info-50) 0, transparent 55%), radial-gradient(circle at bottom left, var(--primary-50) 0, transparent 55%), linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 40%, var(--bg-secondary) 100%); display: flex; align-items: center; } .auth-card { max-width: 480px; margin: 0 auto; background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.09), transparent 60%), radial-gradient(circle at bottom left, rgba(129, 140, 248, 0.09), transparent 65%), var(--auth-surface); border-radius: var(--auth-radius-lg); border: 1px solid var(--auth-border); box-shadow: var(--auth-shadow); backdrop-filter: blur(var(--auth-blur)); color: var(--text-secondary); overflow: hidden; } .auth-card-header { padding: 22px 26px 10px; border-bottom: 1px solid rgba(30, 64, 175, 0.5); position: relative; } .auth-card-header::before { content: ""; position: absolute; inset-inline-start: 16%; inset-inline-end: 16%; inset-block-end: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.9), rgba(249, 115, 22, 0.8), transparent); opacity: 0.8; } .auth-kicker { display: inline-flex; align-items: center; gap: 0.4rem; padding: 4px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(148, 163, 184, 0.65); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; } .auth-kicker i { font-size: 0.9rem; color: var(--auth-accent); } .auth-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 4px; color: var(--text-inverse); text-align: center; } .auth-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin: 0; text-align: center; } .auth-card-body { padding: 20px 26px 18px; } .auth-card-footer { padding: 14px 20px 18px; border-top: 1px solid rgba(31, 41, 55, 0.9); background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 1)); font-size: 0.9rem; text-align: center; color: var(--text-secondary); } .auth-card-footer a { color: var(--auth-primary-soft); text-decoration: none; font-weight: 600; transition: var(--auth-transition); } .auth-card-footer a:hover { color: var(--primary-200); text-decoration: underline; } /* Alert */ .auth-alert { border-radius: 1rem; border: 1px solid rgba(248, 113, 113, 0.8); background: rgba(127, 29, 29, 0.9); color: var(--error-50); font-size: 0.88rem; padding: 10px 12px; margin-bottom: 14px; box-shadow: 0 12px 30px rgba(127, 29, 29, 0.85); } .auth-alert-title { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 4px; } .auth-alert-title i { font-size: 1rem; } .auth-alert ul { margin: 4px 0 0; padding-inline-start: 1.3rem; } .auth-alert li { margin-bottom: 2px; } /* Form */ .auth-field { margin-bottom: 14px; } .auth-label { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; } .auth-input { border-radius: 999px; border: 1px solid rgba(55, 65, 81, 0.95); background: rgba(15, 23, 42, 0.98); color: var(--text-secondary); font-size: 0.9rem; padding: 10px 14px; transition: var(--auth-transition); width: 100%; } .auth-input::placeholder { color: var(--text-secondary); font-size: 0.86rem; } .auth-input:focus { border-color: rgba(129, 140, 248, 0.95); box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.9); background: rgba(15, 23, 42, 0.98); outline: none; } /* Error states (שומרים על השם is-invalid כדי לא לשבור את הלוגיקה) */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* הערה: אם יש צורך בעיצוב ספציפי ל-auth, ניתן להוסיף Flavor קטן */ font-weight: 500; } /* Remember me */ .auth-remember-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 12px 0 6px; font-size: 0.85rem; color: var(--text-secondary); } .auth-remember-row .form-check-input { cursor: pointer; } .auth-remember-row .form-check-label { cursor: pointer; } /* Button */ .btn-auth-primary { width: 100%; border-radius: 999px; padding: 10px 18px; font-size: 0.96rem; font-weight: 600; border: 1px solid rgba(249, 250, 251, 0.9); background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.22), transparent 60%), linear-gradient(135deg, var(--bg-secondary), var(--border-primary)); color: var(--text-primary); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.92); transition: var(--auth-transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .btn-auth-primary i { font-size: 0.95rem; } .btn-auth-primary:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.96); background: linear-gradient(135deg, var(--bg-secondary), var(--border-primary)); } .btn-auth-primary:active { transform: translateY(0); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.9); } @media (max-width: 768px) { .auth-page-wrapper { padding: 70px 0 40px; } .auth-card { border-radius: 1.4rem; } .auth-card-header { padding: 20px 18px 10px; } .auth-card-body { padding: 18px 18px 16px; } } /* From register.html */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* From reset_password.html */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* From view.html */ .user-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--info-500) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } /* ===== Avatars - הועבר ל-components/cards.css ===== */ /* כל העיצובים של .default-icon-large, .default-avatar-large נמצאים ב-components/cards.css */ .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--info-500)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } .section-title { font-weight: 700; font-size: 1.05rem; border-right: 4px solid var(--primary-500); padding-right: 10px; margin-bottom: 1rem; } /* ===== Info Boxes ===== */ /* הוסר - info boxes מעוצבים גלובלית */ /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */ /* כל העיצובים של .status-badge, .status-active, .status-inactive נמצאים ב-components-enhanced.css */ .stat-box { margin-bottom: 15px; } .stat-box h4 { margin: 0; } .stat-box p { margin: 2px 0 0; font-size: 0.85rem; opacity: 0.75; } /* ===== Cards ===== */ /* הוסר - cards מעוצבים ב-components/cards.css גלובלית */ /* Profile Image Styles */ .profile-image { width: 150px; height: 150px; object-fit: cover; } .profile-image-placeholder { width: 150px; height: 150px; } /* Form Error List Styles */ /* ===== Form Errors List - משתמש בעיצוב הגלובלי מ-forms.css ===== */ /* העיצוב הבסיסי של .form-errors-list נמצא ב-components/forms.css */ /* ============================================ Light Theme - הוסר - רק dark mode נתמך ============================================ */ /* ============================================ Worklogs Module Styles color: var(--text-inverse); /* ============================================ Worklogs Module Styles ============================================ עיצוב ספציפי למודול Worklogs כל העיצובים הועתקו בדיוק כפי שהם מהקבצים המקוריים ============================================ */ /* Worklogs Add Page - Main Styles */ /* עיצוב לשוניות */ .nav-tabs .nav-link { color: var(--text-secondary); border: none; border-bottom: 3px solid transparent; padding: 0.75rem 1rem; font-weight: 500; transition: all 0.3s ease; } .nav-tabs .nav-link:hover { color: var(--text-primary); border-bottom-color: var(--border-primary); } .nav-tabs .nav-link.active { color: var(--primary-500); border-bottom-color: var(--primary-500); background-color: transparent; } .nav-tabs .nav-link i { margin-left: 0.5rem; } /* עיצוב תוכן לשוניות */ .tab-content { padding: 2rem 0; } .tab-pane { min-height: 400px; } /* תיקון קריטי להצגת לשוניות Bootstrap 5 */ .tab-pane:not(.show) { display: none; } .tab-pane.show { display: block; } .tab-pane.fade:not(.show) { opacity: 0; } .tab-pane.fade.show { opacity: 1; transition: opacity 0.15s linear; } /* ===== Alerts & Buttons - משתמש בעיצוב הגלובלי ===== */ /* כל העיצובים של alerts ו-.btn-lg נמצאים בקבצים הגלובליים */ /* ===== Form Validation ===== */ /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */ /* הערה: אנימציית shake נשארת - היא ספציפית למודול */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* רספונסיביות */ @media (max-width: 768px) { .nav-tabs { flex-wrap: wrap; } .nav-tabs .nav-link { font-size: 0.875rem; padding: 0.5rem 0.75rem; } .tab-content { padding: 1rem 0; } } /* עיצוב קומפקטי לכל השורות הדינמיות */ [class*="-row"]:not([class*="-row-inner"]) { background-color: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 8px; margin-bottom: 8px; padding: 12px 16px; display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 60px; transform: none; transition: none; font-family: inherit; } [class*="-row"]:not([class*="-row-inner"]) .row { display: flex; align-items: center; gap: 8px; margin: 0; width: 100%; } [class*="-row"]:not([class*="-row-inner"]) .form-control { font-size: 18px; min-height: 40px; padding: 8px 12px; border-radius: 6px; flex: 1; border: 1px solid var(--border-primary); transition: none; margin-bottom: 0; font-family: inherit; width: auto; box-sizing: border-box; } [class*="-row"]:not([class*="-row-inner"]) .form-control:focus { border-color: var(--primary-200); box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.15); outline: none; } /* מספר שורה – מותאם למסגרת החדשה */ [class*="-row"] .row-number { width: 36px; height: 36px; font-size: 18px; line-height: 1; margin: 0 8px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--primary-500); color: var(--text-inverse); border-radius: 50%; text-align: center; font-weight: bold; flex-shrink: 0; } /* כפתורי מחיקה – מותאמים למסגרת החדשה */ [class*="remove-"] { border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; padding: 0; margin: 0; background-color: var(--error-500); border-color: var(--error-500); color: var(--text-inverse); } /* כפתורי הוספה – מותאמים */ #add-activity, #add-progress, #add-plan, #add-area, #add-crew { border-radius: 8px; padding: 10px 16px; font-size: 18px; margin-top: 8px; background-color: var(--success-500); border-color: var(--success-500); color: var(--text-inverse); min-height: 44px; } /* רספונסיביות – במסכים קטנים כל שורה נפרסת אנכית */ @media (max-width: 768px) { [class*="-row"]:not([class*="-row-inner"]) .row { flex-direction: column; gap: 2px; } [class*="-row"]:not([class*="-row-inner"]) .form-control { min-height: 24px; width: 100%; } } /* צבעים שונים לכל סוג שורה */ /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */ .activity-row .row-number { background-color: var(--success-500); color: var(--text-inverse); } .progress-row .row-number { background-color: var(--warning-500); color: var(--text-primary); } .plan-row .row-number { background-color: var(--info-500); color: var(--text-inverse); } .area-row .row-number { background-color: var(--secondary-600); color: var(--text-inverse); } .crew-row .row-number { background-color: var(--warning-600); color: var(--text-inverse); } /* Animation for new rows */ [class*="-row"].new { animation: slideIn 0.2s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* CSS ספציפי מאוד לעבור על כל ההגדרות הגלובליות */ #worklog-form [class*="-row"] { background-color: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 4px; margin-bottom: 4px; padding: 6px 8px; display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 40px; transform: none; transition: none; font-family: inherit; box-shadow: none; } #worklog-form [class*="-row"] .form-control { font-size: 18px; min-height: 28px; padding: 4px 6px; border-radius: 3px; flex: 1; border: 1px solid var(--border-primary); transition: none; margin-bottom: 0; font-family: inherit; width: auto; box-sizing: border-box; box-shadow: none; background: var(--card-bg); color: var(--text-primary); } #worklog-form [class*="-row"] .form-control:focus { background: var(--card-bg); border: 1px solid var(--primary-200); box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.15); outline: none; color: var(--text-primary); } /* ביטול מוחלט של כל ההגדרות הגלובליות עבור הטופס */ #worklog-form * { box-sizing: border-box; } #worklog-form .form-control, #worklog-form .form-select, #worklog-form input:not([type]), #worklog-form input[type="text"], #worklog-form input[type="number"], #worklog-form input[type="email"], #worklog-form input[type="password"], #worklog-form input[type="date"], #worklog-form input[type="time"], #worklog-form textarea, #worklog-form select { background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-primary); font-size: 18px; padding: 8px 12px; min-height: 38px; box-shadow: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin-bottom: 0; font-family: inherit; width: 100%; max-width: none; } #worklog-form .form-control:focus, #worklog-form .form-select:focus, #worklog-form input:focus, #worklog-form textarea:focus, #worklog-form select:focus { background: var(--card-bg); border: 1px solid var(--primary-200); box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.15); outline: none; color: var(--text-primary); } /* FIX: מניעת Collapsed Inline Text / Forced Column Layout Bug במובייל */ /* חובה: textarea תמיד display:block, לא flex/grid, עם line-height תקין */ /* שימוש ב-specificity גבוה יותר במקום !important - לפי חוקי .cursorrules */ #worklog-form textarea, #worklog-form textarea.form-control, #worklog-form textarea.form-field, form#worklog-form textarea { display: block; /* חובה: block בלבד, לא flex/grid */ width: 100%; max-width: 100%; line-height: 1.6; /* חובה: line-height >= 1.4 למניעת פירוק טקסט */ white-space: normal; /* חובה: טקסט רגיל, לא vertical */ } /* Wrapper ניטרלי ל-textarea בתוך worklog-form */ #worklog-form .worklog-textarea-wrapper, #worklog-form .form-field-wrapper, #worklog-form .textarea-wrapper { display: block; width: 100%; max-width: 100%; } /* וידוא ש-textarea בתוך row לא נפגע - specificity גבוה */ #worklog-form .row textarea, #worklog-form .row textarea.form-control, #worklog-form .row textarea.form-field, #worklog-form [class*="col-md-"] textarea, #worklog-form [class*="col-md-"] textarea.form-control { display: block; width: 100%; max-width: 100%; line-height: 1.6; white-space: normal; } /* ביטול מוחלט של הגדרות Bootstrap */ #worklog-form .row { display: flex; flex-wrap: wrap; margin: 0; width: 100%; max-width: 100%; } #worklog-form [class*="col-md-"] { width: auto; max-width: none; padding: 0 2px; margin: 0; flex: 1; } #worklog-form .g-1 { gap: 4px; } /* עיצוב ספציפי לשורות הדינמיות */ #worklog-form [class*="-row"] { background-color: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 6px; margin-bottom: 6px; padding: 10px 12px; display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 50px; transform: none; transition: none; font-family: inherit; box-shadow: none; max-width: 100%; } #worklog-form [class*="-row"] .row { display: flex; align-items: center; gap: 4px; margin: 0; width: 100%; max-width: 100%; padding: 0; flex-wrap: nowrap; } #worklog-form [class*="-row"] [class*="col-md-"] { width: auto; max-width: none; padding: 0 2px; margin: 0; flex: 1; text-align: right; } #worklog-form [class*="-row"] .form-control { font-size: 18px; min-height: 38px; padding: 8px 12px; border-radius: 4px; flex: 1; border: 1px solid var(--border-primary); transition: none; margin-bottom: 0; font-family: inherit; width: 100%; box-sizing: border-box; box-shadow: none; background: var(--card-bg); color: var(--text-primary); text-align: right; } #worklog-form [class*="-row"] .form-control:focus { background: var(--card-bg); border: 1px solid var(--primary-200); box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.15); outline: none; color: var(--text-primary); } /* הצמדת השדות עצמם לשמאל בשורות הדינמיות - עם CSS חזק יותר */ body #worklog-form .plan-row .row, #worklog-form .plan-row .row { display: flex; align-items: center; gap: 0; margin: 0; width: 100%; justify-content: flex-end; flex-direction: row; max-width: none; flex-wrap: nowrap; direction: ltr; } body #worklog-form .plan-row .row>*, #worklog-form .plan-row [class*="col-md-"] { margin: 0; padding: 0 1px; flex-shrink: 0; max-width: none; width: auto; box-sizing: border-box; } body #worklog-form .plan-row * { box-sizing: border-box; direction: ltr; } /* CSS חזק מאוד לשדות פרטי העבודה היומית - וידוא שכל 4 שדות בשורה */ /* תמיכה גם ב-Bootstrap Grid וגם ב-Tailwind Grid */ html body #worklog-form .basic-fields-container .row.g-4, body #worklog-form .basic-fields-container .row.g-4, #worklog-form .basic-fields-container .row.g-4, .basic-fields-container .row.g-4, html body #worklog-form .basic-fields-container .grid.gap-4, body #worklog-form .basic-fields-container .grid.gap-4, #worklog-form .basic-fields-container .grid.gap-4, .basic-fields-container .grid.gap-4, html body #worklog-form .basic-fields-container .grid.gap-3, body #worklog-form .basic-fields-container .grid.gap-3, #worklog-form .basic-fields-container .grid.gap-3, .basic-fields-container .grid.gap-3 { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; width: calc(100% + 1.5rem); box-sizing: border-box; flex-direction: row; clear: both; } /* תמיכה ב-Tailwind Grid - grid במקום flex */ html body #worklog-form .basic-fields-container .grid.gap-4, body #worklog-form .basic-fields-container .grid.gap-4, #worklog-form .basic-fields-container .grid.gap-4, .basic-fields-container .grid.gap-4, html body #worklog-form .basic-fields-container .grid.gap-3, body #worklog-form .basic-fields-container .grid.gap-3, #worklog-form .basic-fields-container .grid.gap-3, .basic-fields-container .grid.gap-3 { display: grid; grid-template-columns: repeat(12, 1fr); } html body #worklog-form .basic-fields-container .row.g-4 > .col-md-3, body #worklog-form .basic-fields-container .row.g-4 > .col-md-3, #worklog-form .basic-fields-container .row.g-4 > .col-md-3, html body .basic-fields-container .row.g-4 > .col-md-3, body .basic-fields-container .row.g-4 > .col-md-3, .basic-fields-container .row.g-4 > .col-md-3, html body #worklog-form .basic-fields-container .grid.gap-4 > .md\:col-span-3, body #worklog-form .basic-fields-container .grid.gap-4 > .md\:col-span-3, #worklog-form .basic-fields-container .grid.gap-4 > .md\:col-span-3, html body .basic-fields-container .grid.gap-4 > .md\:col-span-3, body .basic-fields-container .grid.gap-4 > .md\:col-span-3, .basic-fields-container .grid.gap-4 > .md\:col-span-3, html body #worklog-form .basic-fields-container .grid.gap-3 > .md\:col-span-3, body #worklog-form .basic-fields-container .grid.gap-3 > .md\:col-span-3, #worklog-form .basic-fields-container .grid.gap-3 > .md\:col-span-3, html body .basic-fields-container .grid.gap-3 > .md\:col-span-3, body .basic-fields-container .grid.gap-3 > .md\:col-span-3, .basic-fields-container .grid.gap-3 > .md\:col-span-3, html body #worklog-form .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], body #worklog-form .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], #worklog-form .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], html body .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], body .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], html body #worklog-form .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], body #worklog-form .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], #worklog-form .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], html body .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], body .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"] { flex: 0 0 25%; flex-basis: 25%; max-width: 25%; width: 25%; min-width: 25%; padding-left: 0.75rem; padding-right: 0.75rem; margin-bottom: 1rem; box-sizing: border-box; float: none; display: block; } /* תמיכה ב-Tailwind Grid - grid-column במקום flex */ html body #worklog-form .basic-fields-container .grid.gap-4 > .md\:col-span-3, body #worklog-form .basic-fields-container .grid.gap-4 > .md\:col-span-3, #worklog-form .basic-fields-container .grid.gap-4 > .md\:col-span-3, html body .basic-fields-container .grid.gap-4 > .md\:col-span-3, body .basic-fields-container .grid.gap-4 > .md\:col-span-3, .basic-fields-container .grid.gap-4 > .md\:col-span-3, html body #worklog-form .basic-fields-container .grid.gap-3 > .md\:col-span-3, body #worklog-form .basic-fields-container .grid.gap-3 > .md\:col-span-3, #worklog-form .basic-fields-container .grid.gap-3 > .md\:col-span-3, html body .basic-fields-container .grid.gap-3 > .md\:col-span-3, body .basic-fields-container .grid.gap-3 > .md\:col-span-3, .basic-fields-container .grid.gap-3 > .md\:col-span-3, html body #worklog-form .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], body #worklog-form .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], #worklog-form .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], html body .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], body .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], html body #worklog-form .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], body #worklog-form .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], #worklog-form .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], html body .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], body .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"], .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"] { grid-column: span 3 / span 3; flex: none; flex-basis: auto; max-width: none; width: auto; min-width: auto; } @media (max-width: 767px) { .basic-fields-container .row.g-4, .basic-fields-container .grid.gap-4, .basic-fields-container .grid.gap-3 { margin-left: -0.5rem; margin-right: -0.5rem; width: calc(100% + 1rem); } .basic-fields-container .row.g-4 > .col-md-3, .basic-fields-container .grid.gap-4 > .md\:col-span-3, .basic-fields-container .grid.gap-3 > .md\:col-span-3, .basic-fields-container .grid.gap-4 > [class*="md:col-span-3"], .basic-fields-container .grid.gap-3 > [class*="md:col-span-3"] { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; margin-bottom: 1rem; } } /* עיצוב מודרני לשדות הבסיסיים */ .form-control-modern, .form-select { border: 2px solid var(--border-primary); border-radius: 12px; padding: 12px 16px; font-size: 18px; background: var(--secondary-800); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .form-control-modern:focus, .form-select:focus { border-color: var(--info-500); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); outline: none; transform: translateY(-1px); } .form-control-modern:hover, .form-select:hover { border-color: var(--border-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .form-label-modern { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 18px; } .form-group-modern, .basic-fields-container .form-group-modern { margin-bottom: 20px; } .basic-fields-container { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border-primary) 100%); border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .basic-fields-container:hover { box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .basic-fields-container h5 { color: var(--text-primary); font-weight: 600; font-size: 18px; text-align: center; margin-bottom: 24px; position: relative; animation: fadeInUp 0.6s ease-out; } .basic-fields-container h5 i { margin-left: 8px; color: var(--info-500); font-size: 18px; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .basic-fields-container .form-label-modern { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 14px; } .basic-fields-container .form-label-modern i { margin-left: 6px; font-size: 18px; } .basic-fields-container .form-label-modern i.fa-project-diagram, .basic-fields-container .form-label-modern i.fa-users, .basic-fields-container .form-label-modern i.fa-user-friends { color: var(--info-500); } .basic-fields-container .form-label-modern i.fa-user-tie { color: var(--error-500); } .basic-fields-container .form-label-modern i.fa-calendar-alt { color: var(--text-secondary); } .basic-fields-container .form-control-modern { width: 100%; padding: 12px 16px; border: 2px solid var(--border-primary); border-radius: 12px; font-size: 16px; background: var(--secondary-800); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .basic-fields-container .form-control-modern[type="time"] { font-size: 14px; } .tab-pane .form-control-modern[rows] { width: 100%; padding: 15px 20px; border: 2px solid rgba(255,255,255,0.3); border-radius: 15px; font-size: 14px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.1); backdrop-filter: blur(10px); flex: 1; min-height: 120px; } #safety .form-control-modern[rows] { border: 2px solid rgba(44, 62, 80, 0.3); } .tab-pane .form-label { font-size: 18px; margin-bottom: 2px; } .tab-pane h4, .tab-pane h5 { font-size: 20px; margin-bottom: 8px; font-weight: 600; } .basic-fields-container .invalid-feedback { display: none; } [class*="-row-inner"] { display: flex; align-items: center; gap: 8px; margin: 0; width: 100%; justify-content: flex-start; direction: rtl; } [class*="-col-"] { margin: 0; padding: 0 2px; flex-shrink: 0; width: auto; } .activity-col-5, .progress-col-3, .plan-col-5 { flex: 1; } [class*="-col-"]:last-child { margin-right: 16px; } /* עיצוב מודרני לכרטיסיות (לשוניות) */ .nav-tabs.card-header-tabs { border-bottom: none; background: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-600) 100%); border-radius: 12px 12px 0 0; padding: 8px 8px 0 8px; margin: 0; } .nav-tabs .nav-item { margin: 0 4px 0 0; } .nav-tabs .nav-link { border: none; border-radius: 10px 10px 0 0; padding: 12px 20px; font-weight: 600; font-size: 18px; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; overflow: hidden; margin-bottom: 0; } .nav-tabs .nav-link:hover { color: var(--text-inverse); background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .nav-tabs .nav-link:hover i { transform: scale(1.1); } .nav-tabs .nav-link.active { color: var(--text-inverse); background: var(--secondary-800); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); border-bottom: 3px solid var(--info-500); } .nav-tabs .nav-link.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--info-500), var(--success-500), var(--warning-500), var(--error-500)); border-radius: 10px 10px 0 0; } .nav-tabs .nav-link i { margin-left: 8px; font-size: 18px; transition: all 0.3s ease; } .nav-tabs .nav-link.active i { color: var(--info-500); } /* צבעים מיוחדים לכל לשונית */ .nav-tabs .nav-link[data-bs-target="#basic"] i, .nav-tabs .nav-link[data-bs-target="#coordination"] i { color: var(--info-500); } .nav-tabs .nav-link[data-bs-target="#task"] i { color: var(--success-500); } .nav-tabs .nav-link[data-bs-target="#team"] i { color: var(--warning-500); } .nav-tabs .nav-link[data-bs-target="#materials"] i { color: var(--secondary-600); } .nav-tabs .nav-link[data-bs-target="#safety"] i { color: var(--error-500); } .nav-tabs .nav-link[data-bs-target="#location"] i { color: var(--text-primary); } @keyframes slideInTab { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* אפקט גלישה */ /* הוסר - ::after pseudo-element של .nav-tabs .nav-link */ /* עיצוב הכרטיסיה הראשית */ .card.shadow { border: none; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); overflow: hidden; } .card-header { background: transparent; border-bottom: none; padding: 0; } .card-body { background: var(--secondary-800); border-radius: 0 0 16px 16px; padding: 24px; } /* ===== Cards & Page Elements ===== */ /* הערה: כל העיצובים של .worklog-header-icon, .page-title, .page-subtitle, .nav-tabs-custom נמצאים ב-components/forms.css */ .worklog-page { background: var(--bg-secondary); min-height: 100vh; } .worklog-card { border-radius: 16px; overflow: hidden; background: var(--card-bg); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(148, 163, 184, 0.12); max-width: 1400px; margin: 0 auto; width: 100%; } .worklog-required-alert { border-radius: 8px; border: 1px solid var(--primary-200); background: var(--primary-50); } .card-footer { border-top: 1px solid var(--border-primary); } /* בלוק כללי של סקשן ביומן */ .worklog-section-block { background-color: var(--card-bg); border-radius: 1rem; padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--border-primary); } .worklog-section-header { border-bottom: 1px solid var(--border-primary); padding-bottom: 0.75rem; margin-bottom: 1rem; } .worklog-section-icon { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .worklog-section-title { font-size: 1.05rem; font-weight: 700; } .worklog-section-subtitle { font-size: 0.85rem; } .worklog-section-block .form-label { font-weight: 600; font-size: 0.9rem; } .worklog-section-block .form-text { font-size: var(--text-xs); } @media (max-width: 768px) { .worklog-section-block { padding: 1.1rem 1rem 0.9rem; } } /* טבלת משימות */ .task-row { margin-bottom: 0.5rem; } .task-row-inner { display: flex; gap: 0.5rem; align-items: center; } .task-col-1 { flex: 0 0 3%; min-width: 40px; } .task-col-2 { flex: 0 0 18%; } .task-col-3 { flex: 0 0 30%; } @media (max-width: 768px) { .task-row-inner { flex-wrap: wrap; } .task-col-1, .task-col-2, .task-col-3 { flex: 0 0 100%; margin-bottom: 0.5rem; } } /* חומרים וציוד */ #materials .form-control[rows] { min-height: 110px; resize: vertical; } #materials-equipment-container { background-color: var(--bg-secondary); border-radius: 0.9rem; padding: 0.9rem 1.1rem; border: 1px dashed var(--border-primary); } #materials-equipment-container .materials-row + .materials-row { margin-top: 0.5rem; } #materials-equipment-container .row-number { min-width: 32px; text-align: center; font-size: var(--text-xs); font-weight: 600; } #materials-equipment-container .materials-input { font-size: var(--text-xs); padding: 0.25rem 0.5rem; } #materials-equipment-container .remove-materials { font-size: var(--text-xs); padding: 0.2rem 0.5rem; } #materials #add-materials { font-size: var(--text-xs); padding: 0.3rem 0.7rem; } @media (max-width: 768px) { #materials-equipment-container { padding: 0.75rem; } } /* Worklogs View Page Styles */ .worklog-header { background: linear-gradient(135deg, var(--primary-500) 0%, var(--info-500) 100%); color: var(--text-inverse); padding: 24px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .gradient-header { background: linear-gradient(135deg, var(--primary-500), var(--info-500)); color: var(--text-inverse); padding: 14px 20px; border-radius: 16px 16px 0 0; font-weight: 600; } .content-box { background: var(--bg-secondary); border-radius: 8px; padding: 12px; margin-top: 8px; } @media print { .btn, .btn-group { display: none; } .card { border: 1px solid var(--border-primary); box-shadow: none; } .card-header { background-color: var(--bg-secondary); color: var(--text-primary); } } /* Worklogs Edit Page Styles */ .badge-soft { font-size: 0.72rem; font-weight: 500; background-color: rgba(255, 255, 255, 0.2); color: var(--text-inverse); border-radius: 999px; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.3); } .form-section { margin-bottom: 1.1rem; padding: 0.9rem 1rem; border-radius: 0.85rem; background: var(--bg-secondary); border: 1px dashed rgba(148, 163, 184, 0.5); } /* Worklogs List/Index/Calendar */ .stat-label { position: relative; } .calendar-table td.text-center, .calendar-table .empty-day, .calendar-cell, .empty-day { height: 100px; vertical-align: top; } .calendar-badge { font-size: 0.7rem; display: block; } .alert-danger ul.mb-0.mt-2 { margin-right: 20px; } /* KPI Help Icon & Tooltip */ .kpi-help-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); font-size: 10px; font-weight: bold; cursor: help; margin-right: 4px; vertical-align: middle; transition: all 0.2s ease; } .kpi-help-icon:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .kpi-tooltip { position: absolute; z-index: 1000; max-width: 280px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: var(--text-xs); line-height: 1.5; color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(-5px); } .kpi-tooltip.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .kpi-tooltip::before { content: ''; position: absolute; top: -6px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--card-bg); } .kpi-tooltip::after { content: ''; position: absolute; top: -7px; right: 15px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--border-primary); } /* ============================================ KPI V2 - עיצובים ספציפיים למודולים (מאוחד מ-kpi-v2.css) ============================================ */ /* Override for Employees and Contractors modules */ .employees-page .stat-card, .contractors-page .stat-card, .employees-page .stats-grid .stat-card, .contractors-page .stats-grid .stat-card { background: var(--surface-100); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow); border: 1px solid var(--secondary-200); position: relative; overflow: hidden; transition: all var(--transition-base); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; direction: rtl; min-height: 150px; } /* הוסר: Light Theme Override for KPI Cards - רק dark mode נתמך */ .employees-page .stat-card::before, .contractors-page .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; z-index: 1; } .employees-page .stat-card-primary::before, .contractors-page .stat-card-primary::before { background: linear-gradient(90deg, var(--primary-500), var(--primary-700)); } .employees-page .stat-card-success::before, .contractors-page .stat-card-success::before { background: linear-gradient(90deg, var(--accent-success), var(--success-600)); } .employees-page .stat-card-warning::before, .contractors-page .stat-card-warning::before { background: linear-gradient(90deg, var(--accent-warning), var(--warning-600)); } .employees-page .stat-card-info::before, .contractors-page .stat-card-info::before { background: linear-gradient(90deg, var(--accent-info), var(--info-600)); } .employees-page .stat-icon, .contractors-page .stat-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); color: var(--text-inverse); margin: 0 auto var(--space-4) auto; position: relative; z-index: 2; } .employees-page .stat-card-primary .stat-icon, .contractors-page .stat-card-primary .stat-icon { background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); } .employees-page .stat-card-success .stat-icon, .contractors-page .stat-card-success .stat-icon { background: linear-gradient(135deg, var(--accent-success), var(--success-600)); } .employees-page .stat-card-warning .stat-icon, .contractors-page .stat-card-warning .stat-icon { background: linear-gradient(135deg, var(--accent-warning), var(--warning-600)); } .employees-page .stat-card-info .stat-icon, .contractors-page .stat-card-info .stat-icon { background: linear-gradient(135deg, var(--accent-info), var(--info-600)); } .employees-page .stat-value, .contractors-page .stat-value { font-size: clamp(28px, 4vw, 36px); font-weight: var(--font-bold); color: var(--secondary-900); line-height: 1; margin-bottom: var(--space-3); letter-spacing: -0.02em; } .employees-page .stat-label, .contractors-page .stat-label { font-size: var(--fs-sm); color: var(--secondary-600); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; } .employees-page .stats-grid, .contractors-page .stats-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: var(--space-6); width: 100%; } @media (min-width: 1024px) { .employees-page .stats-grid, .contractors-page .stats-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) and (max-width: 1023px) { .employees-page .stats-grid, .contractors-page .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .employees-page .stats-grid, .contractors-page .stats-grid { grid-template-columns: 1fr; } } /* הוסר: Light Theme Override for KPI V2 - רק dark mode נתמך */ } /* סיום @layer modules */