/* ==========================================================================
   Charan Directory — front-end stylesheet
   --------------------------------------------------------------------------
   Mobile-first, hand-rolled. Replaces the legacy directory4.css and
   addss18-directory.css. Only styles classes prefixed with `cd-` so it
   coexists peacefully with the active theme. No CSS framework dependency.

   Sections:
     1. Tokens (CSS custom properties)
     2. Layout / page chrome
     3. Tables (with stacking on narrow viewports)
     4. Forms / fields
     5. Buttons / links
     6. Alerts / cards / pagination
     7. Village picker (chips + suggest dropdown)
     8. Auth & dashboard pages
     9. People list & person details/form
   ========================================================================== */

/* 1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --cd-color-text:       #1f2937;
    --cd-color-muted:      #6b7280;
    --cd-color-bg:         #ffffff;
    --cd-color-bg-soft:    #f9fafb;
    --cd-color-bg-card:    #ffffff;
    --cd-color-border:     #e5e7eb;
    --cd-color-border-strong: #d1d5db;

    --cd-color-accent:        #b91c1c;  /* red — keeps continuity with legacy */
    --cd-color-accent-hover:  #991b1b;
    --cd-color-link:          #1d4ed8;  /* blue */
    --cd-color-link-hover:    #1e40af;
    --cd-color-danger:        #b91c1c;

    --cd-color-info-bg:    #eff6ff;
    --cd-color-info-text:  #1e40af;
    --cd-color-error-bg:   #fef2f2;
    --cd-color-error-text: #991b1b;
    --cd-color-success-bg: #ecfdf5;
    --cd-color-success-text: #065f46;

    --cd-radius:        8px;
    --cd-radius-small:  4px;

    --cd-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --cd-shadow-md: 0 2px 6px rgba(0,0,0,0.06);

    --cd-space-1:  4px;
    --cd-space-2:  8px;
    --cd-space-3:  12px;
    --cd-space-4:  16px;
    --cd-space-5:  24px;
    --cd-space-6:  32px;

    --cd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Arial, "Hiragino Kaku Gothic ProN", "Noto Sans Devanagari",
               "Mangal", sans-serif;
}

/* 2. Layout / page chrome
   -------------------------------------------------------------------------- */
.cd-auth-page,
.cd-dashboard-page,
.cd-districts-page,
.cd-villages-page,
.cd-people-page,
.cd-person-details,
.cd-person-form-page {
    font-family: var(--cd-font);
    color: var(--cd-color-text);
    line-height: 1.55;
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--cd-space-4);
}

.cd-auth-page *,
.cd-dashboard-page *,
.cd-districts-page *,
.cd-villages-page *,
.cd-people-page *,
.cd-person-details *,
.cd-person-form-page * {
    box-sizing: border-box;
}

.cd-auth-page h2,
.cd-dashboard-page h2,
.cd-districts-page h2,
.cd-districts-page h3,
.cd-villages-page h4,
.cd-people-page h2,
.cd-person-details h2,
.cd-person-form-page h2 {
    margin: 0 0 var(--cd-space-4);
    font-weight: 600;
    line-height: 1.2;
}

.cd-section-heading {
    margin: var(--cd-space-5) 0 var(--cd-space-3);
    font-weight: 600;
}

.cd-districts-heading {
    text-align: center;
    color: var(--cd-color-accent);
}

.cd-empty {
    color: var(--cd-color-muted);
    padding: var(--cd-space-3);
    text-align: center;
}

.cd-help-text {
    display: block;
    color: var(--cd-color-muted);
    font-size: 0.85em;
    margin-top: var(--cd-space-1);
}

.cd-readonly {
    display: inline-block;
    background: var(--cd-color-bg-soft);
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-small);
    padding: var(--cd-space-1) var(--cd-space-2);
    color: var(--cd-color-muted);
}

.cd-callout {
    background: var(--cd-color-bg-soft);
    border-left: 3px solid var(--cd-color-accent);
    padding: var(--cd-space-3) var(--cd-space-4);
    margin: var(--cd-space-4) 0;
    border-radius: 0 var(--cd-radius-small) var(--cd-radius-small) 0;
}

.cd-error-card {
    background: var(--cd-color-error-bg);
    color: var(--cd-color-error-text);
    border: 1px solid #fecaca;
    border-radius: var(--cd-radius);
    padding: var(--cd-space-4);
    margin: var(--cd-space-4) auto;
    max-width: 600px;
    text-align: center;
}

.cd-back {
    text-align: center;
    margin: var(--cd-space-4) 0;
}

/* Bumped specificity (.cd-table .cd-num) so this beats .cd-table th/td's
   default text-align: left when used as a column-alignment hint. */
.cd-num,
.cd-table th.cd-num,
.cd-table td.cd-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Cards */
.cd-card {
    background: var(--cd-color-bg-card);
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow-sm);
    margin: var(--cd-space-4) 0;
    overflow: hidden;
}
.cd-card-head {
    background: var(--cd-color-bg-soft);
    padding: var(--cd-space-3) var(--cd-space-4);
    border-bottom: 1px solid var(--cd-color-border);
}
.cd-card-head h5 {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    color: var(--cd-color-accent);
}
.cd-card-body {
    padding: var(--cd-space-4);
}

/* 3. Tables (with stacking on narrow viewports)
   --------------------------------------------------------------------------
   Two visual flavors share `.cd-table`:
     - "Data" tables (with a <thead>): districts, villages, people, users,
       dashboard "My Villages". Get the modern accented look — red header,
       zebra rows, warm hover, rounded corners, soft shadow on the wrap.
     - "Spec-sheet" tables (no <thead>, used for person-details / contact
       label:value layouts): override striping/hover so the simple two-
       column layout stays clean.
   -------------------------------------------------------------------------- */
.cd-table-wrap {
    overflow-x: auto;
    margin: var(--cd-space-3) 0;
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow-md);
    background: var(--cd-color-bg-card);
}

.cd-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cd-color-bg-card);
}
.cd-table th,
.cd-table td {
    padding: var(--cd-space-3) var(--cd-space-4);
    border-bottom: 1px solid var(--cd-color-border);
    text-align: left;
    vertical-align: top;
}

/* Modern data-table header (only present on tables with a <thead>).
   Specificity is intentionally bumped (.cd-table.cd-table) and the
   colour-bearing properties are marked !important so a stricter theme
   rule like `.entry-content table thead th` can't strip the red away
   and leave white text on a white background. The solid
   `background-color` is a fallback for environments that strip
   gradients (e.g. some print stylesheets / older email clients in
   future render contexts). */
.cd-table.cd-table thead th {
    background-color: #b91c1c !important;
    background-image: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    border-bottom: 2px solid #7f1d1d !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}
.cd-table.cd-table thead th:first-child { border-top-left-radius: var(--cd-radius); }
.cd-table.cd-table thead th:last-child  { border-top-right-radius: var(--cd-radius); }
.cd-table.cd-table thead th a {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Zebra rows + warm hover — applies broadly; the spec-sheet tables below
   override these back to transparent. */
.cd-table tbody tr {
    transition: background-color 0.15s ease;
}
.cd-table tbody tr:nth-child(even) {
    background: #fafafa;
}
.cd-table tbody tr:hover {
    background: #fff7ed; /* warm light tint */
}
.cd-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Cell-level link styling so names / "Edit" links read as clickable
   without the page feeling visually noisy. */
.cd-table tbody td a {
    color: var(--cd-color-link);
    text-decoration: none;
    font-weight: 500;
}
.cd-table tbody td a:hover {
    color: var(--cd-color-link-hover);
    text-decoration: underline;
}

/* Spec-sheet tables (no <thead>): person details + contact tables and the
   info-table inside the people-list header. Opt them OUT of striping/hover
   so the label:value layout reads cleanly. */
.cd-person-details-table tbody tr,
.cd-person-contact-table tbody tr,
.cd-info-table tbody tr,
.cd-person-details-table tbody tr:nth-child(even),
.cd-person-contact-table tbody tr:nth-child(even),
.cd-info-table tbody tr:nth-child(even) {
    background: transparent;
}
.cd-person-details-table tbody tr:hover,
.cd-person-contact-table tbody tr:hover,
.cd-info-table tbody tr:hover {
    background: transparent;
}
.cd-table .cd-label {
    color: var(--cd-color-muted);
    width: 35%;
    font-weight: 500;
}

/* Stacking: at <600px, transform table rows into card-like blocks. */
@media (max-width: 600px) {
    .cd-table-stacking thead { display: none; }
    .cd-table-stacking tbody tr {
        display: block;
        border: 1px solid var(--cd-color-border);
        border-radius: var(--cd-radius-small);
        margin-bottom: var(--cd-space-3);
        background: var(--cd-color-bg-card);
        padding: var(--cd-space-2);
    }
    .cd-table-stacking tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--cd-space-3);
        border-bottom: 1px dashed var(--cd-color-border);
        padding: var(--cd-space-2) var(--cd-space-1);
        text-align: right;
    }
    .cd-table-stacking tbody td:last-child { border-bottom: 0; }
    .cd-table-stacking tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cd-color-muted);
        text-align: left;
        flex: 0 0 auto;
        margin-right: var(--cd-space-3);
    }
    .cd-table-stacking tbody td:not([data-label])::before { content: none; }
    .cd-table-stacking tbody td.cd-num { justify-content: flex-end; }
    /* Cells the template intentionally rendered empty (e.g. zero count,
       missing remarks) collapse so the card doesn't carry empty rows. */
    .cd-table-stacking tbody td:empty { display: none; }
}

/* Count pill — used for the per-village member count (and any other
   numeric badge we want to visually pop). */
.cd-count-pill {
    display: inline-block;
    min-width: 2rem;
    padding: 2px 10px;
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Tahsil grouping (cd-villages-grouped) — desktop bands.
   Mobile/stacked rules live further below in the @media block. */
.cd-villages-grouped tbody.cd-tahsil-block {
    /* Each <tbody> is a tahsil group. Browsers don't add visual gap by
       default; we lean on the band row for the visual break. */
}
.cd-villages-grouped .cd-tahsil-header td {
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
    color: var(--cd-color-accent);
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    padding: var(--cd-space-2) var(--cd-space-4);
    border-top: 1px solid var(--cd-color-border-strong);
    border-bottom: 1px solid var(--cd-color-border);
}
.cd-villages-grouped .cd-tahsil-header:hover td {
    /* Hover should not strip the gradient — the row-level hover paints
       the row's own background color, but the cell's background-image
       above wins because we set it via `background` (a shorthand that
       includes `background-image`) with !important on a cell. */
}

/* "Has-people" affordances (desktop) — warm row tint, accent-coloured
   bold village name, right-arrow chevron beside the name, animated
   slide on row hover. Empty villages stay muted so populated rows
   visually "pop" and entice the visitor to click. */
.cd-villages-grouped tbody tr.cd-village-has-people,
.cd-villages-orgs    tbody tr.cd-village-has-people {
    background-color: #fffaf5;
}
.cd-villages-grouped tbody tr.cd-village-has-people:hover,
.cd-villages-orgs    tbody tr.cd-village-has-people:hover {
    background-color: #fff3e6;
}

/* Populated village (PersonCount > 0): name is bold accent-red and
   permanently underlined so it reads instantly as a clickable link on
   both desktop and mobile (no hover required). */
.cd-villages-grouped tbody tr.cd-village-has-people .cd-village-name a,
.cd-villages-orgs    tbody tr.cd-village-has-people .cd-village-name a {
    color: var(--cd-color-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Village with no people in the directory yet: muted gray + normal
   weight so populated rows still lead the eye, but the link is
   underlined too — clickable should universally read as clickable. */
.cd-villages-grouped tbody tr.cd-village-row:not(.cd-village-has-people) .cd-village-name a,
.cd-villages-orgs    tbody tr.cd-village-row:not(.cd-village-has-people) .cd-village-name a {
    color: var(--cd-color-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The count cell becomes the click affordance — pill + arrow inside a
   single anchor. Whole pill+arrow group is the link target. The wrapper
   itself must NEVER be underlined: the pill's coloured background and
   the chevron animation already communicate "clickable". The selectors
   below explicitly cover every link state so neither the generic table
   `tbody td a:hover { text-decoration: underline }` rule nor the theme
   defaults can introduce a stray underline post-click / on-focus / on-
   visited. */
.cd-count-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.cd-table tbody td a.cd-count-link,
.cd-table tbody td a.cd-count-link:link,
.cd-table tbody td a.cd-count-link:visited,
.cd-table tbody td a.cd-count-link:hover,
.cd-table tbody td a.cd-count-link:focus,
.cd-table tbody td a.cd-count-link:active {
    text-decoration: none;
}

/* Force a text-glyph font for the arrow. Without this, characters like
   `▶` get substituted with the system emoji font (Segoe UI Emoji on
   Windows / Apple Color Emoji on macOS), which renders them as a
   coloured emoji badge that ignores our `color` rule. */
.cd-go-arrow {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol",
                 "Arial Unicode MS", "DejaVu Sans", Arial, sans-serif;
    color: var(--cd-color-accent);
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1;
}

/* Stacked-mode treatment for the villages-grouped variant.
   Goal: Tahsil = bold red banner; villages = card stack with accent
   left border, big bold name, "शाखा:" inline, count pill, remarks
   without a label. */
@media (max-width: 600px) {
    .cd-villages-grouped { display: block; }
    .cd-villages-grouped thead { display: none; }
    .cd-villages-grouped tbody.cd-tahsil-block {
        display: block;
        margin-bottom: var(--cd-space-4);
        border: 0;
        background: transparent;
    }

    .cd-villages-grouped .cd-tahsil-header {
        display: block;
        margin: 0 0 var(--cd-space-2);
        background: transparent;
        border: 0;
        padding: 0;
    }
    .cd-villages-grouped .cd-tahsil-header td {
        display: block;
        background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
        color: #ffffff !important;
        font-weight: 700;
        padding: var(--cd-space-2) var(--cd-space-3);
        border: 0;
        border-radius: var(--cd-radius-small);
        text-align: left;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    }
    .cd-villages-grouped .cd-tahsil-header td strong { color: #fff; }

    /* Each village row is now a card. Populated villages get an accent
       left rail and warm tint; empty villages get a muted gray rail and
       stay neutral, so populated cards visually pop. */
    .cd-villages-grouped tbody tr:not(.cd-tahsil-header) {
        display: block;
        background: #ffffff;
        border: 1px solid var(--cd-color-border);
        border-left: 4px solid var(--cd-color-border-strong);
        border-radius: var(--cd-radius);
        padding: var(--cd-space-3);
        margin-bottom: var(--cd-space-2);
        box-shadow: var(--cd-shadow-sm);
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
    .cd-villages-grouped tbody tr.cd-village-has-people {
        background-color: #fffaf5;
        border-left-color: var(--cd-color-accent);
    }
    .cd-villages-grouped tbody tr:not(.cd-tahsil-header):hover {
        box-shadow: var(--cd-shadow-md);
    }
    .cd-villages-grouped tbody tr.cd-village-has-people:hover {
        background-color: #fff3e6;
    }
    .cd-villages-grouped tbody tr:not(.cd-tahsil-header) td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }
    /* Hide row # and any cell the template rendered empty. */
    .cd-villages-grouped .cd-row-num { display: none !important; }
    .cd-villages-grouped tbody tr td:empty { display: none; }

    /* Village name — primary, large, no label prefix. Populated villages
       get accent red + bold; empty villages get muted gray + normal weight
       so the populated cards visually lead. */
    .cd-villages-grouped .cd-village-name {
        font-size: 1.15em;
        margin-bottom: var(--cd-space-2);
    }
    .cd-villages-grouped .cd-village-name::before { content: none; }
    .cd-villages-grouped .cd-village-name a {
        text-decoration: none;
    }
    .cd-villages-grouped tr.cd-village-has-people .cd-village-name a {
        color: var(--cd-color-accent);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .cd-villages-grouped tr.cd-village-row:not(.cd-village-has-people) .cd-village-name a {
        color: var(--cd-color-muted);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* Gautra — inline label-prefixed line, smaller. */
    .cd-villages-grouped .cd-village-gautra {
        font-size: 0.95em;
        margin-bottom: var(--cd-space-1);
    }
    .cd-villages-grouped .cd-village-gautra::before {
        content: "शाखा: ";
        font-weight: 600;
        color: var(--cd-color-muted);
        margin-right: var(--cd-space-1);
    }

    /* Count — pill on its own line; label "सदस्य संख्या:" prepended. */
    .cd-villages-grouped .cd-village-count {
        margin-top: var(--cd-space-2);
        justify-content: flex-start;
    }
    .cd-villages-grouped .cd-village-count::before {
        content: "सदस्य संख्या: ";
        font-weight: 600;
        color: var(--cd-color-muted);
        margin-right: var(--cd-space-2);
    }

    /* Remarks — italic muted, no label. Cell is empty -> hidden by
       :empty rule above when there's no remarks. */
    .cd-villages-grouped .cd-village-remarks {
        margin-top: var(--cd-space-2);
        padding-top: var(--cd-space-2);
        border-top: 1px dashed var(--cd-color-border);
        font-style: italic;
        color: var(--cd-color-muted);
        font-size: 0.92em;
    }
    .cd-villages-grouped .cd-village-remarks::before { content: none; }

    /* Same treatment for the orgs variant — no tahsil grouping but the
       same card stacking, has-people emphasis, and empty-cell collapse. */
    .cd-villages-orgs .cd-row-num { display: none !important; }
    .cd-villages-orgs tbody tr {
        border-left: 4px solid var(--cd-color-border-strong);
    }
    .cd-villages-orgs tbody tr.cd-village-has-people {
        background-color: #fffaf5;
        border-left-color: var(--cd-color-accent);
    }
    .cd-villages-orgs tbody tr.cd-village-has-people:hover {
        background-color: #fff3e6;
    }
    .cd-villages-orgs .cd-village-name { font-size: 1.1em; }
    .cd-villages-orgs tr.cd-village-has-people .cd-village-name a {
        color: var(--cd-color-accent);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .cd-villages-orgs tr.cd-village-row:not(.cd-village-has-people) .cd-village-name a {
        color: var(--cd-color-muted);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .cd-villages-orgs .cd-village-remarks {
        font-style: italic;
        color: var(--cd-color-muted);
    }
    .cd-villages-orgs .cd-village-remarks::before { content: none; }
}

/* 4. Forms / fields
   -------------------------------------------------------------------------- */
.cd-auth-form,
.cd-user-form,
.cd-person-form,
.cd-filters {
    margin: var(--cd-space-4) 0;
}

.cd-field {
    display: block;
    margin: 0 0 var(--cd-space-3);
}
.cd-field label {
    display: block;
    margin-bottom: var(--cd-space-1);
    font-weight: 500;
}
.cd-field input[type="text"],
.cd-field input[type="email"],
.cd-field input[type="password"],
.cd-field input[type="search"],
.cd-field input[type="number"],
.cd-field input[type="tel"],
.cd-field select,
.cd-field textarea {
    width: 100%;
    padding: var(--cd-space-2) var(--cd-space-3);
    border: 1px solid var(--cd-color-border-strong);
    border-radius: var(--cd-radius-small);
    font: inherit;
    color: inherit;
    background: var(--cd-color-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-field input:focus,
.cd-field select:focus,
.cd-field textarea:focus {
    outline: 0;
    border-color: var(--cd-color-link);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
.cd-field input:disabled,
.cd-field input[readonly] {
    background: var(--cd-color-bg-soft);
    color: var(--cd-color-muted);
}
.cd-field-checkbox label,
.cd-field-radio label {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin-right: var(--cd-space-4);
    font-weight: 400;
}
.cd-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: flex-end;
}
.cd-field-inline {
    flex: 1 1 140px;
}
.cd-field-actions {
    display: flex;
    gap: var(--cd-space-3);
    align-items: center;
    margin-top: var(--cd-space-4);
}
.cd-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: center;
    margin-top: var(--cd-space-5);
    padding-top: var(--cd-space-4);
    border-top: 1px solid var(--cd-color-border);
    /* Sticky on mobile so save is always reachable. */
}
@media (max-width: 600px) {
    .cd-form-actions {
        position: sticky;
        bottom: 0;
        background: var(--cd-color-bg);
        padding-bottom: var(--cd-space-3);
    }
}

.cd-fieldset {
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius);
    padding: var(--cd-space-4);
    margin: 0 0 var(--cd-space-4);
}
.cd-fieldset legend {
    padding: 0 var(--cd-space-2);
    font-weight: 600;
    color: var(--cd-color-accent);
}

.cd-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: flex-end;
    background: var(--cd-color-bg-soft);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius);
    border: 1px solid var(--cd-color-border);
}
.cd-filters .cd-field { margin-bottom: 0; }

/* 5. Buttons / links
   --------------------------------------------------------------------------
   Buttons are often rendered as <a> elements (e.g. "नया नाम जोड़ें").
   Themes commonly set `a { color: blue }` / `a:visited { color: purple }`
   with specificity that beats a single-class rule, which leaks the theme
   link colour into our buttons. We mark the colour-bearing properties
   `!important` and explicitly cover :link / :visited / :hover / :focus /
   :active so no theme rule can strip them. The selector chain `a.cd-button`
   adds enough specificity to win the underline argument too. */
.cd-button {
    display: inline-block;
    padding: var(--cd-space-2) var(--cd-space-4);
    font: inherit;
    font-weight: 500;
    color: var(--cd-color-text) !important;
    background-color: var(--cd-color-bg-soft) !important;
    background-image: none !important;
    border: 1px solid var(--cd-color-border-strong) !important;
    border-radius: var(--cd-radius-small);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    min-height: 40px;
    line-height: 1.4;
}
a.cd-button,
a.cd-button:link,
a.cd-button:visited,
a.cd-button:hover,
a.cd-button:focus,
a.cd-button:active {
    text-decoration: none;
    color: var(--cd-color-text) !important;
}
.cd-button:hover { background-color: #f3f4f6 !important; }

.cd-button-primary,
a.cd-button-primary,
a.cd-button-primary:link,
a.cd-button-primary:visited,
a.cd-button-primary:hover,
a.cd-button-primary:focus,
a.cd-button-primary:active {
    color: #ffffff !important;
    background-color: var(--cd-color-accent) !important;
    background-image: none !important;
    border-color: var(--cd-color-accent) !important;
}
.cd-button-primary:hover,
a.cd-button-primary:hover {
    background-color: var(--cd-color-accent-hover) !important;
    border-color: var(--cd-color-accent-hover) !important;
}
.cd-button:focus,
.cd-button:focus-visible {
    outline: 2px solid var(--cd-color-link);
    outline-offset: 2px;
}

.cd-link        { color: var(--cd-color-link); text-decoration: underline; }
.cd-link:hover  { color: var(--cd-color-link-hover); }
.cd-link-muted  { color: var(--cd-color-muted); }
.cd-link-danger { color: var(--cd-color-danger); }

/* 6. Alerts / pagination
   -------------------------------------------------------------------------- */
.cd-alert {
    padding: var(--cd-space-3) var(--cd-space-4);
    border-radius: var(--cd-radius-small);
    margin: var(--cd-space-3) 0;
    border: 1px solid transparent;
}
.cd-alert-error {
    background: var(--cd-color-error-bg);
    color: var(--cd-color-error-text);
    border-color: #fecaca;
}
.cd-alert-info {
    background: var(--cd-color-info-bg);
    color: var(--cd-color-info-text);
    border-color: #bfdbfe;
}

.cd-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-1);
    justify-content: center;
    margin: var(--cd-space-4) 0;
    align-items: center;
}
.cd-pagination .cd-page {
    display: inline-block;
    padding: var(--cd-space-1) var(--cd-space-3);
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-small);
    color: var(--cd-color-link);
    text-decoration: none;
    background: var(--cd-color-bg-card);
    min-width: 36px;
    text-align: center;
}
.cd-pagination .cd-page:hover { background: var(--cd-color-bg-soft); }
.cd-pagination .cd-page-current {
    background: var(--cd-color-accent);
    color: #ffffff;
    border-color: var(--cd-color-accent);
    font-weight: 600;
}
.cd-pagination .cd-page-disabled {
    color: var(--cd-color-muted);
    pointer-events: none;
    background: var(--cd-color-bg-soft);
}

.cd-list-meta {
    color: var(--cd-color-muted);
    font-size: 0.9em;
    margin: var(--cd-space-2) 0 var(--cd-space-3);
}

/* 7. Village picker
   -------------------------------------------------------------------------- */
.cd-village-picker {
    position: relative;
}
.cd-suggest {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--cd-color-bg-card);
    border: 1px solid var(--cd-color-border-strong);
    border-radius: var(--cd-radius-small);
    box-shadow: var(--cd-shadow-md);
    max-height: 280px;
    overflow-y: auto;
    position: absolute;
    z-index: 20;
    width: 100%;
    top: 100%;
    left: 0;
}
.cd-suggest-item,
.cd-suggest-status {
    padding: var(--cd-space-2) var(--cd-space-3);
    cursor: pointer;
}
.cd-suggest-item:hover { background: var(--cd-color-bg-soft); }
.cd-suggest-status { color: var(--cd-color-muted); cursor: default; }

.cd-chips {
    list-style: none;
    margin: var(--cd-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
}
.cd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
    background: var(--cd-color-bg-soft);
    border: 1px solid var(--cd-color-border-strong);
    border-radius: 20px;
    padding: var(--cd-space-1) var(--cd-space-3);
}
.cd-chip-primary { font-size: 0.85em; }
.cd-chip-remove {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    color: var(--cd-color-muted);
    padding: 0 var(--cd-space-1);
}
.cd-chip-remove:hover { color: var(--cd-color-danger); }

/* 8. Auth & dashboard pages
   -------------------------------------------------------------------------- */
.cd-auth-page {
    max-width: 480px;
}
.cd-auth-secondary {
    text-align: center;
    margin-top: var(--cd-space-3);
}
.cd-auth-instruction {
    color: var(--cd-color-muted);
    font-size: 0.95em;
    margin-bottom: var(--cd-space-4);
}

.cd-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cd-space-2) 0;
    border-bottom: 1px solid var(--cd-color-border);
    margin-bottom: var(--cd-space-4);
}
.cd-dashboard-header-title a { font-weight: 600; text-decoration: none; }

.cd-dashboard-section {
    background: var(--cd-color-bg-card);
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius);
    padding: var(--cd-space-4);
    margin-bottom: var(--cd-space-4);
    box-shadow: var(--cd-shadow-sm);
}
.cd-dashboard-section h3 {
    margin: 0 0 var(--cd-space-3);
    color: var(--cd-color-accent);
    font-weight: 600;
}
.cd-dashboard-section-action {
    margin-top: var(--cd-space-3);
}

.cd-disclosure summary {
    cursor: pointer;
    font-weight: 500;
    margin-top: var(--cd-space-3);
    padding: var(--cd-space-2) 0;
    color: var(--cd-color-link);
}

.cd-page-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--cd-space-3);
}
.cd-row-actions a + a::before {
    content: "";
}
.cd-row-actions .cd-link { white-space: nowrap; }

/* 9. People list & person details/form
   -------------------------------------------------------------------------- */

/* Village hero — single combined card with name, location, gautra pill,
   and the sanchalak chips. The page wrapper drops its top padding for
   the people list (override below) so the hero sits flush with the top.
   Margin-top is explicitly zero so the card cannot inherit any stray
   space from the page wrapper. */
.cd-people-page { padding-top: 0; }

.cd-village-hero {
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
    border: 1px solid var(--cd-color-border);
    border-left: 4px solid var(--cd-color-accent);
    border-radius: var(--cd-radius);
    /* Top + bottom padding intentionally zero — the village name hugs
       the top edge of the tile and the last sanchalak hugs the bottom.
       The h2's own margin-top is also forced to zero below to defeat
       any theme rule that re-adds it. */
    padding: 0 var(--cd-space-3);
    margin: 0 0 var(--cd-space-3);
    box-shadow: var(--cd-shadow-sm);
}
.cd-village-hero-name,
.cd-people-page .cd-village-hero-name {
    margin: 0 0 4px !important;
    padding: 0;
    color: var(--cd-color-accent);
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
.cd-village-hero-meta {
    margin: 0 0 var(--cd-space-1);
    color: var(--cd-color-text);
    font-size: 0.95em;
    text-align: center;
}
.cd-village-hero-gautra {
    margin: 0 0 var(--cd-space-2);
    text-align: center;
}
.cd-village-gautra-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(185, 28, 28, 0.08);
    color: var(--cd-color-accent);
    font-size: 0.9em;
    font-weight: 600;
}

/* Sanchalak row inside the hero — small label + plain inline names with
   tap-to-call / tap-to-email icons. Centered to match the rest of the
   hero (village name, location line, gautra pill). Multiple sanchalaks
   are separated by a · between names. */
.cd-sanchalaks-row {
    display: block;
    text-align: center;
    margin-top: var(--cd-space-2);
    padding-top: var(--cd-space-2);
    border-top: 1px dashed rgba(185, 28, 28, 0.18);
}
.cd-sanchalaks-label {
    color: var(--cd-color-muted);
    font-size: 0.9em;
    font-weight: 600;
    margin-right: 6px;
}
.cd-sanchalak-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}
.cd-sanchalak-chip {
    display: inline;
    margin-right: 4px;
}
.cd-sanchalak-chip + .cd-sanchalak-chip::before {
    content: " · ";
    color: var(--cd-color-muted);
    margin: 0 4px;
}
.cd-sanchalak-chip .cd-sanchalak-name {
    font-weight: 500;
}
.cd-sanchalak-chip.cd-sanchalak-primary .cd-sanchalak-name {
    color: var(--cd-color-accent);
    font-weight: 700;
}
.cd-icon-link {
    display: inline-block;
    text-decoration: none;
    margin-left: 4px;
    line-height: 1;
}
.cd-icon-link:hover { opacity: 0.75; }

/* Toolbar — desktop side-by-side; mobile stacked. */
.cd-people-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: center;
    justify-content: space-between;
    margin: var(--cd-space-3) 0;
}
.cd-people-search {
    display: flex;
    flex: 1 1 300px;
    gap: var(--cd-space-2);
    /* Flex items default to min-width: auto (their intrinsic content
       size). Without this override the search input cannot shrink below
       its preferred ~200px, pushing the icon button off the right edge
       on narrow viewports. */
    min-width: 0;
}
.cd-people-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--cd-space-2) var(--cd-space-3);
    border: 1px solid var(--cd-color-border-strong);
    border-radius: var(--cd-radius-small);
    font: inherit;
}
/* Search button — icon-only. Make it a tidy square that matches the
   input height; the SVG inherits text colour via stroke="currentColor". */
.cd-people-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cd-space-2);
    min-width: 44px;
}
.cd-people-search-btn svg {
    display: block;
}
@media (max-width: 600px) {
    .cd-people-toolbar { flex-direction: column; }
    .cd-people-search { width: 100%; flex: 1 1 auto; }
    .cd-people-add { width: 100%; }
    .cd-people-add .cd-button { display: block; width: 100%; text-align: center; }

    /* Multiple sanchalaks → one per line on mobile (drop the inline ·
       separator). Each chip becomes a block so it gets its own line.
       The "संचालक:" label gets its own top line in bold, hugging the
       names below it (no gap). */
    .cd-sanchalaks-label {
        display: block;
        margin: 0;
        font-weight: 700;
        color: var(--cd-color-text);
    }
    .cd-sanchalak-chips { display: block; }
    .cd-sanchalak-chip { display: block; margin: 0; }
    .cd-sanchalak-chip + .cd-sanchalak-chip::before { content: none; }
}

/* People table — desktop = standard table (no stacking class).
   Stacked rendering is handled below in the @media block via CSS Grid.
   The inline chevron is hidden on desktop — only the name link is shown. */
.cd-people-table .cd-row-num { width: 3rem; }
.cd-people-table .cd-person-chevron-inline { display: none; }
.cd-people-table .cd-person-mobile .cd-mobile-link {
    color: var(--cd-color-link);
    text-decoration: none;
}
.cd-people-table .cd-person-mobile .cd-mobile-link:hover {
    text-decoration: underline;
}
.cd-mobile-masked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cd-color-muted);
}
/* Phone icon SVG (inline in templates/people/_rows.php). Always shown
   when the mobile number is visible, on every viewport. !important on
   display defeats any theme rule like `.entry-content svg { display: none }`. */
.cd-mobile-icon {
    display: inline-flex !important;
    align-items: center;
    margin-right: 6px;
    color: var(--cd-color-accent);
    vertical-align: -2px;
}
.cd-mobile-icon svg {
    display: inline-block !important;
    width: 14px;
    height: 14px;
}
.cd-sort-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.06);
    color: var(--cd-color-muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* People table — stacked-mode CSS Grid card layout (< 600px). */
@media (max-width: 600px) {
    .cd-people-table-wrap {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .cd-people-table {
        display: block;
        background: transparent;
    }
    .cd-people-table thead { display: none; }
    .cd-people-table tbody { display: block; }

    .cd-people-table tbody tr.cd-person-row {
        display: grid;
        grid-template-columns: 1fr;
        /* Each line gets its own full-width row so labels stay readable
           and नाम / पिता-पति / गौत्र / रोजगार / phone don't squeeze each
           other on narrow viewports. The sort cell is hidden on mobile. */
        grid-template-areas:
            "name"
            "relation"
            "gautra"
            "livelihood"
            "mobile";
        row-gap: 4px;
        background: #ffffff;
        border: 1px solid var(--cd-color-border);
        border-left: 4px solid var(--cd-color-accent);
        border-radius: var(--cd-radius);
        padding: var(--cd-space-3) var(--cd-space-3) var(--cd-space-2);
        margin-bottom: var(--cd-space-2);
        box-shadow: var(--cd-shadow-sm);
        transition: box-shadow 0.15s ease;
    }
    .cd-people-table tbody tr.cd-person-row:hover {
        box-shadow: var(--cd-shadow-md);
        background: #ffffff; /* avoid the generic hover tint conflict */
    }
    .cd-people-table tbody tr.cd-person-row td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
    }
    .cd-people-table tbody tr.cd-person-row td:empty { display: none; }
    .cd-people-table .cd-row-num { display: none !important; }
    /* Sort badge crowds the name on narrow screens — drop it from the
       mobile card entirely. (The "क्रम" column still shows on desktop.) */
    .cd-people-table .cd-person-sort { display: none !important; }

    .cd-person-name {
        grid-area: name;
        font-size: 1.15em;
        font-weight: 700;
        line-height: 1.25;
    }
    .cd-person-name-link {
        color: var(--cd-color-accent);
        text-decoration: none;
    }
    .cd-person-name-link:hover { text-decoration: underline; }

    /* Inline chevron (only visible on stacked mode) — small, lives right
       after the name. The whole-card click area would have been more
       discoverable, but Q3 says only name + chevron link, so we keep it
       tight. */
    .cd-people-table .cd-person-chevron-inline {
        display: inline-block;
        margin-left: 6px;
        color: var(--cd-color-accent);
        text-decoration: none;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol",
                     "Arial Unicode MS", "DejaVu Sans", Arial, sans-serif;
        font-size: 0.85em;
        line-height: 1;
        vertical-align: 1px;
    }
    .cd-people-table .cd-person-chevron-inline:hover { text-decoration: none; }

    .cd-person-relation,
    .cd-person-position {
        grid-area: relation;
        color: var(--cd-color-muted);
        font-size: 0.95em;
    }

    .cd-person-gautra {
        grid-area: gautra;
        font-size: 0.95em;
    }
    .cd-person-gautra::before {
        content: "उपजाति(गौत्र): ";
        color: var(--cd-color-muted);
        font-weight: 600;
        margin-right: 2px;
    }

    .cd-person-livelihood {
        grid-area: livelihood;
        font-size: 0.95em;
    }
    .cd-person-livelihood::before {
        content: "रोजगार: ";
        color: var(--cd-color-muted);
        font-weight: 600;
        margin-right: 2px;
    }

    .cd-person-mobile {
        grid-area: mobile;
        font-size: 0.95em;
    }

    /* Empty-state row — single full-width block, not a grid card. */
    .cd-people-table tbody tr.cd-empty-state-row {
        display: block;
        background: #ffffff;
        border: 1px solid var(--cd-color-border);
        border-radius: var(--cd-radius);
        padding: var(--cd-space-4);
        text-align: center;
        margin-bottom: var(--cd-space-3);
    }
    .cd-people-table tbody tr.cd-empty-state-row td {
        display: block;
        padding: 0;
        border: 0;
    }
}

.cd-edit-hint {
    color: var(--cd-color-accent);
    font-size: 0.9em;
    margin-bottom: var(--cd-space-3);
}

.cd-spouse-fields {
    background: var(--cd-color-bg-soft);
    padding: var(--cd-space-3);
    border-radius: var(--cd-radius-small);
    border: 1px dashed var(--cd-color-border-strong);
    margin-bottom: var(--cd-space-3);
}

/* -----------------------------------------------------------------------
   Person form (templates/people/form.php) — mobile-first, friendly
   ----------------------------------------------------------------------- */
.cd-form-hero {
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
    border: 1px solid var(--cd-color-border);
    border-left: 4px solid var(--cd-color-accent);
    border-radius: var(--cd-radius);
    padding: var(--cd-space-3);
    margin: 0 0 var(--cd-space-3);
}
.cd-person-form-page .cd-form-hero-title {
    margin: 0 0 4px !important;
    color: var(--cd-color-accent);
    font-size: 1.2em !important;
    font-weight: 700;
}
.cd-form-hero-help {
    margin: 0;
    color: var(--cd-color-muted);
    font-size: 0.95em;
}

/* Each section is a card. <section> for always-expanded, <details> for
   collapsible. Visually identical except <details> shows a triangle. */
.cd-form-section {
    background: #ffffff;
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius);
    padding: var(--cd-space-3);
    margin: 0 0 var(--cd-space-3);
    box-shadow: var(--cd-shadow-sm);
}
.cd-person-form-page .cd-form-section-heading {
    margin: 0 0 var(--cd-space-2) !important;
    color: var(--cd-color-accent);
    font-size: 1em !important;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}
details.cd-form-section > summary.cd-form-section-heading {
    list-style: none;
    cursor: pointer;
    margin-bottom: 0 !important;
    padding: 4px 0;
    user-select: none;
}
details.cd-form-section > summary.cd-form-section-heading::-webkit-details-marker { display: none; }
details.cd-form-section > summary.cd-form-section-heading::after {
    content: "▸";
    margin-left: auto;
    color: var(--cd-color-muted);
    transition: transform 0.15s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol",
                 "Arial Unicode MS", "DejaVu Sans", Arial, sans-serif;
}
details.cd-form-section[open] > summary.cd-form-section-heading::after {
    transform: rotate(90deg);
}
.cd-summary-hint {
    color: var(--cd-color-muted);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: auto;
    margin-right: 8px;
}
.cd-form-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cd-color-accent);
}
.cd-form-section-body {
    padding-top: var(--cd-space-3);
    border-top: 1px solid var(--cd-color-border);
    margin-top: var(--cd-space-2);
}
.cd-form-subsection-heading {
    margin: var(--cd-space-3) 0 var(--cd-space-2);
    color: var(--cd-color-muted);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Field block — label + control + help text */
.cd-person-form .cd-field {
    margin: 0 0 var(--cd-space-3);
}
.cd-person-form .cd-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--cd-color-text);
}
.cd-person-form .cd-field input[type="text"],
.cd-person-form .cd-field input[type="email"],
.cd-person-form .cd-field input[type="number"],
.cd-person-form .cd-field input[type="tel"],
.cd-person-form .cd-field select,
.cd-person-form .cd-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--cd-space-3);
    border: 1px solid var(--cd-color-border-strong);
    border-radius: var(--cd-radius-small);
    font: inherit;
    color: inherit;
    background: var(--cd-color-bg);
}
.cd-person-form .cd-field input:focus,
.cd-person-form .cd-field select:focus,
.cd-person-form .cd-field textarea:focus {
    outline: 0;
    border-color: var(--cd-color-link);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
.cd-field-help {
    display: block;
    color: var(--cd-color-muted);
    font-size: 0.85em;
    margin-top: 4px;
}
.cd-req {
    color: var(--cd-color-accent);
    font-weight: 700;
    margin-left: 2px;
}
.cd-opt {
    color: var(--cd-color-muted);
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 4px;
}

/* Marital radios row */
.cd-field-radio {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: center;
}
.cd-field-radio-label {
    flex: 1 1 100%;
    margin-bottom: 0;
    font-weight: 500;
}
.cd-field-radio label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    cursor: pointer;
}

/* Checkbox row */
.cd-person-form .cd-field-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
}

/* Birth date row (D / M / Y inputs) */
.cd-person-form .cd-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-2);
}
.cd-person-form .cd-field-inline {
    flex: 1 1 90px;
}
.cd-person-form .cd-field-inline span {
    display: block;
    font-size: 0.85em;
    color: var(--cd-color-muted);
    margin-bottom: 2px;
}

/* Inline validation errors (set by cd-validation.js) */
.cd-person-form .cd-field-error input,
.cd-person-form .cd-field-error select,
.cd-person-form .cd-field-error textarea {
    border-color: var(--cd-color-danger);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.cd-field-error-msg {
    display: block;
    color: var(--cd-color-danger);
    font-size: 0.85em;
    margin-top: 4px;
    font-weight: 500;
}

/* Sticky save bar — full-width primary save + muted cancel link.
   Sticks to the bottom of the viewport on mobile so users always
   see the save action. */
.cd-form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--cd-space-3) 0;
    margin: var(--cd-space-3) 0 0;
    background: var(--cd-color-bg);
    border-top: 1px solid var(--cd-color-border);
}
.cd-form-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    flex: 1 1 60%;
    justify-content: center;
}
.cd-form-cancel { flex-shrink: 0; }
.cd-form-admin-action { margin: var(--cd-space-3) 0 0; }

/* Danger zone — sits OUTSIDE the main form, holds the permanent-delete
   action. Soft red tint + red accents so the visitor visually
   recognises it as destructive. The collapsed-by-default <details>
   already gates the action behind one tap; the inner <button> then
   confirms via a JS confirm dialog. */
.cd-form-section-danger {
    border-color: rgba(185, 28, 28, 0.25);
    background: #fef2f2;
}
.cd-person-form-page .cd-form-section-danger > .cd-form-section-heading {
    color: var(--cd-color-danger) !important;
}
.cd-form-section-danger .cd-form-section-icon { color: var(--cd-color-danger); }
.cd-form-danger-warning {
    color: #991b1b;
    margin: 0 0 var(--cd-space-3);
    line-height: 1.5;
}

/* Danger button — solid red. Same !important guard as cd-button-primary
   so theme link colours can't leak in. */
.cd-button-danger,
a.cd-button-danger,
a.cd-button-danger:link,
a.cd-button-danger:visited,
a.cd-button-danger:hover,
a.cd-button-danger:focus,
a.cd-button-danger:active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff !important;
    background-color: var(--cd-color-danger) !important;
    background-image: none !important;
    border-color: var(--cd-color-danger) !important;
    text-decoration: none !important;
}
.cd-button-danger:hover { filter: brightness(0.95); }

@media (max-width: 600px) {
    .cd-form-section { padding: var(--cd-space-3); }
    .cd-person-form .cd-field input[type="text"],
    .cd-person-form .cd-field input[type="email"],
    .cd-person-form .cd-field input[type="number"],
    .cd-person-form .cd-field input[type="tel"],
    .cd-person-form .cd-field select,
    .cd-person-form .cd-field textarea {
        min-height: 48px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
    .cd-form-save {
        width: 100%;
        flex: 1 1 100%;
    }
    .cd-form-actions-sticky {
        padding: var(--cd-space-2) var(--cd-space-2);
        margin-left: calc(var(--cd-space-4) * -1);
        margin-right: calc(var(--cd-space-4) * -1);
        padding-left: var(--cd-space-4);
        padding-right: var(--cd-space-4);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    }
    .cd-summary-hint { display: none; } /* save vertical room */
}

/* -----------------------------------------------------------------------
   Person details page (templates/people/details.php) — modern redesign
   ----------------------------------------------------------------------- */
.cd-person-details-page {
    /* Wrapper inherits the .cd-person-details outer padding from earlier
       in this file; add no extra here. */
}

.cd-breadcrumb {
    margin: 0 0 var(--cd-space-3);
    font-size: 0.95em;
}
.cd-breadcrumb a {
    color: var(--cd-color-muted);
    text-decoration: none;
}
.cd-breadcrumb a:hover { color: var(--cd-color-accent); text-decoration: underline; }

/* Hero — sits flush with top, accent left rail, gradient background.
   Houses the full name, a row of quick-fact chips, and an Edit button
   for authorised viewers. */
.cd-person-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
    border: 1px solid var(--cd-color-border);
    border-left: 4px solid var(--cd-color-accent);
    border-radius: var(--cd-radius);
    padding: var(--cd-space-3);
    margin: 0 0 var(--cd-space-4);
    box-shadow: var(--cd-shadow-sm);
}
.cd-person-hero-main { flex: 1 1 60%; min-width: 0; }
.cd-person-details-page .cd-person-hero-name {
    /* Theme-default h2 sizing tends to be 1.5–2em which overpowers the
       hero. Specificity bump + !important keep the size dialled down. */
    margin: 0 0 var(--cd-space-2) !important;
    color: var(--cd-color-accent);
    font-size: 1.2em !important;
    font-weight: 700;
    line-height: 1.3;
}
.cd-person-details-page .cd-person-hero-name.cd-deceased {
    color: var(--cd-color-muted);
}

.cd-person-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cd-person-chip {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(185, 28, 28, 0.08);
    color: var(--cd-color-accent);
    border-radius: 999px;
    font-size: 0.88em;
    font-weight: 500;
}

.cd-edit-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cd-edit-icon { display: inline-block; }

/* Sections — quiet headings + content blocks, no per-section card.
   Specificity + !important defeat themes that re-size h3 globally. */
.cd-person-section {
    margin: 0 0 var(--cd-space-4);
}
.cd-person-details-page .cd-person-section-heading {
    margin: 0 0 var(--cd-space-2) !important;
    color: var(--cd-color-accent);
    font-size: 0.95em !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cd-color-border);
    padding-bottom: 4px;
}

/* Field grid — label on the left, value on the right. Each row is a
   <div> wrapping <dt>+<dd>. On desktop, two columns. On mobile, stacked. */
.cd-person-fields {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2);
}
.cd-person-field {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--cd-space-2);
    align-items: baseline;
}
.cd-person-field-label {
    margin: 0;
    color: var(--cd-color-muted);
    font-weight: 600;
    font-size: 0.95em;
}
.cd-person-field-value { margin: 0; }

/* Contact rows — full-width tap targets. */
.cd-contact-section .cd-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cd-contact-row {
    display: block;
}
.cd-contact-link {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: var(--cd-space-2) var(--cd-space-3);
    border-radius: var(--cd-radius-small);
    text-decoration: none !important;
    color: var(--cd-color-text);
    background: var(--cd-color-bg-soft);
    border: 1px solid var(--cd-color-border);
    min-height: 44px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cd-contact-link:hover {
    background: #fff;
    border-color: var(--cd-color-accent);
}
.cd-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--cd-color-accent);
}
.cd-contact-icon-wa { color: #25d366; }
.cd-contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.cd-contact-label {
    color: var(--cd-color-muted);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.cd-contact-value {
    color: var(--cd-color-text);
    font-size: 1em;
    word-break: break-word;
}
.cd-contact-masked .cd-contact-value {
    color: var(--cd-color-muted);
    letter-spacing: 0.05em;
}

/* Plain-prose section bodies (पता / मूल गाँव / पुण्य दिवस). */
.cd-person-address,
.cd-person-original,
.cd-person-punya {
    margin: 0;
    line-height: 1.6;
}

.cd-person-memorial {
    background: var(--cd-color-bg-soft);
    border-left: 3px solid var(--cd-color-muted);
    padding: var(--cd-space-3);
    border-radius: 0 var(--cd-radius-small) var(--cd-radius-small) 0;
}
.cd-person-memorial .cd-person-section-heading {
    color: var(--cd-color-muted);
    border-bottom-color: var(--cd-color-border);
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .cd-person-hero {
        flex-direction: column;
        gap: var(--cd-space-2);
    }
    .cd-edit-button {
        width: 100%;
        justify-content: center;
    }
    .cd-person-field {
        /* Single column on narrow screens — label above value. */
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cd-person-field-label { font-size: 0.85em; }
    .cd-person-details-page .cd-person-hero-name { font-size: 1.1em !important; }
}

/* 12. Villages list — WP-Admin extras (Add / Edit / Delete)
   --------------------------------------------------------------------------
   Visible only when the viewer is a WP-Admin (the template gates the markup
   with `current_user_can('manage_options')`). The icon-only edit + delete
   actions are tucked next to each village name so they don't dominate the
   row, and the "+ नया गाँव जोड़ें" button sits above the table.            */
.cd-villages-admin-bar {
    margin: var(--cd-space-3) 0 var(--cd-space-2);
}

.cd-village-admin-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
    margin-left: var(--cd-space-2);
    vertical-align: middle;
}

.cd-village-admin-edit,
.cd-village-admin-edit:link,
.cd-village-admin-edit:visited,
.cd-village-admin-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: var(--cd-radius-small);
    border: 1px solid var(--cd-color-border);
    background: var(--cd-color-bg-soft);
    color: var(--cd-color-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cd-village-admin-edit:hover,
.cd-village-admin-edit:focus {
    color: var(--cd-color-link) !important;
    border-color: var(--cd-color-link);
    background: #ffffff;
}
.cd-village-admin-delete:hover,
.cd-village-admin-delete:focus {
    color: #ffffff !important;
    background: var(--cd-color-danger);
    border-color: var(--cd-color-danger);
}

.cd-village-admin-delete-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Add / Edit village form — danger zone styling. */
.cd-village-form-page .cd-village-form { margin-top: var(--cd-space-4); }
.cd-village-form-page textarea         { min-height: 100px; }

.cd-village-form-danger {
    margin-top: var(--cd-space-5);
    padding: var(--cd-space-4);
    border: 1px dashed var(--cd-color-danger);
    border-radius: var(--cd-radius);
    background: #fff8f8;
}
.cd-village-form-danger h3 {
    margin: 0 0 var(--cd-space-2);
    color: var(--cd-color-danger);
    font-size: 1.05em;
}
.cd-village-form-danger .cd-village-form-delete {
    margin-top: var(--cd-space-2);
}

/* 13. Identity strip — top of every CD page when logged in
   --------------------------------------------------------------------------
   Shown by Shortcodes::with_strip() on the six public-directory shortcodes
   and by [cd_user_strip] on the /states page. Anonymous visitors get an
   empty string from the renderer, so this block has no anonymous variant. */
.cd-user-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--cd-space-2) var(--cd-space-3);
    padding: var(--cd-space-2) 0;
    margin: 0 0 var(--cd-space-3);
    border-bottom: 1px solid var(--cd-color-border);
    font-size: 0.92em;
    color: var(--cd-color-text);
}
.cd-user-strip-greeting strong { font-weight: 600; }
.cd-user-strip-role {
    color: var(--cd-color-muted);
    margin-left: 2px;
}
.cd-user-strip-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-2);
}
.cd-user-strip-sep {
    color: var(--cd-color-muted);
}
.cd-user-strip a.cd-link,
.cd-user-strip a.cd-link:link,
.cd-user-strip a.cd-link:visited {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
}
.cd-user-strip a.cd-link:hover { border-bottom-style: solid; }

@media (max-width: 600px) {
    .cd-user-strip {
        justify-content: space-between;
        font-size: 0.88em;
    }
    .cd-user-strip-greeting { flex: 1 1 100%; }
}