/* =====================================================
   SiTamu · Perumda BPR Bank Kota Kediri
   File   : assets/css/style.css
   Desc   : Style global & komponen reusable (plain CSS,
            karena @apply tidak tersedia di Play CDN)
   ===================================================== */

:root{
  --c-primary:#0061C6;
  --c-primary-dark:#004DA1;
  --c-primary-soft:#E0EDFF;
  --c-accent:#F0B429;
  --c-border:#D8E1EC;
  --c-text:#0F2544;
  --c-muted:#5B6B80;
  --c-danger:#DC2626;
  --c-success:#16A34A;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:'Outfit',ui-sans-serif,system-ui,sans-serif; color:var(--c-text); background:#F4F7FB; }
::selection{ background:var(--c-primary); color:#fff; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#B9C6D6; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#8FA2B8; }
*{ scrollbar-width:thin; scrollbar-color:#B9C6D6 transparent; }

/* ---------- Form ---------- */
.label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:#33465E; margin-bottom:.4rem; }
.label .req{ color:var(--c-danger); }

.input, .select, .textarea{
  width:100%; background:#fff; border:1px solid var(--c-border);
  border-radius:.65rem; padding:.62rem .9rem; font-size:.925rem;
  color:var(--c-text); transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder{ color:#9AA9BC; }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(0,97,198,.15);
}
.input-error{ border-color:var(--c-danger)!important; box-shadow:0 0 0 3px rgba(220,38,38,.12)!important; }
.error-text{ display:none; margin-top:.35rem; font-size:.75rem; color:var(--c-danger); }
.is-invalid .error-text{ display:block; }

.select{
  appearance:none; padding-right:2.4rem; background-repeat:no-repeat;
  background-position:right .8rem center; background-size:1rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

input[type='checkbox'], input[type='radio']{ accent-color:var(--c-primary); }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.875rem; border-radius:.65rem; padding:.62rem 1.15rem;
  border:1px solid transparent; cursor:pointer; transition:all .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn-primary{ background:var(--c-primary); color:#fff; box-shadow:0 2px 8px rgba(0,97,198,.35); }
.btn-primary:hover{ background:var(--c-primary-dark); }
.btn-outline{ background:#fff; color:var(--c-primary); border-color:var(--c-primary); }
.btn-outline:hover{ background:var(--c-primary-soft); }
.btn-ghost{ background:transparent; color:#41546E; }
.btn-ghost:hover{ background:#E7EEF6; }
.btn-danger{ background:var(--c-danger); color:#fff; }
.btn-danger:hover{ background:#B91C1C; }
.btn-sm{ padding:.38rem .7rem; font-size:.78rem; border-radius:.5rem; }

/* ---------- Card & Tabel ---------- */
.card{ background:#fff; border:1px solid #E3EAF2; border-radius:1rem;
  box-shadow:0 1px 2px rgba(6,32,63,.05), 0 4px 16px rgba(6,32,63,.06); }

.table-base{ width:100%; font-size:.875rem; border-collapse:collapse; }
.table-base thead th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:#64748B; background:#F1F5F9; padding:.65rem 1rem; border-bottom:1px solid var(--c-border); white-space:nowrap; }
.table-base tbody td{ padding:.7rem 1rem; border-bottom:1px solid #EDF2F7; vertical-align:middle; }
.table-base tbody tr:hover{ background:#F7FAFD; }

/* ---------- Badge ---------- */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600;
  padding:.18rem .6rem; border-radius:999px; white-space:nowrap; }
.badge-xs{ font-size:.62rem; padding:.1rem .5rem; }
.badge-blue { background:#E0EDFF; color:#004DA1; }
.badge-green{ background:#DCFCE7; color:#15803D; }
.badge-amber{ background:#FEF3C7; color:#B45309; }
.badge-red  { background:#FEE2E2; color:#B91C1C; }
.badge-gray { background:#EEF2F6; color:#475569; }

/* ---------- Animasi ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.animate-fade-up{ animation:fadeUp .45s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.animate-fade-in{ animation:fadeIn .3s ease both; }
@keyframes shake{ 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-3px)} 40%,60%{transform:translateX(3px)} }
.animate-shake{ animation:shake .4s ease; }

/* ---------- Toast ---------- */
#toast-wrap{ position:fixed; top:1rem; right:1rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast{ min-width:240px; max-width:340px; background:#0F2544; color:#fff; border-radius:.7rem;
  padding:.7rem 1rem; font-size:.85rem; box-shadow:0 8px 24px rgba(6,32,63,.35);
  display:flex; gap:.55rem; align-items:flex-start; animation:fadeUp .3s ease; }
.toast .dot{ width:8px; height:8px; border-radius:999px; margin-top:5px; flex:none; }
.toast-success .dot{ background:#4ADE80; }
.toast-error   .dot{ background:#F87171; }
.toast-info    .dot{ background:#60A5FA; }

/* ---------- Captcha ---------- */
.captcha-box{ display:flex; align-items:center; gap:.6rem; }
.captcha-canvas{ border:1px solid var(--c-border); border-radius:.65rem; background:#F8FAFC; cursor:pointer; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(6,32,63,.55); backdrop-filter:blur(2px); }
.modal-card{ position:relative; width:100%; max-width:560px; max-height:90vh; overflow:auto;
  background:#fff; border-radius:1rem; box-shadow:0 20px 60px rgba(6,32,63,.35); animation:fadeUp .25s ease; }
/* ---------- Animasi tutup modal ---------- */
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }
@keyframes cardDown{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to  { opacity:0; transform:translateY(12px) scale(.98); }
}
.modal.closing{ pointer-events:none; }
.modal.closing .modal-backdrop{ animation:fadeOut .2s ease both; }
.modal.closing .modal-card{ animation:cardDown .2s ease both; }

/* ---------- Sidebar Admin ---------- */
#sidebar{
  position: fixed;
  z-index: 60;
  top: 0;
  bottom: 0;
  left: 0;
  width: 17rem;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
body.sidebar-open #sidebar{ transform: translateX(0); }

@media (min-width: 1024px){
  #sidebar{
    position: sticky;
    top: 0;
    z-index: 40;                 /* sejajar topbar, di bawah modal (80) */
    width: 17rem;                /* menimpa lg:w-64 via spesifisitas ID */
    height: 100vh;
    height: 100dvh;              /* fallback aman di browser mobile-landscape */
    transform: none;
    flex: none;                  /* jangan menyusut di dalam flex layout */
    box-shadow: 4px 0 24px rgba(6,32,63,.25); /* depth halus di tepi kanan */
  }
}
.sidebar-link{ display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:.6rem;
  font-size:.875rem; color:#C7D4E4; transition:all .15s; }
.sidebar-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar-link.active{ background:var(--c-primary); color:#fff; box-shadow:0 4px 14px rgba(0,97,198,.4); }

/* ---------- Tombol aksi ikon (ber-background + hover) ---------- */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; flex:none;
  border-radius:.55rem; border:1px solid transparent;
  transition:all .15s ease; cursor:pointer;
}
.icon-btn svg{ width:1rem; height:1rem; }
.icon-btn:active{ transform:translateY(1px); }

.icon-btn-blue { background:#E0EDFF; color:#0061C6; }
.icon-btn-blue:hover{ background:#0061C6; color:#fff; box-shadow:0 4px 12px rgba(0,97,198,.35); }

.icon-btn-green{ background:#DCFCE7; color:#16A34A; }
.icon-btn-green:hover{ background:#16A34A; color:#fff; box-shadow:0 4px 12px rgba(22,163,74,.35); }

.icon-btn-red{ background:#FEE2E2; color:#DC2626; }
.icon-btn-red:hover{ background:#DC2626; color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.35); }

.icon-btn-amber{ background:#FEF3C7; color:#B45309; }
.icon-btn-amber:hover{ background:#F0B429; color:#fff; box-shadow:0 4px 12px rgba(240,180,41,.45); }

.text-center {
  text-align: center !important;
}