:root {
--navy: #060025;
--yellow: #FFCE32;
--yellow-hover: #FFDA5C;
--magenta: #DB0041;
--magenta-bright: #FF0048;
--blue: #0B8CCC;
--purple: #63589D;
--green: #22A06B;
--bg: #F4F4FA;
--card: #FFFFFF;
--text: #17123A;
--muted: #6E6A8A;
--border: #E4E2F0;
--radius: 14px;
--shadow: 0 4px 18px rgba(6, 0, 37, 0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden תמיד מנצח — בלי קשר לכללי display אחרים */
[hidden] { display: none !important; }
body {
font-family: 'Heebo', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}
.gradient-strip {
height: 5px;
background: linear-gradient(to right, #FF0048, #63589D, #0B8CCC, #FFCE32);
}
/* ---------- top bar ---------- */
.topbar { background: var(--navy); position: sticky; top: 0; z-index: 50; }
.topbar-inner {
max-width: 1240px; margin: 0 auto; padding: 12px 20px;
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; color: #fff; }
.brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
.brand-name { font-weight: 800; font-size: 22px; letter-spacing: .5px; }
.brand-sub { font-weight: 400; font-size: 14px; color: #B9B5D9; margin-inline-start: 4px; }
.tabs { display: flex; gap: 6px; flex: 1; }
.tab {
background: transparent; border: none; color: #CCC8E8; font-family: inherit;
font-size: 15px; font-weight: 500; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.tab:hover { color: #fff; }
.tab.active { background: var(--yellow); color: var(--navy); font-weight: 700; }
.topbar-user { display: flex; align-items: center; gap: 10px; position: relative; }
.hello { color: #fff; font-size: 14px; }
/* תפריט משתמש מכווץ (כפתור אחד → נפתח) */
.user-menu-btn {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.08); border: 1.5px solid #3A3560;
color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s;
}
.user-menu-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.user-menu-caret { font-size: 10px; opacity: .85; transition: transform .15s; }
.user-menu-btn[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu-pop {
position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
background: #fff; border: 1px solid #E4E0EE; border-radius: 12px;
box-shadow: 0 12px 32px rgba(6,0,37,.22); padding: 6px; min-width: 190px;
display: flex; flex-direction: column; gap: 2px;
}
.user-menu-item {
display: block; width: 100%; text-align: right; background: transparent; border: none;
font-family: inherit; font-size: 14px; font-weight: 600; color: var(--navy);
padding: 10px 12px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.user-menu-item:hover { background: #F3F1FA; }
.user-menu-logout { color: #c0392b; }
.user-menu-logout:hover { background: #FDF0F0; }
/* ---------- buttons ---------- */
.btn {
font-family: inherit; font-size: 15px; font-weight: 700; border: none;
border-radius: 999px; padding: 9px 22px; cursor: pointer; text-decoration: none;
display: inline-block; transition: background .15s, color .15s;
}
.btn-sm { font-size: 13px; padding: 6px 14px; }
.btn-primary { background: var(--yellow); color: var(--navy); }
.btn-primary:hover { background: var(--yellow-hover); }
.btn-ghost { background: transparent; color: inherit; border: 1.5px solid var(--border); }
.topbar .btn-ghost { color: #CCC8E8; border-color: #3A3560; }
.topbar .btn-ghost:hover { color: #fff; border-color: #fff; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-danger { background: transparent; color: var(--magenta); border: 1.5px solid var(--magenta); }
.btn-danger:hover { background: var(--magenta); color: #fff; }
.btn-block { width: 100%; }
/* ---------- layout ---------- */
.container { max-width: 1240px; margin: 24px auto; padding: 0 20px; }
.view h2 { margin-bottom: 16px; }
/* ---------- day view ---------- */
.view-toggle {
display: flex; background: var(--card); border-radius: 999px;
box-shadow: var(--shadow); padding: 4px; gap: 4px;
}
.vt-btn {
border: none; background: transparent; font-family: inherit; font-size: 14px;
font-weight: 700; padding: 6px 20px; border-radius: 999px; cursor: pointer;
color: var(--muted);
}
.vt-btn.active { background: var(--navy); color: #fff; }
.btn-nav { padding: 8px 16px; font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.nav-arrows { display: flex; gap: 6px; }
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.day-view {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden;
}
.day-section-title {
padding: 8px 18px; font-size: 12px; font-weight: 800;
color: var(--muted); background: #F4F3FA;
}
.day-row {
display: flex; align-items: center; gap: 14px; padding: 13px 18px;
border-bottom: 1px solid var(--border); cursor: pointer;
}
.day-row:last-child { border-bottom: none; }
.day-row:hover { background: #FAFAFE; }
.done-btn {
width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
border: 2px solid #C9C6DE; background: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center; padding: 0;
font-size: 15px; font-weight: 800;
}
.done-btn span { color: transparent; }
.done-btn:hover { border-color: var(--green); }
.done-btn:hover span { color: var(--green); }
.day-row.st-done .done-btn { background: var(--green); border-color: var(--green); }
.day-row.st-done .done-btn span { color: #fff; }
.dr-time { font-weight: 800; font-size: 15px; color: var(--navy); min-width: 46px; }
.day-row.st-done .dr-time { opacity: .5; }
.dr-main { flex: 1; min-width: 0; }
.dr-title { font-weight: 700; font-size: 15px; }
.day-row.st-done .dr-title { text-decoration: line-through; opacity: .55; }
.dr-sub { font-size: 12.5px; color: var(--muted); }
.day-empty { padding: 44px 20px; text-align: center; color: var(--muted); font-size: 16px; }
.day-empty-slim { padding: 14px 18px; text-align: center; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--border); }
.day-head-bar {
background: var(--navy); color: #fff; text-align: center;
padding: 8px 4px; font-size: 14px; font-weight: 700;
}
.day-head-bar.today { background: var(--yellow); color: var(--navy); }
.day-head-bar .day-date { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
.day-allday { border-bottom: 2px solid var(--border); }
.day-hours-body { max-height: 460px; overflow-y: auto; }
.dh-row { display: flex; border-top: 1px solid #EFEEF6; min-height: 44px; }
.dh-row:first-child { border-top: none; }
.dh-lab {
width: 52px; min-width: 52px; font-size: 11px; color: var(--muted);
text-align: center; padding-top: 5px; border-inline-end: 1px solid var(--border);
}
.dh-cell { flex: 1; padding: 3px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; position: relative; }
.dh-cell:empty:hover { background: rgba(255, 206, 50, .15); }
.dh-cell:empty:hover::after {
content: '+ משימה חדשה'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: var(--navy); opacity: .75;
}
.dh-cell .day-row { border-bottom: none; padding: 6px 10px; border-radius: 8px; }
.dh-cell .day-row:hover { background: #F4F3FA; }
.dh-row.now { background: #FFFDF2; box-shadow: inset 3px 0 0 var(--magenta-bright); }
.dh-row.now .dh-lab { color: var(--magenta-bright); font-weight: 800; }
/* ---------- multi-select dropdown ---------- */
.ms-field { flex: 1; margin-bottom: 12px; font-weight: 500; font-size: 14px; min-width: 0; }
.ms-label { display: block; }
.ms { position: relative; margin-top: 4px; }
.ms-btn {
width: 100%; text-align: right; font-family: inherit; font-size: 15px;
padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px;
background: #FAFAFE; cursor: pointer; color: var(--text);
display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ms-btn .ms-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-btn .ms-caret { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.ms-btn.empty .ms-text { color: var(--muted); }
.ms-panel.ms-panel--up { top: auto; bottom: calc(100% + 4px); }
.ms-panel {
position: absolute; top: calc(100% + 4px); inset-inline: 0; background: #fff;
border: 1.5px solid var(--border); border-radius: 12px;
box-shadow: 0 10px 30px rgba(6, 0, 37, .18); z-index: 30;
padding: 6px; max-height: 210px; overflow-y: auto;
}
.ms-opt {
display: flex; align-items: center; gap: 9px; padding: 7px 10px;
border-radius: 8px; cursor: pointer; font-size: 14.5px; margin-bottom: 0;
}
.ms-opt:hover { background: #F4F3FA; }
.ms-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.ms-opt span { flex: 1; }
/* דריסת כללי הטפסים הכלליים של המודל עבור רכיב הבחירה המרובה */
.modal .ms-opt { display: flex; margin-bottom: 0; font-weight: 500; font-size: 14.5px; }
.modal .ms-opt input { width: 16px; height: 16px; margin: 0; padding: 0; }
.modal .ms-btn { margin-top: 0; }
/* ---------- week view ---------- */
.week-nav {
display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.week-title { font-weight: 800; font-size: 18px; flex: 1; text-align: center; }
.week-title { display: flex; justify-content: center; }
.progress-pill {
display: inline-flex; align-items: center; gap: 10px;
background: var(--card); border-radius: 999px; box-shadow: var(--shadow);
padding: 10.5px 18px; max-width: 100%;
}
.ph-label { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.progress-pill.full .ph-label { color: var(--green); }
.ph-pct { font-size: 14px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.ph-bar {
width: 150px; height: 9px; border-radius: 999px; background: #E6E4F2;
overflow: hidden; box-shadow: inset 0 1px 2px rgba(6, 0, 37, .15);
}
.ph-fill {
height: 100%; border-radius: 999px; position: relative; overflow: hidden;
background: linear-gradient(to left, #FF0048, #63589D, #0B8CCC, #FFCE32);
transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.ph-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
animation: ph-shine 2.4s infinite;
}
@keyframes ph-shine {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.ph-none { font-size: 13.5px; color: var(--muted); font-weight: 500; align-self: center; }
@media (max-width: 900px) {
.ph-bar { width: 90px; }
.ph-label { display: none; }
}
.week-cal {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
overflow-x: auto;
}
.week-cal { --cols: 5; }
.cal-head, .cal-allday, .cal-body {
display: grid;
grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr));
min-width: calc(52px + var(--cols) * 110px);
}
.cal-head { background: var(--navy); }
.cal-allday { background: var(--card); }
.cal-corner { background: var(--navy); }
.cal-day-head {
background: var(--navy); color: #fff; text-align: center; padding: 8px 4px;
font-size: 14px; font-weight: 700;
}
.cal-day-head.today { background: var(--yellow); color: var(--navy); }
.cal-day-head .day-date { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
.cal-allday { border-bottom: 2px solid var(--border); }
.allday-lab {
background: #F0EFF8; color: var(--muted); font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.allday-cell {
padding: 4px; border-inline-start: 1px solid var(--border); min-height: 34px;
display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden;
}
.allday-cell .task-card .tc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allday-cell.today { background: #FFFBEA; }
.allday-cell .task-card { padding: 5px 8px; }
.cal-body { max-height: 62vh; overflow-y: auto; }
.hour-lab {
height: 44px; font-size: 11px; color: var(--muted); text-align: center;
padding-top: 3px; border-top: 1px solid #EFEEF6;
}
.cal-day { position: relative; border-inline-start: 1px solid var(--border); min-width: 0; }
.cal-day.today { background: #FFFDF2; }
.hour-cell {
height: 44px; border-top: 1px solid #EFEEF6; padding: 1px 2px;
display: flex; flex-direction: column; gap: 2px; cursor: pointer;
position: relative; min-width: 0; overflow: hidden;
}
.hour-cell:empty:hover { background: rgba(255, 206, 50, .18); }
.hour-cell:empty:hover::after {
content: '+'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800; color: var(--navy);
}
.task-chip {
border-radius: 6px; padding: 2px 6px; font-size: 11.5px; font-weight: 700;
cursor: pointer; line-height: 1.3; overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; flex-shrink: 0; max-width: 100%; min-width: 0;
}
.task-chip:hover { filter: brightness(0.95); }
.chip-time { font-weight: 400; opacity: .8; }
.task-chip.st-todo { background: #E6E4F2; color: #3C3860; }
.task-chip.st-progress { background: #DCEFFA; color: #086A9C; }
.task-chip.st-done { background: #DCF3E9; color: #147A4E; text-decoration: line-through; opacity: .75; }
.task-chip.st-stuck { background: #FDDEE7; color: var(--magenta); }
.now-line {
position: absolute; inset-inline: 0; height: 2px; background: var(--magenta-bright);
z-index: 5; pointer-events: none;
}
.now-line::before {
content: ''; position: absolute; inset-inline-start: -1px; top: -3px;
width: 8px; height: 8px; border-radius: 50%; background: var(--magenta-bright);
}
.task-card {
background: var(--bg); border-radius: 10px; padding: 8px 10px; cursor: pointer;
border-inline-start: 4px solid var(--muted); transition: transform .1s;
}
.task-card:hover { transform: translateY(-1px); background: #ECEBF6; }
.task-card .tc-title { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.task-card .tc-assignee { font-size: 12px; color: var(--muted); margin-top: 2px; }
.task-card .tc-badges { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.task-card.st-todo { border-color: #A5A1C2; }
.task-card.st-progress { border-color: var(--blue); }
.task-card.st-done { border-color: var(--green); }
.task-card.st-done .tc-title { text-decoration: line-through; opacity: .6; }
.task-card.st-stuck { border-color: var(--magenta-bright); }
.badge {
font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
display: inline-block;
}
.badge.st-todo { background: #E6E4F2; color: #55517A; }
.badge.st-progress { background: #DCEFFA; color: #086A9C; }
.badge.st-done { background: #DCF3E9; color: #147A4E; }
.badge.st-stuck { background: #FDDEE7; color: var(--magenta); }
.badge.recur { background: var(--navy); color: var(--yellow); }
.badge.b-assignee { background: #EFEEF8; color: var(--navy); border: 1px solid var(--border); }
.badge.b-comments { background: #FFF3CF; color: #8A6D00; border: 1px solid #F3E1A0; }
.badge.b-private { background: #E9E4F7; color: #5A3FA0; border: 1px solid #D6CCF0; }
.badge.b-producer { background: #DDF0F7; color: #0A6E8A; border: 1px solid #BCE1EE; }
/* ---------- notes / פתקים ---------- */
.notes-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.note-card {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column;
border-top: 4px solid var(--yellow); transition: transform .12s, box-shadow .12s;
}
.note-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6, 0, 37, .14); }
.note-card.is-private { border-top-color: #9B87D6; }
.note-body {
font-size: 14.5px; line-height: 1.55; color: var(--text);
max-height: 190px; overflow: hidden; word-break: break-word; flex: 1;
}
.note-body ul, .note-body ol { padding-inline-start: 22px; margin: 4px 0; }
.note-body a { color: var(--blue); }
.note-foot {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
font-size: 12px; color: var(--muted);
}
.note-author { font-weight: 700; color: var(--navy); }
.note-time { margin-inline-start: auto; }
.notes-empty { color: var(--muted); font-size: 15px; padding: 26px 4px; text-align: center; }
/* ---------- newsletter builder / ניוזלטר ---------- */
.nl-builder-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.nl-name-input {
flex: 1; min-width: 200px; font-family: inherit; font-size: 16px; font-weight: 700;
padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card);
}
.nl-name-input:focus { outline: none; border-color: var(--blue); }
.nl-row-actions { white-space: nowrap; }
.nl-settings-inline { margin-inline-start: auto; }
.nls-color-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
#nlsCtaColor { width: 54px; height: 40px; padding: 2px; border: 1.5px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
.nls-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.nls-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--border); cursor: pointer; padding: 0; }
.nls-swatch:hover { transform: scale(1.12); }
.nl-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.nl-step {
display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
background: var(--card); box-shadow: var(--shadow); color: var(--muted);
font-weight: 700; font-size: 14px;
}
.nl-step-num {
width: 24px; height: 24px; border-radius: 50%; background: #E6E4F2; color: var(--muted);
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.nl-step.is-active { color: var(--navy); }
.nl-step.is-active .nl-step-num { background: var(--yellow); color: var(--navy); }
.nl-step.is-done .nl-step-num { background: #22A06B; color: #fff; }
.nl-panel {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.nl-field-label { display: block; font-weight: 500; font-size: 14px; }
.nl-source-toggle { display: inline-flex; margin-bottom: 16px; }
.nl-picker-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.nl-picker-search {
flex: 1; min-width: 180px; font-family: inherit; font-size: 14px;
padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: #FAFAFE;
}
.nl-picker-search:focus { outline: none; border-color: var(--blue); }
.nl-cat-filter {
font-family: inherit; font-size: 14px; padding: 9px 12px;
border: 1.5px solid var(--border); border-radius: 10px; background: #FAFAFE;
color: var(--navy); max-width: 200px; cursor: pointer;
}
.nl-cat-filter:focus { outline: none; border-color: var(--blue); }
/* אפקט שמירה מוצלחת על כפתור השמירה — נשארים באותו עמוד */
.btn.is-saved { background: #22A06B !important; color: #fff !important; border-color: #22A06B !important; transition: background .2s; }
.nl-pick-count { font-weight: 700; font-size: 13px; color: var(--navy); margin-inline-start: auto; }
.nl-picker-list {
max-height: 52vh; overflow-y: auto; border: 1.5px solid var(--border); border-radius: 12px; background: #fff;
}
.nl-picker-loading { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.nl-pick-item {
display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer;
border-top: 1px solid #F0EFF6; margin: 0;
}
.nl-pick-item:first-child { border-top: none; }
.nl-pick-item:hover { background: #FAFAFE; }
.nl-pick-item input { width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; }
.nl-pick-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #F0EFF6; }
.nl-pick-info { display: flex; flex-direction: column; min-width: 0; }
.nl-pick-name { font-weight: 700; font-size: 14.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-pick-sub { font-size: 12.5px; color: var(--muted); }
#nlUrls {
width: 100%; font-family: inherit; font-size: 14px; margin-top: 6px; direction: ltr; text-align: left;
padding: 12px; border: 1.5px solid var(--border); border-radius: 10px; background: #FAFAFE; resize: vertical;
}
.nl-nav { justify-content: space-between; }
.nl-nav-top { margin-top: 0; margin-bottom: 16px; }
.nl-gen-head { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.nl-editor { display: flex; flex-direction: column; gap: 18px; }
.nl-item {
display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.nl-item-preview { flex: 0 0 auto; }
.nl-item-fields { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.nl-item-fields label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 13px; color: var(--muted); }
.nl-item-fields input {
width: 100%; font-family: inherit; font-size: 14px; margin-top: 3px;
padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: #FAFAFE;
}
.nl-item-fields input:focus { outline: none; border-color: var(--blue); }
.nl-item-actions { display: flex; gap: 8px; margin-top: 4px; align-items: center; flex-wrap: wrap; }
.nl-linkedit.is-active { border-color: var(--blue) !important; color: var(--blue) !important; font-weight: 700; }
.nl-linkrow { margin-top: 8px; }
.nl-linkrow label { display: block; font-size: 13px; font-weight: 500; margin: 0; }
.nl-linkrow input { width: 100%; margin-top: 4px; font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: #FAFAFE; }
.nl-linkrow input:focus { outline: none; border-color: var(--blue); }
.nl-item-reorder { display: flex; gap: 4px; margin-inline-start: auto; }
.nl-item-reorder .btn { min-width: 34px; padding: 6px 8px; font-size: 14px; line-height: 1; }
.nl-item-reorder .btn:disabled { opacity: .35; cursor: default; }
.nl-view { text-decoration: none; }
/* assembled newsletter frame (also the full PNG output) */
.nl-frame-wrap { overflow-x: auto; }
.nl-frame {
width: 600px; margin: 0 auto; background: #EDECEF; box-sizing: border-box;
font-family: 'Heebo', 'Assistant', system-ui, sans-serif;
}
.nl-header { background: #fff; text-align: center; padding: 22px 20px 18px; }
.nl-logo { height: 60px; width: auto; display: inline-block; }
/* פס הגרדיאנט החתימתי של מבלים */
.nl-gradient-strip {
height: 6px;
background: linear-gradient(90deg, #FF0048, #63589D, #0B8CCC, #FFCE32);
}
.nl-banner {
background: #060025; color: #fff; text-align: center; font-weight: 800;
font-size: 19px; letter-spacing: .3px; padding: 13px 16px;
}
.nl-cards { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
/* פרוסה של כרטיס בודד להורדה — 600px כולל השוליים האפורים.
שוליים אנכיים של 10px כך שחיבור שתי פרוסות נותן מרווח של 20px (זהה לתצוגה המקדימה, בלי כפילות) */
.nl-slice {
width: 600px; background: #EDECEF; padding: 10px 24px; box-sizing: border-box;
font-family: 'Heebo', 'Assistant', system-ui, sans-serif;
}
/* ===== סטוריז לאינסטגרם ===== */
.modal-stories { max-width: 860px; width: 92vw; }
.nlst-hint { color: var(--muted); font-size: 14px; margin: 2px 0 16px; line-height: 1.5; }
.nlst-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 18px; max-height: 62vh; overflow-y: auto; padding: 4px 2px 8px;
}
.nlst-loading { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }
.nlst-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nlst-thumb {
width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 12px;
box-shadow: 0 4px 16px rgba(6,0,37,.28); display: block;
}
.nlst-item-title {
font-size: 13px; font-weight: 700; color: var(--navy); text-align: center;
line-height: 1.35; max-height: 2.7em; overflow: hidden;
}
.nlst-item-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.nlst-item-actions .btn { width: 100%; justify-content: center; }
/* the event card template (also the per-card PNG output) */
/* רוחב אחיד קבוע, תמונה ריבועית 1:1 בדיוק חצי מהכרטיס, טקסט ממורכז בשטח הלבן */
.nl-card {
width: 552px; max-width: 100%; display: flex; background: #fff; border-radius: 18px;
overflow: hidden; border: 1px solid #E4E0EE; box-sizing: border-box; height: 276px;
}
.nl-card-img { position: relative; flex: 0 0 276px; width: 276px; height: 276px; background-color: #F0EFF6; }
.nl-card-img img { width: 276px; height: 276px; object-fit: cover; display: block; }
.nl-noimg { display: flex; align-items: center; justify-content: center; width: 276px; height: 276px; color: var(--muted); font-size: 13px; }
/* חלון חיתוך תמונה */
.modal-crop { max-width: 360px; }
.nl-crop-stage { position: relative; width: 300px; height: 300px; max-width: 100%; margin: 0 auto 14px; overflow: hidden; background: #F0EFF6; border-radius: 10px; touch-action: none; cursor: grab; user-select: none; }
.nl-crop-stage.is-drag { cursor: grabbing; }
.nl-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.nl-crop-grid { position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
background-size: 33.333% 33.333%; background-position: 0 0; }
.nl-crop-zoom { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; margin-bottom: 4px; }
.nl-crop-zoom input { flex: 1; }
.nl-crop-replace { margin-inline-end: auto; }
.nl-coupon {
position: absolute; bottom: 12px; inset-inline-start: 12px; background: #060025; color: #FFCE32;
font-weight: 800; font-size: 18px; padding: 5px 14px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.nl-card-text {
flex: 1; padding: 20px 22px; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; min-width: 0; overflow: hidden;
}
.nl-sub {
color: #060025; font-weight: 800; font-size: 24px; line-height: 1.2; margin: 0; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nl-title {
color: #060025; font-weight: 800; font-size: 24px; line-height: 1.2; margin: 3px 0 0; max-width: 100%;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-meta { color: #3A3A50; font-weight: 600; font-size: 21px; margin: 16px 0 0; }
.nl-meta .nl-sep { color: #C4C0D2; margin: 0 6px; font-weight: 400; }
/* כפתור צהוב מעוגל עם טקסט כהה, ממורכז לגובה ולרוחב — כמו באתר המכירה */
.nl-cta {
align-self: center; margin: 18px 0 0; background: #FFCE32; color: #060025;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 21px; line-height: 1; text-align: center;
padding: 14px 32px; border-radius: 999px; white-space: nowrap;
text-decoration: none; cursor: pointer;
}
a.nl-cta:hover { text-decoration: none; }
.nls-utm { width: 100%; font-family: monospace; font-size: 12px; line-height: 1.4; word-break: break-all; }
.p-link { color: var(--blue); font-weight: 700; cursor: pointer; }
.p-link:hover { text-decoration: underline; }
.pd-info {
background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
padding: 18px 22px; margin-bottom: 14px;
display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px 40px;
}
.pd-group { display: flex; flex-direction: column; gap: 12px; min-width: 170px; }
.pd-item { display: flex; align-items: center; gap: 9px; }
.pd-ico { font-size: 16px; width: 22px; text-align: center; flex: 0 0 auto; }
.pd-val { font-size: 14.5px; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.pd-dash { color: var(--muted); font-weight: 500; }
.pd-val a { color: var(--blue); text-decoration: none; }
.pd-val a:hover { text-decoration: underline; }
/* צד שמאל: כפתור משימה חדשה מעל כפתור וואטסאפ */
.pd-wa { margin-inline-start: auto; align-self: center; display: flex; flex-direction: column; gap: 8px; }
.pd-task-btn, .wa-detail-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
border: none; border-radius: 999px; padding: 11px 22px; font-size: 14.5px; font-weight: 700;
text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pd-task-btn { background: var(--yellow); color: var(--navy); box-shadow: 0 3px 10px rgba(255,206,50,.35); }
.pd-task-btn:hover { background: var(--yellow-hover); }
.wa-detail-btn { background: #25D366; color: #fff; box-shadow: 0 3px 10px rgba(37,211,102,.3); }
.wa-detail-btn:hover { background: #1EB456; }
.wa-detail-btn.is-disabled { background: #C9C7D1; color: #fff; box-shadow: none; cursor: not-allowed; pointer-events: none; }
#view-producer-detail .list-head { gap: 14px; }
#view-producer-detail .list-head h2 { margin-inline-end: auto; }
.task-cell .b-comments { margin-inline-start: 8px; vertical-align: middle; }
#view-list .tasks-table th:first-child,
#view-list .tasks-table td:first-child { width: 50%; }
/* ---------- undated ---------- */
.undated-wrap { margin-top: 22px; }
.undated-wrap h3 { margin-bottom: 10px; }
.undated-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.undated-list .task-card { background: var(--card); box-shadow: var(--shadow); }
/* ---------- tables ---------- */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.list-head h2 { margin: 0; margin-inline-end: auto; }
.list-more { display: flex; justify-content: center; margin-top: 16px; }
.list-more .btn { min-width: 220px; }
.list-period {
font-family: inherit; font-size: 14px; font-weight: 700; color: var(--navy);
background: var(--card); border: none; box-shadow: var(--shadow);
padding: 9px 16px; padding-inline-end: 34px; border-radius: 999px; cursor: pointer;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: left 15px center;
}
.list-period:focus { outline: none; }
.list-open-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; white-space: nowrap; }
.list-open-filter input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--magenta); }
.producers-search {
flex: 1; min-width: 220px; max-width: 460px; font-family: inherit; font-size: 14px;
padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 999px; background: #FAFAFE;
}
.producers-search:focus { outline: none; border-color: var(--blue); }
.count-badge { font-size: 14px; font-weight: 600; color: var(--muted); }
/* בורר עמודות */
.cols-wrap { position: relative; }
.cols-panel {
position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 220px;
background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 10px;
}
.cols-panel-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; padding: 0 4px; }
.cols-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 4px; border-radius: 8px; }
.cols-row:hover { background: #FAFAFE; }
.cols-check { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; cursor: pointer; margin: 0; }
.cols-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--magenta); cursor: pointer; }
.cols-move { display: flex; gap: 3px; }
.cols-move button { border: 1px solid var(--border); background: #fff; border-radius: 6px; width: 24px; height: 22px; cursor: pointer; font-size: 11px; color: var(--navy); line-height: 1; }
.cols-move button:hover { border-color: var(--blue); }
/* כותרות מיון */
/* כפתורי עריכה/מחיקה — תמיד צמודים לצד שמאל */
td.p-actions, th.p-actions-h { text-align: left; white-space: nowrap; }
.p-sortable { cursor: pointer; user-select: none; }
.p-th { display: inline-flex; align-items: center; gap: 5px; }
.p-th.is-active { color: var(--yellow); }
.p-sort-ind { font-size: 11px; opacity: .8; }
/* עמודת אתר — יישור לשמאל (כתובת לטינית) */
td.p-col-website { text-align: left; direction: ltr; }
/* כפתור וואטסאפ בטבלה */
.wa-btn { color: #128C7E !important; border-color: #25D366 !important; font-weight: 700; }
.wa-btn:hover { background: #25D366 !important; color: #fff !important; }
/* שדה "סוג" — קלט תגיות עם בורר מחפש (multi-select) */
.pr-types-field { margin-bottom: 12px; }
.pr-types-title { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.tags-wrap { position: relative; }
.tags-input {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px;
padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 12px; background: #FAFAFE; cursor: text;
}
.tags-input:hover { border-color: var(--blue); }
.tag-pill {
display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
padding: 4px 10px; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap;
}
.tag-x { background: none; border: none; color: var(--navy); cursor: pointer; font-size: 15px; line-height: .8; padding: 0 1px; opacity: .5; }
.tag-x:hover { opacity: 1; }
.tags-add { margin-inline-start: auto; background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; }
.tags-add:hover { color: var(--blue); }
.tags-pop {
position: absolute; top: calc(100% + 5px); inset-inline-start: 0; inset-inline-end: 0; z-index: 50;
background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 10px;
}
.tags-search {
width: 100%; font-family: inherit; font-size: 14px; padding: 8px 12px;
border: 1.5px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: #fff;
}
.tags-search:focus { outline: none; border-color: var(--blue); }
.tags-options { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.tags-opt { display: flex; align-items: center; text-align: start; background: none; border: none; border-radius: 8px; padding: 5px 6px; cursor: pointer; width: 100%; }
.tags-opt:hover { background: #F0EFF6; }
.tags-empty { color: var(--muted); font-size: 13px; padding: 8px 6px; }
/* פילטר סוג בעמוד המפיקים */
.ptype-filter {
font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1.5px solid var(--border);
border-radius: 999px; background: #FAFAFE; color: var(--navy); cursor: pointer; max-width: 170px;
}
.ptype-filter:focus { outline: none; border-color: var(--blue); }
.table-wrap {
background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
overflow-x: auto;
}
.tasks-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.tasks-table th {
background: var(--navy); color: #fff; text-align: right; padding: 11px 14px;
font-size: 14px; white-space: nowrap;
}
.tasks-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: middle; }
.tasks-table tr:last-child td { border-bottom: none; }
.tasks-table .t-link { color: var(--text); font-weight: 700; cursor: pointer; text-decoration: none; }
.tasks-table .t-link:hover { color: var(--blue); }
.row-inactive td { opacity: .45; }
/* ---------- modal ---------- */
.modal-back {
position: fixed; inset: 0; background: rgba(6, 0, 37, 0.55); z-index: 100;
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
background: var(--card); border-radius: 18px; box-shadow: 0 20px 60px rgba(6,0,37,.35);
width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
padding: 26px; position: relative;
}
.modal-sm { max-width: 400px; }
.modal h2 { margin-bottom: 14px; padding-inline-end: 30px; }
.modal-close {
position: absolute; top: 12px; inset-inline-start: 14px; background: none; border: none;
font-size: 26px; color: var(--muted); cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--magenta); }
/* כותרת טופס המפיק: סטטוס בפינה השמאלית העליונה מול הכותרת */
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pf-top h2 { margin: 0; padding-inline-end: 30px; }
.pf-status { margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pf-status select { width: auto; min-width: 92px; margin: 0; padding: 6px 26px 6px 10px; font-size: 13px; }
.modal label { display: block; margin-bottom: 12px; font-weight: 500; font-size: 14px; }
.modal input, .modal select, .modal textarea {
width: 100%; font-family: inherit; font-size: 15px; margin-top: 4px;
padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px;
background-color: #FAFAFE; color: var(--text);
}
/* חץ מותאם לשדות הבחירה במודל (חזרתיות, שעה וכו') — ממוקם כמו בעמוד "כל המשימות" */
.modal select:not(.status-select) {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-inline-end: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: left 15px center;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
outline: none; border-color: var(--blue);
}
.field-label { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
/* ---------- rich text editor ---------- */
.rte { border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: #FAFAFE; }
.rte-toolbar {
display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
padding: 5px 6px; background: #F0EFF8; border-bottom: 1px solid var(--border);
}
.rte-btn {
min-width: 30px; height: 30px; padding: 0 7px; border: none; background: transparent;
border-radius: 7px; cursor: pointer; font-size: 14px; font-family: inherit;
color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
}
.rte-btn:hover { background: #E0DEEF; }
.rte-btn:active { background: var(--yellow); }
.rte-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.rte-editor {
min-height: 96px; max-height: 260px; overflow-y: auto; padding: 10px 12px;
font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--text);
background: #FAFAFE; outline: none;
}
.rte-editor:focus { background: #fff; }
.rte-editor:empty::before { content: 'כתוב כאן תיאור מפורט…'; color: var(--muted); }
.rte-note { min-height: 180px; max-height: 340px; }
.rte-note:empty::before { content: 'כתוב כאן את הפתק…'; }
.rte-editor ul, .rte-editor ol { padding-inline-start: 22px; margin: 4px 0; }
.rte-editor a { color: var(--blue); }
.tf-check {
display: flex; align-items: center; gap: 9px; cursor: pointer;
font-weight: 500; font-size: 14.5px; margin-bottom: 4px;
}
.modal .tf-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--navy); flex-shrink: 0; }
.form-row { display: flex; gap: 12px; }
.dow-picker { flex: 2; margin-bottom: 12px; }
.dow-title { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.dow-checks { display: flex; gap: 6px; flex-wrap: wrap; }
.dow-check { cursor: pointer; }
.dow-check input { position: absolute; opacity: 0; pointer-events: none; }
.dow-check span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; padding: 7px 8px; border-radius: 999px;
border: 1.5px solid var(--border); background: #FAFAFE;
font-size: 14px; font-weight: 700; color: var(--muted);
transition: background .12s, color .12s, border-color .12s;
}
.dow-check:hover span { border-color: var(--navy); }
.dow-check input:checked + span {
background: var(--yellow); border-color: var(--yellow); color: var(--navy);
}
.dow-check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.form-row label { flex: 1; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.form-error {
background: #FDDEE7; color: var(--magenta); border-radius: 10px;
padding: 9px 12px; font-size: 14px; margin-top: 10px;
}
.hint { color: var(--muted); font-weight: 400; font-size: 12px; }
/* task view inside modal */
.tv-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tv-desc {
white-space: pre-wrap; background: var(--bg); border-radius: 10px;
padding: 12px 14px; font-size: 14.5px; margin-bottom: 16px; min-height: 48px;
line-height: 1.5;
}
.tv-desc ul, .tv-desc ol { white-space: normal; padding-inline-start: 22px; margin: 4px 0; }
.tv-desc a { color: var(--blue); }
.tv-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; margin-bottom: 12px; padding-inline-start: 26px;
}
.tv-head h2 { margin: 0; padding-inline-end: 0; }
.modal .tv-head select.status-select { width: auto; margin-top: 0; flex-shrink: 0; }
.modal-actions .btn-danger { margin-inline-start: auto; }
/* ---------- comments / תגובות ---------- */
.tv-comments { margin-top: 22px; border-top: 1.5px solid var(--border); padding-top: 16px; }
/* הערות צוות בעמוד המפיק — כרטיס לבן תואם לשאר העמוד */
.pd-comments { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 18px; border-top: none; margin-top: 18px; }
.tvc-title { font-size: 15px; margin: 0 0 12px; color: var(--navy); }
.tvc-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.tvc-empty { color: var(--muted); font-size: 14px; padding: 6px 2px; }
.tvc-item { display: flex; gap: 10px; align-items: flex-start; }
.tvc-avatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: var(--navy); color: #fff; font-weight: 700; font-size: 15px;
display: flex; align-items: center; justify-content: center;
}
.tvc-main {
flex: 1; min-width: 0; background: var(--bg); border-radius: 12px;
padding: 9px 13px;
}
.tvc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.tvc-author { font-weight: 700; font-size: 14px; color: var(--navy); }
.tvc-time { font-size: 12px; color: var(--muted); }
.tvc-edited { font-style: italic; }
.tvc-body { font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.tvc-actions { display: flex; gap: 12px; margin-top: 6px; }
.tvc-act {
background: none; border: none; padding: 0; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.tvc-act:hover { color: var(--navy); }
.tvc-act.tvc-del:hover { color: var(--magenta); }
.tvc-edit-box { margin-top: 8px; }
.tvc-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.tvc-compose { display: flex; gap: 10px; align-items: flex-end; }
.tvc-compose textarea, .tvc-edit-box textarea {
flex: 1; width: 100%; font-family: inherit; font-size: 14.5px;
padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px;
background: #FAFAFE; color: var(--text); resize: vertical; min-height: 44px;
}
.tvc-compose textarea:focus, .tvc-edit-box textarea:focus { outline: none; border-color: var(--blue); }
.tvc-compose .btn { flex-shrink: 0; }
.scope-opts { margin-bottom: 8px; }
.scope-opt {
display: flex; align-items: center; gap: 10px; padding: 9px 4px;
cursor: pointer; font-size: 15px; margin-bottom: 0; font-weight: 500;
}
.modal .scope-opt input { width: 17px; height: 17px; margin: 0; accent-color: var(--navy); }
.status-select {
font-family: inherit; font-size: 13.5px; font-weight: 700;
border-radius: 999px; padding: 5px 12px; padding-inline-end: 30px; border: 1.5px solid var(--border);
cursor: pointer; background-color: #fff; color: var(--text);
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: left 13px center;
}
.modal select.status-select { width: auto; margin-top: 0; min-width: 140px; }
.status-select.st-todo { background-color: #E6E4F2; color: #3C3860; border-color: #E6E4F2; }
.status-select.st-progress { background-color: #DCEFFA; color: #086A9C; border-color: #DCEFFA; }
.status-select.st-done { background-color: #DCF3E9; color: #147A4E; border-color: #DCF3E9; }
.status-select.st-stuck { background-color: #FDDEE7; color: var(--magenta); border-color: #FDDEE7; }
.status-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.status-pill {
font-family: inherit; font-size: 13px; font-weight: 700; border-radius: 999px;
padding: 5px 14px; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--muted);
}
.status-pill.on.st-todo { background: #55517A; border-color: #55517A; color: #fff; }
.status-pill.on.st-progress { background: var(--blue); border-color: var(--blue); color: #fff; }
.status-pill.on.st-done { background: var(--green); border-color: var(--green); color: #fff; }
.status-pill.on.st-stuck { background: var(--magenta); border-color: var(--magenta); color: #fff; }
/* ---------- login ---------- */
.login-body {
background: var(--navy); display: flex; align-items: center; justify-content: center;
min-height: 100vh; padding: 20px;
}
.login-card {
background: var(--card); border-radius: 20px; padding: 36px 32px 30px;
width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.login-logo { font-size: 34px; font-weight: 800; text-align: center; color: var(--navy); }
.login-logo .dot { color: var(--magenta-bright); }
.login-card .gradient-strip { border-radius: 99px; margin: 12px 0 18px; }
.login-card h1 { font-size: 18px; text-align: center; margin-bottom: 20px; color: var(--muted); font-weight: 500; }
.login-card label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.login-card input {
width: 100%; font-family: inherit; font-size: 15px; margin-top: 5px;
padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 10px;
}
.login-card input:focus { outline: none; border-color: var(--blue); }
.login-card .btn { margin-top: 6px; padding: 12px; font-size: 16px; }
.login-error {
background: #FDDEE7; color: var(--magenta); border-radius: 10px;
padding: 10px 12px; font-size: 14px; margin-bottom: 14px; text-align: center;
}
/* ---------- responsive ---------- */
@media (max-width: 560px) {
.topbar-inner { gap: 10px; }
.form-row { flex-direction: column; gap: 0; }
.cal-body { max-height: 55vh; }
}
/* ---------- expenses / חשבוניות ---------- */
.exp-dropzone {
border: 2px dashed var(--border);
border-radius: var(--radius);
background: var(--card);
padding: 22px;
text-align: center;
color: var(--muted);
margin-bottom: 16px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.exp-dropzone.exp-dz-over { border-color: var(--yellow); background: #FFFBEE; color: var(--text); }
.exp-dz-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.exp-dz-icon { font-size: 30px; }
.exp-dz-inner .hint { font-size: 13px; }
.exp-summary { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
/* הסיכום בשורת הכותרת — בלי מרווח תחתון */
.list-head .exp-summary { margin-bottom: 0; }
.exp-stat {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 12px 20px;
display: flex;
flex-direction: column;
min-width: 150px;
}
/* כותרת החשבוניות — הכל בשורה אחת במסכים רחבים (כותרת + סיכום + כפתורים) */
@media (min-width: 1200px) {
#view-expenses .list-head { flex-wrap: nowrap; gap: 10px; }
#view-expenses .list-head .exp-summary { flex-wrap: nowrap; gap: 10px; min-width: 0; }
#view-expenses .list-head .exp-stat { min-width: 0; padding: 9px 14px; }
#view-expenses .list-head .exp-stat-num { font-size: 18px; white-space: nowrap; }
#view-expenses .list-head .exp-stat-lbl { white-space: nowrap; }
#view-expenses .list-head .btn { flex: 0 0 auto; white-space: nowrap; }
}
/* שורת פילטרים (מעל הטבלה, במקום הסיכום שהיה כאן) */
.exp-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
/* החיפוש ממלא את השטח שנותר באותה שורה (לא נופל שורה) */
.exp-filter-bar .producers-search { flex: 1 1 150px; min-width: 150px; max-width: none; }
/* שורות משוער בטבלת החשבוניות */
.exp-est-row { background: #FFFDF7; }
.exp-est-row:hover { background: #FEF8EC; }
/* עימוד */
.exp-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 8px; }
.exp-page-info { font-size: 13px; color: var(--muted); font-weight: 600; }
.exp-pagination .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.exp-stat-num { font-size: 22px; font-weight: 800; color: var(--navy); }
.exp-stat-lbl { font-size: 13px; color: var(--muted); }
.tasks-table th.exp-excel-th { text-align: left; }
.exp-excel-btn { background: none; border: none; padding: 2px; cursor: pointer; display: inline-flex; border-radius: 6px; line-height: 0; transition: transform .12s, filter .12s; }
.exp-excel-btn:hover { transform: scale(1.12); filter: brightness(1.1); }
.sup-excel-btn { background: none; border: none; padding: 2px 4px; cursor: pointer; display: inline-flex; vertical-align: middle; line-height: 0; border-radius: 6px; transition: transform .12s; }
.sup-excel-btn:hover { transform: scale(1.14); }
.exp-stat-click { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.exp-stat-click:hover { box-shadow: 0 4px 16px rgba(6,0,37,.12); transform: translateY(-1px); }
/* ניהול ספקים */
.sup-help { color: var(--muted); font-size: 13px; margin: -4px 0 14px; }
.sup-sub { margin: 26px 0 4px; color: var(--navy); font-size: 17px; }
.sup-chk-col { width: 34px; text-align: center; }
.sup-aliases { max-width: 380px; }
.sup-alias { display: inline-block; background: #F1F0F8; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 12px; margin: 2px 2px 2px 0; color: var(--navy); }
.sup-amt { font-weight: 700; color: var(--navy); white-space: nowrap; }
.sup-picker { margin: 10px 0 4px; }
.sup-picker-lbl { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.sup-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; padding: 2px; }
.sup-chip { background: #FFF; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.sup-chip:hover { background: var(--yellow, #FFCE32); border-color: var(--yellow, #FFCE32); }
.sup-chip-n { background: #EEE; border-radius: 999px; padding: 0 6px; font-size: 11px; color: var(--muted); }
.sup-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sup-sortable:hover { color: var(--yellow, #FFCE32); }
.sup-sort-active { color: var(--yellow, #FFCE32); }
.sup-count-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: #2E7FBD; cursor: pointer; text-decoration: underline; }
.sup-count-link:hover { color: var(--navy); }
.sup-search { min-width: 180px; }
.sup-vat-rate { font-size: 11px; color: var(--muted); font-weight: 600; }
.sup-vat-zero { color: var(--muted); font-weight: 500; }
/* פילטר טווח תאריכים (בחירה ידנית) בעמוד תחזית — בורר לוח שנה מתחת לבורר התקופה */
.fc-period-wrap { position: relative; display: inline-block; }
.fc-cal { position: absolute; top: 100%; right: 0; z-index: 200; margin-top: 6px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 36px rgba(6,0,37,.20); padding: 12px 14px; direction: rtl; }
.fc-cal-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.fc-cal-nav { border: none; background: #F1F0F8; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; color: var(--navy); line-height: 1; }
.fc-cal-nav:hover { background: #E4E1F2; }
.fc-cal-months { display: flex; gap: 22px; }
.fc-cal-m { width: 210px; }
.fc-cal-mh { text-align: center; font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 14px; }
.fc-cal-dow, .fc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.fc-cal-dow span { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.fc-cal-day { border: none; background: none; padding: 6px 0; font-size: 13px; cursor: pointer; border-radius: 8px; color: var(--navy); }
.fc-cal-day:hover { background: #F1F0F8; }
.fc-cal-inrange { background: #EAF3FB; border-radius: 0; }
.fc-cal-sel { background: #2E7FBD; color: #fff; }
.fc-cal-sel:hover { background: #2E7FBD; }
.fc-cal-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.fc-cal-in { width: 104px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12px; text-align: center; }
.fc-cal-arrow { color: var(--muted); }
.fc-cal-foot #fcCalReset { margin-inline-start: auto; }
.exp-uploading { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.exp-up-row {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 12px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.exp-up-ok { border-color: var(--green); color: var(--green); }
.exp-up-err { border-color: var(--magenta); color: var(--magenta); }
.exp-up-spin {
width: 14px; height: 14px;
border: 2px solid var(--border);
border-top-color: var(--yellow);
border-radius: 50%;
display: inline-block;
animation: exp-spin .7s linear infinite;
}
@keyframes exp-spin { to { transform: rotate(360deg); } }
.exp-row.exp-pending { background: #FFFBEE; }
.exp-total { font-weight: 700; }
.exp-total-ils { font-weight: 800; color: var(--navy); white-space: nowrap; }
.exp-fx-note { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.exp-noconv { font-size: 12px; color: #b26a00; background: rgba(255,206,50,.18); padding: 1px 7px; border-radius: 999px; }
.exp-unconverted {
background: #FFF4E5; border: 1px solid #F0C27B; color: #8a5a00;
border-radius: 10px; padding: 9px 13px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600;
}
.exp-fx-row #exTotalIls { background: #F6F5FA; font-weight: 700; color: var(--navy); }
.exp-fx-hint { display: block; margin-top: 5px; }
#exModalTitle { font-size: 18px; line-height: 1.3; }
.exp-actions { white-space: nowrap; text-align: left; }
.exp-badge { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.exp-badge-ok { background: rgba(34,160,107,.14); color: var(--green); }
.exp-badge-wait { background: rgba(255,206,50,.22); color: #8a6d00; }
.exp-badge-dup { background: rgba(214,69,69,.14); color: #c0392b; }
.exp-intake-ok { background: rgba(34,160,107,.14); color: var(--green); }
.exp-intake-rej { background: rgba(214,69,69,.14); color: #c0392b; }
.exp-intake-wait { background: rgba(120,120,140,.16); color: #6b6880; }
/* ===== תחזית ===== */
.fc-hint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 18px; max-width: 900px; }
.fc-tbl-title { font-size: 17px; margin: 6px 0 10px; }
.fc-sub-head { margin-top: 28px; display: flex; align-items: center; gap: 12px; }
.fc-sub-head .fc-tbl-title { margin: 0; margin-inline-end: auto; }
.fc-table th, .fc-table td { white-space: nowrap; text-align: center; }
.fc-table th:first-child, .fc-table td:first-child { text-align: right; font-weight: 600; }
.fc-table tfoot .fc-foot td { font-weight: 800; background: #F1EFF8; color: var(--navy); border-top: 2px solid #D9D3EC; }
.fc-table .fc-rowtot { font-weight: 700; background: #FAFAFC; }
.fc-empty { text-align: center; color: var(--muted); padding: 22px; }
.fc-records-hint { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.fc-table.fc-records th, .fc-table.fc-records td { text-align: right; white-space: normal; }
.fc-table.fc-records td.fc-rec-amt { white-space: nowrap; font-weight: 800; color: var(--navy); }
.fc-table.fc-records td.exp-actions { text-align: left; white-space: nowrap; }
.fc-rec-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 11px; border-radius: 999px; white-space: nowrap; }
.fc-rec-act { background: rgba(46,127,189,.14); color: #2E7FBD; }
.fc-rec-est { background: rgba(238,158,32,.18); color: #b5760a; }
.fc-rec-removed { background: rgba(120,120,140,.16); color: #6b6880; }
.fc-rec-remove { color: #c0392b; }
.fc-rec-kind { color: var(--muted); font-size: 12px; }
.fc-rec-ov { color: #b5760a; font-weight: 700; }
.fc-rec-row-removed { opacity: .62; }
.fc-rec-amt-removed { text-decoration: line-through; color: var(--muted) !important; }
.fc-ov-meta { color: var(--muted); font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.fc-ov-approve-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ECEAF3; display: flex; flex-direction: column; gap: 6px; }
.fc-ov-approve.btn-primary { background: var(--green); color: #fff; }
.fc-ov-approve.btn-primary:hover { background: #1c8f5f; }
.fc-ov-approve-row .hint { font-size: 12px; }
.fc-chart {
background: #fff; border: 1px solid #ECEAF3; border-radius: 14px;
padding: 16px 20px 10px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(6,0,37,.05);
}
.fc-svg { width: 100%; height: auto; display: block; }
.fc-axislbl { fill: #9A95B5; font-size: 12px; font-family: 'Heebo', system-ui, sans-serif; }
.fc-barval { fill: #4A4470; font-size: 11.5px; font-weight: 700; font-family: 'Heebo', system-ui, sans-serif; }
.fc-hlabel { fill: #4A4470; font-size: 12.5px; font-family: 'Heebo', system-ui, sans-serif; }
/* השלמה אוטומטית לשדה חיפוש ספק בתחזית */
.fc-ac { position: relative; display: inline-block; }
.tf-producer .fc-ac { display: block; }
.fc-ac-list { position: absolute; top: 100%; right: 0; left: 0; z-index: 100; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(6,0,37,.14); margin-top: 4px; overflow: hidden; }
.fc-ac-item { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-ac-item:hover, .fc-ac-item.active { background: #F1F0F8; }
.fc-legend { display: flex; gap: 20px; margin: 0 0 6px; padding-inline-start: 4px; }
.fc-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--navy); }
.fc-leg-total { font-size: 14px; font-weight: 800; color: var(--navy); margin-inline-end: 4px; }
.fc-leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.exp-recur-fields {
background: #F6F5FA; border: 1px solid #E4E0EE; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.exp-recur-fields:not([hidden]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.exp-recur-fields > label { margin-bottom: 0; min-width: 0; }
.exp-recur-fields input { width: 100%; box-sizing: border-box; min-width: 0; }
.exp-recur { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.exp-recur-monthly { background: rgba(11,140,204,.14); color: #0b6fa8; }
.exp-recur-yearly { background: rgba(99,88,157,.16); color: #574a86; }
/* חלון צפייה בחשבונית */
.modal-view { max-width: 920px; width: 94vw; }
.exv-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
margin-bottom: 14px; padding-inline-start: 34px; /* מרווח מכפתור ה-✕ בפינה */
}
.exv-head h2 { margin: 0 0 3px; padding: 0; font-size: 18px; }
.exv-head-status { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.exv-meta { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.exv-preview {
height: 70vh; background: #F0EFF4; border: 1px solid #E4E0EE; border-radius: 12px;
overflow: auto; display: flex; align-items: center; justify-content: center;
}
.exv-frame { width: 100%; height: 100%; border: none; display: block; }
.exv-img { max-width: 100%; max-height: 100%; display: block; margin: auto; }
.exv-nofile { color: var(--muted); font-size: 15px; padding: 40px; text-align: center; }
.exv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.exv-foot-pos { font-size: 13px; color: var(--muted); font-weight: 600; }
.exv-foot .btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.exv-head-status select.exv-status-select { width: auto; margin: 0; }
.exv-saved { color: var(--green); font-weight: 700; font-size: 14px; }
/* בורר סטטוס/קליטה בתצוגה המקדימה — ירוק כאשר "מאושר" / "נקלט" (כמו בטבלה) */
.exv-status-select.exv-ok { background: rgba(34,160,107,.14); color: var(--green); border-color: rgba(34,160,107,.35); font-weight: 700; }
.exv-spacer { flex: 1; }
.exp-row.exp-duplicate { background: #FDF0F0; }
.exp-row.exp-duplicate .exp-total-ils { color: #c0392b; text-decoration: line-through; opacity: .75; }