.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Custom KMS Frontend Styles */
.demo-logo-vertical {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}

.ant-layout-sider-collapsed .demo-logo-vertical {
  margin: 16px 8px;
}

/* Custom card hover effects */
.ant-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

/* Custom table styles */
.ant-table-thead > tr > th {
  background-color: #fafafa;
  font-weight: 600;
}

/* Custom form styles */
.ant-form-item-label > label {
  font-weight: 500;
}

/* Custom button styles */
.ant-btn-primary {
  border-radius: 6px;
}

.ant-btn {
  border-radius: 6px;
}

/* Custom tag styles */
.ant-tag {
  border-radius: 4px;
  font-weight: 500;
}

/* Custom modal styles */
.ant-modal-header {
  border-radius: 8px 8px 0 0;
}

.ant-modal-content {
  border-radius: 8px;
}

/* Custom alert styles */
.ant-alert {
  border-radius: 6px;
}

/* Custom timeline styles */
.ant-timeline-item-content {
  margin-left: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ant-layout-sider {
    position: fixed !important;
    height: 100vh;
    z-index: 999;
  }
  
  .ant-layout-content {
    margin-left: 0 !important;
  }
}

/* Loading spinner customization */
.ant-spin-dot-item {
  background-color: #1890ff;
}

/* Custom scrollbar for code blocks */
pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

pre::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Custom input styles */
.ant-input, .ant-input-affix-wrapper {
  border-radius: 6px;
}

.ant-select-selector {
  border-radius: 6px !important;
}

/* Custom statistic styles */
.ant-statistic-content {
  font-weight: 600;
}

/* Custom menu styles */
.ant-menu-dark .ant-menu-item-selected {
  background-color: #1890ff;
}

.ant-menu-dark .ant-menu-item:hover {
  background-color: rgba(24, 144, 255, 0.2);
}

/* Custom pagination styles */
.ant-pagination-item-active {
  border-color: #1890ff;
}

.ant-pagination-item-active a {
  color: #1890ff;
}

/* Custom drawer styles for mobile */
@media (max-width: 768px) {
  .ant-drawer-content-wrapper {
    width: 280px !important;
  }
}

/* Custom notification styles */
.ant-notification {
  border-radius: 8px;
}

/* Custom tooltip styles */
.ant-tooltip-inner {
  border-radius: 6px;
}

/* Custom progress styles */
.ant-progress-bg {
  border-radius: 4px;
}

/* Custom switch styles */
.ant-switch {
  border-radius: 12px;
}

/* Custom checkbox styles */
.ant-checkbox-wrapper {
  font-weight: 500;
}

/* Custom radio styles */
.ant-radio-wrapper {
  font-weight: 500;
}

/* Custom date picker styles */
.ant-picker {
  border-radius: 6px;
}

/* Custom upload styles */
.ant-upload {
  border-radius: 6px;
}

/* Custom collapse styles */
.ant-collapse {
  border-radius: 6px;
}

.ant-collapse-item {
  border-radius: 6px;
}

/* Custom tabs styles */
.ant-tabs-tab {
  font-weight: 500;
}

/* Custom steps styles */
.ant-steps-item-title {
  font-weight: 600;
}

/* Custom breadcrumb styles */
.ant-breadcrumb {
  font-weight: 500;
}

/* Custom anchor styles */
.ant-anchor-link-title {
  font-weight: 500;
}

/* Custom back-top styles */
.ant-back-top {
  border-radius: 20px;
}

/* Custom result styles */
.ant-result-title {
  font-weight: 600;
}

/* Custom empty styles */
.ant-empty-description {
  font-weight: 500;
}

/* Custom spin styles */
.ant-spin-text {
  font-weight: 500;
}
