/**
 * ============================================================================
 * ISO CLINIC - MICROSOFT FLUENT DESIGN SYSTEM 2 (WINDOWS 11) GLOBAL STYLESHEET
 * ============================================================================
 * High-Performance Edition: 60/120fps smooth scrolling, zero GPU raster jank,
 * solid Mica surfaces, disciplined corners, and instant snappy interactions.
 */

:root {
	/* --- Fluent 2 Color Palette --- */
	--fluent-blue: #0078d4;
	--fluent-blue-hover: #0f6cbd;
	--fluent-blue-active: #115ea3;
	--fluent-blue-subtle: rgba(0, 120, 212, 0.08);
	--fluent-blue-border: rgba(0, 120, 212, 0.22);
	--fluent-blue-glow: rgba(0, 120, 212, 0.2);

	--fluent-teal: #0d9488;
	--fluent-purple: #8764b8;
	--fluent-indigo: #4f46e5;
	
	/* Semantic Colors */
	--fluent-success: #107c41;
	--fluent-success-bg: rgba(16, 124, 65, 0.08);
	--fluent-success-border: rgba(16, 124, 65, 0.2);
	
	--fluent-warning: #b25e02;
	--fluent-warning-bg: rgba(178, 94, 2, 0.08);
	--fluent-warning-border: rgba(178, 94, 2, 0.2);
	
	--fluent-danger: #d13438;
	--fluent-danger-bg: rgba(209, 52, 56, 0.08);
	--fluent-danger-border: rgba(209, 52, 56, 0.2);

	--fluent-info: #0078d4;
	--fluent-info-bg: rgba(0, 120, 212, 0.08);
	--fluent-info-border: rgba(0, 120, 212, 0.2);

	/* Surface & Canvas Tokens (Solid Performance Surfaces) */
	--fluent-canvas-bg: #f4f6fa;
	--fluent-solid-card: #ffffff;
	
	--fluent-border-subtle: rgba(0, 0, 0, 0.07);
	--fluent-border-card: rgba(0, 0, 0, 0.07);
	--fluent-border-highlight: rgba(255, 255, 255, 0.9);
	
	/* Typography Tokens (Darker Grayscale Hierarchy for Crisp Legibility) */
	--fluent-text-primary: #0f172a;    /* Deep Slate 900 - main content, headings, table body */
	--fluent-text-secondary: #334155;  /* Slate 700 - table headers, labels, metadata */
	--fluent-text-muted: #475569;      /* Slate 600 - auxiliary notes, help text */
	--fluent-text-disabled: #1e293b;   /* Slate 800 - dark, easily readable disabled content */
	
	/* Corner Radius Discipline */
	--fluent-radius-xs: 4px;
	--fluent-radius-sm: 8px;
	--fluent-radius-md: 12px;
	--fluent-radius-lg: 16px;
	--fluent-radius-pill: 9999px;
	
	/* Ambient Elevation Shadows (Lightweight Math) */
	--fluent-elevation-2: 0 2px 6px -1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	--fluent-elevation-4: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
	--fluent-elevation-8: 0 8px 24px -4px rgba(0, 120, 212, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
	--fluent-elevation-16: 0 16px 36px -6px rgba(0, 120, 212, 0.12), 0 4px 14px rgba(0, 0, 0, 0.06);
	
	/* Targeted Fast Transitions */
	--fluent-ease: cubic-bezier(0.1, 0.9, 0.2, 1);
	--fluent-transition-fast: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	--fluent-transition-normal: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* --- Global Typography & Body Canvas --- */
body, html {
	font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
	color: var(--fluent-text-primary) !important;
	background-color: #f1f4f9 !important;
	background-image: 
		repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.022) 0px, rgba(15, 23, 42, 0.022) 1px, transparent 1px, transparent 4px),
		repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.022) 0px, rgba(15, 23, 42, 0.022) 1px, transparent 1px, transparent 4px),
		repeating-linear-gradient(45deg, rgba(0, 120, 212, 0.012) 0px, rgba(0, 120, 212, 0.012) 1px, transparent 1px, transparent 6px),
		radial-gradient(circle at 15% 10%, rgba(0, 120, 212, 0.035) 0%, transparent 45%),
		radial-gradient(circle at 85% 20%, rgba(96, 205, 255, 0.045) 0%, transparent 40%) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: #0f172a;
	font-weight: 700;
}

h1:not([class*="text-"]),
h2:not([class*="text-"]),
h3:not([class*="text-"]),
h4:not([class*="text-"]),
h5:not([class*="text-"]),
h6:not([class*="text-"]) {
	color: #0f172a !important;
}

.text-white, h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white,
.card-header.text-white, .card-header.text-white *,
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-danger, .card-header.bg-warning, .card-header.bg-info, .card-header.bg-dark,
.card-header.bg-primary *, .card-header.bg-success *, .card-header.bg-danger *, .card-header.bg-warning *, .card-header.bg-info *, .card-header.bg-dark * {
	color: #ffffff !important;
}

.text-muted, small.text-muted, div.text-muted, span.text-muted {
	color: var(--fluent-text-muted) !important;
}

.text-secondary {
	color: var(--fluent-text-secondary) !important;
}

.layout-page, .content-wrapper, .container-xxl {
	background: transparent !important;
}

/* Tactile Fabric & Linen Canvas Wrapper */
.layout-wrapper {
	background-color: #f1f4f9 !important;
	background-image: 
		repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.024) 0px, rgba(15, 23, 42, 0.024) 1px, transparent 1px, transparent 4px),
		repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.024) 0px, rgba(15, 23, 42, 0.024) 1px, transparent 1px, transparent 4px),
		repeating-linear-gradient(45deg, rgba(0, 120, 212, 0.012) 0px, rgba(0, 120, 212, 0.012) 1px, transparent 1px, transparent 6px),
		radial-gradient(circle at 15% 10%, rgba(0, 120, 212, 0.04) 0%, transparent 45%),
		radial-gradient(circle at 85% 20%, rgba(96, 205, 255, 0.045) 0%, transparent 40%) !important;
	background-attachment: fixed;
	min-height: 100vh;
}

/* Accessibility: Prevent invisible white-on-white text when .text-light is used on light surfaces */
.card .text-light,
.table .text-light,
.modal .text-light,
.form-control .text-light,
small.text-light,
span.text-light,
div.text-light:not(.bg-dark *):not(.bg-primary *):not(.bg-danger *):not(.btn-primary *):not(.btn-danger *) {
	color: #334155 !important;
}

/* --- Fluent Soft Tinted Surfaces (bg-label-*) --- */
.bg-label-primary, .card.bg-label-primary, .badge.bg-label-primary {
	background-color: rgba(0, 120, 212, 0.08) !important;
	color: #005a9e !important;
	border-color: rgba(0, 120, 212, 0.2) !important;
}
.bg-label-success, .card.bg-label-success, .badge.bg-label-success {
	background-color: rgba(16, 124, 65, 0.08) !important;
	color: #0e6b37 !important;
	border-color: rgba(16, 124, 65, 0.2) !important;
}
.bg-label-warning, .card.bg-label-warning, .badge.bg-label-warning {
	background-color: rgba(178, 94, 2, 0.08) !important;
	color: #8c4700 !important;
	border-color: rgba(178, 94, 2, 0.2) !important;
}
.bg-label-danger, .card.bg-label-danger, .badge.bg-label-danger {
	background-color: rgba(209, 52, 56, 0.08) !important;
	color: #b02a2e !important;
	border-color: rgba(209, 52, 56, 0.2) !important;
}
.bg-label-info, .card.bg-label-info, .badge.bg-label-info {
	background-color: rgba(0, 120, 212, 0.08) !important;
	color: #005a9e !important;
	border-color: rgba(0, 120, 212, 0.2) !important;
}
.bg-label-secondary, .card.bg-label-secondary, .badge.bg-label-secondary {
	background-color: #f1f5f9 !important;
	color: #334155 !important;
	border-color: #cbd5e1 !important;
}

/* Light / White Badges text contrast */
.badge.bg-light,
.badge.bg-white {
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
	border: 1px solid #cbd5e1 !important;
}

/* --- Windows 11 Slim Smooth Scrollbar --- */
::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.4);
	border-radius: var(--fluent-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, 0.7);
}

/* --- Top Navbar (Fluent Frosted Header) --- */
#layout-navbar {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.07) !important;
	border-radius: var(--fluent-radius-md) !important;
	box-shadow: var(--fluent-elevation-2) !important;
	margin-top: 0.75rem !important;
	position: relative !important;
	z-index: 1075 !important;
	transition: var(--fluent-transition-normal);
}

#layout-navbar .dropdown-menu,
.navbar-nav .dropdown-menu,
.dropdown-user .dropdown-menu {
	z-index: 1085 !important;
	position: absolute !important;
}

/* --- Sidebar Menu (Navigation Rail) --- */
#layout-menu {
	background: #ffffff !important;
	border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.02) !important;
}

#layout-menu .app-brand {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding: 1.25rem 1.5rem;
}

#layout-menu .menu-inner {
	padding: 0.5rem 0.75rem !important;
}

#layout-menu .menu-item .menu-link {
	border-radius: var(--fluent-radius-sm) !important;
	padding: 0.55rem 0.85rem !important;
	margin: 0.15rem 0 !important;
	color: var(--fluent-text-secondary) !important;
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	transition: var(--fluent-transition-fast) !important;
}

#layout-menu .menu-item .menu-link:hover {
	background: rgba(0, 120, 212, 0.06) !important;
	color: var(--fluent-blue) !important;
}

#layout-menu .menu-item.active > .menu-link,
#layout-menu .menu-item.open > .menu-link {
	background: var(--fluent-blue-subtle) !important;
	color: var(--fluent-blue) !important;
	font-weight: 600 !important;
	box-shadow: inset 3px 0 0 0 var(--fluent-blue);
}

#layout-menu .menu-sub .menu-link {
	padding-left: 2.25rem !important;
}

/* Submenu Toggle Chevron / Arrow Alignment */
.menu-vertical .menu-item .menu-toggle,
.menu-vertical .menu-item .menu-link.menu-toggle,
#layout-menu .menu-item .menu-link.menu-toggle {
	position: relative !important;
	padding-right: 3.25rem !important;
}

.menu-vertical .menu-item .menu-toggle::after,
.menu-vertical .menu-toggle::after,
.bg-menu-theme .menu-toggle::after,
.bg-menu-theme .menu-item .menu-toggle::after,
#layout-menu .menu-item .menu-link.menu-toggle::after,
#layout-menu .menu-toggle::after,
.menu-item .menu-toggle::after {
	position: absolute !important;
	right: 2.15rem !important;
	transition: transform 0.2s ease !important;
}

.menu-vertical .menu-sub .menu-item .menu-toggle::after,
#layout-menu .menu-sub .menu-item .menu-link.menu-toggle::after {
	right: 2.15rem !important;
}

#layout-menu .menu-header-text {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.8px !important;
	color: var(--fluent-text-muted) !important;
	text-transform: uppercase !important;
}

/* --- Top Status Bar Widgets (Fast Solid Surface) --- */
.fluent-status-widget {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.07) !important;
	border-radius: var(--fluent-radius-md) !important;
	padding: 0.75rem 1rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.85rem !important;
	box-shadow: var(--fluent-elevation-2) !important;
	transition: var(--fluent-transition-fast) !important;
	text-decoration: none !important;
	color: var(--fluent-text-primary) !important;
	height: 100% !important;
	min-height: 64px !important;
}

.fluent-status-widget:hover {
	background: #ffffff !important;
	border-color: rgba(0, 120, 212, 0.28) !important;
	box-shadow: var(--fluent-elevation-4) !important;
	color: var(--fluent-text-primary) !important;
}

.fluent-status-widget.is-clickable {
	cursor: pointer;
}

/* --- Card & Surfaces (Solid High-Speed Rendering) --- */
.card, .fluent-card {
	border: 1px solid var(--fluent-border-card) !important;
	border-radius: var(--fluent-radius-md) !important;
	box-shadow: var(--fluent-elevation-2) !important;
	transition: var(--fluent-transition-fast);
	margin-bottom: 1.5rem;
	position: relative;
}

.card:not([class*="bg-"]), .fluent-card:not([class*="bg-"]) {
	background: #ffffff !important;
}

/* Solid Colored Cards */
.card.bg-primary { background-color: var(--fluent-blue) !important; border-color: var(--fluent-blue) !important; color: #ffffff !important; }
.card.bg-success { background-color: var(--fluent-success) !important; border-color: var(--fluent-success) !important; color: #ffffff !important; }
.card.bg-warning { background-color: var(--fluent-warning) !important; border-color: var(--fluent-warning) !important; color: #ffffff !important; }
.card.bg-danger { background-color: var(--fluent-danger) !important; border-color: var(--fluent-danger) !important; color: #ffffff !important; }
.card.bg-info { background-color: var(--fluent-teal) !important; border-color: var(--fluent-teal) !important; color: #ffffff !important; }
.card.bg-dark { background-color: #1e293b !important; border-color: #1e293b !important; color: #ffffff !important; }

.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) h1,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) h2,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) h3,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) h4,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) h5,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) h6,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) .card-title,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) span,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) p,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) div {
	color: #ffffff;
}

.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) small,
.card[class*="bg-"]:not([class*="bg-label-"]):not(.bg-white):not(.bg-transparent):not(.bg-light) .text-muted {
	color: rgba(255, 255, 255, 0.85) !important;
}

.card:hover, .fluent-card:hover {
	box-shadow: var(--fluent-elevation-4) !important;
	border-color: rgba(0, 120, 212, 0.2) !important;
}

.transition-hover {
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.transition-hover:hover {
	background-color: #ffffff !important;
	border-color: rgba(0, 120, 212, 0.3) !important;
	box-shadow: 0 4px 14px -2px rgba(0, 120, 212, 0.12) !important;
}

.card-header:not([class*="bg-"]) {
	background: transparent !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	padding: 1rem 1.25rem !important;
	font-weight: 600;
	color: var(--fluent-text-primary);
}

.card-header[class*="bg-"] {
	font-weight: 600;
}

.card-body {
	padding: 1.25rem !important;
}

.card-footer {
	background: transparent !important;
	border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
	padding: 0.85rem 1.25rem !important;
}

/* Elevate card & table when it contains an open dropdown */
.card.has-open-dropdown,
.card:has(.dropdown.show),
.card:has(.show),
.fluent-card.has-open-dropdown,
.fluent-card:has(.dropdown.show),
.table-responsive.has-open-dropdown,
.table-responsive:has(.dropdown.show) {
	z-index: 1060 !important;
	overflow: visible !important;
}

/* --- Fluent Data Grids & Tables (High Contrast Dark Grayscale) --- */
.table-responsive {
	border-radius: var(--fluent-radius-sm);
}

.table-responsive.has-open-dropdown tbody,
.table-responsive.has-open-dropdown tr,
.table-responsive.has-open-dropdown td,
.table-responsive:has(.dropdown.show) tbody,
.table-responsive:has(.dropdown.show) tr,
.table-responsive:has(.dropdown.show) td {
	overflow: visible !important;
}

.table {
	color: var(--fluent-text-primary) !important;
	margin-bottom: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

.table thead th {
	background: #f1f5f9 !important;
	color: #0f172a !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	padding: 0.8rem 0.95rem !important;
	border-bottom: 2px solid #cbd5e1 !important;
	border-top: none !important;
}

.table tbody td {
	padding: 0.8rem 0.95rem !important;
	font-size: 0.875rem !important;
	color: #0f172a !important;
	font-weight: 500 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(248, 250, 252, 0.7) !important;
}

.table tbody tr:hover td {
	background-color: rgba(0, 120, 212, 0.05) !important;
	color: #000000 !important;
}

.table tbody td strong,
.table tbody td b,
.table strong,
.table b {
	color: #020617 !important;
	font-weight: 700 !important;
}

.table small,
.table .text-muted,
.table .small {
	color: #334155 !important;
	font-weight: 600 !important;
}

.table a:not(.btn):not(.badge) {
	color: #005a9e !important;
	font-weight: 600 !important;
}

.table a:not(.btn):not(.badge):hover {
	color: #004578 !important;
	text-decoration: underline !important;
}

/* --- Freeze Columns & Sticky Tables (100% Solid Opaque Surfaces) --- */
.table-freeze-container,
.table-freeze {
	max-height: 450px;
	overflow: auto !important;
	position: relative;
	background-color: #ffffff !important;
}

/* Sticky Header Rows */
.table-freeze-container thead th,
.table-freeze thead th,
.table thead th.sticky-col,
.table thead th[class*="sticky"] {
	position: sticky !important;
	top: 0 !important;
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
	z-index: 15 !important;
	box-shadow: inset 0 -2px 0 #cbd5e1, 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Freeze Column 1 (No / Icon / First Column) */
.table-freeze-container th:first-child,
.table-freeze th:first-child,
.table-freeze-container td:first-child,
.table-freeze td:first-child,
.table th.freeze-col-1,
.table td.freeze-col-1 {
	position: sticky !important;
	left: 0 !important;
	z-index: 12 !important;
}

/* Freeze Column 2 (Item Name / Description) */
.table-freeze-container th:nth-child(2),
.table-freeze th:nth-child(2),
.table-freeze-container td:nth-child(2),
.table-freeze td:nth-child(2),
.table th.freeze-col-2,
.table td.freeze-col-2 {
	position: sticky !important;
	left: 70px !important;
	z-index: 12 !important;
}

/* Top-Left Header Intersections (Sticky Top + Left) */
.table-freeze-container thead th:first-child,
.table-freeze thead th:first-child,
.table thead th.freeze-col-1,
.table-freeze-container thead th:nth-child(2),
.table-freeze thead th:nth-child(2),
.table thead th.freeze-col-2 {
	z-index: 25 !important;
	background-color: #f1f5f9 !important;
}

/* Solid Opaque Backgrounds on Freeze Body Cells */
.table-freeze-container tbody td:first-child,
.table-freeze-container tbody td:nth-child(2),
.table-freeze tbody td:first-child,
.table-freeze tbody td:nth-child(2),
.table tbody td.sticky-col,
.table tbody td[class*="sticky"] {
	background-color: #ffffff !important;
}

.table-striped .table-freeze-container tbody tr:nth-of-type(odd) td:first-child,
.table-striped .table-freeze-container tbody tr:nth-of-type(odd) td:nth-child(2),
.table-freeze-container .table-striped tbody tr:nth-of-type(odd) td:first-child,
.table-freeze-container .table-striped tbody tr:nth-of-type(odd) td:nth-child(2),
.table-freeze-container tbody tr:nth-of-type(odd) td:first-child,
.table-freeze-container tbody tr:nth-of-type(odd) td:nth-child(2),
.table.table-striped tbody tr:nth-of-type(odd) td.sticky-col {
	background-color: #f8fafc !important;
}

/* Hover State on Sticky Cells */
.table-freeze-container tbody tr:hover td:first-child,
.table-freeze-container tbody tr:hover td:nth-child(2),
.table-freeze tbody tr:hover td:first-child,
.table-freeze tbody tr:hover td:nth-child(2),
.table tbody tr:hover td.sticky-col {
	background-color: #eef5fc !important;
}

/* Right-Edge Shadow/Border on Last Frozen Column to separate from scrolling area */
.table-freeze-container th:nth-child(2),
.table-freeze-container td:nth-child(2),
.table-freeze th:nth-child(2),
.table-freeze td:nth-child(2),
.table th.freeze-last,
.table td.freeze-last {
	box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.12) !important;
	border-right: 1px solid #cbd5e1 !important;
}

/* --- Buttons & Action Controls --- */
.btn {
	border-radius: var(--fluent-radius-sm) !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	padding: 0.48rem 1.05rem !important;
	transition: var(--fluent-transition-fast) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.35rem !important;
	letter-spacing: 0.1px;
}

.btn:active {
	transform: scale(0.985) !important;
}

.btn-primary {
	background-color: var(--fluent-blue) !important;
	border-color: var(--fluent-blue) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 120, 212, 0.25) !important;
}

.btn-primary:hover {
	background-color: var(--fluent-blue-hover) !important;
	border-color: var(--fluent-blue-hover) !important;
	box-shadow: 0 4px 10px rgba(0, 120, 212, 0.32) !important;
}

.btn-success {
	background-color: var(--fluent-success) !important;
	border-color: var(--fluent-success) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(16, 124, 65, 0.22) !important;
}

.btn-warning {
	background-color: var(--fluent-warning) !important;
	border-color: var(--fluent-warning) !important;
	color: #ffffff !important;
}

.btn-danger {
	background-color: var(--fluent-danger) !important;
	border-color: var(--fluent-danger) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(209, 52, 56, 0.22) !important;
}

.btn-outline-primary {
	color: var(--fluent-blue) !important;
	border-color: var(--fluent-blue-border) !important;
	background: rgba(0, 120, 212, 0.04) !important;
}
.btn-outline-primary:hover {
	background-color: var(--fluent-blue) !important;
	border-color: var(--fluent-blue) !important;
	color: #ffffff !important;
}

.btn-outline-secondary {
	border-color: rgba(0, 0, 0, 0.15) !important;
	color: var(--fluent-text-primary) !important;
	background: #ffffff !important;
}
.btn-outline-secondary:hover {
	background: #f8fafc !important;
	border-color: var(--fluent-blue) !important;
	color: var(--fluent-blue) !important;
}

.btn-xs {
	padding: 0.2rem 0.55rem !important;
	font-size: 0.75rem !important;
	border-radius: var(--fluent-radius-xs) !important;
}

.btn-sm {
	padding: 0.35rem 0.75rem !important;
	font-size: 0.8125rem !important;
}

/* --- Form Controls & Inputs --- */
.form-control, .form-select {
	border-radius: var(--fluent-radius-sm) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	background-color: #ffffff !important;
	color: var(--fluent-text-primary) !important;
	font-size: 0.875rem !important;
	padding: 0.5rem 0.85rem !important;
	transition: var(--fluent-transition-fast) !important;
}

.form-control:focus, .form-select:focus {
	border-color: var(--fluent-blue) !important;
	box-shadow: 0 0 0 3px var(--fluent-blue-glow) !important;
	background-color: #ffffff !important;
	outline: none !important;
}

.input-group-text {
	border-radius: var(--fluent-radius-sm) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	background: #f8fafc !important;
	color: var(--fluent-text-secondary) !important;
}

/* --- Input Groups & Stepper Controls (Always Single-Line / No-Wrap) --- */
.input-group {
	flex-wrap: nowrap !important;
	display: flex !important;
	align-items: stretch !important;
}

.input-group > .btn,
.input-group > .input-group-text {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* Quantity Stepper (+/- Buttons & Input Container) */
.qty-wrapper,
.quantity-wrapper,
.input-group.qty-wrapper,
.table td .qty-wrapper,
.table td .input-group {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: fit-content !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

/* Stepper Buttons (- and +) */
.qty-btn,
.qty-wrapper .btn,
.qty-wrapper .qty-minus,
.qty-wrapper .qty-plus,
.input-group-sm > .btn.qty-btn,
.input-group > .btn.qty-btn,
.input-group:has(input[type="number"]) > .btn {
	flex: 0 0 auto !important;
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: 31px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

/* Stepper Input Number */
.qty-wrapper input,
.qty-wrapper input[type="number"],
.qty-wrapper .form-control,
.input-group.qty-wrapper input,
.input-group.qty-wrapper .form-control {
	flex: 0 0 auto !important;
	width: 52px !important;
	min-width: 42px !important;
	max-width: 60px !important;
	height: 31px !important;
	padding: 0.2rem 0.35rem !important;
	text-align: center !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	-moz-appearance: textfield !important;
}

.qty-wrapper input::-webkit-inner-spin-button,
.qty-wrapper input::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Quantity column in tables */
.table th.paket-quantity,
.table td.paket-quantity,
.table th[width*="Jumlah"],
.table th[width*="Qty"],
.table td:has(.qty-wrapper) {
	white-space: nowrap !important;
	min-width: 120px !important;
	text-align: center !important;
}

/* Modal Quantity Steppers */
.modal-body .input-group:has(#qtyLayananModal),
.modal-body .input-group:has(#qtyProdukModal),
.modal-body .input-group.justify-content-center {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	width: auto !important;
	align-items: center !important;
	justify-content: center !important;
}

.modal-body .input-group.justify-content-center .btn {
	width: 36px !important;
	min-width: 36px !important;
	height: 38px !important;
	padding: 0 !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	flex: 0 0 auto !important;
}

.modal-body .input-group.justify-content-center input {
	width: 75px !important;
	max-width: 80px !important;
	height: 38px !important;
	text-align: center !important;
	font-weight: 700 !important;
	flex: 0 0 auto !important;
}

.form-label {
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin-bottom: 0.35rem !important;
}

.form-text, .help-block, small.form-text {
	color: #334155 !important;
	font-weight: 500 !important;
	font-size: 0.8125rem !important;
}

/* --- Large Switch Toggle Component (Special emphasis for Finish / Status switches) --- */
.form-switch-lg .form-check-input,
.form-switch .form-check-input#ufinish,
#ufinish.form-check-input {
	width: 3.5rem !important;
	height: 1.95rem !important;
	cursor: pointer !important;
	border-radius: 2rem !important;
	background-size: contain !important;
	border: 1.5px solid rgba(0, 0, 0, 0.2) !important;
	transition: background-position 0.2s ease-in-out, background-color 0.2s ease, border-color 0.2s ease !important;
}

.form-switch-lg .form-check-input:checked,
.form-switch .form-check-input#ufinish:checked,
#ufinish.form-check-input:checked {
	background-color: var(--fluent-success) !important;
	border-color: var(--fluent-success) !important;
	box-shadow: 0 2px 8px rgba(16, 124, 65, 0.3) !important;
}

.form-switch-lg .form-check-label,
.form-switch:has(#ufinish) .form-check-label {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	cursor: pointer !important;
}

/* --- Darker Grayscale for Disabled Elements (High Contrast Legibility) --- */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled,
.form-control:disabled,
.form-select:disabled,
.form-control[readonly],
.btn:disabled,
.btn.disabled,
.disabled,
fieldset[disabled] .form-control,
fieldset[disabled] .form-select {
	color: #1e293b !important;
	-webkit-text-fill-color: #1e293b !important;
	background-color: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
	opacity: 0.95 !important;
	cursor: not-allowed !important;
	font-weight: 600 !important;
}

.form-control:disabled::placeholder,
.form-control[readonly]::placeholder {
	color: #475569 !important;
	opacity: 1 !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
	background-color: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
	color: #1e293b !important;
}

.select2-container--default.select2-container--disabled .select2-selection__rendered {
	color: #1e293b !important;
	font-weight: 600 !important;
}

.btn:disabled, .btn.disabled {
	color: #334155 !important;
	background-color: #e2e8f0 !important;
	border-color: #cbd5e1 !important;
	opacity: 0.88 !important;
}

/* --- Badges & Status Pills --- */
.badge {
	font-weight: 600 !important;
	font-size: 0.75rem !important;
	padding: 0.32rem 0.65rem !important;
	border-radius: var(--fluent-radius-pill) !important;
	letter-spacing: 0.2px;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	line-height: 1.1 !important;
}

.bg-label-primary, .badge.bg-primary {
	background: var(--fluent-blue-subtle) !important;
	color: var(--fluent-blue) !important;
	border: 1px solid var(--fluent-blue-border) !important;
}

.bg-label-success, .badge.bg-success {
	background: var(--fluent-success-bg) !important;
	color: var(--fluent-success) !important;
	border: 1px solid var(--fluent-success-border) !important;
}

.bg-label-warning, .badge.bg-warning {
	background: var(--fluent-warning-bg) !important;
	color: var(--fluent-warning) !important;
	border: 1px solid var(--fluent-warning-border) !important;
}

.bg-label-danger, .badge.bg-danger {
	background: var(--fluent-danger-bg) !important;
	color: var(--fluent-danger) !important;
	border: 1px solid var(--fluent-danger-border) !important;
}

.bg-label-secondary, .badge.bg-secondary {
	background: rgba(100, 116, 139, 0.08) !important;
	color: var(--fluent-text-secondary) !important;
	border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

.bg-label-info, .badge.bg-info {
	background: rgba(13, 148, 136, 0.08) !important;
	color: var(--fluent-teal) !important;
	border: 1px solid rgba(13, 148, 136, 0.2) !important;
}

/* --- Modals & Dialogs (Solid Surface) --- */
.modal-content {
	background-color: #ffffff !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: var(--fluent-radius-lg) !important;
	box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.modal-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	padding: 1.15rem 1.5rem !important;
}

.modal-title {
	font-weight: 700 !important;
	color: var(--fluent-text-primary) !important;
	font-size: 1.1rem !important;
}

.modal-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	padding: 0.9rem 1.5rem !important;
}

/* --- Alerts & Notifications --- */
.alert {
	border-radius: var(--fluent-radius-md) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 0.9rem 1.25rem !important;
	font-size: 0.875rem !important;
	box-shadow: var(--fluent-elevation-2) !important;
}

.alert-danger {
	border-left: 4px solid var(--fluent-danger) !important;
	background: #fff8f8 !important;
	color: #7f1d1d !important;
}

.alert-warning {
	border-left: 4px solid var(--fluent-warning) !important;
	background: #fffbf0 !important;
	color: #78350f !important;
}

.alert-success {
	border-left: 4px solid var(--fluent-success) !important;
	background: #f6fcf8 !important;
	color: #14532d !important;
}

.alert-primary, .alert-info {
	border-left: 4px solid var(--fluent-blue) !important;
	background: #f4f9ff !important;
	color: #0c4a6e !important;
}

/* --- Nav Tabs & Segmented Switchers --- */
.nav-tabs {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.nav-tabs .nav-link {
	border: none !important;
	border-bottom: 2px solid transparent !important;
	color: var(--fluent-text-secondary) !important;
	font-weight: 600 !important;
	padding: 0.65rem 1.15rem !important;
	transition: var(--fluent-transition-fast) !important;
}

.nav-tabs .nav-link:hover {
	color: var(--fluent-blue) !important;
	border-bottom-color: rgba(0, 120, 212, 0.3) !important;
}

.nav-tabs .nav-link.active {
	color: var(--fluent-blue) !important;
	border-bottom: 2px solid var(--fluent-blue) !important;
	background: transparent !important;
}

.nav-pills .nav-link {
	border-radius: var(--fluent-radius-sm) !important;
	color: var(--fluent-text-secondary) !important;
	font-weight: 600 !important;
	transition: var(--fluent-transition-fast) !important;
}

.nav-pills .nav-link.active {
	background-color: var(--fluent-blue) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0, 120, 212, 0.28) !important;
}

/* --- Dropdown Menus (Solid Instant Surface) --- */
.dropdown.show,
.btn-group.show {
	position: relative !important;
	z-index: 1070 !important;
}

.dropdown-menu {
	z-index: 1080 !important;
	border-radius: var(--fluent-radius-md) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.06) !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
	padding: 0.4rem !important;
	transform: none !important;
}

.dropdown-menu.show {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.dropdown-item {
	border-radius: var(--fluent-radius-xs) !important;
	padding: 0.55rem 0.95rem !important;
	font-size: 0.875rem !important;
	color: var(--fluent-text-primary) !important;
	transition: var(--fluent-transition-fast) !important;
	display: flex !important;
	align-items: center !important;
}

.dropdown-item:hover, .dropdown-item:focus {
	background-color: var(--fluent-blue-subtle) !important;
	color: var(--fluent-blue) !important;
}

/* --- Select2, Datepicker, Modal, Topbox Stacking --- */
.select2-container {
	z-index: 1050;
}

.select2-container--open {
	z-index: 1090 !important;
}

.select2-dropdown {
	z-index: 1090 !important;
	border-radius: var(--fluent-radius-sm) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.06) !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
	transform: none !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border-radius: var(--fluent-radius-sm) !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	min-height: 38px !important;
	padding: 4px 8px !important;
	background: #ffffff !important;
}

.select2-container--default .select2-results__option {
	padding: 0.5rem 0.85rem !important;
	font-size: 0.875rem !important;
	color: var(--fluent-text-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--fluent-blue) !important;
	color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--fluent-blue-subtle) !important;
	color: var(--fluent-blue) !important;
	font-weight: 600 !important;
}

/* jQuery UI Datepicker Fluent Styling */
#ui-datepicker-div,
.ui-datepicker {
	background-color: #ffffff !important;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: var(--fluent-radius-md) !important;
	box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.06) !important;
	z-index: 1095 !important;
	padding: 0.75rem !important;
	font-family: inherit !important;
}

.ui-datepicker .ui-datepicker-header {
	background: #f8fafc !important;
	border: none !important;
	border-radius: var(--fluent-radius-sm) !important;
	padding: 0.4rem 0.5rem !important;
	color: var(--fluent-text-primary) !important;
	font-weight: 600 !important;
}

.ui-datepicker .ui-datepicker-title {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--fluent-text-primary) !important;
}

.ui-datepicker table {
	margin: 0.4rem 0 0 0 !important;
}

.ui-datepicker th {
	color: var(--fluent-text-secondary) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	padding: 0.35rem !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
	border-radius: var(--fluent-radius-xs) !important;
	text-align: center !important;
	padding: 0.35rem 0.45rem !important;
	color: var(--fluent-text-primary) !important;
	font-size: 0.8125rem !important;
	border: none !important;
	background: transparent !important;
}

.ui-datepicker td a:hover {
	background: var(--fluent-blue-subtle) !important;
	color: var(--fluent-blue) !important;
}

.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight {
	background: var(--fluent-blue) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.flatpickr-calendar,
.xdsoft_datetimepicker {
	background-color: #ffffff !important;
	background: #ffffff !important;
	z-index: 1095 !important;
}

.topbox {
	z-index: 1110 !important;
	background-color: #ffffff !important;
}

.swal2-popup,
.swal2-container {
	z-index: 1120 !important;
	background-color: #ffffff !important;
}

.tooltip, .popover {
	z-index: 1130 !important;
}

/* --- Avatar & User Dropdown --- */
.avatar-initial {
	border-radius: var(--fluent-radius-sm) !important;
	font-weight: 600 !important;
}