/*
 * Shared components for the admin pages (pk- classes), from the Prokur design system.
 *
 * This file loads before the site theme, so a theme can override the variables below.
 * The defaults work on the dark grounds of both themes. The pk- prefix keeps the classes
 * apart from Bootstrap, which the app also loads.
 */

:root {
    --surface: rgba(255, 255, 255, 0.04);
    --hover: rgba(255, 255, 255, 0.05);
    --text-muted: rgba(255, 255, 255, 0.7);
    --line: rgba(255, 255, 255, 0.1);
    --control-border: rgba(255, 255, 255, 0.45);
    --placeholder: #6b6b70;
    --primary-hover: var(--brand-rodeo-dust);
    --danger: var(--brand-alert-red-40);
    --radius-pill: 0;
    --max-width-wide: 115rem;
    --tree-width: 640px;
    --control-height: 48px;
    --control-height-sm: 36px;
}

/* Focus: one ring for every control */
.pk-btn:focus-visible,
.pk-icon-btn:focus-visible,
.pk-help:focus-visible,
.pk-field:focus-visible,
.pk-nav a:focus-visible,
.pk-nav button:focus-visible,
.pk-tree-toggle:focus-visible,
.pk-tree-select:focus-visible,
.pk-seg button:focus-visible,
.pk-option:focus-within,
.pk-choice:focus-within {
    outline: 2px solid var(--brand-white);
    outline-offset: 2px;
    box-shadow: none;
}

/* Page */
.pk-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.pk-page-title {
    margin: 0;
    font-family: var(--header-font);
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 400;
}

.pk-section-title {
    margin: 0;
    font-family: var(--header-font);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
}

.pk-description {
    margin: 0.5rem 0 0;
    font-family: var(--header-font);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-muted);
}

.pk-with-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-start;
}

.pk-with-menu > .pk-nav {
    flex: 1 1 240px;
    max-width: 280px;
}

.pk-with-menu > .pk-with-menu__content {
    flex: 999 1 560px;
    min-width: 0;
}

/* Section menu: links (routes) or buttons (state) */
.pk-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pk-nav a,
.pk-nav button {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--app-item-radius);
    background: transparent;
    color: var(--brand-white);
    font-family: var(--header-font);
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pk-nav a:hover,
.pk-nav button:hover {
    background: var(--hover);
    color: var(--brand-white);
}

.pk-nav a.active,
.pk-nav a[aria-current],
.pk-nav button[aria-current] {
    background: var(--brand-grey-N80);
    font-weight: 600;
}

/* Buttons */
.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--control-height);
    margin: 0;
    padding: 0 20px 0 28px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-rodeo-dust);
    color: var(--button-text-color);
    font-family: var(--header-font);
    font-size: 1rem;
    line-height: 1;
    text-transform: var(--button-text-transform);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s;
}

.pk-btn:hover {
    background: var(--primary-hover);
    color: var(--button-text-color);
}

.pk-btn svg {
    flex: none;
}

.pk-btn--secondary {
    background: transparent;
    color: var(--brand-white);
    box-shadow: inset 0 0 0 1px var(--control-border);
    padding: 0 28px;
}

.pk-btn--secondary:hover {
    background: var(--hover);
    color: var(--brand-white);
}

.pk-btn--danger {
    background: transparent;
    color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
    padding: 0 28px;
}

.pk-btn--danger:hover {
    background: rgba(195, 83, 75, 0.12);
    color: var(--danger);
}

.pk-btn--sm {
    height: var(--control-height-sm);
    padding: 0 1rem;
    font-size: 0.875rem;
}

.pk-btn:disabled,
.pk-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.pk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-white);
    cursor: pointer;
}

.pk-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Form actions */
.pk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.pk-actions--split {
    justify-content: space-between;
}

.pk-actions__status {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Fields */
.pk-field-group {
    margin-bottom: 2rem;
}

.pk-label {
    display: block;
    margin: 0 0 10px;
    font-family: var(--header-font);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}

.pk-label-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
}

.pk-label-row .pk-label {
    margin: 0;
}

.pk-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: var(--control-height);
    margin: 0;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--app-item-radius);
    background: var(--brand-white);
    color: var(--brand-black-100);
    font-family: var(--header-font);
    font-size: 1rem;
}

.pk-field::placeholder {
    color: var(--placeholder);
}

textarea.pk-field {
    height: auto;
    min-height: 120px;
    padding: 12px 1rem;
    line-height: 1.5;
    resize: vertical;
}

.pk-field[readonly],
.pk-field:disabled {
    background: var(--brand-grey-N80);
    color: var(--brand-white);
    cursor: not-allowed;
}

.pk-field--short {
    max-width: 280px;
}

.pk-hint {
    margin: 8px 0 0;
    font-family: var(--header-font);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-muted);
}

.pk-error,
.pk-field-group .validation-message {
    margin: 8px 0 0;
    font-family: var(--header-font);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--danger);
}

/* Help: a filled circle at the right end of the label row; its text opens between label and field */
.pk-help {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-grey-N70);
    color: var(--brand-white);
    font-family: var(--header-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.pk-help:hover {
    box-shadow: 0 0 0 2px var(--control-border);
}

.pk-help[aria-expanded="true"] {
    background: var(--brand-rodeo-dust);
    color: var(--button-text-color);
}

.pk-help-text {
    position: relative;
    margin: 0 0 12px;
    padding: 12px 1rem;
    border-radius: var(--app-item-radius);
    background: var(--brand-grey-N80);
    font-family: var(--header-font);
    font-size: 1rem;
    line-height: 1.5rem;
    white-space: pre-line;
}

.pk-help-text::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 8px;
    width: 12px;
    height: 12px;
    background: var(--brand-grey-N80);
    transform: rotate(45deg);
}

/* Checkbox and radio */
.pk-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pk-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--header-font);
    font-size: 1rem;
    line-height: 1.5rem;
    cursor: pointer;
}

.pk-choice input,
.pk-option input {
    accent-color: var(--brand-rodeo-dust);
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: none;
}

.pk-choice__title {
    display: block;
    font-weight: 600;
}

.pk-choice__desc {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-muted);
}

.pk-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.pk-fieldset > legend {
    float: none;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--header-font);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}

/* Form layout */
.pk-form {
    max-width: 880px;
}

.pk-form--narrow {
    max-width: 720px;
}

.pk-form-part {
    border: 0;
    margin: 0;
    padding: 2rem 0;
    border-top: 1px solid var(--line);
    min-width: 0;
}

.pk-form-part > legend {
    float: left;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 0;
    font-family: var(--header-font);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
}

.pk-form-part > legend + * {
    clear: left;
}

.pk-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem 3rem;
}

.pk-form-grid .pk-field-group {
    margin-bottom: 0;
}

.pk-choice-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pk-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--control-height);
    padding: 0 12px;
    margin: 0 -12px;
    border-radius: var(--app-item-radius);
    font-family: var(--header-font);
    font-size: 1rem;
    cursor: pointer;
}

.pk-option:hover {
    background: var(--hover);
}

.pk-option input {
    margin: 0;
}

.pk-option__name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pk-option__name img {
    width: 24px;
    height: 24px;
}

.pk-panel {
    box-sizing: border-box;
    padding: 2rem;
    border-radius: var(--app-item-radius);
    background: var(--surface);
}

.pk-empty {
    padding: 1.25rem;
    border-radius: var(--app-item-radius);
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--header-font);
}

/* Chip */
.pk-chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-family: var(--header-font);
    font-size: 0.75rem;
    line-height: 1;
}

/* Table */
.pk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pk-toolbar__filter {
    flex: 0 1 360px;
}

.pk-toolbar__count {
    margin: 0;
    font-family: var(--header-font);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.pk-table-wrap {
    overflow-x: auto;
}

.pk-table {
    width: 100%;
    border-collapse: collapse;
}

.pk-table th {
    height: 44px;
    padding: 0 12px;
    text-align: left;
    font-family: var(--header-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.pk-table td {
    height: 56px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    font-family: var(--header-font);
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
}

.pk-table tbody tr:hover {
    background: var(--hover);
}

.pk-table .pk-c {
    text-align: center;
}

.pk-table td.pk-muted {
    color: var(--text-muted);
}

.pk-table td.pk-actions-cell {
    position: relative;
    width: 40px;
}

/* The row's details chevron points up while its menu is open */
.pk-actions-cell .pk-icon-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.pk-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-white);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pk-sort svg {
    opacity: 0;
}

th[aria-sort] .pk-sort svg {
    opacity: 1;
}

th[aria-sort="descending"] .pk-sort svg {
    transform: rotate(180deg);
}

.pk-bool {
    display: inline-block;
    vertical-align: middle;
}

.pk-bool__yes {
    fill: var(--brand-rodeo-dust);
}

.pk-bool__check {
    fill: none;
    stroke: var(--button-text-color);
}

.pk-bool__no {
    fill: none;
    stroke: var(--control-border);
}

.pk-service-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pk-service-icons img {
    width: 24px;
    height: 24px;
}

/* Row menu (Ändra, Radera ...) opened from the row's details button */
.pk-row-menu {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 8px;
    border-radius: var(--app-item-radius);
    background: var(--brand-grey-N80);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* .pk-table-wrap scrolls horizontally, which also makes it clip vertically, so a menu
   positioned inside it gets cut off below the last row. Where anchor positioning is
   supported, take the menu out of the wrapper (fixed) and anchor it to the open
   button, flipping it above the button when there is no room below. Only one menu
   is open at a time, so a single anchor name is enough. */
@supports (anchor-name: --pk-row-menu) {
    .pk-actions-cell .pk-icon-btn[aria-expanded="true"] {
        anchor-name: --pk-row-menu;
    }

    .pk-row-menu {
        position: fixed;
        position-anchor: --pk-row-menu;
        top: anchor(bottom);
        right: anchor(right);
        margin-block: 4px;
        position-try-fallbacks: flip-block;
        position-visibility: anchors-visible;
    }
}

.pk-row-menu a,
.pk-row-menu button {
    display: block;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--app-item-radius);
    background: none;
    color: var(--brand-white);
    font-family: var(--header-font);
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pk-row-menu a:hover,
.pk-row-menu button:not(:disabled):hover {
    background: var(--hover);
    color: var(--brand-white);
}

.pk-row-menu button:disabled {
    color: var(--text-muted);
    cursor: default;
}

.pk-row-menu .pk-row-menu__danger {
    color: var(--danger);
}

/* Ordered list rows (Flikar) */
.pk-list {
    border-top: 1px solid var(--line);
}

.pk-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 1rem;
    min-height: 64px;
    padding: 8px 12px 8px 4px;
    border-top: 2px solid transparent;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    user-select: none;
}

.pk-list-row:hover {
    background: var(--hover);
}

.pk-list-row.drag-over {
    border-top-color: var(--brand-rodeo-dust);
}

.pk-list-row__text {
    flex: 1 1 280px;
    min-width: 0;
    font-family: var(--header-font);
}

.pk-list-row__name {
    font-weight: 600;
}

.pk-list-row__desc {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-muted);
}

.pk-list-row__actions {
    display: flex;
    gap: 8px;
}

.pk-grip {
    cursor: grab;
    color: var(--text-muted);
}

.pk-list-drop {
    height: 32px;
    border-top: 2px solid transparent;
}

.pk-list-drop.drag-over {
    border-top-color: var(--brand-rodeo-dust);
}

/* Search */
.pk-search {
    position: relative;
}

.pk-search > svg {
    position: absolute;
    left: 14px;
    top: 14px;
    color: var(--brand-black-100);
    pointer-events: none;
}

.pk-search .pk-field {
    padding-left: 44px;
    padding-right: 44px;
}

.pk-search .pk-search__clear {
    position: absolute;
    right: 4px;
    top: 4px;
    color: var(--brand-black-100);
}

.pk-search .pk-search__clear:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Split view: tree, divider, editor */
.pk-split {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.pk-split__start {
    flex: 0 1 var(--tree-width);
    min-width: 280px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pk-split__end {
    flex: 1 1 380px;
    min-width: 0;
    align-self: flex-start;
}

.pk-divider {
    flex: none;
    align-self: stretch;
    display: flex;
    justify-content: center;
    width: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}

.pk-divider__line {
    position: relative;
    width: 1px;
    background: var(--line);
}

.pk-divider__line::after {
    content: "";
    position: absolute;
    top: 120px;
    left: -2px;
    width: 5px;
    height: 40px;
    border-radius: 3px;
    background: var(--control-border);
}

.pk-divider:hover .pk-divider__line,
.pk-divider:focus-visible .pk-divider__line {
    background: var(--control-border);
}

.pk-divider:hover .pk-divider__line::after,
.pk-divider:focus-visible .pk-divider__line::after {
    background: var(--brand-white);
}

.pk-divider:focus-visible {
    outline: none;
}

/* Config tree */
.pk-tree-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pk-tree {
    max-height: 70vh;
    overflow: auto;
    padding: 8px;
    border-radius: var(--app-item-radius);
    background: var(--surface);
}

.pk-tree-row {
    --depth: 0;
    display: flex;
    align-items: center;
    height: var(--control-height-sm);
    padding-left: calc(8px + var(--depth) * 20px);
    border-radius: var(--app-item-radius);
    background-image: repeating-linear-gradient(to right, transparent 0 2px, var(--line) 2px 3px, transparent 3px 20px);
    background-position: 20px 0;
    background-size: calc(var(--depth) * 20px) 100%;
    background-repeat: no-repeat;
}

.pk-tree-row:hover {
    background-color: var(--hover);
}

.pk-tree-row[data-selected] {
    background-color: var(--brand-grey-N80);
}

.pk-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.pk-tree-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--brand-white);
}

.pk-tree-toggle svg {
    transition: transform 0.15s;
}

.pk-tree-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.pk-tree-spacer {
    flex: none;
    width: 28px;
}

.pk-tree-select {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--control-height-sm);
    margin: 0;
    padding: 0 10px 0 2px;
    border: 0;
    border-radius: var(--app-item-radius);
    background: transparent;
    color: var(--brand-white);
    font-family: var(--header-font);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.pk-tree-key {
    flex: none;
}

.pk-tree-row--branch .pk-tree-key {
    font-weight: 600;
}

.pk-tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--text-muted);
}

.pk-path-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.pk-path {
    margin: 0;
    min-width: 0;
    font-family: var(--header-font);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.pk-path__parent {
    color: var(--text-muted);
}

/* Segmented control */
.pk-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
}

.pk-seg button {
    height: var(--control-height-sm);
    margin: 0;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--brand-white);
    font-family: var(--header-font);
    font-size: 0.875rem;
    cursor: pointer;
}

.pk-seg button[aria-pressed="true"] {
    background: var(--brand-rodeo-dust);
    color: var(--button-text-color);
}

@media (prefers-reduced-motion: reduce) {
    .pk-btn,
    .pk-tree-toggle svg {
        transition: none;
    }
}

/* Headings of the pages inside a section menu (the profile pages) */
.pk-with-menu__content > h2,
.pk-with-menu__content > h3 {
    margin: 0 0 1.5rem;
    font-family: var(--header-font);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
}