/* Advertising Platform - Advertiser UI (Revamp v2)
   Scope: .ap-wrap-frontend (safe to use within any theme)
*/

/* Some templates render WP's default login form directly (no wrapper).
   Provide safe defaults at :root so our fallback selectors work. */
:root{
  --ap-bg: #f8fafc;
  --ap-card: #ffffff;
  --ap-text: #0f172a;
  --ap-muted: #64748b;
  --ap-border: #e2e8f0;
  --ap-border-strong: #cbd5e1;
  --ap-border-soft: rgba(148,163,184,.55);
  --ap-soft: #f1f5f9;
  /* Brand blues (charts + UI accents) */
  --ap-primary: #2563eb;
  --ap-primary-2: #1e40af;
  --ap-danger: #b91c1c;
  --ap-danger-bg:#fff1f2;
  --ap-radius: 16px;
  --ap-radius-sm: 12px;
  --ap-shadow: 0 10px 25px rgba(2,6,23,.06);
  --ap-shadow-sm: 0 6px 16px rgba(2,6,23,.06);
  --ap-gap: 14px;
}

/* Phase 2 analytics helpers */
.ap-delta{font-size:12px; opacity:.85; margin-left:6px;}
.ap-device-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.ap-device{border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px 12px;}
@media (max-width:720px){
  .ap-device-grid{grid-template-columns:1fr;}
}

.ap-wrap-frontend{
  --ap-bg: #f8fafc;
  --ap-card: #ffffff;
  --ap-text: #0f172a;
  --ap-muted: #64748b;
  --ap-border: #e2e8f0;
  --ap-border-strong: #cbd5e1;
  --ap-border-soft: rgba(148,163,184,.55);
  --ap-soft: #f1f5f9;
  /* Brand blues (charts + UI accents) */
  --ap-primary: #2563eb;
  --ap-primary-2: #1e40af;
  --ap-danger: #b91c1c;
  --ap-danger-bg:#fff1f2;
  --ap-radius: 16px;
  --ap-radius-sm: 12px;
  --ap-shadow: 0 10px 25px rgba(2,6,23,.06);
  --ap-shadow-sm: 0 6px 16px rgba(2,6,23,.06);
  --ap-gap: 14px;
  color: var(--ap-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 16px 28px;
}

.ap-wrap-frontend *{ box-sizing:border-box; }

/* Notifications (bell) */
.ap-bell{ position: relative; display:inline-block; }
.ap-bell-btn{ position:relative; border:1px solid var(--ap-border); background:var(--ap-card); border-radius:999px; padding:8px 10px; cursor:pointer; box-shadow: var(--ap-shadow-sm); }
.ap-bell-btn:hover{ border-color: var(--ap-border-strong); }
.ap-bell-icon{ font-size:16px; line-height:1; }
.ap-bell-badge{ position:absolute; top:-6px; right:-6px; background: var(--ap-primary); color:#fff; border-radius:999px; font-size:11px; padding:2px 6px; border:2px solid var(--ap-card); }
.ap-bell-dropdown{ position:absolute; right:0; top:44px; width: 320px; max-width: 90vw; background: var(--ap-card); border:1px solid var(--ap-border); border-radius: 14px; box-shadow: var(--ap-shadow); overflow:hidden; z-index: 9999; }
.ap-bell-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--ap-border); }
.ap-bell-empty{ padding:12px; }
.ap-bell-list{ max-height: 380px; overflow:auto; }
.ap-bell-item{ display:block; padding:10px 12px; text-decoration:none; border-bottom:1px solid var(--ap-border); color: inherit; }
.ap-bell-item:last-child{ border-bottom:0; }
.ap-bell-item.is-unread{ background: rgba(37,99,235,.06); }
.ap-bell-title{ font-weight: 700; font-size: 13px; margin:0 0 4px; }
.ap-bell-msg{ font-size: 12px; margin:0 0 4px; opacity:.9; }
.ap-bell-time{ font-size: 11px; }

/* Headings / muted text */
.ap-hero{ margin: 4px 0 18px; }
.ap-hero h2{ margin:0 0 8px; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.ap-muted{ color: var(--ap-muted); font-size: 14px; margin: 0; line-height: 1.5; }

.ap-box{
  background: var(--ap-card);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 18px;
  margin-bottom: var(--ap-gap);
  box-shadow: var(--ap-shadow-sm);
}
.ap-box.ap-notice{ position: relative; padding-right: 44px; }
.ap-notice-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ap-border);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 24px;
  color: inherit;
}
.ap-notice-close:hover{ background: rgba(0,0,0,0.04); }
.ap-error{ border-color:#fecaca; background: var(--ap-danger-bg); color: var(--ap-danger); }

/* Steps pills */
.ap-steps{ display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 14px; }
.ap-step{
  padding: 9px 12px;
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color:#334155;
  background:#fff;
}
.ap-step.is-active{ border-color:#0f172a; background:#0f172a; color:#fff; }

/* Buttons */
.ap-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #0f172a;
  background:#0f172a;
  color:#fff;
  font-weight: 800;
  font-size: 13px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .08s ease, opacity .12s ease, background .12s ease;
}
.ap-btn:hover{ transform: translateY(-1px); opacity: .95; }
.ap-btn:active{ transform: translateY(0); opacity: .9; }
.ap-btn:focus{ outline: 3px solid rgba(15,23,42,.15); outline-offset: 2px; }

.ap-btn-secondary{
  border-color: var(--ap-border-strong);
  background:#fff;
  color:#0f172a;
}
.ap-btn-secondary:hover{ background: var(--ap-soft); }

/* Cards */
.ap-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ap-gap);
}
.ap-cards-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px){ .ap-cards-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .ap-cards{ grid-template-columns: 1fr; } }

.ap-card{
  background:#fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 16px;
  box-shadow: var(--ap-shadow-sm);
}
.ap-card .ap-card-title{ font-size: 13px; color: var(--ap-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ap-card .ap-card-value{ font-size: 26px; font-weight: 900; margin-top: 6px; letter-spacing: -0.02em; }
.ap-card .ap-card-sub{ margin-top: 6px; color: var(--ap-muted); font-size: 13px; }

/* Tables */
.ap-table-wrap{ overflow:auto; border-radius: var(--ap-radius); border: 1px solid var(--ap-border); background:#fff; }
.ap-table{ width:100%; border-collapse: collapse; min-width: 720px; }
.ap-table th, .ap-table td{ padding: 12px 12px; border-bottom: 1px solid var(--ap-border); font-size: 13px; text-align:left; vertical-align: middle; }
.ap-table th{ font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color:#475569; background: #f8fafc; position: sticky; top: 0; }
.ap-table tr:hover td{ background: #fafafa; }
.ap-table td .ap-btn{ padding: 8px 10px; border-radius: 10px; font-size: 12px; }

/* Chart.js wrapper (analytics) */
.ap-chart-card{ position:relative; }
.ap-chart-canvas{ position:relative; height:240px; }
.ap-chart-card canvas.ap-chartjs{ width:100% !important; height:100% !important; display:block; }
.ap-chart-card{ overflow:hidden; }
.ap-chart-canvas{ max-height:280px; }

/* Chart type switch pills */
.ap-chart__types{display:inline-flex;gap:8px;align-items:center;}
.ap-pill{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px;font-size:13px;line-height:1;cursor:pointer;}
.ap-pill.is-active{background:#0f172a;border-color:#0f172a;color:#fff;}
.ap-chart-fallback{ display:block; }
.ap-chartjs-ready .ap-chart-fallback{ display:none; }

/* ------------------------------------------------------------------
   Templates: advertiser dashboard + checkout + WP login fallback
   ------------------------------------------------------------------ */

/* Theme page titles for AP pages */
body.page-advertiser-dashboard .wp-block-post-title,
body.page-advertiser-inbox .wp-block-post-title,
body.page-advertiser-login .wp-block-post-title,
body.page-advertiser-signup .wp-block-post-title,
body.page-advertise-with-us .wp-block-post-title{
  font-size: clamp(28px, 4.2vw, 44px) !important;
  letter-spacing: -0.03em;
  margin-bottom: 14px !important;
}
body.page-advertiser-dashboard .entry-title,
body.page-advertiser-inbox .entry-title,
body.page-advertiser-login .entry-title,
body.page-advertiser-signup .entry-title,
body.page-advertise-with-us .entry-title{
  font-size: clamp(28px, 4.2vw, 44px) !important;
  letter-spacing: -0.03em;
  margin-bottom: 14px !important;
}

/* Stat tiles used in advertiser dashboard template */
.ap-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ap-gap);
  margin: 10px 0 12px;
}
@media (max-width: 980px){ .ap-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .ap-stats{ grid-template-columns: 1fr; } }

.ap-stat-num{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Section heading row */
.ap-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}
.ap-section-head h3{ margin: 0; font-size: 18px; letter-spacing: -0.02em; }

/* Date fields row in analytics */
.ap-inline{
  display:flex;
  align-items:flex-end;
  gap: 14px;
  flex-wrap:wrap;
}
.ap-field label{ display:block; margin: 0 0 6px; font-size: 12px; font-weight: 800; color:#334155; }
.ap-field input[type="date"],
.ap-field input[type="text"],
.ap-field input[type="number"],
.ap-field select{
  width: 220px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  background:#fff;
  font-size: 13px;
}

/* Range links (7d / 30d / 90d) */
.ap-range{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; }
.ap-range-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--ap-border);
  background:#fff;
  color:#334155;
  font-weight: 800;
  font-size: 12px;
  text-decoration:none;
}
.ap-range-btn:hover{ background: var(--ap-soft); }
.ap-range-btn.is-active{ border-color: var(--ap-primary); background: var(--ap-primary); color:#fff; }

/* Diagnostics text should not dominate */
.ap-diagnostics{ margin-top: 10px; color: var(--ap-muted); font-size: 12px; line-height: 1.45; }

/* WP default login form fallback (used on advertiser dashboard / inbox) */
.ap-box form#loginform,
.ap-box + form#loginform,
.ap-need-login form#loginform,
.ap-need-login #loginform{
  margin-top: 14px;
}
.ap-box form#loginform label,
.ap-need-login #loginform label{
  display:block;
  font-weight: 800;
  font-size: 12px;
  color:#334155;
  margin-bottom: 6px;
}
.ap-box form#loginform input[type="text"],
.ap-box form#loginform input[type="password"],
.ap-need-login #loginform input[type="text"],
.ap-need-login #loginform input[type="password"]{
  width: 100%;
  border:1px solid var(--ap-border);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}
.ap-box form#loginform p{ margin: 0 0 12px; }
.ap-box form#loginform .login-submit input,
.ap-need-login #loginform .login-submit input{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border:1px solid rgba(15, 23, 42, .14);
  background: var(--ap-primary);
  color:#fff;
  font-weight: 800;
  cursor:pointer;
}
.ap-box form#loginform .login-submit input:hover,
.ap-need-login #loginform .login-submit input:hover{ background: var(--ap-primary-2); }

/* Forms */
.ap-form label{ display:block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color:#334155; }
.ap-form input[type="text"],
.ap-form input[type="email"],
.ap-form input[type="number"],
.ap-form input[type="password"],
.ap-form select,
.ap-form textarea{
  width:100%;
  padding: 11px 12px;
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  background:#fff;
  font-size: 14px;
  color:#0f172a;
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ap-form textarea{ resize: vertical; min-height: 90px; }
.ap-form input:focus, .ap-form select:focus, .ap-form textarea:focus{
  border-color:#0f172a;
  box-shadow: 0 0 0 3px rgba(15,23,42,.12);
}
.ap-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){ .ap-grid2{ grid-template-columns: 1fr; } }

/* Small helper */
.ap-divider{ height:1px; background: var(--ap-border); margin: 14px 0; }

/* Charts (SVG) */
.ap-chart{ margin-top: 12px; }
.ap-chart svg{ width: 100%; height: 200px; display: block; }
.ap-chart .ap-chart-title{ margin: 0 0 8px; font-weight: 800; font-size: 13px; color: #334155; }


/* Chart.js canvas sizing */
.ap-chart-canvas-wrap{position:relative;width:100%;max-width:100%;}
.ap-chartjs{display:block;width:100% !important;height:100% !important;}
.ap-chart-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
/* Chart type switch (Line / Area / Bar)
   Some themes/plugins apply global button rules (e.g., display:block or width:100%)
   which can stack these vertically. Force a horizontal pill switch. */
.ap-chart-type{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ap-chart-type .ap-chart-type-btn{display:inline-flex;align-items:center;justify-content:center;width:auto !important;}
.ap-chart-type-btn{border:1px solid #d6dbe6;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer;}
.ap-chart-type-btn.is-active{background:#0b1320;color:#fff;border-color:#0b1320;}



/* Notice (dashboard messages) */
.ap-notice{ position:relative; padding-right:44px; }
.ap-notice-close{
  position:absolute; right:12px; top:10px;
  border:0; background:transparent; cursor:pointer;
  font-size:18px; line-height:1; color:var(--ap-muted);
}
.ap-notice-close:hover{ color:var(--ap-text); }

/* Inbox preview on dashboard */
.ap-inbox-preview{ display:flex; flex-direction:column; gap:10px; }
.ap-inbox-preview-item{
  border:1px solid var(--ap-border); border-radius:12px;
  padding:12px; background:var(--ap-soft);
}

/* Inbox page */
.ap-inbox{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.ap-inbox-item{
  border:1px solid var(--ap-border); border-radius:16px;
  padding:16px; background:var(--ap-card); box-shadow:var(--ap-shadow-sm);
}
.ap-inbox-top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; }
.ap-inbox-body{ margin-top:10px; white-space:pre-wrap; color:var(--ap-muted); }
.ap-inbox-body a.ap-link{ word-break:break-all; }


/* -------------------------------------------------
   Mobile stability fixes (no bleed / safe scrolling)
-------------------------------------------------- */
.ap-wrap-frontend{ overflow-x: hidden; }
.ap-wrap-admin{ overflow-x: hidden; }

.ap-wrap-frontend img,
.ap-wrap-admin img{ max-width:100%; height:auto; }

.ap-box,
.ap-card{ max-width:100%; }

.ap-muted,
.ap-note,
.ap-box p,
.ap-box li{ word-break: break-word; overflow-wrap: anywhere; }

/* Make tables scroll inside their card on small screens */
.ap-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
}

/* reduce min width so mobile doesn't overflow too much */
@media (max-width: 720px){
  .ap-table{ min-width: 640px; }
}
@media (max-width: 520px){
  .ap-table{ min-width: 520px; }
}
@media (max-width: 420px){
  .ap-table{ min-width: 460px; }
}

/* Buttons + controls wrap cleanly */
@media (max-width: 520px){
  .ap-inline{ flex-direction: column; align-items: stretch; }
  .ap-inline .ap-btn,
  .ap-inline button{ width: 100%; }
  .ap-tabs{ flex-wrap: wrap; }
  .ap-section-head{ align-items: flex-start; }
}

/* -------------------------------------------------
   EXTRA Mobile overflow hardening (v1.7)
   - keep layout within viewport
   - scroll tables inside cards (not page)
-------------------------------------------------- */
html, body{ max-width:100%; overflow-x:hidden; }

.ap-wrap-frontend, .ap-wrap-admin{ max-width:100vw; }
.ap-wrap-frontend *, .ap-wrap-admin *{ box-sizing:border-box; }

@media (max-width: 900px){
  .ap-card, .ap-box{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ap-card table, .ap-box table{ min-width: 680px; }
}

@media (max-width: 520px){
  .ap-card table, .ap-box table{ min-width: 560px; }
}

@media (max-width: 420px){
  .ap-card table, .ap-box table{ min-width: 520px; }
}


/* --- Mobile hard clamp for tables inside cards (prevents bleed) --- */
@media (max-width: 820px){
  .ap-wrap-frontend .ap-card,
  .ap-wrap-frontend .ap-box,
  .ap-wrap-admin .ap-card,
  .ap-wrap-admin .ap-box{
    overflow: hidden; /* keep rounded corners + stop internal bleed */
  }

  /* Any table inside plugin wrappers becomes its own horizontal scroll area */
  .ap-wrap-frontend table,
  .ap-wrap-admin table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep table layout intact while scrolling */
  .ap-wrap-frontend table thead,
  .ap-wrap-frontend table tbody,
  .ap-wrap-admin table thead,
  .ap-wrap-admin table tbody{
    display: table;
    width: max-content;
    min-width: 100%;
  }

  .ap-wrap-frontend table th,
  .ap-wrap-frontend table td,
  .ap-wrap-admin table th,
  .ap-wrap-admin table td{
    white-space: nowrap;
  }
}



/* v1.9 mobile overflow fix: ap-table min-width caused horizontal bleed */
@media (max-width: 820px){
  .ap-wrap-frontend .ap-table,
  .ap-wrap-admin .ap-table{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ap-wrap-frontend .ap-table thead,
  .ap-wrap-frontend .ap-table tbody,
  .ap-wrap-admin .ap-table thead,
  .ap-wrap-admin .ap-table tbody{
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  .ap-wrap-frontend .ap-table th,
  .ap-wrap-frontend .ap-table td,
  .ap-wrap-admin .ap-table th,
  .ap-wrap-admin .ap-table td{
    white-space: nowrap !important;
  }
}



/* Phase 4: Threaded inbox */
.ap-inbox-threads { display: flex; flex-direction: column; gap: 10px; }
.ap-thread-row { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid #e6edf7; border-radius:14px; text-decoration:none; color:inherit; background:#fff; }
.ap-thread-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.ap-thread-title { display:flex; align-items:center; gap:8px; }
.ap-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#1b4fd6; color:#fff; font-size:12px; font-weight:700; }
.ap-thread-preview { max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-thread-time { white-space: nowrap; }
.ap-thread-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.ap-thread-messages { display:flex; flex-direction:column; gap:10px; padding:10px; border:1px solid #e6edf7; border-radius:14px; background:#fafcff; max-height: 420px; overflow:auto; }
.ap-msg { max-width: 85%; padding:10px 12px; border-radius:14px; border:1px solid #e6edf7; background:#fff; }
.ap-msg-meta { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin-bottom:6px; }
.ap-msg-body { font-size:14px; line-height:1.45; }
.ap-msg-me { margin-left:auto; background:#f4f8ff; }
@media (max-width: 600px){
  .ap-thread-row { flex-direction: column; align-items:flex-start; }
  .ap-thread-preview { max-width: 100%; }
  .ap-thread-time { align-self:flex-end; }
  .ap-thread-messages { max-height: 360px; }
  .ap-msg { max-width: 100%; }
}

/* FIX: restore vertical spacing between cards grid and next section */
.ap-wrap-frontend .ap-cards{
  margin-bottom: 18px;
}