/* ============================================================
   Lucky Draw 777 – global styles
   ============================================================ */

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* ---------- responsive type scale ----------
   Tailwind text utilities are rem-based, so scaling the root font-size
   shrinks every font (and rem spacing) together with the screen. px-based
   icons/badges stay put. Tiers: 15px desktop, 14px phones/small tablets,
   13px on very narrow phones. */
html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 767px) {
  html { font-size: 14px; }
}
@media (max-width: 380px) {
  html { font-size: 13px; }
}

/* Phones: keep form controls at 16px — anything smaller makes
   iOS/Android auto-zoom the page when a field gets focus. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }

/* ---------- Flush Ads banner ---------- */
#flushAdsRoot {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.fa-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 400px;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  animation: faIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fa-toast.fa-out { transform: translateX(115%); opacity: 0; }

.fa-avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  letter-spacing: .3px;
}

.fa-body { flex: 1 1 auto; min-width: 0; }
.fa-head { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; opacity: .92; }
.fa-ico { font-size: 12px; }
.fa-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin-top: 1px; }
.fa-sub  { font-size: 11.5px; opacity: .85; line-height: 1.3; }
.fa-acct {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .2px;
  word-break: break-all;
}
.fa-acct-name { font-weight: 500; opacity: .85; }
.fa-time { flex: 0 0 auto; text-align: right; font-size: 10px; opacity: .6; line-height: 1.35; }

@keyframes faIn {
  0%   { transform: translateX(115%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

@media (max-width: 640px) {
  #flushAdsRoot { left: 12px; right: 12px; top: 12px; }
  .fa-toast { min-width: 0; max-width: none; }
}

/* ---------- small helpers ---------- */
.tabular { font-variant-numeric: tabular-nums; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #f9fafb; }

/* ============================================================
   Dark customer shell (banking look)

   Selectors are written as `body.ld-dark ...` so they outrank the
   single-class Tailwind utilities the CDN injects — no !important
   needed, and the admin console (which never gets .ld-dark) is
   untouched.
   ============================================================ */
body.ld-dark {
  background-color: #080e26;
  color: #e2e8f0;
}
body.ld-dark ::-webkit-scrollbar-track { background: #0b1332; }
body.ld-dark ::-webkit-scrollbar-thumb { background: #334155; }
body.ld-dark .clickable-row:hover { background: rgba(255, 255, 255, 0.05); }

/* panels */
body.ld-dark .bg-white,
body.ld-dark .bg-gray-50,
body.ld-dark .bg-slate-50 { background-color: #101a3d; }

/* borders */
body.ld-dark .border,
body.ld-dark .border-t,
body.ld-dark .border-b,
body.ld-dark .border-l,
body.ld-dark .border-r { border-color: rgba(148, 163, 184, 0.16); }
body.ld-dark .divide-y > * + * { border-color: rgba(148, 163, 184, 0.14); }
body.ld-dark thead.bg-gray-50 { background-color: rgba(255, 255, 255, 0.04); }

/* text (coloured chips such as badges/flash keep their own colours,
   which is why .bg-*-100 is excluded) */
body.ld-dark .text-gray-900,
body.ld-dark .text-gray-800:not(.bg-gray-100),
body.ld-dark .text-gray-700 { color: #eef3ff; }
body.ld-dark .text-gray-600 { color: #aab7d6; }
body.ld-dark .text-gray-500,
body.ld-dark .text-gray-400 { color: #8593b5; }

body.ld-dark .shadow-sm { box-shadow: none; }

/* form controls */
body.ld-dark input[type="text"],
body.ld-dark input[type="email"],
body.ld-dark input[type="password"],
body.ld-dark input[type="number"],
body.ld-dark input[type="date"],
body.ld-dark input[type="datetime-local"],
body.ld-dark input[type="search"],
body.ld-dark input[type="tel"],
body.ld-dark input[type="url"],
body.ld-dark select,
body.ld-dark textarea {
  background-color: #16214f;
  border-color: rgba(148, 163, 184, 0.3);
  color: #e8eeff;
}
body.ld-dark input::placeholder,
body.ld-dark textarea::placeholder { color: #7c89ad; }
body.ld-dark input:focus,
body.ld-dark select:focus,
body.ld-dark textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
}
body.ld-dark select option { background-color: #16214f; color: #e8eeff; }