/*!
	cubicFUSION Admin Enhancer \ GUI
	Alex @ portalZINE NMN
	https://portalzine.de/cubicfusion

*/
/* =============================================
   CSS VARIABLES - Design System
   ============================================= */
:root {
  /* Primary Brand Colors - Yellow Theme */
  --cf-primary: #FFD800;
  --cf-primary-hover: #e6c200;
  --cf-primary-dark: #E6C200;
  --cf-primary-bg: #fffbea;
  --cf-text-on-primary: #000;
  /* Neutral Colors */
  --cf-container-bg: #fff;
  --cf-section-bg: #f6f7f7;
  --cf-border: #dcdcde;
  --cf-code-bg: #f6f7f7;
  --cf-bg-main: #F8F9FA;
  --cf-bg-card: #FFFFFF;
  /* Typography */
  --cf-text-primary: #1d2327;
  --cf-text-secondary: #646970;
  /* Semantic Colors */
  --cf-success: #46b450;
  --cf-danger: #dc3232;
  --cf-warning: #ffb900;
  --cf-info: #0073aa;
  --cf-secondary: #009FE3;
  /* Shadows */
  --cf-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --cf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --cf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Spacing Scale */
  --cf-space-xs: 4px;
  --cf-space-sm: 8px;
  --cf-space-md: 16px;
  --cf-space-lg: 24px;
  --cf-space-xl: 32px;
  --cf-space-2xl: 48px;
  /* Typography Scale */
  --cf-text-xs: 0.75rem;
  --cf-text-sm: 0.875rem;
  --cf-text-base: 1rem;
  --cf-text-lg: 1.125rem;
  --cf-text-xl: 1.25rem;
  --cf-text-2xl: 1.5rem;
  --cf-text-3xl: 1.875rem;
  /* Border Radius */
  --cf-radius-sm: 4px;
  --cf-radius-md: 8px;
  --cf-radius-lg: 12px;
  --cf-radius-full: 9999px;
  /* Transitions */
  --cf-transition: all 0.2s ease;
  --cf-transition-fast: all 0.1s ease;
  --cf-transition-slow: all 0.3s ease;
}

/* =============================================
   BRAND HEADER - Black Card with Yellow Accent
   ============================================= */
.cf-brand-header {
  margin: 0 20px 0 0;
  padding: 30px;
  background: #000;
  border-bottom: 8px solid var(--cf-primary);
  border-radius: var(--cf-radius-sm);
  box-shadow: var(--cf-shadow-sm);
}

.cf-brand-header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cf-brand-logo {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.cf-brand-text {
  flex: 1;
}

.cf-brand-name {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}

.cf-brand-cubic {
  font-weight: 600;
  color: #fff;
}

.cf-brand-fusion {
  font-weight: 900;
  color: var(--cf-primary);
}

.cf-plugin-name {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.5px;
  margin-top: 5px;
}

.cf-version {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: #000;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0;
  margin-left: 10px;
  vertical-align: middle;
}

/* =============================================
   LEGACY STYLES (Backwards Compatibility)
   ============================================= */
.cf .changelog.hidden {
  display: none;
}

.cf .show_change {
  cursor: pointer;
  text-decoration: underline;
}

.cf.gui_clipboard {
  cursor: pointer;
}


.cf.gui_header {
  display: inline-block;
  position: relative;
}

.cf.gui_header img {
  max-width: 100%;
}

.cf.gui_header .title {
  position: absolute;
  bottom: 45px;
  right: 135px;
  text-transform: uppercase;
  color: #6c6c6c;
}

.cf.gui_info {
  padding-left: 20px;
  padding-top: 20px;
}

.cf.gui_about {
  position: relative;
  padding-left: 30px;
  padding-top: 0px;
  padding-bottom: 30px;
  font-size: 15px;
}

.cf.gui_about img {
  max-width: 100px;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 20px 20px 20px 0px;
  float: left;
  border: 3px solid var(--cf-primary);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  transition: linear 0.25s;
}

.cf.gui_about p {
  font-size: 15px;
}

.cf.gui_about p a {
  color: var(--cf-primary);
}

.cf.gui_about .version {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
}

.cf.nav-tab-wrapper .nav-tab-active {
  background-color: var(--cf-primary) !important;
  color: var(--cf-text-on-primary) !important;
}

.edit-post-fullscreen-mode-close.has-icon {
  background: white;
}

.edit-post-fullscreen-mode-close.has-icon svg {
  display: none !important;
}

.edit-post-fullscreen-mode-close.has-icon::before {
  content: "";
  background: url(/wp-content/plugins/cubicfusion-admin-enhancer/assets/images/cube.png) no-repeat;
  height: 36px;
  width: 36px;
  background-size: contain;
}

.welcome-panel-close {
  display: none;
}

.cf-welcome-panel-close {
  position: absolute;
  top: 20px;
  right: 10px;
  padding: 10px 15px 10px 21px;
  line-height: 1.23076923;
  text-decoration: none;
  z-index: 4;
}
/* Consistent min-width for all TH cells (label column) */
.cmb-th,
.cmb-type-group .cmb-th,
.cmb2-postbox .cmb-th,
body.cubicfusion-admin-page .cmb-row .cmb-th,
.cmb2-options-page .cmb2-metabox > .cmb-row .cmb-th {
  min-width: 250px;
}

.cmb2-options-page .cmb2-metabox>.cmb-row>.cmb-th+.cmb-td{
  margin-left:8px!important;
}
.cf-welcome-panel-close span {
  font-size: 35px !important;
  color: black;
  mix-blend-mode: multiply;
}

body.cubicfusion-admin-page .cmb2-options-page>h2 {
  display: none !important;
}

body.cubicfusion-admin-page #submit-cmb {
  background: var(--cf-primary) !important;
  border-color: var(--cf-primary) !important;
  color: var(--cf-text-on-primary) !important;
  float: right;
  font-weight: 600;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: var(--cf-transition);
}

body.cubicfusion-admin-page #submit-cmb:hover,
body.cubicfusion-admin-page #submit-cmb:focus {
  background: var(--cf-primary-hover) !important;
  border-color: var(--cf-primary-hover) !important;
  color: var(--cf-text-on-primary) !important;
}

/* Utility fields - always borderless */
.cmb2-id-widget-search-field,
.cmb2-id-widget-cache-info,
.cmb2-id-dashboard-standard-hide {
  background: none !important;
  border: none !important;
}

/* =============================================
   BUTTONS - Primary Yellow Theme
   ============================================= */
body.cubicfusion-admin-page .button-primary {
  background: var(--cf-primary) !important;
  border-color: var(--cf-primary) !important;
  color: var(--cf-text-on-primary) !important;
  font-weight: 600;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: var(--cf-transition);
}

body.cubicfusion-admin-page .button-primary:hover,
body.cubicfusion-admin-page .button-primary:focus {
  background: var(--cf-primary-hover) !important;
  border-color: var(--cf-primary-hover) !important;
  color: var(--cf-text-on-primary) !important;
}

body.cubicfusion-admin-page .button:not(.button-primary) {
  background: var(--cf-section-bg) !important;
  border-color: var(--cf-border) !important;
  color: var(--cf-text-primary) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: var(--cf-transition);
}

body.cubicfusion-admin-page .button:not(.button-primary):hover,
body.cubicfusion-admin-page .button:not(.button-primary):focus {
  background: #e8e9ea !important;
  border-color: #a7aaad !important;
}

/* Dashicons in buttons - proper vertical alignment */
body.cubicfusion-admin-page .button .dashicons {
  vertical-align: middle;
  margin-right: 5px;
  line-height: 1;
}

/* Color picker buttons - ensure background color is visible */
body.cubicfusion-admin-page .wp-color-result {
  /* Let inline styles with !important take precedence */
  background-color: transparent;
}

body.cubicfusion-admin-page .wp-color-result:after {
  border-radius: 0;
}

body.cubicfusion-admin-page  .form-table {
  width: auto!important;
  margin-right:20px;
}

/* =============================================
   SECTION HEADERS - Yellow Left Border
   ============================================= */
body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide),
body.cubicfusion-admin-page .cmb2-wrap>h2,
body.cubicfusion-admin-page .cmb-form h2 {
  border-left: 4px solid var(--cf-primary);
  padding-left: var(--cf-space-md);
  font-weight: 600;
  color: var(--cf-text-primary);
}

/* =============================================
   FORM INPUTS - Yellow Focus States
   ============================================= */
body.cubicfusion-admin-page input[type=text]:focus,
body.cubicfusion-admin-page input[type=url]:focus,
body.cubicfusion-admin-page input[type=email]:focus,
body.cubicfusion-admin-page input[type=number]:focus,
body.cubicfusion-admin-page select:focus,
body.cubicfusion-admin-page textarea:focus {
  border-color: var(--cf-primary) !important;
  box-shadow: 0 0 0 1px var(--cf-primary) !important;
  outline: 2px solid transparent;
}

body.cubicfusion-admin-page input[type=checkbox]:checked {
  background-color: var(--cf-primary) !important;
  border-color: var(--cf-primary) !important;
}

/* =============================================
   NAVIGATION TABS - Yellow Active State
   ============================================= */
.toplevel_page_cf_plugins_shortcodes_options h2 {
  display: none;
}

/* =============================================
   FULL-WIDTH LAYOUT & CARD DESIGN
   ============================================= */
body.cubicfusion-admin-page {
  background: var(--cf-bg-main) !important;
}

body.cubicfusion-admin-page #wpbody-content {
  padding-bottom: 65px;

}

body.cf-admin-enhancer_page_cf_plugins_dashboard_gutenberg #wpbody-content,
body.post-type-cf_dashboard #wpbody-content {
  width: auto !important;
}

body.cubicfusion-admin-page .wrap {
  max-width: 100%;
  margin: 0;
  background: transparent;
  padding: 0;
}

body.cubicfusion-admin-page .cmb2-options-page {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Main container styling for Dashboard Gutenberg (uses wpbody-content) */
body.cf-admin-enhancer_page_cf_plugins_dashboard_gutenberg #wpbody-content,
body.post-type-cf_dashboard #wpbody-content {
  background: var(--cf-container-bg);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow);
  padding: var(--cf-space-xl);
  margin: 20px 20px 20px 0;
}

/* Main container styling for CMB2-based plugins (Shortcodes, Admin Toolbar, White Label, etc.) */
body.cubicfusion-admin-page .cmb-form {
  background: var(--cf-container-bg);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow);
  padding: var(--cf-space-xl);
  margin: 20px 20px 20px 0;
}

/* Exception: Dashboard Gutenberg doesn't use .cmb-form, so reset if it exists */
body.cf-admin-enhancer_page_cf_plugins_dashboard_gutenberg .cmb-form {
  background: transparent;
  padding: 0;
  margin: 0;
}

body.cubicfusion-admin-page .cmb-row {
  background: transparent;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-sm);
  padding: var(--cf-space-lg) !important;
  margin-bottom: var(--cf-space-md);
  transition: var(--cf-transition);
}

body.cubicfusion-admin-page .cmb-row:hover {
  background: var(--cf-section-bg);
  box-shadow: var(--cf-shadow-sm);
}

body.cubicfusion-admin-page .cmb2-wrap {
  background: transparent;
}

body.cubicfusion-admin-page .cmb2-wrap>h2 {
  background: transparent;
  margin: 0 0 var(--cf-space-lg) 0;
  padding: 0 0 var(--cf-space-md) 0;
}

/* =============================================
   NAVIGATION WRAPPER - Card Design
   ============================================= */
.cf.nav-tab-wrapper {
  background: var(--cf-container-bg);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow-sm);
  margin: 20px 20px 0 0;
  padding: 10px;
  border: none;
}

.cf.nav-tab-wrapper .nav-tab {
  border: none;
  background: transparent;
  margin: 0 5px;
  padding: 12px 20px;
  border-radius: var(--cf-radius-sm);
  transition: var(--cf-transition);
  color: var(--cf-text-secondary);
}

.cf.nav-tab-wrapper .nav-tab:hover {
  background: var(--cf-section-bg);
  color: var(--cf-text-primary);
}

.cf.nav-tab-wrapper .nav-tab.nav-tab-active {
  background: var(--cf-primary) !important;
  color: var(--cf-text-on-primary) !important;
  box-shadow: var(--cf-shadow-sm);
}

.cf.nav-tab-wrapper .nav-tab.social .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* =============================================
   INFO/ABOUT SECTIONS - Card Design
   ============================================= */
.cf.gui_info,
.cf.gui_about {
  background: var(--cf-container-bg);
  border-radius: var(--cf-radius-md);
  box-shadow: var(--cf-shadow);
  margin: 20px 20px 0 0;
  padding: var(--cf-space-xl);
}

.cf.gui_info {
  padding: var(--cf-space-md) var(--cf-space-xl);
  background: var(--cf-primary-bg);
  border-left: 4px solid var(--cf-primary);
}

.cf.gui_info small {
  color: var(--cf-text-primary);
}

.cf.gui_about {
  margin-bottom: 20px;
}

/* =============================================
   FOOTER - Fixed Position
   ============================================= */
.cf.gui_footer {
  margin-top:20px;
}

.cf.gui_footer a {
  color: var(--cf-primary);
}

.cf.gui_footer a:hover {
  color: var(--cf-primary-hover);
}

.toolbar_node {
  text-transform: uppercase;
}
/* =============================================
   WIDGET GROUPS - Card Style Design
   ============================================= */

/* Title rows - card header with yellow accent */
body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide) {
  background: var(--cf-section-bg);
  border: 1px solid var(--cf-border) !important;
  border-left: 4px solid var(--cf-primary) !important;
  border-radius: var(--cf-radius-sm) var(--cf-radius-sm) 0 0;
  margin-bottom: 0 !important;
  padding: var(--cf-space-md) var(--cf-space-lg);
}

body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide):hover {
  background: var(--cf-section-bg);
  box-shadow: none;
}

/* Title badge styling */
body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide) h3 {
  margin: 0;
  padding: 6px 12px;
  background: var(--cf-primary);
  color: var(--cf-text-on-primary);
  display: inline-block;
  border-radius: var(--cf-radius-sm);
  font-size: 13px !important;
  font-weight: 600;
}

body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide) .dashicons {
  color: var(--cf-text-on-primary);
}

/* Grouped fields following title */
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row {
  border: 1px solid var(--cf-border);
  border-top: none;
  border-radius: 0;
  margin: 0 !important;
  background: var(--cf-container-bg);
  padding: var(--cf-space-md) var(--cf-space-lg);
}

body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row:hover,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row:hover {
  background: var(--cf-container-bg);
  box-shadow: none;
}

/* Last field in group gets bottom radius and margin */
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row {
  border-radius: 0 0 var(--cf-radius-sm) var(--cf-radius-sm);
  margin-bottom: var(--cf-space-lg) !important;
}

/* Remove internal cell borders in grouped fields */
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row .cmb-th,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row .cmb-td,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row .cmb-th,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row .cmb-td {
  border: none !important;
}

/* Style readonly text inputs (shortcodes) */
body.cubicfusion-admin-page .cmb-row input[type="text"][readonly] {
  background: var(--cf-section-bg);
  border-color: var(--cf-border);
  color: var(--cf-text-secondary);
  cursor: default;
  font-family: monospace;
  font-size: 13px;
}

/* Checkbox rows spacing */
body.cubicfusion-admin-page .cmb-row.cmb-type-checkbox {
  display: flex;
  align-items: center;
  gap: var(--cf-space-sm);
}

/* Grouped field labels - compact styling */
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row .cmb-th label,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row .cmb-th label {
  font-weight: 500;
  font-size: 13px;
  color: var(--cf-text-secondary);
}

/* Clipboard icons */
body.cubicfusion-admin-page .dashicons-clipboard {
  color: var(--cf-primary);
  cursor: pointer;
  transition: var(--cf-transition);
}

body.cubicfusion-admin-page .dashicons-clipboard:hover {
  color: var(--cf-primary-hover);
  transform: scale(1.1);
}

/* Ensure standalone fields (not part of widget groups) have all borders */
body.cubicfusion-admin-page .cmb-row:not(.cmb-type-title):not(.cmb-row.cmb-type-title + .cmb-row):not(.cmb-row.cmb-type-title + .cmb-row + .cmb-row):not(.cmb-repeat-group-wrap):not(.cmb-repeatable-grouping):not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide) {
  border: 1px solid var(--cf-border) !important;
  border-top: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-sm) !important;
  margin-bottom: var(--cf-space-md) !important;
}

/* Icons in metabox titles should be black */
body.cubicfusion-admin-page .cmb2-metabox-title .dashicons,
body.cubicfusion-admin-page .cmb-form h2 .dashicons {
  color: var(--cf-text-primary) !important;
}

/* =============================================
   TABLE LAYOUT - Prevent field wrapping
   ============================================= */
body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: var(--cf-space-lg);
}

body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) .cmb-th {
  flex: 0 0 150px;
}

body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) .cmb-th label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) > .cmb-td {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--cf-space-sm);
  min-width: 0;
}

body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) > .cmb-td input[type="text"] {
  flex: 1 1 auto;
  min-width: 300px;
}

body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) > .cmb-td .dashicons {
  flex: 0 0 auto;
}

/* =============================================
   CMB2 REPEATABLE GROUPS - Clean nested styling
   ============================================= */
body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap,
body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap > .cmb-td,
body.cubicfusion-admin-page .cmb-repeatable-grouping,
body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap .postbox,
body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap .cmb-repeatable-grouping,
body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap .inside {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap .cmb-group-title,
body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap .cmbhandle {
  display: none !important;
}

/* =============================================
   CMB2 METABOX DESCRIPTIONS - Always New Line
   ============================================= */
.cmb2-metabox-description,
body.cubicfusion-admin-page .cmb-row .cmb2-metabox-description,
.cmb2-options-page .cmb2-metabox > .cmb-row .cmb2-metabox-description,
.cmb-td .cmb2-metabox-description,
.cmb-th .cmb2-metabox-description {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
  margin: var(--cf-space-sm) 0 0 0 !important;
  padding: 0 !important;
  font-size: var(--cf-text-sm) !important;
  line-height: 1.6 !important;
  color: var(--cf-text-secondary) !important;
}

/* Ensure inputs before descriptions don't prevent line break */
.cmb-td input[type="text"] + .cmb2-metabox-description,
.cmb-td input[type="number"] + .cmb2-metabox-description,
.cmb-td input[type="email"] + .cmb2-metabox-description,
.cmb-td input[type="url"] + .cmb2-metabox-description,
.cmb-td select + .cmb2-metabox-description,
.cmb-td textarea + .cmb2-metabox-description {
  margin-top: var(--cf-space-sm) !important;
}

/* Make sure input fields don't prevent description from wrapping */
body.cubicfusion-admin-page .cmb-td {
  display: block !important;
}

body.cubicfusion-admin-page .cmb-td input[type="text"],
body.cubicfusion-admin-page .cmb-td input[type="number"],
body.cubicfusion-admin-page .cmb-td input[type="email"],
body.cubicfusion-admin-page .cmb-td input[type="url"],
body.cubicfusion-admin-page .cmb-td select {
  display: block !important;
  margin-bottom: 0 !important;
}

/* Description links */
.cmb2-metabox-description a,
.cmb-th label a,
.cmb-row .cmb-th label a {
  color: #666;
}

.cmb2-metabox-description a:hover,
.cmb2-metabox-description a:focus,
.cmb-th label a:hover,
.cmb-th label a:focus,
.cmb-row .cmb-th label a:hover,
.cmb-row .cmb-th label a:focus {
  color: var(--cf-primary);
}

/* =============================================
   LIST TABLE & SUBSUBSUB LINKS - Fix Blue Links
   ============================================= */
.wp-list-table a,
.subsubsub a {
  color: #666;
}

.wp-list-table a:hover,
.wp-list-table a:focus,
.subsubsub a:hover,
.subsubsub a:focus {
  color: var(--cf-primary);
}

.subsubsub a.current {
  color: #000;
}

/* =============================================
   CMB2 SECONDARY BUTTONS - Fix Blue Border/Text
   ============================================= */
.cmb-add-row-button.button-secondary,
.cmb2-upload-button.button-secondary,
.cmb-remove-row-button.button-secondary {
  background-color: var(--cf-primary) !important;
  color: #000 !important;
  border-color: var(--cf-primary) !important;
  font-weight: 600 !important;
}

.cmb-add-row-button.button-secondary:hover,
.cmb2-upload-button.button-secondary:hover,
.cmb-remove-row-button.button-secondary:hover {
  background-color: var(--cf-primary-hover) !important;
  border-color: var(--cf-primary-hover) !important;
  color: #000 !important;
}

.cmb-add-row-button.button-secondary:focus,
.cmb2-upload-button.button-secondary:focus,
.cmb-remove-row-button.button-secondary:focus {
  background-color: var(--cf-primary) !important;
  border-color: var(--cf-primary) !important;
  color: #000 !important;
  box-shadow: 0 0 0 1px var(--cf-primary) !important;
}

/* =============================================
   PAGE TITLE ACTION BUTTON - Add New Item
   ============================================= */
body.cubicfusion-admin-page .page-title-action {
  background-color: var(--cf-primary) !important;
  color: #000 !important;
  border-color: var(--cf-primary) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
^
body.cubicfusion-admin-page .page-title-action:hover,
body.cubicfusion-admin-page .page-title-action:focus {
  background-color: var(--cf-primary-hover) !important;
  border-color: var(--cf-primary-hover) !important;
  color: #000 !important;
}

body.cubicfusion-admin-page .page-title-action:active {
  background-color: var(--cf-primary-dark) !important;
  border-color: var(--cf-primary-dark) !important;
  color: #000 !important;
}

/* =============================================
   CMB2 CHECKBOXES & RADIO BUTTONS - Fix Blue Ticks
   ============================================= */
input[type="checkbox"].cmb2-option:checked::before,
input[type="checkbox"].cmb2-list:checked::before {
  content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
}

input[type="checkbox"].cmb2-option:checked,
input[type="checkbox"].cmb2-list:checked {
  background-color: var(--cf-primary) !important;
  border-color: var(--cf-primary) !important;
}

input[type="radio"].cmb2-option:checked::before,
input[type="radio"].cmb2-list:checked::before {
  background: #000 !important;
}

input[type="radio"].cmb2-option:checked,
input[type="radio"].cmb2-list:checked {
  border-color: var(--cf-primary) !important;
}

/* =============================================
   DARK MODE - System Preference Detection
   ============================================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary Brand Colors - Keep Yellow for High Visibility */
    --cf-primary: #FFD800;
    --cf-primary-hover: #ffed4e;
    --cf-primary-dark: #E6C200;
    --cf-primary-bg: rgba(255, 216, 0, 0.12);
    --cf-text-on-primary: #000;
    
    /* Neutral Colors - Dark Theme Inverted */
    --cf-container-bg: #1e1e1e;
    --cf-section-bg: #2a2a2a;
    --cf-border: #3e3e3e;
    --cf-code-bg: #2a2a2a;
    --cf-bg-main: #121212;
    --cf-bg-card: #1e1e1e;
    
    /* Typography - Light Text on Dark */
    --cf-text-primary: #e4e4e4;
    --cf-text-secondary: #a0a0a0;
    
    /* Semantic Colors - Adjusted for Dark Mode */
    --cf-success: #4ade80;
    --cf-danger: #f87171;
    --cf-warning: #fbbf24;
    --cf-info: #38bdf8;
    --cf-secondary: #22d3ee;
    
    /* Shadows - Lighter for Visibility on Dark */
    --cf-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --cf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --cf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  /* Brand Header - Adjusted for Dark Mode */
  .cf-brand-header {
    background: #0a0a0a;
    border-bottom-color: var(--cf-primary);
  }
  
.cf-brand-cubic,
.cf-plugin-name {
    color: #e4e4e4;
  }
  
  .cf-version {
    background: rgba(255, 255, 255, 0.15);
    color: #e4e4e4;
  }
  
  /* Legacy About Section - Adjust Border */
  .cf.gui_about img {
    border-color: var(--cf-primary);
    box-shadow: 0px 0px 8px rgba(255, 216, 0, 0.3);
  }
  
  /* Navigation Tabs - Dark Mode */
  .cf.nav-tab-wrapper {
    background: var(--cf-container-bg);
  }
  
  .cf.nav-tab-wrapper .nav-tab {
    color: var(--cf-text-secondary);
  }
  
  .cf.nav-tab-wrapper .nav-tab:hover {
    background: var(--cf-section-bg);
    color: var(--cf-text-primary);
  }
  
  /* Button Hover States - Lighter in Dark Mode */
body.cubicfusion-admin-page .button:not(.button-primary) {
    background: var(--cf-section-bg) !important;
    color: var(--cf-text-primary) !important;
  }
  
body.cubicfusion-admin-page .button:not(.button-primary):hover {
    background: #353535 !important;
    border-color: #505050 !important;
  }
  
  /* Form Inputs - Dark Background */
body.cubicfusion-admin-page input[type=text],
body.cubicfusion-admin-page input[type=url],
body.cubicfusion-admin-page input[type=email],
body.cubicfusion-admin-page input[type=number],
body.cubicfusion-admin-page select,
body.cubicfusion-admin-page textarea {
    background-color: #2a2a2a;
    border-color: var(--cf-border);
    color: var(--cf-text-primary);
  }
  
  /* Readonly Input Fields - Monospace Code */
  body.cubicfusion-admin-page .cmb-row input[type="text"][readonly] {
    background: #252525;
    border-color: var(--cf-border);
    color: var(--cf-text-secondary);
  }
  
  /* Links - Yellow Accent on Hover */
.cmb2-metabox-description a,
.cmb-th label a,
.cmb-row .cmb-th label a,
.wp-list-table a,
.subsubsub a,
.cf.gui_footer a {
    color: var(--cf-text-secondary);
  }
  
.cmb2-metabox-description a:hover,
.cmb-th label a:hover,
.cmb-row .cmb-th label a:hover,
.wp-list-table a:hover,
.subsubsub a:hover,
.cf.gui_footer a:hover {
    color: var(--cf-primary);
  }
  
  .subsubsub a.current {
    color: var(--cf-text-primary);
  }
  
  /* Info Box - Dark Background with Yellow Border */
  .cf.gui_info {
    background: rgba(255, 216, 0, 0.08);
    border-left-color: var(--cf-primary);
  }
  
  /* About and Footer Sections - Text Visibility */
.cf.gui_about,
.cf.gui_about p,
.cf.gui_footer,
.cf.gui_footer p {
    color: var(--cf-text-primary) !important;
  }
  
  .cf.gui_about .version {
    color: var(--cf-text-secondary) !important;
  }
  
  /* Close Button - Light Color */
  .cf-welcome-panel-close span {
    color: var(--cf-text-primary);
    mix-blend-mode: normal;
  }
  
  /* Gutenberg Full Screen Mode Close Button */
  .edit-post-fullscreen-mode-close.has-icon {
    background: var(--cf-container-bg);
  }
  
  /* Card Rows - Ensure Visibility */
body.cubicfusion-admin-page .cmb-row,
.cmb2-options-page .cmb2-metabox > .cmb-row {
    background: var(--cf-container-bg) !important;
    border-color: var(--cf-border) !important;
  }
  
  /* Text Color Override for CMB2 Rows */
.cmb2-options-page .cmb2-metabox > .cmb-row .cmb-th label,
.cmb2-options-page .cmb2-metabox > .cmb-row .cmb-td,
.cmb2-options-page .cmb2-metabox > .cmb-row p,
body.cubicfusion-admin-page .cmb-row .cmb-th label,
body.cubicfusion-admin-page .cmb-row .cmb-td {
    color: var(--cf-text-primary) !important;
  }
  
/* Description color in dark mode - already set in main styles */
  
body.cubicfusion-admin-page .cmb-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
  }
  
  /* Title Rows - Keep Yellow Background */
  body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide) {
    color: white!important;  }
  
  body.cubicfusion-admin-page .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide):hover {
    background: var(--cf-primary) !important;
  }

  /* Override CMB2 Default Background for Title Rows */
  .cmb2-options-page .cmb2-metabox > .cmb-row.cmb-type-title:not(.cmb2-id-widget-search-field):not(.cmb2-id-widget-cache-info):not(.cmb2-id-dashboard-standard-hide) {
    background: var(--cf-primary) !important;
  }

  
  /* Title Badges - Keep Yellow Background with Black Text */
  body.cubicfusion-admin-page .cmb-row.cmb-type-title:not([data-fieldtype="title"]) h3, body.cubicfusion-admin-page .cmb-row.cmb-type-title:not([data-fieldtype="title"]) h3 {
    /*background: var(--cf-primary) !important;*/
    color: #fff !important;
  }

body.cubicfusion-admin-page  [data-fieldtype="title"] h3,
body.cubicfusion-admin-page [data-fieldtype="title"] h3 {
    color: #000!important;
 
    padding: 5px;
    background: rgba(255,255,255,0.4)!important;
    display: flex;
    align-items: center;

  }

body.cubicfusion-admin-page  [data-fieldtype="title"].cmb-repeat-group-field h3,
body.cubicfusion-admin-page [data-fieldtype="title"].cmb-repeat-group-field h3 {
    color: #FFF!important;
 
    padding: 5px;
    background: rgba(255,255,255,0.4)!important;
    display: flex;
    align-items: center;

  }

  .cmb-repeat-group-field{
    
  }
body.cubicfusion-admin-page .cmb-row.cmb-type-title .dashicons {
    color: #fff !important;
  }

body.cubicfusion-admin-page .cmb-row.cmb-type-title[data-fieldtype="title"] .dashicons {
    color: #000 !important;
  }

body.cubicfusion-admin-page .cmb-row.cmb-type-title[data-fieldtype="title"].cmb-repeat-group-field .dashicons {
    color: #FFF !important;
  }

body.cubicfusion-admin-page .cmb-row.cmb-type-title[data-fieldtype="title"] button .dashicons {
    color: #fff!important;
  }
  
  /* Grouped Fields */
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row {
    background: var(--cf-container-bg);
  }
  
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row:hover,
body.cubicfusion-admin-page .cmb-row.cmb-type-title + .cmb-row + .cmb-row:hover {
    background: var(--cf-container-bg);
  }
  
  /* Checkboxes - Custom SVG for Dark Mode */
input[type="checkbox"].cmb2-option:checked::before,
input[type="checkbox"].cmb2-list:checked::before {
    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  }
  
  /* Ensure Page Background */
body.cubicfusion-admin-page {
    background: var(--cf-bg-main) !important;
  }
  
  /* WordPress Admin Tables - Dark Mode */
  .cubicfusion-admin-page .wp-list-table {
    background: var(--cf-container-bg) !important;
    border-color: var(--cf-border) !important;
  }
  
.cubicfusion-admin-page .wp-list-table thead th,
.cubicfusion-admin-page.wp-list-table tfoot th {
    background: var(--cf-section-bg) !important;
    border-color: var(--cf-border) !important;
    color: var(--cf-text-primary) !important;
  }
  
.cubicfusion-admin-page .wp-list-table tbody tr,
.cubicfusion-admin-page .wp-list-table tbody td,
.cubicfusion-admin-page .wp-list-table tbody th {
    background: var(--cf-container-bg) !important;
    border-color: var(--cf-border) !important;
    color: var(--cf-text-primary) !important;
  }
  
.cubicfusion-admin-page .wp-list-table.striped > tbody > :nth-child(odd),
.cubicfusion-admin-page .wp-list-table .alternate {
    background: rgba(255, 255, 255, 0.02) !important;
  }
  
.cubicfusion-admin-page .wp-list-table .row-title,
.cubicfusion-admin-page .wp-list-table .row-title:hover,
.cubicfusion-admin-page .cubicfusion-admin-page .wp-list-table .row-actions a {
    color: var(--cf-text-primary) !important;
  }
  
  .cubicfusion-admin-page .wp-list-table .row-actions a:hover {
    color: var(--cf-primary) !important;
  }

  .cubicfusion-admin-page .wp-heading-inline{
    color: white!important;
  }

}

/* =============================================
   RESPONSIVE - Mobile & Tablet
   ============================================= */

/* Tablet - 782px is WordPress admin bar breakpoint */
@media screen and (max-width: 782px) {
  /* CMB2 Rows - Stack on mobile */
  body.cubicfusion-admin-page .cmb-row,
  .cmb2-options-page .cmb2-metabox > .cmb-row {
    display: block !important;
    padding: var(--cf-space-md) !important;
  }

  body.cubicfusion-admin-page .cmb-row .cmb-th,
  body.cubicfusion-admin-page .cmb-row .cmb-td,
  .cmb2-options-page .cmb2-metabox > .cmb-row .cmb-th,
  .cmb2-options-page .cmb2-metabox > .cmb-row .cmb-td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.cubicfusion-admin-page .cmb-row .cmb-th {
    margin-bottom: var(--cf-space-sm) !important;
  }

  body.cubicfusion-admin-page .cmb-row .cmb-th label {
    font-size: var(--cf-text-sm) !important;
    font-weight: 600 !important;
    display: block !important;
    text-align: left !important;
  }

  /* Full width inputs on mobile */
  body.cubicfusion-admin-page .cmb-row input[type="text"],
  body.cubicfusion-admin-page .cmb-row input[type="email"],
  body.cubicfusion-admin-page .cmb-row input[type="url"],
  body.cubicfusion-admin-page .cmb-row input[type="number"],
  body.cubicfusion-admin-page .cmb-row select,
  body.cubicfusion-admin-page .cmb-row textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Title rows - mobile adjustments */
  body.cubicfusion-admin-page .cmb-row.cmb-type-title h3 {
    font-size: var(--cf-text-lg) !important;
    text-align: left !important;
  }

  /* Brand header - mobile */
  .cf-brand-header {
    margin: 0 0 var(--cf-space-md) 0 !important;
    padding: var(--cf-space-lg) !important;
  }

  .cf-brand-header-content {
    flex-direction: column !important;
    text-align: center !important;
  }

  .cf-brand-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .cf-brand-name {
    font-size: 24px !important;
  }

  /* Navigation tabs - stack on mobile */
  .cf.nav-tab-wrapper {
    margin: 10px 0 !important;
    padding: 5px !important;
  }

  .cf.nav-tab-wrapper .nav-tab {
    display: block !important;
    margin: 5px 0 !important;
    text-align: center !important;
  }

  /* Color picker adjustments */
  body.cubicfusion-admin-page .cmb-row .wp-picker-container {
    display: block !important;
  }

  /* File upload fields */
  body.cubicfusion-admin-page .cmb-row .cmb-file-wrap {
    display: block !important;
  }

  /* Repeatable groups */
  body.cubicfusion-admin-page .cmb-row.cmb-repeat-group-wrap {
    padding: var(--cf-space-sm) !important;
  }

  /* Table layout rows */
  body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) {
    display: block !important;
  }

  body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) .cmb-th,
  body.cubicfusion-admin-page .cmb-row.table-layout:not(.cmb-repeat) .cmb-td {
    display: block !important;
    width: 100% !important;
  }

  /* Code Textarea - CMB2 CodeMirror */
  body.cubicfusion-admin-page .cmb2-textarea-code,
  body.cubicfusion-admin-page .cmb2-textarea-code-wrapper,
  body.cubicfusion-admin-page .CodeMirror {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    font-size: 12px !important;
  }

  body.cubicfusion-admin-page .CodeMirror {
    height: auto !important;
    min-height: 200px !important;
  }

  body.cubicfusion-admin-page .CodeMirror-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  /* Code textarea without CodeMirror */
  body.cubicfusion-admin-page textarea.cmb2-textarea-code {
    width: 100% !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 10px !important;
    min-height: 200px !important;
  }
}

/* Mobile - smaller screens */
@media screen and (max-width: 600px) {
  /* Reduce padding further */
  body.cubicfusion-admin-page .cmb-row {
    padding: var(--cf-space-sm) !important;
    margin-bottom: var(--cf-space-sm) !important;
  }

  /* Smaller fonts */
  /* Smaller text on mobile */
  body.cubicfusion-admin-page .cmb-row .cmb-th label,
  body.cubicfusion-admin-page .cmb-row .cmb2-metabox-description {
    font-size: var(--cf-text-xs) !important;
  }

  /* Brand header - very small screens */
  .cf-brand-header {
    padding: var(--cf-space-md) !important;
  }

  .cf-brand-name {
    font-size: 20px !important;
  }

  .cf-brand-tagline {
    font-size: var(--cf-text-sm) !important;
  }

  /* Hide quick nav menu on mobile */
  #cf-quick-access-menu {
    display: none !important;
  }

  /* Code textarea - smaller on mobile */
  body.cubicfusion-admin-page .cmb2-textarea-code,
  body.cubicfusion-admin-page .CodeMirror {
    font-size: 11px !important;
  }

  body.cubicfusion-admin-page .CodeMirror {
    min-height: 150px !important;
  }

  body.cubicfusion-admin-page textarea.cmb2-textarea-code {
    font-size: 11px !important;
    min-height: 150px !important;
    padding: 8px !important;
  }

  /* CodeMirror gutters - smaller on mobile */
  body.cubicfusion-admin-page .CodeMirror-gutters {
    min-width: 20px !important;
  }

  body.cubicfusion-admin-page .CodeMirror-linenumber {
    padding: 0 3px !important;
    min-width: 20px !important;
    font-size: 10px !important;
  }
}
