/* Smart HR Web - نفس ألوان البرنامج الديسك توب (Ui.vb - الثيم الفاتح) */
:root {
  --brand: #4f46e5; --brand-dark: #4338ca; --side: #1e1b4b; --side-hover: #37308c; --side-active: #4f46e5;
  --page: #f4f6fb; --card: #ffffff; --border: #e2e6f0; --text: #1e293b; --muted: #64748b;
  --green: #10b981; --red: #ef4444; --amber: #f59e0b;
  --hero1: #312e81; --hero2: #7c3aed;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 14px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #f8fafc; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.field { margin-bottom: 14px; }
.field label { display: block; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.input {
  width: 100%; height: 40px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font: 15px "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--text); background: #fff; outline: none; transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.input.ltr { direction: ltr; text-align: left; }
.err { color: var(--red); font-size: 13.5px; min-height: 22px; }
.ok-text { color: var(--green); font-size: 13.5px; }
.muted { color: var(--muted); }

/* ---------- صفحة الدخول / الإعداد ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth {
  width: 820px; max-width: 100%; min-height: 480px; display: flex; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(30,27,75,.18); border: 1px solid var(--border);
}
.hero {
  width: 380px; flex: 0 0 380px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(150deg, var(--hero1), var(--hero2)); padding: 30px 24px; position: relative;
}
.hero .logo { width: 104px; height: 104px; border-radius: 28px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 42px; font-weight: 700; }
.hero h2 { margin: 18px 0 4px; font-size: 28px; }
.hero .t1b { color: #ddd6fe; font-weight: 700; font-size: 15px; }
.hero .t2 { color: #ddd6fe; font-size: 14px; margin-top: 14px; line-height: 1.8; }
.hero .ver { position: absolute; bottom: 10px; inset-inline-start: 14px; color: #ddd6fe; font-size: 12px; direction: ltr; }
.auth-form { flex: 1; padding: 60px 50px 20px; display: flex; flex-direction: column; min-width: 0; }
.auth-form h1 { margin: 0; font-size: 27px; }
.auth-form .sub { color: var(--muted); margin: 6px 0 28px; font-size: 15px; }
.auth-form .btn.primary { width: 100%; height: 44px; font-size: 16px; margin-top: 6px; }
.auth-links { margin-top: auto; padding-top: 20px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; }
.banner { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.6; }
.banner.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.banner.bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.banner.info { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) {
  .auth { flex-direction: column; min-height: 0; }
  .hero { width: auto; flex: none; padding: 26px 16px 34px; }
  .hero .logo { width: 70px; height: 70px; font-size: 28px; border-radius: 20px; }
  .hero h2 { font-size: 22px; margin-top: 10px; }
  .hero .t2 { display: none; }
  .auth-form { padding: 26px 20px 16px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---------- البرنامج ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 270px; flex: 0 0 270px; background: var(--side); color: #e0e7ff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-head { padding: 18px 18px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-logo { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), #7c3aed); display: grid; place-items: center; font-weight: 700; color: #fff; }
.sb-title { font-weight: 700; font-size: 17px; color: #fff; }
.sb-sub { font-size: 12px; color: #a5b4fc; margin-top: 2px; }
.nav { padding: 10px 8px 24px; }
.nav-home, .nav-group > button {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #e0e7ff; text-align: start;
  font: 700 14.5px "Segoe UI", Tahoma, Arial, sans-serif; padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.nav-home:hover, .nav-group > button:hover { background: var(--side-hover); }
.nav-home.active { background: var(--side-active); color: #fff; }
.nav-group > button .chev { margin-inline-start: auto; transition: transform .15s; font-size: 11px; opacity: .7; }
.nav-group.open > button .chev { transform: rotate(90deg); }
[dir="rtl"] .nav-group > button .chev { transform: scaleX(-1); }
[dir="rtl"] .nav-group.open > button .chev { transform: rotate(90deg); }
.nav-items { display: none; padding: 2px 0 6px; }
.nav-group.open .nav-items { display: block; }
.nav-items a {
  display: flex; align-items: center; gap: 8px; color: #c7d2fe; padding: 7px 12px; padding-inline-start: 38px; border-radius: 8px; font-size: 13.5px;
}
.nav-items a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.nav-items a.active { background: var(--side-active); color: #fff; }
.soon { margin-inline-start: auto; font-size: 10.5px; background: rgba(255,255,255,.1); color: #a5b4fc; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: 0 0 18px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 60px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 20px;
  position: sticky; top: 0; z-index: 5;
}
.topbar .company { font-weight: 700; font-size: 16px; }
.topbar .branch { color: var(--muted); font-size: 13px; }
.topbar .spacer { flex: 1; }
.userchip { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #eef2ff; color: var(--brand); display: grid; place-items: center; font-weight: 700; }
.menu-btn { display: none; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--text); }
.content { padding: 22px; flex: 1; }
.page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.card .k { color: var(--muted); font-size: 13px; font-weight: 700; }
.card .v { font-size: 24px; font-weight: 700; margin-top: 6px; }
.card .s { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-top: 18px; }
.panel h3 { margin: 0 0 12px; font-size: 16px; }
.empty { text-align: center; padding: 50px 20px; }
.empty .big { font-size: 46px; }
.empty h2 { margin: 10px 0 6px; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { border-bottom: 1px solid var(--border); padding: 9px 10px; text-align: start; font-size: 13.5px; }
.tbl th { color: var(--muted); font-weight: 700; background: #f8fafc; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.pill.green { background: #d1fae5; color: #065f46; }
.pill.amber { background: #fef3c7; color: #92400e; }
.pill.red { background: #fee2e2; color: #991b1b; }
.scrim { display: none; }
@media (max-width: 900px) {
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30; transform: translateX(100%); transition: transform .2s; }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
  .menu-btn { display: block; }
  .topbar { padding: 0 12px; }
  .topbar .branch, .userchip .uname { display: none; }
  .content { padding: 16px; }
  .tbl-wrap { overflow-x: auto; }
}

/* ---------- الشاشات العامة ---------- */
.scr-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.scr-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; margin-top: 10px; }
.scr-bar .spacer { flex: 1; }
.scr-search { width: 220px; }
.scr-f { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.scr-f .input { height: 36px; min-width: 130px; }
.scr-chk { display: flex; flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.scr-chk input { width: 16px; height: 16px; }
.scr-bar .btn { height: 36px; }
.scr-grid { max-height: calc(100vh - 260px); overflow: auto; padding: 0; }
.scr-grid .tbl th { position: sticky; top: 0; z-index: 1; cursor: pointer; white-space: nowrap; }
.scr-grid .tbl tbody tr:hover { background: #f5f3ff; }
.scr-grid .tbl tr.sel { background: #eef2ff; }
.modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal { background: #fff; border-radius: 14px; width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 16px; }
.modal-b { padding: 16px 18px; overflow: auto; }
.modal-f { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
.scr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.scr-form .field { margin: 0; }
.scr-form .field.wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .scr-form { grid-template-columns: 1fr; } .scr-search { width: 100%; } }

.scr-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.scr-acts .btn { height: 34px; }
.scr-grid .tbl tr.cur { background: #e0e7ff; box-shadow: inset 3px 0 0 var(--brand); }
.act-log { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px; min-height: 90px; max-height: 220px; overflow: auto; margin: 0; font: 12.5px Consolas, monospace; white-space: pre-wrap; direction: rtl; text-align: right; }
.act-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.chk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; max-height: 50vh; overflow: auto; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.tabs button { border: 0; background: transparent; padding: 9px 14px; font: 700 13.5px "Segoe UI", Tahoma, Arial, sans-serif; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- ادارة الحضور ---------- */
.att-bar .scr-f .input { min-width: 0; }
.att-purple { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.att-purple-o { color: #7c3aed; border-color: #7c3aed; }
.att-grid { max-height: calc(100vh - 300px); overflow: auto; padding: 0; outline: none; margin-top: 0; }
.att-tbl { border-collapse: separate; border-spacing: 0; }
.att-tbl th, .att-tbl td { border: 1px solid #a0a0a0; border-top: 0; border-inline-start: 0; padding: 5px 8px; white-space: nowrap; font-size: 13px; }
.att-tbl th { position: sticky; top: 0; z-index: 2; background: #f1f3f9; color: var(--text); }
.att-tbl tbody tr:nth-child(even) td:not([style]):not(.man):not(.mv) { background: #f0f2f8; }
.att-tbl tbody tr:nth-child(odd) td:not([style]):not(.man):not(.mv) { background: #fff; }
.att-tbl .fx { position: sticky; z-index: 1; }
.att-tbl th.fx { z-index: 3; }
.att-tbl .fx1 { inset-inline-start: 0; min-width: 60px; }
.att-tbl .fx2 { inset-inline-start: 60px; min-width: 180px; font-weight: 700; }
.att-tbl td.pc { cursor: cell; user-select: none; min-width: 150px; text-align: center; }
.att-tbl td.man { background: #ffc7c7 !important; color: #a51414; font-weight: 700; }
.att-tbl td.mv { background: #fff196 !important; color: #856404; font-weight: 700; }
.att-tbl td.abs { color: #a51414; font-weight: 700; }
.att-tbl td.tot { font-weight: 700; text-align: center; }
.att-tbl td.pc.sel { background: #0d47a1 !important; color: #fff !important; }
.att-tbl td.pc.drop { outline: 2px dashed #7c3aed; outline-offset: -3px; }
.att-tbl tr.moved td { background: #ede9fe !important; color: #5b21b6; }
.att-tbl tr.moved td.man { background: #ffc7c7 !important; color: #a51414; }
.att-tbl tr.cur td:not(.pc) { box-shadow: inset 0 2px 0 #3b82f6, inset 0 -2px 0 #3b82f6; }
.att-tbl tr.manrow td { background: #ffc7c7 !important; color: #a51414; }
.att-tbl tr.rsel td { background: #3b82f6 !important; color: #fff !important; }
.att-tbl tbody tr[data-id] { cursor: pointer; }
.att-foot { background: #fff; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; padding: 8px 14px; font-weight: 700; font-size: 13px; color: var(--text); }

/* ---------- المرتبات والتقارير ---------- */
.att-green { background: #10b981; border-color: #10b981; color: #fff; }
.att-tbl tr.rcv td { background: #def5e2 !important; }
.att-tbl tr.rcv.rsel td, .att-tbl tr.rsel td { background: #3b82f6 !important; color: #fff !important; }
.att-tbl th[data-s] { cursor: pointer; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.dash-bars { display: flex; align-items: flex-end; gap: 10px; min-height: 190px; overflow-x: auto; padding-top: 10px; }
.dash-bar { display: flex; flex-direction: column; align-items: center; min-width: 54px; flex: 1; }
.dash-bar div { width: 70%; border-radius: 6px 6px 0 0; min-height: 2px; }
.dash-bar .v { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.dash-bar .l { font-size: 11.5px; color: var(--muted); margin-top: 6px; text-align: center; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---------- شاشة الاصابع ---------- */
.hand-wrap { display: flex; justify-content: center; margin-top: 12px; }
.hand-svg { width: 100%; max-width: 560px; height: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.enr-status { text-align: center; font-size: 17px; font-weight: 800; color: #283c78; margin: 10px 0 4px; min-height: 26px; }

.enr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
.enr-side { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.enr-photo { height: 220px; border-radius: 10px; background: #f1f5f9; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); }
.enr-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 760px) { .enr-grid { grid-template-columns: 1fr; } }

.emp-photo-row { display: flex; gap: 14px; align-items: center; }

/* ═════════ الشكل ثلاثي الأبعاد (3D) ═════════ */
.btn { background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%, rgba(0,0,0,.04)); box-shadow: 0 2px 0 rgba(15,23,42,.10), 0 3px 8px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7); border-radius: 10px; transition: transform .06s, box-shadow .12s, filter .12s; }
.btn:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 3px 0 rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgba(15,23,42,.1), inset 0 2px 4px rgba(15,23,42,.18); }
.btn.primary, .btn.danger, .att-green, .att-purple { background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%, rgba(0,0,0,.10)); box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 4px 10px rgba(79,70,229,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.btn:disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
.panel, .card { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 4px rgba(15,23,42,.05), 0 10px 28px rgba(15,23,42,.07); }
.card { background-image: linear-gradient(180deg, #ffffff, #f7f8fd); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15,23,42,.07), 0 16px 34px rgba(15,23,42,.10); }
.scr-bar { background-image: linear-gradient(180deg, #ffffff, #f2f4fb); }
.tbl th, .att-tbl th { background-image: linear-gradient(180deg, #fbfcff, #e7ebf6); border-bottom: 2px solid #a5b4fc !important; }
.att-tbl th[style] { background-image: linear-gradient(180deg, rgba(255,255,255,.6), rgba(0,0,0,.04)); }
.input { box-shadow: inset 0 2px 3px rgba(15,23,42,.06); }
.modal { box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 30px 80px rgba(0,0,0,.35); }
.modal-h { background-image: linear-gradient(180deg, #ffffff, #eef1fa); border-radius: 14px 14px 0 0; }
.modal-f { background-image: linear-gradient(180deg, #f8f9fd, #eef1f8); border-radius: 0 0 14px 14px; }
.topbar { background-image: linear-gradient(180deg, #ffffff, #f3f5fb); box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.sidebar { background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)); box-shadow: inset -1px 0 0 rgba(255,255,255,.06), 4px 0 18px rgba(15,23,42,.18); }
.att-foot { background-image: linear-gradient(180deg, #f7f8fd, #ffffff); }

/* إشعار التحديث الأونلاين - فوق أي شاشة */
.upd-toast { position: fixed; left: 18px; bottom: 18px; z-index: 9999; width: 360px; max-width: calc(100vw - 32px); background: linear-gradient(180deg, #ffffff, #f4f6fd); border: 1px solid #c7d2fe; border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 0 rgba(255,255,255,.7) inset, 0 18px 50px rgba(15,23,42,.28); animation: updIn .35s ease-out; }
.upd-toast.mand { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 18px 50px rgba(15,23,42,.28); }
@keyframes updIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.upd-h { display: flex; gap: 10px; align-items: center; }
.upd-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(180deg, #6366f1, #4338ca); box-shadow: 0 4px 10px rgba(79,70,229,.35); flex: none; }
.upd-title { font-weight: 800; font-size: 15px; }
.upd-tag { background: #f59e0b; color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 12px; margin-inline-start: 4px; }
.upd-ver { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.upd-notes { margin-top: 10px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; max-height: 140px; overflow: auto; font-size: 13px; }
.upd-hint { margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.upd-state { margin-top: 6px; font-weight: 700; color: var(--brand-dark); font-size: 13px; }
.upd-state:empty { display: none; }
.upd-btns { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-start; }
.upd-btns:empty { display: none; }
.upd-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15,23,42,.55); display: grid; place-items: center; padding: 16px; }
.upd-card { background: #fff; border-radius: 16px; padding: 26px 28px; text-align: center; max-width: 420px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.upd-t { font-weight: 800; font-size: 17px; margin-top: 12px; }
.upd-s { color: var(--muted); margin-top: 6px; }
.upd-spin { width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; border: 4px solid #e0e7ff; border-top-color: var(--brand); animation: updSpin .9s linear infinite; }
@keyframes updSpin { to { transform: rotate(360deg); } }

/* ═════════ الصفحة الرئيسية (داش بورد) ═════════ */
.hm-top { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; }
.hm-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hm-k { border-inline-start: 4px solid var(--kc, var(--brand)); }
.hm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.hm-box.wide { grid-column: 1 / -1; }
.hm-svg { width: 100%; height: auto; display: block; }
.hm-dsvg { max-width: 170px; flex: 0 0 170px; }
.hm-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-top: 8px; color: var(--muted); }
.hm-legend.col { flex-direction: column; margin: 0; }
.hm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; }
.hm-hb-r { display: grid; grid-template-columns: minmax(70px, 130px) 1fr 76px; gap: 8px; align-items: center; margin: 8px 0; }
.hm-hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hm-hb-t { background: #eef1f8; border-radius: 6px; height: 14px; overflow: hidden; }
.hm-hb-a { height: 100%; background: #c7d2fe; border-radius: 6px; }
.hm-hb-p { height: 100%; background: #10b981; border-radius: 6px; }
.hm-hb-n { font-size: 12px; font-weight: 700; text-align: end; white-space: nowrap; }
.hm-none { padding: 30px 0; text-align: center; }
@media (max-width: 900px) { .hm-grid { grid-template-columns: 1fr; } }

/* ═════════ ضبط الموبايل ═════════ */
.scr-bar select.input, .scr-bar .input { max-width: 100%; }
@media (max-width: 640px) {
  .content { padding: 12px; }
  .page-title { font-size: 19px; }
  .panel { padding: 14px; border-radius: 12px; overflow-x: auto; }
  .input { font-size: 16px; height: 42px; }
  .btn { height: 42px; }
  .scr-bar { padding: 12px; gap: 8px; }
  .scr-bar > * { flex: 1 1 150px; }
  .scr-bar .spacer { display: none; }
  .scr-bar .btn, .scr-acts .btn { height: 40px; flex: 1 1 auto; }
  .scr-f .input { min-width: 0; width: 100%; height: 42px; }
  .scr-bar [style*="min-width"], .scr-bar [style*="width:"] { min-width: 0 !important; width: 100% !important; }
  .scr-grid, .att-grid { max-height: 68vh; }
  .modal-back { padding: 0; place-items: end center; }
  .modal { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
  .modal-h { border-radius: 16px 16px 0 0; }
  .modal-f { flex-wrap: wrap; }
  .modal-f .btn { flex: 1 1 auto; }
  .tbl th, .tbl td { padding: 8px; font-size: 13px; }
  .cards, .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 13px; }
  .card .v { font-size: 20px; }
  .tabs button { padding: 8px 10px; }
  .topbar .company { font-size: 14px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn { height: 36px; padding: 0 12px; }
  .upd-toast { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; }
  .hm-hb-r { grid-template-columns: minmax(60px, 100px) 1fr 62px; gap: 6px; }
  .hm-dsvg { max-width: 150px; flex-basis: 150px; }
  .chk-list { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .panel[style*="max-width"], .scr-bar + .panel { max-width: 100% !important; }
}
@media (max-width: 380px) { .cards, .hm-cards { grid-template-columns: 1fr; } }

/* ---------- خانة التاريخ المقسّمة (نفس شكل وسلوك "وقت وتاريخ البصمة" فى الديسكتوب) - datebox.js ---------- */
.dtb { position: relative; display: flex; align-items: center; direction: ltr; width: 100%; height: 40px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 0 0 0 10px; font: 15px "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--text); box-shadow: inset 0 2px 3px rgba(15,23,42,.06); transition: border-color .12s, box-shadow .12s; }
.dtb:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.dtb .dtb-seg { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; text-align: center; padding: 1px 0; margin: 0;
  width: 2.8ch; min-width: 0; height: auto; box-shadow: none; border-radius: 3px; caret-color: transparent; }
.dtb .dtb-s0 { width: 5ch; }
.dtb .dtb-seg::placeholder { color: var(--muted); opacity: .55; }
.dtb .dtb-seg:focus { background: #3b82f6; color: #fff; }
.dtb .dtb-seg:focus::placeholder { color: #dbeafe; opacity: 1; }
.dtb .dtb-sep { font-style: normal; color: var(--muted); padding: 0 1px; }
.dtb .dtb-gap { display: inline-block; width: 10px; }
.dtb .dtb-ap { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 1px 4px; margin-inline-start: 4px; border-radius: 3px; outline: 0; }
.dtb .dtb-ap:focus { background: #3b82f6; color: #fff; }
.dtb .dtb-cal { margin-inline-start: auto; align-self: stretch; width: 30px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 0 7px 7px 0; padding: 0; font-size: 13px; }
.dtb .dtb-cal:hover { background: #eef2ff; }
.dtb.dtb-off { background: #f3f4f8; opacity: .75; }
.dtb .dtb-src { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: 0; min-width: 0; }
.scr-f .dtb { height: 36px; width: auto; min-width: 150px; }
.scr-f .dtb.dtb-time { min-width: 250px; }
.scr-form .dtb, .field .dtb { width: 100%; }
@media (max-width: 640px) { .dtb { height: 42px; } .scr-f .dtb { width: 100%; height: 42px; } }
.att-bar .att-break { flex: 0 0 100%; height: 0; }

/* مراجعة البصمات: ايام فيها اكتر من بصمتين + بصمات متجاهلة */
.att-tbl td.flag:not(.man):not(.mv) { background: #ffd599; color: #7c2d12; font-weight: 700; }
.att-multi { color: #c2410c; }
.att-tbl tr.igrow td { background: #e8e8e8 !important; color: #787878 !important; text-decoration: line-through; }
.att-tbl tr.dp-in td { background: #dcf5e1; }
.att-tbl tr.dp-out td { background: #dbeafe; }
.att-tbl tr.dp-mid td { background: #ffd599; }
/* عناوين الأقسام الفرعية داخل قوائم الشريط الجانبي */
.nav-sec { margin: 10px 14px 3px; padding: 0 0 3px; font-size: 11.5px; font-weight: 700; color: #a5b4fc; border-bottom: 1px solid rgba(255,255,255,.12); letter-spacing: .2px; }