/* ========================================
   Explore Emas — Invoice Generator
   Redesigned: refined gold aesthetic
   ======================================== */

/* --- Design Tokens --- */
:root {
  color-scheme: light;
  --gold: #c28f2b;
  --gold-dark: #9a6d15;
  --gold-light: #e8c86a;
  --gold-glow: rgba(194, 143, 43, 0.15);
  --gold-gradient: linear-gradient(135deg, #c28f2b 0%, #a0701a 50%, #8a5e12 100%);
  --gold-gradient-soft: linear-gradient(135deg, #f8e8c8 0%, #fdf3e0 100%);
  --gold-soft: #f5e8d0;

  --gold-shimmer: linear-gradient(
    135deg,
    rgba(194, 143, 43, 0.08) 0%,
    rgba(194, 143, 43, 0.18) 50%,
    rgba(194, 143, 43, 0.08) 100%
  );

  --ink: #1f1a16;
  --ink-secondary: #4a3f37;
  --muted: #8a7e72;
  --line: #e4d6c4;
  --line-gold: #dcc49a;

  --paper: #fffcf7;
  --wash: #f6f1ea;
  --wash-warm: #faf6ef;

  --brown: #6b4426;
  --brown-soft: #8b6b4a;

  --green: #3ba34a;
  --green-soft: #e6f4e6;
  --red: #c93b37;
  --red-soft: #fdeeec;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(103, 70, 32, 0.06);
  --shadow: 0 4px 20px rgba(103, 70, 32, 0.08);
  --shadow-lg: 0 12px 48px rgba(103, 70, 32, 0.12);
  --shadow-glow: 0 4px 20px rgba(194, 143, 43, 0.2);
  --shadow-xl: 0 20px 60px rgba(103, 70, 32, 0.16);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 200ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);
  --glass-bg: rgba(255, 252, 247, 0.72);
  --glass-border: rgba(228, 214, 196, 0.5);
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  color-scheme: dark;
  --gold: #d4a43a;
  --gold-dark: #e8c86a;
  --gold-light: #f0d88a;
  --gold-glow: rgba(212, 164, 58, 0.2);
  --gold-gradient: linear-gradient(135deg, #d4a43a 0%, #b8892e 50%, #a0701a 100%);
  --gold-gradient-soft: linear-gradient(135deg, #2a241d 0%, #332c24 100%);
  --gold-soft: #2a241d;
  --gold-shimmer: linear-gradient(135deg, rgba(212, 164, 58, 0.06) 0%, rgba(212, 164, 58, 0.15) 50%, rgba(212, 164, 58, 0.06) 100%);
  --ink: #f0e8de;
  --ink-secondary: #c4b8a8;
  --muted: #8a7e72;
  --line: #3a332b;
  --line-gold: #5a4a32;
  --paper: #1e1a16;
  --wash: #25201a;
  --wash-warm: #2a241d;
  --brown: #c4a882;
  --brown-soft: #a0805a;
  --green: #4cc85a;
  --green-soft: #1a2e1d;
  --red: #e8605b;
  --red-soft: #2e1a1a;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 4px 20px rgba(212, 164, 58, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(30, 26, 22, 0.78);
  --glass-border: rgba(90, 74, 50, 0.5);
}
[data-theme="dark"] .topbar { background: rgba(30, 26, 22, 0.92); border-bottom-color: var(--line); }
[data-theme="dark"] .login-screen { background: #16130f; }
[data-theme="dark"] .login-card { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .gold-invoice { background: #16130f; border-color: #5a4a32; }
[data-theme="dark"] .gold-invoice::before { opacity: 0.12; }
[data-theme="dark"] .gold-invoice::after { opacity: 0.05; }
[data-theme="dark"] .gold-invoice .invoice-logo strong { color: #d4a43a; }
[data-theme="dark"] .gold-invoice .invoice-logo .logo-sub { color: #d4a43a; }
[data-theme="dark"] .gold-invoice .invoice-logo em { color: #8a7e72; }
[data-theme="dark"] .gold-invoice .invoice-logo .brand-mark { box-shadow: 0 4px 20px rgba(212, 164, 58, 0.25); }
[data-theme="dark"] .gold-invoice .invoice-meta h2 { color: #d4a43a; }
[data-theme="dark"] .gold-invoice .invoice-number-box { background: rgba(212, 164, 58, 0.08); border-color: #5a4a32; color: #d4a43a; }
[data-theme="dark"] .gold-invoice .meta-line span { color: #8a7e72; }
[data-theme="dark"] .gold-invoice .meta-line strong { color: #f0e8de; }
[data-theme="dark"] .gold-invoice .meta-line b { color: #5a4a32; }
[data-theme="dark"] .gold-invoice .info-line span { color: #8a7e72; }
[data-theme="dark"] .gold-invoice .info-line b { color: #5a4a32; }
[data-theme="dark"] .gold-invoice .info-line span:last-child { color: #f0e8de; }
[data-theme="dark"] .gold-invoice .section-label { color: #d4a43a; }
[data-theme="dark"] .gold-invoice .label-icon { background: linear-gradient(135deg, #8a6a2a 0%, #6d5120 100%); }
[data-theme="dark"] .gold-invoice .client-name { color: #f0e8de; font-weight: 700; }
[data-theme="dark"] .gold-invoice .client-address { color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .muted { color: #8a7e72; }
[data-theme="dark"] .gold-invoice .gold-table { border-color: #3a332b; }
[data-theme="dark"] .gold-invoice .gold-table table { background: rgba(0, 0, 0, 0.2); }
[data-theme="dark"] .gold-invoice .gold-table th { background: linear-gradient(135deg, #6d5120 0%, #5a4420 100%); color: #f0e8de; }
[data-theme="dark"] .gold-invoice .gold-table td { border-bottom-color: #2a241d; color: #e0d8cc; }
[data-theme="dark"] .gold-invoice .gold-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .gold-invoice .gold-table tbody tr:hover { background: rgba(212, 164, 58, 0.06); }
[data-theme="dark"] .gold-invoice .summary-box { background: #1a1612; border-color: #3a332b; }
[data-theme="dark"] .gold-invoice .summary-total { background: linear-gradient(135deg, #6d5120 0%, #5a4420 100%); }
[data-theme="dark"] .gold-invoice .summary-total span { color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .summary-total strong { color: #f0e8de; }
[data-theme="dark"] .gold-invoice .total-line { color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .total-line strong { color: #f0e8de; }
[data-theme="dark"] .gold-invoice .total-line b { color: #3a332b; }
[data-theme="dark"] .gold-invoice .summary-note { color: #8a7e72; }
[data-theme="dark"] .gold-invoice .guarantee { border-color: #2a241d; }
[data-theme="dark"] .gold-invoice .guarantee-text { color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .thanks-text { color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .footer-line { border-top-color: #3a332b; }
[data-theme="dark"] .gold-invoice .footer-item { color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .footer-item span:first-child { color: #d4a43a; }
[data-theme="dark"] .gold-invoice .footer-item + .footer-item { border-left-color: #3a332b; }
[data-theme="dark"] .gold-invoice h2 { color: #f0e8de; }
[data-theme="dark"] .gold-invoice .invoice-top { border-bottom-color: #3a332b; }
[data-theme="dark"] .gold-invoice .invoice-logo { border-right-color: #3a332b; }
[data-theme="dark"] .gold-invoice .invoice-info-grid > div + div { border-left-color: #3a332b; }
[data-theme="dark"] .gold-invoice .summary-terbilang { background: rgba(0, 0, 0, 0.2); border-top-color: #3a332b; color: #c4b8a8; }
[data-theme="dark"] .gold-invoice .summary-terbilang b { color: #d4a43a; }
[data-theme="dark"] .gold-invoice .summary-stamp.paid { color: #4cc85a; }
[data-theme="dark"] .gold-invoice .summary-stamp.unpaid { color: #e8605b; }
[data-theme="dark"] input, [data-theme="dark"] textarea { background: #16130f; border-color: var(--line); }
[data-theme="dark"] .stat-card { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .table-panel { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .filter-panel { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .form-card { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .item-row { background: var(--wash-warm); border-color: var(--line); }
[data-theme="dark"] .modal-box { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .toast { background: #2a241d; border-color: var(--line); box-shadow: var(--shadow-lg); }
[data-theme="dark"] .count-badge { background: var(--wash); }
[data-theme="dark"] .nav-btn { background: #201c17; border-color: #3a332b; color: #c4b8a8; }
[data-theme="dark"] .nav-btn:hover { border-color: #d4a43a; color: #d4a43a; background: rgba(212, 164, 58, 0.08); box-shadow: 0 4px 12px rgba(212, 164, 58, 0.15); }
[data-theme="dark"] .nav-btn:disabled { opacity: 0.25; background: #16130f; border-color: #2a241d; color: #5a524a; }
[data-theme="dark"] .btn-icon-only { background: #201c17; border-color: #3a332b; color: #8a7e72; }
[data-theme="dark"] .btn-icon-only:hover { border-color: #d4a43a; color: #d4a43a; background: rgba(212, 164, 58, 0.08); }
[data-theme="dark"] .btn-icon-only.danger:hover { border-color: #e8605b; color: #e8605b; background: rgba(232, 96, 91, 0.08); }
[data-theme="dark"] .btn-icon-only.wa:hover { border-color: #25D366; color: #25D366; background: rgba(37, 211, 102, 0.08); }
[data-theme="dark"] .btn-toggle { color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
[data-theme="dark"] .btn-toggle.green { background: linear-gradient(135deg, #3ba34a, #2d8a3a); }
[data-theme="dark"] .btn-toggle.red { background: linear-gradient(135deg, #c93b37, #b02e2a); }
[data-theme="dark"] .btn-toggle:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
[data-theme="dark"] .search-input { background: #16130f; }
[data-theme="dark"] .pagination-bar { border-top-color: var(--line); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a332b; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a423a; }
[data-theme="dark"] .primary-button { color: #fff; }
[data-theme="dark"] .ghost-button { border-color: var(--line); color: var(--ink-secondary); }
[data-theme="dark"] .ghost-button:hover { border-color: var(--gold); color: var(--gold); background: rgba(212, 164, 58, 0.06); }
[data-theme="dark"] .outline-button { border-color: var(--line); color: var(--ink-secondary); background: transparent; }
[data-theme="dark"] .outline-button:hover { border-color: var(--gold); color: var(--gold); background: rgba(212, 164, 58, 0.06); }
[data-theme="dark"] .text-button { color: var(--muted); }
[data-theme="dark"] .text-button:hover { color: var(--gold); }
[data-theme="dark"] .back-link { color: var(--muted); }
[data-theme="dark"] .back-link:hover { color: var(--gold); }
[data-theme="dark"] .status-pill { background: #2a241d; color: #e8605b; border-color: rgba(232, 96, 91, 0.2); }
[data-theme="dark"] .status-pill::before { background: #e8605b; }
[data-theme="dark"] .status-pill.paid { background: #1a2e1d; color: #4cc85a; border-color: rgba(76, 200, 90, 0.2); }
[data-theme="dark"] .status-pill.paid::before { background: #4cc85a; }
[data-theme="dark"] .stat-icon.brown { background: #2a241d; color: #d4a43a; }
[data-theme="dark"] .stat-icon.green { color: #4cc85a; }
[data-theme="dark"] .stat-icon.gold { color: #e8c86a; }
[data-theme="dark"] table th { color: var(--ink-secondary); border-bottom-color: var(--line); }
[data-theme="dark"] table td { color: var(--ink); border-bottom-color: var(--line); }
[data-theme="dark"] table tbody tr:hover { background: rgba(212, 164, 58, 0.04); }
[data-theme="dark"] .empty-state { color: var(--muted); }
[data-theme="dark"] .empty-state-icon { opacity: 0.2; }
[data-theme="dark"] .page-info { color: var(--muted); }
[data-theme="dark"] .hero-row h1 { color: var(--ink); }
[data-theme="dark"] .hero-row h1 em { color: var(--gold); }
[data-theme="dark"] .hero-row .muted { color: var(--muted); }
[data-theme="dark"] .eyebrow { color: var(--muted); }
[data-theme="dark"] .form-card h2 { color: var(--ink); }
[data-theme="dark"] .form-total { background: var(--wash-warm); border-color: var(--line-gold); }
[data-theme="dark"] .form-total .total-label span:first-child { color: var(--ink-secondary); }
[data-theme="dark"] .form-total .total-value .total-amount { color: var(--gold); }
[data-theme="dark"] .stat-label { color: var(--muted); }
[data-theme="dark"] .stat-value { color: var(--ink); }
[data-theme="dark"] .stat-sub { color: var(--muted); }
[data-theme="dark"] .stat-chart { background: var(--wash); }
[data-theme="dark"] .stat-breakdown { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] select { background: #16130f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7e72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
[data-theme="dark"] .toast.error { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.toast-undo-btn {
  background: var(--gold-gradient);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  min-height: 30px;
  padding: 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 180ms;
  flex-shrink: 0;
}
.toast-undo-btn:hover {
  opacity: 0.85;
}
[data-theme="dark"] .toast.success { background: var(--green-soft); border-color: var(--green); color: var(--green); }
[data-theme="dark"] .modal-header h2 { color: var(--ink); }
[data-theme="dark"] .modal-body { color: var(--ink-secondary); }
[data-theme="dark"] .share-header { border-bottom-color: var(--line); }
[data-theme="dark"] .invoice-skeleton .skel-line,
[data-theme="dark"] .invoice-skeleton .skel-box { background: linear-gradient(90deg, #2a241d 25%, #332c24 50%, #2a241d 75%); background-size: 200% 100%; }
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px #16130f inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
[data-theme="dark"] .item-row input[readonly] { background: #16130f; color: var(--muted); }
[data-theme="dark"] .search-clear { color: var(--muted); }
[data-theme="dark"] .password-toggle { color: var(--muted); }
[data-theme="dark"] .password-toggle:hover { color: var(--ink-secondary); }
[data-theme="dark"] #dbGuide { background: var(--wash-warm); border-color: var(--line); }
[data-theme="dark"] .login-error { color: var(--red); }
[data-theme="dark"] select option { background: #1e1a16; color: var(--ink); }
[data-theme="dark"] .btn-icon-only::after { background: #2a241d; color: #f0e8de; border: 1px solid #3a332b; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
[data-theme="dark"] .btn-toggle { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
[data-theme="dark"] .btn-toggle:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
[data-theme="dark"] .gold-invoice .summary-lines { background: rgba(0,0,0,0.3); }
[data-theme="dark"] .gold-invoice .summary-lines .total-line { border-bottom-color: #2a241d; }
[data-theme="dark"] .gold-invoice .summary-total span { color: #e0d8cc; }
[data-theme="dark"] .gold-invoice .summary-total strong { color: #fff; }
[data-theme="dark"] .gold-invoice .summary-box { box-shadow: 0 0 0 1px #3a332b inset; }
[data-theme="dark"] .gold-invoice .summary-note { border-top-color: #2a241d; }

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d4c8b8;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: #bfb0a0;
}