/* panel.css — עיצוב פאנלי הניהול. Mobile-first, RTL */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* קריטי: כלל מחבר עם display גובר על [hidden] של הדפדפן.
   בלי הכלל הזה כל אלמנט עם display מוגדר (‎.blocked, .strip, .ticker, .forecast)
   נשאר גלוי גם כש-JS מסתיר אותו — ומסך החסימה כיסה את כל הטלוויזיה. */
[hidden] { display: none !important; }


:root {
    --bg: #f2f4f8; --surface: #ffffff; --border: #e2e6ee;
    --primary: #1f4e8c; --primary-dark: #163a6a; --accent: #d4af37;
    --text: #1c2333; --muted: #6b7488; --danger: #c0392b; --ok: #1e8e5a;
    --radius: 14px; --shadow: 0 2px 10px rgba(20, 30, 60, 0.07);
    /* כינוי ל---border. שמונה כללים השתמשו ב---line בלי שהוגדר אי פעם,
       ומשתנה לא מוגדר מבטל את כל הצהרת ה-border — כך שהצ'יפים, שורות
       השבת, כרטיסי אנשי הקשר וכפתור האייקון נשארו בלי מסגרת בכלל. */
    --line: #e2e6ee;
}

body {
    font-family: 'Segoe UI', 'Heebo', Arial, sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 16px; line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--primary); text-decoration: none; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }

/* ===== מסך התחברות ===== */
/* flex-direction:column הכרחי: בלעדיו הכותרת התחתונה המשפטית הפכה לעמודה
   שנייה לצד הכרטיס, והמסך נראה "חצוי" — הכרטיס הצטמצם ל-155px במובייל. */
.auth-page {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px;
    background: linear-gradient(135deg, #0a1428, #1f4e8c); padding: 20px;
}
.auth-box {
    background: #fff; border-radius: 20px; padding: 32px 26px;
    width: 100%; max-width: 400px; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
/* הכותרת המשפטית על רקע כהה — צריכה טקסט בהיר */
.auth-page .legal-footer { color: rgba(255, 255, 255, 0.75); text-align: center; max-width: 400px; }
.auth-page .legal-footer a { color: rgba(255, 255, 255, 0.92); }
@media (max-width: 420px) {
    .auth-box { padding: 26px 18px; }
}
.auth-logo { font-size: 52px; margin-bottom: 6px; }
.auth-box h1 { margin-bottom: 4px; }
.auth-box form { text-align: right; margin-top: 18px; }

/* ===== מבנה עמוד ===== */
.topbar {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.topbar .brand { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 10px; }
/* הלוגו על הסרגל הכהה — נקי בלי לוחית, קצת גדול יותר כדי שייראה */
.topbar .brand-logo { max-height: 40px; max-width: 170px; }
/* הלוגו והשם לחיצים ומובילים לדף הראשי — בלי להיראות כמו קישור */
.brand-link { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.topbar .brand-link { font-size: inherit; opacity: 1; }
.brand-link:hover { opacity: 0.85; }
.topbar .spacer { flex: 1; }
.topbar a { color: #fff; opacity: 0.9; font-size: 14px; }
.topbar .userchip { background: rgba(255,255,255,0.15); border-radius: 100px; padding: 4px 12px; font-size: 13px; }

.container { max-width: 1400px; margin: 0 auto; padding: 14px 18px 80px; }
@media (max-width: 700px) { .container { padding: 12px 12px 80px; } }

/* טאבים.
   במחשב: גלולות בשורה (נשברות לשורות אם צריך) — כמו תמיד.
   בסלולר: רשת אריחים כמו מסך בית של טלפון — אימוג'י גדול מעל תווית
   קצרה, הכל גלוי בבת אחת, בלי גלילה ובלי ערימת שורות. הסימון של
   הטאב הפעיל צבוע מלא, אז תמיד רואים איפה נמצאים. */
.tabs {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 2px;
}
.tabs a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
    padding: 8px 16px; border-radius: 100px; font-size: 14px; font-weight: 600;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    box-shadow: var(--shadow); white-space: nowrap;
}
.tabs a .t-ico { line-height: 1; }
.tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 700px) {
    .tabs {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
        gap: 7px; padding: 10px 0;
    }
    .tabs a {
        flex-direction: column; justify-content: center; gap: 5px;
        min-height: 66px; padding: 9px 4px; border-radius: 14px;
        font-size: 11.5px; line-height: 1.2; text-align: center;
        white-space: normal;           /* תווית ארוכה יורדת שורה — במילים שלמות */
    }
    .tabs a .t-ico { font-size: 22px; }
    .tabs a .t-lbl { min-width: 0; overflow-wrap: break-word; }
    .tabs a.active { box-shadow: 0 3px 10px rgba(31, 78, 140, .35); }
}

/* כרטיסים */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 16px; margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.card h2 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin-bottom: 0; }
.card-head .spacer { flex: 1; }

/* ===== טפסים ===== */
label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
/* input ללא מאפיין type הוא text לכל דבר, אבל הסלקטור input[type="text"]
   לא תופס אותו — ולכן שדות רבים נשארו בלי שום עיצוב. כאן מעצבים לפי
   שלילה: כל input חוץ מאלה שדורשים טיפול משלהם. */
/* :where() עוטף את שרשרת ה-:not כדי שהיא לא תתרום ספציפיות. בלעדיו
   הכלל הזה שוקל (0,7,1) ומנצח כל התאמה נקודתית אחר כך — ובפועל הוא
   ביטל את הריפוד לאייקון החיפוש ואת רוחב שדות השעה בטבלת המוזיקה. */
input:not([type]), input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"])),
select, textarea {
    width: 100%; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px;
    font-family: inherit; font-size: 16px; background: #fff; color: var(--text);
}

/* בחירת קובץ — הווידג'ט המובנה נראה זר לשאר הטופס */
input[type="file"] {
    width: 100%; padding: 9px 12px; border: 1.5px dashed var(--border);
    border-radius: 10px; background: #fafbfd; color: var(--text);
    font-family: inherit; font-size: 14px; cursor: pointer;
}
input[type="file"]:hover { border-color: var(--primary); background: #f4f8fd; }
input[type="file"]::file-selector-button {
    border: 0; border-radius: 8px; padding: 8px 14px; margin-left: 10px;
    background: var(--primary); color: #fff; font-family: inherit;
    font-weight: 700; font-size: 13px; cursor: pointer;
}

/* טווח (סליידר) — אחיד בכל הדפדפנים */
input[type="range"] { width: 100%; accent-color: var(--primary); height: 26px; cursor: pointer; }

/* placeholder חיוור מדי בברירת המחדל של חלק מהדפדפנים */
::placeholder { color: #9aa3b5; opacity: 1; }

/* שדה מושבת — ברור שאי אפשר לערוך אותו */
input:disabled, select:disabled, textarea:disabled {
    background: #f1f3f7; color: var(--muted); cursor: not-allowed;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
textarea { min-height: 90px; resize: vertical; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 130px; }
/* ===== סליידר קצב + תצוגה מקדימה ===== */
.speed-row { display: flex; align-items: center; gap: 10px; }
.speed-row input[type=range] { flex: 1; accent-color: var(--primary); height: 26px; }
.speed-end { font-size: 13px; color: var(--muted); white-space: nowrap; }
.speed-label { text-align: center; font-weight: 700; color: var(--primary); font-size: 14px; margin-top: 2px; }
.ticker-demo {
    display: flex; align-items: stretch; margin-top: 10px;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #0e1f3a;
}
.ticker-demo-label {
    display: flex; align-items: center; padding: 0 12px; white-space: nowrap;
    background: var(--accent); color: #14120a; font-weight: 800; font-size: 12px;
}
.ticker-demo-track { flex: 1; overflow: hidden; display: flex; align-items: center; height: 38px; }
.ticker-demo-inner { display: inline-block; white-space: nowrap; color: #fff; font-size: 14px; will-change: transform; }

/* ===== סרגל בחירה מרובה ===== */
.bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #f4f7fc; border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.bulk-all { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bulk-all input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--primary); }
.bulk-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }
.item-pick {
    width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px;
    accent-color: var(--primary); cursor: pointer;
}

/* ===== מונה תפוסה "X מתוך Y" ===== */
.quota-pill {
    font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 99px;
    background: #eaf1fb; color: var(--primary); white-space: nowrap;
}
.quota-pill.warn { background: #fff4e0; color: #9a6400; }
.quota-pill.full { background: #fdeaea; color: var(--danger); }
.quota-bar { height: 5px; border-radius: 99px; background: #e8ecf4; overflow: hidden; margin: 8px 0 4px; }
.quota-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s; }
.quota-pill.warn ~ * .quota-bar > span { background: #d99100; }

.checkline { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 15px; }
/* flex-shrink:0 — בלי זה תווית שנשברת לשתי שורות מוחצת את התיבה במסך צר */
.checkline input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--primary); }
.checkline label { margin: 0; font-weight: 500; }
/* שורה עם תווית ארוכה (הסכמה לתקנון) — התיבה נשארת בגובה השורה הראשונה */
.checkline-top { align-items: flex-start; }
.checkline-top input { margin-top: 2px; }

/* כפתורים */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 18px; border-radius: 10px; border: 0; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
    transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-gold { background: var(--accent); color: #241c05; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: #eef1f6; color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; margin-top: 16px; }
form.inline { display: inline; }

/* הודעות מערכת */
.flash { padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-weight: 600; font-size: 14px;
         animation: flashIn .3s ease; outline: none; }
.flash-ok { background: #e2f5eb; color: #14603c; border: 1px solid #b5e5cd; }
.flash-err { background: #fdebe9; color: #92271b; border: 1px solid #f5c6c0; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ===== עדכון חי (live.js): מצב טעינה והופעת תוכן טרי =====
   .live-busy בזמן שהבקשה רצה — התוכן מתעמעם קלות ולא לחיץ;
   .live-in רגע אחרי ההחלפה — הופעה עדינה שמבהירה שהתוכן התרענן.
   פריטי FLIP (data-flip-key) מקבלים transform ישירות מ-live.js. */
#main.live-busy { opacity: .55; filter: saturate(.7); pointer-events: none;
                  transition: opacity .18s ease, filter .18s ease; }
#main.live-in { animation: liveIn .28s ease; }
@keyframes liveIn { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* שני מתגי הנגישות של האתר — בלי תנועה בכלל */
@media (prefers-reduced-motion: reduce) {
    .flash, #main.live-in { animation: none; }
    #main.live-busy { transition: none; }
}
html.a11y-noAnim .flash, html.a11y-noAnim #main.live-in { animation: none; }
html.a11y-noAnim #main.live-busy { transition: none; }

/* תגיות סטטוס */
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.badge-on { background: #e2f5eb; color: #14603c; }
.badge-off { background: #eef0f4; color: #6b7488; }
.badge-warn { background: #fdf3dc; color: #8a6202; }
.badge-danger { background: #fdebe9; color: #92271b; }
.badge-admin { background: #ede6f7; color: #5b2d91; }

/* ===== רשימות פריטים (הודעות, מדיה, בניינים) ===== */
.item {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin-bottom: 10px; background: #fbfcfe;
}
.item .item-icon { font-size: 26px; line-height: 1.2; }
.item .item-main { flex: 1; min-width: 0; }
.item .item-title { font-weight: 700; font-size: 15px; }
.item .item-sub { font-size: 13px; color: var(--muted); white-space: pre-line; word-break: break-word; }
.item .item-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.item.inactive { opacity: 0.55; }
.item img.thumb { width: 74px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* חיפוש */
.search-box { position: relative; margin-bottom: 12px; }
.search-box input { padding-right: 38px; }
.search-box::before { content: '🔍'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; }

/* תבניות מומלצות */
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tmpl {
    border: 1px solid var(--border); border-radius: 10px; padding: 10px;
    background: #fbfcfe; cursor: pointer; font-size: 13px; text-align: right;
    font-family: inherit; transition: border-color 0.15s;
}
.tmpl:hover { border-color: var(--primary); }
.tmpl .t-icon { font-size: 20px; }
.tmpl .t-title { font-weight: 700; }

/* ===== טופס מואפר (מוזיקה כבויה וכדומה) =====
   pointer-events נשאר פעיל בכוונה: אפשר לגלול ולקרוא, רק ברור שזה כבוי.
   האינטראקציה נחסמת עם disabled ויזואלי בלבד — הערכים נשמרים בשמירה. */
.form-off { opacity: .45; filter: grayscale(.9); transition: opacity .25s, filter .25s; }
.form-off select, .form-off input, .form-off button:not(.btn-primary) { pointer-events: none; }

/* בורר רצועה ליום — נכנס בשורת היום גם במובייל */
.music-day .day-track { max-width: 210px; font-size: 13px; }
@media (max-width: 700px) { .music-day .day-track { max-width: 100%; flex-basis: 100%; } }

/* ===== בורר מועד החיוב ===== */
.chg-modes { display: grid; gap: 8px; margin-bottom: 10px; }
.chg-mode {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff;
    transition: border-color .15s, background .15s;
}
.chg-mode:hover { border-color: #c3d3ea; }
.chg-mode.on { border-color: var(--primary); background: #f4f9ff; box-shadow: 0 0 0 1px var(--primary) inset; }
.chg-mode input[type=radio] { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--primary); }
.chg-mode > span { display: flex; flex-direction: column; gap: 2px; flex: 1; font-weight: 500; }
.chg-mode .muted { font-weight: 400; }
.chg-lead, .chg-fixed { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.chg-lead input, .chg-fixed input { display: inline-block; width: auto; }

/* תיבת סימון עם הסבר — אותה שפה עיצובית כמו בורר המועד */
.chk {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff;
}
.chk:hover { border-color: #c3d3ea; }
.chk input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--primary); }
.chk > span { display: flex; flex-direction: column; gap: 2px; flex: 1; font-weight: 500; }
.chk .muted { font-weight: 400; }

/* שורת "בחיוב הקרוב" — מודגשת רק כשיש השלמה יחסית, כדי שסכום חריג לא יפתיע */
.hint-prorate {
    background: #fff8e6; border: 1px solid #f0d79a; border-radius: 9px;
    padding: 5px 9px; margin-top: 4px; display: inline-block;
}

/* ===== תשלומים ידניים ===== */
/* אריח "ממתין לגבייה" — כתום-זהב, ו"צ'קים דחויים" — אפור-כחלחל.
   אריח בלי גרדיאנט = טקסט לבן על שקוף = בלתי נראה */
.ps-owed { background: linear-gradient(135deg, #a8690f, #e0a52e); }
.ps-held { background: linear-gradient(135deg, #556274, #7a8798); }
/* שורה שבאיחור — ענבר, לא אדום: כסף שמחכה זו לא תקלת מערכת */
.pay-owed-late { border-right: 4px solid var(--accent); background: #fffaf0; border-radius: 10px; }
.badge-chan { background: #eaf3ff; color: #1f4e8c; }
.pay-chan { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
    /* ארבעת כפתורי הערוץ = רשת 2×2 נוחה לאגודל, לא שורה דחוסה */
    .pay-chan form.inline { flex: 1 1 46%; }
    .pay-chan .btn { width: 100%; }
}

/* ===== משבצות מוזיקה מיוחדות ===== */
.music-slot {
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px; background: #fbfcfe;
}
.ms-days { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
/* צ'יפ יום: עיגול קטן שנצבע כשנבחר — נוח לאגודל, ברור במבט */
.ms-day { position: relative; margin: 0; cursor: pointer; }
.ms-day input { position: absolute; opacity: 0; }
.ms-day span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 32px; padding: 0 6px; border-radius: 100px;
    border: 1.5px solid var(--border); background: #fff;
    font-size: 13px; font-weight: 700; color: var(--muted);
}
.ms-day input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.ms-day input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.ms-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-row input[type=time] { width: auto; min-width: 96px; }
.ms-row select { flex: 1 1 180px; min-width: 0; }
.ms-del, .ms-play { flex: 0 0 auto; min-width: 40px; }
@media (max-width: 560px) {
    .ms-row select { flex-basis: 70%; order: 5; }    /* הרצועה בשורה משלה בטלפון */
    .ms-row .ms-play { order: 6; }                    /* וההאזנה צמודה אליה */
}
/* גם בשורות הימים הרגילות — כפתור ההאזנה לא נמעך */
.music-day .ms-play { flex: 0 0 auto; }

/* ===== מתג מצב פשוט/מלא — בסרגל העליון, בסגנון אייפון =====
   ירוק ודלוק = מצב פשוט. הידית מחליקה עם קפיצה קטנה. */
.mode-switch-form { display: flex; align-items: center; }
.mode-switch {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 100px; padding: 6px 8px 6px 12px; font: inherit; color: #fff;
    min-height: 40px;
}
.mode-switch:hover { background: rgba(255, 255, 255, .18); }
.ms-txt { font-size: 13px; font-weight: 800; white-space: nowrap; color: rgba(255, 255, 255, .95); }
.ms-track {
    width: 46px; height: 26px; border-radius: 13px; flex: 0 0 auto;
    background: rgba(120, 130, 150, .65); position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
    transition: background .25s ease;
}
.ms-knob {
    position: absolute; top: 2px; inset-inline-start: 2px;
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform .25s cubic-bezier(.34, 1.45, .64, 1);
}
.mode-switch.on .ms-track { background: #34c759; }   /* הירוק של אייפון */
/* RTL: הידית יוצאת מימין ומחליקה שמאלה כשדולקים */
.mode-switch.on .ms-knob { transform: translateX(-20px); }
@media (prefers-reduced-motion: reduce) { .ms-track, .ms-knob { transition: none; } }
html.a11y-noAnim .ms-track, html.a11y-noAnim .ms-knob { transition: none; }
/* בטלפון צר הטקסט מתקצר — המתג עצמו מספיק ברור */
@media (max-width: 480px) { .ms-txt { font-size: 12px; } .mode-switch { padding: 5px 6px 5px 10px; } }
.lite-escape { text-align: center; margin: 18px 0 6px; }

/* ===== בניינים שהופסקו — קטגוריה אפורה בתחתית רשימת הבניינים ===== */
.b-stopped-head {
    margin: 24px 0 10px; padding-top: 14px; border-top: 2px dashed var(--border);
    font-weight: 800; font-size: 15px; color: var(--muted);
}
.item.b-stopped { opacity: .6; filter: grayscale(.85); background: #f4f5f8; }
/* בהתקרבות חוזרים לצבע — עדיין אפשר לקרוא ולערוך בנוחות */
.item.b-stopped:hover, .item.b-stopped:focus-within { opacity: 1; filter: none; }

/* עור המצב הפשוט: אותיות גדולות, כפתורים גבוהים, פחות רעש —
   בנוי לאנשים שהטכנולוגיה לא הצד החזק שלהם */
body.lite { font-size: 19px; }
body.lite .btn { min-height: 54px; font-size: 18px; }
body.lite .btn-sm { min-height: 46px; font-size: 16px; }
body.lite input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])),
body.lite select, body.lite textarea { min-height: 56px; font-size: 19px; }
body.lite label { font-size: 17px; }
body.lite .checkline input[type=checkbox] { width: 26px; height: 26px; }
body.lite input[type=range] { min-height: 44px; }
body.lite input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; }

/* ===== תפריט הבית של המצב הפשוט: שורה גדולה לכל פעולה ===== */
.lhome { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.lhome-hi { font-size: 24px; font-weight: 800; margin-bottom: 2px; }
.lh-row {
    display: flex; align-items: center; gap: 16px; width: 100%; text-align: right;
    padding: 18px 16px; border-radius: 16px; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--border);
    color: var(--text); text-decoration: none; font: inherit;
    box-shadow: 0 1px 3px rgba(20, 30, 60, .06);
}
.lh-row:hover, .lh-row:focus-visible { border-color: var(--primary); }
.lh-row:active { transform: scale(.99); }
.lh-ico { font-size: 36px; line-height: 1; flex: 0 0 auto; }
.lh-txt { font-size: 20px; font-weight: 800; line-height: 1.25; }
.lh-sub { display: block; font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.lh-arrow { margin-inline-start: auto; color: var(--muted); font-size: 26px; line-height: 1; }
.lh-small .lh-ico { font-size: 26px; }
.lh-small .lh-txt { font-size: 17px; }
.lh-adv { margin-top: 10px; }
.lh-adv .lh-row { background: transparent; box-shadow: none; }

/* כפתור החזרה הגדול בראש כל מסך במצב פשוט */
.lite-back {
    display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 4px;
    padding: 14px 22px; border-radius: 14px; font-size: 19px; font-weight: 800;
    background: var(--surface); border: 1.5px solid var(--border); color: var(--text);
}
.lite-back:hover { border-color: var(--primary); text-decoration: none; }

/* אזור מסוכן — איפוס לברירת מחדל. אדום מרומז, לא צועק: שיהיה ברור
   שזה שונה מכל כפתור שמירה רגיל, בלי להפחיד את מי שרק גולל לידו */
.danger-zone { margin-top: 18px; border: 1.5px solid #eec7c7; border-radius: 12px; }
.danger-zone > summary { color: #a33; font-weight: 700; padding: 10px 14px; cursor: pointer; }
.danger-zone .editor-body { border-top: 1px solid #f0dcdc; }

/* ===== תחזוקת מערכות ===== */
.maint-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .maint-grid { grid-template-columns: 1fr; } }
.maint-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px; background: #fff;
}
.maint-ic { font-size: 24px; }
.maint-name { flex: 1 1 150px; }
.maint-lbl { margin: 0; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.maint-lbl input, .maint-lbl select { min-width: 150px; }
.maint-next {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px;
}
.maint-next .mn-when { text-align: left; font-weight: 800; }
.mn-ok   { background: #eef7f0; border: 1.5px solid #bfe3c8; }
.mn-soon { background: #fff7e0; border: 1.5px solid #ecd28a; }
.mn-soon .mn-when { color: #8a5a09; }
.mn-over { background: #fdecec; border: 1.5px solid #eebbbb; animation: payFailPulse 2s ease-in-out infinite; }
.mn-over .mn-when { color: var(--danger); }
/* צ'יפ סטטוס בשורת תחזוקה — אותם צבעים כמו חלונית "הטיפול הבא" */
.mn-chip {
    font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 100px;
    white-space: nowrap;
}
.mn-chip.mn-ok   { color: #1e7a3e; }
.mn-chip.mn-soon { color: #8a5a09; }
.mn-chip.mn-over { color: #b3261e; animation: none; }
.mn-chip.mn-none { background: #f0f1f4; border: 1.5px solid #d9dce3; color: #777; }
.maint-acts { display: flex; gap: 6px; align-items: center; }

/* ===== סטטיסטיקת החיובים =====
   כרטיסים צבעוניים עם גרדיאנט — וכישלון שאי אפשר לפספס: כשיש חיובים
   שנכשלו הכרטיס אדום, פועם, וכתוב עליו במפורש שזה דורש טיפול. */
.pay-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pay-stat {
    border-radius: 14px; padding: 16px 12px; text-align: center; color: #fff;
    box-shadow: 0 4px 14px rgba(20, 30, 60, .18);
}
.pay-stat .ps-ico { font-size: 26px; line-height: 1.2; }
.pay-stat .ps-num { font-size: 26px; font-weight: 900; margin-top: 2px; letter-spacing: .01em; }
.pay-stat .ps-lbl { font-size: 12.5px; margin-top: 3px; opacity: .92; font-weight: 600; }
.ps-month  { background: linear-gradient(135deg, #1e8e5a, #27b872); }
.ps-total  { background: linear-gradient(135deg, #1f4e8c, #3d7fc9); }
.ps-active { background: linear-gradient(135deg, #6d47c8, #9b7be0); }
.ps-fail   { background: linear-gradient(135deg, #556274, #7a8798); }
.ps-fail-hot {
    background: linear-gradient(135deg, #b3261e, #e04848);
    animation: payFailPulse 1.8s ease-in-out infinite;
}
@keyframes payFailPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(180, 30, 30, .35); transform: scale(1); }
    50%      { box-shadow: 0 4px 26px rgba(220, 40, 40, .65); transform: scale(1.02); }
}
/* שורת היסטוריה של כישלון — פס אדום שקופץ לעין גם ברשימה */
.pay-fail-row { border-right: 4px solid var(--danger); background: #fdf3f3; border-radius: 10px; }

/* בודק הכרטיס — משוב מיידי בצבע */
.cardcheck { margin-bottom: 12px; }
.cardcheck input { font-family: 'Courier New', monospace; letter-spacing: .08em; }
.cc-ok  { color: var(--ok); font-weight: 700; }
.cc-bad { color: var(--danger); font-weight: 700; }

/* קוד לצד כפתור העתקה, בגובה שדה קלט רגיל */
.code-inline {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 10px;
}
.code-inline b {
    font-family: 'Courier New', monospace; font-size: 18px;
    letter-spacing: .1em; margin-inline-end: auto;
}

/* ===== שדה בחירת יישוב =====
   רשימת ההצעות היא אלמנטים אמיתיים ולא <datalist>, כי datalist לא ניתן
   לעיצוב, לא אוכף בחירה, ובחלק מדפדפני אנדרואיד פשוט לא נפתח. */
.place-field { position: relative; }
.place-field input[data-invalid] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
.place-list {
    position: absolute; z-index: 40; inset-inline: 0; top: calc(100% - 8px);
    max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 30, 60, .16);
}
.place-opt {
    display: block; width: 100%; text-align: right; font: inherit; font-size: 15px;
    padding: 11px 12px; background: none; border: 0; border-bottom: 1px solid var(--border);
    cursor: pointer; color: var(--text);
}
.place-opt:last-child { border-bottom: 0; }
.place-opt.active, .place-opt:hover { background: rgba(31, 78, 140, .09); }
.place-note { margin-top: 4px; min-height: 18px; }
.place-note.bad { color: var(--danger); font-weight: 600; }

/* ===== דוגמה חיה של ערכת הנושא =====
   מסך לובי בזעיר אנפין. המשתנים (--bg1, --card, --accent…) נכתבים על
   האלמנט הזה ב-JS מתוך tv.css עצמו, ולכן אין כאן אף צבע קשיח — מה
   שרואים בדוגמה זה בדיוק מה שיהיה על הטלוויזיה. */
/* הדוגמה נדבקת לראש העמוד בזמן בחירה.
   בלי זה היא נשארה למעלה, ומרגע שגוללים אל הריבועים — ובוודאי אל
   הערכות הכהות שבסוף — היא כבר מחוץ למסך. לוחצים, משהו משתנה,
   ואף אחד לא רואה את זה. סטיקי הופך את הבחירה למיידית ומובנת. */
.tv-mini-dock {
    /* --topbar-h נמדד ב-JS: הסרגל העליון נשבר לשתי שורות במובייל */
    position: sticky; top: var(--topbar-h, 56px); z-index: 5;
    background: var(--surface); padding: 8px 0 4px; margin-bottom: 4px;
    box-shadow: 0 8px 12px -8px rgba(20, 30, 60, .25);
}
.tv-mini {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; width: 100%; max-width: 420px; margin: 0 auto 6px;
    border-radius: 12px; padding: 3.2%; display: flex; flex-direction: column; gap: 2.4%;
    background: linear-gradient(165deg, var(--bg1, #eaf3ff) 0%, var(--bg2, #d3e4fb) 55%, var(--bg3, #e6dcf9) 100%);
    color: var(--text, #16304f);
    box-shadow: 0 0 0 1px rgba(20, 30, 60, .16), 0 6px 18px rgba(20, 30, 60, .18);
    font-size: 11px; line-height: 1.25;
    transition: background .25s ease;
}
/* הבזק קצר בכל החלפה — סימן ברור ש"זה מה שהשתנה עכשיו" */
.tv-mini.tvm-flash { animation: tvmFlash .5s ease; }
@keyframes tvmFlash {
    0%   { box-shadow: 0 0 0 1px rgba(20,30,60,.16), 0 0 0 0 rgba(31, 78, 140, .5); }
    40%  { box-shadow: 0 0 0 1px rgba(20,30,60,.16), 0 0 0 7px rgba(31, 78, 140, .28); }
    100% { box-shadow: 0 0 0 1px rgba(20,30,60,.16), 0 6px 18px rgba(20, 30, 60, .18); }
}
.tvm-caption { text-align: center; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .tv-mini.tvm-flash { animation: none; }
    /* a11y.css הופך כל אנימציה ללולאה של 0.001ms — פריים קפוא שרירותי.
       כאן עדיף עצירה מעוצבת: animation:none משאיר את העננים סטטיים
       במיקומי הפתיחה — עדיין רואים את צבעי האפקט, פשוט בלי תנועה. */
    .tvm-fx i { animation: none; }
}
html.a11y-noAnim .tvm-fx i { animation: none !important; }

/* שכבת האפקט — גרסה מוקטנת של מה שרץ על המסך האמיתי.
   opacity מלא: הצבעים כבר צבעוניים פר-ערכה (לא לבן שמכבס), והבעיה
   שנמדדה הייתה ההפך — האפקט נחלש מדי מתחת לכרטיסים. */
.tvm-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tvm-fx i {
    position: absolute; display: block; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, var(--fx1, rgba(255,255,255,.8)) 0%,
                                var(--fx2, rgba(120,170,255,.3)) 45%, transparent 72%);
}
.tv-mini[data-fx="none"] .tvm-fx { display: none; }
/* כשיש אפקט: הכרטיסים במיני יורדים לחצי אטימות — נמדד שהם מעבירים רק
   ~20% מהאפקט (0.74-0.82 לבן), והתנועה פשוט לא נראתה בערכות בהירות.
   בערכות כהות (card 0.07) השינוי בלתי מורגש — הנאמנות נשמרת. */
.tv-mini:not([data-fx="none"]) .tvm-head,
.tv-mini:not([data-fx="none"]) .tvm-card,
.tv-mini:not([data-fx="none"]) .tvm-ticker {
    background: color-mix(in srgb, var(--card, rgba(255,255,255,.74)) 55%, transparent);
}
/* "רצועת שמיים" — פס חשוף מתחת לכותרת שבו העננים עוברים בעוצמה מלאה,
   כמו השוליים הפתוחים במסך האמיתי. px ולא אחוזים: אחוזי margin אנכי
   על פריט flex מתאפסים כאן בפועל (containing block לא מוגדר לחישוב). */
.tv-mini:not([data-fx="none"]) .tvm-body { margin-top: 14px; }
/* דיליי שלילי — העננים כבר בתוך הפריים כשהדוגמה נטענת, בלי "מסך ריק" */
.tvm-fx i:nth-child(1) { width: 55%; height: 45%; top: 8%;  right: -12%; animation: tvmDrift 22s linear infinite -8s; }
.tvm-fx i:nth-child(2) { width: 38%; height: 32%; top: 45%; right: -16%; animation: tvmDrift 32s linear infinite -18s; opacity: .7; }
.tvm-fx i:nth-child(3) { width: 62%; height: 50%; top: 65%; right: -20%; animation: tvmDrift 42s linear infinite -30s; opacity: .5; }
@keyframes tvmDrift { from { transform: translateX(0); } to { transform: translateX(-190%); } }
/* אפקטים שאינם "נסחפים" מקבלים תנועה במקום, כדי שלא ייראו זהים לעננים.
   לכל nth-child מיקום משלו — שלושה כתמים חופפים נראו ככתם בודד. */
.tv-mini[data-fx="stars"] .tvm-fx i,
.tv-mini[data-fx="aurora"] .tvm-fx i,
.tv-mini[data-fx="bokeh"] .tvm-fx i { animation-name: tvmPulse; animation-duration: 7s; animation-timing-function: ease-in-out; }
.tv-mini[data-fx="stars"] .tvm-fx i:nth-child(1)  { right: auto; left: 8%;  top: 6%;  width: 24%; height: 32%; }
.tv-mini[data-fx="stars"] .tvm-fx i:nth-child(2)  { right: auto; left: 62%; top: 14%; width: 20%; height: 26%; }
.tv-mini[data-fx="stars"] .tvm-fx i:nth-child(3)  { right: auto; left: 36%; top: 55%; width: 22%; height: 30%; }
.tv-mini[data-fx="aurora"] .tvm-fx i:nth-child(1) { right: auto; left: -8%; top: -12%; width: 62%; height: 72%; }
.tv-mini[data-fx="aurora"] .tvm-fx i:nth-child(2) { right: auto; left: 48%; top: 30%;  width: 58%; height: 66%; }
.tv-mini[data-fx="aurora"] .tvm-fx i:nth-child(3) { right: auto; left: 18%; top: 48%;  width: 50%; height: 60%; }
.tv-mini[data-fx="bokeh"] .tvm-fx i:nth-child(1)  { right: auto; left: 12%; top: 18%; width: 20%; height: 28%; }
.tv-mini[data-fx="bokeh"] .tvm-fx i:nth-child(2)  { right: auto; left: 66%; top: 8%;  width: 15%; height: 21%; }
.tv-mini[data-fx="bokeh"] .tvm-fx i:nth-child(3)  { right: auto; left: 42%; top: 60%; width: 18%; height: 25%; }
.tv-mini[data-fx="rays"] .tvm-fx i   { animation-name: tvmSpin; animation-duration: 40s; animation-timing-function: linear; }
.tv-mini[data-fx="waves"] .tvm-fx i  { border-radius: 50% 50% 0 0; top: auto; bottom: -14%; right: -20%; width: 140%; }
@keyframes tvmPulse { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .6; transform: scale(1.14); } }
@keyframes tvmSpin  { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* האפקטים החדשים — אותו רעיון בקנה מידה של הדוגמה */
.tv-mini[data-fx="dust"] .tvm-fx i,
.tv-mini[data-fx="petals"] .tvm-fx i {
    border-radius: 0; inset: -80px 0 0 0; width: auto; height: auto;
    background-repeat: repeat;
}
.tv-mini[data-fx="dust"] .tvm-fx i:nth-child(1) {
    background-image: radial-gradient(circle, var(--fx1, rgba(255,255,255,.8)) 0 1.5px, transparent 4px);
    background-size: 46px 54px; opacity: .6; animation: tvmDustRise 9s linear infinite -3s;
}
.tv-mini[data-fx="dust"] .tvm-fx i:nth-child(2) {
    background-image: radial-gradient(circle, var(--fx1, rgba(255,255,255,.8)) 0 1px, transparent 3px);
    background-position: 20px 14px; background-size: 66px 78px; opacity: .4;
    animation: tvmDustRise2 14s linear infinite -7s;
}
.tv-mini[data-fx="dust"] .tvm-fx i:nth-child(3) {
    background-image: radial-gradient(circle, var(--fx2, rgba(120,170,255,.3)) 0 2px, transparent 5px);
    background-position: 36px 30px; background-size: 92px 108px; opacity: .3;
    animation: tvmDustRise3 20s linear infinite -11s;
}
@keyframes tvmDustRise  { to { transform: translate3d(0, -54px, 0); } }
@keyframes tvmDustRise2 { to { transform: translate3d(0, -78px, 0); } }
@keyframes tvmDustRise3 { to { transform: translate3d(0, -108px, 0); } }
.tv-mini[data-fx="petals"] .tvm-fx i { inset: 0 0 -80px 0; }
.tv-mini[data-fx="petals"] .tvm-fx i:nth-child(1) {
    background-image: radial-gradient(ellipse 2px 3px, var(--fx1, rgba(255,255,255,.8)) 0 1.5px, transparent 3px);
    background-size: 50px 60px; opacity: .55; animation: tvmPetal60 8s linear infinite -2s;
}
.tv-mini[data-fx="petals"] .tvm-fx i:nth-child(2) {
    background-image: radial-gradient(ellipse 1.5px 2.5px, var(--fx1, rgba(255,255,255,.8)) 0 1px, transparent 2.5px);
    background-position: 24px 18px; background-size: 70px 86px; opacity: .4;
    animation: tvmPetal86 13s linear infinite -6s;
}
.tv-mini[data-fx="petals"] .tvm-fx i:nth-child(3) {
    background-image: radial-gradient(ellipse 2.5px 4px, var(--fx2, rgba(120,170,255,.3)) 0 2px, transparent 4px);
    background-position: 40px 34px; background-size: 96px 120px; opacity: .3;
    animation: tvmPetal120 19s linear infinite -9s;
}
@keyframes tvmPetal60 {
    0% { transform: translate3d(0, -60px, 0); } 50% { transform: translate3d(4px, -30px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes tvmPetal86 {
    0% { transform: translate3d(0, -86px, 0); } 50% { transform: translate3d(-5px, -43px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
@keyframes tvmPetal120 {
    0% { transform: translate3d(0, -120px, 0); } 50% { transform: translate3d(5px, -60px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
.tv-mini[data-fx="sheen"] .tvm-fx i { border-radius: 0; inset: 0; width: auto; height: auto; }
.tv-mini[data-fx="sheen"] .tvm-fx i:nth-child(1) {
    background: linear-gradient(115deg, transparent 42%, var(--fx1, rgba(255,255,255,.8)) 50%, transparent 58%);
    animation: tvmSheen 7s ease-in-out infinite;
}
.tv-mini[data-fx="sheen"] .tvm-fx i:nth-child(2) {
    background: linear-gradient(115deg, transparent 45%, var(--fx2, rgba(120,170,255,.3)) 50%, transparent 55%);
    animation: tvmSheen 7s ease-in-out infinite .4s; opacity: .6;
}
.tv-mini[data-fx="sheen"] .tvm-fx i:nth-child(3) {
    background: radial-gradient(ellipse at 100% 0%, var(--fx2, rgba(120,170,255,.3)) 0%, transparent 55%);
    animation: tvmSheenGlow 5s ease-in-out infinite;
}
@keyframes tvmSheen { 0% { transform: translate3d(-130%, 0, 0); } 55%, 100% { transform: translate3d(130%, 0, 0); } }
@keyframes tvmSheenGlow { 0%, 100% { opacity: .2; } 50% { opacity: .45; } }
.tv-mini[data-fx="rings"] .tvm-fx i {
    right: auto; left: 80%; top: -4%;
    background: radial-gradient(circle, transparent 50%, var(--fx1, rgba(255,255,255,.8)) 58%, transparent 66%);
    animation: tvmRing 8s ease-in-out infinite;
}
.tv-mini[data-fx="rings"] .tvm-fx i:nth-child(1) { width: 55%; height: 100%; opacity: .45; }
.tv-mini[data-fx="rings"] .tvm-fx i:nth-child(2) { width: 85%; height: 155%; opacity: .3; animation-delay: -3s; }
.tv-mini[data-fx="rings"] .tvm-fx i:nth-child(3) { width: 120%; height: 215%; opacity: .2; animation-delay: -6s; }
@keyframes tvmRing {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.08); }
}
/* בסלולר הדוגמה הדבוקה קטנה יותר — שלא תבלע שליש מסך בזמן גלילה */
@media (max-width: 700px) {
    .tv-mini-dock { padding: 6px 0 3px; }
    .tv-mini-dock .tv-mini { max-width: 300px; }
    .tv-mini-dock .tvm-caption { font-size: 11px; }
}

.tvm-strip {
    position: relative; z-index: 1; border-radius: 6px; padding: 2.4% 3%;
    background: var(--strip-admin, linear-gradient(90deg, #ef5f3c, #f7a93c));
    color: #fff; font-weight: 800; font-size: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvm-head {
    position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center;
    border-radius: 7px; padding: 2.4% 3%;
    background: var(--card, rgba(255,255,255,.74));
    border: 1px solid var(--card-border, rgba(37,99,201,.2));
}
.tvm-name { font-weight: 900; font-size: 13px; color: var(--accent2, #16407e); line-height: 1.1; }
.tvm-sub { font-size: 9px; color: var(--text-dim, rgba(22,48,79,.66)); }
.tvm-clock { font-weight: 900; font-size: 20px; color: var(--accent2, #16407e); letter-spacing: .04em; }

.tvm-body { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.4%; min-height: 0; }
.tvm-card {
    border-radius: 7px; padding: 3% 3.5%; min-height: 0; overflow: hidden;
    background: var(--card, rgba(255,255,255,.74));
    border: 1px solid var(--card-border, rgba(37,99,201,.2));
}
.tvm-ttl {
    font-weight: 800; font-size: 10px; color: var(--accent2, #16407e);
    border-bottom: 1.5px solid var(--accent, #2563c9); padding-bottom: 3px; margin-bottom: 5px;
}
.tvm-row { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 3px; }
.tvm-row b { color: var(--accent2, #16407e); }
.tvm-line { height: 5px; border-radius: 3px; background: var(--text-dim, rgba(22,48,79,.66)); opacity: .35; margin-bottom: 5px; }
.tvm-line.short { width: 62%; }
.tvm-ticker {
    position: relative; z-index: 1; border-radius: 6px; padding: 1.8% 3%;
    background: var(--card, rgba(255,255,255,.74)); font-weight: 700; font-size: 9px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}



/* ===== בורר אנימציית הרקע =====
   כרטיסיות רדיו פשוטות — הצבע כאן לא חשוב (זו תנועה, לא פלטה),
   ולכן אין צורך בריבועי צבע כמו בערכות. */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fx-opt { position: relative; }
.fx-opt input { position: absolute; opacity: 0; }
.fx-opt label {
    display: block; margin: 0; text-align: center; cursor: pointer;
    border: 2px solid var(--border); border-radius: 10px; padding: 11px 8px;
    font-size: 14px; font-weight: 600; background: #fff;
    transition: border-color .15s, background .15s;
}
.fx-opt label:hover { border-color: #c3d3ea; }
.fx-opt input:checked + label {
    border-color: var(--primary); background: #f0f6ff; font-weight: 800;
    box-shadow: 0 0 0 1px var(--primary) inset;
}
.fx-opt input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

/* בורר ערכות נושא.
   הצבעים מגיעים ב-style מתוך THEMES ב-PHP ולא מכללים קבועים כאן: זה מקור
   אמת אחד, וערכה חדשה מקבלת ריבוע נכון בלי לגעת בקובץ הזה. */
.theme-head { font-size: 14px; font-weight: 800; margin: 14px 0 8px; color: var(--muted); }
.theme-head:first-of-type { margin-top: 6px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.theme-opt { position: relative; }
.theme-opt input { position: absolute; opacity: 0; }
.theme-opt .swatch {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    min-height: 74px; border-radius: 12px; padding: 26px 8px 8px; text-align: center;
    font-size: 13px; font-weight: 700; cursor: pointer; border: 3px solid transparent;
}
.theme-opt .sw-fx { font-size: 11px; font-weight: 600; opacity: .8; }
/* בערכה בהירה צריך קו היקפי, אחרת ריבוע כמעט-לבן נבלע בכרטיס הלבן */
.theme-opt .swatch-light { box-shadow: 0 0 0 1px rgba(20, 30, 60, .14) inset; }

/* סימון הבחירה — שתי טבעות, לבנה ואז כחולה.
   עם טבעת אחת בצבע המותג הסימון פשוט נעלם על ערכה כהה (כחול כהה על
   רקע כחול כהה), ולא היה שום סימן חיצוני לאיזו ערכה נבחרה. */
.theme-opt input:checked + .swatch {
    border-color: #fff;
    box-shadow: 0 0 0 3px var(--primary);
}
.theme-opt input:checked + .swatch::after {
    content: '✓';
    position: absolute; top: 6px; inset-inline-start: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 13px; font-weight: 900; line-height: 20px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.theme-opt input:focus-visible + .swatch { outline: 3px solid var(--primary); outline-offset: 4px; }

/* ימי שבוע (בחירת ימים) */
.days-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.days-picker label {
    margin: 0; font-weight: 700; font-size: 14px;
    border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 0;
    width: 42px; text-align: center; cursor: pointer; background: #fff;
}
.days-picker input { display: none; }
.days-picker input:checked + span { color: #fff; }
.days-picker label:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }

/* טבלת חלונות מוזיקה */
.music-day { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.music-day:last-child { border-bottom: none; }
.music-day .d-name { width: 60px; font-weight: 700; font-size: 14px; }
.music-day input[type="time"] { width: 110px; flex: none; }
.music-day input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); }

/* קישור למסך */
.link-box {
    background: #0a1428; color: #7fd4ff; border-radius: 12px; padding: 14px;
    font-family: Consolas, monospace; font-size: 14px; direction: ltr; text-align: left;
    word-break: break-all; margin: 10px 0;
}
.qr-wrap { text-align: center; margin: 14px 0; }
.qr-wrap img { width: 180px; height: 180px; border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: #fff; }

/* סטטיסטיקות אדמין */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; box-shadow: var(--shadow); display: block; color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--primary); transform: translateY(-1px); transition: all .15s; }
.stat .num { font-size: 28px; font-weight: 900; color: var(--primary); }
.stat .lbl { font-size: 13px; color: var(--muted); }

/* בורר בניין */
.building-switch { margin: 10px 0; }
.building-switch select { font-weight: 700; }

/* קוד התקנה למסך */
.pair-code {
    font-size: clamp(38px, 13vw, 62px); font-weight: 900; letter-spacing: 0.14em;
    text-align: center; direction: ltr; color: #14120a;
    background: linear-gradient(135deg, #f3d67a, #d4af37);
    border-radius: 14px; padding: 16px 10px; margin: 10px 0;
    font-variant-numeric: tabular-nums;
}
.note-box {
    background: #eef4fb; border-right: 4px solid var(--primary);
    border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 12px; line-height: 1.7;
}
.note-box ul { margin: 0; }
.screens-mini { background: #f7f9fc; border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 10px; }
code {
    background: #eef1f6; border-radius: 5px; padding: 1px 6px;
    font-family: Consolas, monospace; font-size: 13px; direction: ltr; display: inline-block;
}

details.editor { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: #fbfcfe; }
details.editor summary { padding: 12px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.editor summary::after { content: '▾'; margin-right: auto; color: var(--muted); }
details.editor[open] summary::after { content: '▴'; }
details.editor .editor-body { padding: 0 12px 12px; }

@media (min-width: 700px) {
    .container { padding: 20px 20px 60px; }
    .card { padding: 22px 20px; }
}

/* ===== ספריית התוכן ===== */
.lib-item {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1.5px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin: 6px 0; background: #fff; cursor: pointer;
    font-weight: 400; transition: border-color 0.15s, background 0.15s;
}
.lib-item:hover { border-color: var(--primary); background: #f7faff; }
.lib-item:has(input:checked) { border-color: var(--ok); background: #f2fbf6; }
.lib-item input { width: 20px; height: 20px; accent-color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.lib-ic { font-size: 22px; line-height: 1.2; }
.lib-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; }
.lib-txt b { display: block; font-size: 14.5px; }
.lib-body { display: block; color: var(--muted); white-space: pre-line; }
.lib-src { display: block; color: var(--primary); font-size: 12.5px; font-style: italic; margin-top: 2px; }

/* הערה פנימית — נראית למנהל בלבד */
.note-private {
    background: #fff8e6; border-right: 3px solid #d4a017; border-radius: 6px;
    padding: 6px 10px; margin-top: 5px; font-size: 13px; color: #6b5310;
    white-space: pre-line; word-break: break-word;
}

/* גרסאות */
.snap-group {
    font-size: 14px; color: var(--muted); font-weight: 700;
    border-bottom: 1px solid var(--border); padding-bottom: 5px; margin: 16px 0 8px;
}
.snap-group:first-of-type { margin-top: 4px; }
.item.snap-star { background: #fffaf0; border-color: #f0d894; }

/* מיתוג דינמי */
.brand-logo { max-height: 30px; max-width: 150px; object-fit: contain; vertical-align: middle; }
.brand-name { font-weight: 800; }
/* שם + סלוגן בשתי שורות צמודות, בלי לגזול רוחב מהסרגל */
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.12; }
.brand-sub { font-weight: 600; opacity: 0.82; font-size: 11.5px; letter-spacing: .4px; }
/* בטלפון צר הסלוגן יורד — השם והכפתורים חשובים יותר */
@media (max-width: 520px) { .brand-sub { display: none; } }
/* לוגו הזהב על כרטיס ההתחברות הלבן — לוחית כהה שלא ייבלע */
.auth-brand-logo {
    max-height: 96px; max-width: 260px; object-fit: contain; margin-bottom: 14px;
    background: linear-gradient(135deg, #141826, #232c40);
    padding: 14px 20px; border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* ===== קישור הרשמה חד-פעמי ===== */
.invite-box {
    margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    background: #eef6ec; border: 1px solid #cfe6c9;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.invite-box .link-line {
    flex: 1 1 100%; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px; word-break: break-all; color: #2b5d24;
}

/* מוצג רק כשהדפדפן חסם העתקה אוטומטית — עדיף שדה מסומן על פני
   כפתור שמכריז "הועתק" בלי שקרה כלום */
.copy-manual { flex: 1 1 100%; margin-top: 6px; }
.copy-manual-tip { font-size: 12px; color: #8a5a00; margin-bottom: 4px; }
.copy-manual-input {
    width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 16px;                 /* פחות מזה — iOS מזיז את המסך בזום */
    padding: 8px 10px; border: 1px solid #d4a017; border-radius: 8px;
    background: #fffdf6; color: #333; direction: ltr; text-align: left;
}

/* ===== שורת משתמש ===== */
/* היררכיה ברורה: שם גדול, אימייל מתחתיו, ואז מה הוא מנהל.
   כל השאר קטן ואפור — שם מחפשים רק כשצריך. */
.u-mail {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
    color: var(--primary); margin-top: 2px; overflow-wrap: anywhere;
}
.u-manages { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.u-manages-lbl { font-size: 13px; font-weight: 700; color: var(--text); }
.u-bld {
    font-size: 12.5px; text-decoration: none; color: var(--primary-dark);
    background: #eef2f8; border: 1px solid var(--border);
    /* break-word: שם בניין עברי לא נשבר באמצע מילה בתוך הצ'יפ */
    border-radius: 999px; padding: 2px 10px; overflow-wrap: break-word;
}
.u-bld:hover { background: #e2e9f4; }
.u-meta { margin-top: 6px; }

/* ===== בורר עם חיפוש ===== */
.picker { min-width: 0; }
.picker .picker-search { margin-bottom: 6px; }
.picker .picker-note { min-height: 15px; margin-top: 3px; }

/* ===== מנהלים נוספים לבניין ===== */
.mgr-box { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d8d8d8; }
.mgr-add { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mgr-add input { flex: 1 1 220px; min-width: 0; }
.mgr-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mgr-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #f6f7f9; border: 1px solid #e3e6ea; border-radius: 8px; padding: 6px 10px;
}
.mgr-row > span { min-width: 0; overflow-wrap: anywhere; }

/* ===== בורר אייקונים ===== */
.icon-field { display: flex; gap: 6px; align-items: center; }
.icon-input {
    width: 70px !important; text-align: center; font-size: 22px !important;
    cursor: pointer; padding: 8px 4px !important;
}
.icon-open { padding: 8px 10px; font-size: 13px; background: #eef2f9; color: var(--primary); }
.icon-picker {
    position: absolute; z-index: 40; margin-top: 6px;
    background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
    padding: 10px 12px; box-shadow: 0 10px 30px rgba(20, 30, 60, .18);
    max-height: 320px; overflow-y: auto; width: min(340px, calc(100vw - 40px));
}
/* בסלולר הבורר מעוגן למסך ולא לשדה: position:absolute ליד שדה שקרוב
   לקצה גלש מחוץ ל-viewport, הרחיב את העמוד הצידה ושבר את כל הפריסה */
@media (max-width: 560px) {
    .icon-picker {
        position: fixed; left: 10px; right: 10px; width: auto;
        top: 50%; transform: translateY(-50%); margin-top: 0;
        max-height: 70vh; z-index: 120;
        box-shadow: 0 12px 40px rgba(20, 30, 60, .35);
    }
}
.icon-grp { font-size: 12px; font-weight: 700; color: var(--muted); margin: 8px 0 4px; }
.icon-grp:first-child { margin-top: 0; }
.icon-row { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-opt {
    width: 38px; height: 38px; border: 1px solid transparent; border-radius: 9px;
    background: #f5f7fb; font-size: 20px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.icon-opt:hover, .icon-opt:focus-visible { background: #e3ebf7; border-color: var(--primary); }
.icon-none, .icon-custom { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ===== שלבי התקנה ===== */
.setup-steps { padding-right: 20px; margin: 6px 0 12px; }
.setup-steps li { margin-bottom: 12px; line-height: 1.6; }
.setup-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }

.setup-hero {
    background: #eef6ec; border: 1px solid #cfe6c9; border-radius: 12px;
    padding: 14px 16px; margin-bottom: 4px;
}
.setup-hero .link-line {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; margin: 6px 0; word-break: break-all;
}

/* ===== שיוך בניינים לחברת ניהול ===== */
.bldg-pick {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 6px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fafbfd;
}
.bldg-opt {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    font-weight: 500; font-size: 14.5px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.bldg-opt:hover { background: #eef3fb; }
.bldg-opt input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--primary); }
/* בניין ששייך כבר לחברה אחרת — מסומן ויזואלית, אבל עדיין ניתן לבחירה (העברה) */
.bldg-opt.taken { opacity: .72; }

/* ===== כפתורי סרגל עליון =====
   קודם היו קישורי טקסט חיוורים שנבלעו ברקע הכחול ולא נראו כמו כפתורים. */
.topbtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.16); color: #fff !important;
    border-radius: 100px; padding: 7px 14px; font-size: 13.5px; font-weight: 700;
    white-space: nowrap; opacity: 1; transition: background .15s;
}
.topbtn:hover { background: rgba(255,255,255,.28); }
.topbtn-eye  { background: var(--accent); color: #241c05 !important; }
.topbtn-eye:hover { background: #e6c04a; }
.topbtn-back { background: rgba(255,255,255,.24); }
.topbtn-out  { background: rgba(0,0,0,.22); }
@media (max-width: 560px) {
    .topbar { gap: 6px; }
    .topbtn { padding: 6px 10px; font-size: 12.5px; }
    .topbar .userchip { font-size: 12px; }
}

/* ===== כפתורי הזזה למעלה/למטה ===== */
.move-btns { display: flex; flex-direction: column; gap: 2px; }
.move-btns .btn { padding: 3px 9px; font-size: 12px; line-height: 1.2; min-height: 0; }

/* ===== חידוש מנוי מהיר ===== */
.renew-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: #f4f7fc; border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px; margin-top: 10px;
}

/* ===== השהיית כל מסכי הלקוח ===== */
.cust-screens {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #fbfcfe; border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px; margin-top: 8px;
}

/* ===== טבלת יומן פעילות ===== */
.audit-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.audit-filter input[name=aq] { flex: 1; min-width: 180px; }
.audit-filter select { width: auto; min-width: 150px; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.audit-table th {
    background: #f4f7fc; text-align: right; padding: 9px 10px;
    font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.audit-table td { padding: 8px 10px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.audit-table tr:last-child td { border-bottom: 0; }
.audit-table .nowrap { white-space: nowrap; }
.audit-table .audit-detail { color: var(--muted); max-width: 340px; }
.audit-table tr.audit-fail { background: #fdf3f3; }
.audit-table tr.audit-fail td:first-child { border-right: 3px solid var(--danger); }
.pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; }

/* ===== שלט אבטחה ===== */
.cctv-presets {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 8px; margin-top: 6px;
}
.cctv-preset {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 10px; border-radius: 12px; cursor: pointer;
    border: 2px solid transparent; font-family: inherit; text-align: center;
    transition: transform .12s, box-shadow .12s;
}
.cctv-preset:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,30,60,.16); }
.cctv-preset .cp-ic { font-size: 26px; line-height: 1; }
.cctv-preset .cp-t { font-weight: 800; font-size: 13.5px; }
.cctv-preset .cp-s { font-size: 11.5px; opacity: .85; }

/* שלוש עוצמות — אותם צבעים בדיוק כמו על המסך */
/* עוצמות שלט האבטחה — חייבות להיראות בפאנל בדיוק כמו על הטלוויזיה,
   אחרת בוחרים לפי משהו אחד ומקבלים משהו אחר.
   שים לב: על המסך הגוונים העדינים שקופים ומתלבשים על ערכת הנושא;
   כאן הפאנל תמיד לבן, ולכן הם מצוירים כאן בגרסה הבהירה שלהם. */
.st-red    { background: #fdeaea; color: #8d1f1f; border-color: #f0c2c2; }
.st-amber  { background: #fff5e3; color: #8a5a09; border-color: #f2ddb4; }
.st-slate  { background: #eef1f6; color: #34405a; border-color: #d5dbe6; }
.st-redframe {
    background: #fff5f5; color: #8d1f1f; border-color: #e11d2f; border-width: 5px;
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(0, 0, 0, .18);
}
.st-redsolid { background: #c81e1e; color: #fff; border-color: #7f0f18; }
.st-hazard {
    background: #131313; color: #ffd43b; border: 7px solid transparent;
    border-image: repeating-linear-gradient(45deg, #f5c400 0 12px, #131313 12px 24px) 7;
    border-radius: 0;
}
.st-pulse {
    background: #1c0c0e; color: #fff; border-color: #e11d2f;
    animation: liveRing 2.2s ease-in-out infinite;
}
@keyframes liveRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 47, .5); }
    50%      { box-shadow: 0 0 0 9px rgba(225, 29, 47, 0); }
}
.st-neon {
    background: #0c0709; color: #fff; border-color: #ff2d46;
    box-shadow: 0 0 14px rgba(255, 45, 70, .5);
    text-shadow: 0 0 7px rgba(255, 60, 85, .9);
}
@media (prefers-reduced-motion: reduce) { .st-pulse { animation: none; box-shadow: 0 0 0 5px rgba(225,29,47,.35); } }

.cctv-live {
    margin-top: 6px; border-radius: 14px; padding: 18px 14px; text-align: center;
    border: 2px solid;
}
.cctv-live .cl-ic { font-size: 40px; line-height: 1; }
.cctv-live .cl-t { font-weight: 900; font-size: 18px; margin-top: 4px; }
.cctv-live .cl-s { font-size: 13.5px; opacity: .85; margin-top: 3px; }

/* ===== תיבות סימון גדולות וברורות (שבת וחגים) ===== */
.jew-row {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px; background: #fff;
    transition: border-color .15s, background .15s;
}
.jew-row:hover { border-color: #c3d3ea; background: #fbfcfe; }
.jew-row input[type=checkbox] {
    width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px;
    accent-color: var(--primary); cursor: pointer;
}
.jew-row label { margin: 0; cursor: pointer; flex: 1; font-weight: 500; }
.jew-row label b { display: block; font-size: 15px; margin-bottom: 1px; }
.jew-row label span { display: block; line-height: 1.4; }
/* מסומן = מודגש ויזואלית, כדי שרואים מיד מה דלוק */
.jew-row:has(input:checked) { border-color: #b9d0ee; background: #f5f9ff; }

.jew-live {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px;
    background: #f4f7fc; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.jew-list {
    display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
    border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: #fafbfd;
}
.jew-list > div {
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
    font-size: 14px; padding: 3px 0; flex-wrap: wrap;
}

@media (max-width: 560px) {
    .jew-row { padding: 11px 12px; gap: 10px; }
    .jew-row label b { font-size: 14.5px; }
    .cctv-presets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .cctv-preset .cp-t { font-size: 12.5px; }
    .cctv-preset .cp-s { font-size: 10.5px; }
    .bldg-pick { grid-template-columns: 1fr; }
    .renew-row, .cust-screens { padding: 8px 10px; }
    .theme-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ===== גלישת טקסט ארוך =====
   כתובות, אימיילים וכותרות ארוכות בעברית גלשו מחוץ לתיבה שלהן במסך צר.
   חשוב: break-word ולא anywhere! 'anywhere' מקטין את רוחב המינימום של
   התא ושובר מילים עבריות באמצע ("בלי תנו/עה") בכל תא צר בסלולר.
   'break-word' שובר רק מחרוזת שלמה שרחבה מהקופסה — URL או אימייל —
   ומילים רגילות עוברות שורה שלמות. ל-URL/אימייל יש anywhere נקודתי. */
.item-main, .item-title, .item-sub, .card, .editor summary,
.jew-list > div, .invite-box {
    min-width: 0; overflow-wrap: break-word;
}
.link-line { min-width: 0; overflow-wrap: anywhere; }
.item { min-width: 0; }
.item-title { white-space: normal; }
/* שדה האייקון הוא ריבוע קטן — הטקסט בתוכו לא אמור לדחוף אותו */
.icon-input { min-width: 0; }
@media (max-width: 560px) {
    .item { flex-wrap: wrap; }
    /* חייב .item בקדמת הסלקטור: מדיה-קווארי לא מוסיף ספציפיות, ולכן
       ‎.item-actions‎ לבדו הפסיד ל-‎.item .item-actions‎ והכפתורים נשארו
       צמודים לקצה השמאלי במקום להתחיל מתחת לטקסט. */
    .item .item-actions { width: 100%; justify-content: flex-start; margin-top: 6px; }
    .theme-opt .swatch { font-size: 12px; padding: 18px 5px 6px; }
}

/* במסך צר min-width:130px על 3 עמודות = 390px + מרווחים, כלומר גלישה.
   מורידים את הרצפה כדי שהשורה תישבר במקום לגלוש. */
@media (max-width: 560px) {
    .row > * { min-width: 100%; }
    .row > [style*="max-width"] { min-width: 0; }
}

/* ===== אנימציות בתצוגה החיה של שלט האבטחה (זהות לאלה שעל המסך) ===== */
.cctv-live .cl-ic { display: inline-block; }
.cctv-live.anim-scan  .cl-ic { animation: liveScan 5s ease-in-out infinite; transform-origin: 50% 70%; }
.cctv-live.anim-siren .cl-ic { animation: liveSiren 1.6s ease-in-out infinite; }
.cctv-live.anim-rec   .cl-ic { animation: liveRec 2.4s ease-in-out infinite; }
.cctv-live.anim-blink .cl-ic { animation: liveBlink 4.5s ease-in-out infinite; }
.cctv-live.anim-none  .cl-ic { animation: none; }
@keyframes liveScan  { 0%,100%{transform:rotate(-13deg)} 50%{transform:rotate(13deg)} }
@keyframes liveSiren { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,60,60,0))}
                       50%{transform:scale(1.14);filter:drop-shadow(0 0 10px rgba(255,60,60,.85))} }
@keyframes liveRec   { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes liveBlink { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)} }
@media (prefers-reduced-motion: reduce) { .cctv-live .cl-ic { animation: none !important; } }

/* ===== טאב שבת וחגים ===== */
.jew-master {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin: 4px 0 14px;
    border: 2px solid var(--accent); border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    cursor: pointer;
}
.jew-master input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }
.jew-master .jew-ic { font-size: 26px; }

.jew-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card2, transparent);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.jew-row:hover { border-color: var(--accent); }
.jew-row input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); }
.jew-row .jew-ic { font-size: 20px; line-height: 1.3; flex: 0 0 auto; }
.jew-row .jew-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jew-row .jew-tx b { font-size: 15px; }

/* כשהמתג הראשי כבוי — הכל מתחתיו אפור, לא לחיץ, ומסביר למה */
.jew-deps { position: relative; transition: opacity .2s; }
.jew-off { display: none; }
/* מאפירים רק את השורות עצמן — לא את המיכל — כדי שההסבר יישאר קריא.
   שקיפות על המיכל הייתה מחלישה גם את ההודעה שבתוכו. */
.jew-deps.off .jew-row {
    pointer-events: none; filter: grayscale(1); opacity: .5;
    background: var(--line); border-style: dashed;
}
.jew-deps.off .jew-off {
    display: block; pointer-events: none;
    margin: 0 0 10px; padding: 10px 12px;
    border: 1px dashed var(--line); border-radius: 10px;
    opacity: 1; filter: none; color: var(--muted); text-align: center;
}

/* דוגמה חיה של הכרטיס כפי שהוא נראה בלובי */
.jew-demo {
    border-radius: 14px; padding: 16px;
    background: linear-gradient(150deg, #1a2340, #0f1626);
    color: #eef2ff; min-height: 90px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.jew-demo .jd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.jew-demo .jd-greet { font-size: 20px; font-weight: 800; }
.jew-demo .jd-heb { font-size: 13px; opacity: .75; }
.jew-demo .jd-card {
    border-radius: 10px; padding: 12px 14px;
    background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.jew-demo .jd-card.hot { box-shadow: inset 0 0 0 2px #ffcf5c; background: rgba(255,207,92,.12); }
.jew-demo .jd-t { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.jew-demo .jd-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; }
.jew-demo .jd-line span:last-child { opacity: .8; white-space: nowrap; }
.jew-demo .jd-empty { font-size: 13px; opacity: .6; text-align: center; padding: 14px 0; }
@media (max-width: 640px) { .jew-demo { padding: 12px; } .jew-demo .jd-greet { font-size: 17px; } }

/* ===== אנשי הקשר של הבניין ===== */
.people { display: flex; flex-direction: column; gap: 10px; }
.person {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
    background: var(--card2, transparent);
}
.person.off { opacity: .55; }
.person .p-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.person .p-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.person .p-links a {
    font-size: 13px; padding: 5px 10px; border-radius: 8px;
    /* nowrap הפך אימייל ארוך לשורה אחת שחרגה מהכרטיס ומהמסך והוסיף
       גלילה אופקית לכל העמוד בטלפון. אימייל חייב להיות שביר. */
    border: 1px solid var(--line); text-decoration: none;
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.person .p-links a:hover { border-color: var(--accent); }
@media (max-width: 640px) { .person .p-links a { flex: 1 1 100%; text-align: center; } }

/* כפתור בחירת אייקון — כפתור אמיתי ולא שדה נעול.
   שדה readonly עם onclick לא נפתח במובייל, וזה נראה כמו כפתור שבור. */
.icon-btn {
    font: inherit; font-size: 26px; line-height: 1;
    min-width: 58px; min-height: 48px; padding: 6px 10px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card2, #fff); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--accent); }
@media (max-width: 640px) { .icon-btn { width: 100%; } }

/* ===== צ׳יפים לסינון מהיר ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.chip {
    font-size: 13px; padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--line); text-decoration: none; white-space: nowrap;
    background: var(--card2, transparent); color: inherit;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chip.warn:not(.on) { border-color: #d79a2b; }
.chip.danger:not(.on) { border-color: var(--danger, #c0392b); }
@media (max-width: 640px) { .chip { flex: 1 1 auto; text-align: center; } }

/* איקס קטן למחיקת שורת יומן */
.btn-x {
    font: inherit; font-size: 14px; line-height: 1;
    padding: 4px 8px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.btn-x:hover { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }