/* Business Process Portal — Portal Purple theme.

   Applies under the `.ft-theme` wrapper class with `ft-` prefixed classes; enqueued by
   BPP_Theme only while this theme is active. Portal Teal (bpp-brand.css) mirrors these
   classes with a `bpp-` prefix.

   No external requests: OS-native fonts only, no @import and no external url(). */

/* Design tokens */
:root {
  /* Core palette */
  --ft-dark: #160028;           /* Headings, dark surfaces */
  --ft-body-text: #494150;      /* Body copy */
  --ft-white: #ffffff;

  --ft-red: #ff0000;
  --ft-pink: #ff008c;
  --ft-magenta: #ff65ff;
  --ft-purple: #8600f6;
  --ft-sky: #5ccaf3;

  /* Light tints (20% colour, 80% white) */
  --ft-red-tint: #ffcccc;
  --ft-pink-tint: #ffcce8;
  --ft-magenta-tint: #ffe0ff;
  --ft-purple-tint: #e7ccfd;
  --ft-sky-tint: #def4fd;
  --ft-grey-tint: #e7e5e9;

  /* Brand gradient: purple, pink, red */
  --ft-gradient: linear-gradient(135deg, var(--ft-purple) 0%, var(--ft-pink) 55%, var(--ft-red) 100%);
  --ft-gradient-soft: linear-gradient(135deg, var(--ft-purple-tint) 0%, var(--ft-pink-tint) 55%, var(--ft-red-tint) 100%);

  /* OS-native font stack; nothing is fetched. */
  --ft-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
  --ft-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
  --ft-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;

  --ft-weight-body: 300;
  --ft-weight-regular: 400;
  --ft-weight-medium: 500;
  --ft-weight-bold: 700;
  --ft-weight-heading: 900;

  /* Type scale built on wp-admin's own sizes (13px content, 23px page title). */
  --ft-text-base: 0.8125rem;    /* 13px */
  --ft-text-sm: 0.75rem;        /* 12px */
  --ft-text-xs: 0.6875rem;      /* 11px */
  --ft-text-lg: 0.9375rem;      /* 15px */
  --ft-h4: 0.875rem;            /* 14px */
  --ft-h3: 1rem;                /* 16px */
  --ft-h2: 1.125rem;            /* 18px */
  --ft-h1: 1.4375rem;           /* 23px */

  --ft-line-height-heading: 1.3;
  --ft-line-height-body: 1.4;
  --ft-letter-spacing-eyebrow: 0.12em;

  /* Spacing and shape */
  --ft-radius-sm: 4px;
  --ft-radius-md: 8px;
  --ft-radius-lg: 14px;
  --ft-radius-pill: 999px;
  --ft-space-1: 0.375rem;
  --ft-space-2: 0.625rem;
  --ft-space-3: 1rem;
  --ft-space-4: 1.5rem;
  --ft-space-5: 2rem;

  --ft-shadow-sm: 0 2px 8px rgba(22, 0, 40, 0.08);
  --ft-shadow-md: 0 8px 24px rgba(22, 0, 40, 0.14);
  --ft-transition: 180ms ease;
}

/* Scope and reset: applies only inside the theme wrapper. */
.ft-theme {
  color: var(--ft-body-text);
  font-family: var(--ft-font-body);
  font-weight: var(--ft-weight-body);
  font-size: var(--ft-text-base);
  line-height: var(--ft-line-height-body);
  -webkit-font-smoothing: antialiased;
}

.ft-theme *,
.ft-theme *::before,
.ft-theme *::after {
  box-sizing: border-box;
}

.ft-theme img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography: text uses only the two palette text colours. */
.ft-theme h1,
.ft-theme h2,
.ft-theme h3,
.ft-theme h4,
.ft-theme h5,
.ft-theme h6 {
  font-family: var(--ft-font-heading);
  font-weight: var(--ft-weight-heading);
  color: var(--ft-dark);
  line-height: var(--ft-line-height-heading);
  margin: 0 0 var(--ft-space-2);
}

.ft-theme h1 { font-size: var(--ft-h1); }
.ft-theme h2 { font-size: var(--ft-h2); }
.ft-theme h3 { font-size: var(--ft-h3); }
.ft-theme h4,
.ft-theme h5, .ft-theme h6    { font-size: var(--ft-h4); }

.ft-theme p {
  margin: 0 0 var(--ft-space-2);
  color: var(--ft-body-text);
  font-weight: var(--ft-weight-body);
}

.ft-theme strong, .ft-theme b {
  font-weight: var(--ft-weight-bold);
}

.ft-theme a {
  color: var(--ft-dark);
  text-decoration: underline;
  text-decoration-color: var(--ft-purple);
  text-underline-offset: 2px;
  transition: color var(--ft-transition);
}

.ft-theme a:hover,
.ft-theme a:focus {
  color: var(--ft-purple);
}

/* Buttons */
.ft-theme .ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--ft-font-heading);
  font-weight: var(--ft-weight-bold);
  font-size: var(--ft-text-base);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--ft-radius-pill);
  padding: 0.35em 0.9em;
  min-height: 28px;
  box-sizing: border-box; /* Keeps <button> and <a> buttons the same height. */
  cursor: pointer;
  transition: transform var(--ft-transition), box-shadow var(--ft-transition),
              background-color var(--ft-transition), color var(--ft-transition),
              border-color var(--ft-transition);
}
.ft-theme .ft-btn:hover,
.ft-theme .ft-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--ft-shadow-sm);
}

/* Row-action size, matching core's `button-small`. */
.ft-theme .ft-btn-small {
  min-height: 22px;
  padding: 0.15em 0.6em;
  font-size: var(--ft-text-xs);
}

.ft-theme .ft-btn-primary {
  background-color: var(--ft-purple);
  color: var(--ft-white);
}
.ft-theme .ft-btn-primary:hover { background-color: #7200d1; color: var(--ft-white); }

.ft-theme .ft-btn-dark {
  background-color: var(--ft-dark);
  color: var(--ft-white);
}
.ft-theme .ft-btn-dark:hover { background-color: #2a004b; color: var(--ft-white); }

.ft-theme .ft-btn-outline {
  background-color: transparent;
  border-color: var(--ft-dark);
  color: var(--ft-dark);
}
.ft-theme .ft-btn-outline:hover {
  background-color: var(--ft-dark);
  color: var(--ft-white);
}

/* Badges and pills */
.ft-theme .ft-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ft-font-heading);
  font-weight: var(--ft-weight-heading);
  font-size: var(--ft-text-sm);
  text-align: center;
  color: var(--ft-white);
  border-radius: var(--ft-radius-pill);
  padding: 0.25em 0.75em;
  line-height: 1.2;
}

.ft-theme .ft-badge--circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 8rem;
  padding: 0.5em;
}

.ft-theme .ft-badge-red     { background-color: var(--ft-red); }
.ft-theme .ft-badge-pink    { background-color: var(--ft-pink); }
.ft-theme .ft-badge-purple  { background-color: var(--ft-purple); }
.ft-theme .ft-badge-dark    { background-color: var(--ft-dark); }
.ft-theme .ft-badge-sky     { background-color: var(--ft-sky); color: var(--ft-dark); }
.ft-theme .ft-badge-magenta { background-color: var(--ft-magenta); color: var(--ft-dark); }

/* Cards */
.ft-theme .ft-card {
  background-color: var(--ft-white);
  border: 1px solid var(--ft-grey-tint);
  border-radius: var(--ft-radius-md);
  padding: var(--ft-space-3);
  box-shadow: var(--ft-shadow-sm);
}

.ft-theme .ft-card h3,
.ft-theme .ft-card h4 {
  margin-top: 0;
}

/* Callouts and notices */
/* The usual callout holds one paragraph, so the padding is tight and the last <p> has no
   trailing margin. */
.ft-theme .ft-callout {
  border-radius: var(--ft-radius-md);
  padding: 0.65em 1rem;
  border-left: 4px solid var(--ft-purple);
  background-color: var(--ft-purple-tint);
  color: var(--ft-dark);
}

.ft-theme .ft-callout p:last-child {
  margin-bottom: 0;
}

.ft-theme .ft-callout strong {
  color: var(--ft-dark);
}

.ft-theme .ft-callout--info    { border-color: var(--ft-sky);    background-color: var(--ft-sky-tint); }
.ft-theme .ft-callout--warning { border-color: var(--ft-red);    background-color: var(--ft-red-tint); }
.ft-theme .ft-callout--success { border-color: var(--ft-magenta); background-color: var(--ft-magenta-tint); }

/* Tables: dark header row with white text. */
.ft-theme .ft-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ft-text-sm);
}

.ft-theme .ft-table th {
  background-color: var(--ft-dark);
  color: var(--ft-white);
  font-family: var(--ft-font-heading);
  font-weight: var(--ft-weight-bold);
  text-align: left;
  /* Same cell padding as wp-list-table. */
  padding: 8px 10px;
}

/* Everything in a heading cell is white in every link state; `color: inherit` on a
   sortable heading link loses to wp-admin's link colours. */
.ft-theme .ft-table th,
.ft-theme .ft-table th a,
.ft-theme .ft-table th a:link,
.ft-theme .ft-table th a:visited,
.ft-theme .ft-table th a:hover,
.ft-theme .ft-table th a:focus,
.ft-theme .ft-table th a:active,
.ft-theme .ft-table th .bpp-sortable-column,
.ft-theme .ft-table th .bpp-sortable-column-active,
.ft-theme .ft-table th label,
.ft-theme .ft-table th span {
  color: var(--ft-white);
}

.ft-theme .ft-table th a:hover,
.ft-theme .ft-table th a:focus {
  text-decoration: underline;
}

.ft-theme .ft-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ft-grey-tint);
  color: var(--ft-body-text);
}

.ft-theme .ft-table tbody tr:nth-child(even) {
  background-color: rgba(22, 0, 40, 0.03);
}

.ft-theme .ft-label {
  display: block;
  font-family: var(--ft-font-heading);
  font-weight: var(--ft-weight-bold);
  font-size: var(--ft-text-sm);
  color: var(--ft-dark);
  margin-bottom: 0.4em;
}

.ft-theme .ft-input,
.ft-theme .ft-select,
.ft-theme .ft-textarea {
  font-family: var(--ft-font-body);
  font-size: var(--ft-text-base);
  color: var(--ft-body-text);
  background-color: var(--ft-white);
  border: 1.5px solid var(--ft-grey-tint);
  border-radius: var(--ft-radius-sm);
  padding: 0.35em 0.6em;
  /* Explicit height: a select otherwise renders taller than an input. Textareas are
     unaffected, their min-height below wins. */
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  transition: border-color var(--ft-transition), box-shadow var(--ft-transition);
}

/* An inherited line-height clips a select's text at this height. */
.ft-theme .ft-select {
  line-height: normal;
}

/* Capped width: a full-width single-line field would push the button beside it onto
   the next line. */
.ft-theme .ft-input,
.ft-theme .ft-select {
  width: 100%;
  max-width: 320px;
  margin-right: 0.4em;
}

.ft-theme .ft-textarea {
  width: 100%;
}

.ft-theme .ft-input:focus,
.ft-theme .ft-select:focus,
.ft-theme .ft-textarea:focus {
  outline: none;
  border-color: var(--ft-purple);
  box-shadow: 0 0 0 3px var(--ft-purple-tint);
}

.ft-theme .ft-textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Responsive */
@media (max-width: 600px) {

  .ft-theme .ft-badge--circle {
    width: 6rem;
  }
}