ss-dp/src/components/ant_override.less

/* Global Ant Design Overrides for Dashboard/Big Screen */

// ==============================================================================
// 1. Table Component
// ==============================================================================
.ant-table-wrapper {
  .ant-table {
    background: transparent !important;
    color: #fff;

    // Header Styles
    .ant-table-thead > tr > th {
      background: rgba(21, 60, 102, 0.9) !important; // Dark Blue Header
      color: #fff !important;
      font-weight: bold;
      border-bottom: 1px solid rgba(0, 160, 233, 0.3);
      padding: 12px 16px;
    }

    // Body Styles
    .ant-table-tbody > tr > td {
      background: rgba(0, 20, 50, 0.3) !important; // Semi-transparent dark
      color: #fff !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      // Hover effect
      &.ant-table-cell-row-hover {
        background: rgba(0, 160, 233, 0.2) !important;
      }
    }

    // Hover row global
    .ant-table-tbody > tr:hover > td {
      background: rgba(0, 160, 233, 0.2) !important;
    }

    // Empty Data
    .ant-empty-description {
      color: rgba(255, 255, 255, 0.5);
    }
  }

  // Pagination
  .ant-pagination {
    .ant-pagination-item {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.3);
      a { color: #fff; }
      &-active {
        border-color: #3b7cff;
        background: rgba(59, 124, 255, 0.2);
        a { color: #3b7cff; }
      }
    }
    .ant-pagination-prev, .ant-pagination-next {
      .ant-pagination-item-link {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
      }
    }
  }
}

// ==============================================================================
// 2. Input / InputNumber / TextArea Component
// ==============================================================================
.ant-input, .ant-input-number, .ant-input-affix-wrapper {
  background-color: transparent !important;
  border: 1px solid rgba(59, 124, 255, 0.6) !important; // Blueish border
  color: #fff !important;
  border-radius: 4px;
  
  &:hover, &:focus, &-focused {
    border-color: #3b7cff !important;
    box-shadow: 0 0 5px rgba(59, 124, 255, 0.5);
  }

  // Placeholder color
  &::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  
  // Input Number specific
  &.ant-input-number {
    .ant-input-number-handler-wrap {
      background: rgba(255, 255, 255, 0.1);
      .ant-input-number-handler {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        .anticon { color: #fff; }
      }
    }
    .ant-input-number-input {
      color: #fff;
    }
  }
  
  // Affix wrapper (e.g. search icon)
  .ant-input-prefix, .ant-input-suffix {
    color: rgba(255, 255, 255, 0.6);
  }
}

// ==============================================================================
// 3. Select / DatePicker / RangePicker / TimePicker
// ==============================================================================
// Common Input Styles
.ant-select-selector, .ant-picker {
  background-color: transparent !important;
  border: 1px solid rgba(59, 124, 255, 0.6) !important;
  color: #fff !important;
  border-radius: 4px;

  &:hover {
    border-color: #3b7cff !important;
  }
}

// Select Specific
.ant-select {
  color: #fff;
  
  .ant-select-arrow {
    color: #fff;
  }
  
  .ant-select-clear {
    background: transparent;
    color: #fff;
  }

  &:not(.ant-select-disabled):hover .ant-select-selector {
    border-color: #3b7cff !important;
  }
}

// Dropdowns (Select, DatePicker, etc.)
.ant-select-dropdown, .ant-picker-dropdown {
  background-color: rgba(0, 20, 50, 0.95) !important;
  border: 1px solid rgba(0, 160, 233, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

  // Select Options
  .ant-select-item {
    color: #fff;
    &-option-active, &-option-selected {
      background-color: rgba(0, 160, 233, 0.3) !important;
    }
  }
  
  // Picker Panels
  .ant-picker-panel-container {
    background: transparent;
  }
  
  .ant-picker-header {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    button { color: #fff; }
  }
  
  .ant-picker-content {
    th { color: #fff; }
    td { color: rgba(255, 255, 255, 0.8); }
  }
  
  .ant-picker-cell {
    &:hover .ant-picker-cell-inner {
      background: rgba(0, 160, 233, 0.3);
    }
    &-in-view {
      color: #fff;
    }
    &-selected .ant-picker-cell-inner {
      background: #3b7cff !important;
    }
  }

  // Footer/Ranges
  .ant-picker-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
    color: #3b7cff;
    background: rgba(59, 124, 255, 0.2);
    border-color: #3b7cff;
  }
}

// Picker Text Color fix
.ant-picker-input > input {
  color: #fff !important;
  &::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}
.ant-picker-suffix {
  color: #fff;
}
.ant-picker-range-separator .ant-picker-separator {
  color: #fff;
}

// ==============================================================================
// 4. Button Component
// ==============================================================================
.ant-btn {
  border-radius: 4px;
  
  // Primary Button (Blue)
  &.ant-btn-primary {
    background: #3b7cff; // Solid blue
    border-color: #3b7cff;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
    &:hover, &:focus {
      background: #5d91ff;
      border-color: #5d91ff;
    }
  }
  
  // Default Button (Transparent/Ghost)
  &:not(.ant-btn-primary):not(.ant-btn-link):not(.ant-btn-text) {
    background: transparent;
    border: 1px solid #3b7cff;
    color: #3b7cff;
    
    &:hover {
      color: #5d91ff;
      border-color: #5d91ff;
    }
  }
}

// ==============================================================================
// 5. Radio Component
// ==============================================================================
.ant-radio-wrapper {
  color: #fff; // Label text color
  margin-right: 16px;
  
  &:hover .ant-radio-inner {
    border-color: #3b7cff;
  }

  .ant-radio-inner {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    
    &::after {
      background-color: #3b7cff; // Dot color
    }
  }
  
  .ant-radio-checked {
    .ant-radio-inner {
      border-color: #3b7cff;
      &::after {
        background-color: #3b7cff;
      }
    }
  }
}

// Radio Group (Button Style)
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #3b7cff;
  border-color: #3b7cff;
  color: #fff;
}