/* =========================================================
   mobile.css - Tampilan mobile HRM System (< 768px)
   KONTRAK: desktop tidak boleh berubah. Semua gaya dikunci
   di media query + prefix body.is-mobile / #hr-mobile-root.
   Token mengikuti plancssmobile.md — warna DIADAPTASI ke
   brand existing (primary navy #2b3991 + emerald), bukan indigo.
   ========================================================= */

/* ── Design tokens (struktur plancssmobile.md §2.1, palet existing) ── */
:root {
  /* Primary Brand = navy perusahaan (pengganti indigo blueprint) */
  --hrm-primary-50: #eef1ff;
  --hrm-primary-500: #2b3991;
  --hrm-primary-600: #232e78;
  --hrm-primary-700: #1e2a6b;

  /* Status Indicators (sama dgn blueprint & badge existing) */
  --hrm-success: #10b981; /* Present / Approved / emerald */
  --hrm-warning: #f59e0b; /* Late / Pending / amber */
  --hrm-danger: #f43f5e;  /* Clock Out / Rejected / rose */
  --hrm-info: #3b82f6;    /* WFH / Info / blue */

  /* Neutral Surface */
  --hrm-bg-app: #f8fafc;
  --hrm-bg-card: #ffffff;
  --hrm-text-main: #0f172a;
  --hrm-text-muted: #64748b;
  --hrm-border-light: #e2e8f0;
}

/* ── Shell mobile: default tersembunyi di semua ukuran ── */
#hr-mobile-root {
  display: none;
}

/* Kill-switch: layar >= 768px selalu tanpa shell mobile */
@media (min-width: 768px) {
  #hr-mobile-root,
  #hr-mobile-sheet-wrap {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Mode aktif (disetel js/mobile-nav.js via matchMedia) ── */
  body.is-mobile #hr-mobile-root {
    display: block;
  }

  /* Ruang untuk bottom bar agar footer/konten tidak tertutup */
  body.is-mobile .app-body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-top: 0 !important;
  }

  /* Hide footer di mobile */
  body.is-mobile footer,
  body.is-mobile .footer {
    display: none !important;
  }

  /* ── Absensi page: gradient background FULLSCREEN ── */
  /* Dihilangkan, sudah inline di HTML */

  /* Padding main lebih rapat ala aplikasi */
  body.is-mobile main.py-6 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* ── Topbar mobile: brand di kiri (search/LOG tersembunyi bawaan) ── */
  /* ── Topbar mobile: HIDDEN (frameless look) ── */
  body.is-mobile nav.topbar {
    display: none !important;
  }

  /* ── Bottom Tab Bar (translucent blur, plancssmobile §3.1) ── */
  #hr-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--hrm-border-light);
    box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.06);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #hr-mobile-bar .hmb-tab {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease;
  }
  #hr-mobile-bar .hmb-tab i {
    font-size: 20px;
    line-height: 1;
  }
  #hr-mobile-bar .hmb-tab span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  #hr-mobile-bar .hmb-tab.active {
    color: #059669; /* emerald-600 */
  }
  #hr-mobile-bar .hmb-tab.active i {
    transform: translateY(-1px);
  }
  /* Pill indikator halus di atas ikon tab aktif */
  #hr-mobile-bar .hmb-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 28px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: #10b981; /* emerald-500 */
  }
  /* Tab tengah (Absen) — highlight aksi tercepat */
  #hr-mobile-bar .hmb-tab.hmb-center i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #059669;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }
  #hr-mobile-bar .hmb-tab.hmb-center.active i {
    background: #047857; /* emerald-700 */
  }
  /* Badge merah jumlah pending */
  #hr-mobile-bar .hmb-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #f43f5e; /* rose-500 */
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ── Sheet "Menu" ── */
  #hr-mobile-sheet-wrap {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  #hr-mobile-sheet-wrap[hidden] {
    display: none;
  }
  #hr-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  #hr-mobile-sheet {
    position: relative;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.12);
    max-height: 78dvh;
    display: flex;
    flex-direction: column;
    animation: hrmsheet-up 220ms ease;
  }
  @keyframes hrmsheet-up {
    from { transform: translateY(24px); opacity: 0.4; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  #hr-mobile-sheet.closing {
    animation: hrmsheet-down 180ms ease forwards;
  }
  @keyframes hrmsheet-down {
    from { transform: translateY(0);  opacity: 1; }
    to   { transform: translateY(32px); opacity: 0; }
  }
  .hrm-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: #cbd5e1;
    margin: 10px auto 4px;
    touch-action: none;
  }
  .hrm-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 10px;
    border-bottom: none !important;
  }
  .hrm-sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  /* Grup menu dalam sheet (collapsible) */
  .hrm-grp-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 10px 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
  }
  .hrm-grp-label i {
    font-size: 10px;
    transition: transform 150ms ease;
  }
  .hrm-grp.collapsed .hrm-grp-label i {
    transform: rotate(-90deg);
  }
  .hrm-grp.collapsed .hrm-item {
    display: none;
  }
  .hrm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    color: #334155;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease;
  }
  .hrm-item:hover,
  .hrm-item:active {
    background: #f8fafc;
  }
  .hrm-item .hi-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
  }
  .hrm-item .hi-txt {
    font-size: 13px;
    font-weight: 600;
  }
  .hrm-item.active {
    background: #ecfdf5; /* emerald-50 */
    color: #065f46;
  }

  /* ── Toast: banner penuh di atas layar (plancssmobile §5) ── */
  :root {
    --toastify-toast-width: calc(100vw - 16px);
  }
  body.is-mobile .Toastify__toast-container--top-right {
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
  }

  /* ── Modal → Bottom Sheet (plancssmobile §3.4, plan-mobile §7.1) ──
     Semua modal [id^="modal-"] jadi sheet dari bawah, tanpa ubah HTML. */
  body.is-mobile [id^="modal-"] {
    align-items: flex-end !important;
    justify-content: center;
    padding: 0 !important;
  }
  body.is-mobile [id^="modal-"] > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
    animation: hrmsheet-up 220ms ease;
  }

  /* ── Hint "Geser tabel ke samping" (tabel kompleks yg overflow) ── */
  .hrm-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 5px 12px;
    border-radius: 9999px;
    background: var(--hrm-bg-card);
    border: 1px dashed var(--hrm-border-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    animation: hrmpulse-soft 2s ease infinite;
  }
  @keyframes hrmpulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
  .hrm-scroll-hint.hrm-hint-off {
    display: none;
  }

  /* ── Privacy-mask nominal slip gaji (payroll, mobile only) ── */
  #pl-slip-wrap .hrm-amt {
    display: inline-block;
    transition: filter 150ms ease;
  }
  #pl-slip-wrap.hrm-masked .hrm-amt {
    filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
  }

  /* ── Beranda: Mobile App Style Home ── */
  body.is-mobile #br-hero {
    /* Gradient hijau modern dengan depth */
    background: linear-gradient(135deg, 
      #10b981 0%,        /* emerald-500 */
      #059669 35%,       /* emerald-600 */ 
      #047857 70%,       /* emerald-700 */
      #065f46 100%);     /* emerald-800 */
    position: relative;
    overflow: hidden;
    min-height: 280px;
  }

  /* ── Notification Alert Box (Carousel Slider) ── */
  body.is-mobile #br-alert-container {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    overflow: hidden;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  body.is-mobile #br-alert-container .br-carousel-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 14px;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: white;
  }

  body.is-mobile #br-alert-container .br-carousel-track {
    display: flex;
    width: 100%;
    height: 100px;
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(0);
  }

  body.is-mobile #br-alert-container .br-alert {
    flex: 0 0 100%;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 0;
    background: #ffffff;
    border-left: 4px solid;
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.06);
    animation: none;
    margin-bottom: 0;
  }

  /* Icon kolom */
  body.is-mobile #br-alert-container .br-alert .br-alert-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  /* Content kolom */
  body.is-mobile #br-alert-container .br-alert .br-alert-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.is-mobile #br-alert-container .br-alert .br-alert-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
  }

  body.is-mobile #br-alert-container .br-alert .br-alert-msg {
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.8;
  }

  /* Action button */
  body.is-mobile #br-alert-container .br-alert .br-alert-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
  }

  body.is-mobile #br-alert-container .br-alert .br-alert-btn:active {
    transform: scale(0.95);
  }

  /* ── Carousel Indicators (Dots) ── */
  body.is-mobile #br-alert-container .br-carousel-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
  }

  body.is-mobile #br-alert-container .br-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 200ms ease;
    border: none;
    padding: 0;
  }

  body.is-mobile #br-alert-container .br-carousel-dot.active {
    width: 20px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.5);
  }

  body.is-mobile #br-alert-container .br-carousel-dot:active {
    transform: scale(0.9);
  }

  /* Alert Type: Holiday (Libur) */
  body.is-mobile #br-alert-container .br-alert.br-alert-holiday {
    border-left-color: #f59e0b;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-holiday .br-alert-icon {
    background: #fef3c7;
    color: #f59e0b;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-holiday .br-alert-title {
    color: #92400e;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-holiday .br-alert-msg {
    color: #b45309;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-holiday .br-alert-btn {
    color: #f59e0b;
    background: #fef3c7;
  }

  /* Alert Type: Contract Expiry (Kontrak Habis) */
  body.is-mobile #br-alert-container .br-alert.br-alert-contract {
    border-left-color: #3b82f6;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-contract .br-alert-icon {
    background: #dbeafe;
    color: #3b82f6;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-contract .br-alert-title {
    color: #1e40af;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-contract .br-alert-msg {
    color: #1e3a8a;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-contract .br-alert-btn {
    color: #3b82f6;
    background: #dbeafe;
  }

  /* Alert Type: Discipline Warning (Peringatan Disiplin) */
  body.is-mobile #br-alert-container .br-alert.br-alert-warning {
    border-left-color: #f43f5e;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-warning .br-alert-icon {
    background: #ffe4e6;
    color: #f43f5e;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-warning .br-alert-title {
    color: #9f1239;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-warning .br-alert-msg {
    color: #be185d;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-warning .br-alert-btn {
    color: #f43f5e;
    background: #ffe4e6;
  }

  /* Alert Type: Violation (Pelanggaran) */
  body.is-mobile #br-alert-container .br-alert.br-alert-violation {
    border-left-color: #ef4444;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-violation .br-alert-icon {
    background: #fee2e2;
    color: #ef4444;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-violation .br-alert-title {
    color: #7f1d1d;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-violation .br-alert-msg {
    color: #991b1b;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-violation .br-alert-btn {
    color: #ef4444;
    background: #fee2e2;
    font-weight: 700;
  }

  /* Alert Type: SP Warning (Surat Peringatan) */
  body.is-mobile #br-alert-container .br-alert.br-alert-sp {
    border-left-color: #dc2626;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-sp .br-alert-icon {
    background: #fecaca;
    color: #dc2626;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-sp .br-alert-title {
    color: #7f1d1d;
    font-weight: 800;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-sp .br-alert-msg {
    color: #991b1b;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-sp .br-alert-btn {
    color: #dc2626;
    background: #fecaca;
    font-weight: 700;
  }

  /* Alert Type: Info (Informasi) */
  body.is-mobile #br-alert-container .br-alert.br-alert-info {
    border-left-color: #10b981;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-info .br-alert-icon {
    background: #d1fae5;
    color: #10b981;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-info .br-alert-title {
    color: #065f46;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-info .br-alert-msg {
    color: #047857;
  }

  body.is-mobile #br-alert-container .br-alert.br-alert-info .br-alert-btn {
    color: #10b981;
    background: #d1fae5;
  }

  /* Efek glassmorphism untuk tombol absen */
  body.is-mobile #br-hero button {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  body.is-mobile #br-hero button:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: 
      0 2px 12px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.22);
  }

  /* Profile picture dengan glow effect yang lebih modern */
  body.is-mobile #br-hero img,
  body.is-mobile #br-hero .shrink-0 > span {
    box-shadow: 
      0 0 0 2px rgba(255, 255, 255, 0.4),
      0 4px 16px rgba(0, 0, 0, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 250ms ease;
  }

  body.is-mobile #br-hero button:active img,
  body.is-mobile #br-hero button:active span {
    box-shadow: 
      0 0 0 1px rgba(255, 255, 255, 0.5),
      0 2px 12px rgba(0, 0, 0, 0.2),
      0 1px 4px rgba(0, 0, 0, 0.1);
  }

  /* Jam digital dengan text-shadow lebih dramatis */
  body.is-mobile #br-banner-clock {
    text-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.25),
      0 2px 6px rgba(0, 0, 0, 0.15),
      0 1px 3px rgba(0, 0, 0, 0.1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    font-weight: 900;
  }

  /* Text greeting dengan shadow halus */
  body.is-mobile #br-greet {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Lengkung yang lebih smooth dan dalam */
  body.is-mobile #br-hero .absolute.bottom-0 {
    background: var(--hrm-bg-app);
    border-radius: 28px 28px 0 0;
    height: 18px;
    box-shadow: none;
  }

  /* Search bar dengan depth yang lebih kaya */
  body.is-mobile #br-search {
    box-shadow: 
      0 3px 12px rgba(0, 0, 0, 0.08),
      0 1px 4px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.is-mobile #br-search:focus {
    box-shadow: 
      0 6px 20px rgba(16, 185, 129, 0.15),
      0 3px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
  }

  /* Dekorasi circles dihilangkan */

  /* ── Konten area */
  body.is-mobile #br-shell > div:last-child {
    background: var(--hrm-bg-app) !important;
    border: none !important;
  }
  body.is-mobile #br-grid .launcher-tile {
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
    will-change: transform;
  }

  body.is-mobile #br-grid .launcher-tile:active {
    transform: scale(0.92) translateZ(0);
    filter: brightness(0.95);
  }

  /* Skeleton dengan animasi lebih halus */
  body.is-mobile #br-skeleton .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Status indicators dengan lebih banyak kontras */
  body.is-mobile .status-badge {
    box-shadow: 
      0 2px 6px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* ── Card-Stack tabel sederhana (plancssmobile §4, plan-mobile §7.2) ──
     tr → kartu; td[data-label] → baris "label: nilai"; td pertama → header kartu. */
  body.is-mobile .hrm-cardstack {
    border-collapse: separate;
    border-spacing: 0;
  }
  body.is-mobile .hrm-cardstack thead {
    display: none !important;
  }
  body.is-mobile .hrm-cardstack tbody tr {
    display: block;
    background: var(--hrm-bg-card);
    border: 1px solid var(--hrm-border-light);
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }
  body.is-mobile .hrm-cardstack tbody tr:hover {
    background: var(--hrm-bg-card);
  }
  /* Empty state / error row (td colspan tanpa data-label) → kartu pesan */
  body.is-mobile .hrm-cardstack tbody tr:only-child,
  body.is-mobile .hrm-cardstack tbody td:not([data-label]) {
    text-align: center;
  }
  body.is-mobile .hrm-cardstack td {
    display: block;
    padding: 3px 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  body.is-mobile .hrm-cardstack td:first-child {
    margin-bottom: 8px;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed var(--hrm-border-light);
  }
  body.is-mobile .hrm-cardstack td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  body.is-mobile .hrm-cardstack td[data-label]::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    flex-shrink: 0;
  }
  body.is-mobile .hrm-cardstack td[data-label] > span,
  body.is-mobile .hrm-cardstack td[data-label] > div {
    min-width: 0;
  }
  /* Baris aksi: label disembunyikan, tombol rata kanan penuh */
  body.is-mobile .hrm-cardstack td[data-label="Aksi"]::before {
    display: none;
  }
  body.is-mobile .hrm-cardstack td[data-label="Aksi"] {
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 6px !important;
    margin-top: 4px;
    border-top: 1px dashed var(--hrm-border-light);
  }
  /* ── Presensi: tabel → kartu per karyawan ──
     Nomor kolom disembunyikan, sel Karyawan jadi header kartu. */
  body.is-mobile #prs-table.hrm-cardstack tbody tr {
    padding: 12px 14px;
  }
  body.is-mobile .prs-no-col {
    display: none !important;
  }
  /* Sel "Karyawan" jadi judul kartu (menggantikan td:first-child) */
  body.is-mobile #prs-table.hrm-cardstack tbody .prs-name-cell {
    display: block;
    margin-bottom: 8px;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed var(--hrm-border-light);
    font-size: 13px;
  }
  body.is-mobile #prs-table.hrm-cardstack tbody .prs-name-cell .font-bold {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════ */
/* Desktop/tablet (>= 768px): daftar karyawan presensi     */
/* dirender sebagai kartu horizontal (div) asli di          */
/* prsRenderTable, terlihat seperti baris tabel.            */
/* ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* wadah tabel/colgroup tidak mengganggu kartu */
  #prs-table.hrm-cardstack {
    width: 100%;
  }
  #prs-table.hrm-cardstack thead {
    display: none;
  }
  #prs-table.hrm-cardstack tbody,
  #prs-table.hrm-cardstack tbody tr,
  #prs-table.hrm-cardstack tbody td {
    display: block;
    width: 100%;
    border: none;
    background: none;
  }
  /* kontainer daftar kartu */
  #prs-table.hrm-cardstack .prs-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* satu kartu = satu karyawan, kolom menyamping seperti baris tabel */
  #prs-table.hrm-cardstack .prs-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--hrm-bg-card, #ffffff);
    border: 1px solid var(--hrm-border-light, #e2e8f0);
    border-radius: 12px;
    padding: 10px 6px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: box-shadow 150ms ease;
  }
  #prs-table.hrm-cardstack .prs-card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  }
  /* kolom: label kecil di atas, nilai di bawah, rata tengah */
  #prs-table.hrm-cardstack .prs-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 6px;
    text-align: center;
    min-width: 0;
    overflow: hidden;
  }
  #prs-table.hrm-cardstack .prs-col::before {
    content: attr(data-label);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
  }
  /* kolom nama lebih lebar, rata kiri */
  #prs-table.hrm-cardstack .prs-col.prs-name-cell {
    flex: 0 0 190px;
    align-items: flex-start;
    text-align: left;
  }
  #prs-table.hrm-cardstack .prs-col.prs-name-cell .prs-label {
    display: none;
  }
  #prs-table.hrm-cardstack .prs-col.prs-name-cell .prs-value {
    width: 100%;
    overflow: hidden;
  }
  #prs-table.hrm-cardstack .prs-col.prs-name-cell .font-bold {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #prs-table.hrm-cardstack .prs-col.prs-col-aksi {
    flex: 0 0 90px;
    justify-content: center;
  }
  #prs-table.hrm-cardstack .prs-col.prs-col-aksi::before { content: none; }
}