@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* Drag handle used on Home grid rows and the ToolDetail action column —
   dragged onto a list in the Tool-lists sidebar to add the tool. */
.tool-drag-handle {
    cursor: grab;
    color: #8c8c8c;
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.375rem;
    user-select: none;
}
.tool-drag-handle:hover { color: #1890ff; }
.tool-drag-handle:active { cursor: grabbing; }

/* Drop-target highlight on a list card in the Tool-lists sidebar while a tool is being dragged over it. */
.tl-card.tl-drop-hover {
    border-color: #1890ff !important;
    box-shadow: 0 0 0 0.125rem rgb(24 144 255 / 20%);
    background: #e6f7ff;
}

/* Hide Ant Design Blazor InputNumber up/down handler arrows */
.no-arrows .ant-input-number-handler-wrap {
    display: none !important;
}

/* Reclaim the space that was reserved for the handlers */
.no-arrows.ant-input-number,
.no-arrows .ant-input-number-input-wrap {
    padding-right: 0 !important;
}

.table-auto-width .ant-table,
.table-auto-width .ant-table-container,
.table-auto-width table {
    width: auto !important;
}

.table-auto-width {
    display: inline-block; /* shrink to content */
}

/* Hide browser default "Keine ausgewählt" text on file inputs */
input[type="file"] {
    font-size: 0;
    color: transparent;
}

input[type="file"]::file-selector-button {
    font-size: 0.875rem;
    color: initial;
}

/* ── AntDesign Menu overrides for top navigation bar ───────────────── */

/* Keep dropdown popover menus in normal light-theme colors.
   Listed first so the higher-specificity .top-nav-menu.ant-menu-light
   rules below remain in source-order ascending specificity. */
.ant-menu-submenu-popup .ant-menu-item,
.ant-menu-submenu-popup .ant-menu-submenu-title {
    color: rgb(0 0 0 / 85%) !important;
}

/* Make light menu text white on the #5887ad background */
.top-nav-menu.ant-menu-light .ant-menu-submenu-title,
.top-nav-menu.ant-menu-light .ant-menu-item {
    color: rgb(255 255 255 / 85%) !important;
}

.top-nav-menu.ant-menu-light .ant-menu-submenu-title:hover,
.top-nav-menu.ant-menu-light .ant-menu-item:hover,
.top-nav-menu.ant-menu-light .ant-menu-submenu-active > .ant-menu-submenu-title,
.top-nav-menu.ant-menu-light .ant-menu-submenu-open > .ant-menu-submenu-title {
    color: #fff !important;
}

/* Transparent background so #5887ad shows through */
.top-nav-menu.ant-menu-light {
    background: transparent !important;
    border-bottom: none !important;
}

/* Remove bottom highlight bar on active horizontal items */
.top-nav-menu.ant-menu-horizontal > .ant-menu-item-selected,
.top-nav-menu.ant-menu-horizontal > .ant-menu-submenu-selected {
    border-bottom-color: transparent !important;
}

/* ── Loc component in-place edit icon ──────────────────────────────── */

.loc-edit-icon {
    font-size: 0.75em;
    color: var(--warning);
    cursor: pointer;
    margin-left: 0.25rem;
    opacity: 0.7;
}

.loc-edit-icon:hover {
    opacity: 1;
}

/* Tool-detail tab-progress cells listed first so the higher-specificity
   .tool-detail-tabs > .ant-tabs-nav .ant-tabs-tab .ant-progress rule
   below remains in ascending source-order specificity. */
.tool-detail-tab-progress {
    display: flex;
    width: 100%;
    padding: 0;
    margin-bottom: -0.375rem;
}

.tool-detail-tab-progress-cell {
    flex: 1 1 0;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
}

.tool-detail-tab-progress-cell .ant-progress {
    width: 100%;
    margin: 0;
    line-height: 1;
}

.tool-detail-tab-progress-cell .ant-progress-line {
    position: relative;
    line-height: 1;
}

.tool-detail-tab-progress-cell .ant-progress-outer {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

.tool-detail-tab-progress-cell .ant-progress-inner {
    height: 1.375rem;
    border-radius: 0.125rem;
}

.tool-detail-tab-progress-cell .ant-progress-bg {
    height: 1.375rem !important;
    border-radius: 0.125rem;
}

.tool-detail-tab-progress-cell .ant-progress-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 0 0.125rem #fff, 0 0 0.125rem #fff;
}

.tool-detail-tabs {
    width: 100%;
}

.tool-detail-tabs > .ant-tabs-nav {
    width: 100%;
}

.tool-detail-tabs > .ant-tabs-nav .ant-tabs-nav-wrap,
.tool-detail-tabs > .ant-tabs-nav .ant-tabs-nav-list {
    display: flex;
    width: 100%;
}

.tool-detail-tabs > .ant-tabs-nav .ant-tabs-tab {
    flex: 1 1 0;
    justify-content: center;
    margin: 0 !important;
    text-align: center;
}

.tool-detail-tabs > .ant-tabs-nav .ant-tabs-tab .ant-progress {
    width: 100%;
    margin-top: 0.25rem;
}

/* Tool-detail scheme picker — 50% larger scheme images than CreateNewMasterDataModal */
.td-scheme-picker .cnmd-scheme-image {
    height: 18.75rem;
}

.td-scheme-picker .cnmd-scheme-image img {
    max-height: 18.75rem;
}

/* Tool-detail image carousel */
.tool-detail-carousel-wrapper {
    position: relative;
    height: 16.875rem;
}

.tool-detail-carousel-wrapper .ant-carousel {
    margin: 0 1.75rem;
}

.tool-detail-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    font-size: 1.125rem;
    color: rgb(0 0 0 / 45%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgb(0 0 0 / 6%);
}

.tool-detail-carousel-arrow:hover {
    color: rgb(0 0 0 / 85%);
    background: rgb(0 0 0 / 12%);
}

.tool-detail-carousel-arrow-left {
    left: 0;
}

.tool-detail-carousel-arrow-right {
    right: 0;
}

.tool-detail-carousel-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15.625rem;
    padding: 0.25rem;
}

/* ===== Quality Seal expert page ===== */
.qs-page {
    display: flex;
    height: calc(100vh - 8.75rem);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 0;
}

.qs-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fafafa;
    position: relative;
}

.qs-sidebar-visible {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 12.5rem;
    border-right: 0.0625rem solid #e8e8e8;
}

.qs-sidebar-collapsed {
    flex: 0 0 0;
    max-width: 0;
    min-width: 0;
    border-right: none;
}

.qs-resizer {
    position: absolute;
    top: 0;
    right: -0.1875rem;
    width: 0.375rem;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    background: transparent;
    transition: background 0.15s ease;
}

.qs-resizer:hover,
.qs-resizer:active {
    background: rgb(24 144 255 / 40%);
}

.qs-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #1890ff;
    color: white;
    font-weight: 600;
    flex: 0 0 auto;
}

/* Title + backlog counter as one group, so the collapse chevron stays hard right and this side
   shrinks instead of pushing it out of the narrow sidebar. */
.qs-sidebar-heading {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.qs-sidebar-title {
    font-size: 0.875rem;
    white-space: nowrap;
}

.qs-sidebar-count {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.qs-collapse-button {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.qs-collapse-button:hover {
    background: rgb(255 255 255 / 15%);
    border-radius: 0.25rem;
}

.qs-content {
    flex: 1 1 auto;
    min-width: 0;
    width: 0;
    position: relative;
    overflow: auto;
    padding: 0.5rem 1rem;
}

.qs-expand-tab {
    position: absolute;
    top: 0.5rem;
    left: 0;
    background: #1890ff;
    color: white;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    border-radius: 0 0.25rem 0.25rem 0;
    z-index: 10;
}

.qs-expand-tab:hover {
    background: #40a9ff;
}

.qs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

/* Sidebar list */
.qs-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.qs-list-controls {
    padding: 0.5rem;
    border-bottom: 0.0625rem solid #e8e8e8;
    background: #fff;
    flex: 0 0 auto;
}

.qs-search-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
    box-sizing: border-box;
}

.qs-filter-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.qs-filter-row > .ant-select {
    flex: 1 1 0;
    min-width: 0;
}

.qs-sort-direction {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    color: #555;
    flex: 0 0 auto;
}

.qs-sort-direction:hover {
    color: #1890ff;
}

.qs-tools-table {
    width: 100%;
    font-size: 0.8125rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.qs-row {
    cursor: pointer;
    border-bottom: 0.0625rem solid #f0f0f0;
}

.qs-row:hover {
    background: var(--gray-3);
}

.qs-row-selected {
    background: #e6f7ff !important;
}

/* The tool's position in the whole list. First cell of the row, so it carries the row's
   left inset, and like its neighbours it aligns to the top of the two-line name cell. */
.qs-row-index {
    width: 2.75rem;
    padding: 0.375rem 0.375rem 0.375rem 0.5rem;
    text-align: right;
    color: #888;
    font-variant-numeric: tabular-nums;
    vertical-align: top;
}

.qs-row-progress {
    width: 3.125rem;
    padding: 0.375rem 0.25rem;
    text-align: right;
    color: #555;
    font-variant-numeric: tabular-nums;
    vertical-align: top;
}

/* Holds two lines - the tool name and, under it, its creation date and creator -
   so the truncation sits on the spans rather than on the cell. */
.qs-row-name {
    padding: 0.375rem 0.5rem 0.375rem 0.25rem;
}

.qs-row-title,
.qs-row-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qs-row-meta {
    font-size: 0.75rem;
    color: #888;
}

.qs-empty,
.qs-loading {
    padding: 0.75rem;
    text-align: center;
    color: #888;
    font-size: 0.8125rem;
}

.qs-pagination {
    padding: 0.5rem;
    border-top: 0.0625rem solid #e8e8e8;
    background: #fff;
    text-align: center;
    flex: 0 0 auto;
}

/* ===== ToolDetail hero (TT-772) — drawing | preview | metadata+actions ===== */
.td-hero {
    display: grid;
    grid-template-columns: minmax(18.75rem, 1fr) minmax(22.5rem, 1.3fr) minmax(23.75rem, 1fr);
    gap: 0.0625rem;
    background: var(--border-default);
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.375rem;
    box-shadow: var(--shadow-low);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.td-hero-cell {
    background: #fff;
    min-height: 21.25rem;
}

.td-hero-drawing,
.td-hero-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.td-drawing-img {
    max-width: 100%;
    max-height: 20rem;
    object-fit: contain;
    cursor: pointer;
    padding: 0.75rem;
}

.td-hero-preview {
    position: relative;
    background: linear-gradient(180deg, #FAFAFA 0%, #EFEFEF 100%);
}

.td-hero-preview .ant-carousel,
.td-hero-preview .slick-slider,
.td-hero-preview .slick-list,
.td-hero-preview .slick-track {
    height: 100%;
}

.td-preview-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 21.25rem;
    padding: 0.5rem;
}

.td-preview-img {
    max-height: 19rem;
    max-width: 100%;
    object-fit: contain;
}

.td-preview-empty {
    height: 21.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0 0 0 / 25%);
}

.td-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 92%);
    border: 0.0625rem solid var(--border-default);
    color: #595959;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-low);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.td-nav-arrow:hover {
    background: #fff;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.td-nav-arrow-left {
    left: 0.875rem;
}

.td-nav-arrow-right {
    right: 0.875rem;
}

/* Metadata rail */
.td-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.125rem 1.375rem;
}

.td-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.td-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.td-info-icon {
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--text-secondary);
    display: inline-flex;
}

.td-info-icon:hover {
    color: var(--brand-primary);
}

.td-title {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.td-title-naming {
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--text-secondary);
    display: inline-flex;
}

.td-title-naming:hover {
    color: var(--brand-primary);
}

.td-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.td-field-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.td-meta-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.td-class-btn {
    height: 2.25rem;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    background: #fff;
    color: var(--text-primary);
}

.td-class-btn-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-stars {
    height: 2.25rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.td-seal {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

/* Status pills */
.td-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.td-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    line-height: 1.4;
    border: 0.0625rem solid transparent;
}

.td-pill > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}

.td-pill-success {
    background: var(--success-light);
    color: var(--success-dark);
    border-color: var(--success-border);
}

.td-pill-danger {
    background: var(--danger-light);
    color: var(--danger-dark);
    border-color: var(--danger-border);
}

/* Action rail — 2×3 button grid wrapping existing action components */
.td-action-grid {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.td-action-btn {
    height: 2.25rem;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.25rem;
    background: #fff;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

/* Hide action boxes whose gated component rendered nothing */
.td-action-btn:not(:has(*)) {
    display: none;
}

.td-action-btn:hover {
    background: var(--gray-3);
}

.td-action-btn > span,
.td-action-btn > a {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-decoration: none;
}

.td-action-btn .anticon {
    flex-shrink: 0;
}

.td-action-btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.td-action-btn-primary:hover {
    background: var(--brand-primary-hover);
    color: #fff;
}

.td-action-btn-danger {
    background: #fff;
    border-color: var(--danger);
    color: var(--danger);
}

.td-action-btn-danger:hover {
    background: var(--danger-light);
}

/* ===== Rights matrix (Edit user + Right templates) ===== */
.rm-matrix {
    /* Ant blue track pair for "ro" - the only colours the design tokens do not already cover. */
    --rm-ro: #1677ff;
    --rm-ro-track: #91caff;
    --rm-no-track: #ffccc7;
}

.rm-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.rm-search-icon {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.rm-search-input {
    flex: 1;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.25rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    outline: none;
}

.rm-search-input:focus {
    border-color: var(--brand-primary);
}

.rm-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (width <= 51.25rem) {
    .rm-columns {
        grid-template-columns: 1fr;
    }
}

.rm-card {
    background: #fff;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.375rem;
    overflow: hidden;
}

.rm-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fafafa;
    border-bottom: 0.0625rem solid var(--border-default);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    user-select: none;
}

.rm-chevron {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    transition: transform 0.15s;
}

.rm-body {
    overflow-y: auto;
}

.rm-collapsed .rm-chevron {
    transform: rotate(-90deg);
}

.rm-collapsed .rm-body {
    display: none;
}

.rm-count {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.rm-bulk {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.rm-bulk-label {
    font-weight: 400;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.rm-bulk-button {
    font-size: 0.6875rem;
    border: 0.0625rem solid var(--border-default);
    background: #fff;
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.rm-bulk-button:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.rm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    table-layout: fixed;
}

.rm-table col.rm-col-name {
    width: auto;
}

.rm-table col.rm-col-switch {
    width: 4.25rem;
}

.rm-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fcfcfd;
    padding: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 0.0625rem solid var(--border-default);
    box-shadow: 0 0.0625rem 0 var(--border-default);
}

.rm-table thead th.rm-th-name {
    text-align: left;
    padding-left: 0.875rem;
}

.rm-th-tip {
    border-bottom: 0.0625rem dotted var(--text-secondary);
    cursor: help;
}

.rm-table td {
    padding: 0.375rem 0.5rem;
    border-bottom: 0.0625rem solid #f0f1f3;
    overflow: hidden;
}

.rm-table tr:hover td {
    background: var(--brand-primary-soft);
}

.rm-name {
    padding-left: 0.875rem !important;
}

.rm-code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-detail {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-group-tag {
    display: inline-block;
    margin-right: 0.25rem;
    padding: 0 0.25rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.125rem;
    background: #fafafa;
}

.rm-switch-cell {
    text-align: center;
}

.rm-empty {
    padding: 0.75rem !important;
    text-align: center;
    color: var(--text-secondary);
}

/* ── The no/ro/rw switch ───────────────────────────────────────────── */
.rm-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.5rem;
    height: 1.375rem;
    border-radius: 62.4375rem;
    background: #e8e9ec;
    box-shadow: inset 0 0.0625rem 0.125rem rgb(0 0 0 / 8%);
    cursor: pointer;
    transition: background-color 0.18s ease;
    vertical-align: middle;
}

.rm-switch:not(.rm-on):hover {
    background: #dcdee2;
}

.rm-knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.0625rem 0.1875rem rgb(0 0 0 / 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    color: #b0b3ba;
    transition: left 0.18s ease, color 0.18s ease;
}

.rm-switch.rm-on .rm-knob {
    left: 1.25rem;
}

.rm-switch.rm-no.rm-on {
    background: var(--rm-no-track);
}

.rm-switch.rm-ro.rm-on {
    background: var(--rm-ro-track);
}

.rm-switch.rm-rw.rm-on {
    background: var(--success-border);
}

.rm-switch.rm-no.rm-on .rm-knob {
    color: var(--danger);
}

.rm-switch.rm-ro.rm-on .rm-knob {
    color: var(--rm-ro);
}

.rm-switch.rm-rw.rm-on .rm-knob {
    color: var(--success);
}

/* ===== Password change row (User profile) ===== */
.tt-pw-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Fixed width on purpose - the row is compact instead of three equal thirds of the modal. */
.tt-pw-field {
    flex: 0 0 15rem;
}

.tt-pw-field .ant-input-prefix .anticon {
    color: var(--text-secondary);
}

.tt-pw-error.ant-input-affix-wrapper,
.tt-pw-error.ant-input-affix-wrapper:hover,
.tt-pw-error.ant-input-affix-wrapper-focused {
    border-color: var(--danger);
}

.tt-pw-error.ant-input-affix-wrapper-focused {
    box-shadow: 0 0 0 0.125rem rgb(245 34 45 / 10%);
}

/* Height is reserved even when empty, so the row does not shift as the hint appears. */
.tt-pw-helper {
    min-height: 1rem;
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    color: var(--danger);
}

.tt-pw-success {
    height: 1.125rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--success);
    opacity: 0;
    transition: opacity 0.2s;
}

.tt-pw-success.tt-pw-show {
    opacity: 1;
}

/* ===== Price list mapping (Internal tools) ===== */

/* One fixed content column, so the toolbar, the card and the table share a width - that is
   what puts the "Create new mapping" button at the far edge instead of next to the Select. */
.plm-page {
    max-width: 47.5rem;
}

.plm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.plm-toolbar-label {
    font-weight: 500;
    white-space: nowrap;
}

.plm-toolbar-spacer {
    flex: 1;
}

.plm-card {
    margin-bottom: 1.75rem;
}

/* AntDesign renders the Descriptions label cell on grey; here it reads as a name column,
   matching the internal-name column of the mapping table below. */
.plm-kv .ant-descriptions-item-label {
    width: 38%;
    background: #fff;
    color: var(--brand-primary);
    font-weight: 400;
}

.plm-kv .ant-input {
    width: 100%;
}

.plm-table {
    margin-bottom: 1.75rem;
}

.plm-name {
    color: var(--brand-primary);
}

.plm-save-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Always rendered and faded by opacity, so the row does not shift as the confirmation
   appears and times out again. */
.plm-saved {
    font-size: 0.875rem;
    color: var(--success-dark);
    opacity: 0;
    transition: opacity 0.2s;
}

.plm-saved.plm-show {
    opacity: 1;
}

/* ── Vorgabefelder (PrefilledFields) ───────────────────────────────────────── */

/* The customer dropdown is grouped: customers that already have prefilled fields
   first, everyone else after them. AntDesign renders a group caption as
   .ant-select-item-group; the sibling selector hits every caption except the
   first one, which is where the dividing line belongs. */
.pf-customer-dropdown .ant-select-item-group ~ .ant-select-item-group {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid var(--border-default);
}

.pf-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pf-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-option-count {
    flex: none;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ── Manage thread lookup ──────────────────────────────────────────────────── */

/* The table carries 13 raw DB column names, and in most columns the header is wider
   than any value under it. Letting the header wrap is what keeps every column on
   screen without a horizontal scroller; ColumnLabel in the page code-behind supplies
   the <wbr> break points so the name splits at its underscores, not mid-word. */
.mtl-table .ant-table-thead > tr > th {
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: bottom;
}

/* Values are short and read as one token, so they keep their own line and set a
   sensible minimum width for their column. */
.mtl-table .ant-table-tbody > tr > td {
    white-space: nowrap;
}

/* A numeric field in the thread-lookup dialog holding something that is not a number.
   Marked from C# via InvalidClass(), the same way the SAP page marks a missing
   mandatory field with .sap-mandatory-empty. The wrapper carries the class because
   AntDesign owns the markup inside AutoComplete. */
.mtl-field.mtl-invalid .ant-input {
    border-color: var(--danger);
}

/* Keep the red while the field has focus - AntDesign's focus rule would otherwise
   repaint the border blue and hide the error exactly while it is being corrected. */
.mtl-field.mtl-invalid .ant-input:focus,
.mtl-field.mtl-invalid .ant-input-focused {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.125rem rgb(245 34 45 / 20%);
}

/* ===== Admin tools (six action cards) ===== */

/* The mockup's card head is a heading with a sentence under it and no rule, so both
   stay in the card body: AntDesign's own Card head would draw a border and ellipsise
   a title onto one line, and ant-design-blazor.css loads after this file, so those
   rules cannot be overridden from here at single-class specificity. */
.at-card-title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.at-card-desc {
    margin: 0 0 1.125rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Field captions: block-level and quiet, so the control under them is the loud element
   in the column. Replaces Bootstrap's inline-block <label>. */
.at-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Always rendered, so a row keeps its height whether or not it has something to say -
   picking a CSV must not push the button below it down by a line. */
.at-hint {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.at-hint-error {
    color: var(--danger);
}

/* Set and Delete on the update-time card, in place of a margin-left on the second. */
.at-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── Emails: Assignments for customer (AssignmentModal) ────────────────────── */

/* The Rights dropdown of each template row is grouped: the rights the email already
   goes to first, everything else after them. Same treatment as .pf-customer-dropdown
   above - AntDesign renders a group caption as .ant-select-item-group, and the sibling
   selector hits every caption except the first one, which is where the dividing line
   belongs. */
.assignment-rights-dropdown .ant-select-item-group ~ .ant-select-item-group {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid var(--border-default);
}

/* ===== User statistics (Edit user) ===== */

/* The button that opens the window, in the Edit-user body. */
.us-open-btn .ant-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.us-open-hint {
    margin-left: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* ── The window ────────────────────────────────────────────────────── */

/* Day / Week / Month / Year, drawn as one joined control. */
.us-ranges {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.us-range {
    height: 2rem;
    min-width: 4.25rem;
    border: 0.0625rem solid var(--border-default);
    border-left-width: 0;
    padding: 0 0.9375rem;
    background: #fff;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.us-range:first-child {
    border-left-width: 0.0625rem;
    border-radius: 0.125rem 0 0 0.125rem;
}

.us-range:last-child {
    border-radius: 0 0.125rem 0.125rem 0;
}

.us-range:hover {
    color: var(--brand-primary);
}

.us-range.us-on {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

/* The neighbour's grey left border would otherwise cut into the filled one. */
.us-range.us-on + .us-range {
    border-left-color: var(--brand-primary);
}

/* A figure sitting on a rule, the way the dialog writes each value. */
.us-field {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
}

.us-field-label {
    flex: 0 0 10.5rem;
}

.us-field-value {
    flex: 1;
    min-width: 0;
    border-bottom: 0.0625rem solid var(--border-default);
    padding: 0 0.125rem 0.1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Everything with no figure to show - never a measured zero. */
.us-field-value.us-empty,
.us-area-name.us-empty,
.us-target.us-empty {
    color: var(--text-secondary);
}

.us-num {
    font-weight: 600;
}

.us-unit {
    color: var(--text-secondary);
}

.us-areas-label {
    margin-bottom: 0.5rem;
}

.us-areas {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 0.0625rem solid var(--border-default);
    border-radius: 0.125rem;
}

.us-area-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.us-area-row + .us-area-row {
    margin-top: 0.625rem;
}

.us-area-rank {
    flex: 0 0 1.25rem;
    color: var(--text-secondary);
}

/* One continuous rule per row, with the count riding on its right end. */
.us-area-line {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    border-bottom: 0.0625rem solid var(--border-default);
    padding: 0 0.125rem 0.1875rem;
}

.us-area-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.us-area-count {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* "Latest action" and "Go back" share a line, so the window needs no footer. */
.us-last {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.us-last .us-field {
    flex: 1;
    margin-bottom: 0;
}

.us-last .ant-btn {
    flex: 0 0 auto;
    align-self: center;
}

/* Where "Go back" lands, spelled out under the Latest-action line. */
.us-target {
    margin-top: 0.375rem;
    padding-left: 11.5rem;      /* clears the label column */
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.us-target code {
    padding: 0 0.25rem;
    border: 0.0625rem solid var(--gray-3);
    border-radius: 0.125rem;
    background: var(--gray-3);
    color: var(--text-primary);
}

.us-note {
    margin: 1.25rem 0 0;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid var(--gray-3);
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
}