/* ════════════════════════════════════════════════════════════════
   Sofazi Worker — Modern Field UI v4.4.1
   واجهة جديدة لتطبيق العمال فقط — بدون تغيير js/api أو منطق الترابط
   ════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --bg: #eef4f6;
  --surface: rgba(255,255,255,.92);
  --surface2: #f4f8fa;
  --border: rgba(15,23,42,.10);
  --text: #0b1828;
  --text2: #46576a;
  --text3: #7c8b9c;
  --primary: #0f766e;
  --primary2: #14b8a6;
  --accent: #0ea5e9;
  --success: #059669;
  --danger: #dc2626;
  --warning: #d97706;
  --purple: #7c3aed;
  --info: #0284c7;

  --wkr-bg: var(--bg);
  --wkr-surface: var(--surface);
  --wkr-surface2: var(--surface2);
  --wkr-border: var(--border);
  --wkr-text: var(--text);
  --wkr-text2: var(--text2);
  --wkr-text3: var(--text3);
  --wkr-primary: var(--primary);
  --wkr-primary2: var(--primary2);
  --wkr-success: var(--success);
  --wkr-danger: var(--danger);
  --wkr-warning: var(--warning);
  --wkr-info: var(--info);
  --wkr-radius: 22px;
  --wkr-radius-sm: 16px;
  --wkr-radius-lg: 28px;
  --wkr-shadow: 0 14px 38px rgba(15,23,42,.08);
  --wkr-shadow-lg: 0 22px 55px rgba(15,23,42,.14);
}

body.wkr-dark {
  color-scheme: dark;
  --bg: #071116;
  --surface: rgba(14,24,31,.92);
  --surface2: rgba(23,38,48,.94);
  --border: rgba(148,163,184,.16);
  --text: #eef7f7;
  --text2: #bfd0d3;
  --text3: #81969d;
  --primary: #14b8a6;
  --primary2: #2dd4bf;
  --accent: #38bdf8;
  --success: #34d399;
  --danger: #fb7185;
  --warning: #fbbf24;
  --purple: #a78bfa;
  --info: #67e8f9;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(20,184,166,.14), transparent 33%),
    radial-gradient(circle at 100% 18%, rgba(14,165,233,.13), transparent 34%),
    linear-gradient(180deg, var(--bg), #f8fbfc 52%, var(--bg)) !important;
  color: var(--text) !important;
  -webkit-tap-highlight-color: transparent;
}
body.wkr-dark {
  background:
    radial-gradient(circle at 18% 0%, rgba(20,184,166,.16), transparent 35%),
    radial-gradient(circle at 100% 18%, rgba(56,189,248,.12), transparent 34%),
    linear-gradient(180deg, #071116, #0b151b 52%, #071116) !important;
}

/* Login */
#wkrLogin {
  min-height: 100svh !important;
  padding: 28px 20px !important;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.40), transparent 30%),
    radial-gradient(circle at bottom left, rgba(14,165,233,.35), transparent 32%),
    linear-gradient(145deg, #061015 0%, #0b2430 48%, #09251f 100%) !important;
  isolation: isolate;
}
#wkrLogin::before,
#wkrLogin::after {
  content: '';
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}
#wkrLogin::before {
  width: 260px;
  height: 260px;
  top: 7%;
  left: -80px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  filter: blur(2px);
}
#wkrLogin::after {
  width: 170px;
  height: 170px;
  right: -50px;
  bottom: 11%;
  border-radius: 42px;
  transform: rotate(18deg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.wkr-login-card {
  max-width: 410px !important;
  border-radius: 32px !important;
  padding: 34px 24px 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.44) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  overflow: hidden;
}
.wkr-login-card::before {
  content: 'تطبيق العمال';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
  font-size: .74rem;
  font-weight: 800;
}
.wkr-logo {
  width: 86px !important;
  height: 86px !important;
  border-radius: 27px !important;
  background: linear-gradient(135deg, #2dd4bf, #0ea5e9 54%, #1d4ed8) !important;
  box-shadow: 0 16px 40px rgba(20,184,166,.34), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.wkr-title {
  font-size: 1.55rem !important;
  letter-spacing: -.02em !important;
}
.wkr-sub {
  color: rgba(255,255,255,.72) !important;
  margin-bottom: 22px !important;
}
.wkr-input {
  height: 52px !important;
  border-radius: 18px !important;
  background: rgba(4,18,25,.44) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.wkr-input:focus {
  border-color: rgba(45,212,191,.86) !important;
  background: rgba(4,18,25,.58) !important;
  box-shadow: 0 0 0 4px rgba(45,212,191,.14) !important;
}
.wkr-btn {
  height: 52px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important;
  box-shadow: 0 16px 34px rgba(14,165,233,.26) !important;
}

/* App shell */
#wkrApp {
  min-height: 100svh !important;
  padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}
.wkr-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  margin: 0 !important;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px !important;
  border: 0 !important;
  border-radius: 0 0 30px 30px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(45,212,191,.24), transparent 42%),
    linear-gradient(135deg, #061015, #0e2933 54%, #0f766e) !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.18) !important;
}
.wkr-header::before {
  content: '';
  position: absolute;
  inset: 8px 10px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity: .9;
}
.wkr-header-inner {
  gap: 12px !important;
  align-items: center !important;
}
.wkr-worker-name {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
}
.wkr-worker-name::before {
  content: 'أهلاً، ';
  font-weight: 600;
  color: rgba(255,255,255,.68);
}
.wkr-worker-phone {
  color: rgba(255,255,255,.66) !important;
  margin-top: 4px !important;
}
#wkrAccountType {
  display: inline-flex !important;
  margin-top: 7px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
}
#wkrNotifBtn,
#wkrDarkBtn,
#pwaHeaderBtn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#wkrNotifBadge {
  top: -4px !important;
  left: -4px !important;
  background: #fb7185 !important;
  border: 2px solid #0e2933 !important;
}
#pwaBanner {
  margin-top: 14px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Bottom navigation */
.wkr-tabs {
  position: fixed !important;
  right: 12px !important;
  left: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  padding: 10px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 18px 54px rgba(15,23,42,.18) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  overflow: visible !important;
}
body.wkr-dark .wkr-tabs {
  background: rgba(10,20,27,.84) !important;
  border-color: rgba(148,163,184,.14) !important;
}
.wkr-tab {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 7px 6px !important;
  border-radius: 21px !important;
  background: transparent !important;
  color: var(--text2) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}
.wkr-tab.active {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(20,184,166,.26) !important;
}

/* Content */
.wkr-content {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 14px 26px !important;
}
.wkr-content::before {
  content: 'لوحة العمل اليومية';
  display: block;
  margin: 4px 3px 14px;
  color: var(--text2);
  font-size: .86rem;
  font-weight: 900;
}

/* Cards */
.task-card,
._wkr-section,
._wkr-stat-mini,
.card {
  border-radius: 24px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: var(--wkr-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
.task-card {
  position: relative;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}
.task-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary2), var(--accent));
  opacity: .9;
}
.task-card:hover {
  transform: none !important;
  box-shadow: var(--wkr-shadow-lg) !important;
}
.task-card-header {
  padding: 16px 17px 15px !important;
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12)) !important;
}
body.wkr-dark .task-card-header {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
}
.task-card-body {
  padding: 15px 17px 17px !important;
}
.task-card-header [style*="font-weight:800"] {
  font-size: 1rem !important;
  color: var(--text) !important;
}
.task-card-header [style*="var(--text3)"] {
  color: var(--text3) !important;
}
.task-status,
.badge {
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
}
.ts-pending { background: rgba(14,165,233,.13) !important; color: var(--accent) !important; }
.ts-working { background: rgba(217,119,6,.13) !important; color: var(--warning) !important; }
.ts-approval { background: rgba(124,58,237,.13) !important; color: var(--purple) !important; }
.ts-install { background: rgba(20,184,166,.13) !important; color: var(--primary) !important; }
.ts-done { background: rgba(5,150,105,.13) !important; color: var(--success) !important; }

.spec-block,
.piece-row,
.task-card-body [style*="background:var(--surface2)"] {
  border-radius: 18px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
}
.spec-label {
  color: var(--text3) !important;
  font-size: .68rem !important;
}
.spec-value {
  color: var(--text) !important;
}
.progress-wrap {
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(15,23,42,.08) !important;
}
.progress-fill {
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--primary2), var(--success)) !important;
}

/* Buttons */
.wkr-content .btn,
.wkr-modal .btn,
.shortage-btn,
button.wkr-btn {
  border-radius: 17px !important;
  min-height: 44px;
  font-weight: 900 !important;
  justify-content: center;
}
.wkr-content .btn-primary,
.wkr-modal .btn-primary {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
  box-shadow: 0 12px 24px rgba(20,184,166,.22) !important;
}
.wkr-content .btn-success,
.wkr-modal .btn-success {
  background: linear-gradient(135deg, #047857, #10b981) !important;
}
.wkr-content .btn-warning,
.wkr-modal .btn-warning {
  background: linear-gradient(135deg, #b45309, #f59e0b) !important;
}
.wkr-content .btn-danger,
.wkr-modal .btn-danger {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
}
.shortage-btn {
  background: rgba(239,68,68,.08) !important;
  border: 1px solid rgba(239,68,68,.28) !important;
}

/* Empty / modal / toast */
.wkr-empty {
  margin-top: 10px;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--wkr-shadow);
}
.wkr-empty-icon {
  filter: drop-shadow(0 10px 20px rgba(15,23,42,.12));
}
.wkr-modal-overlay {
  background: rgba(2,6,23,.58) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.wkr-modal {
  max-width: 560px !important;
  border-radius: 30px 30px 0 0 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 -24px 60px rgba(2,6,23,.22) !important;
}
.wkr-close {
  border-radius: 16px !important;
  background: var(--surface2) !important;
}
#toastContainer {
  bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}
.toast,
#toastContainer > div {
  border-radius: 18px !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.22) !important;
}

/* حسابي / التقارير المولدة من JS */
._wkr-section {
  overflow: hidden !important;
}
._wkr-section-hdr {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
._wkr-section-body {
  background: transparent !important;
}
._wkr-row {
  border-color: var(--border) !important;
}
._wkr-stat-mini {
  padding: 13px 10px !important;
  text-align: center !important;
}
._wkr-stat-val {
  letter-spacing: -.03em;
}

/* Desktop refinement */
@media (min-width: 720px) {
  #wkrApp { padding-bottom: 112px !important; }
  .wkr-header {
    max-width: 900px;
    margin: 14px auto 0 !important;
    border-radius: 30px !important;
  }
  .wkr-content {
    padding-top: 24px !important;
  }
  .task-card-header,
  .task-card-body {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 380px) {
  .wkr-tab { font-size: .72rem !important; min-height: 50px !important; }
  .wkr-tabs { right: 8px !important; left: 8px !important; }
  .wkr-worker-name { font-size: .96rem !important; }
  #wkrNotifBtn, #wkrDarkBtn, #pwaHeaderBtn { width: 38px !important; height: 38px !important; }
}

@media print {
  .wkr-tabs,
  .wkr-header::before,
  .wkr-content::before { display: none !important; }
  body, #wkrApp { background: #fff !important; }
  .task-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}


/* ════════════════════════════════════════════════════════════════
   v4.4.1 — شريط علوي/سفلي جديد + ثبات زر الإشعارات
   ════════════════════════════════════════════════════════════════ */
.wkr-header {
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px !important;
  border-radius: 0 0 24px 24px !important;
  background:
    radial-gradient(circle at 92% -15%, rgba(45,212,191,.35), transparent 38%),
    radial-gradient(circle at 4% 0%, rgba(14,165,233,.24), transparent 34%),
    linear-gradient(135deg, #061015 0%, #0b2830 52%, #075e59 100%) !important;
}
.wkr-header-inner {
  width: 100% !important;
  padding: 10px 10px 10px 12px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(2,6,23,.16) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}
.wkr-worker-name::before { content: 'مرحباً، ' !important; }
.wkr-worker-phone { font-size: .7rem !important; margin-top: 2px !important; }
#wkrAccountType {
  margin-top: 5px !important;
  background: rgba(20,184,166,.16) !important;
  border-color: rgba(45,212,191,.23) !important;
}
#wkrNotifBtn {
  width: auto !important;
  min-width: 72px !important;
  padding: 0 10px !important;
}
#wkrNotifBtn .wkr-notif-text {
  display: inline-block !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.92) !important;
  line-height: 1 !important;
}
#wkrDarkBtn,
#pwaHeaderBtn {
  width: 42px !important;
  min-width: 42px !important;
}

.wkr-tabs {
  right: 14px !important;
  left: 14px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  padding: 8px !important;
  gap: 7px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(7,17,22,.94), rgba(9,32,38,.92)) !important;
  border: 1px solid rgba(45,212,191,.20) !important;
  box-shadow: 0 20px 54px rgba(2,6,23,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.wkr-dark .wkr-tabs {
  background: linear-gradient(180deg, rgba(8,20,27,.95), rgba(7,17,22,.94)) !important;
}
.wkr-tab {
  min-height: 50px !important;
  border-radius: 20px !important;
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.wkr-tab.active {
  color: #052b2a !important;
  background: linear-gradient(135deg, #ffffff, #ccfbf1) !important;
  border-color: rgba(255,255,255,.65) !important;
  box-shadow: 0 12px 26px rgba(20,184,166,.25), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.wkr-tab:active { transform: scale(.97) !important; }

@media (min-width: 720px) {
  .wkr-header { max-width: 920px !important; }
  .wkr-tabs { max-width: 580px !important; }
}
@media (max-width: 380px) {
  #wkrNotifBtn { min-width: 62px !important; padding: 0 8px !important; }
  #wkrNotifBtn .wkr-notif-text { font-size: .6rem !important; }
  .wkr-tab { min-height: 48px !important; font-size: .69rem !important; }
}