* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f4f6f8;
    color: #1a1a1a;
}
a { color: inherit; text-decoration: none; }

.topnav {
    background: #101828;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
}
.topnav .brand { font-weight: 600; font-size: 1.1rem; }
.topnav .nav-links {
    display: flex;
    gap: 1.5rem;
}
.topnav .nav-links a { color: #d0d5dd; font-size: 0.95rem; }
.topnav .nav-links a:hover { color: #fff; }
.topnav .hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
.drawer {
    display: none;
    flex-direction: column;
    background: #101828;
    padding: 0.5rem 1.25rem 1rem;
}
.drawer a {
    color: #d0d5dd;
    padding: 0.6rem 0;
    border-top: 1px solid #1d2939;
}
.drawer.open { display: flex; }

.page-body {
    padding: 1.5rem;
    width: 100%;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.metric-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 1.25rem;
}
.metric-card .label { font-size: 0.85rem; color: #667085; }
.metric-card .value { font-size: 1.75rem; font-weight: 600; margin-top: 0.25rem; }

.status-success { color: #067647; background: #ecfdf3; padding: 0.15rem 0.5rem; border-radius: 4px; }
.status-warning { color: #b54708; background: #fffaeb; padding: 0.15rem 0.5rem; border-radius: 4px; }
.status-danger  { color: #b42318; background: #fef3f2; padding: 0.15rem 0.5rem; border-radius: 4px; }

.auth-wrap {
    max-width: 380px;
    margin: 4rem auto;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 2rem;
}
.auth-wrap h1 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.auth-wrap label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: #344054; }
.auth-wrap input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    margin-bottom: 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 0.95rem;
}
.auth-wrap button {
    width: 100%;
    padding: 0.65rem;
    background: #101828;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}
.auth-wrap .error { color: #b42318; background: #fef3f2; padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.auth-wrap .link-row { margin-top: 1rem; font-size: 0.85rem; text-align: center; }
.auth-wrap .link-row a { color: #175cd3; }

@media (max-width: 640px) {
    .topnav .nav-links { display: none; }
    .topnav .hamburger { display: block; }
}

/* --- Leads module --- */
.flash-success {
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #abefc6;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.form-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 560px;
}
.form-card label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: #344054;
    margin-top: 1rem;
}
.form-card label:first-child { margin-top: 0; }
.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
}
.form-card textarea { resize: vertical; min-height: 80px; }
.form-card .field-error { color: #b42318; font-size: 0.8rem; margin-top: 0.25rem; }
.form-card .btn-row { margin-top: 1.5rem; }
.btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    background: #101828;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: #fff; color: #344054; border: 1px solid #d0d5dd; }

.leads-table-wrap { overflow-x: auto; }
table.leads-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    overflow: hidden;
}
table.leads-table th, table.leads-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4e7ec;
    font-size: 0.9rem;
}
table.leads-table th { background: #f9fafb; color: #667085; font-weight: 600; }
table.leads-table tr:last-child td { border-bottom: none; }
table.leads-table tr:hover td { background: #f9fafb; }
table.leads-table a { color: #175cd3; font-weight: 500; }

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-new { background: #dbeafe; color: #1e40af; }
.badge-contacted { background: #fef3c7; color: #92400e; }
.badge-converted { background: #dcfce7; color: #166534; }
.badge-dropped { background: #e5e7eb; color: #374151; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.detail-field .label { font-size: 0.8rem; color: #667085; margin-bottom: 0.2rem; }
.detail-field .value { font-size: 0.95rem; }
.notes-box {
    background: #f9fafb;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    white-space: pre-wrap;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.page-header h1 { font-size: 1.3rem; margin: 0; }
.empty-state { color: #667085; padding: 2rem; text-align: center; }

/* --- Auth pages redesign (login/signup) --- */
.authpage-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-bottom: 0.5px solid #E6F1FB;
}
.authpage-topbar.is-admin {
    background: #042C53;
}
.authpage-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #0C447C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.authpage-topbar.is-admin .authpage-icon {
    background: #ffffff;
}
.authpage-icon svg { width: 18px; height: 18px; color: #ffffff; }
.authpage-topbar.is-admin .authpage-icon svg { color: #042C53; }
.authpage-wordmark {
    font-size: 1rem;
    font-weight: 600;
    color: #042C53;
}
.authpage-topbar.is-admin .authpage-wordmark {
    color: #ffffff;
}

.authpage-main {
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background: #ffffff;
}
.authpage-col {
    width: 100%;
    max-width: 400px;
}
.authpage-col.is-wide {
    max-width: 440px;
}

.auth-eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5F5E5A;
    text-align: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.auth-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #042C53;
    text-align: center;
    margin: 0 0 0.4rem;
}
.auth-subtext {
    font-size: 0.9rem;
    color: #5F5E5A;
    text-align: center;
    margin: 0 0 1.75rem;
}

.auth-error {
    color: #b42318;
    background: #fef3f2;
    border: 0.5px solid #fecdca;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
}

.auth-form-fields { display: flex; flex-wrap: wrap; gap: 1rem 0.85rem; }
.auth-field { flex: 1 1 100%; min-width: 160px; }
.auth-field.is-half { flex: 1 1 160px; }
.auth-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #5F5E5A;
    margin-bottom: 0.35rem;
}
.auth-field input {
    width: 100%;
    height: 44px;
    padding: 0 0.85rem;
    border: 0.5px solid #B4B2A9;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1a1a1a;
}
.auth-field input:focus {
    outline: none;
    border-color: #0C447C;
    box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.12);
}

.auth-submit {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    margin-top: 1.5rem;
}
.auth-submit.is-navy { background: #0C447C; }
.auth-submit.is-navy:hover { background: #0a3a6b; }
.auth-submit.is-green { background: #639922; }
.auth-submit.is-green:hover { background: #567f1c; }
.auth-submit.is-dark-navy { background: #042C53; }
.auth-submit.is-dark-navy:hover { background: #032344; }

.auth-links {
    text-align: center;
    font-size: 0.88rem;
    color: #5F5E5A;
    margin-top: 1.1rem;
}
.auth-links a { font-weight: 600; }
.auth-links a.is-green { color: #639922; }
.auth-links a.is-navy { color: #0C447C; }

.auth-trustline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 0.5px solid #E6F1FB;
    font-size: 0.82rem;
    color: #639922;
}
.auth-trustline svg { width: 15px; height: 15px; flex-shrink: 0; }

.auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #EAF3DE;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-top: 1.25rem;
    font-size: 0.82rem;
    color: #27500A;
}
.auth-notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 480px) {
    .authpage-main { padding: 1.75rem 1rem; }
    .auth-field.is-half { flex: 1 1 100%; }
}

/* --- Profile / Settings / Short pages --- */
.field-error { color: #b42318; font-size: 0.8rem; margin-top: 0.25rem; }
.content-col {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 2.25rem 1.25rem 3rem;
}
.content-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: #042C53;
    margin: 0 0 0.3rem;
}
.content-subtext {
    font-size: 0.88rem;
    color: #5F5E5A;
    margin: 0 0 1.5rem;
}

.avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0C447C;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 auto 0.85rem;
}
.profile-head { text-align: center; margin-bottom: 1.75rem; }
.profile-head .name { font-size: 1.15rem; font-weight: 700; color: #042C53; }
.badge-row { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.5rem; }
.role-badge, .status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}
.role-badge { background: #E6F1FB; color: #0C447C; }
.status-badge { background: #EAF3DE; color: #27500A; }
.status-badge.is-inactive, .status-badge.is-suspended { background: #f9f0ea; color: #b54708; }

.section-divider {
    border: none;
    border-top: 0.5px solid #E6F1FB;
    margin: 2rem 0;
}
.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #042C53;
    margin: 0 0 1rem;
}

.flash-ok {
    background: #EAF3DE;
    color: #27500A;
    border: 0.5px solid #cfe4b3;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F1EFE8;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    gap: 1rem;
}
.toggle-row .toggle-label { font-size: 0.9rem; color: #1a1a1a; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-track {
    position: absolute;
    inset: 0;
    background: #B4B2A9;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-track { background: #639922; }
.toggle-switch input:checked + .toggle-track .toggle-knob { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.2); }

.short-page-main {
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    text-align: center;
}
.short-page-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E6F1FB;
    color: #0C447C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.short-page-icon.is-success { background: #EAF3DE; color: #639922; }
.short-page-icon svg { width: 30px; height: 30px; }
.short-page-title { font-size: 1.6rem; font-weight: 700; color: #042C53; margin: 0 0 0.5rem; }
.short-page-text { font-size: 0.92rem; color: #5F5E5A; margin: 0 0 1.75rem; max-width: 360px; }