/*
 * TX-UI presentation layer
 *
 * This file intentionally loads after the bundled Ant Design and legacy theme
 * styles. Keep structural fixes and design tokens here so every panel page,
 * modal, and responsive layout shares the same behavior.
 */

:root {
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-soft: #eff6ff;
    --ui-success: #059669;
    --ui-warning: #d97706;
    --ui-danger: #dc2626;
    --ui-bg: #f3f6fb;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f8fafc;
    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;
    --ui-text: #172033;
    --ui-text-muted: #64748b;
    --ui-radius-sm: 7px;
    --ui-radius: 11px;
    --ui-radius-lg: 15px;
    --ui-shadow-sm: none;
    --ui-shadow: none;
    --ui-focus: 0 0 0 3px rgb(37 99 235 / 18%);
    --color-primary-100: var(--ui-primary);
}

html,
body {
    min-width: 320px;
    background: var(--ui-bg);
}

body {
    color: var(--ui-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

#app.ant-layout {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--ui-bg);
}

#content-layout {
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    background: var(--ui-bg);
}

#content-layout>.ant-layout-content {
    width: min(100%, 1680px);
    margin: 0 auto !important;
    padding: 24px;
}

#content-layout .ant-row>[class*="ant-col-"] {
    min-width: 0;
}

/* The legacy theme adds asymmetric negative margins to every sm=24 column,
 * which creates horizontal overflow and misaligns two-column dashboards. */
#content-layout .ant-col-sm-24 {
    margin: 0;
    padding: 6px;
}

/* Sidebar and primary navigation */
#sider {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    border-inline-end: 1px solid var(--ui-border);
    background: var(--ui-surface);
    box-shadow: 2px 0 16px -4px rgba(0, 0, 0, 0.04);
}

.dark #sider,
#app.dark #sider {
    background: linear-gradient(180deg, #131b26 0%, #0d131d 100%) !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 4px 0 24px -4px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="ultra-dark"] #sider {
    background: #09090b !important;
    border-inline-end: 1px solid #1f1f23 !important;
    box-shadow: none !important;
}

#sider .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
    height: calc(100% - 48px);
    padding: 12px 8px;
    overflow-x: hidden;
    overflow-y: auto;
}

#sider .ant-layout-sider-children::-webkit-scrollbar {
    width: 4px;
}

#sider .ant-layout-sider-children::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 4px;
}

#sider .ant-layout-sider-trigger {
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color: var(--ui-text-muted);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease !important;
}

#sider .ant-layout-sider-trigger:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-primary);
}

.panel-brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin: 2px 4px 12px;
    padding: 8px 10px;
    color: var(--ui-text);
    border-radius: var(--ui-radius);
    border-bottom: 1px solid var(--ui-border);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.panel-brand:hover {
    background: var(--ui-surface-hover);
}

.panel-brand:focus-visible {
    border-radius: var(--ui-radius);
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

.panel-brand-mark {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 19px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ui-primary) 0%, #3b82f6 100%);
    box-shadow: 0 4px 14px -1px rgba(37, 99, 235, 0.35);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.panel-brand:hover .panel-brand-mark {
    transform: scale(1.05) rotate(-3deg);
}

.panel-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.panel-brand-copy strong {
    color: var(--ui-text);
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.3px;
}

.panel-brand-copy small {
    display: inline-flex;
    align-items: center;
    margin-top: 3px;
    padding: 1px 7px;
    color: var(--ui-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 9999px;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    width: fit-content;
}

.ant-layout-sider-collapsed .panel-brand {
    justify-content: center;
    padding-inline: 0;
    margin-inline: 0;
}

.ant-layout-sider-collapsed .panel-brand-copy {
    display: none;
}

#sider.ant-layout-sider-collapsed {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
}

#sider.ant-layout-sider-collapsed .ant-layout-sider-children {
    padding: 10px 8px;
}

#sider.ant-layout-sider-collapsed .panel-brand {
    min-height: 54px;
    margin-inline: 0;
    padding: 6px 0 10px;
}

#sider.ant-layout-sider-collapsed .panel-brand-mark {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

#sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed {
    width: 60px;
    margin: 0 auto;
}

#sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed>.ant-menu-item,
#sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title {
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
    margin: 6px auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    transform: none !important;
}

#sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed>.ant-menu-item .anticon,
#sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed>.ant-menu-submenu>.ant-menu-submenu-title .anticon {
    margin: 0 !important;
    font-size: 19px;
    line-height: 1;
}

#sider.ant-layout-sider-collapsed .ant-menu-item-selected {
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--ui-primary) 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 14px -1px rgba(37, 99, 235, 0.45) !important;
}

#sider.ant-layout-sider-collapsed .ant-menu-item-selected:hover {
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--ui-primary-hover, var(--ui-primary)) 0%, #1d4ed8 100%) !important;
    box-shadow: 0 6px 18px -1px rgba(37, 99, 235, 0.55) !important;
}

#sider.ant-layout-sider-collapsed .panel-theme-control {
    padding-top: 6px;
}

#sider.ant-layout-sider-collapsed .ant-layout-sider-trigger {
    width: 76px !important;
}

/* Disable structural layout shift transitions on sider */
#sider,
.ant-layout-sider,
.ant-layout-sider-children {
    transition: none !important;
    animation: none !important;
}

/* Early inline styling for collapsed sider before Vue hydration to prevent layout shift */
@media (min-width: 769px) {
    html.sider-collapsed-init #sider {
        flex: 0 0 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
        transition: none !important;
    }

    html.sider-collapsed-init #sider .ant-layout-sider-children {
        padding: 10px 8px !important;
    }

    html.sider-collapsed-init #sider .panel-brand-copy,
    html.sider-collapsed-init #sider .ant-menu-title-content,
    html.sider-collapsed-init #sider .ant-menu-item>span>b,
    html.sider-collapsed-init #sider .panel-color-picker-title,
    html.sider-collapsed-init #sider .ant-menu-submenu-title>span>span {
        display: none !important;
    }

    html.sider-collapsed-init #sider .ant-layout-sider-trigger {
        width: 76px !important;
    }
}

.panel-navigation {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.panel-navigation>.ant-menu,
.panel-navigation>.ant-menu+.ant-menu {
    border: 0;
}

#sider,
#sider *,
#sider-drawer,
#sider-drawer * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#sider *::selection,
#sider-drawer *::selection {
    background: transparent !important;
    color: inherit !important;
}

#sider .ant-menu,
#sider-drawer .ant-menu {
    color: var(--ui-text-muted);
    background: transparent;
}

#sider .ant-menu-item,
#sider .ant-menu-submenu-title,
#sider-drawer .ant-menu-item,
#sider-drawer .ant-menu-submenu-title {
    height: 42px;
    margin: 3px 6px !important;
    width: calc(100% - 12px) !important;
    padding: 0 14px !important;
    line-height: 42px;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ui-text-muted);
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#sider .ant-menu-item .anticon,
#sider-drawer .ant-menu-item .anticon {
    font-size: 16.5px;
    margin-right: 12px;
    vertical-align: -2px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}

#sider .ant-menu-item b,
#sider-drawer .ant-menu-item b {
    font-weight: 550;
    letter-spacing: -0.15px;
}

/* Hover state on unselected menu items */
#sider:not(.ant-layout-sider-collapsed) .ant-menu-item:not(.ant-menu-item-selected):hover,
#sider:not(.ant-layout-sider-collapsed) .ant-menu-submenu-title:hover,
#sider-drawer .ant-menu-item:not(.ant-menu-item-selected):hover {
    background: var(--ui-surface-hover) !important;
    color: var(--ui-text) !important;
    transform: translateX(3px);
}

#sider .ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
#sider-drawer .ant-menu-item:not(.ant-menu-item-selected):hover .anticon {
    color: var(--ui-primary);
    transform: scale(1.1);
}

/* Selected state with vibrant gradient & subtle ambient glow */
#sider .ant-menu-item-selected,
#sider-drawer .ant-menu-item-selected {
    color: #ffffff !important;
    font-weight: 650;
    background: linear-gradient(135deg, var(--ui-primary) 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 14px -1px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: none !important;
}

#sider .ant-menu-item-selected a,
#sider .ant-menu-item-selected span,
#sider .ant-menu-item-selected b,
#sider .ant-menu-item-selected .anticon,
#sider-drawer .ant-menu-item-selected a,
#sider-drawer .ant-menu-item-selected span,
#sider-drawer .ant-menu-item-selected b,
#sider-drawer .ant-menu-item-selected .anticon {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

#sider .ant-menu-item-selected .anticon,
#sider-drawer .ant-menu-item-selected .anticon {
    color: #ffffff !important;
    transform: scale(1.06);
}

#sider .ant-menu-item-selected b,
#sider-drawer .ant-menu-item-selected b {
    color: #ffffff !important;
    font-weight: 650;
}

#sider .ant-menu-item-selected::after,
#sider-drawer .ant-menu-item-selected::after {
    display: none;
}

/* Hover state on CURRENT SELECTED side menu item */
#sider .ant-menu-item-selected:hover,
#sider-drawer .ant-menu-item-selected:hover,
#sider:not(.ant-layout-sider-collapsed) .ant-menu-item-selected:hover {
    background: linear-gradient(135deg, var(--ui-primary-hover, var(--ui-primary)) 0%, #1d4ed8 100%) !important;
    box-shadow: 0 6px 18px -1px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transform: none !important;
}

#sider .ant-menu-item-selected:hover a,
#sider .ant-menu-item-selected:hover span,
#sider .ant-menu-item-selected:hover b,
#sider .ant-menu-item-selected:hover .anticon,
#sider-drawer .ant-menu-item-selected:hover a,
#sider-drawer .ant-menu-item-selected:hover span,
#sider-drawer .ant-menu-item-selected:hover b,
#sider-drawer .ant-menu-item-selected:hover .anticon {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

#sider .ant-menu-item-selected:hover .anticon,
#sider-drawer .ant-menu-item-selected:hover .anticon {
    transform: scale(1.1);
}

/* Logout distinction with subtle separator */
#sider .ant-menu-item.panel-menu-logout,
#sider-drawer .ant-menu-item.panel-menu-logout,
#sider .ant-menu-item:last-child,
#sider-drawer .ant-menu-item:last-child {
    margin-top: 14px !important;
    position: relative;
}

#sider:not(.ant-layout-sider-collapsed) .ant-menu-item.panel-menu-logout::before,
#sider-drawer .ant-menu-item.panel-menu-logout::before,
#sider:not(.ant-layout-sider-collapsed) .ant-menu-item:last-child::before,
#sider-drawer .ant-menu-item:last-child::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--ui-border);
    opacity: 0.8;
}

#sider .ant-menu-item.panel-menu-logout:not(.ant-menu-item-selected):hover,
#sider-drawer .ant-menu-item.panel-menu-logout:not(.ant-menu-item-selected):hover,
#sider .ant-menu-item:last-child:not(.ant-menu-item-selected):hover,
#sider-drawer .ant-menu-item:last-child:not(.ant-menu-item-selected):hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

#sider .ant-menu-item.panel-menu-logout:not(.ant-menu-item-selected):hover .anticon,
#sider-drawer .ant-menu-item.panel-menu-logout:not(.ant-menu-item-selected):hover .anticon,
#sider .ant-menu-item:last-child:not(.ant-menu-item-selected):hover .anticon,
#sider-drawer .ant-menu-item:last-child:not(.ant-menu-item-selected):hover .anticon {
    color: #ef4444 !important;
}

.panel-theme-control {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
}

#sider-drawer .ant-drawer-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
}

#sider-drawer .panel-navigation {
    overflow-y: auto;
}

.drawer-handle {
    top: 18px;
    right: -48px;
    z-index: 1100;
    width: 46px;
    height: 46px;
    color: var(--ui-text);
    line-height: 46px;
    border: 1px solid var(--ui-border);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: var(--ui-surface);
    box-shadow: none;
}

/* Shared surfaces & Modern Glassmorphic Cards */
#content-layout .ant-card,
#content-layout .ant-tabs {
    color: var(--ui-text);
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden;
}

#content-layout .ant-card-hoverable:hover {
    transform: translateY(-2px);
    border-color: var(--ui-primary) !important;
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.12), 0 0 0 1px var(--ui-primary) !important;
}

.dark #content-layout .ant-card,
.dark #content-layout .ant-tabs {
    background: linear-gradient(135deg, rgba(21, 28, 40, 0.85) 0%, rgba(13, 19, 31, 0.9) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
}

.dark #content-layout .ant-card-hoverable:hover {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--ui-primary) !important;
}

html[data-theme="ultra-dark"] #content-layout .ant-card,
html[data-theme="ultra-dark"] #content-layout .ant-tabs {
    background: #09090b !important;
    border-color: #222222 !important;
    box-shadow: none !important;
}

html[data-theme="ultra-dark"] #content-layout .ant-card-hoverable:hover {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 1px var(--ui-primary) !important;
}

#sider,
.drawer-handle,
.ant-btn,
.ant-input,
.ant-input-number,
.ant-select-selection,
.ant-drawer-content,
.ant-dropdown-menu,
.ant-select-dropdown,
.ant-popover-inner,
.ant-calendar,
.ant-message-notice-content,
.ant-back-top-content,
.ant-radio-button-wrapper,
#login {
    box-shadow: none !important;
}

#content-layout .ant-card-head {
    min-height: 54px;
    padding-inline: 20px;
    border-bottom-color: var(--ui-border);
    background: var(--ui-surface-muted);
}

#content-layout .ant-card-head-title {
    padding-block: 15px;
    color: var(--ui-text);
    font-weight: 650;
}

#content-layout .ant-card-body {
    padding: 20px;
}

#content-layout .ant-card+.ant-card,
#content-layout .ant-space-item+.ant-space-item {
    margin-top: 16px;
}

/* Ensure vertical space containers and direct children stretch 100% full width */
#content-layout .ant-space-vertical,
.ant-space-vertical {
    display: flex !important;
    width: 100% !important;
}

#content-layout .ant-space-vertical > .ant-space-item,
.ant-space-vertical > .ant-space-item {
    width: 100% !important;
    min-width: 0 !important;
}

#content-layout .ant-tabs,
#content-layout .ant-collapse,
#content-layout .ant-card {
    width: 100% !important;
}

.ant-divider-horizontal {
    border-top-color: var(--ui-border);
}

.ant-divider-inner-text,
.ant-typography,
.ant-form,
.ant-form-item-label>label,
.ant-list-item,
.ant-collapse>.ant-collapse-item>.ant-collapse-header {
    color: var(--ui-text);
}

.ant-form-item-label>label {
    font-weight: 550;
}

.ant-list-split .ant-list-item,
.ant-collapse,
.ant-collapse>.ant-collapse-item,
.ant-collapse-content {
    border-color: var(--ui-border);
}

.ant-collapse {
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ant-collapse-content {
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border) !important;
}

/* Page Stats Cards (Inbounds, Clients) */
.page-stats-card {
    margin-bottom: 14px !important;
}

.page-stats-card .ant-card-body {
    padding: 14px 20px !important;
}

.stats-items-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    line-height: 1.6;
}

.stats-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text);
}

.stats-item .anticon {
    font-size: 15px;
    color: var(--ui-primary);
}

.stats-item .ant-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 9999px;
    line-height: 1.5;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-item .ant-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Save/restart toolbars use explicit flex alignment instead of Ant Space's
 * inline baseline layout, keeping every action centered on one visual line. */
.panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.panel-toolbar::before,
.panel-toolbar::after {
    display: none;
}

.panel-toolbar-actions,
.panel-toolbar-notice {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px;
}

.panel-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.panel-action-row .ant-btn {
    flex: 0 0 auto;
    min-width: 104px;
    margin: 0;
}

.panel-action-row>.anticon,
.panel-action-row>span {
    display: inline-flex;
    align-items: center;
}

.panel-toolbar-notice {
    justify-content: flex-end;
}

.panel-toolbar-notice-content {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.panel-inline-notice {
    width: fit-content;
    max-width: 100%;
}

/* Inputs and actions */
.ant-input,
.ant-input-number,
.ant-select-selection,
.ant-calendar-picker-input,
.ant-time-picker-input,
.ant-input-group-addon {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

.ant-input:not(textarea),
.ant-input-number,
.ant-select-selection--single,
.ant-calendar-picker-input,
.ant-time-picker-input {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
}

.ant-input:not(textarea) {
    padding: 0 11px;
    line-height: 36px;
}

.ant-input-number-input-wrap {
    height: 100% !important;
}

.ant-input-number-input {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 11px !important;
    line-height: 36px !important;
}

.ant-select-selection--single .ant-select-selection__rendered {
    line-height: 36px;
}

.ant-input:hover,
.ant-input:focus,
.ant-input-number:hover,
.ant-input-number-focused,
.ant-select-selection:hover,
.ant-select-focused .ant-select-selection,
.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: none;
}

.ant-input::placeholder,
.ant-select-selection__placeholder {
    color: var(--ui-text-muted);
    opacity: .72;
}

.ant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border-color: var(--ui-border-strong);
    border-radius: 9px;
    background: var(--ui-surface);
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.ant-btn-icon-only {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ant-btn>.anticon+span,
.ant-btn>span+.anticon {
    margin-left: 0;
}

.ant-btn-sm {
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 8px;
}

.ant-btn-sm.ant-btn-icon-only {
    width: 30px;
    height: 30px;
    padding: 0;
}

.ant-btn-lg {
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 11px;
}

.ant-btn-lg.ant-btn-icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
}

.ant-btn-circle,
.ant-btn-circle-outline {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.ant-btn-sm.ant-btn-circle,
.ant-btn-sm.ant-btn-circle-outline {
    width: 30px;
    height: 30px;
}

.ant-btn-lg.ant-btn-circle,
.ant-btn-lg.ant-btn-circle-outline {
    width: 44px;
    height: 44px;
}

.ant-btn-round {
    border-radius: 999px;
}

.ant-btn-primary {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    box-shadow: none !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
    border-color: var(--ui-primary-hover);
    background: var(--ui-primary-hover);
    box-shadow: none !important;
}

.ant-btn-default:hover,
.ant-btn-default:focus {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: none !important;
}

.ant-btn-danger {
    color: #ffffff;
    border-color: var(--ui-danger);
    background: var(--ui-danger);
    box-shadow: none !important;
}

.ant-btn-danger:hover,
.ant-btn-danger:focus {
    color: #ffffff;
    border-color: #ef4444;
    background: #ef4444;
    box-shadow: none !important;
}

.ant-btn[disabled],
.ant-btn[disabled]:hover,
.ant-btn[disabled]:focus {
    color: var(--ui-text-muted);
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
    box-shadow: none;
    opacity: .65;
}

.ant-btn-group {
    display: inline-flex;
}

.ant-btn-group>.ant-btn {
    border-radius: 0;
}

.ant-btn-group>.ant-btn:first-child {
    border-start-start-radius: 9px;
    border-end-start-radius: 9px;
}

.ant-btn-group>.ant-btn:last-child {
    border-start-end-radius: 9px;
    border-end-end-radius: 9px;
}

.ant-btn:focus-visible,
.ant-switch:focus-visible,
.ant-checkbox-input:focus-visible+.ant-checkbox-inner,
.ant-radio-input:focus-visible+.ant-radio-inner,
a:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

.ant-switch-checked {
    background-color: var(--ui-primary);
}

.ant-checkbox-inner {
    border-radius: 4px !important;
    border-color: var(--ui-border-strong);
    background-color: var(--ui-surface);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: var(--ui-primary);
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

.ant-checkbox-checked .ant-checkbox-inner:after {
    border-color: #ffffff !important;
}

.ant-checkbox-indeterminate .ant-checkbox-inner:after {
    background-color: #ffffff !important;
}

/* Tables and data density */
#content-layout .ant-table {
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: 9px !important;
    background: var(--ui-surface);
    box-shadow: none;
    outline: 0;
    overflow: hidden;
}

#content-layout .ant-table table {
    border-radius: 0 !important;
}

#content-layout .ant-table th,
#content-layout .ant-table td {
    border-radius: 0 !important;
}

#content-layout .ant-table-bordered .ant-table-body>table,
#content-layout .ant-table-bordered .ant-table-fixed-left table,
#content-layout .ant-table-bordered .ant-table-fixed-right table,
#content-layout .ant-table-bordered .ant-table-header>table {
    border: 0;
}

#content-layout .ant-table-thead>tr>th {
    padding: 13px 10px;
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
    white-space: nowrap;
}

#content-layout .ant-table-tbody>tr>td {
    padding: 12px 10px;
    border-color: var(--ui-border);
    word-break: normal;
}

#content-layout .ant-table-bordered .ant-table-thead>tr>th,
#content-layout .ant-table-bordered .ant-table-tbody>tr>td {
    border-right: 0;
}

#content-layout .ant-table-expanded-row>td {
    padding: 0 10px 10px !important;
    background: var(--ui-surface) !important;
}

#content-layout .ant-table-expanded-row .ant-table {
    margin: 0;
    border: 0;
    border-radius: 0 !important;
    background: var(--ui-surface);
}

#content-layout .ant-table-expanded-row .ant-table-thead>tr>th {
    background: var(--ui-surface-muted);
}

#content-layout .ant-table-expanded-row .ant-table-tbody,
#content-layout .ant-table-expanded-row .ant-table-tbody>tr {
    background: var(--ui-surface);
}

#content-layout .ant-table-expanded-row .ant-table-tbody>tr>td {
    background: transparent;
}

#content-layout .inbounds-table .ant-table-expanded-row>td {
    padding: 0 !important;
}

#content-layout .inbounds-table .ant-table-expanded-row .ant-table-wrapper,
#content-layout .inbounds-table .inbound-client-table {
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

#content-layout .inbounds-table .inbound-client-table .ant-table-body,
#content-layout .inbounds-table .inbound-client-table table {
    width: 100%;
}

#content-layout .ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background: var(--ui-primary-soft);
}

#content-layout .ant-table-tbody>tr.ant-table-row-selected>td,
#content-layout .ant-table-tbody>tr.ant-table-row-selected td,
#content-layout .ant-table-tbody>tr.ant-table-row-selected:hover>td,
#content-layout .ant-table-tbody>tr:hover.ant-table-row-selected>td,
#content-layout .ant-table-tbody>tr.ant-table-row-selected>td.ant-table-column-sort,
.dark .ant-table-tbody>tr.ant-table-row-selected>td,
.dark .ant-table-tbody>tr.ant-table-row-selected td,
.dark .ant-table-tbody>tr.ant-table-row-selected:hover>td,
.dark .ant-table-tbody>tr:hover.ant-table-row-selected>td,
.dark .ant-table-tbody>tr.ant-table-row-selected>td.ant-table-column-sort {
    background: var(--ui-primary-soft) !important;
}

#content-layout .ant-table-placeholder {
    padding: 34px 16px;
    color: var(--ui-text-muted);
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

#content-layout .ant-table-placeholder .ant-empty-normal {
    margin: 0;
    color: var(--ui-text-muted);
    background: transparent !important;
}

#content-layout .ant-table-placeholder .ant-empty-image {
    height: 42px;
}

.ant-table-pagination.ant-pagination {
    display: inline-block;
    margin-left: 16px;
}

.ant-pagination-item,
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.ant-pagination-item-active {
    border-color: var(--ui-primary);
}

.ant-table-row-expand-icon {
    border-color: var(--ui-border-strong);
    border-radius: 5px;
}

.client-table-header,
.client-table-odd-row {
    background: var(--ui-surface-muted);
}

/* Tabs, feedback, and overlays */
#content-layout .ant-tabs {
    padding: 0;
}

#content-layout .ant-tabs-bar {
    margin: 0;
    padding-inline: 14px;
    border-bottom-color: var(--ui-border);
}

#content-layout .ant-tabs-nav .ant-tabs-tab {
    margin-inline-end: 24px;
    padding-block: 16px;
    font-weight: 600;
}

.ant-tabs-nav .ant-tabs-tab:hover,
.ant-tabs-nav .ant-tabs-tab:focus,
.ant-tabs-nav .ant-tabs-tab-active,
#content-layout .ant-tabs-nav .ant-tabs-tab:hover,
#content-layout .ant-tabs-nav .ant-tabs-tab:focus,
#content-layout .ant-tabs-nav .ant-tabs-tab-active {
    color: var(--ui-primary);
}

.ant-tabs-ink-bar,
#content-layout .ant-tabs-ink-bar,
.ant-modal .ant-tabs-ink-bar,
.dark .ant-tabs-ink-bar,
.dark .ant-modal .ant-tabs-ink-bar {
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
    background: var(--ui-primary) !important;
    background-color: var(--ui-primary) !important;
}

.ant-modal .ant-tabs-bar {
    margin-bottom: 16px !important;
}

.ant-modal .ant-tabs-content {
    margin-top: 14px !important;
}

.metrics-modal-wide .ant-modal {
    width: 90vw !important;
    max-width: 1400px !important;
}

/* Ensure ant-collapse top and bottom border radius and borders are identical across single and multi-item collapse panels */
.ant-collapse {
    border-radius: var(--ui-radius) !important;
    overflow: hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Tab panes collapse panels stretch edge-to-edge seamlessly */
#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse > .ant-collapse-item {
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse > .ant-collapse-item:last-child {
    border-bottom: none !important;
}

#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    border-radius: 0 !important;
    padding: 14px 20px 14px 42px !important;
    padding-inline-start: 42px !important;
    padding-inline-end: 20px !important;
    font-weight: 600;
    transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse > .ant-collapse-item > .ant-collapse-header:hover,
#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse > .ant-collapse-item-active > .ant-collapse-header {
    background: var(--ui-surface-hover);
}

#content-layout .ant-tabs-tabpane:not(.xray-table-pane):not(.xray-advanced-pane) > .ant-collapse > .ant-collapse-item > .ant-collapse-content {
    border-radius: 0 !important;
    border-top: 1px solid var(--ui-border) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background: var(--ui-surface-muted);
}

.ant-collapse>.ant-collapse-item {
    border-radius: 0 !important;
}

.ant-collapse>.ant-collapse-item:first-child,
.ant-collapse>.ant-collapse-item:first-child>.ant-collapse-header {
    border-top-left-radius: var(--ui-radius) !important;
    border-top-right-radius: var(--ui-radius) !important;
}

.ant-collapse>.ant-collapse-item:last-child,
.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,
.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-content {
    border-bottom-left-radius: var(--ui-radius) !important;
    border-bottom-right-radius: var(--ui-radius) !important;
}

.ant-collapse>.ant-collapse-item:only-child>.ant-collapse-header {
    border-radius: var(--ui-radius) !important;
}

.ant-collapse>.ant-collapse-item:only-child.ant-collapse-item-active>.ant-collapse-header {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.xray-table-pane {
    padding: 18px 16px 16px;
}

.xray-advanced-pane {
    padding: 18px 16px 16px;
}

.xray-advanced-modes {
    margin: 12px 0 10px;
}

#content-layout .xray-advanced-pane .CodeMirror {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ui-radius);
}

.inbound-editor-tabs {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.inbound-json-pane {
    padding-top: 12px;
}

.inbound-json-pane .CodeMirror {
    width: 100%;
    height: min(58vh, 620px);
    margin: 0;
    overflow: hidden;
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius);
}

.inbound-json-invalid .CodeMirror {
    border-color: var(--ui-danger);
}

.xray-table-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    margin: 0 0 12px;
}

.xray-table-actions::before,
.xray-table-actions::after {
    display: none;
}

.xray-table-action-buttons,
.xray-table-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xray-table-tools {
    justify-content: flex-end;
}

.xray-table-action-buttons .ant-btn,
.xray-table-tools .ant-btn {
    margin: 0;
}

#content-layout .xray-table-pane .ant-table,
#content-layout .xray-data-table {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.xray-section-action {
    margin: 0 0 12px !important;
}

.ant-alert {
    border-radius: var(--ui-radius-sm);
}

.ant-alert-message {
    font-weight: 650;
}

.ant-alert-error {
    color: #be123c;
    border-color: #fecdd3;
    background: #fff1f2;
}

.ant-alert-warning {
    color: #a16207;
    border-color: #fde68a;
    background: #fffbeb;
}

.ant-alert-info {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.ant-alert-success {
    color: #047857;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.ant-tag {
    min-height: 22px;
    padding-inline: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 6px;
}

.ant-tag-blue {
    color: var(--ui-tag-blue-color, #1d4ed8) !important;
    border-color: var(--ui-tag-blue-border, #bfdbfe) !important;
    background: var(--ui-tag-blue-bg, #eff6ff) !important;
}

.ant-tag-green {
    color: var(--ui-tag-green-color, #047857) !important;
    border-color: var(--ui-tag-green-border, #a7f3d0) !important;
    background: var(--ui-tag-green-bg, #ecfdf5) !important;
}

.ant-tag-purple {
    color: var(--ui-tag-purple-color, #7e22ce) !important;
    border-color: var(--ui-tag-purple-border, #e9d5ff) !important;
    background: var(--ui-tag-purple-bg, #faf5ff) !important;
}

.ant-tag-orange {
    color: #a16207;
    border-color: #fde68a;
    background: #fffbeb;
}

.ant-tag-red {
    color: #be123c;
    border-color: #fecdd3;
    background: #fff1f2;
}

.ant-badge-status-dot {
    width: 8px;
    height: 8px;
}

.ant-badge-count {
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    font-size: 11px;
    font-weight: 650;
    line-height: 20px;
    border-radius: 6px;
    border: 1px solid var(--ui-surface);
    box-shadow: none;
}

.ant-radio-group-solid {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface-muted);
}

.ant-radio-group-solid .ant-radio-button-wrapper {
    height: 30px;
    padding-inline: 12px;
    color: var(--ui-text-muted);
    font-weight: 600;
    line-height: 30px;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent;
    box-shadow: none !important;
}

.ant-radio-group-solid .ant-radio-button-wrapper::before {
    display: none !important;
}

.ant-radio-group-solid .ant-radio-button-wrapper:hover {
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.ant-radio-group-solid .ant-radio-button-wrapper:focus-within {
    outline: 2px solid var(--ui-primary);
    outline-offset: -2px;
}

.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
    color: #ffffff !important;
    background: var(--ui-primary) !important;
}

.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    color: #ffffff !important;
    background: var(--ui-primary-hover) !important;
}

.ant-radio-group-solid .ant-radio-button-wrapper-disabled {
    color: var(--ui-text-muted);
    background: transparent;
    opacity: .55;
}

.ant-modal-content,
.ant-drawer-content,
.ant-dropdown-menu,
.ant-select-dropdown,
.ant-select-dropdown-menu,
.ant-popover-inner,
.ant-calendar,
.ant-message-notice-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface) !important;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
}

.ant-select-dropdown,
.ant-dropdown-menu {
    min-width: 85px;
}

body.dark .ant-dropdown-menu,
body.dark .ant-select-dropdown,
body.dark .ant-select-dropdown-menu,
#app.dark .ant-dropdown-menu,
#app.dark .ant-select-dropdown,
#app.dark .ant-select-dropdown-menu,
.dark .ant-dropdown-menu,
.dark .ant-select-dropdown,
.dark .ant-select-dropdown-menu,
.dark.ant-select-dropdown,
.dark.ant-dropdown-menu {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 50%), 0 8px 10px -6px rgb(0 0 0 / 50%) !important;
}

.ant-select-dropdown-menu-item,
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title,
.dark .ant-select-dropdown-menu-item,
.dark .ant-dropdown-menu-item,
.dark .ant-dropdown-menu-submenu-title,
.dark.ant-select-dropdown .ant-select-dropdown-menu-item {
    background-color: transparent !important;
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm) !important;
    padding: 6px 12px !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),
.ant-dropdown-menu-item:hover:not(.ant-dropdown-menu-item-disabled),
.ant-dropdown-menu-submenu-title:hover:not(.ant-dropdown-menu-submenu-title-disabled),
.dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
.dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),
.dark .ant-dropdown-menu-item:hover:not(.ant-dropdown-menu-item-disabled),
.dark .ant-dropdown-menu-submenu-title:hover:not(.ant-dropdown-menu-submenu-title-disabled),
.dark.ant-select-dropdown .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),
.dark.ant-select-dropdown .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

.ant-select-dropdown-menu-item-selected,
.ant-select-dropdown-menu-item-selected:hover,
.ant-dropdown-menu-item-selected,
.ant-dropdown-menu-item-selected:hover,
.dark .ant-select-dropdown-menu-item-selected,
.dark .ant-select-dropdown-menu-item-selected:hover,
.dark .ant-dropdown-menu-item-selected,
.dark .ant-dropdown-menu-item-selected:hover,
.dark.ant-select-dropdown .ant-select-dropdown-menu-item-selected {
    background-color: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    font-weight: 600 !important;
}

/* Dark dropdown menu item group titles */
body.dark .ant-dropdown-menu-item-group-title,
#app.dark .ant-dropdown-menu-item-group-title,
.dark .ant-dropdown-menu-item-group-title,
.dark .ant-menu-item-group-title,
.dark.ant-dropdown .ant-dropdown-menu-item-group-title,
.ant-dropdown-menu-dark .ant-dropdown-menu-item-group-title,
.dark .ant-menu-dark .ant-menu-item-group-title,
html[data-theme="ultra-dark"] .ant-dropdown-menu-item-group-title,
html[data-theme="ultra-dark"] .ant-menu-item-group-title {
    color: var(--ui-text-muted) !important;
}

/* DatePicker & Calendar design system styling */
.ant-calendar-picker-container,
.ant-calendar {
    font-family: inherit !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 14px 35px -10px rgb(0 0 0 / 25%) !important;
    overflow: hidden;
}

/* Header Input section ("Select date") */
.ant-calendar-input-wrap {
    height: 42px !important;
    padding: 6px 12px !important;
    border-bottom: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
}

.ant-calendar-input {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 10px !important;
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: 13px !important;
}

.ant-calendar-input::placeholder {
    color: var(--ui-text-muted) !important;
    opacity: 0.7;
}

/* Calendar Header ("Aug 2026", Prev/Next buttons) */
.ant-calendar-header {
    height: 40px !important;
    line-height: 40px !important;
    border-bottom: 1px solid var(--ui-border) !important;
    background: transparent !important;
}

.ant-calendar-header a,
.ant-calendar-header .ant-calendar-my-select,
.ant-calendar-header .ant-calendar-year-select,
.ant-calendar-header .ant-calendar-month-select,
.ant-calendar-header .ant-calendar-day-select {
    color: var(--ui-text) !important;
    font-weight: 650 !important;
    font-size: 14px !important;
    transition: color 0.15s ease !important;
}

.ant-calendar-header a:hover {
    color: var(--ui-primary) !important;
}

.ant-calendar-prev-year-btn,
.ant-calendar-prev-month-btn,
.ant-calendar-next-month-btn,
.ant-calendar-next-year-btn {
    color: var(--ui-text-muted) !important;
    font-size: 14px !important;
}

.ant-calendar-prev-year-btn:hover,
.ant-calendar-prev-month-btn:hover,
.ant-calendar-next-month-btn:hover,
.ant-calendar-next-year-btn:hover {
    color: var(--ui-primary) !important;
}

/* Calendar Grid & Days Header */
.ant-calendar-table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 2px !important;
}

.ant-calendar-column-header {
    color: var(--ui-text-muted) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.ant-calendar-date {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 2px auto !important;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-text) !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

.ant-calendar-date:hover {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

/* Today date styling */
.ant-calendar-today .ant-calendar-date {
    border: 1px solid var(--ui-primary) !important;
    color: var(--ui-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Selected date styling */
.ant-calendar-selected-day .ant-calendar-date,
.ant-calendar-selected-day .ant-calendar-date:hover {
    background: var(--ui-primary) !important;
    color: #ffffff !important;
    font-weight: 650 !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: 0 2px 8px rgb(37 99 235 / 30%) !important;
}

/* Outside month date styling */
.ant-calendar-last-month-cell .ant-calendar-date,
.ant-calendar-next-month-btn-day .ant-calendar-date,
.ant-calendar-last-month-cell .ant-calendar-date:hover,
.ant-calendar-next-month-btn-day .ant-calendar-date:hover {
    color: var(--ui-text-muted) !important;
    opacity: 0.35 !important;
    background: transparent !important;
}

/* Calendar Footer ("Now", "Select Time", "Ok") */
.ant-calendar-footer {
    border-top: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
    padding: 8px 12px !important;
    line-height: 30px !important;
}

.ant-calendar-footer-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ant-calendar-today-btn,
.ant-calendar-time-picker-btn {
    color: var(--ui-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: color 0.15s ease !important;
}

.ant-calendar-today-btn:hover,
.ant-calendar-time-picker-btn:hover {
    color: var(--ui-primary-hover) !important;
}

/* "Ok" button in calendar footer */
.ant-calendar-ok-btn,
.ant-calendar-footer .ant-calendar-ok-btn,
.ant-calendar-ok-btn.ant-btn {
    height: 30px !important;
    line-height: 28px !important;
    padding: 0 14px !important;
    background: var(--ui-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--ui-primary) !important;
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgb(37 99 235 / 25%) !important;
    transition: all 0.15s ease !important;
}

.ant-calendar-ok-btn:hover,
.ant-calendar-footer .ant-calendar-ok-btn:hover,
.ant-calendar-ok-btn.ant-btn:hover {
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
    color: #ffffff !important;
}

.ant-calendar-ok-btn-disabled,
.ant-calendar-footer .ant-calendar-ok-btn-disabled {
    background: var(--ui-surface-muted) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-muted) !important;
    opacity: 0.5 !important;
    box-shadow: none !important;
}

/* Time Picker Panel */
.ant-calendar-time-picker {
    background: var(--ui-surface) !important;
    border-top: 1px solid var(--ui-border) !important;
}

.ant-calendar-time-picker-inner {
    background: var(--ui-surface) !important;
}

.ant-calendar-time-picker-select {
    border-right: 1px solid var(--ui-border) !important;
}

.ant-calendar-time-picker-select li {
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm) !important;
    margin: 2px 4px !important;
    transition: background 0.15s ease !important;
}

.ant-calendar-time-picker-select li:hover {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

li.ant-calendar-time-picker-select-option-selected {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    font-weight: 650 !important;
}

/* Year, Month & Decade Selection Panels */
.ant-calendar-year-panel,
.ant-calendar-month-panel,
.ant-calendar-decade-panel {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

.ant-calendar-year-panel-header,
.ant-calendar-month-panel-header,
.ant-calendar-decade-panel-header {
    border-bottom: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-muted) !important;
    height: 40px !important;
    line-height: 40px !important;
}

.ant-calendar-year-panel-header a,
.ant-calendar-month-panel-header a,
.ant-calendar-decade-panel-header a {
    color: var(--ui-text) !important;
    font-weight: 650 !important;
}

.ant-calendar-year-panel-year,
.ant-calendar-month-panel-month,
.ant-calendar-decade-panel-decade {
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm) !important;
    transition: all 0.15s ease !important;
}

.ant-calendar-year-panel-year:hover,
.ant-calendar-month-panel-month:hover,
.ant-calendar-decade-panel-decade:hover {
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
    background: var(--ui-primary) !important;
    color: #ffffff !important;
    font-weight: 650 !important;
    border-radius: var(--ui-radius-sm) !important;
}

/* Modern Glassmorphic Modals */
.ant-modal-mask {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .ant-modal-mask,
#app.dark ~ .ant-modal-root .ant-modal-mask {
    background-color: rgba(0, 0, 0, 0.65);
}

.ant-modal-content {
    overflow: hidden;
    border-radius: var(--ui-radius-lg) !important;
    border: 1px solid var(--ui-border) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.16), 0 4px 16px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .ant-modal-content,
#app.dark .ant-modal-content {
    background: linear-gradient(135deg, rgba(24, 32, 47, 0.95) 0%, rgba(15, 23, 38, 0.98) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.7), 0 4px 20px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="ultra-dark"] .ant-modal-content {
    background: #0d0d10 !important;
    border-color: #27272a !important;
    box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.85) !important;
}

.panel-modal .ant-modal {
    top: 32px;
    width: min(600px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px);
    padding-bottom: 32px;
}

.panel-modal-sm .ant-modal {
    width: min(480px, calc(100vw - 40px)) !important;
}

.panel-modal-lg .ant-modal {
    width: min(760px, calc(100vw - 40px)) !important;
}

.panel-modal-detail .ant-modal,
#client-detail-modal.ant-modal,
#inbound-info-modal.ant-modal {
    width: min(880px, calc(100vw - 40px)) !important;
}

.panel-modal-xl .ant-modal {
    width: min(900px, calc(100vw - 40px)) !important;
}

.panel-modal-fluid .ant-modal {
    width: min(1200px, calc(100vw - 40px)) !important;
}

.panel-modal-xxl .ant-modal,
.metrics-modal-wide .ant-modal {
    width: min(1360px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
}

.panel-modal-auto .ant-modal {
    width: fit-content !important;
    max-width: calc(100vw - 40px);
}

.panel-modal-auto .qr-modal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.panel-modal-qr .ant-modal {
    top: 36px;
    width: fit-content !important;
    min-width: min(290px, calc(100vw - 32px)) !important;
    max-width: min(580px, calc(100vw - 32px)) !important;
    margin: 0 auto !important;
    padding-bottom: 24px;
}

.panel-modal-qr .ant-modal-body {
    max-height: calc(100vh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px !important;
}

.panel-modal-qr .qr-modal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    row-gap: 20px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
}

.panel-modal-qr .qr-box {
    width: 220px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.panel-modal-qr .qr-box .qr-tag {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

.panel-modal-qr .qr-box .qr-bg,
.panel-modal-qr .qr-box .qr-bg-sub {
    width: 220px !important;
    height: 220px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.panel-modal-qr .qr-box .qr-copy-btn {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    border-radius: 6px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
}

.panel-modal-qr .ant-tabs {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.panel-modal-qr .ant-tabs-bar {
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--ui-border);
}

.node-client-qr-title {
    display: flex;
    align-items: center;
    padding-right: 36px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.node-client-qr-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.ant-modal-header,
.ant-drawer-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    background: var(--ui-surface-muted);
}

.ant-modal-title,
.ant-drawer-title,
.ant-popover-title {
    color: var(--ui-text);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -0.2px;
}

.ant-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 14px;
    right: 14px;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--ui-text-muted);
}

.ant-modal-close:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-text);
}

.ant-modal-close-x {
    width: auto;
    height: auto;
    line-height: 1;
}

.panel-modal .ant-modal-body {
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
    padding: 22px 24px;
    overflow-x: hidden;
    overflow-y: auto;
}

.panel-modal .ant-form-item {
    margin-bottom: 8px;
}

.panel-modal .ant-form-item-label,
.panel-modal .ant-form-item-control {
    padding-block: 3px;
}

.panel-modal .ant-input:not(textarea) {
    padding: 0 11px;
    line-height: 38px;
}

.panel-modal .ant-input:not(textarea),
.panel-modal .ant-input-number,
.panel-modal .ant-select-selection--single,
.panel-modal .ant-calendar-picker-input,
.panel-modal .ant-time-picker-input {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

.panel-modal .ant-input-number-input {
    line-height: 38px !important;
    padding: 0 11px !important;
}

.panel-modal .ant-select-selection--single .ant-select-selection__rendered {
    line-height: 38px;
}

.ant-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--ui-border);
    border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
    background: var(--ui-surface-muted);
}

.panel-modal .ant-modal-footer .ant-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 78px;
    height: 38px;
    margin: 0;
    padding: 0 18px !important;
    line-height: 36px;
}

.ant-modal-footer .ant-btn+.ant-btn,
.ant-modal-confirm-btns .ant-btn+.ant-btn {
    margin-left: 10px !important;
    margin-inline-start: 10px !important;
}

.ant-modal-wrap,
.ant-drawer,
.ant-select-dropdown,
.ant-dropdown,
.ant-popover {
    max-width: 100vw;
}

.ant-tooltip-inner {
    border-radius: var(--ui-radius-sm);
}

.ant-back-top-content,
.dark .ant-back-top-content {
    border-radius: 12px;
    background: var(--ui-primary) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.ant-back-top-content:hover,
.dark .ant-back-top-content:hover {
    background: var(--ui-primary-hover) !important;
    color: #ffffff !important;
}

/* Modern Progress Bars & Dashboard Gauges */
.ant-progress-line {
    font-size: 12px;
}

.ant-progress-inner {
    background-color: var(--ui-surface-muted) !important;
    border-radius: 9999px !important;
    overflow: hidden;
}

.dark .ant-progress-inner {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="ultra-dark"] .ant-progress-inner {
    background-color: #1a1a1e !important;
}

.ant-progress-bg {
    border-radius: 9999px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
}

.ant-progress:not(.ant-progress-status-exception):not(.ant-progress-status-success) .ant-progress-bg {
    background-color: var(--ui-primary);
}

#content-layout .ant-progress-text {
    color: var(--ui-text);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.2px;
}

#content-layout .ant-progress-circle-trail {
    stroke: rgba(0, 0, 0, 0.06);
    transition: stroke 0.3s;
}

.dark #content-layout .ant-progress-circle-trail {
    stroke: rgba(255, 255, 255, 0.08);
}

html[data-theme="ultra-dark"] #content-layout .ant-progress-circle-trail {
    stroke: #222226;
}

#content-layout .ant-progress-circle-path {
    stroke-linecap: round !important;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease !important;
}

#login {
    padding: 32px !important;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: none;
}

#login .title {
    margin-bottom: 28px;
    color: var(--ui-text);
}

#login .ant-input,
#login .ant-select-selection {
    min-height: 44px;
}

#login .ant-btn-primary-login {
    width: 100%;
    height: 50px;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    background: var(--ui-primary);
    color: #ffffff;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

#login .ant-btn-primary-login:hover,
#login .ant-btn-primary-login:focus {
    width: 100%;
    background: var(--ui-primary-hover);
    color: #ffffff;
    box-shadow: none !important;
}

#login .ant-btn-primary-login:active {
    width: 100%;
    background: var(--ui-primary);
    color: #ffffff;
    box-shadow: none !important;
}

body.dark #login .ant-btn-primary-login,
#app.dark #login .ant-btn-primary-login {
    background: var(--ui-primary);
    color: #ffffff;
    box-shadow: none !important;
}

body.dark #login .ant-btn-primary-login:hover,
body.dark #login .ant-btn-primary-login:focus,
#app.dark #login .ant-btn-primary-login:hover,
#app.dark #login .ant-btn-primary-login:focus {
    background: var(--ui-primary-hover);
    color: #ffffff;
    box-shadow: none !important;
}

body.light #login,
body.light #login:hover {
    border-color: rgb(255 255 255 / 60%);
    background: #ffffff;
    box-shadow: none;
}

/* Dark theme */
#app.dark,
body.dark {
    --ui-primary: #4f8cff;
    --ui-primary-hover: #74a4ff;
    --ui-primary-soft: rgb(79 140 255 / 14%);
    --ui-success: #34d399;
    --ui-warning: #fbbf24;
    --ui-danger: #e5484d;
    --ui-bg: #0c111b;
    --ui-surface: #151c28;
    --ui-surface-muted: #1d2735;
    --ui-border: #2c3849;
    --ui-border-strong: #3b4a5e;
    --ui-text: #e8edf5;
    --ui-text-muted: #9aa9bc;
    --ui-shadow-sm: none;
    --ui-shadow: none;
    --ui-focus: 0 0 0 3px rgb(79 140 255 / 22%);
    --dark-color-background: var(--ui-bg);
    --dark-color-surface-100: var(--ui-surface);
    --dark-color-surface-200: var(--ui-surface-muted);
    --dark-color-surface-300: var(--ui-border);
    --dark-color-surface-400: var(--ui-border);
    --dark-color-surface-500: var(--ui-border-strong);
    --dark-color-surface-600: var(--ui-border-strong);
    --dark-color-surface-700: var(--ui-surface);
    --dark-color-surface-700-rgb: 21, 28, 40;
    --dark-color-table-hover: var(--ui-primary-soft);
    --dark-color-table-ring: var(--ui-border);
    --dark-color-text-primary: var(--ui-text);
    --dark-color-stroke: var(--ui-border);
    --dark-color-btn-danger: var(--ui-danger);
    --dark-color-btn-danger-hover: #f15b60;
    --dark-color-scrollbar: var(--ui-border-strong);
    --dark-color-spin-container: var(--ui-surface);
}

#app.dark #content-layout {
    background: var(--ui-bg);
}

#app.dark #sider,
.dark#sider-drawer .ant-drawer-content,
.dark#sider-drawer .drawer-handle {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

#app.dark #sider .ant-layout-sider-trigger {
    color: var(--ui-text-muted);
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

body.dark .ant-input,
body.dark .ant-input-number,
body.dark .ant-select-selection,
body.dark .ant-calendar-picker-input,
body.dark .ant-time-picker-input,
body.dark .ant-input-group-addon,
#app.dark .ant-input,
#app.dark .ant-input-number,
#app.dark .ant-select-selection,
#app.dark .ant-calendar-picker-input,
#app.dark .ant-time-picker-input,
#app.dark .ant-input-group-addon {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-muted);
}

body.dark .ant-input:hover,
body.dark .ant-input:focus,
#app.dark .ant-input:hover,
#app.dark .ant-input:focus {
    background: var(--ui-surface-muted);
}

body.dark .anticon-search,
body.dark .ant-input-search-icon,
body.dark .ant-input-prefix,
body.dark .ant-input-suffix,
body.dark .ant-input-clear-icon,
#app.dark .anticon-search,
#app.dark .ant-input-search-icon,
#app.dark .ant-input-prefix,
#app.dark .ant-input-suffix,
#app.dark .ant-input-clear-icon,
.dark .anticon-search,
.dark .ant-input-search-icon,
.dark .ant-input-prefix,
.dark .ant-input-suffix,
.dark .ant-input-clear-icon {
    color: var(--ui-text-muted) !important;
}

body.dark .anticon-search:hover,
body.dark .ant-input-search-icon:hover,
body.dark .ant-input-clear-icon:hover,
#app.dark .anticon-search:hover,
#app.dark .ant-input-search-icon:hover,
#app.dark .ant-input-clear-icon:hover,
.dark .anticon-search:hover,
.dark .ant-input-search-icon:hover,
.dark .ant-input-clear-icon:hover {
    color: var(--ui-text) !important;
}

body.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger),
#app.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-muted) !important;
}

body.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):hover,
body.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):focus,
#app.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):hover,
#app.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):focus {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft) !important;
}

body.dark .ant-btn-danger,
#app.dark .ant-btn-danger {
    color: #ffffff;
    border-color: var(--ui-danger);
    background: var(--ui-danger);
}

body.dark .ant-btn-danger:hover,
body.dark .ant-btn-danger:focus,
#app.dark .ant-btn-danger:hover,
#app.dark .ant-btn-danger:focus {
    color: #ffffff;
    border-color: #f15b60;
    background: #f15b60;
}

body.dark .ant-btn[disabled],
body.dark .ant-btn[disabled]:hover,
body.dark .ant-btn[disabled]:focus,
#app.dark .ant-btn[disabled],
#app.dark .ant-btn[disabled]:hover,
#app.dark .ant-btn[disabled]:focus {
    color: #748399 !important;
    border-color: var(--ui-border) !important;
    background: #202a38 !important;
    box-shadow: none;
    opacity: 1;
}

#app.dark .ant-collapse,
#app.dark .ant-collapse>.ant-collapse-item,
#app.dark .ant-collapse>.ant-collapse-item>.ant-collapse-header {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
}

#app.dark .ant-collapse-content {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

body.dark .ant-alert-error,
#app.dark .ant-alert-error {
    color: #fda4af;
    border-color: #713042;
    background: #2b171d;
}

body.dark .ant-alert-warning,
#app.dark .ant-alert-warning {
    color: #fcd34d;
    border-color: #67501d;
    background: #2a2113;
}

body.dark .ant-alert-info,
#app.dark .ant-alert-info {
    color: #93c5fd;
    border-color: #28557b;
    background: #132538;
}

body.dark .ant-alert-success,
#app.dark .ant-alert-success {
    color: #6ee7b7;
    border-color: #245c49;
    background: #10261f;
}

body.dark .ant-alert .ant-alert-message,
body.dark .ant-alert .ant-alert-description,
#app.dark .ant-alert .ant-alert-message,
#app.dark .ant-alert .ant-alert-description {
    color: inherit;
}

body.dark .ant-tag,
#app.dark .ant-tag {
    color: #c9d4e2;
    border-color: #3a495d;
    background: #202a38;
}

body.dark .ant-tag-blue,
#app.dark .ant-tag-blue {
    color: var(--ui-tag-blue-color, #93c5fd) !important;
    border-color: var(--ui-tag-blue-border, #28557b) !important;
    background: var(--ui-tag-blue-bg, #132538) !important;
}

body.dark .ant-tag-green,
#app.dark .ant-tag-green {
    color: var(--ui-tag-green-color, #6ee7b7) !important;
    border-color: var(--ui-tag-green-border, #245c49) !important;
    background: var(--ui-tag-green-bg, #10261f) !important;
}

body.dark .ant-tag-purple,
#app.dark .ant-tag-purple {
    color: var(--ui-tag-purple-color, #d8b4fe) !important;
    border-color: var(--ui-tag-purple-border, #5b3b72) !important;
    background: var(--ui-tag-purple-bg, #281d33) !important;
}

body.dark .ant-tag-orange,
#app.dark .ant-tag-orange {
    color: #fcd34d;
    border-color: #67501d;
    background: #2a2113;
}

body.dark .ant-tag-red,
#app.dark .ant-tag-red {
    color: #fda4af;
    border-color: #713042;
    background: #2b171d;
}

/* Checkbox dark mode styles */
body.dark .ant-checkbox-inner,
#app.dark .ant-checkbox-inner,
.dark .ant-checkbox-inner {
    background-color: var(--ui-surface-muted, #1d2735) !important;
    border: 1px solid var(--ui-border-strong, #3b4a5e) !important;
}

body.dark .ant-checkbox-wrapper:hover .ant-checkbox-inner,
body.dark .ant-checkbox:hover .ant-checkbox-inner,
#app.dark .ant-checkbox-wrapper:hover .ant-checkbox-inner,
#app.dark .ant-checkbox:hover .ant-checkbox-inner,
.dark .ant-checkbox-wrapper:hover .ant-checkbox-inner,
.dark .ant-checkbox:hover .ant-checkbox-inner {
    border-color: var(--ui-primary, #4f8cff) !important;
}

body.dark .ant-checkbox-checked .ant-checkbox-inner,
#app.dark .ant-checkbox-checked .ant-checkbox-inner,
.dark .ant-checkbox-checked .ant-checkbox-inner,
body.dark .ant-checkbox-indeterminate .ant-checkbox-inner,
#app.dark .ant-checkbox-indeterminate .ant-checkbox-inner,
.dark .ant-checkbox-indeterminate .ant-checkbox-inner {
    background-color: var(--ui-primary, #4f8cff) !important;
    border-color: var(--ui-primary, #4f8cff) !important;
}

body.dark .ant-checkbox-checked .ant-checkbox-inner:after,
#app.dark .ant-checkbox-checked .ant-checkbox-inner:after,
.dark .ant-checkbox-checked .ant-checkbox-inner:after {
    border-color: #ffffff !important;
}

body.dark .ant-checkbox-indeterminate .ant-checkbox-inner:after,
#app.dark .ant-checkbox-indeterminate .ant-checkbox-inner:after,
.dark .ant-checkbox-indeterminate .ant-checkbox-inner:after {
    background-color: #ffffff !important;
}

body.dark .ant-checkbox-disabled .ant-checkbox-inner,
#app.dark .ant-checkbox-disabled .ant-checkbox-inner,
.dark .ant-checkbox-disabled .ant-checkbox-inner {
    background-color: var(--ui-surface, #151c28) !important;
    border-color: var(--ui-border, #2c3849) !important;
    opacity: 0.5 !important;
}

body.dark .ant-checkbox-disabled + span,
#app.dark .ant-checkbox-disabled + span,
.dark .ant-checkbox-disabled + span {
    color: var(--ui-text-muted, #9aa9bc) !important;
}

body.dark .ant-checkbox-wrapper,
#app.dark .ant-checkbox-wrapper,
.dark .ant-checkbox-wrapper {
    color: var(--ui-text, #e8edf5);
}

#app.dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background: var(--ui-primary-soft) !important;
}

#app.dark #content-layout .ant-table-expanded-row,
#app.dark #content-layout .ant-table-expanded-row>td,
#app.dark #content-layout .ant-table-expanded-row .ant-table,
#app.dark #content-layout .ant-table-expanded-row .ant-table-tbody,
#app.dark #content-layout .ant-table-expanded-row .ant-table-tbody>tr {
    background: var(--ui-surface) !important;
}

#app.dark #content-layout .ant-table-expanded-row .ant-table-tbody>tr>td {
    background: transparent !important;
}

#app.dark .ant-modal-content,
#app.dark .ant-drawer-content,
.dark .ant-modal-content,
.dark .ant-drawer-content,
.dark .ant-dropdown-menu,
.dark .ant-select-dropdown,
.dark .ant-popover-inner,
.dark .ant-calendar,
.dark .ant-message-notice-content {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-surface);
}

#app.dark .ant-modal-header,
#app.dark .ant-drawer-header,
.dark .ant-modal-header,
.dark .ant-drawer-header {
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
}

body.dark .ant-modal-footer,
#app.dark .ant-modal-footer {
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
}

body.dark #login {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-surface);
    box-shadow: none;
}

body.dark #login .title {
    color: var(--ui-text);
}

html[data-theme="ultra-dark"] #app.dark,
html[data-theme="ultra-dark"] body.dark {
    --ui-primary: #5b8def;
    --ui-primary-hover: #7ca6f5;
    --ui-primary-soft: rgb(91 141 239 / 14%);
    --ui-bg: #090b10;
    --ui-surface: #11141a;
    --ui-surface-muted: #191d25;
    --ui-border: #292f3a;
    --ui-border-strong: #3a424f;
    --ui-text: #edf0f5;
    --ui-text-muted: #9ca3af;
}

.qr-bg-sub-inner:hover,
.dark .qr-bg-sub-inner:hover {
    backdrop-filter: none !important;
}

.qr-bg-sub,
.dark .qr-bg-sub {
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-muted);
    background-image: none;
}

/* Responsive behavior */
@media (max-width: 992px) {
    #content-layout>.ant-layout-content {
        padding: 18px;
    }

    #content-layout .ant-card-body {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    #content-layout>.ant-layout-content {
        padding: 64px 10px 18px;
    }

    #content-layout .ant-card,
    #content-layout .ant-tabs,
    #content-layout .ant-alert-error {
        margin-inline: 0;
    }

    /* Hide disabled & ended (depleted) status badges on client name and near progressbar on mobile */
    .client-status-badge,
    .usage-bar-box .status-badge,
    .usage-bar-box .client-status-badge,
    .usage-bar-box .ant-tag {
        display: none !important;
    }

    #content-layout .ant-card-head {
        padding-inline: 14px;
    }

    #content-layout .ant-card-body {
        padding: 14px;
    }

    .panel-toolbar-notice {
        justify-content: flex-start;
        margin-top: 6px;
    }

    .panel-toolbar-notice-content {
        justify-content: flex-start;
    }

    .panel-inline-notice {
        width: 100%;
    }

    .xray-table-pane {
        padding: 14px 10px 12px;
    }

    .xray-advanced-pane {
        padding: 14px 10px 12px;
    }

    .xray-table-actions {
        align-items: flex-start;
        gap: 8px;
    }

    .xray-table-action-buttons {
        flex-wrap: wrap;
    }

    #content-layout .ant-tabs-bar {
        overflow-x: auto;
        overflow-y: hidden;
        padding-inline: 8px;
    }

    #content-layout .ant-tabs-nav .ant-tabs-tab {
        margin-inline-end: 6px;
        padding: 13px 10px;
        white-space: nowrap;
    }

    #content-layout .ant-table-thead>tr>th,
    #content-layout .ant-table-tbody>tr>td {
        padding: 10px 8px;
    }

    .ant-modal {
        max-width: calc(100vw - 20px);
        margin: 10px auto;
        padding-bottom: 10px;
    }

    .panel-modal:not(.panel-modal-auto) .ant-modal {
        top: 8px;
        width: calc(100vw - 20px) !important;
    }

    .panel-modal-auto .ant-modal {
        top: 8px;
        width: fit-content !important;
    }

    .panel-modal-qr .ant-modal {
        top: 14px !important;
        width: fit-content !important;
        min-width: min(280px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 auto !important;
        padding-bottom: 14px;
    }

    .panel-modal-qr .ant-modal-body {
        max-height: calc(100vh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
        padding: 16px 14px !important;
    }

    .panel-modal-qr .qr-modal {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .panel-modal .ant-modal-body {
        max-height: calc(100vh - 136px);
        max-height: calc(100dvh - 136px);
        padding: 16px;
        overflow-y: auto;
    }

    .ant-modal-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px 16px;
    }

    .panel-modal .ant-modal-footer .ant-btn {
        min-width: 72px;
        padding: 0 16px !important;
    }

    .ant-modal-footer .ant-btn+.ant-btn,
    .ant-modal-confirm-btns .ant-btn+.ant-btn {
        margin-left: 8px !important;
        margin-inline-start: 8px !important;
    }

    .ant-pagination-options {
        margin-left: 0;
    }

    .ant-table-pagination.ant-pagination {
        justify-content: center;
    }

    #login {
        margin: 72px 0 24px !important;
        padding: 24px 18px !important;
    }
}

@media (max-width: 480px) {
    #content-layout>.ant-layout-content {
        padding-inline: 8px;
    }

    .ant-btn {
        height: 38px;
        padding-inline: 13px;
        line-height: 36px;
    }

    .ant-btn-sm {
        height: 30px;
        padding-inline: 10px;
        line-height: 28px;
    }

    .ant-btn-circle,
    .ant-btn-circle-outline {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    .ant-btn-sm.ant-btn-circle,
    .ant-btn-sm.ant-btn-circle-outline {
        width: 30px;
        min-width: 30px;
    }

    .ant-form-item-control-wrapper,
    .ant-calendar-picker,
    .ant-select,
    .ant-input-number {
        max-width: 100%;
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Panel theme color switcher */
.ant-menu-theme-switch.panel-color-picker-menu-item {
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    cursor: default !important;
    background: transparent !important;
}

.ant-menu-theme-switch.panel-color-picker-menu-item:hover {
    background: transparent !important;
}

.panel-color-picker-wrapper {
    padding: 8px 16px 10px;
    border-top: 1px solid var(--ui-border);
    margin-top: 4px;
    user-select: none;
}


.panel-color-picker-wrapper.login-color-picker {
    border-top: none;
    margin-top: 0;
}

.panel-color-picker-title {
    margin-bottom: 8px;
    color: var(--ui-text-muted);
    font-weight: 500;
    font-size: 12px;
}

.panel-color-picker-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.panel-color-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: #ffffff;
    font-size: 11px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.panel-color-swatch:hover {
    transform: scale(1.18);
}

.panel-color-swatch.active {
    border-color: var(--ui-surface);
    box-shadow: 0 0 0 2px var(--ui-primary);
}

.panel-color-swatch.custom-picker {
    overflow: hidden;
}

.panel-color-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Smooth Page Load Entrance Animation */
.list-enter-active {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.list-leave-active {
    transition: transform 0.25s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.25s ease-in !important;
}

.list-enter {
    opacity: 0 !important;
    transform: translateY(24px) scale(0.98) !important;
}

.list-leave-to,
.list-leave-active {
    opacity: 0 !important;
    transform: translateY(-16px) scale(0.99) !important;
}

/* Inbound selection grid styling */
.inbound-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-muted);
    margin: 10px 0 14px;
}

.inbound-select-grid .ant-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 8px 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    transition: all 0.2s ease;
    line-height: 1.4;
}

.inbound-select-grid .ant-checkbox-wrapper:hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.inbound-select-grid .ant-checkbox-wrapper .ant-checkbox {
    margin-right: 10px;
    flex-shrink: 0;
}

.inbound-select-grid .ant-checkbox-wrapper .ant-checkbox + span {
    padding-left: 2px;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-weight: 500;
    color: var(--ui-text);
}

[dir="rtl"] .inbound-select-grid .ant-checkbox-wrapper .ant-checkbox,
.ant-modal[dir="rtl"] .inbound-select-grid .ant-checkbox-wrapper .ant-checkbox {
    margin-right: 0;
    margin-left: 10px;
}