/* SignVault - public site and owner area.
   Bootstrap 5.3 provides the base; everything custom is prefixed sv-. */

:root {
    --sv-navy: #0b1f3a;
    --sv-navy-2: #12305c;
    --sv-teal: #14b8a6;
    --sv-teal-dark: #0d9488;
    --sv-ink: #1c2a3f;
    --sv-muted: #5b6b82;
    --sv-soft: #f3f6fa;
    --sv-line: #e3e9f1;
}

body {
    color: var(--sv-ink);
    font-feature-settings: "kern", "liga";
}

a { color: var(--sv-teal-dark); }
a:hover { color: var(--sv-navy-2); }

/* ---- Navigation ---- */
.sv-nav {
    background: var(--sv-navy);
}
.sv-nav .navbar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.sv-nav .navbar-brand img { width: 30px; height: 30px; }
.sv-nav .nav-link,
.sv-nav .btn-link.nav-link {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}
.sv-nav .nav-link:hover,
.sv-nav .nav-link:focus,
.sv-nav .nav-link.active { color: #fff; }
.sv-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
.sv-nav .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

/* ---- Status strip ---- */
.sv-status {
    background: #fff7e0;
    border-bottom: 1px solid #f1e1a6;
    color: #5c4a00;
    font-size: .92rem;
}
.sv-status a { color: #5c4a00; font-weight: 600; }

/* ---- Buttons ---- */
.sv-btn-primary {
    background: var(--sv-teal-dark);
    border-color: var(--sv-teal-dark);
    color: #fff;
}
.sv-btn-primary:hover,
.sv-btn-primary:focus {
    background: #0b7e74;
    border-color: #0b7e74;
    color: #fff;
}
.sv-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
}
.sv-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- Hero ---- */
.sv-hero {
    background: radial-gradient(1200px 500px at 80% -10%, #1d4a8a 0%, rgba(29, 74, 138, 0) 60%),
                linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 100%);
    color: #fff;
    padding: 5.5rem 0 5rem;
}
.sv-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
}
.sv-hero .lead {
    color: rgba(255, 255, 255, .82);
    max-width: 38rem;
}
.sv-hero-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1rem;
    padding: 1.4rem 1.5rem;
}
.sv-hero-card .sv-sigline {
    font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
    font-size: 2rem;
    color: #bdeee8;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: .2rem;
    margin: .6rem 0 .8rem;
}
.sv-hero-card small { color: rgba(255, 255, 255, .7); }

/* ---- Sections ---- */
.sv-section { padding: 4.5rem 0; }
.sv-section-alt { background: var(--sv-soft); }
.sv-eyebrow {
    color: var(--sv-teal-dark);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    font-weight: 700;
}
.sv-h2 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sv-navy);
}
.sv-lead { color: var(--sv-muted); }

.sv-step {
    background: #fff;
    border: 1px solid var(--sv-line);
    border-radius: 1rem;
    padding: 1.6rem;
    height: 100%;
}
.sv-step-num {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--sv-navy);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
}
.sv-feature h3 { font-size: 1.1rem; font-weight: 700; color: var(--sv-navy); }
.sv-feature p { color: var(--sv-muted); margin-bottom: 0; }
.sv-tick {
    color: var(--sv-teal-dark);
    font-weight: 700;
    margin-right: .35rem;
}

/* ---- Inner page header ---- */
.sv-page-head {
    background: linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 100%);
    color: #fff;
    padding: 3.2rem 0 2.8rem;
}
.sv-page-title { font-weight: 700; letter-spacing: -.01em; margin-bottom: .4rem; }
.sv-page-lead { color: rgba(255, 255, 255, .8); max-width: 42rem; }

.sv-prose { max-width: 46rem; }
.sv-prose h2 { font-size: 1.35rem; font-weight: 700; color: var(--sv-navy); margin-top: 2.2rem; }
.sv-prose li { margin-bottom: .45rem; }

.sv-note {
    background: var(--sv-soft);
    border-left: 4px solid var(--sv-teal);
    border-radius: .5rem;
    padding: 1rem 1.2rem;
    color: var(--sv-ink);
}

/* ---- Footer ---- */
.sv-footer {
    background: var(--sv-navy);
    color: rgba(255, 255, 255, .7);
    font-size: .92rem;
}
.sv-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.sv-footer a:hover { color: #fff; text-decoration: underline; }

/* Floating labels on the login/register forms use the teal focus ring. */
.form-control:focus { border-color: var(--sv-teal); box-shadow: 0 0 0 .2rem rgba(20, 184, 166, .2); }


/* ---- Signer pages ---- */
.sv-signbar {
    background: var(--sv-navy);
    color: #fff;
}
.sv-signbar-note { color: rgba(255, 255, 255, .7); }

/* ---- Cards used by the document signing pages (ported from WebNMS) ---- */
.dash-card {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 2px 10px rgba(11, 31, 58, .08);
    border: 1px solid var(--sv-line);
    overflow: hidden;
}
.dash-card-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}
.dash-card-body { padding: 1.5rem; }