/* KVote public/mobile refinements. Loaded after legacy inline page styles. */
:root {
    --kv-touch: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: hidden;
}

img,
canvas,
svg,
video {
    max-width: 100%;
}

button,
input,
select,
textarea,
.btn {
    max-width: 100%;
}

.form-control,
.form-select,
.input-group-text,
.btn {
    min-height: var(--kv-touch);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Landing and voter login */
.kv-wrapper,
.kv-shell,
.kv-main {
    min-width: 0;
}

.kv-main {
    width: min(100%, 1120px);
}

.auth-card,
.kv-login-card-inner {
    border-radius: 1rem;
}

.kv-user-fixed {
    max-width: calc(100vw - 1rem);
}

/* Voting workspace */
.vote-layout {
    padding: .75rem .65rem 4.8rem !important;
}

.vote-shell,
.vote-header,
.vote-main-layout,
.office-content-wrapper,
.office-content-scroll,
.tab-pane-custom {
    min-width: 0;
}

.vote-header-user,
.btn-back,
.office-tabs-header,
.office-tab-link,
.office-pill {
    font-size: .75rem !important;
}

.vote-header-bottom,
.office-meta,
.candidate-toolbar,
.candidate-fullname,
.candidate-nickname,
.candidate-meta-line,
.candidate-status-badge,
.btn-vote,
.view-switch .btn,
.sort-select,
.candidate-filter-input {
    font-size: .8rem !important;
}

.office-tab-link,
.btn-vote,
.btn-back,
.view-switch .btn {
    min-height: var(--kv-touch);
}

.office-tab-link {
    gap: .4rem;
    padding: .55rem .65rem !important;
}

.office-tab-link i {
    font-size: 1.15rem !important;
}

.candidate-card {
    padding: .75rem !important;
}

.candidate-fullname {
    font-size: .9rem !important;
    line-height: 1.25;
}

.candidate-nickname,
.candidate-meta-line {
    line-height: 1.35;
}

.candidate-photo {
    width: 70px !important;
    height: 70px !important;
}

.btn-vote {
    justify-content: center;
    padding: .55rem 1rem !important;
}

.countdown-box {
    right: max(.5rem, env(safe-area-inset-right)) !important;
    bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    min-height: 40px;
    padding: .45rem .75rem !important;
    font-size: .78rem !important;
}

.countdown-label {
    font-size: .75rem !important;
}

.vote-header-right[style*="position:fixed"] {
    left: max(.5rem, env(safe-area-inset-left)) !important;
    bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
}

.vote-header-right[style*="position:fixed"] .btn-back {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .2);
    padding-inline: .75rem !important;
}

/* Analytics/result pages */
.analytic-shell,
.analytic-main,
.analytic-header,
.charts-grid,
.office-card-public,
.chart-card,
.candidate-chart-wrapper {
    min-width: 0;
}

.top-right-controls {
    max-width: 100%;
    flex-wrap: wrap;
}

.analytic-title,
.analytic-subtitle,
.chart-title,
.kpi-label,
.kpi-value,
.kpi-sub {
    overflow-wrap: anywhere;
}

/* Certificates and reports */
.page-shell,
.page-main,
.cert-shell,
.cert-paper,
.cert-inner,
.cert-body,
.cert-left,
.cert-right {
    min-width: 0;
}

.export-buttons {
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    .analytic-header {
        align-items: flex-start !important;
        gap: .75rem;
    }

    .top-right-controls {
        position: static !important;
        width: 100%;
        justify-content: flex-start !important;
    }

    .cert-inner,
    .cert-body,
    .cert-photo-qr-row,
    .cert-sign-blocks {
        gap: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: .92rem !important;
    }

    .kv-wrapper {
        min-height: 100dvh;
        padding: .75rem !important;
    }

    .kv-main {
        margin-block: auto;
    }

    .kv-hero,
    .auth-card,
    .kv-login-card-inner {
        min-height: auto !important;
    }

    .kv-user-fixed {
        position: static !important;
        margin: 0 auto .75rem;
        width: 100%;
        justify-content: center;
    }

    .vote-layout {
        min-height: 100dvh;
        padding: .5rem .45rem 5.2rem !important;
    }

    .vote-header-top {
        align-items: flex-start !important;
        padding: .75rem !important;
        gap: .65rem !important;
    }

    .kiu-logo {
        width: 48px !important;
        height: 48px !important;
    }

    .vote-header-title {
        font-size: 1rem !important;
        line-height: 1.25;
    }

    .vote-header-subtitle {
        font-size: .78rem !important;
        line-height: 1.35;
    }

    .vote-header-bottom {
        padding: .65rem .75rem !important;
        gap: .45rem .8rem !important;
    }

    /* Keep every office in a compact LEFT navigation column on phones/tablets.
       The list participates in the page height, so there is no horizontal tab strip
       and no hidden office that requires sideways scrolling. */
    .vote-main-layout {
        display: flex !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .office-tabs-wrapper {
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        border-right: 1px solid var(--kv-border, #e2e8f0) !important;
        border-bottom: 0 !important;
        display: flex !important;
        position: static !important;
        align-self: stretch;
        z-index: auto !important;
    }

    .office-tabs-header {
        padding: .35rem .25rem .25rem !important;
        gap: .15rem;
        flex-direction: column;
        text-align: center;
        line-height: 1.1;
        font-size: .58rem !important;
    }

    .office-pill {
        min-height: 0 !important;
        font-size: .52rem !important;
        padding: .08rem .28rem !important;
    }

    .office-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: .22rem;
        overflow: visible !important;
        padding: .28rem !important;
        scrollbar-width: none;
    }

    .office-tab-link {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: .3rem .34rem !important;
        gap: .18rem !important;
        border-radius: .42rem !important;
        align-items: flex-start !important;
        box-shadow: 0 2px 5px rgba(15, 23, 42, .08) !important;
    }

    .office-tab-link i {
        flex: 0 0 auto;
        font-size: .78rem !important;
        margin-top: .05rem;
    }

    .office-tab-title {
        min-width: 0;
        text-align: left;
        font-size: .58rem !important;
        line-height: 1.12;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .office-meta {
        display: none !important;
    }

    .office-content-wrapper {
        flex: 1 1 auto !important;
        width: calc(100% - 104px) !important;
        min-width: 0 !important;
        padding: .4rem !important;
        display: flex !important;
    }

    .office-content-scroll {
        overflow: visible !important;
    }

    .tab-pane-custom {
        padding: .75rem !important;
        box-shadow: none !important;
    }

    .candidate-toolbar,
    .candidate-toolbar > div,
    .candidate-toolbar .d-flex {
        align-items: stretch !important;
    }

    .candidate-toolbar .candidate-filter-input,
    .candidate-toolbar .sort-select {
        min-width: 0;
        width: 100%;
    }

    .candidate-container,
    .candidate-container.grid-view {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .65rem !important;
    }

    .candidate-container.list-view .candidate-photo {
        width: 84px !important;
        height: 84px !important;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-content {
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }

    .analytic-main {
        padding-inline: .65rem !important;
    }

    .analytic-header {
        padding: .85rem !important;
    }

    .analytic-title {
        font-size: clamp(1.05rem, 5vw, 1.45rem) !important;
    }

    .nav.analytics-tabs,
    .analytic-main .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .analytic-main .nav-link {
        white-space: nowrap;
        min-height: var(--kv-touch);
    }

    .cand-table-wrapper table {
        min-width: 650px;
    }

    .page-main,
    .page-shell {
        padding-inline: .5rem !important;
    }

    .cert-inner,
    .cert-body,
    .cert-photo-qr-row,
    .cert-sign-blocks {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cert-left,
    .cert-right {
        width: 100% !important;
    }

    .cert-photo,
    .cert-photo-wrap,
    .cert-qr-box {
        margin-inline: auto;
    }
}

@media (max-width: 479.98px) {
    .office-tabs-wrapper {
        flex-basis: 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
    }

    .office-content-wrapper {
        width: calc(100% - 86px) !important;
        padding: .3rem !important;
    }

    .office-tabs-header {
        font-size: .54rem !important;
        padding-inline: .18rem !important;
    }

    .office-tab-link {
        min-height: 31px !important;
        padding: .26rem .28rem !important;
    }

    .office-tab-title {
        font-size: .53rem !important;
    }

    .office-tab-link i {
        font-size: .7rem !important;
    }

    .vote-header-top {
        flex-direction: column !important;
    }

    .vote-header-left,
    .vote-header-right:not([style*="position:fixed"]) {
        width: 100%;
        text-align: left !important;
    }

    .badge-uni {
        white-space: normal !important;
    }

    .candidate-container,
    .candidate-container.grid-view {
        grid-template-columns: 1fr !important;
    }

    .candidate-container.grid-view .candidate-main {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .candidate-container.grid-view .candidate-meta-line {
        text-align: left !important;
    }

    .candidate-container.grid-view .candidate-actions {
        justify-content: stretch !important;
    }

    .candidate-container.grid-view .candidate-actions .btn-vote,
    .candidate-actions .btn-vote {
        width: 100%;
    }

    .candidate-photo-modal {
        width: 96px !important;
        height: 96px !important;
    }

    .countdown-box {
        max-width: calc(100vw - 7.5rem);
    }

    .countdown-label {
        display: none;
    }

    .analytic-main .row > [class*="col-"] {
        min-width: 0;
    }

    .kpi-value {
        font-size: 1.25rem !important;
    }

    .export-buttons .btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}