/* ==========================================================================
   My Crypto Locker - application skin
   Loaded AFTER vendor.min.css + app.min.css in theme/main.php and theme/auth.php.

   Re-skins the Color Admin template to the public landing palette (navy ground,
   electric-blue + gold accents, glass surfaces) so the member area and the
   sign-in screens match the home page.

   It also defines a set of classes the member/auth markup already uses but
   which had no stylesheet behind them any more (.pages, .welcome_heading,
   .user_card_body, .login_text_field_bg, .input__label, ...) - those were
   rendering completely unstyled before.

   Change --mcl-blue / --mcl-gold to re-skin everything.
   ========================================================================== */

:root,
[data-bs-theme=dark] {
	/* landing tokens ---------------------------------------------------- */
	--mcl-blue: #2ea8ff;
	--mcl-blue-deep: #1668d8;
	--mcl-gold: #f7b13c;
	--mcl-gold-deep: #d98816;
	--mcl-bg: #05080f;
	--mcl-panel: rgba(255, 255, 255, .038);
	--mcl-panel-2: rgba(255, 255, 255, .06);
	--mcl-stroke: rgba(255, 255, 255, .09);
	--mcl-stroke-2: rgba(255, 255, 255, .16);
	--mcl-ink: #e9eefc;
	--mcl-ink-dim: #97a3bd;
	--mcl-ink-faint: #66708a;
	--mcl-up: #23d18b;
	--mcl-down: #ff5f6d;
	--mcl-grad: linear-gradient(135deg, #2ea8ff, #1668d8);
	--mcl-grad-gold: linear-gradient(135deg, #ffd479, #e5941c);
	--mcl-f-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--mcl-f-body: "Inter", "Segoe UI", system-ui, sans-serif;
	--mcl-f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

	/* remap the template's own variables --------------------------------- */
	--bs-theme: var(--mcl-blue);
	--bs-theme-rgb: 46, 168, 255;
	--bs-theme-color: #04121f;
	--bs-theme-color-rgb: 4, 18, 31;

	--bs-body-bg: var(--mcl-bg);
	--bs-body-bg-rgb: 5, 8, 15;
	--bs-body-color: var(--mcl-ink-dim);
	--bs-body-color-rgb: 151, 163, 189;

	--bs-component-bg: #0c1322;
	--bs-component-bg-rgb: 12, 19, 34;
	--bs-component-color: var(--mcl-ink);

	--bs-border-color: var(--mcl-stroke);
	--bs-border-color-translucent: var(--mcl-stroke);

	--bs-heading-color: #fff;
	--bs-emphasis-color: #fff;
	--bs-link-color: var(--mcl-blue);
	--bs-link-hover-color: #7fd0ff;
	--bs-link-color-rgb: 46, 168, 255;

	--bs-secondary-bg: rgba(255, 255, 255, .06);
	--bs-tertiary-bg: rgba(255, 255, 255, .03);

	--bs-primary: var(--mcl-blue);
	--bs-primary-rgb: 46, 168, 255;
	--bs-success: var(--mcl-up);
	--bs-danger: var(--mcl-down);
	--bs-warning: var(--mcl-gold);

	--bs-border-radius: 12px;
	--bs-border-radius-sm: 9px;
	--bs-border-radius-lg: 16px;

	/* template chrome ---------------------------------------------------- */
	--bs-app-header-bg: rgba(5, 8, 15, .82);
	--bs-app-header-link-color: var(--mcl-ink-dim);
	--bs-app-header-link-hover-color: #fff;
	--bs-app-sidebar-bg: #070c17;
	--bs-app-sidebar-mobile-bg: #070c17;
	--bs-app-sidebar-menu-header-color: var(--mcl-ink-faint);
	--bs-app-sidebar-menu-link-color: var(--mcl-ink-dim);
	--bs-app-sidebar-menu-link-hover-color: #fff;
	--bs-app-sidebar-menu-link-active-color: #fff;
}

/* ============================== base ==================================== */

body {
	background: var(--mcl-bg) !important;
	background-image: none !important;
	color: var(--mcl-ink-dim);
	font-family: var(--mcl-f-body);
	-webkit-font-smoothing: antialiased;
}

/* the drifting aurora from the landing page, so the app shares its ground */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(620px circle at 12% -6%, rgba(22, 104, 216, .34), transparent 62%),
		radial-gradient(520px circle at 92% 8%, rgba(185, 118, 26, .18), transparent 64%),
		radial-gradient(760px circle at 60% 96%, rgba(18, 63, 138, .22), transparent 68%);
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 76%);
	mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 76%);
}
#app, .app, .wrapper { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
	font-family: var(--mcl-f-head);
	font-weight: 600;
	letter-spacing: -.02em;
	color: #fff;
}

a { color: var(--mcl-blue); }
a:hover { color: #7fd0ff; }

hr { border-color: var(--mcl-stroke); opacity: 1; }

/* ============================ app header ================================ */

.app-header {
	background: rgba(5, 8, 15, .82) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--mcl-stroke);
	box-shadow: none;
}
/* the logo art is near-square, so cap its HEIGHT - capping width alone made it
   overflow the header bar and spill over the sidebar */
.app-header .brand .brand-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	overflow: visible;
}
.app-header .brand .brand-logo img {
	max-height: 40px;
	width: auto;
	max-width: none;
	filter: drop-shadow(0 3px 12px rgba(46, 168, 255, .45));
}
.app-header .brand .brand-name {
	font-family: var(--mcl-f-head);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	letter-spacing: -.01em;
}
@media (max-width: 575.98px) {
	.app-header .brand .brand-name { display: none; }
}
.app-header .menu-toggler .bar { background: var(--mcl-ink-dim); }
.app-header .menu-toggler:hover .bar { background: var(--mcl-blue); }
.app-header .menu .menu-link { color: var(--mcl-ink-dim); border-radius: 10px; }
.app-header .menu .menu-link:hover { color: #fff; background: var(--mcl-panel-2); }

/* ============================ app sidebar =============================== */

.app-sidebar,
.app-sidebar-mobile-backdrop { background: #070c17 !important; }
.app-sidebar { border-right: 1px solid var(--mcl-stroke); }
.app-sidebar .menu-header {
	color: var(--mcl-ink-faint);
	font-family: var(--mcl-f-head);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 20px 20px 8px;
}
.app-sidebar .menu-item > .menu-link {
	color: var(--mcl-ink-dim);
	border-radius: 10px;
	margin: 1px 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	transition: background .18s, color .18s;
}
.app-sidebar .menu-item > .menu-link:hover {
	color: #fff;
	background: var(--mcl-panel-2);
}
.app-sidebar .menu-item.active > .menu-link {
	color: #fff;
	background: linear-gradient(135deg, rgba(46, 168, 255, .24), rgba(22, 104, 216, .12));
	box-shadow: inset 2px 0 0 var(--mcl-blue);
}
.app-sidebar .menu-item > .menu-link .menu-icon { color: var(--mcl-blue); font-size: 17px; }
.app-sidebar .menu-item.active > .menu-link .menu-icon { color: var(--mcl-blue); }
.app-sidebar .menu-submenu { background: rgba(0, 0, 0, .25); border-radius: 10px; margin: 2px 10px 6px; }
.app-sidebar .menu-submenu .menu-link { font-size: 13.5px; padding: 8px 12px 8px 40px; margin: 0; }
.app-sidebar .menu-divider { background: var(--mcl-stroke); margin: 14px 20px; }
.app-sidebar .menu-caret { color: var(--mcl-ink-faint); }

/* sidebar logout button */
.btn-outline-theme {
	border-color: var(--mcl-stroke-2);
	color: var(--mcl-ink);
	background: var(--mcl-panel);
	border-radius: 11px;
	font-weight: 600;
}
.btn-outline-theme:hover,
.btn-outline-theme:focus {
	background: var(--mcl-panel-2);
	border-color: var(--mcl-blue);
	color: #fff;
}

/* ============================== content ================================= */

.app-content { padding: 26px 26px 40px; }

.page-header {
	font-family: var(--mcl-f-head);
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.02em;
	margin-bottom: 22px;
	width: 100%;
}
.page-header small {
	display: inline-block;
	margin-left: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--mcl-panel-2);
	border: 1px solid var(--mcl-stroke);
	font-family: var(--mcl-f-mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--mcl-blue);
	vertical-align: middle;
	letter-spacing: 0;
}

/* ================================ cards ================================= */

.card {
	background: var(--mcl-panel) !important;
	border: 1px solid var(--mcl-stroke) !important;
	border-radius: 14px !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
	color: var(--mcl-ink-dim);
	transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--mcl-stroke-2) !important; }
.card-body { color: var(--mcl-ink-dim); }
.card-header {
	background: rgba(255, 255, 255, .03);
	border-bottom: 1px solid var(--mcl-stroke);
	color: #fff;
	font-family: var(--mcl-f-head);
	font-weight: 600;
	border-radius: 14px 14px 0 0;
}
.card-footer { background: rgba(255, 255, 255, .02); border-top: 1px solid var(--mcl-stroke); }

/* the template's decorative corner brackets - retint to the accent */
.card-arrow .card-arrow-top-left,
.card-arrow .card-arrow-top-right,
.card-arrow .card-arrow-bottom-left,
.card-arrow .card-arrow-bottom-right {
	border-color: var(--mcl-blue) !important;
	opacity: .55;
}

/* dashboard stat cards: big number + accent */
.card-body > .d-flex.fw-bold.small {
	font-family: var(--mcl-f-head);
	font-size: 11px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcl-ink-faint);
}
.card-body h3 {
	font-family: var(--mcl-f-head);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.03em;
	background: linear-gradient(100deg, #7fd0ff, #2ea8ff 55%, #ffc65c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.list-group,
.list-group-item {
	background: transparent;
	border-color: var(--mcl-stroke);
	color: var(--mcl-ink-dim);
}

/* ================================ tables ================================ */

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--mcl-ink-dim);
	--bs-table-border-color: var(--mcl-stroke);
	--bs-table-striped-bg: rgba(255, 255, 255, .022);
	--bs-table-striped-color: var(--mcl-ink-dim);
	--bs-table-hover-bg: rgba(46, 168, 255, .06);
	--bs-table-hover-color: #fff;
	color: var(--mcl-ink-dim);
	margin-bottom: 0;
	border-color: var(--mcl-stroke);
}
.table > :not(caption) > * > * {
	padding: 12px 14px;
	border-bottom-color: var(--mcl-stroke);
	background-color: transparent;
	box-shadow: none;
}
/* these views put the header row inside <tbody> as <th> cells */
.table th {
	font-family: var(--mcl-f-head);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcl-ink-faint);
	background: rgba(255, 255, 255, .03) !important;
	white-space: nowrap;
	border-bottom: 1px solid var(--mcl-stroke);
}
.table td { font-size: 14px; vertical-align: middle; }
.table tbody tr:hover td { background: rgba(46, 168, 255, .05); color: #fff; }
.table-responsive { border-radius: 12px; }

/* ================================ forms ================================= */

.form-label,
.input__label,
.label_user_title,
label {
	color: var(--mcl-ink-dim);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
}

.form-control,
.form-select,
.input-style,
.login_text_field_bg,
.user_input_text {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--mcl-stroke) !important;
	border-radius: 11px !important;
	color: var(--mcl-ink) !important;
	padding: 11px 14px;
	font-size: 14.5px;
	transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-control::placeholder { color: var(--mcl-ink-faint); }
.form-control:focus,
.form-select:focus {
	background: rgba(255, 255, 255, .06) !important;
	border-color: var(--mcl-blue) !important;
	box-shadow: 0 0 0 3px rgba(46, 168, 255, .16) !important;
	color: #fff !important;
}
.form-control:disabled,
.form-control[readonly] { background: rgba(255, 255, 255, .02) !important; color: var(--mcl-ink-faint) !important; }

/* native dropdown options need an opaque background on dark chrome */
select.form-control option,
.form-select option { background: #0c1322; color: var(--mcl-ink); }

.form-group { margin-bottom: 16px; }
.form-line { border: 0; }

.input-group-text {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--mcl-stroke);
	color: var(--mcl-ink-dim);
	border-radius: 11px;
}
/* the blanket 11px radius above would otherwise break grouped inputs apart */
.input-group > .input-group-text:first-child { border-radius: 11px 0 0 11px; border-right: 0; }
.input-group > .form-control:not(:first-child) { border-radius: 0 11px 11px 0 !important; border-left: 0 !important; }
.input-group > .form-control:not(:last-child) { border-radius: 11px 0 0 11px !important; }
.input-group:focus-within .input-group-text { border-color: var(--mcl-blue); }

.form-check-input {
	background-color: rgba(255, 255, 255, .06);
	border-color: var(--mcl-stroke-2);
}
.form-check-input:checked { background-color: var(--mcl-blue); border-color: var(--mcl-blue); }
.form-check-label, .checkmark { color: var(--mcl-ink-dim); font-size: 14px; }

/* =============================== buttons ================================ */

.btn {
	border-radius: 11px;
	font-weight: 600;
	font-size: 14.5px;
	padding: 10px 20px;
	transition: transform .16s, box-shadow .16s, filter .16s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary,
.btn-theme,
.btn-style,
.user_btn_button,
input[type=submit].btn {
	background: var(--mcl-grad) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 8px 24px rgba(30, 128, 232, .34);
}
.btn-primary:hover,
.btn-theme:hover,
.btn-style:hover { filter: brightness(1.08); color: #fff !important; }

.btn-warning, .btn-gold {
	background: var(--mcl-grad-gold) !important;
	border: 0 !important;
	color: #241603 !important;
	box-shadow: 0 8px 24px rgba(226, 152, 32, .3);
}
.btn-success { background: linear-gradient(135deg, #2ee0a0, #12986a) !important; border: 0 !important; color: #04231a !important; }
.btn-danger  { background: linear-gradient(135deg, #ff7d8d, #d8384f) !important; border: 0 !important; color: #fff !important; }
.btn-secondary, .btn-default {
	background: var(--mcl-panel) !important;
	border: 1px solid var(--mcl-stroke-2) !important;
	color: var(--mcl-ink) !important;
}
.btn-secondary:hover, .btn-default:hover { background: var(--mcl-panel-2) !important; border-color: var(--mcl-blue) !important; }

.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 14px 28px; font-size: 15.5px; border-radius: 13px; }

/* ======================== badges / alerts / misc ======================== */

.badge, .badeg_btn2 {
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}
.badeg_btn2 {
	display: inline-block;
	background: rgba(46, 168, 255, .14);
	border: 1px solid rgba(46, 168, 255, .32);
	color: var(--mcl-blue);
}
.bg-success, .badge.bg-success { background: rgba(35, 209, 139, .16) !important; color: var(--mcl-up) !important; }
.bg-danger,  .badge.bg-danger  { background: rgba(255, 95, 109, .16) !important; color: var(--mcl-down) !important; }
.bg-warning, .badge.bg-warning { background: rgba(247, 177, 60, .16) !important; color: var(--mcl-gold) !important; }
.text-theme { color: var(--mcl-blue) !important; }
.text-success { color: var(--mcl-up) !important; }
.text-danger  { color: var(--mcl-down) !important; }
.text-warning { color: var(--mcl-gold) !important; }
.text-inverse { color: var(--mcl-ink) !important; }

.alert {
	border-radius: 12px;
	border: 1px solid var(--mcl-stroke);
	font-size: 14.5px;
	padding: 13px 18px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.alert-success { background: rgba(35, 209, 139, .12); border-color: rgba(35, 209, 139, .3); color: #8df0c4; }
.alert-danger  { background: rgba(255, 95, 109, .12); border-color: rgba(255, 95, 109, .3); color: #ffb3ba; }
.alert-warning { background: rgba(247, 177, 60, .12); border-color: rgba(247, 177, 60, .3); color: #ffd79a; }
.alert-info    { background: rgba(46, 168, 255, .12); border-color: rgba(46, 168, 255, .3); color: #a9dcff; }

.breadcrumb { background: transparent; padding: 0; margin-bottom: 14px; font-size: 13.5px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--mcl-ink-faint); }
.breadcrumb-item.active { color: var(--mcl-ink-dim); }

.nav-tabs { border-bottom: 1px solid var(--mcl-stroke); gap: 4px; }
.nav-tabs .nav-link {
	background: transparent;
	border: 0;
	border-radius: 10px 10px 0 0;
	color: var(--mcl-ink-dim);
	font-weight: 500;
	padding: 10px 16px;
}
.nav-tabs .nav-link:hover { background: var(--mcl-panel-2); color: #fff; }
.nav-tabs .nav-link.active {
	background: var(--mcl-panel-2);
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--mcl-blue);
}

.page-link {
	background: var(--mcl-panel);
	border-color: var(--mcl-stroke);
	color: var(--mcl-ink-dim);
}
.page-item.active .page-link { background: var(--mcl-blue); border-color: var(--mcl-blue); color: #04121f; }

.modal-content {
	background: #0c1322;
	border: 1px solid var(--mcl-stroke);
	border-radius: 16px;
}
.modal-header, .modal-footer { border-color: var(--mcl-stroke); }

.dropdown-menu {
	background: #0c1322;
	border: 1px solid var(--mcl-stroke);
	border-radius: 12px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}
.dropdown-item { color: var(--mcl-ink-dim); }
.dropdown-item:hover { background: var(--mcl-panel-2); color: #fff; }

.btn-scroll-top {
	background: var(--mcl-grad);
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(30, 128, 232, .4);
}

/* ================= classes used by the views with no CSS ================ */
/* These exist throughout member/ and auth/ markup but their old stylesheet
   is no longer loaded, so they rendered unstyled. */

.pages { position: relative; }

.pages > .header,
.user_content > .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--mcl-stroke);
}

.welcome_heading {
	font-family: var(--mcl-f-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0;
}
.welcome_heading b {
	background: linear-gradient(100deg, #7fd0ff, #2ea8ff 50%, #ffc65c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.user_main_card,
.darkcard,
.user_card_body,
.tab_input_detail {
	background: var(--mcl-panel);
	border: 1px solid var(--mcl-stroke);
	border-radius: 14px;
	padding: 22px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
/* avoid doubling up when these wrap a .card that already has the treatment */
.card .user_card_body,
.card .darkcard,
.card .tab_input_detail { background: transparent; border: 0; padding: 0; backdrop-filter: none; }

.user_invite input {
	width: 100%;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--mcl-stroke);
	border-radius: 10px;
	color: var(--mcl-blue);
	font-family: var(--mcl-f-mono);
	font-size: 13px;
	padding: 9px 12px;
}

.tree-view { color: var(--mcl-ink-dim); }
.tree-title {
	font-family: var(--mcl-f-head);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

/* ============================ auth screens ============================== */

.welcome_inner_content { text-align: center; margin-bottom: 26px; }
.welcome_inner_content img {
	max-width: 132px;
	margin: 0 auto 16px;
	display: block;
	filter: drop-shadow(0 6px 22px rgba(46, 168, 255, .45));
}
.welcome_inner_content h4 {
	font-family: var(--mcl-f-head);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 6px;
}
.welcome_inner_content p { color: var(--mcl-ink-dim); font-size: 14.5px; margin: 0; }

.persona_detail_data { width: 100%; }
.persona_detail_data table { width: 100%; font-size: 14.5px; }
.persona_detail_data table td { padding: 10px 12px; border-bottom: 1px solid var(--mcl-stroke); }
.persona_detail_data table td:first-child { color: var(--mcl-ink-faint); }
.persona_detail_data table td:last-child { color: #fff; font-family: var(--mcl-f-mono); text-align: right; }

.signup { color: var(--mcl-ink-dim); font-size: 13.5px; margin: 0; }
.signuplink { color: var(--mcl-blue); font-weight: 600; }

/* the auth submit buttons are <input type=submit>, so give them full width */
.btn-style { width: 100%; margin-top: 8px !important; }
.persona_detail_data .d-flex { flex-direction: column; align-items: stretch !important; gap: 6px; }
.persona_detail_data .d-flex .signup { text-align: center; margin-top: 8px !important; }

/* ============================= responsive =============================== */

@media (max-width: 767.98px) {
	.app-content { padding: 18px 14px 30px; }
	.page-header { font-size: 21px; }
	.welcome_heading { font-size: 19px; }
	.card-body h3 { font-size: 23px; }
	.pages > .header { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover, .card:hover { transform: none; }
}