@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&display=swap");

/* Typography: one friendly family keeps the interface natural and consistent. */
body,
button,
input,
select,
textarea {
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

html,
body,
.login-page,
.app-shell {
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

.content,
.content h1,
.content h2,
.content h3,
.content h4,
.content p,
.content span,
.content a,
.content table,
.content th,
.content td,
.content label,
.content small,
.content strong,
.modal,
.modal h3,
.modal label,
.modal input,
.modal select,
.modal textarea,
.modal button {
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

.content h1,
.content h2,
.content h3,
.content h4 {
    letter-spacing: -0.3px;
}

.brand b,
.welcome h2,
.page-intro h2,
.login-brand h1,
.login-panel h2,
.quote-card {
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

.brand b { font-size: 16px; font-weight: 700; }
.welcome h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.page-intro h2 { font-weight: 800; letter-spacing: -0.35px; }
.quote-card { font-size: 14px; font-weight: 500; }

/* Calmer surfaces and spacing */
.welcome {
    background: #1d624a;
    box-shadow: 0 12px 30px rgba(23, 92, 69, 0.13);
}

.stat,
.card,
.data-card {
    box-shadow: 0 8px 24px rgba(24, 49, 41, 0.055);
}

.topbar h1 { letter-spacing: -0.4px; }

/* Navigation groups */
.nav-label {
    margin: 15px 14px 3px;
    color: #88b09d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Page heading */
.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin: 4px 0 24px;
    font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

.page-intro * {
    font-family: inherit !important;
}

.page-intro .eyebrow {
    margin-bottom: 5px;
    color: var(--green-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.page-intro h2 {
    margin: 3px 0 5px;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
}

.page-intro p:last-child {
    margin: 0;
    color: var(--muted);
}

/* Data listing */
.data-card {
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.data-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(560px, 100%);
}

.filter-form .search { flex: 1; }
.text-btn { padding-inline: 8px; background: transparent; color: var(--muted); }

.result-count {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.result-count b { color: var(--ink); }
.row-number { width: 55px; color: #8b9992; }

.report-actions { min-width: 142px; }
.report-actions .icon-btn { display: inline-grid; place-items: center; text-decoration: none; }
.icon-btn.whatsapp { width: 39px; background: #e6f6ec; color: #157347; font-size: 11px; font-weight: 800; }
.icon-btn.email { background: #eef3fb; color: #315f99; }
.badge.active-account { background: #e4f4e9; color: #17693e; }
.badge.inactive-account { background: #fdeae8; color: #a43737; }
.badge.no-account { background: #eef1ef; color: #68756f; }
.icon-btn.account-on { background: #e4f4e9; color: #17693e; }
.icon-btn.account-off { background: #fff1dd; color: #93620d; }

.field-help {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.confirm-box {
    width: min(430px, 100%);
    padding: 30px;
    text-align: center;
}

.confirm-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #edf3f0;
    color: var(--green);
    font-size: 25px;
    font-weight: 800;
}

.confirm-icon.danger { background: #fde9e7; color: #ae3737; }
.confirm-icon.warning { background: #fff0d9; color: #94600a; }
.confirm-icon.success { background: #e5f4ea; color: #17693e; }
.confirm-icon.info { background: #e9f0f9; color: #315f99; }
.confirm-box h3 { margin: 0 0 8px; font-size: 20px; }
.confirm-box p { margin: 0 auto 24px; max-width: 340px; color: var(--muted); line-height: 1.65; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-button { color: white; }
.confirm-button.danger { background: #b94141; }
.confirm-button.warning { background: #b87812; }
.confirm-button.success { background: var(--green); }
.confirm-button.info { background: #315f99; }

/* Profile page */
.profile-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.profile-summary {
    position: sticky;
    top: 115px;
    text-align: center;
}

.profile-avatar-large {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    margin: 4px auto 15px;
    border-radius: 26px;
    background: var(--mint);
    color: var(--green);
    font-size: 34px;
    font-weight: 800;
}

.profile-summary h3 { margin: 0 0 8px; font-size: 19px; }
.role-pill { display: inline-block; padding: 5px 11px; border-radius: 20px; background: #edf4f0; color: var(--green); font-size: 12px; font-weight: 700; }
.profile-facts { margin-top: 24px; text-align: left; }
.profile-facts > div { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-facts > div:last-child { border-bottom: 0; }
.profile-facts dt { margin-bottom: 3px; font-size: 11px; }
.profile-facts dd { overflow-wrap: anywhere; font-size: 13px; }
.profile-forms { display: grid; gap: 20px; }
.form-card { padding: 24px; }
.section-heading { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.section-heading h3 { margin: 0 0 3px; font-size: 18px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-form .form-actions { padding-top: 5px; }

.compact-table td:first-child b,
.compact-table td:first-child small,
.empty b,
.empty span { display: block; }

.compact-table td:first-child small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.empty { padding: 38px; }
.empty b { margin-bottom: 4px; color: var(--ink); font-size: 15px; }

.sidebar-overlay { display: none; }

@media (max-width: 1050px) {
    .nav-label { display: none; }
    .profile-layout { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .sidebar .nav-label { display: block; }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(9, 28, 21, 0.48);
    }

    .menu-open .sidebar-overlay { display: block; }
    .page-intro { align-items: stretch; flex-direction: column; }
    .page-intro .btn { width: 100%; }
    .data-card { padding: 12px; }
    .data-card-toolbar { align-items: stretch; flex-direction: column; }
    .filter-form { width: 100%; }
    .result-count { padding-left: 3px; }
    .stats { grid-template-columns: 1fr; }
    .stat { min-height: 82px; }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-summary { position: static; }
    .form-card { padding: 18px; }
}