* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

body {
  min-height: 100vh;
}

.page {
  display: flex;
  min-height: 100vh;
}

/* ===== SISI KIRI ===== */
.visual-side {
  flex: 1;
  position: relative;
  background:
    linear-gradient(135deg, rgba(4,44,83,0.92) 0%, rgba(12,68,124,0.9) 55%, rgba(24,95,165,0.85) 100%),
    url('assets/pabrik.jpeg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.visual-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.visual-logo-wrap {
  width: 62px;
  height: 62px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.visual-logo {
  width: 130px;
  height: auto;
  margin-top: -6px;
  filter: brightness(0) invert(1);
}

.visual-brand-text p {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.visual-brand-text span {
  font-size: 10px;
  color: #a9cdec;
  letter-spacing: 2px;
}

.visual-text {
  position: relative;
  z-index: 2;
}

.visual-eyebrow {
  font-size: 12px;
  color: #7fb4e6;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 10px;
}

.visual-text h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
}

.visual-desc {
  font-size: 14px;
  color: #cfe0f0;
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 28px;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.feature-icon {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.feature-title {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.feature-desc {
  font-size: 11.5px;
  color: #b9d3ea;
  line-height: 1.4;
}

.quote-box {
  background: rgba(255,255,255,0.07);
  border-left: 3px solid #4a9de0;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: #dceaf9;
  line-height: 1.5;
  max-width: 460px;
}

.quote-mark {
  color: #4a9de0;
  font-size: 20px;
  font-weight: 700;
  margin-right: 2px;
}

.quote-highlight {
  color: #7fb4e6;
  font-weight: 600;
}

.visual-footer {
  position: relative;
  z-index: 2;
  font-size: 11.5px;
  color: #8fb4d9;
  line-height: 1.5;
}

.gear {
  position: absolute;
  border: 3px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  animation: spin 30s linear infinite;
}

.gear-1 { width: 260px; height: 260px; top: -70px; right: -70px; }
.gear-2 { width: 170px; height: 170px; bottom: -50px; left: -50px; animation-direction: reverse; animation-duration: 22s; }
.gear-3 { width: 100px; height: 100px; bottom: 40px; right: 40px; animation-duration: 18s; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== SISI KANAN (FORM) ===== */
.form-side {
  flex: 1;
  position: relative;
  background: #f6f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px;
}

.dots-pattern {
  position: absolute;
  top: 36px;
  right: 40px;
  width: 130px;
  height: 90px;
  background-image: radial-gradient(circle, #c4d5ea 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.7;
}

.form-side::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -70px;
  width: 200px;
  height: 200px;
  border: 26px solid rgba(24,95,165,0.06);
  border-radius: 50%;
}

.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 20px;
  padding: 42px 38px;
  box-shadow: 0 20px 55px rgba(15,40,80,0.12);
  text-align: center;
}

.lock-icon-wrap {
  width: 60px;
  height: 60px;
  background: #e6f0fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

h1 {
  font-size: 21px;
  font-weight: 700;
  color: #1a2233;
  margin-bottom: 8px;
}

h1 .highlight {
  color: #185FA5;
}

.subtitle {
  font-size: 13px;
  color: #7c8798;
  line-height: 1.5;
  margin-bottom: 26px;
}

.login-form {
  text-align: left;
}

.input-group {
  margin-bottom: 18px;
}

.input-group label {
  display: block;
  font-size: 13px;
  color: #333;
  margin-bottom: 6px;
  font-weight: 500;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
}

.input-group input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid #e3e7ee;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  transition: all 0.25s ease;
}

.input-group input:focus {
  outline: none;
  border-color: #185FA5;
  box-shadow: 0 0 0 4px rgba(24, 95, 165, 0.12);
}

.toggle-password {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 4px;
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #555;
  cursor: pointer;
}

.checkbox-label input {
  accent-color: #185FA5;
}

.forgot-link {
  font-size: 12.5px;
  color: #185FA5;
  text-decoration: none;
  font-weight: 500;
}

.forgot-link:hover {
  text-decoration: underline;
}

.btn-login {
  width: 100%;
  padding: 13px;
  background: #0C447C;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.btn-login:hover {
  background: #042C53;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(4, 44, 83, 0.3);
}

.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: 0.75; cursor: not-allowed; }

.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin-left: 10px;
  animation: spin-loader 0.7s linear infinite;
}

.spinner.active { display: inline-block; }

@keyframes spin-loader {
  to { transform: rotate(360deg); }
}

.divider-line {
  height: 1px;
  background: #e5e9f0;
  margin: 22px 0;
}

.info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eef4fb;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
}

.info-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #042C53;
  margin-bottom: 3px;
}

.info-desc {
  font-size: 11.5px;
  color: #5a6472;
  line-height: 1.4;
}

.input-error {
  border-color: #e24b4a !important;
  box-shadow: 0 0 0 4px rgba(226, 75, 74, 0.12) !important;
}

@media (max-width: 900px) {
  .page { flex-direction: column; }
  .visual-side { min-height: 340px; }
  .feature-list { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== DASHBOARD ===== */
.dash-body {
  display: flex;
  min-height: 100vh;
  background: #eef1f6;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* SIDEBAR */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #042C53, #0C3D6E);
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 22px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo-wrap {
  width: 38px;
  height: 38px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sidebar-logo img {
  width: 80px;
  height: auto;
  margin-top: -4px;
  filter: brightness(0) invert(1);
}

.sidebar-logo p {
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sidebar-logo span {
  color: #7fb4e6;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: #b8c9e0;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s;
}

.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: white;
}

.nav-item.active {
  background: #185FA5;
  color: white;
}

.sidebar-trust {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
}

.trust-title {
  font-size: 11.5px;
  font-weight: 600;
  color: white;
  margin-bottom: 3px;
}

.trust-desc {
  font-size: 10.5px;
  color: #9fb4cc;
  line-height: 1.4;
}

/* WRAPPER + TOPBAR */
.dash-wrapper {
  flex: 1;
  min-width: 0;
}

.topbar {
  background: white;
  padding: 14px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hamburger {
  background: #f1f4f8;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #185FA5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.hamburger:hover { background: #e3edf8; }

.topbar-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #1a2233;
}

.topbar-subtitle {
  font-size: 11.5px;
  color: #5a6472;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar-datetime {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-datetime p:first-child {
  font-size: 12.5px;
  font-weight: 500;
  color: #2d3648;
}

.topbar-datetime p:last-child {
  font-size: 11px;
  color: #8a94a3;
}

.bell-btn {
  position: relative;
  background: #f1f4f8;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e24b4a;
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #185FA5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a2233;
}

.user-role {
  font-size: 11px;
  color: #8a94a3;
}

/* MAIN */
.dash-main {
  padding: 26px 30px 10px;
}

.welcome-banner {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 190px;
  margin-bottom: 24px;
  background: url('assets/tim-kerja.jpeg');
  background-size: cover;
  background-position: center 20%;
  display: flex;
  align-items: center;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,44,83,0.93) 0%, rgba(12,68,124,0.85) 55%, rgba(24,95,165,0.4) 100%);
}

.banner-content {
  position: relative;
  z-index: 2;
  padding: 28px 34px;
  color: white;
  max-width: 640px;
}

.banner-eyebrow {
  font-size: 13px;
  color: #a9cdec;
}

.banner-content h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 4px 0 10px;
  color: white;
}

.banner-desc {
  font-size: 13px;
  color: #dceaf9;
  margin-bottom: 18px;
}

.banner-chips {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.banner-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 9px 14px;
}

.banner-chip span {
  font-size: 10.5px;
  color: #a9cdec;
  display: block;
}

.banner-chip p {
  font-size: 12.5px;
  font-weight: 600;
}

/* STAT CARDS */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stats-row { grid-template-columns: 1fr; }
}
.stat-card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  gap: 14px;
  box-shadow: 0 2px 14px rgba(20,40,70,0.06);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-warning .stat-icon { background: #fff4e0; color: #d68f00; }
.stat-success .stat-icon { background: #e3f7ea; color: #1e9e5a; }
.stat-info .stat-icon { background: #e6f0fa; color: #185FA5; }
.stat-purple .stat-icon { background: #f3e8fd; color: #8b3fd6; }

.stat-number {
  font-size: 22px;
  font-weight: 700;
  color: #1a2233;
}

.stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #2d3648;
  margin: 2px 0 3px;
}

.stat-sub {
  font-size: 11px;
  color: #8a94a3;
  margin-bottom: 7px;
}

.stat-trend {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.trend-up { background: #e3f7ea; color: #17824a; }

/* CHARTS ROW */
.charts-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.panel {
  background: white;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 14px rgba(20,40,70,0.06);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-header h2 {
  font-size: 14.5px;
  font-weight: 600;
  color: #1a2233;
}

.filter-select-sm {
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1.5px solid #e3e7ee;
  border-radius: 7px;
  color: #5a6472;
  font-family: 'Poppins', sans-serif;
}

.link-sm {
  font-size: 12px;
  color: #185FA5;
  font-weight: 600;
  text-decoration: none;
}

/* BAR CHART (CSS only) */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  height: 170px;
  border-bottom: 1.5px solid #eef1f6;
  padding-bottom: 4px;
}

.bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bar-fill {
  width: 60%;
  border-radius: 6px 6px 0 0;
  transition: height 0.4s ease;
}

.bar-value {
  font-size: 10.5px;
  font-weight: 600;
  color: #2d3648;
  margin-top: 6px;
}

.bar-label {
  font-size: 10px;
  color: #8a94a3;
  margin-top: 2px;
}

.chart-footer {
  font-size: 12px;
  color: #5a6472;
  margin-top: 16px;
  text-align: center;
}

.chart-footer a {
  color: #185FA5;
  font-weight: 600;
  text-decoration: none;
}

/* DONUT CHART (CSS only) */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.donut-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    #d68f00 0deg 54deg,
    #185FA5 54deg 148deg,
    #8b3fd6 148deg 220deg,
    #1e9e5a 220deg 328deg,
    #c73a39 328deg 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.donut-center {
  width: 92px;
  height: 92px;
  background: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-center p {
  font-size: 10px;
  color: #8a94a3;
}

.donut-center h3 {
  font-size: 21px;
  color: #1a2233;
}

.donut-center span {
  font-size: 10px;
  color: #8a94a3;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.legend-item {
  font-size: 12px;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-item b {
  margin-left: auto;
  color: #1a2233;
  font-weight: 600;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* RECENT LIST */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recent-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-ppc { background: #e6f0fa; color: #185FA5; }
.icon-drafter { background: #f3e8fd; color: #8b3fd6; }
.icon-produksi { background: #e3f7ea; color: #17824a; }
.icon-electrical { background: #fff4e0; color: #b3720a; }

.recent-info {
  flex: 1;
  min-width: 0;
}

.recent-info p {
  font-size: 12px;
  font-weight: 500;
  color: #2d3648;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-info span {
  font-size: 10.5px;
  color: #8a94a3;
}

/* Reused: badges */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  flex-shrink: 0;
}

.badge-warning { background: #fff4e0; color: #b3720a; }
.badge-success { background: #e3f7ea; color: #17824a; }
.badge-danger { background: #fdeaea; color: #c73a39; }

.dash-footer {
  display: flex;
  justify-content: space-between;
  padding: 18px 4px 24px;
  font-size: 11.5px;
  color: #8a94a3;
}

@media (max-width: 1100px) {
  .charts-row { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .sidebar { display: none; }
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
}
/* ===== PIKET LEMBUR PAGE ===== */
.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a2233;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 13px;
  color: #8a94a3;
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6f8fb;
  border: 1.5px solid #e3e7ee;
  border-radius: 10px;
  padding: 10px 14px;
  flex: 1;
  min-width: 240px;
  max-width: 340px;
}

.search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  width: 100%;
  color: #2d3648;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th:nth-child(1), .data-table td:nth-child(1) { width: 8%; }
.data-table th:nth-child(2), .data-table td:nth-child(2) { width: 20%; }
.data-table th:nth-child(3), .data-table td:nth-child(3) { width: 15%; }
.data-table th:nth-child(4), .data-table td:nth-child(4) { width: 16%; }
.data-table th:nth-child(5), .data-table td:nth-child(5) { width: 11%; }
.data-table th:nth-child(6), .data-table td:nth-child(6) { width: 9%; }
.data-table th:nth-child(7), .data-table td:nth-child(7) { width: 10%; }
.data-table th:nth-child(8), .data-table td:nth-child(8) { width: 11%; }

.data-table th {
  text-align: left;
  font-size: 11px;
  color: #8a94a3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px;
  border-bottom: 1.5px solid #eef1f6;
  font-weight: 600;
  white-space: nowrap;
}

.data-table td {
  padding: 15px 12px;
  font-size: 13px;
  color: #2d3648;
  border-bottom: 1px solid #f2f4f7;
  white-space: nowrap;
}

.td-spl {
  font-weight: 600;
  color: #185FA5;
}

.td-project {
  white-space: normal;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr {
  transition: background 0.15s;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

.btn-icon-action {
  background: #eef4fb;
  color: #185FA5;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  transition: all 0.2s;
}

.btn-icon-action:hover {
  background: #185FA5;
  color: white;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.table-count {
  font-size: 12.5px;
  color: #8a94a3;
}

.pagination {
  display: flex;
  gap: 6px;
}

.page-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #e3e7ee;
  background: white;
  color: #4a5568;
  font-size: 12.5px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  border-color: #185FA5;
  color: #185FA5;
}

.page-btn.active {
  background: #185FA5;
  border-color: #185FA5;
  color: white;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .search-box { max-width: 100%; }
}
/* ===== BREADCRUMB ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8a94a3;
  margin-bottom: 14px;
}

.breadcrumb a {
  color: #185FA5;
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  color: #2d3648;
  font-weight: 600;
}

/* ===== MINI STAT CARDS ===== */
.mini-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.mini-stat-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(20,40,70,0.06);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
}

.mini-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-total { background: #e6f0fa; color: #185FA5; }
.icon-warning { background: #fff4e0; color: #d68f00; }
.icon-success { background: #e3f7ea; color: #1e9e5a; }
.icon-danger { background: #fdeaea; color: #c73a39; }

.mini-stat-number {
  font-size: 21px;
  font-weight: 700;
  color: #1a2233;
}

.mini-stat-label {
  font-size: 12px;
  color: #5a6472;
  font-weight: 500;
}

.mini-stat-sub {
  width: 100%;
  font-size: 10.5px;
  color: #8a94a3;
  background: #f6f8fb;
  padding: 5px 10px;
  border-radius: 6px;
}

@media (max-width: 1100px) {
  .mini-stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .mini-stats-row { grid-template-columns: 1fr; }
}
.approver-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f4f8;
  color: #4a5568;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

.division-tag {
  margin-right: 4px;
  margin-bottom: 3px;
}

.date-filter {
  color: #5a6472;
  cursor: pointer;
}
/* ============================================================
   TAMBAHAN UNTUK style.css — KHUSUS HALAMAN APPROVAL
   Tinggal copy-paste seluruh isi file ini ke akhir style.css kamu.
   Semua nama class baru, tidak menimpa class yang sudah ada.
============================================================ */

/* ===== LAYOUT 2 KOLOM: LIST + DETAIL ===== */
.approval-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .approval-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== LIST PANEL (KIRI) ===== */
.approval-list-panel {
  padding: 18px;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}

.approval-search {
  max-width: none;
  margin-bottom: 14px;
}

.approval-tabs {
  display: flex;
  gap: 6px;
  background: #f1f4f8;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
}

.approval-tab {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6472;
  font-family: 'Poppins', sans-serif;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.approval-tab span {
  font-weight: 500;
  opacity: 0.75;
}

.approval-tab:hover {
  color: #185FA5;
}

.approval-tab.active {
  background: white;
  color: #185FA5;
  box-shadow: 0 1px 6px rgba(20,40,70,0.1);
}

.approval-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.approval-list-item {
  border: 1.5px solid #e3e7ee;
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.approval-list-item:hover {
  border-color: #a9cdec;
  background: #f8fbfe;
}

.approval-list-item.active {
  border-color: #185FA5;
  background: #eef4fb;
}

.approval-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.approval-item-id {
  font-size: 13px;
  font-weight: 700;
  color: #185FA5;
}

.approval-item-date {
  font-size: 11px;
  color: #8a94a3;
}

.approval-item-project {
  font-size: 12.5px;
  color: #2d3648;
  line-height: 1.4;
  margin-bottom: 8px;
}

.approval-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.approval-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.approval-item-jam {
  font-size: 11.5px;
  font-weight: 600;
  color: #5a6472;
  white-space: nowrap;
}

.approval-empty {
  font-size: 13px;
  color: #8a94a3;
  text-align: center;
  padding: 30px 10px;
}

/* ===== DETAIL PANEL (KANAN) ===== */
.approval-detail-panel {
  min-height: 400px;
}

.detail-top {
  margin-bottom: 12px;
}

.detail-status-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.status-menunggu { background: #fff4e0; color: #b3720a; }
.status-disetujui { background: #e3f7ea; color: #17824a; }
.status-ditolak { background: #fdeaea; color: #c73a39; }

.detail-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a2233;
  margin-bottom: 18px;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  background: #f6f8fb;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.detail-info-label {
  display: block;
  font-size: 10.5px;
  color: #8a94a3;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  font-weight: 600;
}

.detail-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #2d3648;
}

/* ===== STAGE TRACKER (RIWAYAT RINGKAS) ===== */
.stage-tracker {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 16px 6px;
}

.stage-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.stage-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef1f6;
  color: #8a94a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.stage-step.stage-done .stage-dot {
  background: #1e9e5a;
  color: white;
}

.stage-step.stage-rejected .stage-dot {
  background: #c73a39;
  color: white;
}

.stage-step.stage-current .stage-dot {
  background: #185FA5;
  color: white;
  box-shadow: 0 0 0 4px rgba(24,95,165,0.15);
}

.stage-text {
  min-width: 0;
}

.stage-label {
  font-size: 12px;
  font-weight: 600;
  color: #2d3648;
}

.stage-by {
  font-size: 10.5px;
  color: #8a94a3;
  margin-top: 1px;
}

.stage-line {
  flex: 0 0 auto;
  width: 40px;
  height: 2px;
  background: #e3e7ee;
  margin: 13px 4px 0;
}

@media (max-width: 650px) {
  .stage-tracker { flex-direction: column; gap: 14px; }
  .stage-line { display: none; }
}

/* ===== SECTION TITLES ===== */
.detail-section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a2233;
  margin: 20px 0 10px;
}

.employee-table th, .employee-table td {
  white-space: normal;
}

/* ===== CATATAN BOX ===== */
.catatan-box {
  background: #f6f8fb;
  border-left: 3px solid #185FA5;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.6;
  position: relative;
}

.catatan-quote {
  color: #185FA5;
  font-size: 18px;
  font-weight: 700;
  margin-right: 3px;
}

.catatan-box-danger {
  border-left-color: #c73a39;
  background: #fdf4f4;
}

.catatan-box-danger .catatan-quote {
  color: #c73a39;
}

/* ===== ACTION BUTTONS ===== */
.approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.btn-approve, .btn-reject {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-approve {
  background: #1e9e5a;
  color: white;
}

.btn-approve:hover {
  background: #17824a;
}

.btn-reject {
  background: #c73a39;
  color: white;
}

.btn-reject:hover {
  background: #a92e2d;
}

.btn-approve span, .btn-reject span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
}

.btn-approve small, .btn-reject small {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.85;
}

.btn-history {
  border: 1.5px solid #e3e7ee;
  background: white;
  color: #4a5568;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-history:hover {
  border-color: #185FA5;
  color: #185FA5;
}

.approval-actions-readonly {
  align-items: center;
  justify-content: space-between;
  background: #f6f8fb;
  border-radius: 12px;
  padding: 14px 16px;
}

.approval-processed-note {
  font-size: 12.5px;
  color: #5a6472;
  flex: 1;
  min-width: 200px;
}

/* ============================================================
   TAMBAHAN LANJUTAN — copy-paste ke akhir style.css juga
   (ini menggantikan fungsi .stage-tracker yang lama; class
   .stage-* boleh dibiarkan di style.css, tidak dipakai lagi
   tapi tidak mengganggu apa-apa)
============================================================ */

/* ===== KARTU APPROVAL SISTEM (1 tahap saja) ===== */
.system-approval-card {
  background: #f6f8fb;
  border: 1.5px solid #e3e7ee;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.system-approval-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.system-approval-row > div {
  flex: 1;
  min-width: 160px;
}

.system-approval-label {
  display: block;
  font-size: 10.5px;
  color: #8a94a3;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  margin-bottom: 4px;
}

.system-approval-value {
  font-size: 13px;
  font-weight: 600;
  color: #2d3648;
}

.system-approval-value em {
  font-style: normal;
  font-weight: 500;
  color: #b3720a;
}

/* ===== CATATAN PROSES MANUAL (Diperiksa & Disetujui) ===== */
.manual-process-note {
  display: flex;
  gap: 10px;
  background: #eef4fb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.manual-process-note svg {
  color: #185FA5;
  flex-shrink: 0;
  margin-top: 1px;
}

.manual-process-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #042C53;
  margin-bottom: 3px;
}

.manual-process-desc {
  font-size: 11.5px;
  color: #4a5568;
  line-height: 1.5;
}

/* ============================================================
   TAMBAHAN LANJUTAN #3 — copy-paste ke akhir style.css juga
============================================================ */

/* ===== RIWAYAT APPROVAL (toggle timeline) ===== */
.riwayat-box {
  display: none;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #e3e7ee;
}

.riwayat-box.riwayat-open {
  display: block;
}

.riwayat-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.riwayat-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.riwayat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}

.riwayat-dot-done { background: #1e9e5a; }
.riwayat-dot-rejected { background: #c73a39; }
.riwayat-dot-pending { background: #e3e7ee; border: 2px solid #d68f00; }

.riwayat-action {
  font-size: 12.5px;
  font-weight: 600;
  color: #2d3648;
}

.riwayat-date {
  font-size: 11px;
  color: #8a94a3;
  margin-top: 1px;
}

.riwayat-note {
  font-size: 11px;
  color: #8a94a3;
  line-height: 1.5;
  background: #f6f8fb;
  border-radius: 8px;
  padding: 10px 12px;
}

/* ===== KOLOM DIVISI DI TABEL KARYAWAN (piket multi-divisi) ===== */
.employee-table td .division-tag {
  margin-right: 0;
}

/* Tabel karyawan punya jumlah kolom beda dari tabel Piket Lembur,
   jadi lebar kolom persentase dari .data-table nth-child di-override
   biar nggak berantakan */
.employee-table {
  table-layout: auto;
}

.employee-table th,
.employee-table td {
  width: auto !important;
}

/* ============================================================
   TAMBAHAN UNTUK style.css — KHUSUS HALAMAN Sinkron Form
   Copy-paste ke akhir style.css kamu.
============================================================ */

/* ===== DROPZONE UPLOAD ===== */
.upload-dropzone {
  border: 2px dashed #cfe0f0;
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #f9fbfd;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: #185FA5;
  background: #eef4fb;
}

.upload-title {
  font-size: 13.5px;
  color: #2d3648;
  font-weight: 500;
  margin-top: 10px;
}

.upload-title span {
  color: #185FA5;
  font-weight: 600;
  text-decoration: underline;
}

.upload-hint {
  font-size: 11.5px;
  color: #8a94a3;
  margin-top: 4px;
}

.upload-columns-hint {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef1f6;
}

.upload-columns-hint > p {
  font-size: 12px;
  color: #5a6472;
  margin-bottom: 10px;
}

.column-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.column-chip {
  background: #f1f4f8;
  color: #4a5568;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
}

.btn-download-template {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid #185FA5;
  color: #185FA5;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-download-template:hover {
  background: #185FA5;
  color: white;
}

/* ===== SUMMARY BADGE (preview) ===== */
.summary-badge-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.summary-badge {
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}

.summary-badge-new { background: #e3f7ea; }
.summary-badge-dup { background: #fff4e0; }
.summary-badge-err { background: #fdeaea; }

.summary-badge-number {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #1a2233;
}

.summary-badge-new .summary-badge-number { color: #17824a; }
.summary-badge-dup .summary-badge-number { color: #b3720a; }
.summary-badge-err .summary-badge-number { color: #c73a39; }

.summary-badge-label {
  font-size: 11px;
  color: #5a6472;
  font-weight: 500;
}

/* ===== WARNING DUPLIKAT ===== */
.import-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff4e0;
  color: #8a5b00;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.import-warning svg { flex-shrink: 0; margin-top: 1px; }

/* ===== PREVIEW TABLE ===== */
.preview-table th,
.preview-table td {
  white-space: normal;
}

.row-error {
  background: #fdf4f4 !important;
}

@media (max-width: 800px) {
  .summary-badge-row { grid-template-columns: 1fr; }
}

/* ===== TAMBAHAN: kolom NIK opsional & approver otomatis ===== */

.column-chip-optional {
  background: #f6f8fb;
  color: #8a94a3;
  border: 1.5px dashed #d3dae5;
}

.upload-note-auto {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #185FA5;
  background: #eef4fb;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 12px;
}

.upload-note-auto svg { flex-shrink: 0; }

.th-auto-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  padding: 1.5px 6px;
  border-radius: 8px;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.text-muted-italic {
  color: #b0b8c4;
  font-style: italic;
  font-size: 12px;
}

.text-danger-italic {
  color: #c73a39;
  font-style: italic;
  font-weight: 600;
}

/* ============================================================
   TAMBAHAN UNTUK style.css — KHUSUS HALAMAN LAPORAN & REKAP
   Copy-paste ke akhir style.css kamu.
============================================================ */

/* ===== FILTER BAR ===== */
.rekap-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.rekap-filter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rekap-filter-item label {
  font-size: 11px;
  font-weight: 600;
  color: #5a6472;
}

.rekap-select {
  padding: 9px 12px;
  min-width: 140px;
  font-size: 12.5px;
}

.rekap-search-item {
  flex: 1;
  min-width: 200px;
}

.rekap-search-box {
  max-width: none;
  padding: 8px 12px;
}

.btn-export-excel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e9e5a;
  border: none;
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  padding: 11px 18px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-export-excel:hover {
  background: #17824a;
}

/* ===== MINI STAT ICON — WARNA UNGU (belum ada di style.css sebelumnya) ===== */
.icon-purple { background: #f3e8fd; color: #8b3fd6; }

/* ===== TOP 5 KARYAWAN (ranking list) ===== */
.rekap-top5 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top5-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top5-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f4f8;
  color: #5a6472;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top5-info {
  flex: 1;
  min-width: 0;
}

.top5-name-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.top5-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #2d3648;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top5-jam {
  font-size: 12px;
  font-weight: 700;
  color: #1a2233;
  flex-shrink: 0;
  margin-left: 8px;
}

.top5-bar-track {
  height: 7px;
  background: #eef1f6;
  border-radius: 10px;
  overflow: hidden;
}

.top5-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

/* ============================================================
   TAMBAHAN UNTUK style.css — KHUSUS HALAMAN MASTER DATA
   Copy-paste ke akhir style.css kamu.
============================================================ */

/* ===== TAB SWITCHER ===== */
.master-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1.5px solid #e3e7ee;
}

.master-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #8a94a3;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: all 0.2s;
}

.master-tab:hover { color: #185FA5; }

.master-tab.active {
  color: #185FA5;
  border-bottom-color: #185FA5;
}

.master-tab-panel { display: none; }
.master-tab-panel.active { display: block; }

/* ===== BUTTON TAMBAH ===== */
.btn-add-master {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #185FA5;
  border: none;
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  padding: 10px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-add-master:hover { background: #0C447C; }

/* ===== ICON ACTION DANGER (hapus) ===== */
.btn-icon-danger {
  background: #fdeaea;
  color: #c73a39;
}

.btn-icon-danger:hover {
  background: #c73a39;
  color: white;
}

/* ===== INFO NOTE (Data Divisi) ===== */
.divisi-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eef4fb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: #2d3648;
  line-height: 1.5;
}

.divisi-info-note svg { color: #185FA5; flex-shrink: 0; margin-top: 1px; }

/* ===== APPROVER GROUP CARDS ===== */
.approver-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.approver-group-card {
  border: 1.5px solid #e3e7ee;
  border-radius: 12px;
  overflow: hidden;
}

.approver-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px;
}

.approver-group-body {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ===== MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(10,20,40,0.25);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #eef1f6;
}

.modal-header h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: #1a2233;
}

.modal-close {
  background: #f1f4f8;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #4a5568;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover { background: #e3e7ee; }

.modal-body {
  padding: 20px 22px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid #eef1f6;
}

/* ===== FORM GROUP (dipakai di dalam modal) ===== */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d3648;
  margin-bottom: 6px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e3e7ee;
  border-radius: 9px;
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  color: #2d3648;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #185FA5;
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}

.optional-tag {
  font-weight: 400;
  color: #8a94a3;
  font-size: 11px;
}

.form-hint {
  font-size: 11px;
  color: #8a94a3;
  margin-top: 6px;
  line-height: 1.4;
}

/* ===== TAMBAHAN: menu Aksi (titik tiga) & tips box Riwayat Import ===== */

.riwayat-aksi-cell {
  position: relative;
  text-align: center;
}

.riwayat-aksi-btn {
  margin-right: 0;
}

.riwayat-aksi-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 8px;
  margin-top: 4px;
  background: white;
  border: 1.5px solid #e3e7ee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,40,70,0.12);
  min-width: 170px;
  z-index: 20;
  padding: 6px;
  text-align: left;
}

.riwayat-aksi-menu.open {
  display: block;
}

.riwayat-aksi-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  font-size: 12.5px;
  font-family: 'Poppins', sans-serif;
  color: #2d3648;
  cursor: pointer;
  text-align: left;
}

.riwayat-aksi-item:hover {
  background: #f6f8fb;
}

.riwayat-aksi-item svg {
  flex-shrink: 0;
  color: #5a6472;
}

.riwayat-aksi-danger {
  color: #c73a39;
}

.riwayat-aksi-danger svg {
  color: #c73a39;
}

.riwayat-aksi-danger:hover {
  background: #fdeaea;
}

.riwayat-aksi-warning {
  color: #b3720a;
}

.riwayat-aksi-warning svg {
  color: #b3720a;
}

.riwayat-aksi-warning:hover {
  background: #fff4e0;
}

/* Alasan spesifik di bawah badge status pada tabel preview import */
.preview-alasan {
  font-size: 10px;
  color: #8a94a3;
  margin-top: 4px;
  line-height: 1.35;
  max-width: 160px;
}

/* Tips box di bawah tabel riwayat import */
.import-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #eef4fb;
  color: #185FA5;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  margin-top: 16px;
  line-height: 1.5;
}

.import-tip-box svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.username-code {
  background: #f1f4f8;
  color: #185FA5;
  font-size: 11.5px;
  font-family: 'Consolas', 'Courier New', monospace;
  padding: 3px 8px;
  border-radius: 6px;
}

.password-preview-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eef4fb;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 11.5px;
  color: #2d3648;
  line-height: 1.5;
  margin-top: 4px;
}

.password-preview-box svg {
  color: #185FA5;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   TAMBAHAN UNTUK style.css — KHUSUS HALAMAN PENGATURAN
   Copy-paste ke akhir style.css kamu.
============================================================ */

/* ===== BANNER PENGINGAT TTD BELUM DIISI ===== */
.setup-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff4e0;
  border: 1px solid #f0d9ab;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.setup-banner svg {
  color: #b3720a;
  flex-shrink: 0;
  margin-top: 1px;
}

.setup-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: #8a5b00;
}

.setup-banner-desc {
  font-size: 12px;
  color: #8a5b00;
  margin-top: 2px;
}

/* ===== LAYOUT 2 KOLOM ===== */
.pengaturan-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1000px) {
  .pengaturan-layout { grid-template-columns: 1fr; }
}

/* ===== FOTO PROFIL ===== */
.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #eef1f6;
}

.profile-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #185FA5;
  color: white;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.btn-upload-photo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eef4fb;
  color: #185FA5;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-upload-photo:hover { background: #185FA5; color: white; }

.btn-remove-photo {
  background: none;
  border: none;
  color: #c73a39;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.btn-remove-photo:hover { text-decoration: underline; }

.profile-photo-actions .form-hint {
  width: 100%;
  margin-top: 0;
}

/* ===== FORM ROW 2 KOLOM (dalam panel Profil) ===== */
.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group input:disabled {
  background: #f6f8fb;
  color: #8a94a3;
  cursor: not-allowed;
}

.profile-role-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== TANDA TANGAN DIGITAL ===== */
.signature-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #eef4fb;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: #2d3648;
  line-height: 1.5;
  margin-bottom: 16px;
}

.signature-info-note svg { color: #185FA5; flex-shrink: 0; margin-top: 1px; }

.signature-pad-wrap {
  position: relative;
  border: 2px dashed #cfe0f0;
  border-radius: 12px;
  background: #f9fbfd;
  height: 200px;
  margin-bottom: 16px;
  cursor: crosshair;
  touch-action: none;
}

.signature-pad-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.signature-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #b6bdc9;
  pointer-events: none;
}

.signature-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.signature-controls .btn-approve {
  flex: 1;
}

.signature-saved-box {
  border-top: 1px solid #eef1f6;
  padding-top: 16px;
}

.signature-saved-label {
  font-size: 12px;
  font-weight: 600;
  color: #5a6472;
  margin-bottom: 8px;
}

.signature-saved-box img {
  max-width: 220px;
  max-height: 90px;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  padding: 8px;
  background: white;
  display: block;
}

.signature-saved-time {
  font-size: 11px;
  color: #8a94a3;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .form-group-row { grid-template-columns: 1fr; }
}

/* ============================================================
   TAMBAHAN UNTUK style.css — KHUSUS HALAMAN AUDIT TRAIL
   Copy-paste ke akhir style.css kamu.
   (Catatan: pakai ulang class .rekap-filter-row, .rekap-select,
   dkk dari CSS Laporan & Rekap — kalau itu belum kamu paste,
   paste juga blok CSS Laporan & Rekap sebelum ini)
============================================================ */

/* ===== TIMELINE LOG AUDIT ===== */
.audit-timeline {
  display: flex;
  flex-direction: column;
}

.audit-entry {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f2f4f7;
}

.audit-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.audit-entry-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.audit-entry-body {
  flex: 1;
  min-width: 0;
}

.audit-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.audit-entry-title {
  font-size: 13px;
  color: #2d3648;
  line-height: 1.5;
}

.audit-entry-title b {
  color: #1a2233;
}

.audit-spl-tag {
  font-weight: 700;
  color: #185FA5;
}

.audit-entry-project {
  font-size: 12px;
  color: #5a6472;
  margin-bottom: 4px;
}

.audit-entry-note {
  font-size: 11.5px;
  color: #8a94a3;
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.4;
}

.audit-entry-time {
  font-size: 10.5px;
  color: #b6bdc9;
}
/* ===== GANTI PASSWORD (halaman Pengaturan) ===== */

.password-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .password-form-grid {
    grid-template-columns: 1fr;
  }
}

.password-error-msg {
  font-size: 12px;
  color: #c73a39;
  background: #fdeaea;
  padding: 9px 12px;
  border-radius: 8px;
  margin-top: 14px;
}

/* ===== FIX: badge trend di kartu statistik Dashboard ===== */
.stat-trend {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 10px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ===== FIX #9: lebar kolom tabel Piket Lembur ===== */
.piket-table th:nth-child(1), .piket-table td:nth-child(1) { width: 8%; }
.piket-table th:nth-child(2), .piket-table td:nth-child(2) { width: 16%; }
.piket-table th:nth-child(3), .piket-table td:nth-child(3) { width: 17%; white-space: normal; }
.piket-table th:nth-child(4), .piket-table td:nth-child(4) { width: 17%; }
.piket-table th:nth-child(5), .piket-table td:nth-child(5) { width: 10%; }
.piket-table th:nth-child(6), .piket-table td:nth-child(6) { width: 11%; }
.piket-table th:nth-child(7), .piket-table td:nth-child(7) { width: 10%; }
.piket-table th:nth-child(8), .piket-table td:nth-child(8) { width: 11%; }

.piket-table .approver-tag {
  white-space: nowrap;
  padding: 6px 12px;
}

/* ===== #7: kartu statistik yang bisa diklik (Dashboard) ===== */
.stat-card-link {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(20, 40, 70, 0.12);
}

.stat-card-link:focus-visible {
  outline: 2px solid #185FA5;
  outline-offset: 2px;
}

/* ===== #3: Sticky header tabel (aktif kalau tabel diberi class .table-sticky) ===== */
.table-sticky thead th {
  position: sticky;
  top: 68px;              /* sama dengan tinggi topbar, supaya menempel DI BAWAH topbar */
  z-index: 5;             /* lebih kecil dari topbar (10), jadi header meluncur di bawah topbar */
  background: #ffffff;    /* wajib solid, supaya baris data di bawahnya tidak tembus */
  border-bottom: none;
  box-shadow: 0 1.5px 0 #eef1f6;  /* pengganti garis bawah, karena border ikut "hilang" saat sticky */
}

/* ===== #16: tanda bintang kolom wajib di form modal ===== */
.required-star {
  color: #c73a39;
  font-weight: 700;
  margin-left: 2px;
}

/* ===== #15: baris total di bawah tabel rekap ===== */
.rekap-total-row td {
  background: #f6f8fb;
  font-weight: 700;
  color: #1a2233;
  border-top: 2px solid #d3dae5;
  border-bottom: none;
}

/* ===== EMPTY STATE (Piket Lembur) ===== */
.empty-state-cell {
  text-align: center;
  padding: 56px 20px !important;
  white-space: normal;
}
.empty-state-icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #eef4fb;
  color: #7fb4e6;
}
.empty-state-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}
.empty-state-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #7c8798;
}
.btn-reset-filter {
  padding: 8px 18px;
  border: 1px solid #cfd8e6;
  border-radius: 8px;
  background: #fff;
  color: #3a4a63;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-reset-filter:hover { background: #f3f6fb; border-color: #7fb4e6; }


/* ===== POPUP KONFIRMASI (Master Data) ===== */
.confirm-box { max-width: 420px; }
.confirm-icon {
  width: 54px; height: 54px;
  margin: 4px auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.confirm-icon-danger  { background: #fdecec; color: #c73a39; }
.confirm-icon-warning { background: #fff4dd; color: #b7791f; }
.confirm-icon-info    { background: #eef4fb; color: #185FA5; }
.confirm-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1a2233;
}
.confirm-text {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5b6678;
}
.btn-danger-solid {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #c73a39;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-danger-solid:hover { background: #a82e2d; }
.btn-primary-solid {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #185FA5;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary-solid:hover { background: #12497f; }

/* ===== PROGRESS IMPORT ===== */
.progress-box { max-width: 420px; }
.progress-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1a2233;
}
.progress-text {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  color: #7c8798;
}
.progress-track {
  height: 10px;
  border-radius: 999px;
  background: #e8eef6;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #185FA5;
  transition: width .08s linear;
}
.progress-percent {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #185FA5;
}

/* ===== LOAD MORE (Audit Trail) ===== */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.btn-load-more {
  padding: 10px 24px;
  border: 1px solid #cfd8e6;
  border-radius: 10px;
  background: #fff;
  color: #185FA5;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-load-more:hover { background: #f3f6fb; border-color: #7fb4e6; }

/* ===== DROPDOWN PROFIL (topbar) ===== */
.topbar-user { position: relative; }
.topbar-user .chev { transition: transform .2s; }
.topbar-user.open .chev { transform: rotate(180deg); }

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 40, 80, 0.14);
  z-index: 30;
  cursor: default;
}
.topbar-user.open .user-dropdown { display: block; }

.user-dropdown-head {
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eef1f6;
}
.user-dropdown-head .ud-name { font-size: 13px; font-weight: 600; color: #1a2233; }
.user-dropdown-head .ud-role { font-size: 11px; color: #8a94a3; margin-top: 2px; }

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  color: #2d3648;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.user-dropdown-item:hover { background: #f3f6fb; color: #185FA5; }
.user-dropdown-item.danger { color: #c73a39; }
.user-dropdown-item.danger:hover { background: #fdecec; color: #a82e2d; }

/* ===== SIDEBAR TOGGLE (hamburger) ===== */
body.sidebar-collapsed .sidebar { display: none; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.5);
  z-index: 40;
}

@media (max-width: 850px) {
  .sidebar.sidebar-open {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 50;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  }
  .sidebar-backdrop.show { display: block; }
}

/* ===== TOPBAR DI LAYAR KECIL ===== */
@media (max-width: 700px) {
  .topbar { padding: 12px 16px; }
  .topbar-datetime, .user-text, .topbar-subtitle { display: none; }
  .dash-main { padding: 20px 16px 10px; }
}

/* ===== POPUP LUPA PASSWORD (Login) ===== */
.lupa-contact {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f8fb;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
.lupa-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #185FA5;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lupa-name { margin: 0; font-size: 13.5px; font-weight: 600; color: #1a2233; }
.lupa-role { margin: 0; font-size: 12px; color: #5b6678; }

/* ===== WHATSAPP (Popup Lupa Password) ===== */
.lupa-phone {
  margin: 3px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #128C7E;
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #128C7E;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.btn-wa:hover { background: #0f7a6e; }
#lupaOverlay .modal-footer { flex-wrap: wrap; }

/* ===== POLISH LOGIN + RESPONSIVE HP (#5) ===== */

/* --- Animasi halus --- */
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card { animation: loginCardIn .45s ease both; }
#lupaOverlay.open .modal-box { animation: popupIn .22s ease both; }

@media (prefers-reduced-motion: reduce) {
  .login-card,
  #lupaOverlay.open .modal-box { animation: none; }
}

/* --- Tombol popup: WA utama, Mengerti sekunder --- */
#btnLupaTutup {
  background: #fff;
  color: #185FA5;
  box-shadow: inset 0 0 0 1.5px #c9d9ec;
}
#btnLupaTutup:hover {
  background: #f3f7fc;
  box-shadow: inset 0 0 0 1.5px #9dbfe3;
}

/* --- Tablet & HP: panel biru jadi pita, kartu login melayang --- */
@media (max-width: 900px) {
  .page { background: #f6f8fb; }

  .visual-side {
    min-height: auto;
    padding: 26px 28px 76px;
  }
  .visual-desc,
  .feature-list,
  .quote-box,
  .visual-footer,
  .gear-3 { display: none; }

  .visual-text h2 { font-size: 26px; margin-bottom: 0; }
  .visual-eyebrow { margin-bottom: 6px; }
  .visual-top { margin-bottom: 22px; }

  .form-side {
    background: transparent;
    margin-top: -48px;
    padding: 0 20px 36px;
    align-items: flex-start;
    overflow: visible;
  }
  .form-side::before,
  .dots-pattern { display: none; }

  .login-card {
    padding: 34px 28px;
    box-shadow: 0 16px 40px rgba(15, 40, 80, 0.16);
  }
}

/* --- HP kecil --- */
@media (max-width: 480px) {
  .visual-side { padding: 22px 20px 70px; }
  .visual-text h2 { font-size: 22px; }
  .visual-eyebrow { font-size: 11px; }
  .visual-brand-text p { font-size: 13px; }

  .form-side { padding: 0 14px 28px; margin-top: -44px; }
  .login-card { padding: 28px 20px; border-radius: 18px; }

  .lock-icon-wrap { width: 54px; height: 54px; margin-bottom: 16px; }
  h1 { font-size: 19px; }
  .subtitle { font-size: 12.5px; margin-bottom: 22px; }

  .input-group input { font-size: 16px; padding-top: 13px; padding-bottom: 13px; }
  .btn-login { padding: 14px; }

  .form-options { flex-wrap: wrap; gap: 10px; }

  /* popup: tombol ditumpuk, selebar popup */
  #lupaOverlay .modal-footer { flex-direction: column; gap: 10px; }
  #lupaOverlay .btn-wa,
  #lupaOverlay .btn-primary-solid {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ===== POPUP SETUJUI (Approval) ===== */
.apv-box { max-width: 480px; }
.apv-summary {
  background: #f6f8fb;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.apv-summary-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1a2233;
  line-height: 1.4;
}
.apv-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.apv-summary-grid span { display: block; font-size: 11.5px; color: #7c8798; }
.apv-summary-grid b { font-size: 13px; font-weight: 600; color: #1a2233; }

.apv-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: #333; }
.apv-ttd-box {
  border: 1.5px dashed #c9d9ec;
  border-radius: 12px;
  background: #fff;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.apv-ttd-img { max-width: 100%; max-height: 110px; object-fit: contain; }
.apv-ttd-empty { margin: 0; text-align: center; font-size: 12.5px; color: #b7791f; line-height: 1.6; }
.apv-ttd-empty a { color: #185FA5; font-weight: 600; }

.apv-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  font-size: 12.5px;
  color: #444;
  line-height: 1.5;
  cursor: pointer;
}
.apv-check input { margin-top: 3px; accent-color: #185FA5; }

.btn-batal-modal {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #4a5568;
  box-shadow: inset 0 0 0 1.5px #d9e0ea;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-batal-modal:hover { background: #f3f6fa; }

.btn-success-solid {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #1e8e5a;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn-success-solid:hover:not(:disabled) { background: #187448; }
.btn-success-solid:disabled { opacity: .45; cursor: not-allowed; }

.approval-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: #1a2233;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(10, 20, 40, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 200;
  max-width: calc(100vw - 32px);
}
.approval-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .apv-box .modal-footer { flex-direction: column-reverse; }
  .apv-box .btn-batal-modal,
  .apv-box .btn-success-solid { width: 100%; }
}

/* ===== POPUP BERHASIL (centang beranimasi) ===== */
.success-box { max-width: 380px; }
.success-check {
  width: 76px;
  height: 76px;
  margin: 6px auto 16px;
  border-radius: 50%;
  background: #e6f6ee;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successPop .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.success-circle {
  stroke: #1e8e5a;
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: successDraw .6s .1s ease forwards;
}
.success-tick {
  stroke: #1e8e5a;
  stroke-width: 3.5;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: successDraw .35s .55s ease forwards;
}
@keyframes successDraw { to { stroke-dashoffset: 0; } }
@keyframes successPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .success-check { animation: none; }
  .success-circle,
  .success-tick { animation: none; stroke-dashoffset: 0; }
}

/* ===== NOTIFIKASI KECIL (toast) ===== */
.notif-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.notif-toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px 16px 14px;
  box-shadow: 0 12px 32px rgba(15, 40, 80, .18), 0 0 0 1px rgba(15, 40, 80, .05);
  animation: notifIn .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.notif-toast.out { animation: notifOut .25s ease forwards; }

.notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e6f6ee;
  color: #1e8e5a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-draw {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: notifDraw .4s .15s ease forwards;
}
.notif-title { margin: 0; font-size: 14px; font-weight: 600; color: #1a2233; line-height: 1.35; }
.notif-desc  { margin: 2px 0 0; font-size: 12.5px; color: #6b7686; line-height: 1.4; }

.notif-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #1e8e5a;
  transform-origin: left;
  animation: notifBar 3.5s linear forwards;
}

.notif-toast.is-danger .notif-icon { background: #fdecec; color: #c73a39; }
.notif-toast.is-danger .notif-bar  { background: #c73a39; }

@keyframes notifIn {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes notifOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes notifBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes notifDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 600px) {
  .notif-wrap { top: 12px; left: 12px; right: 12px; }
  .notif-toast { min-width: 0; max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .notif-toast { animation: none; }
  .notif-draw { animation: none; stroke-dashoffset: 0; }
  .notif-bar { display: none; }
}

/* ===== NOTIFIKASI KACA (glass toast) ===== */
.gt-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.gt-toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 390px;
  max-width: calc(100vw - 24px);
  padding: 18px 56px 20px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(228,247,238,.86) 55%, rgba(200,236,218,.8) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 20px 44px rgba(14, 90, 60, .24),
    0 0 0 1px rgba(30, 142, 90, .10),
    inset 0 2px 0 rgba(255, 255, 255, .95);
  animation: gtIn .55s cubic-bezier(.2, .9, .25, 1.15) both;
}
.gt-toast.out { animation: gtOut .28s ease forwards; }

/* kilatan cahaya yang menyapu kartu */
.gt-toast::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: gtShine 1.1s .35s ease-out forwards;
  pointer-events: none;
}

/* lencana hijau 3D */
.gt-badge {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 22%, #7bf0b4 0%, #26b878 42%, #0d8c55 100%);
  box-shadow:
    0 8px 18px rgba(30, 142, 90, .45),
    inset 0 2px 3px rgba(255, 255, 255, .7),
    inset 0 -4px 8px rgba(0, 0, 0, .16);
  animation: gtPop .5s .05s cubic-bezier(.2, .9, .3, 1.4) both;
}
.gt-badge::before {            /* cincin berdenyut */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(38, 184, 120, .5);
  animation: gtPulse 1.6s .5s ease-out 2;
}
.gt-badge::after {             /* kilap di atas lencana */
  content: '';
  position: absolute;
  top: 5px;
  left: 11px;
  width: 26px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
}
.gt-badge svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.gt-draw {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: gtDraw .45s .3s ease forwards;
}

.gt-title {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 700;
  color: #0b4d34;
  line-height: 1.25;
}
.gt-lines { display: flex; flex-direction: column; gap: 5px; }
.gt-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #24453a;
  line-height: 1.35;
}
.gt-line svg { flex-shrink: 0; color: #1e8e5a; }

.gt-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(15, 40, 80, .08);
  background: rgba(255, 255, 255, .7);
  color: #4a5568;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.gt-close:hover { background: #fff; transform: scale(1.06); }

.gt-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #26b878, #7bf0b4);
  transform-origin: left;
  animation: gtBar 4.2s linear forwards;
}

/* versi ditolak (merah) */
.gt-toast.is-danger {
  background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(253,236,236,.88) 55%, rgba(250,214,214,.82) 100%);
  box-shadow:
    0 20px 44px rgba(150, 40, 40, .22),
    0 0 0 1px rgba(199, 58, 57, .10),
    inset 0 2px 0 rgba(255, 255, 255, .95);
}
.gt-toast.is-danger .gt-badge {
  background: radial-gradient(circle at 30% 22%, #ff9a9a 0%, #e04b4b 42%, #b32626 100%);
  box-shadow:
    0 8px 18px rgba(199, 58, 57, .45),
    inset 0 2px 3px rgba(255, 255, 255, .7),
    inset 0 -4px 8px rgba(0, 0, 0, .18);
}
.gt-toast.is-danger .gt-badge::before { box-shadow: 0 0 0 0 rgba(224, 75, 75, .5); }
.gt-toast.is-danger .gt-title { color: #7a1f1f; }
.gt-toast.is-danger .gt-line { color: #5a2a2a; }
.gt-toast.is-danger .gt-line svg { color: #c73a39; }
.gt-toast.is-danger .gt-bar { background: linear-gradient(90deg, #e04b4b, #ff9a9a); }

@keyframes gtIn {
  from { opacity: 0; transform: translateY(-18px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes gtOut { to { opacity: 0; transform: translateX(28px) scale(.97); } }
@keyframes gtPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes gtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(38, 184, 120, .5); }
  100% { box-shadow: 0 0 0 16px rgba(38, 184, 120, 0); }
}
@keyframes gtShine { to { left: 130%; } }
@keyframes gtDraw  { to { stroke-dashoffset: 0; } }
@keyframes gtBar   { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 600px) {
  .gt-wrap { top: 12px; left: 12px; right: 12px; }
  .gt-toast { width: 100%; padding: 16px 52px 18px 16px; }
  .gt-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-toast, .gt-badge, .gt-badge::before, .gt-toast::after { animation: none; }
  .gt-toast::after { display: none; }
  .gt-draw { animation: none; stroke-dashoffset: 0; }
  .gt-bar { display: none; }
}

/* ===== NOTIFIKASI KACA: versi lebih kecil ===== */
.gt-wrap { top: 16px; right: 16px; gap: 10px; }
.gt-toast {
  width: 300px;
  gap: 12px;
  padding: 12px 44px 14px 12px;
  border-radius: 16px;
}
.gt-badge { width: 40px; height: 40px; }
.gt-badge::after { top: 4px; left: 8px; width: 18px; height: 10px; }
.gt-badge svg { width: 20px; height: 20px; }

.gt-title { font-size: 14.5px; margin: 0 0 4px; }
.gt-lines { gap: 3px; }
.gt-line { font-size: 12.5px; gap: 6px; }
.gt-line svg { width: 14px; height: 14px; }

.gt-close { top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px; }
.gt-close svg { width: 11px; height: 11px; }
.gt-bar { height: 3px; }

@keyframes gtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(38, 184, 120, .5); }
  100% { box-shadow: 0 0 0 11px rgba(38, 184, 120, 0); }
}

@media (max-width: 600px) {
  .gt-wrap { top: 10px; left: 10px; right: 10px; }
  .gt-toast { width: 100%; padding: 11px 42px 13px 11px; }
  .gt-title { font-size: 14px; }
}

/* ===== NOTIFIKASI KACA: versi ringkas ===== */
.gt-wrap { top: 82px; right: 16px; gap: 8px; }
.gt-toast {
  width: 270px;
  gap: 11px;
  padding: 10px 38px 13px 11px;
  border-radius: 14px;
}
.gt-badge { width: 34px; height: 34px; }
.gt-badge::after { top: 3px; left: 7px; width: 15px; height: 8px; }
.gt-badge svg { width: 17px; height: 17px; }

.gt-title { font-size: 13.5px; margin: 0 0 3px; }
.gt-lines { gap: 2px; }
.gt-line { font-size: 12px; gap: 6px; }
.gt-line svg { width: 13px; height: 13px; }

.gt-close { top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 7px; }
.gt-close svg { width: 10px; height: 10px; }
.gt-bar { height: 3px; }

@keyframes gtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(38, 184, 120, .5); }
  100% { box-shadow: 0 0 0 9px rgba(38, 184, 120, 0); }
}

@media (max-width: 600px) {
  .gt-wrap { top: 74px; left: 10px; right: 10px; }
  .gt-toast { width: 100%; padding: 10px 38px 13px 11px; }
  .gt-title { font-size: 13.5px; }
}

/* ===== POPUP TOLAK (Approval) ===== */
.rjk-box { max-width: 500px; }
.rjk-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff4dd;
  border: 1px solid #f3dfae;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  color: #8a5a12;
  font-size: 12.5px;
  line-height: 1.55;
}
.rjk-info svg { flex-shrink: 0; margin-top: 1px; }
.rjk-info p { margin: 0; }

.rjk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rjk-chip {
  border: 1.5px solid #d9e0ea;
  background: #fff;
  color: #4a5568;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.rjk-chip:hover { border-color: #185FA5; color: #185FA5; background: #f3f8fe; }

.rjk-textarea {
  width: 100%;
  border: 1.5px solid #e3e7ee;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-family: 'Poppins', sans-serif;
  resize: vertical;
  min-height: 96px;
  transition: all .2s;
}
.rjk-textarea:focus {
  outline: none;
  border-color: #c73a39;
  box-shadow: 0 0 0 4px rgba(199, 58, 57, .12);
}
.rjk-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11.5px;
  color: #7c8798;
}
.rjk-meta #rjkHint.ok { color: #1e8e5a; }

.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }
.btn-danger-solid:disabled:hover { background: #c73a39; }

@media (max-width: 480px) {
  .rjk-box .modal-footer { flex-direction: column-reverse; }
  .rjk-box .btn-batal-modal,
  .rjk-box .btn-danger-solid { width: 100%; }
}

/* ===== PENGATURAN: tanda tangan digital ===== */
#signatureCanvas { touch-action: none; }   /* HP: jangan scroll saat menggambar */

.btn-link-danger {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #c73a39;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-link-danger:hover { color: #a82e2d; }

/* Foto profil di topbar: pas di dalam lingkaran */
.user-avatar {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ===== POPUP: judul & tombol tetap terlihat, isi yang scroll ===== */
.modal-box:has(> .modal-footer) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);   /* HP: ikut tinggi layar sebenarnya */
}

.modal-box:has(> .modal-footer) > .modal-header,
.modal-box:has(> .modal-footer) > .modal-footer {
  flex-shrink: 0;
}

.modal-box:has(> .modal-footer) > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;      /* scroll isi popup tidak menggeser halaman di belakang */
}

/* ===== QUICK-VIEW DETAIL PIKET ===== */
.recent-item.qv-clickable {
  padding: 6px;
  margin: -6px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.recent-item.qv-clickable:hover { background: #f1f5fb; }
.recent-item.qv-clickable:focus-visible { outline: 2px solid #185FA5; outline-offset: 0; }

.qv-box { max-width: 480px; }

.qv-project {
  font-size: 15px;
  font-weight: 700;
  color: #1a2233;
  line-height: 1.45;
  margin-bottom: 10px;
}

.qv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin: 16px 0;
  padding: 16px;
  background: #f7f9fc;
  border: 1px solid #eef1f6;
  border-radius: 12px;
}
.qv-item span {
  display: block;
  font-size: 11.5px;
  color: #8a94a3;
  margin-bottom: 2px;
}
.qv-item b {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a2233;
}

.qv-note {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.qv-note-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.qv-note-text  { font-size: 12.5px; line-height: 1.5; }
.qv-note-reason {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 46, 45, .3);
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
}
.qv-note-menunggu  { background: #fff8e6; border-color: #f3dfa8; color: #8a5d00; }
.qv-note-disetujui { background: #eaf7f0; border-color: #bfe5d0; color: #12724a; }
.qv-note-ditolak   { background: #fdeeee; border-color: #f4c6c5; color: #a82e2d; }

.qv-link-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 420px) {
  .qv-grid { gap: 12px 14px; padding: 14px; }
}

/* ===== AUDIT TRAIL: tag No. SPL bisa diklik ===== */
.audit-spl-link {
  cursor: pointer;
  transition: box-shadow .15s ease, filter .15s ease;
}
.audit-spl-link:hover {
  filter: brightness(.96);
  box-shadow: 0 0 0 2px rgba(24, 95, 165, .22);
}
.audit-spl-link:focus-visible {
  outline: 2px solid #185FA5;
  outline-offset: 2px;
}

/* ===== HP: cegah halaman melebar ke samping ===== */
@media (max-width: 1100px) {
  .charts-row { grid-template-columns: minmax(0, 1fr); }
}

.charts-row > .panel,
.stats-row > .stat-card { min-width: 0; }
.bar-item { min-width: 0; }
.dash-wrapper { max-width: 100%; }

@media (max-width: 850px) {
  .dash-main { padding: 18px 16px 8px; }
  .topbar { padding: 12px 16px; }
  .panel { padding: 18px 16px; }

  .dash-footer {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
}

/* ===== AUDIT TRAIL di HP: filter rapi & kartu statistik ringkas ===== */
@media (max-width: 700px) {
  .rekap-filter-row:has(#searchAudit) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    align-items: end;
  }
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  /* Cari, User, Aksi = lebar penuh. Dari & Sampai Tanggal berdampingan. Reset = lebar penuh */
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item:nth-child(-n+3),
  .rekap-filter-row:has(#searchAudit) > .btn-history {
    grid-column: 1 / -1;
  }
  .rekap-filter-row:has(#searchAudit) .rekap-select,
  .rekap-filter-row:has(#searchAudit) .rekap-search-box,
  .rekap-filter-row:has(#searchAudit) input[type="date"] {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
  }
  .rekap-filter-row:has(#searchAudit) > .btn-history {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .mini-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mini-stat-card {
    padding: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .mini-stat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .mini-stat-number { font-size: 20px; }
  .mini-stat-label  { font-size: 11.5px; line-height: 1.3; }
  .mini-stat-sub    { display: none; }
}

/* Kartu statistik HP: ikon kiri + teks kanan, sama di semua kartu */
@media (max-width: 600px) {
  .mini-stat-card {
    flex-wrap: nowrap;
    align-items: center;
  }
  .mini-stat-card > div:not(.mini-stat-icon) {
    min-width: 0;
  }
  .mini-stat-label {
    overflow-wrap: anywhere;
  }
}

/* ===== APPROVAL di HP/tablet: daftar di atas, detail di bawah ===== */
@media (max-width: 1100px) {
  .approval-list-panel {
    position: static;          /* jangan nempel & menutupi detail */
    max-height: none;
  }
  .approval-list {
    max-height: 340px;         /* daftar panjang di-scroll di dalam kotaknya */
  }
  .approval-detail-panel {
    min-height: 0;
    scroll-margin-top: 84px;   /* tidak tertutup topbar saat auto-scroll */
  }
}

@media (max-width: 600px) {
  .approval-tab { padding: 8px 4px; font-size: 11.5px; }
  .detail-title { font-size: 16px; line-height: 1.4; }
  .detail-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
  }
  .system-approval-card { padding: 14px; }
  .system-approval-row > div { flex: 1 1 100%; min-width: 0; }

  .approval-actions { flex-direction: column; }
  .approval-actions .btn-approve,
  .approval-actions .btn-reject,
  .approval-actions .btn-history {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  /* Setujui dan Tolak: ikon dan tulisan rata kiri pada posisi yang sama supaya sejajar */
  .approval-actions .btn-approve,
  .approval-actions .btn-reject {
    justify-content: flex-start;
    padding-left: 22px;
  }
}

/* ===== APPROVAL: cegah halaman melebar & tabel karyawan jadi kartu di HP ===== */
@media (max-width: 1100px) {
  .approval-grid { grid-template-columns: minmax(0, 1fr); }
}
.approval-grid > * { min-width: 0; }
.approval-detail-panel .table-wrapper { overflow-x: auto; }

@media (max-width: 600px) {
  .employee-table,
  .employee-table tbody,
  .employee-table tr,
  .employee-table td {
    display: block;
    width: 100% !important;
  }
  .employee-table thead { display: none; }

  .employee-table tr {
    background: #ffffff;
    border: 1.5px solid #e3e7ee;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .employee-table td {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    align-items: start;
    padding: 5px 0;
    border: 0;
    text-align: left;
  }
  .employee-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: #8a94a3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .employee-table td:first-child { display: none; }   /* nomor urut tidak perlu di kartu */

  .employee-table td.emp-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a2233;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #e3e7ee;
  }
  .employee-table td.emp-name::before { display: none; }
}

/* ===== TAG DIVISI (label berwarna) ===== */
.division-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.division-ppc        { background: #e6f0fa; color: #185FA5; }
.division-produksi   { background: #f3e8fd; color: #7a35bd; }
.division-drafter    { background: #e3f7ea; color: #17824a; }
.division-electrical { background: #fff4e0; color: #a86a00; }
.division-warehouse  { background: #e1f5f8; color: #0f7f8e; }

/* ===== PIKET LEMBUR: TABEL JADI KARTU DI HP ===== */
@media (max-width: 600px) {
  .piket-table,
  .piket-table tbody { display: block; width: 100% !important; min-width: 0 !important; }
  .piket-table thead { display: none; }

  .piket-table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }

  .piket-table tbody td {
    display: block;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px;
  }

  .piket-table tbody td[data-label] {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 0 !important;
  }
  .piket-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #8a94a6;
  }

  /* No. SPL = judul kartu */
  .piket-table tbody td.td-spl {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #185FA5;
    padding: 0 0 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px dashed #dbe2ec !important;
  }
  .piket-table tbody td.td-spl::before { display: none; }

  /* Aksi = tombol di bawah kartu */
  .piket-table tbody td.td-aksi {
    display: flex;
    gap: 8px;
    padding: 10px 0 0 !important;
    margin-top: 6px;
    border-top: 1px dashed #dbe2ec !important;
  }
  .piket-table tbody td.td-aksi::before { display: none; }

  /* tag divisi boleh turun baris */
  .piket-table tbody td .division-tag { margin: 0 4px 4px 0; }

  /* baris "data tidak ditemukan" tetap utuh */
  .piket-table tbody tr:has(.empty-state-cell) { border: 0; padding: 0; background: transparent; }
}

/* ===== PIKET LEMBUR: PERBAIKAN TAG DI KARTU ===== */
.tag-wrap { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }

@media (max-width: 600px) {
  .piket-table tbody td[data-label] > .tag-wrap,
  .piket-table tbody td[data-label] > .approver-tag,
  .piket-table tbody td[data-label] > .badge {
    justify-self: start;
    width: auto;
  }
  .piket-table tbody td .division-tag { margin: 0; }
}

/* ===== PIKET LEMBUR: FILTER 2 KOLOM DI HP ===== */
@media (max-width: 600px) {
  .filter-group:has(#filterDivisi) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }
  .filter-group:has(#filterDivisi) > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .filter-group:has(#filterDivisi) .filter-select-sm {
    height: 40px;
    font-size: 13px;
  }
  /* Status selebar penuh */
  .filter-group:has(#filterDivisi) #filterStatus { grid-column: 1 / -1; }
}

/* ===== PIKET LEMBUR: PEMISAH LABEL & ISI ===== */
@media (max-width: 600px) {
  .piket-table tbody td[data-label]::before {
    content: attr(data-label) ":";
  }
  .piket-table tbody td[data-label] {
    border-bottom: 1px solid #eef1f6 !important;
  }
  /* baris terakhir sebelum tombol aksi tidak perlu garis (sudah ada garis putus-putus) */
  .piket-table tbody td[data-label]:nth-last-child(2) {
    border-bottom: 0 !important;
  }
}

/* ===== PIKET LEMBUR: TITIK DUA SEJAJAR ===== */
@media (max-width: 600px) {
  .piket-table tbody td[data-label] {
    grid-template-columns: 112px 8px minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
  }
  .piket-table tbody td[data-label]::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
  }
  .piket-table tbody td[data-label]::after {
    content: ":";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    font-size: 12px;
    font-weight: 600;
    color: #8a94a6;
  }
}

/* ===== PIKET LEMBUR: TITIK DUA HANYA DI BARIS ISI ===== */
@media (max-width: 600px) {
  .piket-table tbody td.td-spl::after,
  .piket-table tbody td.td-aksi::after {
    display: none;
    content: none;
  }
}

/* ===== APPROVAL: KARTU KARYAWAN DENGAN TITIK DUA SEJAJAR ===== */
@media (max-width: 600px) {
  .employee-table td[data-label] {
    grid-template-columns: 92px 8px minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    border-bottom: 1px solid #eef1f6;
  }
  .employee-table td[data-label]:last-child { border-bottom: 0; }

  .employee-table td[data-label]::before {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
  }
  .employee-table td[data-label]::after {
    content: ":";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    font-size: 12px;
    font-weight: 600;
    color: #8a94a6;
  }
  /* nama karyawan (judul kartu) tanpa titik dua */
  .employee-table td.emp-name::after { display: none; content: none; }
}

/* ===== Sinkron Form: RIWAYAT JADI KARTU DI HP ===== */
@media (max-width: 600px) {
  #riwayatTableBody { display: block; }
  .panel:has(#riwayatTableBody) .data-table,
  .panel:has(#riwayatTableBody) .data-table tbody { display: block; width: 100% !important; min-width: 0 !important; }
  .panel:has(#riwayatTableBody) .data-table thead { display: none; }

  #riwayatTableBody tr {
    display: block;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    position: relative;
  }
  #riwayatTableBody td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px;
    white-space: normal !important;
  }
  #riwayatTableBody td[data-label] {
    display: grid;
    grid-template-columns: 112px 8px minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    padding: 6px 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
    overflow-wrap: anywhere;
  }
  #riwayatTableBody td[data-label]::before {
    content: attr(data-label);
    grid-column: 1; grid-row: 1;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
    color: #8a94a6; white-space: nowrap;
  }
  #riwayatTableBody td[data-label]::after {
    content: ":";
    grid-column: 2; grid-row: 1;
    justify-self: center;
    font-size: 12px; font-weight: 600; color: #8a94a6;
  }
  #riwayatTableBody td[data-label] > .badge { justify-self: start; }
  #riwayatTableBody td[data-label]:nth-last-child(2) { border-bottom: 0 !important; }

  /* Aksi: tombol titik tiga di pojok kanan atas kartu */
  #riwayatTableBody td.riwayat-aksi-cell {
    position: absolute;
    top: 8px; right: 10px;
    padding: 0 !important;
  }
  /* beri ruang di kanan baris pertama supaya tidak ketimpa tombol */
  #riwayatTableBody tr td:first-child { padding-right: 36px !important; }

  /* jangan potong menu dropdown */
  .panel:has(#riwayatTableBody) .table-wrapper { overflow: visible; }
}

/* ===== LAPORAN & REKAP: FILTER RAPI (HP) ===== */
@media (max-width: 600px) {
  .rekap-filter-row:has(#filterDivisi) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .rekap-filter-row:has(#filterDivisi) > * { min-width: 0; width: 100%; box-sizing: border-box; }
  .rekap-filter-row:has(#filterDivisi) .rekap-select { width: 100%; }
  /* Bulan, Cari, dan tombol Export selebar penuh */
  .rekap-filter-row:has(#filterDivisi) .rekap-filter-item:nth-child(3),
  .rekap-filter-row:has(#filterDivisi) .rekap-search-item { grid-column: 1 / -1; }
  .rekap-filter-row:has(#filterDivisi) .btn-export-excel {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

/* ===== LAPORAN & REKAP: GRAFIK MENUMPUK (HP/TABLET) ===== */
@media (max-width: 850px) {
  .charts-row[style] { grid-template-columns: minmax(0, 1fr) !important; }
  .charts-row > * { min-width: 0; }
}

/* ===== LAPORAN & REKAP: TABEL JADI KARTU DI HP ===== */
@media (max-width: 600px) {
  #rekapTable, #rekapTable tbody, #rekapTable tfoot {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  #rekapTable thead { display: none; }

  #rekapTableBody tr {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  #rekapTableBody td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px;
    white-space: normal !important;
  }

  /* baris isi: label : nilai */
  #rekapTableBody td[data-label] {
    display: grid;
    grid-template-columns: 112px 8px minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    padding: 6px 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
  }
  #rekapTableBody td[data-label]:last-child { border-bottom: 0 !important; }
  #rekapTableBody td[data-label]::before {
    content: attr(data-label);
    grid-column: 1; grid-row: 1;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
    color: #8a94a6; white-space: nowrap;
  }
  #rekapTableBody td[data-label]::after {
    content: ":";
    grid-column: 2; grid-row: 1;
    justify-self: center;
    font-size: 12px; font-weight: 600; color: #8a94a6;
  }
  #rekapTableBody td[data-label] > .division-tag { justify-self: start; }

  /* nama karyawan = judul kartu (selalu di atas) */
  #rekapTableBody td.td-nama {
    order: -1;
    font-size: 15px;
    font-weight: 700;
    color: #1a2233;
    padding: 0 44px 8px 0 !important;
    margin-bottom: 4px;
    border-bottom: 1px dashed #dbe2ec !important;
  }
  /* nomor urut = chip kecil di pojok kanan atas */
  #rekapTableBody td.td-no {
    position: absolute;
    top: 12px; right: 14px;
    font-size: 11px; font-weight: 600;
    color: #8a94a6;
    background: #f1f4f9;
    border-radius: 20px;
    padding: 2px 9px !important;
  }
  #rekapTableBody td.td-no::before { content: "#"; }

  /* baris "data tidak ditemukan" tetap utuh */
  #rekapTableBody tr:has(td[colspan]) {
    display: block; border: 0; padding: 0; background: transparent;
  }
  #rekapTableBody td[colspan] { display: block; }

  /* baris TOTAL di bawah */
  #rekapTableFoot .rekap-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f5f7fb;
    border-radius: 12px;
  }
  #rekapTableFoot .rekap-total-row td { display: block; padding: 0 !important; border: 0 !important; font-size: 13px; }
  #rekapTableFoot .rekap-total-row td:empty { display: none; }
}

/* ===== LAPORAN & REKAP: LEBAR KOLOM DESKTOP ===== */
@media (min-width: 601px) {
  #rekapTable thead th:nth-child(1) { width: 5% !important; }
  #rekapTable thead th:nth-child(3) { width: 21% !important; }
  #rekapTable thead th:nth-child(4) { width: 14% !important; }
  #rekapTable thead th:nth-child(5) { width: 14% !important; }
  #rekapTable thead th:nth-child(7) { width: 17% !important; }
  #rekapTable th:last-child,
  #rekapTable td:last-child { padding-right: 20px; }
}

/* ===== LAPORAN & REKAP: KOTAK TOTAL DI HP ===== */
@media (max-width: 600px) {
  #rekapTableFoot .rekap-total-row {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px !important;
  }
  #rekapTableFoot .rekap-total-row td:nth-child(6) {
    margin-left: auto;
    padding-right: 0 !important;
    text-align: right;
    white-space: nowrap;
  }
}

/* ===== LAPORAN & REKAP: KOTAK TOTAL, JARAK KIRI-KANAN (HP) ===== */
@media (max-width: 600px) {
  #rekapTableFoot .rekap-total-row { padding: 12px 0 !important; }
  #rekapTableFoot .rekap-total-row td:first-child { padding-left: 16px !important; }
  #rekapTableFoot .rekap-total-row td:nth-child(4) {
    padding-right: 16px !important;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
  }
}

/* ===== MASTER DATA: TAB & TOOLBAR (HP) ===== */
@media (max-width: 600px) {
  .master-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .master-tab {
    justify-content: center;
    text-align: center;
    padding: 10px 4px;
    font-size: 11.5px;
    line-height: 1.3;
  }
  .master-tab svg { display: none; }

  .table-toolbar:has(.btn-add-master) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .table-toolbar:has(.btn-add-master) .search-box { width: 100%; max-width: none; }
  .btn-add-master { width: 100%; justify-content: center; }
}

/* ===== LAPORAN & REKAP: KOTAK TOTAL (HP), VERSI GRID ===== */
@media (max-width: 600px) {
  #rekapTableFoot .rekap-total-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 12px 16px !important;
  }
  #rekapTableFoot .rekap-total-row td:first-child { grid-column: 1; padding: 0 !important; }
  #rekapTableFoot .rekap-total-row td:nth-child(4) {
    grid-column: 2;
    padding: 0 !important;
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }
  #rekapTableFoot .rekap-total-row td:nth-child(2),
  #rekapTableFoot .rekap-total-row td:nth-child(3),
  #rekapTableFoot .rekap-total-row td:nth-child(5) { display: none !important; }
}

/* ===== MASTER DATA: TABEL JADI KARTU DI HP (dipakai Karyawan, Divisi, User) ===== */
@media (max-width: 600px) {
  .master-tab-panel .data-table,
  .master-tab-panel .data-table tbody {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  .master-tab-panel .data-table thead { display: none; }

  .master-tab-panel .data-table tbody tr {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .master-tab-panel .data-table tbody td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* baris isi: label : nilai */
  .master-tab-panel .data-table tbody td[data-label] {
    display: grid;
    grid-template-columns: 124px 8px minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    padding: 6px 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
  }
  .master-tab-panel .data-table tbody td[data-label]::before {
    content: attr(data-label);
    grid-column: 1; grid-row: 1;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
    color: #8a94a6;
  }
  .master-tab-panel .data-table tbody td[data-label]::after {
    content: ":";
    grid-column: 2; grid-row: 1;
    justify-self: center;
    font-size: 12px; font-weight: 600; color: #8a94a6;
  }
  .master-tab-panel .data-table tbody td[data-label] > .division-tag,
  .master-tab-panel .data-table tbody td[data-label] > .badge,
  .master-tab-panel .data-table tbody td[data-label] > .approver-tag { justify-self: start; }

  /* judul kartu */
  .master-tab-panel .data-table tbody td.td-nama {
    order: -1;
    font-size: 15px;
    font-weight: 700;
    color: #1a2233;
    padding: 0 44px 8px 0 !important;
    margin-bottom: 4px;
    border-bottom: 1px dashed #dbe2ec !important;
  }
  /* nomor urut = chip di pojok kanan atas */
  .master-tab-panel .data-table tbody td.td-no {
    position: absolute;
    top: 12px; right: 14px;
    font-size: 11px; font-weight: 600;
    color: #8a94a6;
    background: #f1f4f9;
    border-radius: 20px;
    padding: 2px 9px !important;
  }
  .master-tab-panel .data-table tbody td.td-no::before { content: "#"; }

  /* tombol aksi di bawah kartu */
  .master-tab-panel .data-table tbody td.td-aksi {
    display: flex;
    gap: 8px;
    padding: 10px 0 0 !important;
    margin-top: 6px;
    border-top: 1px dashed #dbe2ec !important;
  }
}

/* ===== MASTER DATA: USERNAME TIDAK MELAR DI KARTU ===== */
@media (max-width: 600px) {
  .master-tab-panel .data-table tbody td[data-label] > code { justify-self: start; }
}

/* ===== MASTER DATA: HILANGKAN GARIS DOBEL SEBELUM TOMBOL ===== */
@media (max-width: 600px) {
  .master-tab-panel .data-table tbody td[data-label]:nth-last-child(2) { border-bottom: 0 !important; }
}

/* ===== POPUP KREDENSIAL (MASTER DATA) ===== */
.kred-box {
  background: #f5f7fb;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  padding: 4px 14px;
  margin: 14px 0 12px;
  text-align: left;
}
.kred-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.kred-row + .kred-row { border-top: 1px dashed #dbe2ec; }
.kred-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #8a94a6;
  flex-shrink: 0;
}
.kred-row code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  color: #1a2233;
  word-break: break-all;
  text-align: right;
}
.kred-row code.kred-pass {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #185FA5;
}
.btn-copy-kred {
  width: 100%;
  padding: 10px;
  border: 1.5px solid #185FA5;
  background: #fff;
  color: #185FA5;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.btn-copy-kred:hover { background: #eaf2fb; }
.kred-note {
  font-size: 11.5px;
  color: #8a94a6;
  line-height: 1.5;
  margin-top: 10px;
}

/* ===== PENGATURAN: HP ===== */
@media (max-width: 1000px) {
  .pengaturan-layout { grid-template-columns: minmax(0, 1fr); }
}
.pengaturan-layout > * { min-width: 0; }
.signature-pad-wrap { max-width: 100%; }

@media (max-width: 600px) {
  .setup-banner { padding: 12px 14px; }
  .profile-photo-row { gap: 14px; }
  .signature-pad-wrap { height: 180px; }

  /* tombol tanda tangan: Simpan di atas, Hapus di bawah, selebar penuh */
  .signature-controls { flex-direction: column; }
  .signature-controls .btn-approve { order: -1; }
  .signature-controls .btn-approve,
  .signature-controls .btn-history {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .signature-saved-box img { max-width: 100%; height: auto; }
  .password-form-grid { grid-template-columns: minmax(0, 1fr); }
  #btnGantiPassword { width: 100%; }
}

/* ===== PENGATURAN: JARAK ANTAR KOLOM SERAGAM (HP) ===== */
@media (max-width: 600px) {
  .pengaturan-layout .form-group-row { gap: 0; }
  .password-form-grid { gap: 0; }
}

/* ===== #45: Laporan & Rekap, lebar kolom setelah kolom NIK dihapus ===== */
@media (min-width: 601px) {
  #rekapTable.data-table thead th:nth-child(1) { width: 6% !important; }
  #rekapTable.data-table thead th:nth-child(2) { width: 28% !important; }
  #rekapTable.data-table thead th:nth-child(3) { width: 18% !important; }
  #rekapTable.data-table thead th:nth-child(4) { width: 16% !important; }
  #rekapTable.data-table thead th:nth-child(5) { width: 17% !important; }
  #rekapTable.data-table thead th:nth-child(6) { width: 15% !important; }
}

/* #46 Grafik batang mendatar (Laporan & Rekap) */
.hbar-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hbar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.hbar-label { font-size: 12.5px; color: #4a5568; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; }
.hbar-value { font-size: 12.5px; font-weight: 600; color: #1a2233; text-align: right; }
@media (max-width: 600px) {
  .hbar-row { grid-template-columns: 96px minmax(0, 1fr) 38px; gap: 8px; }
}

/* #47 Grafik mendatar versi ringkas (Dashboard): kolom nama lebih sempit */
.hbar-compact .hbar-row { grid-template-columns: 110px minmax(0, 1fr) 36px; gap: 8px; }

/* #48 Approval: tabel karyawan (rapat, geser kalau tidak muat) */
@media (min-width: 601px) {
  .employee-table { table-layout: auto !important; width: 100% !important; min-width: 0 !important; }
  .employee-table th, .employee-table td { padding: 12px 10px !important; white-space: nowrap; overflow-wrap: normal !important; word-break: normal !important; }
  .employee-table th:first-child, .employee-table td:first-child { width: 1%; padding-left: 14px !important; }
  .employee-table td:nth-child(4) { white-space: normal; min-width: 130px; }
}
/* ===== LATAR BELAKANG HALAMAN DALAM + BAYANGAN KARTU =====
   Hanya dekorasi: gradasi biru muda, garis diagonal, pola titik, watermark logo samar.
   Semua lapisan di belakang konten (z-index -1), tidak mengubah tata letak. */
.dash-body {
  background-color: #dbe8fa;
  background-image:
    /* garis diagonal di sudut kanan atas */
    linear-gradient(225deg, transparent 0 22%, rgba(37, 99, 200, 0.22) 22% 27%, transparent 27% 31%, rgba(37, 99, 200, 0.15) 31% 34%, transparent 34% 37%, rgba(37, 99, 200, 0.09) 37% 38.5%, transparent 38.5%),
    /* garis diagonal di sudut kiri bawah (di samping sidebar) */
    linear-gradient(45deg, transparent 0 22%, rgba(37, 99, 200, 0.22) 22% 27%, transparent 27% 31%, rgba(37, 99, 200, 0.15) 31% 34%, transparent 34% 37%, rgba(37, 99, 200, 0.09) 37% 38.5%, transparent 38.5%),
    radial-gradient(900px 520px at 90% -6%, rgba(70, 140, 232, 0.38), transparent 65%),
    radial-gradient(820px 560px at 30% 108%, rgba(90, 160, 240, 0.34), transparent 65%),
    linear-gradient(135deg, #d4e5fa 0%, #e9f1fc 45%, #d8e6f9 100%);
  background-repeat: no-repeat;
  background-size: 480px 480px, 480px 480px, auto, auto, auto;
  background-position: right top, 260px bottom, 0 0, 0 0, 0 0;
  background-attachment: fixed;
}

/* Watermark lambang perusahaan (tanpa tulisan) samar di pojok kanan bawah */
.dash-body::before {
  content: "";
  position: fixed;
  right: -110px;
  bottom: -150px;
  width: 640px;
  height: 659px;
  background: url('assets/logo-emblem-biru.png') no-repeat center / contain;
  opacity: 0.26;
  pointer-events: none;
  z-index: -1;
}

/* Pola titik di pojok kanan atas, memudar ke arah tengah */
.dash-body::after {
  content: "";
  position: fixed;
  top: 84px;
  right: 0;
  width: 340px;
  height: 250px;
  background: radial-gradient(rgba(24, 95, 165, 0.42) 1.4px, transparent 1.9px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Bayangan kartu: lembut berlapis + garis tepi tipis supaya "mengambang" di atas latar */
.stat-card,
.panel,
.mini-stat-card {
  box-shadow:
    0 1px 2px rgba(16, 42, 80, 0.05),
    0 10px 28px -8px rgba(24, 70, 130, 0.16),
    0 0 0 1px rgba(200, 219, 243, 0.55);
}
.dash-body .sf-group,
.dash-body .sf-sync {
  box-shadow:
    0 1px 2px rgba(16, 42, 80, 0.05),
    0 10px 28px -8px rgba(24, 70, 130, 0.16);
}
.stat-card-link:hover {
  box-shadow:
    0 2px 4px rgba(16, 42, 80, 0.06),
    0 16px 34px -8px rgba(24, 70, 130, 0.24),
    0 0 0 1px rgba(160, 196, 238, 0.7);
}
.topbar {
  box-shadow: 0 4px 18px rgba(24, 70, 130, 0.08);
}

@media (max-width: 850px) {
  .dash-body { background-attachment: scroll; background-size: 260px 260px, 260px 260px, auto, auto, auto; background-position: right top, left bottom, 0 0, 0 0, 0 0; }
  .dash-body::before { width: 320px; height: 330px; right: -90px; bottom: -100px; opacity: 0.26; }
  .dash-body::after { display: none; }
}

/* ===== Dashboard: peringkat pada grafik Jam Lembur per Divisi ===== */
.hbar-ranked .hbar-row { grid-template-columns: 26px 92px minmax(0, 1fr) 36px; gap: 8px; }
.hbar-rank {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  background: #e8f0fb; color: #2f5a8f;
  box-shadow: inset 0 0 0 1.5px #c9dcf3;
}
.hbar-rank.r1 { background: linear-gradient(150deg, #ffe680 0%, #f5b800 100%); color: #5e3b00; box-shadow: 0 1px 3px rgba(214, 150, 0, .55), inset 0 0 0 1.5px #ffd24a; }
.hbar-rank.r2 { background: linear-gradient(150deg, #f4f7fb 0%, #b7c2d3 100%); color: #2f3a4d; box-shadow: 0 1px 3px rgba(100, 116, 139, .45), inset 0 0 0 1.5px #d3dbe8; }
.hbar-rank.r3 { background: linear-gradient(150deg, #f6c79a 0%, #cf8744 100%); color: #55300d; box-shadow: 0 1px 3px rgba(190, 115, 45, .45), inset 0 0 0 1.5px #e9b27f; }
.hbar-rank-kosong { width: 26px; height: 26px; }
.hbar-ranked .hbar-row.top1 .hbar-label { font-weight: 700; color: #1a2233; }
@media (max-width: 600px) {
  .hbar-ranked .hbar-row { grid-template-columns: 24px 80px minmax(0, 1fr) 34px; gap: 6px; }
  .hbar-rank, .hbar-rank-kosong { width: 24px; height: 24px; font-size: 11px; }
}

/* ===== LAPORAN & REKAP: filter tanggal dan tombol Export PDF ===== */
.rekap-filter-baris2 { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #dfe6f0; }
.rekap-tanggal { font-family: 'Poppins', sans-serif; min-width: 160px; color: #2d3648; }
.rekap-select:disabled { opacity: .5; cursor: not-allowed; background: #f3f6fa; }
.btn-reset-tanggal {
  background: none; border: none; color: #185FA5; font: 600 12px 'Poppins', sans-serif;
  cursor: pointer; padding: 10px 4px; align-self: flex-end;
}
.btn-reset-tanggal:hover { text-decoration: underline; }
.rekap-hint-tanggal { flex: 1 1 220px; min-width: 200px; margin: 0; align-self: center; font-size: 11.5px; line-height: 1.45; color: #7c8798; }
.rekap-hint-tanggal.peringatan { color: #b7791f; font-weight: 600; }
.rekap-aksi-ekspor { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.btn-export-pdf {
  display: inline-flex; align-items: center; gap: 8px;
  background: #d6453d; border: none; color: #fff; font: 600 12.5px 'Poppins', sans-serif;
  padding: 11px 18px; border-radius: 9px; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-export-pdf:hover { background: #b83a33; }
@media (max-width: 600px) {
  .rekap-filter-baris2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rekap-filter-baris2 > * { min-width: 0; width: 100%; box-sizing: border-box; }
  .rekap-filter-baris2 .rekap-tanggal { width: 100%; min-width: 0; }
  .rekap-filter-baris2 .btn-reset-tanggal { grid-column: 1 / -1; text-align: left; padding: 0; }
  .rekap-filter-baris2 .rekap-hint-tanggal { grid-column: 1 / -1; }
  .rekap-filter-baris2 .rekap-aksi-ekspor { grid-column: 1 / -1; margin-left: 0; display: grid; grid-template-columns: 1fr; }
  .rekap-filter-baris2 .rekap-aksi-ekspor button { width: 100%; justify-content: center; }
}

/* ===== Tombol Reset Filter: hanya muncul di tengah saat hasil kosong ===== */
.empty-reset { display: flex; justify-content: center; margin-top: 14px; }

/* ===== LAPORAN & REKAP: petunjuk tanggal dalam kotak info ===== */
.rekap-info-tanggal {
  flex: 1 1 280px; min-width: 240px; align-self: flex-end; display: flex; align-items: center; gap: 12px;
  background: #e9f2fd; border-radius: 12px; padding: 10px 16px;
}
.rekap-info-tanggal .info-ico { color: #1d6fd1; flex: none; }
.rekap-info-tanggal .rekap-hint-tanggal { flex: 1; min-width: 0; margin: 0; font-size: 12px; color: #2f4b6e; }
.rekap-info-tanggal .rekap-hint-tanggal.peringatan { color: #a8650f; }
@media (max-width: 600px) {
  .rekap-filter-baris2 .rekap-info-tanggal { grid-column: 1 / -1; }
}

/* ===== TABLET (601-900px): tabel Piket Lembur dipadatkan supaya kolom tidak bertabrakan ===== */
@media (min-width: 601px) and (max-width: 900px) {
  .piket-table th, .piket-table td { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .piket-table th { font-size: 10px; letter-spacing: .3px; white-space: normal; }
  .piket-table th:nth-child(1), .piket-table td:nth-child(1) { width: 9%; }
  .piket-table th:nth-child(2), .piket-table td:nth-child(2) { width: 17%; white-space: normal; }
  .piket-table th:nth-child(3), .piket-table td:nth-child(3) { width: 15%; }
  .piket-table th:nth-child(4), .piket-table td:nth-child(4) { width: 17%; }
  .piket-table th:nth-child(5), .piket-table td:nth-child(5) { width: 12%; white-space: normal; }
  .piket-table th:nth-child(6), .piket-table td:nth-child(6) { width: 9%; white-space: normal; }
  .piket-table th:nth-child(7), .piket-table td:nth-child(7) { width: 12%; }
  .piket-table th:nth-child(8), .piket-table td:nth-child(8) { width: 9%; }
  .piket-table .approver-tag { white-space: normal; padding: 5px 8px; font-size: 11px; display: inline-block; }
  .piket-table .badge { font-size: 10.5px; padding: 4px 8px; }
  .piket-table td:last-child { white-space: normal; }
}

/* ===== SIDEBAR: latar bergaris halus + cahaya biru, kartu kaca ===== */
.sidebar {
  background:
    radial-gradient(130% 55% at 100% 0%, rgba(40, 120, 205, .50) 0%, rgba(40, 120, 205, 0) 62%),
    radial-gradient(100% 45% at 0% 100%, rgba(47, 128, 214, .30) 0%, rgba(47, 128, 214, 0) 68%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, rgba(255, 255, 255, 0) 1px 24px),
    linear-gradient(180deg, #042C53, #0C3D6E);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.sidebar-logo { border-bottom-color: rgba(255, 255, 255, .14); }
.nav-item.active { box-shadow: 0 6px 16px rgba(2, 20, 45, .35), inset 0 0 0 1px rgba(255, 255, 255, .10); }
.nav-item:hover:not(.active) { background: rgba(255, 255, 255, .09); }
.sidebar-trust {
  background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 22px rgba(2, 20, 45, .30), inset 0 1px 0 rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Judul kartu sidebar selalu satu baris */
.sidebar-trust { gap: 8px; padding: 14px 12px; }
.sidebar-trust .trust-title { white-space: nowrap; font-size: 11px; letter-spacing: -0.1px; }

/* Lencana "Pengecek" pada daftar akun (Master Data) */
.badge-pengecek { background: #f3e8fd; color: #8b3fd6; margin-top: 4px; font-size: 10.5px; padding: 3px 9px; display: inline-block; }
#tableUser .username-code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#tableUser td { overflow-wrap: anywhere; }

/* Ikon kalender di topbar: biru utama sistem (seperti tombol menu), tulisan tidak berubah */
.topbar-datetime > svg { stroke: #185FA5; }

/* ===== APPROVAL: tabel detail karyawan muat penuh di laptop (tanpa harus digeser) ===== */
@media (min-width: 901px) and (max-width: 1500px) {
  .approval-detail-panel .employee-table th,
  .approval-detail-panel .employee-table td { padding: 10px 6px; }
  .approval-detail-panel .employee-table th { font-size: 9.5px; letter-spacing: 0; white-space: normal; line-height: 1.25; }
  .approval-detail-panel .employee-table td { font-size: 12px; white-space: normal; }
  .approval-detail-panel .employee-table .division-tag { white-space: normal; font-size: 10.5px; padding: 3px 8px; }
}

/* ===== AUDIT TRAIL di tablet: kolom cari memakai satu baris penuh, filter lain tersusun rapi di bawahnya ===== */
@media (min-width: 701px) and (max-width: 900px) {
  .rekap-filter-row:has(#searchAudit) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: end;
  }
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item { min-width: 0; width: 100%; max-width: none; }
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item:nth-child(1) { grid-column: 1 / -1; }
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item:nth-child(2),
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item:nth-child(3) { grid-column: span 2; }
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item:nth-child(4),
  .rekap-filter-row:has(#searchAudit) > .rekap-filter-item:nth-child(5) { grid-column: span 2; }
  .rekap-filter-row:has(#searchAudit) .rekap-select,
  .rekap-filter-row:has(#searchAudit) .rekap-search-box,
  .rekap-filter-row:has(#searchAudit) input[type="date"] { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; }
}

/* ===== Ikon "Aman & Terpercaya": perisai bercentang di dalam bulatan ===== */
.ikon-aman { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; }
.ikon-aman svg { display: block; }
.ikon-aman-gelap { background: rgba(127, 180, 230, .18); box-shadow: inset 0 0 0 1px rgba(159, 208, 255, .35); }
.ikon-aman-terang { background: #dcebfb; box-shadow: inset 0 0 0 1px #b9d6f5; }
.sidebar-trust { align-items: center; }
.sidebar-trust .ikon-aman { width: 34px; height: 34px; }
.info-box .ikon-aman { margin-top: 1px; }

/* ===== Penyempurnaan tampilan dashboard dan login (6 Nov 2026) ===== */

/* Dashboard: banner lebih ringkas supaya kartu dan grafik terlihat tanpa menggulir */
.welcome-banner { min-height: 150px; margin-bottom: 20px; }
.banner-content { padding: 22px 32px; }
.banner-content h1 { margin: 2px 0 6px; }
.banner-desc { margin-bottom: 14px; }

/* Kartu angka: keterangan lebih gelap agar terbaca dari jauh; di layar laptop kartu sedikit lebih rapat */
.stat-sub { color: #667085; }
@media (min-width: 901px) and (max-width: 1500px) {
  .stat-card { padding: 16px; gap: 12px; }
  .stat-icon { width: 40px; height: 40px; border-radius: 11px; }
  .stat-label { font-size: 12px; }
}

/* Tiga panel: kolom Piket Terbaru lebih lebar supaya nama tidak terpotong */
@media (min-width: 1101px) {
  .charts-row { grid-template-columns: 1.05fr 0.95fr 1.3fr; }
}
.panel-header { flex-wrap: wrap; gap: 8px 12px; }
.panel-header h2 { min-width: 0; }
.recent-info p { font-size: 12.5px; }
.recent-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #667085; }

/* Keadaan kosong grafik jam lembur */
.chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 34px 16px 24px; color: #667085; }
.chart-empty svg { color: #b8c4d6; }
.chart-empty p { font-size: 12.5px; line-height: 1.5; max-width: 240px; }

/* Login: panel kiri tersusun dari atas dengan jarak tetap (tidak lagi direnggangkan mengikuti tinggi layar) */
@media (min-width: 901px) {
  .visual-side { justify-content: flex-start; }
  .visual-top { margin-bottom: clamp(44px, 9vh, 90px); }
  .visual-footer { margin-top: auto; padding-top: 28px; }
}

/* Kartu angka dashboard: garis warna di tepi atas, sesuai warna ikon, dan efek angkat halus */
.stats-row > .stat-card { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.stats-row > .stat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--aksen, #185FA5); }
.stats-row > .stat-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: var(--aksen, #185FA5); opacity: .07; pointer-events: none; }
.stats-row > .stat-warning { --aksen: #e8a317; }
.stats-row > .stat-success { --aksen: #1e9e5a; }
.stats-row > .stat-info { --aksen: #2a79c4; }
.stats-row > .stat-purple { --aksen: #8b3fd6; }
.stats-row > .stat-card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .stats-row > .stat-card { transition: none; } .stats-row > .stat-card:hover { transform: none; } }

/* Kartu ringkasan kecil di Approval, Audit Trail, Laporan, dan Piket: garis warna di tepi atas, senada dengan dashboard */
.mini-stats-row > .mini-stat-card { overflow: hidden; }
.mini-stats-row > .mini-stat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--aksen, #185FA5); }
.mini-stat-card:has(.icon-total) { --aksen: #2a79c4; }
.mini-stat-card:has(.icon-warning) { --aksen: #e8a317; }
.mini-stat-card:has(.icon-success) { --aksen: #1e9e5a; }
.mini-stat-card:has(.icon-danger) { --aksen: #c73a39; }
.mini-stat-card:has(.icon-purple) { --aksen: #8b3fd6; }

/* Kartu ringkasan: blok angka dan label selalu di samping ikon (boleh menyusut), tidak turun ke bawah ikon */
.mini-stats-row > .mini-stat-card > div:not(.mini-stat-icon) { flex: 1 1 0; min-width: 0; }
.mini-stats-row .mini-stat-label { overflow-wrap: anywhere; line-height: 1.3; }

/* HP (terutama Safari iPhone): kotak tanggal menyusut mengikuti kolomnya, tidak melebihi kartu, dan tampil seperti kotak isian lain */
@media (max-width: 700px) {
  input[type="date"].filter-select-sm,
  input[type="date"].rekap-select,
  input[type="date"].date-filter,
  input[type="date"].rekap-tanggal {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
    min-height: 44px; padding: 0 12px; margin: 0;
    background: #fff; border: 1.5px solid #e3e7ee; border-radius: 8px;
    font-family: "Poppins", sans-serif; font-size: 13px; color: #2d3648; text-align: left;
  }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
  input[type="date"]::-webkit-datetime-edit { padding: 0; }
  .rekap-filter-item, .rekap-filter-baris2 > div { min-width: 0; }
}

/* HP dan tablet (layar sentuh): tulisan petunjuk pada kotak tanggal yang kosong, tepat di tengah kotak */
@media (pointer: coarse) {
  input[type="date"].tgl-kosong::before { content: attr(data-ph); color: #8a94a3; line-height: 42px; }
  input[type="date"].tgl-kosong:focus::before { content: ""; }
}

/* Tablet dan iPad (layar sentuh lebih lebar): bentuk kotak tanggal disamakan dengan kotak isian lain; lebarnya tidak diubah */
@media (pointer: coarse) and (min-width: 701px) {
  input[type="date"].filter-select-sm,
  input[type="date"].rekap-select,
  input[type="date"].date-filter,
  input[type="date"].rekap-tanggal {
    -webkit-appearance: none; appearance: none;
    min-height: 42px; padding: 0 12px; box-sizing: border-box;
    background: #fff; border: 1.5px solid #e3e7ee; border-radius: 8px;
    font-family: "Poppins", sans-serif; font-size: 13px; color: #2d3648; text-align: left;
  }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
  input[type="date"].tgl-kosong::before { line-height: 40px; }
}

/* Tab Approval: tulisan dan jumlah selalu satu baris, lebar tab menyesuaikan isinya */
.approval-tabs .approval-tab { flex: 1 1 auto; white-space: nowrap; padding: 8px 8px; }