/* Login */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(140deg, #dfe6ef 0%, #edf2f8 50%, #d6e0ec 100%);
    padding: 20px;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 48px;
    border-radius: 16px;
    border: 1px solid #dbe6ff;
    box-shadow: 0 20px 60px rgba(71, 85, 105, 0.22);
    max-width: 420px;
    width: 100%;
}

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    text-align: center;
}

.brand-logo {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto 14px;
    object-fit: contain;
    border-radius: 24px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #d5e1f1;
    box-shadow:
        0 10px 24px rgba(37, 59, 93, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.login-header p {
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

#newRequestSection .top-bar,
#newRequestSection #requestEditBanner,
#newRequestSection #requestDraftBanner,
#newRequestSection #requestForm {
    width: min(760px, 100%);
    margin-inline: auto;
}

.request-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
    align-items: start;
    direction: rtl;
}

.request-form-grid .form-group {
    margin-bottom: 0;
}

.request-field--institution,
.request-field--category,
.request-field--urgency,
.request-field--quantity {
    grid-column: span 6;
}

.request-field--title {
    grid-column: span 12;
}

.request-field--institution {
    order: 1;
}

.request-field--category {
    order: 2;
}

.request-field--title {
    order: 3;
}

.request-field--urgency {
    order: 4;
}

.request-field--quantity {
    order: 5;
}

.request-form-full-row {
    margin-top: 18px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

/* סימון שדה חובה — כוכבית אדומה אחרי תווית השדה */
.req-mark {
    color: #dc2626;
    font-weight: 700;
    margin-inline-start: 3px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: #f8fafc;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-select[size] {
    padding: 4px;
}

.form-select[size] option {
    padding: 8px 12px;
    border-radius: 4px;
    margin: 2px 0;
}

.form-select[size] option:checked {
    background: #667eea !important;
    color: white !important;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-input {
    padding-left: 48px;
}

.password-toggle-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
}

.password-toggle-btn:hover {
    background: rgba(148, 163, 184, 0.18);
}

.eye-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.eye-icon-hide {
    display: none;
}

.password-toggle-btn.is-visible .eye-icon-show {
    display: none;
}

.password-toggle-btn.is-visible .eye-icon-hide {
    display: block;
}

/* ============================================================
   מסך כניסה — פאנל כפול + אנימציית פתיחה (reveal)
   עיצוב בלבד; זרימת ה-auth לא משתנה.
============================================================ */
/* .login-screen.om-login — specificity גבוה יותר מ-.login-screen (יש שני
   בלוקים כאלה בהמשך הקובץ שאחרת דורסים position/align) */
.login-screen.om-login {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 0;
    /* הקוד מחליף בין display:flex (הצגה) ל-none (הסתרה) */
    display: flex;
    /* דורס את המרכוז שמגיע מ-.login-screen כדי שהפאנלים ימלאו את המסך */
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    background: transparent; /* שקוף — כשהפאנלים נפרשים, האפליקציה נחשפת מאחור */
    overflow: hidden;
}
.om-login-inner {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%;
    height: 100%;
    direction: rtl;
}

/* ── פאנל מיתוג ── */
.om-brand-panel {
    position: relative;
    width: 46%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 0 56px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(158deg, #0a4a86 0%, #00588f 52%, #0089a8 100%);
}
.om-brand-parallax {
    position: absolute;
    inset: -40px;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
    z-index: 0;
}
.om-bubble {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    background: rgba(255,255,255,.05);
}
.om-bubble-1 { width: 320px; height: 320px; top: 8%; right: -60px; background: rgba(255,255,255,.06); animation: omDrift1 13s ease-in-out infinite; }
.om-bubble-2 { width: 220px; height: 220px; bottom: 12%; left: -40px; background: rgba(255,255,255,.045); animation: omDrift2 17s ease-in-out infinite; }
.om-bubble-3 { width: 150px; height: 150px; top: 44%; right: 30%; background: rgba(255,255,255,.038); animation: omDrift3 23s ease-in-out infinite; }
.om-brand-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .06;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.om-brand-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.om-logo-slot {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(4, 32, 60, .22);
    align-self: center;
    margin: 0 auto 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.om-logo-slot img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
/* גלישה מותרת — בפאנל צר (מעט מעל 820px) הכותרת לא נחתכת אלא נשברת לשורה */
.om-brand-title { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 12px; }
.om-brand-sub { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; margin: 0; }
.om-brand-credit {
    position: absolute;
    bottom: 22px;
    left: 0; right: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.7);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.om-brand-credit:hover { color: #fff; }

/* ── פאנל טופס ── */
.om-form-panel {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;      /* מרכוז אופקי */
    overflow-y: auto;         /* גלילה במסכים נמוכים (לנדסקייפ/מקלדת) */
    padding: 24px 64px;
}
/* margin-block:auto — מרכוז אנכי כשיש מקום, וגלילה נגישה כשאין */
.om-form-wrap { width: 100%; max-width: 360px; margin-block: auto; }
.om-form-title { font-size: 24px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.om-form-sub { font-size: 14px; color: #64748b; margin: 0 0 26px; }
.om-field { margin-bottom: 16px; }
.om-label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.om-input-wrap { position: relative; }
.om-input-icon {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: #5a6779;
    pointer-events: none;
}
.om-input-icon svg { width: 18px; height: 18px; }
.om-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 40px 12px 12px;
    border: 1px solid #dfe1e6;
    border-radius: 9px;
    background: #fafbfc;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.om-input.om-input-pw { padding-left: 44px; }
.om-input:focus { border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.om-eye-btn { color: #5a6779; }
.om-eye-btn:hover { color: #2563eb; background: rgba(37,99,235,.08); }
.om-caps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11.5px;
    color: #b45309;
    animation: omFadeIn .2s ease both;
}
.om-caps svg { width: 14px; height: 14px; }
.om-caps[hidden] { display: none; }
.om-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 18px;
}
.om-forgot {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: #2563eb; padding: 0;
}
.om-forgot:hover { text-decoration: underline; }
.om-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12.5px;
    color: #dc2626;
    animation: omFadeIn .2s ease both;
}
.om-error svg { width: 16px; height: 16px; flex-shrink: 0; }
.om-error[hidden] { display: none; }
.om-submit {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.om-submit:hover { background: #1d4ed8; }
.om-submit:active { transform: scale(.978); }
.om-submit-label, .om-submit-loading, .om-submit-done { display: inline-flex; align-items: center; gap: 8px; }
.om-submit-label svg { width: 18px; height: 18px; }
.om-submit-done svg { width: 18px; height: 18px; }
.om-submit-loading, .om-submit-done { display: none; }
.om-submit.is-loading .om-submit-label { display: none; }
.om-submit.is-loading .om-submit-loading { display: inline-flex; }
.om-submit.is-loading { cursor: default; background: #2563eb; }
.om-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: omSpin .7s linear infinite;
}

/* ── shake בשגיאה ── */
.om-login.has-error .om-input-wrap { animation: omShake .45s cubic-bezier(.36,.07,.19,.97); }

/* ── reveal: הכפתור מאשר, ורק אחר כך הפאנלים נפרשים ──
   קודם ישבה כאן שכבת הצלחה במסך מלא: עיגול, וי וכותרת, ‎absolute inset:0
   **בלי רקע משלה**, בתוך אותו מכל שהפאנלים נפרשים ממנו. הפרישה התחילה
   ב-0.3 שניות והשכבה חיה 1.75, ולכן במשך שנייה שלמה ראו דרכה גם את מסך
   הכניסה הנפרש וגם את הדשבורד שמאחוריו, ו"התחברת בהצלחה" ישב על טקסט של
   מסך אחר.
   האישור עבר לכפתור שהאצבע כבר עליו, והפרישה נדחית עד שהוא סיים לומר
   את שלו. אין חפיפה כי אין יותר שתי שכבות בו-זמנית. */
.om-login.revealing .om-submit { animation: omBtnGo .4s cubic-bezier(.2,.7,.2,1) forwards; }
.om-login.revealing .om-submit .om-submit-label,
.om-login.revealing .om-submit .om-submit-loading { display: none; }
.om-login.revealing .om-submit .om-submit-done {
    display: inline-flex;
    animation: omBtnDone .38s cubic-bezier(.2,.9,.3,1.25) .1s both;
}

/* ‎1s: אחרי שהכפתור נצבע (0.4) ונקרא (עוד חצי שנייה). */
.om-login.revealing .om-brand-panel { animation: omSplitR .8s cubic-bezier(.72,0,.2,1) 1s forwards; }
.om-login.revealing .om-form-panel  { animation: omSplitL .8s cubic-bezier(.72,0,.2,1) 1s forwards; }

/* מסונכרן עם הפרישה. בלי הדחייה הדשבורד סיים להיכנס לפני שנחשף בכלל. */
body.om-revealing #mainApp.active { animation: omDashIn .85s cubic-bezier(.2,.7,.2,1) 1s both; }

@keyframes omSplitL { 0% { transform: translateX(0); } 100% { transform: translateX(-101%); } }
@keyframes omSplitR { 0% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes omShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
@keyframes omDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,16px) scale(1.07)} }
@keyframes omDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-18px,-13px) scale(1.05)} }
@keyframes omDrift3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(15px,-11px) scale(1.08)} 66%{transform:translate(-11px,13px) scale(.96)} }
@keyframes omBtnGo { from { background: #2563eb; } to { background: #0f9d76; } }
@keyframes omBtnDone { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes omDashIn { from { opacity:.35; transform:scale(.965); } to { opacity:1; transform:none; } }
@keyframes omFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    /* גם ‎animation-delay ולא רק המשך: הפרישה נדחית בשנייה, וקיצור המשך
       לבדו היה משאיר את המסך עומד את אותה שנייה בלי שדבר קורה בו. */
    .om-bubble,
    .om-spinner,
    .om-login.revealing .om-submit,
    .om-login.revealing .om-submit .om-submit-done,
    .om-login.revealing .om-brand-panel,
    .om-login.revealing .om-form-panel,
    body.om-revealing #mainApp.active {
        animation-duration: .001s !important;
        animation-delay: 0s !important;
    }
    .om-brand-parallax { transition-duration: .001s !important; }
}

@media (max-width: 820px) {
    .om-brand-panel { display: none; }
    .om-form-panel { padding: 0 28px; }
}

.email-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.email-settings-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-settings-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.email-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 16px;
}

.email-settings-status {
    font-size: 12px;
    color: #475569;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.chip-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
}

.chip button {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #475569;
    font-size: 14px;
    line-height: 1;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}