/**
 * SiGaji — polish tampilan di browser HP / tablet (class .sigaji-mobile-nav).
 * Load setelah sigaji-components.css.
 */

/* ── App shell ── */
html.sigaji-mobile-nav,
html.sigaji-mobile-nav body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.sigaji-mobile-nav #app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}
html.sigaji-mobile-nav .main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.sigaji-mobile-nav .layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.sigaji-mobile-nav .content {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Topbar: ringkas, 2 baris, tidak penuh sesak ── */
html.sigaji-mobile-nav .topbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0.35rem;
  box-shadow: 0 1px 0 var(--bd), 0 2px 8px rgba(15, 23, 42, 0.06);
}
html.sigaji-mobile-nav .topbar > .tl:first-child {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
  padding-bottom: 0.35rem;
}
html.sigaji-mobile-nav .topbar-theme-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.sigaji-mobile-nav .topbar-theme-wrap::-webkit-scrollbar {
  display: none;
}

/* Sembunyikan elemen sekunder di HP */
html.sigaji-mobile-nav .sigaji-build-chip,
html.sigaji-mobile-nav .sync-status,
html.sigaji-mobile-nav .save-ind,
html.sigaji-mobile-nav #ui-pref-density {
  display: none !important;
}

html.sigaji-mobile-nav .alogo {
  flex: 1;
  min-width: 0;
  max-width: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
html.sigaji-mobile-nav .topbar-logo-img {
  max-height: 28px;
  max-width: 72px;
  flex-shrink: 0;
}
html.sigaji-mobile-nav .periode-pill {
  flex-shrink: 0;
  max-width: min(148px, 38vw);
  font-size: 10px;
  padding: 6px 9px;
  min-height: 36px;
}
html.sigaji-mobile-nav .sigaji-cabang-topbar {
  flex-shrink: 1;
  min-width: 0;
  max-width: 42vw;
}
html.sigaji-mobile-nav .sigaji-cabang-sel {
  max-width: 100%;
  font-size: 10px;
}
html.sigaji-mobile-nav .ui-pref-sel {
  max-width: 100px;
  font-size: 11px;
  padding: 6px 8px;
  min-height: 36px;
}
html.sigaji-mobile-nav .topbar .uname {
  display: none;
}
html.sigaji-mobile-nav .topbar .rbadge {
  font-size: 9px;
  padding: 2px 6px;
}
html.sigaji-mobile-nav .topbar .av {
  width: 32px;
  height: 32px;
  font-size: 11px;
  flex-shrink: 0;
}
html.sigaji-mobile-nav .notif-btn {
  min-width: 40px;
  min-height: 40px;
  font-size: 18px;
  flex-shrink: 0;
}
html.sigaji-mobile-nav .topbar-logout {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 11px;
}
html.sigaji-mobile-nav .topbar .btn-xs {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 8px;
}

/* ── Login ── */
@media (max-width: 900px) {
  #login {
    padding: max(1rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
      max(1.25rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    align-items: flex-start;
    padding-top: max(2rem, env(safe-area-inset-top));
  }
  .lbox-premium {
    width: min(100%, 420px);
    padding: 1.65rem 1.25rem 1.35rem;
    margin: 0 auto;
    border-radius: 18px;
  }
  .llogo h1 {
    font-size: 1.55rem;
  }
  #login .btn-p.btn-full {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* ── Judul halaman & aksi ── */
html.sigaji-mobile-nav .ph,
html.sigaji-mobile-nav .page-header {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
html.sigaji-mobile-nav .ph .pt,
html.sigaji-mobile-nav .page-header .pt {
  font-size: 1.15rem;
  line-height: 1.25;
}
html.sigaji-mobile-nav .ph .pst,
html.sigaji-mobile-nav .page-header .pst {
  font-size: 11px;
  line-height: 1.45;
}
html.sigaji-mobile-nav .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}
html.sigaji-mobile-nav .page-actions .btn {
  flex: 1 1 auto;
  min-width: max(120px, calc(50% - 0.25rem));
  justify-content: center;
  text-align: center;
}

/* ── Toolbar filter (karyawan, dll) ── */
html.sigaji-mobile-nav .kar-toolbar,
html.sigaji-mobile-nav .toolbar-row {
  flex-direction: column;
  align-items: stretch !important;
  gap: 0.5rem !important;
}
html.sigaji-mobile-nav .kar-toolbar .inp-search,
html.sigaji-mobile-nav .kar-toolbar .inp-filter-select,
html.sigaji-mobile-nav .toolbar-row .inp-search {
  width: 100%;
  max-width: none;
  min-height: 44px;
  font-size: 16px;
}

/* ── Periode chrome ── */
html.sigaji-mobile-nav .period-chrome {
  margin-left: calc(-1 * max(0.65rem, env(safe-area-inset-left)));
  margin-right: calc(-1 * max(0.65rem, env(safe-area-inset-right)));
  padding-left: max(0.65rem, env(safe-area-inset-left));
  padding-right: max(0.65rem, env(safe-area-inset-right));
  top: 0;
}
html.sigaji-mobile-nav .period-timeline-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding-bottom: 0.35rem;
  scrollbar-width: none;
}
html.sigaji-mobile-nav .period-timeline-bar::-webkit-scrollbar {
  display: none;
}
html.sigaji-mobile-nav .period-sticky-bar {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  font-size: 11px;
}
html.sigaji-mobile-nav .period-sticky-side {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ── Kartu & konten ── */
html.sigaji-mobile-nav .card {
  padding: 0.85rem;
  border-radius: 14px;
}
html.sigaji-mobile-nav .sg4,
html.sigaji-mobile-nav .sg4-kpi {
  gap: 0.5rem;
}
html.sigaji-mobile-nav .sc-kpi {
  padding: 0.75rem;
}

/* ── Tabel: scroll horizontal nyaman ── */
html.sigaji-mobile-nav .table-wrap {
  margin-left: -0.15rem;
  margin-right: -0.15rem;
  border: 1px solid var(--bd);
  box-shadow: inset -12px 0 12px -12px rgba(15, 23, 42, 0.06);
}
html.sigaji-mobile-nav .content .table-wrap table {
  font-size: 11.5px;
}
html.sigaji-mobile-nav .content .table-wrap th,
html.sigaji-mobile-nav .content .table-wrap td {
  padding: 8px 10px;
  white-space: nowrap;
}
html.sigaji-mobile-nav .content .table-wrap th:first-child,
html.sigaji-mobile-nav .content .table-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 2px 0 6px rgba(15, 23, 42, 0.06);
}
html.sigaji-mobile-nav .content .table-wrap thead th:first-child {
  background: var(--table-head-bg, #f3f4f6);
  z-index: 3;
}

/* ── Tab ── */
html.sigaji-mobile-nav .tabs {
  gap: 0;
  padding-bottom: 2px;
  margin-bottom: 0.75rem;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
}
html.sigaji-mobile-nav .tab,
html.sigaji-mobile-nav .spt {
  flex-shrink: 0;
  min-height: 42px;
  padding: 10px 14px;
  font-size: 12px;
}

/* ── Modal: hampir full screen, aman notch ── */
@media (max-width: 900px) {
  .mbd {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mbd.show .modal {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: min(92dvh, 92vh);
    padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
  }
  .modal-sm {
    width: 100%;
    max-width: 100%;
  }
  .mfoot {
    flex-wrap: wrap;
  }
  .mfoot .btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }
}

/* ── Toast: tengah bawah (mudah dijangkau jempol) ── */
@media (max-width: 900px) {
  .toast9,
  #toast {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: max(16px, env(safe-area-inset-bottom));
    max-width: min(92vw, 360px);
    text-align: center;
  }
  .sigaji-toast-stack {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: max(16px, env(safe-area-inset-bottom));
    max-width: min(92vw, 360px);
  }
}

/* ── Drawer menu: area sentuh lebih besar ── */
html.sigaji-mobile-nav .ni {
  min-height: 46px;
  padding: 12px 1rem;
  font-size: 14px;
}
html.sigaji-mobile-nav #sidebar-wrap .nsec {
  font-size: 10px;
  padding: 0.5rem 1rem 0.25rem;
}

/* ── Dashboard bento ── */
html.sigaji-mobile-nav .dash-bento-toolbar {
  flex-direction: column;
  align-items: stretch !important;
  gap: 0.5rem;
}
html.sigaji-mobile-nav .dash-bento-grid {
  gap: 0.65rem;
}
html.sigaji-mobile-nav .bento-kpi-row {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* ── Absensi: kartu per karyawan + baris hari (bukan tabel lebar) ── */
html.sigaji-mobile-nav .ab-grid-host {
  max-height: none;
  overflow: visible;
  border: none;
  box-shadow: none;
  background: transparent;
}
html.sigaji-mobile-nav .ab-mobile-card {
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
html.sigaji-mobile-nav .ab-mobile-days {
  mask-image: linear-gradient(90deg, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
}
html.sigaji-mobile-nav .ab-month-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface, #fff);
  padding: 0.35rem 0;
  margin-bottom: 0.35rem;
}

/* ── Form ── */
html.sigaji-mobile-nav .fg input,
html.sigaji-mobile-nav .fg select,
html.sigaji-mobile-nav .fg textarea,
html.sigaji-mobile-nav .comp-inp,
html.sigaji-mobile-nav .toolbar-select {
  font-size: 16px;
  min-height: 44px;
}
html.sigaji-mobile-nav .fg2,
html.sigaji-mobile-nav .fg3,
html.sigaji-mobile-nav .fg4 {
  grid-template-columns: 1fr !important;
}

/* ── Notifikasi feed ── */
html.sigaji-mobile-nav .notif-item {
  padding: 0.85rem;
  gap: 0.65rem;
}
html.sigaji-mobile-nav .notif-title {
  font-size: 13px;
}

/* ── HP sangat kecil ── */
@media (max-width: 400px) {
  html.sigaji-mobile-nav .topbar-theme-wrap #ui-pref-theme {
    display: none;
  }
  html.sigaji-mobile-nav .periode-pill {
    max-width: 120px;
  }
  html.sigaji-mobile-nav .bento-kpi-row {
    grid-template-columns: 1fr;
  }
  html.sigaji-mobile-nav .page-actions .btn {
    min-width: 100%;
  }
}

/* Landscape tipis — topbar satu baris jika muat */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html.sigaji-mobile-nav .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: max(0.25rem, env(safe-area-inset-top));
  }
  html.sigaji-mobile-nav .topbar > .tl:first-child {
    flex: 1 1 auto;
    padding-bottom: 0;
    border: none;
  }
  html.sigaji-mobile-nav .topbar-theme-wrap {
    flex: 0 1 auto;
    border-top: none;
    padding-top: 0;
    width: auto;
  }
}

/* ── Panel samping karyawan / komponen gaji: footer Simpan & Tutup selalu terlihat ── */
@media (max-width: 900px) {
  .sp {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    height: 100vh;
    padding-top: env(safe-area-inset-top, 0);
  }
  .sp .spf {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  }
  .sp .spf .btn {
    min-height: 44px;
  }
  body.sigaji-kar-panel-open .content,
  body.sigaji-payroll-panel-open .content {
    overflow: hidden;
  }
  #slide-panel-payroll #sp-payroll-mode-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
  }
  #slide-panel-payroll #sp-payroll-mode-wrap .sp-mode-btn {
    width: 100%;
    min-height: 40px;
    text-align: center;
  }
  #slide-panel .spb {
    overflow-x: hidden;
  }
  /* HP: tunjangan ditumpuk (panel sempit) */
  #slide-panel-payroll .payroll-tunj-head,
  #slide-panel-payroll .payroll-pot-head {
    display: none;
  }
  #slide-panel-payroll #tunj-list .payroll-tunj-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    padding: 0.7rem 0.65rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
  }
  #slide-panel-payroll #tunj-list .payroll-tunj-row > :nth-child(1),
  #slide-panel-payroll #tunj-list .payroll-tunj-row > :nth-child(2) {
    grid-column: 1 / -1;
  }
  #slide-panel-payroll #tunj-list .payroll-tunj-row > :nth-child(3) {
    grid-column: 1 / 2;
  }
  #slide-panel-payroll #tunj-list .payroll-tunj-row > :nth-child(4) {
    grid-column: 2 / 3;
  }
  #slide-panel-payroll #tunj-list .payroll-tunj-row > :nth-child(5) {
    grid-column: 1 / 2;
  }
  #slide-panel-payroll #tunj-list .payroll-tunj-row > :nth-child(6) {
    grid-column: 2 / 3;
    justify-self: end;
  }
  #slide-panel-payroll #pot-list .payroll-pot-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    padding: 0.7rem 0.65rem;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fffafb;
  }
  #slide-panel-payroll #pot-list .payroll-pot-row > :nth-child(1) {
    grid-column: 1 / -1;
  }
  #slide-panel-payroll #pot-list .payroll-pot-row > :nth-child(4) {
    grid-column: 1 / -1;
    justify-self: end;
  }
}