/* ==========================================================================
   Community Voice – Frontend Styles
   ========================================================================== */

:root {
    --cv-primary:      #2d6a4f;
    --cv-primary-dark: #1b4332;
    --cv-accent:       #52b788;
    --cv-hot:          #e63946;
    --cv-warn:         #f4a261;
    --cv-info:         #457b9d;
    --cv-bg:           #f8f9fa;
    --cv-card-bg:      #ffffff;
    --cv-border:       #dee2e6;
    --cv-text:         #212529;
    --cv-muted:        #6c757d;
    --cv-radius:       8px;
    --cv-shadow:       0 2px 8px rgba(0,0,0,.08);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.cv-btn {
    display:          inline-block;
    padding:          .5em 1.2em;
    background:       var(--cv-primary);
    color:            #fff !important;
    border:           none;
    border-radius:    var(--cv-radius);
    cursor:           pointer;
    font-size:        .9rem;
    text-decoration:  none;
    transition:       background .2s;
}
.cv-btn:hover { background: var(--cv-primary-dark); }
.cv-btn--sm   { padding: .35em .9em; font-size: .8rem; }
.cv-btn--outline {
    background: transparent;
    border: 2px solid var(--cv-primary);
    color: var(--cv-primary) !important;
}
.cv-btn--outline:hover { background: var(--cv-primary); color: #fff !important; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */

.cv-dashboard__header { margin-bottom: 1.5rem; }
.cv-dashboard__subtitle { color: var(--cv-muted); }

.cv-dashboard__filters {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .5rem;
    margin-bottom: 1.5rem;
}

.cv-filter-btn {
    padding:       .4em .9em;
    border:        2px solid var(--cv-border);
    border-radius: 2em;
    background:    #fff;
    cursor:        pointer;
    font-size:     .85rem;
    transition:    all .2s;
}
.cv-filter-btn--active,
.cv-filter-btn:hover {
    border-color: var(--cv-primary);
    background:   var(--cv-primary);
    color:        #fff;
}

.cv-dashboard__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.25rem;
}

/* ── Topic Card ──────────────────────────────────────────────────────────── */

.cv-topic-card {
    background:    var(--cv-card-bg);
    border:        1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    box-shadow:    var(--cv-shadow);
    overflow:      hidden;
    transition:    transform .15s, box-shadow .15s;
}
.cv-topic-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.cv-topic-card--hot  { border-top: 3px solid var(--cv-hot); }
.cv-topic-card--mine { border-left: 3px solid var(--cv-accent); }

.cv-topic-card__thumb img { width: 100%; height: 160px; object-fit: cover; }

.cv-topic-card__body   { padding: 1rem; }
.cv-topic-card__badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.cv-topic-card__title  { margin: 0 0 .5rem; font-size: 1rem; }
.cv-topic-card__title a { color: var(--cv-text); text-decoration: none; }
.cv-topic-card__title a:hover { color: var(--cv-primary); }
.cv-topic-card__excerpt { font-size: .85rem; color: var(--cv-muted); margin-bottom: .8rem; }

.cv-topic-card__stats {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .5rem;
    font-size:     .8rem;
    margin-bottom: .8rem;
}
.cv-stat       { color: var(--cv-muted); }
.cv-stat--muted { opacity: .7; }

/* ── Badge ───────────────────────────────────────────────────────────────── */

.cv-badge {
    display:       inline-block;
    padding:       .2em .6em;
    background:    var(--cv-bg);
    border:        1px solid var(--cv-border);
    border-radius: 2em;
    font-size:     .75rem;
    color:         var(--cv-muted);
}
.cv-badge--hot { background: #fdecea; border-color: var(--cv-hot); color: var(--cv-hot); }

/* ── Poll ────────────────────────────────────────────────────────────────── */

.cv-poll {
    background:    var(--cv-card-bg);
    border:        1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    padding:       1.25rem;
    margin:        1.5rem 0;
    box-shadow:    var(--cv-shadow);
}
.cv-poll__title { margin-top: 0; }

.cv-poll__options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }

.cv-poll__option {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    padding:       .6rem .9rem;
    border:        2px solid var(--cv-border);
    border-radius: var(--cv-radius);
    cursor:        pointer;
    transition:    all .15s;
}
.cv-poll__option:hover            { border-color: var(--cv-accent); background: #f0faf4; }
.cv-poll__option--selected        { border-color: var(--cv-primary); background: #e8f5ee; font-weight: 600; }

.cv-poll__footer {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    margin-bottom: .75rem;
}
.cv-poll__anon       { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--cv-muted); cursor: pointer; }
.cv-poll__current-vote { font-size: .85rem; color: var(--cv-muted); margin: 0; }

/* Results */
.cv-poll__results  { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cv-border); }
.cv-poll__results h4, .cv-poll__breakdown h4 { margin: 0 0 .75rem; font-size: .95rem; }
.cv-poll__total    { font-weight: normal; color: var(--cv-muted); font-size: .85rem; }

.cv-poll__result-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    margin-bottom: .5rem;
    font-size:   .9rem;
}
.cv-poll__result-row--sm { font-size: .82rem; }

.cv-poll__result-label { min-width: 140px; }
.cv-poll__bar-wrap     { flex: 1; background: var(--cv-bg); border-radius: 4px; height: 14px; overflow: hidden; }
.cv-poll__bar          { height: 100%; background: var(--cv-accent); border-radius: 4px; transition: width .4s ease; }
.cv-poll__bar--street  { background: var(--cv-info); }
.cv-poll__result-pct   { min-width: 40px; text-align: right; font-weight: 600; }
.cv-poll__result-count { color: var(--cv-muted); font-size: .8rem; min-width: 40px; }

/* Street breakdown */
.cv-poll__breakdown      { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cv-border); }
.cv-poll__breakdown-note { font-size: .8rem; color: var(--cv-muted); margin-bottom: .75rem; }
.cv-poll__street         { margin-bottom: 1rem; }
.cv-poll__street-total   { font-size: .8rem; color: var(--cv-muted); }
.cv-poll__street-bars    { margin-top: .3rem; }

/* Notices */
.cv-poll__notice { padding: .8rem 1rem; border-radius: var(--cv-radius); margin: .75rem 0; }
.cv-notice--warning { background: #fff8e6; border: 1px solid var(--cv-warn); }
.cv-notice--info    { background: #e8f4fd; border: 1px solid var(--cv-info); }
.cv-poll__notice p  { margin: 0; font-size: .9rem; }

/* Message */
.cv-poll__message {
    margin-top:    .75rem;
    padding:       .6rem .9rem;
    border-radius: var(--cv-radius);
    font-size:     .88rem;
}
.cv-msg--success { background: #d4edda; color: #155724; }
.cv-msg--error   { background: #f8d7da; color: #721c24; }

/* ── Profile ─────────────────────────────────────────────────────────────── */

.cv-profile__verification {
    border-radius: var(--cv-radius);
    padding:       1rem 1.25rem;
    margin-bottom: 1.5rem;
    border:        1px solid var(--cv-border);
}
.cv-verification--level-0 { background: #f8f9fa; }
.cv-verification--level-1 { background: #fff8e6; border-color: var(--cv-warn); }
.cv-verification--level-2 { background: #d4edda; border-color: #28a745; }
.cv-verification--level-3 { background: #e8d5f5; border-color: #6f42c1; }

.cv-verification__status { display: flex; align-items: flex-start; gap: .75rem; }
.cv-verification__icon   { font-size: 1.8rem; line-height: 1; }
.cv-verification__hint   { margin: .25rem 0 0; font-size: .85rem; color: var(--cv-muted); }

.cv-form__section  { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--cv-border); }
.cv-form__section h3 { margin-top: 0; }
.cv-form__row      { margin-bottom: 1rem; }
.cv-form__row label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.cv-form__row--half   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cv-form__row--quarter { max-width: 140px; }
.cv-form__check    { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; cursor: pointer; font-size: .9rem; }

.cv-input {
    width:         100%;
    padding:       .5rem .75rem;
    border:        1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    font-size:     .9rem;
    box-sizing:    border-box;
}
.cv-input:focus { border-color: var(--cv-primary); outline: none; box-shadow: 0 0 0 3px rgba(45,106,79,.15); }

.cv-form__message { padding: .6rem .9rem; border-radius: var(--cv-radius); font-size: .88rem; margin-top: .75rem; }

/* Interests */
.cv-profile__interests  { margin-top: 2rem; }
.cv-interests__grid     { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.cv-interest-item {
    padding:       .5em 1em;
    border:        2px solid var(--cv-border);
    border-radius: 2em;
    cursor:        pointer;
    font-size:     .88rem;
    transition:    all .15s;
}
.cv-interest-item input         { display: none; }
.cv-interest-item:hover         { border-color: var(--cv-accent); }
.cv-interest-item--selected     { background: var(--cv-primary); border-color: var(--cv-primary); color: #fff; }

/* Vote history table */
.cv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cv-table th, .cv-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--cv-border); text-align: left; }
.cv-table th { background: var(--cv-bg); font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .cv-form__row--half { grid-template-columns: 1fr; }
    .cv-poll__result-label { min-width: 90px; font-size: .8rem; }
    .cv-dashboard__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Survey styles
   ========================================================================== */

.cv-survey {
    background:    var(--cv-card-bg);
    border:        1px solid var(--cv-border);
    border-radius: var(--cv-radius);
    padding:       1.5rem;
    margin:        1.5rem 0;
    box-shadow:    var(--cv-shadow);
}
.cv-survey__title { margin-top: 0; }

/* Questions */
.cv-survey__question     { margin-bottom: 1.75rem; }
.cv-survey__qlabel       { font-weight: 600; margin: 0 0 .75rem; font-size: .95rem; }
.cv-survey__hint         { display: inline-block; margin-left: .5rem; font-weight: normal; font-size: .8rem; color: var(--cv-muted); }

/* Location display */
.cv-survey__location-display { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.cv-survey__location-value   { font-size: 1rem; color: var(--cv-primary); font-weight: 600; }
.cv-survey__location-note    { font-size: .8rem; color: var(--cv-muted); }

/* Options — radio and checkbox share base style */
.cv-survey__options        { display: flex; flex-direction: column; gap: .5rem; }
.cv-survey__options--multi { gap: .4rem; }

.cv-survey__option {
    display:       flex;
    align-items:   center;
    gap:           .65rem;
    padding:       .65rem 1rem;
    border:        2px solid var(--cv-border);
    border-radius: var(--cv-radius);
    cursor:        pointer;
    transition:    all .15s;
    font-size:     .92rem;
    user-select:   none;
}
.cv-survey__option input     { flex-shrink: 0; }
.cv-survey__option:hover     { border-color: var(--cv-accent); background: #f0faf4; }
.cv-survey__option--selected { border-color: var(--cv-primary); background: #e8f5ee; font-weight: 600; }
.cv-survey__option--check    { border-radius: calc( var(--cv-radius) / 1.5 ); }

/* Footer */
.cv-survey__footer {
    display:       flex;
    align-items:   flex-start;
    gap:           1.25rem;
    flex-wrap:     wrap;
    padding-top:   1rem;
    border-top:    1px solid var(--cv-border);
    margin-top:    .5rem;
}
.cv-survey__anon        { font-size: .85rem; color: var(--cv-muted); cursor: pointer; display: flex; align-items: flex-start; gap: .4rem; max-width: 420px; }
.cv-survey__anon small  { display: block; margin-top: .2rem; font-size: .78rem; }
.cv-survey__update-note { font-size: .85rem; color: var(--cv-muted); margin: .75rem 0 0; }

/* Notices */
.cv-survey__notice { padding: .8rem 1rem; border-radius: var(--cv-radius); margin: .75rem 0; }
.cv-notice--warning { background: #fff8e6; border: 1px solid var(--cv-warn); }
.cv-notice--info    { background: #e8f4fd; border: 1px solid var(--cv-info); }
.cv-survey__notice p { margin: 0; font-size: .9rem; }

/* Message */
.cv-survey__message {
    margin-top:    .75rem;
    padding:       .6rem .9rem;
    border-radius: var(--cv-radius);
    font-size:     .88rem;
}
.cv-msg--success { background: #d4edda; color: #155724; }
.cv-msg--error   { background: #f8d7da; color: #721c24; }

/* ── Results ─────────────────────────────────────────────────────────────── */

.cv-survey__results         { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--cv-border); }
.cv-survey__results-heading { margin: 0 0 1.25rem; font-size: 1.05rem; }

.cv-results__block          { margin-bottom: 1.75rem; }
.cv-results__qlabel         { font-weight: 600; margin: 0 0 .5rem; font-size: .92rem; color: var(--cv-text); }
.cv-results__total          { font-size: .82rem; color: var(--cv-muted); margin: 0 0 .75rem; }

.cv-results__bars    { display: flex; flex-direction: column; gap: .45rem; }
.cv-results__bars--sm { gap: .35rem; margin-top: .4rem; }

.cv-results__row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .88rem;
}
.cv-results__label   { min-width: 200px; flex-shrink: 0; font-size: .85rem; }
.cv-results__bar-wrap { flex: 1; background: var(--cv-bg); border-radius: 4px; height: 16px; overflow: hidden; }
.cv-results__bar      { height: 100%; border-radius: 4px; transition: width .4s ease; }
.cv-results__bar--location { background: var(--cv-info); }
.cv-results__bar--opinion  { background: var(--cv-primary); }
.cv-results__bar--multi    { background: var(--cv-accent); }
.cv-results__bar--street   { background: var(--cv-warn); }
.cv-results__pct     { min-width: 42px; text-align: right; font-weight: 600; font-size: .85rem; }
.cv-results__count   { color: var(--cv-muted); font-size: .8rem; min-width: 36px; }

/* Cross-tab stacked bar */
.cv-results__crosstab          { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--cv-border); }
.cv-results__crosstab-heading  { font-size: .88rem; font-weight: 600; margin: 0 0 .75rem; color: var(--cv-muted); }
.cv-results__crosstab-grid     { display: flex; flex-direction: column; gap: .5rem; }

.cv-crosstab__row    { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.cv-crosstab__zone   { min-width: 220px; flex-shrink: 0; }
.cv-crosstab__bar-wrap {
    flex:           1;
    height:         22px;
    border-radius:  4px;
    overflow:       hidden;
    display:        flex;
    background:     var(--cv-bg);
}
.cv-crosstab__segment { height: 100%; transition: width .4s ease; }
.cv-crosstab__total   { min-width: 28px; text-align: right; color: var(--cv-muted); }

.cv-crosstab__legend       { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .75rem; }
.cv-crosstab__legend-item  { display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.cv-crosstab__swatch       { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* Street breakdown */
.cv-results__streets    { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--cv-border); }
.cv-results__streets h5 { margin: 0 0 .75rem; font-size: .9rem; }
.cv-results__streets small { font-weight: normal; color: var(--cv-muted); }
.cv-results__street     { margin-bottom: 1rem; }
.cv-results__street-total { font-size: .8rem; color: var(--cv-muted); margin-left: .4rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .cv-results__label   { min-width: 110px; font-size: .78rem; }
    .cv-crosstab__zone   { min-width: 110px; font-size: .78rem; }
    .cv-survey__footer   { flex-direction: column; }
}

/* ── Address detail-level picker ─────────────────────────────────────────── */

.cv-detail-level-picker { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

.cv-detail-option {
    display:       flex;
    flex-direction: column;
    padding:       .7rem 1rem;
    border:        2px solid var(--cv-border);
    border-radius: var(--cv-radius);
    cursor:        pointer;
    transition:    all .15s;
    gap:           .15rem;
}
.cv-detail-option input[type="radio"] { display: none; }
.cv-detail-option:hover               { border-color: var(--cv-accent); background: #f0faf4; }
.cv-detail-option--selected           { border-color: var(--cv-primary); background: #e8f5ee; }

.cv-detail-option__title { font-weight: 600; font-size: .92rem; }
.cv-detail-option__desc  { font-size: .82rem; color: var(--cv-muted); }

.cv-address-fields { margin-top: .75rem; }

.cv-form__verified-note {
    font-size:   .85rem;
    color:       #155724;
    background:  #d4edda;
    padding:     .5rem .75rem;
    border-radius: var(--cv-radius);
    margin-top:  .5rem;
}

/* Zone select in survey */
.cv-input--zone { width: 100%; max-width: 420px; }
.cv-survey__location-hint { font-size: .83rem; color: var(--cv-muted); margin: .4rem 0 0; }

/* ── Cross-tab locality and ambiguous rows ───────────────────────────────── */
.cv-crosstab__row--locality  { opacity:.85; border-top: 1px dashed var(--cv-border); margin-top:.25rem; padding-top:.25rem; }
.cv-crosstab__row--ambiguous { opacity:.8; }
.cv-crosstab__zone-tag {
    display:       inline-block;
    font-size:     .7rem;
    padding:       .1em .4em;
    border-radius: 2em;
    background:    #e9ecef;
    color:         #666;
    margin-left:   .4rem;
    vertical-align: middle;
}
.cv-crosstab__zone-tag--warn { background:#fff3cd;color:#856404; }
.cv-crosstab__locality-note  { font-size:.78rem;color:var(--cv-muted);margin:.75rem 0 0;font-style:italic; }

/* Auto-matched location display in survey */
.cv-survey__location-auto { padding:.5rem 0; }
.cv-survey__location-value         { font-size:.95rem;color:var(--cv-primary);font-weight:600; }
.cv-survey__location-value--pending { color:var(--cv-muted); }
.cv-survey__location-note          { display:block;font-size:.8rem;color:var(--cv-muted);margin-top:.2rem; }
.cv-survey__location-note--warn    { color:var(--cv-warn); }