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

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

/* Selected item background - orange */
ul.docs-menu.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) li.ant-menu-item-selected,
ul.docs-menu.ant-menu.ant-menu-dark .ant-menu-item-selected,
.docs-menu.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected,
.docs-menu.ant-menu.ant-menu-dark .ant-menu-item-selected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
}

/* Override selected item text color */
.docs-menu.ant-menu-dark .ant-menu-item-selected,
ul.docs-menu.ant-menu-dark li.ant-menu-item-selected {
    color: #e67a2e !important;
    border-right: 0;
}

/* Override link colors inside selected item */
.docs-menu.ant-menu-dark .ant-menu-item-selected > a,
.docs-menu.ant-menu-dark .ant-menu-item-selected > span > a,
.docs-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
.docs-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content a,
ul.docs-menu.ant-menu-dark li.ant-menu-item-selected a {
    color: #e67a2e !important;
}

/* Override icon colors inside selected item */
.docs-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
.docs-menu.ant-menu-dark .ant-menu-item-selected .anticon,
ul.docs-menu.ant-menu-dark li.ant-menu-item-selected .anticon {
    color: #e67a2e !important;
}

/* Override SVG fill */
.docs-menu.ant-menu-dark .ant-menu-item-selected svg,
ul.docs-menu.ant-menu-dark li.ant-menu-item-selected svg {
    fill: #e67a2e !important;
}

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

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

/* All menu items - rounded corners and proper sizing */
.docs-menu.ant-menu-dark .ant-menu-item,
ul.docs-menu.ant-menu.ant-menu-dark .ant-menu-item {
    border-radius: 8px !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 2px 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 */
.docs-menu.ant-menu-dark .ant-menu-item-selected::before,
ul.docs-menu.ant-menu.ant-menu-dark .ant-menu-item-selected::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: #e67a2e !important;
    border-radius: 0 2px 2px 0 !important;
}

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

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

/* Menu container - transparent to show sidebar background */
.docs-menu.ant-menu-dark,
.docs-menu.ant-menu.ant-menu-dark,
.docs-menu.ant-menu-dark.ant-menu-inline,
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline {
    background: transparent !important;
}

/* Non-selected items - base styling */
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected),
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) {
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
}

/* Non-selected items - icons */
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) .anticon,
.docs-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.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) a,
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) span,
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a,
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) span,
.docs-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 */
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover,
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover a,
ul.docs-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover span,
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover a,
.docs-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover span {
    color: #ffffff !important;
}

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

.ant-select-dropdown {
    background: #141821 !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);
    padding: 0.25rem !important;
    max-height: none !important;
}

/* Language picker button styling */
.language-picker-button {
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
}

.language-picker-button:hover {
    color: var(--text-primary) !important;
    border-color: var(--glass-border-light) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Language menu styling */
.language-menu {
    min-width: 160px !important;
}

.language-menu-item-selected {
    background: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
}

.ant-select-item {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
    font-weight: 500;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
    color: #e67a2e !important;
}

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

.ant-message-notice-content {
    background: #141821 !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: #52c41a !important;
}

.ant-message-error .anticon {
    color: #ff4d4f !important;
}

.ant-message-info .anticon {
    color: #e67a2e !important;
}

.ant-message-notice-content .ant-message-custom-content span:last-child {
    color: #ffffff !important;
}

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

/* Base button - rounded corners for all buttons */
.ant-btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    transition: all var(--transition-fast) !important;
}

/* Primary button - orange gradient with glow */
.ant-btn-primary,
button.ant-btn-primary,
.ant-btn.ant-btn-primary {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
    color: #ffffff !important;
    transition: all 150ms ease !important;
}

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

.ant-btn-primary:active,
button.ant-btn-primary:active {
    background: linear-gradient(135deg, #d06a1e 0%, #e67a2e 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 {
    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;
}

/* Default button - glass morphism style */
.ant-btn-default {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border-light) !important;
    color: var(--text-secondary) !important;
}

.ant-btn-default:hover:not(:disabled),
.ant-btn-default:focus:not(:disabled) {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.ant-btn-default[disabled],
.ant-btn-default.ant-btn-disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* Text button */
.ant-btn-text {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

.ant-btn-text:hover:not(:disabled),
.ant-btn-text:focus:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

/* Link button */
.ant-btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--color-primary) !important;
    box-shadow: none !important;
}

.ant-btn-link:hover:not(:disabled),
.ant-btn-link:focus:not(:disabled) {
    color: var(--color-primary-light) !important;
}

/* ========================================
   Input Overrides - Dark Theme
   ======================================== */

.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:focus,
.ant-input:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

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

/* Select component */
.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;
}

.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 2px var(--color-primary-glow) !important;
}

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

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

/* ========================================
   TextArea Overrides - Dark Theme
   ======================================== */

.ant-input-textarea textarea,
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:focus,
.ant-input-textarea textarea:hover,
textarea.ant-input:focus,
textarea.ant-input:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-glow) !important;
}

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

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

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

.ant-spin-dot-item {
    background-color: #e67a2e !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: #e67a2e !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: #52c41a !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: #faad14 !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: #ff4d4f !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;
}

/* ========================================
   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: #95de64 !important;
}

.ant-tag-blue {
    background: rgba(24, 144, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.25) !important;
    color: #69c0ff !important;
}

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

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

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

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

.ant-modal-content {
    background: rgba(30, 32, 38, 0.95) !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: #ffffff !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;
}

.ant-modal-close:hover {
    color: #ffffff !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-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 24px !important;
}

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

.ant-tooltip-inner {
    background: #1a1f2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.ant-tooltip-arrow-content {
    background: #1a1f2e !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: #ffffff !important;
}

.ant-card-head-title {
    color: #ffffff !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;
}

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

.ant-dropdown-menu {
    background: #141821 !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);
    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 {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

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

.ant-dropdown-menu-item:hover .anticon {
    color: #ffffff !important;
}

/* ========================================
   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) !important;
}

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

.ant-breadcrumb-link a:hover {
    color: var(--color-primary) !important;
}

.ant-breadcrumb-separator {
    color: var(--text-muted) !important;
}

/* ========================================
   Pagination Overrides - Dark Theme
   ======================================== */

.ant-pagination-item {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 6px !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) !important;
}

.ant-pagination-item-active {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: var(--color-primary) !important;
}

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

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 6px !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) !important;
}