:root {
    --xgoal-primary: #0376EA;
    --xgoal-secondary: rgba(120, 150, 194, 0.938);
}

.btn-xgoal-primary {
    background-color: var(--xgoal-primary);
    color: white;
    border: none;
}

.btn-xgoal-primary:hover {
    background-color: var(--xgoal-primary);
    color: white;
    border: none;
    transform: scale(1.02);
    transition: 0.2s;
}

.btn-xgoal-secondary {
    background-color: var(--xgoal-secondary);
    color: white;
    border: none;
}

.btn-xgoal-secondary:hover {
    background-color: var(--xgoal-secondary);
    color: white;
    border: none;
    transform: scale(1.02);
    transition: 0.2s;
}

/**
 * "kr-" component set — shared reskin for the collapsible list+subpanel
 * pattern (Results::myResults, Goals::myGoals). Scoped to .kr-card/.kr-modal
 * so it never leaks into the rest of the app. Structural colors (surfaces,
 * borders, text) are drawn from the --x-* tokens defined in
 * webroot/css/xgoal/main.css, which already carry their own body.dark-mode
 * values — this file only needs to consume them, not redefine them, so kr-
 * components re-theme for free instead of staying hardcoded white. One
 * radius token (0.5rem) runs through inputs, buttons, chips and rows; the
 * outer card gets a slightly larger one (0.75rem).
 */

.kr-card {
    border: none;
    border-top: 3px solid var(--primary);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px -10px rgba(15, 23, 42, .15);
    overflow: hidden;
    /* Baseline for any kr- content that isn't inside .kr-table (which sets this
       itself) — widgets built from plain divs (dashboard cards) would otherwise
       inherit the browser's 16px default and read oversized next to every other
       kr- screen. */
    font-size: .875rem;
}

.kr-card>.card-header {
    background: var(--x-surface);
    border-bottom: 1px solid var(--x-border);
    padding: 1rem 1.5rem;
}

.kr-card>.card-header .card-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.kr-card>.card-header .card-title i {
    color: var(--primary);
}

.kr-card>.card-header .card-title .badge {
    background: var(--x-surface-2);
    color: var(--x-text-muted);
    font-weight: 600;
    font-size: .72rem;
    vertical-align: middle;
}

.kr-card .form-control,
.kr-card .input-group-text,
.kr-modal .form-control,
.kr-modal .custom-select {
    border-radius: .5rem;
}

/* Quick-nav tile: a clickable card linking out to a full screen (e.g. "Meus
   Objetivos"), showing a count so it doubles as a mini-stat. Icon color comes
   from the standalone .kr-icon-* modifiers defined further down. */
.kr-nav-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: .5rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kr-nav-card:hover,
.kr-nav-card:focus {
    border-color: var(--primary);
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .25);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}

.kr-nav-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.kr-nav-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.kr-nav-card-count {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--x-text);
    line-height: 1.1;
}

.kr-nav-card-label {
    font-size: .78rem;
    color: var(--x-text-muted);
    font-weight: 600;
}

.kr-nav-card-arrow {
    color: var(--x-text-muted);
    flex: 0 0 auto;
    transition: transform .15s ease, color .15s ease;
}

.kr-nav-card:hover .kr-nav-card-arrow {
    color: var(--primary);
    transform: translateX(2px);
}

/* Filters row: search box + mandala select, side by side on larger screens,
   stacked on mobile. Gap goes on the form itself (the actual flex
   container), not the outer .kr-filters wrapper — putting it on the
   wrapper is a no-op since the wrapper only has one flex child (the form). */
.kr-filters form {
    gap: .5rem;
    align-items: flex-start;
}

.kr-search-filter {
    width: 100%;
    max-width: 220px;
}

/* Mandala filter: keep it from stretching to fill the header, and scale the
   select2 widget down to match the rest of the compact UI (its default
   theme is sized for a regular 1rem body, which reads oversized in here). */
.kr-mandala-filter {
    width: 100%;
    max-width: 280px;
}

.kr-mandala-filter .select2-container {
    font-size: .78rem;
    width: 100% !important;
}

.kr-mandala-filter .select2-container--default .select2-selection--multiple {
    min-height: 31px;
    background-color: var(--x-surface);
    border-color: var(--x-border);
    border-radius: .5rem;
}

.kr-mandala-filter .select2-selection__rendered {
    padding: 2px 4px;
}

.kr-mandala-filter .select2-selection__choice {
    margin: 3px 4px 0 0;
    padding: 0 .4rem;
    font-size: .72rem;
    line-height: 1.6;
    border-radius: .35rem;
    background-color: var(--x-surface-2);
    border-color: var(--x-border);
    color: var(--x-text);
}

.kr-mandala-filter .select2-search__field {
    margin-top: 3px;
    font-size: .78rem;
}

/* List table: hairlines instead of a full grid, generous padding */
.kr-table {
    margin-bottom: 0;
    font-size: .875rem;
}

.kr-table>thead>tr>th {
    border: none;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--x-text-muted);
    padding: 1rem 1.25rem .5rem;
}

.kr-row>td {
    border-top: 1px solid var(--x-border);
    padding: .75rem 1.25rem;
    vertical-align: middle;
    transition: background-color .15s ease;
}

.kr-row:hover>td {
    background-color: var(--x-surface-2);
}

.kr-alias {
    display: inline-block;
    background: var(--x-surface-2);
    color: var(--x-text);
    font-weight: 700;
    font-size: .72rem;
    border-radius: .5rem;
    padding: .25rem .6rem;
}

.kr-role {
    display: inline-block;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .68rem;
    padding: .25rem .65rem;
}

/* Translucent brand tint instead of a solid pale-blue chip — an alpha
   overlay reads correctly on both a white and a near-black surface, so it
   doesn't need a separate body.dark-mode rule. */
.kr-role--owner {
    background: var(--x-primary-alpha, rgba(3, 118, 234, .1));
    color: var(--primary);
}

.kr-role--shared {
    background: var(--x-surface-2);
    color: var(--x-text-muted);
}

.kr-result-progress {
    min-width: 140px;
}

/* Toggle: icon-only, rounded square (not a circle), rotates in place */
.kr-toggle {
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    border: 1px solid var(--x-border);
    background: var(--x-surface);
    color: var(--x-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.kr-toggle:hover {
    background: var(--x-surface-2);
    color: var(--x-text);
}

.kr-toggle.is-open {
    transform: rotate(90deg);
    color: var(--primary);
    border-color: var(--primary);
}

/* Icon-only row actions */
.kr-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--x-text-muted);
    transition: background-color .15s ease, color .15s ease;
}

.kr-icon-btn:hover {
    background: var(--x-surface-2);
    color: #1e7e34;
}

/* Text-only secondary action, quiet ghost button */
.kr-btn-ghost {
    display: inline-block;
    border: 1px solid var(--x-border);
    border-radius: .5rem;
    padding: .3rem .8rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--x-text-muted);
    background: var(--x-surface);
    transition: background-color .15s ease, border-color .15s ease;
}

.kr-btn-ghost:hover {
    background: var(--x-surface-2);
    border-color: var(--x-text-muted);
    color: var(--x-text);
    text-decoration: none;
}

/* Quiet row of shortcuts to Mandalas::models (mine/shared/public), surfaced
   above the "Seus Objetivos"/"Seus Resultados" quick-nav cards so the more
   frequent goal/result navigation still reads as the primary action. */
.kr-model-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: .85rem;
}

/* Subpanel: floating rows instead of a nested grid */
.kr-subpanel {
    background: var(--x-surface-2);
    padding: .25rem 1.25rem 1rem 2.75rem;
}

.kr-metric-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--x-surface);
    border: 1px solid var(--x-border);
    border-left: 4px solid transparent;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-top: .65rem;
}

/* Optional status accent — a colored left edge on a kr-metric-row, driven by
   the same threshold colorClass ('bg-success'/'bg-warning'/'bg-danger') already
   computed for the row's progress bar. Add via class="kr-metric-row kr-accent-X". */
.kr-metric-row.kr-accent-success {
    border-left-color: var(--success);
}

.kr-metric-row.kr-accent-warning {
    border-left-color: var(--warning);
}

.kr-metric-row.kr-accent-danger {
    border-left-color: var(--danger);
}

.kr-metric-info {
    flex: 1 1 40%;
    min-width: 0;
}

.kr-metric-meta {
    flex: 0 0 auto;
    color: var(--x-text-muted);
    font-size: .75rem;
    white-space: nowrap;
}

.kr-metric-progress {
    flex: 1 1 220px;
    min-width: 160px;
}

.kr-metric-action {
    flex: 0 0 auto;
}

.kr-empty {
    background: var(--x-surface);
    border: 1px solid var(--x-border);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-top: .65rem;
    color: var(--x-text-muted);
    font-size: .8rem;
}

/* Dashboard widget sections (Precisa de Atenção, Ranking de Resultados, ...):
   an icon chip + label heading, used instead of a bare Bootstrap h5/h6 so the
   size stays part of the kr- scale instead of Bootstrap's fixed rem sizes. */
.kr-section {
    margin-bottom: 1.75rem;
}

.kr-section-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
}

.kr-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex: 0 0 auto;
}

/* Icon-chip color modifiers — standalone (not scoped to .kr-section-icon) so
   they also work on .kr-nav-card-icon and any other chip-shaped element.
   Backgrounds are translucent (alpha over currentColor's surface) instead of
   solid pale tints, so they read correctly on both a white and a near-black
   surface without a separate body.dark-mode background rule. The warning
   text is the exception — see the body.dark-mode block near the bottom of
   this file: #b45309 was picked for contrast on a pale-yellow *light* tint
   and goes muddy on the dark tint, so it needs a lighter dark-mode value. */
.kr-icon-warning {
    background: rgba(245, 158, 11, .15);
    color: #b45309;
}

.kr-icon-primary {
    background: var(--x-primary-alpha, rgba(3, 118, 234, .1));
    color: var(--primary);
}

.kr-icon-success {
    background: rgba(40, 167, 69, .15);
    color: var(--success);
}

.kr-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--x-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Ranking (Melhores/Piores): a small "Best"/"Worst" column label, a rounded
   rank badge (1º/2º/...) and a large colored score take over the job the
   thin progress bar used to do alone — legible at a glance instead of an 8px
   sliver. */
.kr-rank-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}

.kr-rank-label--best {
    color: var(--success);
}

.kr-rank-label--worst {
    color: var(--danger);
}

.kr-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--x-surface-2);
    color: var(--x-text-muted);
    font-size: .68rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.kr-rank-percent {
    font-size: 1.15rem;
    font-weight: 700;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .kr-subpanel {
        padding-left: 1.25rem;
    }

    .kr-metric-row {
        flex-wrap: wrap;
    }

    .kr-metric-progress {
        flex-basis: 100%;
    }
}

/* Shared modal polish (Metrics/add, fill, fill_denied) */
.kr-modal .modal-content {
    border: none;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 20px 44px -22px rgba(15, 23, 42, .35);
}

.kr-modal .modal-header {
    border-bottom: 1px solid var(--x-border);
}

.kr-modal .modal-footer {
    border-top: 1px solid var(--x-border);
}

.kr-modal .btn {
    border-radius: .5rem;
}

@media (prefers-reduced-motion: reduce) {

    .kr-toggle,
    .kr-icon-btn,
    .kr-btn-ghost,
    .kr-nav-card,
    .kr-nav-card-arrow {
        transition: none;
    }

    .kr-nav-card:hover {
        transform: none;
    }
}

/* The rest of the kr- palette is theme-adaptive through the --x-* tokens
   above (see webroot/css/xgoal/main.css for their body.dark-mode values).
   These two are the exceptions: both use a fixed, non-token accent color
   chosen for contrast against a *light* background, which goes muddy/low-
   contrast on a dark one — so they get an explicit lighter value here,
   matching AdminLTE's own convention of scoping overrides to body.dark-mode. */
body.dark-mode .kr-icon-warning {
    color: #fbbf24;
}

body.dark-mode .kr-icon-btn:hover {
    color: #34d399;
}