/* paiement.services — Bootstrap 5.3 theme: deep navy + emerald. */

:root {
  --ps-bg: #f4f7fa;
  --ps-fg: #102236;
  --ps-card: #ffffff;
  --ps-primary: #0d2b45;
  --ps-accent: #0b7d5e;          /* 5.2:1 on white: readable as button text */
  --ps-accent-dark: #08654c;
  --ps-accent-soft: #e2f3ec;
  --ps-muted: #eef2f6;
  --ps-muted-fg: #5a6a7a;
  --ps-border: #dbe3ea;
  --ps-on-color: #ffffff;
  --ps-radius: .75rem;
  --ps-shadow: 0 10px 32px -14px rgba(13, 43, 69, .3);

  /* Bootstrap overrides */
  --bs-body-bg: var(--ps-bg);
  --bs-body-color: var(--ps-fg);
  --bs-body-color-rgb: 16, 34, 54;
  --bs-secondary-color: var(--ps-muted-fg);
  --bs-border-color: var(--ps-border);
  --bs-link-color: var(--ps-primary);
  --bs-link-color-rgb: 13, 43, 69;
  --bs-link-hover-color: var(--ps-accent);
  --bs-link-hover-color-rgb: 11, 125, 94;
}

/* ---------- Layout ---------- */

.text-accent { color: var(--ps-accent) !important; }

.container-site { max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem; }
.container-auth { width: 100%; max-width: 26rem; margin-inline: auto; }

.card-ps {
  background: var(--ps-card);
  border-radius: calc(var(--ps-radius) + 4px);
  box-shadow: var(--ps-shadow);
  padding: 1.75rem;
}

.page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ps-primary);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ps-primary); }
.brand-lg { font-size: 2.25rem; }

.site-header {
  background: var(--ps-card);
  border-bottom: 1px solid var(--ps-border);
}

.message-icon { font-size: 2.5rem; color: var(--ps-accent); }

/* ---------- Buttons & inputs ---------- */

.btn-accent {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--ps-on-color);
  --bs-btn-bg: var(--ps-accent);
  --bs-btn-border-color: var(--ps-accent);
  --bs-btn-hover-color: var(--ps-on-color);
  --bs-btn-hover-bg: var(--ps-accent-dark);
  --bs-btn-hover-border-color: var(--ps-accent-dark);
  --bs-btn-active-color: var(--ps-on-color);
  --bs-btn-active-bg: var(--ps-accent-dark);
  --bs-btn-active-border-color: var(--ps-accent-dark);
  --bs-btn-disabled-color: var(--ps-on-color);
  --bs-btn-disabled-bg: var(--ps-accent);
  --bs-btn-disabled-border-color: var(--ps-accent);
  --bs-btn-focus-shadow-rgb: 11, 125, 94;
  padding-inline: 1.5rem;
}

/* Small borderless icon button (copy) */
.btn-icon {
  --bs-btn-padding-x: .4rem;
  --bs-btn-padding-y: .15rem;
  --bs-btn-color: var(--ps-muted-fg);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ps-accent);
  --bs-btn-hover-bg: var(--ps-accent-soft);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ps-accent);
  --bs-btn-active-bg: var(--ps-accent-soft);
  --bs-btn-active-border-color: transparent;
}
.btn-icon .bi-check2 { color: var(--ps-accent); }

.form-label { font-size: .875rem; font-weight: 600; }

.form-control:focus {
  border-color: var(--ps-accent);
  box-shadow: 0 0 0 .2rem rgba(11, 125, 94, .18);
}

/* ---------- Create form ---------- */

/* Long links wrap at "/" (<wbr>) or "-" first, mid-word only as a last resort */
.preview { font-size: .9375rem; overflow-wrap: anywhere; }
.preview-link { font-weight: 700; color: var(--ps-primary); }
.preview-slug { color: var(--ps-accent); }
.preview-slug.is-placeholder { color: var(--ps-muted-fg); font-weight: 400; font-style: italic; }

.result-box {
  background: var(--ps-accent-soft);
  border-radius: var(--ps-radius);
  padding: 1rem 1.25rem;
}
.result-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ps-accent-dark);
}
.short-link {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ps-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.short-link:hover { color: var(--ps-accent); }

/* ---------- Links table ---------- */

.page-admin { padding-block: 2rem 4rem; }

.table-card {
  background: var(--ps-card);
  border-radius: calc(var(--ps-radius) + 4px);
  box-shadow: var(--ps-shadow);
  overflow: hidden;
}
.table-card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ps-border);
}

.table-links {
  --bs-table-bg: var(--ps-card);
  --bs-table-color: var(--ps-fg);
  font-size: .875rem;
}
.table-links > :not(caption) > * > * {
  padding: .65rem 1rem;
  vertical-align: middle;
  white-space: nowrap;
}
.table-links > thead > tr > th {
  --bs-table-bg: var(--ps-muted);
  --bs-table-color: var(--ps-muted-fg);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.table-links > tbody > tr:last-child > td { border-bottom: 0; }

/* A long custom text wraps (at its hyphens) instead of pushing the other columns out */
.final-wrap {
  display: flex;
  align-items: center;
  gap: .25rem;
  max-width: 22rem;
  white-space: normal;
}
.final-link {
  font-weight: 700;
  color: var(--ps-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.final-link:hover { color: var(--ps-accent); text-decoration: underline; }

.url-link {
  display: block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ps-muted-fg);
  text-decoration: none;
}
.url-link:hover { color: var(--ps-accent); text-decoration: underline; }

.table-links .action-cell { text-align: right; }

/* Looks like plain text until hovered or focused */
.comment-input {
  width: 11.5rem;
  border-color: transparent;
  background-color: transparent;
}
.comment-input:hover { border-color: var(--ps-border); }
.comment-input:focus { background-color: var(--ps-card); }
.comment-input.is-saved { border-color: var(--ps-accent); background-color: var(--ps-accent-soft); }
.comment-input::placeholder { color: var(--ps-muted-fg); opacity: .6; }

.table-links .empty-cell {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ps-muted-fg);
}

/* Newly created row */
@keyframes row-new {
  from { background-color: var(--ps-accent-soft); }
  to { background-color: var(--ps-card); }
}
.table-links tr.is-new > td { animation: row-new 2.5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .table-links tr.is-new > td { animation: none; }
}

/* Phones: each link becomes a small card, labels come from data-label (admin.js) */
@media (max-width: 767.98px) {
  .table-links thead { display: none; }
  .table-links,
  .table-links tbody,
  .table-links tr,
  .table-links td { display: block; width: 100%; }
  .table-links > tbody > tr { padding-block: .75rem; border-bottom: 1px solid var(--ps-border); }
  .table-links > tbody > tr:last-child { border-bottom: 0; }
  .table-links > :not(caption) > * > * {
    padding: .3rem 1.25rem;
    border-bottom: 0;
    white-space: normal;
  }
  .table-links td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ps-muted-fg);
  }
  .table-links .action-cell { text-align: left; padding-top: .6rem; }
  .final-wrap { max-width: none; }
  .url-link { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .comment-input { width: 100%; border-color: var(--ps-border); }
}

@media (max-width: 400px) {
  .card-ps { padding: 1.25rem; }
}