/* ========================================
   AntDesign Override CSS
   This file MUST load after ant-design-blazor.css
   Using custom .mlekerp-menu class for maximum specificity
   ======================================== */

/* ========================================
   Global Text + Icon Color Defaults — TASK_04 systemic fix.
   AntDesign's bundled CSS sets `body { color: rgba(0, 0, 0, 0.85) }` which
   leaks light-theme text into any element rendered outside an AntDesign
   component class chain. We override here (loads AFTER ant-design-blazor.css)
   so every text element on a dark surface inherits white/secondary by default.
   Component-specific rules later in this file remain authoritative.
   ======================================== */
body {
    color: var(--text-primary);
}

.anticon,
.material-icons {
    color: currentColor;
}

/* ========================================
   Sidebar Navigation - Override AntDesign Blue
   Using custom class + AntDesign selectors for MAXIMUM specificity
   ======================================== */

/* HIGHEST SPECIFICITY: Custom class + doubled AntDesign class + element */
ul.mlekerp-menu.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) li.ant-menu-item-selected,
ul.mlekerp-menu.ant-menu.ant-menu-dark .ant-menu-item-selected,
.mlekerp-menu.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected,
.mlekerp-menu.ant-menu.ant-menu-dark .ant-menu-item-selected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: var(--color-primary) !important;
}

/* Override selected item text color */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item-selected {
    color: var(--color-primary) !important;
    border-right: 0;
}

/* Override link colors inside selected item */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected > a,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected > span > a,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected > a:hover,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected > span > a:hover,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item-selected a {
    color: var(--color-primary) !important;
}

/* Override icon colors inside selected item */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .anticon,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item-selected .anticon {
    color: var(--color-primary) !important;
}

/* Override icon + span colors */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon + span,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .anticon + span,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item-selected span {
    color: var(--color-primary) !important;
}

/* Override menu title content */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content a,
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content span {
    color: var(--color-primary) !important;
}

/* Override SVG fill */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected svg,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item-selected svg {
    fill: var(--color-primary) !important;
}

/* Quad class specificity for extra safety */
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected,
ul.mlekerp-menu.ant-menu.ant-menu-root.ant-menu-dark li.ant-menu-item.ant-menu-item-selected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: var(--color-primary) !important;
}

ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected .anticon,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected a,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected span {
    color: var(--color-primary) !important;
}

/* ========================================
   Menu Item Styling - Border Radius, Height, Indicator
   ======================================== */

/* Menu container - constrain overflow */
.mlekerp-menu.ant-menu,
ul.mlekerp-menu.ant-menu {
    overflow: hidden !important;
    padding: 0 8px !important;
}

/* All menu items - rounded corners and proper sizing */
.mlekerp-menu.ant-menu-dark .ant-menu-item,
ul.mlekerp-menu.ant-menu.ant-menu-dark .ant-menu-item,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item {
    border-radius: 8px !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 4px 0 !important;
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    transition: all 150ms ease !important;
}

/* Selected item - orange indicator bar on left */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected::before,
ul.mlekerp-menu.ant-menu.ant-menu-dark .ant-menu-item-selected::before,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item-selected::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 20px !important;
    background: var(--color-primary) !important;
    border-radius: 0 2px 2px 0 !important;
}

/* Hide the default right border indicator */
.mlekerp-menu.ant-menu-dark .ant-menu-item-selected::after,
ul.mlekerp-menu.ant-menu.ant-menu-dark .ant-menu-item-selected::after {
    display: none !important;
    border-right: none !important;
}

/* ========================================
   Sidebar & Menu - Full Glassy Dark Theme
   ======================================== */

/* Sidebar container - matches main app dark theme with subtle orange tint */
.main-sider.ant-layout-sider,
.main-sider.ant-layout-sider-dark,
aside.main-sider.ant-layout-sider,
aside.main-sider.ant-layout-sider-dark,
.ant-layout-sider.main-sider,
.ant-layout-sider-dark.main-sider {
    background: radial-gradient(ellipse at 50% 0%, rgba(230, 122, 46, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-secondary) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Sider children container — flex column that owns the scroll-pin trio:
   children flex-column + min-height:0 + overflow:hidden lets the inner <nav>
   shrink correctly; the trigger button is the final flex child, pinned. */
.main-sider .ant-layout-sider-children,
aside.main-sider .ant-layout-sider-children {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Sidebar scroll formula (F-174 — lifted from mlekerp). The <nav> child owns
   the actual scroll; trigger stays pinned outside the scroll region. */
.main-sider .ant-layout-sider-children > nav,
aside.main-sider .ant-layout-sider-children > nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.main-sider .ant-layout-sider-children > nav::-webkit-scrollbar {
    width: 6px;
}

.main-sider .ant-layout-sider-children > nav::-webkit-scrollbar-track {
    background: transparent;
}

.main-sider .ant-layout-sider-children > nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    transition: background var(--transition-base);
}

.main-sider .ant-layout-sider-children > nav::-webkit-scrollbar-thumb:hover {
    background: rgba(230, 122, 46, 0.4);
}

/* Override AntDesign's default dark sider background - MAXIMUM SPECIFICITY */
.ant-layout-sider.ant-layout-sider-dark.main-sider,
aside.ant-layout-sider.ant-layout-sider-dark.main-sider,
aside.main-sider.ant-layout-sider.ant-layout-sider-dark,
aside.main-sider.ant-layout-sider.ant-layout-sider-dark.ant-layout-sider-has-trigger,
.ant-layout-has-sider aside.main-sider,
section.ant-layout aside.main-sider {
    background: radial-gradient(ellipse at 50% 0%, rgba(230, 122, 46, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-secondary) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Menu container - transparent to show sider background */
.mlekerp-menu.ant-menu-dark,
.mlekerp-menu.ant-menu.ant-menu-dark,
.mlekerp-menu.ant-menu-dark.ant-menu-inline,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline {
    background: transparent !important;
    flex: 1;
}

/* ========================================
   NON-SELECTED Menu Items - Override AntDesign Blue
   Using high specificity with mlekerp-menu class
   ======================================== */

/* Non-selected items - base styling (exclude selected) */
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected),
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected),
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) {
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
    margin: 4px 8px !important;
    border-radius: 8px !important;
    transition: all 150ms ease !important;
}

/* Non-selected items - icons */
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) .anticon,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected) .anticon,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Non-selected items - links and text */
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) a,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) span,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected) a,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected) span,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) span,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Non-selected items - HOVER state (glassy) */
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover a,
ul.mlekerp-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover span,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover a,
ul.mlekerp-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover span,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover a,
.mlekerp-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover span {
    color: var(--text-primary) !important;
}

/* Sider trigger (collapse button) - blends with sidebar gradient */
.main-sider .ant-layout-sider-trigger,
aside.main-sider .ant-layout-sider-trigger,
.ant-layout-sider-trigger {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
    height: 56px !important;
    line-height: 56px !important;
    transition: all 150ms ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.main-sider .ant-layout-sider-trigger:hover,
aside.main-sider .ant-layout-sider-trigger:hover,
.ant-layout-sider-trigger:hover {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-primary) !important;
}

/* Collapsed sider — content shrinks to the narrower margin (was scoped to
   MainLayout.razor.css but the scoped CSS bans `::deep .ant-layout-*`). */
.ant-layout-sider-collapsed + .content-layout,
.ant-layout-sider-collapsed ~ .content-layout {
    margin-left: 80px !important;
}

/* Mobile: hide the sider trigger (was in MainLayout.razor.css media query). */
@media (max-width: 768px) {
    .main-sider .ant-layout-sider-trigger,
    aside.main-sider .ant-layout-sider-trigger,
    .ant-layout-sider-trigger {
        display: none !important;
    }
}

/* Remove the default blue right border */
.main-sider .ant-menu-item-selected::after,
.ant-menu-dark .ant-menu-item-selected::after,
.ant-menu.ant-menu-dark .ant-menu-item-selected::after {
    border-right-color: transparent !important;
    display: none !important;
}

/* Hover state */
.main-sider .ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected) {
    color: var(--text-primary) !important;
}

.main-sider .ant-menu-dark .ant-menu-item:hover .anticon,
.ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected) .anticon {
    color: var(--text-primary) !important;
}

/* Non-selected items - default styling */
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content a,
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content a,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   Dropdown Overrides (Select panel + items)
   ======================================== */

/* Dropdown panel — matches .ant-dropdown-menu recipe (showcase "Dropdown Menu"
   section) so Select panels and menu panels share the same chrome. */
.ant-select-dropdown {
    background: var(--color-bg-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
}

/* Dropdown items */
.ant-select-item {
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
    transition: all var(--transition-fast) !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: rgba(230, 122, 46, 0.12) !important;
    color: var(--color-primary-light) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: rgba(230, 122, 46, 0.18) !important;
    color: var(--color-primary-light) !important;
    font-weight: 500;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
    color: var(--color-primary-light) !important;
}

/* Clear button */
.ant-select-clear {
    background: transparent !important;
    color: var(--text-muted) !important;
}

.ant-select-clear:hover {
    color: var(--text-secondary) !important;
}

/* Hide clear when empty, hide arrow when value selected */
.ant-select:not(:has(.ant-select-selection-item)) .ant-select-clear {
    display: none !important;
}

.ant-select:has(.ant-select-selection-item) .ant-select-arrow {
    display: none !important;
}

/* ========================================
   Calendar (full-page <Calendar>) - Dark Theme
   ======================================== */

/* Default AntD Calendar bg is solid white. Inherit the parent glass-card surface. */
.ant-picker-calendar,
.ant-picker-calendar-full,
.ant-picker-calendar .ant-picker-panel {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.ant-picker-calendar-header {
    border-bottom: 1px solid var(--glass-border) !important;
}

/* Year/Month switch — AntD renders this as an internal RadioGroup. We can't swap
   the component without overriding the whole HeaderRender, so we restyle the
   wrapper + buttons to be visually identical to .ant-segmented (matching every
   other variant switcher in the project). */
.ant-picker-calendar-mode-switch {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius-md) !important;
    padding: 2px !important;
    display: inline-flex !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base) !important;
    box-shadow: none !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper::before {
    display: none !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper:hover {
    color: var(--text-primary) !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper-checked {
    background: var(--color-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.3) !important;
}

.ant-picker-calendar-mode-switch .ant-radio-button-wrapper-checked:hover {
    color: var(--text-primary) !important;
}

/* Year/Month select dropdowns in the header */
.ant-picker-calendar-header .ant-select-selector {
    background: var(--glass-bg-light) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* Day-of-week column headers */
.ant-picker-calendar thead th,
.ant-picker-calendar .ant-picker-content thead th {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* Cell separators */
.ant-picker-calendar-full .ant-picker-cell {
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-picker-calendar-date,
.ant-picker-calendar-date-today {
    border-top-color: var(--glass-border) !important;
    background: transparent !important;
}

.ant-picker-calendar-date:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.ant-picker-calendar-date-value {
    color: var(--text-primary) !important;
}

/* Out-of-month cells — muted */
.ant-picker-cell:not(.ant-picker-cell-in-view) .ant-picker-calendar-date-value {
    color: var(--text-muted) !important;
}

/* ========================================
   DatePicker Dropdown (Calendar Panel) - Dark Theme
   ======================================== */

.ant-picker-dropdown {
    background: transparent !important;
}

.ant-picker-panel-container {
    background: var(--color-bg-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

.ant-picker-panel {
    background: transparent !important;
    border: none !important;
}

.ant-picker-header {
    color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ant-picker-header button {
    color: rgba(255, 255, 255, 0.5) !important;
}

.ant-picker-header button:hover {
    color: var(--color-primary) !important;
}

.ant-picker-content th {
    color: rgba(255, 255, 255, 0.5) !important;
}

.ant-picker-cell {
    color: rgba(255, 255, 255, 0.35) !important;
}

.ant-picker-cell-in-view {
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner {
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-picker-cell-today .ant-picker-cell-inner::before {
    border-color: var(--color-primary) !important;
}

.ant-picker-cell-selected .ant-picker-cell-inner {
    background: var(--color-primary) !important;
    color: var(--text-primary) !important;
}

/* ----- RangePicker cell states — brand tint instead of AntD default blue ----- */

/* Confirmed range endpoints (start / end / single-confirmed) */
.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-picker-cell-range-end .ant-picker-cell-inner,
.ant-picker-cell-range-start-single .ant-picker-cell-inner,
.ant-picker-cell-range-end-single .ant-picker-cell-inner {
    background: var(--color-primary) !important;
    color: var(--text-primary) !important;
}

/* Connected fill spanning between confirmed start and end cells */
.ant-picker-cell-in-range::before,
.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
}

/* Hover preview fill (after start is picked, before end is committed) */
.ant-picker-cell-range-hover::before,
.ant-picker-cell-range-hover-start::before,
.ant-picker-cell-range-hover-end::before {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
}

/* Dashed edge markers on the hover-preview endpoints */
.ant-picker-cell-range-hover::after,
.ant-picker-cell-range-hover-start::after,
.ant-picker-cell-range-hover-end::after,
.ant-picker-cell-range-hover-edge-start::after,
.ant-picker-cell-range-hover-edge-end::after {
    border-color: var(--color-primary) !important;
}

/* Hovering a confirmed endpoint while picking the second — keep brand tint */
.ant-picker-cell-range-start.ant-picker-cell-range-hover-end::before,
.ant-picker-cell-range-end.ant-picker-cell-range-hover-start::before {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
}

.ant-picker-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ant-picker-today-btn {
    color: var(--color-primary) !important;
}

.ant-picker-today-btn:hover {
    color: var(--color-primary-light) !important;
}

/* ========================================
   Message/Notification Overrides
   ======================================== */

.ant-message-notice-content {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.ant-message-success .anticon {
    color: var(--color-success) !important;
}

.ant-message-error .anticon {
    color: var(--color-error) !important;
}

.ant-message-warning .anticon {
    color: var(--color-warning, #faad14) !important;
}

.ant-message-info .anticon {
    color: var(--color-primary) !important;
}

.ant-message-notice-content .ant-message-custom-content span:last-child {
    color: var(--text-primary) !important;
}

/* ========================================
   Notification Overrides - Dark Theme
   ======================================== */

.ant-notification-notice {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 16px 20px !important;
}

.ant-notification-notice-message {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.ant-notification-notice-description {
    color: var(--text-secondary) !important;
}

.ant-notification-notice-icon-success {
    color: var(--color-success) !important;
}

.ant-notification-notice-icon-error {
    color: var(--color-error) !important;
}

.ant-notification-notice-icon-warning {
    color: var(--color-warning, #faad14) !important;
}

.ant-notification-notice-icon-info {
    color: var(--color-primary) !important;
}

.ant-notification-notice-close {
    color: rgba(255, 255, 255, 0.45) !important;
}

.ant-notification-notice-close:hover {
    color: var(--text-primary) !important;
}

/* ========================================
   Table Overrides - Dark Theme
   ======================================== */

.ant-table {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-table-container,
.ant-table-content,
.ant-table table {
    background: transparent !important;
}

.ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-table-tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-table-tbody > tr {
    background: transparent !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================
   Card Overrides - Dark Theme
   ======================================== */

.ant-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-card-body {
    background: transparent !important;
}

.ant-card-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.ant-card-head-title {
    color: var(--text-primary) !important;
}

/* ========================================
   Empty State Overrides
   ======================================== */

.ant-empty-description {
    color: rgba(255, 255, 255, 0.45) !important;
}

.ant-empty-image svg {
    fill: rgba(255, 255, 255, 0.25) !important;
}

/* ========================================
   Spin/Loading Overrides
   ======================================== */

.ant-spin-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-spin-dot-item {
    background-color: var(--color-primary) !important;
}

/* ========================================
   Alert Overrides - Glassy Dark Theme
   ======================================== */

.ant-alert {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
}

.ant-alert-message {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-alert-description {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-alert-info {
    background: rgba(230, 122, 46, 0.08) !important;
    border-color: rgba(230, 122, 46, 0.15) !important;
}

.ant-alert-info .ant-alert-icon {
    color: var(--color-primary) !important;
}

.ant-alert-info .ant-alert-message {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ant-alert-success {
    background: rgba(82, 196, 26, 0.08) !important;
    border-color: rgba(82, 196, 26, 0.15) !important;
}

.ant-alert-success .ant-alert-icon {
    color: var(--color-success) !important;
}

.ant-alert-warning {
    background: rgba(250, 173, 20, 0.08) !important;
    border-color: rgba(250, 173, 20, 0.15) !important;
}

.ant-alert-warning .ant-alert-icon {
    color: var(--color-warning) !important;
}

.ant-alert-error {
    background: rgba(255, 77, 79, 0.08) !important;
    border-color: rgba(255, 77, 79, 0.15) !important;
}

.ant-alert-error .ant-alert-icon {
    color: var(--color-error) !important;
}

.ant-alert-error .ant-alert-message {
    color: var(--color-error-light) !important;
}

/* ========================================
   Tag Overrides - Glassy Dark Theme
   ======================================== */

.ant-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.ant-tag-green {
    background: rgba(82, 196, 26, 0.15) !important;
    border-color: rgba(82, 196, 26, 0.25) !important;
    color: var(--color-success-light) !important;
}

.ant-tag-blue {
    background: rgba(24, 144, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.25) !important;
    color: var(--color-info-light) !important;
}

.ant-tag-orange {
    background: rgba(250, 173, 20, 0.15) !important;
    border-color: rgba(250, 173, 20, 0.25) !important;
    color: var(--color-warning-light) !important;
}

.ant-tag-red {
    background: rgba(255, 77, 79, 0.15) !important;
    border-color: rgba(255, 77, 79, 0.25) !important;
    color: var(--color-error-light) !important;
}

.ant-tag-cyan {
    background: rgba(19, 194, 194, 0.15) !important;
    border-color: rgba(19, 194, 194, 0.25) !important;
    color: #36cfc9 !important;
}

.ant-tag-purple {
    background: rgba(114, 46, 209, 0.15) !important;
    border-color: rgba(114, 46, 209, 0.25) !important;
    color: var(--color-accent-purple-light) !important;
}

.ant-tag-magenta,
.ant-tag-pink {
    background: rgba(235, 47, 150, 0.15) !important;
    border-color: rgba(235, 47, 150, 0.25) !important;
    color: #f759ab !important;
}

.ant-tag-gold {
    background: rgba(250, 173, 20, 0.15) !important;
    border-color: rgba(250, 173, 20, 0.25) !important;
    color: var(--color-warning-light) !important;
}

.ant-tag-lime {
    background: rgba(160, 217, 17, 0.15) !important;
    border-color: rgba(160, 217, 17, 0.25) !important;
    color: #bae637 !important;
}

.ant-tag-volcano {
    background: rgba(250, 84, 28, 0.15) !important;
    border-color: rgba(250, 84, 28, 0.25) !important;
    color: #ff7a45 !important;
}

.ant-tag-geekblue {
    background: rgba(47, 84, 235, 0.15) !important;
    border-color: rgba(47, 84, 235, 0.25) !important;
    color: #597ef7 !important;
}

/* ========================================
   Steps Overrides - Dark Theme with Orange Active
   ======================================== */

/* Steps container */
.ant-steps {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Step titles */
.ant-steps-item-title {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-steps-item-description {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Waiting steps - dark glass circles */
.ant-steps-item-wait .ant-steps-item-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon {
    color: rgba(255, 255, 255, 0.45) !important;
}

.ant-steps-item-wait .ant-steps-item-title {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Active/Process step - orange gradient */
.ant-steps-item-process .ant-steps-item-icon {
    background: var(--gradient-primary) !important;
    border-color: var(--color-primary) !important;
}

.ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
    color: var(--text-primary) !important;
}

.ant-steps-item-process .ant-steps-item-title {
    color: var(--text-primary) !important;
}

.ant-steps-item-process .ant-steps-item-description {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Finished steps - orange with checkmark */
.ant-steps-item-finish .ant-steps-item-icon {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: var(--color-primary) !important;
}

.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
    color: var(--color-primary) !important;
}

.ant-steps-item-finish .ant-steps-item-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tail/connector lines between steps */
.ant-steps-item-tail::after {
    background: rgba(255, 255, 255, 0.15) !important;
}

.ant-steps-item-finish .ant-steps-item-tail::after {
    background: var(--color-primary) !important;
}

/* Title connector line (the visible one between steps) */
.ant-steps-item-finish .ant-steps-item-title::after {
    background-color: var(--color-primary) !important;
}

/* ========================================
   Primary Button Overrides - Orange Theme
   ======================================== */

/* Primary button - orange gradient */
.ant-btn-primary,
button.ant-btn-primary,
.ant-btn.ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
    color: var(--text-primary) !important;
    transition: all 150ms ease !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
button.ant-btn-primary:hover,
button.ant-btn-primary:focus,
.ant-btn.ant-btn-primary:hover,
.ant-btn.ant-btn-primary:focus {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

.ant-btn-primary:active,
button.ant-btn-primary:active,
.ant-btn.ant-btn-primary:active {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.35) !important;
    transform: translateY(0);
}

/* Disabled primary button */
.ant-btn-primary[disabled],
.ant-btn-primary.ant-btn-disabled,
button.ant-btn-primary[disabled],
button.ant-btn-primary.ant-btn-disabled {
    background: rgba(230, 122, 46, 0.3) !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loading state */
.ant-btn-primary.ant-btn-loading,
button.ant-btn-primary.ant-btn-loading {
    opacity: 0.8;
}

/* Dropdown trigger button styling */
.ant-btn-primary .anticon,
button.ant-btn-primary .anticon {
    color: var(--text-primary) !important;
}

/* ========================================
   Dropdown Menu Overrides - Dark Theme
   ======================================== */

.ant-dropdown-menu {
    background: var(--color-bg-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
}

.ant-dropdown-menu-item {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 150ms ease !important;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-item-active {
    background: rgba(230, 122, 46, 0.12) !important;
    color: var(--color-primary-light) !important;
}

.ant-dropdown-menu-item-selected {
    background: rgba(230, 122, 46, 0.18) !important;
    color: var(--color-primary-light) !important;
}

.ant-dropdown-menu-item-selected:hover {
    background: rgba(230, 122, 46, 0.24) !important;
    color: var(--color-primary-light) !important;
}

.ant-dropdown-menu-item .anticon {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-dropdown-menu-item:hover .anticon,
.ant-dropdown-menu-item-active .anticon,
.ant-dropdown-menu-item-selected .anticon {
    color: var(--color-primary-light) !important;
}

.ant-dropdown-menu-item-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   ImageCard Overrides - Dark Theme
   ======================================== */

/* Image filename - white text */
.image-card .filename {
    color: var(--text-primary) !important;
}

/* More platforms badge (+2) - dark theme */
.image-card .more-platforms {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Download button - dark glass with orange hover */
.image-card .download-btn,
.image-card .download-btn.ant-btn {
    background: rgba(20, 24, 33, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-card .download-btn:hover,
.image-card .download-btn.ant-btn:hover {
    background: rgba(230, 122, 46, 0.2) !important;
    border-color: rgba(230, 122, 46, 0.4) !important;
    color: var(--color-primary) !important;
}

.image-card .download-btn .anticon,
.image-card .download-btn.ant-btn .anticon {
    color: inherit !important;
}

/* Image thumbnail background - dark */
.image-card .image-thumbnail {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Image placeholder icon - muted */
.image-card .image-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Compliance icon background - dark */
.image-card .compliance-icon {
    background: var(--color-bg-dark-secondary) !important;
}

/* ========================================
   Subscription Tag Overrides
   ======================================== */

/* Base subscription-tag — pill shape, neutral muted glass. Tier variants override
   background + border + color; expiring-* variants add animation on top. */
.subscription-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    background: var(--glass-bg-subtle);
    color: var(--text-secondary);
}

.subscription-tag.tier-free {
    background: var(--glass-bg-subtle);
    color: var(--text-muted);
    border-color: var(--glass-border);
}

.subscription-tag.tier-starter {
    background: var(--color-tier-starter-bg);
    color: var(--color-tier-starter);
    border-color: rgba(96, 165, 250, 0.3);
}

.subscription-tag.tier-pro {
    background: var(--color-tier-pro-bg);
    color: var(--color-tier-pro);
    border-color: rgba(167, 139, 250, 0.3);
}

.subscription-tag.tier-enterprise {
    background: rgba(230, 122, 46, 0.12);
    color: var(--color-primary-light);
    border-color: rgba(230, 122, 46, 0.3);
}

/* tier-max — gradient gold + glow (digidok-grade flagship polish). Hex values
   here are intentional — gold doesn't map to any brand-orange or semantic token. */
.subscription-tag.tier-max,
.ant-tag.subscription-tag.tier-max {
    background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #b8860b 100%) !important;
    color: var(--color-bg-dark-tertiary) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
    font-weight: 700;
}

/* Expiring status indicators — apply on top of any tier variant. */
.subscription-tag.expiring-warning {
    border-color: var(--color-warning) !important;
    color: var(--color-warning-light) !important;
}

@keyframes expiring-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 77, 79, 0); }
}

.subscription-tag.expiring-critical {
    border-color: var(--color-error) !important;
    color: var(--color-error-light) !important;
    animation: expiring-pulse 1.5s ease-in-out infinite;
}

/* ========================================
   Dashboard Plan Value Styling
   ======================================== */

/* Free plan - default muted styling */
.stat-value.plan-free {
    color: var(--text-muted) !important;
}

/* Pro plan - blue */
.stat-value.plan-pro {
    color: var(--color-tier-starter) !important;
}

/* Plus plan - purple */
.stat-value.plan-plus {
    color: var(--color-tier-pro) !important;
}

/* Max plan - orange gradient with glow effect */
.stat-value.plan-max {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(230, 122, 46, 0.4);
}

/* ========================================
   Upgrade Page Button Overrides
   ======================================== */

/* Plan card body - flex layout to push button to bottom */
.plan-card .ant-card-body,
.plan-card.ant-card .ant-card-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* All plan card buttons - pill shape, pushed to bottom */
.plan-card .ant-btn,
.plan-card.ant-card .ant-btn {
    height: 48px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    font-size: 0.9375rem !important;
    transition: all 200ms ease !important;
    margin-top: auto !important;
}

/* Default button (Free plan) */
.plan-card .ant-btn-default,
.plan-card.ant-card .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.plan-card .ant-btn-default:hover:not(:disabled),
.plan-card.ant-card .ant-btn-default:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

/* Disabled "Current Plan" button - green indicator style */
.plan-card .ant-btn-default[disabled],
.plan-card .ant-btn-default.ant-btn-disabled,
.plan-card.ant-card .ant-btn-default[disabled],
.plan-card.ant-card .ant-btn-default.ant-btn-disabled {
    background: rgba(82, 196, 26, 0.1) !important;
    border: 1px solid rgba(82, 196, 26, 0.25) !important;
    color: var(--color-success) !important;
    opacity: 1 !important;
    cursor: default !important;
}

/* Primary button (Subscribe) */
.plan-card .ant-btn-primary,
.plan-card.ant-card .ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
}

.plan-card .ant-btn-primary:hover:not(:disabled),
.plan-card.ant-card .ant-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

/* ========================================
   Billing Toggle - Save Badge
   ======================================== */

/* Save percentage badge - make it stand out */
.billing-toggle .ant-tag {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.4) !important;
    animation: pulse-glow 2s ease-in-out infinite !important;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(230, 122, 46, 0.4);
    }
    50% {
        box-shadow: 0 2px 16px rgba(230, 122, 46, 0.6), 0 0 20px rgba(230, 122, 46, 0.3);
    }
}

/* ========================================
   Checkbox Overrides - Orange Theme
   ======================================== */

/* Checkbox inner box - dark glass background */
.ant-checkbox .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
}

/* Checkbox hover state */
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox .ant-checkbox-inner {
    border-color: var(--color-primary) !important;
}

/* Checkbox checked state - orange */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Checkbox checked hover - lighter orange */
.ant-checkbox-checked:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

/* Checkbox indeterminate state - orange */
.ant-checkbox-indeterminate .ant-checkbox-inner::after,
.ant-checkbox-wrapper .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: var(--color-primary) !important;
}

/* Checkbox focus ring - orange glow */
.ant-checkbox-input:focus + .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

/* Checkbox label text color */
.ant-checkbox-wrapper {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Checkbox wrapper hover */
.ant-checkbox-wrapper:hover {
    color: var(--text-primary) !important;
}

/* ========================================
   Radio Button Overrides - Orange Theme
   ======================================== */

/* Radio inner circle - dark glass background */
.ant-radio .ant-radio-inner,
.ant-radio-wrapper .ant-radio .ant-radio-inner {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Radio hover state */
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio .ant-radio-inner {
    border-color: var(--color-primary) !important;
}

/* Radio checked state - orange */
.ant-radio-checked .ant-radio-inner,
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Radio checked inner dot */
.ant-radio-checked .ant-radio-inner::after,
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
    background-color: var(--text-primary) !important;
}

/* Radio checked hover - lighter orange */
.ant-radio-checked:hover .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio-checked .ant-radio-inner {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

/* Radio focus ring - orange glow */
.ant-radio-input:focus + .ant-radio-inner,
.ant-radio-wrapper .ant-radio-input:focus + .ant-radio-inner {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

/* Radio label text color */
.ant-radio-wrapper {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Radio wrapper hover */
.ant-radio-wrapper:hover {
    color: var(--text-primary) !important;
}

/* Radio buttons (RadioButton style) - dark glass theme.
   AntDesign's default `.ant-radio-button-wrapper` is a light-theme pill button
   with dark text on a white background, which is invisible against MlekErp's
   dark canvas. The overrides below match the button styling used elsewhere
   (Filters > Saldo / +/- / Type pickers on report pages). */
.ant-radio-button-wrapper {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.ant-radio-button-wrapper:not(:first-child)::before {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.ant-radio-button-wrapper:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    background: rgba(230, 122, 46, 0.18) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: -1px 0 0 0 var(--color-primary) !important;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    background: rgba(230, 122, 46, 0.24) !important;
    border-color: var(--color-primary-light) !important;
    color: var(--text-primary) !important;
}

.ant-radio-button-wrapper-disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ========================================
   Adjustment Grid Item - Dark Theme
   ======================================== */

.adjustment-grid-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.adjustment-grid-item:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.15) !important;
}

.adjustment-grid-item.selected {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(230, 122, 46, 0.2) !important;
}

.adjustment-grid-item .item-preview {
    background: rgba(255, 255, 255, 0.08) !important;
}

.adjustment-grid-item .adjustment-badge {
    background: var(--color-primary) !important;
}

.adjustment-grid-item .item-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.adjustment-grid-item .item-name {
    color: var(--text-primary) !important;
}

.adjustment-grid-item .item-size {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ===============================================
   Slider Overrides - Orange Theme
   =============================================== */

.ant-slider-rail {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ant-slider-track {
    background: var(--color-primary) !important;
}

.ant-slider-handle {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.ant-slider-handle:hover,
.ant-slider-handle:focus,
.ant-slider-handle-dragging {
    box-shadow: 0 0 0 4px rgba(230, 122, 46, 0.2) !important;
    border-color: var(--color-primary) !important;
}

.ant-slider:hover .ant-slider-track {
    background: var(--color-primary-light) !important;
}

.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
    border-color: var(--color-primary-light) !important;
}

/* ===============================================
   Modal/Drawer Overrides - Dark Theme
   =============================================== */

.ant-modal-mask {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}

.ant-modal-content {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
    overflow: hidden;
}

.ant-modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px 24px !important;
}

.ant-modal-title {
    color: var(--text-primary) !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
}

.ant-modal-close {
    color: rgba(255, 255, 255, 0.45) !important;
    top: 16px !important;
    right: 16px !important;
}

.ant-modal-close:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px;
}

.ant-modal-body {
    padding: 24px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-modal-body p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.ant-modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 24px !important;
}

.ant-modal-footer .ant-btn {
    border-radius: 8px !important;
    font-weight: 500;
}

.ant-modal-footer .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-modal-footer .ant-btn-default:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: var(--text-primary) !important;
}

.ant-modal-footer .ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
}

.ant-modal-footer .ant-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

.ant-modal-footer .ant-btn-dangerous {
    background: rgba(255, 77, 79, 0.15) !important;
    border: 1px solid rgba(255, 77, 79, 0.25) !important;
    color: var(--color-error-light) !important;
}

.ant-modal-footer .ant-btn-dangerous:hover {
    background: rgba(255, 77, 79, 0.25) !important;
    border-color: rgba(255, 77, 79, 0.4) !important;
}

.ant-drawer-mask {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}

.ant-drawer-content {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px);
}

.ant-drawer-header {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    position: relative;
    padding-right: 56px !important;
}

.ant-drawer-title {
    color: var(--text-primary) !important;
}

.ant-drawer-close {
    color: rgba(255, 255, 255, 0.65) !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 8px;
}

.ant-drawer-close:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-drawer-body {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.ant-drawer-body p {
    color: var(--text-secondary) !important;
}

/* EntityFormDrawer — full-bleed body so footer can sit sticky at bottom.
   The drawer body is a flex column; the inner body grows to fill the
   remaining space (and scrolls when content overflows) so the footer
   stays pinned to the bottom of the drawer. */
.entity-drawer .ant-drawer-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden !important;
}

.entity-drawer .entity-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-lg);
}

.entity-drawer .entity-drawer-footer.form-actions-footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: var(--space-md) var(--space-lg);
}

/* Mobile (≤768px): EntityFormDrawer expands to full viewport width */
@media (max-width: 768px) {
    .entity-drawer.ant-drawer-right .ant-drawer-content-wrapper,
    .entity-drawer .ant-drawer-content-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* ===============================================
   Image Adjustment Editor - Dark Theme
   =============================================== */

.image-adjustment-editor {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.image-adjustment-editor .editor-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.image-adjustment-editor .editor-title {
    color: var(--text-primary) !important;
}

.image-adjustment-editor .editor-header .ant-btn-text {
    color: rgba(255, 255, 255, 0.65) !important;
}

.image-adjustment-editor .editor-header .ant-btn-text:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Platform tabs */
.image-adjustment-editor .platform-tabs .ant-tabs-nav::before {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab {
    color: rgba(255, 255, 255, 0.65) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab:hover {
    color: var(--color-primary) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--color-primary) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-ink-bar {
    background: var(--color-primary) !important;
}

/* Preview container */
.image-adjustment-editor .preview-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.image-adjustment-editor .preview-wrapper {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Controls panel */
.image-adjustment-editor .controls-panel {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

.image-adjustment-editor .controls-panel .ant-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Slider labels */
.image-adjustment-editor .slider-label,
.image-adjustment-editor .control-label {
    color: var(--text-primary) !important;
}

.image-adjustment-editor .slider-value {
    color: var(--color-primary) !important;
}

/* Offset controls */
.image-adjustment-editor .offset-label {
    color: rgba(255, 255, 255, 0.45) !important;
}

.image-adjustment-editor .offset-header .ant-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-adjustment-editor .offset-header .ant-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* InputNumber styling */
.image-adjustment-editor .ant-input-number {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

.image-adjustment-editor .ant-input-number:hover,
.image-adjustment-editor .ant-input-number:focus,
.image-adjustment-editor .ant-input-number-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

.image-adjustment-editor .ant-input-number-input {
    color: var(--text-primary) !important;
}

.image-adjustment-editor .ant-input-number-handler-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.image-adjustment-editor .ant-input-number-handler {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.image-adjustment-editor .ant-input-number-handler:hover {
    background: rgba(230, 122, 46, 0.15) !important;
}

.image-adjustment-editor .ant-input-number-handler-up-inner,
.image-adjustment-editor .ant-input-number-handler-down-inner {
    color: rgba(255, 255, 255, 0.65) !important;
}

.image-adjustment-editor .ant-input-number-handler:hover .ant-input-number-handler-up-inner,
.image-adjustment-editor .ant-input-number-handler:hover .ant-input-number-handler-down-inner {
    color: var(--color-primary) !important;
}

/* Control hint */
.image-adjustment-editor .control-hint {
    color: rgba(255, 255, 255, 0.65) !important;
    background-color: rgba(230, 122, 46, 0.1) !important;
    border: 1px solid rgba(230, 122, 46, 0.2) !important;
    border-radius: 8px !important;
}

.image-adjustment-editor .control-hint .anticon {
    color: var(--color-primary) !important;
}

/* Quick buttons */
.image-adjustment-editor .quick-buttons .ant-btn,
.image-adjustment-editor .scale-presets .ant-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-adjustment-editor .quick-buttons .ant-btn:hover,
.image-adjustment-editor .scale-presets .ant-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Toolbar */
.image-adjustment-editor .adjustment-toolbar {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 0 16px 16px !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

/* Platform overlay - Orange crop guide */
.platform-overlay .margin-guide {
    border-color: rgba(230, 122, 46, 0.6) !important;
}

/* Platform label tag - Orange theme */
.platform-overlay .platform-label .ant-tag,
.platform-overlay .platform-label .ant-tag-blue {
    background: rgba(230, 122, 46, 0.15) !important;
    color: var(--color-primary-light) !important;
    border-color: rgba(230, 122, 46, 0.25) !important;
}

/* ===============================================
   Progress Bar Overrides - Orange Theme
   =============================================== */

.ant-progress-bg {
    background: var(--gradient-primary) !important;
}

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

.ant-progress-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-progress-success-bg {
    background: var(--color-primary) !important;
}

/* Progress circle (if used) */
.ant-progress-circle-path {
    stroke: var(--color-primary) !important;
}

.ant-progress-circle-trail {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

/* ===============================================
   Result Component Overrides — Brand Color Map
   success=green  warning=orange  error=red  info=orange(not blue)
   =============================================== */

/* Success icon — semantic green */
.ant-result-success .ant-result-icon > .anticon {
    color: var(--color-success) !important;
}

.ant-result-success .ant-result-icon svg {
    fill: var(--color-success) !important;
}

/* Warning icon — semantic yellow/orange */
.ant-result-warning .ant-result-icon > .anticon {
    color: var(--color-warning) !important;
}

.ant-result-warning .ant-result-icon svg {
    fill: var(--color-warning) !important;
}

/* Error icon — semantic red */
.ant-result-error .ant-result-icon > .anticon {
    color: var(--color-error) !important;
}

.ant-result-error .ant-result-icon svg {
    fill: var(--color-error) !important;
}

/* Info icon — brand orange, NOT default blue */
.ant-result-info .ant-result-icon > .anticon {
    color: var(--color-primary) !important;
}

.ant-result-info .ant-result-icon svg {
    fill: var(--color-primary) !important;
}

/* Result text colors for dark theme */
.ant-result-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-result-subtitle {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ===============================================
   BatchProgress Component - Dark Theme
   =============================================== */

.batch-progress {
    padding: 24px;
}

.batch-progress .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.batch-progress .progress-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin: 0 0 4px 0;
}

.batch-progress .progress-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0;
}

.batch-progress .progress-stats {
    display: flex;
    gap: 12px;
    font-size: 14px;
}

.batch-progress .stat-completed {
    color: var(--color-primary) !important;
}

.batch-progress .stat-failed {
    color: var(--color-error-light) !important;
}

.batch-progress .stat-total {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Connection status badges - dark theme */
.batch-progress .connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.batch-progress .connection-status.connected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: var(--color-primary-light) !important;
    border: 1px solid rgba(230, 122, 46, 0.25);
}

.batch-progress .connection-status.connecting {
    background-color: rgba(250, 173, 20, 0.15) !important;
    color: var(--color-warning-light) !important;
    border: 1px solid rgba(250, 173, 20, 0.25);
}

.batch-progress .connection-status.disconnected {
    background-color: rgba(255, 77, 79, 0.15) !important;
    color: var(--color-error-light) !important;
    border: 1px solid rgba(255, 77, 79, 0.25);
}

/* Image grid - dark theme */
.batch-progress .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.batch-progress .image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.batch-progress .image-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.batch-progress .image-item.pending .image-preview {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.batch-progress .image-item.processing .image-preview {
    border-color: var(--color-primary) !important;
}

.batch-progress .image-item.completed .image-preview {
    border-color: var(--color-primary) !important;
}

.batch-progress .image-item.failed .image-preview {
    border-color: var(--color-error-light) !important;
}

.batch-progress .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-progress .image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 24px;
}

/* Status overlay - dark glass */
.batch-progress .status-overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(20, 24, 33, 0.9) !important;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.batch-progress .status-icon {
    font-size: 18px;
}

.batch-progress .status-icon.pending {
    color: rgba(255, 255, 255, 0.45) !important;
}

.batch-progress .status-icon.completed {
    color: var(--color-primary) !important;
}

.batch-progress .status-icon.failed {
    color: var(--color-error-light) !important;
}

/* Step text */
.batch-progress .image-info {
    text-align: center;
}

.batch-progress .step-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65) !important;
}

.batch-progress .step-text.success {
    color: var(--color-primary) !important;
    font-weight: 500;
}

.batch-progress .step-text.error {
    color: var(--color-error-light) !important;
    font-weight: 500;
}

/* Processing step - ensure full width */
.step-processing > * {
    width: 100%;
}

/* Result component in processing step - full width */
.step-processing .ant-result {
    width: 100%;
    max-width: 100%;
    padding: 48px 24px;
}

/* ===============================================
   Subscription Page - Dark Glassmorphism Theme
   =============================================== */

.subscription-page,
div.subscription-page,
.ant-layout-content .subscription-page {
    min-height: calc(100vh - 64px);
    padding: var(--space-xl);
    background: transparent !important;
    background-color: transparent !important;
}

/* Direct card overrides with high specificity */
.subscription-page .ant-card,
.subscription-page .ant-card.subscription-card,
.subscription-page .ant-card.usage-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.subscription-page .ant-card .ant-card-body,
.subscription-page .ant-card-body {
    background: transparent !important;
}

.subscription-page .ant-card .ant-card-head {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.subscription-page .page-container {
    max-width: 800px;
    margin: 0 auto;
}

.subscription-page .page-header {
    margin-bottom: var(--space-xl);
    animation: slideUp 0.5s ease-out;
}

.subscription-page .page-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.02em;
}

.subscription-page .page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.subscription-page .loading-container {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl);
}

.subscription-page .subscription-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    animation: slideUp 0.6s ease-out 0.1s both;
}

@media (max-width: 768px) {
    .subscription-page .subscription-content {
        grid-template-columns: 1fr;
    }
}

/* Glass Card Styling */
.subscription-page .subscription-card.ant-card,
.subscription-page .usage-card.ant-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-base);
    height: 100%;
}

.subscription-page .subscription-card.ant-card:hover,
.subscription-page .usage-card.ant-card:hover {
    border-color: var(--glass-border-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.subscription-page .subscription-card .ant-card-body,
.subscription-page .usage-card .ant-card-body {
    padding: var(--space-xl) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.subscription-page .usage-card .ant-card-head {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: var(--space-md) var(--space-xl) !important;
}

.subscription-page .usage-card .ant-card-head-title {
    color: var(--text-primary) !important;
    font-family: var(--font-display);
    font-weight: 600;
}

/* Subscription Header */
.subscription-page .subscription-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.subscription-page .plan-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.subscription-page .plan-name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-transform: capitalize;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tags */
.subscription-page .subscription-header .ant-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
}

.subscription-page .subscription-header .ant-tag-blue {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: var(--color-tier-starter) !important;
}

.subscription-page .subscription-header .ant-tag-green {
    background: rgba(82, 196, 26, 0.15) !important;
    border-color: rgba(82, 196, 26, 0.25) !important;
    color: var(--color-success) !important;
}

.subscription-page .subscription-header .ant-tag-orange {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: rgba(230, 122, 46, 0.25) !important;
    color: var(--color-primary-light) !important;
}

.subscription-page .subscription-header .ant-tag-red {
    background: rgba(255, 77, 79, 0.15) !important;
    border-color: rgba(255, 77, 79, 0.25) !important;
    color: var(--color-error-light) !important;
}

/* Subscription Details */
.subscription-page .subscription-details {
    margin-bottom: var(--space-lg);
}

.subscription-page .renewal-info {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

.subscription-page .renewal-info strong {
    color: var(--text-primary);
}

/* Divider */
.subscription-page .ant-divider {
    border-color: var(--glass-border) !important;
    margin: var(--space-lg) 0 !important;
}

/* Action Buttons */
.subscription-page .subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
}

.subscription-page .subscription-actions .ant-btn {
    height: 40px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all var(--transition-fast) !important;
}

.subscription-page .subscription-actions .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.subscription-page .subscription-actions .ant-btn-default:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.subscription-page .subscription-actions .ant-btn-dangerous {
    background: rgba(255, 77, 79, 0.1) !important;
    border: 1px solid rgba(255, 77, 79, 0.25) !important;
    color: var(--color-error-light) !important;
}

.subscription-page .subscription-actions .ant-btn-dangerous:hover:not(:disabled) {
    background: rgba(255, 77, 79, 0.2) !important;
    border-color: rgba(255, 77, 79, 0.4) !important;
}

/* Usage Card Content */
.subscription-page .usage-info {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subscription-page .usage-stat {
    margin-bottom: var(--space-lg);
}

.subscription-page .usage-label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

.subscription-page .usage-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.subscription-page .usage-remaining {
    color: var(--text-muted);
    margin-top: var(--space-md);
    font-size: 0.875rem;
}

.subscription-page .unlimited-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary-light);
    background: linear-gradient(135deg, rgba(230, 122, 46, 0.15) 0%, rgba(245, 166, 35, 0.15) 100%);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(230, 122, 46, 0.3);
}

.subscription-page .unlimited-badge .anticon {
    color: var(--color-primary);
}

/* Alerts */
.subscription-page .subscription-details .ant-alert {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-md) !important;
}

.subscription-page .subscription-details .ant-alert-warning {
    background: rgba(250, 173, 20, 0.1) !important;
    border-color: rgba(250, 173, 20, 0.25) !important;
}

.subscription-page .subscription-details .ant-alert-warning .ant-alert-message {
    color: var(--color-warning-light) !important;
}

.subscription-page .subscription-details .ant-alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

.subscription-page .subscription-details .ant-alert-info .ant-alert-message {
    color: var(--color-tier-starter) !important;
}

/* ===============================================
   Checkout Success Page - Dark Glassmorphism Theme
   =============================================== */

.checkout-success-page,
div.checkout-success-page,
.ant-layout-content .checkout-success-page,
.checkout-result-page {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
}

/* Override any Result component container */
.checkout-success-page .result-container,
.checkout-result-page .result-container,
.checkout-success-page .success-container {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    max-width: 500px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Background orbs */
.checkout-success-page .bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    pointer-events: none;
}

.checkout-success-page .bg-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(230, 122, 46, 0.3) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: float-slow 25s ease-in-out infinite;
}

.checkout-success-page .bg-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(82, 196, 26, 0.2) 0%, transparent 70%);
    bottom: -50px;
    left: -50px;
    animation: float-slow 20s ease-in-out infinite reverse;
}

.checkout-success-page .bg-orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(230, 122, 46, 0.25) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: success-pulse-glow 4s ease-in-out infinite;
}

@keyframes float-slow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.05);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }
    75% {
        transform: translate(-30px, -20px) scale(1.02);
    }
}

@keyframes success-pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Success container */
.checkout-success-page .success-container {
    max-width: 500px;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    position: relative;
    z-index: 1;
    animation: slideUp 0.6s ease-out;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 1px rgba(255, 255, 255, 0.05) inset;
}

/* Success icon */
.checkout-success-page .success-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-xl);
}

.checkout-success-page .success-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--color-success) 30%, transparent);
    animation: ring-pulse 2s ease-out infinite;
}

@keyframes ring-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.checkout-success-page .success-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    border-radius: 50%;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--color-success) 40%, transparent),
    0 0 60px color-mix(in srgb, var(--color-success) 20%, transparent);
    animation: icon-appear 0.5s ease-out 0.3s both;
}

@keyframes icon-appear {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.checkout-success-page .success-icon .anticon {
    font-size: 48px;
    color: white;
    animation: checkmark 0.4s ease-out 0.6s both;
}

@keyframes checkmark {
    from {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* Title and subtitle */
.checkout-success-page .success-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.02em;
    animation: fadeIn 0.5s ease-out 0.5s both;
}

.checkout-success-page .success-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-xl) 0;
    line-height: 1.6;
    animation: fadeIn 0.5s ease-out 0.6s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Plan badge */
.checkout-success-page .success-details {
    margin-bottom: var(--space-xl);
    animation: fadeIn 0.5s ease-out 0.7s both;
}

.checkout-success-page .plan-badge {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: linear-gradient(135deg, rgba(230, 122, 46, 0.15) 0%, rgba(245, 166, 35, 0.15) 100%);
    border: 1px solid rgba(230, 122, 46, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-xl);
}

.checkout-success-page .plan-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.checkout-success-page .plan-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-light);
    text-transform: capitalize;
}

/* Action buttons */
.checkout-success-page .success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: fadeIn 0.5s ease-out 0.8s both;
}

@media (min-width: 400px) {
    .checkout-success-page .success-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.checkout-success-page .success-actions .ant-btn {
    height: 48px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-base) !important;
}

.checkout-success-page .success-actions .primary-action.ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
    min-width: 180px;
}

.checkout-success-page .success-actions .primary-action.ant-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

.checkout-success-page .success-actions .secondary-action.ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    min-width: 180px;
}

.checkout-success-page .success-actions .secondary-action.ant-btn-default:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .checkout-success-page .success-container {
        padding: var(--space-xl);
        border-radius: var(--radius-lg);
    }

    .checkout-success-page .success-icon-wrapper {
        width: 80px;
        height: 80px;
    }

    .checkout-success-page .success-icon .anticon {
        font-size: 36px;
    }

    .checkout-success-page .success-title {
        font-size: 1.5rem;
    }

    .checkout-success-page .success-actions .ant-btn {
        width: 100%;
    }
}

/* ===============================================
   OTP Input - Hide placeholder (cleaner look)
   Target any input with letter-spacing in its inline style
   =============================================== */

.ant-input[style*="letter-spacing"]::placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]::-webkit-input-placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]::-moz-placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]:-ms-input-placeholder {
    color: transparent !important;
}

/* ===============================================
   Form Loading Overlay - Dark Theme
   =============================================== */

.ant-spin-nested-loading > div > .ant-spin {
    max-height: unset;
}

.ant-spin-blur {
    opacity: 0.5;
}

.ant-spin-blur::after {
    background: transparent !important;
}

.ant-spin-container::after {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* ===============================================
   Change Email Modal - Input Styling
   =============================================== */

.change-email-modal .ant-form-item-label > label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.change-email-modal .ant-input {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}

.change-email-modal .ant-input:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.change-email-modal .ant-input:focus,
.change-email-modal .ant-input-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

.change-email-modal .ant-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Modal description text */
.change-email-modal .ant-modal-body p {
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.6;
}

/* Code expiry notice */
.change-email-modal .code-expiry {
    background: rgba(230, 122, 46, 0.1) !important;
    border: 1px solid rgba(230, 122, 46, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin-bottom: 24px !important;
    color: var(--color-primary) !important;
    font-size: 0.875rem !important;
    text-align: center !important;
}

/* Modal action buttons */
.change-email-modal .modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

/* Resend link */
.change-email-modal .resend-link {
    text-align: center !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.change-email-modal .resend-link .ant-btn-link {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.875rem !important;
}

.change-email-modal .resend-link .ant-btn-link:hover {
    color: var(--color-primary) !important;
}

/* ===============================================
   Layout Overflow Fix - Prevent body scrolling
   =============================================== */

/* Main content area - enable vertical scrolling inside content only */
.main-content.ant-layout-content,
.ant-layout-content.main-content,
main.main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.main-content.ant-layout-content::-webkit-scrollbar,
.ant-layout-content.main-content::-webkit-scrollbar,
main.main-content::-webkit-scrollbar {
    display: none;
}

/* Content layout - fixed height, no overflow */
.content-layout.ant-layout,
.ant-layout.content-layout {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Ensure header and footer don't shrink */
.main-header.ant-layout-header,
.ant-layout-header.main-header {
    flex-shrink: 0 !important;
}

.main-footer.ant-layout-footer,
.ant-layout-footer.main-footer {
    flex-shrink: 0 !important;
}

/* ===============================================
   Help Popover Styling
   =============================================== */

.help-popover-overlay .ant-popover-inner {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px var(--glass-shadow);
}

.help-popover-overlay .ant-popover-arrow {
    display: none;
}

/* ===============================================
   Form Input Overrides - Glass Dark Theme
   Shared across all pages (auth, settings, tickets, etc.)
   =============================================== */

.ant-input {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

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

.ant-input:hover:not(:disabled) {
    border-color: var(--glass-border-light) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.ant-input:focus,
.ant-input-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.ant-input:disabled,
.ant-input[readonly] {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-muted) !important;
    cursor: default;
    opacity: 0.8;
}

.ant-input-lg {
    height: 48px !important;
    font-size: 0.9375rem !important;
}

/* Input Affix Wrapper (e.g. password inputs with icons) */
.ant-input-affix-wrapper {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 11px;
    transition: all var(--transition-base) !important;
}

.ant-input-affix-wrapper:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-input-affix-wrapper-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

/* Prefix/suffix icons (search loupe, password eye, etc.) — match placeholder color */
.ant-input-affix-wrapper .ant-input-prefix .anticon,
.ant-input-affix-wrapper .ant-input-suffix .anticon {
    color: var(--text-muted) !important;
}

/* Inner .ant-input inside an affix wrapper is just the text node — the wrapper
   already draws the visible surface. Keep the inner element fully transparent
   so hover/focus don't paint a second layered background or focus ring on top
   of the wrapper. Fixes the "double overlay" effect on password/affix inputs. */
.ant-input-affix-wrapper > .ant-input,
.ant-input-affix-wrapper > .ant-input:hover:not(:disabled),
.ant-input-affix-wrapper > .ant-input:focus,
.ant-input-affix-wrapper > .ant-input-focused {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===============================================
   Textarea Overrides - Glass Dark Theme
   =============================================== */

.ant-input-textarea textarea.ant-input,
textarea.ant-input {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-input-textarea textarea.ant-input:focus,
textarea.ant-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

.ant-input-textarea textarea.ant-input::placeholder,
textarea.ant-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input-textarea-show-count {
    background: transparent !important;
}

.ant-input-textarea-show-count::after,
.ant-input-data-count {
    color: var(--text-muted) !important;
}

/* TextArea with ShowCount wraps the <textarea> in span.ant-input-affix-wrapper.
   Promote the wrapper to BE the glass box and make the inner textarea transparent
   so its edge aligns with inputs/selects in the same form. */
.ant-input-textarea .ant-input-affix-wrapper {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 11px !important;
}

.ant-input-textarea .ant-input-affix-wrapper:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-input-textarea .ant-input-affix-wrapper-focused {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input:focus,
.ant-input-textarea .ant-input-affix-wrapper textarea.ant-input-focused {
    border: none !important;
    box-shadow: none !important;
}

/* ===============================================
   Form Item Overrides - Dark Theme
   =============================================== */

.ant-form-item {
    margin-bottom: 1.25rem;
}

.ant-form-item:last-child {
    margin-bottom: 0;
}

.ant-form-item-label > label {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

/* ===============================================
   Select/Dropdown Overrides - Glass Dark Theme
   =============================================== */

.ant-select-selector {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
}

.ant-select-arrow {
    color: var(--text-muted) !important;
}

.ant-select:hover .ant-select-selector {
    border-color: var(--glass-border-light) !important;
}

.ant-select-focused .ant-select-selector {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

.ant-select-selection-item {
    color: var(--text-primary) !important;
}

.ant-select-selection-placeholder {
    color: var(--text-muted) !important;
}

/* ===============================================
   Default Button Overrides - Ghost Style
   =============================================== */

.ant-btn-default {
    background: transparent !important;
    border: 1px solid var(--glass-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
    transition: all var(--transition-base) !important;
}

.ant-btn-default:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: rgba(230, 122, 46, 0.08) !important;
}

.ant-btn-default:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===============================================
   Danger Button Overrides - Red Ghost Style
   =============================================== */

.ant-btn-dangerous {
    background: transparent !important;
    border: 1px solid rgba(255, 77, 79, 0.4) !important;
    color: var(--color-error-light) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500;
    transition: all var(--transition-base);
}

.ant-btn-dangerous:hover:not(:disabled) {
    background: rgba(255, 77, 79, 0.1) !important;
    border-color: var(--color-error-light) !important;
}

/* ===============================================
   Divider Overrides - Dark Theme
   =============================================== */

.ant-divider {
    border-color: var(--glass-border) !important;
    margin: var(--space-lg) 0 !important;
}

.ant-divider-inner-text {
    color: var(--text-muted) !important;
    font-size: 0.8125rem;
}

/* ===============================================
   Typography Overrides - Dark Theme
   =============================================== */

.ant-typography {
    color: var(--text-secondary) !important;
}

/* ===============================================
   Radio Button Overrides - Dark Theme
   =============================================== */

.ant-radio-wrapper {
    color: var(--text-secondary) !important;
}

.ant-radio-checked .ant-radio-inner {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

/* ===============================================
   Collapse Overrides - Dark Theme
   =============================================== */

.ant-collapse {
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
}

.ant-collapse-header {
    color: var(--text-secondary) !important;
}

.ant-collapse-content {
    background: var(--glass-bg-light) !important;
    border-top: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-collapse-content-box {
    padding: 16px !important;
}

/* ===============================================
   Badge Overrides - Brand Orange
   =============================================== */

.ant-badge-count {
    background: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-bg-dark-secondary) !important;
}

.ant-badge-dot {
    background: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-bg-dark-secondary) !important;
}

/* ===============================================
   Table Overrides - Dark Theme
   =============================================== */

.ant-table {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.ant-table-container,
.ant-table-content,
.ant-table table {
    background: transparent !important;
}

.ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ant-table-tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem;
}

.ant-table-tbody > tr {
    background: transparent !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Frozen columns need an opaque background or scrolling cells bleed through
   when they scroll under. Specificity must beat .ant-table-tbody > tr > td. */
.ant-table-tbody > tr > td.ant-table-cell-fix-left,
.ant-table-tbody > tr > td.ant-table-cell-fix-right,
.ant-table-thead > tr > th.ant-table-cell-fix-left,
.ant-table-thead > tr > th.ant-table-cell-fix-right {
    background: var(--color-bg-elevated) !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-fix-left,
.ant-table-tbody > tr.ant-table-row:hover > td.ant-table-cell-fix-right,
.ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
.ant-table-tbody > tr:hover > td.ant-table-cell-fix-right {
    background: var(--color-bg-elevated) !important;
}

.ant-table-bordered > .ant-table-container {
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th,
.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--text-primary) !important;
}

.ant-table-pagination.ant-pagination {
    margin: 16px 0 0 !important;
    padding: 12px 0 !important;
    align-items: center !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin-right: 8px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item a {
    color: var(--text-secondary) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item:hover {
    border-color: var(--color-primary) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item:hover a {
    color: var(--color-primary-light) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item-active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-item-active a {
    color: var(--text-primary) !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-prev,
.ant-table-pagination.ant-pagination-mini .ant-pagination-next {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    margin-right: 8px !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-prev .ant-pagination-item-link,
.ant-table-pagination.ant-pagination-mini .ant-pagination-next .ant-pagination-item-link {
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    width: 32px !important;
    height: 32px !important;
}

.ant-table-pagination.ant-pagination-mini .ant-pagination-prev:hover .ant-pagination-item-link,
.ant-table-pagination.ant-pagination-mini .ant-pagination-next:hover .ant-pagination-item-link {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-light) !important;
}

/* ===============================================
   Tabs Overrides - Brand Orange
   =============================================== */

.ant-tabs-tab {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

.ant-tabs-tab:hover {
    color: var(--color-primary-light) !important;
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--color-primary-light) !important;
}

.ant-tabs-ink-bar {
    background: var(--gradient-primary) !important;
}

.ant-tabs-nav::before {
    border-bottom-color: var(--glass-border) !important;
}

/* Tab pane content — inherit the page's light text instead of AntD's default
   black, otherwise plain <p>/<span> inside a tab on a dark glass-card become
   illegible (e.g. Billing "Current plan: …"). */
.ant-tabs-tabpane {
    color: var(--text-primary);
}

/* ===============================================
   Pagination Overrides - Brand Orange + Rounded
   =============================================== */

.ant-pagination-item {
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
}

.ant-pagination-item a {
    color: var(--text-secondary) !important;
}

.ant-pagination-item:hover {
    border-color: var(--color-primary) !important;
}

.ant-pagination-item:hover a {
    color: var(--color-primary-light) !important;
}

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

.ant-pagination-item-active a {
    color: var(--text-primary) !important;
}

.ant-pagination-item-active:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

.ant-pagination-item-active:hover a {
    color: var(--text-primary) !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
}

.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-light) !important;
}

.ant-pagination-disabled .ant-pagination-item-link {
    color: var(--text-muted) !important;
    border-color: var(--glass-border) !important;
}

.ant-pagination-jump-next .ant-pagination-item-ellipsis,
.ant-pagination-jump-prev .ant-pagination-item-ellipsis {
    color: var(--text-muted) !important;
}

.ant-pagination-jump-next .ant-pagination-item-link-icon,
.ant-pagination-jump-prev .ant-pagination-item-link-icon {
    color: var(--color-primary-light) !important;
}

.ant-pagination-options .ant-select-selector {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
}

/* ===============================================
   Switch Overrides - Brand Orange
   =============================================== */

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

.ant-switch-checked:focus {
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

/* ===============================================
   Popover/Popconfirm Overrides - Dark Theme
   =============================================== */

.ant-popover-inner {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.ant-popover-inner-content {
    color: var(--text-primary) !important;
}

.ant-popover-title {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-popover-message {
    color: var(--text-primary) !important;
}

.ant-popover-message > .anticon {
    color: var(--color-primary) !important;
}

.ant-popover-arrow-content,
.ant-popover-arrow-content::before {
    background: var(--color-bg-elevated) !important;
}

.ant-popover-buttons .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-popover-buttons .ant-btn-default:hover {
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.ant-popover-buttons .ant-btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ===============================================
   Button Focus/Wave Overrides - Brand Orange
   =============================================== */

.ant-btn:focus,
.ant-btn-default:focus,
.ant-btn-default:active {
    border-color: var(--color-primary) !important;
    color: var(--color-primary-light) !important;
}

.ant-btn-primary:active {
    background: var(--color-primary-dark) !important;
}

[ant-click-animating-without-extra-node='true']::after,
.ant-click-animating-node {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0 var(--color-primary) !important;
}

/* ===============================================
   InputNumber Overrides - Dark Theme
   =============================================== */

.ant-input-number {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-base) !important;
}

.ant-input-number:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-input-number-focused,
.ant-input-number:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

.ant-input-number-input {
    color: var(--text-primary) !important;
}

.ant-input-number-input::placeholder {
    color: var(--text-muted) !important;
}

.ant-input-number-handler-wrap {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 1px solid var(--glass-border) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.ant-input-number-handler {
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.ant-input-number-handler:hover {
    color: var(--color-primary-light) !important;
}

.ant-input-number-handler-up-inner,
.ant-input-number-handler-down-inner {
    color: var(--text-secondary) !important;
}

.ant-input-number-handler:hover .ant-input-number-handler-up-inner,
.ant-input-number-handler:hover .ant-input-number-handler-down-inner {
    color: var(--color-primary-light) !important;
}

/* Collapse panel dividers — dark theme */
.ant-collapse > .ant-collapse-item {
    border-bottom: 1px solid var(--glass-border) !important;
}

.ant-collapse > .ant-collapse-item:last-child {
    border-bottom: none !important;
}

/* ===============================================
   DatePicker/RangePicker Focus Overrides
   =============================================== */

.ant-picker-active-bar {
    background: var(--color-primary) !important;
}

.ant-picker-range .ant-picker-active-bar {
    background: var(--color-primary) !important;
}

/* ===============================================
   Skeleton Overrides - Dark Theme
   =============================================== */

.ant-skeleton-title,
.ant-skeleton-paragraph > li {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-sm) !important;
}

.ant-skeleton-avatar {
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-skeleton-active .ant-skeleton-title,
.ant-skeleton-active .ant-skeleton-paragraph > li,
.ant-skeleton-active .ant-skeleton-avatar {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.5s ease-in-out infinite !important;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===============================================
   Breadcrumb Overrides - Dark Theme
   =============================================== */

.ant-breadcrumb { color: var(--text-muted) !important; }
.ant-breadcrumb-link { color: var(--text-secondary) !important; }
.ant-breadcrumb-link:hover { color: var(--color-primary-light) !important; }
.ant-breadcrumb-link a { color: var(--text-secondary) !important; }
.ant-breadcrumb-link a:hover { color: var(--color-primary-light) !important; }
.ant-breadcrumb-separator { color: var(--text-muted) !important; }
.ant-breadcrumb > span:last-child .ant-breadcrumb-link { color: var(--text-primary) !important; }

/* ===============================================
   Descriptions Overrides - Dark Theme
   =============================================== */

.ant-descriptions-header .ant-descriptions-title { color: var(--text-primary) !important; }
.ant-descriptions-bordered .ant-descriptions-view { border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; overflow: hidden; }
.ant-descriptions-bordered .ant-descriptions-row { border-bottom: 1px solid var(--glass-border) !important; }
.ant-descriptions-bordered .ant-descriptions-item-label { background: rgba(255, 255, 255, 0.04) !important; color: var(--text-secondary) !important; border-right: 1px solid var(--glass-border) !important; }
.ant-descriptions-bordered .ant-descriptions-item-content { color: var(--text-primary) !important; background: transparent !important; }
.ant-descriptions-item-label { color: var(--text-secondary) !important; }
.ant-descriptions-item-content { color: var(--text-primary) !important; }

/* ===============================================
   Statistic Overrides - Dark Theme
   =============================================== */

.ant-statistic-title { color: var(--text-secondary) !important; }
.ant-statistic-content { color: var(--text-primary) !important; }
.ant-statistic-content-prefix, .ant-statistic-content-suffix { color: var(--text-secondary) !important; }

/* ===============================================
   Timeline Overrides - Dark Theme
   =============================================== */

.ant-timeline-item-content { color: var(--text-primary) !important; }
.ant-timeline-item-tail { border-left-color: var(--glass-border) !important; }
.ant-timeline-item-head { background: transparent !important; }
.ant-timeline-item-head-blue { color: var(--color-info, #1890ff) !important; border-color: var(--color-info, #1890ff) !important; }
.ant-timeline-item-head-green { color: var(--color-success, #52c41a) !important; border-color: var(--color-success, #52c41a) !important; }
.ant-timeline-item-head-orange { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.ant-timeline-item-head-gray { color: var(--text-muted) !important; border-color: var(--glass-border) !important; }

/* ===============================================
   Rate Overrides - Brand Orange
   =============================================== */

.ant-rate-star-full .anticon, .ant-rate-star-half .ant-rate-star-first .anticon { color: var(--color-primary) !important; }
.ant-rate-star-zero .anticon, .ant-rate-star-half .ant-rate-star-second .anticon { color: var(--text-muted) !important; }

/* ===============================================
   Segmented Overrides - Dark Theme + Brand Orange
   =============================================== */

.ant-segmented { background: rgba(255, 255, 255, 0.06) !important; border-radius: var(--radius-md) !important; padding: 2px !important; }
.ant-segmented-item { color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; transition: all var(--transition-base) !important; }
.ant-segmented-item:hover { color: var(--text-primary) !important; }
.ant-segmented-item-selected { background: var(--color-primary) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; box-shadow: 0 2px 8px rgba(230, 122, 46, 0.3) !important; }
.ant-segmented-thumb { background: var(--color-primary) !important; border-radius: var(--radius-sm) !important; }

/* Multi-select selected item tags */
.ant-select-multiple .ant-select-selection-item { background: rgba(230, 122, 46, 0.15) !important; border: 1px solid rgba(230, 122, 46, 0.3) !important; border-radius: var(--radius-sm) !important; color: var(--color-primary-light) !important; }
.ant-select-multiple .ant-select-selection-item-content { color: var(--color-primary-light) !important; }
.ant-select-multiple .ant-select-selection-item-remove { color: var(--color-primary) !important; }
.ant-select-multiple .ant-select-selection-item-remove:hover { color: var(--text-primary) !important; }

/* ===============================================
   Tooltip Overrides - Dark Theme
   =============================================== */

.ant-tooltip-inner {
    background: var(--color-bg-elevated) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.ant-tooltip-arrow-content {
    background: var(--color-bg-elevated) !important;
}

@media (max-width: 768px) {
    .ant-picker-dropdown {
        max-width: 100vw !important;
    }

    .ant-picker-panel-container {
        overflow-x: auto !important;
    }

    .ant-picker-panels {
        flex-direction: column !important;
    }
}

/* ============================================================
   TextArea affix-wrapper alignment (F-174 — digidok polish)
   Promote the affix-wrapper to be the glass box so the wrapped
   <textarea> aligns pixel-perfect with sibling Input fields in
   the same form. Inner textarea stays transparent.
   ============================================================ */
.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea:hover {
    border-color: var(--glass-border-light) !important;
}

.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea-focused,
.ant-input-affix-wrapper.ant-input-affix-wrapper-textarea:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

.ant-input-affix-wrapper-textarea > textarea.ant-input {
    background: transparent !important;
    border: none !important;
    padding: var(--space-md) !important;
    color: var(--text-primary) !important;
}