/* ==========================================================================
   KasirKu — Tema "Casual Professional" (Teal–Emerald)
   Dimuat SETELAH Tailwind. Menimpa utilitas lewat CSS variable + selector.
   Tidak mengubah struktur HTML maupun class yang dipakai JavaScript.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Palet utama: teal → emerald */
  --kk-50:  #ecfdf5;
  --kk-100: #d1fae5;
  --kk-200: #a7f3d0;
  --kk-300: #6ee7b7;
  --kk-400: #34d399;
  --kk-500: #10b981;
  --kk-600: #059669;
  --kk-700: #047857;
  --kk-800: #065f46;
  --kk-900: #064e3b;

  /* Aksen sekunder: teal cerah */
  --kk-teal-50:  #f0fdfa;
  --kk-teal-100: #ccfbf1;
  --kk-teal-500: #14b8a6;
  --kk-teal-600: #0d9488;

  /* Netral hangat (bukan slate dingin) */
  --kk-ink:      #10241f;
  --kk-ink-soft: #2c4741;
  --kk-muted:    #6b8580;
  --kk-line:     #e3ece9;
  --kk-surface:  #ffffff;
  --kk-canvas:   #f7fbfa;

  /* Radius & bayangan */
  --kk-radius-sm: 0.75rem;
  --kk-radius:    1rem;
  --kk-radius-lg: 1.25rem;
  --kk-radius-xl: 1.75rem;

  --kk-shadow-sm: 0 1px 2px rgba(16, 36, 31, .04), 0 2px 6px rgba(16, 36, 31, .05);
  --kk-shadow:    0 2px 4px rgba(16, 36, 31, .04), 0 8px 20px rgba(16, 36, 31, .07);
  --kk-shadow-lg: 0 4px 8px rgba(16, 36, 31, .05), 0 16px 40px rgba(16, 36, 31, .10);
  --kk-shadow-brand: 0 6px 18px rgba(5, 150, 105, .25);

  --kk-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------------ 2. Base */
html { scroll-behavior: smooth; }

body {
  background-color: var(--kk-canvas);
  color: var(--kk-ink);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Latar lembut bergradasi untuk kanvas utama */
body.kk-canvas-gradient {
  background-image:
    radial-gradient(circle at 12% -10%, rgba(16, 185, 129, .10), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(20, 184, 166, .08), transparent 40%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection { background: var(--kk-200); color: var(--kk-900); }

/* Scrollbar halus */
* { scrollbar-width: thin; scrollbar-color: var(--kk-200) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--kk-200);
  border-radius: 999px;
  border: 3px solid var(--kk-canvas);
}
*::-webkit-scrollbar-thumb:hover { background: var(--kk-300); }

/* Fokus aksesibel tapi tetap lembut */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kk-500);
  outline-offset: 2px;
  border-radius: var(--kk-radius-sm);
}

/* ------------------------------------------------- 3. Override warna brand */
/* Tailwind `brand` di config masih indigo; paksa ke teal–emerald */
:where([class*="bg-brand-50"])   { background-color: var(--kk-50)  !important; }
:where([class*="bg-brand-100"])  { background-color: var(--kk-100) !important; }
:where([class*="bg-brand-500"])  { background-color: var(--kk-500) !important; }
:where([class*="bg-brand-600"])  { background-color: var(--kk-600) !important; }
:where([class*="bg-brand-700"])  { background-color: var(--kk-700) !important; }
:where([class*="bg-brand-800"])  { background-color: var(--kk-800) !important; }
:where([class*="bg-brand-900"])  { background-color: var(--kk-900) !important; }

:where([class*="text-brand-500"]) { color: var(--kk-500) !important; }
:where([class*="text-brand-600"]) { color: var(--kk-600) !important; }
:where([class*="text-brand-700"]) { color: var(--kk-700) !important; }

:where([class*="border-brand-500"]) { border-color: var(--kk-500) !important; }
:where([class*="border-brand-600"]) { border-color: var(--kk-600) !important; }
:where([class*="border-brand-200"]) { border-color: var(--kk-200) !important; }
:where([class*="border-brand-100"]) { border-color: var(--kk-100) !important; }

:where([class*="from-brand-"]) { --tw-gradient-from: var(--kk-600) var(--tw-gradient-from-position) !important; }
:where([class*="to-brand-"])   { --tw-gradient-to: var(--kk-teal-500) var(--tw-gradient-to-position) !important; }
:where([class*="via-brand-"])  { --tw-gradient-via: var(--kk-500) var(--tw-gradient-via-position) !important; }

/* Indigo bawaan (bila ada) dipetakan ke palet baru */
:where([class*="bg-indigo-50"])  { background-color: var(--kk-50)  !important; }
:where([class*="bg-indigo-100"]) { background-color: var(--kk-100) !important; }
:where([class*="bg-indigo-500"]) { background-color: var(--kk-500) !important; }
:where([class*="bg-indigo-600"]) { background-color: var(--kk-600) !important; }
:where([class*="bg-indigo-700"]) { background-color: var(--kk-700) !important; }
:where([class*="text-indigo-500"]) { color: var(--kk-500) !important; }
:where([class*="text-indigo-600"]) { color: var(--kk-600) !important; }
:where([class*="text-indigo-700"]) { color: var(--kk-700) !important; }
:where([class*="border-indigo-500"]) { border-color: var(--kk-500) !important; }

/* --------------------------------------------------- 4. Netral jadi hangat */
:where([class*="text-slate-900"]) { color: var(--kk-ink) !important; }
:where([class*="text-slate-800"]) { color: var(--kk-ink-soft) !important; }
:where([class*="text-slate-700"]) { color: var(--kk-ink-soft) !important; }
:where([class*="text-slate-600"]) { color: #46605a !important; }
:where([class*="text-slate-500"]) { color: var(--kk-muted) !important; }
:where([class*="text-slate-400"]) { color: #93a8a3 !important; }

:where([class*="border-slate-200"]) { border-color: var(--kk-line) !important; }
:where([class*="border-slate-300"]) { border-color: #d3e2de !important; }
:where([class*="divide-slate-200"] > :not([hidden]) ~ :not([hidden])) { border-color: var(--kk-line) !important; }

:where([class*="bg-slate-50"])  { background-color: var(--kk-canvas) !important; }
:where([class*="bg-slate-100"]) { background-color: #f1f7f5 !important; }
:where([class*="bg-slate-200"]) { background-color: #e6efec !important; }

/* --------------------------------------------------------- 5. Radius lembut */
:where(.rounded-lg) { border-radius: var(--kk-radius) !important; }
:where(.rounded-xl) { border-radius: var(--kk-radius-lg) !important; }
:where(.rounded-2xl) { border-radius: var(--kk-radius-xl) !important; }

/* Tombol & input: selalu membulat penuh */
button:not(.rounded-full):not([class*="rounded-none"]) { border-radius: var(--kk-radius) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  border-radius: var(--kk-radius-sm) !important;
}

/* ---------------------------------------------------- 6. Bayangan & hover */
:where(.shadow-sm) { box-shadow: var(--kk-shadow-sm) !important; }
:where(.shadow)    { box-shadow: var(--kk-shadow) !important; }
:where(.shadow-md) { box-shadow: var(--kk-shadow) !important; }
:where(.shadow-lg) { box-shadow: var(--kk-shadow-lg) !important; }
:where(.shadow-xl) { box-shadow: var(--kk-shadow-lg) !important; }

/* Kartu: border tipis + shadow lembut + lift saat hover */
.card,
.kk-card {
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-lg);
  box-shadow: var(--kk-shadow-sm);
  transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.card:hover,
.kk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kk-shadow);
}

/* Kartu statistik ringkas */
.kk-stat {
  position: relative;
  overflow: hidden;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-lg);
  box-shadow: var(--kk-shadow-sm);
  transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-stat::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 70%);
  pointer-events: none;
}
.kk-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--kk-shadow);
}

/* ------------------------------------------------------------ 7. Header */
.glass-header {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--kk-line) !important;
  box-shadow: 0 1px 0 rgba(16, 36, 31, .03);
}

/* ------------------------------------------------------- 7b. Sidebar gelap */
/* Sidebar aplikasi memakai bg-slate-800/900; dibikin hijau tua yang hangat */
:where([class*="bg-slate-800"]) {
  background-color: #0f2a24 !important;
}
:where([class*="bg-slate-900"]) {
  background-color: #0b1f1a !important;
}

/* Item nav saat aktif: gradien teal, bukan biru */
.nav-btn.text-white.bg-brand-600,
.nav-btn[class*="bg-brand-600"] {
  background: linear-gradient(135deg, var(--kk-600), var(--kk-teal-600)) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, .30) !important;
  border-radius: var(--kk-radius) !important;
}

/* Item nav saat hover di sidebar gelap */
.nav-btn:not([class*="bg-brand-600"]):hover {
  background-color: rgba(20, 184, 166, .16) !important;
  color: #fff !important;
  border-radius: var(--kk-radius) !important;
  transform: translateX(2px);
}

/* Ikon indigo di sidebar -> teal terang */
:where([class*="text-indigo-300"]) { color: var(--kk-300) !important; }
:where([class*="text-indigo-400"]) { color: var(--kk-400) !important; }

/* --------------------------------------------------------------- 8. Navbar */
.kk-nav-link {
  position: relative;
  padding: .55rem .9rem;
  border-radius: var(--kk-radius);
  color: #46605a;
  font-weight: 600;
  transition: color .2s var(--kk-ease), background-color .2s var(--kk-ease);
}
.kk-nav-link:hover { color: var(--kk-700); background: var(--kk-50); }

/* Sidebar aktif */
.kk-nav-active {
  position: relative;
  background: linear-gradient(90deg, var(--kk-50), var(--kk-teal-50)) !important;
  color: var(--kk-700) !important;
  font-weight: 700;
  border-radius: var(--kk-radius) !important;
}
.kk-nav-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--kk-500), var(--kk-teal-500));
}

/* ---------------------------------------------------------------- 9. Tombol */
.kk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border-radius: var(--kk-radius);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.1;
  transition: transform .18s var(--kk-ease), box-shadow .18s var(--kk-ease), background-color .18s var(--kk-ease);
  will-change: transform;
}
.kk-btn:active { transform: translateY(1px) scale(.99); }

.kk-btn-primary {
  background: linear-gradient(135deg, var(--kk-600), var(--kk-teal-600));
  color: #fff;
  box-shadow: var(--kk-shadow-brand);
}
.kk-btn-primary:hover {
  box-shadow: 0 10px 24px rgba(5, 150, 105, .32);
  transform: translateY(-1px);
}

.kk-btn-ghost {
  background: #fff;
  color: var(--kk-ink-soft);
  border: 1px solid var(--kk-line);
  box-shadow: var(--kk-shadow-sm);
}
.kk-btn-ghost:hover { background: var(--kk-canvas); border-color: var(--kk-200); }

/* Tombol utama Tailwind (bg-emerald/bg-brand dll) diberi lift saat hover */
:where(button, a)[class*="bg-emerald-6"],
:where(button, a)[class*="bg-teal-6"],
:where(button, a)[class*="bg-brand-6"] {
  transition: transform .18s var(--kk-ease), box-shadow .18s var(--kk-ease), filter .18s var(--kk-ease);
}
:where(button, a)[class*="bg-emerald-6"]:hover,
:where(button, a)[class*="bg-teal-6"]:hover,
:where(button, a)[class*="bg-brand-6"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--kk-shadow-brand);
}

/* --------------------------------------------------------------- 10. Input */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  background-color: #fff;
  border: 1px solid var(--kk-line);
  color: var(--kk-ink);
  transition: border-color .18s var(--kk-ease), box-shadow .18s var(--kk-ease);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover,
textarea:hover { border-color: var(--kk-300); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--kk-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--kk-600); }

/* --------------------------------------------------------------- 11. Tabel */
table { border-collapse: separate; border-spacing: 0; }

thead th {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kk-muted);
  background: #f4faf8;
  border-bottom: 1px solid var(--kk-line);
}
tbody tr { transition: background-color .15s var(--kk-ease); }
tbody tr:hover { background-color: #f6fcfb; }

/* ------------------------------------------------------------ 12. Badge */
.kk-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.kk-badge-success { background: var(--kk-100); color: var(--kk-800); }
.kk-badge-warn    { background: #fef3c7; color: #92400e; }
.kk-badge-danger  { background: #fee2e2; color: #991b1b; }
.kk-badge-info    { background: var(--kk-teal-100); color: #115e59; }
.kk-badge-muted   { background: #f1f7f5; color: var(--kk-muted); }

/* ----------------------------------------------------------------- 13. Tab */
.tab-content { animation: kk-fade-up .3s var(--kk-ease); }
@keyframes kk-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------- 13b. KPI & auth kartu */
/* Kartu KPI dashboard: aksen atas + lift saat hover */
[class*="grid"] > div[class*="bg-white"][class*="rounded-2xl"] {
  position: relative;
  overflow: hidden;
  border-color: var(--kk-line) !important;
  box-shadow: var(--kk-shadow-sm) !important;
  transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
[class*="grid"] > div[class*="bg-white"][class*="rounded-2xl"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kk-500), var(--kk-teal-500));
  opacity: 0;
  transition: opacity .25s var(--kk-ease);
}
[class*="grid"] > div[class*="bg-white"][class*="rounded-2xl"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--kk-shadow) !important;
}
[class*="grid"] > div[class*="bg-white"][class*="rounded-2xl"]:hover::before {
  opacity: 1;
}

/* Modal login/daftar lebih membulat */
#modal-auth > div {
  border-radius: var(--kk-radius-xl) !important;
  box-shadow: 0 24px 64px rgba(16, 36, 31, .18) !important;
}

/* --------------------------------------------------------------- 14. POS */
.pos-card {
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-lg);
  box-shadow: var(--kk-shadow-sm);
  transition: transform .2s var(--kk-ease), box-shadow .2s var(--kk-ease), border-color .2s var(--kk-ease);
  cursor: pointer;
}
.pos-card:hover {
  transform: translateY(-3px);
  border-color: var(--kk-300);
  box-shadow: var(--kk-shadow);
}
.pos-card:active { transform: translateY(-1px) scale(.995); }

/* ------------------------------------------------ 15. Modal & dropdown */
.kk-modal {
  background: #fff;
  border-radius: var(--kk-radius-xl);
  box-shadow: 0 24px 64px rgba(16, 36, 31, .18);
  animation: kk-pop .25s var(--kk-ease);
}
@keyframes kk-pop {
  from { opacity: 0; transform: scale(.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --------------------------------------------------------- 16. Util kecil */
.kk-divider { height: 1px; background: var(--kk-line); border: 0; }
.kk-soft-text { color: var(--kk-muted); }
.kk-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Empty state ilustratif */
.kk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 3rem 1rem;
  color: var(--kk-muted);
  text-align: center;
}

/* Skeleton loading */
.kk-skeleton {
  background: linear-gradient(90deg, #f1f7f5 25%, #e9f3f0 37%, #f1f7f5 63%);
  background-size: 400% 100%;
  animation: kk-shimmer 1.4s ease infinite;
  border-radius: var(--kk-radius-sm);
}
@keyframes kk-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* -------------------------------------------------------- 17. Hormati motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- 18. Mobile */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .kk-btn { padding: .6rem 1rem; }
}

/* ----------------------------------------------------- 19. Cetak (struk) */
@media print {
  body { background: #fff !important; }
  .glass-header, .kk-nav-active::before { display: none !important; }
  .card, .kk-stat, .kk-card { box-shadow: none !important; border-color: #ddd !important; }
}