/**
 * ProRank Design System - WordPress Admin Overrides
 * 
 * Overrides for WordPress admin styles to ensure ProRank
 * components display correctly in the WP admin environment.
 * 
 * @module wordpress/overrides
 * @since 3.0.0
 */

/* ============================================
   WORDPRESS ADMIN RESETS
   Reset WP admin styles that conflict
   ============================================ */

/* Ensure WordPress wrap container works with ProRank full-width layout */
.toplevel_page_prorank-seo .wrap,
.prorank-seo_page_prorank-dashboard .wrap,
.prorank-seo_page_prorank-analytics .wrap,
.prorank-seo_page_prorank-settings .wrap,
.prorank-seo_page_prorank-on-page-seo .wrap,
.prorank-seo_page_prorank-performance .wrap,
.prorank-seo_page_prorank-technical-seo .wrap,
.prorank-seo_page_prorank-ai-tools .wrap,
.prorank-seo_page_prorank-ecommerce-seo .wrap,
.prorank-seo_page_prorank-agency-hub .wrap,
.prorank-seo_page_prorank-local-seo .wrap,
.prorank-seo_page_prorank-internal-linking .wrap,
.prorank-seo_page_prorank-site-audit .wrap,
.prorank-seo_page_prorank-support .wrap,
.prorank-seo_page_prorank-import-export .wrap {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Remove WordPress admin page title when using ProRank header */
.prorank-seo_page_prorank-dashboard .wrap > h1:first-child,
.prorank-seo_page_prorank-analytics .wrap > h1:first-child,
.prorank-seo_page_prorank-settings .wrap > h1:first-child {
  display: none;
}

/* Reset WordPress form styles within ProRank */
.prorank-page .form-table th {
  padding: 20px 10px 20px 0;
  font-weight: 500;
}

.prorank-page .form-table td {
  padding: 15px 10px;
}

/* Override WordPress button styles in ProRank context */
.prorank-page .button,
.prorank-page .button-primary,
.prorank-page .button-secondary {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-shadow: none;
  box-shadow: none;
}

/* ============================================
   WORDPRESS NOTICES
   Style WP admin notices to match ProRank
   ============================================ */

.prorank-page .notice,
.prorank-page .notice-error,
.prorank-page .notice-warning,
.prorank-page .notice-success,
.prorank-page .notice-info {
  border-radius: var(--prorank-radius-sm);
  border-left-width: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  box-shadow: var(--prorank-shadow-sm);
}

.prorank-page .notice-success {
  border-left-color: var(--prorank-success);
  background: rgba(16, 185, 129, 0.05);
}

.prorank-page .notice-error {
  border-left-color: var(--prorank-error);
  background: rgba(239, 68, 68, 0.05);
}

.prorank-page .notice-warning {
  border-left-color: var(--prorank-warning);
  background: rgba(251, 191, 36, 0.05);
}

.prorank-page .notice-info {
  border-left-color: var(--prorank-primary);
  background: rgba(37, 99, 235, 0.05);
}

/* ============================================
   WORDPRESS TABS
   Override WP nav tabs in ProRank pages
   ============================================ */

.prorank-page .nav-tab-wrapper {
  border-bottom: 2px solid var(--prorank-border);
  padding: 0;
  margin: 0 0 24px;
}

.prorank-page .nav-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--prorank-text-secondary);
  padding: 12px 20px;
  margin: 0 0 -2px 0;
  font-size: 14px;
  font-weight: 500;
  transition: var(--prorank-transition);
}

.prorank-page .nav-tab:hover {
  background: var(--prorank-bg-secondary);
  color: var(--prorank-text);
}

.prorank-page .nav-tab-active,
.prorank-page .nav-tab-active:hover {
  background: transparent;
  border-bottom-color: var(--prorank-primary);
  color: var(--prorank-primary);
}

/* ============================================
   WORDPRESS TABLES
   Override WP table styles
   ============================================ */

.prorank-page .wp-list-table {
  border: 1px solid var(--prorank-border);
  border-radius: var(--prorank-radius-sm);
  overflow: hidden;
  box-shadow: var(--prorank-shadow-sm);
}

.prorank-page .wp-list-table thead {
  background: var(--prorank-bg-secondary);
}

.prorank-page .wp-list-table th {
  border-bottom: 2px solid var(--prorank-border);
  font-weight: 600;
  color: var(--prorank-text);
}

.prorank-page .wp-list-table tbody tr:hover {
  background: var(--prorank-bg-secondary);
}

.prorank-page .wp-list-table .column-cb {
  padding: 12px;
}

/* ============================================
   WORDPRESS MODALS
   Override WP modal/thickbox styles
   ============================================ */

.prorank-page #TB_window {
  border-radius: var(--prorank-radius);
  box-shadow: var(--prorank-shadow-lg);
}

.prorank-page #TB_title {
  background: var(--prorank-gradient);
  color: white;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
}

.prorank-page #TB_ajaxContent {
  padding: 24px;
}

/* ============================================
   WORDPRESS SIDEBAR
   Adjust WP admin sidebar for ProRank pages
   ============================================ */

/* Use a green active background for ProRank menu item */
#adminmenu .toplevel_page_prorank-seo.current > a.menu-top,
#adminmenu .toplevel_page_prorank-seo.wp-has-current-submenu > a.menu-top,
#adminmenu .toplevel_page_prorank-seo.wp-has-current-submenu > a.wp-has-current-submenu {
  background: #16a34a;
  color: #fff;
}

#adminmenu .toplevel_page_prorank-seo.current .wp-menu-image,
#adminmenu .toplevel_page_prorank-seo.wp-has-current-submenu .wp-menu-image,
#adminmenu .toplevel_page_prorank-seo.current .wp-menu-image:before,
#adminmenu .toplevel_page_prorank-seo.wp-has-current-submenu .wp-menu-image:before {
  color: #fff;
}

/* Add ProRank accent to active menu item */
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-open .wp-submenu .wp-submenu-head {
  background: var(--prorank-primary);
}

#adminmenu .current a.current {
  position: relative;
}

#adminmenu .current a.current::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--prorank-accent);
}

/* ============================================
   WORDPRESS FORM FIELDS
   Override WP form field styles
   ============================================ */

.prorank-page input[type="text"],
.prorank-page input[type="password"],
.prorank-page input[type="email"],
.prorank-page input[type="number"],
.prorank-page input[type="search"],
.prorank-page input[type="tel"],
.prorank-page input[type="url"],
.prorank-page textarea,
.prorank-page select {
  border: 1px solid var(--prorank-border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  background: white;
  transition: var(--prorank-transition);
}

.prorank-page input[type="text"]:focus,
.prorank-page input[type="password"]:focus,
.prorank-page input[type="email"]:focus,
.prorank-page input[type="number"]:focus,
.prorank-page input[type="search"]:focus,
.prorank-page input[type="tel"]:focus,
.prorank-page input[type="url"]:focus,
.prorank-page textarea:focus,
.prorank-page select:focus {
  border-color: var(--prorank-primary);
  box-shadow: 0 0 0 1px var(--prorank-primary);
  outline: none;
}

/* ============================================
   WORDPRESS MEDIA UPLOADER
   Style media uploader to match ProRank
   ============================================ */

.prorank-page .media-modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.prorank-page .media-modal-content {
  border-radius: var(--prorank-radius);
  overflow: hidden;
}

.prorank-page .media-frame-title {
  background: var(--prorank-gradient);
  color: white;
}

.prorank-page .media-frame-title h1 {
  color: white;
}

/* ============================================
   GUTENBERG COMPATIBILITY
   Ensure ProRank works with Gutenberg
   ============================================ */

.prorank-page .components-button.is-primary {
  background: var(--prorank-primary);
  border-color: var(--prorank-primary);
}

.prorank-page .components-button.is-primary:hover {
  background: var(--prorank-primary-dark);
  border-color: var(--prorank-primary-dark);
}

.prorank-page .components-panel__header {
  background: var(--prorank-bg-secondary);
  border-bottom: 1px solid var(--prorank-border);
}

.prorank-page .components-panel__body-title {
  font-weight: 500;
  color: var(--prorank-text);
}

/* ============================================
   WORDPRESS POINTERS
   Style WP pointers/tooltips
   ============================================ */

.prorank-pointer .wp-pointer-content {
  background: white;
  border: 1px solid var(--prorank-border);
  box-shadow: var(--prorank-shadow);
}

.prorank-pointer .wp-pointer-content h3 {
  background: var(--prorank-gradient);
  color: white;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
}

.prorank-pointer .wp-pointer-buttons {
  background: var(--prorank-bg-secondary);
  padding: 12px 16px;
}

/* ============================================
   WORDPRESS SCREEN OPTIONS
   Style screen options tab
   ============================================ */

.prorank-page #screen-options-wrap {
  background: white;
  border: 1px solid var(--prorank-border);
  border-top: none;
  box-shadow: var(--prorank-shadow);
}

.prorank-page #contextual-help-wrap {
  background: white;
  border: 1px solid var(--prorank-border);
  border-top: none;
  box-shadow: var(--prorank-shadow);
}

/* ============================================
   WORDPRESS ADMIN BAR
   Ensure admin bar doesn't interfere
   ============================================ */

.prorank-page.admin-bar .prorank-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .prorank-page.admin-bar .prorank-header {
    top: 46px;
  }
}

/* ============================================
   WORDPRESS SPINNER
   Replace WP spinner with ProRank style
   ============================================ */

.prorank-page .spinner {
  background: none;
  border: 3px solid var(--prorank-border);
  border-top-color: var(--prorank-primary);
  border-radius: 50%;
  animation: prorank-spin 1s linear infinite;
  float: none;
  margin: 0;
}

/* ============================================
   WORDPRESS DASHICONS
   Ensure dashicons work properly
   ============================================ */

.prorank-page .dashicons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: middle;
}

.prorank-page .dashicons-before::before {
  vertical-align: middle;
}

/* ============================================
   Z-INDEX MANAGEMENT
   Ensure ProRank elements layer correctly
   ============================================ */

.prorank-modal-overlay {
  z-index: 100000; /* Above WP admin elements */
}

.prorank-tooltip {
  z-index: 100001; /* Above modals */
}

.prorank-dropdown {
  z-index: 99999; /* Below modals but above content */
}

/* ============================================
   WORDPRESS CONTENT AREA FIXES
   Ensure ProRank content displays properly
   ============================================ */

/* Remove default WordPress content padding */
#wpcontent {
  padding-left: 0 !important;
}

#wpbody-content {
  padding-bottom: 0 !important;
  overflow-x: visible !important;
}

/* Ensure admin app container allows full-width */
.prorank-admin-app {
  width: 100%;
  max-width: none;
  overflow-x: visible;
}

/* Fix for WordPress admin left margin */
.auto-fold #wpcontent {
  padding-left: 0 !important;
}

/* ============================================
   RESPONSIVE WORDPRESS OVERRIDES
   Mobile WP admin adjustments
   ============================================ */

@media screen and (max-width: 782px) {
  .prorank-page .wrap {
    margin: 0;
    padding: 0;
  }

  .prorank-page #wpcontent {
    padding-left: 0;
  }

  .prorank-page .auto-fold #wpcontent {
    padding-left: 0;
  }
}