:root{
  --ab-ink: #1e293b;
  --ab-text: #475569;
  --ab-muted: #1d4ed8;
  --ab-border: #bfdbfe;
  --ab-soft: #dbeafe;
  --ab-surface: #f8faff;
  --ab-bg: #ffffff;
  --ab-primary: #667eea;
  --ab-primary-hover: #764ba2;
  --ab-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ab-gradient-secondary: linear-gradient(135deg, #8b9cf7 0%, #9b6db8 100%);
  --ab-gradient-light: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
  --ab-gradient-subtle: linear-gradient(135deg, #f8faff 0%, #f3f4ff 50%, #eef2ff 100%);
}

/* container */
.adbuddy-wrap{
  max-width:1000px;margin:40px auto;padding:30px;background: var(--ab-gradient-subtle);
  border:2px solid var(--ab-border);border-radius:20px;box-shadow:0 25px 50px rgba(102, 126, 234, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--ab-text);
  overflow:visible;
}
.adbuddy-wrap *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.adbuddy-benchmarks-loader{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:32px;margin-bottom:24px;min-height:220px;text-align:center;
  border:2px dashed var(--ab-border);border-radius:16px;background:rgba(255,255,255,0.92);
  color:var(--ab-text);box-shadow:0 12px 30px rgba(102,126,234,0.15);
  transition:all .3s ease;
}
.adbuddy-benchmarks-loader[hidden]{display:none !important}
.adbuddy-benchmarks-loader .spinner{
  width:48px;height:48px;border:4px solid rgba(102,126,234,0.2);border-top-color:var(--ab-primary);
  border-radius:50%;animation:adbuddy-loader-spin .9s linear infinite;
}
.adbuddy-benchmarks-loader.is-message .spinner{display:none}
.adbuddy-benchmarks-loader.is-error{
  border-color:#fecaca;background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);
  color:#b91c1c;box-shadow:0 12px 30px rgba(220,38,38,0.15);
}
.adbuddy-benchmarks-loader.is-empty{
  border-color:#fde68a;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  color:#92400e;box-shadow:0 12px 30px rgba(250,204,21,0.15);
}
.adbuddy-benchmarks-loader p{margin:0;font-size:16px;line-height:1.6}

@keyframes adbuddy-loader-spin{to{transform:rotate(360deg)}}

/* filter panel */
.adbuddy-filters{
  padding:20px;background: var(--ab-gradient-light);border:2px solid var(--ab-border);border-radius:16px;margin-bottom:25px;
  overflow:visible;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ab-filter-rows{display:flex;flex-direction:column;gap:16px}

/* Scroll container for fixed-width rows */
.ab-row-container{
  overflow-x: auto;
  margin: 0 -10px;
  padding: 0 10px;
}

/* two-line layout per row - Fixed width approach */
.ab-row{
  position:relative;
  display:grid;
  grid-template-columns: 200px 200px 180px 160px;
  grid-template-rows: auto auto;
  gap:15px;
  padding:18px;
  border:2px dashed var(--ab-border);
  border-radius:16px;
  background: rgba(255, 255, 255, 0.9);
  overflow:visible;
  transition: all 0.3s ease;
  min-width: 780px; /* Minimum width to prevent cramping */
}
.ab-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.15);
}
.ab-row::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-left:6px solid var(--ab-accent,#667eea);border-radius:16px;opacity:.9;
  background: var(--ab-gradient-primary);
  width: 6px;
}
.ab-row > *{position:relative;z-index:1}

/* line 1 */
.ab-row .ab-country   { grid-column:1; grid-row:1; }
.ab-row .ab-vertical  { grid-column:2; grid-row:1; }
.ab-row .ab-objective { grid-column:3; grid-row:1; }
.ab-row .ab-app       { grid-column:4; grid-row:1; }

/* line 2 */
.ab-row .ab-metric    { grid-column:1;    grid-row:2; }
.ab-row .ab-dates     { grid-column:2 / 4; grid-row:2; }
.ab-row .ab-row-actions{ grid-column:4; grid-row:2; align-self:end; justify-self:end; }

/* form controls */
.ab-filter-group{display:flex;flex-direction:column;min-width:0}
.ab-filter-group label{
  height:22px;line-height:22px;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--ab-ink);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.ab-filter-group select,
.ab-filter-group input[type="month"]{
  width:100%;box-sizing:border-box;min-height:48px;height:48px;padding:12px 15px;font-size:15px;color:var(--ab-ink);
  background: var(--ab-gradient-subtle);border:2px solid var(--ab-border);border-radius:12px;line-height:normal;
  appearance:auto;-webkit-appearance:auto;-moz-appearance:auto;
  transition:all .3s ease;position:relative;z-index:2;
}
.ab-filter-group select:hover,
.ab-filter-group input[type="month"]:hover{
  background: var(--ab-gradient-light);border-color: var(--ab-primary);
}
.ab-filter-group select:focus,
.ab-filter-group input[type="month"]:focus{
  border-color:var(--ab-primary);box-shadow:0 0 0 3px rgba(102, 126, 234, 0.2);outline:none;
  background: rgba(255, 255, 255, 0.95);
}

.ab-dates .ab-dates-pair{display:flex;align-items:center;gap:8px}
.ab-dates .ab-tilde{display:inline-block;padding:0 4px;color:#6b7280}

/* inline error */
.ab-row-error{
  grid-column:1 / -1;margin-top:4px;padding:15px 18px;border-radius:12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);border:2px solid #f59e0b;color:#92400e;font-weight:700;display:flex;align-items:center;gap:10px;
  position:relative;box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}
.ab-row-error::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);border-radius:12px 0 0 12px;
}
.ab-row-error .ab-row-error-icon{font-size:16px;line-height:1}

/* actions */
.ab-actions{display:flex;gap:12px;margin-top:18px}
.ab-btn{
  height:48px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;
  background: var(--ab-gradient-primary);color:#fff;font-size:16px;font-weight:700;border:none;border-radius:12px;cursor:pointer;
  transition:all .3s ease;box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.ab-btn:hover{
  background: var(--ab-gradient-secondary);box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
}
.ab-btn:active{transform:scale(.97) translateY(-1px)}
.ab-btn:disabled{background:#9ca3af;cursor:not-allowed;box-shadow:none;transform:none}
.ab-btn.ab-btn-secondary{background: var(--ab-gradient-light);color:var(--ab-ink);border:2px solid var(--ab-border)}
.ab-btn.ab-btn-secondary:hover{background: var(--ab-gradient-subtle);border-color: var(--ab-primary)}

/* Button loading styles */
.ab-btn.btn-loading {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: transparent !important;
  position: relative;
  overflow: hidden;
}

.ab-btn.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.ab-btn.btn-loading .btn-text {
  opacity: 0;
}

/* per-row remove */
.ab-row-actions{display:flex;gap:10px}
.ab-remove{
  height:48px;padding:0 16px;display:inline-flex;align-items:center;gap:10px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);color:#dc2626;
  border:2px solid #fecaca;border-radius:12px;cursor:pointer;font-weight:700;
  transition: all .3s ease;box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
}
.ab-remove:hover{
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color:#f87171;color:#b91c1c;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
  transform: translateY(-2px);
}
.ab-remove svg{display:block}

/* chart */
#ab-chart{
  display:none;width:100% !important;height:420px !important;max-width:100% !important;padding:0 !important;
  background: var(--ab-gradient-subtle);border:2px solid var(--ab-border);border-radius:16px;box-sizing:border-box;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
}

/* content blocks */
.ab-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.ab-card{
  padding:20px;border:2px solid var(--ab-border);border-radius:16px;
  background: var(--ab-gradient-light);box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}
.ab-card:hover{transform: translateY(-3px);box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);}
.ab-card h3{margin:0 0 12px 0;font-size:20px;color:var(--ab-ink);font-weight:800}
.ab-card p,.ab-card li{font-size:16px;line-height:1.7;color:var(--ab-text)}

.ab-section{margin-top:32px}
.ab-section h2{font-size:24px;margin:0 0 16px 0;color:var(--ab-ink);font-weight:800;
  background: var(--ab-gradient-primary);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;
}
.ab-section p{font-size:16px;line-height:1.8;color:var(--ab-text)}
.ab-section ul{margin:12px 0 0 20px}
.ab-section li{font-size:16px;line-height:1.8}
.ab-note{font-size:15px;color:var(--ab-muted)}

.adbuddy-data-source{
  margin-top:32px;padding:20px;border:2px dashed var(--ab-border);border-radius:16px;
  background: var(--ab-gradient-subtle);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.adbuddy-data-source h3{margin:0 0 12px 0;color:var(--ab-ink);font-size:20px;font-weight:800}
.adbuddy-data-source p{font-size:16px;line-height:1.8;color:var(--ab-text)}

/* responsive - Fixed width approach with horizontal scroll */
@media (max-width: 1024px){
  .adbuddy-wrap{
    margin: 20px auto;
    padding: 20px;
  }
  
  /* Keep fixed layout but add horizontal scroll */
  .ab-row{
    grid-template-columns: 200px 200px 180px 160px;
    min-width: 780px;
  }
  
  .ab-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 900px){
  .adbuddy-wrap{
    margin: 15px;
    padding: 15px;
    border-radius: 12px;
  }
  
  .adbuddy-filters{
    padding: 15px;
    border-radius: 12px;
    overflow-x: auto;
  }
  
  /* Enable horizontal scrolling for filter rows */
  .ab-filter-rows{
    overflow-x: visible;
  }
  
  .ab-row-container{
    overflow-x: auto;
    margin: 0 -15px;
    padding: 0 15px;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Keep fixed widths for stability */
  .ab-row{
    grid-template-columns: 200px 200px 180px 160px;
    min-width: 780px;
    margin-bottom: 8px;
  }
  
  .ab-meta{grid-template-columns:1fr; gap: 15px}
  .ab-card{padding: 15px}
  
  .ab-actions{
    flex-direction: column;
    gap: 10px;
  }
  
  .ab-btn{
    width: 100%;
    height: 44px;
    font-size: 15px;
  }
  
  #ab-chart{
    height: 300px !important;
  }
}

@media (max-width: 768px){
  .adbuddy-wrap{
    margin: 15px;
    padding: 15px;
    border-radius: 12px;
  }
  
  .adbuddy-filters{
    padding: 15px;
    border-radius: 12px;
    overflow-x: auto;
  }
  
  /* Horizontal scroll for tablet and small desktop */
  .ab-row-container{
    overflow-x: auto;
    margin: 0 -15px;
    padding: 0 15px;
    -webkit-overflow-scrolling: touch;
  }
  
  .ab-row{
    grid-template-columns: 180px 180px 160px 140px;
    min-width: 680px;
    gap: 12px;
    padding: 16px;
  }
  
  .ab-filter-group label{
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .ab-filter-group select,
  .ab-filter-group input[type="month"]{
    min-height: 44px;
    height: 44px;
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .ab-meta{grid-template-columns:1fr; gap: 15px}
  .ab-card{padding: 15px}
  
  .ab-actions{
    flex-direction: column;
    gap: 10px;
  }
  
  .ab-btn{
    width: 100%;
    height: 44px;
    font-size: 15px;
  }
  
  #ab-chart{
    height: 300px !important;
  }
}

@media (max-width: 480px){
  .adbuddy-wrap{
    margin: 10px;
    padding: 12px;
    border-radius: 8px;
  }
  
  .adbuddy-filters{
    padding: 16px;
    border-radius: 8px;
    overflow: visible;
  }
  
  /* Switch to vertical layout for very small screens */
  .ab-row-container{
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  
  .ab-row{
    display: block;
    min-width: auto;
    width: 100%;
    padding: 18px;
    border-radius: 8px;
    gap: 0;
  }
  
  /* Stack all elements vertically on mobile */
  .ab-filter-group{
    display: block;
    margin-bottom: 16px;
    width: 100%;
  }
  
  .ab-filter-group label{
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 600;
    display: block;
  }
  
  .ab-filter-group select,
  .ab-filter-group input[type="month"]{
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  
  /* Reset grid positioning for mobile */
  .ab-row .ab-country,
  .ab-row .ab-vertical,
  .ab-row .ab-objective,
  .ab-row .ab-app,
  .ab-row .ab-metric,
  .ab-row .ab-dates,
  .ab-row .ab-row-actions{
    grid-column: auto;
    grid-row: auto;
    margin-bottom: 0;
  }
  
  .ab-row .ab-row-actions{
    margin-top: 16px;
    text-align: left;
  }
  
  .ab-btn{
    height: 48px;
    padding: 0 18px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .ab-remove{
    height: 48px;
    padding: 0 14px;
    border-radius: 8px;
  }
  
  .ab-card{
    padding: 12px;
    border-radius: 8px;
  }
  
  .ab-card h3{
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .ab-card p, .ab-card li{
    font-size: 14px;
    line-height: 1.6;
  }
  
  .ab-section h2{
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .ab-section p{
    font-size: 14px;
    line-height: 1.6;
  }
  
  .ab-section li{
    font-size: 14px;
    line-height: 1.6;
  }
  
  .adbuddy-data-source{
    padding: 15px;
    border-radius: 8px;
  }
  
  .adbuddy-data-source h3{
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .adbuddy-data-source p{
    font-size: 14px;
    line-height: 1.6;
  }
  
  #ab-chart{
    height: 250px !important;
    border-radius: 8px;
  }
  
  .ab-dates .ab-dates-pair{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .ab-dates .ab-tilde{
    text-align: center;
    padding: 6px 0;
    font-size: 14px;
  }
}