:root{--staff-green:#0f3d3a;--staff-burgundy:#6c151e;--staff-cream:#f5dabf;--staff-bg:#f7f8fa;--staff-muted:#6f737b}
.staff-app-shell{max-width:1180px;margin:0 auto}.staff-app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,rgba(15,61,58,.07),rgba(245,218,191,.25));border:1px solid rgba(15,61,58,.08);border-radius:24px;padding:20px}.staff-app-logo{width:52px;height:52px;object-fit:contain;background:var(--staff-green);border-radius:16px;padding:8px}.staff-page-title{font-weight:900;margin:0}.staff-round-btn{border-radius:14px}.staff-stat-card,.staff-task-card,.staff-empty-card,.staff-equipment-card,.staff-profile-card,.staff-notification-card,.staff-search-card{background:#fff;border:1px solid rgba(15,61,58,.08);border-radius:20px;box-shadow:0 8px 26px rgba(18,38,63,.05)}.staff-stat-card{padding:16px;min-height:150px}.staff-stat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(15,61,58,.09)}.staff-stat-icon.burgundy{background:rgba(108,21,30,.09)}.staff-stat-icon.cream{background:var(--staff-cream)}.staff-stat-value{font-size:30px;font-weight:900;color:var(--staff-burgundy);margin-top:15px}.staff-stat-label{color:var(--staff-muted);font-weight:700}.staff-section-title{font-size:20px;font-weight:900;margin-bottom:12px}.staff-task-card{display:block;padding:18px;color:inherit;transition:.2s ease}.staff-task-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(18,38,63,.09);border-color:rgba(15,61,58,.18)}.staff-task-code{font-size:12px;color:var(--staff-green);font-weight:900}.staff-task-title{font-size:18px;font-weight:900;margin-top:2px}.staff-task-subtitle{color:var(--staff-muted);margin-top:3px}.staff-status-pill{white-space:nowrap;background:rgba(15,61,58,.08);color:var(--staff-green);font-weight:800;border-radius:999px;padding:7px 11px;font-size:12px}.staff-task-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}.staff-empty-card{text-align:center;padding:38px;color:var(--staff-muted)}.staff-info-banner{display:flex;gap:12px;align-items:center;background:#fff;border-radius:20px;padding:17px;border:1px solid rgba(15,61,58,.08)}.staff-info-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:rgba(15,61,58,.09);color:var(--staff-green);font-weight:900}.staff-search-card{display:flex;gap:10px;padding:12px}.staff-chip-row{display:flex;gap:8px;overflow:auto;padding-bottom:2px}.staff-chip{display:inline-block;padding:8px 14px;border-radius:999px;text-decoration:none;color:#5e626b;background:#fff;border:1px solid #e4e6ea;font-weight:700;white-space:nowrap}.staff-chip.active{background:var(--staff-green);color:#fff;border-color:var(--staff-green)}.staff-equipment-card{padding:15px;display:flex;gap:12px;align-items:center}.staff-equipment-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:rgba(15,61,58,.09);font-size:22px}.fw-black{font-weight:900}.staff-primary-text{color:var(--staff-green);font-weight:800}.staff-notification-card{border:1px solid rgba(15,61,58,.08);display:flex;gap:12px;align-items:flex-start;padding:16px;color:inherit}.staff-notification-card.unread{background:rgba(15,61,58,.035)}.staff-notification-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(15,61,58,.09)}.staff-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--staff-green);margin-top:8px}.staff-profile-card{padding:20px}.staff-avatar{width:88px;height:88px;margin:auto;display:grid;place-items:center;border-radius:28px;background:linear-gradient(135deg,var(--staff-green),var(--staff-burgundy));color:#fff;font-size:34px;font-weight:900}.staff-profile-row{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f2}.staff-profile-row:last-child{border-bottom:0}.staff-profile-row>span{font-size:22px;width:38px}.staff-profile-row div{display:flex;flex-direction:column}.staff-profile-row small{color:var(--staff-muted)}.staff-camera-box{height:240px;border-radius:18px;background:#111;overflow:hidden;display:grid;place-items:center;position:relative;color:#fff;text-align:center}.staff-camera-box video{width:100%;height:100%;object-fit:cover}.staff-camera-box #qrCameraHint{position:absolute;bottom:10px;left:10px;right:10px;background:rgba(0,0,0,.55);border-radius:10px;padding:7px}.staff-modal{border:0;border-radius:22px;overflow:hidden}
@media(max-width:767px){.staff-app-header{padding:16px;border-radius:18px}.staff-app-logo{width:46px;height:46px}.staff-stat-card{min-height:132px}.staff-task-meta{display:grid;gap:6px}.staff-search-card{flex-direction:column}}

.staff-workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.staff-workflow-step{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:13px;background:#f5f6f8;color:#8a8e95;font-size:13px}.staff-workflow-step.done{background:rgba(15,61,58,.08);color:var(--staff-green)}.staff-workflow-step.current{background:rgba(108,21,30,.08);color:var(--staff-burgundy)}.staff-smart-action-card{border-top:4px solid var(--staff-green)!important}@media(max-width:767px){.staff-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Mobile-app parity additions for the employee web portal */
.staff-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.staff-quick-card{background:#fff;border:1px solid rgba(15,61,58,.09);border-radius:18px;padding:16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px;min-height:128px;box-shadow:0 8px 24px rgba(18,38,63,.045);transition:.18s ease}
.staff-quick-card:hover{transform:translateY(-2px);border-color:rgba(15,61,58,.22);box-shadow:0 12px 28px rgba(18,38,63,.08);color:inherit}
.staff-quick-card small{color:var(--staff-muted)}
.staff-quick-icon{width:42px;height:42px;border-radius:13px;background:rgba(15,61,58,.09);color:var(--staff-green);display:grid;place-items:center;font-size:20px;font-weight:900;margin-bottom:8px}
.staff-finance-hero{background:linear-gradient(135deg,var(--staff-green),#082826 62%,var(--staff-burgundy));color:#fff;border-radius:24px;padding:24px;box-shadow:0 14px 32px rgba(15,61,58,.18)}
.staff-finance-balance{font-size:34px;font-weight:900;line-height:1.2;margin:5px 0}
.staff-money-net{background:rgba(15,61,58,.07);border-radius:12px;padding:10px 12px;color:var(--staff-green);font-size:17px;font-weight:900}
.staff-payment-list{border-top:1px solid #eceff0;padding-top:8px;display:grid;gap:5px}
.staff-payment-list>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
@media(max-width:900px){.staff-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.staff-quick-grid{grid-template-columns:1fr 1fr}.staff-quick-card{min-height:116px;padding:13px}.staff-finance-balance{font-size:28px}}

/* QR scanner fix - 2026-10-17: never hide camera errors behind a black video area. */
.staff-camera-box { display:block; position:relative; height:clamp(220px, 34vh, 310px); background:#151a20; isolation:isolate; overflow:hidden; }
.staff-camera-box video { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#151a20; z-index:1; }
.staff-camera-box.camera-running video { display:block; }
.staff-camera-box:not(.camera-running)::before { content:'📷'; position:absolute; top:34%; left:50%; transform:translate(-50%, -50%); font-size:48px; opacity:.7; }
.staff-camera-box .staff-camera-hint { display:block; position:absolute; bottom:12px; left:12px; right:12px; width:auto; padding:10px 12px; background:rgba(6,18,23,.88); color:#fff; border-radius:11px; z-index:3; font-size:13px; line-height:1.6; text-align:center; overflow-wrap:anywhere; }
.staff-camera-box[data-camera-state="error"] .staff-camera-hint { background:#812222; }
.staff-camera-box[data-camera-state="success"] .staff-camera-hint { background:#146448; }
.staff-camera-box[data-camera-state="starting"] .staff-camera-hint { background:#294565; }

/* Recurrent staff camera fix: a black placeholder is not a live preview. */
.staff-camera-box[data-camera-state="idle"] {display:none !important;}
.staff-camera-box[data-camera-state="starting"] {display:flex; align-items:center; justify-content:center; height:110px; background:#edf4fc; color:#153454;}
.staff-camera-box[data-camera-state="starting"]::before {display:none;}
.staff-camera-box[data-camera-state="error"],.staff-camera-box[data-camera-state="success"] {display:flex; align-items:center; justify-content:center; min-height:62px; height:auto; background:transparent; border:0; border-radius:10px;}
.staff-camera-box[data-camera-state="error"]::before,.staff-camera-box[data-camera-state="success"]::before {display:none;}
.staff-camera-box[data-camera-state="error"] .staff-camera-hint,.staff-camera-box[data-camera-state="success"] .staff-camera-hint {position:relative; inset:auto; margin:0; width:100%; padding:12px; border-radius:10px;}
.staff-camera-box[data-camera-state="error"] .staff-camera-hint {background:#fff0f0; color:#921c1c; border:1px solid #f3c4c4;}
.staff-camera-box[data-camera-state="success"] .staff-camera-hint {background:#e8f7f1; color:#08654c; border:1px solid #bee6d5;}
.staff-camera-box[data-camera-state="starting"] .staff-camera-hint {position:relative; inset:auto; margin:0; width:100%; padding:12px; background:none; color:#153454;}
.staff-camera-box.camera-running {display:block;}
.staff-modal .modal-body{overflow-y:auto;}
.staff-modal .modal-body .form-label {font-weight:700;}

/* Correct Bootstrap scrollable modal height when a Razor form wraps the modal body. */
.modal-dialog-scrollable .staff-modal > form{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 3.5rem);overflow:hidden}
.modal-dialog-scrollable .staff-modal > form > .modal-header,.modal-dialog-scrollable .staff-modal > form > .modal-footer{flex-shrink:0}
.modal-dialog-scrollable .staff-modal > form > .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}