/* Secret Share — ProsperITy Technology Solutions brand theme.
   Palette from PTS site CSS: dark blue header, green primary actions,
   bright blue accents. Variable NAMES are kept from the original theme
   (--forest, --teal, ...) so the shared layout rules and the per-share
   brand overrides in header.php keep working unchanged. */

:root {
  /* Brand palette (PTS values in legacy token names) */
  --forest: #005D8C;    /* PTS dark blue — navbar */
  --teal: #00AEEF;      /* PTS bright blue — highlights/focus */
  --deep-teal: #34A945; /* PTS green — primary buttons */
  --navy: #005D8C;      /* headings */
  --blue: #0A86C2;      /* links */
  --mint: #5CCDF7;      /* nav hover */
  --ink: #2C2C2A;
  --wash: #F4F8FC;
  --paper: #FAFBFC;
  --white: #FFFFFF;
  --line: #E2E8EC;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body-font: 'Inter', system-ui, sans-serif;

  /* App aliases */
  --surface: var(--white);
  --surface-alt: var(--wash);
  --border: var(--line);
  --text: var(--ink);
  --text-muted: #5a6670;

  /* Semantic status tints */
  --total-good: var(--deep-teal);
  --total-warn: #b0790a;
  --total-bad: #c0493a;
  --total-info: var(--blue);
}

body {
  font-family: var(--body-font);
  background: var(--surface-alt);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: -0.5px;
}

a { color: var(--blue); }

/* ---------- Navbar (dark colourway: PTS dark blue) ---------- */
.app-navbar {
  background: var(--forest);
}
.app-navbar .nav-link {
  font-family: var(--display);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus { color: var(--mint); }
.app-navbar .nav-link.active { color: var(--white); }

/* Wordmark (legacy text lockup; navbar now uses the PTS logo image) */
.brand-logo {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -1px;
  text-decoration: none;
}
.brand-logo .tag { color: var(--teal); }
.brand-logo .name { color: var(--white); }
.brand-sub {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mint);
  display: block;
  margin-top: -2px;
}

/* ---------- Buttons ---------- */
.btn { font-family: var(--display); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--deep-teal);
  --bs-btn-border-color: var(--deep-teal);
  --bs-btn-hover-bg: #2E953D;
  --bs-btn-hover-border-color: #2E953D;
  --bs-btn-active-bg: #298436;
  --bs-btn-active-border-color: #298436;
  --bs-btn-disabled-bg: var(--deep-teal);
  --bs-btn-disabled-border-color: var(--deep-teal);
}
.btn-outline-secondary {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--wash);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-border-color: var(--line);
}

.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 0.25rem rgba(0, 174, 239, 0.25);
}

.card {
  border-color: var(--border);
  background: var(--surface);
}

/* ---------- Status badges (dashboard + view page) ---------- */
.badge-status {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
}
.badge-status.status-active  { background: var(--total-good); }
.badge-status.status-opened  { background: var(--total-info); }
.badge-status.status-used    { background: var(--text-muted); }
.badge-status.status-expired { background: var(--total-warn); }
.badge-status.status-revoked { background: var(--total-bad); }

/* ---------- Shared table styling ---------- */
.table-app {
  background: var(--surface);
}
.table-app th {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.table-app td {
  vertical-align: middle;
}

/* ---------- Revealed secret display ---------- */
.secret-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--total-good);
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------- One-time share link panel ---------- */
.share-link-box {
  background: var(--wash);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  word-break: break-all;
}

/* ---------- Business branding (brands.php + branded view page) ---------- */
/* Logos scale by height only, so every branded page's top bar aligns the
   same regardless of the logo's aspect ratio. The max-width guard only
   kicks in on narrow phone screens. */
.brand-logo-img {
  height: 36px;
  width: auto;
  max-width: min(60vw, 320px);
  object-fit: contain;
}
.brand-name-custom {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--white);
}
.brand-logo-cell {
  width: 200px;
  max-width: 200px;
  text-align: center;
  padding: 0.75rem;
}
.brand-table-logo {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.brand-swatch {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border);
  vertical-align: -0.2rem;
}
.brand-swatch + .brand-swatch { margin-left: 0.25rem; }

.text-muted-app { color: var(--text-muted); }
.font-monospace, .form-control.font-monospace { font-family: var(--mono); }

@media (max-width: 768px) {
  .table-app { font-size: 0.875rem; }
}