/* ================================================================
   AUTH.CSS — Halaman Login & Register
   INV System | HospiHub × Babonz
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:        #0d0f14;
  --surface:   #13161e;
  --card:      #181c26;
  --border:    #252a38;
  --gold:      #c9a84c;
  --gold-light:#e4c97a;
  --gold-dim:  #6b5a2a;
  --text:      #e8eaf0;
  --text-dim:  #7a8299;
  --text-muted:#3d4358;
  --green:     #3ecf8e;
  --red:       #f87171;
  --hospihub:  #2dd4bf;
  --babonz:    #f97316;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── BACKGROUND ORBS ─────────────────────────────────────────── */
.auth-bg {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.bg-orb {
  position: absolute; border-radius: 50%; opacity: .07; filter: blur(80px);
}
.orb-1 { width:500px; height:500px; background:var(--hospihub); top:-180px; right:-150px; }
.orb-2 { width:450px; height:450px; background:var(--babonz);   bottom:-140px; left:-120px; }

/* ── WRAP ────────────────────────────────────────────────────── */
.auth-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
}

/* ── BRAND ───────────────────────────────────────────────────── */
.auth-brand { text-align: center; margin-bottom: 28px; }

.brand-pair {
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.brand-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 10px;
}
.logo-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.hospihub-icon { background: linear-gradient(135deg,#0d9488,#0f766e); color:#fff; box-shadow: 0 0 18px rgba(45,212,191,.28); }
.babonz-icon   { background: linear-gradient(135deg,#ea6c0a,#dc2626); color:#fff; box-shadow: 0 0 18px rgba(249,115,22,.28); }
.logo-name  { display:block; font-size:13.5px; font-weight:600; line-height:1.2; }
.hospihub-name { color: var(--hospihub); }
.babonz-name   { color: var(--babonz); }
.logo-sub   { display:block; font-size:10px; color:var(--text-dim); font-family:'DM Mono',monospace; }
.brand-x    { font-size:18px; color:var(--text-muted); margin: 0 6px; }
.brand-divider { width:1px; height:30px; background:var(--border); margin:0 4px; }
.system-label {
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--gold);
  letter-spacing: 3px; text-transform: uppercase;
}

/* ── CARD ────────────────────────────────────────────────────── */
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}

/* ── TABS ────────────────────────────────────────────────────── */
.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1; padding: 14px;
  border: none; background: none;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .2s;
  font-family: 'DM Sans', sans-serif;
  border-bottom: 2px solid transparent;
}
.auth-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,.03); }
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); background: rgba(201,168,76,.04); }

/* ── PANELS ──────────────────────────────────────────────────── */
.auth-panel { display: none; padding: 24px; }
.auth-panel.active { display: block; }

.panel-header { margin-bottom: 20px; }
.panel-header h2 { font-family:'Playfair Display',serif; font-size:21px; font-weight:700; }
.panel-header p  { font-size:13px; color:var(--text-dim); margin-top:3px; }

/* ── FORM ────────────────────────────────────────────────────── */
.form-group {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px;
}
.form-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

label {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500; letter-spacing: .4px;
  font-family: 'DM Mono', monospace;
}
input, select, textarea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 13px;
  color: var(--text); font-size: 13.5px;
  font-family: 'DM Sans', sans-serif;
  outline: none; transition: border-color .2s; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold-dim); }
select option { background: var(--card); }

.inp-wrap { position: relative; }
.inp-wrap input { padding-right: 42px; }
.eye-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px;
}

/* ── PASSWORD STRENGTH ───────────────────────────────────────── */
.strength-bar {
  height: 4px; background: var(--border);
  border-radius: 2px; overflow: hidden; margin-top: 6px;
}
.strength-fill {
  height: 100%; width: 0;
  border-radius: 2px; transition: width .3s, background .3s;
}
.strength-label {
  font-size: 11px; font-family: 'DM Mono', monospace;
  display: block; margin-top: 3px;
}

/* ── ERRORS ──────────────────────────────────────────────────── */
.field-err {
  font-size: 11px; color: var(--red);
  font-family: 'DM Mono', monospace;
  min-height: 14px; display: block;
}
.global-err {
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.2);
  color: var(--red); font-size: 12.5px;
  padding: 9px 12px; border-radius: 8px;
  margin-bottom: 12px; display: none;
}
.global-err:not(:empty) { display: block; }

/* ── REMEMBER ────────────────────────────────────────────────── */
.remember-row { margin-bottom: 14px; }
.check-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.check-label input { width: auto; padding: 0; accent-color: var(--gold); }

/* ── SUBMIT BUTTON ───────────────────────────────────────────── */
.btn-submit {
  width: 100%; padding: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), #a8872e);
  color: #0d0f14; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: all .2s;
  font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.btn-submit:hover { background: linear-gradient(135deg, var(--gold-light), var(--gold)); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,.3); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── DOT SPINNER ─────────────────────────────────────────────── */
.dot-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: #0d0f14;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.divider span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── DEMO BUTTON ─────────────────────────────────────────────── */
.btn-demo {
  width: 100%; padding: 10px;
  border-radius: 8px; background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px;
  cursor: pointer; transition: all .2s;
  font-family: 'DM Sans', sans-serif;
}
.btn-demo:hover { background: rgba(255,255,255,.08); color: var(--text); border-color: var(--gold-dim); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.auth-foot {
  text-align: center; margin-top: 18px;
  font-size: 12px; color: var(--text-muted);
}
.auth-foot span { color: var(--text-muted); }

/* ── TOAST ───────────────────────────────────────────────────── */
#toast-wrap {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 8px;
  font-size: 13px; min-width: 230px;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  transition: opacity .35s, transform .35s;
}
.toast-success { background:#052e16; border:1px solid rgba(62,207,142,.3);  color:#3ecf8e; }
.toast-error   { background:#2d1515; border:1px solid rgba(248,113,113,.3); color:#f87171; }
.toast-info    { background:#1e1a0d; border:1px solid rgba(201,168,76,.3);  color:#c9a84c; }