/* ==========================================================
   Agency Affiliate System - UI layer on top of Bootstrap 5
   Money figures are set in a monospaced face with tabular
   figures so amount columns line up when you scan a payout run.
   ========================================================== */

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

:root {
  --ink:        #0f1a24;
  --ink-soft:   #52616f;
  --line:       #e2e8ee;
  --surface:    #f4f6f8;
  --card:       #ffffff;
  --teal:       #0d7a6f;
  --teal-dark:  #0a5d55;
  --teal-tint:  #e6f3f1;
  --amber:      #b45309;
  --amber-tint: #fdf3e6;
  --slate:      #1b2733;
  --danger-tint:#fdeceb;
}

body.app-body {
  background: var(--surface);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
}

/* ---------- Navbar ---------- */
.app-nav { padding: .55rem 0; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.app-nav--admin     { background: var(--slate); }
.app-nav--affiliate { background: var(--teal-dark); }

.app-nav .navbar-brand,
.app-nav .nav-link { color: rgba(255,255,255,.78); }
.app-nav .navbar-brand { color: #fff; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.app-nav .nav-link:hover,
.app-nav .nav-link:focus { color: #fff; }
.app-nav .nav-link.active { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 #fff; }
.app-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }
.app-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.brand-mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: #fff; color: var(--slate);
  font-weight: 700; font-size: .95rem;
}
.brand-text { font-size: .98rem; }
@media (max-width: 575px) { .brand-text { display: none; } }

/* ---------- Page header ---------- */
.page-title { font-size: 1.4rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.page-sub   { margin: .2rem 0 0; color: var(--ink-soft); font-size: .875rem; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  padding: .85rem 1rem;
}

/* ---------- Stat cards ---------- */
.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1rem 1.1rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--teal);
}
.stat-card--amber::before { background: var(--amber); }
.stat-card--slate::before { background: var(--slate); }
.stat-card--muted::before { background: #94a3b8; }
.stat-icon  { color: var(--ink-soft); font-size: 1.05rem; }
.stat-label { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .35rem; }
.stat-value {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 600; margin-top: .15rem; line-height: 1.2;
  word-break: break-word;
}
.stat-hint  { color: var(--ink-soft); font-size: .78rem; margin-top: .2rem; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 600;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table > tbody td { vertical-align: middle; border-color: #eef2f5; }
.table-wrap { overflow-x: auto; }

/* Money and any figure column */
.num, .money, td.num, th.num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------- Referral link box ---------- */
.reflink {
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: var(--teal-tint);
  border: 1px solid #c7e5e0;
  border-radius: 10px;
  padding: .6rem .7rem;
}
.reflink input {
  border: 0; background: transparent; flex: 1 1 220px; min-width: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .85rem;
  color: var(--teal-dark);
}
.reflink input:focus { outline: none; }

/* ---------- Warnings ---------- */
.flag-self {
  background: var(--danger-tint);
  border-left: 3px solid #d92d20;
}
.badge-flag { background: #d92d20; color: #fff; }

/* ---------- Payout detail block ---------- */
.payout-box {
  background: #f8fafb; border: 1px dashed var(--line);
  border-radius: 10px; padding: .7rem .85rem;
  font-size: .875rem;
}
.payout-box dt { color: var(--ink-soft); font-weight: 500; font-size: .78rem; }
.payout-box dd { margin-bottom: .45rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------- Buttons ---------- */
.btn-teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-teal:hover, .btn-teal:focus { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.btn { border-radius: 8px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}

/* ---------- Forms ---------- */
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .3rem; }
.form-control, .form-select { border-radius: 8px; border-color: #d5dee6; }
.form-control:focus, .form-select:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,122,111,.12);
}
.form-text { font-size: .8rem; }

/* ---------- Auth pages ---------- */
.auth-body {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--slate);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  padding: 1.5rem;
}
.auth-body--affiliate { background: var(--teal-dark); }
.auth-wrap  { width: 100%; max-width: 420px; }
.auth-card  { background: #fff; border-radius: 14px; padding: 1.75rem; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.auth-title { font-size: 1.25rem; font-weight: 600; margin-bottom: .25rem; }
.auth-sub   { color: var(--ink-soft); font-size: .875rem; margin-bottom: 1.25rem; }

/* ---------- Notifications ---------- */
.note-item { border-bottom: 1px solid var(--line); padding: .8rem .2rem; }
.note-item.unread { background: var(--teal-tint); border-radius: 8px; padding-left: .7rem; padding-right: .7rem; }
.note-time { color: var(--ink-soft); font-size: .78rem; }

/* ---------- Footer ---------- */
.app-footer { padding: 1.5rem 0 2rem; color: var(--ink-soft); font-size: .8rem; }

/* ---------- Public landing ---------- */
.landing { background: var(--slate); color: #fff; min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.landing-card { max-width: 560px; text-align: center; }
.landing h1 { font-weight: 600; letter-spacing: -.02em; }
.landing p  { color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}