/* ===== CSS VARIABLES - צבעים ומשתנים מרכזיים ===== */
:root {
    /* צבעי יסוד */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #06b6d4;
    /* צבעי רקע */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-accent: #eff6ff;
    --bg-legend: #e0e7ff;
    --bg-main-legend: #3b82f6;
    /* צבעי טקסט */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #ffffff;
    /* גבולות */
    --border-color: #d1d5db;
    --border-focus: #3b82f6;
    --border-error: #ef4444;
    --border-success: #10b981;
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;
    /* מרווחים */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    /* צללים */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    /* רוחבי קונטיינר */
    --container-mobile: 100%;
    --container-tablet: 80%;
    --container-desktop: 65%;
    --container-xl: 650px;
    /* פונטים */
    --font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    /* מעברים */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* ===== RESET ויסודות ===== */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-secondary);
    font-family: var(--font-family);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ===== טיפוגרפיה ===== */
h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    line-height: 1.3;
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

/* ===== רכיבי טופס ===== */
.form-group {
    margin-bottom: 25px;
}

label {
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.form-control {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: all var(--transition-base);
    font-family: var(--font-family);
}

    .form-control:focus {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
        transform: translateY(-1px);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--bg-tertiary);
        color: var(--text-muted);
        cursor: not-allowed;
    }

    .form-control.is-invalid {
        border-color: var(--border-error);
        background-color: rgb(239 68 68 / 0.05);
    }

    .form-control.is-valid {
        border-color: var(--border-success);
        background-color: rgb(16 185 129 / 0.05);
    }

/* ===== כפתורים ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-white);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

    .btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-primary:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: var(--shadow-sm);
    }

    .btn-primary:disabled {
        background: var(--text-muted);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ===== הודעות ואזהרות ===== */
.text-danger {
    color: var(--danger-color);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.text-success {
    color: var(--success-color);
    font-size: var(--font-size-sm);
}

.text-warning {
    color: var(--warning-color);
    font-size: var(--font-size-sm);
}

.requiredAsterisk {
    color: var(--danger-color);
    font-weight: bold;
    margin-right: 2px;
}

/* ===== מבנה דף ===== */
.form-header-notice {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    font-family: var(--font-family);
    direction: rtl;
    background: var(--bg-accent);
    padding: var(--spacing-md);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    z-index: 100;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.title-row {
    background-color: #007bff; /* הצבע הפשוט הישן */
    color: var(--text-white);
    padding: var(--spacing-lg);
    border-radius: 5px 5px 0 0; /* פינות פשוטות */
    margin-top: var(--spacing-lg);
    text-align: center;
}

.form-container {
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
    position: relative;
}

/* ===== קונטיינר רספונסיבי ===== */
.responsive-container {
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--spacing-md);
}

/* Mobile devices */
@media (max-width: 575.98px) {
    .responsive-container {
        max-width: var(--container-mobile);
        padding: 0 var(--spacing-sm);
    }

    .form-container {
        padding: var(--spacing-lg);
        border-radius: var(--border-radius);
    }

    .title-row {
        padding: var(--spacing-md);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
}

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .responsive-container {
        max-width: var(--container-tablet);
    }
}

/* Large tablets and desktops */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .responsive-container {
        max-width: var(--container-desktop);
    }
}

/* Large desktops */
@media (min-width: 1200px) {
    .responsive-container {
        max-width: var(--container-xl);
    }
}

/* ===== Fieldsets ו-Legends ===== */
fieldset {
    border: none;
    background: none;
    padding: 0;
    margin-bottom: var(--spacing-xl);
    position: relative;
}

legend {
    background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: inline-block;
    position: relative;
}

.legend-style {
    background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-weight: 600;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: inline-block;
}

.main-legend-style {
    background-color: #007bff;
    color: var(--text-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 5px 5px 0 0;
    margin-top: var(--spacing-lg);
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-xl);
}

/* קו עדין מתחת לכותרת */

/* הסרת הקו עבור fieldsets ללא legend */
fieldset:not(:has(legend))::after {
    display: none;
}

/* ===== Select2 Integration ===== */
.select2-container {
    width: 100% !important;
}

.select2-selection {
    height: 48px !important;
    border-color: var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    border-width: 2px !important;
}

.select2-container--default .select2-selection--single {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    height: 48px !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
        color: var(--text-primary);
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
        right: var(--spacing-sm);
    }

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.select2-dropdown {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
}

.select2-container--default .select2-results__option {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ===== GRID LAYOUT למחזור שדות ===== */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: 25px;
}

.field-half {
    display: flex;
    flex-direction: column;
}

/* Mobile: חזרה ל-1 עמודה */
@media (max-width: 767.98px) {
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .field-half {
        margin-bottom: 25px;
    }

        .field-half:last-child {
            margin-bottom: 0;
        }
}

/* ===== פיצול תוויות מתקדם ===== */
.form-row-2 .field-half .label-line-1 {
    display: block;
    margin-bottom: 2px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-row-2 .field-half .label-line-2 {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.3;
}

/* רווח ריק עבור יישור תוויות - רק על Desktop */
@media (min-width: 768px) {
    .form-row-2 .field-half .label-spacer {
        height: 1.2em;
        display: block;
    }

    .form-row-2 .field-half label {
        min-height: 3em;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

/* על Mobile - בטל את הרווח הריק */
@media (max-width: 767.98px) {
    .form-row-2 .field-half .label-spacer {
        display: none;
    }
}

/* ===== סיכום וחלק סופי בצבעי כחול עדין ===== */
.final-summary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.08) 50%, rgba(239, 246, 255, 0.9) 100%);
    border: 2px solid #3b82f6;
    border-radius: var(--border-radius-lg);
    padding: 0;
    margin-top: var(--spacing-xl);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
    position: relative;
    overflow: hidden;
}

    /* אפקט עדין בפינה */
    .final-summary::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
        border-radius: 0 var(--border-radius-lg) 0 100%;
    }

    /* כותרת הסיכום הבולטת */
    .final-summary h3 {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: var(--text-white);
        padding: 32px 24px 11px 33px;
        border-radius: var(--border-radius);
        margin: calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) 0;
        font-weight: 600;
        font-size: var(--font-size-xl);
        text-align: center;
        box-shadow: var(--shadow-md);
        position: relative;
    }

        /* אייקון לכותרת */
        .final-summary h3::before {
            content: "ⓘ";
            font-size: 1.2em;
            margin-left: var(--spacing-xs);
        }

/* תוכן הסיכום */
.summary-content {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    margin-top: 0;
}

/* פריטי הסיכום */
.final-summary p {
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    transition: background var(--transition-base);
}

    .final-summary p:hover {
        background: rgba(255, 255, 255, 0.9);
    }

    .final-summary p:last-of-type {
        border-bottom: none;
    }

/* הדגשת הערכים הנומריים */
.final-summary strong,
.final-summary .summary-value {
    
    font-weight: 700;
    font-size: 1.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* חלק האישור */
/* חלק האישור עם סטייל הפוך מהכותרת */
.approval-section {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: var(--text-white);
    padding: 11px 25px 11px 33px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin: 0 calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1);
    font-weight: 500;
    box-shadow: var(--shadow-md);
    border: none;
}

    /* סטייל לתווית והצ'קבוקס בתוך חלק האישור */
    .approval-section label {
        color: var(--text-white);
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        cursor: pointer;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
    }

    /* סטייל לצ'קבוקס */
    .approval-section input[type="checkbox"] {
        accent-color: var(--text-white);
        width: 18px;
        height: 18px;
        border: 2px solid var(--text-white);
        border-radius: 3px;
    }

    /* הודעת אזהרה בתוך חלק האישור */
    .approval-section #approvalWarning {
        background: rgba(255, 255, 255, 0.1);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-sm);
        border: 1px solid rgba(255, 255, 255, 0.3);
        margin-top: var(--spacing-sm) !important;
        font-weight: 500;
    }

/* ===== פעולות טופס ===== */
.form-actions {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.large-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* ===== רדיו וצ'קבוקס ===== */
.radio, .checkbox {
    margin-bottom: var(--spacing-sm);
}

    .radio label, .checkbox label {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        font-weight: 400;
        cursor: pointer;
        margin-right: var(--spacing-md);
    }

input[type="radio"], input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
}

/* ===== כלים וסיוע ===== */
.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== תמיכה בנגישות ===== */
.form-control:focus-visible,
.btn-primary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .form-control,
    .btn-primary {
        border-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

/* ===== אנימציות עדינות ===== */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.form-container {
    animation: slideInFromBottom var(--transition-slow) ease-out;
}

fieldset {
    animation: fadeIn var(--transition-base) ease-out;
}

/* ===== טיפים והסברים ===== */
.field-explanation {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
}

.field-description {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 400;
}

/* ===== שיפורים נוספים ===== */
.warning-box {
    background-color: rgb(245 158 11 / 0.1);
    border: 1px solid rgb(245 158 11 / 0.3);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    color: var(--warning-color);
    font-size: var(--font-size-sm);
}

.info-box {
    background-color: rgb(6 182 212 / 0.1);
    border: 1px solid rgb(6 182 212 / 0.3);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    color: var(--info-color);
    font-size: var(--font-size-sm);
}

/* ===== הודעות שגיאה משופרות ===== */

/* הודעת שגיאה בסיסית */
.field-error-message {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.12) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--danger-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    position: relative;
    z-index: 10;
}

    /* אייקון השגיאה */
    .field-error-message .error-icon {
        font-size: 14px;
        flex-shrink: 0;
        opacity: 0.8;
    }

    /* טקסט השגיאה */
    .field-error-message .error-text {
        line-height: 1.3;
        flex-grow: 1;
    }

/* שדה עם שגיאה */
.field-has-error {
    border-color: var(--border-error) !important;
    background-color: rgba(239, 68, 68, 0.03) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

/* אנימציה לשגיאה מיידית */
.field-error-instant {
    animation: errorPulse 0.3s ease-out;
}

@keyframes errorPulse {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-2px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* התאמה למכשירים קטנים */
@media (max-width: 575.98px) {
    .field-error-message {
        font-size: var(--font-size-xs);
        padding: 6px var(--spacing-xs);
        margin-top: 2px;
    }

        .field-error-message .error-icon {
            font-size: 12px;
        }
}

/* מיקום מותאם לשגיאות שיוצאות מהמסך */
.error-adjust-right {
    right: var(--spacing-sm);
    left: auto;
    max-width: calc(100vw - 40px);
}

/* אפקט hover עדין על שגיאות */
.field-error-message:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.16) 100%);
    border-color: rgba(239, 68, 68, 0.4);
}

/* שיפור contrast במצב high contrast */
@media (prefers-contrast: high) {
    .field-error-message {
        border-width: 2px;
        background: rgba(239, 68, 68, 0.2);
    }

    .field-has-error {
        border-width: 3px !important;
    }
}

/* הסתרת overflow כדי למנוע גלילה לא רצויה */
.field-error-message {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* מעבר חלק בין מצבי שגיאה */
.form-control {
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* בטל קישוטים מיותרים על אייקון */
.field-error-message .error-icon {
    text-decoration: none;
    user-select: none;
    pointer-events: none;
}

@media (min-width: 768px) {
    /* בטל את ה-flex עבור תוויות שלא משתמשות בחלוקה לשורות */
    .form-row-2 .field-half label:not(:has(.label-line-1)):not(:has(.label-line-2)) {
        display: block;
        min-height: auto;
        flex-direction: unset;
        justify-content: unset;
    }

  
}


/* תוכן הסיכום */
.summary-content {
    padding: 0px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    margin-top: 0;
}

/* קבוצות סיכום בצבעי כחול עדין */
.summary-group {
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--border-radius);
    margin: var(--spacing-sm) 0;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

    .summary-group:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    /* צבעים בגוונים של כחול בלבד */
    .summary-group.people {
        border-bottom: 4px solid #1d4ed8;
        background: linear-gradient(135deg, rgba(29, 78, 216, 0.03) 0%, rgba(255, 255, 255, 0.8) 100%);
    }

    .summary-group.income {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
    }

    .summary-group.expense {
        border-bottom: 4px solid #1d4ed8;
        background: linear-gradient(135deg, rgba(30, 58, 138, 0.03) 0%, rgba(255, 255, 255, 0.8) 100%);
    }

    /* פריטי משנה */
    .summary-group .sub-item {
        margin-right: var(--spacing-lg);
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) 0;
    }

        .summary-group .sub-item p {
            margin: var(--spacing-xs) 0;
        }

    /* הפריט הכולל */
    .summary-group .total-item {
        font-weight: 600;
        font-size: var(--font-size-base);
        color: var(--text-primary);
        border-top: 2px solid rgba(59, 130, 246, 0.2);
        padding-top: var(--spacing-sm);
        margin-top: var(--spacing-sm);
        background: rgba(59, 130, 246, 0.05);
        border-radius: var(--border-radius-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

        .summary-group .total-item p {
            margin: 0;
        }

/* ערכים מודגשים בכחול */
.summary-value {
    color: #3b82f6;
    font-weight: 700;
    font-size: 1.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    float: left; 
    margin-left: 10px;
}
.summary-group p::after {
    content: "";
    display: table;
    clear: both;
}
/* תאמויות רספונסיביות */
@media (max-width: 575.98px) {
    .summary-group {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin: var(--spacing-xs) 0;
    }

        .summary-group .sub-item {
            margin-right: var(--spacing-sm);
            font-size: var(--font-size-sm);
        }
}

.people-and-expenses {
    display: flex;
    justify-content: center;
    text-align: center;
}

.calculation-explanation {
    color: var(--text-muted);
    font-size: 12px;
    display: block;
    margin-top: 4px;
    font-weight: normal;
    font-style: italic;
}


.calculation-detail {
    margin-right: 20px;
    margin-top: 4px;
    text-align: right; /* החישוב מימין */
}

    .calculation-detail small {
        color: var(--text-secondary);
        font-size: 12px;
    }


.highlighted-amount {
    font-weight: bold;
    color: var(--primary-color);
}
/********************/
/* ===== מודל הסיכום - אלמנטים חדשים ===== */

/* רקע המודל */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
    direction: rtl;
}

/* המודל עצמו */
.summary-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    max-width: min(90vw, 700px);
    max-height: min(85vh, 750px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
    margin: var(--spacing-lg);
    direction: rtl;
    text-align: right;
    animation: modalSlideIn var(--transition-base) ease-out;
}

/* כותרת המודל */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-md);
}

    .modal-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: var(--font-size-xl);
        font-weight: 600;
    }

/* כפתור סגירה (X) */
#closeSummaryModal {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: var(--text-secondary);
    padding: var(--spacing-xs);
    line-height: 1;
    transition: color var(--transition-fast);
    border-radius: var(--border-radius);
}

    #closeSummaryModal:hover {
        color: var(--text-primary);
        background-color: var(--bg-secondary);
    }

/* אזור הכפתורים */
.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* כפתור אישור */
.btn-confirm {
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    color: var(--text-white);
    padding: var(--spacing-sm) var(--spacing-xl);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

    .btn-confirm:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-confirm:focus {
        outline: 2px solid var(--success-color);
        outline-offset: 2px;
    }

/* כפתור עריכה */
.btn-edit {
    background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
    color: var(--text-white);
    padding: var(--spacing-sm) var(--spacing-xl);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

    .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-edit:focus {
        outline: 2px solid var(--warning-color);
        outline-offset: 2px;
    }

/* נעילת גלילה כשהמודל פתוח */
.modal-open {
    overflow: hidden;
}

/* ===== תוכן הסיכום המפורט ===== */

/* קבוצת מידע בסיכום */
.detailed-summary-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
}

    /* כותרת הקבוצה */
    .detailed-summary-section h4 {
        margin: 0 0 var(--spacing-md) 0;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: var(--spacing-xs);
        font-size: var(--font-size-lg);
        font-weight: 600;
    }

/* שדה בודד בסיכום */
.summary-field {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    transition: background-color var(--transition-fast);
}

    .summary-field:last-child {
        margin-bottom: 0;
    }

    .summary-field:hover {
        background-color: var(--bg-accent);
        border-radius: var(--border-radius-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        margin: 2px calc(var(--spacing-sm) * -1);
    }

    .summary-field strong {
        flex: 0 0 40%;
        color: var(--text-primary);
    }

    .summary-field span {
        flex: 1;
        text-align: left;
        color: var(--text-secondary);
        font-weight: 400;
    }

/* אנימציית פתיחה למודל */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* ===== התאמות למובייל ===== */

/* מסכים קטנים (טאבלט וסמארטפון) */
@media (max-width: 768px) {
    .summary-modal {
        max-width: 95vw;
        max-height: 90vh;
        margin: var(--spacing-sm);
        padding: var(--spacing-lg);
    }

    .modal-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .btn-confirm, .btn-edit {
        width: 100%;
        padding: var(--spacing-md) !important;
        font-size: var(--font-size-lg);
    }

    .modal-header h2 {
        font-size: var(--font-size-lg);
    }

    .detailed-summary-section {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .summary-field {
        flex-direction: column;
        margin-bottom: var(--spacing-sm);
    }

        .summary-field strong {
            margin-bottom: var(--spacing-xs);
            color: var(--text-primary);
        }

        .summary-field span {
            text-align: right;
            font-weight: 400;
            padding-right: var(--spacing-md);
            border-right: 3px solid var(--primary-color);
        }
}

/* מסכים קטנים מאוד */
@media (max-width: 480px) {
    .summary-modal {
        max-width: 98vw;
        padding: var(--spacing-sm);
    }

    .modal-header {
        padding-bottom: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

        .modal-header h2 {
            font-size: var(--font-size-base);
        }

    .detailed-summary-section h4 {
        font-size: var(--font-size-base);
    }

    .summary-field strong,
    .summary-field span {
        font-size: var(--font-size-sm);
    }
}