/* ============================================================
   Plat — light Ant Design-inspired shell (aligned with PKD Portal)
   ============================================================ */

:root {
    --pkd-primary: #1890FF;
    --pkd-primary-hover: #40A9FF;
    --pkd-primary-active: #096DD9;
    --pkd-primary-light: #E6F4FF;
    --pkd-success: #52C41A;
    --pkd-warning: #FAAD14;
    --pkd-danger: #FF4D4F;
    --pkd-info: #1890FF;
    --pkd-text: rgba(0, 0, 0, 0.85);
    --pkd-text-secondary: rgba(0, 0, 0, 0.45);
    --pkd-bg-page: #F0F2F5;
    --pkd-bg-card: #FFFFFF;
    --pkd-border: #F0F0F0;
    --pkd-radius-sm: 6px;
    --pkd-radius: 8px;
    --pkd-radius-lg: 12px;
    --pkd-page-gutter-x: 12px;
    --pkd-page-gutter-y: 12px;
    --pkd-section-gap: 12px;
    --pkd-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02);
    --pkd-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html,
body,
#lpx-wrapper,
.lpx-content-wrapper,
.mud-layout {
    background-color: var(--pkd-bg-page) !important;
    color: var(--pkd-text);
}

.mud-button-root:not(.mud-icon-button),
.mud-input-outlined .mud-input-outlined-border,
.mud-picker .mud-input-outlined-border,
.mud-menu .mud-paper,
.mud-popover .mud-paper {
    border-radius: 8px !important;
}

.mud-paper:not(.mud-popover):not(.mud-dialog) {
    border-radius: var(--pkd-radius) !important;
}

/* Outlined labels stay notched at the top-left, even when empty / unfocused.
   Keep legend height at the notch size — `height: auto` eats the inner field. */
.mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    width: auto !important;
    height: 11px !important;
    padding: 0 5px !important;
}

.mud-input.mud-input-outlined ~ label.mud-input-label.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75) !important;
    transform-origin: top left !important;
    max-width: calc((100% - 14px) / 0.75) !important;
}

/* Form fields: 40px. Label sits on the notch; inner text/icons share one 32px band
   so TextField and Select line up. */
.mud-input.mud-input-outlined:not(.mud-input-multiline) {
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
}

.mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root,
.mud-input.mud-input-outlined:not(.mud-input-multiline) > div.mud-input-slot.mud-input-root,
.mud-select .mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root,
.mud-select .mud-input.mud-input-outlined:not(.mud-input-multiline) > div.mud-input-slot.mud-input-root,
.mud-picker .mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important;
    overflow: hidden !important;
}

.mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root::placeholder,
.mud-select .mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root::placeholder {
    line-height: 32px;
}

/* Select shows the value in a `display:inline` div — force the same 32px band as <input>.
   Do not un-hide MudBlazor's spare slot (`style="display:none"`). */
.mud-input.mud-input-outlined:not(.mud-input-multiline) > div.mud-input-slot.mud-input-root {
    display: flex !important;
    align-items: center !important;
}

.mud-input.mud-input-outlined:not(.mud-input-multiline) > div.mud-input-slot.mud-input-root[style*="display:none"],
.mud-input.mud-input-outlined:not(.mud-input-multiline) > div.mud-input-slot.mud-input-root[style*="display: none"] {
    display: none !important;
}

.mud-input.mud-input-outlined:not(.mud-input-multiline) .mud-input-adornment {
    height: 32px !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mud-input.mud-input-outlined:not(.mud-input-multiline) .mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 2px;
}

/* ---------- Top bar ---------- */
.lpx-topbar-container,
.lpx-footbar-container {
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

.lpx-footbar-container,
.lpx-footbar,
.lpx-footer,
footer.lpx-footer,
footer[class*="lpx"] {
    display: none !important;
}

.lpx-topbar-container .lpx-topbar,
.lpx-footbar-container .lpx-footbar {
    background-color: #FFFFFF !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #F0F0F0 !important;
}

.lpx-content-container,
.lpx-content,
.mud-main-content {
    border-radius: 0 !important;
    background: var(--pkd-bg-page) !important;
}

/* Theme default is ~1.25em 2em 3em — too much with .pkd-page padding stacked */
.lpx-content-container .lpx-content,
.lpx-content,
.mud-main-content {
    padding: 8px 12px 12px !important;
}

.mud-appbar,
.mud-appbar.mud-appbar-fixed-top,
header.mud-appbar {
    background-color: #FFFFFF !important;
    color: rgba(0, 0, 0, 0.85) !important;
    border-bottom: 1px solid #F0F0F0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.mud-appbar .mud-toolbar,
.lpx-topbar-container .lpx-topbar {
    min-height: 64px !important;
    align-items: center !important;
}

.lpx-topbar .mud-icon-root,
.lpx-topbar button {
    color: #4B5563 !important;
}

/* ---------- Logo / brand ---------- */
.lpx-sidebar .lpx-logo-container,
.lpx-logo-container {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 280px;
    min-height: 64px;
    padding: 0 !important;
    box-sizing: border-box;
    z-index: 2;
    flex-shrink: 0;
}

.lpx-sidebar-container .lpx-sidebar,
.lpx-sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
    overflow-x: hidden !important;
}

.lpx-sidebar-container .lpx-sidebar .lpx-nav,
.lpx-nav {
    height: auto !important;
    min-height: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden !important;
}

.pkd-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none !important;
    color: rgba(0, 0, 0, 0.85) !important;
    min-height: 64px;
    width: 100%;
    box-sizing: border-box;
}

.pkd-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1890FF 0%, #096DD9 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35);
}

.pkd-brand-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lpx-wrapper.hover-trigger .lpx-sidebar-container:not(:hover) .lpx-logo-container {
    width: 72px !important;
}

#lpx-wrapper.hover-trigger .lpx-sidebar-container:not(:hover) .pkd-brand {
    width: 72px;
    padding-inline: 0;
    gap: 0;
    justify-content: center;
}

#lpx-wrapper.hover-trigger .lpx-sidebar-container:not(:hover) .pkd-brand-text {
    display: none;
}

.lpx-brand-logo,
.lpx-logo,
.lpx-sidebar .lpx-logo-container .lpx-brand-logo {
    background-image: none !important;
}

/* ---------- User menu ---------- */
.pkd-userbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
}

.pkd-inbox-trigger {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.65);
    pointer-events: auto;
}

.pkd-inbox-trigger:hover {
    background: #FAFAFA;
    color: rgba(0, 0, 0, 0.85);
}

.pkd-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pkd-inbox-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px;
    cursor: pointer;
}

.pkd-inbox-item:not(.is-read) {
    border-color: #FFD6E7;
    background: #FFF7FA;
}

.pkd-inbox-item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.pkd-inbox-reason {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.pkd-inbox-time {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

.pkd-inbox-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.85);
}

.pkd-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pkd-user-trigger:hover {
    background: #FAFAFA;
    border-color: #F0F0F0;
}

.pkd-user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    max-width: 160px;
}

.pkd-user-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
}

.pkd-user-email {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pkd-user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 8px;
    min-width: 220px;
}

.pkd-login-toolbar-btn {
    margin-right: 12px;
}

/* ---------- Light sidebar / drawer ---------- */
.mud-drawer,
.mud-drawer .mud-drawer-content,
.lpx-sidebar,
.lpx-sidebar .lpx-logo-container,
.lpx-sidebar-container,
.lpx-sidebar-container .lpx-sidebar,
.lpx-sidebar-container .lpx-sidebar .lpx-nav,
.lpx-nav,
.lpx-nav-menu,
.lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu {
    background-color: #FFFFFF !important;
    color: rgba(0, 0, 0, 0.85) !important;
    border-right: 0 !important;
}

.lpx-sidebar-container,
.mud-drawer {
    border-right: 1px solid #E5E7EB !important;
}

.lpx-nav-menu,
.mud-navmenu {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: 8px !important;
}

.lpx-nav-menu .lpx-menu-item-link,
.mud-navmenu .mud-nav-link,
.mud-nav-link {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
    box-sizing: border-box;
    border-radius: 0 !important;
    color: rgba(0, 0, 0, 0.75) !important;
    background-color: transparent !important;
}

.lpx-nav-menu .lpx-menu-item-link:hover,
.mud-navmenu .mud-nav-link:hover,
.mud-nav-link:hover {
    background-color: rgba(24, 144, 255, 0.06) !important;
    color: var(--pkd-primary) !important;
}

.lpx-nav-menu .lpx-menu-item-link:hover .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link:hover .dd-icon,
.lpx-nav-menu .lpx-menu-item-link:hover .lpx-icon {
    color: var(--pkd-primary) !important;
    opacity: 1 !important;
}

.lpx-nav-menu .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-menu-item-link.expanded,
.lpx-sidebar .lpx-menu-item.selected,
.mud-navmenu .mud-nav-item.active .mud-nav-link,
.mud-navmenu .mud-nav-link.active,
.mud-nav-link.active,
a.mud-nav-link.active {
    background-color: var(--pkd-primary-light) !important;
    color: var(--pkd-primary) !important;
    border-left: 3px solid var(--pkd-primary) !important;
    border-radius: 0 var(--pkd-radius) var(--pkd-radius) 0 !important;
    font-weight: 500;
}

.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .dd-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-text,
.lpx-nav-menu .lpx-menu-item-link.expanded .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.expanded .dd-icon {
    color: var(--pkd-primary) !important;
    opacity: 1 !important;
}

.lpx-nav-menu .dd-icon,
.lpx-nav-menu .lpx-caret,
.lpx-nav-menu .outer-icon,
.lpx-nav-menu .lpx-menu-item-link .dd-icon,
.lpx-nav-menu .lpx-menu-item-link i[class*="chevron"],
.lpx-nav-menu .lpx-menu-item-link i[class*="angle"] {
    color: rgba(0, 0, 0, 0.35) !important;
    opacity: 1 !important;
}

.lpx-nav-menu .lpx-inner-menu {
    background: #FAFAFA !important;
    padding: 4px 0 8px !important;
}

.lpx-nav-menu .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-text,
.lpx-nav-menu .lpx-menu-item-link .lpx-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    height: auto;
}

.lpx-nav-menu .lpx-menu-item-link .dd-icon {
    top: 50%;
    transform: translateY(-50%);
}

.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link,
.lpx-nav-menu .lpx-inner-menu .lpx-inner-menu .lpx-menu-item-link {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    color: rgba(0, 0, 0, 0.65) !important;
    background-color: #FAFAFA !important;
    padding-left: 28px !important;
}

.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-icon,
.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-icon .lpx-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    min-width: 24px;
    font-size: 14px;
}

.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link:hover {
    background-color: var(--pkd-primary-light) !important;
    color: var(--pkd-primary) !important;
}

.mud-drawer .mud-toolbar,
.lpx-brand,
.lpx-logo-container,
.lpx-brand-logo {
    background: #FFFFFF !important;
    color: rgba(0, 0, 0, 0.85) !important;
    border-bottom: 1px solid #F0F0F0;
}

.lpx-nav-menu .menu-item .menu-item-text,
.lpx-nav-menu .lpx-menu-item-text {
    color: rgba(0, 0, 0, 0.75) !important;
}

.lpx-nav-menu .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link .lpx-menu-item-icon .lpx-icon {
    color: rgba(0, 0, 0, 0.65) !important;
    opacity: 0.85 !important;
}

.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-text {
    color: var(--pkd-primary) !important;
}

/* ---------- Page shell ---------- */
.pkd-page {
    padding: var(--pkd-page-gutter-y) var(--pkd-page-gutter-x);
}

.pkd-panel {
    background: #fff;
    border: 1px solid var(--pkd-border);
    border-radius: var(--pkd-radius);
    box-shadow: var(--pkd-shadow);
    padding: 12px 16px;
}

.pkd-page-header {
    margin-bottom: var(--pkd-section-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.pkd-page-header-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--pkd-text);
    line-height: 1.3;
}

.pkd-page-header-desc {
    color: var(--pkd-text-secondary);
    font-size: 14px;
    margin-top: 6px;
}

.pkd-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pkd-filter-bar {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid var(--pkd-border);
    padding: 0 0 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.pkd-filter-fields {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    gap: 12px;
    align-items: center;
}

.pkd-filter-fields > .mud-input-control,
.pkd-filter-fields > .mud-select {
    width: 100% !important;
    max-width: 240px;
    margin: 0 !important;
}

.pkd-filter-fields .mud-select .mud-input-control {
    margin: 0 !important;
}

.pkd-filter-actions {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

/* ---------- Table ---------- */
.pkd-panel .pkd-table,
.pkd-page .pkd-table {
    width: 100%;
    max-width: 100%;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.pkd-panel .pkd-table .mud-table-container,
.pkd-page .pkd-table .mud-table-container {
    width: 100%;
    overflow-x: auto;
}

.pkd-panel .pkd-table .mud-table-head .mud-table-cell,
.pkd-page .pkd-table .mud-table-head .mud-table-cell {
    background: #fafafa !important;
    color: var(--pkd-text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--pkd-border) !important;
    white-space: nowrap;
}

.pkd-panel .pkd-table .mud-table-body .mud-table-cell,
.pkd-page .pkd-table .mud-table-body .mud-table-cell {
    color: var(--pkd-text) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--pkd-border) !important;
    vertical-align: middle !important;
}

.pkd-panel .pkd-table .mud-table-body .mud-table-row:last-child .mud-table-cell,
.pkd-page .pkd-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

.pkd-panel .pkd-table .mud-table-head .mud-table-cell:last-child,
.pkd-panel .pkd-table .mud-table-body .mud-table-cell:last-child,
.pkd-page .pkd-table .mud-table-head .mud-table-cell:last-child,
.pkd-page .pkd-table .mud-table-body .mud-table-cell:last-child {
    text-align: right !important;
    white-space: nowrap;
}

.pkd-panel .pkd-table .mud-table-body .mud-table-cell:last-child .d-flex,
.pkd-page .pkd-table .mud-table-body .mud-table-cell:last-child .d-flex {
    justify-content: flex-end;
}

.icon-btn {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
}

.icon-btn.mud-icon-button .mud-icon-root {
    font-size: 18px;
}

.pkd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    color: var(--pkd-text-secondary);
    text-align: center;
    font-size: 13px;
}

/* ---------- KPI ---------- */
.pkd-kpi-grid {
    margin-bottom: var(--pkd-section-gap);
}

.pkd-kpi-grid .mud-grid-item {
    display: flex;
}

.pkd-kpi-grid .mud-grid-item > * {
    width: 100%;
}

.pkd-kpi-card {
    background: var(--pkd-bg-card);
    border: 1px solid var(--pkd-border);
    border-radius: var(--pkd-radius);
    box-shadow: var(--pkd-shadow);
    padding: 16px 18px;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
}

.pkd-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--pkd-primary-light);
    color: var(--pkd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pkd-kpi-label {
    color: var(--pkd-text-secondary);
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.pkd-kpi-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--pkd-text);
    line-height: 1.2;
}

/* Finance overview: one strip, equal columns */
.pkd-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    margin-bottom: var(--pkd-section-gap);
    background: var(--pkd-bg-card);
    border: 1px solid var(--pkd-border);
    border-radius: var(--pkd-radius);
    box-shadow: var(--pkd-shadow);
    overflow: hidden;
}

.pkd-stat-item {
    padding: 16px 20px;
    min-width: 0;
    position: relative;
}

.pkd-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 0;
    width: 1px;
    background: var(--pkd-border);
}

.pkd-stat-item.is-emphasis {
    background: linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 100%);
}

.pkd-stat-label {
    color: var(--pkd-text-secondary);
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 8px;
}

.pkd-stat-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--pkd-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pkd-stat-value.is-primary {
    color: var(--pkd-primary);
}

.pkd-stat-value.is-warn {
    color: var(--pkd-warning);
}

@media (max-width: 720px) {
    .pkd-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .pkd-stat-item:nth-child(2n)::after {
        display: none;
    }
}

/* ---------- Badge ---------- */
.plat-badge,
.pkd-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}

.plat-badge.success,
.pkd-badge.success { background: #F6FFED; color: #389E0D; }
.plat-badge.warning,
.pkd-badge.warning { background: #FFF7E6; color: #D48806; }
.plat-badge.danger,
.pkd-badge.danger { background: #FFF1F0; color: #CF1322; }
.plat-badge.info,
.pkd-badge.info { background: #E6F4FF; color: #096DD9; }

/* ---------- Centered dialog (replaces side drawer) ---------- */
.pkd-dialog-layer,
.plat-side-panel-layer {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.45);
}

.pkd-dialog,
.plat-side-panel {
    width: min(520px, calc(100vw - 32px));
    max-height: min(88vh, 760px);
    background: #fff;
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 22px 64px rgba(20, 31, 46, 0.2);
    animation: pkd-dialog-in 0.16s ease-out;
}

@keyframes pkd-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.pkd-dialog-header,
.plat-side-panel-header,
.pkd-dialog-footer,
.plat-side-panel-footer {
    padding: 16px 20px;
    flex-shrink: 0;
}

.pkd-dialog-header,
.plat-side-panel-header {
    border-bottom: 1px solid var(--pkd-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.pkd-dialog-footer,
.plat-side-panel-footer {
    border-top: 1px solid var(--pkd-border);
    background: #FAFAFA;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pkd-dialog-body,
.plat-side-panel-body {
    overflow: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pkd-dialog-body .mud-input-control,
.plat-side-panel-body .mud-input-control {
    margin-top: 0 !important;
}

.pkd-dialog .pkd-form-actions,
.plat-side-panel .pkd-form-actions {
    margin-top: 4px;
    padding-top: 16px;
}

/* ---------- Portal subscribe dialog ---------- */
.pkd-portal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pkd-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 3px;
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: #F5F7FA;
}

.pkd-segmented-item {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pkd-text-secondary, #64748B);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.pkd-segmented-item.is-active {
    background: #fff;
    color: var(--pkd-primary, #1677FF);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.pkd-portal-form .pkd-portal-field.mud-input-control {
    margin-top: 0 !important;
}

.pkd-portal-form .mud-input.mud-input-outlined:not(.mud-input-multiline) {
    height: 36px;
    min-height: 36px;
    padding-top: 7px;
}

.pkd-portal-form .mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root,
.pkd-portal-form .mud-input.mud-input-outlined:not(.mud-input-multiline) > div.mud-input-slot.mud-input-root {
    height: 29px !important;
    min-height: 29px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 21px !important;
    box-sizing: border-box !important;
}

.pkd-portal-form .mud-input.mud-input-outlined:not(.mud-input-multiline) > input.mud-input-root::placeholder {
    line-height: 21px;
}

.pkd-portal-sms-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.pkd-portal-sms-input {
    flex: 1;
    min-width: 0;
}

.pkd-portal-footer {
    margin: 8px -20px -20px;
    border-top: 1px solid var(--pkd-border);
    border-radius: 0 0 8px 8px;
}

.pkd-form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pkd-text);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pkd-border);
}

.pkd-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--pkd-border);
}

.pkd-form-section {
    background: var(--pkd-bg-card);
    border: 1px solid var(--pkd-border);
    border-radius: var(--pkd-radius);
    box-shadow: var(--pkd-shadow);
    padding: 16px 20px;
    height: 100%;
}

.pkd-template-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.pkd-template-picker-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--pkd-text-secondary, #64748B);
}

.pkd-template-picker-filter-hint {
    color: var(--pkd-text-muted, #94A3B8);
}

.pkd-template-picker-list {
    display: none;
}

.pkd-template-picker-hint {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--pkd-text-secondary, #64748B);
    border: 1px dashed var(--pkd-border);
    border-radius: 8px;
    background: var(--pkd-bg-subtle, #F8FAFC);
}

.pkd-template-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 160px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: #fff;
}

.pkd-template-picker-empty {
    grid-column: 1 / -1;
    padding: 24px 12px;
    text-align: center;
    color: var(--pkd-text-secondary, #64748B);
    font-size: 13px;
}

.pkd-template-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.pkd-template-option:hover {
    border-color: var(--pkd-primary, #1677FF);
}

.pkd-template-option.is-selected {
    border-color: var(--pkd-primary, #1677FF);
    background: rgba(22, 119, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.15);
}

.pkd-template-option-check {
    flex: 0 0 auto;
    color: var(--pkd-primary, #1677FF);
    margin-top: 2px;
}

.pkd-template-option-body {
    min-width: 0;
    flex: 1;
}

.pkd-template-option-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pkd-text);
    line-height: 1.35;
}

.pkd-template-option-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--pkd-text-secondary, #64748B);
    line-height: 1.35;
}

.pkd-template-card {
    border: 1px solid var(--pkd-border);
    border-radius: var(--pkd-radius);
    background: var(--pkd-bg-card);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.pkd-template-card-header {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 4px;
}

.pkd-template-card-header .mud-input-control {
    flex: 1;
}

.pkd-template-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.pkd-template-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--pkd-border);
}

.pkd-schema-editor {
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: var(--pkd-bg-subtle, #F8FAFC);
    padding: 12px;
}

.pkd-json-array-form {
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: var(--pkd-bg-subtle, #F8FAFC);
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pkd-json-array-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pkd-json-array-form-item {
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pkd-json-array-form-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--pkd-text-secondary, #64748B);
}

/* stringList：保持 Outlined 浮动标签；只加高 textarea，并给内部顶距，避免 placeholder 贴边 */
.pkd-json-array-form .pkd-json-array-stringlist .mud-input.mud-input-outlined.mud-input-multiline {
    height: auto !important;
    min-height: 120px !important;
}

.pkd-json-array-form .pkd-json-array-stringlist .mud-input.mud-input-outlined.mud-input-multiline textarea.mud-input-root {
    min-height: 100px !important;
    padding: 16px 12px 10px !important;
    line-height: 1.5 !important;
    overflow: auto !important;
    resize: vertical;
    box-sizing: border-box !important;
}

.pkd-json-array-form .pkd-json-array-stringlist .mud-input.mud-input-outlined.mud-input-multiline textarea.mud-input-root::placeholder {
    line-height: 1.5;
}

.pkd-schema-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pkd-schema-editor-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pkd-schema-editor-row {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.1fr 60px 40px;
    gap: 8px;
    align-items: center;
}

.pkd-schema-editor-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--pkd-text-secondary, #64748B);
    padding: 0 4px;
}

.pkd-schema-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.pkd-template-toolbar {
    margin: 12px 0;
}

.pkd-product-templates-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    max-width: 960px;
}

.pkd-product-templates-toolbar .mud-input-control {
    flex: 1;
}

.pkd-btn-action {
    min-height: 38px;
    padding: 8px 18px !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
}

.pkd-template-card-meta {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 0 12px;
    margin-bottom: 4px;
}

.pkd-json-editor-block {
    margin-top: 8px;
    padding: 12px;
    border: 1px dashed var(--pkd-border);
    border-radius: 8px;
    background: var(--pkd-bg-subtle, #F8FAFC);
}

.pkd-json-editor-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.pkd-json-editor-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pkd-text);
}

.pkd-json-editor-hint {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pkd-text-secondary, #64748B);
}

.pkd-json-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.pkd-json-field > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--pkd-text);
}

.pkd-json-field textarea {
    width: 100%;
    min-height: 240px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--pkd-border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--pkd-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow: auto;
}

.pkd-json-editor textarea,
.pkd-json-editor .mud-input-slot {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.pkd-template-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--pkd-border);
}

@media (max-width: 640px) {
    .pkd-template-card-meta {
        grid-template-columns: 1fr;
    }

    .pkd-template-field-grid {
        grid-template-columns: 1fr;
    }

    .pkd-schema-editor-row {
        grid-template-columns: 1fr;
    }

    .pkd-template-card-grid {
        grid-template-columns: 1fr;
    }
}

.app-data-grid-shell,
.pkd-data-grid-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.app-data-grid-scroll {
    overflow-x: auto;
    min-width: 0;
}

.app-data-grid-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--pkd-border);
}

.pkd-shortcut-btn {
    height: 40px !important;
}

.pkd-table.mud-table,
.pkd-table.mud-paper {
    background: transparent !important;
    box-shadow: none !important;
}

.pkd-hint {
    margin: 8px 0 0;
    color: var(--pkd-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.pkd-shelf-table {
    table-layout: fixed;
}

.pkd-shelf-col-offer {
    width: 64px;
}

.pkd-shelf-col-name {
    width: 200px;
}

.pkd-shelf-col-spec {
    width: auto;
    min-width: 280px;
    white-space: normal !important;
    word-break: break-word;
}

.pkd-shelf-col-price {
    width: 140px;
}

.pkd-shelf-price-input,
.pkd-shelf-price-input.mud-input-control {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
}

.pkd-shelf-price-input .mud-input,
.pkd-shelf-price-input .mud-input-control-input-container {
    width: 100% !important;
}

.pkd-shelf-sku-cell {
    text-align: left !important;
    white-space: normal !important;
}

.pkd-shelf-sku-wrap {
    padding: 8px 12px 12px;
    text-align: left;
}

.pkd-shelf-sku-row {
    display: grid;
    grid-template-columns: 36px minmax(160px, 2fr) minmax(120px, 1fr) 72px 128px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
}

.pkd-shelf-sku-attr {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

.pkd-shelf-sku-code {
    color: var(--pkd-text-secondary);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.pkd-shelf-sku-row.is-stale {
    opacity: 0.55;
}

.pkd-source-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pkd-source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pkd-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
}

.pkd-source-row.is-active {
    border-color: var(--pkd-primary);
}

.pkd-source-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pkd-source-row-meta {
    color: var(--pkd-text-secondary);
    font-size: 12px;
}

.pkd-source-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--pkd-border);
}

.pkd-template-sku-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

@media (max-width: 720px) {
    .pkd-filter-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .pkd-filter-fields {
        grid-template-columns: 1fr;
    }

    .pkd-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 遮罩可能画在对话框容器里面。容器压过页面，框体再压过容器内的遮罩。 */
.mud-dialog-container {
    z-index: 1600 !important;
}

.mud-dialog-container .mud-overlay,
.mud-overlay-dialog {
    z-index: 1 !important;
}

.mud-dialog-container .mud-dialog {
    z-index: 2 !important;
    background-color: #fff !important;
}

/* SidePanel/dialog layer is 1400；提示条必须压在上面，避免被挡住 */
.mud-snackbar-location,
.mud-snackbar-wrapper,
.mud-snackbar-location-top-right,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-left,
.mud-snackbar-location-bottom-right,
.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-left {
    z-index: 2100 !important;
}

.pkd-tenant-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pkd-tenant-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--pkd-border);
}

.pkd-tenant-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pkd-text);
    line-height: 1.4;
}

.pkd-tenant-muted {
    color: var(--pkd-text-secondary, #64748b);
    font-size: 13px;
}

.pkd-tenant-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pkd-tenant-action-row > .pkd-tenant-action-field {
    flex: 1;
    min-width: 0;
}

.pkd-tenant-action-row > .mud-button-root {
    flex: 0 0 auto;
    height: 40px;
    white-space: nowrap;
}

.pkd-tenant-grant {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--pkd-border);
    border-radius: 8px;
    background: #fafafa;
}

.pkd-tenant-grant-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.pkd-tenant-status-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.pkd-tenant-status-actions .mud-button-root {
    width: 100%;
    height: 36px;
}

.pkd-order-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pkd-order-detail > div {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px;
    align-items: start;
    font-size: 14px;
}
.pkd-order-detail > div > span {
    color: var(--pkd-text-secondary, #64748b);
}
.pkd-order-detail > div > b {
    font-weight: 600;
    word-break: break-all;
}
.pkd-order-detail-qr {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    grid-template-columns: none !important;
    gap: 8px;
    margin-top: 8px;
}
.pkd-order-detail-qr img {
    border-radius: 8px;
    border: 1px solid var(--pkd-border, #e2e8f0);
}
.pkd-order-detail-qr p {
    margin: 0;
    color: var(--pkd-text-secondary, #64748b);
    font-size: 13px;
    font-weight: 400;
}

.pkd-qr-mask {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.45);
  display: grid; place-items: center;
  padding: 16px;
}
.pkd-qr-card {
  background: #fff; border-radius: 12px; padding: 20px 22px;
  width: min(320px, 100%); text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.pkd-qr-card h3 { margin: 0 0 12px; font-size: 16px; }