/**
 * Microsoft Teams Theme for 4Mâini Carpatia Portal
 * Unified styling matching chat.php and modern Microsoft 365 / Teams design language
 */

/* =========================================================
   1. Root Variables & Reset
   ========================================================= */
:root {
	--teams-primary: #1672b9;
	--teams-primary-hover: #13619e;
	--teams-primary-active: #0f4e80;
	--teams-primary-light: #eaf3fb;
	--teams-primary-border: #cfe2f6;

	--teams-nav-bg: #182234;
	--teams-nav-hover: rgba(255, 255, 255, 0.09);
	--teams-nav-text: #e2e8f0;
	--teams-nav-text-muted: #94a3b8;
	--teams-nav-border: #24344d;

	--teams-sidebar-bg: #131c2a;
	--teams-sidebar-sub-bg: #0d1420;
	--teams-sidebar-hover: rgba(255, 255, 255, 0.07);
	--teams-sidebar-active: #1672b9;
	--teams-sidebar-text: #cbd5e1;
	--teams-sidebar-text-active: #ffffff;
	--teams-sidebar-border: #1f2d42;

	--teams-accent-green: #28a36a;
	--teams-accent-green-hover: #228b5a;
	--teams-accent-green-light: #eaf8f1;
	--teams-accent-green-border: #b7e8d0;

	--teams-danger: #dc2626;
	--teams-danger-light: #fef2f2;
	--teams-danger-border: #fecaca;
	--teams-danger-text: #991b1b;

	--teams-warning: #d97706;
	--teams-warning-light: #fffbeb;
	--teams-warning-border: #fde68a;
	--teams-warning-text: #92400e;

	--teams-info: #0284c7;
	--teams-info-light: #f0f9ff;
	--teams-info-border: #bae6fd;
	--teams-info-text: #075985;

	--teams-bg-body: #edf2f7;
	--teams-bg-card: #ffffff;
	--teams-bg-subtle: #f8fafc;
	--teams-bg-hover: #edf5ff;

	--teams-border-color: #cbd5e1;
	--teams-border-light: #e2e8f0;

	--teams-text-primary: #0f172a;
	--teams-text-secondary: #1e293b;
	--teams-text-muted: #475569;
	--teams-text-subtle: #64748b;

	--teams-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--teams-radius-sm: 6px;
	--teams-radius-md: 8px;
	--teams-radius-lg: 12px;
	--teams-radius-xl: 14px;
	--teams-radius-pill: 999px;

	--teams-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
	--teams-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.1);
	--teams-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
}

/* Base Body & Typography */
body {
	font-family: var(--teams-font-sans) !important;
	background: var(--teams-bg-body) !important;
	color: var(--teams-text-secondary) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--teams-font-sans) !important;
	color: var(--teams-text-primary) !important;
	font-weight: 600 !important;
	letter-spacing: -0.2px;
}

a {
	color: var(--teams-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover {
	color: var(--teams-primary-hover);
	text-decoration: none;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
	background: #94a3b8;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: #64748b;
}

/* =========================================================
   2. Top Navigation Bar (Microsoft Teams Dark Topbar)
   ========================================================= */
.navbar-fixed-top {
	z-index: 3100 !important;
}

.navbar-inner,
.navbar-inner.top-nav {
	background: var(--teams-nav-bg) !important;
	border: none !important;
	border-bottom: 2px solid #202d44 !important;
	box-shadow: 0 2px 10px rgba(10, 16, 26, 0.35) !important;
	border-radius: 0 !important;
	padding: 0 20px !important;
	min-height: 52px !important;
	display: flex !important;
	align-items: center !important;
	filter: none !important;
}

.top-nav {
	margin-left: 210px !important;
}

.navbar .branding {
	display: flex;
	align-items: center;
	padding: 4px 10px 4px 0;
}

.navbar .logo {
	float: none !important;
	height: auto !important;
	width: auto !important;
	display: flex;
	align-items: center;
}

.navbar .logo img {
	max-height: 32px !important;
	width: auto !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.navbar .nav.pull-right {
	display: flex;
	align-items: center;
	margin: 0 !important;
	gap: 6px;
}

.navbar .nav > li > a {
	color: var(--teams-nav-text) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	padding: 7px 12px !important;
	border-radius: var(--teams-radius-sm) !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	text-shadow: none !important;
}

.navbar .nav > li > a:hover,
.navbar .nav > li.dropdown.open > .dropdown-toggle {
	background: var(--teams-nav-hover) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar .nav > li > a .caret {
	border-top-color: var(--teams-nav-text-muted) !important;
	margin-top: 2px !important;
}
.navbar .nav > li > a:hover .caret,
.navbar .nav > li.dropdown.open > .dropdown-toggle .caret {
	border-top-color: #ffffff !important;
}

/* Modern Dropdown Menus */
.dropdown-menu {
	background: #ffffff !important;
	border: 1px solid var(--teams-border-color) !important;
	border-radius: var(--teams-radius-md) !important;
	box-shadow: var(--teams-shadow-lg) !important;
	padding: 6px !important;
	min-width: 190px !important;
	margin-top: 6px !important;
}

.dropdown-menu > li > a {
	padding: 8px 12px !important;
	color: var(--teams-text-secondary) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	border-radius: var(--teams-radius-sm) !important;
	transition: all 0.15s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--teams-bg-hover) !important;
	color: var(--teams-primary) !important;
	outline: none !important;
}

.dropdown-menu .divider {
	background-color: var(--teams-border-light) !important;
	border-bottom: none !important;
	margin: 6px 0 !important;
}

/* Administration mega menu */
.navbar .admin-mega-dropdown {
	position: relative;
}

.navbar .admin-mega-menu {
	right: auto !important;
	left: 0 !important;
	z-index: 3200;
	width: min(920px, calc(100vw - 24px));
	box-sizing: border-box;
}

.navbar .admin-mega-dropdown > .admin-mega-menu:before {
	right: auto !important;
	left: 12px !important;
}

.navbar .admin-mega-dropdown > .admin-mega-menu:after {
	right: auto !important;
	left: 13px !important;
}

.admin-mega-content {
	padding: 8px;
}

.admin-mega-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.admin-mega-column {
	min-width: 0;
	padding: 4px 14px;
	border-left: 1px solid var(--teams-border-light);
}

.admin-mega-column:first-child {
	border-left: 0;
}

.admin-mega-heading {
	margin: 0 0 8px;
	padding: 0 8px 8px;
	border-bottom: 1px solid var(--teams-border-light);
	color: var(--teams-text-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.admin-mega-column > a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	border-radius: var(--teams-radius-sm);
	color: var(--teams-text-secondary);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
}

.admin-mega-column > a:hover,
.admin-mega-column > a:focus {
	background: var(--teams-bg-hover);
	color: var(--teams-primary);
	outline: none;
}

.admin-mega-column > a > i {
	flex: 0 0 auto;
	margin-top: 1px;
}

@media screen and (max-width: 979px) {
	.navbar .admin-mega-menu {
		width: calc(100vw - 24px);
	}

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

	.admin-mega-column:nth-child(3) {
		border-left: 0;
	}
}

@media screen and (max-width: 600px) {
	.navbar .admin-mega-menu {
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}

	.admin-mega-grid {
		grid-template-columns: 1fr;
	}

	.admin-mega-column {
		padding: 8px 4px;
		border-top: 1px solid var(--teams-border-light);
		border-left: 0;
	}

	.admin-mega-column:first-child {
		border-top: 0;
	}
}

/* Search Box in Nav */
.top-search .input-prepend {
	margin: 0 !important;
}
.top-search input[type="text"] {
	background: #0f1622 !important;
	border: 1px solid #2a3b53 !important;
	border-radius: var(--teams-radius-sm) !important;
	color: #ffffff !important;
	padding: 5px 10px !important;
}
.top-search input[type="text"]:focus {
	background: #141d2d !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* =========================================================
   3. Sidebar (Microsoft Teams Dark Navigation Sidebar)
   ========================================================= */
#sidebar {
	background: var(--teams-sidebar-bg) !important;
	border-right: 1px solid var(--teams-sidebar-border) !important;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25) !important;
	width: 210px !important;
	top: 0 !important;
	padding-top: 52px !important;
	box-sizing: border-box !important;
}

.side-nav {
	padding: 14px 10px !important;
}

.side-nav > li {
	margin-bottom: 4px !important;
}

.side-nav > li > a {
	background: transparent !important;
	color: var(--teams-sidebar-text) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0.1px !important;
	padding: 10px 12px !important;
	border-radius: var(--teams-radius-sm) !important;
	border-left: 3px solid transparent !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	line-height: 1.3 !important;
	transition: all 0.2s ease !important;
	width: auto !important;
	filter: none !important;
}

.side-nav > li > a:hover {
	background: var(--teams-sidebar-hover) !important;
	color: #ffffff !important;
	border-left-color: #38bdf8 !important;
	width: auto !important;
}

.side-nav li a > .white-icons,
.side-nav li a:hover > .white-icons,
.navbar .nav > li > a .white-icons {
	background-image: url(../img/sprite-icons/icon-white.png) !important;
}

.side-nav > li.active > a {
	background: var(--teams-sidebar-active) !important;
	color: var(--teams-sidebar-text-active) !important;
	border-left-color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(22, 114, 185, 0.35) !important;
}

/* Submenu Accordion */
.side-nav li ul.acitem {
	background: var(--teams-sidebar-sub-bg) !important;
	border-left: 2px solid #2563eb !important;
	margin: 4px 0 8px 12px !important;
	padding: 4px 0 !important;
	border-radius: 0 var(--teams-radius-sm) var(--teams-radius-sm) 0 !important;
}

.side-nav li ul.acitem li a {
	background: transparent !important;
	color: #94a3b8 !important;
	font-size: 12px !important;
	padding: 8px 14px !important;
	border-radius: var(--teams-radius-sm) !important;
	display: block !important;
	transition: all 0.15s ease !important;
	border: none !important;
}

.side-nav li ul.acitem li a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
}

.side-nav li ul.acitem li a .sidenav-icon {
	display: none !important;
}

/* Notification / Rank Badges */
.alert-noty {
	background: #1e3a5f !important;
	color: #38bdf8 !important;
	border: 1px solid #2563eb !important;
	border-radius: var(--teams-radius-pill) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	padding: 2px 8px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-left: auto !important;
}

/* =========================================================
   4. Main Content Area & Breadcrumbs
   ========================================================= */
#main-content {
	margin-left: 210px !important;
	background: var(--teams-bg-body) !important;
	min-height: calc(100vh - 52px) !important;
	padding: 20px 24px 34px !important;
	box-sizing: border-box !important;
}

.breadcrumb {
	background: #ffffff !important;
	border: 1px solid var(--teams-border-color) !important;
	border-radius: var(--teams-radius-md) !important;
	box-shadow: var(--teams-shadow-sm) !important;
	padding: 10px 16px !important;
	margin-bottom: 22px !important;
	font-size: 12.5px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.breadcrumb li a {
	color: var(--teams-primary) !important;
	font-weight: 600 !important;
}

.breadcrumb .divider {
	color: var(--teams-text-subtle) !important;
	padding: 0 4px !important;
}

.breadcrumb .active {
	color: var(--teams-text-muted) !important;
	font-weight: 600 !important;
}

/* =========================================================
   5. Cards, Widgets & Containers
   ========================================================= */
.widget-block {
	background: var(--teams-bg-card) !important;
	border: 1px solid var(--teams-border-color) !important;
	border-radius: var(--teams-radius-lg) !important;
	box-shadow: var(--teams-shadow-sm) !important;
	margin-bottom: 22px !important;
	overflow: hidden !important;
	transition: box-shadow 0.2s ease !important;
}

.widget-block:hover {
	box-shadow: var(--teams-shadow-md) !important;
}

.widget-head {
	background: #ffffff !important;
	border-bottom: 1px solid var(--teams-border-light) !important;
	padding: 12px 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	position: relative !important;
}

.widget-head::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--teams-primary) 0%, #3182ce 100%);
}

.widget-head h5 {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--teams-text-primary) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.widget-content {
	padding: 16px 18px !important;
}

.widget-box {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.well, .white-box {
	background: #ffffff !important;
	border: 1px solid var(--teams-border-light) !important;
	border-radius: var(--teams-radius-md) !important;
	box-shadow: none !important;
	padding: 14px !important;
}

/* =========================================================
   6. Tabs (Microsoft Teams Underline Style)
   ========================================================= */
.box-tab {
	background: var(--teams-bg-card) !important;
	border: 1px solid var(--teams-border-color) !important;
	border-radius: var(--teams-radius-lg) !important;
	box-shadow: var(--teams-shadow-sm) !important;
	overflow: hidden !important;
	margin-bottom: 22px !important;
}

.nav-tabs {
	border-bottom: 1px solid var(--teams-border-color) !important;
	background: #ffffff !important;
	padding: 6px 14px 0 !important;
	margin-bottom: 0 !important;
	display: flex !important;
	gap: 4px !important;
}

.nav-tabs > li > a {
	border: none !important;
	background: transparent !important;
	color: var(--teams-text-muted) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 16px !important;
	border-radius: var(--teams-radius-sm) var(--teams-radius-sm) 0 0 !important;
	position: relative !important;
	transition: all 0.2s ease !important;
	border-bottom: 3px solid transparent !important;
	margin: 0 !important;
}

.nav-tabs > li > a:hover {
	color: var(--teams-primary) !important;
	background: var(--teams-bg-hover) !important;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
	color: var(--teams-primary) !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 3px solid var(--teams-primary) !important;
}

.tab-content {
	padding: 18px !important;
	background: #ffffff !important;
}

/* =========================================================
   7. Buttons (Teams Theme Colors)
   ========================================================= */
.btn {
	font-family: var(--teams-font-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: var(--teams-radius-sm) !important;
	padding: 6px 14px !important;
	line-height: 1.42857 !important;
	transition: all 0.2s ease !important;
	border: 1px solid transparent !important;
	box-shadow: var(--teams-shadow-sm) !important;
	text-shadow: none !important;
	filter: none !important;
}

.btn-primary {
	background: var(--teams-primary) !important;
	border-color: var(--teams-primary-hover) !important;
	color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
	background: var(--teams-primary-hover) !important;
	border-color: var(--teams-primary-active) !important;
	color: #ffffff !important;
}

.btn-success {
	background: var(--teams-accent-green) !important;
	border-color: var(--teams-accent-green-hover) !important;
	color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus {
	background: var(--teams-accent-green-hover) !important;
	color: #ffffff !important;
}

.btn-danger {
	background: var(--teams-danger) !important;
	border-color: #b91c1c !important;
	color: #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus {
	background: #b91c1c !important;
	color: #ffffff !important;
}

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

.btn-info {
	background: var(--teams-info) !important;
	border-color: #0369a1 !important;
	color: #ffffff !important;
}

.btn-inverse {
	background: #334155 !important;
	border-color: #1e293b !important;
	color: #ffffff !important;
}

/* =========================================================
   8. Form Controls & Inputs
   ========================================================= */
input[type="text"]:not(.teams-input),
input[type="password"]:not(.teams-input),
input[type="email"]:not(.teams-input),
input[type="number"]:not(.teams-input),
input[type="search"]:not(.teams-input),
select,
textarea {
	font-family: var(--teams-font-sans) !important;
	background: var(--teams-bg-subtle) !important;
	border: 1.5px solid #dbe3eb !important;
	border-radius: var(--teams-radius-sm) !important;
	padding: 7px 11px !important;
	font-size: 13px !important;
	color: var(--teams-text-secondary) !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	outline: none !important;
}

input[type="text"]:not(.teams-input):focus,
input[type="password"]:not(.teams-input):focus,
input[type="email"]:not(.teams-input):focus,
input[type="number"]:not(.teams-input):focus,
input[type="search"]:not(.teams-input):focus,
select:focus,
textarea:focus {
	background: #ffffff !important;
	border-color: var(--teams-primary) !important;
	box-shadow: 0 0 0 3px rgba(22, 114, 185, 0.15) !important;
}

label,
.control-label {
	font-weight: 600 !important;
	color: var(--teams-text-primary) !important;
	font-size: 13px !important;
	margin-bottom: 5px !important;
}

.control-group {
	margin-bottom: 16px !important;
}

/* =========================================================
   9. Tables & DataTables
   ========================================================= */
.table {
	background: #ffffff !important;
	border-radius: var(--teams-radius-md) !important;
	overflow: hidden !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1px solid var(--teams-border-color) !important;
}

.table th {
	background: var(--teams-bg-subtle) !important;
	color: var(--teams-text-muted) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border-bottom: 1px solid var(--teams-border-color) !important;
	border-top: none !important;
	padding: 10px 12px !important;
}

.table td {
	padding: 10px 12px !important;
	border-top: 1px solid var(--teams-border-light) !important;
	color: var(--teams-text-secondary) !important;
	vertical-align: middle !important;
}

.table-striped tbody > tr:nth-child(odd) > td {
	background-color: #fafbfd !important;
}

.table-hover tbody tr:hover > td {
	background-color: var(--teams-bg-hover) !important;
}

/* Pagination */
.pagination ul {
	box-shadow: none !important;
	display: flex !important;
	gap: 4px !important;
}

.pagination li a {
	background: #ffffff !important;
	border: 1px solid var(--teams-border-color) !important;
	border-radius: var(--teams-radius-sm) !important;
	color: var(--teams-text-secondary) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	padding: 5px 11px !important;
	transition: all 0.15s ease !important;
	filter: none !important;
}

.pagination li a:hover,
.pagination li.active a {
	background: var(--teams-primary) !important;
	border-color: var(--teams-primary) !important;
	color: #ffffff !important;
}

/* =========================================================
   10. Alerts & Badges
   ========================================================= */
.alert {
	border-radius: var(--teams-radius-md) !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
	border: 1px solid transparent !important;
	text-shadow: none !important;
}

.alert-success {
	background-color: var(--teams-accent-green-light) !important;
	border-color: var(--teams-accent-green-border) !important;
	color: #14532d !important;
}

.alert-danger,
.alert-error {
	background-color: var(--teams-danger-light) !important;
	border-color: var(--teams-danger-border) !important;
	color: var(--teams-danger-text) !important;
}

.alert-info {
	background-color: var(--teams-info-light) !important;
	border-color: var(--teams-info-border) !important;
	color: var(--teams-info-text) !important;
}

.alert-warning {
	background-color: var(--teams-warning-light) !important;
	border-color: var(--teams-warning-border) !important;
	color: var(--teams-warning-text) !important;
}

.badge, .label {
	font-family: var(--teams-font-sans) !important;
	font-weight: 600 !important;
	padding: 3px 8px !important;
	border-radius: var(--teams-radius-pill) !important;
	text-shadow: none !important;
	font-size: 11px !important;
}

.badge-info, .label-info {
	background-color: var(--teams-primary-light) !important;
	color: var(--teams-primary) !important;
	border: 1px solid var(--teams-primary-border) !important;
}

.badge-success, .label-success {
	background-color: var(--teams-accent-green-light) !important;
	color: var(--teams-accent-green) !important;
	border: 1px solid var(--teams-accent-green-border) !important;
}

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

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

/* =========================================================
   11. Modals & Dialogs
   ========================================================= */
.modal {
	border-radius: var(--teams-radius-xl) !important;
	border: 1px solid var(--teams-border-color) !important;
	box-shadow: var(--teams-shadow-lg) !important;
	overflow: hidden !important;
	background: #ffffff !important;
}

.modal-header {
	background: #ffffff !important;
	border-bottom: 1px solid var(--teams-border-light) !important;
	padding: 14px 20px !important;
}

.modal-header h3 {
	font-size: 17px !important;
	color: var(--teams-text-primary) !important;
	margin: 0 !important;
}

.modal-body {
	padding: 20px !important;
	color: var(--teams-text-secondary) !important;
}

.modal-footer {
	background: var(--teams-bg-subtle) !important;
	border-top: 1px solid var(--teams-border-light) !important;
	padding: 12px 20px !important;
	box-shadow: none !important;
	border-radius: 0 0 var(--teams-radius-xl) var(--teams-radius-xl) !important;
}

/* =========================================================
   12. Microsoft Teams Login Page & Components
   ========================================================= */
body.teams-login-body {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--teams-font-sans) !important;
	background: #f4f7fb radial-gradient(1200px circle at 50% 15%, #eaf3fb 0%, #f4f7fb 55%, #e5eef7 100%) no-repeat fixed !important;
	color: var(--teams-text-secondary) !important;
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;
}

.teams-topbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #ffffff;
	border-bottom: 1px solid var(--teams-border-color);
	box-shadow: var(--teams-shadow-sm);
	height: 56px;
	display: flex;
	align-items: center;
}

.teams-topbar-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

.teams-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.teams-brand img {
	height: 32px;
	width: auto;
	display: block;
}

.teams-brand-divider {
	width: 1px;
	height: 20px;
	background: var(--teams-border-color);
}

.teams-brand-title {
	font-size: 13px;
	font-weight: 600;
	color: #526171;
	letter-spacing: 0.2px;
}

.teams-topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.teams-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--teams-accent-green);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	background: var(--teams-accent-green-light);
	padding: 4px 10px;
	border-radius: var(--teams-radius-pill);
	border: 1px solid var(--teams-accent-green-border);
}

.teams-live-badge span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teams-accent-green);
	animation: teams-live-pulse 2s ease-in-out infinite;
}

@keyframes teams-live-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(40, 163, 106, 0.4); opacity: 1; }
	50% { box-shadow: 0 0 0 4px rgba(40, 163, 106, 0); opacity: .7; }
}

.teams-exit-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid #dfe7f0;
	background: var(--teams-bg-subtle);
	color: #526171;
	border-radius: var(--teams-radius-sm);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all .2s ease;
}

.teams-exit-btn:hover {
	background: var(--teams-bg-hover);
	border-color: var(--teams-primary-border);
	color: var(--teams-primary);
}

.teams-login-wrapper {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 16px 40px;
	box-sizing: border-box;
}

.teams-login-card {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: var(--teams-radius-xl);
	border: 1px solid var(--teams-border-color);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.09), 0 2px 8px rgba(28, 43, 58, 0.04);
	padding: 32px 30px 28px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.teams-login-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--teams-primary) 0%, #3182ce 100%);
}

.teams-card-header {
	text-align: center;
	margin-bottom: 24px;
}

.teams-avatar-badge {
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--teams-primary-light);
	border: 2px solid #d4e6f8;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teams-primary);
}

.teams-card-title {
	margin: 0 0 6px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--teams-text-primary) !important;
	letter-spacing: -0.2px;
}

.teams-card-subtitle {
	margin: 0;
	font-size: 13px;
	color: var(--teams-text-muted);
	line-height: 1.4;
}

.teams-login-form {
	margin: 0;
}

.teams-form-group {
	margin-bottom: 18px;
}

.teams-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--teams-text-secondary);
}

.teams-input-wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.teams-input-icon {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #94a3b8 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	pointer-events: none !important;
	transition: color .2s ease !important;
	z-index: 5 !important;
	line-height: 1 !important;
}

.teams-input-icon svg,
.teams-avatar-badge svg,
.teams-alert-icon svg,
.teams-card-footer svg,
.teams-exit-btn svg,
.teams-btn-primary svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	max-width: none !important;
	max-height: none !important;
	flex-shrink: 0 !important;
}

.teams-btn-primary svg,
.teams-exit-btn svg {
	width: 15px !important;
	height: 15px !important;
}

.teams-avatar-badge svg {
	width: 24px !important;
	height: 24px !important;
}

.teams-card-footer svg {
	width: 14px !important;
	height: 14px !important;
}

/* Hide native Edge/IE password reveal icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.teams-login-form .teams-input,
.teams-input-wrapper input.teams-input,
.teams-input-wrapper input[type="text"].teams-input,
.teams-input-wrapper input[type="password"].teams-input,
.teams-input {
	width: 100% !important;
	max-width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	line-height: 22px !important;
	padding: 10px 14px 10px 48px !important;
	padding-left: 48px !important;
	padding-right: 14px !important;
	background: var(--teams-bg-subtle) !important;
	border: 1.5px solid #dbe3eb !important;
	border-radius: var(--teams-radius-md) !important;
	font-size: 14px !important;
	color: var(--teams-text-secondary) !important;
	box-sizing: border-box !important;
	outline: none !important;
	margin: 0 !important;
	display: block !important;
	transition: all .2s ease !important;
	box-shadow: none !important;
}

.teams-input:focus {
	background: #ffffff !important;
	border-color: var(--teams-primary) !important;
	box-shadow: 0 0 0 3px rgba(22, 114, 185, 0.15) !important;
}

.teams-input-wrapper:focus-within .teams-input-icon {
	color: var(--teams-primary) !important;
}

.teams-input::placeholder {
	color: var(--teams-text-subtle);
	opacity: 1;
}

.teams-login-form .teams-input-password,
.teams-input-wrapper input[type="password"].teams-input-password,
.teams-input-password {
	padding-right: 48px !important;
}

.teams-password-toggle {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	border: none !important;
	padding: 6px !important;
	cursor: pointer !important;
	color: var(--teams-text-muted) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 4px !important;
	z-index: 5 !important;
	line-height: 1 !important;
	transition: color .2s ease !important;
}

.teams-password-toggle:hover {
	color: var(--teams-primary) !important;
}

.teams-password-toggle svg {
	width: 18px !important;
	height: 18px !important;
	max-width: none !important;
	max-height: none !important;
	flex-shrink: 0 !important;
}

.teams-password-toggle .icon-eye {
	display: block !important;
}

.teams-password-toggle .icon-eye-off {
	display: none !important;
}

.teams-password-toggle.is-active .icon-eye {
	display: none !important;
}

.teams-password-toggle.is-active .icon-eye-off {
	display: block !important;
}

.teams-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--teams-radius-md);
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.4;
	box-sizing: border-box;
}

.teams-alert-danger {
	background: var(--teams-danger-light);
	border: 1px solid var(--teams-danger-border);
	color: var(--teams-danger-text);
}

.teams-alert-icon {
	flex: 0 0 18px;
	margin-top: 1px;
	color: var(--teams-danger);
}

.teams-alert-content {
	flex: 1 1 auto;
}
.teams-alert-content p {
	margin: 0;
}
.teams-alert-content ul {
	margin: 0;
	padding-left: 18px;
}
.teams-alert-content li {
	margin-bottom: 2px;
}
.teams-alert-content li:last-child {
	margin-bottom: 0;
}

.teams-form-actions {
	margin-top: 24px;
}

.teams-btn-primary {
	width: 100% !important;
	height: 44px !important;
	background: var(--teams-primary) !important;
	border: 1px solid var(--teams-primary-hover) !important;
	border-radius: var(--teams-radius-md) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: 0 2px 6px rgba(22, 114, 185, 0.25) !important;
	transition: all .2s ease !important;
	box-sizing: border-box !important;
	text-shadow: none !important;
}

.teams-btn-primary:hover {
	background: var(--teams-primary-hover) !important;
	border-color: var(--teams-primary-active) !important;
	box-shadow: 0 4px 10px rgba(22, 114, 185, 0.35) !important;
}

.teams-btn-primary:active {
	background: var(--teams-primary-active) !important;
	transform: translateY(1px);
}

.teams-btn-primary .btn-icon {
	display: flex;
	align-items: center;
	transition: transform .2s ease;
}

.teams-btn-primary:hover .btn-icon {
	transform: translateX(3px);
}

.teams-card-footer {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #edf2f7;
	text-align: center;
	font-size: 12px;
	color: var(--teams-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.teams-footer-note {
	margin-top: 24px;
	text-align: center;
	font-size: 12px;
	color: var(--teams-text-muted);
}

.teams-register-card .teams-input {
	padding-left: 14px !important;
}

.teams-register-card .teams-card-header {
	margin-bottom: 22px;
}

@media (max-width: 480px) {
	.teams-login-card {
		padding: 24px 20px 20px;
		border-radius: 12px;
	}
	.teams-brand-title {
		display: none;
	}
}