/* ==========================================================================
   Rozin CRM - Public Design System (Technician App + Customer Portal)
   Same brand language as admin: deep teal-blue + bright turquoise accent
   ========================================================================== */

.rozin-tech-app, .rozin-portal {
    --rozin-navy:        #0B4A63;
    --rozin-navy-2:      #0E5E7D;
    --rozin-navy-3:      #1479A0;
    --rozin-gold:        #17A8CE;
    --rozin-gold-light:  #5BC9E6;
    --rozin-bg:          #f2f6f8;
    --rozin-card:        #ffffff;
    --rozin-border:      #e1e6ec;
    --rozin-text:        #16232e;
    --rozin-text-muted:  #5b6b7c;
    --rozin-kanban-green:  #3f9142;
    --rozin-kanban-orange: #e0972a;
    --rozin-kanban-red:    #d1453b;
    --rozin-kanban-blue:   #1479A0;

    font-family: 'Assistant', Arial, sans-serif;
    font-size: 14.5px;
    max-width: 480px;
    margin: 0 auto;
    color: var(--rozin-text);
}
.rozin-tech-app *, .rozin-portal * { font-size: inherit; }

.rozin-tech-app h2, .rozin-portal h2,
.rozin-tech-app h3, .rozin-portal h3 { font-family: 'Heebo', Arial, sans-serif; }

/* ---- Header bar (blue gradient, rounded bottom - matches the mobile
   reference screens) ---- */
.rozin-tech-header, .rozin-portal-header {
    background: linear-gradient(135deg, var(--rozin-navy) 0%, var(--rozin-gold) 100%);
    color: #fff;
    padding: 20px 18px 16px;
    border-radius: 0 0 18px 18px;
    margin: 0 -8px 16px;
    padding-left: 26px; padding-right: 26px;
    border-bottom: none;
    display:flex; justify-content:space-between; align-items:center;
}
.rozin-tech-header h2, .rozin-portal-header h2 { margin: 0; font-size: 19px; color:#fff; }
.rozin-tech-role { background: rgba(255,255,255,.15); color:#fff; padding:4px 12px; border-radius:14px; font-size:12px; font-weight:600; }
.rozin-location-note { font-size:12px; color: var(--rozin-text-muted); background:#fff; border:1px solid var(--rozin-border); border-radius:8px; padding:8px 12px; margin:-6px 0 14px; }

/* ---- Tabs ---- */
/* ⚠ היו 3 טאבים כשזה נכתב במקור (flex:1 + בלי גלילה) - עכשיו יש 5
   (נוספו "המחסן שלי" ו"היומן שלי"), ועל מסך נייד צר זה דוחס כל כפתור
   לרוחב כל-כך קטן שהטקסט נשבר/מתלבש ולא קריא - בפועל "נעלם" מבחינת
   המשתמש גם אם טכנית הוא שם ב-DOM. גלילה אופקית + רוחב מינימלי סביר
   לכל כפתור פותרים את זה ועדיין משאירים הכול נגיש באצבע. */
.rozin-tech-tabs { display:flex; gap:6px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rozin-tab-btn {
    flex: 0 0 auto; min-width: 84px; white-space: nowrap; padding:10px 12px; border:1px solid var(--rozin-border); background:#fff; color: var(--rozin-text-muted);
    border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.rozin-tab-btn.active { background: var(--rozin-navy); color:#fff; border-color: var(--rozin-navy); }

/* ---- Call cards ---- */
.rozin-call-card {
    background:#fff; border:1px solid var(--rozin-border); border-right: 4px solid var(--rozin-navy-3);
    border-radius:10px; padding:14px 16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(11,37,69,.06);
}
/* קריאה שהושלמה היום - עדיין מוצגת (למעקב), אבל דהויה ומסומנת בבירור
   כבר לא "פעילה", כדי שלא תיראה כמו עוד קריאה שממתינה לטיפול. */
/* ⚠ בעבר כל הכרטיס קיבל opacity:.6 - אבל עכשיו בכרטיס "הושלם" יושב גם הסכום
   שהטכנאי צריך לגבות וכפתור "סמן שגביתי", ואי אפשר שסכום לגבייה יהיה דהוי
   (opacity של הורה אי אפשר לבטל בילד). לכן מעמעמים רק את שאר הכרטיס. */
.rozin-call-card.rozin-call-completed { border-right-color:#3f9142; }
.rozin-call-card.rozin-call-completed > *:not(.rozin-collect-box) { opacity:.6; }
.rozin-call-card.rozin-call-completed .rozin-status-actions { display:none; }
.rozin-call-top { display:flex; justify-content:space-between; margin-bottom:8px; }
.rozin-status { display:inline-block; padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; color:#fff; }
.rozin-status-new          { background:#6b7785; }
.rozin-status-in_progress  { background: var(--rozin-navy-3); }
.rozin-status-waiting_part { background: var(--rozin-kanban-orange); }
.rozin-status-tech_on_way  { background:#6b4fa0; }
.rozin-status-completed    { background: var(--rozin-kanban-green); }
.rozin-call-priority { font-size:11px; color: var(--rozin-text-muted); text-transform:uppercase; font-weight:600; letter-spacing:.4px; }
.rozin-call-title { font-family:'Heebo',sans-serif; font-weight:700; font-size:16.5px; margin-bottom:2px; color: var(--rozin-navy); }
.rozin-call-type-badge { display:inline-block; background:#e8f0f5; color:#0B4A63; border-radius:10px; padding:2px 8px; font-size:11px; font-weight:700; margin-bottom:4px; }
.rozin-call-sub { color: var(--rozin-text-muted); font-size:14px; }
.rozin-call-address { color: var(--rozin-text-muted); font-size:13px; margin-bottom:8px; }
.rozin-call-desc { font-size:13px; color: var(--rozin-text); background: var(--rozin-bg); padding:10px; border-radius:6px; margin-bottom:8px; border-right: 2px solid var(--rozin-gold); }

.rozin-quick-actions, .rozin-status-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rozin-action-btn {
    flex:1; min-width:90px; text-align:center; padding:10px 6px; border-radius:8px;
    border:1px solid var(--rozin-border); background:#fafbfc; text-decoration:none; color: var(--rozin-text);
    font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.rozin-status-btn {
    flex:1; min-width:90px; text-align:center; padding:10px 6px; border-radius:8px; border:none;
    background: var(--rozin-navy-3); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.rozin-btn-complete { background: var(--rozin-kanban-green); color:#fff; }

.rozin-empty { text-align:center; color: var(--rozin-text-muted); padding: 30px 0; }

/* ---- כפתורי אייקון עגולים (כמו בעמוד הטכנאי בתמונות ההשראה - מצב שיחה,
   מחיר ליד, קמפיין וכו') ---- */
.rozin-icon-circles { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 14px 0; }
.rozin-icon-circle {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 78px; text-align: center; text-decoration: none; color: var(--rozin-text);
    font-size: 12px; font-weight: 600;
}
.rozin-icon-circle .circle {
    width: 54px; height: 54px; border-radius: 50%;
    background: #fff; border: 2px solid var(--rozin-navy-3); color: var(--rozin-navy-3);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.rozin-icon-circle.filled .circle { background: var(--rozin-navy-3); color: #fff; border-color: var(--rozin-navy-3); }

/* ---- טבעת מדד עגולה (כמו "תנועות יום" בדשבורד ההשראה) - מספר גדול
   במרכז עיגול עם מסגרת דקה, ותווית קטנה מתחת. ---- */
.rozin-stat-rings { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin: 6px 0 20px; }
.rozin-stat-ring { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 108px; text-align: center; }
.rozin-stat-ring .ring {
    width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--rozin-navy-3);
    background: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'Heebo', sans-serif; font-size: 22px; font-weight: 800; color: var(--rozin-navy);
}
.rozin-stat-ring.warn .ring { border-color: var(--rozin-kanban-red); color: var(--rozin-kanban-red); }
.rozin-stat-ring.ok .ring { border-color: var(--rozin-kanban-green); color: var(--rozin-kanban-green); }
.rozin-stat-ring .ring-label { font-size: 12px; color: var(--rozin-text-muted); font-weight: 600; line-height: 1.3; }

/* ---- כותרת קטע עם שברון פתיחה/סגירה (כמו "תנועות יום ▾" בדשבורד ההשראה) ---- */
.rozin-section-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 700; color: var(--rozin-text-muted);
    border-bottom: 1px solid var(--rozin-border); padding-bottom: 8px; margin-bottom: 14px;
}
.rozin-section-head::after { content: "▾"; font-size: 11px; }

.rozin-quick-replies-box { margin-top:20px; background:#fff; border:1px solid var(--rozin-border); border-radius:8px; padding:12px 16px; }
.rozin-quick-replies-box summary { font-weight:700; color: var(--rozin-navy); cursor:pointer; }
.rozin-qr-item { border-bottom:1px solid #f0f0f0; padding:8px 0; font-size:13.5px; }
.rozin-qr-item:last-child { border-bottom:none; }

/* ---- Signature modal ---- */
.rozin-modal { position:fixed; inset:0; background:rgba(11,37,69,.55); display:flex; align-items:center; justify-content:center; z-index:9999; }
.rozin-modal-content { background:#fff; padding:22px; border-radius:12px; text-align:center; max-width: 92vw; max-height: 88vh; overflow-y: auto; border-top:4px solid var(--rozin-gold); }
.rozin-modal-content h3 { color: var(--rozin-navy); margin-top:0; }
.rozin-modal-actions { display:flex; gap:8px; margin-top:14px; }
.rozin-btn-primary { background: var(--rozin-navy); color:#fff; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:700; font-family:inherit; }
.rozin-btn-secondary { background: var(--rozin-bg); color: var(--rozin-text); border:1px solid var(--rozin-border); padding:10px 16px; border-radius:8px; cursor:pointer; font-family:inherit; }

/* ---- Customer Portal ---- */
.rozin-tech-on-way-banner {
    background: linear-gradient(90deg, #f3edf9 0%, #fff 100%); border:1px solid #6b4fa0; color:#3d2a63;
    padding:14px 16px; border-radius:10px; margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-weight:600;
}
.rozin-tech-on-way-banner a { color: var(--rozin-navy-3); font-weight:700; text-decoration:none; }
.rozin-tech-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #6b4fa0; }

.rozin-portal-cards { display:flex; gap:10px; margin-bottom:20px; }
.rozin-portal-card {
    flex:1; background:#fff; border:1px solid var(--rozin-border); border-top:3px solid var(--rozin-gold);
    border-radius:10px; padding:16px; text-align:center;
}
.rozin-portal-card .num { font-family:'Heebo',sans-serif; font-size:23px; font-weight:800; color: var(--rozin-navy); }
.rozin-portal-card .label { font-size:12px; color: var(--rozin-text-muted); margin-top:4px; }

.rozin-portal-section { margin-bottom:24px; background:#fff; border:1px solid var(--rozin-border); border-radius:10px; padding:16px 18px; }
.rozin-portal-section h3 { color: var(--rozin-navy); border-bottom:2px solid var(--rozin-bg); padding-bottom:8px; margin-top:0; }

#rozin-new-call-form input, #rozin-new-call-form textarea {
    width:100%; box-sizing:border-box; padding:11px; margin-bottom:8px; border:1px solid var(--rozin-border);
    border-radius:8px; font-family: inherit; font-size:14px;
}
#rozin-new-call-form button { width: 100%; }
#rozin-new-call-msg { font-size: 13px; margin-top: 4px; font-weight:600; }

.rozin-portal-table { width:100%; border-collapse: collapse; font-size:13px; }
.rozin-portal-table th { background: var(--rozin-bg); color: var(--rozin-navy); font-weight:700; }
.rozin-portal-table th, .rozin-portal-table td { padding:9px 8px; border-bottom:1px solid #eef1f4; text-align:right; }

.rozin-doc-content p { margin: 0 0 12px; }
.rozin-doc-content ul, .rozin-doc-content ol { margin: 0 0 12px; padding-right: 22px; }
.rozin-doc-content strong { color: var(--rozin-navy); }
.rozin-doc-content h1, .rozin-doc-content h2, .rozin-doc-content h3 { color: var(--rozin-navy); margin: 16px 0 8px; }

.rozin-portal-logout { font-size: 13px; color: #5b6b7c; text-decoration: none; padding: 6px 12px; border: 1px solid #dde3ea; border-radius: 6px; white-space: nowrap; }
.rozin-portal-logout:hover { background: #f7f9fb; color: #b32d2e; }
.rozin-tech-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.rozin-attendance-widget { display: flex; align-items: center; gap: 12px; background: #f7f9fb; border: 1px solid #dde3ea; border-radius: 10px; padding: 12px 16px; margin: 12px 0; font-size: 13.5px; }
.rozin-attendance-widget button { font-size: 13px; padding: 8px 16px; }

@media (max-width: 500px) {
    .rozin-tech-app, .rozin-portal { max-width: 100%; padding: 0 8px; }
    .rozin-portal-cards { flex-direction: column; }

    /* טבלאות - scroll אופקי במקום גלישה/שבירת עמוד, כמו באדמין */
    table.rozin-portal-table,
    table.rozin-billing-table,
    .rozin-portal table,
    .rozin-tech-app table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* גריד כללי (כרטיסי קריאות, מסמכים וכו') - עמודה בודדת */
    div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* טפסים - שדות תופסים רוחב מלא, לא נגלשים */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="date"],
    select, textarea { max-width: 100%; box-sizing: border-box; }

    /* כפתורים - נשברים לשורות נוספות בלי לגלוש מהמסך */
    .rozin-btn-primary, .rozin-btn-secondary, button {
        white-space: normal;
        word-break: break-word;
    }

    /* כרטיס צ'אט צף (טכנאי) - קצת יותר צר על מסכים קטנים מאוד */
    #rozin-tech-chat-panel { width: calc(100vw - 32px) !important; right: 16px !important; }

    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
}

/* ---------- תיאום פגישה/התקנה מהנייד (טאב "תיאום חדש" בעמוד הטכנאי) ----------
   font-size:16px בשדות בכוונה - מתחת ל-16px אייפון עושה זום אוטומטי בכל פעם
   שמקלידים בשדה, וזה שובר את הפריסה. */
.rozin-coord-form label { display:block; font-size:13px; font-weight:700; color:var(--rozin-navy); margin:14px 0 4px; }
.rozin-coord-form input[type=text],
.rozin-coord-form input[type=datetime-local],
.rozin-coord-form select,
.rozin-coord-form textarea {
    width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--rozin-border);
    border-radius:8px; font-size:16px; font-family:inherit; background:#fff;
}
.rozin-coord-form input[type=text] + input[type=text] { margin-top:8px; }
.rozin-coord-hint { font-size:12.5px; color:var(--rozin-text-muted); margin:0 0 2px; }
#rozin-coord-customer-chip {
    display:flex; align-items:center; justify-content:space-between; gap:8px; background:#e8f0f5; color:var(--rozin-navy);
    border-radius:8px; padding:11px 12px; font-weight:700;
}
#rozin-coord-customer-chip button { background:none; border:none; color:#b32d2e; font-weight:700; cursor:pointer; font-family:inherit; font-size:14px; }
.rozin-coord-customer-result {
    display:flex; justify-content:space-between; gap:8px; width:100%; text-align:right; background:#fff;
    border:1px solid var(--rozin-border); border-radius:8px; padding:11px 12px; margin-top:6px;
    cursor:pointer; font-family:inherit; font-size:14px;
}
.rozin-coord-customer-result span { color:var(--rozin-text-muted); font-size:12.5px; }
#rozin-coord-customer-history, #rozin-coord-availability {
    margin-top:8px; padding:10px 12px; border-radius:8px; font-size:13px; background:#f7f9fb; border:1px solid var(--rozin-border);
}
#rozin-coord-customer-history ul, #rozin-coord-availability ul { margin:6px 0 0; padding-inline-start:18px; }
#rozin-coord-availability.rozin-coord-avail-free { background:#e8f7ee; border-color:#bfe8cf; color:#1e6b45; }
#rozin-coord-availability.rozin-coord-avail-busy { background:#fff8e6; border-color:#f0d98a; color:#7a5c00; }
#rozin-coord-status { margin-top:12px; padding:11px 12px; border-radius:8px; font-weight:700; font-size:14px; }
#rozin-coord-submit { width:100%; margin-top:14px; padding:14px; font-size:16px; }


/* ---------- כמה לגבות מהלקוח (תיבה בכרטיס הקריאה של הטכנאי) ---------- */
.rozin-collect-box { margin:10px 0; padding:10px 12px; border-radius:10px; border:1px solid var(--rozin-border); background:#f7f9fb; }
.rozin-collect-headline { font-weight:800; font-size:15px; }
.rozin-collect-detail { font-size:12.5px; color:var(--rozin-text-muted); margin-top:2px; }
.rozin-collect-collect, .rozin-collect-estimate, .rozin-collect-rate_only { background:#fff8e6; border-color:#f0d98a; }
.rozin-collect-collect .rozin-collect-headline { color:#7a5c00; font-size:17px; }
.rozin-collect-estimate .rozin-collect-headline, .rozin-collect-rate_only .rozin-collect-headline { color:#7a5c00; }
.rozin-collect-paid { background:#e8f7ee; border-color:#bfe8cf; }
.rozin-collect-paid .rozin-collect-headline { color:#1e6b45; }
.rozin-collect-none { background:#e8f0f5; border-color:#c9dbe6; }
.rozin-collect-none .rozin-collect-headline { color:#0B4A63; }
.rozin-collect-unknown { background:#fdecea; border-color:#f3c2bd; }
.rozin-collect-unknown .rozin-collect-headline { color:#9a2f27; }
.rozin-collect-form { margin-top:10px; display:grid; gap:8px; }
.rozin-collect-form select, .rozin-collect-form input {
    width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--rozin-border);
    border-radius:8px; font-size:16px; font-family:inherit; background:#fff;
}
.rozin-collect-error { color:#9a2f27; font-weight:700; font-size:13px; }

/* שורת "כמה לגבות" קומפקטית ברשימת הקריאות העתידיות */
.rozin-collect-line { font-weight:700; margin-top:2px; }
.rozin-collect-line-collect, .rozin-collect-line-rate_only, .rozin-collect-line-estimate { color:#7a5c00; }
.rozin-collect-line-paid { color:#1e6b45; }
.rozin-collect-line-none { color:#0B4A63; }
.rozin-collect-line-unknown { color:#9a2f27; }

/* ---------- בחירת תשלום בטופס התיאום מהנייד ---------- */
.rozin-coord-form .rozin-coord-pay-opt { display:flex; align-items:center; gap:8px; margin:6px 0; font-weight:600; font-size:14px; color:var(--rozin-text); }
.rozin-coord-pay-opt input[type=radio] { width:20px; height:20px; margin:0; flex:0 0 auto; }
#rozin-coord-pay-fields { display:grid; gap:8px; margin-top:6px; }
#rozin-coord-pay-fields input, #rozin-coord-pay-fields select {
    width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--rozin-border);
    border-radius:8px; font-size:16px; font-family:inherit; background:#fff;
}

/* ---------- חלונות תחתונים בעמוד הטכנאי: הודעה ללקוח / לקוח חדש ---------- */
.rozin-sheet { position:fixed; inset:0; background:rgba(11,37,69,.55); align-items:flex-end; justify-content:center; z-index:10000; }
.rozin-sheet-box { background:#fff; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; border-radius:16px 16px 0 0; padding:16px; box-sizing:border-box; }
.rozin-sheet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:16px; }
.rozin-sheet-close { background:none; border:none; font-size:20px; cursor:pointer; padding:6px 10px; }
.rozin-sheet-box label { display:block; font-size:13px; font-weight:700; color:var(--rozin-navy); margin:12px 0 4px; }
.rozin-sheet-box input, .rozin-sheet-box select, .rozin-sheet-box textarea {
    width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--rozin-border); border-radius:8px; font-size:16px; font-family:inherit; background:#fff;
}
.rozin-sheet-box textarea { margin-top:8px; }
.rozin-sheet-hint { font-size:12px; color:var(--rozin-text-muted); margin:4px 0; }
.rozin-sheet-status { margin:10px 0; padding:10px 12px; border-radius:8px; font-weight:700; font-size:14px; }
.rozin-sheet-box .rozin-btn-primary { width:100%; margin-top:12px; padding:14px; font-size:16px; }
.rozin-msg-channels { display:flex; gap:8px; margin-bottom:10px; }
.rozin-msg-channel { flex:1; padding:10px; border:1px solid var(--rozin-border); background:#fff; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.rozin-msg-channel.active { background:var(--rozin-navy); color:#fff; border-color:var(--rozin-navy); }
.rozin-sheet-dups { background:#fff8e6; border:1px solid #f0d98a; border-radius:8px; padding:10px 12px; margin-top:12px; font-size:13px; }
.rozin-nc-dup { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f0e6c0; }
.rozin-nc-use, .rozin-nc-force { background:#fff; border:1px solid var(--rozin-border); border-radius:8px; padding:8px 10px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.rozin-nc-force { width:100%; margin-top:10px; }
.rozin-link-btn { background:none; border:none; color:var(--rozin-navy); font-weight:700; font-size:13.5px; padding:10px 0; cursor:pointer; text-decoration:underline; font-family:inherit; }

/* ---------- שורת מועד התיאום בכרטיס הקריאה ---------- */
.rozin-call-when { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:700; color:var(--rozin-navy); }
.rozin-call-when .rozin-link-btn { padding:4px 0; font-size:13px; }

/* ---------- המחסן שלי (טכנאי): ציוד כמותי ---------- */
.rozin-stock-heading { margin:14px 4px 8px; font-size:15px; color:var(--rozin-navy); }
.rozin-qty-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.rozin-qty-badge { background:var(--rozin-navy); color:#fff; border-radius:12px; padding:6px 14px; font-weight:700; white-space:nowrap; }
.rozin-qty-badge .rozin-qty-value { font-size:20px; }

.rozin-attach-photo-status { font-size:13px; font-weight:700; display:block; margin:6px 0 0; }