/* ============================================================
   CertSys design system — "modern official credential"
   Deep emerald ink + gold seal accent on warm paper.
   Brand variables (--brand-primary / --brand-accent / --brand-font)
   are injected per tenant from the layout; everything below reacts.
   ============================================================ */

:root {
  --brand-primary: #116149;
  --brand-accent: #c9a227;
  --brand-font: 'Cairo', 'Segoe UI', sans-serif;

  --cs-bg: #f7f5f0;               /* warm paper */
  --cs-surface: #ffffff;
  --cs-surface-2: #fbfaf7;
  --cs-ink: #1c2a26;
  --cs-ink-soft: #5b6b66;
  --cs-line: #e5e1d8;
  --cs-shadow: 0 1px 2px rgba(28, 42, 38, .05), 0 10px 30px -12px rgba(28, 42, 38, .18);
  --cs-radius: 14px;
}

[data-bs-theme="dark"] {
  --cs-bg: #0f1513;               /* deep green-slate night */
  --cs-surface: #161f1c;
  --cs-surface-2: #1b2622;
  --cs-ink: #e8e6de;
  --cs-ink-soft: #9aa8a2;
  --cs-line: #26332e;
  --cs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .55);
}

/* ---------- base ---------- */

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  font-family: var(--brand-font);
  background-color: var(--cs-bg);
  color: var(--cs-ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* faint paper grain */
  background-image: radial-gradient(rgba(28, 42, 38, .025) 1px, transparent 1px);
  background-size: 22px 22px;
}
[data-bs-theme="dark"] body {
  background-image: radial-gradient(rgba(232, 230, 222, .02) 1px, transparent 1px);
}

.cs-main { flex: 1; padding-block: 2rem 3rem; }

h1, h2, h3, h4, h5, .navbar-brand, .card-header, .btn {
  font-family: var(--brand-font);
}
h1, h2 { font-weight: 800; letter-spacing: -.01em; }
h1 { position: relative; margin-bottom: 1.25rem; }

a { color: var(--brand-primary); }
a:hover { color: color-mix(in srgb, var(--brand-primary) 80%, black); }
[data-bs-theme="dark"] a:hover { color: color-mix(in srgb, var(--brand-primary) 70%, white); }

/* ---------- navbar ---------- */

.cs-navbar {
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-line);
  position: relative;
  padding-block: .65rem;
}
.cs-navbar::after {
  /* signature hairline: primary → gold seal gradient */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);
}
[dir="rtl"] .cs-navbar::after {
  background: linear-gradient(-90deg, var(--brand-primary) 0%, var(--brand-primary) 55%, var(--brand-accent) 100%);
}

.cs-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--cs-ink) !important;
}
.cs-brand-mark { width: 30px; height: 30px; }
.cs-brand-logo { height: 34px; width: auto; max-width: 130px; object-fit: contain; border-radius: 6px; }

.cs-navbar .nav-link {
  color: var(--cs-ink-soft);
  font-weight: 600;
  padding-inline: .8rem;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.cs-navbar .nav-link:hover {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.cs-icon-btn, .cs-lang-btn {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface-2);
  color: var(--cs-ink);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-weight: 600;
  transition: border-color .15s ease, transform .15s ease;
}
.cs-icon-btn:hover, .cs-lang-btn:hover {
  border-color: var(--brand-accent);
  transform: translateY(-1px);
}
.cs-nav-tools { gap: .4rem; }

/* ---------- buttons ---------- */

.btn { border-radius: 10px; font-weight: 700; }

.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 75%, black);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand-primary) 70%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--brand-primary) 75%, transparent);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
}

/* ---------- cards ---------- */

.card {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}
.card-header {
  background: var(--cs-surface-2);
  border-bottom: 1px solid var(--cs-line);
  font-weight: 700;
  padding-block: .8rem;
}
.card.border-primary { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--cs-line)); }

/* staggered entrance for cards & tables */
@media (prefers-reduced-motion: no-preference) {
  .cs-main .card, .cs-main .table-responsive, .cs-main > .container > table {
    animation: cs-rise .45s ease both;
  }
  .cs-main .card:nth-of-type(2) { animation-delay: .07s; }
  .cs-main .card:nth-of-type(3) { animation-delay: .14s; }
}
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- tables ---------- */

.table {
  --bs-table-bg: var(--cs-surface);
  border-color: var(--cs-line);
  border-radius: var(--cs-radius);
  overflow: hidden;
}
.table thead th {
  background: var(--cs-surface-2);
  color: var(--cs-ink-soft);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--cs-line) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: color-mix(in srgb, var(--cs-surface-2) 60%, transparent);
}

/* ---------- forms ---------- */

.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--cs-line);
  background-color: var(--cs-surface);
  color: var(--cs-ink);
  padding-block: .55rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.form-label { font-weight: 600; color: var(--cs-ink-soft); margin-bottom: .35rem; }
.form-control[type="color"] { min-height: 2.6rem; padding: .25rem; cursor: pointer; }

/* ---------- badges ---------- */

.badge { font-weight: 700; border-radius: 999px; padding: .45em .8em; }
.badge.text-bg-success { background: color-mix(in srgb, var(--brand-primary) 88%, black) !important; }
.badge.text-bg-light {
  background: var(--cs-surface-2) !important;
  color: var(--cs-ink-soft) !important;
  border: 1px solid var(--cs-line);
}

/* ---------- hero (home) ---------- */

.cs-hero {
  position: relative;
  text-align: center;
  padding: 4rem 1.5rem 3.5rem;
  margin-block: 1rem 2.5rem;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 22px;
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}
/* certificate frame corners */
.cs-hero::before, .cs-hero::after {
  content: "";
  position: absolute;
  width: 64px; height: 64px;
  border: 3px solid var(--brand-accent);
  opacity: .8;
}
.cs-hero::before { top: 14px; inset-inline-start: 14px; border-inline-end: none; border-bottom: none; border-start-start-radius: 12px; }
.cs-hero::after { bottom: 14px; inset-inline-end: 14px; border-inline-start: none; border-top: none; border-end-end-radius: 12px; }

.cs-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 900; }
.cs-hero h1 .cs-underline {
  background: linear-gradient(transparent 68%, color-mix(in srgb, var(--brand-accent) 45%, transparent) 0);
  padding-inline: .15em;
}
.cs-hero .lead { color: var(--cs-ink-soft); max-width: 42rem; margin-inline: auto; }

.cs-feature {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 1.6rem 1.4rem;
  height: 100%;
  box-shadow: var(--cs-shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.cs-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--cs-line)); }
.cs-feature .cs-feature-icon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  margin-bottom: .8rem;
}
.cs-feature h3 { font-size: 1.1rem; font-weight: 800; }
.cs-feature p { color: var(--cs-ink-soft); margin-bottom: 0; }

/* ---------- public verify page: seal ---------- */

.cs-verify-card { max-width: 620px; margin-inline: auto; padding-top: 42px; }
.cs-verify-card .card { overflow: visible; }
.cs-seal {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  margin: -42px auto .5rem;
  border-radius: 50%;
  font-size: 2rem;
  color: #fff;
  border: 4px solid var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.cs-seal.valid { background: var(--brand-primary); }
.cs-seal.revoked { background: #b45309; }
.cs-seal.notfound { background: #b91c1c; }

/* ---------- pricing ---------- */

.cs-plan .display-6 { font-weight: 900; color: var(--brand-primary); }
.cs-plan .card-footer { background: var(--cs-surface-2); border-top: 1px solid var(--cs-line); }
.cs-plan-featured { border-color: var(--brand-accent) !important; position: relative; }
.cs-plan-featured::before {
  content: "★";
  position: absolute;
  top: -14px; inset-inline-start: 50%;
  translate: -50% 0;
  background: var(--brand-accent);
  color: #fff;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .9rem;
}
[dir="rtl"] .cs-plan-featured::before { translate: 50% 0; }

/* ---------- footer ---------- */

.cs-footer {
  border-top: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-ink-soft);
  padding-block: 1rem;
  font-size: .9rem;
}
.cs-footer-tag { color: color-mix(in srgb, var(--brand-accent) 80%, var(--cs-ink-soft)); font-weight: 600; }

/* ---------- template visual editor ---------- */

.tpl-canvas {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--cs-shadow);
  touch-action: none;   /* pointer-drag on touch screens */
}
.tpl-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.tpl-chip {
  position: absolute;
  white-space: nowrap;
  line-height: 1.15;
  cursor: grab;
  user-select: none;
  padding: 1px 4px;
  border: 1px dashed color-mix(in srgb, var(--brand-primary) 55%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, #ffffff 65%, transparent);
}
.tpl-chip:active { cursor: grabbing; border-style: solid; }
.tpl-qr {
  position: absolute;
  display: grid;
  place-items: center;
  cursor: grab;
  user-select: none;
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  background: repeating-conic-gradient(#222 0% 25%, #555 0% 50%);
  border: 2px solid var(--brand-accent);
  border-radius: 6px;
}
.tpl-qr:active { cursor: grabbing; }

/* ---------- plans (admin) & billing period ---------- */

.cs-plan-admin .list-unstyled li { margin-bottom: .2rem; }
.cs-plan-off {
  opacity: .72;
  border-style: dashed !important;
}
.cs-plan-off .card-header { background: color-mix(in srgb, var(--cs-ink-soft) 8%, var(--cs-surface-2)); }

.cs-period {
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: .85rem 1rem;
  background: var(--cs-surface-2);
}
.cs-period .progress { background: color-mix(in srgb, var(--cs-ink-soft) 18%, transparent); }
.cs-period .progress-bar { background: var(--brand-primary); }

/* ---------- guide ---------- */

.cs-guide .accordion-item {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: var(--cs-radius) !important;
  margin-bottom: .75rem;
  overflow: hidden;
  box-shadow: var(--cs-shadow);
}
.cs-guide .accordion-button {
  background: var(--cs-surface);
  color: var(--cs-ink);
  font-weight: 700;
  font-size: 1.05rem;
}
.cs-guide .accordion-button:not(.collapsed) {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--cs-surface));
  color: var(--brand-primary);
  box-shadow: none;
}
.cs-steps { padding-inline-start: 1.2rem; margin-bottom: 0; }
.cs-steps li { margin-bottom: .55rem; line-height: 1.7; }
.cs-steps li::marker { color: var(--brand-accent); font-weight: 800; }

/* ---------- misc ---------- */

.alert { border-radius: var(--cs-radius); }
code { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); padding: .15em .45em; border-radius: 6px; }

::selection { background: color-mix(in srgb, var(--brand-accent) 35%, transparent); }

/* keep keyboard focus visible and on-brand */
.btn:focus-visible, .form-control:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}