.adminShell{display:grid; grid-template-columns: 240px 1fr; min-height: 100vh; position: relative; z-index: 1}
.adminSide{
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  padding: 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow: hidden;
}
.adminSide__brand{display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 10px 24px rgba(17,24,39,.08)}
.adminSide__marks{display:flex; align-items:center; gap:6px}
.adminSide__mark{background: linear-gradient(135deg, var(--accent2), var(--accent)); color:#fff; padding: 6px 8px; border-radius: 10px; font-weight: 900; letter-spacing: .4px}
.adminSide__mark--img{
  background: transparent;
  padding: 0;
  border-radius: 10px;
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.adminSide__mark--img img{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  object-fit:contain;
  display:block;
}
.adminSide__name{font-weight: 900; font-size: 14px}
.adminNav{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin-top: 10px;
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}
.adminNav::-webkit-scrollbar{width: 8px}
.adminNav::-webkit-scrollbar-thumb{background: color-mix(in srgb, var(--muted) 25%, transparent); border-radius: 999px}
.adminNav::-webkit-scrollbar-track{background: transparent}
.adminNav__link{display:flex; align-items:center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--muted); font-size: 14px}
.adminNav__link:hover{background: var(--surface2); color: var(--text)}
.adminNav__link .msr{font-size: 20px}
.adminSide__footer{
  position: static;
  margin-top: auto;
  display:flex;
  gap: 8px;
  flex-direction:column;
}
.adminSide__mini{display:flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 14px}
.adminSide__mini:hover{color: var(--text); background: var(--surface2)}

/* Split button untuk Lihat Situs dan Logout */
.adminSide__split{
  display: flex;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  gap: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.adminSide__split__left,
.adminSide__split__right{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all .2s ease;
  position: relative;
}
.adminSide__split__left{
  border-right: 1px solid var(--border);
}
.adminSide__split__left:hover{
  color: var(--text);
  background: var(--surface2);
  transform: translateY(-1px);
}
.adminSide__split__right:hover{
  color: var(--text);
  background: var(--surface2);
  transform: translateY(-1px);
}
.adminSide__split__left:active,
.adminSide__split__right:active{
  transform: translateY(0);
}
.adminSide__split__left .msr,
.adminSide__split__right .msr{
  font-size: 18px;
}

.adminMain{min-width:0}
.adminTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
}
.adminTop__left{
  display: flex;
  align-items: center;
  gap: 12px;
}
.adminTop__right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.adminTop__title{font-weight: 950; font-size: 18px}
.adminTop__sub{color: var(--muted); font-size: 12px; margin-top: 4px}
.adminContent{padding: 18px; width: min(1200px, calc(100% - 20px))}

.adminAuth{display:grid; place-items:center; min-height: 100vh}
.adminAuth__wrap{width: min(520px, calc(100% - 26px)); position: relative; z-index: 1}
.authThemeFloat{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  padding: 10px;
  border-radius: 14px;
}
.authCard{
  border: 1px solid var(--border);
  border-radius: 22px;
  /* lebih solid supaya partikel benar-benar "di belakang konten", bukan terlihat menembus card */
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  padding: 18px;
  text-align: center;
}
.authCard__title{font-weight: 950; font-size: 22px}
.authCard__logoWrap{display:flex; justify-content:center; margin: 6px 0 10px}
.authCard__logo{
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 12px;
  padding: 6px;
}
.authCard__underline{
  height: 3px;
  width: 98px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 999px;
  background: #800000;
}
.authCard__form{margin-top: 14px; display:flex; flex-direction:column; gap: 12px}
.authCard__form .formRow{text-align: left}

.btn--maroon{
  color: #fff;
  font-weight: 800;
  border-color: #800000;
  background: #800000;
  width: 100%;
  justify-content: center;
}
.btn--maroon:hover{filter: brightness(1.03)}

.formRow{display:flex; flex-direction:column; gap: 8px}
.label{font-weight: 700; font-size: 13px}
.passwordWrapper{
  position: relative;
  display: block;
}
.passwordToggle{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  z-index: 10;
  height: auto;
  width: auto;
}
.passwordToggle:hover{
  color: var(--text);
  background: var(--surface2);
}
.passwordToggle .msr{
  font-size: 20px;
  line-height: 1;
}
.passwordWrapper .input{
  padding-right: 44px;
}

.input, .textarea, .select{
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 12px;
  outline: none;
}

/* Caret color untuk light mode (day mode) - hitam agar terlihat di background putih */
.input, .textarea, .select,
input, textarea, select,
[contenteditable="true"], [contenteditable] {
  caret-color: #111827 !important;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Caret color untuk dark mode - putih */
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] [contenteditable="true"],
html[data-theme="dark"] [contenteditable] {
  caret-color: #ffffff !important;
}

/* Dropdown option styling untuk dark mode */
html[data-theme="dark"] .select option{
  background: #0b1020 !important;
  color: rgba(255,255,255,.92) !important;
}
html[data-theme="dark"] .select option:hover,
html[data-theme="dark"] .select option:checked{
  background: rgba(128,0,0,.3) !important;
  color: #fff !important;
}
.textarea{min-height: 120px; resize: vertical}
.help{color: var(--muted); font-size: 12px}
.row2{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.row3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px}
.check{display:flex; gap: 10px; align-items:center; color: var(--muted)}

/* Logo toggles (Settings -> Brand) */
.logoUseWrap{
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent2) 10%, var(--surface)),
    color-mix(in srgb, var(--accent) 8%, var(--surface))
  );
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
}
.logoUseWrap__head{display:flex; flex-direction:column; gap:6px; margin-bottom: 12px}
.logoUseWrap__title{font-weight: 950}
.logoUseWrap__sub{color: var(--muted); font-size: 12px}

.logoUse{
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.logoUse + .logoUse{margin-top: 12px}
.logoUse__head{display:flex; flex-direction:column; gap: 6px; margin-bottom: 10px}
.logoUse__title{font-weight: 950}
.logoUse__sub{color: var(--muted); font-size: 12px}
.logoUse__toggles{display:flex; gap: 10px; flex-wrap: wrap}
.logoToggle{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #ef4444 20%, var(--border));
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  color: color-mix(in srgb, var(--muted) 65%, #ef4444);
  cursor: pointer;
  user-select:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.logoToggle:hover{transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,24,39,.08); color: var(--text)}
.logoToggle input{position:absolute; opacity:0; pointer-events:none}
.logoToggle__text{font-weight: 800}
.logoToggle__icon{font-size: 18px; transition: opacity .15s ease, transform .15s ease}
.logoToggle__icon--on{opacity:0; transform: scale(.9)}
.logoToggle__icon--off{opacity:1; transform: scale(1)}
.logoToggle input:checked ~ .logoToggle__icon--on{opacity: 1; transform: scale(1)}
.logoToggle input:checked ~ .logoToggle__icon--off{opacity: 0; transform: scale(.9)}
.logoToggle:has(input:checked){
  border-color: color-mix(in srgb, #22c55e 26%, var(--border));
  background: color-mix(in srgb, #22c55e 12%, var(--surface));
  color: color-mix(in srgb, var(--text) 75%, #16a34a);
}

.tabs{display:flex; flex-wrap: wrap; gap: 8px}
.tab{
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.tab:hover{transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,24,39,.08); color: var(--text)}
.tab.is-active{
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 18%, var(--surface)), color-mix(in srgb, var(--accent) 14%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.tabPane{display:none}
.tabPane.is-active{display:block}
.tabPane__head{margin: 6px 0 12px}
.tabPane__title{font-weight: 950; font-size: 16px}
.tabPane__sub{color: var(--muted); font-size: 12px; margin-top: 4px}

.segmented{
  display:inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background: var(--surface);
}
.segmented__opt{position: relative; cursor:pointer}
.segmented__opt input{position:absolute; opacity:0; pointer-events:none}
.segmented__opt span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  min-width: 92px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  transition: background .18s ease, color .18s ease;
}
.segmented__opt:last-child span{border-right:0}
.segmented__opt input:checked + span{
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 18%, var(--surface)), color-mix(in srgb, var(--accent) 14%, var(--surface)));
}

.imgSetting{padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent)}
.imgSetting__grid{display:grid; grid-template-columns: 1fr 320px; gap: 12px}
.imgSetting__fields{display:flex; flex-direction:column; gap: 12px}
.imgSetting__preview .label{margin-bottom: 8px}
.imgSetting__box{border: 1px solid var(--border); border-radius: 16px; overflow:hidden; background: var(--surface)}
.imgSetting__box img{display:block; width:100%; height: 150px; object-fit: cover; background: var(--surface2)}

.cardGrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px}
.stat{padding: 12px; display: flex; flex-direction: column; gap: 8px}
.stat__header{display: flex; align-items: center; justify-content: space-between; gap: 12px}
.stat__k{color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap}
.stat__v{font-weight: 950; font-size: 24px; line-height: 1; flex-shrink: 0}
.stat__a{margin-top: auto; display:inline-flex; font-size: 12px; padding: 6px 12px}

/* Quick Menu Grid untuk Operator - 3 kolom di mobile dan desktop */
.quickMenuGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.quickMenuCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 8px 20px rgba(17,24,39,.06);
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease;
}
.quickMenuCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17,24,39,.12);
  background: var(--surface);
}
.quickMenuCard__icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 18%, var(--surface)), color-mix(in srgb, var(--accent) 14%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.quickMenuCard__icon .msr{
  font-size: 32px;
  line-height: 1;
}
.quickMenuCard__label{
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  color: var(--text);
}

/* Admin Dashboard - Grid untuk statistik */
.cardGrid--admin{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

/* Statistik Pengunjung - Desain Modern dengan Animasi */
.visitorStatsCard{
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 8px 24px rgba(17,24,39,.08);
  overflow: hidden;
  animation: fadeInUp .4s ease;
}
@keyframes fadeInUp{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
.visitorStatsCard__header{
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 12%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface)));
}
.visitorStatsCard__title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
}
.visitorStatsCard__title .msr{
  font-size: 22px;
  color: var(--accent);
}
.visitorStatsCard__body{
  padding: 18px;
}
.visitorStatsKpi{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.visitorStatsKpi__item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.visitorStatsKpi__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17,24,39,.1);
}
.visitorStatsKpi__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 20%, var(--surface)), color-mix(in srgb, var(--accent) 16%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.visitorStatsKpi__icon .msr{
  font-size: 24px;
}
.visitorStatsKpi__icon--total{
  background: linear-gradient(135deg, color-mix(in srgb, #22c55e 20%, var(--surface)), color-mix(in srgb, #16a34a 16%, var(--surface)));
  border-color: color-mix(in srgb, #22c55e 25%, var(--border));
  color: #22c55e;
}
.visitorStatsKpi__content{
  flex: 1;
  min-width: 0;
}
.visitorStatsKpi__label{
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.visitorStatsKpi__value{
  font-weight: 950;
  font-size: 24px;
  color: var(--text);
  line-height: 1.2;
  animation: countUp .8s ease;
}
@keyframes countUp{
  from{
    opacity: 0;
    transform: scale(.8);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}
.visitorStatsChart{
  margin-top: 20px;
}
.visitorStatsChart__canvasWrapper{
  position: relative;
  height: 280px;
  width: 100%;
  padding: 12px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.visitorStatsChart__canvasWrapper canvas{
  max-height: 100%;
}
.visitorStatsChart__container{
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.visitorStatsChart__yAxis{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 32px;
  padding-right: 8px;
  border-right: 1px solid var(--border);
  height: 120px;
}
.visitorStatsChart__yLabel{
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-align: right;
  line-height: 1;
  padding-right: 8px;
}
.visitorStatsChart__chartArea{
  flex: 1;
  position: relative;
  height: 120px;
}
.visitorStatsChart__grid{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.visitorStatsChart__gridLine{
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  border-top: 1px dashed var(--border);
}
.visitorStatsChart__bars{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  padding: 0 4px;
  position: relative;
  z-index: 1;
}
.visitorStatsChart__barWrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: pointer;
  transition: transform .2s ease;
}
.visitorStatsChart__barWrap:hover{
  transform: translateY(-2px);
}
.visitorStatsChart__barWrap:hover .visitorStatsChart__bar{
  opacity: 1;
  transform: scaleY(1.05);
}
.visitorStatsChart__bar{
  width: 100%;
  min-height: 2px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  position: relative;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: barGrow .8s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
  opacity: .9;
  box-shadow: 0 2px 8px rgba(128, 0, 0, .2);
}
.visitorStatsChart__barWrap:hover .visitorStatsChart__bar{
  box-shadow: 0 4px 12px rgba(128, 0, 0, .3);
}
@keyframes barGrow{
  from{
    height: 0 !important;
    opacity: 0;
    transform: scaleY(0);
  }
  to{
    opacity: .9;
    transform: scaleY(1);
  }
}
.visitorStatsChart__bar--empty{
  background: var(--surface2);
  opacity: .4;
  box-shadow: none;
}
.visitorStatsChart__barValue{
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 10;
}
.visitorStatsChart__barWrap:hover .visitorStatsChart__barValue{
  opacity: 1;
}
.visitorStatsChart__label{
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  margin-top: 6px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  max-width: 100%;
}

.tableWrap{
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
  position: relative;
  display: flex;
  flex-direction: column;
}
.tableTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  position: relative;
  z-index: 10;
}
.tableTop__title{font-weight: 900}
.tableTop__right{display:flex; gap: 8px; align-items:center}
/* ListBar (search dan filter) - tidak ikut scroll */
.tableWrap > .listBar,
.tableWrap > form.listBar{
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
/* Pagination - tidak ikut scroll */
.tableWrap > .pager{
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
/* Wrapper scroll khusus untuk tabel saja - search/filter tidak ikut */
.tableScrollWrapper{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface);
  -ms-overflow-style: scrollbar;
  width: 100%;
  flex: 1;
  min-width: 0;
}
/* Jika tabel langsung di dalam tableWrap tanpa wrapper, buat wrapper otomatis */
.tableWrap > .table{
  display: block;
  width: 100%;
  /* Hapus min-width: 100% agar tabel menyesuaikan dengan konten kolom */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface);
  -ms-overflow-style: scrollbar;
}
/* Tambahkan ruang di akhir scroll dengan pseudo-element pada tbody */
.tableWrap > .table tbody::after{
  content: '';
  display: table-cell;
  width: 20px;
  min-width: 20px;
  padding: 0;
  visibility: hidden;
}
/* Pastikan ada ruang di akhir scroll untuk kolom aksi - tambahkan padding pada tbody */
.tableWrap > .table tbody{
  padding-right: 20px;
  box-sizing: border-box;
}
.tableWrap > .table::-webkit-scrollbar{
  height: 12px;
  display: block;
}
.tableWrap > .table::-webkit-scrollbar-track{
  background: var(--surface);
  border-radius: 8px;
  margin: 2px 4px;
}
.tableWrap > .table::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 8px;
  border: 2px solid var(--surface);
  min-width: 40px;
  cursor: grab;
}
.tableWrap > .table::-webkit-scrollbar-thumb:active{
  cursor: grabbing;
  background: var(--accent2);
}
.tableWrap > .table::-webkit-scrollbar-thumb:hover{
  background: var(--accent2);
}
/* Pastikan struktur tabel tetap terjaga */
.tableWrap > .table thead,
.tableWrap > .table tbody{
  display: table;
  width: auto;
  min-width: 100%;
  table-layout: auto;
}
.tableWrap > .table thead{
  display: table-header-group;
}
.tableWrap > .table tbody{
  display: table-row-group;
}
.tableWrap > .table tr{
  display: table-row;
}
.tableWrap > .table th,
.tableWrap > .table td{
  display: table-cell;
}
.tableScrollWrapper::-webkit-scrollbar{
  height: 12px;
  display: block;
}
.tableScrollWrapper::-webkit-scrollbar-track{
  background: var(--surface);
  border-radius: 8px;
  margin: 2px 4px;
}
.tableScrollWrapper::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 8px;
  border: 2px solid var(--surface);
  min-width: 40px;
  cursor: grab;
}
.tableScrollWrapper::-webkit-scrollbar-thumb:active{
  cursor: grabbing;
  background: var(--accent2);
}
.tableScrollWrapper::-webkit-scrollbar-thumb:hover{
  background: var(--accent2);
}
.table{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  /* Hapus min-width: 100% agar tabel menyesuaikan dengan konten, bukan container */
}
.table th, .table td{padding: 12px 14px; border-bottom: 1px solid var(--border); text-align:left; vertical-align: top}
.table th{font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap}
.table tr:hover td{background: var(--surface2)}
/* Kolom No. - kecil */
.table th:nth-child(1),
.table td:nth-child(1){
  width: 60px;
  min-width: 60px;
  text-align: center;
  white-space: nowrap;
}
/* Kolom Foto - sedang */
.table th:nth-child(2),
.table td:nth-child(2){
  width: 100px;
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
}
/* Kolom Judul - lebar, bisa wrap */
.table th:nth-child(3),
.table td:nth-child(3){
  min-width: 200px;
  max-width: 400px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
  text-align: left;
}
/* Kolom Kategori - sedang */
.table th:nth-child(4),
.table td:nth-child(4){
  min-width: 130px;
  white-space: nowrap;
}
/* Kolom Populer - kecil */
.table th:nth-child(5),
.table td:nth-child(5){
  width: 90px;
  min-width: 90px;
  text-align: center;
  white-space: nowrap;
}
/* Kolom Status - sedang */
.table th:nth-child(6),
.table td:nth-child(6){
  min-width: 110px;
  white-space: nowrap;
}
/* Kolom Status untuk tabel berita (gabungan Status + Publish) */
/* Tabel berita memiliki 7 kolom: No, Foto, Judul, Kategori, Populer, Status, Aksi */
.table th:nth-child(6):nth-last-child(2),
.table td:nth-child(6):nth-last-child(2) {
  min-width: 150px;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}
/* Kolom Publish - sedang (tidak digunakan lagi di berita, tapi tetap ada untuk tabel lain) */
.table th:nth-child(7),
.table td:nth-child(7){
  min-width: 150px;
  white-space: nowrap;
}
/* Kolom Aksi - fixed width, nowrap, pastikan cukup lebar untuk semua button */
.table th:last-child{
  white-space: nowrap;
  width: auto;
  min-width: 240px;
  padding-right: 32px;
  text-align: center;
}
.table td:last-child{
  white-space: nowrap;
  width: auto;
  min-width: 240px;
  padding-right: 32px;
}
/* Kolom URL: batasi lebar dan wrap text */
.table__url{
  max-width: 280px;
  min-width: 200px;
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.table__url .badge{
  max-width: 100%;
  white-space: normal;
  word-break: break-all;
  display: inline-block;
  line-height: 1.4;
}

/* ============================================
   STYLING KHUSUS PER TABEL
   ============================================ */

/* IKM - Kolom Pertanyaan (kolom ke-2) harus wrapping */
/* Tabel IKM memiliki 5 kolom: No, Pertanyaan, Urut, Status, Aksi */
/* Target: kolom ke-2 dari tabel dengan 5 kolom total */
.table thead tr th:nth-child(2):nth-last-child(4),
.table tbody tr td:nth-child(2):nth-last-child(4) {
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
  min-width: 250px !important;
  max-width: 500px !important;
}

/* Users - Kolom Nama (kolom ke-2) harus rata kiri */
/* Tabel Users memiliki 7 kolom: No, Nama, Email, Role, Satuan/Unit, Dibuat, Aksi */
/* Target: kolom ke-2 dari tabel dengan 7 kolom total */
.table thead tr th:nth-child(2):nth-last-child(6),
.table tbody tr td:nth-child(2):nth-last-child(6) {
  text-align: left !important;
}

/* Menu - Kolom Judul harus rata kiri */
/* Menu bisa memiliki kolom Judul di posisi ke-2 atau ke-3 tergantung ada Parent */
/* Jika ada Parent: No, Parent, Judul, Tipe, URL, Urut, Status, Aksi (8 kolom) */
/* Jika tidak ada Parent: No, Judul, Tipe, URL, Urut, Status, Aksi (7 kolom) */
/* Target kolom ke-3 yang merupakan Judul (ketika ada Parent - 8 kolom) */
.table thead tr th:nth-child(3):nth-last-child(6),
.table tbody tr td:nth-child(3):nth-last-child(6) {
  text-align: left !important;
}
/* Target kolom ke-2 yang merupakan Judul untuk Menu tanpa Parent (7 kolom) */
/* Catatan: Ini akan juga mempengaruhi Users, tapi Users juga perlu rata kiri untuk kolom Nama */
/* Jadi tidak masalah karena keduanya memang perlu rata kiri */

/* Halaman - Kolom Judul (kolom ke-2) harus rata kiri */
/* Tabel Halaman memiliki 6 kolom: No, Judul, Slug, Status, Update, Aksi */
/* Target: kolom ke-2 dari tabel dengan 6 kolom total */
.table thead tr th:nth-child(2):nth-last-child(5),
.table tbody tr td:nth-child(2):nth-last-child(5) {
  text-align: left !important;
}

/* Kategori - Kolom Nama (kolom ke-2) harus rata kiri */
/* Tabel Kategori memiliki 6 kolom: No, Nama, Slug, Urut, Status, Aksi */
/* Target: kolom ke-2 dari tabel dengan 6 kolom total */
/* Catatan: ini akan sama dengan Halaman, tapi tidak masalah karena keduanya perlu rata kiri */

/* Compact table (khusus list yang perlu muat) */
.table--compact th, .table--compact td{
  padding: 10px 12px;
  font-size: 13px;
}
.table--compact th{font-size: 11px}

.thumbMini{
  width: 54px;
  height: 36px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display:block;
  background: var(--surface);
}
.badge{display:inline-flex; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-size: 12px}
.actions{display:flex; gap: 8px; align-items:center; flex-wrap: nowrap; min-width: fit-content}
/* Button base style */
.btn{
  border: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 22%, var(--surface)), color-mix(in srgb, var(--accent) 16%, var(--surface)));
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
}
.btnLink{
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease;
}
.btnLink:hover{background: var(--surface2)}

.flash{margin-bottom: 12px; border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; background: color-mix(in srgb, var(--accent2) 10%, var(--surface))}

/* List toolbar (search/filter/pagination) */
.listBar{
  margin: 0;
  padding: 14px 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.listBar__mobileHeader{
  display: none;
}
.listBar__toggle{
  display: none;
}
.listBar__q{min-width: min(280px, 100%); flex: 1}
.listBar__filters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  flex: 1;
}
.listBar__filter{min-width: 170px}
.listBar__per{min-width: 140px}
.listBar__actions{
  display:flex;
  gap: 8px;
  align-items: center;
}
/* Pastikan button di listBar memiliki ukuran yang sama */
.listBar__actions .btn,
.listBar__actions .btnLink{
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  height: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Admin Drawer (Mobile) */
.adminDrawer{
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.adminDrawer.is-open{
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.adminDrawer__panel{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
  transform: translateX(-100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1001;
}
.adminDrawer.is-open .adminDrawer__panel{
  transform: translateX(0);
}
.adminDrawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
}
.adminDrawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.adminDrawer__title{
  font-weight: 800;
  font-size: 16px;
}
.adminDrawer__content{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  position: relative;
  z-index: 1;
  min-height: 0;
  width: 100%;
}
.adminDrawer__content .adminSide{
  position: static !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.adminDrawer__content .adminNav{
  margin-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.adminDrawer__content .adminSide__brand{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.adminDrawer__content .adminSide__footer{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.adminDrawer__content .adminNav__link{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text) !important;
}
.adminDrawer__content .adminNav__link .msr{
  display: inline-block !important;
  visibility: visible !important;
}
.adminDrawer__content .adminSide__name{
  color: var(--text) !important;
}
.adminDrawer__content .adminSide__split__left,
.adminDrawer__content .adminSide__split__right{
  color: var(--text) !important;
}
.adminDrawer__content .adminSide__split__left .msr,
.adminDrawer__content .adminSide__split__right .msr{
  display: inline-block !important;
}
.adminDrawer__content .adminSide__marks{
  display: flex !important;
  visibility: visible !important;
}
.adminDrawer__content .adminSide__name{
  visibility: visible !important;
  opacity: 1 !important;
}
.adminDrawer__content .adminSide__split{
  display: flex !important;
  visibility: visible !important;
}
.adminDrawer__content .adminSide__split__left,
.adminDrawer__content .adminSide__split__right{
  display: flex !important;
  visibility: visible !important;
}

/* Mobile: hide sidebar, show hamburger */
@media (max-width: 980px){
  /* Pastikan body dan html tidak memiliki overflow horizontal */
  html, body{
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
  }
  .adminShell{grid-template-columns: 1fr}
  .adminShell > .adminSide{display: none}
  .adminDrawer__content .adminSide{display: flex !important}
  .iconbtn--mobile{display: inline-flex}
  .adminTop__left{
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .adminMain{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .adminContent{
    width: 100%;
    max-width: 100%;
    padding: 12px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .row2,.row3{grid-template-columns: 1fr}
  .imgSetting__grid{grid-template-columns: 1fr}
  /* Dashboard Admin - Compact di mobile (2 kolom) */
  .cardGrid--admin{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cardGrid--admin .stat{
    padding: 10px;
    gap: 6px;
  }
  .cardGrid--admin .stat__header{
    gap: 8px;
  }
  .cardGrid--admin .stat__v{
    font-size: 20px;
  }
  .cardGrid--admin .stat__k{
    font-size: 11px;
  }
  .cardGrid--admin .stat__a{
    font-size: 11px;
    padding: 6px 10px;
    margin-top: 0;
  }
  /* Quick Menu tetap 3 kolom di mobile */
  .quickMenuGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .quickMenuCard{
    padding: 16px 12px;
  }
  .quickMenuCard__icon{
    width: 48px;
    height: 48px;
  }
  .quickMenuCard__icon .msr{
    font-size: 28px;
  }
  .quickMenuCard__label{
    font-size: 12px;
  }
  
  /* Visitor Stats Mobile - Compact */
  .visitorStatsKpi{
    gap: 10px;
    margin-bottom: 16px;
  }
  .visitorStatsKpi__item{
    padding: 12px;
  }
  .visitorStatsKpi__icon{
    width: 40px;
    height: 40px;
  }
  .visitorStatsKpi__icon .msr{
    font-size: 20px;
  }
  .visitorStatsKpi__value{
    font-size: 20px;
  }
  .visitorStatsChart__canvasWrapper{
    height: 220px;
    padding: 8px;
  }
  .visitorStatsChart__yAxis{
    min-width: 28px;
    height: 100px;
  }
  .visitorStatsChart__yLabel{
    font-size: 9px;
  }
  .visitorStatsChart__chartArea{
    height: 100px;
  }
  .visitorStatsChart__bars{
    height: 100%;
    gap: 6px;
  }
  .visitorStatsChart__barValue{
    font-size: 9px;
    padding: 2px 4px;
    top: -20px;
  }
  .visitorStatsChart__label{
    font-size: 8px;
  }
  
  /* Filter Mobile: Show/Hide Toggle */
  .listBar{
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .listBar__mobileHeader{
    display: flex;
    gap: 10px;
    align-items: end;
    width: 100%;
  }
  .listBar__mobileHeader .listBar__q{
    flex: 1;
    min-width: 0;
  }
  .listBar__toggle{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .listBar__filters{
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    align-items: end;
  }
  .listBar[data-filter-open] .listBar__filters{
    display: flex;
  }
  .listBar__filter{
    flex: 1;
    min-width: 0;
  }
  .listBar__filter:nth-child(1),
  .listBar__filter:nth-child(2){
    flex: 1 1 calc(35% - 3px);
    max-width: calc(35% - 3px);
  }
  .listBar__filter:nth-child(n+3){
    flex: 1 1 calc(50% - 3px);
  }
  .listBar__filter .label{
    font-size: 10px;
    margin-bottom: 3px;
    line-height: 1.2;
  }
  .listBar__filter .select{
    font-size: 12px;
    padding: 7px 8px;
    height: auto;
    min-height: 36px;
  }
  .listBar__per{
    display: none;
  }
  .listBar__actions{
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-end;
    gap: 0;
    margin-left: 6px;
    order: 3;
  }
  .listBar__actions .btn{
    display: none;
  }
  .listBar__actions .btnLink{
    padding: 7px 12px;
    font-size: 12px;
    min-height: 36px;
    white-space: nowrap;
  }
  
  /* Table Mobile: Pastikan search/filter tidak ikut scroll */
  .tableWrap{
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Pastikan tidak melebar keluar */
    min-width: 0;
  }
  /* Pastikan tableTop, listBar, dan pager tidak ikut scroll */
  .tableWrap > .tableTop,
  .tableWrap > .listBar,
  .tableWrap > form.listBar{
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    z-index: 10;
  }
  .tableWrap > .pager{
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    padding: 0 14px 14px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    z-index: 10;
  }
  /* Tabel di mobile - hanya tabel yang bisa scroll */
  .tableWrap > .table{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--surface);
    -ms-overflow-style: scrollbar;
    /* Hapus min-width fixed, biarkan tabel menyesuaikan dengan konten kolom */
    width: 100%;
  }
  .tableWrap > .table::-webkit-scrollbar{
    height: 12px;
    display: block;
  }
  .tableWrap > .table::-webkit-scrollbar-track{
    background: var(--surface);
    border-radius: 8px;
    margin: 2px 4px;
  }
  .tableWrap > .table::-webkit-scrollbar-thumb{
    background: var(--accent);
    border-radius: 8px;
    border: 2px solid var(--surface);
    min-width: 40px;
    cursor: grab;
  }
  .tableWrap > .table::-webkit-scrollbar-thumb:active{
    cursor: grabbing;
    background: var(--accent2);
  }
  .tableWrap > .table::-webkit-scrollbar-thumb:hover{
    background: var(--accent2);
  }
  /* Pastikan struktur tabel tetap terjaga di mobile */
  .tableWrap > .table thead,
  .tableWrap > .table tbody{
    display: table;
    width: auto;
    min-width: 100%;
    table-layout: auto;
  }
  .tableWrap > .table thead{
    display: table-header-group;
  }
  .tableWrap > .table tbody{
    display: table-row-group;
  }
  .tableWrap > .table tr{
    display: table-row;
  }
  .tableWrap > .table th,
  .tableWrap > .table td{
    display: table-cell;
  }
  /* Wrapper scroll untuk tabel di mobile */
  .tableScrollWrapper{
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--surface);
    -ms-overflow-style: scrollbar;
    width: 100%;
    flex: 1;
    min-width: 0;
  }
  /* Pastikan tabel memiliki lebar minimum yang cukup - biarkan menyesuaikan konten */
  .tableScrollWrapper > .table{
    width: 100%;
    /* Hapus min-width fixed, biarkan tabel menyesuaikan dengan konten kolom */
  }
  /* Pastikan kolom action tidak terpotong di mobile */
  .tableScrollWrapper > .table th:last-child{
    white-space: nowrap;
    padding-right: 32px;
    min-width: 200px;
    text-align: center;
  }
  .tableScrollWrapper > .table td:last-child{
    white-space: nowrap;
    padding-right: 32px;
    min-width: 200px;
  }
  /* Pastikan judul bisa wrap dengan baik */
  .tableScrollWrapper > .table th:nth-child(3),
  .tableScrollWrapper > .table td:nth-child(3){
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
    min-width: 180px;
  }
  /* Webkit scrollbar styling untuk mobile */
  .tableScrollWrapper::-webkit-scrollbar{
    height: 12px;
    display: block;
  }
  .tableScrollWrapper::-webkit-scrollbar-track{
    background: var(--surface);
    border-radius: 8px;
    margin: 2px 4px;
  }
  .tableScrollWrapper::-webkit-scrollbar-thumb{
    background: var(--accent);
    border-radius: 8px;
    border: 2px solid var(--surface);
    min-width: 40px;
    cursor: grab;
  }
  .tableScrollWrapper::-webkit-scrollbar-thumb:active{
    cursor: grabbing;
    background: var(--accent2);
  }
  .tableScrollWrapper::-webkit-scrollbar-thumb:hover{
    background: var(--accent2);
  }
  /* Jika tabel langsung di dalam tableWrap tanpa wrapper */
  .tableWrap > .table{
    width: 100%;
    /* Hapus min-width fixed, biarkan tabel menyesuaikan dengan konten kolom */
  }
  .table{
    font-size: 12px;
  }
  .table th,
  .table td{
    padding: 10px 12px;
    font-size: 12px;
  }
  .table th{
    font-size: 11px;
    white-space: nowrap;
  }
  .table--compact th,
  .table--compact td{
    padding: 8px 10px;
    font-size: 11px;
  }
  .table--compact th{
    font-size: 10px;
  }
  .thumbMini{
    width: 40px;
    height: 28px;
  }
  .table .actions{
    font-size: 11px;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: fit-content;
  }
  .table .btnLink{
    font-size: 11px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  /* Pastikan kolom AKSI lebih compact dan tidak terpotong */
  .table th:last-child{
    white-space: nowrap;
    min-width: 220px;
    width: auto;
    padding-right: 32px;
    text-align: center;
  }
  .table td:last-child{
    white-space: nowrap;
    min-width: 220px;
    width: auto;
    padding-right: 32px;
  }
  .table .actions{
    justify-content: flex-start;
    min-width: fit-content;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .table .btnLink{
    flex-shrink: 0;
    white-space: nowrap;
    min-width: fit-content;
  }
  .table .badge{
    font-size: 10px;
    padding: 4px 8px;
  }
  
  /* Pagination Mobile */
  .pager{
    flex-direction: column;
    gap: 12px;
    align-items: stretch !important;
  }
  .pager > .card__muted{
    text-align: center;
    font-size: 12px;
  }
  .pager > .actions{
    justify-content: center;
    flex-wrap: wrap;
  }
}
@media (min-width: 981px){
  .iconbtn--mobile{display: none}
  .adminDrawer{display: none}
}

/* Biarkan browser menggunakan default caret-color */