/* ==========================================================================
   Rozin CRM - Public Design System (Technician App + Customer Portal)
   Same brand language as admin: deep navy + brass/gold accent
   ========================================================================== */

.rozin-tech-app, .rozin-portal {
    --rozin-navy:        #0B2545;
    --rozin-navy-2:      #123a68;
    --rozin-navy-3:      #1c4a80;
    --rozin-gold:        #b08d3e;
    --rozin-gold-light:  #d4b26a;
    --rozin-bg:          #f4f6f9;
    --rozin-card:        #ffffff;
    --rozin-border:      #e1e6ec;
    --rozin-text:        #16232e;
    --rozin-text-muted:  #5b6b7c;

    font-family: 'Assistant', Arial, sans-serif;
    max-width: 480px;
    margin: 0 auto;
    color: var(--rozin-text);
}

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

/* ---- Header bar ---- */
.rozin-tech-header, .rozin-portal-header {
    background: linear-gradient(135deg, var(--rozin-navy) 0%, var(--rozin-navy-3) 100%);
    color: #fff;
    padding: 20px 18px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    border-bottom: 3px solid var(--rozin-gold);
    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 ---- */
.rozin-tech-tabs { display:flex; gap:6px; margin-bottom: 14px; }
.rozin-tab-btn {
    flex:1; padding:10px; 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);
}
.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:#1c4a80; }
.rozin-status-waiting_part { background:#b08d3e; }
.rozin-status-tech_on_way  { background:#6b4fa0; }
.rozin-status-completed    { background:#2e7d5b; }
.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-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-gold); color:#3a2c0e; }

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

.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; 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; }
}