/* ===== GLOBAL CLIENTAREA DARK THEME ===== */

/* Element UI overrides for dark theme */
.el-container {
  background: #0B0F1A !important;
}

/* Main content area */
.el-main {
  background: #0B0F1A !important;
  color: #E2E8F0 !important;
}

/* ===== SIDEBAR ===== */
.el-aside {
  background: #0F172A !important;
  border-right: 1px solid rgba(59, 130, 246, 0.08) !important;
}

.el-menu {
  background: #0F172A !important;
  border-right: none !important;
}

/* ===== TOP HEADER ===== */
.el-header {
  background: rgba(15, 23, 42, 0.9) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.08) !important;
  backdrop-filter: blur(20px);
}

/* ===== TABLES ===== */
.el-table {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

.el-table th,
.el-table th.is-leaf {
  background-color: rgba(30, 41, 59, 0.5) !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.08) !important;
}

.el-table td {
  border-bottom: 1px solid rgba(59, 130, 246, 0.05) !important;
}

.el-table tr {
  background-color: transparent !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

.el-table__body-wrapper {
  background-color: transparent !important;
}

.el-table__empty-block {
  background-color: transparent !important;
}

.el-table--border,
.el-table--group {
  border-color: rgba(59, 130, 246, 0.08) !important;
}

.el-table--border td,
.el-table--border th {
  border-right: 1px solid rgba(59, 130, 246, 0.05) !important;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

.el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

/* Table text */
.el-table .cell {
  color: #CBD5E1 !important;
}

/* ===== TABS ===== */
.el-tabs__item {
  color: #64748B !important;
}

.el-tabs__item.is-active {
  color: #3B82F6 !important;
}

.el-tabs__active-bar {
  background-color: #3B82F6 !important;
}

.el-tabs__nav-wrap::after {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

/* ===== BUTTONS ===== */
.el-button--primary {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
}

.el-button--primary:hover {
  background-color: #2563EB !important;
  border-color: #2563EB !important;
}

.el-button--default {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: #CBD5E1 !important;
}

.el-button--default:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #3B82F6 !important;
}

.el-button--text {
  color: #3B82F6 !important;
}

/* ===== CARDS ===== */
.el-card {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(59, 130, 246, 0.08) !important;
  color: #E2E8F0 !important;
}

.el-card__header {
  border-bottom-color: rgba(59, 130, 246, 0.08) !important;
  color: #F1F5F9 !important;
}

/* ===== INPUTS ===== */
.el-input__inner {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: #F1F5F9 !important;
}

.el-input__inner::placeholder {
  color: #475569 !important;
}

.el-input__inner:focus {
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.el-input__prefix,
.el-input__suffix {
  color: #64748B !important;
}

/* ===== SELECT / DROPDOWN ===== */
.el-select-dropdown {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  backdrop-filter: blur(20px);
}

.el-select-dropdown__item {
  color: #94A3B8 !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: #F1F5F9 !important;
}

.el-select-dropdown__item.selected {
  color: #3B82F6 !important;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: rgba(15, 23, 42, 0.95) !important;
}

.el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: rgba(59, 130, 246, 0.15) !important;
}

/* ===== DIALOG ===== */
.el-dialog {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  backdrop-filter: blur(20px);
}

.el-dialog__title {
  color: #F1F5F9 !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #64748B !important;
}

.el-dialog__body {
  color: #CBD5E1 !important;
}

.v-modal {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ===== PAGINATION ===== */
.el-pagination {
  color: #94A3B8 !important;
}

.el-pagination button {
  background-color: transparent !important;
  color: #94A3B8 !important;
}

.el-pagination .el-pager li {
  background-color: transparent !important;
  color: #94A3B8 !important;
}

.el-pagination .el-pager li.active {
  color: #3B82F6 !important;
}

.el-pagination .el-pager li:hover {
  color: #3B82F6 !important;
}

.el-pagination .el-select .el-input .el-input__inner {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: #CBD5E1 !important;
}

.el-pagination__total,
.el-pagination__jump {
  color: #64748B !important;
}

/* ===== FORM ===== */
.el-form-item__label {
  color: #94A3B8 !important;
}

/* ===== DIVIDER ===== */
.el-divider {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

.el-divider__text {
  background-color: transparent !important;
  color: #64748B !important;
}

/* ===== TAG / BADGE ===== */
.el-tag {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #60A5FA !important;
}

.el-tag--success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: #86EFAC !important;
}

.el-tag--danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #FCA5A5 !important;
}

.el-tag--warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #FCD34D !important;
}

.el-badge__content {
  background-color: #EF4444 !important;
  border-color: #0B0F1A !important;
  color: #FFFFFF !important;
}

/* ===== TOOLTIP ===== */
.el-tooltip__popper.is-dark {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

/* ===== MESSAGE / NOTIFICATION ===== */
.el-message {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
}

.el-message__content {
  color: #E2E8F0 !important;
}

/* ===== BREADCRUMB ===== */
.el-breadcrumb__item {
  color: #64748B !important;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #94A3B8 !important;
}

/* ===== LOADING ===== */
.el-loading-mask {
  background-color: rgba(11, 15, 26, 0.8) !important;
}

.el-loading-spinner .el-loading-text {
  color: #94A3B8 !important;
}

.el-loading-spinner .path {
  stroke: #3B82F6 !important;
}

/* ===== CHECKBOX ===== */
.el-checkbox__inner {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

.el-checkbox__label {
  color: #CBD5E1 !important;
}

/* ===== RADIO ===== */
.el-radio__inner {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

.el-radio__label {
  color: #CBD5E1 !important;
}

/* ===== SWITCH ===== */
.el-switch__core {
  background-color: #334155 !important;
  border-color: #334155 !important;
}

.el-switch.is-checked .el-switch__core {
  background-color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

/* ===== DATE PICKER ===== */
.el-date-editor .el-range-input {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

.el-picker-panel {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: #CBD5E1 !important;
}

.el-date-table td.normal span,
.el-date-table td .el-date-table-cell__text {
  color: #CBD5E1 !important;
}

.el-picker-panel__icon-btn {
  color: #64748B !important;
}

/* ===== PROGRESS ===== */
.el-progress-bar__outer {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

/* ===== POPOVER ===== */
.el-popover {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: #CBD5E1 !important;
}

/* ===== ALERT ===== */
.el-alert--info.is-light {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: #93C5FD !important;
}

.el-alert--success.is-light {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.15) !important;
  color: #86EFAC !important;
}

.el-alert--warning.is-light {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.15) !important;
  color: #FCD34D !important;
}

.el-alert--error.is-light {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  color: #FCA5A5 !important;
}

/* ===== LINKS ===== */
a {
  color: #3B82F6 !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(59, 130, 246, 0.3);
}

/* ===== MISC ===== */
.el-dropdown-menu {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
}

.el-dropdown-menu__item {
  color: #94A3B8 !important;
}

.el-dropdown-menu__item:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: #F1F5F9 !important;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: rgba(15, 23, 42, 0.95) !important;
}

.el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: rgba(59, 130, 246, 0.15) !important;
}

/* Step */
.el-step__title.is-finish,
.el-step__head.is-finish {
  color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}

/* Transfer */
.el-transfer-panel {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(59, 130, 246, 0.08) !important;
}

.el-transfer-panel__header {
  background-color: rgba(30, 41, 59, 0.3) !important;
  border-bottom-color: rgba(59, 130, 246, 0.08) !important;
  color: #F1F5F9 !important;
}

.el-transfer-panel__body {
  background-color: transparent !important;
}

.el-transfer-panel__footer {
  background-color: rgba(30, 41, 59, 0.3) !important;
  border-top-color: rgba(59, 130, 246, 0.08) !important;
}

/* Collapse */
.el-collapse-item__header {
  background-color: transparent !important;
  color: #E2E8F0 !important;
  border-bottom-color: rgba(59, 130, 246, 0.08) !important;
}

.el-collapse-item__wrap {
  background-color: transparent !important;
  border-bottom-color: rgba(59, 130, 246, 0.08) !important;
}

/* Timeline */
.el-timeline-item__tail {
  border-left-color: rgba(59, 130, 246, 0.15) !important;
}

.el-timeline-item__content {
  color: #CBD5E1 !important;
}

/* Descriptions */
.el-descriptions__body {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

.el-descriptions__label {
  color: #94A3B8 !important;
}

/* Tree */
.el-tree {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

.el-tree-node__content:hover {
  background-color: rgba(59, 130, 246, 0.05) !important;
}