/* ==========================================================================
   Safta Sejuk - tema Gold kontras
   Komponen berbasis utility ada di templates/partials/tailwind_components.html
   ========================================================================== */
:root {
  --ink-950: #0d0b07;
  --ink-900: #16130c;
  --ink-800: #211c12;
  --gold-grad: linear-gradient(135deg, #8c6414 0%, #c99a2e 28%, #f3d98b 52%, #d4a63a 74%, #9a6d16 100%);
  --gold-grad-soft: linear-gradient(135deg, #b8871c 0%, #e9c463 50%, #c4922a 100%);
  --gold-grad-dark: linear-gradient(160deg, #0d0b07 0%, #1c170d 55%, #2b2212 100%);
  --surface: #f5f4ef;
}

[x-cloak] { display: none !important; }

html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv11", "ss01"; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Gradien emas */
.bg-gold-grad { background-image: var(--gold-grad); }
.bg-gold-soft { background-image: var(--gold-grad-soft); }
.bg-ink-grad { background-image: var(--gold-grad-dark); }
.text-gold-grad {
  background-image: linear-gradient(120deg, #f6e1a1 0%, #d9ab3f 45%, #fbe7ae 70%, #c8962c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gold-line { height: 2px; background-image: var(--gold-grad); }

/* Sidebar ERP */
.sidebar { background-image: linear-gradient(180deg, #0d0b07 0%, #15120b 60%, #1b160d 100%); }
.sidebar ::-webkit-scrollbar { width: 6px; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(212, 166, 58, .25); border-radius: 6px; }
.nav-active {
  background-image: var(--gold-grad-soft);
  color: #1a1305 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -8px rgba(212, 166, 58, .7);
}
.nav-active svg { color: #1a1305 !important; }

/* Tombol emas */
.btn-gold-surface {
  background-image: var(--gold-grad-soft);
  color: #1a1305;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 1px 2px rgba(120, 80, 10, .35);
}
.btn-gold-surface:hover { filter: brightness(1.05) saturate(1.05); }
.btn-gold-surface:active { filter: brightness(.96); }

/* Scrollbar konten */
.scroll-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #d6d3cb; border-radius: 8px; }

/* Loading indicator HTMX */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
#list-area.htmx-request { opacity: .55; transition: opacity .15s; }
.top-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80; background-image: var(--gold-grad); transform-origin: left; animation: progress 1.2s ease-in-out infinite; }
@keyframes progress { 0% { transform: scaleX(0); } 50% { transform: scaleX(.7); } 100% { transform: scaleX(1); opacity: 0; } }

/* Mobile native feel */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top { padding-top: env(safe-area-inset-top); }
.tap:active { transform: scale(.98); transition: transform .08s; }
.sheet-enter { animation: sheetUp .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.fade-in { animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Grafik batang */
.bar { border-radius: 4px 4px 0 0; background-image: linear-gradient(180deg, #e2b84f 0%, #b9851b 100%); transition: filter .15s; }
.bar-col:hover .bar { filter: brightness(1.08); }
.bar-col:hover .bar-track { background: rgba(212, 166, 58, .08); }

/* Cetak */
@media print {
  .no-print, aside, header, nav, .bottom-nav { display: none !important; }
  body { background: #fff !important; }
  main { padding: 0 !important; margin: 0 !important; }
  .lg\:pl-64 { padding-left: 0 !important; }
  .card { box-shadow: none !important; border-color: #ddd !important; }
  .print-only { display: block !important; }
  table { font-size: 11px; }
}
.print-only { display: none; }

/* Baris chip yang bisa digeser tanpa scrollbar terlihat */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }