/* ===========================================================================
   Affiliate panel — light, clean theme with a left sidebar. Deliberately
   distinct from the admin panel's dark UI.
   =========================================================================== */
:root {
  --bg:        #f5f7fb;   /* page */
  --card:      #ffffff;   /* panels, cards */
  --ink:       #1a2233;   /* primary text */
  --ink-soft:  #5b667a;   /* secondary text */
  --line:      #e7ebf2;   /* borders */
  --line-2:    #d3d9e4;
  --brand:     #d6003b;   /* appic red-magenta brand */
  --brand-2:   #ad0055;
  --brand-ghost:#ffe8ee;
  --ok:        #10b981;
  --ok-bg:     #e7f8f1;
  --warn:      #f59e0b;
  --warn-bg:   #fef3e2;
  --bad:       #ef4444;
  --bad-bg:    #fdecec;
  --sidebar:   #ffffff;
  --shadow:    0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  padding: 22px 22px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line);
}
.brand img { height: 34px; width: auto; }
.brand .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }

.nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.nav-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-soft); padding: 14px 12px 6px; font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--ink-soft); font-weight: 500; font-size: 14px;
  margin-bottom: 2px; transition: background .12s, color .12s;
}
.nav a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.nav a.on { background: var(--brand-ghost); color: var(--brand); font-weight: 600; }
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-foot { padding: 14px; border-top: 1px solid var(--line); }
.sidebar-foot .who { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; padding: 0 6px; }
.sidebar-foot .who b { color: var(--ink); display: block; font-size: 14px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.content { padding: 28px; max-width: 1300px; width: 100%; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 9px; font-weight: 600; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; transition: all .12s;
  text-decoration: none;
}
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-2); text-decoration: none; }
.btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--bg); text-decoration: none; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}
.card-pad { padding: 22px; }
.card-head { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.card-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- KPI stat cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.kpi-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.kpi-ico svg { width: 20px; height: 20px; }
.kpi-ico.i-brand { background: var(--brand-ghost); color: var(--brand); }
.kpi-ico.i-ok    { background: var(--ok-bg);   color: var(--ok); }
.kpi-ico.i-warn  { background: var(--warn-bg); color: var(--warn); }
.kpi-ico.i-bad   { background: var(--bad-bg);  color: var(--bad); }
.kpi-val { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
.kpi-lbl { font-size: 13px; color: var(--ink-soft); margin-top: 6px; font-weight: 500; }

/* ---------- charts row ---------- */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 22px; }
.chart-wrap { padding: 20px; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-soft); font-weight: 600; padding: 12px 16px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--bg); }
.tbl .r { text-align: right; }

/* ---------- pills ---------- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-ok   { background: var(--ok-bg);   color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad  { background: var(--bad-bg);  color: var(--bad); }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffe8ee 0%, #fbf6f7 55%, #fff1f4 100%);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 400px; background: var(--card);
  border-radius: 18px; box-shadow: 0 10px 40px rgba(16,24,40,.10);
  padding: 38px 34px; border: 1px solid var(--line);
}
.login-logo { text-align: center; margin-bottom: 6px; }
.login-logo img { height: 54px; }
.login-title { text-align: center; font-size: 20px; font-weight: 700; margin: 14px 0 4px; }
.login-sub { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 26px; }

.field { margin-bottom: 16px; }
.label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-2);
  border-radius: 9px; background: #fff; color: var(--ink); font: inherit;
  color-scheme: light; transition: border-color .12s, box-shadow .12s;
}
.input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(214,0,59,.16);
}
.msg-bad {
  background: var(--bad-bg); color: var(--bad); border: 1px solid #f7c9c9;
  padding: 11px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 18px;
}
.msg-ok {
  background: var(--ok-bg); color: var(--ok); border: 1px solid #bfead9;
  padding: 11px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 18px;
}
.login-foot { text-align: center; margin-top: 20px; font-size: 13px; color: var(--ink-soft); }

/* ---------- flash ---------- */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.flash-ok  { background: var(--ok-bg);  color: var(--ok); }
.flash-bad { background: var(--bad-bg); color: var(--bad); }

/* ---------- empty ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--ink-soft); }

/* Mobile menu toggle + overlay (shown only under the 900px media query) */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px; padding: 0;
  background: transparent; border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--ink); cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle:hover { background: var(--bg); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(16,24,40,.45);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -248px; z-index: 50; transition: left .2s; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(16,24,40,.25); }
  .content { padding: 18px; }
  .menu-toggle { display: inline-flex; }
  .sidebar-overlay.show { display: block; }
}

/* ---------- offer cards ---------- */
.offer-id { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.offer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; }
.offer-meta > div { display: flex; flex-direction: column; }
.offer-meta span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.offer-meta b { font-size: 14px; margin-top: 1px; }
.offer-link { margin-bottom: 10px; }
.offer-link label { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 4px; }
.copy-btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.offer-pause { background: var(--warn-bg); color: var(--warn); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 10px; }

/* offer detail definition list */
.odl { margin: 0; }
.odl > div { display: flex; padding: 8px 0; border-bottom: 1px solid var(--line); }
.odl > div:last-child { border-bottom: none; }
.odl dt { width: 120px; color: var(--ink-soft); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.odl dd { margin: 0; font-size: 14px; }
.lk { color: var(--brand); font-weight: 500; }

/* Copyable tracking-link cell inside offer tables */
.copy-cell { display: flex; gap: 6px; align-items: center; min-width: 220px; }
.copy-input { font-size: 12px; padding: 7px 9px; min-width: 180px; }
.copy-btn2 { padding: 7px 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--card);
  color: var(--ink); cursor: pointer; }
.copy-btn2:hover { background: var(--bg); }
.cell-wrap { max-width: 260px; white-space: normal; word-break: break-word; font-size: 13px; }

/* Countries/geo cell: long country lists wrap and stay inside the cell instead
   of stretching the table. */
.tbl td.geo-cell { max-width: 220px; white-space: normal; word-break: break-word; font-size: 13px; }

/* Table search box (sits in the card header) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tbl-search { display: flex; align-items: center; gap: 8px; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 11px; min-width: 220px; }
.tbl-search svg { width: 15px; height: 15px; color: var(--ink-soft); flex-shrink: 0; }
.tbl-search-input { border: none; background: transparent; outline: none; font: inherit;
  font-size: 14px; color: var(--ink); width: 100%; }
.tbl-search-input::placeholder { color: var(--ink-soft); }

/* ---------- offer card grid (act / pas) ---------- */
.offer-searchbar { margin-bottom: 18px; max-width: 340px; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.offer-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.offer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.offer-name { font-weight: 700; font-size: 15px; }
.offer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; }
.offer-meta > div { display: flex; flex-direction: column; min-width: 0; }
.offer-meta span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; }
.offer-meta b { font-size: 14px; margin-top: 1px; }
/* long country lists wrap and stay inside the card */
.offer-geo { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.copy-row { display: flex; gap: 6px; }
.copy-row .input { font-size: 12px; padding: 8px 10px; min-width: 0; }
.offer-foot { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* ---------- table toolbar: search + export buttons ---------- */
.tbl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.tbl-export { display: flex; gap: 6px; }
.exp-btn {
  padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.exp-btn:hover { background: var(--brand-ghost); color: var(--brand); border-color: var(--brand); }
.exp-btn:active { transform: translateY(1px); }

@media (max-width: 700px) {
  .tbl-tools { width: 100%; margin-left: 0; }
  .tbl-search { flex: 1; min-width: 0; }
  .tbl-export { width: 100%; }
  .exp-btn { flex: 1; text-align: center; padding: 8px 6px; }
}

/* keep the print output clean if someone prints the page itself */
@media print {
  .sidebar, .sidebar-overlay, .topbar, .tbl-tools, .btn, .chart-wrap { display: none !important; }
  .main, .content, .card { margin: 0; padding: 0; box-shadow: none; border: 0; }
}
/* ---------------------------------------------------------------------
   Native date inputs on macOS.

   Two things go wrong there. If the Mac is in Dark Mode the browser paints
   the control's text and its little calendar glyph light, so on these white
   cards the field looks empty and the picker button is invisible. And the
   indicator's own colour can't be relied on across Safari/Chrome versions.

   So: pin the page to the light colour scheme, force the date text to the
   theme ink colour, and draw our OWN calendar icon as a background image so
   it is always visible whatever the OS theme is doing.
   --------------------------------------------------------------------- */
:root { color-scheme: light; }

input[type="date"].input,
input[type="month"].input,
input[type="datetime-local"].input {
  color-scheme: light;
  color: var(--ink);
  background-color: #fff;
  min-height: 42px;
}

/* the editable date text itself */
.input::-webkit-datetime-edit,
.input::-webkit-datetime-edit-fields-wrapper,
.input::-webkit-datetime-edit-text,
.input::-webkit-datetime-edit-day-field,
.input::-webkit-datetime-edit-month-field,
.input::-webkit-datetime-edit-year-field {
  color: var(--ink);
}
.input:invalid::-webkit-datetime-edit { color: var(--ink-soft); }

/* our own calendar button - always visible, never inherits an OS colour */
.input::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  filter: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}
.input::-webkit-calendar-picker-indicator:hover { opacity: .7; }

/* Firefox / non-webkit: make sure the field never renders dark-on-dark */
@supports (-moz-appearance: none) {
  input[type="date"].input { color: var(--ink); background: #fff; }
}