/* App.vue specific styles */

.app-container {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: calc(100vh - 20px);
  background-color: var(--surface-ground);
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

/* General rules to prevent horizontal scrolling */
.p-component,
.p-component * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Ensure all elements with fluid widths respect their container */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

/* Prevent tables from overflowing their container */
table {
  table-layout: fixed;
  width: 100%;
}

/* General rules for text management in dark mode */
.vip-store-admin-page {
  body {
    color: var(--text-color);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--text-color);
  }

  p,
  span,
  div,
  a {
    color: var(--text-color);
  }

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

/* Override button styles for PrimeVue */
.p-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white !important;

  .p-button-label {
    color: white !important;
  }

  .p-button-icon {
    color: white !important;
    font-family: "primeicons" !important;
    margin-right: 0.5rem;
  }
}

/* Style for outlined buttons */
.p-button.p-button-outlined {
  background-color: transparent !important;

  &:not(:hover) {
    color: var(--primary-color) !important;

    .p-button-label {
      color: var(--primary-color) !important;
    }

    .p-button-icon {
      color: var(--primary-color) !important;
    }
  }

  &:hover {
    color: white !important;
    background-color: var(--primary-500) !important;
    border-color: var(--primary-500) !important;

    .p-button-label,
    .p-button-icon {
      color: white !important;
    }
  }
}

/* Style for text buttons */
.p-button.p-button-text {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--text-color) !important;
  border: none !important;
  
  .p-button-label {
    color: var(--text-color) !important;
  }
  .p-button-icon {
    color: var(--text-color) !important;
  }

  &:hover {
    background-color: var(--surface-hover) !important;

    .p-button-icon,
    .p-button-label {
      color: var(--primary-color) !important;
    }
  }

  &:focus,
  &:active,
  &.p-highlight {
    box-shadow: none !important;
    background-color: var(--button-text-hover-bg) !important;
  }
}

/* Fix for PrimeIcons */
.pi {
  font-family: "primeicons" !important;
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  display: inline-block;
}

/* Styles for popups and dialogs */
.p-dialog {
  .p-dialog-header {
    background-color: var(--surface-card);
    color: var(--text-color);
    border-radius: var(--p-dialog-border-radius);
  }

  .p-dialog-content {
    background-color: var(--surface-card);
    color: var(--text-color);
  }

  .p-dialog-footer {
    background-color: var(--surface-card);
    border-radius: var(--p-dialog-border-radius);

    .p-button {
      margin-left: 0.5rem;
    }
  }
}

/* Light mode - specific styles */
:root {
  --button-text-color: #ffffff;
  --button-text-color-secondary: #495057;
  --button-primary-color: #6366f1;
  --button-success-color: #22c55e;
  --button-danger-color: #ef4444;
  --button-text-hover-bg: rgba(0, 0, 0, 0.04);
}

/* Styles for tables in dark mode */
[data-theme="dark"] {
  .p-datatable {
    .p-datatable-tbody > tr.p-row-odd {
      background-color: #1e1e1e !important;
    }
    
    .p-datatable-tbody > tr.p-row-even {
      background-color: #2a2a2a !important;
    }
    
    .p-datatable-tbody > tr:hover {
      background-color: #2a2a2a !important;
    }
    
    .p-datatable-footer,
    .p-paginator-bottom {
      background-color: #262626 !important;
      border-color: #333333 !important;
    }
    
    .p-datatable-tbody > tr > td {
      border-color: #333333 !important;
    }
  }
  
  .p-paginator {
    background-color: #262626 !important;
    color: white !important;
  }
  
  .p-highlight {
    background-color: var(--primary-color) !important;
    color: white !important;
  }
  
  /* Styles for dialogs in dark mode */
  .p-dialog {
    background-color: var(--surface-card) !important;
    
    .p-dialog-header {
      background-color: var(--surface-card) !important;
      color: var(--text-color) !important;
      border-bottom: 1px solid #333333 !important;
    }
    
    .p-dialog-content {
      background-color: var(--surface-card) !important;
      color: var(--text-color) !important;
    }
    
    .p-dialog-footer {
      background-color: var(--surface-card) !important;
      border-top: 1px solid #333333 !important;
    }
  }
  
  /* Styles for cards */
  .p-card {
    background-color: #262626 !important;
    border-color: #333333 !important;
    
    .p-card-title {
      color: #e0e0e0 !important;
    }
    
    .p-card-content {
      color: #d0d0d0 !important;
    }
  }
  
  /* Styles for dropdown menus */
  .p-dropdown-panel {
    background-color: #262626 !important;
    border-color: #333333 !important;
    
    .p-dropdown-items .p-dropdown-item {
      color: #e0e0e0 !important;
      
      &:hover {
        background-color: #333333 !important;
      }
    }
  }
}

/* Remove focus effects on buttons */
.p-button:active,
.p-button.p-highlight,
.p-button.p-active,
.p-button:focus,
button:active,
button:focus,
button.active {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
}

button:focus,
.p-button:focus,
.p-button:focus-visible {
  outline: none !important;
}

/* Styles for icon-only buttons */
.p-button.p-button-icon-only {
  border: none !important;
  background-color: transparent !important;

  &:focus,
  &:active,
  &.p-active,
  &.p-highlight {
    border: none !important;
    box-shadow: none !important;
  }

  &:hover {
    background-color: var(--button-text-hover-bg) !important;
  }
}

/* Styles for buttons in display type sections */
.type-display-buttons .p-button,
[data-section="display-options"] .p-button {
  border: none !important;
  background-color: transparent !important;
  color: var(--text-color-secondary) !important;

  .p-button-icon {
    color: var(--text-color-secondary) !important;
  }

  &.p-active,
  &.p-highlight {
    background-color: var(--surface-hover) !important;
    border-radius: 4px;

    .p-button-icon {
      color: var(--primary-color) !important;
    }
  }

  &:hover {
    background-color: var(--surface-hover) !important;

    .p-button-icon {
      color: var(--primary-color) !important;
    }
  }
}

/* Hide WordPress notifications in sidebar */
.sidebar-header .notice {
  display: none !important;
}

/* For WordPress notices (alternative to JS solution) */
.wordpress-notices {
  padding: 1rem;
  margin-bottom: 1rem;
}