/* =========================================================
UNISBANK — MACHINE LEARNING PROJECT DASHBOARD
Global stylesheet | Responsive | No JavaScript changes
========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
color-scheme: light;


--primary: #2457e6;
--primary-dark: #173fb8;
--primary-soft: #edf3ff;
--primary-light: #dce7ff;

--navy: #14213d;
--navy-soft: #263957;

--background: #f4f7fc;
--surface: #ffffff;
--surface-soft: #f8faff;

--text: #182338;
--text-secondary: #53627a;
--muted: #8290a5;

--border: #e3e9f2;
--border-strong: #d3ddec;

--success: #16845b;
--success-bg: #eaf8f1;

--danger: #d93848;
--danger-bg: #fff0f1;

--warning: #b7791f;
--warning-bg: #fff7e6;

--info: #2365c8;
--info-bg: #edf5ff;

--radius-sm: 9px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 26px;

--shadow-sm: 0 2px 8px rgba(25, 45, 82, 0.045);
--shadow-md: 0 8px 28px rgba(25, 45, 82, 0.065);
--shadow-lg: 0 18px 48px rgba(25, 45, 82, 0.09);

--transition: 180ms ease;

}

/* ---------- 2. RESET & GLOBAL ---------- */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
min-width: 320px;
color: var(--text);
background:
radial-gradient(
ellipse at 5% 0%,
rgba(36, 87, 230, 0.055),
transparent 34%
),
var(--background);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
font-size: 14px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
font: inherit;
}

button {
-webkit-tap-highlight-color: transparent;
}

button,
select,
input {
max-width: 100%;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
outline: 3px solid rgba(36, 87, 230, 0.24);
outline-offset: 3px;
}

img,
svg,
canvas {
max-width: 100%;
}

p {
margin-top: 0;
}

h1,
h2,
h3,
h4 {
margin-top: 0;
color: var(--text);
line-height: 1.35;
letter-spacing: -0.025em;
}

h3 {
margin-bottom: 10px;
font-size: 16px;
font-weight: 750;
}

small,
.small {
font-size: 12px;
}

.muted {
color: var(--muted);
}

[hidden] {
display: none !important;
}

::selection {
color: #fff;
background: var(--primary);
}

/* ---------- 3. NAVIGATION ---------- */
.navbar {
position: sticky;
z-index: 100;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid rgba(220, 228, 240, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

.navbar-inner {
display: flex;
align-items: center;
width: min(1200px, calc(100% - 48px));
min-height: 76px;
margin: 0 auto;
gap: 16px;
}

.brand {
display: flex;
align-items: center;
min-width: 0;
gap: 13px;
}

.brand-mark {
display: grid;
flex: 0 0 46px;
width: 46px;
height: 46px;
place-items: center;
color: #fff;
background: linear-gradient(140deg, #3474ff, #1d43c4);
border-radius: 15px;
box-shadow: 0 6px 16px rgba(36, 87, 230, 0.25);
font-size: 15px;
font-weight: 850;
letter-spacing: -0.06em;
}

.brand-text {
display: flex;
min-width: 0;
flex-direction: column;
line-height: 1.35;
}

.brand-title {
color: var(--navy);
font-size: 16px;
font-weight: 850;
letter-spacing: 0.055em;
}

.brand-text small {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
letter-spacing: 0.015em;
}

/* ---------- 4. MAIN CONTAINER ---------- */
.container {
width: min(1200px, calc(100% - 48px));
min-width: 0;
margin: 30px auto 0;
padding-bottom: 28px;
}

.main-section {
min-width: 0;
margin-bottom: 24px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}

.main-section-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 104px;
padding: 23px 28px;
gap: 20px;
cursor: pointer;
background: linear-gradient(110deg, #fff, #fbfcff);
transition:
background var(--transition),
border-color var(--transition);
}

.main-section-header:hover {
background: #f8faff;
}

.main-section-heading {
display: flex;
align-items: center;
min-width: 0;
gap: 17px;
}

.section-number {
display: grid;
flex: 0 0 48px;
width: 48px;
height: 48px;
place-items: center;
color: var(--primary);
background: var(--primary-soft);
border: 1px solid #e0e9ff;
border-radius: 15px;
font-size: 14px;
font-weight: 850;
letter-spacing: 0.04em;
}

.main-section-heading h2 {
margin: 0 0 5px;
color: var(--navy);
font-size: clamp(18px, 2vw, 22px);
font-weight: 800;
}

.main-section-heading p {
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}

.section-chevron {
display: grid;
flex: 0 0 34px;
width: 34px;
height: 34px;
place-items: center;
color: var(--text-secondary);
background: #f0f4fa;
border-radius: 11px;
font-size: 22px;
transition:
transform var(--transition),
background var(--transition);
}

.main-section-header:hover .section-chevron {
color: var(--primary);
background: var(--primary-soft);
}

.main-section-body {
min-width: 0;
padding: 0 28px 28px;
border-top: 1px solid #eef2f8;
}

/* ---------- 5. ALERTS ---------- */
.alert {
margin: 0 0 18px;
padding: 15px 18px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
line-height: 1.6;
overflow-wrap: anywhere;
}

.alert-success {
color: #116747;
background: var(--success-bg);
border-color: #c9eddd;
}

.alert-error {
color: #a92636;
background: var(--danger-bg);
border-color: #ffd5da;
}


/* ---------- 6. UPLOAD & DATASET LAYOUT ---------- */
.upload-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50:50 */
    align-items: stretch;
    gap: 20px;
    padding-top: 24px;
}

.upload-card,
.dataset-library {
min-width: 0;
padding: 23px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}

.upload-card h3,
.dataset-library h3 {
margin-bottom: 5px;
font-size: 16px;
font-weight: 800;
}

.upload-card > p,
.dataset-library > p {
margin-bottom: 20px;
line-height: 1.6;
}

/* Drop zone */
#dropZone {
position: relative;
display: flex;
min-height: 175px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25px 18px;
gap: 7px;
text-align: center;
background:
linear-gradient(180deg, #f8faff, #f3f7ff);
border: 1.5px dashed #a9bee9;
border-radius: var(--radius-md);
transition:
background var(--transition),
border-color var(--transition),
transform var(--transition);
}

#dropZone::before {
display: grid;
width: 43px;
height: 43px;
margin-bottom: 5px;
place-items: center;
content: "↑";
color: var(--primary);
background: #e4edff;
border-radius: 13px;
font-size: 26px;
font-weight: 500;
}

#dropZone:hover,
#dropZone.drag-over,
#dropZone.dragging {
background: #edf3ff;
border-color: var(--primary);
}

#dropZone strong {
color: var(--navy);
font-size: 13px;
font-weight: 750;
}

#dropZone > span {
font-size: 11px;
}

#fileInput {
display: block;
width: 100%;
max-width: 100%;
margin-top: 12px;
color: var(--text-secondary);
font-size: 12px;
text-align: center;
}

#fileInput::file-selector-button {
margin-right: 8px;
padding: 8px 12px;
color: var(--primary);
background: #fff;
border: 1px solid #d8e3fa;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
transition: background var(--transition);
}

#fileInput::file-selector-button:hover {
background: var(--primary-soft);
}

#selectedFile {
min-height: 0;
margin-top: 10px;
font-size: 12px;
font-weight: 650;
overflow-wrap: anywhere;
}

#selectedFile:not(:empty) {
padding: 10px 12px;
background: var(--success-bg);
border-radius: var(--radius-sm);
}

.field-group {
display: flex;
flex-direction: column;
margin-top: 20px;
gap: 7px;
}

.field-group label {
color: var(--text);
font-size: 12px;
font-weight: 750;
}

.field-group select,
.field-group input,
.upload-card select,
.upload-card input[type="text"] {
width: 100%;
min-height: 45px;
padding: 10px 13px;
color: var(--text);
background: #fff;
border: 1px solid var(--border-strong);
border-radius: 10px;
transition:
border-color var(--transition),
box-shadow var(--transition);
}

.field-group select:hover {
border-color: #a6b9df;
}

.field-group select:focus,
.field-group input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(36, 87, 230, 0.1);
outline: none;
}

#targetLoading {
color: var(--primary);
font-size: 12px;
font-weight: 650;
}

#targetNote {
margin: 0;
font-size: 11px;
line-height: 1.6;
}

#previewInfo {
margin-top: 12px;
font-size: 12px;
line-height: 1.65;
overflow-wrap: anywhere;
}

/* ---------- 7. BUTTONS ---------- */
.btn,
#processButton,
.detail-toggle,
#previewTableToggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 10px 15px;
gap: 8px;
color: var(--text-secondary);
background: #fff;
border: 1px solid var(--border-strong);
border-radius: 10px;
cursor: pointer;
font-size: 12px;
font-weight: 750;
text-align: center;
text-decoration: none;
transition:
transform var(--transition),
background var(--transition),
border-color var(--transition),
box-shadow var(--transition),
color var(--transition);
}

.btn:hover,
#previewTableToggle:hover {
color: var(--primary);
background: var(--primary-soft);
border-color: #c5d5fa;
}

#processButton,
.btn-primary {
width: 100%;
min-height: 48px;
margin-top: 18px;
padding: 12px 18px;
color: #fff;
background: linear-gradient(110deg, #3168f5, #214bd2);
border: 0;
border-radius: 12px;
box-shadow: 0 5px 14px rgba(36, 87, 230, 0.18);
font-size: 13px;
font-weight: 800;
}

#processButton:hover,
.btn-primary:hover {
background: linear-gradient(110deg, #2457e6, #173fb8);
box-shadow: 0 7px 18px rgba(36, 87, 230, 0.25);
transform: translateY(-1px);
}

#processButton:active,
.btn:active {
transform: translateY(0);
}

#processButton:disabled,
button:disabled {
opacity: 0.58;
cursor: not-allowed;
box-shadow: none;
transform: none;
}

/* ---------- 8. DATASET LIBRARY ---------- */
#datasetCount {
display: inline-flex;
align-items: center;
min-height: 26px;
margin-bottom: 12px;
padding: 4px 10px;
color: var(--primary);
background: var(--primary-soft);
border-radius: 7px;
font-size: 11px;
font-weight: 750;
}

.dataset-list {
display: flex;
min-width: 0;
flex-direction: column;
gap: 9px;
}

.dataset-list:empty::before {
display: block;
padding: 25px 15px;
content: "Dataset yang tersedia akan ditampilkan di sini.";
color: var(--muted);
background: var(--surface-soft);
border: 1px dashed var(--border-strong);
border-radius: 11px;
font-size: 12px;
line-height: 1.7;
text-align: center;
}

/* Compatible with common dataset item structures */
.dataset-list > *,
.dataset-item,
.dataset-card {
min-width: 0;
overflow-wrap: anywhere;
}

.dataset-list > * {
padding: 13px 14px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 11px;
transition:
border-color var(--transition),
background var(--transition);
}

.dataset-list > *:hover {
background: #f0f5ff;
border-color: #c9d8fa;
}

.dataset-list button {
max-width: 100%;
cursor: pointer;
}

/* ---------- 9. PIPELINE PROGRESS ---------- */
.progress-card {
min-width: 0;
margin-top: 23px;
padding: 24px;
background:
radial-gradient(
ellipse at 100% 0%,
rgba(65, 113, 245, 0.09),
transparent 42%
),
#fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}

.progress-card > div:first-child {
align-items: center;
}

.progress-card h3 {
margin: 0;
font-size: 17px;
font-weight: 800;
}

#progressPercent {
flex: 0 0 auto;
color: var(--primary);
font-size: 23px;
font-weight: 850;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}

.progress-track {
width: 100%;
height: 11px;
margin-top: 18px;
overflow: hidden;
background: #e9eef7;
border-radius: 99px;
}

#progressFill {
width: 0;
height: 100%;
background: linear-gradient(90deg, #4d83ff, #2457e6);
border-radius: inherit;
transition: width 450ms ease;
}

.progress-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 12px;
gap: 12px;
}

#progressSubtitle {
min-width: 0;
font-size: 12px;
line-height: 1.6;
}

#stageCounter {
flex: 0 0 auto;
color: var(--text-secondary);
font-size: 11px;
font-weight: 750;
font-variant-numeric: tabular-nums;
}

#currentStage {
margin-top: 12px;
padding: 12px 14px;
color: var(--navy);
background: var(--primary-soft);
border: 1px solid #e0e9ff;
border-radius: 10px;
font-size: 12px;
font-weight: 750;
line-height: 1.6;
overflow-wrap: anywhere;
}

.detail-toggle {
display: flex;
justify-content: flex-start;
width: 100%;
min-height: 42px;
margin-top: 16px;
padding: 10px 12px;
color: var(--text-secondary);
background: #f8faff;
border-color: var(--border);
text-align: left;
}

.detail-toggle:hover {
color: var(--primary);
background: var(--primary-soft);
}

#toggleIcon {
display: grid;
width: 21px;
height: 21px;
flex: 0 0 21px;
place-items: center;
background: #e7edfa;
border-radius: 6px;
font-size: 15px;
line-height: 1;
}

#toggleStatus {
margin-left: auto;
color: var(--muted);
font-size: 11px;
}

#milestoneWrapper {
margin-top: 18px;
}

#timeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}

.milestone {
position: relative;
display: flex;
align-items: flex-start;
min-width: 0;
min-height: 69px;
padding: 12px 10px 12px 36px;
color: var(--text-secondary);
background: #fafbfd;
border: 1px solid var(--border);
border-radius: 11px;
font-size: 11px;
font-weight: 650;
line-height: 1.5;
overflow-wrap: anywhere;
transition:
background var(--transition),
border-color var(--transition),
color var(--transition);
}

.milestone::before {
position: absolute;
top: 13px;
left: 11px;
display: grid;
width: 17px;
height: 17px;
place-items: center;
content: "";
background: #e9edf4;
border: 1px solid #d7dfeb;
border-radius: 50%;
}

.milestone.active,
.milestone.current,
.milestone.in-progress {
color: #1948b7;
background: #edf3ff;
border-color: #9bb9ff;
box-shadow: 0 0 0 2px rgba(36, 87, 230, 0.045);
}

.milestone.active::before,
.milestone.current::before,
.milestone.in-progress::before {
background: var(--primary);
border-color: var(--primary);
box-shadow: inset 0 0 0 4px #dce7ff;
}

.milestone.completed,
.milestone.done {
color: #146847;
background: #effaf4;
border-color: #c9ead8;
}

.milestone.completed::before,
.milestone.done::before {
content: "✓";
color: #fff;
background: var(--success);
border-color: var(--success);
font-size: 11px;
font-weight: 900;
}

.milestone.error,
.milestone.failed {
color: #b42332;
background: var(--danger-bg);
border-color: #ffcbd1;
}

.milestone.error::before,
.milestone.failed::before {
content: "!";
color: #fff;
background: var(--danger);
border-color: var(--danger);
font-weight: 900;
}

/* ---------- 10. REPORT INTRO & ACCORDION ---------- */
.report-intro {
margin: 23px 0 18px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.7;
}

.report-accordion {
display: flex;
min-width: 0;
flex-direction: column;
gap: 12px;
}

.report-item {
min-width: 0;
overflow: hidden;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition:
border-color var(--transition),
box-shadow var(--transition);
}

.report-item:has(.report-content:not([hidden])) {
border-color: #cbd9f5;
box-shadow: 0 5px 20px rgba(25, 45, 82, 0.055);
}

.report-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 83px;
padding: 17px 20px;
gap: 16px;
color: var(--text);
background: #fff;
border: 0;
cursor: pointer;
text-align: left;
transition: background var(--transition);
}

.report-toggle:hover {
background: #f9fbff;
}

.report-toggle[aria-expanded="true"] {
background: #f8faff;
}

.report-heading {
display: flex;
align-items: center;
min-width: 0;
gap: 14px;
}

.report-index {
display: grid;
flex: 0 0 39px;
width: 39px;
height: 39px;
place-items: center;
color: var(--primary);
background: var(--primary-soft);
border: 1px solid #e0e9ff;
border-radius: 12px;
font-size: 12px;
font-weight: 850;
}

.report-heading > span:last-child {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}

.report-title {
color: var(--navy);
font-size: 14px;
font-weight: 800;
line-height: 1.45;
}

.report-subtitle {
color: var(--muted);
font-size: 11px;
font-weight: 450;
line-height: 1.5;
}

.report-action {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
}

.report-action-text {
color: var(--primary);
font-size: 11px;
font-weight: 750;
}

.report-action-icon {
display: grid;
width: 30px;
height: 30px;
place-items: center;
color: var(--primary);
background: var(--primary-soft);
border-radius: 9px;
font-size: 18px;
transition:
transform var(--transition),
background var(--transition);
}

.report-toggle[aria-expanded="true"] .report-action-icon {
color: #fff;
background: var(--primary);
transform: rotate(45deg);
}

.report-content {
min-width: 0;
padding: 23px;
border-top: 1px solid #edf1f8;
line-height: 1.75;
}

.report-content > h3 {
margin: 0 0 13px;
font-size: 15px;
}

.report-content > h3:not(:first-child) {
margin-top: 25px;
}

.report-content > p {
color: var(--text-secondary);
font-size: 13px;
}

.report-content ul {
padding-left: 21px;
color: var(--text-secondary);
font-size: 13px;
}

.report-content li {
margin-bottom: 9px;
}

.report-content strong {
color: var(--navy);
}

.report-content > div,
.report-content > table {
max-width: 100%;
}

/* ---------- 11. DATASET OVERVIEW ---------- */
#datasetOverview {
min-width: 0;
}

.overview-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 15px 0;
}

.overview-stat {
display: flex;
min-width: 0;
min-height: 105px;
flex-direction: column;
justify-content: center;
padding: 15px;
gap: 8px;
background: linear-gradient(150deg, #fff, #f7f9ff);
border: 1px solid var(--border);
border-radius: 13px;
}

.overview-stat > span {
color: var(--muted);
font-size: 11px;
font-weight: 650;
line-height: 1.5;
}

.overview-stat > strong {
color: var(--navy);
font-size: clamp(16px, 2vw, 23px);
font-weight: 850;
line-height: 1.35;
overflow-wrap: anywhere;
}

.inline-facts {
display: flex;
flex-wrap: wrap;
margin: 15px 0 23px;
gap: 8px;
}

.fact-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 7px 11px;
gap: 4px;
color: var(--text-secondary);
background: #f4f7fc;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 11px;
line-height: 1.55;
overflow-wrap: anywhere;
}

.fact-chip strong {
color: var(--navy);
}

.overview-section {
min-width: 0;
margin-top: 20px;
padding: 19px;
background: #fff;
border: 1px solid var(--border);
border-radius: 13px;
}

.overview-section h3 {
margin-bottom: 9px;
font-size: 14px;
}

.overview-section p {
margin-bottom: 0;
font-size: 12px;
line-height: 1.8;
overflow-wrap: anywhere;
}

#overviewDistributionBody {
min-width: 0;
margin-top: 12px;
}

#overviewDistributionBody > * {
max-width: 100%;
}

#overviewDistributionBody table {
width: 100%;
border-collapse: collapse;
}

/* ---------- 12. DATASET PREVIEW TABLE ---------- */
.preview-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.preview-toolbar > div {
min-width: 0;
}

.preview-toolbar h3 {
margin-bottom: 5px;
}

.preview-toolbar p {
margin: 0;
line-height: 1.6;
}

#previewTableToggle {
flex: 0 0 auto;
}

#datasetPreviewWrap {
width: 100%;
max-width: 100%;
max-height: 460px;
margin-top: 16px;
overflow: auto;
overscroll-behavior: contain;
background: #fff;
border: 1px solid var(--border);
border-radius: 11px;
scrollbar-width: thin;
scrollbar-color: #c8d3e4 #f4f7fc;
}

#datasetPreviewWrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}

#datasetPreviewWrap::-webkit-scrollbar-track {
background: #f4f7fc;
}

#datasetPreviewWrap::-webkit-scrollbar-thumb {
background: #c8d3e4;
border: 2px solid #f4f7fc;
border-radius: 99px;
}

.dataset-preview-table {
width: 100%;
min-width: 520px;
border-collapse: separate;
border-spacing: 0;
color: var(--text-secondary);
font-size: 12px;
text-align: left;
}

.dataset-preview-table th,
.dataset-preview-table td {
max-width: 300px;
padding: 11px 14px;
border-bottom: 1px solid #edf1f7;
overflow-wrap: anywhere;
}

.dataset-preview-table thead th {
position: sticky;
z-index: 2;
top: 0;
color: var(--navy);
background: #edf3ff;
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}

.dataset-preview-table tbody tr:nth-child(even) {
background: #fafbfd;
}

.dataset-preview-table tbody tr:hover {
background: #f0f5ff;
}

.dataset-preview-table tbody tr:last-child td {
border-bottom: 0;
}

/* ---------- 13. KEY INSIGHT ---------- */
.key-insight {
margin-top: 20px;
padding: 16px 18px;
color: #354969;
background: linear-gradient(120deg, #f0f5ff, #f8faff);
border: 1px solid #dce7fb;
border-left: 4px solid var(--primary);
border-radius: 10px;
font-size: 12px;
line-height: 1.85;
}

.key-insight strong {
color: #1948b7;
}

/* ---------- 14. ALGORITHM LIST ---------- */
.algorithm-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.algorithm-row {
display: flex;
align-items: flex-start;
min-width: 0;
padding: 15px;
gap: 12px;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 11px;
}

.algorithm-dot {
position: relative;
flex: 0 0 10px;
width: 10px;
height: 10px;
margin-top: 6px;
background: #4c7af0;
border-radius: 50%;
box-shadow: 0 0 0 4px #e7eeff;
}

.algorithm-row > div {
min-width: 0;
}

.algorithm-row strong {
display: block;
margin-bottom: 4px;
font-size: 13px;
font-weight: 800;
}

.algorithm-row p {
margin: 0;
color: var(--text-secondary);
font-size: 12px;
line-height: 1.75;
}

/* ---------- 15. EVALUATION METRICS ---------- */
.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}

.metric-item {
display: flex;
min-width: 0;
min-height: 105px;
flex-direction: column;
justify-content: center;
padding: 15px;
gap: 8px;
background: #f8faff;
border: 1px solid var(--border);
border-radius: 12px;
}

.metric-item strong {
color: var(--primary);
font-size: 13px;
font-weight: 850;
}

.metric-item span {
color: var(--text-secondary);
font-size: 11px;
line-height: 1.65;
}

/* Dynamic result output */
#classificationResultSummary {
margin-bottom: 15px;
padding: 13px 15px;
background: #f7f9fd;
border: 1px solid var(--border);
border-radius: 10px;
line-height: 1.8;
}

#classificationMetrics,
#classificationBestModel {
min-width: 0;
margin-top: 15px;
}

#classificationMetrics > *,
#classificationBestModel > * {
max-width: 100%;
}

#classificationMetrics table,
#classificationBestModel table {
width: 100%;
margin: 12px 0;
border-collapse: collapse;
font-size: 12px;
}

#classificationMetrics th,
#classificationMetrics td,
#classificationBestModel th,
#classificationBestModel td {
padding: 11px 13px;
border-bottom: 1px solid var(--border);
text-align: left;
overflow-wrap: anywhere;
}

#classificationMetrics th,
#classificationBestModel th {
color: var(--navy);
background: #edf3ff;
font-weight: 800;
}

#classificationMetrics tr:nth-child(even),
#classificationBestModel tr:nth-child(even) {
background: #fafbfd;
}

/* ---------- 16. LEGACY COMPATIBILITY ---------- */
#datasetCard[hidden] {
display: none !important;
}

#analysisSection {
min-width: 0;
}

#analysisSection .analysis-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

#analysisSection:empty,
#analysisSection .analysis-grid:empty {
display: none;
}

/* ---------- 17. FOOTER ---------- */
.report-footer {
padding: 22px 10px 26px;
color: var(--muted);
font-size: 11px;
line-height: 1.7;
text-align: center;
letter-spacing: 0.035em;
}

/* ---------- 18. RESPONSIVE: TABLET ---------- */
@media (max-width: 900px) {
.container,
.navbar-inner {
width: calc(100% - 32px);
}


.upload-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50:50 */
    gap: 14px;
}

.upload-card,
.dataset-library {
    padding: 18px;
}

.main-section-header {
    padding: 20px 22px;
}

.main-section-body {
    padding: 0 22px 22px;
}

.progress-card {
    padding: 20px;
}

#timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-grid,
.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-content {
    padding: 20px;
}


}

/* ---------- 19. RESPONSIVE: MOBILE ---------- */
@media (max-width: 600px) {
html {
scroll-padding-top: 72px;
}

body {
    font-size: 13px;
}

.navbar-inner {
    width: calc(100% - 28px);
    min-height: 66px;
    gap: 10px;
}

.brand {
    gap: 10px;
}

.brand-mark {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 13px;
}

.brand-title {
    font-size: 14px;
}

.brand-text small {
    font-size: 10px;
}

.container {
    width: calc(100% - 24px);
    margin-top: 16px;
    padding-bottom: 14px;
}

.main-section {
    margin-bottom: 16px;
    border-radius: 17px;
}

.main-section-header {
    min-height: 82px;
    padding: 16px;
    gap: 10px;
}

.main-section-heading {
    gap: 12px;
}

.section-number {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    font-size: 12px;
}

.main-section-heading h2 {
    margin-bottom: 4px;
    font-size: 16px;
}

.main-section-heading p {
    font-size: 11px;
    line-height: 1.55;
}

.section-chevron {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    font-size: 19px;
}

.main-section-body {
    padding: 0 14px 16px;
}

.upload-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    padding-top: 15px;
}

.upload-card,
.dataset-library {
    padding: 16px;
    border-radius: 14px;
}

.upload-card h3,
.dataset-library h3 {
    font-size: 15px;
}

.upload-card > p,
.dataset-library > p {
    margin-bottom: 15px;
}

#dropZone {
    min-height: 155px;
    padding: 18px 12px;
}

#dropZone strong {
    font-size: 12px;
}

#fileInput {
    font-size: 11px;
}

#fileInput::file-selector-button {
    margin-right: 5px;
    padding: 8px 9px;
    font-size: 11px;
}

#processButton {
    min-height: 46px;
    font-size: 12px;
}

.progress-card {
    margin-top: 15px;
    padding: 16px;
    border-radius: 14px;
}

.progress-card h3 {
    font-size: 14px;
}

#progressPercent {
    font-size: 20px;
}

.progress-track {
    height: 9px;
    margin-top: 15px;
}

.progress-topline {
    flex-wrap: wrap;
    gap: 5px 10px;
}

#progressSubtitle {
    flex: 1 1 160px;
    font-size: 11px;
}

#stageCounter {
    font-size: 10px;
}

#currentStage {
    padding: 10px 12px;
    font-size: 11px;
}

#timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.milestone {
    min-height: 64px;
    padding: 10px 8px 10px 30px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 9px;
}

.milestone::before {
    top: 11px;
    left: 8px;
    width: 14px;
    height: 14px;
}

.milestone.completed::before,
.milestone.done::before {
    font-size: 9px;
}

.report-intro {
    margin: 15px 0;
    font-size: 12px;
}

.report-accordion {
    gap: 9px;
}

.report-item {
    border-radius: 12px;
}

.report-toggle {
    min-height: 72px;
    padding: 12px;
    gap: 8px;
}

.report-heading {
    gap: 10px;
}

.report-index {
    flex-basis: 33px;
    width: 33px;
    height: 33px;
    border-radius: 10px;
    font-size: 11px;
}

.report-title {
    font-size: 12px;
    line-height: 1.5;
}

.report-subtitle {
    font-size: 10px;
    line-height: 1.5;
}

.report-action {
    gap: 0;
}

.report-action-text {
    display: none;
}

.report-action-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 16px;
}

.report-content {
    padding: 15px;
    font-size: 12px;
}

.report-content > h3 {
    font-size: 14px;
}

.report-content > p,
.report-content ul {
    font-size: 12px;
}

.overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.overview-stat {
    min-height: 87px;
    padding: 12px;
    gap: 6px;
    border-radius: 10px;
}

.overview-stat > span {
    font-size: 10px;
}

.overview-stat > strong {
    font-size: 18px;
}

.inline-facts {
    gap: 6px;
}

.fact-chip {
    padding: 6px 8px;
    font-size: 10px;
}

.overview-section {
    margin-top: 13px;
    padding: 13px;
    border-radius: 11px;
}

.overview-section h3 {
    font-size: 13px;
}

.preview-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

#previewTableToggle {
    width: 100%;
    min-height: 38px;
}

#datasetPreviewWrap {
    max-height: 360px;
    margin-top: 12px;
}

.dataset-preview-table {
    min-width: 450px;
    font-size: 11px;
}

.dataset-preview-table th,
.dataset-preview-table td {
    max-width: 220px;
    padding: 9px 11px;
}

.algorithm-row {
    padding: 12px;
    gap: 10px;
}

.algorithm-row strong {
    font-size: 12px;
}

.algorithm-row p {
    font-size: 11px;
}

.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.metric-item {
    min-height: 90px;
    padding: 12px;
    gap: 5px;
}

.metric-item strong {
    font-size: 12px;
}

.metric-item span {
    font-size: 10px;
}

#classificationMetrics,
#classificationBestModel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

#classificationMetrics table,
#classificationBestModel table {
    min-width: 430px;
}

#classificationMetrics th,
#classificationMetrics td,
#classificationBestModel th,
#classificationBestModel td {
    padding: 9px;
    font-size: 11px;
}

.key-insight {
    padding: 13px;
    font-size: 11px;
    line-height: 1.8;
}

.report-footer {
    padding: 15px 8px 20px;
    font-size: 10px;
}


}

/* ---------- 20. VERY SMALL SCREENS ---------- */
@media (max-width: 360px) {
.container {
width: calc(100% - 18px);
}


.main-section-header {
    padding: 13px 11px;
}

.main-section-body {
    padding-right: 10px;
    padding-left: 10px;
}

.main-section-heading {
    gap: 8px;
}

.section-number {
    flex-basis: 33px;
    width: 33px;
    height: 33px;
}

.main-section-heading h2 {
    font-size: 14px;
}

.main-section-heading p {
    font-size: 10px;
}

.progress-card {
    padding: 12px;
}

#timeline {
    gap: 6px;
}

.milestone {
    padding-right: 5px;
    padding-left: 26px;
    font-size: 9px;
}

.milestone::before {
    left: 6px;
}

.report-toggle {
    padding: 10px 8px;
}

.report-heading {
    gap: 7px;
}

.report-index {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.report-title {
    font-size: 11px;
}

.report-subtitle {
    font-size: 9px;
}

.report-content {
    padding: 11px;
}


}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== SECTION HEADER ICONS ===== */

.main-section-header {
position: relative;
}

.section-chevron {
position: relative;
flex: 0 0 40px;
width: 40px;
height: 40px;
color: #2457e6;
background: #edf3ff;
border: 1px solid #dce7ff;
border-radius: 13px;
font-size: 0;
transition:
transform 220ms ease,
background 220ms ease,
color 220ms ease,
border-color 220ms ease;
}

/* Ikon chevron yang lebih modern */
.section-chevron::before {
position: absolute;
top: 12px;
left: 14px;
width: 9px;
height: 9px;
content: "";
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 220ms ease;
}

/* Hover */
.main-section-header:hover .section-chevron {
color: #fff;
background: #2457e6;
border-color: #2457e6;
}

/* Section terbuka — panah mengarah ke atas */
.main-section:not(.is-collapsed) .section-chevron {
background: #2457e6;
color: #fff;
border-color: #2457e6;
}

.main-section:not(.is-collapsed) .section-chevron::before {
top: 16px;
transform: rotate(225deg);
}

/* Section tertutup — panah mengarah ke bawah */
.main-section.is-collapsed .section-chevron::before {
top: 12px;
transform: rotate(45deg);
}

/* Responsif */
@media (max-width: 600px) {
.section-chevron {
flex-basis: 34px;
width: 34px;
height: 34px;
border-radius: 11px;
}


.section-chevron::before {
    top: 10px;
    left: 11px;
    width: 8px;
    height: 8px;
}

.main-section:not(.is-collapsed) .section-chevron::before {
    top: 13px;
}


}


/* ===== UPLOAD FILE CSV ===== */

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 230px;
    padding: 28px 20px;
    text-align: center;
    background: #f8faff;
    border: 2px dashed #c8d6f5;
    border-radius: 18px;
    transition: background .2s ease, border-color .2s ease;
}

.upload-dropzone.dragover {
    background: #edf4ff;
    border-color: #3563e9;
}

.upload-file-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 76px;
    color: #3563e9;
    background: #eaf0ff;
    border: 1px solid #d6e2ff;
    border-radius: 15px;
}

.upload-file-icon svg {
    width: 42px;
    height: 42px;
}

.upload-file-icon span {
    position: absolute;
    bottom: 7px;
    right: -9px;
    padding: 3px 6px;
    color: #fff;
    background: #3563e9;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
}

.upload-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 5px;
    padding: 11px 20px;
    color: #fff;
    background: #2457e6;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.upload-file-button:hover {
    background: #1946c5;
    transform: translateY(-1px);
}

.upload-file-button svg {
    width: 17px;
    height: 17px;
}

/* Input tetap berfungsi, tetapi kontrol bawaan disembunyikan */
#dropZone #fileInput {
    display: none;
}

/* ===== TOMBOL LIHAT TABEL ===== */

.preview-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 15px;
    color: #2457d6;
    background: #fff;
    border: 1px solid #d5e1fb;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 5px rgb(30 64 175 / 5%);
    transition: background .2s ease, border-color .2s ease,
                box-shadow .2s ease;
}

.preview-toggle-btn:hover {
    background: #f0f5ff;
    border-color: #9bb8fa;
    box-shadow: 0 4px 12px rgb(30 64 175 / 10%);
}

.preview-toggle-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.preview-toggle-chevron {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.preview-toggle-btn[aria-expanded="true"] .preview-toggle-chevron {
    transform: rotate(180deg);
}

@media (max-width: 600px) {
    .preview-toolbar {
        align-items: flex-start;
        gap: 12px;
    }

    .preview-toggle-btn {
        gap: 6px;
        padding: 9px 11px;
        font-size: 12px;
    }

    .upload-dropzone {
        min-height: 210px;
        padding: 22px 14px;
    }
}

/* ===== TOMBOL LIHAT DATASET ===== */

#datasetList .btn,
#datasetList button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 15px;
    color: #2457d6;
    background: #f0f5ff;
    border: 1px solid #d6e3ff;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: all .2s ease;
}

#datasetList .btn:hover,
#datasetList button:hover {
    color: #fff;
    background: #2457e6;
    border-color: #2457e6;
    box-shadow: 0 4px 12px rgb(36 87 230 / 18%);
    transform: translateY(-1px);
}

#datasetList .btn:focus-visible,
#datasetList button:focus-visible {
    outline: 3px solid rgb(36 87 230 / 25%);
    outline-offset: 3px;
}


/* ===== BUTTON LIHAT DATA ===== */
.dataset-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 16px;

    color: #2457d6;
    background: linear-gradient(135deg, #f0f5ff, #e8efff);
    border: 1px solid #d5e2ff;
    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.dataset-view-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dataset-view-button:hover {
    color: #fff;
    background: linear-gradient(135deg, #3569ed, #2451ce);
    border-color: #2457d6;
    box-shadow: 0 5px 14px rgb(36 87 214 / 20%);
    transform: translateY(-1px);
}

.dataset-view-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.dataset-view-button:focus-visible {
    outline: 3px solid rgb(36 87 214 / 25%);
    outline-offset: 3px;
}


#milestoneWrapper[hidden] {
    display: none !important;
}





/* =========================================================
   SECTION 01 POLISH — compact milestones, file icon, controls
   ========================================================= */
.main-section.is-collapsed > .main-section-body {
    display: none !important;
}
.main-section-header {
    user-select: none;
}
.main-section-header:focus-visible,
#dropZone:focus-visible {
    outline: 3px solid rgba(36, 87, 230, .28);
    outline-offset: 3px;
}
#dropZone {
    min-height: 150px;
    padding: 18px 16px;
    gap: 6px;
    cursor: pointer;
}
#dropZone::before {
    content: none !important;
    display: none !important;
}
.upload-file-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 0 4px;
    place-items: center;
    color: var(--primary, #2457e6);
    background: #e8efff;
    border: 1px solid #d7e3ff;
    border-radius: 12px;
}
.upload-file-icon svg {
    display: block;
    width: 25px;
    height: 25px;
}
#fileInput {
    max-width: 320px;
    margin-top: 8px;
    cursor: pointer;
}
#milestoneWrapper {
    margin-top: 12px;
}
#timeline {
    gap: 7px;
}
#timeline .milestone {
    min-height: 48px;
    padding: 8px 8px 8px 29px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.35;
}
#timeline .milestone::before {
    top: 10px;
    left: 8px;
    width: 14px;
    height: 14px;
}
#detailToggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 11px;
    color: #29436f;
    background: #f4f7fc;
    border: 1px solid #e0e7f2;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
#detailToggle:hover {
    background: #eaf0ff;
    border-color: #cbd9ff;
}
#toggleIcon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    background: #fff;
    border: 1px solid #dbe4f3;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
}
.section-chevron {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    box-shadow: 0 2px 5px rgba(20, 45, 90, .06);
}
@media (max-width: 700px) {
    #timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #timeline .milestone { min-height: 44px; }
    #dropZone { min-height: 135px; }
}


/* =========================================================
   SECTION TOGGLE + SINGLE-ROW SCROLLABLE PIPELINE MILESTONES
   ========================================================= */
.section-toggle-control {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
    color: var(--text-secondary, #52627a);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.section-chevron {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}
.section-chevron::before {
    top: 10px;
    left: 11px;
    width: 8px;
    height: 8px;
}
.main-section:not(.is-collapsed) .section-chevron::before { top: 14px; }
.main-section.is-collapsed .section-chevron::before { top: 10px; }
#milestoneWrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    margin-top: 12px;
    scrollbar-width: thin;
    scrollbar-color: #b8c7df #edf1f7;
    overscroll-behavior-x: contain;
}
#milestoneWrapper::-webkit-scrollbar { height: 7px; }
#milestoneWrapper::-webkit-scrollbar-track { background: #edf1f7; border-radius: 10px; }
#milestoneWrapper::-webkit-scrollbar-thumb { background: #b8c7df; border-radius: 10px; }
#timeline {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    min-width: 100%;
}
#timeline .milestone {
    flex: 0 0 164px;
    width: 164px;
    min-height: 46px;
    padding: 9px 9px 9px 30px;
    align-items: center;
    font-size: 10px;
    line-height: 1.3;
    overflow-wrap: normal;
}
#timeline .milestone::before { top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
    .section-toggle-control { gap: 0; }
    .section-toggle-label { display: none; }
    #timeline .milestone { flex-basis: 148px; width: 148px; }
}


/* Empat card ringkasan dataset */

.overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.overview-stat {
    min-width: 0;
}

.overview-stat span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
}

.overview-stat strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 22px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================
   SECTION 02 — CLASSIFICATION RESULTS
   Confusion Matrix 75% : Distribusi Target 25%
   ========================================= */

/* Mendukung nama class di HTML lama maupun yang terbaru */
.classification-result-grid,
.classification-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100%;
    align-items: start;
    box-sizing: border-box;
}

.classification-result-card,
.classification-analysis-grid > .classification-result-card,
.classification-analysis-grid > .classification-result-half {
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 12px;
    box-sizing: border-box;
}

.classification-result-full {
    grid-column: 1 / -1;
}

/* Card Confusion Matrix mengambil 75%; Distribusi Target 25% */
.classification-result-grid > .classification-result-half:first-of-type,
.classification-analysis-grid > .classification-result-half:first-of-type {
    grid-column: auto;
}

.classification-result-grid > .classification-result-half:last-of-type,
.classification-analysis-grid > .classification-result-half:last-of-type {
    grid-column: auto;
}

.classification-result-card h3 {
    margin: 0 0 12px;
    font-size: 14px;
}

.classification-result-card .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.classification-comparison-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 12px;
}

.classification-comparison-table th,
.classification-comparison-table td {
    padding: 10px;
    border-bottom: 1px solid #e3e9f2;
    text-align: left;
    white-space: nowrap;
}

.classification-comparison-table th {
    background: #edf3ff;
    color: #14213d;
}

/* Confusion Matrix: model cards mengisi ruang yang tersedia */
.classification-confusion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.confusion-model-card {
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.confusion-model-card h4 {
    margin: 0 0 8px;
    font-size: 12px;
}

.confusion-model-card .model-status {
    margin-bottom: 8px;
}

.confusion-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.confusion-table th,
.confusion-table td,
#classificationConfusionMatrix table th,
#classificationConfusionMatrix table td {
    padding: 7px 5px;
    border: 1px solid #e3e9f2;
    text-align: center;
    overflow-wrap: anywhere;
}

.confusion-table td.matrix-diagonal,
.confusion-wrap td.diagonal,
#classificationConfusionMatrix td.matrix-diagonal {
    background: #dcfce7 !important;
    color: #166534 !important;
    font-weight: 700;
}

.confusion-table td.matrix-error,
.confusion-wrap td.off-diagonal,
#classificationConfusionMatrix td.matrix-error {
    background: #ffe4e6 !important;
    color: #9f1239 !important;
}

.classification-comparison-table tr.model-success,
.confusion-model-card.model-success {
    background: #ecfdf3;
}

.classification-comparison-table tr.model-failed,
.confusion-model-card.model-failed {
    background: #fff1f2;
}

.model-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.model-status.status-success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.model-status.status-failed {
    color: #9f1239;
    background: #ffe4e6;
    border: 1px solid #fecdd3;
}

.classification-comparison-table tr.is-best-model {
    outline: 2px solid #86efac;
    outline-offset: -2px;
}

/* Distribusi Target */
.classification-distribution-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.classification-distribution-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.classification-distribution-label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 8px;
    font-size: 11px;
}

.classification-distribution-label strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.classification-distribution-label span {
    color: #475569;
    font-size: 10px;
    text-align: right;
}

.classification-distribution-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 999px;
}

.classification-distribution-track span {
    display: block;
    height: 100%;
    background: #86efac;
    border-radius: inherit;
    transition: width .3s ease;
}

/* Responsif */
@media (max-width: 768px) {
    .classification-result-grid,
    .classification-analysis-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .classification-result-full,
    .classification-result-half,
    .classification-result-grid > .classification-result-half:first-of-type,
    .classification-result-grid > .classification-result-half:last-of-type,
    .classification-analysis-grid > .classification-result-half:first-of-type,
    .classification-analysis-grid > .classification-result-half:last-of-type {
        grid-column: 1 / -1;
    }

    .classification-result-card {
        padding: 13px;
    }

    .classification-confusion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .classification-confusion-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================
   CONFUSION MATRIX - PERBAIKAN LEBAR KOLOM
   ========================================= */

/* =========================================
   CONFUSION MATRIX - PERBAIKAN LEBAR KOLOM
   Kolom Aktual lebih kecil,
   kolom hasil prediksi sama lebar
   ========================================= */

/* Card confusion matrix */
.confusion-matrix-card,
.confusion-matrix-item,
#classificationConfusionMatrix {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Pastikan isi card tidak melebar keluar */
.confusion-matrix-card *,
.confusion-matrix-item *,
#classificationConfusionMatrix * {
    box-sizing: border-box;
}

/* Area scroll tabel */
.confusion-matrix-card .table-responsive,
.confusion-matrix-item .table-responsive,
.confusion-matrix-card .matrix-table-wrapper,
.confusion-matrix-item .matrix-table-wrapper,
#classificationConfusionMatrix .table-responsive,
#classificationConfusionMatrix .matrix-table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Tabel confusion matrix */
.confusion-matrix-card table,
.confusion-matrix-item table,
.confusion-matrix-card .confusion-matrix,
.confusion-matrix-item .confusion-matrix,
#classificationConfusionMatrix table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
}

/* Semua sel tabel */
.confusion-matrix-card table th,
.confusion-matrix-card table td,
.confusion-matrix-item table th,
.confusion-matrix-item table td,
#classificationConfusionMatrix table th,
#classificationConfusionMatrix table td {
    padding: 9px 6px;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    min-width: 0;
}

/* =========================================
   KOLOM PERTAMA: AKTUAL
   Lebih kecil, sekitar 22%
   ========================================= */

.confusion-matrix-card table th:first-child,
.confusion-matrix-card table td:first-child,
.confusion-matrix-item table th:first-child,
.confusion-matrix-item table td:first-child,
#classificationConfusionMatrix table th:first-child,
#classificationConfusionMatrix table td:first-child {
    width: 22%;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 11px;
    text-align: center;
}


/* =========================================================
   CONFUSION MATRIX — FULL CARD TANPA HORIZONTAL SCROLL
   Kolom Aktual lebih kecil, semua prediksi terlihat
   ========================================================= */

/* Card model */
.confusion-model-card,
.confusion-matrix-card,
.confusion-matrix-item,
#classificationConfusionMatrix {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Semua elemen di dalam card */
.confusion-model-card *,
.confusion-matrix-card *,
.confusion-matrix-item *,
#classificationConfusionMatrix * {
    box-sizing: border-box;
}

/* Wrapper tabel: tidak perlu scrollbar horizontal */
.confusion-model-card .table-responsive,
.confusion-matrix-card .table-responsive,
.confusion-matrix-item .table-responsive,
.confusion-matrix-card .matrix-table-wrapper,
.confusion-matrix-item .matrix-table-wrapper,
#classificationConfusionMatrix .table-responsive,
#classificationConfusionMatrix .matrix-table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Tabel confusion matrix */
.confusion-model-card .confusion-table,
.confusion-model-card table,
.confusion-matrix-card table,
.confusion-matrix-item table,
#classificationConfusionMatrix table {
    display: table;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
    font-size: 11px;
}

/* Semua kolom */
.confusion-model-card .confusion-table th,
.confusion-model-card .confusion-table td,
.confusion-model-card table th,
.confusion-model-card table td,
.confusion-matrix-card table th,
.confusion-matrix-card table td,
.confusion-matrix-item table th,
.confusion-matrix-item table td,
#classificationConfusionMatrix table th,
#classificationConfusionMatrix table td {
    min-width: 0 !important;
    padding: 8px 3px;
    text-align: center;
    vertical-align: middle;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    border: 1px solid #e3e9f2;
}

/* Kolom pertama: label Aktual */
.confusion-model-card .confusion-table th:first-child,
.confusion-model-card .confusion-table td:first-child,
.confusion-model-card table th:first-child,
.confusion-model-card table td:first-child,
.confusion-matrix-card table th:first-child,
.confusion-matrix-card table td:first-child,
.confusion-matrix-item table th:first-child,
.confusion-matrix-item table td:first-child,
#classificationConfusionMatrix table th:first-child,
#classificationConfusionMatrix table td:first-child {
    width: 28%;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10px;
}

/* Kolom prediksi: seluruh kolom mendapat lebar sama */
.confusion-model-card .confusion-table th:not(:first-child),
.confusion-model-card .confusion-table td:not(:first-child),
.confusion-model-card table th:not(:first-child),
.confusion-model-card table td:not(:first-child),
.confusion-matrix-card table th:not(:first-child),
.confusion-matrix-card table td:not(:first-child),
.confusion-matrix-item table th:not(:first-child),
.confusion-matrix-item table td:not(:first-child),
#classificationConfusionMatrix table th:not(:first-child),
#classificationConfusionMatrix table td:not(:first-child) {
    width: auto;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 11px;
}

/* Header tabel */
.confusion-model-card .confusion-table thead th,
.confusion-model-card table thead th,
.confusion-matrix-card table thead th,
.confusion-matrix-item table thead th,
#classificationConfusionMatrix table thead th {
    background: #edf3ff;
    color: #14213d;
    font-weight: 750;
}

/* Nilai prediksi benar */
.confusion-model-card .confusion-table td.matrix-diagonal,
.confusion-model-card table td.matrix-diagonal,
.confusion-model-card table td.diagonal,
.confusion-matrix-card table td.matrix-diagonal,
.confusion-matrix-item table td.matrix-diagonal,
#classificationConfusionMatrix table td.matrix-diagonal {
    background: #dcfce7 !important;
    color: #166534 !important;
}

/* Nilai prediksi salah */
.confusion-model-card .confusion-table td.matrix-error,
.confusion-model-card table td.matrix-error,
.confusion-model-card table td.off-diagonal,
.confusion-matrix-card table td.matrix-error,
.confusion-matrix-item table td.matrix-error,
#classificationConfusionMatrix table td.matrix-error {
    background: #ffe4e6 !important;
    color: #9f1239 !important;
}

/* Card Logistic Regression dan Decision Tree */
.classification-confusion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Layar kecil: tetap dua card bila ruang mencukupi */
@media (max-width: 480px) {
    .classification-confusion-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .confusion-model-card {
        padding: 10px;
    }
}


/* =========================================================
   INTEGRASI HASIL PIPELINE 13 TAHAP — RESPONSIVE POLISH
   ========================================================= */
.pipeline-detail-panel, .analysis-result-summary { min-width: 0; overflow-wrap: anywhere; }
.pipeline-detail-item pre, .analysis-result-summary pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.pipeline-detail-item table, .analysis-result-summary table { width: 100%; border-collapse: collapse; }
.pipeline-detail-item th, .pipeline-detail-item td, .analysis-result-summary th, .analysis-result-summary td { padding: 9px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
#classificationMetrics, #ensembleMetrics, #classificationComparisonSection { min-width: 0; }
#classificationTargetDistribution, #confusionContainer, #classificationReportContainer { overflow-x: auto; }
@media (max-width: 760px) {
  .activity-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .analysis-result-summary { padding: 12px !important; }
  .pipeline-detail-item { max-width: 100%; }
  .pipeline-detail-item pre { font-size: 12px; }
}
@media (max-width: 420px) {
  .activity-summary-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.ensemble-score-bars { display:grid; gap:12px; width:100%; }
.ensemble-score-row { min-width:0; }
.ensemble-score-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:5px; font-size:.92rem; }
.ensemble-score-label span { overflow-wrap:anywhere; }
.ensemble-score-track { height:9px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.ensemble-score-track span { display:block; height:100%; background:#14b8a6; border-radius:999px; }

/* =========================================================
   UNISBANK DASHBOARD LAYOUT REFRESH — 14 OCT 2026
   Sidebar upload/history + main progress/log + horizontal report slider
   ========================================================= */
:root {
  --primary: #0f8b8d;
  --primary-dark: #087477;
  --primary-soft: #e7f7f6;
  --primary-light: #c9eeeb;
  --background: #f4f7fb;
  --surface: #ffffff;
  --text: #182536;
  --text-secondary: #607086;
  --border: #e2e9f0;
  --shadow-sm: 0 3px 12px rgba(25, 47, 70, .045);
  --shadow-md: 0 10px 28px rgba(25, 47, 70, .07);
}
body { background: #f4f7fb; }
.navbar { background: rgba(255,255,255,.94); border-bottom: 1px solid #e4ebf2; box-shadow: 0 3px 16px rgba(20,40,60,.035); }
.navbar-inner { max-width: 1800px; }
.brand-mark { background: linear-gradient(145deg,#0f8b8d,#086b72); box-shadow: 0 5px 14px rgba(15,139,141,.2); }
main.container.dashboard-shell {
  width: min(1800px, 100%);
  max-width: none;
  margin: 22px auto 44px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.dashboard-upload-source, #uploadSection, #uploadSectionBody, .upload-layout { display: contents !important; }
#uploadSection > .main-section-header, #reportSection > .main-section-header { display: none !important; }
#successAlert, #errorAlert { grid-column: 1 / -1; margin: 0; }
.upload-card, .dataset-library, #progressCard, #activityLogSection, #reportSection {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 17px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.upload-card { grid-column: 1; grid-row: 1; padding: 18px; }
.dataset-library { grid-column: 1; grid-row: 2 / span 2; padding: 18px; }
#progressCard { grid-column: 2; grid-row: 1; padding: 18px 20px; margin: 0; }
#activityLogSection { grid-column: auto; grid-row: auto; margin: 18px 0 0 !important; }
#reportSection { grid-column: 2; grid-row: 3; min-width: 0; margin: 0; }
#reportSection > .main-section-body { display: block !important; padding: 20px; }
#reportSection .report-intro { margin: 0 0 10px; color: #66768b; font-size: 13px; }
.upload-card h3, .dataset-library h3, #progressCard h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.upload-card > p, .dataset-library > p { margin: 6px 0 14px; }
.dashboard-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dashboard-card-heading h3 { margin: 0; }
.card-window-controls { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.card-eyebrow { display: none; }
.card-control-btn { width: 27px; height: 27px; display: inline-grid; place-items: center; border: 1px solid #dfe7ed; border-radius: 8px; background: #fff; color: #607086; cursor: pointer; line-height: 1; font-size: 16px; }
.card-control-btn:hover { color: var(--primary-dark); border-color: #9ed8d5; background: var(--primary-soft); }
.dashboard-card.is-minimized > :not(.dashboard-card-heading):not(.dashboard-card-header-row):not(.card-window-controls):not(h3):not(.main-section-header),
#progressCard.is-minimized > :not(.dashboard-card-heading):not(.dashboard-card-header-row):not(.card-window-controls):not(h3):not(.main-section-header) { display: none !important; }
.dashboard-card.is-expanded { grid-column: 1 / -1 !important; grid-row: auto !important; z-index: 3; box-shadow: var(--shadow-md); }
#progressCard.is-expanded, #activityLogSection.is-expanded, #reportSection.is-expanded { grid-column: 1 / -1 !important; }
#dropZone { border: 1.5px dashed #b9dcd9; background: #f5fbfb; border-radius: 13px; padding: 22px 12px; }
#dropZone:hover, #dropZone.drag-over { border-color: var(--primary); background: #eaf8f7; }
#dropZone strong { color: #243b4b; }
#fileInput { max-width: 100%; }
#targetColumn, .field-group select { border-radius: 10px; min-height: 42px; }
.btn-primary, #processButton { background: var(--primary); border-color: var(--primary); border-radius: 10px; box-shadow: 0 4px 10px rgba(15,139,141,.12); }
.btn-primary:hover, #processButton:hover { background: var(--primary-dark); }
.dataset-list { display: grid; gap: 8px; max-height: min(680px, 70vh); overflow: auto; padding-right: 3px; }
.dataset-list > *, .dataset-item, .dataset-card { border-radius: 11px !important; }
#datasetCount { margin: 0 0 10px; color: #718096; }
#progressCard > div:first-child { align-items: center; margin-bottom: 12px; }
#progressPercent { color: var(--primary-dark); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.progress-track { height: 10px; border-radius: 999px; background: #eaf0f4; overflow: hidden; }
#progressFill { border-radius: inherit; background: linear-gradient(90deg,#0f8b8d,#44c6b7); }
.progress-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; }
#currentStage { margin-top: 9px; padding: 10px 12px; background: #f3f9f9; border: 1px solid #e0f0ef; border-radius: 10px; font-weight: 650; color: #24505a; }
#detailToggle { margin-top: 10px; border: 0; background: transparent; color: var(--primary-dark); padding: 5px 0; font-weight: 700; cursor: pointer; }
#milestoneWrapper { margin-top: 10px; }
#timeline { display: flex; gap: 7px; overflow-x: auto; padding: 5px 2px 9px; scrollbar-width: thin; }
#timeline .milestone { flex: 0 0 auto; border-radius: 999px; padding: 6px 10px; font-size: 11px; white-space: nowrap; }
#activityLogSection .activity-log-header { background: #f8fbfc; border: 1px solid #edf1f5; padding: 11px 12px; color: #1d2d3d; }
#activityLogSection .main-section-body { padding: 14px 0 0 !important; }
#activityLogSection.is-collapsed #activityLogBody { display: none !important; }
.activity-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.activity-summary-card { border-radius: 11px; background: #fbfcfd; padding: 11px; }
.activity-log-list, .api-log-list { max-height: 220px; overflow: auto; }
.report-accordion { display: block !important; min-width: 0; }
.report-tab-rail { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 5px 2px 13px; margin: 0 0 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #bfd5d8 transparent; }
.report-tab-rail::-webkit-scrollbar { height: 6px; }
.report-tab-rail::-webkit-scrollbar-thumb { background: #bfd5d8; border-radius: 999px; }
.report-tab { flex: 0 0 190px; display: flex; align-items: center; gap: 9px; min-height: 64px; text-align: left; border: 1px solid #e2e9ef; background: #fff; border-radius: 12px; padding: 10px 11px; color: #34475b; cursor: pointer; scroll-snap-align: start; transition: border-color .16s, background .16s, box-shadow .16s; }
.report-tab:hover { border-color: #9ed8d5; background: #f8fdfd; }
.report-tab.active { border-color: #7bcac4; background: #eaf8f7; box-shadow: inset 0 0 0 1px rgba(15,139,141,.08); color: #075e63; }
.report-tab-number { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 9px; background: #edf2f6; color: #5f7183; font-weight: 800; font-size: 11px; }
.report-tab.active .report-tab-number { background: #0f8b8d; color: white; }
.report-tab-copy { display: grid; gap: 2px; min-width: 0; }
.report-tab-copy strong { font-size: 12px; line-height: 1.35; }
.report-tab-copy small { color: #748398; font-size: 10px; line-height: 1.3; }
.report-tab-chevron { margin-left: auto; color: #8ba0b0; font-size: 20px; }
.report-tab.active .report-tab-chevron { color: #0f8b8d; }
.report-panels { min-width: 0; }
.report-tab-panel { border: 1px solid #e5ebf0; border-radius: 14px; padding: clamp(14px,2vw,24px); background: #fff; box-shadow: 0 3px 12px rgba(20,40,60,.025); }
.report-tab-panel[hidden] { display: none !important; }
.report-tab-panel > .overview-section:first-child, .report-tab-panel > section:first-child { margin-top: 0; }
.report-slider-hint { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px 10px; border: 1px solid #e5edf2; border-radius: 10px; background: #fbfcfd; }
.slider-hint-label { color: #62758a; font-size: 11px; font-weight: 700; white-space: nowrap; }
.slider-hint-track { height: 4px; background: #e4ecef; border-radius: 999px; flex: 1; overflow: hidden; }
.slider-hint-track > span { display: block; height: 100%; width: 14%; border-radius: inherit; background: #0f8b8d; transition: transform .2s,width .2s; }
.slider-hint-arrows { display: flex; gap: 5px; }
.slider-hint-arrows button { width: 27px; height: 27px; border-radius: 8px; border: 1px solid #dfe7ed; background: white; color: #466274; cursor: pointer; font-size: 19px; line-height: 1; }
.slider-hint-arrows button:hover { background: var(--primary-soft); border-color: #a9d9d6; }
.overview-grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
.overview-stat { border-radius: 12px; border: 1px solid #e7edf2; background: #fbfcfd; }
.inline-facts { display: flex; flex-wrap: wrap; gap: 7px; }
.fact-chip { border-radius: 999px; background: #f3f7f9; border: 1px solid #e6edf1; padding: 5px 9px; }
.dataset-subsection, .dataset-explanation, .key-insight { border-radius: 12px; }
#overviewTargetDistribution { display: grid; gap: 12px; }
#overviewTargetDistribution .distribution-row, #classificationTargetDistribution .distribution-row { display: grid; gap: 6px; margin: 10px 0; }
.target-distribution-bar, .distribution-track, .target-bar-track, .distribution-progress-track { width: 100%; height: 10px; background: #e8eef2; border-radius: 999px; overflow: hidden; }
.target-distribution-fill, .distribution-fill, .target-bar-fill, .distribution-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0f8b8d,#55c6b7); }
.report-footer { grid-column: 2; color: #8996a5; text-align: center; padding: 10px; }
@media (min-width: 1500px) { main.container.dashboard-shell { grid-template-columns: 300px minmax(0,1fr); gap: 20px; } }
@media (max-width: 1050px) {
  main.container.dashboard-shell { grid-template-columns: 270px minmax(0,1fr); padding: 0 14px; gap: 12px; }
  .report-tab { flex-basis: 170px; }
  #reportSection > .main-section-body { padding: 14px; }
  .activity-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  main.container.dashboard-shell { display: flex; flex-direction: column; padding: 0 12px; margin-top: 12px; }
  .upload-card, .dataset-library, #progressCard, #activityLogSection, #reportSection { width: 100%; }
  .upload-card, .dataset-library, #progressCard, #activityLogSection, #reportSection { order: initial; }
  .upload-card { order: 1; }
  .dataset-library { order: 2; }
  #progressCard { order: 3; }
  #activityLogSection { order: initial; }
  #reportSection { order: 5; }
  .dataset-list { max-height: 360px; }
  .report-tab { flex-basis: 165px; }
  .report-tab-panel { padding: 13px; }
  .report-slider-hint { gap: 7px; }
  .slider-hint-label { font-size: 10px; }
  .activity-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.report-window-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid #edf1f5; color:#23374a; font-size:13px; font-weight:800; }
.report-window-actions { display:flex; gap:5px; }
.report-window-actions button { width:28px; height:28px; border:1px solid #dfe7ed; border-radius:8px; background:#fff; color:#607086; cursor:pointer; font-size:17px; }
.report-window-actions button:hover { background:var(--primary-soft); border-color:#a9d9d6; color:var(--primary-dark); }
#reportSection.report-minimized > .main-section-body > :not(#reportWindowControls) { display:none !important; }

/* Log Aktivitas menyatu di dalam card Progress Pipeline, bukan card terpisah. */
#activityLogSection {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #e8eef2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding-top: 14px;
}
#activityLogSection.is-expanded { grid-column: auto !important; }
#activityLogSection .activity-log-header { width: 100%; }
#activityLogSection .activity-log-header:focus-visible { outline: 2px solid #0f8b8d; outline-offset: 2px; }
@media (max-width: 760px) {
  #activityLogSection { width: 100%; }
  .activity-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   FRONTEND POLISH 2 — balanced cards, milestone spacing, consistent headers
   ========================================================= */
@media (min-width: 761px) {
  /* Align the four primary panels in two balanced rows. */
  #uploadCard { grid-column: 1; grid-row: 1; }
  .upload-card { grid-column: 1; grid-row: 1; }
  .dataset-library { grid-column: 1; grid-row: 2; align-self: start; }
  #progressCard { grid-column: 2; grid-row: 1; align-self: start; }
  #reportSection { grid-column: 2; grid-row: 2; align-self: start; }
  .report-footer { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* The progress title and log title use the same visual language. */
#progressCard > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  margin: -2px 0 14px !important;
  background: #f8fbfc;
  border: 1px solid #e4edf0;
  border-radius: 11px;
}
#progressCard > div:first-child h3 { font-size: 13px; font-weight: 800; }
#progressCard > div:first-child #progressPercent { font-size: 20px; }
#activityLogSection {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid #e8eef2 !important;
}
#activityLogSection .activity-log-header {
  min-height: 48px;
  border-radius: 11px !important;
  background: #f8fbfc !important;
  border: 1px solid #e4edf0 !important;
  padding: 10px 12px !important;
}
#activityLogSection .activity-log-header strong { font-size: 13px; font-weight: 800; }
#activityLogSection .activity-log-header small { line-height: 1.45; }
#activityLogSection .activity-log-header .section-toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #dce8eb;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}

/* Ensure stage markers sit in their own gutter and never cover labels. */
#milestoneWrapper { padding: 5px 3px 12px; }
#timeline { gap: 9px; }
#timeline .milestone {
  box-sizing: border-box;
  flex: 0 0 174px;
  width: 174px;
  min-height: 48px;
  padding: 10px 10px 10px 38px !important;
  position: relative;
  display: flex;
  align-items: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  font-size: 11px;
}
#timeline .milestone::before {
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  box-sizing: border-box;
}
#timeline .milestone::after { pointer-events: none; }
.report-footer {
  grid-column: 1 / -1 !important;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 8px 10px 12px !important;
  font-size: 10px;
  opacity: .7;
}
@media (max-width: 760px) {
  #progressCard > div:first-child { margin-top: 0 !important; }
  #timeline .milestone { flex-basis: 164px; width: 164px; }
  .report-footer { order: 6; }
}


/* Hide target selector when unsupervised clustering is selected. */
#targetSelection[hidden] { display: none !important; }



/* ==========================================================
   KONTROL MINIMIZE / MAXIMIZE UNTUK SETIAP SECTION ARTIKEL
   UI-only: tidak mengubah struktur data atau logika analisis.
   ========================================================== */
.report-section-controllable {
    position: relative;
    min-width: 0;
}
.report-section-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}
.report-section-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    color: #49617f;
    background: #fff;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.report-section-tool > span[aria-hidden] {
    font-size: 16px;
    line-height: 1;
}
.report-section-tool:hover {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bcd3fb;
}
.report-section-tool:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .35);
    outline-offset: 2px;
}
.report-section-minimized > :not(.report-section-tools) {
    display: none !important;
}
.report-section-minimized {
    min-height: 0 !important;
    padding-bottom: 10px !important;
}
body.report-section-expanded-open {
    overflow: hidden;
}
.report-section-controllable.report-section-expanded {
    position: fixed !important;
    z-index: 100000 !important;
    inset: 3vh 3vw !important;
    width: auto !important;
    max-width: none !important;
    max-height: 94vh !important;
    margin: 0 !important;
    padding: clamp(14px, 2.5vw, 28px) !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #dbe5f2 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 90px rgba(15, 23, 42, .3) !important;
}
.report-section-expanded::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    content: "";
}
.report-section-expanded > .report-section-tools {
    position: sticky;
    z-index: 2;
    top: -1px;
    padding: 5px 0 10px;
    background: #fff;
    border-bottom: 1px solid #edf1f7;
}
@media (max-width: 600px) {
    .report-section-tool {
        min-height: 29px;
        padding: 5px 8px;
        font-size: 10px;
    }
    .report-section-expanded.report-section-controllable {
        inset: 1vh 2vw !important;
        max-height: 98vh !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .report-section-tool { transition: none; }
}


/* =====================================================
   FIX SECTION MINIMIZE
   Judul tetap terlihat saat isi section ditutup.
   ===================================================== */

/* Elemen dengan atribut hidden harus benar-benar tersembunyi */
[hidden] {
    display: none !important;
}

/* Header artikel tetap terlihat */
.report-item {
    overflow: hidden;
}

.report-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.report-heading,
.report-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Ikon minimize dan maximize */
.report-action {
    flex: 0 0 auto;
    margin-left: auto;
}

.report-action-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: none !important;
}

/* Header section tidak ikut disembunyikan */
.section-card > .section-head {
    display: flex;
    position: relative;
    min-width: 0;
}

/* Hanya isi section yang disembunyikan */
.section-card > .section-body[hidden],
.section-card.is-collapsed > .section-body {
    display: none !important;
}

/* Judul tetap terbaca */
.section-title-group,
.section-title-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Tombol minimize tetap terpisah dari judul */
.collapse-btn {
    flex: 0 0 auto;
}

/* Section overview bersarang */
.overview-section > .section-heading {
    min-width: 0;
}

/* Fokus keyboard */
.report-toggle:focus-visible,
.collapse-btn:focus-visible {
    outline: 3px solid rgba(36, 87, 230, 0.25);
    outline-offset: -3px;
}

/* Tampilan HP */
@media (max-width: 600px) {
    .report-toggle {
        gap: 10px;
    }

    .report-heading {
        flex: 1 1 auto;
        gap: 9px;
    }

    .report-action {
        margin-left: 4px;
    }

    .section-head {
        gap: 10px;
        padding: 14px;
    }
}

/* FIX: kontrol panel hanya menampilkan ikon */
.report-section-tool-label {
    display: none !important;
}

/* FIX: judul tetap terlihat saat panel diminimalkan */
.report-section-minimized > :not(.report-section-tools):not(:first-child) {
    display: none !important;
}

.report-section-minimized > :first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.report-section-minimized > .report-section-tools {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FIX FINAL: judul section tetap terlihat saat diminimalkan */
.report-section-controllable.report-section-minimized {
    position: relative !important;
    min-height: 58px !important;
    height: auto !important;
    overflow: hidden !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Sembunyikan isi section, tetapi pertahankan kontrol dan judul */
.report-section-controllable.report-section-minimized > .report-section-tools {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.report-section-controllable.report-section-minimized > :not(.report-section-tools) {
    display: none !important;
}

/* Judul biasanya berupa heading di dalam section atau pembungkus pertama */
.report-section-controllable.report-section-minimized > h1,
.report-section-controllable.report-section-minimized > h2,
.report-section-controllable.report-section-minimized > h3,
.report-section-controllable.report-section-minimized > h4,
.report-section-controllable.report-section-minimized > .section-title,
.report-section-controllable.report-section-minimized > .report-section-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ikon saja, tanpa label teks */
.report-section-tool-label {
    display: none !important;
}

/* Judul section dan tombol kontrol dalam satu baris */
.report-section-heading-with-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.report-section-heading-with-tools > .report-section-tools {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    position: static !important;
}

/* Saat diminimalkan, judul dan ikon tetap terlihat */
.report-section-controllable.report-section-minimized > .report-section-heading-with-tools {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
}

.report-section-tool-label {
    display: none !important;
}

/* FIX: judul dan ikon kontrol sejajar */
.report-section-heading-with-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.report-section-heading-with-tools > .report-section-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    position: static !important;
}

.report-section-tool-label {
    display: none !important;
}

.report-section-controllable.report-section-minimized > .report-section-heading-with-tools {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
}

.report-section-controllable.report-section-minimized > .report-section-heading-with-tools ~ * {
    display: none !important;
}

/* EDA: judul di kiri, tombol kontrol di kanan */
.report-section-heading-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.report-section-heading-row > h1,
.report-section-heading-row > h2,
.report-section-heading-row > h3,
.report-section-heading-row > h4,
.report-section-heading-row > h5,
.report-section-heading-row > h6 {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.report-section-heading-row > .report-section-tools {
    display: flex !important;
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    gap: 6px !important;
}

.report-section-controllable.report-section-minimized > .section-heading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
}

.report-section-controllable.report-section-minimized .section-heading > p {
    display: none !important;
}

.report-section-controllable.report-section-minimized .report-section-heading-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.report-section-controllable.report-section-minimized > :not(.section-heading) {
    display: none !important;
}

.report-section-tool-label {
    display: none !important;
}

/* OpenRouter LLM — Classification: Interpretasi Hasil */
#classificationInterpretation .llm-interpretation {
    display: grid;
    gap: 16px;
    margin-top: 14px;
}

#classificationInterpretation .llm-interpretation-item {
    padding: 16px 18px;
    border: 1px solid var(--border-color, #dce3eb);
    border-radius: 12px;
    background: var(--card-bg, rgba(127, 127, 127, 0.035));
}

#classificationInterpretation .llm-interpretation-item h4 {
    margin: 0 0 9px;
    font-size: 0.98rem;
    font-weight: 650;
}

#classificationInterpretation .llm-interpretation-item p,
#classificationInterpretation .llm-interpretation-item li {
    line-height: 1.75;
    overflow-wrap: anywhere;
}

#classificationInterpretation .llm-interpretation-item p {
    margin: 0;
    white-space: normal;
}

#classificationInterpretation .llm-interpretation-item ul {
    margin: 0;
    padding-left: 22px;
}

#classificationInterpretation .llm-interpretation-item li + li {
    margin-top: 7px;
}


/* ==========================================
   UNISBANK ML - PREMIUM TABLE SYSTEM
   ========================================== */

.table-responsive,
.ensemble-table-wrapper,
#datasetPreviewWrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid #e5eaf2;
    border-radius: 12px;
    background: #fff;
}

/* Semua tabel laporan */
.table-responsive table,
.ensemble-table-wrapper table,
#datasetPreviewWrap table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    background: #fff;
    font-size: 12px;
    line-height: 1.6;
}

/* Header tabel */
.table-responsive thead th,
.ensemble-table-wrapper thead th,
#datasetPreviewWrap thead th {
    padding: 13px 15px;
    color: #475569;
    background: #f4f7fb;
    border-bottom: 1px solid #dfe6ef;
    font-size: 11px;
    font-weight: 750;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

/* Isi tabel */
.table-responsive tbody td,
.ensemble-table-wrapper tbody td,
#datasetPreviewWrap tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

/* Zebra rows */
.table-responsive tbody tr:nth-child(even),
.ensemble-table-wrapper tbody tr:nth-child(even),
#datasetPreviewWrap tbody tr:nth-child(even) {
    background: #f9fbfe;
}

/* Hover */
.table-responsive tbody tr:hover,
.ensemble-table-wrapper tbody tr:hover,
#datasetPreviewWrap tbody tr:hover {
    background: #eff6ff;
}

/* Baris terakhir */
.table-responsive tbody tr:last-child td,
.ensemble-table-wrapper tbody tr:last-child td,
#datasetPreviewWrap tbody tr:last-child td {
    border-bottom: none;
}

/* Nama model / kolom pertama */
.classification-comparison-table th:first-child,
.classification-comparison-table td:first-child,
.ensemble-table th:first-child,
.ensemble-table td:first-child {
    min-width: 155px;
    color: #273449;
    font-weight: 650;
    text-align: left;
}

/* Kolom angka metrik */
.classification-comparison-table th:not(:first-child),
.classification-comparison-table td:not(:first-child),
.ensemble-table th:not(:first-child),
.ensemble-table td:not(:first-child) {
    min-width: 95px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Tabel metrik */
.classification-comparison-table,
.ensemble-table {
    min-width: 690px;
}

/* Tabel preview dataset */
.dataset-preview-table {
    min-width: 600px;
}

.dataset-preview-table th,
.dataset-preview-table td {
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Header preview tetap terlihat saat scroll vertikal */
#datasetPreviewWrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Sel kosong */
.classification-comparison-table .muted,
.ensemble-table .ensemble-empty,
#datasetPreviewWrap .muted {
    padding: 24px 16px;
    color: #8491a4;
    text-align: center;
}

/* Status model */
.classification-comparison-table td:last-child {
    white-space: nowrap;
}

/* Confusion matrix */
#classificationConfusionMatrix,
#confusionContainer {
    max-width: 100%;
    overflow-x: auto;
}

#classificationConfusionMatrix table,
#confusionContainer table {
    width: auto;
    min-width: 300px;
    margin: 12px auto;
    border-collapse: separate;
    border-spacing: 4px;
    font-size: 12px;
    text-align: center;
}

#classificationConfusionMatrix th,
#confusionContainer th {
    padding: 10px;
    color: #475569;
    background: #f1f5f9;
    font-weight: 700;
    text-align: center;
}

#classificationConfusionMatrix td,
#confusionContainer td {
    min-width: 48px;
    padding: 13px 10px;
    color: #1e293b;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Fokus aksesibilitas */
.table-responsive:focus-within,
.ensemble-table-wrapper:focus-within,
#datasetPreviewWrap:focus-within {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* Tampilan HP */
@media (max-width: 640px) {
    .table-responsive,
    .ensemble-table-wrapper,
    #datasetPreviewWrap {
        border-radius: 9px;
    }

    .table-responsive thead th,
    .ensemble-table-wrapper thead th,
    #datasetPreviewWrap thead th {
        padding: 10px 12px;
        font-size: 10px;
    }

    .table-responsive tbody td,
    .ensemble-table-wrapper tbody td,
    #datasetPreviewWrap tbody td {
        padding: 10px 12px;
        font-size: 11px;
    }

    .classification-comparison-table,
    .ensemble-table {
        min-width: 650px;
    }

    #classificationConfusionMatrix table,
    #confusionContainer table {
        font-size: 11px;
    }

    #classificationConfusionMatrix td,
    #confusionContainer td {
        min-width: 40px;
        padding: 10px 7px;
    }
}