/* ============================================================
   app-multiuser.css — giao diện riêng của bản nhiều người dùng
   (đăng nhập, điểm danh, hộp duyệt, tài khoản, quy trình lương)
   Bảng màu và biến vẫn lấy từ app.css.
   ============================================================ */

/* ---------- Màn hình đăng nhập ---------- */
.auth-screen{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#0f172a 0%,#1e293b 55%,#1d4ed8 165%);
}
.auth-screen.hidden{display:none}
.auth-card{
  width:min(400px,100%);background:var(--surface);border-radius:14px;
  box-shadow:0 24px 60px rgba(2,6,23,.45);padding:28px 28px 22px;
}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.auth-brand .brand-mark{width:42px;height:42px;font-size:15px;border-radius:11px}
.auth-brand-text{display:flex;flex-direction:column;line-height:1.3}
.auth-brand-text strong{font-size:17px;letter-spacing:.5px}
.auth-brand-text span{font-size:12px;color:var(--muted)}
.auth-submit{width:100%;justify-content:center;padding:10px;font-size:14px;margin-top:6px}
.auth-foot{font-size:11.5px;color:var(--muted);text-align:center;margin:16px 0 0;line-height:1.5}
#login-error{margin-bottom:12px}

/* ---------- Lớp phủ khi đang xử lý ---------- */
.loading-veil{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  align-content:center;gap:14px;
  background:rgba(248,250,252,.78);backdrop-filter:blur(2px);
}
.loading-veil.hidden{display:none}
.loading-veil #loading-text{font-size:13px;color:var(--text-2);font-weight:550}
.spinner{
  width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* ---------- Hộp người dùng ở thanh bên ---------- */
.whoami{position:relative;margin-top:12px}
.whoami-btn{
  width:100%;display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--radius-sm);
  background:#1e293b;border:1px solid #334155;color:#cbd5e1;cursor:pointer;text-align:left;
}
.whoami-btn:hover{background:#334155}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;flex:none;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
}
.whoami-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.whoami-text strong{color:#fff;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoami-text span{font-size:10.5px;color:#64748b}
.whoami .caret{color:#64748b;font-size:11px}
.user-menu{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  overflow:hidden;z-index:30;
}
.user-menu.hidden{display:none}
.user-menu button{
  display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  font-size:13px;cursor:pointer;color:var(--text);
}
.user-menu button:hover{background:var(--brand-soft);color:var(--brand)}

/* ---------- Thanh trên ---------- */
.topbar-title{min-width:0}
.topbar-right{display:flex;align-items:flex-start;gap:10px}
.bell-btn{
  position:relative;border:1px solid var(--border);background:var(--surface);
  width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer;font-size:15px;flex:none;
}
.bell-btn:hover{background:var(--surface-2)}
.bell-count{
  position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;
  border-radius:20px;font-size:10px;font-weight:700;padding:1px 5px;min-width:16px;
}
.bell-count.hidden{display:none}

.notif-panel{
  position:fixed;top:64px;right:22px;width:min(370px,calc(100vw - 40px));max-height:70vh;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);z-index:120;display:flex;flex-direction:column;
}
.notif-panel.hidden{display:none}
.notif-panel header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
#notif-list{overflow-y:auto}
.notif-item{
  display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--border);cursor:pointer;
}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:var(--brand-soft)}
.notif-item .n-ico{font-size:14px;text-align:center}
.notif-item .n-title{font-weight:600;font-size:13px}
.notif-item .n-body{font-size:12px;color:var(--text-2);margin-top:2px;line-height:1.45}
.notif-item .n-time{font-size:10.5px;color:var(--muted);margin-top:3px}

/* ---------- Đồng hồ điểm danh ---------- */
.clock-card{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 26px;
}
.clock-left{text-align:center;padding-right:26px;border-right:1px solid var(--border)}
.clock-time{
  font-size:46px;font-weight:750;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.clock-date{font-size:12.5px;color:var(--text-2);margin-top:6px}
.clock-state{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.clock-detail{font-size:14px;margin-top:5px;line-height:1.5}
.clock-status{margin-top:8px;font-size:12.5px;color:var(--text-2)}
.clock-action{margin-top:14px}
.big-action{padding:11px 26px;font-size:14.5px}
.done-badge{
  display:inline-block;background:var(--ok-soft);color:var(--ok);border:1px solid #a7f3d0;
  padding:9px 18px;border-radius:var(--radius-sm);font-weight:650;font-size:13.5px;
}
@media (max-width:760px){
  .clock-card{grid-template-columns:1fr;gap:16px}
  .clock-left{border-right:0;border-bottom:1px solid var(--border);padding:0 0 14px}
}

/* ---------- Lịch điểm danh ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-head{
  text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:4px;
}
.cal-cell{
  aspect-ratio:1;border:1px solid var(--border);border-radius:6px;padding:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--surface);
}
.cal-cell.empty{border:0;background:none}
.cal-cell .cal-num{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.cal-cell .cal-time{font-size:9.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.cal-cell.weekend{background:var(--surface-2);color:var(--muted)}
.cal-cell.today{border-color:var(--brand);border-width:2px}
.cal-cell.ok{background:var(--ok-soft);border-color:#a7f3d0}
.cal-cell.ok .cal-num{color:var(--ok)}
.cal-cell.pending{background:var(--warn-soft);border-color:#fde68a}
.cal-cell.pending .cal-num{color:var(--warn)}
.cal-cell.rejected{background:var(--danger-soft);border-color:#fecaca}
.cal-cell.rejected .cal-num{color:var(--danger)}
.cal-cell.leave{background:#f5f3ff;border-color:#ddd6fe}
.cal-cell.leave .cal-num,.cal-cell.leave .cal-time{color:#7c3aed}
.cal-cell.missing{
  cursor:pointer;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--surface-2) 4px,var(--surface-2) 8px);
}
.cal-cell.missing:hover{border-color:var(--brand);background:var(--brand-soft)}

/* ---------- Thẻ chờ duyệt ---------- */
.approve-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;
}
.ac-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);
}
.ac-value{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-body{padding:14px 16px}
.ac-dates{font-size:14px;margin-bottom:6px}
.ac-reason{
  font-size:13px;color:var(--text-2);background:var(--surface-2);
  padding:9px 12px;border-radius:var(--radius-sm);margin:8px 0;line-height:1.55;
  border-left:3px solid var(--border-strong);
}
.ac-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap}

/* ---------- Tài khoản & vai trò ---------- */
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.role-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;background:var(--surface-2)}
.cred-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-top:12px}
.cred-box > div{display:flex;justify-content:space-between;gap:16px;padding:6px 0}
.cred-box span{color:var(--text-2);font-size:13px}
.cred-box strong{font-size:14px}

/* ---------- Quy trình bảng lương ---------- */
.flow{display:flex;overflow-x:auto;padding:2px}
.flow-step{flex:1;min-width:132px;padding:11px 14px;border:1px solid var(--border);background:var(--surface)}
.flow-step:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.flow-step:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.flow-step + .flow-step{border-left:0}
.flow-step .fs-name{font-size:12.5px;font-weight:650}
.flow-step .fs-who{font-size:10.5px;color:var(--muted);margin-top:2px}
.flow-step.done{background:var(--ok-soft);border-color:#a7f3d0}
.flow-step.done .fs-name{color:var(--ok)}
.flow-step.current{background:var(--brand-soft);border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.flow-step.current .fs-name{color:var(--brand)}

h4.sec{
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);
  margin:18px 0 8px;border-bottom:1px solid var(--border);padding-bottom:4px;
}
.warn-text{color:var(--warn)}
#app-shell.hidden{display:none}

/* ---------- Màn hình hẹp ---------- */
@media (max-width:820px){
  #app-shell{grid-template-columns:1fr}
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;width:246px;z-index:100;
    transform:translateX(-100%);transition:transform .2s;
  }
  #sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  #view{padding:16px}
  #topbar{padding:14px 16px}
}

/* ---------- Nút mở thanh điều hướng trên điện thoại ---------- */
.menu-btn{
  display:none;border:1px solid var(--border);background:var(--surface);
  width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:17px;line-height:1;flex:none;margin-right:10px;
}
.menu-btn:hover{background:var(--surface-2)}
.sidebar-scrim{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:99;
}
.sidebar-scrim.show{display:block}

@media (max-width:820px){
  .menu-btn{display:grid;place-items:center}
  #topbar{align-items:center}
  #topbar h1{font-size:17px}
  #page-sub{display:none}

  /* Lịch điểm danh phải vừa bề ngang màn hình, ô nhỏ lại thay vì tràn */
  .cal{gap:3px}
  .cal-cell{padding:2px;border-radius:5px}
  .cal-cell .cal-num{font-size:11px}
  .cal-cell .cal-time{font-size:8px}
  .card-body{padding:12px}

  /* Đồng hồ điểm danh: nút bấm to, dễ chạm */
  .clock-time{font-size:38px}
  .big-action{width:100%;justify-content:center;padding:14px;font-size:15px}
  .done-badge{display:block;text-align:center}

  /* Thẻ chờ duyệt xếp dọc cho dễ đọc */
  .ac-head{flex-direction:column;gap:6px}
  .ac-actions .btn{flex:1;justify-content:center}
}

@media (max-width:420px){
  .cal-cell .cal-time{display:none}
  #view{padding:12px}
}

/* ---------- Sơ đồ tổ chức ---------- */
.org-table td{vertical-align:top}
.org-table select{min-width:190px}
tr.org-dept td{
  background:var(--surface-2);font-size:10.5px;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.06em;padding:7px 12px;
}
tr.org-changed{background:var(--warn-soft)}
tr.org-changed:hover{background:#fef3c7}

.org-tree{max-height:560px;overflow:auto;padding:4px}
.org-node{position:relative}
.org-card{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--border);border-left:3px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:7px 11px;margin-bottom:5px;background:var(--surface);
}
.org-card.root{border-left-color:var(--brand);background:var(--brand-soft)}
.org-name{font-weight:650;font-size:13px}
.org-meta{font-size:11.5px;color:var(--muted)}

/* ---------- Bảng đối chiếu pháp lý ---------- */
.legal-table td{vertical-align:top}
.legal-table .checkline{align-items:flex-start}
.legal-table .checkline input{margin-top:2px}
.legal-src{font-size:12.5px}
tr.legal-ok{background:var(--ok-soft)}
tr.legal-ok:hover{background:#d1fae5}
tr.legal-stale{background:var(--danger-soft)}
tr.legal-stale:hover{background:#fee2e2}

@media (max-width:820px){
  .org-table select{min-width:150px}
  .legal-table{font-size:12px}
}