/* Fungusware Licensing - single stylesheet, loaded after Bootstrap 4.
   Sections: tokens, base, navigation, layout, cards, forms, buttons, alerts,
   copy controls, tables (desktop + stacked mobile), tags, stats, public pages. */

:root {
  --page: #f2f4f1;
  --surface: #ffffff;
  --ink: #1c2420;
  --ink-2: #4a554f;
  --line: #dde2da;
  --line-2: #c4ccc1;
  --moss: #2f6b4f;
  --moss-dark: #245540;
  --moss-soft: #e5efe9;
  --nav: #1f2b25;
  --danger: #b3402f;
  --danger-soft: #f8e7e3;
  --warn: #8f5a0e;
  --warn-soft: #f7ecd6;
  --info: #2d5f8a;
  --info-soft: #e3edf6;
  --radius: 8px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* The Bootstrap theme sets a:not(.btn) { color:#fff; underline }, so match its specificity */
a:not(.btn) { color: var(--moss-dark); text-decoration: none; }
a:not(.btn):hover { color: var(--moss); text-decoration: underline; }
::placeholder { color: #7c867f; opacity: 1; }
h1, h2, h3, h4, h5 { color: var(--ink); line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 650; margin-bottom: 1rem; }
small, .small { font-size: .85rem; }
.text-muted, .muted, small.text-muted { color: var(--ink-2) !important; }
.mono { font-family: var(--mono); font-size: .875em; }
:focus-visible { outline: 3px solid rgba(47, 107, 79, .45); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .5rem 1rem; z-index: 2000; }
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- navigation ---------- */
.site-nav { background: var(--nav); padding: .4rem 1rem; }
.site-nav .navbar-brand { color: #fff; font-weight: 650; font-size: 1.05rem; padding: .35rem 0; white-space: normal; }
.site-nav .navbar-brand:hover { color: #fff; }
.site-nav .navbar-toggler { border-color: rgba(255,255,255,.35); min-height: var(--tap, 44px); min-width: 44px; }
.site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-nav .nav-link {
  color: rgba(255,255,255,.85);
  padding: .65rem .75rem;
  border-radius: 6px;
}
.site-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-nav .nav-link.active { color: #fff; background: var(--moss); }
.site-nav .btn-link { text-decoration: none; text-align: left; width: 100%; font-size: inherit; font-weight: 400; min-height: 0; justify-content: flex-start; }
@media (min-width: 1200px) {
  .site-nav .nav-link { padding: .4rem .6rem; }
  .site-nav .navbar-nav { gap: .1rem; }
}
@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse { padding: .5rem 0 .75rem; }
  .site-nav .nav-link { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- layout ---------- */
.page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 2rem; flex: 1 0 auto; }
.page-narrow { max-width: 520px; }
.site-footer { padding: 1rem; color: var(--ink-2); font-size: .85rem; text-align: center; }
@media (max-width: 575.98px) { .page { padding: .75rem .6rem 1.5rem; } }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 1rem;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: .75rem 1rem;
  font-weight: 650;
  font-size: 1rem;
}
.card-body { padding: 1rem; color: var(--ink); }
.card-footer { background: transparent; border-top: 1px solid var(--line); padding: .75rem 1rem; }
@media (max-width: 575.98px) { .card-body { padding: .75rem; } }

/* ---------- forms ---------- */
label, .form-label { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; color: var(--ink); }
.form-group { margin-bottom: 1rem; }
.form-control {
  min-height: 44px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}
.form-control:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(47,107,79,.18); }
.form-control[readonly] { background: #f6f7f5; }
textarea.form-control { min-height: 96px; }
select.form-control { padding-right: 2rem; }
.help-block, .form-text { color: var(--ink-2); font-size: .85rem; margin-top: .25rem; }
.field-validation-error, .text-danger { color: var(--danger) !important; font-size: .85rem; }
.custom-control-label { font-weight: 500; }
.custom-control { min-height: 28px; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.search-row { display: flex; gap: .5rem; align-items: flex-start; }
.search-row .copy-input-wrapper { flex: 1; min-width: 0; }

/* ---------- buttons ---------- */
.btn { min-height: 44px; border-radius: 6px; font-weight: 600; padding: .5rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-primary { background: var(--moss) !important; border-color: var(--moss) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--moss-dark) !important; border-color: var(--moss-dark) !important; }
.btn-secondary, .btn-info {
  background: #fff !important;
  border: 1.5px solid var(--line-2) !important;
  color: var(--ink) !important;
}
.btn-secondary:hover, .btn-info:hover { background: var(--moss-soft) !important; border-color: var(--moss) !important; }
.btn-link { color: var(--moss-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) {
  .btn-row .btn, .btn-block-mobile { flex: 1 1 100%; }
}

/* ---------- alerts ---------- */
.alert { border-radius: var(--radius); border: 1px solid transparent; }
.alert-success { background: var(--moss-soft); color: #1d4a35; border-color: #c4dccf; }
.alert-info, .alert-primary { background: var(--info-soft); color: #1f4466; border-color: #c4d8ea; }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-color: #ecd9ae; }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: #efc9c2; }

/* ---------- icon buttons / row actions ---------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 6px;
  border: 0; background: transparent;
  color: var(--ink-2); font-size: .95rem;
  text-decoration: none; cursor: pointer;
  vertical-align: middle;
}
a.icon-btn:not(.btn) { color: var(--ink-2); text-decoration: none; }
.icon-btn:hover, a.icon-btn:not(.btn):hover { background: var(--moss-soft); color: var(--moss-dark); text-decoration: none; }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn i { color: inherit !important; }
.row-actions { display: flex; flex-wrap: wrap; gap: .1rem; }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; font-size: 1.05rem; } }

/* ---------- copy controls ---------- */
.copy-val { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: .1rem; max-width: 100%; }
.copy-val__text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.copy-val__text.mono { letter-spacing: .01em; }
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--moss-dark); cursor: pointer; font-size: .95rem;
}
.copy-btn:hover { background: var(--moss-soft); }
.copy-btn i { color: inherit !important; pointer-events: none; }
.copy-btn.is-copied { color: #fff; background: var(--moss); }
@media (pointer: coarse) { .copy-btn { width: 44px; height: 44px; font-size: 1.05rem; } }

/* copy button inside inputs and textareas: always visible */
.copy-input-wrapper { position: relative; display: block; }
.copy-input-wrapper > input,
.copy-input-wrapper > textarea { padding-right: 46px; }
.copy-input-wrapper > .copy-btn { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; }
@media (pointer: coarse) { .copy-input-wrapper > .copy-btn { width: 40px; height: 40px; } }

.copy-toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 8px);
  background: var(--nav); color: #fff; padding: .6rem 1rem; border-radius: 999px;
  font-size: .9rem; opacity: 0; pointer-events: none; z-index: 3000;
  transition: opacity .15s ease, transform .15s ease; max-width: 90vw; text-align: center;
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.table { color: var(--ink); margin-bottom: 0; }
.table thead th {
  background: #eef1ec; border-top: 0; border-bottom: 1px solid var(--line-2);
  font-size: .8rem; font-weight: 650; color: var(--ink-2); white-space: nowrap; vertical-align: bottom;
}
.table td { border-top: 1px solid var(--line); vertical-align: top; padding: .6rem .6rem; }
/* the dark theme turns hovered row text near-white; keep it dark on our light surface */
.table-hover tbody tr:hover { color: var(--ink); background: #f8faf7; }
.table td > div + div, .table td .line + .line { margin-top: .15rem; }
.cell-sub { color: var(--ink-2); font-size: .85rem; }
.empty { color: var(--ink-2); padding: 1rem .25rem; margin: 0; }

@media (max-width: 991.98px) {
  .table-wrap { overflow: visible; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    background: #fbfcfa; border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: .75rem; padding: .2rem .8rem;
  }
  .table-stack.table-hover tbody tr:hover { color: var(--ink); background: #fbfcfa; }
  .table-stack td {
    position: relative; padding: .55rem 0 .55rem 7rem; min-height: 2.4rem;
    border-top: 0; border-bottom: 1px solid var(--line); text-align: left !important;
  }
  .table-stack td:last-child { border-bottom: 0; }
  .table-stack td::before {
    content: attr(data-label); position: absolute; left: 0; top: .6rem; width: 6.4rem;
    font-size: .78rem; font-weight: 650; color: var(--ink-2);
  }
  .table-stack td[data-label=""]::before, .table-stack td:not([data-label])::before { content: none; }
  .table-stack td[data-label=""], .table-stack td:not([data-label]) { padding-left: 0; }
}

@media (max-width: 575.98px) {
  .table-stack td { padding-left: 5.6rem; }
  .table-stack td::before { width: 5.2rem; }
}

/* ---------- summary cards (phones and tablets; desktop uses the table) ---------- */
.rcards { display: grid; gap: .75rem; }
.rcard {
  background: #fbfcfa; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-width: 0;
}
.rcard__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
  padding: .6rem .85rem; background: #eaf0e9; border-bottom: 1px solid var(--line-2);
}
.rcard__top > :first-child { flex: 1 1 auto; min-width: 0; }
.rcard__top .tags { flex: 0 1 auto; justify-content: flex-end; }
.rcard__title { font-weight: 650; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.rcard__sub { color: var(--ink-2); font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .15rem; }
.rcard__sub .icon-btn { width: 32px; height: 32px; font-size: .85rem; margin: -4px 0; }
.rcard__prod { color: var(--ink-2); font-size: .85rem; text-align: right; flex: 0 0 auto; }
.rcard__body { padding: .65rem .85rem .75rem; display: flex; flex-direction: column; gap: .35rem; }
.rcard__line { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .15rem; min-width: 0; }
.rcard__line .copy-val__text.mono { font-size: .78rem; letter-spacing: 0; }
@media (max-width: 991.98px) {
  .card-body:has(> .rcards) { padding: .5rem; }
}
.rcard__line .copy-val { flex: 0 1 auto; }
.rcard__meta { color: var(--ink-2); font-size: .85rem; }
.rcard__meta strong { color: var(--ink); font-weight: 600; }
.rcard__foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; margin-top: .4rem; }
.rcard__foot .btn { min-height: 44px; padding: .4rem .4rem; font-size: .9rem; }
.btn-danger-soft { background: #fff !important; border: 1.5px solid #e3b9b1 !important; color: var(--danger) !important; }
.btn-danger-soft:hover { background: var(--danger-soft) !important; border-color: var(--danger) !important; }
@media (min-width: 576px) and (max-width: 991.98px) {
  .rcards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- status tags ---------- */
.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; line-height: 1.5; white-space: nowrap;
  background: #e9ede7; color: var(--ink-2);
}
.tag-paid { background: var(--moss-soft); color: var(--moss-dark); }
.tag-trial { background: var(--info-soft); color: var(--info); }
.tag-expired { background: var(--danger-soft); color: var(--danger); }
.tag-blocked { background: var(--warn-soft); color: var(--warn); }
.tag-sent { background: #ece8f4; color: #55427c; }
.tags { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ---------- stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.stat__value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--moss-dark); }
.stat__label { color: var(--ink-2); font-size: .85rem; }
@media (max-width: 575.98px) { .stat__value { font-size: 1.6rem; } .stat { padding: .6rem .7rem; } }

/* ---------- version bars ---------- */
.version-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.version-item h6 { margin: 0 0 .3rem; font-family: var(--mono); font-size: .9rem; }
.bar { background: #e9ede7; border-radius: 999px; height: 10px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--moss); border-radius: 999px; }
.version-item .cell-sub { margin-top: .2rem; }

/* ---------- quick actions ---------- */
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.action-grid .btn { width: 100%; }

/* ---------- toolbar over results ---------- */
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }

/* ---------- public / standalone pages ---------- */
.public-bar { background: var(--nav); color: #fff; padding: .75rem 1rem; font-weight: 650; }
.public-bar span { max-width: 520px; margin: 0 auto; display: block; }
.response-box { display: flex; flex-direction: column; gap: .5rem; }
.response-box textarea { font-family: var(--mono); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- labelled icon buttons + instant tooltips ---------- */
.icon-btn.labelled {
  width: auto; height: auto; padding: .2rem .5rem; gap: .4rem;
  font-size: .85rem; white-space: nowrap; justify-content: flex-start;
}
.icon-btn.labelled::after { content: attr(aria-label); }
.row-actions:has(.labelled) { flex-direction: column; align-items: flex-start; gap: .1rem; }
.ui-tip {
  position: fixed; z-index: 2000; pointer-events: none;
  background: var(--ink, #222); color: #fff; font-size: .8rem; line-height: 1.25;
  padding: .3rem .55rem; border-radius: 5px; max-width: 260px;
  opacity: 0; transition: opacity .08s;
}
.ui-tip.show { opacity: 1; }