/* ==============================================
   Willow Hope Disability Care — eSign Platform Styles
   Brand: willowhope.com.au
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

/* ----- Brand Tokens ----- */
:root {
    --em-dark:       #0f2b1f;   /* deep forest green (primary dark) */
    --em-footer:     #1a3d2b;   /* footer deep green */
    --em-orange:     #00b87a;   /* WH primary green accent */
    --em-orange-dk:  #009962;   /* WH hover green */
    --em-sand:       #e0f2ea;   /* light green tint */
    --em-gray-light: #f4faf7;   /* header light green-white */
    --em-gray-mid:   #9b9eac;   /* muted mid gray */
    --em-charcoal:   #1a2e22;   /* body text dark green */
    --em-green:      #00b87a;   /* WH primary green */
    --em-green-lt:   #4ade80;   /* WH light green */
    --em-white:      #ffffff;
    --em-f3:         #f4faf7;   /* page background */

    /* Semantic mappings */
    --brand-primary:   var(--em-dark);
    --brand-accent:    var(--em-orange);
    --brand-secondary: var(--em-footer);
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: var(--em-charcoal);
    background: var(--em-f3);
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
}

/* ----- Navbar ----- */
.em-navbar {
    background: var(--em-gray-light) !important;
    border-bottom: 2px solid var(--em-sand);
    min-height: 64px;
}
.em-navbar .navbar-brand-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 2px;
    color: var(--em-dark) !important;
    line-height: 1.1;
}
.em-navbar .navbar-tagline {
    font-size: 10px;
    color: var(--em-gray-mid);
    letter-spacing: 0.5px;
    font-style: italic;
}
.em-navbar .nav-link-btn {
    color: var(--em-dark) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.em-navbar .nav-link-btn:hover { color: var(--em-orange) !important; }
.em-navbar .btn-logout {
    background: transparent;
    border: 1.5px solid var(--em-dark);
    color: var(--em-dark) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 5px 14px;
    transition: all .2s;
}
.em-navbar .btn-logout:hover {
    background: var(--em-dark);
    color: var(--em-white) !important;
}

/* Cross logo SVG icon */
.em-cross-icon { width: 38px; height: 46px; flex-shrink: 0; }

/* ----- Override Bootstrap primaries with brand colors ----- */
.btn-primary {
    background-color: var(--em-dark) !important;
    border-color: var(--em-dark) !important;
    color: var(--em-white) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 3px;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #1a3d2b !important;
    border-color: #1a3d2b !important;
}

.btn-success {
    background-color: var(--em-green) !important;
    border-color: var(--em-green) !important;
    color: var(--em-white) !important;
    font-weight: 600;
    border-radius: 3px;
}
.btn-success:hover { background-color: #009962 !important; border-color: #009962 !important; }

.btn-outline-primary {
    color: var(--em-dark) !important;
    border-color: var(--em-dark) !important;
}
.btn-outline-primary:hover {
    background-color: var(--em-dark) !important;
    color: var(--em-white) !important;
}

.btn-outline-secondary { border-radius: 3px; }

/* Accent orange button */
.btn-accent {
    background-color: var(--em-orange) !important;
    border-color: var(--em-orange) !important;
    color: var(--em-white) !important;
    font-weight: 600;
    border-radius: 3px;
}
.btn-accent:hover { background-color: var(--em-orange-dk) !important; border-color: var(--em-orange-dk) !important; }

/* Bootstrap overrides */
.text-primary { color: var(--em-dark) !important; }
.bg-primary    { background-color: var(--em-dark) !important; }
.border-primary { border-color: var(--em-dark) !important; }
.badge.bg-primary { background-color: var(--em-dark) !important; }

.text-success { color: var(--em-green) !important; }
.bg-success   { background-color: var(--em-green) !important; }

/* Links */
a { color: var(--em-dark); }
a:hover { color: var(--em-orange); }

/* ----- Cards ----- */
.card { border-radius: 4px; border: 1px solid #dde0e4; }
.card-header {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px 4px 0 0 !important;
}
.card-header.bg-primary { background-color: var(--em-dark) !important; }
.card-header.bg-success { background-color: var(--em-green) !important; }

/* ----- Wizard Steps ----- */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
}
.wizard-steps .step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s;
}
.wizard-steps .step.active { color: var(--em-dark); }
.wizard-steps .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    background: #e5e7eb;
    color: #6b7280;
    transition: all .2s;
    flex-shrink: 0;
}
.wizard-steps .step.active .step-num {
    background: var(--em-dark);
    color: var(--em-white);
}
.wizard-steps .step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 8px;
    min-width: 20px;
}
@media (max-width: 576px) {
    .wizard-steps .step-label { display: none; }
}

/* ----- Signing Order Cards ----- */
.signing-order-card {
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    padding: 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.signing-order-card:has(input:checked) { border-color: var(--em-dark); background: #f0f1f3; }
.signing-order-card:hover { border-color: var(--em-dark); }

/* ----- Field Rows ----- */
.field-row { transition: box-shadow .15s; border-radius: 4px; }
.field-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.drag-handle { cursor: grab; padding: 4px; }
.drag-handle:active { cursor: grabbing; }

/* ----- Signer Layout ----- */
.signer-layout {
    background: var(--em-f3);
    min-height: 100vh;
}
.signer-header {
    background: var(--em-gray-light);
    border-bottom: 2px solid var(--em-sand);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.signer-header .brand-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 2px;
    color: var(--em-dark);
}
.signer-header .secure-badge {
    background: var(--em-dark);
    color: var(--em-white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 2px;
}
.signer-footer {
    background: var(--em-footer);
    color: rgba(255,255,255,.7);
}
.signer-footer p { color: rgba(255,255,255,.65) !important; }
.signer-footer strong { color: var(--em-white); }

/* ----- Legal Document Header ----- */
.legal-document-header {
    background: var(--em-dark) !important;
    color: var(--em-white) !important;
    border-radius: 4px !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}
.legal-document-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--em-orange);
}
.legal-document-header .document-title {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--em-white);
    font-size: 2rem;
    letter-spacing: 1px;
}
.legal-document-header .text-muted { color: rgba(255,255,255,.65) !important; }
.legal-document-header .badge { color: inherit !important; }

/* ----- Signature Pad ----- */
.signature-pad-wrapper {
    border: 2px dashed var(--em-dark);
    border-radius: 4px;
    background: #fafbfc;
    overflow: hidden;
    position: relative;
}
.signature-canvas {
    display: block;
    width: 100%;
    height: 160px;
    touch-action: none;
    cursor: crosshair;
}
.signature-pad-wrapper::after {
    content: 'Sign here';
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 11px;
    color: #c3cfe2;
    pointer-events: none;
    font-style: italic;
}

/* ----- Login Page ----- */
.login-bg {
    background: var(--em-dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card { border-radius: 4px; border: none; }
.login-card .card-header-brand {
    background: var(--em-dark);
    padding: 28px 32px 20px;
    text-align: center;
}
.login-card .brand-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2.5px;
    color: var(--em-white);
    line-height: 1.1;
}
.login-card .brand-tagline {
    font-size: 10px;
    color: rgba(255,255,255,.55);
    letter-spacing: 0.8px;
    font-style: italic;
}
.login-accent-bar {
    height: 4px;
    background: var(--em-orange);
}

/* ----- Dashboard status badges ----- */
.badge { font-weight: 600; border-radius: 2px; letter-spacing: 0.3px; }
.badge.bg-warning { background-color: #f59e0b !important; color: #1c1917 !important; }
.badge.bg-info    { background-color: #0891b2 !important; }

/* ----- Tables ----- */
.table > :not(caption) > * > * { padding: .65rem 1rem; }
.table-hover tbody tr:hover { background-color: #edf7f2; }

/* ----- Progress ----- */
.progress { border-radius: 2px; background: #e5e7eb; }
.progress-bar.bg-success { background-color: var(--em-green) !important; }

/* ----- Nav pills (signature tabs) ----- */
.nav-pills .nav-link.active {
    background-color: var(--em-dark) !important;
    color: var(--em-white) !important;
}
.nav-pills .nav-link {
    color: var(--em-dark);
    border-radius: 3px;
}

/* ----- Alert overrides ----- */
.alert-info {
    background-color: #eef2ff;
    border-color: #c7d2fe;
    color: #1e3a5f;
}
.alert-warning {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* ----- Primary-subtle (used for signer badges) ----- */
.bg-primary-subtle { background-color: #e8ebed !important; }
.text-primary-emphasis { color: var(--em-dark) !important; }
.border-primary-subtle { border-color: #c5cdd1 !important; }

/* ----- Utility ----- */
.cursor-pointer { cursor: pointer; }
.border-dashed {
    border: 2px dashed #dde0e4 !important;
    border-radius: 4px;
}
.font-bebas { font-family: 'Bebas Neue', sans-serif !important; }

/* ----- Orange accent divider (like the website's white line) ----- */
.em-divider {
    height: 3px;
    width: 48px;
    background: var(--em-orange);
    border: none;
    margin: 12px 0;
    opacity: 1;
}

/* ----- Footer ----- */
.app-footer {
    background: var(--em-footer);
    color: rgba(255,255,255,.6);
    font-size: 12px;
    padding: 16px 0;
    margin-top: 60px;
    border-top: 3px solid var(--em-green);
}
.app-footer a { color: rgba(255,255,255,.6); }
.app-footer strong { color: var(--em-white); }

/* ----- Print ----- */
@media print {
    .em-navbar, .app-footer, .btn, .alert { display: none !important; }
    body { font-size: 12pt; background: #fff; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}