/* Advertising Platform - UI (CSS Revamp)
   Scope: AP classes.
   Important: some AP templates render markup without the .ap-wrap-frontend
   wrapper (e.g., wp_login_form on dashboards). To avoid “unstyled” blocks,
   we define AP CSS variables at :root as sane defaults.
*/

:root{
  --ap-bg: #f8fafc;
  --ap-card: #ffffff;
  --ap-text: #0f172a;
  --ap-muted: #64748b;
  --ap-border: #e2e8f0;
  --ap-border-strong: #cbd5e1;
  /* used by .ap-box and various cards */
  --ap-border-soft: rgba(148,163,184,.55);
  --ap-soft: #f1f5f9;
  /* primary actions */
  /* 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: 1280px; /* was 1180px */
  margin: 0 auto;
  padding: 22px 16px 28px;
}

.ap-wrap-frontend *{ box-sizing:border-box; }
.ap-wrap-frontend a{ color: inherit; }
.ap-link{ text-decoration: underline; text-underline-offset: 3px; }

/* 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; }

.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-soft);
  border-radius: var(--ap-radius);
  padding: 18px;
  margin-bottom: var(--ap-gap);
  box-shadow: var(--ap-shadow);
}

/* Dismissible notices */
.ap-dismissible{ position: relative; padding-right: 44px; }
.ap-dismiss{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ap-border-soft);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 24px;
  color: inherit;
}
.ap-dismiss:hover{ background: rgba(0,0,0,0.04); }

/* Page title + spacing (theme post-title is outside AP wrapper) */
.page-ads-admin-dashboard .wp-block-post-title,
.page-advertiser-dashboard .wp-block-post-title,
.page-advertiser-login .wp-block-post-title,
.page-advertiser-signup .wp-block-post-title,
.page-advertise-with-us .wp-block-post-title,
.page-invoice .wp-block-post-title{
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px !important;
}

.page-ads-admin-dashboard .wp-block-post-content,
.page-advertiser-dashboard .wp-block-post-content,
.page-advertiser-login .wp-block-post-content,
.page-advertiser-signup .wp-block-post-content,
.page-advertise-with-us .wp-block-post-content,
.page-invoice .wp-block-post-content{
  padding-top: 10px;
}

/* Header row used in admin dashboard */
.ap-hero-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.ap-hero-row .ap-btn{ white-space: nowrap; }

.ap-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

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

/* Button group used for ranges */
.ap-range{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }
.ap-range-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ap-border);
  background:#fff;
  font-weight: 800;
  font-size: 12px;
  color:#334155;
  text-decoration:none;
}
.ap-range-btn:hover{ background: var(--ap-soft); border-color: var(--ap-border-strong); }
.ap-range-btn.is-active{ background: var(--ap-primary); border-color: var(--ap-primary); color:#fff; }

/* Diagnostics text block */
.ap-diagnostics{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--ap-border);
  border-radius: 12px;
  color: var(--ap-muted);
  font-size: 13px;
  line-height: 1.5;
  background: #fff;
}

/* Metric/stat tiles (used in dashboards) */
.ap-stat{
  display:flex;
  flex-direction:column;
  gap: 4px;
  padding: 14px 14px;
  background: var(--ap-card);
  border: 1px solid var(--ap-border-soft);
  border-radius: 12px;
  box-shadow: var(--ap-shadow-sm);
  min-height: 64px;
}
.ap-stat__num,
.ap-stat-num{ font-size: 20px; font-weight: 800; line-height: 1.1; }
.ap-stat__label,
.ap-stat .ap-muted{ font-size: 13px; color: var(--ap-muted); }

.ap-error{
  border-color: #fecaca;
  background: var(--ap-danger-bg);
  color: var(--ap-danger);
}

/* Tabs */
.ap-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 16px;
}
.ap-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-weight: 600;
  font-size: 13px;
  text-decoration:none;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.ap-tab:hover{ border-color: var(--ap-border-strong); transform: translateY(-1px); }
.ap-tab.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 !important;
  background:#0f172a !important;
  color:#fff !important;
  font-weight: 700;
  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) !important;
  background:#fff !important;
  color:#0f172a !important;
}
.ap-btn-secondary:hover{ background: var(--ap-soft); }

.ap-btn-danger{
  border-color:#b91c1c !important;
  background:#b91c1c !important;
  color:#fff !important;
}
.ap-btn-danger:hover{ opacity:.95; }

/* 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: 700; 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; }

/* 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 input[type="date"],
.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; } }

/* Quick Place Ads layout */
.ap-qp-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-qp-span{ grid-column: 1 / -1; }
.ap-qp-creative{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items:start; }
@media (max-width: 720px){ .ap-qp-grid{ grid-template-columns: 1fr; } .ap-qp-creative{ grid-template-columns: 1fr; } }

/* 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; }

/* Analytics toggle */
.ap-toggle{
  display:inline-flex;
  gap:8px;
  padding: 6px;
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  background:#fff;
}
.ap-toggle a{
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  font-size: 12px;
  color:#334155;
}
.ap-toggle a.is-active{ background:#0f172a; color:#fff; }

/* Notices spacing */
.ap-box + .ap-box{ margin-top: 0; }

/*
  Fallback styling for WordPress default login form output.
  Some templates render wp_login_form() directly (no AP wrapper/classes),
  which otherwise looks unstyled and “broken”.
*/
.ap-box + form#loginform,
.ap-box + #loginform,
.ap-need-login form#loginform,
.ap-need-login #loginform{
  max-width: 520px;
  margin: 18px 0 0;
  background: var(--ap-card);
  border: 1px solid var(--ap-border-soft);
  border-radius: var(--ap-radius);
  padding: 18px;
  box-shadow: var(--ap-shadow);
}
.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 p.login-remember,
.ap-need-login #loginform p.login-remember{ margin-top: 6px; }
.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); }

/* Ensure buttons inside alerts keep readable text */
.ap-alert .ap-btn{ color:#fff; }
.ap-alert .ap-btn-secondary{ color: var(--ap-primary); }

/* 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; }

/* ------------------------------------------------------------------
   Dashboard + checkout specific helpers (matches real template markup)
   ------------------------------------------------------------------ */

/* Page titles (theme-generated) – reduce the “giant H1” on AP pages */
body.page-ads-admin-dashboard .wp-block-post-title,
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,
body.page-invoice .wp-block-post-title,
body.page-invoice .entry-title,
body.page-ads-admin-dashboard .entry-title,
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(26px, 4vw, 48px) !important;
  letter-spacing: -0.03em;
  margin-bottom: 14px !important;
}

/* Hero row (Admin dashboard title + quick action) */
.ap-hero-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.ap-hero-row .ap-hero{ flex: 1 1 auto; }
.ap-hero-row > .ap-btn{ flex: 0 0 auto; margin-top: 6px; }
@media (max-width: 720px){
  .ap-hero-row{ flex-direction:column; }
  .ap-hero-row > .ap-btn{ width: 100%; justify-content:center; }
}

/* Section header rows used across advertiser/admin */
.ap-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.ap-section-head h3,
.ap-section-head h4{ margin:0; }

/* Stat tiles used on advertiser dashboard templates */
.ap-stat-num{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Inline filters (date pickers etc.) */
.ap-inline{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.ap-field label{ display:block; margin-bottom: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: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  background:#fff;
  font-size: 14px;
  outline: none;
}

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

/* Tables: tighter on mobile */
@media (max-width: 720px){
  .ap-table{ min-width: 620px; }
}

/* Make wp_login_form output look like our UI even outside wrappers */
form#loginform input[type="submit"],
form#loginform .button-primary{
  border-color: var(--ap-primary) !important;
  background: var(--ap-primary) !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}
form#loginform input[type="submit"]:hover{ background: var(--ap-primary-2) !important; }



/* 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;}

/* Inline shortcode pill (used in diagnostics tip text). */
.ap-inline-code{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#f8fafc;
  color:#0f172a;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  line-height:1.2;
}


/* -------------------------------------------------
   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; }

/* Desktop should respect the real max-width above. Clamp only on mobile. */
@media (max-width: 820px){
  .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 styles (admin) */
.ap-thread-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e6edf7;
  border-radius: 14px;
  background: #fafcff;
  max-height: 520px;
  overflow: auto;
}
.ap-msg {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e6edf7;
  background: #fff;
}
.ap-msg-me { margin-left: auto; background: #f4f8ff; }
.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; }
@media (max-width: 600px){
  .ap-msg { max-width: 100%; }
  .ap-thread-messages { max-height: 420px; }
}

/* -------------------------------------------------
   Phase 6 spacing polish (SAFE: only adds space)
-------------------------------------------------- */

/* consistent breathing room between major blocks */
.ap-wrap-frontend .ap-box + .ap-box{
  margin-top: 14px;
}

/* give sections inside a box a little separation */
.ap-wrap-frontend .ap-section-head{
  margin-bottom: 16px;
  padding-bottom: 12px;
}

/* tables shouldn't stick to the element above */
.ap-wrap-frontend .ap-table-wrap{
  margin-top: 12px;
}

/* forms inside boxes need air above them */
.ap-wrap-frontend .ap-box form.ap-form{
  margin-top: 12px;
}

/* card grid spacing */
.ap-wrap-frontend .ap-cards{
  gap: 18px; /* was var(--ap-gap)=14px */
}

/* headings inside boxes need air below */
.ap-wrap-frontend .ap-box h3,
.ap-wrap-frontend .ap-box h4{
  margin-bottom: 10px;
}

/* Widen THEME container only on AP pages (Brk theme wrappers) */
body.page-ads-admin-dashboard .brk-container,
body.page-advertiser-dashboard .brk-container,
body.page-advertiser-inbox .brk-container,
body.page-invoice .brk-container{
  max-width: 1400px !important;
}

/* Keep content centered and padded */
body.page-ads-admin-dashboard .brk-container,
body.page-advertiser-dashboard .brk-container,
body.page-advertiser-inbox .brk-container,
body.page-invoice .brk-container{
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

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