/**
 * YOOAdmin - Dashboard styles
 *
 * @package YOOAdmin
 */

[data-quick-actions-card] .qa-empty{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 16px;
  background:rgba(238,180,78,0.08);
  border:1px solid rgba(238,180,78,0.25);
  border-radius:10px;
  color:var(--_yp-primary);
  font-size:14px;
  font-weight:500;
  margin-bottom:16px;
}
[data-quick-actions-card] .qa-empty .dashicons{
  font-size:24px;
  width:24px;
  height:24px;
}
/* == YOOPIXEL DASHBOARD STYLES (refined) ==
   - Brand-ready via variables (maps to dynamic plugin vars if present)
   - Consistent icon sizing
   - Card text hover uses brand color
   - Minimal !important; safe in WP admin
*/

/* Global tokens (fallbacks map to dynamic :root vars if injected elsewhere) */
:root{
  --yp-brand:       var(--yooadmin-primary, #eda934);
  --yp-surface:     var(--yooadmin-surface, #f8fafd);
  --yp-text-600:    var(--yooadmin-text-600, #606060);
  --yp-text-500:    var(--yooadmin-text-500, #555);
  --yp-border:      var(--yooadmin-border, #e0e0e0);

  /* Dashboard icon sizing (tiles) */
  --yp-card-icon-size: 46px;
}
/* Quick Actions adopt card icon color */
.yp-quick-actions .yp-icon-tile {
  color: var(--yp-card-icon-color);
}
.yp-quick-actions .yp-icon-tile .dashicons{
  font-size:var(--yp-card-icon-size);
  height:var(--yp-card-icon-size);
  width:var(--yp-card-icon-size);
  line-height:var(--yp-card-icon-size);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Layout */
.yp-dashboard-grid,
.yp-dashboard-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  padding:15px 18px 15px 18px;
}
.yp-dashboard-grid + .yp-dashboard-grid{ margin-top:-10px; }
.yp-dashboard-column{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Card blocks */
.yp-card{
  background:#fff;
  border-radius:7px;
  padding:25px;
  border:1px solid var(--yp-border);
  position:relative;
  overflow:hidden;
}
/* Welcome card background */
.yp-card-welcome-wrapper::before{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:450px;
  height:450px;
  background-image:var(--yp-welcome-bg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom right;
  opacity:0.6;
  pointer-events:none;
  z-index:0;
}
.yp-card-welcome-wrapper > *{
  position:relative;
  z-index:1;
}
.yp-welcome-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:40px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,0.04);
}
.yp-welcome-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--yp-text-600);
  font-weight:500;
  font-size:13px;
}
.yp-welcome-link .dashicons{
  font-size:16px;
}
.yp-welcome-link:hover,
.yp-welcome-link:focus-visible{
  color:var(--_yp-primary);
}
[data-welcome-card].is-editing .qa-toolbar .qa-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.yp-card-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  justify-content:space-between;
}
.qa-toolbar{display:flex;align-items:center;gap:10px;}
.qa-toolbar .qa-reset{
  display:none;
  border:none;
  background:rgba(238,180,78,0.12);
  color:var(--_yp-primary);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
/* Hide Edit buttons in normal mode, show on hover (Quick Actions & Welcome) */
[data-quick-actions-card]:not(.is-editing) .qa-toggle,
[data-welcome-card]:not(.is-editing) [data-welcome-toggle]{
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s ease, visibility 0.18s ease;
}
[data-quick-actions-card]:hover:not(.is-editing) .qa-toggle,
[data-welcome-card]:hover:not(.is-editing) [data-welcome-toggle]{
  opacity:1;
  visibility:visible;
}
/* Always show in edit mode */
[data-quick-actions-card].is-editing .qa-toggle,
[data-welcome-card].is-editing [data-welcome-toggle]{
  opacity:1 !important;
  visibility:visible !important;
}
.qa-toolbar .qa-reset:hover,
.qa-toolbar .qa-reset:focus-visible{
  background:var(--_yp-primary);
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}
[data-quick-actions-card].is-editing .qa-toolbar .qa-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.qa-toggle{
  border:none;
  background:rgba(238,180,78,0.22);
  color:var(--_yp-primary);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:7px;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.qa-toggle:hover,
.qa-toggle:focus-visible{
  background:var(--_yp-primary);
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}
.qa-toggle:hover .dashicons,
.qa-toggle:focus-visible .dashicons{
  color:#fff !important;
}
.qa-toggle[aria-pressed="true"]{
  background:var(--_yp-primary);
  color:#fff;
  box-shadow:0 8px 18px #eda93440;
}
.qa-toggle[aria-pressed="true"] .dashicons{
  color:#fff !important;
}
.yp-card-title{
  font-size:18px;
  font-weight:600;
  color:var(--yp-text-600);
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
}
.yp-card-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}
.yp-card-header-actions [data-icon-edit-toggle]{
  order:2;
}
.yp-card-header-actions [data-icon-edit-reset]{
  order:1;
}
.yp-card-header-actions button{
  border:none;
  background:#eda93447;
  color:var(--_yp-primary);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.yp-card-header-actions button:hover,
.yp-card-header-actions button:focus-visible{
  background:var(--_yp-primary, var(--yp-primary, #0d6efd));
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}
.yp-card-header-actions button:hover .dashicons,
.yp-card-header-actions button:focus-visible .dashicons{
  color:#fff !important;
}
.yp-card-header-actions button[aria-pressed="true"]{
  background:var(--_yp-primary, var(--yp-primary, #0d6efd));
  color:#fff;
  box-shadow:0 8px 18px #eda93440;
}
.yp-card-header-actions button[aria-pressed="true"] .dashicons{
  color:#fff !important;
}
/* Hide Edit buttons in normal mode, show on hover (Website Management) */
.yp-card-header-actions [data-icon-edit-toggle]{
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s ease, visibility 0.18s ease;
}
.yp-card:hover .yp-card-header-actions [data-icon-edit-toggle]{
  opacity:1;
  visibility:visible;
}
/* Always show in edit mode */
body.yp-icon-edit-mode .yp-card-header-actions [data-icon-edit-toggle]{
  opacity:1 !important;
  visibility:visible !important;
}
.yp-card-header-actions [data-icon-edit-reset]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  width:0;
  padding:6px 0;
  margin:0;
  background:#eda93417;
  color:var(--_yp-primary, var(--yp-primary, #0d6efd));
  transition:visibility 0.18s ease, opacity 0.18s ease, width 0.18s ease, padding 0.18s ease, margin 0.18s ease;
}
body.yp-icon-edit-mode .yp-card-header-actions [data-icon-edit-reset]{
  visibility:visible;
  opacity:1;
  width:auto;
  padding:6px 12px;
  margin:0;
}
.yp-card-welcome{
  font-size:18px;
  font-weight:600;
  color:var(--yp-text-600);
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
}
.yp-card-welcome .dashicons{
  font-size:20px;
  width:20px;
  height:20px;
  color:var(--_yp-primary);
}
.yp-card-text{
  font-size:14px;
  color:var(--yp-text-500);
}

/* Icon grid */
.yp-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:15px;
}

/* Icon tiles (same divider feel as menu) */
.yp-icon-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  background:var(--yp-surface);
  border-radius:8px;
  padding:20px 15px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.22);
  transition:background .2s ease, transform .15s ease, border-bottom-color .2s ease;
}
.yp-icon-tile:hover,
.yp-icon-tile:focus,
.yp-icon-tile:focus-visible{
  border-bottom:1px solid rgba(0,0,0,.1) !important;
}
.yp-icon-tile:focus-visible,
.yp-icon-tile:active,
.yp-icon-tile:focus{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.1) !important;
}

[data-quick-actions-card] .qa-tile{position:relative;}
[data-quick-actions-card] .qa-tile-actions{
  position:absolute;
  top:6px;
  right:6px;
  display:none;
  gap:6px;
}
[data-quick-actions-card] .qa-tile-actions button{
  border:none;
  width:26px;
  height:26px;
  border-radius:6px;
  background:rgba(238,180,78,0.18);
  color:var(--_yp-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
[data-quick-actions-card] .qa-tile-actions button:hover,
[data-quick-actions-card] .qa-tile-actions button:focus-visible{
  background:var(--_yp-primary);
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}
[data-quick-actions-card].is-editing .qa-tile-actions{display:flex;}
[data-quick-actions-card].is-editing .qa-tile-link{pointer-events:none;opacity:0.85;}
[data-quick-actions-card] .qa-add-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 15px;
  background:rgba(238,180,78,0.08);
  color:var(--_yp-primary);
  opacity:0.65;
  pointer-events:none;
  box-shadow:none;
  cursor:pointer;
  min-height:150px;
  border:2px dashed rgba(238,180,78,0.55);
}
[data-quick-actions-card] .qa-add-tile .dashicons{
  margin-bottom:12px;
}
[data-quick-actions-card] .qa-add-tile .yp-icon-label{
  font-size:14px;
  font-weight:500;
  color:currentColor;
}
[data-quick-actions-card] .qa-add-tile{
  border-top:2px dashed rgba(238,180,78,0.55) !important;
  border-bottom:2px dashed rgba(238,180,78,0.55) !important;
}
[data-quick-actions-card] .qa-add-tile.is-hidden{display:none;}
[data-quick-actions-card].is-editing .qa-add-tile{
  opacity:1;
  pointer-events:auto;
}
[data-quick-actions-card].is-editing .qa-add-tile.is-disabled{
  opacity:0.35;
  pointer-events:none;
}

/* Tile icon (unified size + brand color) */
.yp-icon-tile .yp-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  min-height:46px;
  flex-shrink:0;
}
/* Apply same size to dashicons and img (NOT svg - let it keep its natural size) */
.yp-icon-tile .yp-icon > .dashicons,
.yp-icon-tile .yp-icon > img{
  font-size:46px !important;
  height:46px !important;
  width:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  flex-shrink:0 !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  object-fit:contain !important;
  box-sizing:border-box !important;
}
/* SVG - force same size as dashicons (46px) to prevent shrinking */
.yp-icon-tile .yp-icon > svg{
  width:46px !important;
  height:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  flex-shrink:0 !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  box-sizing:border-box !important;
}
.yp-icon-tile .yp-icon > .dashicons{
  color:currentColor;
}
/* Force images to take exact size (no aspect ratio issues) */
.yp-icon-tile .yp-icon > img{
  aspect-ratio:1/1 !important;
}
/* Quick Actions tiles - direct dashicons without wrapper */
[data-quick-actions-card] .yp-icon-tile > .dashicons{
  font-size:var(--yp-card-icon-size);
  color:currentColor;
  height:var(--yp-card-icon-size);
  width:var(--yp-card-icon-size);
  margin-bottom:16px;
  transition:transform .18s ease, color .18s ease;
}
[data-quick-actions-card] .yp-icon-tile:focus-visible > .dashicons,
[data-quick-actions-card] .yp-icon-tile:active > .dashicons{
  transform:translateY(-2px);
}

/* Tile label (default → gray, hover → brand) */
.yp-icon-label{
  font-size:14px;
  font-weight:500;
  color:var(--yp-text-600);
  transition:color .2s ease;
  line-height:1.3;
  word-wrap:break-word;
  hyphens:auto;
}
.yp-icon-tile:hover .yp-icon-label{ color:var(--yp-brand); }

/* Small box variant */
.yp-icon-grid-boxes,
.yp-action-grid{
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  padding-top:10px;
  justify-content:flex-start;
}
.yp-icon-grid-boxes .yp-icon-tile,
.yp-action-grid .yp-icon-tile{
  width:113px;
  min-height:113px;
  height:auto;
  padding:15px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.22);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:background .2s ease, transform .15s ease, border-bottom-color .2s ease;
}
.yp-icon-grid-boxes .yp-icon-tile:hover,
.yp-icon-grid-boxes .yp-icon-tile:focus,
.yp-icon-grid-boxes .yp-icon-tile:focus-visible,
.yp-action-grid .yp-icon-tile:hover,
.yp-action-grid .yp-icon-tile:focus,
.yp-action-grid .yp-icon-tile:focus-visible{
  border-bottom:1px solid rgba(0,0,0,.1) !important;
}
/* Website Management: Same rules apply to all icons (no special cases) */

/* Footer */
.yp-footer-links{
  text-align:center;
  background:#fff;
  margin-top:1.5rem;
  padding:10px 0;
  border-top:1px solid var(--yp-border);
  position:fixed;
  bottom:0;
  width:100%;
}
.yp-footer-links a{
  color:var(--yp-brand);
  text-decoration:none;
  font-weight:500;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.yp-footer-links a:hover{
  color:var(--yp-brand);
  text-decoration:underline;
}
.yp-separator{ margin:0 8px; color:#6c757d; }

/* Posts table */
.yp-posts-table{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}
.yp-posts-header,
.yp-posts-row{
  display:grid;
  grid-template-columns:40px 1.5fr 1fr 1fr 1fr 0.7fr 1fr 1.2fr;
  padding:14px 20px;
  align-items:center;
  font-size:14px;
}
.yp-posts-header{
  background:#e7e7e7;
  font-weight:600;
  color:#5c5c5c;
}
.yp-posts-row:nth-child(even){ background:#f9f9f9; }
.yp-posts-row:nth-child(odd){ background:#fff; }
.yp-posts-row a{
  color:#5c5c5c;
  text-decoration:none;
}

/* Posts toolbar */
.yoopixel-posts-wrapper{ padding:30px 40px; }
.yp-posts-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:20px;
}
.yp-btn-add,
.yp-btn-apply{
  background:var(--yp-brand);
  color:#fff;
  padding:10px 16px;
  border-radius:6px;
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  transition:filter .2s ease;
  border:none;
  cursor:pointer;
}
.yp-btn-add:hover,
.yp-btn-apply:hover{ filter:brightness(0.95); }

/* Filters */
.yp-posts-filters select,
.yp-posts-filters input[type="text"],
.yp-posts-bulk-bar select{
  padding:5px 12px;
  font-size:14px;
  height:38px;
  border-radius:6px;
  border:1px solid #ccc;
  min-width:130px;
  max-width:180px;
  appearance:none;
  background:#fff;
  background-image:url('data:image/svg+xml;utf8,<svg fill="%23999" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  padding-right:30px;
}
.yp-posts-filters input[type="text"]{ max-width:200px; }

/* Reset filter button */
#yp-reset-filters{
  background:#f1f1f1;
  color:#333;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
  padding:8px 14px 8px 12px;
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
  cursor:pointer;
  transition:background .2s ease;
}
#yp-reset-filters:hover{ background:#e2e2e2; }
#yp-reset-filters::before{
  content:"";
  display:inline-block;
  width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg fill='%23666' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8z'/%3E%3C/svg%3E");
  background-size:16px 16px;
  background-repeat:no-repeat;
  background-position:center;
}

/* Bulk bar */
.yp-posts-bulk-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:15px;
  margin-top:36px;
}
.yp-posts-bulk-bar .yp-btn-apply{
  background:var(--yp-brand);
  color:#fff;
  padding:8px 20px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  border:none;
  cursor:pointer;
  transition:filter .2s ease;
}
.yp-posts-bulk-bar .yp-btn-apply:hover{ filter:brightness(0.95); }

/* Post action icons */
.post-actions{ display:flex; gap:12px; }
.post-actions svg{ transition:transform .2s ease; cursor:pointer; }
.post-actions svg:hover{ transform:scale(1.1); }
.post-actions a:focus,
.post-actions a:hover{ outline:none; box-shadow:none; }

/* Filters wrapper */
.yp-posts-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  float:right;
  padding:35px 0 0 0;
}

/* Misc */
.no-posts-found{ width:300px !important; }

.qa-modal-overlay{
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  background:rgba(0,0,0,0.35) !important;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999 !important;
}
.qa-modal-overlay.is-visible{display:flex !important;}
/* Ensure overlay covers header - same as sidebar overlay */
body.qa-modal-open .yp-header{
  z-index:99998 !important;
  position:relative !important;
}
body.qa-modal-open #wpadminbar{
  z-index:99998 !important;
}
.qa-modal{
  background:#fff;
  border-radius:14px;
  width:min(460px, 92vw);
  box-shadow:0 24px 60px rgba(15,23,42,0.28);
  padding:24px 26px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.qa-modal h3{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--yp-text-600);
}
.qa-modal form{display:flex;flex-direction:column;gap:14px;}
.qa-modal label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--yp-text-600);}
.qa-modal input,
.qa-modal select{
  border:1px solid var(--yp-border);
  border-radius:8px;
  padding:9px 12px;
  font-size:13px;
  color:var(--yp-text-600);
  transition:border-color .18s ease, box-shadow .18s ease;
  background:#fff;
  appearance:none;
}
.qa-modal input:focus,
.qa-modal select:focus{
  outline:none;
  border-color:var(--_yp-primary);
  box-shadow:0 0 0 2px rgba(238,180,78,0.25);
}
.qa-modal select option{
  background:#fff;
  color:var(--yp-text-600);
}
.qa-modal select option:checked{
  background-color:var(--_yp-primary);
  color:#fff;
}
.qa-icon-picker-field{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.qa-icon-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border:1px solid var(--yp-border);
  border-radius:8px;
  background:#fff;
  color:var(--_yp-primary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.qa-icon-trigger:hover,
.qa-icon-trigger:focus-visible{
  border-color:var(--_yp-primary);
  box-shadow:0 0 0 2px rgba(238,180,78,0.25);
  outline:none;
  transform:translateY(-1px);
}
.qa-icon-trigger-icon{
  font-size:24px;
  color:currentColor;
  line-height:1;
}
.qa-icon-trigger-label{
  font-weight:600;
  color:var(--yp-text-600);
}
.qa-icon-trigger-hint{
  font-size:12px;
  color:var(--yp-text-500);
}
.qa-modal-actions{
  margin-top:4px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.qa-modal-actions button{
  border:none;
  border-radius:6px;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:#eda93428;
  color:var(--_yp-primary);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.qa-modal-actions button:hover,
.qa-modal-actions button:focus-visible{
  background:var(--_yp-primary);
  color:#fff;
  transform:translateY(-1px);
  outline:none;
}
.qa-modal-actions .qa-modal-secondary{background:#eff1f5;color:var(--_yp-primary);}
.qa-modal-actions .qa-modal-secondary:hover,
.qa-modal-actions .qa-modal-secondary:focus-visible{background:#dfe3eb;color:var(--_yp-primary);}
.qa-modal-actions .qa-modal-reset{
  background:rgba(238,180,78,0.12);
  color:var(--_yp-primary);
  order:-1;
}
.qa-modal-actions .qa-modal-reset:hover,
.qa-modal-actions .qa-modal-reset:focus-visible{
  background:rgba(238,180,78,0.22);
  color:var(--_yp-primary);
}

/* ========== Animations ========== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== Mobile Responsive ========== */
@media (max-width: 782px) {
  .yp-dashboard-grid,
  .yp-dashboard-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 14px;
  }

  .yp-icon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .yp-card {
    padding: 16px;
  }

  .yp-card-title {
    font-size: 15px;
  }

  .yp-card-welcome {
    font-size: 14px;
  }

  .yp-card-welcome .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .yp-card-text {
    font-size: 12px;
  }

  .yp-welcome-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
    margin-top: 20px;
  }

  .yp-welcome-link {
    font-size: 12px;
  }

  .yp-welcome-link .dashicons {
    font-size: 14px;
  }

  .yp-icon-tile .yp-icon > .dashicons,
  .yp-icon-tile .yp-icon > img,
  [data-quick-actions-card] .yp-icon-tile > .dashicons,
  .yp-quick-actions .yp-icon-tile .dashicons {
    font-size: 32px !important;
    height: 32px !important;
    width: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin-bottom: 8px !important;
  }

  :root {
    --yp-card-icon-size: 32px;
  }

  .yp-icon-label {
    font-size: 11px;
  }

  .yp-icon-grid-boxes,
  .yp-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .yp-icon-grid-boxes .yp-icon-tile,
  .yp-action-grid .yp-icon-tile {
    width: auto;
    min-width: 0;
    min-height: auto;
    height: auto;
    padding: 8px 6px;
  }

  [data-quick-actions-card] .yp-icon-tile,
  .yp-quick-actions .yp-icon-tile {
    padding: 8px 6px;
    min-height: auto;
  }
}

/* Section Collapsed State */
.yp-dashboard-section.is-collapsed .yp-cards-grid {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.yp-dashboard-section:not(.is-collapsed) .yp-cards-grid {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Section Toggle Button */
.yp-section-toggle {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--yp-text-600);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yp-section-toggle:hover {
  color: var(--yp-brand);
}

.yp-dashboard-section.is-collapsed .yp-section-toggle .dashicons {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.yp-dashboard-section:not(.is-collapsed) .yp-section-toggle .dashicons {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

/* Card Dragging State */
.yp-icon-tile.is-dragging {
  opacity: 0.5;
  cursor: grabbing !important;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Drag Over State (for drop zones) */
.yp-cards-grid.is-drag-over {
  background: rgba(238, 180, 78, 0.1);
  border: 2px dashed var(--yp-brand);
  border-radius: 8px;
  transition: background 0.2s ease, border 0.2s ease;
}

/* Drag Placeholder */
.yp-icon-tile.drag-placeholder {
  opacity: 0.3;
  border: 2px dashed #ccc;
  background: #f5f5f5;
  pointer-events: none;
}

/* Card Size Variants (for resize feature) */
.yp-icon-tile[data-size="small"] {
  grid-column: span 1;
  min-height: 80px;
}

.yp-icon-tile[data-size="normal"] {
  grid-column: span 1;
  min-height: 120px;
}

.yp-icon-tile[data-size="large"] {
  grid-column: span 2;
  min-height: 120px;
}

/* Section Animation */
.yp-dashboard-section {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

.yp-dashboard-section.is-animating {
  will-change: transform, opacity;
}

/* Grid Transitions */
.yp-cards-grid {
  transition: grid-template-columns 0.3s ease;
}

/* Hardware Acceleration */
.yp-icon-tile,
.yp-dashboard-section,
.yp-cards-grid {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Focus States for Accessibility */
.yp-icon-tile:focus-visible,
.yp-section-toggle:focus-visible {
  outline: 2px solid var(--yp-brand);
  outline-offset: 2px;
}

/* Hidden State */
.yp-icon-tile[data-hidden="true"] {
  display: none;
}

.yp-card-full {
  position: relative;
}

.yp-website-management-loading,
.yp-quick-actions-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.yp-card-full[data-section-id="website-management"] {
  min-height: 280px;
}

.yp-card-full[data-quick-actions-card] {
  min-height: 160px;
}

.yp-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.yp-spinner-circle {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--yp-brand, #eda934);
  border-radius: 50%;
  animation: yp-spin 0.8s linear infinite;
}

@keyframes yp-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}