/* ==========================================================
   GLOBAL SYSTEM COLORS
   ========================================================== */
:root {
	/* Brand Colors */
	--brand-green: #00DE00;
	--brand-green-hover: #17BE17;
	--brand-green-tint: #00A2A2;
	--brand-white: #FFFFFF;
	--brand-black: #000000;
	/* Grey Scale */
	--grey-1: #818181;
	--grey-2: #AAAAAA;
	--grey-3: #C6C6C6;
	--grey-4: #D9D9D9;
	--grey-5: #E5E5E5;
	--grey-6: #F5F5F5;
	/* Validation Colors - Light Mode */
	--valid-green: #038903;
	--error-red: #D81525;
	--warn-amber: #E29A13;
	/* Validation Colors - Dark Mode */
	--dark-valid-green: #00DE00;
	--dark-error-red: #FF3444;
	--dark-warn-amber: #E29A13;
	/* Utility Colors */
	--primary-color: #00DE00;
	--primary-link-color: black;
	--primary-link-hover-color: #818181;
	--primary-color-hover: #17BE17;
	--primary-color-alt: #d33333;
	--text-dark: #111;
	--accent-color: #007bff;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */
html, body {	
	color: var(--brand-black);
	background-color: var(--brand-white);
	font-size: 13px;
}

@media (min-width: 1281px) {
	html {
		font-size: 14px;
	}
}

.top-row {
	background: #fff !important;
}

/* Brand */
.brand {
	flex: 0 0 auto;
	display: block;
	font-size: 1.7rem;
	font-weight: 300;
	line-height: 1.2;
	text-align: left;
}

.brand-t2 {
	color: var(--primary-color);
}


/* ==========================================================
   LINKS & BUTTONS
   ========================================================== */
a {
	color: var(--primary-color);
	text-decoration: none;
}

	a:hover {
		color: var(--primary-color-hover);
	}

a, .btn-link {
	color: var(--brand-green);
}

.link-text {
	color: var(--primary-link-color) !important;
	text-decoration: underline !important;
}

	.link-text:hover {
		color: var(--primary-link-hover-color) !important;
		text-decoration: none !important;
	}

/* Buttons */
.btn-primary {
	color: var(--brand-white);
	background-color: var(--brand-green);
	border-color: var(--brand-green);
}

	.btn-primary:hover {
		background-color: var(--brand-green-hover);
		border-color: var(--brand-green-hover);
	}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 0.1rem var(--brand-white), 0 0 0 0.25rem var(--brand-green-tint);
}

/* Inputs */
.form-check-input:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

input[type="radio"] {
	accent-color: green !important;
}

/* Misc */
.msg {
	color: var(--primary-color);
}

/* ==========================================================
   VALIDATION STATES
   ========================================================== */
.valid.modified:not([type=checkbox]) {
	outline: 1px solid var(--valid-green);
}

.invalid {
	outline: 1px solid var(--error-red);
}

.validation-message {
	color: var(--error-red);
}

.warning {
	color: var(--warn-amber);
}

/* ==========================================================
   DATA GRID STYLING
   ========================================================== */
.rz-datatable,
.rz-datatable .rz-row,
.rz-datatable .rz-header {
	font-size: 0.85rem;
}

	.rz-datatable .rz-cell,
	.rz-datatable .rz-header-cell {
		padding: 0.25rem 0.5rem;
	}

	.rz-datatable .rz-header {
		background-color: var(--grey-6);
		color: var(--brand-black);
		font-weight: 500;
	}

	.rz-datatable .rz-row:hover {
		background-color: var(--brand-green-tint);
	}

.rz-button.rz-primary.rz-shade-default {
	color: var(--brand-white) !important;
	background-color: var(--brand-green) !important;
	border-color: var(--brand-green) !important;
}

/* Compact Mode */
.rz-datatable .rz-paginator {
	font-size: 0.85rem;
}

.rz-datatable .rz-header {
	height: 30px;
}

.rz-datatable .rz-row {
	height: 28px;
}

/* Active Pager */
.rz-pager-page.rz-state-active {
	color: var(--brand-green) !important;
}

/* ==========================================================
   FORMS
   ========================================================== */
.form-control:focus {
	border-color: var(--brand-green);
	box-shadow: 0 0 0 0.2rem rgba(0, 222, 0, 0.25);
}

/* ==========================================================
   SIDE PANEL
   ========================================================== */
.r-s-panel {
	background-color: var(--brand-white);
	box-shadow: rgba(0, 0, 0, 0.22) 0px 25px 58px, rgba(0, 0, 0, 0.18) 0px 5px 14px;
	position: absolute;
	z-index: 9999;
	overflow: hidden auto;
	inset: 0px 0px 0px auto;
	width: auto;
	left: 200px;
}

.r-s-panel-close {
	color: var(--brand-black);
	padding: 0 0 20px 14px;
	cursor: pointer;
}

/* Responsive offsets */
@media (min-width: 576px) {
	.r-s-panel {
		left: 200px;
	}
}

@media (min-width: 768px) {
	.r-s-panel {
		left: 260px;
	}
}

@media (min-width: 992px) {
	.r-s-panel {
		left: 450px;
	}
}

@media (min-width: 1200px) {
	.r-s-panel {
		left: 650px;
	}
}

@media (min-width: 1400px) {
	.r-s-panel {
		left: 1300px;
	}
}


/* ==========================================================
   BRAND MODAL / DIALOG STYLING
   ========================================================== */
.rz-dialog, .rz-popup {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	z-index: 1050 !important; 
}
.modal-wrapper {
	background-color: var(--brand-white);
	color: var(--brand-black);
	border: 1px solid var(--grey-5);
	border-radius: 2px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	/*padding: 1.5rem 2rem;*/
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	position: relative;	
	animation: modal-fade-in 0.2s ease-out;
}

/* Dialog Headings */
.modal-wrapper h2, .modal-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--brand-black);
}

/* Dialog Content */
.modal-body, .rz-dialog-content {
	font-size: 0.95rem;
	color: #505050;
	line-height: 1.5;
}

/* Dialog Buttons */
.modal-actions, .rz-dialog-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* Dialog Buttons - Primary */
.modal-btn-primary, .rz-dialog-button.rz-button-primary {
	background-color: var(--brand-black);
	color: var(--brand-white);
	border: 1px solid var(--brand-black);
	font-weight: 600;
	padding: 0.4rem 1rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

	.modal-btn-primary:hover {
		background-color: var(--brand-green);
		border-color: var(--brand-green);
	}

/* Dialog Buttons - Secondary */
.modal-btn-secondary, .rz-dialog-button:not(.rz-button-primary) {
	background-color: transparent;
	color: var(--brand-black);
	border: 1px solid var(--brand-black);
	font-weight: 500;
	padding: 0.4rem 1rem;
	transition: all 0.2s ease;
}

	.modal-btn-secondary:hover {
		background-color: var(--grey-5);
	}

/* Dialog Close Button */
.modal-close, .rz-dialog-close {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--brand-black);
	color: var(--brand-white);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
}

	.modal-close:hover {
		background-color: var(--brand-green);
	}

/* Tooltip */
.tooltip, .rz-tooltip {
	background-color: var(--brand-black);
	color: var(--brand-white);
	font-size: 0.8rem;
	border-radius: 2px;
	padding: 0.5rem 0.75rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

	.tooltip::after {
		content: "";
		position: absolute;
		border-width: 6px;
		border-style: solid;
		border-color: var(--brand-black) transparent transparent transparent;
		bottom: -10px;
		left: 20px;
	}

/* Dialog Animations */
@keyframes modal-fade-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Overlay Background */
.modal-backdrop, .rz-overlay {
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
}

/* ==========================================================
   BRAND SPINNER
   ========================================================== */
.brand-spinner {
	color: var(--brand-green) !important;
	width: 2.5rem;
	height: 2.5rem;
	border-width: 0.25em;
}

	.brand-spinner .spinner-border {
		color: var(--brand-green) !important;
	}

/* ==========================================================
   ACTION BUTTONS (EDIT/DELETE)
   ========================================================== */
.action-btn {
	border: none !important;
	background: transparent !important;
	color: #444;
	transition: all 0.2s ease;
	border-radius: 6px;
	padding: 4px 8px !important;
}

	.action-btn:hover {
		background-color: #f1f1f1 !important;
		color: #000;
	}

.text-danger-hover:hover {
	color: #b00020 !important;
}

/* ==========================================================
   ADD BUTTON
   ========================================================== */
.add-btn {
	margin-left: 6px;
	padding: 2px 6px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #f8f9fa;
	color: #333;
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

	.add-btn:hover {
		background-color: #e9ecef;
		border-color: #999;
	}

/* ==========================================================
   TABS
   ========================================================== */
.soft-tabs {
	gap: 0.5rem;
}

.tab-btn {
	border: none;
	border-radius: 0.5rem 0.5rem 0 0;
	padding: 0.5rem 1rem;
	background-color: #f8f9fa;
	color: #495057;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: none;
	text-decoration: none;
}

	.tab-btn:hover {
		background-color: #e9ecef;
	}

	.tab-btn.active {
		background-color: #ffffff;
		color: var(--brand-green) !important;
		box-shadow: 0 4px 8px rgba(0,0,0,0.05);
	}

.soft-tab-content {
	background-color: #ffffff;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

/* ==========================================================
   LEFT NAVBAR (L-Navbar)
   ========================================================== */
.l-navbar {
	width: 220px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #f5f5f5;
	border: 1px solid #dee2e6;
	border-right: 1px solid var(--grey-5);
	box-shadow: rgba(0, 0, 0, 0.05) 4px 0 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 3px;
	transition: width 0.3s ease;
	z-index: 1000;
	text-align: center;
	font-size: 14px;
}

.l-navbar.collapsed {
	width: 70px;
}


/* Toggle icon */
#sidebar-closer {
	display: flex;
	justify-content: flex-end;
	color: var(--grey-1);
	transition: color 0.3s ease;
	position: absolute;
	top: -20px;
	right: 40px;
}

#sidebar-closer:hover {
	color: var(--brand-green);
}

/* Scrollable area */
.nav-scrollable {
	overflow-y: auto;
	flex-grow: 1;
}

/* Collapsed text behavior */
.nl-i {
	width: 24px;
	text-align: center;
	margin-right: 0.5rem;	
}

.nl-sp {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.l-navbar.collapsed .nl-sp {
	opacity: 0;
	transform: translateX(-10px);
	pointer-events: none;
}

.l-navbar.collapsed .nav-link {
	justify-content: center;
	padding: 0.6rem 0;
}

hr {
	margin: 1rem 0;
	height: 0; 
	border: 0; 
	border-top: 1px solid currentColor;
	opacity: .25; 
	background: none; 
}


@media (min-width: 768px) {
	.page-wrapper {
		width: calc(100% - 220px);
	}

	.l-navbar {
		width: 220px;
		font-size: 12px;
	}

		.l-navbar .nl-sp {
			display: inline;
			margin-left: 0.5rem;
		}

	.brand-t1, .brand-t2 {
		display: inline;
	}

	body.mini-navbar .l-navbar {
		width: 50px !important;
	}

	body.mini-navbar .page-wrapper {
		width: calc(100% - 50px) !important;
	}

	body.mini-navbar .l-navbar .nl-sp {
		display: none !important;
	}

	body.mini-navbar .brand-t1, body.mini-navbar .brand-t2 {
		display: none !important;
	}
}