/* ══════════════════════════════════════════════════════════════
   الوقت الفعلي — زرّ البصمة فوق، وصفحةُ الفريق، ويومُ الموظّف، والأسبوع، ووقتي
   ══════════════════════════════════════════════════════════════
   ‏ألوانٌ لها معنى واحدٌ في كلِّ مكان: الأخضرُ شغل، والكهرمانيُّ بريك، والرماديُّ
   ‏سكوت، والأزرقُ شغلٌ من غير بصمة، والأحمرُ ما يستحقّ أن يُرى (حركةٌ آليّة، زيادة).
   ‏فمن تعلّمها في الشريط قرأ بها الخطَّ الزمنيّ والأسبوع بلا مفتاح. */
:root {
  --wt-work: var(--success);
  --wt-work-soft: var(--success-soft);
  --wt-break: var(--warning);
  --wt-break-soft: var(--warning-soft);
  --wt-idle: var(--slate-400);
  --wt-idle-soft: color-mix(in srgb, var(--slate-400) 18%, transparent);
  --wt-outside: var(--info);
  --wt-outside-soft: var(--info-soft);
  --wt-flag: var(--danger);
  --wt-flag-soft: var(--danger-soft);
}

/* ── زرّ البصمة في الشريط اللي فوق ── */
.wt-pill-host { position: relative; display: flex; align-items: center; }
.wt-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold);
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wt-pill:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.wt-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt-pill svg { width: 15px; height: 15px; flex: none; }
.wt-pill .wt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wt-idle); flex: none; }
.wt-pill .wt-clock { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.wt-pill .wt-sub { color: var(--text-muted); font-weight: var(--fw-normal); font-size: 12px; }
.wt-pill[data-s="out"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-default)); color: var(--accent); }
.wt-pill[data-s="working"] { background: var(--wt-work-soft); border-color: color-mix(in srgb, var(--wt-work) 35%, transparent); }
.wt-pill[data-s="working"] .wt-dot { background: var(--wt-work); box-shadow: 0 0 0 0 color-mix(in srgb, var(--wt-work) 60%, transparent); animation: wtPulse 2s infinite; }
.wt-pill[data-s="idle"] .wt-dot { background: var(--wt-idle); }
.wt-pill[data-s="break"] { background: var(--wt-break-soft); border-color: color-mix(in srgb, var(--wt-break) 40%, transparent); }
.wt-pill[data-s="break"] .wt-dot { background: var(--wt-break); }
.wt-pill[data-s="break"][data-over="1"] { background: var(--wt-flag-soft); border-color: color-mix(in srgb, var(--wt-flag) 45%, transparent); color: var(--danger-text); }
.wt-pill[data-s="break"][data-over="1"] .wt-dot { background: var(--wt-flag); }
.wt-pill[data-s="done"] { color: var(--text-secondary); }
.wt-pill[data-remind="1"] { animation: wtNudge 1.6s ease-in-out 3; }
@keyframes wtPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wt-work) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes wtNudge { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .wt-pill .wt-dot, .wt-pill[data-remind="1"] { animation: none !important; }
}

/* ‏القائمة تحت الزرار */
.wt-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 14px; z-index: calc(var(--z-topbar) + 5);
}
.wt-menu[hidden] { display: none; }
.wt-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wt-menu-head strong { font-size: 22px; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.wt-menu-head span { color: var(--text-muted); font-size: 12px; }
.wt-menu-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 12px; }
.wt-fact { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 7px 9px; }
.wt-fact b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.wt-fact small { color: var(--text-muted); font-size: 11px; }
.wt-fact[data-tone="bad"] b { color: var(--danger-text); }
.wt-menu-acts { display: grid; gap: 8px; }
.wt-menu-acts .btn { width: 100%; justify-content: center; min-height: 40px; }
.wt-menu-note { margin-top: 10px; color: var(--text-muted); font-size: 11.5px; line-height: 1.7; }
.wt-menu-link { display: block; text-align: center; margin-top: 8px; font-size: 12.5px; color: var(--accent); background: none; border: 0; cursor: pointer; width: 100%; font: inherit; }

@media (max-width: 700px) {
  .wt-pill { padding: 0 10px; gap: 6px; }
  .wt-pill .wt-sub, .wt-pill .wt-label { display: none; }
}

/* ══════════════════ الصفحة ══════════════════ */
.wt-page { display: grid; gap: var(--sp-5); }
.wt-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.wt-weeknav { display: inline-flex; align-items: center; gap: 6px; }
.wt-weeknav .wt-range { min-width: 150px; text-align: center; font-weight: var(--fw-semibold); font-size: 13px; }

/* ‏الأرقام فوق: كم شغّال وكم في بريك وكم ساكت وكم مش داخل */
.wt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.wt-kpi {
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 14px 16px; display: grid; gap: 4px; position: relative; overflow: hidden;
}
.wt-kpi::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--wt-idle); }
.wt-kpi[data-k="working"]::before { background: var(--wt-work); }
.wt-kpi[data-k="break"]::before { background: var(--wt-break); }
.wt-kpi[data-k="idle"]::before { background: var(--wt-idle); }
.wt-kpi[data-k="out"]::before { background: var(--border-strong); }
.wt-kpi[data-k="total"]::before { background: var(--accent); }
.wt-kpi span { color: var(--text-muted); font-size: 12px; }
.wt-kpi b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ‏كارتُ الموظّف */
.wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.wt-card {
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 14px 16px 12px; display: grid; gap: 12px; cursor: pointer; text-align: start;
  font: inherit; color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.wt-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.wt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt-card[data-s="working"] { border-color: color-mix(in srgb, var(--wt-work) 30%, var(--border-subtle)); }
.wt-card[data-s="idle"][data-alarm="1"] { border-color: color-mix(in srgb, var(--wt-flag) 45%, var(--border-subtle)); }
.wt-card-top { display: flex; align-items: center; gap: 10px; }
.wt-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 14px;
  background: var(--accent-soft); color: var(--accent);
}
.wt-who { min-width: 0; flex: 1; }
.wt-who b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-who small { color: var(--text-muted); font-size: 12px; }
.wt-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: var(--fw-semibold);
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.wt-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--wt-idle); }
.wt-status[data-s="working"] { background: var(--wt-work-soft); color: var(--success-text); border-color: transparent; }
.wt-status[data-s="working"] i { background: var(--wt-work); }
.wt-status[data-s="break"] { background: var(--wt-break-soft); color: var(--warning-text); border-color: transparent; }
.wt-status[data-s="break"] i { background: var(--wt-break); }
.wt-status[data-s="idle"] i { background: var(--wt-idle); }
.wt-status[data-s="idle"][data-alarm="1"] { background: var(--wt-flag-soft); color: var(--danger-text); border-color: transparent; }
.wt-status[data-s="idle"][data-alarm="1"] i { background: var(--wt-flag); }
.wt-status[data-s="leave"], .wt-status[data-s="off"] { background: var(--info-soft); color: var(--info-text); border-color: transparent; }

.wt-card-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
/* ‏ومن لم يبدأ يومَه بعد (أو في إجازة) كارتٌ هادئ: سطرٌ يقول حالَه، بلا شريطٍ فارغ ولا صورة */
.wt-card[data-quiet="1"] { gap: 8px; }
.wt-quiet { color: var(--text-muted); font-size: 13px; }
.wt-card[data-quiet="1"] .wt-avatar { background: var(--surface-2); color: var(--text-muted); }
.wt-big { display: grid; gap: 2px; }
.wt-big b { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
.wt-big small { color: var(--text-muted); font-size: 12px; }
.wt-thumb {
  width: 112px; height: 63px; border-radius: 10px; flex: none; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  display: grid; place-items: center; color: var(--text-placeholder);
}
.wt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-thumb svg { width: 18px; height: 18px; }

/* ‏شريطُ اليوم */
.wt-bar { position: relative; height: 10px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.wt-bar span { position: absolute; inset-block: 0; min-width: 2px; }
.wt-bar [data-k="work"] { background: var(--wt-work); }
.wt-bar [data-k="break"] { background: var(--wt-break); }
.wt-bar [data-k="idle"] { background: var(--wt-idle); opacity: .55; }
.wt-bar [data-k="outside"] { background: var(--wt-outside); }
.wt-bar [data-k="robotic"] { background: var(--wt-flag); }
/* ‏والصباحُ على اليمين كالقراءة: أوّلُ علامةٍ يمينا */
.wt-bar-ticks { display: flex; justify-content: space-between; color: var(--text-placeholder); font-size: 10.5px; margin-top: 3px; }

.wt-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.wt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-full); font-size: 11.5px;
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.wt-chip svg { width: 12px; height: 12px; }
.wt-chip[data-tone="bad"] { background: var(--wt-flag-soft); color: var(--danger-text); border-color: transparent; }
.wt-chip[data-tone="warn"] { background: var(--wt-break-soft); color: var(--warning-text); border-color: transparent; }
.wt-chip[data-tone="info"] { background: var(--wt-outside-soft); color: var(--info-text); border-color: transparent; }

.wt-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: 12px; }
.wt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wt-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ══════════════════ يومُ الموظّف ══════════════════ */
.wt-day { display: grid; gap: var(--sp-5); }
.wt-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.wt-day-title { display: flex; align-items: center; gap: 12px; }
.wt-day-title h3 { font-size: 18px; margin: 0; }
.wt-day-nav { display: inline-flex; align-items: center; gap: 6px; }
.wt-day-nav .wt-range { min-width: 150px; text-align: center; font-weight: var(--fw-semibold); font-size: 13.5px; }
.wt-panel { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px; }
.wt-panel h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.wt-panel h4 svg { width: 16px; height: 16px; color: var(--text-muted); }

/* ‏الخطُّ الزمنيُّ الكبير */
.wt-tl { position: relative; padding-top: 22px; }
.wt-tl-track { position: relative; height: 34px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.wt-tl-track span { position: absolute; inset-block: 0; min-width: 2px; }
.wt-tl-track [data-k="work"] { background: var(--wt-work); }
.wt-tl-track [data-k="break"] { background: var(--wt-break); }
.wt-tl-track [data-k="idle"] { background: var(--wt-idle); opacity: .5; }
.wt-tl-track [data-k="outside"] { background: var(--wt-outside); }
.wt-tl-track [data-k="robotic"] { background: repeating-linear-gradient(45deg, var(--wt-flag) 0 6px, color-mix(in srgb, var(--wt-flag) 60%, transparent) 6px 12px); }
.wt-tl-hours { position: absolute; inset-inline: 0; top: 0; height: 18px; }
.wt-tl-hours span { position: absolute; transform: translateX(50%); font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-tl-shots { position: relative; height: 14px; margin-top: 4px; }
.wt-tl-shots button {
  position: absolute; transform: translateX(50%); top: 0;
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--surface-1); background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.wt-tl-shots button:hover, .wt-tl-shots button:focus-visible { transform: translateX(50%) scale(1.35); outline: none; }

.wt-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.wt-total { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; }
.wt-total small { display: block; color: var(--text-muted); font-size: 11.5px; margin-bottom: 2px; }
.wt-total b { font-size: 18px; font-variant-numeric: tabular-nums; }
.wt-total[data-tone="good"] b { color: var(--success-text); }
.wt-total[data-tone="bad"] b { color: var(--danger-text); }
.wt-total[data-tone="warn"] b { color: var(--warning-text); }

.wt-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) { .wt-two { grid-template-columns: 1fr; } }

/* ‏الصور */
.wt-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wt-shot {
  display: grid; gap: 4px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: start; font: inherit; color: inherit;
}
.wt-shot-img { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-subtle); }
.wt-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-shot small { color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wt-shot:focus-visible .wt-shot-img { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ‏توزيعُ الوقت على المواقع */
.wt-sites { display: grid; gap: 10px; }
.wt-site { display: grid; gap: 4px; }
.wt-site-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.wt-site-row span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wt-site-bar { height: 6px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.wt-site-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* ‏البصمات والعلامات */
.wt-list { display: grid; gap: 2px; }
.wt-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-hairline, var(--border-subtle)); font-size: 13px; }
.wt-row:last-child { border-bottom: 0; }
.wt-row time { font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 64px; white-space: nowrap; }
.wt-row .wt-row-text { flex: 1; min-width: 0; }
.wt-row .wt-row-text small { display: block; color: var(--text-muted); font-size: 11.5px; }
.wt-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
.wt-kind i { width: 8px; height: 8px; border-radius: 50%; }
.wt-kind[data-k="in"] i, .wt-kind[data-k="back"] i { background: var(--wt-work); }
.wt-kind[data-k="break"] i { background: var(--wt-break); }
.wt-kind[data-k="out"] i { background: var(--text-muted); }
.wt-src { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-muted); }
.wt-src[data-src="auto"] { background: var(--info-soft); color: var(--info-text); }
.wt-src[data-src="owner"] { background: var(--accent-soft); color: var(--accent); }
.wt-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 8px; display: grid; place-items: center; }
.wt-x:hover { background: var(--danger-soft); color: var(--danger-text); }
.wt-x svg { width: 15px; height: 15px; }
/* ‏والتصحيحُ في عمودٍ ضيّق: النوعُ والساعةُ سطر، والسببُ سطر، والزرُّ سطر */
.wt-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.wt-add .wt-add-note, .wt-add .btn { grid-column: 1 / -1; }
.wt-add .btn { justify-content: center; }
.wt-flag { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-hairline, var(--border-subtle)); font-size: 13px; }
.wt-flag:last-child { border-bottom: 0; }
.wt-flag svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--danger); }
.wt-flag[data-k="late"] svg, .wt-flag[data-k="long_break"] svg, .wt-flag[data-k="over_break"] svg { color: var(--warning); }
.wt-flag[data-k="outside"] svg { color: var(--info); }
.wt-flag time { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; margin-inline-start: auto; white-space: nowrap; }
.wt-empty { color: var(--text-muted); font-size: 13px; padding: 6px 2px; }

/* ‏عرضُ الصورة كبيرة */
.wt-lightbox {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10);
  background: color-mix(in srgb, #000 82%, transparent);
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 18px;
}
.wt-lightbox[hidden] { display: none; }
.wt-lb-top { display: flex; align-items: center; justify-content: space-between; color: #fff; gap: 12px; }
.wt-lb-top b { font-size: 14px; }
.wt-lb-img { display: grid; place-items: center; min-height: 0; }
.wt-lb-img img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; }
.wt-lb-bot { display: flex; justify-content: center; gap: 10px; }
.wt-lightbox .btn { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; }
.wt-lightbox .btn:hover { background: rgba(255,255,255,.22); }

/* ══════════════════ الأسبوع ══════════════════ */
.wt-week { overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.wt-week table { width: 100%; min-width: 860px; border-collapse: collapse; }
.wt-week th, .wt-week td { padding: 10px 12px; border-bottom: 1px solid var(--border-hairline, var(--border-subtle)); text-align: center; font-size: 13px; }
.wt-week th { background: var(--surface-3); font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-secondary); position: sticky; top: 0; z-index: 1; }
.wt-week th:first-child, .wt-week td:first-child { text-align: start; position: sticky; inset-inline-start: 0; background: var(--surface-1); z-index: 2; }
.wt-week th:first-child { background: var(--surface-3); z-index: 3; }
.wt-week th small { display: block; color: var(--text-muted); font-weight: var(--fw-normal); font-size: 11px; }
.wt-week tbody tr:hover td { background: var(--bg-card-hover, var(--surface-2)); }
.wt-week tr:last-child td { border-bottom: 0; }
.wt-cell {
  display: grid; gap: 4px; justify-items: center; min-width: 74px; margin: auto;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit; padding: 2px 4px; border-radius: 8px;
}
.wt-cell:hover, .wt-cell:focus-visible { background: var(--surface-2); outline: none; }
.wt-cell b { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.wt-cell .wt-mini { width: 56px; height: 5px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.wt-cell .wt-mini i { display: block; height: 100%; background: var(--wt-work); border-radius: inherit; }
.wt-cell .wt-cell-flags { display: inline-flex; gap: 3px; }
.wt-cell .wt-cell-flags i { width: 6px; height: 6px; border-radius: 50%; background: var(--wt-flag); }
.wt-cell[data-zero="1"] b { color: var(--text-placeholder); font-weight: var(--fw-normal); }
.wt-cell[data-today="1"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.wt-week td.wt-total-col b { font-size: 14.5px; }
.wt-week td.wt-total-col small { display: block; color: var(--text-muted); font-size: 11px; }

/* ══════════════════ وقتي ══════════════════ */
.wt-me { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .wt-me { grid-template-columns: 1fr; } }
.wt-me-hero { display: grid; gap: 14px; }
.wt-me-hero .wt-big b { font-size: 40px; }
.wt-me-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-me-acts .btn { min-height: 42px; padding-inline: 18px; }
.wt-weekbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 150px; padding-top: 8px; }
.wt-wb { display: grid; gap: 6px; justify-items: center; height: 100%; grid-template-rows: 1fr auto auto; }
.wt-wb-col { width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: var(--surface-2); position: relative; align-self: end; height: 100%; overflow: hidden; }
.wt-wb-col i { position: absolute; inset-inline: 0; bottom: 0; background: var(--wt-work); border-radius: inherit; }
.wt-wb[data-today="1"] .wt-wb-col i { background: var(--accent); }
.wt-wb[data-future="1"] .wt-wb-col { opacity: .45; }
.wt-wb b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wt-wb small { color: var(--text-muted); font-size: 11px; }
.wt-tracked { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wt-tracked li { display: flex; gap: 10px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.wt-tracked li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }

/* ‏الإعدادات */
.wt-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.wt-settings label { display: grid; gap: 4px; font-size: 13px; }
.wt-settings label small { color: var(--text-muted); font-size: 11.5px; }

/* ── ‏البوّابة: لا شغلَ قبل البصمة ── */
html.wt-gated { overflow: hidden; }
.wt-gate {
  position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 20px;
  background: var(--surface-0);
}
.wt-gate-card {
  width: min(100%, 520px); display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 36px 32px 28px; border-radius: 24px; background: var(--surface-1); border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.wt-gate-mark { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--surface-0); border: 1px solid var(--border-default); }
.wt-gate-mark img { width: 44px; height: 44px; }
.wt-gate-date { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .03em; }
.wt-gate-card h2 { margin: 0; font-size: 26px; line-height: 1.3; color: var(--text-strong); }
.wt-gate-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.8; }
.wt-gate-card p b { color: var(--warning-text); }
.wt-gate-btn {
  width: 100%; min-height: 58px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 19px; font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent-solid); color: var(--text-on-accent);
}
.wt-gate-btn svg { width: 22px; height: 22px; }
.wt-gate-btn:hover { background: var(--accent-solid-hover); }
.wt-gate-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px; }
.wt-gate-btn:disabled { opacity: .6; cursor: default; }
.wt-gate-out { border: 0; background: transparent; color: var(--text-strong); font: inherit; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer; padding: 8px 12px; border-radius: 10px; }
.wt-gate-out:hover { background: var(--surface-3); }
@media (max-width: 640px) { .wt-gate-card { padding: 28px 20px 22px; } .wt-gate-card h2 { font-size: 22px; } }