/* IE Attendance — styles (mobile first, RTL aware via logical properties) */
:root {
  --blue: #1F4E9C; --blue-dark: #163a75; --blue-light: #e8eef8;
  --red: #E8232A; --red-light: #fdeaea;
  --green: #1a8f4a; --green-light: #e6f5ec;
  --amber: #b26a00; --amber-light: #fff3df;
  --grey: #6b7280; --grey-light: #f3f4f6; --border: #e5e7eb; --text: #111827;
  --radius: 14px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; background: var(--grey-light); color: var(--text); font-family: var(--font); font-size: 16px; -webkit-text-size-adjust: 100%; }
html[lang="ur"] body { line-height: 1.9; }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
a { color: var(--blue); }
[hidden] { display: none !important; }

.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 28px; background: #fff; }
.splash img { width: 240px; max-width: 70%; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--blue-light); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Layout */
.page { max-width: 720px; margin: 0 auto; padding: 12px 14px 90px; }
.page.wide { max-width: 1100px; }
.topbar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--border); padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; }
.topbar img { height: 34px; }
.topbar .title { font-weight: 700; color: var(--blue); flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v1.2.1: one line (Ahmed 4-Sep) */
.topbar .net { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--green-light); color: var(--green); }
.topbar .net.off { background: var(--red-light); color: var(--red); }
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); display: flex; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.bottomnav button { flex: 1; border: 0; background: none; padding: 8px 2px 6px; color: var(--grey); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bottomnav button .ic { font-size: 20px; line-height: 1; }
.bottomnav button.active { color: var(--blue); font-weight: 700; }
.bottomnav button .badge { position: absolute; margin-inline-start: 22px; margin-top: -4px; background: var(--red); color: #fff; font-size: 10px; border-radius: 999px; padding: 1px 5px; }

/* Cards & typography */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h2 { margin: 0 0 10px; font-size: 17px; color: var(--blue); }
.card h3 { margin: 14px 0 6px; font-size: 15px; }
h1 { font-size: 22px; margin: 6px 0 14px; color: var(--blue); }
.muted { color: var(--grey); font-size: 13px; }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 480px) { .grid3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.stat { background: var(--blue-light); border-radius: 10px; padding: 10px; text-align: center; }
.stat .v { font-size: 20px; font-weight: 700; color: var(--blue); }
.stat .l { font-size: 12px; color: var(--grey); }
.stat.warn { background: var(--amber-light); } .stat.warn .v { color: var(--amber); }
.stat.bad { background: var(--red-light); } .stat.bad .v { color: var(--red); }
.stat.good { background: var(--green-light); } .stat.good .v { color: var(--green); }

/* Forms */
label { display: block; font-size: 13px; color: var(--grey); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time], input[type=month], input[type=file], input[type=tel], select, textarea {
  width: 100%; min-width: 0; max-width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
}
input[type=date], input[type=time], input[type=month] { -webkit-appearance: none; appearance: none; min-height: 44px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue-light); border-color: var(--blue); }
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; color: var(--text); }
.check input { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 13px; background: #fff; cursor: pointer; }
.chip.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 11px 16px; background: var(--blue); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: var(--blue-light); color: var(--blue); }
.btn.danger { background: var(--red); }
.btn.success { background: var(--green); }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--border); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.big { padding: 22px; font-size: 22px; border-radius: 18px; width: 100%; }
.btn.big.in { background: var(--green); }
.btn.big.out { background: var(--red); }

/* Alerts / badges */
.alert { padding: 10px 12px; border-radius: 10px; font-size: 14px; margin: 8px 0; }
.alert.info { background: var(--blue-light); color: var(--blue-dark); }
.alert.ok { background: var(--green-light); color: var(--green); }
.alert.warn { background: var(--amber-light); color: var(--amber); }
.alert.err { background: var(--red-light); color: var(--red); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--grey-light); color: var(--grey); }
.badge.pending { background: var(--amber-light); color: var(--amber); }
.badge.approved, .badge.present, .badge.working { background: var(--green-light); color: var(--green); }
.badge.rejected, .badge.absent { background: var(--red-light); color: var(--red); }
.badge.leave, .badge.leave_pending, .badge.holiday { background: var(--blue-light); color: var(--blue); }
.badge.incomplete { background: var(--amber-light); color: var(--amber); }
/* v1.4.0 — dashboard group badges. The badge on a row and the tile above it now use the same
   group, so a red "Absent" can never appear under a "0 Absent" counter again (BUG-14). */
.badge.g_on_site { background: var(--green-light); color: var(--green); }
.badge.g_finished { background: var(--green-light); color: var(--green); }
.badge.g_expected { background: var(--grey-light); color: var(--grey); }
.badge.g_missing_out { background: var(--amber-light); color: var(--amber); }
.badge.g_leave, .badge.g_off_duty { background: var(--blue-light); color: var(--blue); }
.badge.g_absent { background: var(--red-light); color: var(--red); }
.badge.g_not_tracked { background: var(--grey-light); color: var(--grey); }
.badge.scheduled { background: var(--grey-light); color: var(--grey); }

/* v1.4.2 (BUG-12) — iqama alerts. An EXPIRED permit blinks: it is the one state where somebody is
   working without the right to, and it must not be possible to scroll past it. Everything else is
   static, so the blinking never becomes background noise that the eye learns to ignore. */
.badge.iq-expired   { background: var(--red); color: #fff; animation: ie-blink 1.1s steps(1, end) infinite; }
.badge.iq-expiring  { background: var(--amber-light); color: var(--amber); }
.badge.iq-noexpiry  { background: var(--red-light); color: var(--red); }
@keyframes ie-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .35; } }
/* Anyone who has asked their phone to stop animating gets a solid red badge instead. */
@media (prefers-reduced-motion: reduce) {
  .badge.iq-expired { animation: none; box-shadow: 0 0 0 2px var(--red-light); }
}

/* v1.4.3 (CR-113) — approvals by type. Five kinds of request arrive in one queue and every one
   of them used to wear the same grey badge, so a manager had to read each card to learn what he
   was being asked for. Each type now has a colour, carried by the badge, by the chip that filters
   for it and by a stripe down the edge of the card, so the shape of the queue is visible before
   a word is read. The stripe uses a logical border so it sits on the correct side in Arabic. */
.badge.ap-overtime, .chip.ap-overtime.on { background: var(--amber);      color: #fff; }
.badge.ap-offsite,  .chip.ap-offsite.on  { background: var(--red);        color: #fff; }
.badge.ap-leave,    .chip.ap-leave.on    { background: var(--blue);       color: #fff; }
.badge.ap-cashout,  .chip.ap-cashout.on  { background: var(--green);      color: #fff; }
.badge.ap-override, .chip.ap-override.on { background: var(--grey);       color: #fff; }
.chip.ap-overtime { color: var(--amber); } .chip.ap-offsite { color: var(--red); }
.chip.ap-leave    { color: var(--blue);  } .chip.ap-cashout { color: var(--green); }
.chip.ap-override { color: var(--grey);  }
.chip.ap-overtime.on, .chip.ap-offsite.on, .chip.ap-leave.on,
.chip.ap-cashout.on, .chip.ap-override.on { border-color: transparent; }

.apcard { border-inline-start: 4px solid var(--border); }
.apcard.ap-overtime { border-inline-start-color: var(--amber); }
.apcard.ap-offsite  { border-inline-start-color: var(--red); }
.apcard.ap-leave    { border-inline-start-color: var(--blue); }
.apcard.ap-cashout  { border-inline-start-color: var(--green); }
.apcard.ap-override { border-inline-start-color: var(--grey); }

/* Lists & tables */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 10px; } /* v1.2.2: buttons wrap below the name on narrow phones */
.list li:last-child { border-bottom: 0; }
.list .main { flex: 1 1 180px; min-width: 0; }
.list .ttl { font-weight: 600; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 8px 8px; border-bottom: 1px solid var(--border); text-align: start; white-space: nowrap; }
th { background: var(--blue-light); color: var(--blue-dark); font-weight: 600; position: sticky; top: 0; }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: var(--grey-light); }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.tabs button.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Home */
.hero { text-align: center; padding: 22px 16px; }
.hero .clock { font-size: 40px; font-weight: 700; color: var(--blue); letter-spacing: 1px; }
.hero .date { color: var(--grey); margin-bottom: 8px; }
.hero .state { font-size: 17px; font-weight: 600; margin: 10px 0; }
.gps { font-size: 13px; color: var(--grey); margin: 10px 0 14px; min-height: 18px; }
.gps.ok { color: var(--green); } .gps.warn { color: var(--amber); } .gps.err { color: var(--red); }

/* Login */
.login { max-width: 420px; margin: 0 auto; padding: 30px 18px; }
.login img { width: 260px; max-width: 80%; display: block; margin: 16px auto 26px; }
.langbar { display: flex; justify-content: center; gap: 6px; margin: 14px 0; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .modal-bg { align-items: center; } }
.modal { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .modal { border-radius: 18px; } }
.modal h2 { margin-top: 0; color: var(--blue); }

/* Toast */
.toast { position: fixed; bottom: 80px; left: 16px; right: 16px; margin: 0 auto; max-width: 480px; background: #111827; color: #fff; padding: 12px 16px; border-radius: 12px; z-index: 100; font-size: 14px; box-shadow: var(--shadow); text-align: center; }
.toast.err { background: var(--red); } .toast.ok { background: var(--green); }

/* Print */
.printhead { display: none; }
.sig { display: none; }
@media print {
  body { background: #fff; }
  .topbar, .bottomnav, .noprint, .toast { display: none !important; }
  .page { max-width: none; padding: 0; }
  .card { box-shadow: none; padding: 0; }
  .printhead { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--blue); padding-bottom: 8px; margin-bottom: 12px; }
  .printhead img { height: 44px; }
  .printhead .t { font-size: 18px; font-weight: 700; color: var(--blue); }
  table { font-size: 11px; } th, td { padding: 4px 6px; white-space: normal; }
  th { position: static; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sig { display: flex !important; justify-content: space-between; margin-top: 40px; }
  .sig div { width: 40%; border-top: 1px solid #000; padding-top: 6px; font-size: 12px; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* v1.1 additions */
.topbar .bell { position: relative; border: 0; background: none; font-size: 20px; cursor: pointer; padding: 4px 6px; }
.topbar .bellbadge { position: absolute; top: -2px; inset-inline-end: -4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }
.unreadrow .ttl { font-weight: 700; }

/* ===== v1.3 ===== */
/* CR-45: close button on every modal */
.modal { position: relative; }
.modal-x { position: absolute; top: 8px; inset-inline-end: 8px; border: 0; background: var(--border); border-radius: 999px; width: 30px; height: 30px; font-size: 14px; cursor: pointer; color: var(--grey); z-index: 2; }
/* CR-59: printable employee ID card (85.6 × 54 mm, standard card size) */
.idcard-print { display: none; }
body.printing-idcard .idcard-print { display: block; }
@media print {
  body.printing-idcard #app, body.printing-idcard .toast, body.printing-idcard .modal-bg { display: none !important; }
  body.printing-idcard .idcard-print { display: flex; justify-content: center; padding-top: 20mm; }
}
.idcard { width: 85.6mm; height: 54mm; border: 1px solid #999; border-radius: 3mm; overflow: hidden; display: flex; flex-direction: column; font-family: inherit; background: #fff; }
.idc-head { display: flex; align-items: center; gap: 3mm; padding: 2mm 3mm; border-bottom: 2px solid var(--blue); }
.idc-head img { height: 9mm; }
.idc-co { font-size: 8pt; font-weight: 700; color: var(--blue); line-height: 1.15; }
.idc-co span { font-size: 5.5pt; color: var(--red); font-weight: 400; letter-spacing: 0.5px; }
.idc-body { flex: 1; display: flex; gap: 3mm; padding: 2mm 3mm; align-items: center; }
.idc-photo img, .idc-nophoto { width: 20mm; height: 25mm; object-fit: cover; border-radius: 1.5mm; border: 1px solid #ccc; }
.idc-nophoto { display: flex; align-items: center; justify-content: center; font-size: 24pt; background: #f0f2f5; }
.idc-info { flex: 1; min-width: 0; }
.idc-name { font-size: 10pt; font-weight: 700; }
.idc-name-ar { font-size: 9pt; direction: rtl; }
.idc-line { font-size: 7.5pt; margin-top: 1mm; }
.idc-line.small { font-size: 6.5pt; color: #666; }
.idc-foot { font-size: 5.5pt; text-align: center; color: #666; padding: 1mm; border-top: 1px solid #ddd; }

/* v1.4.5 (CR-127) — leaving reason at a glance. The left-staff list is read to answer one
   question: can this person come back? Terminated and Duplicated are the two that cannot be
   undone on a whim, so they are the two that carry weight; Duplicated is struck through because
   it is not a person who left, it is a record that should never have existed (CR-126). */
.lv { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.lv-terminated { background: var(--red-light);   color: var(--red); }
.lv-resign     { background: var(--blue-light);  color: var(--blue); }
.lv-duplicated { background: var(--grey-light);  color: var(--grey); text-decoration: line-through; }
.lv-test       { background: var(--grey-light);  color: var(--grey); font-style: italic; }
.lv-other      { background: var(--grey-light);  color: var(--grey); }

/* CR-104 — sortable columns. The arrow shows only on the column actually in use, so a table
   with no arrow is a table in its natural order rather than one sorted invisibly. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--blue); }
th.sortable::after { content: ' \2195'; opacity: .25; font-size: 11px; }
th.sortable.asc::after  { content: ' \2191'; opacity: 1; color: var(--blue); }
th.sortable.desc::after { content: ' \2193'; opacity: 1; color: var(--blue); }

/* ===== v1.4.14 ===== */
/* CR-105: the red "needs your attention" chip — hidden entirely when there is nothing to do */
.topbar .attnchip { border: 0; background: var(--red); color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 10px; cursor: pointer; margin-inline-end: 4px; }
/* CR-110: announcement cards by kind */
.card.ann-important { border-inline-start: 4px solid var(--red); }
.card.ann-reminder { border-inline-start: 4px solid #d97706; }
.card.ann-tip { border-inline-start: 4px solid #0e7490; }
.card.ann-announcement { border-inline-start: 4px solid var(--blue, #1e4fa0); }