/* ==========================================================================
   OEE Analyzer (Stateless) — Frontend Styles
   ========================================================================== */

/* Custom properties */
:root {
	--oee-success:       #16a34a;
	--oee-success-light: #dcfce7;
	--oee-success-mid:   #bbf7d0;
	--oee-warning:       #ca8a04;
	--oee-warning-light: #fef9c3;
	--oee-warning-mid:   #fde68a;
	--oee-danger:        #dc2626;
	--oee-danger-light:  #fee2e2;
	--oee-danger-mid:    #fca5a5;
	--oee-info:          #2563eb;
	--oee-info-light:    #dbeafe;

	--oee-bg:            #f8fafc;
	--oee-surface:       #ffffff;
	--oee-border:        #e2e8f0;
	--oee-text:          #1e293b;
	--oee-muted:         #64748b;
	--oee-accent:        #3b82f6;
	--oee-accent-dark:   #1d4ed8;

	--oee-radius:        12px;
	--oee-radius-sm:     8px;
	--oee-shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
	--oee-shadow-md:     0 4px 6px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.08);
}

/* Wrapper */
.oee-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	color: var(--oee-text);
	line-height: 1.6;
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 1rem;
}

/* ==========================================================================
   Upload Card
   ========================================================================== */
.oee-upload-card {
	background: var(--oee-surface);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius);
	box-shadow: var(--oee-shadow);
	padding: 2.5rem 2rem;
	max-width: 680px;
	margin: 0 auto;
}

.oee-upload-header {
	text-align: center;
	margin-bottom: 2rem;
}

.oee-upload-icon {
	width: 48px;
	height: 48px;
	color: var(--oee-accent);
	margin-bottom: .75rem;
}

.oee-upload-header h2 {
	margin: 0 0 .4rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--oee-text);
}

.oee-upload-header p {
	margin: 0;
	color: var(--oee-muted);
	font-size: .95rem;
}

/* Drop zone */
.oee-dropzone {
	position: relative;
	border: 2px dashed var(--oee-border);
	border-radius: var(--oee-radius);
	background: var(--oee-bg);
	transition: border-color .2s, background .2s;
	cursor: pointer;
	margin-bottom: 1.25rem;
}

.oee-dropzone:hover,
.oee-dropzone--over {
	border-color: var(--oee-accent);
	background: #eff6ff;
}

.oee-file-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.oee-file-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.5rem 1.5rem;
	cursor: pointer;
	user-select: none;
}

.oee-file-icon { font-size: 2.5rem; margin-bottom: .5rem; }

.oee-file-text {
	font-size: 1rem;
	font-weight: 500;
	color: var(--oee-text);
	margin-bottom: .3rem;
	text-align: center;
}

.oee-file-hint {
	font-size: .8rem;
	color: var(--oee-muted);
}

/* Loading indicator */
.oee-loading {
	display: flex;
	align-items: center;
	gap: .75rem;
	justify-content: center;
	padding: .75rem;
	margin-bottom: 1rem;
	font-size: .9rem;
	color: var(--oee-muted);
}

.oee-spinner {
	width: 22px;
	height: 22px;
	border: 3px solid var(--oee-border);
	border-top-color: var(--oee-accent);
	border-radius: 50%;
	animation: oee-spin .8s linear infinite;
	flex-shrink: 0;
}

@keyframes oee-spin { to { transform: rotate(360deg); } }

/* Buttons */
.oee-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.5rem;
	border-radius: var(--oee-radius-sm);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	text-decoration: none;
	transition: background .15s, border-color .15s, opacity .15s;
}

.oee-btn-primary {
	background: var(--oee-accent);
	color: #fff;
	width: 100%;
	justify-content: center;
	font-size: 1rem;
}
.oee-btn-primary:hover { background: var(--oee-accent-dark); }
.oee-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.oee-btn-ghost {
	background: transparent;
	border-color: var(--oee-border);
	color: var(--oee-muted);
	font-size: .875rem;
}
.oee-btn-ghost:hover { border-color: var(--oee-accent); color: var(--oee-accent); }

.oee-template-row {
	margin-top: 1rem;
	text-align: center;
}

/* Columns hint */
.oee-columns-hint {
	margin-top: 1.5rem;
	border-top: 1px solid var(--oee-border);
	padding-top: 1rem;
}

.oee-columns-hint details summary {
	cursor: pointer;
	font-size: .875rem;
	color: var(--oee-muted);
	font-weight: 500;
}

.oee-columns-hint ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.oee-columns-hint li {
	background: var(--oee-bg);
	border: 1px solid var(--oee-border);
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .8rem;
	color: var(--oee-muted);
}

/* ==========================================================================
   Dashboard
   ========================================================================== */
.oee-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.oee-dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--oee-surface);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--oee-shadow);
}

.oee-dashboard-title {
	margin: 0 0 .25rem;
	font-size: 1.4rem;
	font-weight: 700;
}

.oee-dashboard-subtitle {
	margin: 0;
	font-size: .875rem;
	color: var(--oee-muted);
}

/* Badges */
.oee-badge {
	display: inline-block;
	padding: .4rem 1rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.oee-badge--success { background: var(--oee-success-light); color: var(--oee-success); }
.oee-badge--warning { background: var(--oee-warning-light); color: var(--oee-warning); }
.oee-badge--danger  { background: var(--oee-danger-light);  color: var(--oee-danger);  }

/* KPI grid */
.oee-kpi-grid {
	display: grid;
	gap: 1rem;
}

.oee-kpi-grid--primary {
	grid-template-columns: repeat(4, 1fr);
}

.oee-kpi-grid--secondary {
	grid-template-columns: repeat(4, 1fr);
}

/* KPI card */
.oee-kpi-card {
	background: var(--oee-surface);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius);
	padding: 1.4rem 1.25rem;
	box-shadow: var(--oee-shadow);
	border-top: 4px solid var(--oee-border);
	transition: box-shadow .2s;
}

.oee-kpi-card:hover { box-shadow: var(--oee-shadow-md); }

.oee-kpi-card--success { border-top-color: var(--oee-success); }
.oee-kpi-card--warning { border-top-color: var(--oee-warning); }
.oee-kpi-card--danger  { border-top-color: var(--oee-danger);  }

.oee-kpi-value {
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--oee-text);
	margin-bottom: .3rem;
}

.oee-kpi-card--success .oee-kpi-value { color: var(--oee-success); }
.oee-kpi-card--warning .oee-kpi-value { color: var(--oee-warning); }
.oee-kpi-card--danger  .oee-kpi-value { color: var(--oee-danger);  }

.oee-kpi-unit {
	font-size: 1.1rem;
	font-weight: 600;
	margin-left: 2px;
}

.oee-kpi-label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--oee-text);
}

.oee-kpi-subtitle {
	font-size: .78rem;
	color: var(--oee-muted);
	margin-top: .2rem;
}

/* ==========================================================================
   Progress bars
   ========================================================================== */
.oee-progress-section {
	background: var(--oee-surface);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--oee-shadow);
}

.oee-progress-section h3 {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.oee-progress-list { display: flex; flex-direction: column; gap: 1rem; }

.oee-progress-item {}

.oee-progress-meta {
	display: flex;
	justify-content: space-between;
	font-size: .9rem;
	margin-bottom: .35rem;
}

.oee-progress-track {
	background: var(--oee-border);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.oee-progress-fill {
	height: 100%;
	border-radius: 999px;
	transition: width .6s ease;
}

.oee-progress-fill--success { background: var(--oee-success); }
.oee-progress-fill--warning { background: var(--oee-warning); }
.oee-progress-fill--danger  { background: var(--oee-danger);  }

/* ==========================================================================
   Insights
   ========================================================================== */
.oee-insights-section {
	background: var(--oee-surface);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--oee-shadow);
}

.oee-insights-section h3 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.oee-insights-list { display: flex; flex-direction: column; gap: .6rem; }

.oee-insight {
	padding: .8rem 1rem;
	border-radius: var(--oee-radius-sm);
	font-size: .9rem;
	line-height: 1.5;
	border-left: 4px solid transparent;
}

.oee-insight--success { background: var(--oee-success-light); border-left-color: var(--oee-success); color: #14532d; }
.oee-insight--warning { background: var(--oee-warning-light); border-left-color: var(--oee-warning); color: #713f12; }
.oee-insight--danger  { background: var(--oee-danger-light);  border-left-color: var(--oee-danger);  color: #7f1d1d; }
.oee-insight--info    { background: var(--oee-info-light);    border-left-color: var(--oee-info);    color: #1e3a8a; }

/* ==========================================================================
   Table
   ========================================================================== */
.oee-table-section {
	background: var(--oee-surface);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius);
	padding: 1.5rem 1.75rem;
	box-shadow: var(--oee-shadow);
}

.oee-table-section h3 {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.oee-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.oee-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	min-width: 720px;
}

.oee-table th {
	background: var(--oee-bg);
	text-align: left;
	padding: .6rem .9rem;
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--oee-muted);
	border-bottom: 2px solid var(--oee-border);
	white-space: nowrap;
}

.oee-table td {
	padding: .6rem .9rem;
	border-bottom: 1px solid var(--oee-border);
	vertical-align: middle;
}

.oee-table tbody tr:last-child td { border-bottom: none; }
.oee-table tbody tr:hover { background: #f8fafc; }

/* OEE pills inside table */
.oee-pill {
	display: inline-block;
	padding: .2rem .65rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
}

.oee-pill--success { background: var(--oee-success-mid); color: #14532d; }
.oee-pill--warning { background: var(--oee-warning-mid); color: #713f12; }
.oee-pill--danger  { background: var(--oee-danger-mid);  color: #7f1d1d; }

/* ==========================================================================
   Alert / Error
   ========================================================================== */
.oee-alert {
	padding: 1rem 1.25rem;
	border-radius: var(--oee-radius-sm);
	margin-bottom: 1.25rem;
	font-size: .9rem;
	line-height: 1.5;
	border-left: 4px solid transparent;
}

.oee-alert--error {
	background: var(--oee-danger-light);
	border-left-color: var(--oee-danger);
	color: #7f1d1d;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.oee-kpi-grid--primary,
	.oee-kpi-grid--secondary {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.oee-upload-card { padding: 1.75rem 1.1rem; }

	.oee-kpi-grid--primary,
	.oee-kpi-grid--secondary {
		grid-template-columns: 1fr 1fr;
	}

	.oee-kpi-value { font-size: 1.7rem; }

	.oee-dashboard-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.oee-progress-section,
	.oee-insights-section,
	.oee-table-section {
		padding: 1.1rem 1rem;
	}
}

@media (max-width: 360px) {
	.oee-kpi-grid--primary,
	.oee-kpi-grid--secondary {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Quota Widget (v1.2) — clean "X used · Y remaining · Z total" layout
   ========================================================================== */

.oee-quota-widget {
	background: var(--oee-bg);
	border: 1px solid var(--oee-border);
	border-radius: var(--oee-radius-sm);
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.oee-quota-widget__title {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--oee-muted);
	margin-bottom: .75rem;
}

.oee-quota-rows {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.oee-quota-row {}

.oee-quota-row__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .35rem;
}

.oee-quota-row__label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--oee-text);
}

.oee-quota-row__numbers {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .82rem;
}

.oee-quota-sep {
	color: var(--oee-border);
	font-weight: 700;
}

.oee-quota-used {
	color: var(--oee-muted);
}

.oee-quota-total {
	color: var(--oee-muted);
}

.oee-quota-remaining {
	font-weight: 700;
}

.oee-quota-remaining--ok      { color: var(--oee-success); }
.oee-quota-remaining--warning { color: var(--oee-warning); }
.oee-quota-remaining--danger  { color: var(--oee-danger);  }

/* shared track + fill */
.oee-quota-track {
	background: var(--oee-border);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.oee-quota-fill {
	height: 100%;
	border-radius: 999px;
	transition: width .5s ease;
}

.oee-quota-fill--ok      { background: var(--oee-success); }
.oee-quota-fill--warning { background: var(--oee-warning); }
.oee-quota-fill--danger  { background: var(--oee-danger);  }

.oee-quota-blocked {
	margin-top: .75rem;
	background: var(--oee-danger-light);
	color: #7f1d1d;
	border-left: 3px solid var(--oee-danger);
	padding: .55rem .9rem;
	border-radius: 0 var(--oee-radius-sm) var(--oee-radius-sm) 0;
	font-size: .85rem;
	font-weight: 600;
}

/* Disabled dropzone */
.oee-dropzone--disabled {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   PDF Download button (v1.2)
   ========================================================================== */

.oee-header-right {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.oee-btn-pdf {
	background: #1e293b;
	color: #fff !important;
	border-color: #1e293b;
	font-size: .875rem;
	padding: .55rem 1.1rem;
	border-radius: var(--oee-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	cursor: pointer;
	border: none;
	font-weight: 600;
	transition: background .15s;
	text-decoration: none !important;
}

.oee-btn-pdf:hover  { background: #0f172a; }
.oee-btn-pdf:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 540px) {
	.oee-header-right { width: 100%; }
	.oee-btn-pdf      { width: 100%; justify-content: center; }
}