/**
 * YOOAdmin - Focus mode layout and accent
 *
 * @package YOOAdmin
 */

/* Scope everything to body.yoo-focus to avoid leaking into native WP UI. */

/* ---------------- Layout container ---------------- */
.yoo-shell-content {
  padding: 0 24px 24px;
  box-sizing: border-box;
}

/* Use our own page container instead of touching WP .wrap */
.yoo-focus .yp-container {
  max-width: 1280px;
  margin: 16px auto;
  padding: 0;
  box-sizing: border-box;
}
.yoo-focus .yp-container > h1,
.yoo-focus .yp-container > h2 {
  margin-top: 12px !important;
}

/* Common blocks should stretch naturally inside the container */
.yoo-focus .yp-container .form-table,
.yoo-focus .yp-container .wp-list-table,
.yoo-focus .yp-container .tablenav,
.yoo-focus .yp-container .card,
.yoo-focus .yp-container .cards,
.yoo-focus .yp-container .stuffbox {
  width: 100%;
  box-sizing: border-box;
}

/* WordPress media / Gutenberg modals above our header */
/* Correct modal stacking order */
.media-modal-backdrop { z-index: 160000 !important; }
.media-modal          { z-index: 160001 !important; }

/* Gutenberg components modal */
.components-modal__screen-overlay { z-index: 159998 !important; }
.components-modal__frame          { z-index: 159999 !important; }

/* RTL helper */
.rtl .yoo-shell-content { direction: rtl; }

/* ---------------- Accent variables (derived from brand) ---------------- */
/* Primary pulls from dynamic brand variable; fallbacks keep things safe. */
body.yoo-focus {
  --_yp-primary: var(--yooadmin-primary, #eda934);
  --_yp-primary-600: color-mix(in srgb, var(--_yp-primary) 90%, #000 10%);
  --_yp-primary-700: color-mix(in srgb, var(--_yp-primary) 80%, #000 20%);

  /* Map to WP/Gutenberg design tokens so components inherit automatically */
  --wp-admin-theme-color: var(--_yp-primary);
  --wp-admin-theme-color-darker-10: var(--_yp-primary-600);
  --wp-admin-theme-color-darker-20: var(--_yp-primary-700);
  --wp-components-color-accent: var(--_yp-primary);
  --wp-components-color-accent-darker-10: var(--_yp-primary-600);
  --wp-components-color-accent-darker-20: var(--_yp-primary-700);
}

body.yoo-focus.wp-admin a:not(.button):not(.page-title-action):not([class*="-btn"]):not([class*="-chip"]):not([class*="-tab"]):not(.button-primary):not(.button-secondary):hover {
  color: var(--_yp-primary-600) !important;
  text-decoration: none !important;
}

/* ---------------- Buttons with specific styling ---------------- */
/* Primary buttons (white text) */
body.yoo-focus.wp-admin [class*="--primary"],
body.yoo-focus.wp-admin [class*="-add-btn"],
body.yoo-focus.wp-admin [id*="-apply"] {
  color: #fff !important;
}

/* Active filter chips (white text) */
body.yoo-focus.wp-admin .yoo-filter-chip.is-active {
  color: #fff !important;
}

/* Active tabs (primary color) */
body.yoo-focus.wp-admin .yoo-fav-tab.active {
  color: var(--_yp-primary) !important;
}

/* Notification modal secondary buttons (primary color) */
body.yoo-focus.wp-admin .qa-modal-actions .qa-modal-secondary {
  color: var(--_yp-primary) !important;
}

/* ---------------- Primary buttons (WP + Gutenberg) ---------------- */
body.yoo-focus.wp-admin .wp-core-ui .button-primary,
body.yoo-focus.wp-admin .components-button.is-primary,
body.yoo-focus.wp-admin a.button-primary,
body.yoo-focus.wp-admin button.components-button.is-primary {
  background: var(--_yp-primary) !important;
  border-color: var(--_yp-primary) !important;
  color: #fff !important;
}
body.yoo-focus.wp-admin .wp-core-ui .button-primary:hover,
body.yoo-focus.wp-admin .components-button.is-primary:hover {
  background: var(--_yp-primary-600) !important;
  border-color: var(--_yp-primary-600) !important;
  color: #fff !important;
}
body.yoo-focus.wp-admin .components-button.is-primary:focus,
body.yoo-focus.wp-admin .wp-core-ui .button-primary:focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--_yp-primary-700) !important;
}

body.yoo-focus.wp-admin a.page-title-action,
body.yoo-focus.wp-admin a.page-title-action:link,
body.yoo-focus.wp-admin a.page-title-action:visited {
  background: var(--_yp-primary) !important;
  border-color: var(--_yp-primary) !important;
  color: #fff !important;
}
body.yoo-focus.wp-admin a.page-title-action:hover,
body.yoo-focus.wp-admin a.page-title-action:focus {
  background: var(--_yp-primary-600) !important;
  border-color: var(--_yp-primary-600) !important;
  color: #fff !important;
}

/* ---------------- Inputs focus & caret ---------------- */
body.yoo-focus.wp-admin .components-text-control__input:focus,
body.yoo-focus.wp-admin .components-input-control__input:focus,
body.yoo-focus.wp-admin .components-select-control__input:focus,
body.yoo-focus.wp-admin .components-select-control__control:focus-within,
body.yoo-focus.wp-admin textarea:focus,
body.yoo-focus.wp-admin input[type="text"]:focus,
body.yoo-focus.wp-admin input[type="search"]:not(.yoo-users-search-input):focus,
body.yoo-focus.wp-admin input[type="search"]:not(.yoo-users-search-input):focus-visible,
body.yoo-focus.wp-admin input[type="email"]:focus,
body.yoo-focus.wp-admin input[type="email"]:focus-visible,
body.yoo-focus.wp-admin input[type="url"]:focus,
body.yoo-focus.wp-admin input[type="url"]:focus-visible,
body.yoo-focus.wp-admin input[type="number"]:focus,
body.yoo-focus.wp-admin input[type="number"]:focus-visible {
  border-color: var(--_yp-primary) !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 0 0 1px var(--_yp-primary) !important;
  outline: none !important;
  caret-color: var(--_yp-primary);
}

/* ---------------- Switch / checkbox / radio ---------------- */
body.yoo-focus.wp-admin input[type="checkbox"],
body.yoo-focus.wp-admin input[type="radio"] {
  accent-color: var(--_yp-primary) !important;
}

body.yoo-focus.wp-admin .components-form-toggle.is-checked .components-form-toggle__track {
  background: var(--_yp-primary) !important;
  border-color: var(--_yp-primary) !important;
}
body.yoo-focus.wp-admin .components-form-toggle.is-checked .components-form-toggle__thumb {
  background: #fff !important;
}

/* ---------------- Tabs / activity panel states ---------------- */
body.yoo-focus.wp-admin .components-tab-panel__tabs button.is-active,
body.yoo-focus.wp-admin .components-tab-panel__tabs button[aria-selected="true"],
body.yoo-focus.wp-admin .woocommerce-layout__activity-panel-tab.is-active {
  color: var(--_yp-primary) !important;
  border-bottom-color: var(--_yp-primary) !important;
}
body.yoo-focus.wp-admin .woocommerce-layout__activity-panel-tab.is-active svg * {
  stroke: var(--_yp-primary) !important;
  fill: var(--_yp-primary) !important;
}

/* ---------------- Cards (selected/hovered) ---------------- */
body.yoo-focus.wp-admin .components-card.is-selected,
body.yoo-focus.wp-admin .components-card.is-pressed,
body.yoo-focus.wp-admin .components-card:focus,
body.yoo-focus.wp-admin .components-card:hover,
body.yoo-focus.wp-admin [class*="__card"].is-selected,
body.yoo-focus.wp-admin [class*="__card"].is-active {
  border-color: var(--_yp-primary) !important;
  box-shadow: 0 0 0 1px var(--_yp-primary) !important;
}

/* Links inside cards/widgets */
body.yoo-focus.wp-admin .woocommerce-card a,
body.yoo-focus.wp-admin .components-card a {
  color: var(--_yp-primary) !important;
}
body.yoo-focus.wp-admin .woocommerce-card a:hover,
body.yoo-focus.wp-admin .components-card a:hover {
  color: var(--_yp-primary-600) !important;
}

/* ---------------- Notices ---------------- */
body.yoo-focus.wp-admin .notice.is-info {
  border-left-color: var(--yooadmin-primary) !important;
}

/* ---------------- Secondary pressed/selected (segmented/pill) ---------------- */
body.yoo-focus.wp-admin .components-button.is-secondary[aria-pressed="true"],
body.yoo-focus.wp-admin .components-button.is-tertiary[aria-pressed="true"] {
  color: var(--_yp-primary) !important;
  border-color: var(--_yp-primary) !important;
  box-shadow: 0 0 0 1px var(--_yp-primary) inset !important;
}

/* ---------------- Heavy SPA skip mode ---------------- */
/* When skipping heavy SPA routes (customize-store etc.), hide our shell only. */
body.yoo-skip-heavy #yoo-admin-header,
body.yoo-skip-heavy .yoo-shell-content,
body.yoo-skip-heavy #yoo-admin-footer {
  display: none !important;
}
/* Neutralize any spacing that depends on header height while skipping */
body.yoo-skip-heavy #wpcontent,
body.yoo-skip-heavy #wpbody,
body.yoo-skip-heavy #wpbody-content {
  margin: 0 !important;
  padding: 0 !important;
}
/* Keep Woo wc-admin layout free from our paddings only when not skipping */
body.yoo-focus:not(.yoo-skip-heavy) .woocommerce-layout__content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* WP checkbox tick – color only (same shape/size/margins as core) */
body.yoo-focus.wp-admin input[type="checkbox"]:checked::before{
  content: "" !important;
  display: block !important;

  /* keep WP core geometry */
  width: 1.3125rem !important;
  height: 1.3125rem !important;
  margin: -.1875rem 0 0 -.25rem !important;

  /* brand color */
  background-color: var(--yooadmin-primary, #eda934) !important;

  /* same WP tick path as a mask => identical shape */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23000'/></svg>") !important;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23000'/></svg>") !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;   mask-size: 100% 100% !important;
}

/* ---------------- Plugin Update Page Fixes ---------------- */
/* Fix table alignment only on the plugin update comparison page */
.update-from-upload-comparison .widefat th,
.update-from-upload-comparison .widefat td,
.update-from-upload-comparison td.name-label {
  text-align: left !important;
}

/* ---------------- Remove WordPress default focus styles in Focus Mode ---------------- */
body.yoo-focus .wp-person a:focus .gravatar,
body.yoo-focus a:focus,
body.yoo-focus a:focus .media-icon img,
body.yoo-focus a:focus .plugin-icon {
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}