/* AgCardStyle.css
   Scoped card & section styles for dashboard screens
   Keep this file lightweight and framework-friendly.
*/

.ag-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.ag-card{
  /* Element/Theme variables applied at card scope */
  --wp-admin--admin-bar--height: 32px;
  --webkit-text-size-adjust: 100%;
  --webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --page-title-display: block;
  --e-a-color-white: #fff;
  --e-a-color-black: #000;
  --e-a-color-logo: #fff;
  --e-a-color-primary: #f3bafd;
  --e-a-color-primary-bold: #d004d4;
  --e-a-color-secondary: #515962;
  --e-a-color-success: #0a875a;
  --e-a-color-danger: #dc2626;
  --e-a-color-info: #2563eb;
  --e-a-color-warning: #f59e0b;
  --e-a-color-accent: #93003f;
  --e-a-color-global: #1dddbf;
  --e-a-color-accent-promotion: #93003f;
  --e-a-bg-default: #fff;
  --e-a-bg-invert: #0c0d0e;
  --e-a-bg-hover: #f1f2f3;
  --e-a-bg-active: #e6e8ea;
  --e-a-bg-active-bold: #d5d8dc;
  --e-a-bg-loading: #f9fafa;
  --e-a-bg-logo: #000;
  --e-a-bg-primary: #fae8ff;
  --e-a-bg-secondary: #515962;
  --e-a-bg-success: #f2fdf5;
  --e-a-bg-info: #f0f7ff;
  --e-a-bg-danger: #fef1f4;
  --e-a-bg-warning: #fffbeb;
  --e-a-bg-chip: #f1f2f3;
  --e-a-color-txt: #515962;
  --e-a-color-txt-muted: #818a96;
  --e-a-color-txt-disabled: #babfc5;
  --e-a-color-txt-invert: #fff;
  --e-a-color-txt-accent: #0c0d0e;
  --e-a-color-txt-hover: #3f444b;
  --e-a-color-txt-active: #0c0d0e;
  --e-a-border-color: #e6e8ea;
  --e-a-border-color-bold: #d5d8dc;
  --e-a-border-color-focus: #babfc5;
  --e-a-border-color-accent: #0c0d0e;
  --e-a-border: 1px solid var(--e-a-border-color);
  --e-a-border-bold: 1px solid var(--e-a-border-color-bold);
  --e-a-border-radius: 3px;
  --e-a-btn-color: #0c0d0e;
  --e-a-btn-color-invert: var(--e-a-color-txt-invert);
  --e-a-btn-color-disabled: var(--e-a-color-txt-disabled);
  --e-a-btn-bg: #515962;
  --e-a-btn-bg-hover: #3a4046;
  --e-a-btn-bg-active: #23262a;
  --e-a-btn-bg-disabled: #d5d8dc;
  --e-a-btn-bg-primary: #f3bafd;
  --e-a-btn-bg-primary-hover: #f5d0fe;
  --e-a-btn-bg-primary-active: #f0abfc;
  --e-a-btn-bg-accent: #93003f;
  --e-a-btn-bg-accent-hover: #8f1a4c;
  --e-a-btn-bg-accent-active: #a93365;
  --e-a-btn-bg-info: #2563eb;
  --e-a-btn-bg-info-hover: #134cca;
  --e-a-btn-bg-info-active: #0e3b9c;
  --e-a-btn-bg-success: #0a875a;
  --e-a-btn-bg-success-hover: #06583a;
  --e-a-btn-bg-success-active: #03281b;
  --e-a-btn-bg-warning: #f59e0b;
  --e-a-btn-bg-warning-hover: #c57f08;
  --e-a-btn-bg-warning-active: #945f06;
  --e-a-btn-bg-danger: #dc2626;
  --e-a-btn-bg-danger-hover: #b21d1d;
  --e-a-btn-bg-danger-active: #861616;
  --e-a-dark-bg: #0c0d0e;
  --e-a-dark-color-txt: #9da5ae;
  --e-a-dark-color-txt-hover: #d5d8dc;
  --e-a-font-family: Roboto,Arial,Helvetica,sans-serif;
  --e-a-transition-hover: all .3s;
  --e-a-popover-shadow: 0 2px 15px rgba(0,0,0,.3);
  --e-a-dropdown-shadow: 0 0 3px rgba(0,0,0,.2);
  --direction-multiplier: 1;
  --e-p-draggable-color: #f0abfc;
  --e-p-border-section: #f3bafd;
  --e-p-border-section-hover: #f0abfc;
  --e-p-border-section-invert: #0c0d0e;
  --e-p-border-con: #f3bafd;
  --e-p-border-con-hover: #f0abfc;
  --e-p-border-con-invert: #0c0d0e;
  --e-p-border-column: #9da5ae;
  --e-p-border-column-hover: #818a96;
  --e-p-border-column-invert: #0c0d0e;
  --e-p-border-con-in: #9da5ae;
  --e-p-border-con-in-hover: #818a96;
  --e-p-border-con-in-invert: #0c0d0e;
  --e-p-border-widget: #f3bafd;
  --e-p-border-widget-hover: #f0abfc;
  --e-p-border-widget-invert: #0c0d0e;
  --e-p-border-global: #5eead4;
  --e-p-border-global-hover: #1dddbf;
  --e-p-border-global-invert: #0c0d0e;
  --wp--preset--aspect-ratio--square: 1;
  --wp--preset--aspect-ratio--4-3: 4/3;
  --wp--preset--aspect-ratio--3-4: 3/4;
  --wp--preset--aspect-ratio--3-2: 3/2;
  --wp--preset--aspect-ratio--2-3: 2/3;
  --wp--preset--aspect-ratio--16-9: 16/9;
  --wp--preset--aspect-ratio--9-16: 9/16;
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
  --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
  color: #707070;
  text-transform: none;
  --e-global-color-primary: #838629;
  --e-global-color-secondary: #4E5105;
  --e-global-color-text: #151618;
  --e-global-color-accent: #ECDD5E;
  --e-global-color-a648a2f: #96784D;
  --e-global-color-f91dfc2: #FFFFFF;
  --e-global-color-fe328e6: #F2E5D5;
  --e-global-color-a43d48d: #FCF9F6;
  --e-global-color-640b7c7: #343510;
  --e-global-color-6910286: #3C301E;
  --e-global-color-3d2673f: #B37847;
  --e-global-color-6b9d3e7: #DACEC0;
  --e-global-color-00a640d: #F9F2EA;
  --e-global-color-18bbcc2: #2D2417;
  --e-global-color-cd305fa: #4B3C27;
  --e-global-typography-primary-font-family: "Rubik";
  --e-global-typography-primary-font-weight: 800;
  --e-global-typography-secondary-font-family: "Rubik";
  --e-global-typography-secondary-font-weight: 700;
  --e-global-typography-text-font-family: "Montserrat";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "Rubik";
  --e-global-typography-accent-font-weight: 700;
  font-family: "Montserrat", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  --primary-color: var(--e-p-border-con);
  --secondary-color: var(--e-p-border-con-hover);
  --outline-color: var(--e-p-border-con-active);
  --flex-direction: initial;
  --flex-wrap: initial;
  --justify-content: initial;
  --align-items: initial;
  --align-content: initial;
  --gap: initial;
  --flex-basis: initial;
  --flex-grow: initial;
  --flex-shrink: initial;
  --order: initial;
  --align-self: initial;
  --swiper-theme-color: #000;
  --swiper-navigation-size: 44px;
  --swiper-pagination-bullet-size: 6px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  --widgets-spacing: 20px 20px;
  --widgets-spacing-row: 20px;
  --widgets-spacing-column: 20px;
  box-sizing: border-box;
  align-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  display: flex;
  padding: 10px;
  border-style: solid;
  border-width: 10px 10px 10px 10px;
  border-color: var(--e-a-border-color);
  box-shadow: -10px -10px 10px 0px rgba(0,0,0,0.5);
  margin: 10px 10px 10px 10px;
  --e-column-margin-right: 10px;
  --e-column-margin-left: 10px;
  border-radius: 10px 10px 10px 10px;
  background: var(--e-a-bg-default, #fff);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ag-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(16,24,40,0.06); }

.ag-card-title{font-size:1.05rem;font-weight:600;margin-bottom:8px;color:#111827}
.ag-card-body{font-size:.95rem;color:#374151}
.ag-card-compact{padding:10px}

.ag-card-actions{margin-top:12px;display:flex;gap:.5rem;justify-content:flex-end}

.ag-section{padding:20px 0}

/* small screens */
@media (max-width:767px){
  .ag-card{padding:12px}
  .ag-card-title{font-size:1rem}
}