/* PALET WARNA BARU - MODERN & BERSIH
  -----------------------------------------
  Palet ini menggunakan dasar warna abu-abu kebiruan (slate) yang netral 
  untuk memberikan tampilan yang profesional dan tidak membuat mata lelah. 
  Warna aksen biru dan hijau dibuat lebih lembut namun tetap tegas.
*/

:root {
	/* Skala Abu-abu (Netral) - Digunakan untuk Teks, Latar Belakang, Border */

	--slate-1000:#151f31;

	/* Skala Biru (Aksen Utama) */
	--blue-10000: #00329e;
	--blue-100000: #cbcbcb;
   
	/* Skala Pink (Aksen Tambahan) */
	--pink-400: #f472b6;
	--pink-500: #ec4899;
	--pink-600: #db2777;
	    /* Skala Abu-abu (Slate) */
    --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8;
    --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617;

    /* Skala Biru */
    --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6;
    --blue-600: #2563eb; --blue-700: #1d4ed8;

    /* Skala Hijau */
    --green-100: #c0c0c082; --green-200: #a7f3d0; --green-300: #6ee7b7; --green-400: #34d399; --green-500: #10b981;
    --green-600: #059669; --green-700: #047857;

    /* Skala Merah */
    --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626;

    /* Skala Kuning */
    --yellow-100: #fef9c3; --yellow-300: #fde047; --yellow-400: #facc15; --yellow-500: #eab308;
    
    /* Skala Ungu */
    --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea;
}

body.dark-theme {
	--grid-color: rgba(71, 85, 105, 0.3);

	/* Latar Belakang */
	--bg-primary: var(--slate-900);
	--bg-secondary: var(--slate-1000);
	--bg-primary-rgb: 15, 23, 42;
	--bg-secondary-rgb: 30, 41, 59;
	--background-image: url(/assets/img/background/bg-1.png);
	/* Teks */
	--text-primary: var(--slate-200);
	--text-secondary: var(--slate-400);
	--text-tria: var(--slate-500); /* Teks yang kurang penting */
	
	/* Border */

	--border-color: var(--slate-700);
	--border-color-accent: var(--blue-500);
	--border-color-subtle: var(--slate-800);
	--border-color-blue: var(--blue-10000);
	--border-color-green: var(--green-700);
	--border-color-red: var(--red-600);
	--border-color-yellow: var(--yellow-500);
	--border-color-purple: var(--purple-600);
	--border-color-pink: var(--pink-600);
	--grid: var(--accent-blue);
	
	/* Warna Aksen */
	--accent-blue: var(--blue-500);
	--accent-cyan: #22d3ee; /* Tetap mempertahankan cyan yang cerah */
	--accent-pink: var(--pink-500);
	--accent-green-lime: var(--green-400);
	--bg-green: var(--green-500);
	--accent-cyan-rgb: 34, 211, 238;
	--accent-blue-rgb: 59, 130, 246;

	--logo-fill: var(--slate-100);
	--logo-sadow: var(--blue-500);

	/* --- Variabel Lama Disesuaikan dengan Palet Baru --- */
	--glow-green: var(--green-500);
	--glow-orange: #f97316;
	--glow-red: var(--red-500);
	--glow-red-rgb: 239, 68, 68;
	--neon-cyan: var(--accent-cyan);
	--neon-green: var(--green-400);
	--neon-orange: #fb923c;
	--neon-purple: var(--purple-500);
	--neon-blue: #38bdf8;
	--neon-yellow: var(--yellow-400);
	--neon-pink: var(--pink-400);
	--mint-green: var(--green-400);
	--deep-space: var(--slate-950);
	--plasma-orange: #ff6600;
	--electric-lime: #a3e635;
	--infrared-red: var(--red-500);
	/* --- Akhir Variabel Lama --- */

	/* Scrollbar */
	--scrollbar-thumb: var(--slate-600);
	--scrollbar-track: var(--slate-800);
	
	/* Komponen Server (contoh) */
	--server-body: var(--slate-700);
	--server-vents: var(--slate-600);
	--server-faceplate: var(--slate-800);
	--switch-port-off: var(--slate-600);
	--switch-port-on: var(--green-500);
	--lcd-screen: var(--slate-950);
	--lcd-text: var(--accent-cyan);
	
	/* Palet Skala untuk Latar Belakang (Dark) */
	--bg-dark-01: var(--slate-900);
	--bg-dark-02: var(--slate-800);
	--bg-dark-03: var(--slate-700);
	--bg-dark-04: var(--slate-600);
	--bg-dark-05: var(--slate-500);
	--bg-dark-06: var(--slate-400);
	--bg-dark-07: var(--slate-300);
	--bg-dark-08: var(--slate-200);
	--bg-dark-09: var(--slate-100);
	--bg-dark-10: var(--slate-50);

	--bg-blue-dark-01: #0c1e3e;
	--bg-blue-dark-02: #112a57;
	--bg-blue-dark-03: #163670;
	--bg-blue-dark-04: #1c458f;
	--bg-blue-dark-05: #2563eb;
	--bg-blue-dark-06: #3b82f6;
	--bg-blue-dark-07: #60a5fa;
	--bg-blue-dark-08: #93c5fd;
	--bg-blue-dark-09: #bfdbfe;
	--bg-blue-dark-10: #dbeafe;

	--bg-green-dark-01: #022c1b;
	--bg-green-dark-02: #034229;
	--bg-green-dark-03: #045938;
	--bg-green-dark-04: #057f4f;
	--bg-green-dark-05: #059669;
	--bg-green-dark-06: #10b981;
	--bg-green-dark-07: #34d399;
	--bg-green-dark-08: #6ee7b7;
	--bg-green-dark-09: #a7f3d0;
	--bg-green-dark-10: #d1fae5;
}

body.light-theme {
	--grid-color: rgba(0, 0, 0, 0.08);

	/* Latar Belakang */
	--bg-primary: var(--slate-50); /* Sedikit off-white */
	--bg-secondary: #ffffff; /* Putih bersih untuk card */
	--bg-primary-rgb: 248, 250, 252;
	--bg-secondary-rgb: 255, 255, 255;
	--background-image: url(/assets/img/background/bg-1-dark.png);
	/* Teks */
	--text-primary: var(--slate-800);
	--text-secondary: var(--slate-500);
	--text-tria: var(--slate-400); /* Teks yang kurang penting */
	
	/* Border */
	--border-color: var(--slate-200);
	--border-color-accent: var(--purple-500);
	--border-color-subtle: var(--slate-900);
	--border-color-purple: var(--purple-600);
	--border-color-pink: var(--pink-600);
	--border-color-blue: var(--blue-100000);
	--border-color-red: var(--red-600);
	--grid: var(--accent-blue);

	/* Warna Aksen */
	--accent-blue: var(--blue-600);
	--accent-cyan: #0e7490;
	--accent-pink: var(--pink-600);
	--accent-green-lime: var(--green-600);
	--accent-cyan-rgb: 14, 116, 144;
	--accent-blue-rgb: 37, 99, 235;

	--logo-fill: var(--slate-800);
	--logo-sadow: var(--slate-200);

	/* --- Variabel Lama Disesuaikan dengan Palet Baru --- */
	--glow-green: var(--green-600);
	--glow-orange: #d97706;
	--glow-red: var(--red-600);
	--glow-red-rgb: 220, 38, 38;
	--neon-cyan: var(--accent-cyan);
	--neon-green: var(--green-500);
	--neon-purple: var(--purple-400);
	--neon-orange: #f59e0b;
	--sky-blue: #38bdf8;
	--electric-pink: var(--pink-500);
	--mint-green: var(--green-500);
	--sunshine-yellow: var(--yellow-400);
	--peach-orange: #fb923c;
	--cool-grey: var(--slate-400);
	--warm-grey: var(--slate-200);
	--violet-blue: var(--purple-600);
	--aqua-marine: #22d3ee;
	--laser-green: var(--green-400);
	--plasma-orange: #f97316;
	/* --- Akhir Variabel Lama --- */

	/* Scrollbar */
	--scrollbar-thumb: var(--slate-300);
	--scrollbar-track: var(--slate-100);

	/* Komponen Server (contoh) */
	--server-body: var(--slate-200);
	--server-vents: var(--slate-400);
	--server-faceplate: #ffffff;
	--switch-port-off: var(--slate-400);
	--switch-port-on: var(--green-600);
	--lcd-screen: var(--slate-200);
	--lcd-text: var(--text-primary);

	/* Palet Skala untuk Latar Belakang (Light) */
	--bg-dark-01: #ffffff;
	--bg-dark-02: var(--slate-50);
	--bg-dark-03: var(--slate-100);
	--bg-dark-04: var(--slate-200);
	--bg-dark-05: var(--slate-300);
	--bg-dark-06: var(--slate-400);
	--bg-dark-07: var(--slate-500);
	--bg-dark-08: var(--slate-600);
	--bg-dark-09: var(--slate-700);
	--bg-dark-10: var(--slate-800);

	--bg-blue-dark-01: var(--slate-300);
	--bg-blue-dark-02: #f6f9fd;
	--bg-blue-dark-03: var(--slate-200);
	--bg-blue-dark-04: var(--blue-400);
	--bg-blue-dark-05: var(--blue-500);
	--bg-blue-dark-06: var(--blue-600);
	--bg-blue-dark-07: var(--blue-700);
	--bg-blue-dark-08: #1e40af;
	--bg-blue-dark-09: #1e3a8a;
	--bg-blue-dark-10: #1c336c;

	--bg-green-dark-01: var(--green-100);
	--bg-green-dark-02: var(--green-200);
	--bg-green-dark-03: var(--green-300);
	--bg-green-dark-04: var(--green-400);
	--bg-green-dark-05: var(--green-500);
	--bg-green-dark-06: var(--green-600);
	--bg-green-dark-07: var(--green-700);
	--bg-green-dark-08: #065f46;
	--bg-green-dark-09: #064e3b;
	--bg-green-dark-10: #042f2e;
}


/* =============================== GLOBAL & CLASS UNTUK WARNA =============================== */
body {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 13px;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	transition: background-color 0.3s, color 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

.font-mono,
.status-text,
.search-control input[type="text"],
.pagination-controls,
.tree-container,
.card-item-value.font-mono {
	font-family: 'Roboto Mono', 'Fira Code', monospace;
}

/* Grid Background Pattern */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
	background-size: 23px 23px;
	z-index: -1;
}
/* Netral */
.bg-dark-01 { background-color: var(--bg-dark-01); }
.bg-dark-02 { background-color: var(--bg-dark-02); }
.bg-dark-03 { background-color: var(--bg-dark-03); }
.bg-dark-04 { background-color: var(--bg-dark-04); }
.bg-dark-05 { background-color: var(--bg-dark-05); }
.bg-dark-06 { background-color: var(--bg-dark-06); }
.bg-dark-07 { background-color: var(--bg-dark-07); }
.bg-dark-08 { background-color: var(--bg-dark-08); }
.bg-dark-09 { background-color: var(--bg-dark-09); }
.bg-dark-10 { background-color: var(--bg-dark-10); }
.bg-glow-red { background-color: var(--glow-red); }

/* Biru */
.bg-blue-dark-01 { background-color: var(--bg-blue-dark-01); }
.bg-blue-dark-02 { background-color: var(--bg-blue-dark-02); }
.bg-blue-dark-03 { background-color: var(--bg-blue-dark-03); }
.bg-blue-dark-04 { background-color: var(--bg-blue-dark-04); }
.bg-blue-dark-05 { background-color: var(--bg-blue-dark-05); }
.bg-blue-dark-06 { background-color: var(--bg-blue-dark-06); }
.bg-blue-dark-07 { background-color: var(--bg-blue-dark-07); }
.bg-blue-dark-08 { background-color: var(--bg-blue-dark-08); }
.bg-blue-dark-09 { background-color: var(--bg-blue-dark-09); }
.bg-blue-dark-10 { background-color: var(--bg-blue-dark-10); }

/* Hijau */
.bg-green-dark-01 { background-color: var(--bg-green-dark-01); }
.bg-green-dark-02 { background-color: var(--bg-green-dark-02); }
.bg-green-dark-03 { background-color: var(--bg-green-dark-03); }
.bg-green-dark-04 { background-color: var(--bg-green-dark-04); }
.bg-green-dark-05 { background-color: var(--bg-green-dark-05); }
.bg-green-dark-06 { background-color: var(--bg-green-dark-06); }
.bg-green-dark-07 { background-color: var(--bg-green-dark-07); }
.bg-green-dark-08 { background-color: var(--bg-green-dark-08); }
.bg-green-dark-09 { background-color: var(--bg-green-dark-09); }
.bg-green-dark-10 { background-color: var(--bg-green-dark-10); }


@property --rotate {
	syntax: "<angle>";
	initial-value: 132deg;
	inherits: false;
}
.GradientBorder {
	position: relative;
	background: var(--slate-950);
}
.GradientBorder::after {
	content: '';
	position: absolute;
	top: -2px; left: -2px; right: -2px; bottom: -2px;
	/* PERBAIKAN: Menggunakan variabel neon yang konsisten */
	background: linear-gradient(45deg, var(--neon-green), var(--neon-yellow), var(--neon-purple), var(--neon-blue));
	z-index: -1;
	border-radius: 13px;
}
@keyframes spin {
	0% { --rotate: 0deg; }
	100% { --rotate: 360deg; }
}
.GradientBorder::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	/* PERBAIKAN: Menggunakan variabel neon yang konsisten */
	background-image: linear-gradient(var(--rotate), var(--neon-green), var(--neon-yellow), var(--neon-purple), var(--neon-blue));
	opacity: .5s;
	animation: spin 2.5s linear infinite;
	z-index: -2;
	filter: blur(5px);
}
.panel {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 1rem;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	/* PERBAIKAN: Menggunakan variabel RGB untuk box-shadow */
	box-shadow: 0 4px 15px rgba(var(--accent-blue-rgb), 0.1);
}
.panel:hover {
	box-shadow: 0 10px 30px rgba(var(--accent-blue-rgb), 0.2);
	border-color: var(--accent-cyan);
}
.toastpanel {
	background: var(--bg-secondary);
	border: 3px solid var(--border-color);
	border-radius: 12px;
	padding: 1rem;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 10px 30px rgba(var(--accent-blue-rgb), 0.2);
}
.popover {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 4px 15px rgba(var(--accent-blue-rgb), 0.1);
}
.popover:hover {
	box-shadow: 0 10px 30px rgba(var(--accent-blue-rgb), 0.2);
	border-color: var(--accent-cyan);
}
/* Styling untuk Notifikasi Toast */
#notificationToast.show {
	transform: translateX(0);
}
body.dark-theme::before {
	content: '';
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
	background-size: 23px 23px;
	opacity: 0.4;
	z-index: -1;
}
body.light-theme::before {
	content: '';
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
	background-size: 23px 23px;
	opacity: 0.2;
	z-index: -1;
}
body.dark-theme .panel {
	background: linear-gradient(145deg, var(--bg-secondary), #0f1a2f);
}
.panel-title {
	color: var(--text-primary);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}
.navbar {
	border-bottom: 1px solid var(--border-color);
	padding: 0.25rem 0.5rem;
	transition: background-color 0.3s, border-color 0.3s;
}
body.dark-theme, .highcharts-tooltip-box {
	fill: #ffffff !important;
}
.highcharts-title, .highcharts-subtitle, .highcharts-tooltip-text, .highcharts-axis-labels, .highcharts-legend-item text {
	fill: var(--text-primary) !important;
}
.highcharts-axis-line, .highcharts-grid-line, .highcharts-tooltip-box {
	stroke: var(--border-color) !important;
}
.highcharts-no-data text {
	fill: var(--text-secondary) !important;
	font-size: 1.25rem !important;
}
.text-secondary { color: var(--text-secondary); }
.text-glow-red { color: var(--glow-red); text-shadow: 0 0 6px var(--glow-red); }
.text-glow-orange { color: var(--glow-orange); text-shadow: 0 0 6px var(--glow-orange); }
.text-glow-green { color: var(--glow-green); text-shadow: 0 0 6px var(--glow-green); }
.text-glow-cyan { color: var(--accent-cyan); text-shadow: 0 0 8px var(--accent-cyan); }
.text-glow-blue { color: var(--accent-blue); text-shadow: 0 0 8px var(--accent-blue); }
.text-glow-pink { color: var(--accent-pink); text-shadow: 0 0 8px var(--accent-pink); }
.text-glow-logo { color: var(--logo-fill); text-shadow: 0 0 8px var(--logo-sadow); }
.text-glow-neon-purple { color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple); }
.text-glow-neon-blue { color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); }
.text-glow-neon-green { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); }
.text-glow-neon-yellow { color: var(--neon-yellow); text-shadow: 0 0 10px var(--neon-yellow); }
.text-glow-neon-pink { color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink); }
.text-glow-neon-cyan { color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan); }
.text-glow-deep-space { color: var(--deep-space); text-shadow: 0 0 10px var(--deep-space); }
.text-glow-plasma-orange { color: var(--plasma-orange); text-shadow: 0 0 10px var(--plasma-orange); }
.text-glow-electric-lime { color: var(--electric-lime); text-shadow: 0 0 10px var(--electric-lime); }
.text-glow-infrared-red { color: var(--infrared-red); text-shadow: 0 0 10px var(--infrared-red); }
.text-glow-sky-blue { color: var(--sky-blue); text-shadow: 0 0 8px var(--sky-blue); }
.text-glow-electric-pink { color: var(--electric-pink); text-shadow: 0 0 8px var(--electric-pink); }
.text-glow-mint-green { color: var(--mint-green); text-shadow: 0 0 8px var(--mint-green); }
.text-glow-sunshine-yellow { color: var(--sunshine-yellow); text-shadow: 0 0 8px var(--sunshine-yellow); }
.text-glow-peach-orange { color: var(--peach-orange); text-shadow: 0 0 8px var(--peach-orange); }
.text-glow-cool-grey { color: var(--cool-grey); text-shadow: 0 0 6px var(--cool-grey); }
.text-glow-warm-grey { color: var(--warm-grey); text-shadow: 0 0 6px var(--warm-grey); }
.text-glow-violet-blue { color: var(--violet-blue); text-shadow: 0 0 8px var(--violet-blue); }
.text-glow-aqua-marine { color: var(--aqua-marine); text-shadow: 0 0 8px var(--aqua-marine); }
.text-glow-laser-green { color: var(--laser-green); text-shadow: 0 0 8px var(--laser-green); }
.btn-primary {
	background: linear-gradient(45deg, var(--accent-pink), var(--accent-blue));
	color: white;
	font-weight: bold;
	padding: 0.75rem 1.5rem;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.action-btn {
	background: linear-gradient(to right, #a855f7, #3b82f6);
}
.btn-primary:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.btn-neon {
	background: linear-gradient(45deg, var(--neon-purple), var(--neon-cyan));
	color: #fff;
	font-weight: bold;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-cyan);
	transition: all 0.3s ease;
}
.btn-neon:hover {
	transform: scale(1.08);
	box-shadow: 0 0 15px var(--neon-cyan), 0 0 30px var(--neon-cyan);
}
.btn-outline {
	background: transparent;
	color: var(--accent-blue);
	border: 2px solid var(--accent-blue);
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
}
.btn-outline:hover {
	background-color: var(--accent-blue);
	color: var(--bg-primary);
	box-shadow: 0 0 8px var(--accent-blue);
}
.btn-donate-fixed {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	background: linear-gradient(45deg, var(--electric-lime), var(--accent-cyan));
	color: var(--bg-primary);
	font-weight: bold;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: 0.875rem;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	z-index: 1000;
}
.btn-donate-fixed:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.info-table {
	width: 100%;
	border-collapse: collapse;
}
.info-table tr {
	border-bottom: 1px solid var(--border-color);
}
.info-table tr:last-child {
	border-bottom: none;
}
.info-table td {
	padding: 0.5rem 0;
	font-size: 0.875rem;
}
.info-table td:first-child {
	color: var(--text-secondary);
	padding-right: 1rem;
}
.stat-panel {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.stat-panel:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(var(--accent-blue-rgb), 0.2);
	border-color: var(--neon-purple);
}
.stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
}
.stat-value {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.toast {
	width: 320px;
	background: linear-gradient(135deg, var(--bg-secondary), #0f1a2f);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(100%);
	animation: slideUpFadeOut 5s ease-in-out forwards;
}
.toast-success { border-left: 4px solid var(--glow-green); }
.toast-error { border-left: 4px solid var(--glow-red); }

@keyframes slideUpFadeOut {
	0% { opacity: 0; transform: translateY(100%); }
	10% { opacity: 1; transform: translateY(0); }
	90% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(100%); }
}
.panel[draggable="true"] {
	cursor: grab;
	user-select: none;
}
.panel.dragging {
	opacity: 0.4;
	cursor: grabbing;
	border: 2px dashed var(--accent-blue);
	box-shadow: 0 0 15px var(--accent-blue);
	z-index: 100;
}
.panel.drag-over {
	border: 2px solid var(--neon-cyan);
	box-shadow: 0 0 20px var(--neon-cyan), inset 0 0 10px var(--neon-cyan);
	transform: scale(1.01);
	transition: all 0.2s ease-in-out;
}
.panel[draggable="true"]:hover {
	box-shadow: 0 0 15px rgba(var(--accent-blue-rgb), 0.3);
	border-color: var(--accent-cyan);
}
#dashboard-grid {
}
.table-controls-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 0.2rem 0rem;
}
.search-control {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--text-secondary);
}
.search-control input[type="text"] {
	background-color: transparent;
	border: none;
	color: var(--text-primary);
	font-size: 0.7rem;
	padding: 0.4rem 2rem 0.4rem 0.4rem;
	width: 0;
	transition: border-color 0.3s ease, width 0.3s ease;
	outline: none;
}
.search-control input[type="text"]:focus {
	width: 250px;
	border-radius: 5px;
	border: 1px solid var(--glow-orange);
	background: var(--bg-primary);
}
.search-control input[type="text"]::placeholder {
	color: var(--text-secondary);
	opacity: 0.6;
}
.search-control .icon {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: color 0.3s ease;
}
.search-control input[type="text"]:focus + .icon {
	color: var(--accent-cyan);
}
.pagination-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9rem;
}
.search-control .icon.clickable {
	pointer-events: auto;
	cursor: pointer;
}
.pagination-controls a, .pagination-controls span {
	color: var(--text-secondary);
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.pagination-controls a:hover {
	color: var(--accent-cyan);
	background-color: rgba(0, 242, 255, 0.1);
}
.pagination-controls span.active {
	color: var(--text-primary);
	font-weight: bold;
	background-color: rgba(var(--accent-blue-rgb), 0.2);
	border: 1px solid var(--accent-blue);
}
.pagination-controls span.ellipsis {
	padding: 0;
}
th[data-sort] {
	position: relative;
	padding-right: 20px;
}
th[data-sort]::after {
	content: '';
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8em;
	opacity: 0.4;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
th[data-sort]:not(.sorted-asc):not(.sorted-desc):hover::after {
	content: '▲▼';
	opacity: 1;
	color: var(--accent-blue);
}
th[data-sort].sorted-asc::after {
	content: '▲';
	opacity: 1;
	color: var(--glow-green);
}
th[data-sort].sorted-desc::after {
	content: '▼';
	opacity: 1;
	color: var(--glow-orange);
}
/* Menerapkan style pada scrollbar utama halaman (body) */

/* Atur ukuran scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 4px;
}

/* Track dibuat transparan */
::-webkit-scrollbar-track {
	background: transparent;
}

/* Thumb (gagang) dibuat TRANSPARAN secara default */
::-webkit-scrollbar-thumb {
	background-color: transparent;
	border-radius: 7px;
	transition: background-color 0.3s ease;
}

/* Thumb baru MUNCUL saat mouse hover di area body */
:hover::-webkit-scrollbar-thumb {
	background-color: var(--green-700);
}

/* Efek hover PADA THUMB itu sendiri (setelah muncul) */
::-webkit-scrollbar-thumb:hover {
	background: var(--accent-cyan);
	box-shadow: 0 0 5px var(--accent-cyan), 0 0 5px var(--accent-cyan);
}

/* Bagian sudut scrollbar */
::-webkit-scrollbar-corner {
	background: transparent;
}
.romon-container {
	font-size: 1.55rem;
	line-height: 1.75rem;
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	font-weight: bold;
}
.romon-text {
	color: var(--neon-cyan);
	margin: 0;
	padding: 0;
}
.waviy {
	position: relative;
	display: flex;
	margin-left: 1px;
	letter-spacing: 0.5px;
}
.waviy span {
	display: inline-block;
	animation: flicker-light 2s infinite alternate;
	text-shadow: 0 0 2px var(--neon-green), 0 0 2px var(--neon-green), 0 0 2px var(--neon-green), 0 0 2px var(--neon-orange), 0 0 2px var(--neon-orange);
	transition: color 0.1s ease-in-out;
}
.waviy span:nth-child(1) {
	animation-delay: 0.1s;
	animation-duration: 5s;
}
.waviy span:nth-child(2) {
	animation-delay: 0.2s;
	animation-duration: 1.6s;
}
.waviy span:nth-child(3) {
	animation-delay: 0.3s;
	animation-duration: 4s;
}
@keyframes flicker-light {
	0%, 18%, 22%, 25%, 53%, 57%, 100% {
		text-shadow: 0 0 2px var(--neon-green), 0 0 5px var(--neon-green), 0 0 8px var(--neon-green);
		color: var(--neon-green);
		opacity: 1;
	}
	20%, 24%, 55% {
		text-shadow: 0 0 1px var(--neon-orange), 0 0 3px var(--neon-orange);
		color: var(--neon-orange);
		opacity: 0.85;
	}
	21%, 23%, 54% {
		text-shadow: 0 0 0.5px var(--neon-green), 0 0 1px var(--neon-green);
		color: var(--neon-green);
		opacity: 0.6;
	}
}
.Outbound {
}
.Outbound span {
	display: inline-block;
	animation: flicker-lightOutbound 2s infinite alternate;
	text-shadow: 0 0 2px var(--mint-green), 0 0 2px var(--mint-green), 0 0 2px var(--mint-green), 0 0 2px var(--neon-orange), 0 0 2px var(--neon-orange);
	transition: color 0.1s ease-in-out;
}
.Outbound span:nth-child(1) {
	animation-delay: 0.1s;
	animation-duration: 1.8s;
}
@keyframes flicker-lightOutbound {
	0%, 18%, 22%, 25%, 53%, 57%, 100% {
		text-shadow: 0 0 2px var(--mint-green), 0 0 5px var(--mint-green), 0 0 8px var(--mint-green);
		color: var(--mint-green);
		opacity: 1;
	}
	20%, 24%, 55% {
		text-shadow: 0 0 1px var(--neon-orange), 0 0 3px var(--neon-orange);
		color: var(--neon-orange);
		opacity: 0.85;
	}
	21%, 23%, 54% {
		text-shadow: 0 0 0.5px var(--mint-green), 0 0 1px var(--mint-green);
		color: var(--mint-green);
		opacity: 0.6;
	}
}
.Inbound {
}
.Inbound span {
	display: inline-block;
	animation: flicker-lightinbound 2s infinite alternate;
	text-shadow: 0 0 2px var(--neon-orange), 0 0 2px var(--neon-orange), 0 0 2px var(--neon-orange), 0 0 2px var(--neon-orange), 0 0 2px var(--neon-orange);
	transition: color 0.1s ease-in-out;
}
.Inbound span:nth-child(1) {
	animation-delay: 0.1s;
	animation-duration: 5s;
}
@keyframes flicker-lightinbound {
	0%, 18%, 22%, 25%, 53%, 57%, 100% {
		text-shadow: 0 0 2px var(--neon-orange), 0 0 5px var(--neon-orange), 0 0 8px var(--neon-orange);
		color: var(--neon-orange);
		opacity: 1;
	}
	20%, 24%, 55% {
		text-shadow: 0 0 1px var(--mint-green), 0 0 3px var(--mint-green);
		color: var(--mint-green);
		opacity: 0.85;
	}
	21%, 23%, 54% {
		text-shadow: 0 0 0.5px var(--neon-orange), 0 0 1px var(--neon-orange);
		color: var(--neon-orange);
		opacity: 0.6;
	}
}
.form-select {
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}
.form-select option {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}
@-moz-document url-prefix() {
	.form-select {
		background-color: var(--bg-tertiary) !important;
		color: var(--text-primary) !important;
	}
	.form-select option {
		background-color: var(--bg-secondary) !important;
		color: var(--text-primary) !important;
	}
}
@supports (-ms-ime-align:auto) {
	.form-select {
		background-color: var(--bg-tertiary) !important;
		color: var(--text-primary) !important;
	}
	.form-select option {
		background-color: var(--bg-secondary) !important;
		color: var(--text-primary) !important;
	}
}
/* Styling untuk background tombol yang semi-transparan */
.bg-secondary-alpha {
	background-color: rgba(var(--bg-secondary-rgb), 0.5);
	/* Gunakan RGB untuk opacity */
}
/* Base style untuk tombol kontrol utama */
.control-btn {
	padding: 6px 12px;
	font-size: 0.875rem;
	/* 14px */
	font-weight: 600;
	border-radius: 0.5rem;
	/* 8px */
	color: var(--text-secondary);
	transition: all 0.2s ease-in-out;
}
.control-btn:hover {
	background-color: var(--border-color);
	color: var(--text-primary);
}
.control-btn.active {
	background-color: var(--accent-blue);
	color: white;
	box-shadow: 0 0 8px var(--accent-blue);
}
/* Style untuk tombol pilihan gaya garis */
.control-btn-style {
	padding: 4px 10px;
	font-size: 0.75rem;
	/* 12px */
	font-weight: 600;
	border-radius: 0.5rem;
	/* 8px */
	color: var(--text-secondary);
	background-color: transparent;
	transition: all 0.2s ease-in-out;
}
.control-btn-style.active {
	background-color: var(--accent-cyan);
	color: var(--bg-primary);
}
/* Style baru untuk tombol zoom */
.zoom-btn {
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5rem;
	/* 8px */
	color: var(--text-primary);
	background-color: var(--bg-secondary);
	transition: all 0.2s ease-in-out;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.zoom-btn:hover {
	background-color: var(--accent-blue);
	color: white;
	transform: scale(1.1);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Style untuk tombol ikon (Workspace & Zoom) */
.control-btn-icon {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5rem;
	/* 8px */
	color: var(--text-secondary);
	transition: all 0.2s ease-in-out;
}
.control-btn-icon:hover {
	background-color: var(--border-color);
	color: var(--text-primary);
}
/* 1. Atur dasar untuk semua sub-menu (ul di dalam li) */
li > ul {
	/* Sembunyikan konten yang meluap saat tinggi 0 */
	overflow: hidden;
	/* Awalnya, tinggi sub-menu adalah 0 (tersembunyi) */
	max-height: 0;
	/* INILAH KUNCINYA: Terapkan transisi pada properti max-height. Animasi akan berjalan selama 0.4 detik dengan efek 'ease-in-out'. */
	transition: max-height 0.4s ease-in-out;
}
/* 2. Atur style saat sub-menu dalam keadaan terbuka/expand */
/* Ketika link <a> memiliki kelas .down, targetkan <ul> yang mengikutinya */
a.parent.down + ul {
	/* Atur tinggi maksimum ke nilai yang cukup besar agar bisa menampung semua item di dalamnya. Anda bisa sesuaikan nilainya jika perlu. */
	max-height: 500px;
	/* Cukup untuk sekitar 10-15 item */
}
/* 3. (Opsional tapi direkomendasikan) Tetap pertahankan animasi panah */
.parent .icon-arrow {
	transition: transform 0.3s ease-in-out;
}
.parent.down .icon-arrow {
	transform: rotate(90deg);
}
/* CSS untuk loading spinner di dalam tombol */
.btn-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spins 1s ease-in-out infinite;
	margin-right: 8px;
	/* Jarak antara spinner dan teks */
}
@keyframes spins {
	to {
		transform: rotate(360deg);
	}
}

/* --- PERBAIKAN: Winbox Table Dibuat Konsisten dengan Tema --- */
.winbox-table {
	color: var(--text-primary);
	width: 100%;
	border-collapse: collapse;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.winbox-table thead {
	z-index: 1;
	box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.25);
}
.winbox-table thead th {
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	padding: 5px 8px;
	font-weight: 500;
	text-align: left;
	color: var(--text-primary);
}
.winbox-table thead th:last-child {
	border-right: none;
}
.winbox-table tbody td {
	padding: 4px 8px;
	border-right: 1px solid var(--border-color);
	white-space: nowrap;
}
.winbox-table tbody tr td:last-child {
	border-right: none;
}
.winbox-table tbody tr:last-child td {
	border-bottom: none;
}
.winbox-table .group-header td {
	background-color: var(--bg-green-dark-01);
	font-weight: bold;
	color: var(--text-primary);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	border-right: none;
}
.winbox-table tbody tr.selected td {
	background-color: var(--accent-blue);
	color: #FFFFFF;
}
.winbox-table tbody tr:not(.selected):not(.group-header):hover td {
	background-color: var(--bg-blue-dark-02);
}

/* --- Topology specific styles --- */
main {
	display: flex;
	height: calc(100vh - 80px);
}
#canvas-container {
	flex-grow: 1;
	position: relative;
	height: 100vh;
}
canvas {
	display: block;
	cursor: grab;
}
canvas.grabbing {
	cursor: grabbing;
}
#map-picker-container {
	height: 100%;
}
#controls {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
#detailPanel {
	transition: transform 0.3s ease-in-out;
	transform: translateX(100%);
}
#detailPanel.open {
	transform: translateX(0);
}
/* --- STYLING BARU UNTUK NEON TREE --- */
#tooltip {
	/* ... properti lain ... */
}
.router-view-tooltip {
	position: absolute;
	padding: 6px 10px;
	font-size: 12px;
	color: white;
	background-color: var(--slate-800);
	border: 1px solid var(--slate-600);
	border-radius: 6px;
	pointer-events: none;
	z-index: 100;
	white-space: nowrap;
}
.side-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 12px;
	position: relative;
}
.side-menu > ul { margin-left: 0; }
.side-menu li {
	padding-left: 15px;
	position: relative;
}
.side-menu li::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 0;
	height: 100%;
	border-left: 1px dashed rgba(var(--accent-cyan-rgb), 0.5);
}
.side-menu li::after {
	content: '';
	position: absolute;
	top: 1.1rem;
	left: 0px;
	width: 12px;
	height: 0;
	border-top: 1px dashed rgba(var(--accent-cyan-rgb), 0.5);
}
.side-menu li:last-child::before { height: 1.1rem; }
.side-menu > ul > li { padding-left: 0; }
.side-menu > ul > li::before, .side-menu > ul > li::after { display: none; }

.side-menu a {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	margin: 0.125rem 0;
	border-radius: 6px;
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}
.side-menu a:hover {
	background-color: var(--border-color);
	color: var(--text-primary);
}
.side-menu a.side-active {
	background-color: rgba(var(--accent-blue-rgb), 0.15);
	color: var(--text-primary);
	font-weight: 600;
}
.side-menu a.side-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 60%;
	background-color: rgb(var(--accent-cyan-rgb));
	border-radius: 0 4px 4px 0;
	box-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.8);
}
.side-menu a svg {
	width: 16px;
	height: 16px;
	margin-right: 0.75rem;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.side-menu a.parent.down .icon-arrow {
	transform: rotate(90deg);
}

#zoomControls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	background-color: rgba(17, 24, 39, 0.7);
	padding: 0.5rem;
	border-radius: 0.5rem;
	width: fit-content;
}
#zoomPercentage {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 0.875rem;
	padding: 0.25rem 0;
}
.action-button {
	width: 100%;
	padding: 0.5rem;
	border-radius: 0.375rem;
	background-color: var(--slate-700);
	color: var(--slate-300);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s;
}
.action-button:hover:not(:disabled) {
	background-color: var(--slate-600);
}
.action-button:disabled {
	background-color: var(--slate-800);
	color: var(--slate-500);
	cursor: not-allowed;
}

/* --- CONTEXT MENU: Versi Konsisten dengan Design System Anda --- */
.context-menu {
	padding: 6px;
	border-radius: 8px;
	width: auto;
	background-color: rgba(var(--bg-secondary-rgb), 0.75);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--border-color);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.menu-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 4px 0;
}
.context-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 4px;
	color: var(--text-primary);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
	position: relative;
}
.context-menu:hover{
	box-shadow: 0 10px 30px rgba(var(--accent-blue-rgb), 0.2);
	border-color: var(--accent-cyan);
}
.context-menu-item:hover {
	color: var(--text-primary);
	background-color: rgba(var(--accent-blue-rgb), 0.2);
}
.menu-icon {
	width: 16px; height: 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu-icon svg { width: 100%; height: 100%; }
.menu-label { flex-grow: 1; }
.menu-shortcut { color: var(--text-tria); font-size: 0.9em; }
.menu-separator {
	height: 1px;
	background-color: var(--border-color);
	margin: 6px 0;
}
.menu-separator-actions {
	height: 1px;
	background-color: var(--border-color);
	margin: 4px 12px;
}
.has-submenu .submenu-arrow {
	margin-left: auto;
	width: 16px;
	height: 16px;
}
.submenu-container {
	position: absolute;
	top: -6px;
	left: 100%;
	display: none;
	padding: 6px;
	border-radius: 8px;
	width: 240px;
	background-color: rgba(var(--bg-secondary-rgb));
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	z-index: 10;
}
.has-submenu:hover > .submenu-container {
	display: block;
}
.danger-item { color: var(--glow-red); }
.danger-item:hover {
	background-color: rgba(var(--glow-red-rgb), 0.2);
	color: var(--glow-red);
}
.border-t.my-1 {
	border-color: var(--border-color);
}
#deleteBtn,#deleteWorkspaceBtn, a.text-red-600 {
	color: var(--glow-red);
	font-weight: 600;
}
#deleteBtn:hover,#deleteWorkspaceBtn:hover, a.text-red-600:hover {
	color: var(--text-primary);
	background-color: rgba(var(--glow-red-rgb, 255, 59, 59), 0.25);
	text-shadow: 0 0 5px var(--glow-red), 0 0 10px var(--neon-pink);
}

/* Sisa CSS tidak berubah... */

/* Latar belakang semi-transparan saat modal aktif */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bg-primary-rgb), 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040; /* Di bawah modal, di atas segalanya */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.show {
    opacity: 1;
}

/* Kontainer utama modal yang muncul di tengah */
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 1050;
    width: 90%;
    max-width: 550px; /* Lebar maksimum default */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-container.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Bagian Header Modal */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.modal-close-btn:hover {
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* Bagian Isi Modal */
.modal-body {
    padding: 1.5rem;
    overflow-y: auto; /* Scroll jika konten terlalu panjang */
    flex-grow: 1;
}

/* Bagian Footer Modal (untuk tombol aksi) */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

/* Penyesuaian untuk Confirmation Modal */
#confirmationModal .modal-container {
    max-width: 400px; /* Dibuat lebih kecil */
}

/* ============================================= */
/* == FORM CONTROLS (Checkbox, Toggle, etc.) == */
/* ============================================= */

/* Toggle Switch (Saklar) */
.form-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.form-toggle-input {
    display: none; /* Sembunyikan checkbox asli */
}
.form-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--slate-600);
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}
.form-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.form-toggle-input:checked + .form-toggle-slider {
    background-color: var(--accent-blue);
}
.form-toggle-input:checked + .form-toggle-slider::before {
    transform: translateX(20px);
}
.form-toggle-label {
    margin-left: 0.75rem;
    color: var(--text-secondary);
}

/* Custom Checkbox */
.form-checkbox-group {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.form-checkbox-input {
    display: none;
}
.form-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.form-checkbox-custom svg {
    width: 14px;
    height: 14px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}
.form-checkbox-input:checked + .form-checkbox-custom {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}
.form-checkbox-input:checked + .form-checkbox-custom svg {
    opacity: 1;
    transform: scale(1);
}
.form-checkbox-label {
    margin-left: 0.5rem;
    color: var(--text-primary);
}


/* ============================================= */
/* == ALERTS & NOTIFICATIONS == */
/* ============================================= */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    border-left-width: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.alert-content {
    flex-grow: 1;
}
.alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.alert-description {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Varian Warna Alert */
.alert-success {
    background-color: rgba(var(--green-rgb, 16, 185, 129), 0.1);
    border-color: var(--green-500);
    color: var(--green-300);
}
.alert-danger {
    background-color: rgba(var(--red-rgb, 239, 68, 68), 0.1);
    border-color: var(--red-500);
    color: var(--red-400);
}
.alert-warning {
    background-color: rgba(var(--yellow-rgb, 245, 158, 11), 0.1);
    border-color: var(--yellow-500);
    color: var(--yellow-300);
}
.alert-info {
    background-color: rgba(var(--blue-rgb, 59, 130, 246), 0.1);
    border-color: var(--blue-500);
    color: var(--blue-400);
}


/* ============================================= */
/* == PROGRESS & LOADING INDICATORS == */
/* ============================================= */

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: var(--border-color);
    border-radius: 9999px;
    overflow: hidden;
}
.progress-bar-value {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 9999px;
    transition: width 0.5s ease;
}

/* Full Page Loader */
.loader-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bg-primary-rgb), 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spins 1s linear infinite;
}
::selection { background-color: var(--green-600); color: #fff; }
::-moz-selection { background-color: var(--green-600); color: #fff; }