/* ============================================================
   FIZA GALLERY — FABLE DESIGN LAYER (v1)
   Lapisan visual untuk SEMUA halaman (admin, member, pos).
   Dimuat SETELAH css lama → menang cascade. Visual-only:
   tidak mengubah layout-mode/logic, aman untuk fungsi yang ada.
   ============================================================ */

:root {
  --fb-radius: 14px;
  --fb-shadow-sm: 0 1px 2px rgba(44,36,22,.05), 0 2px 8px rgba(44,36,22,.05);
  --fb-shadow-md: 0 2px 6px rgba(44,36,22,.06), 0 10px 28px rgba(44,36,22,.09);
  --fb-shadow-gold: 0 6px 18px rgba(201,168,76,.35);
  --fb-gold-grad: linear-gradient(135deg, #C9A84C 0%, #B8923D 55%, #9A6F2E 100%);
  --fb-dark-grad: linear-gradient(160deg, #23201a 0%, #2C2416 70%, #3a2f1c 100%);
  --fb-ease: cubic-bezier(.22,.8,.36,1);
}

/* ---------- DASAR ---------- */
@media screen {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  ::selection { background: rgba(201,168,76,.28); }
  * { -webkit-tap-highlight-color: rgba(201,168,76,.18); }

  /* Scrollbar halus */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(154,111,46,.30); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(154,111,46,.55); }
}

/* ---------- TOPBAR (admin + pos): gradien gelap mewah ---------- */
@media screen {
  .adm-topbar, .pos-topbar {
    background: var(--fb-dark-grad) !important;
    border-bottom: 1px solid rgba(201,168,76,.28);
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
  }
  .adm-topbar .brand, .pos-topbar .brand { text-shadow: 0 1px 8px rgba(201,168,76,.35); }
}

/* ---------- KARTU & KPI ---------- */
@media screen {
  .card, .kpi {
    border-radius: var(--fb-radius);
    box-shadow: var(--fb-shadow-sm);
    border-color: rgba(201,168,76,.16);
    transition: box-shadow .22s var(--fb-ease), transform .22s var(--fb-ease);
  }
  .card:hover { box-shadow: var(--fb-shadow-md); }
  .kpi { position: relative; overflow: hidden; }
  .kpi::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--fb-gold-grad); opacity: .85; border-radius: 0 2px 2px 0;
  }
  .kpi-value { letter-spacing: .2px; }
}

/* ---------- TOMBOL: gradien emas + micro-interaction ---------- */
@media screen {
  .btn, .btn-pay, .search-row .btn {
    background-image: var(--fb-gold-grad);
    border-radius: 10px;
    transition: transform .15s var(--fb-ease), box-shadow .2s var(--fb-ease), filter .2s;
    will-change: transform;
  }
  .btn:hover, .btn-pay:hover, .search-row .btn:hover { filter: brightness(1.06); box-shadow: var(--fb-shadow-gold); }
  .btn:active, .btn-pay:active, .search-row .btn:active,
  .prod-card:active, .fg-botnav a:active { transform: scale(.97); }
  .btn-outline, .search-row .btn-outline { background-image: none; }
  .btn-outline:hover { box-shadow: none; border-color: var(--gold, #C9A84C); }
}

/* ---------- INPUT: focus ring emas + target sentuh nyaman ---------- */
@media screen {
  .field-input, .field-select, .field-textarea,
  .search-row input, .inline-search input, .inline-search select,
  input[type="text"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
    border-radius: 10px;
    transition: border-color .18s, box-shadow .18s;
  }
  .field-input:focus, .field-select:focus, .field-textarea:focus,
  .search-row input:focus, .inline-search input:focus,
  input:focus, select:focus, textarea:focus {
    border-color: #C9A84C !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,.18);
    outline: none;
  }
}
@media screen and (max-width: 900px) {
  /* Target sentuh ≥ 44px di HP */
  .btn, .btn-pay, .qcash, .pos-tool-btn, .btn-manual,
  .field-input, .field-select, .search-row input, .search-row .btn { min-height: 44px; }
  .tab-cat button, .pos-topbar button, .pos-topbar a.btn-link { min-height: 36px; }
}

/* ---------- MODAL/DIALOG: muncul halus + blur belakang ---------- */
@media screen {
  @keyframes fbPop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  .modal-sheet, .dialog { animation: fbPop .26s var(--fb-ease); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
  .modal-overlay, .overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}

/* ---------- ADMIN: sidebar & bottom-nav ---------- */
@media screen {
  .adm-sidebar a { border-radius: 0 10px 10px 0; }
  .adm-sidebar a.active { box-shadow: inset 0 0 0 1px rgba(201,168,76,.22); }
  .fg-botnav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255,255,255,.92); }
  .fg-botnav .fg-botnav-pos .bi { background-image: var(--fb-gold-grad); transition: transform .18s var(--fb-ease), box-shadow .2s; }
  .fg-botnav .fg-botnav-pos:active .bi { transform: scale(.92); }
  .tbl th { letter-spacing: .4px; }
  .tbl tbody tr { transition: background .15s; }
  .tbl tbody tr:hover { background: rgba(201,168,76,.06); }
  .pill { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
}

/* ---------- POS: kartu produk & keranjang ---------- */
@media screen {
  .prod-card {
    border-radius: 14px;
    box-shadow: var(--fb-shadow-sm);
    transition: transform .16s var(--fb-ease), box-shadow .2s, border-color .15s;
  }
  .prod-card:hover { transform: translateY(-2px); box-shadow: var(--fb-shadow-md); }
  .search-row { border-radius: 14px; box-shadow: var(--fb-shadow-sm); }
  .cart-item { transition: background .15s; }
  .cart-item:hover { background: rgba(201,168,76,.05); }
  .btn-pay { border-radius: 12px; box-shadow: var(--fb-shadow-gold); }
}

/* ---------- MEMBER: kartu hero & list ---------- */
@media screen {
  .hero-card { border-radius: 0 0 22px 22px; box-shadow: 0 10px 30px rgba(44,36,22,.18); }
  .txn-item { transition: transform .16s var(--fb-ease), box-shadow .2s; }
  .txn-item:hover { transform: translateY(-1px); box-shadow: var(--fb-shadow-sm); }
  .tier-badge { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
}

/* ---------- ANIMASI MASUK KONTEN (halus, sekali) ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes fbFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .adm-main-inner > *, .pos-left > *, .pos-mid > *, .pos-right > * { animation: fbFadeUp .32s var(--fb-ease) backwards; }
  .adm-main-inner > *:nth-child(2), .pos-left > *:nth-child(2) { animation-delay: .04s; }
  .adm-main-inner > *:nth-child(3), .pos-left > *:nth-child(3) { animation-delay: .08s; }
}