/* --- FONT UTAMA & DASAR --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 - Latar belakang putih keabuan */
    color: #1e293b; /* slate-800 - Teks hitam keabuan */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* --- GAYA HALAMAN LOGIN & MODAL FORM --- */
.login-container, .modal-form-container {
  --form-width: 315px;
  --login-box-color: #ffffff; /* Warna box putih */
  --input-color: #f1f5f9; /* Warna input abu-abu terang */
  --button-color: #facc15; /* Warna tombol kuning */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--login-box-color);
  border-radius: 24px;
  width: calc(var(--form-width) + 1px);
  z-index: 8;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0; /* slate-200 */
}

.login-container::before, .modal-form-container::before {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -2;
  background: conic-gradient(
    from 45deg,
    transparent 75%,
    #facc15, /* Aksen kuning */
    transparent 100%
  );
  animation: spin 4s ease-in-out infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.login-box {
  background: var(--login-box-color);
  border-radius: 24px;
  padding: 28px;
  width: var(--form-width);
  position: relative;
  z-index: 10;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.login-box .form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 15px;
  margin-right: -15px;
}

.login-box .header {
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 6px;
  color: #1e293b; /* Teks header hitam keabuan */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.login-box .input {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 12px;
  background: var(--input-color);
  color: #1e293b; /* Teks input hitam */
  outline: none;
  font-size: 14px;
}

.login-box .input:focus {
  border: 1px solid #facc15; /* Aksen kuning */
}

.login-box .button {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 10px;
  background: var(--button-color);
  color: #1e293b; /* Teks tombol hitam agar kontras dengan kuning */
  transition: 0.3s;
  box-shadow:
    inset 0px 3px 6px -4px rgba(255, 255, 255, 0.6),
    inset 0px -3px 6px -2px rgba(0, 0, 0, 0.2);
}

.login-box .button:hover {
  background: #fbbf24; /* amber-400 */
  box-shadow: 0px 4px 15px -3px rgba(250, 204, 21, 0.4);
}

/* --- GAYA APLIKASI DASBOR --- */

/* --- SCROLLBAR KUSTOM --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #e2e8f0; /* slate-200 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 4px;
    border: 2px solid #e2e8f0;
}
::-webkit-scrollbar-thumb:hover {
    background: #facc15; /* Kuning */
}

/* --- SIDEBAR --- */
#sidebar {
    background-color: #ffffff; /* Sidebar putih */
    border-right: 1px solid #e2e8f0; /* Border abu-abu */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GAYA SIDEBAR COLLAPSED */
#sidebar.collapsed {
    width: 80px;
}
#sidebar.collapsed .sidebar-text,
#sidebar.collapsed #sidebar-header-title,
#sidebar.collapsed #app-logo,
#sidebar.collapsed #logout-btn span {
    display: none;
}
#sidebar.collapsed .sidebar-link {
    justify-content: center;
}
#sidebar.collapsed .sidebar-link svg {
    margin-right: 0;
}
#sidebar.collapsed #sidebar-toggle-desktop svg {
    transform: rotate(180deg);
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: #475569; /* slate-600 */
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent;
    white-space: nowrap;
}
.sidebar-link:hover {
    background-color: #fefce8; /* yellow-50 */
    color: #1e293b;
    border-left-color: #facc15; /* Kuning */
}
.sidebar-link.active {
    background-color: #facc15; /* Kuning */
    color: #1e293b; /* Teks hitam agar kontras */
    font-weight: 600;
    border-left-color: #fbbf24; /* amber-400 */
}
.sidebar-link svg {
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* --- KARTU PRODUK (GRID STYLE) --- */
#pos-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0; /* Menghilangkan jarak antar kartu */
    padding-right: 8px; /* Untuk ruang scrollbar */
}

/* From Uiverse.io by SachinKumar666 - Diadaptasi */
.product-card-grid {
  --card-bg: #ffffff;
  --card-accent: #facc15; /* Kuning */
  --card-text: #1e293b;
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);

  width: 100%;
  aspect-ratio: 190 / 254;
  background: var(--card-bg);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--card-shadow);
  border: 1px solid #e2e8f0; /* slate-200 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  cursor: pointer;
  margin-bottom: 0.5rem; /* Memberi sedikit jarak bawah */
}

.product-card-grid__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card-grid__glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(250, 204, 21, 0.3) 0%, /* Kuning */
    rgba(250, 204, 21, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.product-card-grid__content {
  padding: 1em;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: relative;
  z-index: 2;
}

.product-card-grid__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  padding: 0.25em 0.5em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.4s ease 0.1s;
}

.product-card-grid__image {
  width: 100%;
  height: 90px;
  background: linear-gradient(45deg, #fde68a, #fbbf24); /* Kuning */
  border-radius: 12px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.product-card-grid__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 30%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(250, 204, 21, 0.1) 0px, /* Kuning */
      rgba(250, 204, 21, 0.1) 2px,
      transparent 2px,
      transparent 4px
    );
  opacity: 0.5;
}

.product-card-grid__text {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  flex-grow: 1;
  overflow: hidden; /* Tambahkan ini untuk bekerja dengan text-overflow */
}

.product-card-grid__title {
  color: var(--card-text);
  font-size: 0.9em;
  margin: 0;
  font-weight: 700;
  transition: all 0.3s ease;
  line-height: 1.3;
  white-space: nowrap; /* Mencegah teks turun ke baris baru */
  overflow: hidden; /* Menyembunyikan teks yang berlebih */
  text-overflow: ellipsis; /* Menampilkan "..." */
}

.product-card-grid__description {
  color: var(--card-text);
  font-size: 0.7em;
  margin: 0;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.product-card-grid__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.product-card-grid__price {
  color: var(--card-text);
  font-weight: 700;
  font-size: 0.9em;
  transition: all 0.3s ease;
}

.product-card-grid__button {
  width: 28px;
  height: 28px;
  background: var(--card-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: scale(0.9);
}

/* Hover Effects */
.product-card-grid:hover {
  transform: translateY(-8px);
  box-shadow:
    0 15px 20px -5px rgba(0, 0, 0, 0.1),
    0 8px 8px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(250, 204, 21, 0.4); /* Kuning */
}

.product-card-grid:hover .product-card-grid__shine {
  opacity: 1;
  animation: shine 3s infinite;
}

.product-card-grid:hover .product-card-grid__glow {
  opacity: 1;
}

.product-card-grid:hover .product-card-grid__badge {
  transform: scale(1);
  opacity: 1;
  z-index: 1;
}

.product-card-grid:hover .product-card-grid__image {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.product-card-grid:hover .product-card-grid__title {
  color: var(--card-accent);
}

.product-card-grid:hover .product-card-grid__description {
  opacity: 1;
}

.product-card-grid:hover .product-card-grid__price {
  color: var(--card-accent);
}

.product-card-grid:hover .product-card-grid__button {
  transform: scale(1);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2); /* Kuning */
}

.product-card-grid:hover .product-card-grid__button svg {
  animation: pulse 1.5s infinite;
}

/* Active State */
.product-card-grid:active {
  transform: translateY(-3px) scale(0.98);
}

/* Animations */
@keyframes shine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


/* --- FORM & INPUT UMUM --- */
.input {
    background-color: #f1f5f9; /* slate-100 */
    border: 1px solid #cbd5e1; /* slate-300 */
    color: #1e293b; /* slate-800 */
    border-radius: 0.5rem;
    padding: 0.65rem 1rem;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
    outline: none;
    border-color: #facc15; /* Kuning */
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);
}

/* --- TOMBOL UMUM --- */
button.bg-indigo-600 { /* Ini akan menimpa kelas tailwind */
    background-image: linear-gradient(to right, #facc15, #fbbf24);
    color: #1e293b;
    transition: all 0.2s ease-in-out;
}
button.bg-indigo-600:hover {
    box-shadow: 0 10px 15px -3px rgba(250, 204, 21, 0.4), 0 4px 6px -4px rgba(250, 204, 21, 0.4);
}
button:active {
    transform: scale(0.97);
}

/* --- MODAL UMUM --- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6); /* slate-900 with opacity */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.modal.active { opacity: 1; }
.modal > div {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
.modal.active > div { transform: scale(1); }
.modal:not(.active) { pointer-events: none; }

/* --- TABEL --- */
table thead {
    border-bottom: 2px solid #e2e8f0; /* slate-200 */
}
table th {
    color: #64748b; /* slate-500 */
}
table tbody tr {
    transition: background-color 0.2s ease;
}
table tbody tr:hover {
    background-color: #f1f5f9; /* slate-100 */
}

/* --- RESPONSIVE LAYOUT --- */
@media (max-width: 767px) {
    main { padding: 1rem; }
    #pos-product-grid { 
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }
}

.payment-method-btn {
    padding: 8px;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #475569; /* slate-600 */
    transition: all 0.2s ease-in-out;
}
.payment-method-btn:hover {
    background-color: #f1f5f9; /* slate-100 */
}
.payment-method-btn.active {
    background-color: #facc15; /* Kuning */
    border-color: #facc15;
    color: #1e293b;
    font-weight: 600;
}

/* --- PAGINATION --- */
.pagination-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pagination-btn {
    border: 1px solid #cbd5e1; /* slate-300 */
    background-color: #ffffff;
    color: #475569; /* slate-600 */
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    cursor: pointer;
}
.pagination-btn:hover:not(.disabled) {
    background-color: #f1f5f9; /* slate-100 */
}
.pagination-btn.active {
    background-color: #facc15; /* Kuning */
    border-color: #facc15;
    color: #1e293b;
    font-weight: 600;
}
.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* --- GAYA BARU UNTUK KERANJANG BELANJA --- */
/* From Uiverse.io by mi-series */

#transaction-card-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    height: 100%;
}

.checkout-card {
  width: 100%;
  /* max-width: 400px; */ /* Dihapus agar lebarnya penuh */
  background: #fefce8; /* yellow-50 */
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 19px;
  display: flex;
  flex-direction: column;
  height: 100%; /* Membuat kartu mengisi tinggi kontainer */
}

.checkout-card hr {
  height: 1px;
  background-color: #fde68a; /* yellow-200 */
  border: none;
  margin: 0 20px;
}

.checkout-card .title {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #fde68a; /* yellow-200 */
  font-weight: 700;
  font-size: 14px;
  color: #a16207; /* yellow-700 */
}

/* Cart */
.checkout-card .cart {
  padding: 20px;
  overflow-y: auto;
  max-height: 250px; /* Batas tinggi maksimal, bisa disesuaikan */
}

.checkout-card .cart .steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.checkout-card .cart .steps .step {
  display: grid;
  gap: 10px;
}

.checkout-card .cart .steps .step span {
  font-size: 13px;
  font-weight: 600;
  color: #a16207; /* yellow-700 */
  margin-bottom: 2px;
  display: block;
}

.checkout-card .cart .steps .step p {
  font-size: 11px;
  font-weight: 600;
  color: #ca8a04; /* yellow-600 */
}

/* Payments */
.checkout-card .payments {
    padding: 20px;
    flex-grow: 1;
}
.checkout-card .payments .details {
  display: grid;
  grid-template-columns: 10fr auto;
  padding: 10px 0;
  gap: 8px;
  align-items: center;
}

.checkout-card .payments .details span:nth-child(odd) {
  font-size: 16px;
  font-weight: 600;
  color: #a16207; /* yellow-700 */
  margin: auto auto auto 0;
  display: flex;
  align-items: center;
}

.checkout-card .payments .details span:nth-child(even) {
  font-size: 18px;
  font-weight: 600;
  color: #a16207; /* yellow-700 */
  margin: auto 0 auto auto;
}

.checkout-card .input_field {
  width: 140px;
  height: 40px;
  padding: 0 8px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #fde68a; /* yellow-200 */
  background-color: #fefce8; /* yellow-50 */
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  text-align: right;
  color: #a16207; /* yellow-700 */
  font-size: 16px;
}

.checkout-card .input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #facc15; /* yellow-400 */
  background-color: #fefce8; /* yellow-50 */
}

/* Checkout */
.checkout-card .checkout-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #facc15; /* yellow-400 */
}

.checkout-card .price {
  position: relative;
  font-size: 28px;
  color: #422006; /* yellow-900 */
  font-weight: 900;
}

.checkout-card .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: #fbbf24; /* yellow-500 */
  box-shadow: 0px 0.5px 0.5px #fde68a, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 1px solid #facc15;
  color: #422006; /* yellow-900 */
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
}
.checkout-card .checkout-btn:hover {
    background: #fde047; /* yellow-300 */
}

/* Menyesuaikan tombol metode pembayaran */
.payment-method-btn-new {
    padding: 8px;
    border: 1px solid #fde68a; /* yellow-200 */
    border-radius: 5px;
    font-size: 0.75rem;
    color: #a16207; /* yellow-700 */
    background-color: #fefce8; /* yellow-50 */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.payment-method-btn-new:hover {
    background-color: #fef08a; /* yellow-200 */
}
.payment-method-btn-new.active {
    background-color: #facc15; /* yellow-400 */
    border-color: #fbbf24; /* yellow-500 */
    color: #422006; /* yellow-900 */
    font-weight: 600;
}