/* ==========================================================================
	 CSS RESET & BASE
	 ========================================================================== */
* {margin: 0; padding: 0; box-sizing: border-box;}
/* ==========================================================================
	 CSS VARIABLES (CUSTOM PROPERTIES)
	 ========================================================================== */
:root {
	/* Color Palette */
	--primary: #2563eb;
	--primary-light: #dbeafe;
	--info: #0791b2;
	--info-light: #cffafe;
	--success: #16a34a;
	--success-light: #dcfce7;
	--warning: #ca8a04;
	--warning-light: #fef9c3;
	--danger: #dc2626;
	--danger-light: #fee2e2;
	--purple: #9333ea;
	--purple-light: #f3e8ff;
	--orange: #ea580c;
	--orange-light: #ffedd5;
	--pink: #db2777;
	--pink-light: #fce7f3;
	--secondary: #d9d9d9;
	--light: #f8f9fa;
	--dark: #2b303b;
	--gray: #6b7894;
	--gray-light: #a6aebf;
	--border: #8993a9;
	--head: #e8e9ea;
	--table: #dee2e6;
	/* Layout Dimensions */
	--sidebar-full: 220px;
	--sidebar-collapsed: 80px;
	--topnav-height: 40px;
}
/* ==========================================================================
	 BASE STYLES
	 ========================================================================== */
body {font-family: "Roboto Condensed", Tahoma, sans-serif; background: #fefefe; color: var(--dark); font-size: 1rem; line-height: 1.5; font-weight: 400;}
/* Typography */
p, h1, h2, h3, h4, h5, h6 {line-height: normal; margin-bottom: 5px;}
/* Heading Sizes */
.h1 { font-size: 2em; margin: .67em 0; }
.h2 { font-size: 1.5em; margin: .75em 0; }
.h3 { font-size: 1.17em; margin: .83em 0; }
.h5 { font-size: .83em; margin: 1.5em 0; }
.h6 { font-size: .75em; margin: 1.67em 0; }
/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
/* Text Colors */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-info { color: var(--info) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-purple { color: var(--purple) !important; }
.text-pink { color: var(--pink) !important; }
.text-orange { color: var(--orange) !important; }
.text-dark { color: var(--dark) !important; }
.text-light { color: var(--light) !important; }
.text-muted { color: var(--gray) !important; }
/* Background Colors */
.bg-primary { background: var(--primary-light) !important; }
.bg-info { background: var(--info-light) !important; }
.bg-success { background: var(--success-light) !important; }
.bg-warning { background: var(--warning-light) !important; }
.bg-danger { background: var(--danger-light) !important; }
.bg-purple { background: var(--purple-light) !important; }
.bg-pink { background: var(--pink-light) !important; }
.bg-orange { background: var(--orange-light) !important; }
.bg-light { background: var(--light) !important; }
.bg-gray { background: var(--gray-light) !important; }
.bg-dark { background: var(--dark) !important; }
/* Combined Color Classes */
.primary { background: var(--primary) !important; color: var(--primary-light) !important; }
.secondary { background: var(--secondary) !important; color: var(--gray) !important; }
.info { background: var(--info) !important; color: var(--info-light) !important; }
.success { background: var(--success) !important; color: var(--success-light) !important; }
.warning { background: var(--warning) !important; color: var(--warning-light) !important; }
.danger { background: var(--danger) !important; color: var(--danger-light) !important; }
.purple { background: var(--purple) !important; color: var(--purple-light) !important; }
.pink { background: var(--pink) !important; color: var(--pink-light) !important; }
.orange { background: var(--orange) !important; color: var(--orange-light) !important; }
.gray { background: var(--gray) !important; color: var(--light) !important; }
.dark { background: var(--dark) !important; color: var(--light) !important; }
.primary-light { background: var(--primary-light) !important; color: var(--primary) !important; }
.info-light { background: var(--info-light) !important; color: var(--info) !important; }
.success-light { background: var(--success-light) !important; color: var(--success) !important; }
.warning-light { background: var(--warning-light) !important; color: var(--warning) !important; }
.danger-light { background: var(--danger-light) !important; color: var(--danger) !important; }
.purple-light { background: var(--purple-light) !important; color: var(--purple) !important; }
.pink-light { background: var(--pink-light) !important; color: var(--pink) !important; }
.orange-light { background: var(--orange-light) !important; color: var(--orange) !important; }
/* Spacing Utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: 4px !important; }
.m-2 { margin: 8px !important; }
.m-3 { margin: 12px !important; }
.m-4 { margin: 16px !important; }
.m-5 { margin: 20px !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }
.mr-4 { margin-right: 16px !important; }
.mr-5 { margin-right: 20px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 20px !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 20px !important; }
/* Borders */
.bt { border-top: 1px solid var(--border); }
.bb { border-bottom: 1px solid var(--border); }
.bl { border-left: 1px solid var(--border); }
.br { border-right: 1px solid var(--border); }
.borderless { border: 0 !important; }
/* Display & Visibility */
.hidden { display: none !important; }
.fluid { width: 100%; }
.small { font-size: .9rem !important; }
.small .material-symbols-outlined { font-size: .8rem !important; }
.rounded { border-radius: 8px; }
.valign-top { vertical-align: top; }
/* Material Icons */
.material-symbols-outlined { font-size: 1rem; }
/* Lists */
ul { padding-left: 20px; margin: 0; }
li { margin-bottom: 10px; }
/* Horizontal Rule */
hr {border: none; height: 1px; background-color: var(--border); margin: 5px 0;}
/* Media Elements */
video, canvas {width: 100%; border-radius: 8px;}
/* ==========================================================================
	 LAYOUT COMPONENTS
	 ========================================================================== */
/* App Structure */
.app {display: flex; min-height: 100vh;}
/* Main Content */
.main-content {flex: 1; transition: margin-left .3s; margin-left: var(--sidebar-full);}
/* Page Content */
.page-content {padding: 10px 5px 70px 5px;}
.page {display: none;}
.page.active {display: block; animation: fadein .3s ease;}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* ==========================================================================
	 GRID SYSTEM
	 ========================================================================== */
/* Row */
.row {display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; width: 100%;}
.row.no-gap { gap: 0; }
/* Columns - Default (Mobile First) */
[class^="col-"] { grid-column: span 12; }
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
/* ==========================================================================
	 COMPONENTS
	 ========================================================================== */

/* Card Component */
.card {
	background: var(--light);
	border-radius: 5px;
	border: 2px solid var(--dark);
	margin: 0;
	margin-bottom: 10px;
}

.card.highlight {
	animation: flashHighlight 1.5s ease;
	border: 2px solid var(--success);
}

@keyframes flashHighlight {
	0% { background: #e8f5e9; }
	100% { background: transparent; }
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-bottom: 1px solid var(--gray-light);
	padding: 10px;
}

.card-header h3 { font-size: 18px; }
.card-header p { font-size: 12px; }

.card-body { padding: 10px; }

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border-top: 1px solid var(--gray-light);
	padding: 10px;
	gap: 10px;
}

/* Badge */
.badge {padding: 4px 6px; border-radius: 4px; margin-right: 2px !important; line-height: 1.5rem;}

/* Buttons */
.btn {
	display: inline-block;
	padding: 6px 4px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: .3s;
}

.btn .material-symbols-outlined { font-size: 20px; }
.btn-block { width: 100%; }
.btn-icon { margin-right: 10px; font-size: 16px; }

/* Button Variants */
.btn-primary { background: var(--primary); color: var(--primary-light); }
.btn-primary:hover { background: var(--primary-light); color: var(--primary); }

.btn-secondary { background: var(--secondary); color: var(--gray); }
.btn-secondary:hover { background: var(--gray); color: var(--secondary); }

.btn-info { background: var(--info); color: var(--info-light); }
.btn-info:hover { background: var(--info-light); color: var(--info); }

.btn-success { background: var(--success); color: var(--success-light); }
.btn-success:hover { background: var(--success-light); color: var(--success); }

.btn-warning { background: var(--warning); color: var(--warning-light); }
.btn-warning:hover { background: var(--warning-light); color: var(--warning); }

.btn-danger { background: var(--danger); color: var(--danger-light); }
.btn-danger:hover { background: var(--danger-light); color: var(--danger); }

.btn-purple { background: var(--purple); color: var(--purple-light); }
.btn-purple:hover { background: var(--purple-light); color: var(--purple); }

.btn-pink { background: var(--pink); color: var(--pink-light); }
.btn-pink:hover { background: var(--pink-light); color: var(--pink); }

.btn-orange { background: var(--orange); color: var(--orange-light); }
.btn-orange:hover { background: var(--orange-light); color: var(--orange); }

.btn-link { color: var(--primary); text-decoration: none; }

/* Button Group */
.btn-group {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin-bottom: 10px;
}

.btn-group .btn-grup {
	border: 1px solid var(--border);
	background: var(--light);
	color: var(--dark);
	padding: 6px 8px;
	font-size: .9rem;
	cursor: pointer;
	margin: 0;
}

.btn-group .btn-grup .material-symbols-outlined { font-size: 0.8rem; }
.btn-group .btn-grup:not(:last-child) { border-right: none; }

.btn-group .btn-grup:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.btn-group .btn-grup:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.btn-group .btn-grup:hover {
	background: #0d6efd;
	color: #fff;
}

.btn-group .btn-grup.active {
	background: #0d6efd;
	color: #fff;
}

/* Tables */
.table-responsive {
	width: 100%;
	overflow: auto;
	margin: 10px 0;
}

.table {
	border-collapse: collapse;
	background: transparent;
	margin-bottom: 10px;
	width: 100%;
}

.table thead th { vertical-align: bottom; border-bottom: 2px solid var(--table); }
.table td, .table th { padding: 4px; vertical-align: top; border-top: 1px solid var(--table); }
.table thead th { vertical-align: bottom; background: var(--head); border-bottom: 2px solid var(--table); }
.table tbody+tbody { border-top: 2px solid var(--table); }
.table tfoot th,.table tfoot td { vertical-align: bottom; background: transparent !important; border-top: double var(--table); border-bottom: 2px solid var(--table); }

.table-bordered th, .table-bordered td {
	border: 1px solid var(--table);
	padding: 4px;
}

.table-borderless th, .table-borderless td {
	border: 0px !important;
	background: transparent !important;
	padding: 4px;
}

.table-scroll-x {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-scroll-x table { min-width: 700px; }
.table-scroll-x::-webkit-scrollbar { height: 6px; }
.table-scroll-x::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 4px; }
.table-scroll-x::after {
	content: "← geser →";
	display: block;
	text-align: center;
	font-size: 11px;
	color: var(--gray);
	padding: 4px 0;
}

/* Forms */
.form-section {
	border-radius: 14px;
	background: var(--light);
	padding: 10px;
	margin-bottom: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.form-section h4 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 1rem;
	color: var(--gray);
	border-left: 4px solid var(--primary);
	padding-left: 8px;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
}

.form-group {
	margin: 5px !important;
	padding: 0 !important;
}

.form-group.full { grid-column: span 2; }

.form-group label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--dark);
	display: block;
	margin: 0;
	padding: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 5px !important;
	border: 0 !important;
	border-bottom: 1px solid #ddd !important;
	border-radius: 0 !important;
	font-size: .9rem;
	transition: .2s ease;
	background: #fafafa;
}

.form-group textarea {
	resize: vertical;
	min-height: 60px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

/* Custom Checkbox */
.checkbox-inline {
	display: flex !important;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: .95rem;
	user-select: none;
	margin: 0;
	padding: 0;
	position: relative;
	flex-wrap: wrap;
}

.checkbox-inline input[type="checkbox"] {
	opacity: 0;
	pointer-events: none;
	margin: 0;
	padding: 0;
}

.checkbox-inline .checkmark {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 2px solid var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease;
	background: var(--light);
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.checkbox-inline .checkmark::after {
	content: '';
	width: 6px;
	height: 10px;
	border: solid var(--light);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}

.checkbox-inline input:checked + .checkmark {
	background: var(--primary);
	border-color: var(--primary);
}

.checkbox-inline input:checked + .checkmark::after {
	transform: rotate(45deg) scale(1);
}

.checkbox-inline:hover .checkmark {
	box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.checkbox-inline .checkbox-text {
	color: var(--dark);
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	word-break: break-word;
}

/* ==========================================================================
	 NAVIGATION COMPONENTS
	 ========================================================================== */

/* Top Navigation */
.top-nav {
	height: var(--topnav-height);
	background: white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	padding: 0 10px;
	position: sticky;
	top: 0;
	z-index: 100;
}

.top-nav .material-symbols-outlined { font-size: 24px; }

.menu-toggle {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	display: none;
}

.page-title {
	flex: 1;
	margin-left: 20px;
	font-size: 20px;
}

.page-title .material-symbols-outlined { font-size: 20px; }

.btn-debt { border: none; background: none; color: var(--danger); cursor: pointer; padding: 0 5px; }
.btn-ware { border: none; background: none; color: var(--gray); font-size: 24px; cursor: pointer; padding: 0 5px; }
.btn-smartsearch { border: none; background: none; color: var(--info); font-size: 24px; cursor: pointer; padding: 0 5px; }

/* Sidebar */
.sidebar {
	width: var(--sidebar-full);
	background: rgba(43,48,59,0.75);
	color: white;
	position: fixed;
	height: 100vh;
	transform: translateX(-100%);
	transition: 0.3s;
	z-index: 1000;
}

.sidebar.active { transform: translateX(0); }
.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-header {
	padding: 10px;
	background: var(--orange);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-menu { padding: 10px 0; }

.menu-item {
	display: flex;
	align-items: center;
	padding: 10px;
	color: white;
	text-decoration: none;
	transition: background .3s;
}

.menu-item:hover,
.menu-item.active {
	background: rgba(255,255,255,0.1);
	border-left: 4px solid var(--primary);
}

.menu-item .material-symbols-outlined { width: 30px; justify-content: center; }

.sidebar.collapsed .menu-text { display: none !important; }
.sidebar.collapsed .menu-item { justify-content: center; }

.sidebar-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

/* Menu Tabs */
.menu-tabs {
	display: flex;
	gap: 0;
	margin: 12px 0 16px;
	padding-left: 0;
	border-bottom: 2px solid var(--dark);
	overflow-x: auto;
	overflow-y: hidden;
}

.menu-tabs.hidden { display: none; }
.menu-tabs .tab { list-style: none; margin-bottom: -1px; }

.menu-tabs .nav-link {
	display: block;
	padding: 8px;
	border: 2px solid transparent;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	background: none;
	font-size: 12px;
	font-weight: 500;
	color: var(--gray);
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

.menu-tabs .nav-link:hover { color: var(--purple); border-color: var(--border) var(--border) transparent; }
.menu-tabs .nav-link.active { color: var(--light); background: var(--dark) !important; font-weight: 600; }
.menu-tabs .nav-link:focus { outline: none; box-shadow: inset 0 -2px 0 var(--purple-light); }

/* ==========================================================================
	 MODAL & OVERLAY COMPONENTS
	 ========================================================================== */

/* Modal */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 2000;
	align-items: center;
	justify-content: center;
}

.modal.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-content, .modal-body {
	background: var(--light);
	width: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	animation: fadeIn .2s ease;
	padding: 10px;
}

.modal-header {
	background: var(--light);
	padding: 5px 10px;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-footer {
	background: var(--light);
	padding: 5px 10px;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-title { flex: 1; }

.btn-close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gray);
}

.modal-actions {
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-top {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	z-index: 3000;
}

.modal-overlay.hidden { display: none; }

.modal-fullscreen {
	background: var(--light);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	animation: fadeIn .2s ease;
}

/* Toast */
.toast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 15px 25px;
	background: var(--dark);
	color: white;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	transform: translateY(100px);
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 3000;
}

.toast.show {
	transform: translateY(0);
	opacity: 1;
}

/* ==========================================================================
	 PAGE SPECIFIC STYLES
	 ========================================================================== */

/* Welcome Page */
.welcome {
	position: fixed;
	inset: 0;
	background: var(--light);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	color: var(--dark);
}

.welcome.hidden { display: none; }

.welcome-content {
	text-align: center;
	animation: fadeInScale 1s ease forwards;
}

.welcome-logo {
	width: 120px;
	margin-bottom: 20px;
	animation: bounce 1.2s ease;
}

@keyframes fadeInScale {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
	0% { transform: translateY(-20px); }
	60% { transform: translateY(10px); }
	100% { transform: translateY(0); }
}

/* Login Page */
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(135deg, #ffcc00 0%, #ff9933 100%);
	padding: 10px;
}

.login-box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--light);
	border-radius: 16px;
	padding: 20px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-logo { text-align: center; margin-bottom: 30px; }
.login-logo h1 { font-size: 28px; margin-bottom: 10px; }
.login-logo p { color: var(--gray); }

.btn-login {
	width: 100%;
	padding: 15px;
	background: var(--primary);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}

.btn-login:hover { background: var(--secondary); }
.login-error { color: var(--danger); text-align: center; margin-top: 15px; font-size: 14px; }

/* Dashboard */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
}

.stat-card {
	background: var(--light);
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #ddd;
	margin-bottom: 10px;
}

.stat-icon {
	width: 60px;
	height: 50px;
	border-radius: 10px 0 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stat-icon .material-symbols-outlined { font-size: 36px; }

.section {
	background: var(--light);
	border-radius: 10px;
	padding: 10px;
	margin-top: 20px;
	border: 1px solid #ddd;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.activity-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 10px;
}

.activity-item {
	display: flex;
	align-items: flex-start;
	gap: 0 10px;
}

.info-activity { width: 45px; height: 40px; }

.activity-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.activity-icon .material-symbols-outlined { font-size: 24px; }
.activity-info strong { font-size: 15px; margin-bottom: 5px; }
.activity-info { font-size: 14px; }
.activity-photo { width: 45px; border-radius: 8px; }

.birthday-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--warning-light);
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
}

/* Dashboard Menu */
.dashboard-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.dash-btn-group { display: flex; width: 100%; }

.dash-menu-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--light);
	color: var(--gray);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #ddd;
	height: 70px;
}

.dash-menu-item strong { font-size: 22px; }
.dash-menu-item + .dash-menu-item { border-left: 0; }

.dash-menu-item:first-child { border-radius: 14px 0 0 14px; }
.dash-menu-item:last-child { border-radius: 0 14px 14px 0; }

.dash-menu-item span.material-symbols-outlined { font-size: 28px; }

.dash-menu-item.attended {
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: transparent;
	pointer-events: none;
}

.dash-menu-item.attended span { display: none; }
.dash-menu-item.attended::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.15);
	border-radius: inherit;
}

/* POS Page */
.pos-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 992px) {
	.pos-container { grid-template-columns: 2fr 1fr; }
}

.search-bar { position: relative; }
.search-bar input { width: 100%; padding: 12px 20px 12px 45px; border: 1px solid var(--border); border-radius: 8px; }
.search-bar .material-symbols-outlined {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gray);
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
}

.product-card {
	background: var(--light);
	padding: 15px;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: .2s;
}

.product-card:hover { transform: translateY(-2px); }

.product-image {
	width: 80px;
	height: 80px;
	background: var(--light);
	border-radius: 8px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pos-cart {
	background: var(--light);
	padding: 10px;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cart-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.btn-clear {
	background: var(--danger);
	color: white;
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.cart-items {
	max-height: 300px;
	overflow-y: auto;
	margin-bottom: 20px;
}

.cart-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.btn-checkout {
	width: 100%;
	padding: 15px;
	background: var(--primary);
	border-radius: 8px;
	color: white;
	border: none;
	cursor: pointer;
}

.btn-checkout:hover { background: var(--secondary); }

/* Outlet Page */
.page-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 15px;
}

.btn-add {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	border: none;
	cursor: pointer;
	position: relative;
	right: 0;
	top: 0;
	font-size: 24px;
}

.outlet-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.outlet-status {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: bold;
}

.outlet-status .material-symbols-outlined { font-size: 24px; }

.status-active { background: var(--success-light); color: var(--success); }
.status-inactive { background: var(--orange-light); color: var(--orange); }

.outlet-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.outlet-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.outlet-total span { font-size: 12px; color: var(--dark); display: block; }
.outlet-total strong { font-size: 16px; color: var(--gray); }
.outlet-stats .stat-item:nth-child(3) { grid-column: 1 / -1; }

.outlet-section { display: flex; justify-content: space-between; align-items: center; }

.stat-item {
	background: var(--light);
	border-radius: 10px;
	padding: 12px;
	text-align: center;
}

.info-row { font-size: 14px; }
.info-row .material-symbols-outlined { font-size: 18px; }

.outlet-actions { display: flex; gap: 10px; }

.btn-detail { background: var(--info-light); color: var(--info); }

.btn-action {
	flex: 1;
	padding: 8px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 14px;
}

.btn-visit { background: var(--purple-light); color: var(--purple); }
.btn-edit { background: var(--warning-light); color: var(--warning); }
.btn-delete { background: var(--danger-light); color: var(--danger); }
.btn-cancel { background: var(--dark); color: var(--light); }

.detail-section { margin-bottom: 5px; }

/* Summary Grid */
.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.summary-card {
	background: var(--light);
	border-radius: 10px;
	padding: 5px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	cursor: pointer;
	transition: all .2s ease;
}

.summary-card strong { display: block; font-size: 1.4rem; }
.summary-card .material-symbols-outlined { font-size: 1.4rem; }
.summary-card span { font-size: .8rem; color: var(--gray); }
.summary-card.active { box-shadow: 0 0 0 2px var(--primary); transform: translateY(-2px); }

/* Map */
.map-placeholder {
	height: 300px;
	border-radius: 8px;
	background: var(--light);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--gray);
	text-align: center;
}

.map-placeholder .material-symbols-outlined {
	font-size: 48px;
	margin-bottom: 8px;
	color: var(--orange);
}

/* Visit Page */
.visits-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.visit-card {
	background: var(--light);
	border-radius: 12px;
	padding: 10px;
	border: 1px solid #ddd;
}

.visit-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.visit-header h3 { font-size: 16px; }
.visit-time { font-size: 14px; color: var(--gray); }
.visit-notes { margin-top: 5px; font-size: 14px; }

.visits-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.visits-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

#visits-date-filter { padding: 8px 10px; font-size: 14px; min-width: 140px; }

.date-range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.date-range input[type="date"] {
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid var(--light);
	font-size: 13px;
}

.date-range span { font-size: 13px; color: var(--gray); }
#apply-visit-range { padding: 6px 10px; min-height: 36px; }
.date-range.hidden { display: none !important; }

/* Visit Photo Preview */
.visit-content {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.visit-photo { flex: 0 0 45%; }
.visit-photo img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s;
}

.visit-photo img:hover { transform: scale(1.02); }
.visit-info { flex: 1; }

/* Camera Modal */
.camera-modal .modal-content { max-width: 500px; }
.camera-container {
	position: relative;
	width: 100%;
	background: var(--dark);
	border-radius: 8px;
	overflow: hidden;
}

#camera-preview { width: 100%; height: auto; display: block; }

.camera-controls {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 0 10px;
}

.photo-preview { margin-top: 20px; }
#photo-canvas { width: 100%; height: auto; border-radius: 8px; }
.preview-controls { display: flex; gap: 10px; margin-top: 20px; }

/* Image Modal */
#imageModal .modal-body {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

#imageModal img {
	width: 100%;
	height: auto;
	max-height: 100vh;
	object-fit: contain;
}

/* Transaction Page */
.filter-options select {
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 16px;
	min-width: 200px;
}

.transaction-card {
	width: 100%;
	background: var(--light);
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.transaction-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.transaction-id { font-weight: bold; color: var(--primary); }
.transaction-amount { font-size: 18px; font-weight: bold; color: var(--success); }

.transaction-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	font-size: 14px;
	color: var(--gray);
}

/* Transaction Status Colors */
.transaction-status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-new { background: var(--secondary); color: var(--dark); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-process { background: var(--primary-light); color: var(--primary); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-shipped { background: var(--warning-light); color: var(--warning); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-paid { background: var(--success-light); color: var(--success); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-return { background: var(--purple-light); color: var(--purple); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-cancel { background: var(--dark); color: var(--light); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-unknown { background: var(--danger-light); color: var(--danger); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-info { background: var(--info-light); color: var(--info); padding: 2px 4px; border-radius: 5px; font-size: .8em; }
.status-visit { background: var(--purple-light); color: var(--purple); padding: 2px 4px; border-radius: 5px; font-size: .8em; }

/* Reports Page */
.reports-summary .stat-card { margin-bottom: 0.5rem; }
#reports-page table th, #reports-page table td { vertical-align: middle; }

.simple-list > div {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.simple-list > div:last-child { border-bottom: none; }

/* Profile Page */
#profile-page { width: 100%; margin: 0 auto; }

/* Profile Header */
.profile-header {
	background: linear-gradient(135deg, var(--orange), var(--orange-light));
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
	margin-bottom: 25px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.profile-header h2 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.profile-header p { font-size: 14px; opacity: 0.85; }

/* Avatar */
.avatar {
	width: 50px;
	height: 50px;
	background: var(--primary);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.2);
}

.avatar img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 50%;
}

.avatar-large { width: 100px; height: 100px; font-size: 36px; margin: 0 auto 20px; }
.avatar-small { width: 40px; height: 40px; font-size: 14px; }
#profile-avatar { margin-bottom: 15px; border: 4px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); color: white; }

/* User Info */
.user-info {
	display: flex;
	align-items: center;
	gap: 15px;
}

.user-info > div:last-child { flex: 1; min-width: 0; }
.user-info h3 { font-size: 16px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info p { font-size: 12px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avatar Colors */
.avatar-primary { background: var(--primary); }
.avatar-secondary { background: var(--secondary); }
.avatar-success { background: var(--success); }
.avatar-warning { background: var(--warning); }
.avatar-danger { background: var(--danger); }

/* Profile Content */
.profile-info { display: flex; flex-direction: column; gap: 20px; }
.area-tag {
	display: inline-block;
	padding: 4px 8px;
	margin: 2px 4px 2px 0;
	font-size: 12px;
	border-radius: 6px;
	background: var(--primary-light);
	color: var(--primary);
	white-space: nowrap;
}

/* Profile Statistics */
.profile-info, .stats-grid, .info-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.stat-item, .info-item {
	background: var(--light);
	border-radius: 12px;
	padding: 16px;
	text-align: center;
}

.stat-value, .info-value {
	font-size: 20px;
	font-weight: 600;
	display: block;
	margin-bottom: 2px;
}

.stat-label, .info-label {
	font-size: 12px;
	display: block;
}

/* Profile Actions */
.profile-actions {
	display: flex;
	gap: 15px;
	margin-top: 10px;
}

.profile-actions button { flex: 1; }

/* SmartSearch Page */
.smartsearch-container { width: 100%; margin: 0 auto; }
.smartsearch-container .hint { color: var(--gray); font-size: 14px; margin-bottom: 16px; }

.smartsearch-box {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

#smartSearchInput {
	flex: 1;
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid #ddd;
	font-size: 16px;
	outline: none;
	transition: border 0.2s, box-shadow 0.2s;
}

#smartSearchInput:focus {
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.15);
}

#smartSearchBtn {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: none;
	background: var(--orange);
	color: var(--light);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.1s;
}

#smartSearchBtn:hover { background: var(--orange); }
#smartSearchBtn:active { transform: scale(0.96); }

.search-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.5rem;
	background: #f5f5f5;
	border-radius: 4px;
}

.type-order { background-color: #f0f9ff; }
.type-visit { background-color: #f0fff4; }
.type-dokter { background-color: #fff7f0; }
.type-utang { background-color: #fff0f0; }

.btn-export {
	background: #4CAF50;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	cursor: pointer;
}

.loading .spinner {
	border: 3px solid #f3f3f3;
	border-top: 3px solid #3498db;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
	margin: 1rem auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* SmartSearch Results */
#smartSearchResult { margin-top: 16px; overflow-x: auto; }
#smartSearchResult table {
	width: 100%;
	border-collapse: collapse;
	background: var(--light);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#smartSearchResult thead { background: var(--light); }
#smartSearchResult th {
	text-align: left;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--gray);
	white-space: nowrap;
}

#smartSearchResult td {
	padding: 12px 14px;
	font-size: 14px;
	border-top: 1px solid #eee;
	white-space: nowrap;
}

#smartSearchResult tr:hover { background: var(--light); }
#smartSearchResult p { color: var(--gray); font-size: 14px; margin-top: 12px; }

/* Export Button */
.btn-export {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 10px;
	border: none;
	background: var(--success);
	color: var(--light);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.btn-export:hover { background: var(--success); }
.btn-export:active { transform: scale(0.96); }

/* SmartSearch Component */
.smart-search { padding: 12px; position: relative; }
.smart-search input { width: 100%; padding: 8px 36px 8px 10px; border-radius: 6px; border: 1px solid #ddd; font-size: 14px; }
.smart-search button {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: #666;
}

.smart-search-dropdown {
	display: none;
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	z-index: 20;
}

.smart-search-dropdown.active { display: block; }
.smart-search-dropdown div { padding: 8px 10px; cursor: pointer; font-size: 14px; }
.smart-search-dropdown div:hover { background: #f3f3f3; }

/* ==========================================================================
	 FOOTER COMPONENTS
	 ========================================================================== */

/* Sticky Footer Action Menu */
.app-footer {
	position: fixed;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1080;
	width: 340px;
}

.footer-actions {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 8px 0;
}

.footer-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--orange-light);
	color: var(--orange);
	box-shadow: 4px 2px 6px rgba(0,0,0,0.5);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border: 2px solid var(--orange);
	height: 70px;
}

.footer-item span.material-symbols-outlined { display: block; font-size: 24px; }
.footer-item:active { background: rgba(0,0,0,0.05); border-radius: 5px; }
.footer-item + .footer-item { border-left: 0; }
.footer-item:first-child { border-radius: 5px 0 0 5px; }
.footer-item:last-child { border-radius: 0 5px 5px 0; }

/* Attendance Button With Photo */
.footer-item.attended {
	position: relative;
	padding: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: transparent;
	pointer-events: none;
}

.footer-item.attended span { display: none; }
.footer-item.attended::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.15);
	border-radius: inherit;
}

/* ==========================================================================
	 SPECIALIZED COMPONENTS
	 ========================================================================== */

/* Preloader */
.preloader {
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(225,225,225,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 9999;
	visibility: visible;
	pointer-events: all;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.preloader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.preloader-spinner .material-symbols-outlined {
	font-size: 72px;
	color: var(--orange);
	margin-bottom: 16px;
	animation: spin 1.5s linear infinite;
}

.preloader-text { font-size: 72px; color: var(--gray); font-weight: 500; }

/* Invoice/Struk Print Styles */
@media print {
	body * { visibility: hidden; }
	#invoice-body, #invoice-body * { visibility: visible; font-size: .8rem; }
	#invoice-body {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0;
		margin: 0;
		border: 0;
	}
	
	table { width: 100%; border-collapse: collapse; }
	th, td { padding: 4px 2px; }
	.card { border: 0; box-shadow: none; }
}

/* Attendance Table */
.attendance-section { margin-top: 20px; }

.attendance-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--light);
}

.attendance-table thead { background: var(--primary-light); }
.attendance-table th {
	padding: 10px 8px;
	text-align: center;
	font-weight: 600;
	color: var(--dark);
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
}

.attendance-table td {
	padding: 10px 8px;
	text-align: center;
	border-bottom: 1px solid var(--border);
	color: var(--dark);
}

.attendance-table tbody tr:hover { background: var(--secondary); }
.attendance-table td:first-child { text-align: left; font-weight: 600; }
.attendance-table .text-success { font-weight: 600; }
.attendance-table .text-danger { font-weight: 600; }
.attendance-table .no-data { text-align: center; padding: 16px; color: var(--gray); }

/* KPI Components */
.kpi-container {
	background: var(--light);
	border-radius: 12px;
	padding: 5px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.kpi-section { margin-bottom: 15px; }
.kpi-section h5 {
	color: #333;
	margin-bottom: 10px;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.kpi-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.kpi-item {
	flex: 1;
	min-width: 150px;
	background: #f8f9fa;
	border-radius: 8px;
	padding: 12px;
	border-left: 4px solid #4CAF50;
	transition: all 0.2s;
	cursor: default;
}

.kpi-item:hover {
	background: #edf2f7;
	transform: translateY(-1px);
}

.kpi-item.compact { padding: 10px 12px; min-width: 120px; }

.kpi-label {
	font-size: 11px;
	color: #666;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kpi-value {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	line-height: 1.2;
}

.kpi-value.small { font-size: 14px; }
.kpi-sub { font-size: 11px; color: #888; margin-top: 2px; white-space: nowrap; }

/* KPI Status Colors */
.kpi-item.success { border-left-color: #4CAF50; }
.kpi-item.warning { border-left-color: #FF9800; }
.kpi-item.danger { border-left-color: #F44336; }
.kpi-item.info { border-left-color: #2196F3; }
.kpi-item.purple { border-left-color: #9C27B0; }

/* Badge KPI */
.badge-kpi {
	display: inline-block;
	padding: 2px 6px;
	font-size: 10px;
	border-radius: 4px;
	font-weight: 600;
	margin-left: 5px;
	vertical-align: middle;
}

.badge-kpi.success { background: #d4edda; color: #155724; }
.badge-kpi.warning { background: #fff3cd; color: #856404; }
.badge-kpi.danger { background: #f8d7da; color: #721c24; }
.badge-kpi.info { background: #d1ecf1; color: #0c5460; }

/* Recommendation Chips */
.recommendation-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.recommendation-chip {
	background: #e3f2fd;
	border: 1px solid #bbdefb;
	border-radius: 16px;
	padding: 6px 12px;
	font-size: 12px;
	color: #1565c0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: default;
}

.recommendation-chip.warning { background: #fff3e0; border-color: #ffe0b2; color: #ef6c00; }
.recommendation-chip.danger { background: #ffebee; border-color: #ffcdd2; color: #c62828; }
.recommendation-chip.success { background: #e8f5e8; border-color: #c8e6c9; color: #2e7d32; }

.recommendation-chip .material-symbols-outlined { font-size: 14px; }

/* Product Tags */
.product-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 5px;
}

.product-tag {
	background: #f1f8ff;
	border: 1px solid #c8e1ff;
	border-radius: 12px;
	padding: 3px 8px;
	font-size: 10px;
	color: #0366d6;
}

/* KPI Toggle */
.kpi-toggle {
	background: none;
	border: none;
	color: #666;
	font-size: 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	margin-left: 10px;
}

.kpi-toggle:hover { color: #333; }
.kpi-details {
	margin-top: 8px;
	padding: 8px;
	background: #f8f9fa;
	border-radius: 6px;
	font-size: 12px;
	color: #666;
	border-left: 3px solid #ddd;
}

/* Credit Scoring */
.credit-score-container {
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.credit-main-card {
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 15px;
	position: relative;
}

.credit-score-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.credit-debtor-class {
	display: flex;
	gap: 8px;
	margin-top: 5px;
}

.credit-debtor-class .badge { font-size: 11px; padding: 4px 8px; }
.credit-score-number { font-size: 32px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.credit-score-gauge {
	position: relative;
	height: 20px;
	background: var(--border);
	border-radius: 10px;
	margin: 20px 0;
	overflow: hidden;
}

.gauge-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,0.1);
}

.gauge-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 10px;
	transition: width 1s ease;
}

.gauge-labels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--gray);
	margin-top: 5px;
}

.po-recommendation {
	background: rgba(255,255,255,0.9);
	color: var(--dark);
	padding: 12px;
	border-radius: 8px;
	margin-top: 15px;
	font-size: 13px;
	border-left: 4px solid;
}

.po-recommendation.success { border-left-color: #4CAF50; }
.po-recommendation.warning { border-left-color: #FF9800; }
.po-recommendation.danger { border-left-color: #F44336; }

/* Credit Details Grid */
.credit-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 15px 0;
}

.credit-detail-card {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 15px;
	border-left: 4px solid;
	transition: transform 0.2s;
}

.credit-detail-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.credit-detail-card.success { border-left-color: #4CAF50; }
.credit-detail-card.warning { border-left-color: #FF9800; }
.credit-detail-card.danger { border-left-color: #F44336; }
.credit-detail-card.info { border-left-color: #2196F3; }

.credit-detail-label {
	font-size: 12px;
	color: var(--dark);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.credit-detail-value {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

.credit-detail-sub {
	font-size: 11px;
	color: var(--dark);
	margin-top: 3px;
	line-height: 1.3;
}

.credit-detail-sub.success { color: #4CAF50; }
.credit-detail-sub.warning { color: #FF9800; }
.credit-detail-sub.danger { color: #F44336; }

.credit-detail-alert {
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 4px;
	margin-top: 8px;
	display: inline-block;
}

.credit-detail-alert.danger {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* Credit Rules */
.credit-rules-card {
	background: #f1f8ff;
	border-radius: 8px;
	padding: 15px;
	margin: 15px 0;
	border: 1px solid #c8e1ff;
}

.rules-list { margin-top: 10px; }

.rule-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
	margin-bottom: 5px;
	background: white;
	border-radius: 6px;
	font-size: 12px;
	border-left: 3px solid;
}

.rule-item.danger { border-left-color: #F44336; background: #ffebee; }
.rule-item.warning { border-left-color: #FF9800; background: #fff3e0; }
.rule-item.info { border-left-color: #2196F3; background: #e3f2fd; }
.rule-item.success { border-left-color: #4CAF50; background: #e8f5e9; }
.rule-item .material-symbols-outlined { font-size: 14px; margin-top: 1px; }
/* Credit Action Buttons */
.credit-action-buttons {display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap;}
.credit-action-buttons .btn {display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 6px 12px;}
/* KPI Grid */
.kpi-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px;}
.kpi-card {background: var(--light); border-radius: 10px; padding: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.06);}
.kpi-label { font-size: 13px; color: var(--gray); margin-bottom: 4px; }
.kpi-value { font-size: 18px; font-weight: 600; }
.kpi-growth { font-size: 13px; margin-top: 2px; }
/* Bot Suggestions */
.bot-suggestion {padding: 6px 10px; margin: 4px 0; background: #f3f3f3; border-radius: 6px; cursor: pointer;}
.bot-suggestion:hover { background: #e0e0e0; }
.bot-msg {width: 300px; border: 1px solid var(--success); background: var(--success-light); padding: 3px; border-radius: 5px; margin-bottom: 5px; clear: both;}
.user-msg {width: 300px; border: 1px solid var(--border); padding: 3px; border-radius: 5px; margin-bottom: 5px; float: right;}
/* Swipe Horizontal */
.swipe {display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 5px 2px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;}
.swipe-item { flex: 0 0 340px; scroll-snap-align: start; }
.swipe::-webkit-scrollbar { height: 6px; }
.swipe::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }
/* Helper Classes */
.cancel {font-size: 100px; opacity: 0.25; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg); z-index: 9999;}
.geser {content: "← geser →"; display: block; text-align: center; font-size: 11px; color: var(--gray); padding: 4px 0;}
/* Examples Table */
.examples-table { margin-bottom: 25px; }
.examples-table table {width: 100%; border-collapse: collapse; font-size: 0.95rem;}
.examples-table th {background-color: var(--light); padding: 12px 15px; text-align: left; font-weight: 600; color: var(--dark); border-bottom: 2px solid var(--border);}
.examples-table td {padding: 12px 15px; border-bottom: 1px solid var(--border); vertical-align: top;}
.examples-table tr:hover { background-color: var(--light); }
.examples-table code {background-color: var(--light); padding: 4px 8px; border-radius: 4px; font-family: 'Courier New', monospace; color: var(--pink); font-size: 0.9em;}
/* Tips Section */
.tips-section {background-color: var(--light); padding: 20px; border-radius: 8px; margin-bottom: 25px; border-left: 4px solid var(--success);}
.tips-section h4 { color: var(--success); margin-top: 0; margin-bottom: 15px; }
.tips-section ul { margin: 0; padding-left: 20px; }
.tips-section li { margin-bottom: 8px; }
.tips-section strong { color: var(--dark); }
/* Advanced Features */
.advanced-features h4 { color: var(--primary); margin-top: 0; margin-bottom: 15px; }
.features-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;}
.feature {display: flex; align-items: center; padding: 15px; background-color: var(--light); border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s;}
.feature:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.feature .material-symbols-outlined {font-size: 24px; margin-right: 15px; color: var(--primary); background-color: rgba(0, 123, 255, 0.1); padding: 10px; border-radius: 8px;}
.feature div { flex: 1; }
.feature strong { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.feature small { color: var(--gray); font-size: 0.85rem; }
/* Help Link */
.help-link {text-align: center; margin-bottom: 20px;}
.help-link a {text-decoration: none; color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 6px; transition: all 0.2s; background-color: rgba(0, 123, 255, 0.1);}
.help-link a:hover {background-color: rgba(0, 123, 255, 0.2); transform: translateY(-1px);}
/* Gauge Card */
.gauge-card {margin-bottom: 16px;}
.gauge-score {font-size: 32px; font-weight: bold; margin-top: -8px;}
.gauge-needle {stroke: #333; stroke-width: 3; transform-origin: 110px 100px; transform: rotate(-90deg); transition: transform 1.2s cubic-bezier(.25,.8,.25,1);}
.gauge-info {font-size: 12px; color: #3a6cf4; cursor: help; margin-top: 6px;}
.gauge-legend {display: flex; justify-content: center; gap: 10px; margin-top: 6px; font-size: 12px;}
.legend-item {display: flex; align-items: center; gap: 4px; color: #555;}
.legend-dot {width: 10px; height: 10px; border-radius: 50%;}
/* ==========================================================================
	 RESPONSIVE BREAKPOINTS
	 ========================================================================== */
/* 1. MOBILE < 768px (FULL HIDE SIDEBAR) */
@media (max-width: 480px) {
	.di-none { display: none; }
	.table-scroll-x::after { display: none; }
	/* Sidebar */
	.sidebar {width: var(--sidebar-full); transform: translateX(-100%);}
	.sidebar.active { transform: translateX(0); }
	.menu-toggle { display: block; }
	/* Main Content */
	.main-content {margin-left: 0 !important; width: 100%;}
	/* Grid Adjustments */
	.dashboard-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.outlet-list { grid-template-columns: 1fr; }
	.products-grid { grid-template-columns: repeat(2, 1fr); }
	/* Profile */
	.profile-header { padding: 25px 15px; }
	.profile-header h2 { font-size: 20px; }
	/* Tables */
	td.truncate {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch;}
	/* Header Layout */
	.checkbox-inline { padding: 6px 0; }
	.page-header { display: flex; gap: 8px; }
	/* Visits Filter */
	.visits-filter {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;}
	#visits-date-filter { flex: 1; max-width: calc(100% - 60px); }
	#start-visit { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; }
	.date-range input[type="date"] { width: 100%; }
	.date-range span { font-size: 12px; color: var(--gray); white-space: nowrap; }
	#apply-visit-range {height: 36px; min-width: 36px; padding: 0; display: flex; align-items: center; justify-content: center;}
	/* Attendance */
	.attendance-table { font-size: 13px; }
	.attendance-table th, .attendance-table td { padding: 8px 6px; }
	.attendance-table th:nth-child(3), .attendance-table th:nth-child(4),
	.attendance-table td:nth-child(3), .attendance-table td:nth-child(4) {min-width: 70px;}
	/* SmartSearch */
	.smartsearch-container { padding: 16px 12px; }
	#smartSearchInput { font-size: 15px; }
	#smartSearchResult th, #smartSearchResult td { font-size: 13px; padding: 10px 12px; }
	#invoice-body { width: 100%; }
	/* Credit Scoring */
	.credit-details-grid { grid-template-columns: 1fr; }
	.credit-action-buttons { flex-direction: column; }
	.credit-action-buttons .btn {width: 100%; justify-content: center;}
	/* Columns */
	.col-1 { grid-column: span 1; }
	.col-2 { grid-column: span 2; }
	.col-3 { grid-column: span 3; }
	.col-4 { grid-column: span 4; }
	.col-5 { grid-column: span 5; }
	.col-6 { grid-column: span 6; }
	.col-7 { grid-column: span 7; }
	.col-8 { grid-column: span 8; }
	.col-9 { grid-column: span 9; }
	.col-10 { grid-column: span 10; }
	.col-11 { grid-column: span 11; }
	.col-12 { grid-column: span 12; }
}
@media (min-width: 481px) and (max-width: 768px) {
	.di-none { display: none; }
	.table-scroll-x::after { display: none; }
	/* Sidebar */
	.sidebar {width: var(--sidebar-full); transform: translateX(-100%);}
	.sidebar.active { transform: translateX(0); }
	.menu-toggle { display: block; }
	/* Main Content */
	.main-content {margin-left: 0 !important; width: 100%;}
	/* Grid Adjustments */
	.dashboard-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.outlet-list { grid-template-columns: 1fr; }
	.products-grid { grid-template-columns: repeat(2, 1fr); }
	/* Profile */
	.profile-header { padding: 25px 15px; }
	.profile-header h2 { font-size: 20px; }
	/* Tables */
	td.truncate {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch;}
	/* Header Layout */
	.checkbox-inline { padding: 6px 0; }
	.page-header { display: flex; gap: 8px; }
	/* Visits Filter */
	.visits-filter {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;}
	#visits-date-filter { flex: 1; max-width: calc(100% - 60px); }
	#start-visit { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; }
	.date-range input[type="date"] { width: 100%; }
	.date-range span { font-size: 12px; color: var(--gray); white-space: nowrap; }
	#apply-visit-range {height: 36px; min-width: 36px; padding: 0; display: flex; align-items: center; justify-content: center;}
	/* Attendance */
	.attendance-table { font-size: 13px; }
	.attendance-table th, .attendance-table td { padding: 8px 6px; }
	.attendance-table th:nth-child(3), .attendance-table th:nth-child(4),
	.attendance-table td:nth-child(3), .attendance-table td:nth-child(4) {min-width: 70px;}
	/* SmartSearch */
	.smartsearch-container { padding: 16px 12px; }
	#smartSearchInput { font-size: 15px; }
	#smartSearchResult th, #smartSearchResult td { font-size: 13px; padding: 10px 12px; }
	#invoice-body { width: 100%; }
	/* Credit Scoring */
	.credit-details-grid { grid-template-columns: 1fr; }
	.credit-action-buttons { flex-direction: column; }
	.credit-action-buttons .btn {width: 100%; justify-content: center;}
	/* Columns */
	.col-sm-1 { grid-column: span 1; }
	.col-sm-2 { grid-column: span 2; }
	.col-sm-3 { grid-column: span 3; }
	.col-sm-4 { grid-column: span 4; }
	.col-sm-5 { grid-column: span 5; }
	.col-sm-6 { grid-column: span 6; }
	.col-sm-7 { grid-column: span 7; }
	.col-sm-8 { grid-column: span 8; }
	.col-sm-9 { grid-column: span 9; }
	.col-sm-10 { grid-column: span 10; }
	.col-sm-11 { grid-column: span 11; }
	.col-sm-12 { grid-column: span 12; }
}
/* 2. TABLET 768-1080px (COLLAPSED SIDEBAR) */
@media (min-width: 769px) and (max-width: 1080px) {
	.sidebar {width: var(--sidebar-collapsed); transform: translateX(0);}
	.sidebar .menu-text { display: none !important; }
	.sidebar .menu-item { justify-content: center; }
	.menu-toggle { display: none; }
	.main-content {margin-left: var(--sidebar-collapsed) !important; width: calc(100% - var(--sidebar-collapsed));}
	/* Grids */
	.outlet-list { grid-template-columns: repeat(2, 1fr); }
	.activity-list { grid-template-columns: repeat(2, 1fr); }
	.visits-list { grid-template-columns: repeat(2, 1fr); }
	/* Invoice */
	#invoice-body {max-width: 360px; margin: 0 auto !important;}
	/* Columns */
	.col-md-1 { grid-column: span 1; }
	.col-md-2 { grid-column: span 2; }
	.col-md-3 { grid-column: span 3; }
	.col-md-4 { grid-column: span 4; }
	.col-md-5 { grid-column: span 5; }
	.col-md-6 { grid-column: span 6; }
	.col-md-7 { grid-column: span 7; }
	.col-md-8 { grid-column: span 8; }
	.col-md-9 { grid-column: span 9; }
	.col-md-10 { grid-column: span 10; }
	.col-md-11 { grid-column: span 11; }
	.col-md-12 { grid-column: span 12; }
}
/* 3. DESKTOP > 1080px (FULL SIDEBAR) */
@media (min-width: 1081px) {
	.sidebar {width: var(--sidebar-full); transform: translateX(0);}
	.menu-toggle { display: none; }
	.main-content {margin-left: var(--sidebar-full) !important; width: calc(100% - var(--sidebar-full));}
	/* Grids */
	.outlet-list { grid-template-columns: repeat(3, 1fr); }
	.activity-list { grid-template-columns: repeat(3, 1fr); }
	.visits-list { grid-template-columns: repeat(3, 1fr); }
	/* Invoice */
	#invoice-body {max-width: 360px; margin: 0 auto !important;}
	/* Columns */
	.col-lg-1 { grid-column: span 1; }
	.col-lg-2 { grid-column: span 2; }
	.col-lg-3 { grid-column: span 3; }
	.col-lg-4 { grid-column: span 4; }
	.col-lg-5 { grid-column: span 5; }
	.col-lg-6 { grid-column: span 6; }
	.col-lg-7 { grid-column: span 7; }
	.col-lg-8 { grid-column: span 8; }
	.col-lg-9 { grid-column: span 9; }
	.col-lg-10 { grid-column: span 10; }
	.col-lg-11 { grid-column: span 11; }
	.col-lg-12 { grid-column: span 12; }
}