/* =============================================================================
   StockOracle AI — Admin Dashboard Styles
   Version: 1.0.2
   ============================================================================= */

/* ---- CSS Custom Properties ---- */
:root {
	/* Brand colours */
	--soa-primary:       #6c63ff;
	--soa-primary-dark:  #5a54e8;
	--soa-primary-light: #ede9ff;
	--soa-primary-rgb:   108, 99, 255;
	--soa-purple:        #7c3aed;
	--soa-purple-light:  #ede9fe;

	/* Semantic colours */
	--soa-success:       #1a8a45;
	--soa-success-light: #d1fae5;
	--soa-danger:        #dc2626;
	--soa-danger-light:  #fee2e2;
	--soa-warning:       #d97706;
	--soa-warning-light: #fef3c7;
	--soa-info:          #2563eb;
	--soa-info-light:    #dbeafe;

	/* Neutral */
	--soa-text:          #1d2327;
	--soa-text-secondary: #374151;
	--soa-text-muted:    #6b7280;
	--soa-border:        #e5e7eb;
	--soa-border-light:  #f3f4f6;
	--soa-bg:            #ffffff;
	--soa-bg-alt:        #f9fafb;
	--soa-bg-hover:      #f3f4f6;

	/* Shape */
	--soa-radius:        10px;
	--soa-radius-sm:     6px;
	--soa-radius-lg:     14px;

	/* Elevation */
	--soa-shadow-xs:     0 1px 2px rgba(0, 0, 0, .05);
	--soa-shadow:        0 1px 4px rgba(0, 0, 0, .07), 0 4px 12px rgba(0, 0, 0, .05);
	--soa-shadow-md:     0 4px 16px rgba(0, 0, 0, .10), 0 1px 4px rgba(0, 0, 0, .06);
	--soa-shadow-lg:     0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);

	/* Motion */
	--soa-transition:    0.18s ease;

	/* Typography */
	--soa-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Enterprise global overrides ---- */
.wrap.stockoracle-dashboard,
.wrap.stockoracle-inventory,
.wrap.stockoracle-alerts,
.wrap.stockoracle-settings {
	font-family: var(--soa-font);
}

/* Improved card baseline */
.soa-card,
.soa-stat-card,
.soa-section-card {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	box-shadow: var(--soa-shadow);
	transition: box-shadow var(--soa-transition);
}

.soa-card:hover,
.soa-stat-card:hover {
	box-shadow: var(--soa-shadow-md);
}

/* =============================================================================
   PAGE HEADER
   ============================================================================= */

.stockoracle-dashboard .soa-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 24px;
	padding: 16px 20px;
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	box-shadow: var(--soa-shadow);
}

.soa-page-title {
	margin: 0 !important;
	font-size: 1.3rem;
	color: var(--soa-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.soa-page-title .dashicons {
	color: var(--soa-primary);
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
}

.soa-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.soa-last-updated {
	font-size: 12px;
	color: var(--soa-text-muted);
}

#soa-refresh-btn {
	display: flex;
	align-items: center;
	gap: 4px;
}

#soa-refresh-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* =============================================================================
   STATS CARDS GRID
   ============================================================================= */

.stockoracle-stats-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 16px;
	margin-bottom: 24px;
}

.soa-secondary-grid {
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
}

.stockoracle-stat-card {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	padding: 18px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: var(--soa-shadow);
	transition: box-shadow var(--soa-transition), transform var(--soa-transition);
}

.stockoracle-stat-card:hover {
	box-shadow: var(--soa-shadow-md);
	transform: translateY( -1px );
}

/* Stat icon */
.soa-stat-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--soa-bg-alt);
}

.soa-stat-icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.soa-icon-green  { background: var(--soa-primary-light) !important; }
.soa-icon-green .dashicons { color: var(--soa-primary); }
.soa-icon-blue   { background: var(--soa-info-light) !important; }
.soa-icon-blue .dashicons { color: var(--soa-info); }
.soa-icon-warning { background: var(--soa-warning-light) !important; }
.soa-icon-warning .dashicons { color: var(--soa-warning); }
.soa-icon-danger { background: var(--soa-danger-light) !important; }
.soa-icon-danger .dashicons { color: var(--soa-danger); }
.soa-icon-purple { background: var(--soa-purple-light) !important; }
.soa-icon-purple .dashicons { color: var(--soa-purple); }

/* Stat body */
.soa-stat-body {
	min-width: 0;
}

.soa-stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--soa-text);
}

.soa-stat-value small {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--soa-text-muted);
}

.soa-stat-label {
	font-size: 12px;
	color: var(--soa-text-muted);
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Health card special treatment */
.soa-health-card.green { border-top: 3px solid var(--soa-primary); }
.soa-health-card.yellow { border-top: 3px solid var(--soa-warning); }
.soa-health-card.red { border-top: 3px solid var(--soa-danger); }

/* =============================================================================
   HEALTH SCORE — large display
   ============================================================================= */

.stockoracle-health-score {
	font-size: 2rem;
	font-weight: 700;
}

.stockoracle-health-score.green { color: var(--soa-primary); }
.stockoracle-health-score.yellow { color: var(--soa-warning); }
.stockoracle-health-score.red { color: var(--soa-danger); }

/* Grade badge alongside score */
.soa-grade-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
	text-transform: uppercase;
}
.soa-grade-badge.green  { background: var(--soa-primary); color: #fff; }
.soa-grade-badge.yellow { background: var(--soa-warning); color: #fff; }
.soa-grade-badge.red    { background: var(--soa-danger); color: #fff; }

/* Health score panel (from partial) */
.soa-health-score-panel {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	padding: 20px 24px;
	margin-bottom: 24px;
	box-shadow: var(--soa-shadow);
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.soa-health-panel-green  { border-left: 5px solid var(--soa-primary); }
.soa-health-panel-yellow { border-left: 5px solid var(--soa-warning); }
.soa-health-panel-red    { border-left: 5px solid var(--soa-danger); }
.soa-health-panel-grey   { border-left: 5px solid #9E9E9E; }

.soa-health-score-inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.soa-health-circle-wrap {
	width: 90px;
	height: 90px;
	flex-shrink: 0;
}

.soa-health-svg {
	width: 90px;
	height: 90px;
}

.soa-ring-score-num {
	font-family: var(--soa-font);
}

.soa-health-grade-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.soa-health-grade-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 20px;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}
.soa-grade-green  { background: var(--soa-primary); }
.soa-grade-yellow { background: var(--soa-warning); }
.soa-grade-red    { background: var(--soa-danger); }
.soa-grade-grey   { background: #9E9E9E; }

.soa-health-grade-label {
	font-size: 13px;
	color: var(--soa-text-muted);
	font-style: italic;
}

/* Factor breakdown */
.soa-health-factors {
	flex: 1;
	min-width: 220px;
}

.soa-health-factors-title {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--soa-text-muted);
	margin: 0 0 8px;
}

.soa-health-factor-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.soa-health-factor-item {
	display: grid;
	grid-template-columns: 140px 1fr 60px;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.soa-factor-label { color: var(--soa-text-muted); }

.soa-factor-bar-wrap {
	background: var(--soa-bg-alt);
	border-radius: 99px;
	height: 6px;
	overflow: hidden;
}

.soa-factor-bar {
	height: 100%;
	border-radius: 99px;
	transition: width 0.5s ease;
}

.soa-factor-value {
	color: var(--soa-text);
	font-weight: 600;
	text-align: right;
}

/* =============================================================================
   CHARTS ROW
   ============================================================================= */

.stockoracle-charts-row {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto auto;
	gap: 16px;
	margin-bottom: 24px;
}

.stockoracle-chart-card {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	box-shadow: var(--soa-shadow);
	overflow: hidden;
}

.soa-chart-pie  { grid-column: 1; grid-row: 1; }
.soa-chart-bar  { grid-column: 2; grid-row: 1; }
.soa-chart-line.soa-chart-full { grid-column: 1 / -1; grid-row: 2; }

.soa-card-header {
	padding: 14px 18px;
	border-bottom: 1px solid var(--soa-border);
	background: var(--soa-bg-alt);
}

.soa-card-header h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--soa-text);
}

.soa-header-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.soa-view-all {
	font-size: 12px;
	color: var(--soa-info);
	text-decoration: none;
}
.soa-view-all:hover { text-decoration: underline; }

.soa-card-body {
	padding: 16px 18px;
}

/* =============================================================================
   BOTTOM ROW PANELS
   ============================================================================= */

.soa-bottom-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.soa-panel {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	box-shadow: var(--soa-shadow);
	overflow: hidden;
}

/* Alerts mini table */
.soa-alerts-mini-table {
	font-size: 13px;
}

.soa-alerts-mini-table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--soa-text-muted);
	padding: 8px 10px;
}

.soa-alerts-mini-table td {
	padding: 8px 10px;
	vertical-align: middle;
}

.soa-alert-row.soa-alert-critical { background: var(--soa-danger-light); }
.soa-alert-row.soa-alert-warning  { background: var(--soa-warning-light); }

/* Dead stock panel */
.soa-deadstock-stat {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.soa-ds-number {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.soa-ds-label {
	font-size: 12px;
	color: var(--soa-text-muted);
}

.soa-deadstock-desc {
	font-size: 12px;
	color: var(--soa-text-muted);
	margin: 8px 0 12px;
	line-height: 1.5;
}

.soa-full-width-btn {
	display: block;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

/* Top sellers */
.soa-top-sellers-list {
	margin: 0;
	padding: 0 0 0 18px;
}

.soa-top-seller-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
	font-size: 13px;
}

.soa-ts-name {
	font-weight: 500;
	color: var(--soa-text);
}

.soa-ts-meta {
	font-size: 11px;
	color: var(--soa-text-muted);
	margin-top: 1px;
}

/* =============================================================================
   WORST PERFORMERS SECTION
   ============================================================================= */

.soa-section {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	box-shadow: var(--soa-shadow);
	overflow: hidden;
	margin-bottom: 24px;
}

.soa-worst-table {
	font-size: 13px;
}

/* =============================================================================
   BADGES
   ============================================================================= */

.soa-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* ABC badges */
.soa-badge.a,
.soa-badge-green { background: var(--soa-primary); color: #fff; }
.soa-badge.b,
.soa-badge-info  { background: var(--soa-info);    color: #fff; }
.soa-badge.c,
.soa-badge-grey  { background: #9E9E9E;            color: #fff; }

/* Alert severity badges */
.soa-badge-danger,
.soa-badge-critical { background: var(--soa-danger);  color: #fff; }
.soa-badge-warning  { background: var(--soa-warning); color: #fff; }

/* Status badges */
.soa-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--soa-radius-sm);
	font-size: 11px;
	font-weight: 600;
}
.soa-status-instock    { background: var(--soa-primary-light); color: var(--soa-primary-dark); }
.soa-status-lowstock   { background: var(--soa-warning-light); color: #e65100; }
.soa-status-outofstock { background: var(--soa-danger-light);  color: #b71c1c; }

/* Header badge */
.soa-header-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	margin-left: 10px;
	vertical-align: middle;
}

/* =============================================================================
   TABLE COLOR CODING
   ============================================================================= */

.soa-row-critical { background-color: #fff5f5 !important; }
.soa-row-warning  { background-color: #fffbf0 !important; }
.soa-row-ok       { background-color: #f0fff0 !important; }

.soa-stock-ok  { color: var(--soa-primary); font-weight: 600; }
.soa-stock-low { color: var(--soa-warning); font-weight: 600; }
.soa-stock-out { color: var(--soa-danger);  font-weight: 600; }

.soa-days-critical { color: var(--soa-danger);  font-weight: 600; }
.soa-days-warning  { color: var(--soa-warning); font-weight: 600; }
.soa-days-ok       { color: var(--soa-primary); font-weight: 600; }

/* =============================================================================
   TEXT UTILITIES
   ============================================================================= */

.soa-text-green   { color: var(--soa-primary) !important; }
.soa-text-warning { color: var(--soa-warning) !important; }
.soa-text-danger  { color: var(--soa-danger)  !important; }
.soa-text-muted   { color: var(--soa-text-muted) !important; }
.soa-text-info    { color: var(--soa-info) !important; }
.soa-na           { color: var(--soa-text-muted); font-style: italic; }

/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.stockoracle-empty-state {
	text-align: center;
	padding: 60px 24px;
	background: var(--soa-bg);
	border: 1px dashed var(--soa-border);
	border-radius: var(--soa-radius);
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	box-sizing: border-box;
}

.soa-empty-icon {
	font-size: 48px !important;
	width: 48px !important;
	height: 48px !important;
	color: var(--soa-primary);
	display: block;
	margin: 0 auto 12px;
}

.stockoracle-empty-state h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	color: var(--soa-text);
}

.stockoracle-empty-state p {
	color: var(--soa-text-muted);
	margin: 0 0 16px;
}

.soa-empty-mini {
	padding: 16px;
	text-align: center;
	color: var(--soa-text-muted);
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* =============================================================================
   WP DASHBOARD WIDGET
   ============================================================================= */

.soa-widget {
	font-size: 13px;
}

.soa-widget-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--soa-border);
}

.soa-widget-health {
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 8px;
}

.soa-widget-label {
	font-size: 12px;
	color: var(--soa-text-muted);
}

.soa-health-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}
.soa-health-green  { background: var(--soa-primary); }
.soa-health-yellow { background: var(--soa-warning); }
.soa-health-red    { background: var(--soa-danger);  }
.soa-health-grey   { background: #9E9E9E; }

.soa-widget-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 10px 0;
}

.soa-widget-stat {
	background: var(--soa-bg-alt);
	border-radius: var(--soa-radius-sm);
	padding: 8px 10px;
	text-align: center;
}

.soa-widget-stat-warning { background: var(--soa-warning-light); }
.soa-widget-stat-danger  { background: var(--soa-danger-light); }

.soa-widget-stat-num {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--soa-text);
}

.soa-widget-stat-lbl {
	display: block;
	font-size: 11px;
	color: var(--soa-text-muted);
	margin-top: 2px;
}

.soa-widget-deadstock {
	font-size: 12px;
	padding: 8px 0;
	margin-bottom: 10px;
}

.soa-widget-footer {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 8px;
}

.soa-widget-btn {
	font-size: 12px !important;
	display: flex !important;
	align-items: center;
	gap: 4px;
}

.soa-widget-alerts-btn {
	background: var(--soa-warning) !important;
	border-color: var(--soa-warning) !important;
	color: #fff !important;
}

/* =============================================================================
   INVENTORY PAGE
   ============================================================================= */

.stockoracle-inventory .soa-inventory-meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--soa-text-muted);
	margin-bottom: 10px;
	flex-wrap: wrap;
	gap: 6px;
}

.soa-table-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* =============================================================================
   ALERTS PAGE
   ============================================================================= */

.soa-alert-summary-bar {
	display: flex;
	gap: 12px;
	margin: 16px 0;
	flex-wrap: wrap;
}

.soa-alert-summary-item {
	flex: 1;
	min-width: 100px;
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	padding: 14px 16px;
	text-align: center;
	box-shadow: var(--soa-shadow);
}

.soa-alert-summary-critical { border-top: 3px solid var(--soa-danger); }
.soa-alert-summary-warning  { border-top: 3px solid var(--soa-warning); }
.soa-alert-summary-info     { border-top: 3px solid var(--soa-info); }
.soa-alert-summary-total    { border-top: 3px solid #9E9E9E; }

.soa-summary-count {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--soa-text);
	line-height: 1.1;
}

.soa-summary-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--soa-text-muted);
	margin-top: 4px;
	letter-spacing: 0.04em;
}

.soa-alert-tabs {
	margin-bottom: 16px;
}

.stockoracle-alert-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 16px;
	align-items: start;
}

.stockoracle-alert-grid > .stockoracle-empty-state {
	grid-column: 1 / -1;
}

/* Alert Card */
.stockoracle-alert-card {
	background: var(--soa-bg);
	border: 1px solid var(--soa-border);
	border-radius: var(--soa-radius);
	box-shadow: var(--soa-shadow);
	overflow: hidden;
	transition: box-shadow var(--soa-transition);
	display: flex;
	flex-direction: column;
}

.stockoracle-alert-card:hover {
	box-shadow: var(--soa-shadow-md);
}

.stockoracle-alert-card.critical { border-left: 4px solid var(--soa-danger); }
.stockoracle-alert-card.warning  { border-left: 4px solid var(--soa-warning); }
.stockoracle-alert-card.info     { border-left: 4px solid var(--soa-info); }

.soa-alert-card-header {
	padding: 14px 16px;
	border-bottom: 1px solid var(--soa-border);
	background: var(--soa-bg-alt);
}

.soa-alert-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	margin-bottom: 6px;
}

.soa-alert-product-name {
	margin: 6px 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.soa-alert-product-name a {
	color: var(--soa-text);
	text-decoration: none;
}

.soa-alert-product-name a:hover { color: var(--soa-info); }

.soa-alert-sku {
	font-size: 11px;
	color: var(--soa-text-muted);
}

.soa-alert-card-body {
	padding: 14px 16px;
	flex: 1;
}

.soa-alert-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.soa-alert-metric {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.soa-alert-metric-suggest {
	grid-column: 1 / -1;
	background: var(--soa-primary-light);
	border-radius: var(--soa-radius-sm);
	padding: 6px 8px;
}

.soa-metric-label {
	font-size: 10px;
	text-transform: uppercase;
	color: var(--soa-text-muted);
	letter-spacing: 0.04em;
}

.soa-metric-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--soa-text);
}

.soa-alert-description {
	font-size: 12px;
	color: var(--soa-text-muted);
	margin: 0;
	font-style: italic;
}

.soa-alert-card-footer {
	padding: 10px 16px;
	border-top: 1px solid var(--soa-border);
	background: var(--soa-bg-alt);
	display: flex;
	gap: 8px;
	align-items: center;
}

/* =============================================================================
   INLINE INVENTORY TABLE PARTIAL
   ============================================================================= */

.soa-inventory-table-wrap {
	overflow-x: auto;
}

.soa-inline-inventory-table {
	font-size: 13px;
	table-layout: auto;
}

.soa-inline-inventory-table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--soa-text-muted);
}

.soa-inventory-table-footer {
	margin-top: 10px;
	text-align: right;
}

.soa-view-all-link {
	font-size: 12px !important;
}

/* =============================================================================
   PRO NOTICE
   ============================================================================= */

.soa-pro-notice {
	border-left-color: var(--soa-primary) !important;
}

.soa-pro-notice p {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.soa-dismiss-notice {
	font-size: 12px;
	color: var(--soa-text-muted);
	cursor: pointer;
}

.soa-dismiss-notice:hover {
	color: var(--soa-danger);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media ( max-width: 1200px ) {
	.soa-bottom-row {
		grid-template-columns: 1fr 1fr;
	}

	.soa-panel-alerts {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 960px ) {
	.stockoracle-charts-row {
		grid-template-columns: 1fr;
	}

	.soa-chart-pie,
	.soa-chart-bar,
	.soa-chart-line.soa-chart-full {
		grid-column: 1;
		grid-row: auto;
	}
}

@media ( max-width: 782px ) {
	.stockoracle-stats-grid,
	.soa-secondary-grid {
		grid-template-columns: 1fr 1fr;
	}

	.soa-bottom-row {
		grid-template-columns: 1fr;
	}

	.stockoracle-alert-grid {
		grid-template-columns: 1fr;
	}

	.soa-health-score-panel {
		flex-direction: column;
	}

	.soa-health-factor-item {
		grid-template-columns: 100px 1fr 50px;
	}

	.stockoracle-dashboard .soa-page-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.soa-widget-stats {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 480px ) {
	.stockoracle-stats-grid,
	.soa-secondary-grid {
		grid-template-columns: 1fr;
	}

	.soa-alert-metrics {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   ENTERPRISE UI LAYER — Polished overrides and additions
   ============================================================================= */

/* ---- Page header enterprise upgrade ---- */
.soa-page-header {
	background: linear-gradient(135deg, #fff 0%, #f9f8ff 100%) !important;
	border-bottom: 3px solid var(--soa-primary) !important;
	border-radius: var(--soa-radius) !important;
}

.soa-page-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -.2px;
}

.soa-page-title .dashicons {
	color: var(--soa-primary) !important;
}

/* ---- Stat cards — enterprise gradient headers ---- */
.soa-stat-card {
	overflow: hidden;
	border-radius: var(--soa-radius-lg) !important;
	transition: transform var(--soa-transition), box-shadow var(--soa-transition) !important;
}

.soa-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--soa-shadow-lg) !important;
}

.soa-stat-card .soa-stat-header {
	background: linear-gradient(135deg, var(--soa-primary) 0%, var(--soa-primary-dark) 100%);
	color: #fff;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.soa-stat-card .soa-stat-header .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	opacity: .9;
}

.soa-stat-card .soa-stat-value {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--soa-text);
	letter-spacing: -.5px;
}

.soa-stat-card .soa-stat-label {
	font-size: 12px;
	color: var(--soa-text-muted);
	margin-top: 2px;
}

.soa-stat-card .soa-stat-trend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 600;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 20px;
}

.soa-stat-trend-up {
	background: var(--soa-success-light);
	color: var(--soa-success);
}

.soa-stat-trend-down {
	background: var(--soa-danger-light);
	color: var(--soa-danger);
}

/* ---- Health score panel enterprise ---- */
.soa-health-score-panel {
	border-radius: var(--soa-radius-lg) !important;
	overflow: hidden;
}

.soa-health-panel-excellent,
.soa-health-panel-good {
	border-left: 4px solid var(--soa-success) !important;
}

.soa-health-panel-fair {
	border-left: 4px solid var(--soa-warning) !important;
}

.soa-health-panel-poor,
.soa-health-panel-critical {
	border-left: 4px solid var(--soa-danger) !important;
}

/* ---- Section cards ---- */
.soa-section-card {
	border-radius: var(--soa-radius-lg) !important;
}

.soa-section-card .soa-section-title,
.soa-section-header {
	border-bottom: 1px solid var(--soa-border-light);
	padding-bottom: 12px;
	margin-bottom: 16px;
}

/* ---- Alert rows — zebra + hover ---- */
.soa-alerts-table tbody tr:nth-child(even) {
	background: var(--soa-bg-alt);
}

.soa-alerts-table tbody tr:hover {
	background: var(--soa-primary-light) !important;
}

.soa-alerts-table thead th {
	background: var(--soa-bg-alt);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--soa-text-muted);
	font-weight: 600;
	border-bottom: 2px solid var(--soa-border);
}

/* ---- Badge system upgrade ---- */
.soa-badge {
	font-weight: 700 !important;
	letter-spacing: .3px;
	text-transform: uppercase;
	font-size: 10px !important;
}

.soa-badge-critical,
.soa-badge-danger {
	background: var(--soa-danger-light) !important;
	color: var(--soa-danger) !important;
	border: 1px solid rgba(220, 38, 38, .2);
}

.soa-badge-warning {
	background: var(--soa-warning-light) !important;
	color: var(--soa-warning) !important;
	border: 1px solid rgba(217, 119, 6, .2);
}

.soa-badge-info {
	background: var(--soa-info-light) !important;
	color: var(--soa-info) !important;
	border: 1px solid rgba(37, 99, 235, .2);
}

.soa-badge-success {
	background: var(--soa-success-light) !important;
	color: var(--soa-success) !important;
	border: 1px solid rgba(26, 138, 69, .2);
}

/* ---- Primary buttons enterprise ---- */
.button-primary.soa-btn-primary,
#soa-refresh-btn,
.soa-run-analysis-btn {
	background: linear-gradient(135deg, var(--soa-primary) 0%, var(--soa-primary-dark) 100%) !important;
	border-color: var(--soa-primary-dark) !important;
	color: #fff !important;
	border-radius: var(--soa-radius-sm) !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba(var(--soa-primary-rgb), .35) !important;
	transition: opacity var(--soa-transition), transform var(--soa-transition) !important;
}

.button-primary.soa-btn-primary:hover,
#soa-refresh-btn:hover,
.soa-run-analysis-btn:hover {
	opacity: .9;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(var(--soa-primary-rgb), .45) !important;
}

/* ---- Dashboard nav tabs upgrade ---- */
.soa-nav-tab-wrapper .nav-tab {
	border-bottom: 3px solid transparent !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	background: transparent !important;
	color: var(--soa-text-muted);
	font-weight: 500;
	font-size: 13px;
	padding: 10px 16px !important;
	transition: color var(--soa-transition), border-color var(--soa-transition);
}

.soa-nav-tab-wrapper .nav-tab:hover {
	color: var(--soa-primary) !important;
	border-bottom-color: var(--soa-primary-light) !important;
	background: var(--soa-primary-light) !important;
}

.soa-nav-tab-wrapper .nav-tab.nav-tab-active {
	color: var(--soa-primary) !important;
	border-bottom-color: var(--soa-primary) !important;
	background: transparent !important;
	font-weight: 700;
}

/* ---- Inventory table upgrade ---- */
.soa-inventory-table thead th {
	background: var(--soa-bg-alt) !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--soa-text-muted);
	border-bottom: 2px solid var(--soa-border) !important;
	padding: 10px 12px !important;
}

.soa-inventory-table tbody tr:hover {
	background: var(--soa-primary-light) !important;
}

.soa-inventory-table td {
	padding: 10px 12px !important;
	vertical-align: middle;
}

.soa-inventory-table .row-title {
	font-weight: 600;
	color: var(--soa-text);
}

/* ---- ABC badges ---- */
.soa-abc-a {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid rgba(146, 64, 14, .2);
}

.soa-abc-b {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid rgba(30, 64, 175, .2);
}

.soa-abc-c {
	background: #f3f4f6;
	color: #4b5563;
	border: 1px solid rgba(75, 85, 99, .2);
}

/* ---- Settings form upgrade ---- */
.soa-settings-form .soa-form-table th {
	color: var(--soa-text-secondary);
	font-weight: 600;
}

.soa-settings-form input[type="number"],
.soa-settings-form input[type="text"],
.soa-settings-form input[type="email"],
.soa-settings-form select,
.soa-settings-form textarea {
	border-color: var(--soa-border) !important;
	border-radius: var(--soa-radius-sm) !important;
	transition: border-color var(--soa-transition), box-shadow var(--soa-transition);
}

.soa-settings-form input:focus,
.soa-settings-form select:focus,
.soa-settings-form textarea:focus {
	border-color: var(--soa-primary) !important;
	box-shadow: 0 0 0 3px rgba(108, 99, 255, .12) !important;
	outline: none !important;
}

/* ---- Danger zone styling ---- */
.soa-danger-zone {
	border: 1px solid rgba(220, 38, 38, .2) !important;
	border-radius: var(--soa-radius) !important;
	padding: 16px 20px !important;
	background: #fff9f9 !important;
}

.soa-btn-danger {
	border-color: var(--soa-danger) !important;
	color: var(--soa-danger) !important;
}

.soa-btn-danger:hover {
	background: var(--soa-danger) !important;
	color: #fff !important;
}

/* ---- Empty state ---- */
.soa-empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--soa-text-muted);
}

.stockoracle-alert-grid .soa-empty-state,
.soa-panel .soa-empty-state {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 480px;
	margin: 12px auto;
	background: var(--soa-bg-alt);
	border: 1px dashed var(--soa-border);
	border-radius: var(--soa-radius);
}

.soa-empty-state .soa-empty-icon {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--soa-border);
	margin-bottom: 16px;
}

.soa-empty-state h3 {
	font-size: 16px;
	color: var(--soa-text-secondary);
	margin-bottom: 8px;
}

.soa-empty-state p {
	font-size: 13px;
	max-width: 360px;
	margin: 0 auto;
}

.soa-health-factor-note {
	grid-column: 1 / -1;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--soa-text-muted);
}

/* ---- Loading skeleton animation ---- */
.soa-skeleton {
	background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
	background-size: 200% 100%;
	animation: soa-shimmer 1.4s infinite;
	border-radius: var(--soa-radius-sm);
}

@keyframes soa-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}

/* ---- Tooltip ---- */
[data-soa-tooltip] {
	position: relative;
	cursor: help;
}

[data-soa-tooltip]::after {
	content: attr(data-soa-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #1f2937;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
	z-index: 9999;
}

[data-soa-tooltip]:hover::after {
	opacity: 1;
}

/* ---- Progress bars ---- */
.soa-progress-bar-wrap {
	background: var(--soa-border-light);
	border-radius: 20px;
	height: 6px;
	overflow: hidden;
}

.soa-progress-bar {
	height: 100%;
	border-radius: 20px;
	background: linear-gradient(90deg, var(--soa-primary) 0%, var(--soa-primary-dark) 100%);
	transition: width .5s ease;
}

/* ---- Inline flash messages ---- */
.soa-inline-notice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--soa-radius-sm);
	font-size: 12px;
	font-weight: 600;
	animation: soa-fade-in .2s ease;
}

@keyframes soa-fade-in {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: translateY(0); }
}

.soa-inline-notice-success {
	background: var(--soa-success-light);
	color: var(--soa-success);
}

.soa-inline-notice-error {
	background: var(--soa-danger-light);
	color: var(--soa-danger);
}

/* ---- Scrollbar polish ---- */
.soa-section-card,
.soa-alerts-table-wrap,
.stockoracle-dashboard {
	scrollbar-width: thin;
	scrollbar-color: var(--soa-border) transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--soa-border);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--soa-text-muted);
}