/**
 * Aladdin Pertanian Agri AI — Design System v5.0
 * Global CSS Custom Properties & Base Reset
 * Scoped under .aladdin-plugin to prevent WP Admin theme conflicts.
 *
 * @package Aladdin_Agri_AI
 * @version 5.0.0
 */

/* ─── TOKEN LAYER ─── */
:root {
	/* Brand Palette */
	--agri-gold:          #D4AF37;
	--agri-gold-light:    #E5C966;
	--agri-gold-dark:     #B8941F;
	--agri-gold-glow:     rgba(212, 175, 55, 0.25);
	--agri-silver:        #BFC5CF;
	--agri-silver-light:  #DDE1E7;
	--agri-silver-dark:   #8E95A1;
	--agri-green:         #0F6B3E;
	--agri-green-light:   #10985A;
	--agri-green-dark:    #0A4A29;
	--agri-green-glow:    rgba(15, 107, 62, 0.18);

	/* Surface & Background */
	--agri-dark:          #0F172A;
	--agri-dark-mid:      #1E293B;
	--agri-surface:       #FFFFFF;
	--agri-surface-2:     #F8FAFC;
	--agri-bg:            #F1F5F9;

	/* Typography */
	--agri-text:          #1E293B;
	--agri-text-2:        #475569;
	--agri-text-muted:    #94A3B8;

	/* Borders */
	--agri-border:        rgba(15, 23, 42, 0.10);
	--agri-border-gold:   rgba(212, 175, 55, 0.40);

	/* Structural */
	--agri-header-h:      68px;
	--agri-logo-h:        44px;   /* Controlled logo height */
	--agri-footer-h:      52px;
	--agri-radius-sm:     6px;
	--agri-radius:        12px;
	--agri-radius-lg:     16px;
	--agri-radius-full:   9999px;

	/* Shadows */
	--agri-shadow-sm:     0 1px 3px rgba(15, 23, 42, 0.08);
	--agri-shadow-md:     0 4px 12px rgba(15, 23, 42, 0.10);
	--agri-shadow-gold:   0 4px 20px rgba(212, 175, 55, 0.20);

	/* Transitions */
	--agri-ease:          200ms cubic-bezier(0.4, 0, 0.2, 1);
	--agri-ease-slow:     350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-Index Scale */
	--agri-z-header:      300;
	--agri-z-dropdown:    200;
	--agri-z-modal:       500;
	/* Spacing Scale */
	--agri-space-1:   4px;
	--agri-space-2:   8px;
	--agri-space-3:   12px;
	--agri-space-4:   16px;
	--agri-space-5:   20px;
	--agri-space-6:   24px;
	--agri-space-8:   32px;
	--agri-space-10:  40px;
	--agri-space-12:  48px;
	--agri-space-16:  64px;

	/* Typography Scale */
	--agri-text-xs:   11px;
	--agri-text-sm:   12px;
	--agri-text-base: 13px;
	--agri-text-md:   14px;
	--agri-text-lg:   15px;
	--agri-text-xl:   18px;
	--agri-text-2xl:  21px;
	--agri-text-3xl:  28px;

	/* Font Weights */
	--agri-fw-normal: 400;
	--agri-fw-medium: 500;
	--agri-fw-semi:   600;
	--agri-fw-bold:   700;
	--agri-fw-black:  800;


}

/* ─── BASE RESET (scoped) ─── */
.aladdin-plugin *,
.aladdin-plugin *::before,
.aladdin-plugin *::after {
	box-sizing: border-box;
}

.aladdin-plugin {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--agri-text);
	background: var(--agri-bg);
	-webkit-font-smoothing: antialiased;
}

/* ─── OVERFLOW CONTAINMENT (Critical) ─── */
.aladdin-plugin {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.aladdin-plugin img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ─── RTL SUPPORT ─── */
[dir="rtl"] .aladdin-plugin {
	direction: rtl;
	text-align: right;
}

/* ─── TOKEN BRIDGE: --brand-* aliases pointing to --agri-* canonical tokens ───
	Resolves the dual-namespace conflict between admin-redesigned.css (--brand-*)
	and the canonical design system (--agri-*). Any stylesheet still referencing
	--brand-* will now resolve to the same values as --agri-*, making both
	namespaces produce identical results without requiring every old file to be
	rewritten. This keeps backward compatibility while the canonical tokens win.
──────────────────────────────────────────────────────────────────────────────── */
:root {
	--brand-gold:            var(--agri-gold);
	--brand-gold-light:      var(--agri-gold-light);
	--brand-gold-dark:       var(--agri-gold-dark);
	--brand-silver:          var(--agri-silver);
	--brand-silver-light:    var(--agri-silver-light);
	--brand-silver-dark:     var(--agri-silver-dark);
	--brand-green:           var(--agri-green);
	--brand-green-light:     var(--agri-green-light);
	--brand-green-dark:      var(--agri-green-dark);
	--brand-dark:            var(--agri-dark);
	--brand-dark-mid:        var(--agri-dark-mid);
	--brand-surface:         var(--agri-surface);
	--brand-surface-2:       var(--agri-surface-2);
	--brand-bg:              var(--agri-bg);
	--brand-text:            var(--agri-text);
	--brand-text-2:          var(--agri-text-2);
	--brand-text-muted:      var(--agri-text-muted);
	--brand-border:          var(--agri-border);
	--brand-border-gold:     var(--agri-border-gold);
	--brand-radius:          var(--agri-radius);
	--brand-radius-sm:       var(--agri-radius-sm);
	--brand-radius-lg:       var(--agri-radius-lg);
	--brand-shadow-sm:       var(--agri-shadow-sm);
	--brand-shadow-md:       var(--agri-shadow-md);
	--brand-shadow-gold:     var(--agri-shadow-gold);
	--brand-ease:            var(--agri-ease);
}

/* ══════════════════════════════════════════════════════════════
	PHASE 9 — Responsive, Browser & Visibility Hardening
	══════════════════════════════════════════════════════════════ */

/* ─── Global overflow guard ─── */
.wrap.aladdin-admin,
.agri-page-content,
.agri-tab-content,
.aladdin-admin-app {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* ─── Tables: always scrollable on small screens ─── */
.agri-table-wrap,
.aladdin-admin .wp-list-table-wrap,
.aladdin-admin .aladdin-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ─── Forms: prevent input overflow ─── */
.aladdin-admin input[type="text"],
.aladdin-admin input[type="email"],
.aladdin-admin input[type="url"],
.aladdin-admin input[type="password"],
.aladdin-admin input[type="number"],
.aladdin-admin input[type="search"],
.aladdin-admin textarea,
.aladdin-admin select {
	max-width: 100%;
	box-sizing: border-box;
}

/* ─── Charts: never overflow container ─── */
.aladdin-admin canvas,
.aladdin-admin svg {
	max-width: 100% !important;
	height: auto !important;
}

/* ─── Notices: wrap correctly ─── */
.agri-notice,
.aladdin-admin .notice {
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ─── BREAKPOINT: 1200px (large tablet / small laptop) ─── */
@media (max-width: 1200px) {
	.agri-content-grid--3   { grid-template-columns: repeat(2, 1fr); }
	.agri-content-grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
	.agri-groups-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ─── BREAKPOINT: 960px (tablet) ─── */
@media (max-width: 960px) {
	.agri-content-grid--2,
	.agri-content-grid--3   { grid-template-columns: 1fr; }
	.agri-page-content      { padding: 18px; }
	.agri-card__body        { padding: 16px; }
	.agri-action-bar--between { flex-wrap: wrap; }
	.agri-upgrade-hero__inner { max-width: 100%; }
}

/* ─── BREAKPOINT: 782px (WP tablet breakpoint) ─── */
@media (max-width: 782px) {
	/* Tab bar: horizontal scroll, hide icons */
	.agri-tab-bar {
	padding: 0 10px;
	gap: 2px;
	}
	.agri-tab {
	padding: 9px 11px 7px;
	font-size: 12px;
	}
	.agri-tab .dashicons { display: none; }

	/* Page content padding */
	.agri-page-content { padding: 12px; }
	.agri-tab-content  { padding: 14px; }

	/* Cards */
	.agri-card__header { padding: 12px 14px; }
	.agri-card__body   { padding: 14px; }

	/* Grids → single column */
	.agri-content-grid,
	.agri-content-grid--auto-2,
	.agri-content-grid--auto-3,
	.agri-groups-grid { grid-template-columns: 1fr; gap: 12px; }

	/* Form tables → stacked */
	.agri-form-table th,
	.agri-form-table td,
	.form-table th,
	.form-table td {
	display: block;
	width: 100%;
	max-width: 100%;
	}
	.agri-form-table th,
	.form-table th { padding-bottom: 4px; width: 100%; }

	/* Action bars → wrap */
	.agri-action-bar        { flex-wrap: wrap; }
	.agri-btn--full         { width: 100%; justify-content: center; }

	/* Header compact */
	.agri-header            { padding: 0 12px; min-height: 56px; }
	.agri-header__version   { display: none; }
	.agri-header__titles .agri-header__name { font-size: 12px; }

	/* Dense tables: allow horizontal scroll */
	.aladdin-admin table.widefat,
	.aladdin-admin table.wp-list-table {
	display: block;
	overflow-x: auto;
	}

	/* Info-sync grid → single col */
	.aladdin-info-sync__grid { grid-template-columns: 1fr !important; }

	/* Operations suite tabs → scroll */
	.aladdin-operations-suite > .agri-tab-bar,
	.agri-ops-suite > .agri-tab-bar {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}
}

/* ─── BREAKPOINT: 480px (mobile portrait) ─── */
@media (max-width: 480px) {
	.agri-tab            { padding: 8px 9px 6px; font-size: 11px; }
	.agri-tab-bar        { gap: 0; }
	.agri-page-content   { padding: 8px; }
	.agri-card__body     { padding: 10px; }
	.agri-btn            { padding: 7px 12px; font-size: 12px; }
	.agri-header__badge  { display: none; }

	/* Upgrade hero */
	.agri-upgrade-hero   { padding: 20px 8px; }
	.agri-upgrade-hero__logo { max-height: 50px; }
}

/* ─── Cross-browser safety ─── */
/* Safari: sticky tab bar fallback */
@supports not (position: sticky) {
	.agri-tab-bar { position: relative; top: auto; }
}

/* Firefox: scrollbar styling */
.agri-tab-bar { scrollbar-width: thin; scrollbar-color: rgba(212,175,55,.5) transparent; }

/* Edge/IE: grid fallback */
@supports not (display: grid) {
	.agri-content-grid,
	.agri-content-grid--auto-2,
	.agri-content-grid--auto-3,
	.agri-groups-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	}
	.agri-content-grid > *,
	.agri-groups-grid > * {
	flex: 1 1 280px;
	min-width: 280px;
	}
}

/* color-mix fallback for older browsers */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.agri-group-card__icon {
	background: rgba(212, 175, 55, 0.12);
	}
}

/* ══════════════════════════════════════════════════════════════
	PHASE R7 — Visibility, Overflow & Responsiveness Hardening
	══════════════════════════════════════════════════════════════ */

/* ─── Prevent fixed-height traps ─── */
.agri-card,
.agri-card__body,
.agri-tab-content,
.agri-ops-module {
	min-height: 0;
	height: auto;
}

/* ─── Agri-table: always scrollable ─── */
.agri-table-wrap {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.agri-table-wrap table,
.agri-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	word-break: break-word;
}

/* ─── Page body: never clip ─── */
.agri-page-body,
.agri-page-content {
	min-height: 200px;
	overflow: visible;
	padding: 20px 24px;
	box-sizing: border-box;
}

/* ─── Tab bar: no content hidden on overflow ─── */
.agri-tab-bar {
	overflow-x: auto;
	overflow-y: visible;
	white-space: nowrap;
}

/* ─── Page intro: never overflow on small screens ─── */
.agri-page-intro {
	flex-wrap: wrap;
}
.agri-page-intro__actions {
	flex-wrap: wrap;
}

/* ─── Stats row: responsive ─── */
.agri-stats-row {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ─── Content grids: prevent blowout ─── */
.agri-content-grid--auto-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

/* ─── Modals: scroll on small screens ─── */
.modal-content,
.aladdin-modal .modal-content {
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	width: min(92vw, 720px);
}

/* ─── BREAKPOINT: 1280px ─── */
@media (max-width: 1280px) {
	.agri-page-content { padding: 16px 18px; }
}

/* ─── BREAKPOINT: 960px (tablet) ─── */
@media (max-width: 960px) {
	.agri-page-intro           { flex-direction: column; }
	.agri-page-intro__actions  { width: 100%; justify-content: flex-start; }
	.agri-stats-row            { grid-template-columns: repeat(2, 1fr); }
	.agri-content-grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
	.agri-tab-bar              { padding: 0 12px; }
	.agri-tab                  { padding: 10px 12px 8px; font-size: 12px; }
}

/* ─── BREAKPOINT: 782px (WP mobile breakpoint) ─── */
@media (max-width: 782px) {
	.agri-page-body,
	.agri-page-content          { padding: 12px 14px; }
	.agri-stats-row             { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.agri-card__body            { padding: 14px; }
	.agri-page-intro            { padding: 14px 14px 12px; }
	.agri-filter-bar            { flex-direction: column; align-items: stretch; }
	.agri-filter-bar select,
	.agri-filter-bar input      { width: 100%; }
	.agri-action-bar            { flex-wrap: wrap; }
	.modal-content              { width: 96vw; }
	.agri-ops-module            { overflow-x: hidden; }
}

/* ─── BREAKPOINT: 480px (mobile portrait) ─── */
@media (max-width: 480px) {
	.agri-stats-row             { grid-template-columns: 1fr; }
	.agri-tab                   { padding: 8px 10px; font-size: 11px; gap: 4px; }
	.agri-tab .dashicons        { display: none; }
	.agri-header                { height: auto; min-height: var(--agri-header-h); padding: 10px 14px; }
	.agri-header__name          { display: none; }
	.agri-content-grid--auto-3  { grid-template-columns: 1fr; }
	.agri-page-intro__title     { font-size: 16px; }
}

/* ─── Cross-browser: Safari flex fix ─── */
@supports (-webkit-overflow-scrolling: touch) {
	.agri-tab-bar { -webkit-overflow-scrolling: touch; }
}

/* ─── RTL: flip directional elements ─── */
[dir="rtl"] .agri-page-intro { flex-direction: row-reverse; }
[dir="rtl"] .agri-card__header { flex-direction: row-reverse; }
[dir="rtl"] .agri-tab-bar { direction: rtl; }
[dir="rtl"] .agri-action-bar { flex-direction: row-reverse; }