/*
  Origami Ads Manager — global design tokens + shared components.
  Tokens sourced from notes/14-design-conventions.md (adapted from the css-html
  reference). Included once, via the shared Tiles layout (default.jsp) — pages add
  their own css/pages/<name>.css on top, per the same notes file.
*/

:root {
  --color-primary: #e67e22;
  --color-tint-1: #fdf2e9;
  --color-tint-2: #fae5d3;
  --color-tint-3: #eb984e;
  --color-shade-1: #cf711f;
  --color-shade-2: #45260a;

  --color-grey-1: #888;
  --color-grey-2: #767676;
  --color-grey-3: #6f6f6f;
  --color-grey-4: #555;
  --color-grey-5: #333;

  --color-success: #2f9e44;
  --color-error: #c92a2a;

  --font-family: "Rubik", sans-serif;

  --radius-default: 9px;
  --radius-medium: 11px;

  --shadow-default: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
}

/* ---- Reset ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.6;
  font-size: 1.6rem;
  color: var(--color-grey-5);
  background-color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---- Layout ---- */
.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.grid--2-cols { grid-template-columns: repeat(2, 1fr); }
.grid--3-cols { grid-template-columns: repeat(3, 1fr); }
.grid--4-cols { grid-template-columns: repeat(4, 1fr); }

/* None of the .grid--N-cols variants had a mobile collapse — a fixed 3 or 4 column grid on a
   phone-width screen squeezes every card into an unreadably narrow column. Used by both
   landing.jsp and home.jsp, so this is fixed here rather than per-page. */
@media (max-width: 900px) {
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid--2-cols,
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: 1fr;
  }
}

/* ---- Typography ---- */
.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-weight: 700;
  color: var(--color-grey-5);
  letter-spacing: -0.5px;
}

.heading-primary   { font-size: 5.2rem; line-height: 1.05; margin-bottom: 3.2rem; }
.heading-secondary { font-size: 4.4rem; line-height: 1.2;  margin-bottom: 4.8rem; }
.heading-tertiary   { font-size: 3rem;   line-height: 1.2;  margin-bottom: 3.2rem; }

/*
  Closes off an entire recurring bug class in one place instead of one page-CSS file at a
  time: .icon has no global bare sizing rule anywhere (only ever scoped, e.g. .btn .icon per
  theme), so any <svg class="icon"> dropped directly inside a heading — which several admin
  pages do, e.g. Credentials' <h1 class="heading-tertiary"><svg class="icon">...key.
  Credentials</h1> — rendered at the browser's unstyled default size (visibly huge, and wide
  enough to squeeze a flex-sibling button like "Rotate master key" into a cramped, wrapped
  column). Already independently hit and patched per-page on the landing page, Edit Project,
  the client header, and the Ad Creative form; this is the same bug, fixed once, globally,
  for every current and future heading icon instead of finding each instance by hand.
*/
.heading-primary .icon,
.heading-secondary .icon,
.heading-tertiary .icon {
  width: 2.4rem;
  height: 2.4rem;
  vertical-align: -0.3rem;
  margin-right: 0.4rem;
}

.subheading {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-shade-1);
  text-transform: uppercase;
}

/* ---- Buttons ---- */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  font-size: 1.8rem;
  font-family: inherit;
  font-weight: 600;
  padding: 1.4rem 3.2rem;
  border-radius: var(--radius-default);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

/* Shared hover/press lift across every button variant — a small tactile cue (translateY +
   soft shadow on hover, settles back down on press) rather than a per-variant color swap only.
   .icon inside a button gets its own tiny scale nudge on the same hover, same "give the
   clickable thing a bit of life" idea as the dashboard tile icon hover already uses. */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn .icon {
  transition: transform 0.2s ease;
}
.btn:hover .icon {
  transform: scale(1.12);
}

.btn--full {
  background-color: var(--color-primary);
  color: #fff;
}
.btn--full:hover { background-color: var(--color-shade-1); }

.btn--outline {
  background-color: #fff;
  color: var(--color-grey-4);
  box-shadow: 0 0 0 1px var(--color-tint-2) inset;
}
.btn--outline:hover { background-color: var(--color-tint-1); box-shadow: 0 0 0 1px var(--color-tint-2) inset, 0 6px 16px rgba(15, 23, 42, 0.1); }

.btn--form {
  background-color: var(--color-shade-2);
  color: var(--color-tint-1);
  align-self: end;
  padding: 1.2rem;
}
.btn--form:hover { background-color: #fff; color: var(--color-grey-5); }

/* Compact variant for inline table-row actions (e.g. the Transactions Reconcile/Abandon
   buttons) — the base .btn's padding/font-size is sized for standalone form buttons, too
   large to sit two-up inside a DataTables cell. */
.btn--small {
  padding: 0.6rem 1.4rem;
  font-size: 1.3rem;
}

.prov-inline-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Compact "Add new X" action living in a list page's .admin-section-header — the base .btn's
   padding/font-size is sized for a standalone full-width form submit, which made every list
   page's header button balloon to 3-4 lines tall as soon as the viewport narrowed (label
   wrapping inside an oversized button, not an icon-sizing issue). white-space:nowrap plus
   align-self:flex-start keeps it compact and pinned to its own size instead of stretching to
   match its header row's height. */
.btn--header-action {
  padding: 1rem 2rem;
  font-size: 1.4rem;
  white-space: nowrap;
  align-self: flex-start;
  flex-shrink: 0;
}

/* ---- Tags ---- */
.tag {
  display: inline-block;
  border-radius: 100px;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.4rem 1.2rem;
}

/* ---- Cards ---- */
.card {
  background-color: #fff;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-default);
  padding: 3.2rem;
}

/* ---- Forms ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.form-field label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-grey-4);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 1.5rem;
  padding: 1.1rem 1.4rem;
  color: var(--color-grey-5);
  border: 1px solid var(--color-tint-2);
  background-color: #fff;
  border-radius: var(--radius-default);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--color-grey-1);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(230, 125, 34, 0.15);
}

.form-message {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 1.6rem;
  border-radius: var(--radius-default);
  border-left: 3px solid transparent;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
}

.form-message--error {
  background-color: #fff0f0;
  border-left-color: var(--color-error);
  color: #9a2020;
}

.form-message--success {
  background-color: #edfaf0;
  border-left-color: var(--color-success);
  color: #1f7a34;
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.6rem rgba(230, 125, 34, 0.35);
}

/* ---- Base layout chrome (header/main/footer, matches existing header.jsp/footer.jsp) ---- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3.2rem;
  border-bottom: 1px solid var(--color-tint-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-logo {
  width: 3.2rem;
  height: 3.2rem;
}

.brand-name {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-grey-5);
}

header nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.4rem;
}

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background-color: #fff;
  border: 1px solid var(--color-tint-2);
  border-radius: 100px;
  padding: 0.4rem;
}

.nav-tab {
  padding: 0.8rem 1.8rem;
  border-radius: 100px;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-grey-4);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-tab:hover {
  background-color: var(--color-tint-1);
  color: var(--color-grey-5);
}

/*
  header has no hamburger/collapsed-menu behavior — on a narrow phone, the brand name plus 4
  padded pills (Login/Sign up/About Us/Pricing) don't fit on one line. Dropping the brand name
  and letting the pill bar wrap keeps everything on-screen and tappable without needing a full
  mobile-nav rebuild.
*/
@media (max-width: 560px) {
  header {
    flex-wrap: wrap;
    row-gap: 0.8rem;
  }

  .brand-name {
    display: none;
  }

  .nav-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-tab {
    padding: 0.6rem 1.2rem;
    font-size: 1.3rem;
  }
}

/*
  Wraps the username link + logout button in the same soft-pill treatment as .nav-tabs,
  so the authenticated header reads as one coherent nav bar (tabs + account cluster) instead
  of a styled tab group followed by two bare, unstyled links — matching the public homepage's
  level of polish.
*/
.nav-account {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.6rem 0.5rem 1.4rem;
  background-color: var(--color-tint-1);
  border-radius: 100px;
}

.nav-user {
  color: var(--color-shade-1);
  font-size: 1.3rem;
  font-weight: 600;
}

.nav-logout-form {
  display: inline-flex;
  margin: 0;
}

.nav-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-grey-3);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link-button:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* .icon has no global bare sizing rule (only scoped ones, e.g. .btn .icon per theme) — this
   is the button's only content, so it needs its own explicit size or it renders at the
   browser's unstyled default (the same bug already hit on the landing page and Edit Project). */
.nav-link-button .icon {
  width: 1.4rem;
  height: 1.4rem;
}

main {
  padding: 3.2rem;
  min-height: 60vh;
}

.site-footer {
  padding: 4.8rem 3.2rem 2.4rem;
  border-top: 1px solid var(--color-tint-2);
  color: var(--color-grey-2);
  font-size: 1.4rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3.2rem;
  padding-bottom: 3.6rem;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.footer-logo {
  width: 2.8rem;
  height: 2.8rem;
}

.footer-brand-name {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-grey-5);
}

.footer-tagline {
  line-height: 1.6;
  max-width: 32rem;
}

.footer-col-title {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-grey-5);
  margin-bottom: 1.4rem;
}

.footer-col a,
.footer-col p {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-grey-2);
}

.footer-col a:hover {
  color: var(--color-primary);
}

.footer-address {
  line-height: 1.5;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-tint-2);
  font-size: 1.3rem;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.footer-legal a:hover {
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3.2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Page loader — full-screen overlay shown on every page until window "load" fires (see
   global.js). Included at the top of <body> in every base layout, so it paints first. ---- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Literal color, not var(--color-tint-1): this element must render correctly before
     global.css itself has loaded (see the inline critical-CSS copy in each layout's <head>) —
     a var() that doesn't resolve yet makes background-color invalid, leaving the overlay fully
     transparent and showing whatever's behind it (a black blank-page background in dark mode). */
  background-color: #fdf2e9;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-badge {
  position: relative;
  width: 9.6rem;
  height: 9.6rem;
}

.page-loader-logo {
  width: 100%;
  height: 100%;
  animation: pageLoaderPulse 1.6s ease-in-out infinite;
}

.page-loader-ring {
  position: absolute;
  inset: -1.6rem;
  width: calc(100% + 3.2rem);
  height: calc(100% + 3.2rem);
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 180 300;
  animation: pageLoaderSpin 1.2s linear infinite;
}

@keyframes pageLoaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes pageLoaderSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-logo,
  .page-loader-ring {
    animation: none;
  }
}

/* ---- Split create-page layout (form left, explanation panel right) ----
   Shared across both themes since several of these pages (Campaign/Ad Set/Ad Creative/Ad)
   render under either theme via BaseController.themedPage() — the layout/spacing lives here
   so it's identical either way; only the illustration panel's color is a per-page modifier.
   A plain icon-badge + copy instead of a hand-drawn graphic, deliberately: this project has
   already shipped one hand-coded inline-SVG illustration that came out visibly wrong (the
   page-loader logo) — reusing the existing, already-correct icon sprite at a larger size is a
   safer way to add visual interest than freehand SVG paths. */
.split-form-card {
  max-width: 104rem;
  display: flex;
  padding: 0;
  overflow: hidden;
}

.split-form-side {
  flex: 1 1 50%;
  min-width: 0;
  padding: 3.2rem;
}

.split-illustration-side {
  flex: 1 1 50%;
  min-width: 0;
  padding: 4rem 3.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.split-illustration-icon {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.4rem;
  flex-shrink: 0;
}

.split-illustration-icon .icon {
  width: 3.2rem;
  height: 3.2rem;
  color: #fff;
}

.split-illustration-side h2 {
  color: #fff;
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
}

.split-illustration-side p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.split-illustration-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.split-illustration-points li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.3rem;
  line-height: 1.5;
}

.split-illustration-points .icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: #fff;
}

.split-illustration-side--blue   { background: linear-gradient(135deg, #1c5cc4, #5b93e8); }
.split-illustration-side--indigo { background: linear-gradient(135deg, #4c3fd6, #8478ef); }
.split-illustration-side--purple { background: linear-gradient(135deg, #8a2be2, #b171ea); }
.split-illustration-side--pink   { background: linear-gradient(135deg, #d6336c, #ee7aa2); }
.split-illustration-side--amber  { background: linear-gradient(135deg, #a9760a, #d9a53a); }
.split-illustration-side--orange { background: linear-gradient(135deg, #c65b0f, #e88a3f); }
.split-illustration-side--green  { background: linear-gradient(135deg, #237a37, #4fae65); }
.split-illustration-side--cyan   { background: linear-gradient(135deg, #0e7186, #3aa8bd); }
.split-illustration-side--rose   { background: linear-gradient(135deg, #b8272c, #e0666a); }
.split-illustration-side--slate  { background: linear-gradient(135deg, #334155, #64748b); }

@media (max-width: 900px) {
  .split-form-card {
    flex-direction: column;
  }
  .split-illustration-side {
    order: -1;
  }
}

/* ---- Colored outline button variants — same palette as .admin-section-instructions--* /
   .split-illustration-side--* everywhere else, so a row of differently-purposed actions (e.g.
   Projects' Edit/Campaigns/Creatives/Performance row) reads at a glance instead of every
   button looking identical. Text/border only, white fill — same visual weight as .btn--outline,
   just tinted, so it doesn't compete with .btn--full's solid primary color for attention. */
.btn--outline-blue   { color: #1c5cc4; box-shadow: 0 0 0 1px #1c5cc4 inset; }
.btn--outline-blue:hover   { background-color: #eaf1fc; box-shadow: 0 0 0 1px #1c5cc4 inset, 0 6px 16px rgba(15, 23, 42, 0.1); }
.btn--outline-indigo { color: #4c3fd6; box-shadow: 0 0 0 1px #4c3fd6 inset; }
.btn--outline-indigo:hover { background-color: #efedfd; box-shadow: 0 0 0 1px #4c3fd6 inset, 0 6px 16px rgba(15, 23, 42, 0.1); }
.btn--outline-amber  { color: #a9760a; box-shadow: 0 0 0 1px #a9760a inset; }
.btn--outline-amber:hover  { background-color: #fbf1dc; box-shadow: 0 0 0 1px #a9760a inset, 0 6px 16px rgba(15, 23, 42, 0.1); }
.btn--outline-green  { color: #237a37; box-shadow: 0 0 0 1px #237a37 inset; }
.btn--outline-green:hover  { background-color: #e7f5ea; box-shadow: 0 0 0 1px #237a37 inset, 0 6px 16px rgba(15, 23, 42, 0.1); }
.btn--outline-rose   { color: #b8272c; box-shadow: 0 0 0 1px #b8272c inset; }
.btn--outline-rose:hover   { background-color: #fbe9e9; box-shadow: 0 0 0 1px #b8272c inset, 0 6px 16px rgba(15, 23, 42, 0.1); }

/* ---------- Small screens: nothing may push the page sideways ----------
   Long unbroken text (ids, file paths, JSON) wraps; wide tables scroll inside themselves; buttons and badges wrap their label. */
code, pre, .form-hint, .creative-preview-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre { white-space: pre-wrap; max-width: 100%; }

@media (max-width: 720px) {
  .admin-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .btn, .btn--full, .btn--outline, .status-badge {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 720px) {
  /* A page header (title + action button) wraps instead of pushing the button off the screen */
  .admin-section-header {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .admin-section-header > * {
    min-width: 0;
    max-width: 100%;
  }
}

/* a button whose form is on its way: it cannot be clicked again */
.is-busy, button:disabled.is-busy { opacity: 0.6; cursor: progress; }