@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap');

/*
  LYCHEES Admin Theme
  Ziel: nah am hochwertigen Restaurant-/Brand-Look, ohne bestehende Funktionen zu überschreiben.
*/

:root {
  --ly-bg: #f8f5ee;
  --ly-bg-soft: #fffdf8;
  --ly-card: #ffffff;
  --ly-green: #004c45;
  --ly-green-dark: #0f3d39;
  --ly-green-soft: #e8f1ef;
  --ly-gold: #c8a46a;
  --ly-gold-soft: #f4ead8;
  --ly-text: #1f2933;
  --ly-muted: #6f746f;
  --ly-border: #e7dcc8;
  --ly-shadow: 0 14px 36px rgba(15, 61, 57, .10);
  --ly-shadow-soft: 0 8px 22px rgba(15, 61, 57, .07);
}

html,
body {
  font-family: 'Kanit', Arial, sans-serif !important;
  background:
    radial-gradient(circle at top left, rgba(200,164,106,.14), transparent 34rem),
    linear-gradient(180deg, var(--ly-bg-soft), var(--ly-bg)) !important;
  color: var(--ly-text);
}

body,
input,
select,
button,
textarea,
.btn {
  font-family: 'Kanit', Arial, sans-serif !important;
}

.page {
  max-width: 1240px;
  padding: 28px;
}

.topbar {
  background:
    linear-gradient(135deg, rgba(0,76,69,.98), rgba(15,61,57,.95)),
    var(--ly-green);
  color: #fff;
  padding: 20px 24px;
  border-radius: 24px;
  box-shadow: var(--ly-shadow);
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}

.topbar::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(200,164,106,.18);
  pointer-events: none;
}

.topbar h1 {
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 28px;
}

.topbar .muted {
  color: rgba(255,255,255,.78);
}

.topbar-right {
  position: relative;
  z-index: 1;
}

.card,
.kpi,
.tx-card,
.gift-card {
  border: 1px solid var(--ly-border) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,253,248,.98)) !important;
  box-shadow: var(--ly-shadow-soft) !important;
}

.card {
  padding: 24px !important;
}

.card h2,
.tx-title,
.gift-title {
  color: var(--ly-green-dark);
  font-weight: 600;
  letter-spacing: .01em;
}

.kpi {
  padding: 20px !important;
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ly-gold), var(--ly-green));
}

.kpi strong {
  color: var(--ly-green);
  font-weight: 600;
}

.muted,
.tx-meta,
.gift-meta,
.status,
.tx-status {
  color: var(--ly-muted) !important;
}

.btn,
button {
  background: var(--ly-green) !important;
  color: #fff !important;
  border: 1px solid var(--ly-green) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 14px rgba(0,76,69,.13);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,76,69,.18);
}

.btn-light {
  background: #fff !important;
  color: var(--ly-green) !important;
  border: 1px solid var(--ly-border) !important;
  box-shadow: none;
}

.btn-light:hover {
  background: var(--ly-gold-soft) !important;
  border-color: var(--ly-gold) !important;
}

input,
select,
textarea,
.tx-field,
.card-field {
  border: 1px solid var(--ly-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--ly-text) !important;
  min-height: 50px;
  font-size: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

input:focus,
select:focus,
textarea:focus,
.tx-field:focus,
.card-field:focus {
  outline: none !important;
  border-color: var(--ly-gold) !important;
  box-shadow: 0 0 0 4px rgba(200,164,106,.18) !important;
}

label {
  color: var(--ly-green-dark);
  font-weight: 600;
  letter-spacing: .01em;
}

.badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
}

.badge.active,
.badge.type-topup {
  background: var(--ly-green-soft) !important;
  color: var(--ly-green-dark) !important;
}

.badge.inactive,
.badge.type-debit {
  background: #fbe8e6 !important;
  color: #9f241d !important;
}

.badge.type-other {
  background: var(--ly-gold-soft) !important;
  color: #745427 !important;
}

.tx-box,
.gift-box {
  background: #fbf7ef !important;
  border: 1px solid var(--ly-border) !important;
  border-radius: 16px !important;
}

.tx-box strong,
.gift-box strong {
  color: var(--ly-muted) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tx-amount,
.gift-balance {
  color: var(--ly-green) !important;
  font-weight: 600 !important;
}

.error {
  border: 1px solid #f4b4ad;
  border-radius: 16px !important;
}

.ok {
  border: 1px solid #b7d8c4;
  border-radius: 16px !important;
}

table th {
  color: var(--ly-green-dark);
  font-weight: 600;
}

table td,
table th {
  border-color: var(--ly-border) !important;
}

.qr-box img {
  border-radius: 18px !important;
  border: 1px solid var(--ly-border) !important;
  box-shadow: var(--ly-shadow-soft);
}

a {
  color: var(--ly-green);
}

a:hover {
  color: var(--ly-gold);
}

@media (max-width: 860px) {
  .page {
    padding: 16px;
  }

  .topbar {
    border-radius: 18px;
  }

  .card {
    padding: 18px !important;
  }
}


/* LYCHEES fine tuning: SemiBold + dezente Button-Rundungen */
h1,h2,h3,h4,h5,h6,
.card h2,
.tx-title,
.gift-title,
.kpi strong,
label,
.badge,
.btn,
button,
table th {
  font-weight: 600 !important;
}

.btn,
button {
  border-radius: 12px !important;
  padding: 11px 17px !important;
}

.btn-light {
  border-radius: 12px !important;
}

input,
select,
textarea,
.tx-field,
.card-field {
  border-radius: 12px !important;
}

.card,
.kpi,
.tx-card,
.gift-card {
  border-radius: 18px !important;
}

.tx-box,
.gift-box,
.error,
.ok {
  border-radius: 12px !important;
}