/* Imports */
/* Icons */
/* @import url("https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css"); */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
 * Brand palette - sampled straight from the Ziqtel logo (public/assets/images/logo.png).
 * Blue carries the UI (buttons, links, active states); the orange/red end of the
 * logo gradient is the accent, reused for the warning/pending states.
 */
:root {
	--white: #fff;
	--black: #000;
	--theme-color: #183060;
	/* logo deep navy - headings, sidebar */
	--theme-color-soft: #1E4278;
	--primary: #106098;
	/* logo blue - buttons, links, active */
	--primary-dark: #0C4E7D;
	--primary-light: #2B8FD4;
	--primary-tint: #D6E7F3;
	--primary-tint-soft: #EDF4FA;
	--accent: #E8752A;
	/* logo orange */
	--accent-warm: #E89028;
	--accent-hot: #E04020;
	--accent-deep: #B45F14;
	/* darkened orange - only where white text sits on top */
	--secondary: #333333;
	--grey: #656565;
}

::selection {
	background-color: var(--secondary);
	color: var(--white);
}

/* General Styling */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none !important;
	list-style-type: none;
	font-family: "Inter", sans-serif;
}

html {
	scroll-behavior: smooth;
}


body {
	background: #F1F4F8;
	overflow-x: clip;
}

a,
button {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	display: inline-block;
}

ul,
ol,
dl,
address,
label,
figure {
	margin-bottom: 0;
	padding: 0;
}

p {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75;
	color: var(--grey);
}

/* ThemeBtn Start */

.themeBtn {
	width: fit-content;
	background-color: var(--primary);
	color: var(--white);
	border: 1px solid transparent;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	text-transform: capitalize;
	text-align: center;
	padding: 0.65rem 1.5rem;
}

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

.themeBtn--border {
	background: transparent;
	border-color: var(--grey);
	color: var(--grey);
}

.themeBtn--border:hover {
	border-color: var(--grey);
	color: var(--white);
}

.themeBtn--grey {
	background: #E5E7EB;
	color: var(--secondary);
}

.themeBtn--grey:hover {
	background: var(--secondary);
	color: var(--white);
}

.themeBtn--outline {
	background: var(--white);
	border-color: var(--primary);
	color: var(--primary);
}

.themeBtn--outline:hover {
	background: var(--primary);
	color: var(--white);
}

/* ThemeBtn End */

/* Headings Start */

.heading {
	font-size: 1.75rem;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--black);
	margin-bottom: 0.25rem;
}

.subHeading {
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 0;
}

/* Headings End */

/* Dashboard Wrapper Start */

.dashboard-wrapper {
	width: 100%;
	min-height: 100vh;
	display: flex;
}

.dashboard-content {
	width: calc(100% - 250px);
	padding: 2rem 2rem;
}

/* Dashboard Wrapper End */

/* Sidebar Start */

.dashboard-sidebar {
	min-width: 250px;
	max-width: 250px;
	background: var(--white);
	box-shadow: 0 0 20px 1px #00000020;
	padding: 2rem 1rem;
	/* Column layout so the Need Help button sits below the menu, pushed to the
	   bottom by .dashboard-sidebar__list growing into the leftover space. */
	display: flex;
	flex-direction: column;
	/* Pin to the viewport. align-self is required: a flex child stretches to the
	   full row height by default, and a stretched item has no room to stick - so
	   on a long page the menu would scroll away and Need Help would strand at the
	   very bottom of the document. Its own height then makes it scroll instead. */
	align-self: flex-start;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.dashboard-sidebar__list {
	flex: 1;
}

.dashboard-sidebar.active {
	left: 0;
}

.dashboard-sidebar__logo {
	width: 150px;
	display: block;
	flex-shrink: 0;
	margin: 0 auto 1.5rem;
}

.dashboard-sidebar__logo img {
	width: 100%;
}

.dashboard-sidebar__list>li+li {
	margin-top: 0.15rem;
}

.dashboard-sidebar__list>li>a {
	font-size: 0.85rem;
	font-weight: 500;
	background: transparent;
	color: var(--secondary);
	border-radius: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.85rem;
	position: relative;
	transition: all 200ms linear;
}

.dashboard-sidebar__list>li>a img {
	filter: brightness(0);
	transition: all 300ms ease-in-out;
}

/* Fixed box so the labels line up regardless of glyph width */
.dashboard-sidebar__list>li>a>i {
	width: 18px;
	font-size: 0.9rem;
	text-align: center;
	color: var(--grey);
	flex-shrink: 0;
	transition: color 200ms linear;
}

.dashboard-sidebar__list>li>a:hover {
	background: #EDF4FA;
	color: var(--primary);
}

.dashboard-sidebar__list>li>a:hover>i {
	color: var(--primary);
}

/* Current page */
.dashboard-sidebar__list>li>a.active {
	background: var(--theme-color);
	color: var(--white);
	font-weight: 600;
}

/* Orange marker on the active item - the accent half of the logo */
.dashboard-sidebar__list>li>a.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4rem;
	bottom: 0.4rem;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--accent-warm), var(--accent-hot));
}

.dashboard-sidebar__list>li>a.active>i {
	color: var(--white);
}

.dashboard-sidebar__list>li>a:is(:hover, .active) img {
	filter: brightness(0) invert(1);
}

/* Open dropdown parent */
.dashboard-sidebar__list>li.collapse-dropdown>a:not(.collapsed) {
	background: #EDF4FA;
	color: var(--primary);
	font-weight: 600;
}

.dashboard-sidebar__list>li.collapse-dropdown>a:not(.collapsed)>i {
	color: var(--primary);
}

.dashboard-sidebar__divider {
	height: 1px;
	background: #e5e7eb;
	margin: 0.85rem 0.25rem !important;
}

.collapse-dropdown>a::after {
	position: absolute;
	top: 50%;
	right: 1rem;
}

.collapse-dropdown>div>ul {
	border-left: 2px solid #e5e7eb;
	padding: 0.35rem 0 0.35rem 1rem;
	margin: 0.4rem 0 0 1.6rem;
}

.collapse-dropdown>div>ul>li+li {
	margin-top: 0.15rem;
}

.collapse-dropdown>div>ul>li>a {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	border-radius: 0.35rem;
	padding: 0.35rem 0.6rem;
	transition: all 200ms linear;
}

.collapse-dropdown>div>ul>li>a:hover {
	color: var(--primary);
}

.collapse-dropdown>div>ul>li>a.active {
	background: #EDF4FA;
	color: var(--primary);
	font-weight: 600;
}

/* Need Help */
.dashboard-sidebar__help {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--primary);
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--white);
	text-align: center;
	padding: 0.75rem 1rem;
	margin-top: 1.5rem;
	flex-shrink: 0;
	transition: all 200ms linear;
}

.dashboard-sidebar__help:hover {
	background: var(--theme-color);
	color: var(--white);
}

/* Sidebar End */

/* Header Start */

.header {
	background: var(--white);
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 0 20px 1px #00000020;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.header-content p {
	margin: 0;
}

.header-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.header-links__notification {
	width: 50px;
	aspect-ratio: 1;
	background: #EBEBEB;
	color: var(--black);
	font-size: 1.25rem;
	border-radius: 100%;
	display: grid;
	place-items: center;
	position: relative;
}

.header-links__notification::before {
	content: '';
	width: 7px;
	aspect-ratio: 1;
	background: #FF0000;
	border-radius: 100%;
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
}

/* Notification Dropdown Start */

.notification-dropdown {
	position: relative;
}

.notification-dropdown-menu {
	position: absolute;
	top: calc(100% + 1rem);
	right: 0;
	width: 380px;
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	display: none;
	z-index: 1000;
	max-height: 500px;
	overflow: hidden;
	flex-direction: column;
}

.notification-dropdown-menu.active {
	display: flex;
}

.notification-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #E5E7EB;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.notification-header h5 {
	font-size: 16px;
	font-weight: 600;
	color: var(--secondary);
	margin: 0;
}

.notification-count {
	background: var(--primary);
	color: var(--white);
	font-size: 12px;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 12px;
	min-width: 24px;
	text-align: center;
}

.notification-list {
	max-height: 400px;
	overflow-y: auto;
	padding: 0.5rem 0;
}

.notification-item {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #F3F4F6;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.notification-item:hover {
	background-color: #F9FAFB;
}

.notification-item.unread {
	background-color: #EBF5FF;
}

.notification-item.unread:hover {
	background-color: #D6E7F3;
}

.notification-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.notification-content {
	flex: 1;
}

.notification-content h6 {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 0.25rem 0;
}

.notification-content p {
	font-size: 13px;
	color: var(--grey);
	margin: 0 0 0.5rem 0;
	line-height: 1.4;
}

.notification-time {
	font-size: 12px;
	color: #9CA3AF;
}

.notification-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid #E5E7EB;
	text-align: center;
}

.view-all-notifications {
	color: var(--primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.view-all-notifications:hover {
	color: #0C4E7D;
	text-decoration: none;
}

/* Notification Dropdown End */

/* Trigger pill: avatar + name/role + caret */
.header-links__profile {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: transparent;
	border: none;
	border-radius: 50px;
	padding: 0.3rem 0.75rem 0.3rem 0.3rem;
	transition: background 200ms linear;
}

.header-links__profile:hover,
.header-links__profile[aria-expanded="true"] {
	background: #EDF4FA;
}

.header-links__avatar {
	width: 42px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: var(--theme-color);
	border-radius: 100%;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--white);
	flex-shrink: 0;
}

.header-links__profile-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.3;
	text-align: left;
	min-width: 0;
}

.header-links__profile-name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	white-space: nowrap;
}

.header-links__profile-role {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
}

.header-links__profile-caret {
	font-size: 0.7rem;
	color: var(--grey);
	flex-shrink: 0;
}

/* Help button - matches the notification circle, minus the alert dot */
.header-links__help {
	width: 50px;
	aspect-ratio: 1;
	background: #EBEBEB;
	color: var(--black);
	font-size: 1.25rem;
	border-radius: 100%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transition: all 200ms linear;
}

.header-links__help:hover {
	background: var(--primary);
	color: var(--white);
}

/* The dropdown header reuses .profile-avatar, which expects an <img> */
.profile-avatar--initials {
	display: grid;
	place-items: center;
	background: var(--theme-color);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--white);
}

/* Profile Dropdown Start */

.profile-dropdown {
	position: relative;
}

.profile-dropdown-menu {
	position: absolute;
	top: calc(100% + 1rem);
	right: 0;
	width: 280px;
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	display: none;
	z-index: 1000;
	overflow: hidden;
	flex-direction: column;
}

.profile-dropdown-menu.active {
	display: flex;
}

.profile-header {
	padding: 1.5rem;
	border-bottom: 1px solid #E5E7EB;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #F9FAFB;
}

.profile-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-info {
	flex: 1;
}

.profile-info h5 {
	font-size: 16px;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 0.25rem 0;
}

.profile-info p {
	font-size: 13px;
	color: var(--grey);
	margin: 0;
}

.profile-menu {
	padding: 0.5rem 0;
}

.profile-menu-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	color: var(--secondary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.profile-menu-item:hover {
	background-color: #F9FAFB;
	color: var(--primary);
	text-decoration: none;
}

.profile-menu-item i {
	width: 20px;
	font-size: 16px;
	color: var(--grey);
	transition: color 0.2s ease;
}

.profile-menu-item:hover i {
	color: var(--primary);
}

.profile-menu-item.logout {
	color: #DC2626;
}

.profile-menu-item.logout:hover {
	background-color: #FEF2F2;
	color: #DC2626;
}

.profile-menu-item.logout i {
	color: #DC2626;
}

.profile-menu-divider {
	height: 1px;
	background: #E5E7EB;
	margin: 0.5rem 0;
}

/* Profile Dropdown End */

.hamburger-menu {
	width: 40px;
	aspect-ratio: 1;
	background: var(--primary);
	color: var(--white);
	border: 2px solid var(--primary);
	border-radius: 0.25rem;
	display: none;
	place-items: center;
}

.hamburger-menu:hover {
	background: var(--white);
	color: var(--primary);
}

/* Header End */

/* Counters Start */

.counters-box {
	width: 100%;
	height: 100%;
	background: var(--white);
	box-shadow: 0 0 20px 1px #00000020;
	border-radius: 0.5rem;
	cursor: pointer;
	text-align: center;
	padding: 1.5rem 0.5rem;
	transition: all 300ms ease-in-out;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.counters-box h3 {
	font-size: 1rem;
	font-weight: 500;
	color: var(--primary);
	margin-bottom: 0.25rem;
}

.counters-box h4 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary);
	margin: 0;
}

.counters-box:hover {
	background: var(--primary);
}

.counters-box:hover :is(h3, h4) {
	color: var(--white);
}

/* Counters End */

/* Charts Start */

.dashboard-charts {
	margin-top: 2rem;
}

.chart-card {
	height: 100%;
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

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

.chart-header h4 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.chart-header select {
	border: none;
	background: #f5f7fb;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
}

.renewal-wrapper {
	max-width: 50%;
	margin: 0 auto;
}

.renewal-info {
	display: flex;
	justify-content: center;
	margin-top: 15px;
	font-size: 14px;
	gap: 2rem;
}

.renewal-info .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 6px;
}

.dot.green {
	background: #22c55e;
}

.dot.blue {
	background: #2B8FD4;
}

/* Charts End */

/* Dashboard Head Start */

.dashboard-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.dashboard-head__content p {
	margin: 0;
}

/* Dashboard Head End */

/* Dashboard Card Start */

.dashboard-card {
	background: var(--white);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.dashboard-card__form button {
	background: var(--primary);
	color: var(--white);
	border: none;
	border-radius: 0.25rem;
}

.live-status-card {
	overflow: hidden;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.card-header h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary);
	margin: 0;
}

.view-all {
	color: var(--primary);
	font-weight: 500;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Table */

.table-responsive {
	width: 100%;
	overflow-x: auto;
}

.datatable {
	width: 100%;
	border-collapse: collapse;
}

.datatable th {
	font-size: 13px;
	color: var(--grey);
	padding: 12px;
	border-bottom: 1px solid #eee;
	font-weight: 500;
	white-space: nowrap;
}

.datatable td {
	padding: 12px;
	font-size: 14px;
	color: var(--secondary);
	border-bottom: 1px solid #f3f3f3;
	white-space: nowrap;
}

/* Status Badge */

.status {
	width: 100%;
	padding: 4px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
	white-space: nowrap;
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

.status.active {
	background: #DBFDE7;
	color: #0B8A3B;
}

.status.inactive {
	background: #FDE7E7;
	color: #B91C1C;
}

.status.pending {
	background: #FAF7C4;
	color: #F79E1B;
}

/* Download Button */

.btn-download {
	background: var(--primary);
	color: var(--white);
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.btn-download img {
	width: 10px;
}

/* DataTable CUSTOM STYLING */
.dataTables_filter {
	display: none;
}

/* Pagination */

.dataTables_paginate {
	margin-top: 0.75rem;
	padding-top: 0 !important;
}

.dataTables_paginate .paginate_button {
	padding: 6px 12px;
	margin: 0 3px;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	background: var(--white);
	color: var(--secondary) !important;
	font-size: 13px;
	cursor: pointer;
}

.dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.table-search input {
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #00000020;
	min-width: 220px;
	color: var(--secondary);
	outline: none;
}

.table-search input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(55, 130, 247, 0.15);
}

/* Dashboard Card End */

/* Live Status Card Start */

.live-status-card .card-header {
	flex-wrap: wrap;
	min-width: 0;
}

.live-status-card .live-status-header__title {
	margin: 0;
	flex: 1;
	min-width: 200px;
}

.live-status-header__subtitle {
	margin: 0.5rem 0 0 0;
	color: var(--grey);
	font-size: 14px;
}

.live-status-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	flex-shrink: 0;
	min-width: 0;
}

.live-status-card .live-status-header__actions .table-search {
	flex: 0 0 auto;
}

.live-status-card .live-status-header__actions .table-search input {
	width: 100%;
}

.live-status-card .table-responsive {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	margin: 0;
}

.live-status-card .table-responsive::-webkit-scrollbar {
	height: 8px;
}

.live-status-card .table-responsive::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.live-status-card .table-responsive::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

.live-status-card .table-responsive::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.live-status-card .datatable {
	width: 100% !important;
	table-layout: auto;
}

.live-status-card .datatable th,
.live-status-card .datatable td {
	padding: 12px 8px;
}

.live-status-check-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
}

.live-status-check-btn i {
	font-size: 10px;
}

/* Hide responsive expand/collapse arrows */
.live-status-card .datatable .dtr-control,
.live-status-card .datatable .dtr-details {
	display: none !important;
}

/* Live Status Card End */

/* Form Styling Start */

.card-form {
	padding: 0;
}

.card-form .form-group {
	margin-bottom: 1.5rem;
	width: 100%;
}

.card-form .form-group .form-text {
	margin-left: 0;
	padding-left: 0;
}

/* Helper text after checkbox should align with checkbox label */
.card-form .form-group .form-check+.form-text {
	margin-left: calc(18px + 0.75rem);
	margin-top: 0.5rem;
	display: block;
}

/* Conditional fields (Addon SKU, One Time Charge) should be indented to align with checkbox labels */
.card-form #addonSkuGroup,
.card-form #oneTimeChargeGroup {
	padding-left: 0;
}

.card-form #addonSkuGroup .form-label,
.card-form #addonSkuGroup .form-text,
.card-form #oneTimeChargeGroup .form-label,
.card-form #oneTimeChargeGroup .form-text {
	margin-left: 0;
	padding-left: 0;
}

.card-form .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.5rem;
	display: block;
}

.card-form .form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 14px;
	font-weight: 400;
	color: var(--secondary);
	background-color: var(--white);
	border: 2px solid #00000020;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	outline: none;
}

.card-form .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.1);
}

.card-form .form-control::placeholder {
	color: #9CA3AF;
	font-weight: 400;
}

.card-form .form-control:disabled {
	background-color: #F3F4F6;
	color: #9CA3AF;
	cursor: not-allowed;
	opacity: 0.6;
}

.card-form textarea.form-control {
	resize: vertical;
	min-height: 120px;
	resize: none;
}

.card-form .form-text {
	display: block;
	margin-top: 0.5rem;
	margin-left: 0;
	padding-left: 0;
	font-size: 12px;
	color: #6B7280;
	line-height: 1.5;
	width: 100%;
}

.card-form .form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0 !important;
	padding-left: 0 !important;
	margin-bottom: 0.5rem;
	margin-left: 1.5rem;
}

.card-form .form-check-input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	cursor: pointer;
	border: 2px solid #D1D5DB;
	border-radius: 4px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

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

.card-form .form-check-input:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.card-form .form-check-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.1);
	outline: none;
}

.card-form .form-check-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--secondary);
	cursor: pointer;
	margin: 0;
	line-height: 1.5;
}

.card-form .form-actions {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #E5E7EB;
}

.card-form .form-actions .btn {
	padding: 0.75rem 2rem;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.card-form .form-actions .btn-secondary {
	background-color: #F3F4F6;
	color: var(--secondary);
}

.card-form .form-actions .btn-secondary:hover {
	background-color: #E5E7EB;
	color: var(--secondary);
}

.card-form .form-actions .btn-primary {
	background-color: var(--primary);
	color: var(--white);
}

.card-form .form-actions .btn-primary:hover {
	background-color: #0C4E7D;
	color: var(--white);
}

.card-form .form-actions .btn-primary i {
	font-size: 14px;
}

/* Hide/Show animation for conditional fields */
.card-form #addonSkuGroup,
.card-form #oneTimeChargeGroup {
	transition: opacity 0.3s ease, max-height 0.3s ease;
}

.card-form #addonSkuGroup[style*="display: none"],
.card-form #oneTimeChargeGroup[style*="display: none"] {
	display: none !important;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-bottom: 0;
}

/* Form Styling End */

/* Alert Box Styling Start */

.card-form .alert {
	border-radius: 8px;
	border: none;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.card-form .alert-info {
	background-color: #E0F2FE;
	color: #0369A1;
	border-left: 4px solid #0EA5E9;
}

.card-form .alert ul {
	margin: 0;
	padding-left: 1.5rem;
}

.card-form .alert li {
	margin-bottom: 0.5rem;
	font-size: 14px;
	line-height: 1.6;
}

.card-form .alert li:last-child {
	margin-bottom: 0;
}

.card-form .alert strong {
	font-weight: 600;
}

/* Alert Box Styling End */

/* Table Button Styling Start */

.datatable .btn-sm {
	padding: 0.375rem 0.75rem;
	font-size: 12px;
	font-weight: 500;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.datatable .btn-danger {
	background-color: #DC2626;
	color: var(--white);
}

.datatable .btn-danger:hover {
	background-color: #B91C1C;
	color: var(--white);
}

.datatable .btn-primary {
	background-color: var(--primary);
	color: var(--white);
}

.datatable .btn-primary:hover {
	background-color: #0C4E7D;
	color: var(--white);
}

#addonHistoryTable td a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 500;
}

#addonHistoryTable td a:hover {
	text-decoration: underline;
}

/* Table Button Styling End */

/* Brand Badge Styling Start */

.brand-badge {
	width: 100%;
	display: inline-block;
	padding: 0.375rem 0.75rem;
	background-color: #1060985C;
	color: #0C4E7D;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
}

/* Brand Badge Styling End */

/* Upload Iccids Modal Start */

.uploadIccids-modal .modal-content {
	border-radius: 12px;
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.uploadIccids-modal .modal-header {
	border-bottom: 1px solid #E5E7EB;
	padding: 1.5rem;
}

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

.uploadIccids-modal .modal-body {
	padding: 1.5rem;
}

.uploadIccids-modal .modal-footer {
	border-top: 1px solid #E5E7EB;
	padding: 1rem 1.5rem;
	align-items: stretch;
	justify-content: end;
	gap: 0.75rem;
}

.uploadIccids-modal .modal-footer .btn {
	padding: 0.75rem 1.5rem;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0;
}

.uploadIccids-modal .modal-footer .btn-secondary {
	background-color: #F3F4F6;
	color: var(--secondary);
}

.uploadIccids-modal .modal-footer .btn-secondary:hover {
	background-color: #E5E7EB;
	color: var(--secondary);
}

.uploadIccids-modal .modal-footer .btn-primary {
	background-color: var(--primary);
	color: var(--white);
}

.uploadIccids-modal .modal-footer .btn-primary:hover {
	background-color: #0C4E7D;
	color: var(--white);
}

.uploadIccids-modal .btn-close {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.uploadIccids-modal .btn-close:hover {
	opacity: 1;
}

.uploadIccids-modal .form-group {
	margin-bottom: 1.5rem;
	width: 100%;
}

.uploadIccids-modal .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.5rem;
	display: block;
}

.uploadIccids-modal .form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 14px;
	font-weight: 400;
	color: var(--secondary);
	background-color: var(--white);
	border: 2px solid #00000020;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	outline: none;
}

.uploadIccids-modal .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.1);
}

.uploadIccids-modal .form-text {
	display: block;
	margin-top: 0.5rem;
	margin-left: 0;
	padding-left: 0;
	font-size: 12px;
	color: #6B7280;
	line-height: 1.5;
	width: 100%;
}

/* Upload Iccids Modal End */

/* Add Device Modal Start */

.addDevice-modal .modal-content {
	border-radius: 12px;
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.addDevice-modal .modal-header {
	border-bottom: 1px solid #E5E7EB;
	padding: 1.5rem;
}

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

.addDevice-modal .modal-body {
	padding: 1.5rem;
}

.addDevice-modal .modal-footer {
	border-top: 1px solid #E5E7EB;
	padding: 1rem 1.5rem;
	align-items: stretch;
	justify-content: end;
	gap: 0.75rem;
}

.addDevice-modal .modal-footer .btn {
	padding: 0.75rem 1.5rem;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0;
}

.addDevice-modal .modal-footer .btn-secondary {
	background-color: #F3F4F6;
	color: var(--secondary);
}

.addDevice-modal .modal-footer .btn-secondary:hover {
	background-color: #E5E7EB;
	color: var(--secondary);
}

.addDevice-modal .modal-footer .btn-primary {
	background-color: var(--primary);
	color: var(--white);
}

.addDevice-modal .modal-footer .btn-primary:hover {
	background-color: #0C4E7D;
	color: var(--white);
}

.addDevice-modal .btn-close {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.addDevice-modal .btn-close:hover {
	opacity: 1;
}

.addDevice-modal .form-group {
	margin-bottom: 1.5rem;
	width: 100%;
}

.addDevice-modal .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.5rem;
	display: block;
}

.addDevice-modal .form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 14px;
	font-weight: 400;
	color: var(--secondary);
	background-color: var(--white);
	border: 2px solid #00000020;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	outline: none;
}

.addDevice-modal .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.1);
}

.addDevice-modal .form-text {
	display: block;
	margin-top: 0.5rem;
	margin-left: 0;
	padding-left: 0;
	font-size: 12px;
	color: #6B7280;
	line-height: 1.5;
	width: 100%;
}

/* Add Device Modal End */

/* QR Code Modal Start */

.qrCode-modal .modal-content {
	border-radius: 12px;
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.qrCode-modal .modal-header {
	border-bottom: 1px solid #E5E7EB;
	padding: 1.5rem;
}

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

.qrCode-modal .modal-body {
	padding: 1.5rem;
}

.qrCode-modal .modal-footer {
	border-top: 1px solid #E5E7EB;
	padding: 1rem 1.5rem;
	align-items: stretch;
	justify-content: end;
	gap: 0.75rem;
}

.qrCode-modal .modal-footer .btn {
	padding: 0.75rem 1.5rem;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0;
}

.qrCode-modal .modal-footer .btn-secondary {
	background-color: #F3F4F6;
	color: var(--secondary);
}

.qrCode-modal .modal-footer .btn-secondary:hover {
	background-color: #E5E7EB;
	color: var(--secondary);
}

.qrCode-modal .btn-close {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.qrCode-modal .btn-close:hover {
	opacity: 1;
}

.qrCode-modal .qr-code-content {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.qrCode-modal .qr-code-left {
	flex: 0 0 auto;
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.qrCode-modal .qr-code-wrapper {
	width: 100%;
	background: #D9D9D9;
	border-radius: 12px;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qrCode-modal .qr-code-image {
	width: 100%;
	aspect-ratio: 1;
	background: var(--white);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.qrCode-modal .qr-code-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.qrCode-modal .qr-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.qrCode-modal .qr-logo {
	position: absolute;
	z-index: 1;
}

.qrCode-modal .qr-code-actions {
	display: flex;
	gap: 0.75rem;
	width: 100%;
}

.qrCode-modal .qr-code-actions .btn {
	flex: 1;
	padding: 0.75rem 1rem;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.qrCode-modal .qr-code-actions .btn-copy {
	background-color: #F3F4F6;
	color: var(--secondary);
}

.qrCode-modal .qr-code-actions .btn-copy:hover {
	background-color: #E5E7EB;
	color: var(--secondary);
}

.qrCode-modal .qr-code-actions .btn-download-qr {
	background-color: var(--primary);
	color: var(--white);
	margin: 0;
}

.qrCode-modal .qr-code-actions .btn-download-qr:hover {
	background-color: #0C4E7D;
	color: var(--white);
}

.qrCode-modal .qr-code-right {
	flex: 1;
}

.qrCode-modal .qr-details-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.qrCode-modal .qr-detail-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.qrCode-modal .qr-detail-item .detail-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	flex: 0 0 auto;
}

.qrCode-modal .qr-detail-item .detail-value {
	font-size: 14px;
	font-weight: 400;
	color: var(--secondary);
	text-align: right;
	flex: 1;
	word-break: break-word;
}

.qrCode-modal .qr-detail-item .detail-value.qr-value-text {
	color: #FF0000;
}

.qrCode-modal .status.active {
	cursor: pointer;
}

/* QR Code Modal End */

/* User Name Button */

.btn-user-name {
	width: 100%;
	background-color: #1060985C;
	color: #0C4E7D;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	display: inline-block;
	text-align: center;
	transition: all 0.3s ease;
}

.btn-user-name:hover {
	background-color: #0C4E7D;
	color: var(--white);
	text-decoration: none;
}

/* User Permissions Modal Start */

.userPermissions-modal .modal-content {
	border-radius: 12px;
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.userPermissions-modal .modal-header {
	border-bottom: 1px solid #E5E7EB;
	padding: 1.5rem;
}

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

.userPermissions-modal .modal-body {
	padding: 1.5rem;
}

.userPermissions-modal .modal-footer {
	border-top: 1px solid #E5E7EB;
	padding: 1rem 1.5rem;
	align-items: stretch;
	justify-content: end;
	gap: 0.75rem;
}

.userPermissions-modal .modal-footer .btn {
	padding: 0.75rem 1.5rem;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0;
}

.userPermissions-modal .modal-footer .btn-secondary {
	background-color: #F3F4F6;
	color: var(--secondary);
}

.userPermissions-modal .modal-footer .btn-secondary:hover {
	background-color: #E5E7EB;
	color: var(--secondary);
}

.userPermissions-modal .btn-close {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.userPermissions-modal .btn-close:hover {
	opacity: 1;
}

.userPermissions-modal .user-info-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #E5E7EB;
}

.userPermissions-modal .user-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
	flex-shrink: 0;
}

.userPermissions-modal .user-details {
	flex: 1;
}

.userPermissions-modal .user-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 0.25rem 0;
}

.userPermissions-modal .user-email {
	font-size: 14px;
	color: var(--grey);
	margin: 0;
}

.userPermissions-modal .user-profile-link {
	margin-left: auto;
}

.userPermissions-modal .view-profile-link {
	color: var(--primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
}

.userPermissions-modal .view-profile-link:hover {
	color: #0C4E7D;
	text-decoration: none;
}

.userPermissions-modal .view-profile-link i {
	font-size: 12px;
}

.userPermissions-modal .info-banner {
	background-color: #EBF5FF;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
}

.userPermissions-modal .info-banner p {
	font-size: 14px;
	color: var(--primary);
	margin: 0;
	font-weight: 500;
}

.userPermissions-modal .form-group {
	margin-bottom: 1.5rem;
	width: 100%;
}

.userPermissions-modal .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.5rem;
	display: block;
}

.userPermissions-modal .form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 14px;
	font-weight: 400;
	color: var(--secondary);
	background-color: var(--white);
	border: 2px solid #00000020;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	outline: none;
}

.userPermissions-modal .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.1);
}

.userPermissions-modal .permissions-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.userPermissions-modal .permission-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background-color: #F9FAFB;
	border-radius: 8px;
	border: 1px solid #E5E7EB;
}

.userPermissions-modal .permission-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.userPermissions-modal .permission-content {
	flex: 1;
}

.userPermissions-modal .permission-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 0.25rem 0;
}

.userPermissions-modal .permission-description {
	font-size: 12px;
	color: var(--grey);
	margin: 0;
	line-height: 1.5;
}

.userPermissions-modal .permission-toggle {
	flex-shrink: 0;
}

.userPermissions-modal .toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
}

.userPermissions-modal .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.userPermissions-modal .toggle-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 26px;
}

.userPermissions-modal .toggle-switch .slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

.userPermissions-modal .toggle-switch input:checked+.slider {
	background-color: #22c55e;
}

.userPermissions-modal .toggle-switch input:checked+.slider:before {
	transform: translateX(24px);
}

/* User Permissions Modal End */

/* User Service Cards Start */

.user-service-card {
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
}

.user-service-card .card-banner {
	background: #1060985C;
	padding: 0.75rem 1rem;
	text-align: center;
	border-radius: 0.5rem;
}

.user-service-card .card-banner p {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #0C4E7D;
}

.user-service-card .card-content {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.5rem 0;
}

.user-service-card .card-left {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.user-service-card .service-tags {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.user-service-card .service-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--white);
	border: 1px solid #CECECE;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	width: fit-content;
}

.user-service-card .service-tag i {
	font-size: 14px;
}

.user-service-card .service-tag.tag-monthly i {
	color: #106098;
}

.user-service-card .service-tag.tag-esim i {
	color: #FF6B35;
}

.user-service-card .service-tag.tag-speed i {
	color: #9333EA;
}

.user-service-card .user-info {
	margin-top: 0.5rem;
}

.user-service-card .user-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary);
	margin: 0 0 0.25rem 0;
}

.user-service-card .user-phone {
	font-size: 14px;
	color: var(--grey);
	margin: 0;
}

.user-service-card .btn-reconnect {
	background-color: #22c55e;
	color: var(--white);
	border: none;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: auto;
	width: 100%;
}

.user-service-card .btn-reconnect:hover {
	background-color: #16a34a;
	color: var(--white);
}

.user-service-card .user-avatar-large {
	width: 180px;
	aspect-ratio: 1;
	border-radius: 100%;
}

.user-service-card .user-avatar-large img {
	width: 100%;
	object-fit: cover;
}

.user-service-card .user-avatar-large svg {
	width: 100%;
	height: 100%;
}

.user-service-card .card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.5rem;
}

.user-service-card .status-suspended {
	font-size: 14px;
	font-weight: 500;
	background: #EBEBEB;
	color: var(--black);
	border-radius: 0.25rem;
	padding: 0.75rem 1.85rem;
}

.user-service-card .auto-renew-toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.user-service-card .auto-renew-toggle span {
	font-size: 14px;
	color: var(--secondary);
	font-weight: 500;
}

.user-service-card .auto-renew-toggle .toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.user-service-card .auto-renew-toggle .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.user-service-card .auto-renew-toggle .toggle-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 24px;
}

.user-service-card .auto-renew-toggle .toggle-switch .slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

.user-service-card .auto-renew-toggle .toggle-switch input:checked+.slider {
	background-color: var(--primary);
}

.user-service-card .auto-renew-toggle .toggle-switch input:checked+.slider:before {
	transform: translateX(20px);
}

/* User Service Cards End */

/* Search Option Start */

/* OVERLAP FIX: Cells ko squeeze hone se rokein */
#addonHistoryTable {
	width: 100% !important;
}

#addonHistoryTable th,
#addonHistoryTable td {
	white-space: nowrap !important;
	/* Text ek hi line mein rahega */
	padding: 12px 15px !important;
	border-bottom: 1px solid #f0f0f0;
}

/* Scroll wrapper fix */
.dataTables_scrollBody {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_filter label {
	font-size: 1rem;
	font-weight: 600;
}

/* Search Option End */

/* Sim Management Page Start */

/* Stats Cards */
.sim-management--page .stat-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	position: relative;
}

.stat-card--clickable {
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
	border: 1px solid transparent;
	user-select: none;
}

.stat-card--clickable:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.stat-card--clickable.is-active {
	border-color: rgba(13, 110, 253, 0.35);
	box-shadow: 0 4px 16px rgba(13, 110, 253, 0.12);
}

.stat-card--clickable:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

.stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
}

.sim-management--page .stat-content h4 {
	font-size: 1.5rem;
	color: #111827;
}

.sim-management--page .stat-content small {
	font-size: 0.75rem;
}

.sim-management--page .bg-danger-light {
	background: #FEE2E2;
}

.sim-management--page .bg-success-light {
	background: #D1FAE5;
}

.sim-management--page .bg-warning-light {
	background: #FEF3C7;
}

.sim-management--page .bg-info-light {
	background: #D6E7F3;
}

.sim-management--page .bg-primary-light {
	background: #DCE8F2;
}

.sim-management--page .bg-secondary-light {
	background: #F3F4F6;
}

.sim-management--page .stat-chart {
	position: absolute;
	right: 1rem;
	top: 1.5rem;
	width: 50px;
	height: 50px;
}

/* Avatar Circles */
.sim-management--page .avatar-circle {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.8rem;
}

/* Status Badges */
.sim-management--page .status {
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 500;
}

.sim-management--page .status.active {
	background: #D1FAE5;
	color: #065F46;
}

.sim-management--page .status.suspended {
	background: #FEE2E2;
	color: #991B1B;
}

.sim-management--page .status.expired {
	background: #F3F4F6;
	color: #6B7280;
}

.sim-management--page .status.pending {
	background: #FEF3C7;
	color: #92400E;
}

/* Nav Tabs */
.sim-management--page .nav-tabs .nav-link {
	border: none;
	color: #6B7280;
	padding: 0.75rem 1rem;
	margin-right: 0.5rem;
	border-bottom: 2px solid transparent;
}

.sim-management--page .nav-tabs .nav-link.active {
	color: #111827;
	background: transparent;
	border-bottom: 2px solid #106098;
}

/* DataTable Native DOM Controls Customization */
.sim-management--page .dataTables_wrapper .dataTables_length select {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 4px 8px;
	background: #fff;
	color: #333;
	font-size: 13px;
}

.sim-management--page .dataTables_wrapper .dataTables_filter input {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	outline: none;
}

.sim-management--page .dataTables_wrapper .dataTables_info {
	font-size: 13px;
	color: #6B7280;
	margin-top: 10px;
}

.sim-management--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #333 !important;
	font-size: 13px;
	cursor: pointer;
}

.sim-management--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #106098;
	border-color: #106098;
	color: #fff !important;
}

.sim-management--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: #106098;
	color: #106098 !important;
}

/* Search Wrapper Fix */
.sim-management--page .search-wrapper i {
	left: 15px;
	top: 12px;
}

/* Sim Management Page End */

/* Main Page Start */

.main-page .date-range-header h5 {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--grey);
	margin: 0;
}

/* STAT CARDS - Combined for Main & eSIM Pages */
:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card {
	background: var(--white);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	transition: all 0.3s ease;
	height: 100%;
	min-height: 85px;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-color: var(--primary);
	transform: translateY(-2px);
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__right {
	flex-shrink: 0;
	margin-left: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__icon--primary {
	background: #DCE8F2;
	color: #106098;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__icon--warning {
	background: #FEF3C7;
	color: #E89028;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__icon--info {
	background: #D6E7F3;
	color: #2B8FD4;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__icon--danger {
	background: #FEE2E2;
	color: #EF4444;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__icon--success {
	background: #D1FAE5;
	color: #22C55E;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__content {
	flex: 1;
	min-width: 0;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
	margin-bottom: 0.1rem;
	letter-spacing: 0.2px;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--secondary);
	margin: 0;
	line-height: 1.2;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__change {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	white-space: nowrap;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__change--up {
	color: #22C55E;
	background: #D1FAE5;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__change--down {
	color: #EF4444;
	background: #FEE2E2;
}

:is(.main-page, .esim-management--page, .physical-sim--page) .stat-card__sub {
	font-size: 0.75rem;
	color: var(--grey);
	display: block;
	margin-top: 3px;
}

.stat-card__currency {
	font-size: 0.75rem;
	font-weight: 500;
}

/* CHART CARDS */
.main-page .chart-card {
	background: var(--white);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #f0f0f0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.main-page .chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex-shrink: 0;
	border-bottom: 1px solid #00000020;
	padding-bottom: 0.75rem;
}

.main-page .chart-header h4 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--secondary);
	margin: 0;
}

.main-page .chart-header small {
	font-size: 0.75rem;
	color: var(--grey);
}

.main-page .chart-header .badge {
	font-size: 0.7rem;
	padding: 0.25rem 0.6rem;
	background: var(--primary) !important;
	color: var(--white) !important;
}

/* CHART BODY */
.main-page .chart-body {
	flex: 1;
	position: relative;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-page .chart-body canvas {
	width: 100% !important;
	height: 100% !important;
	max-height: 200px;
}

/* STATUS CHART WRAPPER */
.main-page .status-chart-wrapper {
	position: relative;
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}

.main-page .status-chart-wrapper canvas {
	width: 100% !important;
	height: 100% !important;
}

.main-page .status-center-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

.main-page .status-total {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--secondary);
	line-height: 1.2;
}

.main-page .status-label {
	display: block;
	font-size: 0.7rem;
	color: var(--grey);
}

/* CHART FOOTER */
.main-page .chart-footer {
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	border-top: 1px solid #00000020;
	flex-shrink: 0;
}

/* SUMMARY ITEMS */
.main-page .summary-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.main-page .summary-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.main-page .summary-label {
	color: var(--grey);
	font-weight: 500;
}

.main-page .summary-value {
	font-weight: 600;
	color: var(--secondary);
}

/* ALERTS */
.main-page .alert-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	overflow-y: auto;
	max-height: 320px;
}

.main-page .alert-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.6rem 0.5rem;
	border-radius: 6px;
	transition: background 0.2s ease;
	cursor: default;
}

.main-page .alert-item:hover {
	background: #F9FAFB;
}

.main-page .alert-item:not(:last-child) {
	border-bottom: 1px solid #00000020;
}

.main-page .alert-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 11px;
	color: var(--white);
}

.main-page .alert-icon.bg-danger {
	background: #FEE2E2 !important;
	color: #EF4444;
}

.main-page .alert-icon.bg-success {
	background: #D1FAE5 !important;
	color: #22C55E;
}

.main-page .alert-icon.bg-warning {
	background: #FEF3C7 !important;
	color: #E89028;
}

.main-page .alert-content {
	flex: 1;
	min-width: 0;
}

.main-page .alert-content h6 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 1px 0;
}

.main-page .alert-content p {
	font-size: 0.75rem;
	color: var(--grey);
	margin: 0;
	line-height: 1.3;
}

.main-page .alert-time {
	font-size: 0.75rem;
	color: var(--grey);
	white-space: nowrap;
	flex-shrink: 0;
	padding-top: 2px;
}

.main-page .alert-list::-webkit-scrollbar {
	width: 4px;
}

.main-page .alert-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.main-page .alert-list::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 4px;
}

/* CHART HEADER WITH ICONS */
.main-page .chart-header__left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.main-page .chart-header__icon {
	font-size: 1rem;
	color: var(--primary);
}

.main-page .chart-header__right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.main-page .chart-select {
	border: none;
	background: #F3F4F6;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.75rem;
	color: var(--grey);
	outline: none;
	cursor: pointer;
}

.main-page .chart-select:focus {
	border-color: var(--primary);
}

/* VIEW ALL LINK */
.main-page .view-all-link {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
	transition: all 0.3s ease;
}

.main-page .view-all-link:hover {
	text-decoration: underline;
	color: #0C4E7D;
}

/* STATUS LEGEND */
.main-page .status-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	border-top: 1px solid #00000020;
	flex-shrink: 0;
}

.main-page .status-legend-item {
	font-size: 0.75rem;
	color: var(--grey);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.main-page .status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

/* TOP CUSTOMERS TABLE */
.main-page .chart-card .table {
	margin-bottom: 0;
}

.main-page .chart-card .table th {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--grey);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid #f0f0f0;
	white-space: nowrap;
}

.main-page .chart-card .table td {
	font-size: 0.8rem;
	padding: 0.5rem;
	border-bottom: 1px solid #f0f0f0;
	color: var(--secondary);
	white-space: nowrap;
}

.main-page .chart-card .table tr:last-child td {
	border-bottom: none;
}

.main-page .chart-card .table .fw-semibold {
	font-weight: 600;
}

.main-page .chart-card .table .text-primary {
	color: var(--primary) !important;
}

/* RECENT ACTIVITIES */
.main-page .activity-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	overflow-y: auto;
	max-height: 320px;
}

.main-page .activity-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.6rem 0.5rem;
	border-radius: 6px;
	transition: background 0.2s ease;
}

.main-page .activity-item:hover {
	background: #F9FAFB;
}

.main-page .activity-item:not(:last-child) {
	border-bottom: 1px solid #00000020;
}

.main-page .activity-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
}

.main-page .activity-icon.bg-primary-light {
	background: #DCE8F2;
	color: #106098;
}

.main-page .activity-icon.bg-success-light {
	background: #D1FAE5;
	color: #22C55E;
}

.main-page .activity-icon.bg-warning-light {
	background: #FEF3C7;
	color: #E89028;
}

.main-page .activity-icon.bg-danger-light {
	background: #FEE2E2;
	color: #EF4444;
}

.main-page .activity-content {
	flex: 1;
	min-width: 0;
}

.main-page .activity-content h6 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 1px 0;
}

.main-page .activity-content p {
	font-size: 0.75rem;
	color: var(--grey);
	margin: 0;
}

.main-page .activity-content p strong {
	color: var(--secondary);
	font-weight: 600;
}

.main-page .activity-time {
	font-size: 0.75rem;
	color: var(--grey);
	white-space: nowrap;
	flex-shrink: 0;
	padding-top: 2px;
}

.main-page .activity-list::-webkit-scrollbar {
	width: 4px;
}

.main-page .activity-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.main-page .activity-list::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 4px;
}

/* RECENT TRANSACTIONS */
.main-page .transaction-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	overflow-y: auto;
	max-height: 320px;
}

.main-page .transaction-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem;
	border-radius: 6px;
	transition: background 0.2s ease;
}

.main-page .transaction-item:hover {
	background: #F9FAFB;
}

.main-page .transaction-item:not(:last-child) {
	border-bottom: 1px solid #00000020;
}

.main-page .transaction-info {
	flex: 1;
	min-width: 0;
}

.main-page .transaction-id {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--secondary);
	display: block;
}

.main-page .transaction-type {
	font-size: 0.75rem;
	color: var(--grey);
}

.main-page .transaction-amount {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--secondary);
	flex-shrink: 0;
}

.main-page .transaction-amount--red {
	color: #EF4444;
}

.main-page .transaction-amount--green {
	color: #22C55E;
}

.main-page .transaction-status {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	flex-shrink: 0;
}

.main-page .transaction-status--success {
	background: #D1FAE5;
	color: #065F46;
}

.main-page .transaction-status--pending {
	background: #FEF3C7;
	color: #92400E;
}

.main-page .transaction-status--failed {
	background: #FEE2E2;
	color: #991B1B;
}

.main-page .transaction-list::-webkit-scrollbar {
	width: 4px;
}

.main-page .transaction-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.main-page .transaction-list::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 4px;
}

/* Main Page End */

/* ESIM MANAGEMENT PAGE Start */

/* Stats Cards Sub Text - Moved to combined section above */
/* ICCID Text */
.esim-management--page .iccid-text {
	font-family: 'Inter', monospace;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	letter-spacing: 0.5px;
}

/* Data Usage Wrapper */
.esim-management--page .data-usage-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.esim-management--page .data-usage-text {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
	min-width: 32px;
}

/* Progress Bar Custom Colors */
.esim-management--page .progress {
	background-color: #f0f0f0;
	border-radius: 10px;
}

.esim-management--page .progress-bar {
	border-radius: 10px;
	transition: width 0.6s ease;
}

/* Status Badges - Extra for eSIM */
.esim-management--page .status.active {
	background: #D1FAE5;
	color: #065F46;
}

.esim-management--page .status.pending {
	background: #FEF3C7;
	color: #92400E;
}

.esim-management--page .status.expired {
	background: #F3F4F6;
	color: #6B7280;
}

.esim-management--page .status.suspended {
	background: #FEE2E2;
	color: #991B1B;
}

/* Action Buttons */
.esim-management--page .btn-link {
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.esim-management--page .btn-link:hover {
	transform: scale(1.15);
}

.esim-management--page .btn-link.text-primary:hover {
	color: #0C4E7D !important;
}

.esim-management--page .btn-link.text-success:hover {
	color: #16A34A !important;
}

.esim-management--page .btn-link.text-danger:hover {
	color: #DC2626 !important;
}

/* Pagination Custom */
.esim-management--page .pagination .page-link {
	color: var(--secondary);
	border: 1px solid #e5e7eb;
	font-size: 0.8rem;
	padding: 0.35rem 0.7rem;
}

.esim-management--page .pagination .page-item.active .page-link {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.esim-management--page .pagination .page-link:hover {
	background-color: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary);
}

.esim-management--page .pagination .page-item.disabled .page-link {
	color: #9CA3AF;
	cursor: not-allowed;
}

/* ESIM MANAGEMENT PAGE End */

/* PHYSICAL SIM MANAGEMENT PAGE */

.physical-sim--page .msisdn-text {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--secondary);
	letter-spacing: 0.3px;
}

.physical-sim--page .iccid-text {
	font-family: 'Inter', monospace;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	letter-spacing: 0.5px;
}

.physical-sim--page .data-usage-wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.physical-sim--page .data-usage-text {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
	min-width: 42px;
}

.physical-sim--page .progress {
	background-color: #f0f0f0;
	border-radius: 10px;
}

.physical-sim--page .progress-bar {
	border-radius: 10px;
	transition: width 0.6s ease;
}

/* Status Badges */
.physical-sim--page .status.active {
	background: #D1FAE5;
	color: #065F46;
}

.physical-sim--page .status.suspended {
	background: #FEE2E2;
	color: #991B1B;
}

.physical-sim--page .status.inactive {
	background: #F3F4F6;
	color: #6B7280;
}

.physical-sim--page .status.pending {
	background: #FEF3C7;
	color: #92400E;
}

/* Bulk Actions Bar */
.physical-sim--page .btn-outline-secondary {
	border-color: #e5e7eb;
	color: var(--secondary);
	font-size: 0.8rem;
	padding: 0.3rem 0.8rem;
}

.physical-sim--page .btn-outline-secondary:hover {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.physical-sim--page .btn-outline-danger {
	border-color: #fee2e2;
	color: #DC2626;
	font-size: 0.8rem;
	padding: 0.3rem 0.8rem;
}

.physical-sim--page .btn-outline-danger:hover {
	background-color: #DC2626;
	border-color: #DC2626;
	color: var(--white);
}

.physical-sim--page .btn-link {
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.physical-sim--page .btn-link:hover {
	transform: scale(1.15);
}

.physical-sim--page .btn-link.text-primary:hover {
	color: #0C4E7D !important;
}

.physical-sim--page .btn-link.text-success:hover {
	color: #16A34A !important;
}

.physical-sim--page .btn-link.text-danger:hover {
	color: #DC2626 !important;
}

.dropdown--bulkActions .dropdown-item:not(.text-danger) i {
	color: var(--primary);
}

/* Physical SIM Page End */

/* ACTIVATE NEW SIM PAGE */

.activateNewSim--page .card-form {
	background: var(--white);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.activateNewSim--page .card-form__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 1.25rem;
}

/* SIM Option Cards */
.activateNewSim--page .sim-option-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.activateNewSim--page .sim-option-card {
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
	background: #FAFBFC;
}

.activateNewSim--page .sim-option-card:hover {
	border-color: var(--primary) !important;
	background: #F0F4FF;
}

.activateNewSim--page .sim-option-card:has(input:checked) {
	border-color: var(--primary) !important;
	background: #EBF0FF;
}

.sim-option-body__icon {
	width: 50px;
	aspect-ratio: 1;
	font-size: 1.25rem;
	background: var(--primary);
	color: var(--white);
	display: grid;
	place-items: center;
	border-radius: 100%;
	margin-bottom: 1rem;
}

.activateNewSim--page .sim-option-radio {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.activateNewSim--page .sim-option-radio .form-check-input {
	width: 18px;
	height: 18px;
	border: 2px solid #D1D5DB;
	border-radius: 50%;
	cursor: pointer;
	margin: 0;
}

.activateNewSim--page .sim-option-radio .form-check-input:checked {
	border-color: var(--primary);
	background-color: var(--primary);
}

.activateNewSim--page .sim-option-body {
	flex: 1;
	min-width: 0;
}

.activateNewSim--page .sim-option-title {
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--secondary);
	margin-bottom: 0.15rem;
}

.activateNewSim--page .sim-option-desc {
	font-size: 0.875rem;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.activateNewSim--page .sim-option-right {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #dee2e6;
	padding-top: 0.5rem;
	margin-top: 0.25rem;
}

.activateNewSim--page .sim-option-stock {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--grey);
}

.activateNewSim--page .sim-option-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary);
}

.activateNewSim--page .sim-option-card:has(input:checked) .sim-option-right {
	border-color: var(--primary);
}

.activateNewSim--page .sim-option-card:has(input:checked) .sim-option-stock {
	color: var(--primary);
}

/* SIM Bottom - ICCID Input */
.activateNewSim--page .sim-option-bottom {
	margin-top: 1rem;
}

.activateNewSim--page .sim-option-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--secondary);
	display: block;
	margin-bottom: 0.35rem;
}

.activateNewSim--page .sim-option-input-group {
	display: flex;
	gap: 0.5rem;
}

.activateNewSim--page .sim-option-input {
	flex: 1;
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s ease;
	background: var(--white);
	color: var(--secondary);
}

.activateNewSim--page .sim-option-input:focus {
	border-color: var(--primary);
}

.activateNewSim--page .sim-option-scan-btn {
	padding: 0.6rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--primary);
	background: transparent;
	border: 1.5px solid var(--primary);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.activateNewSim--page .sim-option-scan-btn:hover {
	background: var(--primary);
	color: var(--white);
}

/* Plan Cards */
.activateNewSim--page .plan-cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}

.activateNewSim--page .plan-card {
	transition: all 0.3s ease;
	cursor: pointer;
	background: #FAFBFC;
}

.activateNewSim--page .plan-card:hover {
	border-color: var(--primary) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.activateNewSim--page .plan-card:has(input:checked) {
	border-color: var(--primary) !important;
	background: #EBF0FF;
}

.activateNewSim--page .plan-card--popular {
	border-color: var(--primary);
}

.activateNewSim--page .plan-radio {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.activateNewSim--page .plan-radio .form-check-input {
	width: 18px;
	height: 18px;
	border: 2px solid #D1D5DB;
	border-radius: 50%;
	cursor: pointer;
}

.activateNewSim--page .plan-radio .form-check-input:checked {
	border-color: var(--primary);
	background-color: var(--primary);
}

.activateNewSim--page .plan-badge {
	font-size: 0.875rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-block;
}

.activateNewSim--page .plan-badge--basic {
	background: #F3F4F6;
	color: #6B7280;
}

.activateNewSim--page .plan-badge--popular {
	background: var(--primary);
	color: var(--white);
}

.activateNewSim--page .plan-data {
	font-size: 2rem;
	font-weight: 700;
	color: var(--secondary);
	margin: 0.75rem 0 0.25rem;
}

.activateNewSim--page .plan-data span {
	font-size: 1.125rem;
}

.activateNewSim--page .plan-desc {
	font-size: 0.875rem;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.activateNewSim--page .plan-price {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary);
}

.activateNewSim--page .plan-price span {
	font-size: 2rem;
}

/* Customer Contact */
.activateNewSim--page .customer-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.activateNewSim--page .customer-field {
	display: flex;
	flex-direction: column;
}

.activateNewSim--page .customer-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.3rem;
}

.activateNewSim--page .customer-input {
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s ease;
	background: var(--white);
	color: var(--secondary);
}

.activateNewSim--page .customer-input:focus {
	border-color: var(--primary);
}

/* Order Summary */
.activateNewSim--page .order-summary {
	background: var(--theme-color);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	position: sticky;
	top: 2rem;
	border: 1px solid #f0f0f0;
}

.activateNewSim--page .order-summary__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 1.25rem;
}

.activateNewSim--page .order-summary__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid #ffffff50;
}

.activateNewSim--page .order-summary__item:last-of-type {
	border-bottom: none;
}

.activateNewSim--page .order-summary__label {
	font-size: 0.875rem;
	color: #ffffffdd;
}

.activateNewSim--page .order-summary__value {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--white);
}

.activateNewSim--page .order-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
}

.activateNewSim--page .order-summary__total-label {
	font-size: 1.25rem;
	font-weight: 600;
	color: #ffffffdd;
}

.activateNewSim--page .order-summary__total-value {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--white);
}

.activateNewSim--page .order-summary__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.activateNewSim--page .order-summary__btn {
	padding: 0.7rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
}

.activateNewSim--page .order-summary__btn--primary {
	background: var(--primary);
	color: var(--white);
}

.activateNewSim--page .order-summary__btn--primary:hover {
	background: var(--white);
	color: var(--primary);
}

.activateNewSim--page .order-summary__btn--secondary {
	background: transparent;
	color: var(--white);
	border: 1px solid #fff;
}

.activateNewSim--page .order-summary__btn--secondary:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.activateNewSim--page .order-summary__terms {
	font-size: 0.875rem;
	color: #ffffff;
	text-align: center;
	margin-top: 1rem;
}

/* Activate New SIM End */

/* Customer Profile Page Start */

/* Back Button */
.backBtn {
	width: max-content;
	color: var(--primary);
	font-size: 1rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Customer Header */
.customer-profile__header {
	border: 1px solid #f0f0f0;
}

.customer-profile__avatar {
	width: 90px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #D6E7F3;
	border: 1px solid var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.customer-profile__avatar-text {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary);
}

.customer-profile__name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--secondary);
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.customer-profile__status {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.6rem;
	border-radius: 4px;
	display: inline-block;
	text-align: center;
}

.customer-profile__status--active {
	background: #D1FAE5;
	color: #065F46;
}

.customer-profile__status--suspended {
	background: #FEE2E2;
	color: #991B1B;
}

.customer-profile__status--pending {
	background: #FEF3C7;
	color: #92400E;
}

.customer-profile__status--resolved {
	background: #D6E7F3;
	color: #0369A1;
}

.customer-profile__contact li {
	font-size: 0.8rem;
	color: var(--grey);
	display: flex;
	gap: 0.5rem;
}

.customer-profile__contact li+li {
	margin-top: 0.25rem;
}

.customer-profile__contact li i {
	color: var(--primary);
	margin-top: 3px;
	width: 16px;
}

/* Customer Stats */
.customer-profile__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1rem 1rem;
	background: #F8FAFB;
	border-radius: 8px;
	padding: 0.75rem 1rem;
}

.customer-profile__stat {
	display: flex;
	flex-direction: column;
}

.customer-profile__stat-label {
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--grey);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.customer-profile__stat-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
}

.customer-profile__stat-value--verified {
	color: #22C55E;
}

/* Tabs */
.customer-profile__tabs .nav-tabs {
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	border-bottom: 2px solid #e5e7eb;
}

.customer-profile__tabs .nav-link {
	border: none;
	color: var(--grey);
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.6rem 0.25rem;
	margin-right: 1.5rem;
	border-radius: 0;
	transition: all 0.3s ease;
	background: transparent;
	position: relative;
}

.customer-profile__tabs .nav-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.customer-profile__tabs .nav-link:hover {
	color: var(--primary);
	background: transparent;
}

.customer-profile__tabs .nav-link:hover::after {
	transform: scaleX(0.5);
}

.customer-profile__tabs .nav-link.active {
	color: var(--primary);
	background: transparent;
}

.customer-profile__tabs .nav-link.active::after {
	transform: scaleX(1);
}

/* Tab Content */
.customerProfile--page .tab-content {
	display: none;
}

.customerProfile--page .tab-content.active {
	display: block;
}

/* Cards */
.customer-profile__card {
	border: 1px solid #f0f0f0;
}

.customer-profile__card-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--secondary);
	margin: 0;
}

/* Right Side Links - Common Style */
.customer-profile__card .edit-link,
.customer-profile__card .view-all-link {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.customer-profile__card .edit-link:hover,
.customer-profile__card .view-all-link:hover {
	text-decoration: underline;
	color: #0C4E7D;
}

/* Search */
.customer-profile__search {
	position: relative;
}

.customer-profile__search i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--grey);
	font-size: 0.85rem;
}

.customer-profile__search-input {
	width: 100%;
	height: 100%;
	padding: 0.5rem 0.75rem 0.5rem 2.25rem;
	font-size: 0.85rem;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.3s ease;
}

.customer-profile__search-input:focus {
	border-color: var(--primary);
}

/* DataTable Override */
.customer-profile__card .dataTables_wrapper .dataTables_info {
	font-size: 0.8rem;
	color: var(--grey);
	padding-top: 0.75rem;
}

.customer-profile__card .dataTables_wrapper .dataTables_paginate {
	padding-top: 0.75rem;
}

.customer-profile__card .dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0.25rem 0.6rem;
	margin: 0 2px;
	border-radius: 4px;
	border: 1px solid #e5e7eb;
	background: var(--white);
	color: var(--secondary) !important;
	font-size: 0.75rem;
	cursor: pointer;
}

.customer-profile__card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.customer-profile__card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.customer-profile__card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Table Value Styles */
.customer-profile__td-value {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--secondary);
}

.customer-profile__line-value {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--secondary);
}

.customer-profile__line-status {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.6rem;
	border-radius: 4px;
	display: inline-block;
}

.customer-profile__line-status--active {
	background: #D1FAE5;
	color: #065F46;
}

.customer-profile__line-status--suspended {
	background: #FEE2E2;
	color: #991B1B;
}

.customer-profile__line-status--pending {
	background: #FEF3C7;
	color: #92400E;
}

/* Ticket ID & Priority Styles */
.customer-profile__ticket-id {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary);
}

.customer-profile__priority--high {
	color: #EF4444;
	font-weight: 600;
}

.customer-profile__priority--medium {
	color: #E89028;
	font-weight: 600;
}

.customer-profile__priority--low {
	color: #22C55E;
	font-weight: 600;
}

/* Usage Bar */
.customer-profile__usage-bar {
	height: 4px;
	background: #E5E7EB;
	border-radius: 4px;
	overflow: hidden;
	max-width: 80px;
	margin-top: 0.25rem;
}

.customer-profile__usage-progress {
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s ease;
}

.customer-profile__usage-text {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
}

/* Notes */
.customer-profile__notes {
	background: #D6E7F3;
	border-radius: 8px;
	padding: 1rem;
	border-left: 3px solid var(--primary);
}

.customer-profile__notes-text {
	font-size: 0.9rem;
	color: var(--secondary);
	margin-bottom: 0.5rem;
}

.customer-profile__notes-meta {
	font-size: 0.7rem;
	color: var(--grey);
}

/* Billing */
.customer-profile__billing-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.customer-profile__billing-item:last-child {
	border-bottom: none;
}

.customer-profile__billing-label {
	font-size: 0.8rem;
	color: var(--grey);
	flex: 0 0 50%;
}

.customer-profile__billing-value {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	text-align: right;
	flex: 0 0 50%;
}

/* Summary */
.customer-profile__summary-item {
	background: #D6E7F3;
	border-radius: 8px;
	padding: 0.75rem;
	text-align: center;
}

.customer-profile__summary-label {
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--grey);
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.customer-profile__summary-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--secondary);
	display: block;
}

.customer-profile__summary-value--success {
	color: #22C55E;
}

.customer-profile__summary-sub {
	font-size: 0.6rem;
	color: var(--grey);
}

/* Quick Actions */
.customer-profile__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.customer-profile__actions .themeBtn {
	font-size: 0.75rem;
	font-weight: 500;
	gap: 0.25rem;
	flex-direction: column;
	padding: 0.875rem 0.5rem;
}

.customer-profile__actions .themeBtn i {
	font-size: 1.125rem;
}

/* Verification */
.customer-profile__verification-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.customer-profile__verification-item:last-child {
	border-bottom: none;
}

.customer-profile__verification-label {
	font-size: 0.8rem;
	color: var(--grey);
	flex: 0 0 50%;
}

.customer-profile__verification-value {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	text-align: right;
	flex: 0 0 50%;
}

.customer-profile__verification-value--verified {
	color: #22C55E;
}

/* Badge Default */
.badge.bg-secondary-light {
	background: #F3F4F6;
	color: #6B7280;
	font-weight: 500;
	font-size: 0.6rem;
	padding: 0.15rem 0.4rem;
}

/* Form Switch */
.form-check.form-switch .form-check-input {
	width: 32px;
	height: 18px;
	cursor: pointer;
}

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

.form-check.form-switch .form-check-input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Activity Timeline */
.activity-timeline {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 350px;
	overflow-y: auto;
}

.timeline-item {
	display: flex;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #f0f0f0;
}

.timeline-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.timeline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 4px;
}

.timeline-dot--primary {
	background: var(--primary);
}

.timeline-dot--success {
	background: #22C55E;
}

.timeline-dot--warning {
	background: #E89028;
}

.timeline-dot--danger {
	background: #EF4444;
}

.timeline-dot--info {
	background: #2B8FD4;
}

.timeline-dot--secondary {
	background: #9CA3AF;
}

.timeline-content {
	flex: 1;
	min-width: 0;
}

.timeline-content h6 {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
	margin: 0 0 2px 0;
}

.timeline-content p {
	font-size: 0.75rem;
	color: var(--grey);
	margin: 0 0 2px 0;
}

.timeline-time {
	font-size: 0.65rem;
	color: var(--grey);
}

.activity-timeline::-webkit-scrollbar {
	width: 4px;
}

.activity-timeline::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.activity-timeline::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 4px;
}

/* Activity Timeline Icons */
.timeline-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
	color: var(--white);
}

.timeline-icon--primary {
	background: var(--primary);
}

.timeline-icon--success {
	background: #22C55E;
}

.timeline-icon--warning {
	background: #E89028;
}

.timeline-icon--danger {
	background: #EF4444;
}

.timeline-icon--info {
	background: #2B8FD4;
}

.timeline-icon--secondary {
	background: #9CA3AF;
}

.timeline-icon--primary i,
.timeline-icon--success i,
.timeline-icon--warning i,
.timeline-icon--danger i,
.timeline-icon--info i,
.timeline-icon--secondary i {
	color: var(--white);
}

/* Dropdown */

.customerProfile--page .dropdown-menu {
	border-radius: 8px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	padding: 0.25rem 0;
	min-width: 140px;
}

.customerProfile--page .dropdown-menu .dropdown-item {
	font-size: 0.8rem;
	padding: 0.4rem 1rem;
	color: var(--secondary);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.customerProfile--page .dropdown-menu .dropdown-item:hover {
	background: #F3F4F6;
	color: var(--primary);
}

.customerProfile--page .dropdown-menu .dropdown-item i {
	font-size: 0.85rem;
	color: var(--grey);
	width: 16px;
}

.customerProfile--page .dropdown-menu .dropdown-item:hover i {
	color: var(--primary);
}

.customerProfile--page .dropdown-menu .dropdown-item.text-danger:hover {
	background: #FEE2E2;
	color: #991B1B;
}

.customerProfile--page .dropdown-menu .dropdown-item.text-danger:hover i {
	color: #991B1B;
}

/* Customer Profile Page End */


/* Delete Customer Page Start */

.deleteCustomer--page {
	max-width: 780px;
	margin: 0 auto;
}

/* Breadcrumb */
.delete-customer__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.delete-customer__breadcrumb a {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
}

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

.delete-customer__breadcrumb i {
	font-size: 0.6rem;
	color: var(--grey);
	opacity: 0.6;
}

.delete-customer__breadcrumb-current {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--primary);
}

/* Card */
.delete-customer__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.delete-customer__inner {
	padding: 1.5rem;
}

/* Warning Banner */
.delete-customer__alert {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: rgba(55, 130, 247, 0.08);
	border-bottom: 1px solid rgba(55, 130, 247, 0.2);
	padding: 1.25rem 1.5rem;
}

.delete-customer__alert-icon {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1rem;
}

.delete-customer__alert-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.25rem;
}

.delete-customer__alert-text {
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--secondary);
	margin-bottom: 0;
}

/* Customer Summary */
.delete-customer__summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.delete-customer__summary-label {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: block;
	margin-bottom: 0.25rem;
}

.delete-customer__summary-value {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--secondary);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.delete-customer__badge {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--primary);
	background: rgba(55, 130, 247, 0.12);
	border-radius: 4px;
	padding: 0.15rem 0.4rem;
}

/* Section Title */
.delete-customer__section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 1.25rem;
}

.delete-customer__section-title i {
	color: var(--primary);
	font-size: 0.95rem;
}

/* Deleted Items List */
.delete-customer__list {
	margin-bottom: 1.5rem;
}

.delete-customer__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.delete-customer__item-icon {
	font-size: 1rem;
	color: var(--grey);
	width: 20px;
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.delete-customer__item-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.15rem;
}

.delete-customer__item-text {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--grey);
	margin-bottom: 0;
}

/* Confirm Box */
.delete-customer__confirm {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

.delete-customer__confirm .form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.delete-customer__confirm .form-check-input {
	width: 18px;
	height: 18px;
	margin: 0.1rem 0 0 0;
	flex-shrink: 0;
	border-color: #d1d5db;
	cursor: pointer;
}

.delete-customer__confirm .form-check-input:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

.delete-customer__confirm .form-check-input:focus {
	box-shadow: none;
	border-color: var(--primary);
}

.delete-customer__confirm .form-check-label {
	cursor: pointer;
}

.delete-customer__confirm-title {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.25rem;
}

.delete-customer__confirm-text {
	display: block;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--grey);
}

/* Footer Actions */
.delete-customer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	border-top: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.delete-customer__footer .themeBtn {
	font-size: 0.85rem;
}

.delete-customer__footer .themeBtn:not(.themeBtn--border) {
	min-width: 260px;
}

.delete-customer__footer .themeBtn:disabled,
.delete-customer__footer .themeBtn:disabled:hover {
	background: var(--grey);
	border-color: transparent;
	color: var(--white);
	opacity: 0.45;
	cursor: not-allowed;
}

/* Meta Footer */
.delete-customer__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.delete-customer__meta li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.65rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	opacity: 0.75;
}

/* Delete Customer Page End */

/* Suspend Account Page Start */

.suspendAccount--page {
	max-width: 900px;
	margin: 0 auto;
}

/* Breadcrumb */
.suspend-account__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.suspend-account__breadcrumb a {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
}

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

.suspend-account__breadcrumb i {
	font-size: 0.6rem;
	color: var(--grey);
	opacity: 0.6;
}

.suspend-account__breadcrumb-current {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--primary);
}

/* Warning Banner */
.suspend-account__alert {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #D6E7F3;
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.suspend-account__alert-icon {
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--white);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.05rem;
}

.suspend-account__alert-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.35rem;
}

.suspend-account__alert-text {
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0;
}

.suspend-account__alert-text strong {
	font-weight: 700;
}

/* Card */
.suspend-account__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.suspend-account__card-body {
	padding: 1.5rem;
}

.suspend-account__card-title {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 1.25rem;
}

/* Form Fields */
.suspend-account__field {
	margin-bottom: 1.25rem;
}

.suspend-account__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--secondary);
	margin-bottom: 0.5rem;
}

.suspend-account__select,
.suspend-account__textarea {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 0.9rem;
	transition: border-color 0.3s ease;
}

.suspend-account__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 14px;
	padding-right: 2.25rem;
	cursor: pointer;
}

.suspend-account__textarea {
	resize: vertical;
	min-height: 100px;
}

.suspend-account__select:focus,
.suspend-account__textarea:focus {
	outline: none;
	border-color: var(--primary);
}

.suspend-account__textarea::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.suspend-account__help {
	display: block;
	font-size: 0.7rem;
	font-style: italic;
	color: var(--grey);
	margin-top: 0.5rem;
}

/* Duration Toggle */
.suspend-account__toggle {
	display: inline-flex;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
}

.suspend-account__toggle-btn {
	background: #F9FAFB;
	border: none;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.6rem 1.5rem;
}

.suspend-account__toggle-btn+.suspend-account__toggle-btn {
	border-left: 1px solid #e5e7eb;
}

.suspend-account__toggle-btn.active {
	background: var(--white);
	color: var(--primary);
	font-weight: 600;
}

/* Footer Actions */
.suspend-account__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.75rem;
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.suspend-account__footer .themeBtn {
	font-size: 0.85rem;
}

/* Customer Card */
.suspend-account__customer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.suspend-account__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.95rem;
}

.suspend-account__customer-name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.1rem;
}

.suspend-account__customer-meta {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--primary);
}

.suspend-account__info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.suspend-account__info-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.suspend-account__info-label {
	font-size: 0.78rem;
	color: var(--grey);
}

.suspend-account__info-value {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--secondary);
	text-align: right;
}

.suspend-account__info-value--online {
	color: #22C55E;
}

.suspend-account__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22C55E;
	display: inline-block;
}

/* Compliance Note */
.suspend-account__note {
	background: #F3F4F6;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.suspend-account__note-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.suspend-account__note-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 0;
}

/* Security Footer */
.suspend-account__security {
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	text-align: center;
	padding: 2rem 1rem;
	margin-top: 1.5rem;
}

.suspend-account__security span {
	font-size: 0.65rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--grey);
}

/* Suspend Account Page End */

/* Reset Password Page Start */

.resetPassword--page {
	max-width: 1100px;
	margin: 0 auto;
}

/* Breadcrumb */
.resetPassword--page .reset-password__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.resetPassword--page .reset-password__breadcrumb a {
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.resetPassword--page .reset-password__breadcrumb a:hover {
	color: var(--primary);
}

.resetPassword--page .reset-password__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.resetPassword--page .reset-password__breadcrumb-current {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--primary);
}

/* Page Header */
.resetPassword--page .reset-password__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.resetPassword--page .reset-password__status {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #D6E7F3;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
}

.resetPassword--page .reset-password__status-icon {
	width: 42px;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background: var(--white);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1rem;
}

.resetPassword--page .reset-password__status-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.resetPassword--page .reset-password__status-label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--primary);
}

.resetPassword--page .reset-password__status-value {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

/* Card */
.resetPassword--page .reset-password__card {
	height: 100%;
	border: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.resetPassword--page .reset-password__card--manual {
	border-top: 3px solid var(--primary);
}

.resetPassword--page .reset-password__card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.25rem 1.5rem;
}

.resetPassword--page .reset-password__card-icon {
	width: 36px;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.9rem;
}

.resetPassword--page .reset-password__card-icon--fill {
	background: #D6E7F3;
	color: var(--primary);
}

.resetPassword--page .reset-password__card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0;
}

.resetPassword--page .reset-password__card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}

.resetPassword--page .reset-password__card-text {
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--grey);
	margin-bottom: 1.5rem;
}

/* Remote Reset Options */
.resetPassword--page .reset-password__options {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
}

.resetPassword--page .reset-password__option {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-align: left;
	padding: 0.85rem 1rem;
}

.resetPassword--page .reset-password__option:hover {
	border-color: var(--primary);
	background: #F3F8FC;
}

.resetPassword--page .reset-password__option-icon {
	width: 32px;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.resetPassword--page .reset-password__option-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.resetPassword--page .reset-password__option-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
}

.resetPassword--page .reset-password__option-meta {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.resetPassword--page .reset-password__option-arrow {
	font-size: 0.75rem;
	color: var(--primary);
	flex-shrink: 0;
}

/* Note */
.resetPassword--page .reset-password__note {
	background: #F9FAFB;
	border: 1px dashed #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	padding: 0.85rem 1rem;
	margin-top: 0.75rem;
}

.resetPassword--page .reset-password__note-label {
	font-weight: 600;
	color: var(--secondary);
}

/* Form Fields */
.resetPassword--page .reset-password__field {
	margin-bottom: 1.25rem;
}

.resetPassword--page .reset-password__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.resetPassword--page .reset-password__input-group {
	position: relative;
}

.resetPassword--page .reset-password__input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.75rem 2.75rem 0.75rem 0.9rem;
	transition: border-color 0.3s ease;
}

.resetPassword--page .reset-password__input:focus {
	outline: none;
	border-color: var(--primary);
}

.resetPassword--page .reset-password__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.resetPassword--page .reset-password__input-btn {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	transform: translateY(-50%);
	width: 32px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
}

.resetPassword--page .reset-password__input-btn:hover,
.resetPassword--page .reset-password__input-btn.active {
	color: var(--primary);
}

/* Strength Meter */
.resetPassword--page .reset-password__strength {
	margin-top: 0.75rem;
}

.resetPassword--page .reset-password__strength-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.resetPassword--page .reset-password__strength-label,
.resetPassword--page .reset-password__strength-value {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
}

.resetPassword--page .reset-password__strength-bar {
	width: 100%;
	height: 4px;
	background: #e5e7eb;
	border-radius: 50px;
	overflow: hidden;
}

.resetPassword--page .reset-password__strength-fill {
	width: 0;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
	display: block;
	transition: width 0.3s ease, background 0.3s ease;
}

.resetPassword--page .reset-password__strength-fill.is-weak {
	background: var(--primary);
}

.resetPassword--page .reset-password__strength-fill.is-fair {
	background: #E89028;
}

.resetPassword--page .reset-password__strength-fill.is-good {
	background: var(--primary);
}

.resetPassword--page .reset-password__strength-fill.is-strong {
	background: #22C55E;
}

/* Requirements */
.resetPassword--page .reset-password__requirements {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem 1rem;
	background: #F0FDF4;
	border: 1px solid #DCFCE7;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.resetPassword--page .reset-password__requirement {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.resetPassword--page .reset-password__requirement.active {
	color: var(--secondary);
}

.resetPassword--page .reset-password__requirement-icon {
	font-size: 0.8rem;
	color: #cbd5e1;
	flex-shrink: 0;
}

.resetPassword--page .reset-password__requirement.active .reset-password__requirement-icon {
	color: #22C55E;
}

/* Footer Actions */
.resetPassword--page .reset-password__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.resetPassword--page .reset-password__policy {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.resetPassword--page .reset-password__policy-label {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.resetPassword--page .reset-password__policy-value {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--primary);
}

.resetPassword--page .reset-password__footer-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.resetPassword--page .reset-password__footer .themeBtn {
	font-size: 0.85rem;
}

.resetPassword--page .reset-password__footer .themeBtn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Info Cards */
.resetPassword--page .reset-password__info {
	margin-top: 0.5rem;
}

.resetPassword--page .reset-password__info-card {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.15rem 1.25rem;
}

.resetPassword--page .reset-password__info-icon {
	font-size: 0.9rem;
	color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.resetPassword--page .reset-password__info-title {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.3rem;
}

.resetPassword--page .reset-password__info-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 0;
}

/* Reset Password Page End */

/* Edit Customer Page Start */

/* Page Header */
.editCustomer--page .edit-customer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.editCustomer--page .edit-customer__subtitle span {
	font-weight: 600;
	color: var(--primary);
}

.editCustomer--page .edit-customer__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.editCustomer--page .edit-customer__header-actions .themeBtn {
	font-size: 0.85rem;
}

/* Card */
.editCustomer--page .edit-customer__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.editCustomer--page .edit-customer__card--accent {
	border-top: 3px solid var(--primary);
}

.editCustomer--page .edit-customer__card-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.1rem 1.5rem;
}

.editCustomer--page .edit-customer__card-icon {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #F3F4F6;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.editCustomer--page .edit-customer__card-icon--fill {
	background: #D6E7F3;
}

.editCustomer--page .edit-customer__card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0;
}

.editCustomer--page .edit-customer__card-body {
	padding: 1.5rem;
}

/* Form Fields */
.editCustomer--page .edit-customer__field {
	margin-bottom: 1.25rem;
}

.editCustomer--page .edit-customer__card-body .row .edit-customer__field {
	margin-bottom: 0;
}

.editCustomer--page .edit-customer__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
	margin-bottom: 0.4rem;
}

.editCustomer--page .edit-customer__input,
.editCustomer--page .edit-customer__select {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.65rem 0.9rem;
	transition: border-color 0.3s ease;
}

.editCustomer--page .edit-customer__input:focus,
.editCustomer--page .edit-customer__select:focus {
	outline: none;
	border-color: var(--primary);
}

.editCustomer--page .edit-customer__input::placeholder {
	font-style: italic;
	font-weight: 400;
	color: var(--grey);
	opacity: 0.7;
}

.editCustomer--page .edit-customer__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 14px;
	padding-right: 2.25rem;
	cursor: pointer;
}

/* Input Group */
.editCustomer--page .edit-customer__input-group {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.editCustomer--page .edit-customer__input-prefix {
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 0.75rem;
}

/* Radios */
.editCustomer--page .edit-customer__radios {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.editCustomer--page .edit-customer__radio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	cursor: pointer;
	margin-bottom: 0;
}

.editCustomer--page .edit-customer__radio input {
	width: 14px;
	height: 14px;
	accent-color: var(--primary);
	cursor: pointer;
}

.editCustomer--page .edit-customer__radio input:checked+span {
	font-weight: 600;
	color: var(--secondary);
}

/* Auto-Pay Row */
.editCustomer--page .edit-customer__autopay {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	margin-bottom: 1.25rem;
	transition: all 0.3s ease;
}

.editCustomer--page .edit-customer__autopay.active {
	background: #F3F8FC;
	border-color: var(--primary);
}

.editCustomer--page .edit-customer__autopay-icon {
	font-size: 0.9rem;
	color: var(--grey);
	flex-shrink: 0;
}

.editCustomer--page .edit-customer__autopay.active .edit-customer__autopay-icon {
	color: var(--primary);
}

.editCustomer--page .edit-customer__autopay-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.editCustomer--page .edit-customer__autopay-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--secondary);
}

.editCustomer--page .edit-customer__autopay-meta {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

/* Switch */
.editCustomer--page .edit-customer__switch {
	position: relative;
	width: 42px;
	height: 22px;
	flex-shrink: 0;
	margin-bottom: 0;
	cursor: pointer;
}

.editCustomer--page .edit-customer__switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.editCustomer--page .edit-customer__switch-slider {
	position: absolute;
	inset: 0;
	background: #cbd5e1;
	border-radius: 50px;
	transition: background 0.3s ease;
}

.editCustomer--page .edit-customer__switch-slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--white);
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.editCustomer--page .edit-customer__switch input:checked+.edit-customer__switch-slider {
	background: var(--primary);
}

.editCustomer--page .edit-customer__switch input:checked+.edit-customer__switch-slider::before {
	transform: translateX(20px);
}

/* Edit Customer Page End */

/* Add New Line Page Start */

/* Breadcrumb */
.addNewLine--page .activate-line__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.addNewLine--page .activate-line__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.addNewLine--page .activate-line__breadcrumb a:hover {
	color: var(--primary);
}

.addNewLine--page .activate-line__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.addNewLine--page .activate-line__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.addNewLine--page .activate-line__header {
	margin-bottom: 1.5rem;
}

.addNewLine--page .activate-line__subtitle span {
	font-weight: 600;
	color: var(--primary);
}

/* Steps Sidebar */
.addNewLine--page .activate-line__steps {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.5rem;
	position: sticky;
	top: 1rem;
}

.addNewLine--page .activate-line__step {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: 0.5rem;
	padding: 0.65rem 0.75rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.addNewLine--page .activate-line__step:hover {
	background: #F9FAFB;
}

.addNewLine--page .activate-line__step-count {
	width: 24px;
	aspect-ratio: 1;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 600;
}

.addNewLine--page .activate-line__step-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--grey);
}

.addNewLine--page .activate-line__step.active .activate-line__step-count {
	border-color: var(--primary);
	color: var(--primary);
}

.addNewLine--page .activate-line__step.active .activate-line__step-label {
	font-weight: 600;
	color: var(--secondary);
}

/* Completed step */
.addNewLine--page .activate-line__step.done .activate-line__step-count {
	background: var(--primary);
	border-color: var(--primary);
	font-size: 0;
}

.addNewLine--page .activate-line__step.done .activate-line__step-count::after {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.6rem;
	color: var(--white);
}

.addNewLine--page .activate-line__step.done .activate-line__step-label {
	font-weight: 600;
	color: var(--primary);
}

/* Sidebar Alert */
.addNewLine--page .activate-line__alert {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	background: #EDF4FA;
	border-radius: 0.5rem;
	padding: 0.9rem 1rem;
	position: sticky;
	top: 11rem;
}

.addNewLine--page .activate-line__alert i {
	font-size: 0.85rem;
	color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.addNewLine--page .activate-line__alert-text {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--primary);
	margin-bottom: 0;
}

/* Card */
.addNewLine--page .activate-line__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.addNewLine--page .activate-line__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1.15rem 1.5rem 0;
}

.addNewLine--page .activate-line__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0;
}

.addNewLine--page .activate-line__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.addNewLine--page .activate-line__badge {
	background: #F3F4F6;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.25rem 0.75rem;
}

.addNewLine--page .activate-line__card-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* SIM Options */
.addNewLine--page .activate-line__sim-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.addNewLine--page .activate-line__sim-option {
	position: relative;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.addNewLine--page .activate-line__sim-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.addNewLine--page .activate-line__sim-option:hover {
	border-color: var(--primary);
}

.addNewLine--page .activate-line__sim-option:has(input:checked) {
	border-color: var(--primary);
	background: #EDF4FA;
}

.addNewLine--page .activate-line__sim-radio {
	position: absolute;
	top: 1.15rem;
	right: 1.15rem;
	width: 16px;
	height: 16px;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background: var(--white);
}

.addNewLine--page .activate-line__sim-option:has(input:checked) .activate-line__sim-radio {
	border-color: var(--primary);
	background: var(--primary);
	box-shadow: inset 0 0 0 3px var(--white);
}

.addNewLine--page .activate-line__sim-icon {
	font-size: 1.5rem;
	color: var(--grey);
	margin-bottom: 1.5rem;
}

.addNewLine--page .activate-line__sim-option:has(input:checked) .activate-line__sim-icon {
	color: var(--primary);
}

.addNewLine--page .activate-line__sim-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.25rem;
}

.addNewLine--page .activate-line__sim-option:has(input:checked) .activate-line__sim-title {
	color: var(--primary);
}

.addNewLine--page .activate-line__sim-desc {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--grey);
}

/* ICCID Field */
.addNewLine--page .activate-line__field {
	margin-bottom: 1.25rem;
}

.addNewLine--page .activate-line__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.addNewLine--page .activate-line__iccid {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
}

.addNewLine--page .activate-line__input-group {
	position: relative;
	flex: 1;
}

.addNewLine--page .activate-line__input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.7rem 2.5rem 0.7rem 0.9rem;
	transition: border-color 0.3s ease;
}

.addNewLine--page .activate-line__input:focus {
	outline: none;
	border-color: var(--primary);
}

.addNewLine--page .activate-line__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.addNewLine--page .activate-line__input-btn {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	transform: translateY(-50%);
	width: 30px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
}

.addNewLine--page .activate-line__validate {
	background: #F3F4F6;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.7rem 1.5rem;
	flex-shrink: 0;
}

.addNewLine--page .activate-line__validate:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

/* Validation Feedback */
.addNewLine--page .activate-line__input.is-valid {
	border-color: #22C55E;
}

.addNewLine--page .activate-line__input.is-invalid {
	border-color: var(--primary);
}

.addNewLine--page .activate-line__feedback {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 500;
	margin-top: 0.5rem;
}

.addNewLine--page .activate-line__feedback:empty {
	display: none;
}

.addNewLine--page .activate-line__feedback.is-valid {
	color: #15803D;
}

.addNewLine--page .activate-line__feedback.is-invalid {
	color: var(--primary);
}

/* Note */
.addNewLine--page .activate-line__note {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
	padding: 0.75rem 1rem;
}

.addNewLine--page .activate-line__note i {
	font-size: 0.8rem;
	color: var(--grey);
	flex-shrink: 0;
}

/* Plan Cards */
.addNewLine--page .activate-line__plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.addNewLine--page .activate-line__plan {
	position: relative;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	transition: all 0.3s ease;
}

.addNewLine--page .activate-line__plan.active {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary);
}

.addNewLine--page .activate-line__plan-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--primary);
	border-radius: 50px;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--white);
	white-space: nowrap;
	padding: 0.25rem 0.75rem;
}

.addNewLine--page .activate-line__plan-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.addNewLine--page .activate-line__plan-name {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
}

.addNewLine--page .activate-line__plan.active .activate-line__plan-name {
	color: var(--primary);
}

.addNewLine--page .activate-line__plan-price {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary);
}

.addNewLine--page .activate-line__plan-price small {
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--grey);
}

.addNewLine--page .activate-line__plan-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.addNewLine--page .activate-line__plan-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--secondary);
}

.addNewLine--page .activate-line__plan-list li i {
	font-size: 0.7rem;
	color: var(--grey);
	flex-shrink: 0;
}

.addNewLine--page .activate-line__plan.active .activate-line__plan-list li i {
	color: var(--primary);
}

.addNewLine--page .activate-line__plan-btn {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.5rem 1rem;
}

.addNewLine--page .activate-line__plan-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.addNewLine--page .activate-line__plan.active .activate-line__plan-btn {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

/* Customer Assignment */
.addNewLine--page .activate-line__customer {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.addNewLine--page .activate-line__customer-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.addNewLine--page .activate-line__customer-body {
	flex: 1;
	min-width: 0;
}

.addNewLine--page .activate-line__customer-name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.2rem;
}

.addNewLine--page .activate-line__customer-tag {
	background: #D6E7F3;
	border-radius: 50px;
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--primary);
	padding: 0.15rem 0.5rem;
}

.addNewLine--page .activate-line__customer-contact {
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--grey);
	margin-bottom: 0.35rem;
}

.addNewLine--page .activate-line__customer-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
}

.addNewLine--page .activate-line__customer-meta li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.addNewLine--page .activate-line__customer-meta li i {
	font-size: 0.65rem;
	color: var(--grey);
}

.addNewLine--page .activate-line__customer-change {
	background: transparent;
	border: none;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--primary);
	padding: 0;
	flex-shrink: 0;
}

.addNewLine--page .activate-line__customer-change:hover {
	color: var(--secondary);
}

/* Footer Actions */
.addNewLine--page .activate-line__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	border-top: 1px solid #e5e7eb;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}

.addNewLine--page .activate-line__draft {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--grey);
}

.addNewLine--page .activate-line__draft:hover {
	color: var(--primary);
}

.addNewLine--page .activate-line__footer-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.addNewLine--page .activate-line__footer-actions .themeBtn {
	font-size: 0.85rem;
}

/* Add New Line Page End */

/* Change Customer Modal Start */

.changeCustomer--modal .modal-content {
	border: none;
	border-radius: 0.75rem;
	overflow: hidden;
}

.changeCustomer--modal .change-customer__header {
	align-items: flex-start;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.25rem 1.5rem;
}

.changeCustomer--modal .change-customer__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.15rem;
}

.changeCustomer--modal .change-customer__subtitle {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
	margin-bottom: 0;
}

.changeCustomer--modal .change-customer__body {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Search */
.changeCustomer--modal .change-customer__search {
	position: relative;
	margin-bottom: 1rem;
}

.changeCustomer--modal .change-customer__search i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.changeCustomer--modal .change-customer__search input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.6rem 0.9rem 0.6rem 2.35rem;
}

.changeCustomer--modal .change-customer__search input:focus {
	outline: none;
	border-color: var(--primary);
}

.changeCustomer--modal .change-customer__search input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

/* Customer List */
.changeCustomer--modal .change-customer__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.changeCustomer--modal .change-customer__item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	text-align: left;
	padding: 0.75rem 1rem;
	transition: all 0.3s ease;
}

.changeCustomer--modal .change-customer__item:hover {
	border-color: var(--primary);
	background: #F3F8FC;
}

.changeCustomer--modal .change-customer__item.active {
	border-color: var(--primary);
	background: #D6E7F3;
}

.changeCustomer--modal .change-customer__avatar {
	width: 34px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.65rem;
	font-weight: 700;
}

.changeCustomer--modal .change-customer__item.active .change-customer__avatar {
	background: var(--primary);
	color: var(--white);
}

.changeCustomer--modal .change-customer__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.changeCustomer--modal .change-customer__name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

.changeCustomer--modal .change-customer__meta {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
	word-break: break-all;
}

.changeCustomer--modal .change-customer__check {
	font-size: 0.75rem;
	color: var(--primary);
	opacity: 0;
	flex-shrink: 0;
}

.changeCustomer--modal .change-customer__item.active .change-customer__check {
	opacity: 1;
}

.changeCustomer--modal .change-customer__empty {
	display: none;
	font-size: 0.75rem;
	font-weight: 400;
	text-align: center;
	color: var(--grey);
	padding: 1.5rem 0;
}

/* Change Customer Modal End */

/* Porting Center Page Start */

/* Page Header */
.portingCenter--page .porting__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.portingCenter--page .porting__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.portingCenter--page .porting__header-actions .themeBtn {
	font-size: 0.85rem;
}

/* Stat Cards */
.portingCenter--page .porting__stat {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.portingCenter--page .porting__stat-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.75rem;
}

.portingCenter--page .porting__stat-label i {
	font-size: 0.9rem;
	color: var(--grey);
}

.portingCenter--page .porting__stat-value {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.portingCenter--page .porting__stat-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.portingCenter--page .porting__stat-change {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
}

.portingCenter--page .porting__stat-change--up {
	color: #22C55E;
}

.portingCenter--page .porting__stat-change--down {
	color: #DC2626;
}

/* Table Card */
.portingCenter--page .porting__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.portingCenter--page .porting__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.portingCenter--page .porting__card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0;
}

.portingCenter--page .porting__filter {
	position: relative;
	min-width: 190px;
}

.portingCenter--page .porting__filter i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.portingCenter--page .porting__filter-select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 13px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.6rem 2.25rem;
	cursor: pointer;
}

.portingCenter--page .porting__filter-select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Table */
.portingCenter--page .porting__table-wrap {
	padding: 0 1.5rem;
}

.portingCenter--page .porting__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 900px;
	margin: 0 !important;
}

.portingCenter--page .porting__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
}

.portingCenter--page .porting__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 1rem 1.5rem;
}

.portingCenter--page .porting__table tbody tr:hover {
	background: #F9FAFB;
}

.portingCenter--page .porting__id {
	font-family: monospace;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.portingCenter--page .porting__msisdn {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--primary);
}

.portingCenter--page .porting__msisdn:hover {
	color: var(--primary);
}

.portingCenter--page .porting__carrier {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--grey);
}

.portingCenter--page .porting__date {
	font-size: 0.8rem;
	font-weight: 400;
}

/* Status Pills */
.portingCenter--page .porting__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.25rem 0.7rem;
}

.portingCenter--page .porting__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.portingCenter--page .porting__status--pending {
	background: #F3F4F6;
	color: var(--grey);
}

.portingCenter--page .porting__status--approved {
	background: #DCFCE7;
	color: #15803D;
}

.portingCenter--page .porting__status--failed {
	background: #DC262620;
	color: #DC2626;
}

/* Row Action */
.portingCenter--page .porting__action {
	width: 30px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.85rem;
}

.portingCenter--page .porting__action:hover {
	background: #F3F4F6;
	color: var(--primary);
}

/* DataTable Override */
.portingCenter--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.portingCenter--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.portingCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.6rem;
	margin: 0 2px;
	cursor: pointer;
}

.portingCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.portingCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.portingCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Porting Center Page End */

/* New Port Request Modal Start */

.portRequest--modal .modal-content {
	border: none;
	border-radius: 0.75rem;
	overflow: hidden;
}

.portRequest--modal .port-request__header {
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.25rem 1.5rem;
}

.portRequest--modal .port-request__back {
	background: transparent;
	border: none;
	font-size: 0.9rem;
	flex-shrink: 0;
}

.portRequest--modal .port-request__back:hover {
	color: var(--primary);
}

.portRequest--modal .port-request__header-body {
	flex: 1;
	min-width: 0;
}

.portRequest--modal .port-request__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.15rem;
}

.portRequest--modal .port-request__subtitle {
	font-size: 0.75rem;
	font-weight: 400;
	margin-bottom: 0;
}

.portRequest--modal .port-request__status {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: #F3F4F6;
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.35rem 0.85rem;
	flex-shrink: 0;
}

.portRequest--modal .port-request__body {
	padding: 1.5rem;
}

/* Section Title */
.portRequest--modal .port-request__section-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.95rem;
	font-weight: 600;
	padding-bottom: 0.75rem;
	margin-bottom: 1.25rem;
}

.portRequest--modal .port-request__section-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

/* Panel */
.portRequest--modal .port-request__panel {
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

/* Fields */
.portRequest--modal .port-request__field {
	margin-bottom: 1rem;
}

.portRequest--modal .port-request__label {
	display: block;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.4rem;
}

.portRequest--modal .port-request__input,
.portRequest--modal .port-request__select {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.7rem 0.9rem;
	transition: border-color 0.3s ease;
}

.portRequest--modal .port-request__input:focus,
.portRequest--modal .port-request__select:focus {
	outline: none;
	border-color: var(--primary);
}

.portRequest--modal .port-request__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.portRequest--modal .port-request__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 14px;
	padding-right: 2.25rem;
	cursor: pointer;
}

.portRequest--modal .port-request__input-group {
	position: relative;
}

.portRequest--modal .port-request__input-icon {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.8rem;
	color: var(--grey);
	pointer-events: none;
}

.portRequest--modal .port-request__input--icon {
	padding-left: 2.5rem;
}

.portRequest--modal .port-request__help {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.4rem;
}

/* Divider */
.portRequest--modal .port-request__divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.portRequest--modal .port-request__divider::before,
.portRequest--modal .port-request__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.portRequest--modal .port-request__divider span {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
}

/* Authorization */
.portRequest--modal .port-request__confirm {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.portRequest--modal .port-request__confirm input {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	margin-top: 5px;
	flex-shrink: 0;
	cursor: pointer;
}

.portRequest--modal .port-request__confirm label {
	cursor: pointer;
	margin-bottom: 0;
}

.portRequest--modal .port-request__confirm-title {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.portRequest--modal .port-request__confirm-text {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
}

/* Modal Footer */
.portRequest--modal .port-request__footer {
	justify-content: flex-end;
	gap: 0.75rem;
	background: var(--white);
	border-top: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.portRequest--modal .port-request__footer .themeBtn {
	font-size: 0.85rem;
	margin: 0;
}

.portRequest--modal .port-request__footer .themeBtn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* New Port Request Modal End */

/* Bulk Import Porting Page Start */

/* Page Header */
.bulkImportPorting--page .bulk-import__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.bulkImportPorting--page .bulk-import__header .themeBtn {
	font-size: 0.8rem;
	padding: 0.5rem 1.15rem;
}

/* Card */
.bulkImportPorting--page .bulk-import__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.bulkImportPorting--page .bulk-import__card-body {
	padding: 1.25rem 1.5rem;
}

.bulkImportPorting--page .bulk-import__card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 1rem;
}

.bulkImportPorting--page .bulk-import__card-title i {
	font-size: 0.8rem;
	color: var(--primary);
}

/* Dropzone */
.bulkImportPorting--page .bulk-import__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 2px dashed #e5e7eb;
	border-radius: 0.75rem;
	padding: 2.5rem 1.5rem;
	margin: 1.25rem;
	transition: all 0.3s ease;
}

.bulkImportPorting--page .bulk-import__dropzone.active {
	border-color: var(--primary);
	background: #F3F8FC;
}

.bulkImportPorting--page .bulk-import__dropzone-icon {
	width: 56px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.bulkImportPorting--page .bulk-import__dropzone.active .bulk-import__dropzone-icon {
	background: #D6E7F3;
	color: var(--primary);
}

.bulkImportPorting--page .bulk-import__dropzone-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.bulkImportPorting--page .bulk-import__dropzone-text {
	max-width: 420px;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 1.25rem;
}

.bulkImportPorting--page .bulk-import__dropzone .themeBtn {
	font-size: 0.8rem;
	padding: 0.5rem 1.5rem;
}

/* Uploaded File */
.bulkImportPorting--page .bulk-import__file {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.25rem 1.5rem;
}

.bulkImportPorting--page .bulk-import__file-icon {
	font-size: 1rem;
	color: #22C55E;
	flex-shrink: 0;
}

.bulkImportPorting--page .bulk-import__file-body {
	flex: 1;
	min-width: 0;
}

.bulkImportPorting--page .bulk-import__file-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	word-break: break-all;
	margin-bottom: 0.15rem;
}

.bulkImportPorting--page .bulk-import__file-meta {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.bulkImportPorting--page .bulk-import__file-remove {
	width: 30px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--primary);
	font-size: 0.85rem;
	flex-shrink: 0;
}

.bulkImportPorting--page .bulk-import__file-remove:hover {
	background: #D6E7F3;
}

/* Mapping Table */
.bulkImportPorting--page .bulk-import__mapping {
	padding: 1.25rem 1.5rem;
}

.bulkImportPorting--page .bulk-import__mapping-title {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.75rem;
}

.bulkImportPorting--page .bulk-import__table-wrap {
	width: 100%;
	overflow-x: auto;
}

.bulkImportPorting--page .bulk-import__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
}

.bulkImportPorting--page .bulk-import__table th {
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.5rem 0.75rem;
}

.bulkImportPorting--page .bulk-import__table th:first-child,
.bulkImportPorting--page .bulk-import__table td:first-child {
	padding-left: 0;
}

.bulkImportPorting--page .bulk-import__table th:last-child,
.bulkImportPorting--page .bulk-import__table td:last-child {
	padding-right: 0;
}

.bulkImportPorting--page .bulk-import__table td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	padding: 0.75rem;
}

.bulkImportPorting--page .bulk-import__table tbody tr:last-child td {
	border-bottom: none;
}

.bulkImportPorting--page .bulk-import__column {
	font-family: monospace;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
}

.bulkImportPorting--page .bulk-import__arrow {
	font-size: 0.65rem;
	color: var(--grey);
	margin-left: 0.75rem;
}

.bulkImportPorting--page .bulk-import__select {
	width: 100%;
	max-width: 200px;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.45rem 2rem 0.45rem 0.75rem;
	cursor: pointer;
}

.bulkImportPorting--page .bulk-import__select:focus {
	outline: none;
	border-color: var(--primary);
}

.bulkImportPorting--page .bulk-import__status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 0.2rem 0.65rem;
}

.bulkImportPorting--page .bulk-import__status--mapped {
	background: #DCFCE7;
	color: #15803D;
}

.bulkImportPorting--page .bulk-import__status--unmapped {
	background: #DC262620;
	color: #DC2626;
}

/* Import Actions */
.bulkImportPorting--page .bulk-import__validation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	background: #F9FAFB;
	border-radius: 0.5rem;
	padding: 0.65rem 1rem;
	margin-bottom: 1rem;
}

.bulkImportPorting--page .bulk-import__validation-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.bulkImportPorting--page .bulk-import__validation-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
}

.bulkImportPorting--page .bulk-import__validation-value.is-error {
	color: #DC2626;
}

.bulkImportPorting--page .bulk-import__validation-value.is-success {
	color: #15803D;
}

.bulkImportPorting--page .bulk-import__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bulkImportPorting--page .bulk-import__actions .themeBtn {
	font-size: 0.85rem;
}

/* Guidelines */
.bulkImportPorting--page .bulk-import__guidelines {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.bulkImportPorting--page .bulk-import__guidelines li {
	position: relative;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	padding-left: 1rem;
}

.bulkImportPorting--page .bulk-import__guidelines li::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary);
}

/* Bulk Import Porting Page End */

/* Plans & Addons Page Start */

/* Page Header */
.plansAddons--page .plans__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.plansAddons--page .plans__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.plansAddons--page .plans__header-actions .themeBtn {
	font-size: 0.85rem;
}

/* Tabs */
.plansAddons--page .plans__tabs {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2rem;
	border-bottom: 1px solid #e5e7eb;
	overflow-x: auto;
	/* overflow-x: auto forces overflow-y to compute as auto, so any vertical
	   spill would add a scrollbar on the right. Pin it shut. */
	overflow-y: hidden;
	margin-bottom: 1.5rem;
}

.plansAddons--page .plans__tab {
	position: relative;
	background: transparent;
	border: none;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 0;
}

.plansAddons--page .plans__tab:hover {
	color: var(--primary);
}

.plansAddons--page .plans__tab.active {
	color: var(--primary);
}

.plansAddons--page .plans__tab.active::after {
	content: "";
	position: absolute;
	/* bottom: -1px would spill past the padding box and trigger the scrollbar */
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
}

/* Plan Card */
.plansAddons--page .plans__card {
	position: relative;
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-top: 3px solid var(--grey);
	border-radius: 0.75rem;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	transition: all 0.3s ease;
	overflow: hidden;
}

.plansAddons--page .plans__card:hover {
	border-color: var(--primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.plansAddons--page .plans__card--popular {
	border-color: var(--primary);
}

.plansAddons--page .plans__popular {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--primary);
	border-radius: 0 0 0 0.5rem;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--white);
	white-space: nowrap;
	padding: 0.3rem 0.75rem;
}

.plansAddons--page .plans__card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.plansAddons--page .plans__card-icon {
	width: 36px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.plansAddons--page .plans__card-heading {
	flex: 1;
	min-width: 0;
}

.plansAddons--page .plans__card-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.3rem;
}

.plansAddons--page .plans__badge {
	display: inline-block;
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.15rem 0.5rem;
}

.plansAddons--page .plans__badge--postpaid {
	background: #D6E7F3;
	color: var(--primary);
}

.plansAddons--page .plans__action {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.85rem;
	flex-shrink: 0;
}

.plansAddons--page .plans__action:hover {
	background: #F3F4F6;
	color: var(--primary);
}

/* Price */
.plansAddons--page .plans__price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 1.25rem;
}

.plansAddons--page .plans__price small {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
}

/* Features */
.plansAddons--page .plans__features {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
}

.plansAddons--page .plans__features li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.plansAddons--page .plans__feature-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--grey);
}

.plansAddons--page .plans__feature-label i {
	width: 14px;
	font-size: 0.75rem;
	color: var(--grey);
	text-align: center;
}

.plansAddons--page .plans__feature-value {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--secondary);
	text-align: right;
}

.plansAddons--page .plans__feature-value--highlight {
	color: var(--primary);
}

/* Card Footer */
.plansAddons--page .plans__card-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-top: 1px solid #f0f0f0;
	padding-top: 1rem;
}

.plansAddons--page .plans__subs {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.plansAddons--page .plans__subs-label {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.plansAddons--page .plans__subs-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--black);
}

.plansAddons--page .plans__growth {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	background: #DCFCE7;
	border-radius: 0.35rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #15803D;
	padding: 0.2rem 0.5rem;
}

/* Plans & Addons Page End */

/* Create Plan Page Start */

/* Page Header */
.createPlan--page .create-plan__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.createPlan--page .create-plan__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.createPlan--page .create-plan__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.createPlan--page .create-plan__breadcrumb a:hover {
	color: var(--primary);
}

.createPlan--page .create-plan__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.createPlan--page .create-plan__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

.createPlan--page .create-plan__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.createPlan--page .create-plan__header-actions .themeBtn {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Card */
.createPlan--page .create-plan__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.createPlan--page .create-plan__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	padding: 1.15rem 1.5rem;
	margin-bottom: 0;
}

.createPlan--page .create-plan__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.createPlan--page .create-plan__card-body {
	padding: 1.5rem;
}

/* Fields */
.createPlan--page .create-plan__field {
	margin-bottom: 1.25rem;
}

.createPlan--page .create-plan__label {
	display: block;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--secondary);
	margin-bottom: 0.4rem;
}

.createPlan--page .create-plan__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.createPlan--page .create-plan__link {
	background: transparent;
	border: none;
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--primary);
	padding: 0;
}

.createPlan--page .create-plan__link:hover {
	color: var(--secondary);
}

.createPlan--page .create-plan__input,
.createPlan--page .create-plan__select {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.7rem 0.9rem;
	transition: border-color 0.3s ease;
}

.createPlan--page .create-plan__input:focus,
.createPlan--page .create-plan__select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Revealed by the "Customize" option, so it sits under its select */
.createPlan--page .create-plan__custom-input {
	margin-top: 0.5rem;
}

.createPlan--page .create-plan__input::placeholder {
	font-weight: 400;
	color: var(--grey);
	opacity: 0.7;
}

.createPlan--page .create-plan__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 14px;
	padding-right: 2.25rem;
	cursor: pointer;
}

.createPlan--page .create-plan__input-group {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.createPlan--page .create-plan__input-prefix {
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 0.85rem;
}

/* Plan Type Toggle */
.createPlan--page .create-plan__toggle {
	display: flex;
	gap: 0.75rem;
}

.createPlan--page .create-plan__toggle-btn {
	flex: 1;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.65rem 1rem;
}

.createPlan--page .create-plan__toggle-btn:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.createPlan--page .create-plan__toggle-btn.active {
	background: #D6E7F3;
	border-color: var(--primary);
	font-weight: 600;
	color: var(--primary);
}

/* Panel */
.createPlan--page .create-plan__panel {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1.25rem;
}

/* Feature Rows */
.createPlan--page .create-plan__feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.createPlan--page .create-plan__feature+.create-plan__feature {
	margin-top: 0.85rem;
}

.createPlan--page .create-plan__feature:hover {
	border-color: var(--primary);
}

.createPlan--page .create-plan__feature:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.createPlan--page .create-plan__feature input {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
	cursor: pointer;
}

.createPlan--page .create-plan__feature-body {
	flex: 1;
	min-width: 0;
}

.createPlan--page .create-plan__feature-title {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.2rem;
}

.createPlan--page .create-plan__feature-text {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

/* Live Preview */
.createPlan--page .create-plan__preview {
	background: var(--white);
	border: 1px dashed #d1d5db;
	border-radius: 0.75rem;
	padding: 1rem;
}

.createPlan--page .create-plan__preview-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.85rem;
}

.createPlan--page .create-plan__preview-card {
	border: 1px solid #e5e7eb;
	border-radius: 0.65rem;
	overflow: hidden;
}

.createPlan--page .create-plan__preview-head {
	background: linear-gradient(135deg, var(--primary) 0%, var(--theme-color) 100%);
	color: var(--white);
	padding: 1.25rem;
}

.createPlan--page .create-plan__preview-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.createPlan--page .create-plan__preview-badge {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 0.35rem;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--white);
	padding: 0.2rem 0.55rem;
}

.createPlan--page .create-plan__preview-top i {
	font-size: 0.85rem;
	color: var(--white);
}

.createPlan--page .create-plan__preview-name {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 0.35rem;
}

.createPlan--page .create-plan__preview-price {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--white);
}

.createPlan--page .create-plan__preview-price small {
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.8;
}

.createPlan--page .create-plan__preview-list {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 1.25rem;
}

.createPlan--page .create-plan__preview-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
}

.createPlan--page .create-plan__preview-list li+li {
	border-top: 1px solid #f0f0f0;
}

.createPlan--page .create-plan__preview-icon {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.7rem;
}

.createPlan--page .create-plan__preview-body {
	flex: 1;
	min-width: 0;
}

.createPlan--page .create-plan__preview-title {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--black);
}

.createPlan--page .create-plan__preview-text {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.createPlan--page .create-plan__preview-footer {
	padding: 0 1.25rem 1.25rem;
}

.createPlan--page .create-plan__preview-btn {
	width: 100%;
	background: #F3F4F6;
	border: none;
	border-radius: 0.4rem;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	padding: 0.6rem 1rem;
	opacity: 0.7;
}

.createPlan--page .create-plan__preview-note {
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	color: var(--primary);
	margin: 0.85rem 0 0;
}

/* Create Plan Page End */

/* Export Plans Page Start */

/* Page Header */
.exportPlans--page .export-plans__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.exportPlans--page .export-plans__edit {
	width: 32px;
	aspect-ratio: 1;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.75rem;
}

.exportPlans--page .export-plans__edit:hover {
	background: var(--primary);
	color: var(--white);
}

/* Card */
.exportPlans--page .export-plans__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.exportPlans--page .export-plans__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	padding: 1.15rem 1.5rem;
	margin-bottom: 0;
}

.exportPlans--page .export-plans__card-title i {
	font-size: 0.8rem;
	color: var(--primary);
}

.exportPlans--page .export-plans__card-body {
	padding: 1.25rem 1.5rem;
}

/* Search */
.exportPlans--page .export-plans__search {
	position: relative;
	margin-bottom: 1rem;
}

.exportPlans--page .export-plans__search i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
}

.exportPlans--page .export-plans__search input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.6rem 0.9rem 0.6rem 2.35rem;
}

.exportPlans--page .export-plans__search input:focus {
	outline: none;
	border-color: var(--primary);
}

.exportPlans--page .export-plans__search input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

/* Plan List */
.exportPlans--page .export-plans__list {
	max-height: 230px;
	overflow-y: auto;
}

.exportPlans--page .export-plans__item label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid #f0f0f0;
	padding: 0.75rem 0.25rem;
	cursor: pointer;
	margin-bottom: 0;
}

.exportPlans--page .export-plans__item:last-child label {
	border-bottom: none;
}

.exportPlans--page .export-plans__item input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

.exportPlans--page .export-plans__item-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.exportPlans--page .export-plans__item-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--secondary);
}

.exportPlans--page .export-plans__item-meta {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

.exportPlans--page .export-plans__list-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-top: 1px solid #e5e7eb;
	padding-top: 0.85rem;
	margin-top: 0.5rem;
}

.exportPlans--page .export-plans__selected {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
}

.exportPlans--page .export-plans__link {
	background: transparent;
	border: none;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
	padding: 0;
}

.exportPlans--page .export-plans__link:hover {
	color: var(--secondary);
}

/* Data Fields */
.exportPlans--page .export-plans__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
}

.exportPlans--page .export-plans__field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.exportPlans--page .export-plans__field:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.exportPlans--page .export-plans__field:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.85;
}

.exportPlans--page .export-plans__field input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

/* Export Format */
.exportPlans--page .export-plans__format {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.exportPlans--page .export-plans__format+.export-plans__format {
	margin-top: 0.75rem;
}

.exportPlans--page .export-plans__format:hover {
	border-color: var(--primary);
}

.exportPlans--page .export-plans__format:has(input:checked) {
	border-color: var(--primary);
	background: #D6E7F3;
}

.exportPlans--page .export-plans__format input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportPlans--page .export-plans__format-icon {
	font-size: 0.9rem;
	color: var(--grey);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.exportPlans--page .export-plans__format:has(input:checked) .export-plans__format-icon {
	color: var(--primary);
}

.exportPlans--page .export-plans__format-body {
	flex: 1;
	min-width: 0;
}

.exportPlans--page .export-plans__format-title {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.15rem;
}

.exportPlans--page .export-plans__format-text {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--grey);
}

/* Generate Export */
.exportPlans--page .export-plans__generate {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem;
}

.exportPlans--page .export-plans__generate-icon {
	width: 44px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #F3F4F6;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	margin-bottom: 0.85rem;
}

.exportPlans--page .export-plans__generate-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.25rem;
}

.exportPlans--page .export-plans__generate-meta {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
	margin-bottom: 1.25rem;
}

.exportPlans--page .export-plans__generate .themeBtn {
	font-size: 0.85rem;
}

.exportPlans--page .export-plans__generate .themeBtn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Export Plans Page End */

/* Usage Analytics Page Start */

/* Page Header */
.usageAnalytics--page .usage__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.usageAnalytics--page .usage__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.usageAnalytics--page .usage__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

.usageAnalytics--page .usage__range {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.55rem 2rem 0.55rem 0.9rem;
	cursor: pointer;
}

.usageAnalytics--page .usage__range:focus {
	outline: none;
	border-color: var(--primary);
}

/* Stat Cards */
.usageAnalytics--page .usage__stat {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.usageAnalytics--page .usage__stat-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.75rem;
}

.usageAnalytics--page .usage__stat-label i {
	font-size: 0.85rem;
	color: var(--primary);
}

.usageAnalytics--page .usage__stat-value {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.4rem;
}

.usageAnalytics--page .usage__stat-value small {
	font-size: 0.9rem;
	font-weight: 600;
}

.usageAnalytics--page .usage__stat-meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.usageAnalytics--page .usage__stat-change {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
}

.usageAnalytics--page .usage__stat-change--up {
	color: #22C55E;
}

.usageAnalytics--page .usage__stat-change--down {
	color: var(--primary);
}

/* Card */
.usageAnalytics--page .usage__card {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.usageAnalytics--page .usage__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.usageAnalytics--page .usage__card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0;
}

.usageAnalytics--page .usage__link {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--primary);
}

.usageAnalytics--page .usage__link:hover {
	color: var(--secondary);
}

/* Network Switch */
.usageAnalytics--page .usage__switch {
	display: inline-flex;
	background: #F3F4F6;
	border-radius: 0.4rem;
	padding: 0.15rem;
}

.usageAnalytics--page .usage__switch-btn {
	background: transparent;
	border: none;
	border-radius: 0.3rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.25rem 0.75rem;
}

.usageAnalytics--page .usage__switch-btn.active {
	background: var(--primary);
	color: var(--white);
}

/* Charts */
.usageAnalytics--page .usage__chart {
	position: relative;
	height: 260px;
}

.usageAnalytics--page .usage__donut {
	position: relative;
	height: 180px;
	margin-bottom: 1.25rem;
}

.usageAnalytics--page .usage__donut-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	pointer-events: none;
}

.usageAnalytics--page .usage__donut-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--black);
	line-height: 1.2;
}

.usageAnalytics--page .usage__donut-label {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

/* Legend */
.usageAnalytics--page .usage__legend {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.usageAnalytics--page .usage__legend li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.usageAnalytics--page .usage__legend-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

.usageAnalytics--page .usage__legend-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--black);
}

.usageAnalytics--page .usage__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.usageAnalytics--page .usage__dot--primary {
	background: var(--primary);
}

.usageAnalytics--page .usage__dot--green {
	background: #22C55E;
}

.usageAnalytics--page .usage__dot--grey {
	background: #9CA3AF;
}

/* Table */
.usageAnalytics--page .usage__table-wrap {
	width: 100%;
}

.usageAnalytics--page .usage__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 800px;
	margin: 0 !important;
}

.usageAnalytics--page .usage__table thead th {
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 0.5rem;
}

.usageAnalytics--page .usage__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.85rem 0.5rem;
}

.usageAnalytics--page .usage__table tbody tr:hover {
	background: #F9FAFB;
}

.usageAnalytics--page .usage__account {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--black);
}

.usageAnalytics--page .usage__avatar {
	width: 28px;
	aspect-ratio: 1;
	border-radius: 0.35rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.6rem;
	font-weight: 700;
}

.usageAnalytics--page .usage__plan,
.usageAnalytics--page .usage__data {
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--grey);
}

.usageAnalytics--page .usage__data {
	font-weight: 600;
	color: var(--secondary);
}

.usageAnalytics--page .usage__trend {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.usageAnalytics--page .usage__trend--up {
	color: #22C55E;
}

.usageAnalytics--page .usage__trend--down {
	color: var(--primary);
}

.usageAnalytics--page .usage__action {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.85rem;
}

.usageAnalytics--page .usage__action:hover {
	background: #F3F4F6;
	color: var(--primary);
}

/* DataTable Override */
.usageAnalytics--page .dataTables_wrapper .dataTables_info {
	font-size: 0.72rem;
	color: var(--grey);
	padding-top: 1rem;
}

.usageAnalytics--page .dataTables_wrapper .dataTables_paginate {
	padding-top: 1rem;
}

.usageAnalytics--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 28px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.35rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.25rem 0.55rem;
	margin: 0 2px;
	cursor: pointer;
}

.usageAnalytics--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.usageAnalytics--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.usageAnalytics--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Usage Analytics Page End */

/* Usage Analytics Details Page Start */

.usageDetails--page {
	position: relative;
}

/* Page Header */
.usageDetails--page .usage-details__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.usageDetails--page .usage-details__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.usageDetails--page .usage-details__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

.usageDetails--page .usage-details__range {
	position: relative;
}

.usageDetails--page .usage-details__range i {
	position: absolute;
	top: 50%;
	left: 0.85rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.usageDetails--page .usage-details__range select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.55rem 2rem 0.55rem 2.25rem;
	cursor: pointer;
}

.usageDetails--page .usage-details__range select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Stat Cards */
.usageDetails--page .usage-details__stat {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.usageDetails--page .usage-details__stat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.usageDetails--page .usage-details__stat-label {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.usageDetails--page .usage-details__stat-icon {
	font-size: 0.85rem;
	color: var(--primary);
}

.usageDetails--page .usage-details__stat-value {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.5rem;
}

.usageDetails--page .usage-details__stat-value small {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--grey);
}

.usageDetails--page .usage-details__stat-meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.usageDetails--page .usage-details__change {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
}

.usageDetails--page .usage-details__change--up {
	color: #22C55E;
}

.usageDetails--page .usage-details__change--down {
	color: var(--primary);
}

/* Card */
.usageDetails--page .usage-details__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.usageDetails--page .usage-details__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.usageDetails--page .usage-details__card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0;
}

.usageDetails--page .usage-details__card-text {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.2rem;
}

.usageDetails--page .usage-details__card-icon {
	font-size: 0.85rem;
	color: var(--primary);
}

.usageDetails--page .usage-details__link {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--primary);
}

.usageDetails--page .usage-details__link:hover {
	color: var(--secondary);
}

/* Legend */
.usageDetails--page .usage-details__legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.usageDetails--page .usage-details__legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
}

.usageDetails--page .usage-details__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.usageDetails--page .usage-details__dot--primary {
	background: var(--primary);
}

.usageDetails--page .usage-details__dot--dark {
	background: var(--theme-color);
}

.usageDetails--page .usage-details__dot--grey {
	background: #9CA3AF;
}

/* Charts */
.usageDetails--page .usage-details__chart {
	position: relative;
	height: 300px;
}

.usageDetails--page .usage-details__donut {
	position: relative;
	height: 160px;
	margin-bottom: 1.25rem;
}

.usageDetails--page .usage-details__donut-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--black);
	pointer-events: none;
}

/* Top Consumers */
.usageDetails--page .usage-details__consumers {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.usageDetails--page .usage-details__consumers li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.usageDetails--page .usage-details__consumer-avatar {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 700;
}

.usageDetails--page .usage-details__consumer-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.usageDetails--page .usage-details__consumer-name {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--primary);
}

.usageDetails--page .usage-details__consumer-meta {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.usageDetails--page .usage-details__consumer-usage {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
	width: 80px;
	flex-shrink: 0;
}

.usageDetails--page .usage-details__consumer-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--black);
}

/* Progress Bars */
.usageDetails--page .usage-details__bar {
	display: block;
	width: 100%;
	height: 4px;
	background: #f0f0f0;
	border-radius: 50px;
	overflow: hidden;
}

.usageDetails--page .usage-details__bar-fill {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
}

/* Regional Breakdown */
.usageDetails--page .usage-details__map {
	position: relative;
	height: 90px;
	background: #F3F4F6;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.usageDetails--page .usage-details__map-tag {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--white);
	border-radius: 50px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--secondary);
	padding: 0.35rem 0.85rem;
}

.usageDetails--page .usage-details__map-tag i {
	color: var(--primary);
}

.usageDetails--page .usage-details__regions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.usageDetails--page .usage-details__region-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.usageDetails--page .usage-details__region-name {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
}

.usageDetails--page .usage-details__region-value {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--black);
}

.usageDetails--page .usage-details__region-change {
	font-size: 0.65rem;
	font-weight: 600;
	color: #22C55E;
}

/* Plan Distribution */
.usageDetails--page .usage-details__plans {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.usageDetails--page .usage-details__plans li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.usageDetails--page .usage-details__plan-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

.usageDetails--page .usage-details__plan-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--black);
}

/* Floating Action */
.usageDetails--page .usage-details__fab {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 99;
	width: 46px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(55, 130, 247, 0.4);
	font-size: 0.95rem;
}

.usageDetails--page .usage-details__fab:hover {
	background: var(--secondary);
	color: var(--white);
}

/* Usage Analytics Details Page End */

/* Export Usage Report Page Start */

/* Breadcrumb */
.exportUsageReport--page .export-report__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.exportUsageReport--page .export-report__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.exportUsageReport--page .export-report__breadcrumb a:hover {
	color: var(--primary);
}

.exportUsageReport--page .export-report__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.exportUsageReport--page .export-report__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.exportUsageReport--page .export-report__header {
	margin-bottom: 1.5rem;
}

/* Card */
.exportUsageReport--page .export-report__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.exportUsageReport--page .export-report__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	padding: 1.1rem 1.5rem;
	margin-bottom: 0;
}

.exportUsageReport--page .export-report__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.exportUsageReport--page .export-report__card-title--plain {
	border-bottom: none;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	padding-bottom: 0;
}

.exportUsageReport--page .export-report__card-body {
	padding: 1.5rem;
}

.exportUsageReport--page .export-report__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.exportUsageReport--page .export-report__recent-title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0;
}

.exportUsageReport--page .export-report__link {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--primary);
}

.exportUsageReport--page .export-report__link:hover {
	color: var(--secondary);
}

/* Labels */
.exportUsageReport--page .export-report__label {
	display: block;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.75rem;
}

/* Date Range Options */
.exportUsageReport--page .export-report__radio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.7rem 1rem;
	cursor: pointer;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}

.exportUsageReport--page .export-report__radio:last-child {
	margin-bottom: 0;
}

.exportUsageReport--page .export-report__radio input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportUsageReport--page .export-report__radio:hover {
	border-color: var(--primary);
}

.exportUsageReport--page .export-report__radio:has(input:checked) {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary);
}

.exportUsageReport--page .export-report__radio-text {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
}

.exportUsageReport--page .export-report__radio:has(input:checked) .export-report__radio-text {
	font-weight: 600;
	color: var(--black);
}

.exportUsageReport--page .export-report__radio-icon {
	font-size: 0.85rem;
	color: #d1d5db;
	flex-shrink: 0;
}

.exportUsageReport--page .export-report__radio:has(input:checked) .export-report__radio-icon {
	color: var(--primary);
}

/* Data Inclusion */
.exportUsageReport--page .export-report__check {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.7rem 1rem;
	cursor: pointer;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}

.exportUsageReport--page .export-report__check:last-child {
	margin-bottom: 0;
}

.exportUsageReport--page .export-report__check:hover {
	border-color: var(--primary);
}

.exportUsageReport--page .export-report__check-text {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
}

.exportUsageReport--page .export-report__check input {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

/* Format Options */
.exportUsageReport--page .export-report__format {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}

.exportUsageReport--page .export-report__format:last-child {
	margin-bottom: 0;
}

.exportUsageReport--page .export-report__format input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportUsageReport--page .export-report__format:hover {
	border-color: var(--primary);
}

.exportUsageReport--page .export-report__format:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.exportUsageReport--page .export-report__format-icon {
	width: 34px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.9rem;
}

.exportUsageReport--page .export-report__format:has(input:checked) .export-report__format-icon {
	background: var(--primary);
	color: var(--white);
}

.exportUsageReport--page .export-report__format-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.exportUsageReport--page .export-report__format-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
}

.exportUsageReport--page .export-report__format-text {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

/* Delivery Options */
.exportUsageReport--page .export-report__delivery {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
}

.exportUsageReport--page .export-report__delivery-body {
	flex: 1;
	min-width: 180px;
}

.exportUsageReport--page .export-report__delivery-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.2rem;
}

.exportUsageReport--page .export-report__delivery-text {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
}

.exportUsageReport--page .export-report__delivery-email {
	flex: 1;
	min-width: 220px;
}

.exportUsageReport--page .export-report__input-group {
	position: relative;
}

.exportUsageReport--page .export-report__input-group i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.8rem;
	color: var(--grey);
	pointer-events: none;
}

.exportUsageReport--page .export-report__input-group input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 0.9rem 0.65rem 2.4rem;
}

.exportUsageReport--page .export-report__input-group input:focus {
	outline: none;
	border-color: var(--primary);
}

.exportUsageReport--page .export-report__input-group input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.exportUsageReport--page .export-report__delivery-actions {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.exportUsageReport--page .export-report__delivery-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.6rem 1.25rem;
}

.exportUsageReport--page .export-report__schedule {
	width: 38px;
	aspect-ratio: 1;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	color: var(--grey);
	font-size: 0.85rem;
	flex-shrink: 0;
}

.exportUsageReport--page .export-report__schedule:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Recent Exports Table */
.exportUsageReport--page .export-report__table-wrap {
	width: 100%;
}

.exportUsageReport--page .export-report__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 800px;
}

.exportUsageReport--page .export-report__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.7rem 1.5rem;
}

.exportUsageReport--page .export-report__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.5rem;
}

.exportUsageReport--page .export-report__table tbody tr:last-child td {
	border-bottom: none;
}

.exportUsageReport--page .export-report__table tbody tr:hover {
	background: #F9FAFB;
}

.exportUsageReport--page .export-report__name {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--black);
}

.exportUsageReport--page .export-report__date,
.exportUsageReport--page .export-report__size {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

.exportUsageReport--page .export-report__format-badge {
	display: inline-block;
	border-radius: 0.3rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 0.15rem 0.5rem;
}

.exportUsageReport--page .export-report__format-badge--xlsx {
	background: #DCFCE7;
	color: #15803D;
}

.exportUsageReport--page .export-report__format-badge--pdf {
	background: #D6E7F3;
	color: var(--primary);
}

.exportUsageReport--page .export-report__format-badge--csv {
	background: #F3F4F6;
	color: var(--grey);
}

.exportUsageReport--page .export-report__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 500;
}

.exportUsageReport--page .export-report__status--ready {
	color: #15803D;
}

.exportUsageReport--page .export-report__status--processing {
	color: var(--grey);
	font-style: italic;
}

.exportUsageReport--page .export-report__download {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--primary);
	font-size: 0.8rem;
}

.exportUsageReport--page .export-report__download:hover {
	background: #D6E7F3;
}

.exportUsageReport--page .export-report__download:disabled {
	color: var(--grey);
	opacity: 0.5;
	pointer-events: none;
}

/* Export Usage Report Page End */

/* Wallet & Finance Page Start */

/* Page Header */
.walletFinance--page .wallet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.walletFinance--page .wallet__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.walletFinance--page .wallet__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Stat Cards */
.walletFinance--page .wallet__stat {
	position: relative;
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	overflow: hidden;
}

.walletFinance--page .wallet__stat-watermark {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	font-size: 3.5rem;
	color: #f0f0f0;
	pointer-events: none;
}

.walletFinance--page .wallet__stat-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
}

.walletFinance--page .wallet__stat-icon {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.75rem;
}

.walletFinance--page .wallet__stat-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0;
}

.walletFinance--page .wallet__stat-value {
	position: relative;
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.75rem;
}

.walletFinance--page .wallet__stat-value--primary {
	color: var(--primary);
}

.walletFinance--page .wallet__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #DCFCE7;
	border-radius: 50px;
	font-size: 0.68rem;
	font-weight: 600;
	color: #15803D;
	padding: 0.25rem 0.75rem;
}

.walletFinance--page .wallet__stat-meta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

/* Ledger Card */
.walletFinance--page .wallet__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.walletFinance--page .wallet__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.walletFinance--page .wallet__card-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.walletFinance--page .wallet__filter {
	width: 34px;
	aspect-ratio: 1;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	color: var(--grey);
	font-size: 0.8rem;
}

.walletFinance--page .wallet__filter:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.walletFinance--page .wallet__filter-item.active {
	background: #D6E7F3;
	color: var(--primary);
	font-weight: 600;
}

/* Table */
.walletFinance--page .wallet__table-wrap {
	width: 100%;
}

.walletFinance--page .wallet__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 700px;
	margin: 0 !important;
}

.walletFinance--page .wallet__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
}

.walletFinance--page .wallet__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.5rem;
}

.walletFinance--page .wallet__table tbody tr:hover {
	background: #F9FAFB;
}

.walletFinance--page .wallet__date {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
}

.walletFinance--page .wallet__ref {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: var(--primary);
}

.walletFinance--page .wallet__type {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: 50px;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.2rem 0.6rem;
}

.walletFinance--page .wallet__type--credit {
	background: #DCFCE7;
	color: #15803D;
}

.walletFinance--page .wallet__type--debit {
	background: #DC262620;
	color: #DC2626;
}

.walletFinance--page .wallet__amount {
	font-size: 0.82rem;
	font-weight: 700;
}

.walletFinance--page .wallet__amount--credit {
	color: #15803D;
}

.walletFinance--page .wallet__amount--debit {
	color: #DC2626;
}

/* DataTable Override */
.walletFinance--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.walletFinance--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.walletFinance--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.7rem;
	margin: 0 2px;
	cursor: pointer;
}

.walletFinance--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.walletFinance--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.walletFinance--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Wallet & Finance Page End */

/* Add Funds Page Start */

/* Breadcrumb */
.addFunds--page .add-funds__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.addFunds--page .add-funds__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.addFunds--page .add-funds__breadcrumb a:hover {
	color: var(--primary);
}

.addFunds--page .add-funds__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.addFunds--page .add-funds__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.addFunds--page .add-funds__header {
	margin-bottom: 1.5rem;
}

/* Card */
.addFunds--page .add-funds__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.addFunds--page .add-funds__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	padding: 1.1rem 1.5rem;
	margin-bottom: 0;
}

.addFunds--page .add-funds__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.addFunds--page .add-funds__card-title--plain {
	border-bottom: none;
	font-size: 1.05rem;
	font-weight: 700;
	padding-bottom: 0;
}

.addFunds--page .add-funds__card-body {
	padding: 1.5rem;
}

/* Payment Methods */
.addFunds--page .add-funds__methods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.addFunds--page .add-funds__method {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1.25rem 1rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.addFunds--page .add-funds__method input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.addFunds--page .add-funds__method:hover {
	border-color: var(--primary);
}

.addFunds--page .add-funds__method:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.addFunds--page .add-funds__method-icon {
	font-size: 1.1rem;
	color: var(--grey);
	margin-bottom: 0.65rem;
}

.addFunds--page .add-funds__method:has(input:checked) .add-funds__method-icon {
	color: var(--primary);
}

.addFunds--page .add-funds__method-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.15rem;
}

.addFunds--page .add-funds__method-text {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

/* Amount Presets */
.addFunds--page .add-funds__presets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.addFunds--page .add-funds__preset {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--secondary);
	padding: 0.75rem 1rem;
}

.addFunds--page .add-funds__preset:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.addFunds--page .add-funds__preset.active {
	background: #D6E7F3;
	border-color: var(--primary);
	color: var(--primary);
}

.addFunds--page .add-funds__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

/* Amount Input */
.addFunds--page .add-funds__amount {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1.25rem;
	margin-bottom: 0.75rem;
	transition: border-color 0.3s ease;
}

.addFunds--page .add-funds__amount:focus-within {
	border-color: var(--primary);
}

.addFunds--page .add-funds__amount-currency {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--grey);
}

.addFunds--page .add-funds__amount input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	font-size: 1.65rem;
	font-weight: 600;
	color: var(--secondary);
	padding: 0;
}

.addFunds--page .add-funds__amount input:focus {
	outline: none;
}

.addFunds--page .add-funds__note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--primary);
}

/* Summary */
.addFunds--page .add-funds__summary {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.25rem;
}

.addFunds--page .add-funds__summary li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-bottom: 1px dashed #e5e7eb;
	padding: 0.7rem 0;
}

.addFunds--page .add-funds__summary li:last-child {
	border-bottom: none;
}

.addFunds--page .add-funds__summary-label {
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--primary);
}

.addFunds--page .add-funds__summary-value {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--black);
}

.addFunds--page .add-funds__total {
	border-top: 1px solid #e5e7eb;
	padding-top: 1rem;
	margin-bottom: 1.25rem;
}

.addFunds--page .add-funds__total-label {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.35rem;
}

.addFunds--page .add-funds__total-value {
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--black);
}

/* Authorize */
.addFunds--page .add-funds__authorize {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	cursor: pointer;
	margin-bottom: 1.25rem;
}

.addFunds--page .add-funds__authorize input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	margin-top: 0.1rem;
	flex-shrink: 0;
	cursor: pointer;
}

.addFunds--page .add-funds__authorize a {
	font-weight: 600;
	color: var(--primary);
	text-decoration: underline !important;
}

.addFunds--page .add-funds__card-body .themeBtn {
	font-size: 0.9rem;
	padding: 0.85rem 1.5rem;
}

.addFunds--page .add-funds__card-body .themeBtn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

.addFunds--page .add-funds__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--grey);
	margin-top: 0.85rem;
}

/* Tip Box */
.addFunds--page .add-funds__tip {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	background: #EDF4FA;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.addFunds--page .add-funds__tip i {
	font-size: 0.85rem;
	color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.addFunds--page .add-funds__tip-title {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	margin-bottom: 0.15rem;
}

.addFunds--page .add-funds__tip-text {
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.6;
}

/* Add Funds Page End */

/* Withdraw Funds Page Start */

/* Breadcrumb */
.withdrawFunds--page .withdraw__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.withdrawFunds--page .withdraw__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.withdrawFunds--page .withdraw__breadcrumb a:hover {
	color: var(--primary);
}

.withdrawFunds--page .withdraw__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.withdrawFunds--page .withdraw__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.withdrawFunds--page .withdraw__header {
	margin-bottom: 1.5rem;
}

/* Card */
.withdrawFunds--page .withdraw__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.withdrawFunds--page .withdraw__card-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.15rem 1.5rem 0;
}

.withdrawFunds--page .withdraw__card-icon {
	width: 32px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.withdrawFunds--page .withdraw__card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0;
}

.withdrawFunds--page .withdraw__card-body {
	padding: 1.25rem 1.5rem;
}

.withdrawFunds--page .withdraw__card-footer {
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid #e5e7eb;
	padding: 1.25rem 1.5rem;
}

.withdrawFunds--page .withdraw__card-footer .themeBtn {
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.85rem 1.75rem;
}

.withdrawFunds--page .withdraw__card-footer .themeBtn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Fields */
.withdrawFunds--page .withdraw__field {
	margin-bottom: 1.5rem;
}

.withdrawFunds--page .withdraw__label {
	display: block;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.6rem;
}

/* Destination Accounts */
.withdrawFunds--page .withdraw__accounts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.withdrawFunds--page .withdraw__account {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.withdrawFunds--page .withdraw__account input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.withdrawFunds--page .withdraw__account:hover {
	border-color: var(--primary);
}

.withdrawFunds--page .withdraw__account:has(input:checked) {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary);
}

.withdrawFunds--page .withdraw__account-icon {
	width: 32px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.withdrawFunds--page .withdraw__account:has(input:checked) .withdraw__account-icon {
	background: #D6E7F3;
	color: var(--primary);
}

.withdrawFunds--page .withdraw__account-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.withdrawFunds--page .withdraw__account-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

.withdrawFunds--page .withdraw__account-meta {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

.withdrawFunds--page .withdraw__account-radio {
	width: 15px;
	height: 15px;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background: var(--white);
	flex-shrink: 0;
}

.withdrawFunds--page .withdraw__account:has(input:checked) .withdraw__account-radio {
	border-color: var(--primary);
	background: var(--primary);
	box-shadow: inset 0 0 0 3px var(--white);
}

.withdrawFunds--page .withdraw__add {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--secondary);
	margin-top: 0.85rem;
}

.withdrawFunds--page .withdraw__add i {
	color: var(--primary);
}

.withdrawFunds--page .withdraw__add:hover {
	color: var(--primary);
}

/* Amount */
.withdrawFunds--page .withdraw__amount {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1.25rem;
	transition: border-color 0.3s ease;
}

.withdrawFunds--page .withdraw__amount:focus-within {
	border-color: var(--primary);
}

.withdrawFunds--page .withdraw__amount-currency {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--grey);
}

.withdrawFunds--page .withdraw__amount input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	font-size: 1.65rem;
	font-weight: 600;
	color: var(--secondary);
	padding: 0;
}

.withdrawFunds--page .withdraw__amount input:focus {
	outline: none;
}

.withdrawFunds--page .withdraw__max {
	background: #E5E7EB;
	border: none;
	border-radius: 0.35rem;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	padding: 0.35rem 0.75rem;
	flex-shrink: 0;
}

.withdrawFunds--page .withdraw__max:hover {
	background: var(--primary);
	color: var(--white);
}

.withdrawFunds--page .withdraw__amount-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.5rem;
}

.withdrawFunds--page .withdraw__amount-meta strong {
	font-weight: 600;
	color: var(--secondary);
}

/* Memo */
.withdrawFunds--page .withdraw__textarea {
	width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--secondary);
	resize: vertical;
	min-height: 90px;
	padding: 0.85rem 1rem;
	transition: border-color 0.3s ease;
}

.withdrawFunds--page .withdraw__textarea:focus {
	outline: none;
	border-color: var(--primary);
}

.withdrawFunds--page .withdraw__textarea::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

/* Security Guarantee */
.withdrawFunds--page .withdraw__guarantee {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.15rem 1.5rem;
}

.withdrawFunds--page .withdraw__guarantee i {
	font-size: 0.9rem;
	color: var(--grey);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.withdrawFunds--page .withdraw__guarantee-title {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.3rem;
}

.withdrawFunds--page .withdraw__guarantee-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--grey);
	margin-bottom: 0;
}

/* Withdrawal Limits */
.withdrawFunds--page .withdraw__available {
	background: #F9FAFB;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.withdrawFunds--page .withdraw__available-label {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.35rem;
}

.withdrawFunds--page .withdraw__available-value {
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.35rem;
}

.withdrawFunds--page .withdraw__available-change {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.68rem;
	font-weight: 600;
	color: #15803D;
}

.withdrawFunds--page .withdraw__limit {
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 1.25rem;
	margin-bottom: 0.5rem;
}

.withdrawFunds--page .withdraw__limit-label {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.4rem;
}

.withdrawFunds--page .withdraw__limit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.withdrawFunds--page .withdraw__limit-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
}

.withdrawFunds--page .withdraw__limit-percent {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--grey);
}

.withdrawFunds--page .withdraw__bar {
	display: block;
	width: 100%;
	height: 5px;
	background: #f0f0f0;
	border-radius: 50px;
	overflow: hidden;
}

.withdrawFunds--page .withdraw__bar-fill {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
}

.withdrawFunds--page .withdraw__limit-reset {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.5rem;
}

.withdrawFunds--page .withdraw__info {
	display: flex;
	flex-direction: column;
}

.withdrawFunds--page .withdraw__info li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0;
}

.withdrawFunds--page .withdraw__info li+li {
	border-top: 1px solid #f0f0f0;
}

.withdrawFunds--page .withdraw__info-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

.withdrawFunds--page .withdraw__info-label i {
	font-size: 0.75rem;
	color: var(--grey);
}

.withdrawFunds--page .withdraw__info-value {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--black);
}

/* Verification Level */
.withdrawFunds--page .withdraw__verify {
	background: #F0FDF4;
	border: 1px solid #DCFCE7;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.withdrawFunds--page .withdraw__verify-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.5rem;
}

.withdrawFunds--page .withdraw__verify-title i {
	font-size: 0.8rem;
	color: #15803D;
}

.withdrawFunds--page .withdraw__verify-text {
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.7;
	color: #15803D;
	margin-bottom: 1rem;
}

.withdrawFunds--page .withdraw__verify-text strong {
	font-weight: 700;
}

.withdrawFunds--page .withdraw__verify-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--white);
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
}

.withdrawFunds--page .withdraw__verify-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--secondary);
}

.withdrawFunds--page .withdraw__verify-list li i {
	font-size: 0.68rem;
	color: #15803D;
}

/* Withdraw Funds Page End */

/* Transactions Page Start */

/* Page Header */
.transactions--page .txn__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.transactions--page .txn__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.transactions--page .txn__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Filter Bar */
.transactions--page .txn__filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.transactions--page .txn__filters-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.transactions--page .txn__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
	min-width: 130px;
	padding: 0.55rem 2rem 0.55rem 0.9rem;
	cursor: pointer;
}

.transactions--page .txn__date {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.55rem 0.9rem;
}

.transactions--page .txn__select:focus,
.transactions--page .txn__date:focus {
	outline: none;
	border-color: var(--primary);
}

.transactions--page .txn__more {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: none;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--grey);
}

.transactions--page .txn__more:hover {
	color: var(--primary);
}

/* Table Card */
.transactions--page .txn__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.transactions--page .txn__table-wrap {
	width: 100%;
}

.transactions--page .txn__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 950px;
	margin: 0 !important;
}

.transactions--page .txn__table thead th {
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.85rem 1.25rem;
}

.transactions--page .txn__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.25rem;
}

.transactions--page .txn__table tbody tr:hover {
	background: #F9FAFB;
}

.transactions--page .txn__id {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--primary);
}

.transactions--page .txn__customer {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.transactions--page .txn__avatar {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.6rem;
	font-weight: 700;
}

.transactions--page .txn__customer-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.transactions--page .txn__customer-name {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--black);
}

.transactions--page .txn__customer-email {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--primary);
}

.transactions--page .txn__amount {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--black);
}

.transactions--page .txn__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 50px;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
}

.transactions--page .txn__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.transactions--page .txn__status--success {
	background: #DCFCE7;
	color: #15803D;
}

.transactions--page .txn__status--failed {
	background: #DC262620;
	color: #DC2626;
}

.transactions--page .txn__status--pending {
	background: #F3F4F6;
	color: var(--grey);
}

.transactions--page .txn__method {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--secondary);
}

.transactions--page .txn__method i {
	font-size: 0.8rem;
	color: var(--grey);
}

.transactions--page .txn__time {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--primary);
}

.transactions--page .txn__action {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.85rem;
}

.transactions--page .txn__action:hover {
	background: #F3F4F6;
	color: var(--primary);
}

/* DataTable Override */
.transactions--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.25rem;
}

.transactions--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.25rem;
}

.transactions--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.6rem;
	margin: 0 2px;
	cursor: pointer;
}

.transactions--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.transactions--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.transactions--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Transactions Page End */

/* Export Transactions Page Start */

/* Breadcrumb */
.exportTransactions--page .export-txn__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.exportTransactions--page .export-txn__breadcrumb a {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey);
}

.exportTransactions--page .export-txn__breadcrumb a:hover {
	color: var(--primary);
}

.exportTransactions--page .export-txn__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.exportTransactions--page .export-txn__breadcrumb-current {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.exportTransactions--page .export-txn__header {
	margin-bottom: 1.5rem;
}

/* Card */
.exportTransactions--page .export-txn__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.exportTransactions--page .export-txn__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	padding: 1.1rem 1.5rem;
	margin-bottom: 0;
}

.exportTransactions--page .export-txn__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.exportTransactions--page .export-txn__card-title--plain {
	border-bottom: none;
	padding: 0;
}

.exportTransactions--page .export-txn__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.1rem 1.5rem;
}

.exportTransactions--page .export-txn__card-body {
	padding: 1.5rem;
}

.exportTransactions--page .export-txn__link {
	background: transparent;
	border: none;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
	padding: 0;
}

.exportTransactions--page .export-txn__link:hover {
	color: var(--secondary);
}

/* Date Ranges */
.exportTransactions--page .export-txn__ranges {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.exportTransactions--page .export-txn__range {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.exportTransactions--page .export-txn__range input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportTransactions--page .export-txn__range:hover {
	border-color: var(--primary);
}

.exportTransactions--page .export-txn__range:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.exportTransactions--page .export-txn__range-label {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--grey);
}

.exportTransactions--page .export-txn__range:has(input:checked) .export-txn__range-label {
	color: var(--primary);
}

.exportTransactions--page .export-txn__range-value {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

/* Filters */
.exportTransactions--page .export-txn__field {
	margin-bottom: 0;
}

.exportTransactions--page .export-txn__label {
	display: block;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.4rem;
}

.exportTransactions--page .export-txn__select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 13px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.6rem 2.25rem 0.6rem 0.9rem;
	cursor: pointer;
}

.exportTransactions--page .export-txn__select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Data Fields */
.exportTransactions--page .export-txn__fields {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.85rem;
}

.exportTransactions--page .export-txn__field-item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.exportTransactions--page .export-txn__field-item:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.exportTransactions--page .export-txn__field-item input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

/* Export Format */
.exportTransactions--page .export-txn__format {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	margin-bottom: 0.85rem;
	transition: all 0.3s ease;
}

.exportTransactions--page .export-txn__format:last-child {
	margin-bottom: 0;
}

.exportTransactions--page .export-txn__format input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportTransactions--page .export-txn__format:hover {
	border-color: var(--primary);
}

.exportTransactions--page .export-txn__format:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.exportTransactions--page .export-txn__format-icon {
	width: 34px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.9rem;
}

.exportTransactions--page .export-txn__format:has(input:checked) .export-txn__format-icon {
	background: #D6E7F3;
	color: var(--primary);
}

.exportTransactions--page .export-txn__format-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.exportTransactions--page .export-txn__format-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
}

.exportTransactions--page .export-txn__format-text {
	font-size: 0.6rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
}

.exportTransactions--page .export-txn__format-check {
	font-size: 0.95rem;
	color: var(--primary);
	opacity: 0;
	flex-shrink: 0;
}

.exportTransactions--page .export-txn__format:has(input:checked) .export-txn__format-check {
	opacity: 1;
}

/* Ready Box */
.exportTransactions--page .export-txn__ready {
	background: #EDF4FA;
	border: 1px solid #D6E7F3;
	border-radius: 0.75rem;
	text-align: center;
	padding: 1.5rem;
}

.exportTransactions--page .export-txn__ready-icon {
	width: 46px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--white);
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	margin-bottom: 0.85rem;
}

.exportTransactions--page .export-txn__ready-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.35rem;
}

.exportTransactions--page .export-txn__ready-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--primary);
	margin-bottom: 1.25rem;
}

.exportTransactions--page .export-txn__estimates {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #D6E7F3;
	padding-top: 0.5rem;
}

.exportTransactions--page .export-txn__estimates li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.4rem 0;
}

.exportTransactions--page .export-txn__estimate-label {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.exportTransactions--page .export-txn__estimate-value {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--black);
}

/* Footer Bar */
.exportTransactions--page .export-txn__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1rem 1.5rem;
	margin-top: 1.5rem;
}

.exportTransactions--page .export-txn__footer-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.exportTransactions--page .export-txn__footer-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.exportTransactions--page .export-txn__footer-label {
	font-size: 0.58rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.exportTransactions--page .export-txn__footer-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
}

.exportTransactions--page .export-txn__footer-value--primary {
	color: var(--primary);
}

.exportTransactions--page .export-txn__footer-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.exportTransactions--page .export-txn__footer-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.6rem 1.25rem;
}

/* Export Transactions Page End */

/* New Transaction Page Start */

/* Page Header */
.newTransaction--page .new-txn__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.newTransaction--page .new-txn__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.newTransaction--page .new-txn__breadcrumb a {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey);
}

.newTransaction--page .new-txn__breadcrumb a:hover {
	color: var(--primary);
}

.newTransaction--page .new-txn__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.newTransaction--page .new-txn__breadcrumb-current {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
}

.newTransaction--page .new-txn__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.newTransaction--page .new-txn__header-actions .themeBtn {
	font-size: 0.78rem;
	padding: 0.5rem 1.15rem;
}

/* Card */
.newTransaction--page .new-txn__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.newTransaction--page .new-txn__card-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.15rem 1.5rem 0;
}

.newTransaction--page .new-txn__card-icon {
	width: 32px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.newTransaction--page .new-txn__card-heading {
	flex: 1;
	min-width: 0;
}

.newTransaction--page .new-txn__card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.1rem;
}

.newTransaction--page .new-txn__card-text {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

.newTransaction--page .new-txn__card-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Fields */
.newTransaction--page .new-txn__field {
	margin-bottom: 1.25rem;
}

.newTransaction--page .new-txn__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--secondary);
	margin-bottom: 0.4rem;
}

.newTransaction--page .new-txn__input {
	width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 0.9rem;
	transition: border-color 0.3s ease;
}

.newTransaction--page .new-txn__input:focus {
	outline: none;
	border-color: var(--primary);
}

.newTransaction--page .new-txn__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.newTransaction--page .new-txn__input:disabled {
	color: var(--grey);
	opacity: 0.6;
}

.newTransaction--page .new-txn__input-group {
	position: relative;
}

.newTransaction--page .new-txn__input-group i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.newTransaction--page .new-txn__input-group input {
	width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 0.9rem 0.65rem 2.35rem;
}

.newTransaction--page .new-txn__input-group input:focus {
	outline: none;
	border-color: var(--primary);
}

.newTransaction--page .new-txn__input-group input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

/* Type Toggle */
.newTransaction--page .new-txn__toggle {
	display: flex;
	background: #F3F4F6;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
}

.newTransaction--page .new-txn__toggle-btn {
	flex: 1;
	background: transparent;
	border: none;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.6rem 1rem;
}

.newTransaction--page .new-txn__toggle-btn.active {
	background: var(--white);
	font-weight: 600;
	color: var(--primary);
}

/* Amount */
.newTransaction--page .new-txn__amount {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1.25rem;
	transition: border-color 0.3s ease;
}

.newTransaction--page .new-txn__amount:focus-within {
	border-color: var(--primary);
}

.newTransaction--page .new-txn__amount-currency {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--grey);
}

.newTransaction--page .new-txn__amount input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--secondary);
	padding: 0;
}

.newTransaction--page .new-txn__amount input:focus {
	outline: none;
}

/* Payment Methods */
.newTransaction--page .new-txn__methods {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.85rem;
}

.newTransaction--page .new-txn__method {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 0.75rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.newTransaction--page .new-txn__method input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.newTransaction--page .new-txn__method:hover {
	border-color: var(--primary);
}

.newTransaction--page .new-txn__method:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.newTransaction--page .new-txn__method-icon {
	font-size: 0.95rem;
	color: var(--grey);
	margin-bottom: 0.45rem;
}

.newTransaction--page .new-txn__method:has(input:checked) .new-txn__method-icon {
	color: var(--primary);
}

.newTransaction--page .new-txn__method-title {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--secondary);
}

.newTransaction--page .new-txn__method:has(input:checked) .new-txn__method-title {
	color: var(--primary);
}

/* Schedule Switch */
.newTransaction--page .new-txn__switch-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	margin-bottom: 0;
	flex-shrink: 0;
}

.newTransaction--page .new-txn__switch {
	position: relative;
	width: 38px;
	height: 20px;
	flex-shrink: 0;
}

.newTransaction--page .new-txn__switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.newTransaction--page .new-txn__switch-slider {
	position: absolute;
	inset: 0;
	background: #cbd5e1;
	border-radius: 50px;
	transition: background 0.3s ease;
}

.newTransaction--page .new-txn__switch-slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	background: var(--white);
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.newTransaction--page .new-txn__switch input:checked+.new-txn__switch-slider {
	background: var(--primary);
}

.newTransaction--page .new-txn__switch input:checked+.new-txn__switch-slider::before {
	transform: translateX(18px);
}

.newTransaction--page .new-txn__switch-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--secondary);
}

/* Review Card */
.newTransaction--page .new-txn__review {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.newTransaction--page .new-txn__review-head {
	background: var(--primary);
	padding: 1.15rem 1.5rem;
}

.newTransaction--page .new-txn__review-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 0.15rem;
}

.newTransaction--page .new-txn__review-text {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--white);
	opacity: 0.85;
}

.newTransaction--page .new-txn__review-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.newTransaction--page .new-txn__review-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.25rem;
}

.newTransaction--page .new-txn__review-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0;
}

.newTransaction--page .new-txn__review-list li+li {
	border-top: 1px solid #f0f0f0;
}

.newTransaction--page .new-txn__review-label {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

.newTransaction--page .new-txn__review-value {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--black);
	text-align: right;
}

.newTransaction--page .new-txn__review-value--primary {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--primary);
}

.newTransaction--page .new-txn__review-value--green {
	color: #15803D;
}

/* Totals */
.newTransaction--page .new-txn__totals {
	background: #F9FAFB;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
}

.newTransaction--page .new-txn__totals-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.newTransaction--page .new-txn__totals-row+.new-txn__totals-row {
	margin-top: 0.5rem;
}

.newTransaction--page .new-txn__totals-label {
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.newTransaction--page .new-txn__totals-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
}

.newTransaction--page .new-txn__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.newTransaction--page .new-txn__total-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black);
}

.newTransaction--page .new-txn__total-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
}

/* Warning */
.newTransaction--page .new-txn__warning {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--primary);
	margin-bottom: 1.25rem;
}

.newTransaction--page .new-txn__warning i {
	font-size: 0.75rem;
	margin-top: 0.1rem;
	flex-shrink: 0;
}

.newTransaction--page .new-txn__review-body .themeBtn {
	font-size: 0.85rem;
	padding: 0.75rem 1.25rem;
}

/* Quick Support */
.newTransaction--page .new-txn__support {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	background: #EDF4FA;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
}

.newTransaction--page .new-txn__support i {
	font-size: 0.95rem;
	color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.newTransaction--page .new-txn__support-title {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.15rem;
}

.newTransaction--page .new-txn__support-text {
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--primary);
}

.newTransaction--page .new-txn__support-text a {
	font-weight: 700;
	color: var(--primary);
	text-decoration: underline !important;
}

/* New Transaction Page End */

/* Resellers Page Start */

/* Page Header */
.resellers--page .resellers__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.resellers--page .resellers__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.resellers--page .resellers__header-actions .themeBtn {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.6rem 1.25rem;
}

/* Stat Cards */
.resellers--page .resellers__stat {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.resellers--page .resellers__stat-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.resellers--page .resellers__stat-icon {
	width: 34px;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.85rem;
}

.resellers--page .resellers__growth {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	background: #DCFCE7;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 600;
	color: #15803D;
	padding: 0.2rem 0.55rem;
}

.resellers--page .resellers__pending {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--grey);
}

.resellers--page .resellers__stat-label {
	display: block;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.4rem;
}

.resellers--page .resellers__stat-value {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

/* Table Card */
.resellers--page .resellers__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.resellers--page .resellers__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

/* Search */
.resellers--page .resellers__search {
	position: relative;
	min-width: 240px;
}

.resellers--page .resellers__search i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.resellers--page .resellers__search input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.55rem 0.9rem 0.55rem 2.35rem;
}

.resellers--page .resellers__search input:focus {
	outline: none;
	border-color: var(--primary);
}

.resellers--page .resellers__search input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

/* Status Tabs */
.resellers--page .resellers__tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.resellers--page .resellers__tab {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	border: none;
	border-radius: 0.4rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.35rem 0.7rem;
}

.resellers--page .resellers__tab:hover {
	color: var(--primary);
}

.resellers--page .resellers__tab.active {
	background: #D6E7F3;
	font-weight: 600;
	color: var(--primary);
}

.resellers--page .resellers__tab-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary);
	flex-shrink: 0;
}

/* Table */
.resellers--page .resellers__table-wrap {
	width: 100%;
}

.resellers--page .resellers__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 850px;
	margin: 0 !important;
}

.resellers--page .resellers__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.8rem 1.5rem;
}

.resellers--page .resellers__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.5rem;
}

.resellers--page .resellers__table tbody tr:hover {
	background: #F9FAFB;
}

.resellers--page .resellers__name-wrap {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.resellers--page .resellers__avatar {
	width: 32px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #F3F4F6;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.62rem;
	font-weight: 700;
}

.resellers--page .resellers__name-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.resellers--page .resellers__name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--primary);
}

.resellers--page .resellers__name:hover {
	color: var(--secondary);
}

.resellers--page .resellers__id {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-family: monospace;
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--grey);
}

.resellers--page .resellers__copy {
	background: transparent;
	border: none;
	font-size: 0.62rem;
	color: var(--grey);
	padding: 0;
}

.resellers--page .resellers__copy:hover {
	color: var(--primary);
}

/* Level Badges */
.resellers--page .resellers__level {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid #e5e7eb;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
}

.resellers--page .resellers__level i {
	font-size: 0.6rem;
}

.resellers--page .resellers__level--platinum {
	background: #F9FAFB;
	color: var(--secondary);
}

.resellers--page .resellers__level--gold {
	background: #FEFCE8;
	border-color: #FEF08A;
	color: #A16207;
}

.resellers--page .resellers__level--silver {
	background: #F9FAFB;
	color: var(--grey);
}

.resellers--page .resellers__lines,
.resellers--page .resellers__revenue {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
}

/* Status Pills */
.resellers--page .resellers__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
}

.resellers--page .resellers__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.resellers--page .resellers__status--active {
	background: #DCFCE7;
	color: #15803D;
}

.resellers--page .resellers__status--inactive {
	background: #F3F4F6;
	color: var(--grey);
}

.resellers--page .resellers__status--suspended {
	background: #D6E7F3;
	color: var(--primary);
}

/* DataTable Override */
.resellers--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.resellers--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.resellers--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.6rem;
	margin: 0 2px;
	cursor: pointer;
}

.resellers--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.resellers--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.resellers--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Resellers Page End */

/* Add New Reseller Page Start */

/* Page Header */
.addReseller--page .add-reseller__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.addReseller--page .add-reseller__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.addReseller--page .add-reseller__breadcrumb a {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--black);
}

.addReseller--page .add-reseller__breadcrumb a:hover {
	color: var(--secondary);
}

.addReseller--page .add-reseller__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.addReseller--page .add-reseller__breadcrumb-current {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
}

.addReseller--page .add-reseller__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.addReseller--page .add-reseller__header-actions .themeBtn {
	font-size: 0.78rem;
	padding: 0.5rem 1.15rem;
}

/* Card */
.addReseller--page .add-reseller__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.addReseller--page .add-reseller__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	padding: 1.1rem 1.5rem;
	margin-bottom: 0;
}

.addReseller--page .add-reseller__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.addReseller--page .add-reseller__card-body {
	padding: 1.5rem;
}

/* Fields */
.addReseller--page .add-reseller__field {
	margin-bottom: 1.25rem;
}

.addReseller--page .add-reseller__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.addReseller--page .add-reseller__input,
.addReseller--page .add-reseller__select {
	width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.65rem 0.9rem;
	transition: border-color 0.3s ease;
}

.addReseller--page .add-reseller__input:focus,
.addReseller--page .add-reseller__select:focus {
	outline: none;
	border-color: var(--primary);
}

.addReseller--page .add-reseller__input::placeholder {
	font-weight: 400;
	color: var(--grey);
	opacity: 0.7;
}

.addReseller--page .add-reseller__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 13px;
	padding-right: 2.25rem;
	cursor: pointer;
}

.addReseller--page .add-reseller__input-group {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.addReseller--page .add-reseller__input-prefix {
	background: #F3F4F6;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 0.85rem;
}

/* Password */
.addReseller--page .add-reseller__password {
	position: relative;
}

.addReseller--page .add-reseller__password input {
	padding-right: 2.5rem;
}

.addReseller--page .add-reseller__eye {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	transform: translateY(-50%);
	width: 30px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	color: var(--grey);
	font-size: 0.8rem;
}

.addReseller--page .add-reseller__eye:hover,
.addReseller--page .add-reseller__eye.active {
	color: var(--primary);
}

/* Switch */
.addReseller--page .add-reseller__switch-wrap {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	margin-bottom: 0.5rem;
}

.addReseller--page .add-reseller__switch {
	position: relative;
	width: 38px;
	height: 20px;
	flex-shrink: 0;
}

.addReseller--page .add-reseller__switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.addReseller--page .add-reseller__switch-slider {
	position: absolute;
	inset: 0;
	background: #cbd5e1;
	border-radius: 50px;
	transition: background 0.3s ease;
}

.addReseller--page .add-reseller__switch-slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	background: var(--white);
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.addReseller--page .add-reseller__switch input:checked+.add-reseller__switch-slider {
	background: var(--primary);
}

.addReseller--page .add-reseller__switch input:checked+.add-reseller__switch-slider::before {
	transform: translateX(18px);
}

.addReseller--page .add-reseller__switch-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
}

/* Assigned Regions */
.addReseller--page .add-reseller__regions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.85rem;
}

.addReseller--page .add-reseller__region {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.addReseller--page .add-reseller__region:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.addReseller--page .add-reseller__region input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

/* Reseller Preview */
.addReseller--page .add-reseller__preview {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.addReseller--page .add-reseller__preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	padding: 0.75rem 1.25rem;
}

.addReseller--page .add-reseller__preview-label {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.addReseller--page .add-reseller__preview-badge {
	background: #D6E7F3;
	border-radius: 0.3rem;
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--primary);
	padding: 0.15rem 0.45rem;
}

.addReseller--page .add-reseller__preview-body {
	padding: 1.25rem;
}

.addReseller--page .add-reseller__preview-top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.addReseller--page .add-reseller__preview-logo {
	width: 42px;
	aspect-ratio: 1;
	background: #F3F4F6;
	border-radius: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0.35rem;
	overflow: hidden;
}

.addReseller--page .add-reseller__preview-heading {
	flex: 1;
	min-width: 0;
}

.addReseller--page .add-reseller__preview-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.15rem;
	word-break: break-word;
}

.addReseller--page .add-reseller__preview-region {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--primary);
}

.addReseller--page .add-reseller__preview-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.25rem;
}

.addReseller--page .add-reseller__preview-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-bottom: 1px dashed #e5e7eb;
	padding: 0.6rem 0;
}

.addReseller--page .add-reseller__preview-list li:last-child {
	border-bottom: none;
}

.addReseller--page .add-reseller__preview-key {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--secondary);
}

.addReseller--page .add-reseller__preview-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--black);
	text-align: right;
	word-break: break-word;
}

.addReseller--page .add-reseller__preview-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.2rem;
	background: #F3F4F6;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
}

.addReseller--page .add-reseller__preview-status-label {
	font-size: 0.65rem;
	font-weight: 500;
	color: var(--grey);
}

.addReseller--page .add-reseller__preview-status-value {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--primary);
}

/* Onboarding Checklist */
.addReseller--page .add-reseller__checklist {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.addReseller--page .add-reseller__checklist-label {
	display: block;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 1rem;
}

.addReseller--page .add-reseller__task {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
	margin-bottom: 0.85rem;
}

.addReseller--page .add-reseller__task input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	margin-top: 0.1rem;
	flex-shrink: 0;
	cursor: pointer;
}

.addReseller--page .add-reseller__task-body {
	flex: 1;
	min-width: 0;
}

.addReseller--page .add-reseller__task-title {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.1rem;
}

.addReseller--page .add-reseller__task:has(input:checked) .add-reseller__task-title {
	color: var(--primary);
}

.addReseller--page .add-reseller__task-text {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

/* Pro Tip */
.addReseller--page .add-reseller__tip {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: #EDF4FA;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	margin-top: 1.25rem;
}

.addReseller--page .add-reseller__tip i {
	font-size: 0.8rem;
	color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.addReseller--page .add-reseller__tip-title {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.15rem;
}

.addReseller--page .add-reseller__tip-text {
	display: block;
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--primary);
}

/* Add New Reseller Page End */

/* Reports Center Page Start */

/* Page Header */
.reports--page .reports__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.reports--page .reports__header-body {
	max-width: 480px;
}

.reports--page .reports__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.reports--page .reports__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Card */
.reports--page .reports__card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.reports--page .reports__card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.reports--page .reports__card-icon {
	width: 36px;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.85rem;
}

.reports--page .reports__card-heading {
	flex: 1;
	min-width: 0;
}

.reports--page .reports__card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.reports--page .reports__card-title--block {
	margin-bottom: 0.35rem;
}

.reports--page .reports__card-meta {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

.reports--page .reports__card-text {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--grey);
	margin-bottom: 1.25rem;
}

.reports--page .reports__action {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.85rem;
	flex-shrink: 0;
}

.reports--page .reports__action:hover {
	background: #F3F4F6;
	color: var(--primary);
}

.reports--page .reports__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-top: 1px solid #f0f0f0;
	padding-top: 0.85rem;
	margin-top: auto;
}

.reports--page .reports__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

.reports--page .reports__link:hover {
	color: var(--secondary);
}

.reports--page .reports__growth {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #DCFCE7;
	border-radius: 50px;
	font-size: 0.68rem;
	font-weight: 600;
	color: #15803D;
	padding: 0.2rem 0.65rem;
}

/* Revenue Chart */
.reports--page .reports__chart {
	position: relative;
	height: 150px;
	margin-bottom: 1rem;
}

/* SIM Inventory */
.reports--page .reports__stock {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.reports--page .reports__stock-value {
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.reports--page .reports__stock-label {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--grey);
}

.reports--page .reports__split {
	display: flex;
	gap: 3px;
	margin-bottom: 1.25rem;
}

.reports--page .reports__split-bar {
	height: 6px;
	border-radius: 50px;
}

.reports--page .reports__split-bar--primary {
	background: var(--primary);
}

.reports--page .reports__split-bar--soft {
	background: #8FBEDD;
}

.reports--page .reports__split-bar--grey {
	background: #E5E7EB;
}

.reports--page .reports__run {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--primary);
	font-size: 0.7rem;
	flex-shrink: 0;
}

.reports--page .reports__run:hover {
	background: #D6E7F3;
}

/* User Growth Metrics */
.reports--page .reports__metrics {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.reports--page .reports__metric {
	flex: 1;
	min-width: 0;
}

.reports--page .reports__metric+.reports__metric {
	border-left: 1px solid #f0f0f0;
	padding-left: 1.5rem;
}

.reports--page .reports__metric-label {
	display: block;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--grey);
	margin-bottom: 0.25rem;
}

.reports--page .reports__metric-value {
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.2rem;
}

.reports--page .reports__metric-change {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	font-weight: 600;
}

.reports--page .reports__metric-change--up {
	color: #15803D;
}

.reports--page .reports__metric-change--down {
	color: var(--primary);
}

.reports--page .reports__avatars {
	display: flex;
	align-items: center;
}

.reports--page .reports__avatars li {
	width: 24px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #F3F4F6;
	border: 2px solid var(--white);
	color: var(--grey);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.55rem;
}

.reports--page .reports__avatars li+li {
	margin-left: -8px;
}

/* Financial Tasks */
.reports--page .reports__tasks {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.reports--page .reports__task {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: #F9FAFB;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	padding: 0.7rem 1rem;
}

.reports--page .reports__task--done {
	background: var(--white);
	border-color: #e5e7eb;
}

.reports--page .reports__task-name {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
}

.reports--page .reports__task-status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
}

.reports--page .reports__task-status--cleared {
	background: #DCFCE7;
	border-radius: 50px;
	font-weight: 600;
	color: #15803D;
	padding: 0.15rem 0.6rem;
}

/* Reports Center Page End */

/* Scheduled Reports Page Start */

.scheduleReports--page {
	position: relative;
}

/* Breadcrumb */
.scheduleReports--page .schedule__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.scheduleReports--page .schedule__breadcrumb a {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--secondary);
}

.scheduleReports--page .schedule__breadcrumb a:hover {
	color: var(--secondary);
}

.scheduleReports--page .schedule__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.scheduleReports--page .schedule__breadcrumb-current {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.scheduleReports--page .schedule__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.scheduleReports--page .schedule__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.scheduleReports--page .schedule__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Card */
.scheduleReports--page .schedule__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.scheduleReports--page .schedule__card-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.1rem 1.5rem;
}

.scheduleReports--page .schedule__card-head--split {
	justify-content: space-between;
}

.scheduleReports--page .schedule__card-icon {
	width: 32px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.scheduleReports--page .schedule__card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.scheduleReports--page .schedule__card-tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.scheduleReports--page .schedule__tool {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.75rem;
}

.scheduleReports--page .schedule__tool:hover,
.scheduleReports--page .schedule__tool[aria-expanded="true"] {
	background: #F3F4F6;
	color: var(--primary);
}

.scheduleReports--page .schedule__tool i.is-spinning {
	animation: scheduleToolSpin 0.7s linear;
}

@keyframes scheduleToolSpin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.scheduleReports--page .schedule__filter-item.active {
	background: #D6E7F3;
	font-weight: 600;
	color: var(--primary);
}

.scheduleReports--page .schedule__card-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Fields */
.scheduleReports--page .schedule__field {
	margin-bottom: 1.15rem;
}

.scheduleReports--page .schedule__label {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.45rem;
}

.scheduleReports--page .schedule__input,
.scheduleReports--page .schedule__select {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 0.9rem;
	transition: border-color 0.3s ease;
}

.scheduleReports--page .schedule__input:focus,
.scheduleReports--page .schedule__select:focus {
	outline: none;
	border-color: var(--primary);
}

.scheduleReports--page .schedule__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.scheduleReports--page .schedule__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 12px;
	padding-right: 2rem;
	cursor: pointer;
}

/* Report Types */
.scheduleReports--page .schedule__types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
}

.scheduleReports--page .schedule__type {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 0.5rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.scheduleReports--page .schedule__type input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.scheduleReports--page .schedule__type:hover {
	border-color: var(--primary);
}

.scheduleReports--page .schedule__type:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.scheduleReports--page .schedule__type-icon {
	font-size: 0.95rem;
	color: var(--grey);
	margin-bottom: 0.4rem;
}

.scheduleReports--page .schedule__type:has(input:checked) .schedule__type-icon {
	color: var(--primary);
}

.scheduleReports--page .schedule__type-name {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--secondary);
}

.scheduleReports--page .schedule__type:has(input:checked) .schedule__type-name {
	color: var(--primary);
}

/* Delivery Rows */
.scheduleReports--page .schedule__delivery {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.6rem 0.9rem;
	margin-bottom: 0.6rem;
}

.scheduleReports--page .schedule__delivery:last-child {
	margin-bottom: 0;
}

.scheduleReports--page .schedule__delivery>i {
	font-size: 0.8rem;
	color: var(--grey);
	flex-shrink: 0;
}

.scheduleReports--page .schedule__delivery input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	font-size: 0.78rem;
	color: var(--secondary);
	padding: 0;
}

.scheduleReports--page .schedule__delivery input:focus {
	outline: none;
}

.scheduleReports--page .schedule__delivery input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.scheduleReports--page .schedule__delivery span {
	flex: 1;
	min-width: 0;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--grey);
	text-align: left;
}

.scheduleReports--page .schedule__delivery-badge {
	flex: none !important;
	background: #F3F4F6;
	border-radius: 0.25rem;
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	padding: 0.15rem 0.4rem;
}

.scheduleReports--page .schedule__delivery--add {
	cursor: pointer;
}

.scheduleReports--page .schedule__delivery--add:hover {
	border-color: var(--primary);
}

.scheduleReports--page .schedule__delivery--add:hover span,
.scheduleReports--page .schedule__delivery--add:hover>i {
	color: var(--primary);
}

.scheduleReports--page .schedule__delivery-plus {
	font-size: 0.7rem;
	color: var(--primary);
	flex-shrink: 0;
}

.scheduleReports--page .schedule__card-body .themeBtn {
	font-size: 0.85rem;
	padding: 0.8rem 1.25rem;
	margin-top: 0.25rem;
}

/* Quota */
.scheduleReports--page .schedule__quota {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
}

.scheduleReports--page .schedule__quota-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}

.scheduleReports--page .schedule__quota-label {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.scheduleReports--page .schedule__quota-percent {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary);
}

.scheduleReports--page .schedule__quota-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.scheduleReports--page .schedule__quota-value {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--black);
}

.scheduleReports--page .schedule__quota-link {
	font-size: 0.55rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
}

.scheduleReports--page .schedule__quota-link:hover {
	color: var(--primary);
}

.scheduleReports--page .schedule__bar {
	display: block;
	width: 100%;
	height: 5px;
	background: #f0f0f0;
	border-radius: 50px;
	overflow: hidden;
}

.scheduleReports--page .schedule__bar-fill {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
}

/* Schedules Table */
.scheduleReports--page .schedule__table-wrap {
	width: 100%;
}

.scheduleReports--page .schedule__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 700px;
	margin: 0 !important;
}

.scheduleReports--page .schedule__table thead th {
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
}

.scheduleReports--page .schedule__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.5rem;
}

.scheduleReports--page .schedule__table tbody tr:hover {
	background: #F9FAFB;
}

.scheduleReports--page .schedule__report {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.scheduleReports--page .schedule__report-icon {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.7rem;
}

.scheduleReports--page .schedule__report-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.scheduleReports--page .schedule__report-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

.scheduleReports--page .schedule__report-meta {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.scheduleReports--page .schedule__frequency,
.scheduleReports--page .schedule__next {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
}

.scheduleReports--page .schedule__next small {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

.scheduleReports--page .schedule__channels {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--grey);
}

.scheduleReports--page .schedule__status {
	display: inline-block;
	border-radius: 50px;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.2rem 0.6rem;
}

.scheduleReports--page .schedule__status--active {
	background: #DCFCE7;
	color: #15803D;
}

.scheduleReports--page .schedule__status--failed {
	background: #DC262620;
	color: #DC2626;
}

.scheduleReports--page .schedule__status--running {
	background: #F0FDF4;
	color: #15803D;
}

/* DataTable Override */
.scheduleReports--page .dataTables_wrapper .dataTables_info {
	font-size: 0.72rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.scheduleReports--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.scheduleReports--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey) !important;
	padding: 0.3rem 0.7rem;
	margin: 0 2px;
	cursor: pointer;
}

.scheduleReports--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.scheduleReports--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.scheduleReports--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Feature Cards */
.scheduleReports--page .schedule__features {
	margin-top: 0.5rem;
}

.scheduleReports--page .schedule__feature {
	height: 100%;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.15rem 1.25rem;
}

.scheduleReports--page .schedule__feature-icon {
	width: 34px;
	aspect-ratio: 1;
	border-radius: 0.5rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.8rem;
}

.scheduleReports--page .schedule__feature-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.25rem;
}

.scheduleReports--page .schedule__feature-text {
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 0;
}

/* Scheduled Reports Page End */

/* Export Custom Data Page Start */

/* Page Header */
.exportCustomData--page .export-data__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.exportCustomData--page .export-data__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.exportCustomData--page .export-data__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Card */
.exportCustomData--page .export-data__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.exportCustomData--page .export-data__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	padding: 1.1rem 1.5rem;
	margin-bottom: 0;
}

.exportCustomData--page .export-data__card-title i {
	font-size: 0.8rem;
	color: var(--primary);
}

.exportCustomData--page .export-data__card-title--plain {
	border-bottom: none;
	padding: 0;
}

.exportCustomData--page .export-data__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.1rem 1.5rem;
}

.exportCustomData--page .export-data__card-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.exportCustomData--page .export-data__step {
	width: 22px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.65rem;
	font-weight: 700;
}

.exportCustomData--page .export-data__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.exportCustomData--page .export-data__link {
	background: transparent;
	border: none;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
	padding: 0;
}

.exportCustomData--page .export-data__link:hover {
	color: var(--secondary);
}

/* Data Source */
.exportCustomData--page .export-data__source {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}

.exportCustomData--page .export-data__source:last-child {
	margin-bottom: 0;
}

.exportCustomData--page .export-data__source input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportCustomData--page .export-data__source:hover {
	border-color: var(--primary);
}

.exportCustomData--page .export-data__source:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.exportCustomData--page .export-data__source-icon {
	font-size: 0.9rem;
	color: var(--grey);
	flex-shrink: 0;
}

.exportCustomData--page .export-data__source:has(input:checked) .export-data__source-icon {
	color: var(--primary);
}

.exportCustomData--page .export-data__source-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.exportCustomData--page .export-data__source-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

.exportCustomData--page .export-data__source-meta {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.exportCustomData--page .export-data__source-radio {
	width: 14px;
	height: 14px;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background: var(--white);
	flex-shrink: 0;
}

.exportCustomData--page .export-data__source:has(input:checked) .export-data__source-radio {
	border-color: var(--primary);
	background: var(--primary);
	box-shadow: inset 0 0 0 3px var(--white);
}

/* Filters */
.exportCustomData--page .export-data__field {
	margin-bottom: 1.15rem;
}

.exportCustomData--page .export-data__label {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.45rem;
}

.exportCustomData--page .export-data__range {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.exportCustomData--page .export-data__input,
.exportCustomData--page .export-data__select {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.6rem 0.9rem;
	transition: border-color 0.3s ease;
}

.exportCustomData--page .export-data__input:focus,
.exportCustomData--page .export-data__select:focus {
	outline: none;
	border-color: var(--primary);
}

.exportCustomData--page .export-data__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px;
	padding-right: 2rem;
	cursor: pointer;
}

/* Pills */
.exportCustomData--page .export-data__pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.exportCustomData--page .export-data__pill {
	position: relative;
	margin-bottom: 0;
	cursor: pointer;
}

.exportCustomData--page .export-data__pill input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportCustomData--page .export-data__pill span {
	display: block;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.35rem 0.85rem;
	transition: all 0.3s ease;
}

.exportCustomData--page .export-data__pill:hover span {
	border-color: var(--primary);
	color: var(--primary);
}

.exportCustomData--page .export-data__pill:has(input:checked) span {
	background: #D6E7F3;
	border-color: var(--primary);
	font-weight: 600;
	color: var(--primary);
}

/* Data Fields */
.exportCustomData--page .export-data__fields {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem 1rem;
}

.exportCustomData--page .export-data__field-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
	cursor: pointer;
	margin-bottom: 0;
}

.exportCustomData--page .export-data__field-item input {
	width: 15px;
	height: 15px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

.exportCustomData--page .export-data__field-item:has(input:checked) {
	color: var(--primary);
	font-weight: 600;
}

/* Export Formats */
.exportCustomData--page .export-data__formats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
	margin-bottom: 1.15rem;
}

.exportCustomData--page .export-data__format {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.9rem 0.5rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.exportCustomData--page .export-data__format input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.exportCustomData--page .export-data__format i {
	font-size: 1.05rem;
}

.exportCustomData--page .export-data__format:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.exportCustomData--page .export-data__format:has(input:checked) {
	background: #F3F8FC;
	border-color: var(--primary);
	color: var(--primary);
}

/* Estimates */
.exportCustomData--page .export-data__estimates {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: #F9FAFB;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	margin-bottom: 1.15rem;
}

.exportCustomData--page .export-data__estimates li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.exportCustomData--page .export-data__estimate-label {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.exportCustomData--page .export-data__estimate-value {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--black);
}

.exportCustomData--page .export-data__card-body .themeBtn {
	font-size: 0.85rem;
	padding: 0.8rem 1.25rem;
}

.exportCustomData--page .export-data__card-body .themeBtn:disabled {
	opacity: 0.55;
	pointer-events: none;
}

.exportCustomData--page .export-data__note {
	display: block;
	font-size: 0.62rem;
	font-weight: 400;
	text-align: center;
	color: var(--grey);
	margin-top: 0.65rem;
}

/* Recent Exports Table */
.exportCustomData--page .export-data__table-wrap {
	width: 100%;
}

.exportCustomData--page .export-data__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 900px;
}

.exportCustomData--page .export-data__table thead th {
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
}

.exportCustomData--page .export-data__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.5rem;
}

.exportCustomData--page .export-data__table tbody tr:last-child td {
	border-bottom: none;
}

.exportCustomData--page .export-data__table tbody tr:hover {
	background: #F9FAFB;
}

.exportCustomData--page .export-data__file {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.exportCustomData--page .export-data__file-icon {
	width: 30px;
	aspect-ratio: 1;
	border-radius: 0.4rem;
	background: #D6E7F3;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.75rem;
}

.exportCustomData--page .export-data__file-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.exportCustomData--page .export-data__file-name {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--black);
}

.exportCustomData--page .export-data__file-meta {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.exportCustomData--page .export-data__source-cell,
.exportCustomData--page .export-data__rows {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--primary);
}

.exportCustomData--page .export-data__source-cell {
	color: var(--secondary);
}

.exportCustomData--page .export-data__date {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
}

.exportCustomData--page .export-data__date small {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.exportCustomData--page .export-data__status {
	display: inline-block;
	border-radius: 50px;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.2rem 0.6rem;
}

.exportCustomData--page .export-data__status--ready {
	background: #DCFCE7;
	color: #15803D;
}

.exportCustomData--page .export-data__status--expired {
	background: #DC262620;
	color: #DC2626;
}

.exportCustomData--page .export-data__status--processing {
	background: #D6E7F3;
	color: var(--primary);
}

.exportCustomData--page .export-data__action {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--primary);
	font-size: 0.8rem;
}

.exportCustomData--page .export-data__action:hover {
	background: #D6E7F3;
}

/* Export Custom Data Page End */

/* API Management Page Start */

/* Page Header */
.apiManagement--page .api__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.apiManagement--page .api__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.apiManagement--page .api__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Card */
.apiManagement--page .api__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.apiManagement--page .api__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1.1rem 1.5rem;
}

.apiManagement--page .api__card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.apiManagement--page .api__card-title i {
	font-size: 0.85rem;
	color: var(--primary);
}

.apiManagement--page .api__card-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.apiManagement--page .api__quota {
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.2rem 0.6rem;
}

.apiManagement--page .api__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	border: none;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
	padding: 0;
}

.apiManagement--page .api__link:hover {
	color: var(--secondary);
}

/* Keys Table */
.apiManagement--page .api__table-wrap {
	width: 100%;
}

.apiManagement--page .api__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.apiManagement--page .api__table thead th {
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
}

.apiManagement--page .api__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.9rem 1.5rem;
}

.apiManagement--page .api__table tbody tr:last-child td {
	border-bottom: none;
}

.apiManagement--page .api__table tbody tr:hover {
	background: #F9FAFB;
}

.apiManagement--page .api__key-name {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
}

.apiManagement--page .api__prefix {
	display: inline-block;
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-family: monospace;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.25rem 0.6rem;
}

.apiManagement--page .api__date {
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--secondary);
}

.apiManagement--page .api__used {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--primary);
}

.apiManagement--page .api__delete {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.8rem;
}

.apiManagement--page .api__delete:hover {
	background: #D6E7F3;
	color: var(--primary);
}

/* Rate Limit */
.apiManagement--page .api__usage {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.apiManagement--page .api__usage-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.apiManagement--page .api__usage-limit {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.apiManagement--page .api__bar {
	display: block;
	width: 100%;
	height: 8px;
	background: #E5E7EB;
	border-radius: 50px;
	overflow: hidden;
}

.apiManagement--page .api__bar-fill {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
}

.apiManagement--page .api__usage-axis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.62rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.5rem;
}

/* Webhook Endpoints */
.apiManagement--page .api__hook {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.apiManagement--page .api__hook--inactive {
	background: #F9FAFB;
}

.apiManagement--page .api__hook-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

.apiManagement--page .api__hook-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.apiManagement--page .api__hook--inactive .api__hook-title {
	color: var(--grey);
}

.apiManagement--page .api__hook-status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #DC262620;
	border-radius: 50px;
	font-size: 0.6rem;
	font-weight: 600;
	color: #DC2626;
	padding: 0.2rem 0.6rem;
}

.apiManagement--page .api__hook-status--active {
	background: #DCFCE7;
	color: #15803D;
}

.apiManagement--page .api__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.apiManagement--page .api__hook-url {
	display: block;
	font-family: monospace;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
	word-break: break-all;
	margin-bottom: 0.75rem;
}

.apiManagement--page .api__hook-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.apiManagement--page .api__hook-tags li {
	background: #F3F4F6;
	border-radius: 0.3rem;
	font-family: monospace;
	font-size: 0.62rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.2rem 0.5rem;
}

/* API Management Page End */

/* API Documentation Page Start */

.apiDocs--page .api-docs__layout {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

/* Docs Sidebar */
.apiDocs--page .api-docs__nav {
	position: sticky;
	top: 1.5rem;
	width: 280px;
	flex-shrink: 0;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
}

.apiDocs--page .api-docs__search {
	position: relative;
	margin-bottom: 1.25rem;
}

.apiDocs--page .api-docs__search i {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	font-size: 0.7rem;
	color: var(--grey);
	pointer-events: none;
}

.apiDocs--page .api-docs__search input {
	width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.72rem;
	color: var(--secondary);
	padding: 0.5rem 0.75rem 0.5rem 2rem;
}

.apiDocs--page .api-docs__search input:focus {
	outline: none;
	border-color: var(--primary);
}

.apiDocs--page .api-docs__nav-label {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.apiDocs--page .api-docs__nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 1.25rem;
}

.apiDocs--page .api-docs__nav-link {
	display: block;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.4rem 0.6rem;
}

.apiDocs--page .api-docs__nav-link:hover {
	background: #F9FAFB;
	color: var(--primary);
}

.apiDocs--page .api-docs__nav-link.active {
	background: #D6E7F3;
	font-weight: 600;
	color: var(--primary);
}

/* Sandbox Card */
.apiDocs--page .api-docs__sandbox {
	background: #EDF4FA;
	border-radius: 0.5rem;
	padding: 1rem;
}

.apiDocs--page .api-docs__sandbox-title {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.35rem;
}

.apiDocs--page .api-docs__sandbox-text {
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--primary);
	margin-bottom: 0.85rem;
}

.apiDocs--page .api-docs__sandbox .themeBtn {
	font-size: 0.72rem;
	padding: 0.5rem 0.75rem;
}

/* Docs Content */
.apiDocs--page .api-docs__content {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 2rem;
}

.apiDocs--page .api-docs__section {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #f0f0f0;
	scroll-margin-top: 90px;
}

.apiDocs--page .api-docs__section:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.apiDocs--page .api-docs__version {
	display: inline-block;
	background: #D6E7F3;
	border-radius: 0.3rem;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--primary);
	padding: 0.2rem 0.55rem;
	margin-bottom: 0.6rem;
}

.apiDocs--page .api-docs__lead {
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.8;
	color: var(--grey);
	margin: 0.75rem 0 1.5rem;
}

.apiDocs--page .api-docs__section-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.5rem;
}

.apiDocs--page .api-docs__text {
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.8;
	color: var(--grey);
	margin-bottom: 1.15rem;
}

.apiDocs--page .api-docs__text code,
.apiDocs--page .api-docs__note code {
	background: #F3F4F6;
	border-radius: 0.25rem;
	font-family: monospace;
	font-size: 0.75rem;
	color: var(--primary);
	padding: 0.1rem 0.35rem;
}

.apiDocs--page .api-docs__label {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.6rem;
}

.apiDocs--page .api-docs__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: #F9FAFB;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
}

.apiDocs--page .api-docs__list li {
	position: relative;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	padding-left: 1rem;
}

.apiDocs--page .api-docs__list li::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary);
}

.apiDocs--page .api-docs__list strong {
	font-weight: 700;
	color: var(--secondary);
}

/* Promo Cards */
.apiDocs--page .api-docs__promo {
	height: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 1.15rem 1.25rem;
}

.apiDocs--page .api-docs__promo-icon {
	font-size: 0.9rem;
	color: var(--primary);
	margin-bottom: 0.6rem;
}

.apiDocs--page .api-docs__promo-title {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.3rem;
}

.apiDocs--page .api-docs__promo-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 0;
}

/* Code Blocks */
.apiDocs--page .api-docs__code {
	position: relative;
	background: #1F2937;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.15rem;
	overflow-x: auto;
}

.apiDocs--page .api-docs__code pre {
	margin-bottom: 0;
}

.apiDocs--page .api-docs__code code {
	font-family: monospace;
	font-size: 0.7rem;
	line-height: 1.8;
	color: #E5E7EB;
	white-space: pre;
}

.apiDocs--page .api-docs__copy {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 26px;
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 0.3rem;
	color: #E5E7EB;
	font-size: 0.65rem;
}

.apiDocs--page .api-docs__copy:hover {
	background: var(--primary);
	color: var(--white);
}

.apiDocs--page .api-docs__key {
	color: #8FBEDD;
}

.apiDocs--page .api-docs__string {
	color: #86EFAC;
}

.apiDocs--page .api-docs__number,
.apiDocs--page .api-docs__bool {
	color: #FCD34D;
}

.apiDocs--page .api-docs__comment {
	color: #9CA3AF;
}

/* Note Box */
.apiDocs--page .api-docs__note {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	background: #EDF4FA;
	border-left: 3px solid var(--primary);
	border-radius: 0.4rem;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--primary);
	padding: 0.85rem 1.15rem;
}

.apiDocs--page .api-docs__note i {
	font-size: 0.8rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.apiDocs--page .api-docs__note strong {
	font-weight: 700;
}

/* Docs Tables */
.apiDocs--page .api-docs__table-wrap {
	width: 100%;
	max-width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
}

.apiDocs--page .api-docs__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	margin-bottom: 0;
}

.apiDocs--page .api-docs__table thead th {
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.7rem 1.15rem;
}

.apiDocs--page .api-docs__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
	padding: 0.7rem 1.15rem;
}

.apiDocs--page .api-docs__table tbody tr:last-child td {
	border-bottom: none;
}

.apiDocs--page .api-docs__table strong {
	font-weight: 600;
	color: var(--secondary);
}

.apiDocs--page .api-docs__error {
	font-family: monospace;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--primary);
}

/* Event Cards */
.apiDocs--page .api-docs__event {
	height: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
}

.apiDocs--page .api-docs__event code {
	display: inline-block;
	font-family: monospace;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.3rem;
}

.apiDocs--page .api-docs__event span {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

/* Endpoint Sections */
.apiDocs--page .api-docs__endpoint-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.apiDocs--page .api-docs__endpoint-heading {
	flex: 1;
	min-width: 240px;
}

.apiDocs--page .api-docs__endpoint-heading .api-docs__text {
	margin-bottom: 0;
}

.apiDocs--page .api-docs__method {
	border-radius: 0.3rem;
	font-family: monospace;
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--white);
	white-space: nowrap;
	padding: 0.25rem 0.6rem;
	flex-shrink: 0;
}

.apiDocs--page .api-docs__method--get {
	background: #22C55E;
}

.apiDocs--page .api-docs__method--post {
	background: var(--primary);
}

.apiDocs--page .api-docs__method--patch {
	background: var(--accent-deep);
}

/* Parameters */
.apiDocs--page .api-docs__param {
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
}

.apiDocs--page .api-docs__param:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.apiDocs--page .api-docs__param code {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary);
	margin-right: 0.5rem;
}

.apiDocs--page .api-docs__param-type {
	background: #F3F4F6;
	border-radius: 0.25rem;
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	padding: 0.1rem 0.4rem;
}

.apiDocs--page .api-docs__param-type--required {
	background: #D6E7F3;
	color: var(--primary);
}

.apiDocs--page .api-docs__param-text {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-top: 0.3rem;
}

/* API Documentation Page End */

/* Generate API Key Page Start */

/* Breadcrumb */
.generateKey--page .generate-key__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.generateKey--page .generate-key__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
}

.generateKey--page .generate-key__breadcrumb a:hover {
	color: var(--primary);
}

.generateKey--page .generate-key__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.generateKey--page .generate-key__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

/* Page Header */
.generateKey--page .generate-key__header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.generateKey--page .generate-key__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

/* Form Card */
.generateKey--page .generate-key__card {
	max-width: 560px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 2rem;
	margin: 0 auto;
}

.generateKey--page .generate-key__field {
	margin-bottom: 1.5rem;
}

.generateKey--page .generate-key__label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.3rem;
}

.generateKey--page .generate-key__help {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	margin-bottom: 0.75rem;
}

.generateKey--page .generate-key__input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.75rem 1rem;
	transition: border-color 0.3s ease;
}

.generateKey--page .generate-key__input:focus {
	outline: none;
	border-color: var(--primary);
}

.generateKey--page .generate-key__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

/* Environment Options */
.generateKey--page .generate-key__environments {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 0.75rem;
}

.generateKey--page .generate-key__environment {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.9rem 1rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.generateKey--page .generate-key__environment input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.generateKey--page .generate-key__environment:hover {
	border-color: var(--primary);
}

.generateKey--page .generate-key__environment:has(input:checked) {
	border-color: var(--primary);
	background: #F3F8FC;
}

.generateKey--page .generate-key__environment-icon {
	font-size: 0.95rem;
	color: var(--grey);
	flex-shrink: 0;
}

.generateKey--page .generate-key__environment:has(input:checked) .generate-key__environment-icon {
	color: var(--primary);
}

.generateKey--page .generate-key__environment-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.generateKey--page .generate-key__environment-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

.generateKey--page .generate-key__environment-meta {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

/* Scope Options */
.generateKey--page .generate-key__scope {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.85rem 0;
	cursor: pointer;
	margin-bottom: 0;
}

.generateKey--page .generate-key__scope+.generate-key__scope {
	border-top: 1px solid #f0f0f0;
}

.generateKey--page .generate-key__scope-input {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
	cursor: pointer;
}

.generateKey--page .generate-key__scope-body {
	flex: 1;
	min-width: 0;
}

.generateKey--page .generate-key__scope-name {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 0.15rem;
}

.generateKey--page .generate-key__scope:has(input:checked) .generate-key__scope-name {
	color: var(--primary);
}

.generateKey--page .generate-key__scope-text {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

.generateKey--page .generate-key__card .themeBtn {
	font-size: 0.9rem;
	padding: 0.85rem 1.5rem;
}

/* Generate API Key Page End */

/* Export History Page Start
   Reuses the Export Custom Data card/table styles — this page carries both
   .exportCustomData--page and .exportHistory--page on its wrapper. */

/* Breadcrumb */
.exportHistory--page .export-history__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.exportHistory--page .export-history__breadcrumb a {
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--grey);
}

.exportHistory--page .export-history__breadcrumb a:hover {
	color: var(--primary);
}

.exportHistory--page .export-history__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.exportHistory--page .export-history__breadcrumb-current {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
}

/* Filter Bar */
.exportHistory--page .export-history__filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.exportHistory--page .export-history__search {
	position: relative;
	flex: 1;
	min-width: 220px;
}

.exportHistory--page .export-history__search i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.exportHistory--page .export-history__search input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.55rem 0.9rem 0.55rem 2.35rem;
}

.exportHistory--page .export-history__search input:focus {
	outline: none;
	border-color: var(--primary);
}

.exportHistory--page .export-history__search input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.exportHistory--page .export-history__filters-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.exportHistory--page .export-history__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
	min-width: 140px;
	padding: 0.55rem 2rem 0.55rem 0.9rem;
	cursor: pointer;
}

.exportHistory--page .export-history__select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Format Badge */
.exportHistory--page .export-history__format {
	display: inline-block;
	background: #F3F4F6;
	border-radius: 0.3rem;
	font-family: monospace;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--grey);
	padding: 0.2rem 0.5rem;
}

/* Row Actions */
.exportHistory--page .export-history__actions {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.exportHistory--page .export-history__delete {
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	color: var(--grey);
	font-size: 0.8rem;
}

.exportHistory--page .export-history__delete:hover {
	background: #F3F4F6;
	color: var(--primary);
}

.exportHistory--page .export-data__action:disabled {
	color: var(--grey);
	opacity: 0.5;
	pointer-events: none;
}

/* DataTable Override */
.exportHistory--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.exportHistory--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.exportHistory--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.6rem;
	margin: 0 2px;
	cursor: pointer;
}

.exportHistory--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.exportHistory--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.exportHistory--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Export History Page End */

/* Support Center Page Start */

/* Page Header */
.supportCenter--page .support__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.supportCenter--page .support__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.supportCenter--page .support__header-actions .themeBtn {
	font-size: 0.85rem;
}

/* Stat Cards */
.supportCenter--page .support__stat {
	position: relative;
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	overflow: hidden;
}

.supportCenter--page .support__stat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.supportCenter--page .support__stat-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0;
}

.supportCenter--page .support__stat-label i {
	font-size: 0.8rem;
	color: var(--primary);
}

.supportCenter--page .support__stat-body {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

.supportCenter--page .support__stat-value {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.supportCenter--page .support__stat-value small {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--grey);
}

.supportCenter--page .support__stat-change {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.15rem 0.5rem;
}

.supportCenter--page .support__stat-change--up {
	background: #DCFCE7;
	color: #15803D;
}

.supportCenter--page .support__stat-change--down {
	background: #FEE2E2;
	color: #DC2626;
}

.supportCenter--page .support__stat-meta {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.supportCenter--page .support__stat-bar {
	display: block;
	width: 100%;
	height: 4px;
	background: #E5E7EB;
	border-radius: 50px;
	overflow: hidden;
}

.supportCenter--page .support__stat-bar-fill {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
}

.supportCenter--page .support__stat-watermark {
	position: absolute;
	top: 50%;
	right: -1.25rem;
	transform: translateY(-50%);
	font-size: 5rem;
	color: #F3F4F6;
	pointer-events: none;
	z-index: 0;
}

.supportCenter--page .support__stat--rate .support__stat-head,
.supportCenter--page .support__stat--rate .support__stat-body,
.supportCenter--page .support__stat--rate .support__stat-bar {
	position: relative;
	z-index: 1;
}

/* Table Card */
.supportCenter--page .support__card {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.supportCenter--page .support__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.supportCenter--page .support__card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0;
}

.supportCenter--page .support__filter {
	position: relative;
	min-width: 160px;
}

.supportCenter--page .support__filter-select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 13px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.6rem 2.25rem 0.6rem 1rem;
	cursor: pointer;
}

.supportCenter--page .support__filter-select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Collapsible Filter Bar */
.supportCenter--page .support__filters {
	display: none;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.supportCenter--page .support__filters.show {
	display: flex;
}

.supportCenter--page .support__filters-item {
	flex: 1 1 180px;
	min-width: 0;
}

.supportCenter--page .support__filters-label {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.4rem;
}

.supportCenter--page .support__filters-search {
	position: relative;
}

.supportCenter--page .support__filters-search i {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	font-size: 0.72rem;
	color: var(--grey);
	pointer-events: none;
}

.supportCenter--page .support__filters-input {
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.6rem 1rem 0.6rem 2.25rem;
}

.supportCenter--page .support__filters-input:focus {
	outline: none;
	border-color: var(--primary);
}

.supportCenter--page .support__filters-reset {
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.55rem 1rem;
	flex-shrink: 0;
}

.supportCenter--page .support__filters-reset:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Table */
.supportCenter--page .support__table-wrap {
	width: 100%;
	max-width: 100%;
	padding: 0 1.5rem;
	overflow-x: auto;
}

.supportCenter--page .support__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 820px;
	margin: 0 !important;
}

.supportCenter--page .support__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
}

.supportCenter--page .support__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 1rem 1.5rem;
}

.supportCenter--page .support__table tbody tr:last-child td {
	border-bottom: none;
}

.supportCenter--page .support__table tbody tr:hover {
	background: #F9FAFB;
}

.supportCenter--page .support__id {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--primary);
}

.supportCenter--page .support__id:hover {
	color: var(--secondary);
}

.supportCenter--page .support__subject {
	display: block;
	max-width: 320px;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--secondary);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.supportCenter--page .support__subject:hover {
	color: var(--primary);
}

/* Priority Pills */
.supportCenter--page .support__priority {
	display: inline-block;
	border-radius: 0.3rem;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.2rem 0.55rem;
}

.supportCenter--page .support__priority--high {
	background: var(--primary);
	color: var(--white);
}

.supportCenter--page .support__priority--med {
	background: #D6E7F3;
	color: var(--primary);
}

.supportCenter--page .support__priority--low {
	background: #FEE2E2;
	color: #DC2626;
}

/* Customer Cell */
.supportCenter--page .support__customer {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--secondary);
}

.supportCenter--page .support__avatar {
	display: grid;
	place-items: center;
	width: 26px;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.supportCenter--page .support__avatar--a {
	background: #D6E7F3;
	color: #0C4E7D;
}

.supportCenter--page .support__avatar--b {
	background: #DCFCE7;
	color: #15803D;
}

.supportCenter--page .support__avatar--c {
	background: #FEF3C7;
	color: #B45309;
}

.supportCenter--page .support__avatar--d {
	background: #DCE8F2;
	color: #4338CA;
}

.supportCenter--page .support__avatar--e {
	background: #FEE2E2;
	color: #DC2626;
}

/* Status Pills */
.supportCenter--page .support__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.supportCenter--page .support__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.supportCenter--page .support__status--open {
	color: var(--primary);
}

.supportCenter--page .support__status--progress {
	color: #B45309;
}

.supportCenter--page .support__status--resolved {
	color: #15803D;
}

.supportCenter--page .support__time {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
	white-space: nowrap;
}

/* DataTable Override */
.supportCenter--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.supportCenter--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.supportCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.6rem;
	margin: 0 2px;
	cursor: pointer;
}

.supportCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.supportCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white) !important;
}

.supportCenter--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.supportCenter--page .dataTables_empty {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	text-align: center;
	padding: 2rem 1.5rem !important;
}

/* Support Center Page End */


/* Ticket Detail Page Start */

.ticketDetail--page .ticket__layout {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.ticketDetail--page .ticket__main {
	flex: 1;
	min-width: 0;
	max-width: 100%;
}

.ticketDetail--page .ticket__side {
	position: sticky;
	top: 1.5rem;
	width: 300px;
	max-width: 100%;
	flex-shrink: 0;
}

/* Ticket Head */
.ticketDetail--page .ticket__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}

.ticketDetail--page .ticket__head-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}

.ticketDetail--page .ticket__back {
	display: grid;
	place-items: center;
	width: 28px;
	aspect-ratio: 1;
	background: #F3F4F6;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	color: var(--grey);
	flex-shrink: 0;
}

.ticketDetail--page .ticket__back:hover {
	background: var(--primary);
	color: var(--white);
}

.ticketDetail--page .ticket__number {
	font-family: monospace;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--grey);
}

.ticketDetail--page .ticket__subject {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.ticketDetail--page .ticket__meta {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
	margin-bottom: 0;
}

.ticketDetail--page .ticket__head-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ticketDetail--page .ticket__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 50px;
	font-size: 0.68rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 0.25rem 0.7rem;
}

.ticketDetail--page .ticket__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.ticketDetail--page .ticket__badge--progress {
	background: #FEF3C7;
	color: #B45309;
}

.ticketDetail--page .ticket__badge--priority {
	background: #FEE2E2;
	color: #DC2626;
}

.ticketDetail--page .ticket__badge--resolved {
	background: #DCFCE7;
	color: #15803D;
}

.ticketDetail--page .ticket__badge--urgent {
	background: #FEE2E2;
	color: #DC2626;
}

/* Thread */
.ticketDetail--page .ticket__thread {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.5rem;
	margin-bottom: 1.25rem;
}

.ticketDetail--page .ticket__msg {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	max-width: 85%;
}

.ticketDetail--page .ticket__msg--staff {
	flex-direction: row-reverse;
	margin-left: auto;
}

.ticketDetail--page .ticket__msg-avatar {
	width: 34px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ticketDetail--page .ticket__msg-avatar--icon {
	display: grid;
	place-items: center;
	background: var(--primary);
	color: var(--white);
	font-size: 0.8rem;
}

.ticketDetail--page .ticket__msg-body {
	min-width: 0;
	flex: 1;
}

.ticketDetail--page .ticket__msg-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}

.ticketDetail--page .ticket__msg--staff .ticket__msg-head {
	justify-content: flex-start;
}

.ticketDetail--page .ticket__msg-author {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--secondary);
}

.ticketDetail--page .ticket__msg--staff .ticket__msg-author {
	color: var(--primary);
}

.ticketDetail--page .ticket__msg-role {
	font-weight: 400;
	color: var(--grey);
}

.ticketDetail--page .ticket__msg-time {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

.ticketDetail--page .ticket__bubble {
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.8;
	border-radius: 0.75rem;
	padding: 0.85rem 1.15rem;
	overflow-wrap: anywhere;
}

.ticketDetail--page .ticket__bubble--customer {
	background: #EDF4FA;
	border: 1px solid #D6E7F3;
	border-top-left-radius: 0.2rem;
	color: var(--secondary);
}

.ticketDetail--page .ticket__bubble--staff {
	background: var(--primary);
	border-top-right-radius: 0.2rem;
	color: var(--white);
}

/* System Divider */
.ticketDetail--page .ticket__system {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ticketDetail--page .ticket__system::before,
.ticketDetail--page .ticket__system::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.ticketDetail--page .ticket__system span {
	background: #F9FAFB;
	border-radius: 50px;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	text-align: center;
	padding: 0.25rem 0.85rem;
}

/* Internal Note */
.ticketDetail--page .ticket__note {
	background: #F0FDF4;
	border: 1px dashed #86EFAC;
	border-radius: 0.6rem;
	padding: 0.85rem 1.15rem;
}

.ticketDetail--page .ticket__note-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
}

.ticketDetail--page .ticket__note-title {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #15803D;
}

.ticketDetail--page .ticket__note-text {
	font-size: 0.75rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	color: var(--grey);
	margin-bottom: 0;
}

/* Reply Box */
.ticketDetail--page .ticket__reply {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
}

.ticketDetail--page .ticket__reply-tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.ticketDetail--page .ticket__reply-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 50px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.35rem 0.9rem;
}

.ticketDetail--page .ticket__reply-tab.active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.ticketDetail--page .ticket__reply-box {
	border: 1px solid #e5e7eb;
	border-radius: 0.6rem;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	overflow: hidden;
}

.ticketDetail--page .ticket__reply-box:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.ticketDetail--page .ticket__reply--internal .ticket__reply-box:focus-within {
	border-color: #22C55E;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.ticketDetail--page .ticket__reply-input {
	display: block;
	width: 100%;
	background: var(--white);
	border: none;
	resize: vertical;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--secondary);
	padding: 0.85rem 1.15rem;
}

.ticketDetail--page .ticket__reply-input:focus {
	outline: none;
}

.ticketDetail--page .ticket__reply--internal .ticket__reply-box {
	background: #F0FDF4;
	border-color: #86EFAC;
}

.ticketDetail--page .ticket__reply--internal .ticket__reply-input {
	background: #F0FDF4;
}

.ticketDetail--page .ticket__reply-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-top: 1px solid #e5e7eb;
	padding: 0.6rem 0.85rem;
}

.ticketDetail--page .ticket__reply-tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.ticketDetail--page .ticket__reply-tool {
	display: grid;
	place-items: center;
	width: 28px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	font-size: 0.8rem;
	color: var(--grey);
}

.ticketDetail--page .ticket__reply-tool:hover {
	background: #F3F4F6;
	color: var(--primary);
}

.ticketDetail--page .ticket__reply-file {
	display: none;
}

/* Attachment Chips */
.ticketDetail--page .ticket__attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 0.85rem 0.6rem;
}

.ticketDetail--page .ticket__attachments:empty {
	display: none;
}

.ticketDetail--page .ticket__attachments li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	max-width: 100%;
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.25rem 0.5rem;
	overflow-wrap: anywhere;
}

.ticketDetail--page .ticket__attachments li i {
	font-size: 0.65rem;
	color: var(--grey);
	flex-shrink: 0;
}

.ticketDetail--page .ticket__attachments li button {
	background: transparent;
	border: none;
	font-size: 0.6rem;
	color: var(--grey);
	line-height: 1;
	flex-shrink: 0;
}

.ticketDetail--page .ticket__attachments li button:hover {
	color: #DC2626;
}

/* Emoji Picker */
.ticketDetail--page .ticket__emoji {
	position: relative;
}

.ticketDetail--page .ticket__emoji-pop {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 0;
	display: none;
	width: max-content;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.6rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	padding: 0.65rem;
	z-index: 5;
}

.ticketDetail--page .ticket__emoji-pop.show {
	display: block;
}

.ticketDetail--page .ticket__emoji-title {
	display: block;
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.ticketDetail--page .ticket__emoji-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.2rem;
}

.ticketDetail--page .ticket__emoji-pop button {
	display: grid;
	place-items: center;
	width: 30px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.4rem;
	font-size: 1rem;
	line-height: 1;
}

.ticketDetail--page .ticket__emoji-pop button:hover {
	background: #EDF4FA;
}

.ticketDetail--page .ticket__send {
	font-size: 0.78rem;
	padding: 0.5rem 1.15rem;
}

.ticketDetail--page .ticket__reply-hint {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.6rem;
}

.ticketDetail--page .ticket__reply-hint kbd {
	background: #F3F4F6;
	border-radius: 0.25rem;
	font-family: monospace;
	font-size: 0.62rem;
	color: var(--secondary);
	padding: 0.05rem 0.3rem;
}

/* Side Panels */
.ticketDetail--page .ticket__panel {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.15rem 1.25rem;
	margin-bottom: 1.25rem;
}

.ticketDetail--page .ticket__panel:last-child {
	margin-bottom: 0;
}

.ticketDetail--page .ticket__panel--muted {
	background: #F9FAFB;
}

.ticketDetail--page .ticket__panel-title {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.85rem;
}

.ticketDetail--page .ticket__info {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ticketDetail--page .ticket__info li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ticketDetail--page .ticket__info-label {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
}

.ticketDetail--page .ticket__info-value {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--secondary);
	text-align: right;
}

.ticketDetail--page .ticket__info-value--user {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ticketDetail--page .ticket__initials {
	display: grid;
	place-items: center;
	width: 20px;
	aspect-ratio: 1;
	background: #D6E7F3;
	border-radius: 50%;
	font-size: 0.5rem;
	font-weight: 700;
	color: var(--primary);
	flex-shrink: 0;
}

.ticketDetail--page .ticket__info-value--alert {
	color: #DC2626;
}

/* Customer Card */
.ticketDetail--page .ticket__customer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.ticketDetail--page .ticket__customer-avatar {
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ticketDetail--page .ticket__customer-name {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.15rem;
}

.ticketDetail--page .ticket__customer-tag {
	display: inline-block;
	background: #D6E7F3;
	border-radius: 0.25rem;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--primary);
	padding: 0.1rem 0.4rem;
}

.ticketDetail--page .ticket__contact {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.ticketDetail--page .ticket__contact li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
	overflow-wrap: anywhere;
}

.ticketDetail--page .ticket__contact li i {
	font-size: 0.72rem;
	color: var(--primary);
	flex-shrink: 0;
}

.ticketDetail--page .ticket__panel .themeBtn {
	font-size: 0.78rem;
	padding: 0.55rem 1rem;
}

/* Quick Actions */
.ticketDetail--page .ticket__resolve {
	margin-bottom: 0.75rem;
}

.ticketDetail--page .ticket__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.ticketDetail--page .ticket__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.65rem 0.5rem;
}

.ticketDetail--page .ticket__action i {
	font-size: 0.8rem;
}

.ticketDetail--page .ticket__action:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.ticketDetail--page .ticket__recent-note {
	font-size: 0.7rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	color: var(--grey);
	margin-bottom: 0;
}

/* Ticket Detail Page End */


/* New Ticket Page Start */

/* Page Header */
.newTicket--page .newTicket__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.newTicket--page .newTicket__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.newTicket--page .newTicket__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
}

.newTicket--page .newTicket__breadcrumb a:hover {
	color: var(--primary);
}

.newTicket--page .newTicket__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.newTicket--page .newTicket__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

/* .newTicket__title / .newTicket__subtitle inherit .heading and .subHeading. */

.newTicket--page .newTicket__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.newTicket--page .newTicket__header-actions .themeBtn {
	font-size: 0.85rem;
}

/* Cards */
.newTicket--page .newTicket__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.newTicket--page .col-lg-4 .newTicket__card:last-of-type,
.newTicket--page .col-lg-8 .newTicket__card:last-of-type {
	margin-bottom: 0;
}

.newTicket--page .newTicket__card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.newTicket--page .newTicket__card-icon {
	display: grid;
	place-items: center;
	width: 30px;
	aspect-ratio: 1;
	border-radius: 0.45rem;
	font-size: 0.8rem;
	flex-shrink: 0;
}

.newTicket--page .newTicket__card-icon--blue {
	background: #D6E7F3;
	color: var(--primary);
}

.newTicket--page .newTicket__card-icon--indigo {
	background: #D6E7F3;
	color: var(--primary);
}

.newTicket--page .newTicket__card-icon--green {
	background: #DCFCE7;
	color: #15803D;
}

.newTicket--page .newTicket__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.newTicket--page .newTicket__card-body {
	padding: 1.5rem;
}

/* Form Controls */
.newTicket--page .newTicket__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--grey);
	margin-bottom: 0.5rem;
}

.newTicket--page .newTicket__input,
.newTicket--page .newTicket__select,
.newTicket--page .newTicket__textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 1rem;
}

.newTicket--page .newTicket__input::placeholder,
.newTicket--page .newTicket__textarea::placeholder {
	color: var(--grey);
	opacity: 0.55;
}

.newTicket--page .newTicket__input:focus,
.newTicket--page .newTicket__select:focus,
.newTicket--page .newTicket__textarea:focus {
	outline: none;
	border-color: var(--primary);
}

.newTicket--page .newTicket__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 13px;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Customer Search */
.newTicket--page .newTicket__search {
	position: relative;
}

.newTicket--page .newTicket__search>i {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--grey);
	pointer-events: none;
}

.newTicket--page .newTicket__search .newTicket__input {
	background: #F9FAFB;
	padding-left: 2.4rem;
	padding-right: 5rem;
}

.newTicket--page .newTicket__search-btn {
	position: absolute;
	top: 50%;
	right: 0.4rem;
	transform: translateY(-50%);
	background: #F3F4F6;
	border: 1px solid #e5e7eb;
	border-radius: 0.35rem;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	padding: 0.3rem 0.65rem;
}

.newTicket--page .newTicket__search-btn:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

/* Priority Selector */
.newTicket--page .newTicket__priority {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

.newTicket--page .newTicket__priority-item {
	margin-bottom: 0;
	cursor: pointer;
}

.newTicket--page .newTicket__priority-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.newTicket--page .newTicket__priority-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey);
	text-align: center;
	padding: 0.5rem 0.3rem;
}

.newTicket--page .newTicket__priority-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.newTicket--page .newTicket__priority-dot--low {
	background: #22C55E;
}

.newTicket--page .newTicket__priority-dot--med {
	background: #E89028;
}

.newTicket--page .newTicket__priority-dot--high {
	background: #F97316;
}

.newTicket--page .newTicket__priority-dot--urgent {
	background: #DC2626;
}

.newTicket--page .newTicket__priority-item input:checked+.newTicket__priority-box {
	background: #D6E7F3;
	border-color: var(--primary);
	color: var(--primary);
}

.newTicket--page .newTicket__priority-item input:focus-visible+.newTicket__priority-box {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Rich Text Editor */
.newTicket--page .newTicket__editor {
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
}

.newTicket--page .newTicket__editor:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.newTicket--page .newTicket__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	padding: 0.4rem 0.6rem;
}

.newTicket--page .newTicket__toolbar button {
	display: grid;
	place-items: center;
	width: 26px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.3rem;
	font-size: 0.7rem;
	color: var(--secondary);
}

.newTicket--page .newTicket__toolbar button:hover {
	background: #E5E7EB;
	color: var(--primary);
}

.newTicket--page .newTicket__toolbar button.active {
	background: #D6E7F3;
	color: var(--primary);
}

.newTicket--page .newTicket__textarea {
	min-height: 160px;
	border: none;
	border-radius: 0;
	resize: vertical;
	line-height: 1.7;
	overflow-y: auto;
}

.newTicket--page .newTicket__textarea:empty::before {
	content: attr(data-placeholder);
	color: var(--grey);
	opacity: 0.55;
	pointer-events: none;
}

.newTicket--page .newTicket__textarea:focus {
	outline: none;
}

.newTicket--page .newTicket__textarea strong,
.newTicket--page .newTicket__textarea b {
	font-weight: 700;
}

.newTicket--page .newTicket__textarea em,
.newTicket--page .newTicket__textarea i {
	font-style: italic;
}

.newTicket--page .newTicket__textarea a {
	color: var(--primary);
	text-decoration: underline !important;
}

.newTicket--page .newTicket__textarea code {
	background: #F3F4F6;
	border-radius: 0.25rem;
	font-family: monospace;
	font-size: 0.75rem;
	color: #4338CA;
	padding: 0.1rem 0.35rem;
}

.newTicket--page .newTicket__textarea ul,
.newTicket--page .newTicket__textarea ol {
	padding-left: 1.35rem;
	margin-bottom: 0.5rem;
}

.newTicket--page .newTicket__textarea ul li {
	list-style-type: disc;
}

.newTicket--page .newTicket__textarea ol li {
	list-style-type: decimal;
}

/* Attachments */
.newTicket--page .newTicket__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	background: #F9FAFB;
	border: 1px dashed #d1d5db;
	border-radius: 0.5rem;
	text-align: center;
	padding: 1.75rem 1.25rem;
	margin-bottom: 0;
	cursor: pointer;
}

.newTicket--page .newTicket__dropzone:hover {
	border-color: var(--primary);
}

.newTicket--page .newTicket__dropzone>i {
	font-size: 1.35rem;
	color: var(--primary);
	margin-bottom: 0.25rem;
}

.newTicket--page .newTicket__dropzone-text {
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--grey);
}

.newTicket--page .newTicket__dropzone-text strong {
	font-weight: 700;
	color: var(--primary);
}

.newTicket--page .newTicket__dropzone-hint {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.newTicket--page .newTicket__file {
	display: none;
}

.newTicket--page .newTicket__files {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 0.75rem;
}

.newTicket--page .newTicket__files li {
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.35rem 0.7rem;
	overflow-wrap: anywhere;
}

/* Support Guidelines */
.newTicket--page .newTicket__guides {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.newTicket--page .newTicket__guides li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.newTicket--page .newTicket__guide-num {
	display: grid;
	place-items: center;
	width: 20px;
	aspect-ratio: 1;
	background: #F3F4F6;
	border-radius: 50%;
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--grey);
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.newTicket--page .newTicket__guide-body {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--grey);
	min-width: 0;
}

.newTicket--page .newTicket__guide-body strong {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.15rem;
}

.newTicket--page .newTicket__notice {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	background: #EDF4FA;
	border-left: 3px solid var(--primary);
	border-radius: 0.4rem;
	padding: 0.85rem 1.15rem;
}

.newTicket--page .newTicket__notice i {
	font-size: 0.8rem;
	color: var(--primary);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.newTicket--page .newTicket__notice span {
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--primary);
	min-width: 0;
}

.newTicket--page .newTicket__notice strong {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 0.15rem;
}

/* Related Articles */
.newTicket--page .newTicket__article {
	position: relative;
	display: block;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 1.5rem 0.85rem 0;
	margin-bottom: 0.85rem;
}

.newTicket--page .newTicket__article:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.newTicket--page .newTicket__article-tag {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--theme-color);
	margin-bottom: 0.25rem;
}

.newTicket--page .newTicket__article-tag--billing {
	color: var(--primary);
}

.newTicket--page .newTicket__article-title {
	display: block;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--secondary);
	transition: all 300ms ease-in-out;
}

.newTicket--page .newTicket__article:hover .newTicket__article-title {
	color: var(--primary);
}

.newTicket--page .newTicket__article>i {
	position: absolute;
	top: 0.2rem;
	right: 0;
	font-size: 0.65rem;
	color: var(--grey);
}

/* Promo */
.newTicket--page .newTicket__promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: linear-gradient(135deg, var(--theme-color), var(--primary));
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin-top: 1.5rem;
}

.newTicket--page .newTicket__promo-logo {
	width: 90px;
	max-width: 100%;
	filter: brightness(0) invert(1);
	margin-bottom: 1.25rem;
}

.newTicket--page .newTicket__promo-text {
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--white);
	margin-bottom: 0;
}

/* New Ticket Page End */

/* Settings Page Start */

/* Page Header */
.settings--page .settings__header {
	margin-bottom: 1.25rem;
}

/* .settings__title / .settings__subtitle intentionally carry no type rules -
   they inherit .heading and .subHeading like every other page header. */

/* Tabs */
.settings--page .settings__tabs {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2rem;
	border-bottom: 1px solid #e5e7eb;
	/* overflow-x:auto makes overflow-y compute to auto as well, so anything that
	   spills even 1px vertically produces a stray scrollbar. Pin the y axis. */
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 1.5rem;
}

.settings--page .settings__tab {
	position: relative;
	background: transparent;
	border: none;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.75rem 0;
}

.settings--page .settings__tab::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
	opacity: 0;
}

.settings--page .settings__tab:hover {
	color: var(--primary);
}

.settings--page .settings__tab.active {
	font-weight: 600;
	color: var(--primary);
}

.settings--page .settings__tab.active::after {
	opacity: 1;
}

/* Tab Panes */
.settings--page .settings__pane {
	display: none;
}

.settings--page .settings__pane.active {
	display: block;
}

/* Cards */
.settings--page .settings__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.settings--page .settings__card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
}

.settings--page .settings__card-icon {
	display: grid;
	place-items: center;
	width: 30px;
	aspect-ratio: 1;
	background: #D6E7F3;
	border-radius: 0.45rem;
	font-size: 0.8rem;
	color: var(--primary);
	flex-shrink: 0;
}

.settings--page .settings__card-icon--green {
	background: #DCFCE7;
	color: #15803D;
}

.settings--page .settings__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.settings--page .settings__card-body {
	padding: 1.5rem;
}

/* Form Controls */
.settings--page .settings__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.settings--page .settings__input {
	display: block;
	width: 100%;
	max-width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 1rem;
}

.settings--page .settings__input::placeholder {
	color: var(--grey);
	opacity: 0.7;
}

.settings--page .settings__input:focus {
	outline: none;
	background: var(--white);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.settings--page .settings__select {
	display: block;
	width: 100%;
	max-width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: #F9FAFB;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 13px;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 2.5rem 0.65rem 1rem;
	cursor: pointer;
}

.settings--page .settings__select:focus {
	outline: none;
	background-color: var(--white);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.settings--page .settings__help {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
	margin-top: 0.4rem;
}

.settings--page .settings__error {
	display: none;
	font-size: 0.68rem;
	font-weight: 500;
	color: #DC2626;
	margin-top: 0.4rem;
}

.settings--page .settings__error.show {
	display: block;
}

.settings--page .settings__input.is-invalid {
	border-color: #DC2626;
}

.settings--page .settings__input.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Input + button pair */
.settings--page .settings__inline {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
}

.settings--page .settings__inline .themeBtn {
	font-size: 0.78rem;
	white-space: nowrap;
	padding: 0.55rem 1rem;
	flex-shrink: 0;
}

/* Removable chips */
.settings--page .settings__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
}

.settings--page .settings__chips:empty {
	display: none;
}

.settings--page .settings__chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	background: #EDF4FA;
	border: 1px solid #D6E7F3;
	border-radius: 0.35rem;
	font-family: monospace;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary);
	padding: 0.3rem 0.6rem;
	overflow-wrap: anywhere;
}

.settings--page .settings__chips li button {
	background: transparent;
	border: none;
	font-size: 0.65rem;
	color: var(--primary);
	line-height: 1;
	flex-shrink: 0;
}

.settings--page .settings__chips li button:hover {
	color: #DC2626;
}

/* Active Sessions */
.settings--page .settings__sessions {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-bottom: 1.15rem;
}

.settings--page .settings__sessions li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.settings--page .settings__session-icon {
	font-size: 0.85rem;
	color: var(--grey);
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.settings--page .settings__session-body {
	min-width: 0;
}

.settings--page .settings__session-title {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.1rem;
}

.settings--page .settings__session-badge {
	display: inline-block;
	background: #DCFCE7;
	border-radius: 0.25rem;
	font-size: 0.55rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #15803D;
	padding: 0.1rem 0.35rem;
	margin-left: 0.35rem;
}

.settings--page .settings__session-meta {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--grey);
}

.settings--page .settings__card-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.settings--page .settings__card-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

.settings--page .settings__save {
	background: var(--theme-color);
}

/* System Alerts */
.settings--page .settings__alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	cursor: pointer;
}

.settings--page .settings__alert:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.settings--page .settings__alert-body {
	min-width: 0;
}

.settings--page .settings__alert-title {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.15rem;
}

.settings--page .settings__alert-text {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

/* Toggle */
.settings--page .settings__switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}

.settings--page .settings__switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.settings--page .settings__switch-slider {
	position: absolute;
	inset: 0;
	background: #d1d5db;
	border-radius: 50px;
	transition: all 300ms ease-in-out;
}

.settings--page .settings__switch-slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--white);
	border-radius: 50%;
	transition: all 300ms ease-in-out;
}

.settings--page .settings__switch input:checked+.settings__switch-slider {
	background: var(--primary);
}

.settings--page .settings__switch input:checked+.settings__switch-slider::before {
	transform: translateX(18px);
}

.settings--page .settings__switch input:focus-visible+.settings__switch-slider {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Security Status */
.settings--page .settings__status {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #F0FDF4;
	border: 1px solid #DCFCE7;
	border-radius: 0.6rem;
	padding: 1rem;
	margin-bottom: 1rem;
}

.settings--page .settings__status-icon {
	display: grid;
	place-items: center;
	width: 24px;
	aspect-ratio: 1;
	background: #22C55E;
	border-radius: 50%;
	font-size: 0.65rem;
	color: var(--white);
	flex-shrink: 0;
}

.settings--page .settings__status-body {
	min-width: 0;
}

.settings--page .settings__status-title {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	color: #15803D;
	margin-bottom: 0.2rem;
}

.settings--page .settings__status-text {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.6;
	color: #15803D;
}

.settings--page .settings__card-body .themeBtn--outline {
	font-size: 0.8rem;
	padding: 0.6rem 1rem;
}

/* Billing Cycle */
.settings--page .settings__facts {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-bottom: 1.15rem;
}

.settings--page .settings__facts li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.settings--page .settings__fact-label {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
}

.settings--page .settings__fact-value {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--primary);
	text-align: right;
}

.settings--page .settings__note {
	background: #F9FAFB;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
	text-align: center;
	padding: 0.85rem 1rem;
}

.settings--page .settings__note strong {
	font-weight: 700;
	color: var(--secondary);
}

/* Settings Page End */

/* Admin Users & Roles Page Start */

.adminUsers--page .adminUsers__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.adminUsers--page .adminUsers__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.adminUsers--page .adminUsers__header-actions .themeBtn {
	font-size: 0.85rem;
}

.adminUsers--page .adminUsers__invite {
	background: var(--theme-color);
}

/* Stat Cards */
.adminUsers--page .adminUsers__stat {
	height: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1.15rem 1.35rem;
}

.adminUsers--page .adminUsers__stat-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.6rem;
}

.adminUsers--page .adminUsers__stat-label i {
	font-size: 0.8rem;
	color: var(--primary);
}

.adminUsers--page .adminUsers__stat-value {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

/* Table Card */
.adminUsers--page .adminUsers__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.adminUsers--page .adminUsers__table-wrap {
	width: 100%;
	max-width: 100%;
	padding: 0 1.5rem;
	overflow-x: auto;
}

.adminUsers--page .adminUsers__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 820px;
	margin: 0 !important;
}

.adminUsers--page .adminUsers__table thead th {
	background: #F9FAFB;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.85rem 1.5rem;
}

.adminUsers--page .adminUsers__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.85rem 1.5rem;
}

.adminUsers--page .adminUsers__table tbody tr:last-child td {
	border-bottom: none;
}

.adminUsers--page .adminUsers__table tbody tr:hover {
	background: #F9FAFB;
}

/* User Cell */
.adminUsers--page .adminUsers__user {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.adminUsers--page .adminUsers__avatar {
	display: grid;
	place-items: center;
	width: 34px;
	aspect-ratio: 1;
	background: #F3F4F6;
	border-radius: 50%;
	object-fit: cover;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--grey);
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.adminUsers--page .adminUsers__avatar--initials {
	background: #E5E7EB;
	color: var(--secondary);
}

.adminUsers--page .adminUsers__name {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.1rem;
}

.adminUsers--page .adminUsers__name:hover {
	color: var(--secondary);
}

.adminUsers--page .adminUsers__email {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

/* Role Pills */
.adminUsers--page .adminUsers__role {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 50px;
	font-size: 0.68rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 0.25rem 0.7rem;
}

.adminUsers--page .adminUsers__role i {
	font-size: 0.6rem;
}

.adminUsers--page .adminUsers__role--super {
	background: #D6E7F3;
	color: var(--primary);
}

.adminUsers--page .adminUsers__role--support {
	background: #DCE8F2;
	color: var(--theme-color);
}

.adminUsers--page .adminUsers__role--finance {
	background: #F3F4F6;
	color: var(--grey);
}

.adminUsers--page .adminUsers__login {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

/* Status */
.adminUsers--page .adminUsers__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.adminUsers--page .adminUsers__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.adminUsers--page .adminUsers__status--active {
	color: #15803D;
}

.adminUsers--page .adminUsers__status--inactive {
	color: #B45309;
}

.adminUsers--page .adminUsers__action {
	width: 30px;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	border-radius: 0.35rem;
	font-size: 0.85rem;
	color: var(--grey);
}

.adminUsers--page .adminUsers__action:hover {
	background: #F3F4F6;
	color: var(--primary);
}

/* DataTable Override */
.adminUsers--page .dataTables_wrapper .dataTables_info {
	font-size: 0.75rem;
	color: var(--grey);
	padding: 1.15rem 1.5rem;
}

.adminUsers--page .dataTables_wrapper .dataTables_paginate {
	padding: 1.15rem 1.5rem;
}

.adminUsers--page .dataTables_wrapper .dataTables_paginate .paginate_button {
	min-width: 30px;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey) !important;
	text-align: center;
	padding: 0.3rem 0.7rem;
	margin: 0 2px;
	cursor: pointer;
}

.adminUsers--page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(55, 130, 247, 0.1);
	border-color: var(--primary);
	color: var(--primary) !important;
}

.adminUsers--page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: var(--white) !important;
}

.adminUsers--page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Admin Users & Roles Page End */

/* User Detail Page Start */

.userDetail--page .userDetail__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.userDetail--page .userDetail__breadcrumb a {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
}

.userDetail--page .userDetail__breadcrumb a:hover {
	color: var(--primary);
}

.userDetail--page .userDetail__breadcrumb i {
	font-size: 0.55rem;
	color: var(--grey);
	opacity: 0.6;
}

.userDetail--page .userDetail__breadcrumb-current {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

.userDetail--page .userDetail__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

/* Profile Card */
.userDetail--page .userDetail__profile {
	padding: 1.5rem;
}

.userDetail--page .userDetail__profile-head {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1.15rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid #f0f0f0;
}

.userDetail--page .userDetail__photo {
	position: relative;
	flex-shrink: 0;
}

.userDetail--page .userDetail__photo img {
	width: 76px;
	aspect-ratio: 1;
	border-radius: 0.75rem;
	object-fit: cover;
}

.userDetail--page .userDetail__photo-badge {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 26px;
	aspect-ratio: 1;
	background: var(--primary);
	border: 2px solid var(--white);
	border-radius: 50%;
	font-size: 0.6rem;
	color: var(--white);
}

.userDetail--page .userDetail__profile-body {
	flex: 1;
	min-width: 200px;
}

.userDetail--page .userDetail__name {
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.userDetail--page .userDetail__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.userDetail--page .userDetail__tag {
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--grey);
	padding: 0.25rem 0.6rem;
}

.userDetail--page .userDetail__tag--role {
	background: #D6E7F3;
	color: #0C4E7D;
}

.userDetail--page .userDetail__tag--uid {
	font-family: monospace;
	font-weight: 500;
}

.userDetail--page .userDetail__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #DCFCE7;
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #15803D;
	white-space: nowrap;
	padding: 0.25rem 0.75rem;
	flex-shrink: 0;
}

.userDetail--page .userDetail__status--inactive {
	background: #FEF3C7;
	color: #B45309;
}

.userDetail--page .userDetail__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.userDetail--page .userDetail__contact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.15rem;
}

.userDetail--page .userDetail__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-width: 0;
}

.userDetail--page .userDetail__contact li i {
	font-size: 0.78rem;
	color: var(--primary);
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.userDetail--page .userDetail__contact-body {
	min-width: 0;
}

.userDetail--page .userDetail__contact-label {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.2rem;
}

.userDetail--page .userDetail__contact-value {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
	overflow-wrap: anywhere;
}

/* Info Cards */
.userDetail--page .userDetail__info {
	padding: 1.15rem 1.25rem;
}

.userDetail--page .userDetail__info-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
}

.userDetail--page .userDetail__info-icon {
	display: grid;
	place-items: center;
	width: 28px;
	aspect-ratio: 1;
	flex: 0 0 28px;
	background: #D6E7F3;
	border-radius: 0.4rem;
	font-size: 0.72rem;
	color: var(--primary);
}

.userDetail--page .userDetail__info-tag {
	background: #F3F4F6;
	border-radius: 0.3rem;
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.15rem 0.5rem;
}

.userDetail--page .userDetail__info-tag--verified {
	background: #DCFCE7;
	color: #15803D;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.userDetail--page .userDetail__info-label {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	margin-bottom: 0.25rem;
}

.userDetail--page .userDetail__info-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.2rem;
}

.userDetail--page .userDetail__info-meta {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--grey);
}

/* Activity Log */
.userDetail--page .userDetail__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
}

.userDetail--page .userDetail__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.userDetail--page .userDetail__card-tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.userDetail--page .userDetail__tool {
	display: grid;
	place-items: center;
	width: 30px;
	aspect-ratio: 1;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.72rem;
	color: var(--grey);
}

.userDetail--page .userDetail__tool:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.userDetail--page .userDetail__table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.userDetail--page .userDetail__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
	margin-bottom: 0;
}

.userDetail--page .userDetail__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.7rem 1.5rem;
}

.userDetail--page .userDetail__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0.85rem 1.5rem;
}

.userDetail--page .userDetail__table tbody tr:last-child td {
	border-bottom: none;
}

.userDetail--page .userDetail__log-action {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--secondary);
}

.userDetail--page .userDetail__log-target {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

.userDetail--page .userDetail__log-target:hover {
	text-decoration: underline !important;
}

.userDetail--page .userDetail__log-time,
.userDetail--page .userDetail__log-ip {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
}

.userDetail--page .userDetail__log-ip {
	font-family: monospace;
}

.userDetail--page .userDetail__log-status {
	display: inline-block;
	border-radius: 0.3rem;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.2rem 0.5rem;
}

.userDetail--page .userDetail__log-status--success {
	background: #DCFCE7;
	color: #15803D;
}

.userDetail--page .userDetail__log-status--failed {
	background: #FEE2E2;
	color: #DC2626;
}

.userDetail--page .userDetail__card-foot {
	text-align: center;
	padding: 1rem 1.5rem;
}

.userDetail--page .userDetail__link {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
}

.userDetail--page .userDetail__link:hover {
	color: var(--secondary);
}

/* Side Panels */
.userDetail--page .userDetail__panel {
	padding: 1.25rem;
}

.userDetail--page .userDetail__panel-title {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.85rem;
}

.userDetail--page .userDetail__panel .themeBtn {
	font-size: 0.8rem;
	padding: 0.6rem 1rem;
}

.userDetail--page .userDetail__act {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	width: 100%;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--secondary);
	text-align: left;
	padding: 0.6rem 1rem;
	margin-bottom: 0.5rem;
}

.userDetail--page .userDetail__act:last-child {
	margin-bottom: 0;
}

.userDetail--page .userDetail__act i {
	font-size: 0.75rem;
	color: var(--grey);
}

.userDetail--page .userDetail__act:hover {
	border-color: var(--primary);
	color: var(--primary);
}

.userDetail--page .userDetail__act:hover i {
	color: var(--primary);
}

.userDetail--page .userDetail__act--danger {
	color: #DC2626;
}

.userDetail--page .userDetail__act--danger i {
	color: #DC2626;
}

.userDetail--page .userDetail__act--danger:hover {
	background: #FEE2E2;
	border-color: #DC2626;
	color: #DC2626;
}

.userDetail--page .userDetail__act--danger:hover i {
	color: #DC2626;
}

/* Access Control */
.userDetail--page .userDetail__access {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-bottom: 1.15rem;
}

.userDetail--page .userDetail__access li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.userDetail--page .userDetail__access li i {
	font-size: 0.8rem;
	color: #22C55E;
	margin-top: 0.1rem;
	flex-shrink: 0;
}

.userDetail--page .userDetail__access-body {
	min-width: 0;
}

.userDetail--page .userDetail__access-title {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.1rem;
}

.userDetail--page .userDetail__access-text {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

/* Internal Notes */
.userDetail--page .userDetail__notes {
	background: var(--theme-color);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.userDetail--page .userDetail__notes-title {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 0.6rem;
}

.userDetail--page .userDetail__notes-text {
	font-size: 0.72rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	color: var(--white);
	margin-bottom: 0;
}

/* User Detail Page End */

/* Manage Permissions Page Start */

.permissions--page .permissions__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.permissions--page .permissions__header-body {
	max-width: 620px;
}

.permissions--page .permissions__header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.permissions--page .permissions__header-actions .themeBtn {
	font-size: 0.85rem;
}

.permissions--page .permissions__save {
	background: var(--theme-color);
}

/* Role Chips */
.permissions--page .permissions__roles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 0.75rem;
	margin-bottom: 1rem;
}

.permissions--page .permissions__role {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.4rem 0.9rem;
}

.permissions--page .permissions__role:hover {
	background: #F3F4F6;
	color: var(--primary);
}

.permissions--page .permissions__role.active {
	background: var(--primary);
	font-weight: 600;
	color: var(--white);
}

.permissions--page .permissions__role--add {
	font-weight: 600;
	color: var(--primary);
}

/* Matrix Card */
.permissions--page .permissions__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.permissions--page .permissions__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
}

.permissions--page .permissions__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.permissions--page .permissions__global {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.permissions--page .permissions__global-label {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--grey);
}

.permissions--page .permissions__link {
	background: transparent;
	border: none;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--primary);
	padding: 0;
}

.permissions--page .permissions__link:hover {
	color: var(--secondary);
}

.permissions--page .permissions__table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.permissions--page .permissions__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
	margin-bottom: 0;
}

.permissions--page .permissions__table thead th {
	background: #F9FAFB;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--grey);
	white-space: nowrap;
	padding: 0.7rem 1.5rem;
}

.permissions--page .permissions__table tbody td {
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
	padding: 0.85rem 1.5rem;
}

.permissions--page .permissions__table tbody tr:last-child td {
	border-bottom: none;
}

.permissions--page .permissions__module {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.permissions--page .permissions__module-icon {
	display: grid;
	place-items: center;
	width: 32px;
	aspect-ratio: 1;
	background: #F3F4F6;
	border-radius: 0.45rem;
	font-size: 0.78rem;
	color: var(--grey);
	flex-shrink: 0;
}

.permissions--page .permissions__module-body {
	min-width: 0;
}

.permissions--page .permissions__module-name {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--secondary);
	margin-bottom: 0.1rem;
}

.permissions--page .permissions__module-text {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
}

.permissions--page .permissions__check {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	cursor: pointer;
}

/* Side Panel */
.permissions--page .permissions__panel {
	padding: 1.25rem;
}

.permissions--page .permissions__panel-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1rem;
}

.permissions--page .permissions__panel-icon {
	display: grid;
	place-items: center;
	width: 28px;
	aspect-ratio: 1;
	background: #D6E7F3;
	border-radius: 0.4rem;
	font-size: 0.72rem;
	color: var(--primary);
	flex-shrink: 0;
}

.permissions--page .permissions__panel-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.permissions--page .permissions__impact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.permissions--page .permissions__impact-label {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--grey);
}

.permissions--page .permissions__impact-value {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.permissions--page .permissions__section-label {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	margin-bottom: 0.6rem;
}

.permissions--page .permissions__locations {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.15rem;
}

.permissions--page .permissions__locations li {
	background: #F3F4F6;
	border-radius: 0.35rem;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.25rem 0.6rem;
}

.permissions--page .permissions__locations li span {
	color: var(--grey);
}

.permissions--page .permissions__highlights {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 1.15rem;
}

.permissions--page .permissions__highlight {
	border-left: 3px solid #e5e7eb;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
	padding-left: 0.65rem;
}

.permissions--page .permissions__highlight strong {
	font-weight: 700;
	color: var(--secondary);
}

.permissions--page .permissions__highlight--ok {
	border-left-color: #22C55E;
}

.permissions--page .permissions__highlight--warn {
	border-left-color: #E89028;
}

.permissions--page .permissions__health {
	background: #F9FAFB;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
}

.permissions--page .permissions__health-title {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--secondary);
	margin-bottom: 0.25rem;
}

.permissions--page .permissions__health-text {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--grey);
}

/* Docs Card */
.permissions--page .permissions__docs {
	background: var(--theme-color);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.permissions--page .permissions__docs-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 0.5rem;
}

.permissions--page .permissions__docs-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 0.75rem;
}

.permissions--page .permissions__docs-link {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--white);
	text-decoration: underline !important;
}

/* Footer Bar */
.permissions--page .permissions__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	padding: 1rem 1.5rem;
	margin-top: 1.5rem;
}

.permissions--page .permissions__footer-note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--grey);
}

.permissions--page .permissions__footer-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.permissions--page .permissions__cancel {
	background: transparent;
	border: none;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
}

.permissions--page .permissions__cancel:hover {
	color: var(--primary);
}

.permissions--page .permissions__footer .themeBtn {
	font-size: 0.8rem;
	padding: 0.55rem 1.25rem;
}

/* Manage Permissions Page End */

/* Invite User Page Start */

.inviteUser--page .invite__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.inviteUser--page .invite__header-actions .themeBtn {
	font-size: 0.8rem;
	padding: 0.5rem 1rem;
}

.inviteUser--page .invite__card {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.inviteUser--page .invite__card-body {
	padding: 1.5rem;
}

.inviteUser--page .invite__section-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 0.85rem;
	margin-bottom: 1.25rem;
}

.inviteUser--page .invite__section-icon {
	display: grid;
	place-items: center;
	width: 28px;
	aspect-ratio: 1;
	background: #D6E7F3;
	border-radius: 0.4rem;
	font-size: 0.72rem;
	color: var(--primary);
	flex-shrink: 0;
}

.inviteUser--page .invite__section-icon--green {
	background: #DCFCE7;
	color: #15803D;
}

.inviteUser--page .invite__section-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0;
}

.inviteUser--page .invite__label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.inviteUser--page .invite__hint {
	font-size: 0.7rem;
	color: var(--grey);
	cursor: help;
}

.inviteUser--page .invite__input,
.inviteUser--page .invite__select,
.inviteUser--page .invite__textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	background: #F9FAFB;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--secondary);
	padding: 0.65rem 1rem;
}

.inviteUser--page .invite__input::placeholder,
.inviteUser--page .invite__textarea::placeholder {
	color: var(--grey);
	opacity: 0.75;
}

.inviteUser--page .invite__input:focus,
.inviteUser--page .invite__select:focus,
.inviteUser--page .invite__textarea:focus {
	outline: none;
	background: var(--white);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.inviteUser--page .invite__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23656565' stroke-width='1.5' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 13px;
	padding-right: 2.5rem;
	cursor: pointer;
}

.inviteUser--page .invite__textarea {
	resize: vertical;
	line-height: 1.7;
}

.inviteUser--page .invite__card-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 1.25rem;
	border-top: 1px solid #f0f0f0;
	padding-top: 1.25rem;
}

.inviteUser--page .invite__discard {
	background: transparent;
	border: none;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
}

.inviteUser--page .invite__discard:hover {
	color: var(--primary);
}

.inviteUser--page .invite__send {
	font-size: 0.8rem;
	padding: 0.6rem 1.5rem;
}

/* Email Preview */
.inviteUser--page .invite__preview-label {
	display: block;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--grey);
	text-align: center;
	margin-bottom: 0.6rem;
}

.inviteUser--page .invite__email {
	background: var(--white);
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	overflow: hidden;
}

.inviteUser--page .invite__email-head {
	display: grid;
	place-items: center;
	background: var(--theme-color);
	padding: 1.25rem;
}

.inviteUser--page .invite__email-logo {
	width: 110px;
	max-width: 100%;
	filter: brightness(0) invert(1);
}

.inviteUser--page .invite__email-body {
	padding: 1.5rem;
}

.inviteUser--page .invite__email-greeting {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	margin-bottom: 0.75rem;
}

.inviteUser--page .invite__email-text {
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--grey);
	margin-bottom: 1rem;
}

.inviteUser--page .invite__email-text strong {
	font-weight: 700;
	color: var(--secondary);
}

.inviteUser--page .invite__email-note {
	display: none;
	background: #F9FAFB;
	border-left: 3px solid var(--primary);
	border-radius: 0.35rem;
	font-size: 0.72rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	color: var(--grey);
	padding: 0.65rem 0.85rem;
	margin-bottom: 1rem;
	overflow-wrap: anywhere;
}

.inviteUser--page .invite__email-btn {
	width: 100%;
	display: block;
	background: var(--primary);
	border: none;
	border-radius: 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--white);
	text-align: center;
	padding: 0.7rem 1rem;
	margin-bottom: 0.75rem;
}

.inviteUser--page .invite__email-expiry {
	display: block;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--grey);
	text-align: center;
}

.inviteUser--page .invite__email-foot {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	border-top: 1px solid #f0f0f0;
	font-size: 0.62rem;
	font-weight: 400;
	color: var(--grey);
	text-align: center;
	padding: 1rem 1.5rem;
}

/* Security Note */
.inviteUser--page .invite__security {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	background: var(--theme-color);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.inviteUser--page .invite__security-icon {
	display: grid;
	place-items: center;
	width: 32px;
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 0.45rem;
	font-size: 0.8rem;
	color: var(--white);
	flex-shrink: 0;
}

.inviteUser--page .invite__security-body {
	min-width: 0;
}

.inviteUser--page .invite__security-title {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 0.3rem;
}

.inviteUser--page .invite__security-text {
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 0;
}

.inviteUser--page .invite__tagline {
	background: #EDF4FA;
	border-radius: 0.75rem;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--primary);
	text-align: center;
	padding: 1.5rem 1.25rem;
}

/* Invite User Page End */
/*--------------------------------------------------------------
# Customers Page (extends adminUsers--page)
--------------------------------------------------------------*/
.adminUsers--page .adminUsers__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1.15rem 1.5rem;
	border-bottom: 1px solid #e5e7eb;
}

.adminUsers--page .adminUsers__status--pending {
	color: #0C4E7D;
}

.customers--page .customers__search {
	position: relative;
	flex: 1;
	min-width: 200px;
}

.customers--page .customers__search i {
	position: absolute;
	top: 50%;
	left: 0.85rem;
	transform: translateY(-50%);
	font-size: 0.8rem;
	color: var(--grey);
	pointer-events: none;
}

.customers--page .customers__search input {
	width: 100%;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	color: var(--secondary);
	padding: 0.55rem 0.85rem 0.55rem 2.25rem;
	outline: none;
	transition: all 200ms linear;
}

.customers--page .customers__search input::placeholder {
	color: var(--grey);
}

.customers--page .customers__search input:focus {
	background: var(--white);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.customers--page .customers__filter {
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--secondary);
	padding: 0.55rem 0.85rem;
	outline: none;
	cursor: pointer;
	transition: all 200ms linear;
}

.customers--page .customers__filter:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.12);
}

.customers--page .customers__code {
	font-family: monospace;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--grey);
	letter-spacing: 0.02em;
}

/*--------------------------------------------------------------
# Notifications Page (extends adminUsers--page)
--------------------------------------------------------------*/
.notifications--page .notifications__tabs {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.notifications--page .notifications__tab {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	padding: 0.4rem 0.9rem;
	transition: all 200ms linear;
}

.notifications--page .notifications__tab span {
	background: #e5e7eb;
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.05rem 0.4rem;
	margin-left: 0.25rem;
}

.notifications--page .notifications__tab:hover {
	color: var(--primary);
}

.notifications--page .notifications__tab.active {
	background: var(--primary);
	color: var(--white);
}

.notifications--page .notifications__tab.active span {
	background: rgba(255, 255, 255, 0.25);
	color: var(--white);
}

.notifications--page .notifications__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.notifications--page .notifications__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	border-bottom: 1px solid #f1f5f9;
	padding: 1.15rem 1.5rem;
	cursor: pointer;
	transition: background 200ms linear;
}

.notifications--page .notifications__item:last-child {
	border-bottom: none;
}

.notifications--page .notifications__item:hover {
	background: #f8fafc;
}

.notifications--page .notifications__item.is-unread {
	background: rgba(55, 130, 247, 0.04);
	box-shadow: inset 3px 0 0 var(--primary);
}

.notifications--page .notifications__icon {
	width: 36px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EDF4FA;
	border-radius: 0.5rem;
	font-size: 0.85rem;
	color: var(--primary);
	flex-shrink: 0;
}

.notifications--page .notifications__icon--danger {
	background: #FEE2E2;
	color: #DC2626;
}

.notifications--page .notifications__icon--warn {
	background: #FEF3C7;
	color: #B45309;
}

.notifications--page .notifications__icon--green {
	background: #DCFCE7;
	color: #15803D;
}

.notifications--page .notifications__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	flex: 1;
	min-width: 0;
}

.notifications--page .notifications__title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
}

.notifications--page .notifications__text {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--grey);
}

.notifications--page .notifications__time {
	font-size: 0.7rem;
	font-weight: 500;
	color: #9CA3AF;
	margin-top: 0.15rem;
}

.notifications--page .notifications__link {
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--primary);
	white-space: nowrap;
	padding: 0.35rem 0.75rem;
	flex-shrink: 0;
	transition: all 200ms linear;
}

.notifications--page .notifications__link:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.notifications--page .notifications__empty {
	display: none;
	font-size: 0.85rem;
	color: var(--grey);
	text-align: center;
	padding: 2.5rem 1.5rem;
}

/*--------------------------------------------------------------
# Reseller Detail Page (extends userDetail--page)
--------------------------------------------------------------*/
.userDetail--page .userDetail__photo--initials {
	width: 76px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-color);
	border-radius: 0.75rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--white);
}

.resellerDetail--page .userDetail__tag--role i {
	margin-right: 0.25rem;
}

/*--------------------------------------------------------------
# Port Request Detail Page (extends userDetail--page)
--------------------------------------------------------------*/
.userDetail--page .userDetail__status--pending {
	background: #D6E7F3;
	color: #0C4E7D;
}

.portDetail--page .portDetail__timeline {
	list-style: none;
	padding: 1.5rem 1.5rem 0.5rem;
	margin: 0;
}

.portDetail--page .portDetail__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 0 1.5rem 1.75rem;
}

.portDetail--page .portDetail__step:last-child {
	padding-bottom: 0.5rem;
}

/* The marker doubles as the connector: ::before is the dot, ::after the line down. */
.portDetail--page .portDetail__step::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: 0;
	width: 11px;
	height: 11px;
	background: var(--white);
	border: 2px solid #d1d5db;
	border-radius: 50%;
	z-index: 1;
}

.portDetail--page .portDetail__step::after {
	content: "";
	position: absolute;
	top: 1rem;
	left: 5px;
	width: 1px;
	height: calc(100% - 0.75rem);
	background: #e5e7eb;
}

.portDetail--page .portDetail__step:last-child::after {
	display: none;
}

.portDetail--page .portDetail__step.is-done::before {
	background: #15803D;
	border-color: #15803D;
}

.portDetail--page .portDetail__step.is-done::after {
	background: #15803D;
}

.portDetail--page .portDetail__step.is-active::before {
	background: var(--primary);
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(55, 130, 247, 0.18);
}

.portDetail--page .portDetail__step-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.portDetail--page .portDetail__step-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
}

.portDetail--page .portDetail__step-text {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--grey);
}

.portDetail--page .portDetail__step-time {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
	white-space: nowrap;
	flex-shrink: 0;
}

.portDetail--page .portDetail__step.is-active .portDetail__step-time {
	color: var(--primary);
	font-weight: 600;
}

.portDetail--page .userDetail__contact-value a {
	color: var(--primary);
	font-weight: 600;
}

.portDetail--page .userDetail__contact-value a:hover {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Links that became buttons
   These were <a href=""> with no destination; they are real actions now.
   Their existing rules only set typography, so the UA button chrome
   (background, border, padding) has to be cleared here.
--------------------------------------------------------------*/
.addNewLine--page .activate-line__draft,
.withdrawFunds--page .withdraw__add,
.scheduleReports--page .schedule__quota-link,
.addFunds--page .add-funds__terms {
	background: transparent;
	border: none;
	padding: 0;
	text-align: inherit;
}

.addFunds--page .add-funds__terms {
	font: inherit;
	font-weight: 600;
	color: var(--primary);
	text-decoration: underline;
}

/* customer-profile: these two were <a href="#"> and are now buttons that switch tabs */
.customer-profile__card .view-all-link,
.customer-profile__card .edit-link {
	background: transparent;
	border: none;
	padding: 0;
}

/*--------------------------------------------------------------
# SweetAlert detail lists
   Used by the "View Receipt" / "View" row actions and the terms dialog.
--------------------------------------------------------------*/
.swal-receipt,
.swal-terms {
	list-style: none;
	text-align: left;
	padding: 0;
	margin: 0;
}

.swal-receipt li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid #f1f5f9;
	font-size: 0.85rem;
	padding: 0.6rem 0;
}

.swal-receipt li:last-child {
	border-bottom: none;
}

.swal-receipt li span {
	color: var(--grey);
}

.swal-receipt li strong {
	color: var(--black);
	text-align: right;
}

.swal-terms li {
	position: relative;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--grey);
	padding-left: 1.15rem;
	margin-bottom: 0.5rem;
}

.swal-terms li::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary);
}

/*--------------------------------------------------------------
# Line Details Page (extends userDetail--page)
--------------------------------------------------------------*/
.lineDetails--page .lineDetails__owner-link {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Spec list */
.lineDetails--page .lineDetails__specs {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lineDetails--page .lineDetails__specs>li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid #f1f5f9;
	padding: 0.85rem 1.5rem;
}

.lineDetails--page .lineDetails__specs>li:last-child {
	border-bottom: none;
}

.lineDetails--page .lineDetails__spec-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--grey);
	flex-shrink: 0;
}

.lineDetails--page .lineDetails__spec-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	text-align: right;
	overflow-wrap: anywhere;
}

.lineDetails--page .lineDetails__spec-value--mono {
	font-family: monospace;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* Auto-renew switch */
.lineDetails--page .lineDetails__switch {
	display: block;
	width: 38px;
	height: 21px;
	position: relative;
}

.lineDetails--page .lineDetails__switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.lineDetails--page .lineDetails__switch-slider {
	position: absolute;
	inset: 0;
	background: #d1d5db;
	border-radius: 50px;
	cursor: pointer;
	transition: background 200ms linear;
}

.lineDetails--page .lineDetails__switch-slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	background: var(--white);
	border-radius: 50%;
	transition: transform 200ms linear;
}

.lineDetails--page .lineDetails__switch input:checked+.lineDetails__switch-slider {
	background: var(--primary);
}

.lineDetails--page .lineDetails__switch input:checked+.lineDetails__switch-slider::before {
	transform: translateX(17px);
}

.lineDetails--page .lineDetails__switch input:focus-visible+.lineDetails__switch-slider {
	box-shadow: 0 0 0 3px rgba(55, 130, 247, 0.25);
}

/* Usage bars */
.lineDetails--page .lineDetails__usage {
	list-style: none;
	padding: 1.25rem 1.5rem;
	margin: 0;
}

.lineDetails--page .lineDetails__usage>li+li {
	margin-top: 1.15rem;
}

.lineDetails--page .lineDetails__usage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.45rem;
}

.lineDetails--page .lineDetails__usage-name {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--secondary);
}

.lineDetails--page .lineDetails__usage-name i {
	font-size: 0.75rem;
	color: var(--grey);
}

.lineDetails--page .lineDetails__usage-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	white-space: nowrap;
}

.lineDetails--page .lineDetails__usage-value small {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--grey);
}

.lineDetails--page .lineDetails__bar {
	display: block;
	width: 100%;
	height: 6px;
	background: #f1f5f9;
	border-radius: 50px;
	overflow: hidden;
}

.lineDetails--page .lineDetails__bar-fill {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 50px;
}

.lineDetails--page .lineDetails__bar-fill--green {
	background: #22C55E;
}

.lineDetails--page .lineDetails__bar-fill--amber {
	background: #E89028;
}

/* Sidebar activity list */
.lineDetails--page .lineDetails__timeline {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

.lineDetails--page .lineDetails__timeline>li {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	border-left: 2px solid #e5e7eb;
	padding: 0 0 0.85rem 0.85rem;
}

.lineDetails--page .lineDetails__timeline>li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.lineDetails--page .lineDetails__event {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--black);
}

.lineDetails--page .lineDetails__event-meta {
	font-size: 0.75rem;
	color: var(--grey);
}