/* Shared Sitedish admin theme.
   Drives list / detail / edit / scrape / runs / partners / prompt / login. The dashboard's
   own `.dash` block scopes the same token names on top of this.

   The palette is Momenten's, verbatim, so the scraper reads as the same product as the trip
   planner, the flyer generator and the events tool rather than as a different application that
   happens to be on the same box. It was near-black (#09090B) with an emerald accent, JetBrains
   Mono numerals and 999px pills — the generic dark-admin look, and the one thing none of the
   other four tools do.

   Two accents, and the split is the point:
     --action / --action-d   Evening Blue. Every CONTROL: links, buttons, focus rings, tabs.
     --accent  (mint)        Every FACT: a site was found, a venue is active, a check passed.
   Mint is never a thing you can click. That rule is why a green "Export" button became blue
   here: the button is an action, and green in this product means "true", not "go". */
:root {
  --bg: #f6f8fa; --surface: #ffffff; --surface-2: #f4f6fa;
  --text: #14143c; --text-muted: #66708c;
  --navy: #14143c;
  --action: #14143c; --action-d: #24244f;
  --accent: #00967d; --accent-hover: #007663; --accent-wash: #e8f5f2;
  --ok: #00967d; --fail: #b3261e; --warn: #7c4a06;
  --ok-wash: #e8f5f2; --fail-wash: #fde8e8; --warn-wash: #fff6e5;
  --border: #e4e8ef;
  --zebra: #fafbfc;
  --radius: 4px;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --serif: Merriweather, Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body {
  font-family: var(--sans); margin: 0; line-height: 1.5;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Navy bar carrying the Sitedish lockup, matching Momenten's header. */
header {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: .7rem 1.1rem; background: var(--navy); color: #fff;
}
header .lockup { display: flex; align-items: center; gap: .5rem; }
header .marque { width: 22px; height: 22px; flex: 0 0 auto; }
header .wordmark { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; color: #fff; }
header .divider { width: 1px; height: 17px; background: #3c3c62; margin: 0 .15rem; }
header > b { font-weight: 500; font-size: 1rem; color: #fff; }

header nav { display: flex; align-items: center; gap: 1.1rem; margin-left: 1.4rem; }
header nav a {
  color: #a9b0c8; text-decoration: none; font-weight: 500; font-size: .93rem;
  padding: .15rem 0; border-bottom: 2px solid transparent;
}
header nav a:hover { color: #fff; text-decoration: none; }
header nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }

/* "More" dropdown — one flat list of the pages you open occasionally. */
.nav-more { position: relative; display: inline-block; }
.nav-more > summary {
  color: #a9b0c8; font-weight: 500; font-size: .93rem; cursor: pointer;
  list-style: none; user-select: none;
}
.nav-more > summary::after { content: " ▾"; font-size: .8em; }
.nav-more > summary::-webkit-details-marker { display: none; }   /* hide native ► triangle */
.nav-more[open] > summary, .nav-more > summary:hover { color: #fff; }
.nav-more-menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 210px; padding: 4px; box-shadow: 0 8px 24px rgba(20, 20, 60, .14);
  display: flex; flex-direction: column;
}
.nav-more-menu a {
  margin: 0; padding: 8px 10px; border-radius: var(--radius);
  color: var(--text); font-weight: 500; font-size: .9rem; text-decoration: none;
}
.nav-more-menu a:hover { background: var(--surface-2); text-decoration: none; }
header .logout { margin-left: auto; }
header .logout button {
  background: transparent; color: #a9b0c8; border: 1px solid #3c3c62;
  border-radius: var(--radius); padding: .3rem .75rem; cursor: pointer; font: inherit;
  font-size: .88rem;
}
header .logout button:hover { color: #fff; border-color: #6c74a0; }

main { padding: 1.5rem; max-width: 1140px; margin: 0 auto; }

h1, h2, h3 { color: var(--text); font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 1.8rem; }
h3 { font-size: 1rem; }

/* A link is a control, so it is Evening Blue, not mint. Underlined on hover
   rather than coloured differently, because a table of 4,900 restaurant names is
   almost entirely links and a second colour would just be the body text. */
a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tables */
table {
  border-collapse: collapse; width: 100%; margin: .5rem 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
th, td { border-bottom: 1px solid var(--border); padding: .45rem .7rem; text-align: left; }
th { color: var(--text-muted); font-weight: 600; font-size: .82rem; text-transform: none; }
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:last-child td { border-bottom: none; }

/* Form controls */
input, select, textarea {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem .55rem; font: inherit;
}
input::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--action); }
select option { background: var(--surface); color: var(--text); }

button, input[type="submit"] {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem .8rem; font: inherit; cursor: pointer;
}
button:hover, input[type="submit"]:hover { border-color: var(--action); background: var(--surface-2); }

/* Layout helpers used by list/detail */
.list-head { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; }
.btn-export { display: inline-block; background: var(--action); color: #fff;
  font-weight: 500; padding: .45rem .9rem; border-radius: var(--radius); }
.btn-export:hover { background: var(--action-d); color: #fff; text-decoration: none; }
.filters { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.search-row input[type="search"] { flex: 1; min-width: 260px; }
.add-filter-select { background: transparent; border: 1px dashed var(--border); border-radius: var(--radius); padding: .35rem .5rem; color: var(--text-muted); cursor: pointer; }
.add-filter-select:hover { border-color: var(--action); color: var(--action); }
.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-chip { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; }
.filter-chip select, .filter-chip input { border: none; background: transparent; border-radius: 0; margin: 0; box-shadow: none; padding-right: 0; }
.filter-chip select:focus, .filter-chip input:focus { border: none; box-shadow: none; outline: none; }
.filter-chip .remove-filter { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: .35rem .5rem; line-height: 1; border-radius: 0; }
.filter-chip .remove-filter:hover { color: var(--fail); background: var(--fail-wash); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 1rem; }
form.inline { display: inline; }
.pager { color: var(--text-muted); }
.pager a { margin: 0 .45rem; }
.ind { text-align: center; }
.ind a { text-decoration: none; }
.muted { color: var(--text-muted); }
/* Lifecycle states are FACTS about a venue, so they carry the fact colours. */
.status-active { color: var(--ok); }                    /* seen in latest scrape */
.status-missing { color: var(--warn); font-weight: 600; }  /* not in its city's last run */
.status-closed { color: var(--fail); }                  /* inactive */

/* Messages + status.
   Coloured per flash category — a failure must not look like a success.
   `.flash` is used both as a <ul> wrapper (base.html) and directly on a <p>
   (users.html), so the box styling applies to the list items AND to a bare
   element that has no items. */
.flash { list-style: none; margin: 0 0 1rem; padding: 0; }
.flash li, p.flash {
  padding: .55rem .8rem; border-radius: var(--radius); margin-bottom: .4rem;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
p.flash { margin: 0 0 1rem; }
.flash li:last-child { margin-bottom: 0; }
.flash .flash-success { background: var(--ok-wash);   border-color: #b9ded5; }
.flash .flash-warning { background: var(--warn-wash); border-color: #f3dcae; color: var(--warn); }
.flash .flash-error   { background: var(--fail-wash); border-color: #f6c6c6; color: var(--fail); }
.error { color: var(--fail); }
.locked { color: var(--warn); font-weight: bold; }

/* Code / raw blocks (detail page) */
pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .8rem; overflow: auto; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
details { margin: .3rem 0; }
summary { cursor: pointer; color: var(--text); }

.btn-kvk {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  padding: .25rem .6rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-kvk:hover {
  border-color: var(--action);
  color: var(--action);
  text-decoration: none;
}

/* Creditsafe Widget styles */
.creditsafe-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--sans);
  color: var(--text);
}

.creditsafe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.creditsafe-logo {
  font-weight: 800;
  font-size: 1.4rem;
  color: #ef4444; /* Red color matching creditsafe */
  letter-spacing: -0.5px;
}

.creditsafe-logo span {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.creditsafe-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.creditsafe-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.creditsafe-btn:hover {
  border-color: var(--action);
  color: var(--action);
  text-decoration: none;
}

.creditsafe-btn.primary {
  background: var(--action);
  color: #fff;
  border-color: var(--action);
}

.creditsafe-btn.primary:hover {
  background: var(--action-d);
  color: #fff;
}

.creditsafe-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.creditsafe-kpi-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.creditsafe-kpi-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.creditsafe-kpi-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.creditsafe-kpi-card.status-active-card {
  border-left: 4px solid var(--ok);
}

.creditsafe-kpi-card.status-inactive-card {
  border-left: 4px solid var(--fail);
}

.creditsafe-status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.82rem;
}

.creditsafe-status-badge.active {
  background: var(--ok-wash);
  color: var(--ok);
}

.creditsafe-status-badge.inactive {
  background: var(--fail-wash);
  color: var(--fail);
}

.creditsafe-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  overflow-x: auto;
}

.creditsafe-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.creditsafe-tab-btn:hover {
  color: var(--text);
}

.creditsafe-tab-btn.active {
  color: var(--action);
  border-bottom-color: var(--action);
}

.creditsafe-tab-content {
  display: none;
}

.creditsafe-tab-content.active {
  display: block;
}

.creditsafe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .creditsafe-grid {
    grid-template-columns: 1fr;
  }
}

.creditsafe-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.creditsafe-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

.creditsafe-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
  border: none;
}

.creditsafe-table th, .creditsafe-table td {
  padding: 0.45rem 0.5rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.creditsafe-table th {
  font-weight: 500;
  color: var(--text-muted);
  width: 40%;
}

.creditsafe-table td {
  color: var(--text);
}

.creditsafe-table tr:last-child th, .creditsafe-table tr:last-child td {
  border-bottom: none;
}

/* Restaurant list single-line truncation */
table.restaurant-list th, table.restaurant-list td {
  white-space: nowrap;
}
table.restaurant-list td:first-child, table.restaurant-list th:first-child {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Users page ------------------------------------------------------------ */
.user-new { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0 1.2rem; }
.user-new input[type="email"] { min-width: 16rem; }
.roles { display: inline-flex; flex-wrap: wrap; gap: .25rem .8rem; }
.roles label { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.roles-edit { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.user-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.user-actions form { display: inline; }
.ok  { color: var(--ok); }
.off { color: var(--text-muted); }
.pending { color: var(--warn); }
button.danger { color: var(--fail); }
button.danger:hover { border-color: var(--fail); color: var(--fail); }

/* Users page: grouped role grid */
.role-group { display: inline-flex; flex-direction: column; gap: .15rem;
  border: 1px solid var(--border); border-radius: var(--radius); padding: .3rem .55rem; vertical-align: top; }
.role-group-label { font-size: .74rem; color: var(--text-muted); }
.roles { align-items: flex-start; }

/* Users page: overview + edit UI */
.users-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: .5rem 0 1.5rem; }
.users-card h2 { margin: 0 0 .6rem; font-size: 1rem; }

/* One-shot "share these credentials" panel shown right after a user is created. */
.new-creds { background: var(--ok-wash); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: .5rem 0 1.5rem; }
.new-creds h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--accent); }
.new-creds .small { font-size: .78rem; margin: .6rem 0 0; }
.creds-list { margin: .8rem 0; display: grid; gap: .5rem; }
.cred-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cred-row dt { min-width: 8rem; color: var(--text-muted); font-size: .82rem; }
.cred-row dd { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cred-value { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .25rem .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all; word-break: break-all; }
.copy-btn { padding: .2rem .55rem; font-size: .78rem; }
table.users td, table.users th { vertical-align: middle; }
table.users th.right, td.right { text-align: right; }
.u-email { font-weight: 500; }
.u-sub { font-size: .78rem; color: var(--text-muted); }
.you { font-size: .68rem; color: var(--ok); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 .3rem; margin-left: .2rem; }
.u-roles { max-width: 26rem; }
.pill { display: inline-block; font-size: .74rem; line-height: 1.5; padding: .05rem .5rem; margin: .1rem .12rem;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.badge { display: inline-block; font-size: .72rem; padding: .12rem .55rem; border-radius: var(--radius); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); }
.badge.enabled  { color: var(--ok); background: var(--ok-wash); }
.badge.disabled { color: var(--text-muted); background: var(--surface-2); }
.badge.pending  { color: var(--warn); background: var(--warn-wash); }
.user-actions { display: flex; flex-wrap: wrap; gap: .1rem .3rem; justify-content: flex-end; }
.user-actions form { display: inline; margin: 0; }
button.link-btn { background: none; border: none; color: var(--action); padding: .3rem .45rem; cursor: pointer; font-size: .82rem; }
button.link-btn:hover { color: var(--action-d); text-decoration: underline; }
button.link-btn.danger { color: var(--fail); }
button.btn-primary { background: var(--action); color: #fff; border: 1px solid var(--action); font-weight: 500; }
button.btn-primary:hover { background: var(--action-d); color: #fff; border-color: var(--action-d); }
tr.edit-row > td { background: var(--surface-2); border-bottom: 2px solid var(--border); }
.roles-edit { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .3rem 0; }

/* --- Lead score band -------------------------------------------------------
   Four colours, and only A shouts. A priority list where everything is
   highlighted is a list with no priority in it. */
.lead-band { display:inline-block; min-width:1.15em; text-align:center;
             font-size:.72em; font-weight:700; line-height:1.5;
             border-radius:3px; padding:0 .3em; margin-left:.35em;
             vertical-align:middle; }
.lb-A { background:#0b6b5a; color:#fff; }
.lb-B { background:#d8efe9; color:#0b6b5a; }
.lb-C { background:#eef1f6; color:#5a6480; }
.lb-D { background:#f6f7f9; color:#9aa2b4; }

/* Score legend. Collapsed by default: it is an explanation for the first read,
   not furniture that pushes the table down every day after that. */
.score-legend { margin:-.4rem 0 1rem; font-size:.87rem; max-width:60rem; }
.score-legend > summary { cursor:pointer; color:var(--muted, #5a6480);
                          list-style:none; display:inline-block;
                          border-bottom:1px dotted currentColor; }
.score-legend > summary::-webkit-details-marker { display:none; }
.score-legend[open] > summary { margin-bottom:.6rem; }
.score-legend ul { margin:.4rem 0 .6rem 1.1rem; padding:0; }
.score-legend li { margin:.18rem 0; }
.score-legend p { margin:.35rem 0; }
.score-legend .muted { opacity:.65; }

/* Woordmerk in de balk. Verving een <img> naar /brand/... die niet bestond en
   op elke pagina een 404 plus een kapot-plaatje opleverde. */
.lockup .wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
  color: #fff;
}