/* Copyright (c) gviabcua Vitalii Tkach https://gviabcua.in.ua/ Made with love */

/* бренд-колір приходить з налаштувань у --cab-brand */
:root {
	--cab-brand: #2563eb;
	--cab-brand-hover: color-mix(in srgb, var(--cab-brand) 86%, #000);
	--cab-brand-active: color-mix(in srgb, var(--cab-brand) 76%, #000);
	--cab-brand-soft: color-mix(in srgb, var(--cab-brand) 12%, transparent);
	--cab-brand-ring: color-mix(in srgb, var(--cab-brand) 28%, transparent);
	--cab-sidebar-w: 248px;
	--cab-radius: .5rem;
	--bs-primary: var(--cab-brand);
	--bs-link-color: var(--cab-brand);
	--bs-link-hover-color: var(--cab-brand-hover);
}
[data-bs-theme="dark"] {
	--cab-brand-soft: color-mix(in srgb, var(--cab-brand) 22%, transparent);
	--bs-link-color: color-mix(in srgb, var(--cab-brand) 70%, #fff);
	--bs-link-hover-color: color-mix(in srgb, var(--cab-brand) 55%, #fff);
}

body { background: var(--bs-tertiary-bg); -webkit-font-smoothing: antialiased; font-size: .9375rem; }
a { text-underline-offset: .2em; }

/* кнопки і поля в кольорі бренду */
.btn-primary {
	--bs-btn-bg: var(--cab-brand); --bs-btn-border-color: var(--cab-brand);
	--bs-btn-hover-bg: var(--cab-brand-hover); --bs-btn-hover-border-color: var(--cab-brand-hover);
	--bs-btn-active-bg: var(--cab-brand-active); --bs-btn-active-border-color: var(--cab-brand-active);
	--bs-btn-disabled-bg: var(--cab-brand); --bs-btn-disabled-border-color: var(--cab-brand);
	--bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
	--bs-btn-color: var(--cab-brand); --bs-btn-border-color: var(--cab-brand);
	--bs-btn-hover-bg: var(--cab-brand); --bs-btn-hover-border-color: var(--cab-brand);
	--bs-btn-active-bg: var(--cab-brand-active); --bs-btn-active-border-color: var(--cab-brand-active);
	--bs-btn-disabled-color: var(--cab-brand); --bs-btn-disabled-border-color: var(--cab-brand);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: color-mix(in srgb, var(--cab-brand) 70%, #fff); }
.form-control:focus, .form-select:focus { border-color: var(--cab-brand); box-shadow: 0 0 0 .25rem var(--cab-brand-ring); }
.form-check-input:checked { background-color: var(--cab-brand); border-color: var(--cab-brand); }
.form-check-input:focus { border-color: var(--cab-brand); box-shadow: 0 0 0 .25rem var(--cab-brand-ring); }
.text-brand { color: var(--cab-brand) !important; }
[data-bs-theme="dark"] .text-brand { color: color-mix(in srgb, var(--cab-brand) 70%, #fff) !important; }
.bg-brand-soft { background: var(--cab-brand-soft) !important; }
.page-link { color: var(--bs-link-color); }
.active > .page-link, .page-link.active { background-color: var(--cab-brand); border-color: var(--cab-brand); }

/* каркас: сайдбар, верхня панель, контент */
.cab-sidebar {
	position: fixed; inset: 0 auto 0 0; width: var(--cab-sidebar-w); z-index: 1020;
	display: flex; flex-direction: column; gap: 1rem; padding: 1rem .75rem;
	background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color-translucent);
	overflow-y: auto;
}
.cab-main { margin-left: var(--cab-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.cab-topbar {
	position: sticky; top: 0; z-index: 1010; display: flex; align-items: center; gap: .75rem;
	min-height: 56px; padding: .5rem 1.5rem;
	background: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
}
.cab-content { flex: 1 0 auto; width: 100%; max-width: 1240px; padding: 1.25rem 1.5rem; }
.cab-footer { padding: 1rem 1.5rem 1.5rem; color: var(--bs-secondary-color); font-size: .8125rem; }

.cab-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--bs-body-color); min-width: 0; }
.cab-brand-mark {
	width: 36px; height: 36px; border-radius: var(--cab-radius); flex: 0 0 auto;
	display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--cab-brand);
}
.cab-brand-name { font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-brand-tag { font-size: .75rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-logo { max-height: 40px; max-width: 180px; object-fit: contain; }
.cab-logo-dark { display: none; }
[data-bs-theme="dark"] .cab-logo-light { display: none; }
[data-bs-theme="dark"] .cab-logo-dark { display: inline-block; }

.cab-nav { display: flex; flex-direction: column; gap: .25rem; }
.cab-nav .nav-link {
	display: flex; align-items: center; gap: .65rem; padding: .45rem .7rem; border-radius: var(--cab-radius);
	color: var(--bs-secondary-color); font-weight: 500; border-left: 3px solid transparent;
}
.cab-nav .nav-link i { font-size: 1rem; }
.cab-nav .nav-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.cab-nav .nav-link.active { background: var(--cab-brand-soft); color: var(--cab-brand); border-left-color: var(--cab-brand); }
[data-bs-theme="dark"] .cab-nav .nav-link.active { color: color-mix(in srgb, var(--cab-brand) 70%, #fff); }

.cab-bottomnav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: none;
	background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color-translucent);
	padding-bottom: env(safe-area-inset-bottom);
}
.cab-bottomnav a {
	flex: 1 1 0; min-width: 0; padding: .45rem .15rem .4rem; text-align: center; text-decoration: none;
	font-size: .7rem; line-height: 1.2; color: var(--bs-secondary-color);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cab-bottomnav a i { display: block; font-size: 1.3rem; line-height: 1.2; }
.cab-bottomnav a.active { color: var(--cab-brand); }
[data-bs-theme="dark"] .cab-bottomnav a.active { color: color-mix(in srgb, var(--cab-brand) 70%, #fff); }

@media (max-width: 991.98px) {
	.cab-sidebar { display: none; }
	.cab-main { margin-left: 0; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
	.cab-topbar { padding: .5rem 1rem; }
	.cab-content { padding: 1rem; }
	.cab-bottomnav { display: flex; }
}

/* картки: тонка рамка, без тіней і градієнтів */
.cab-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--cab-radius); }
.cab-card-body { padding: 1rem; }
.cab-card-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
	padding: .65rem 1rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
	border-radius: var(--cab-radius) var(--cab-radius) 0 0;
}
.cab-card-title { font-size: .9375rem; font-weight: 600; margin: 0; }
.cab-card-hint { font-size: .8125rem; color: var(--bs-secondary-color); margin: .1rem 0 0; }
.cab-label { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); }
.cab-icon {
	width: 32px; height: 32px; border-radius: var(--cab-radius); flex: 0 0 auto; display: grid; place-items: center;
	font-size: 1rem; background: var(--cab-brand-soft); color: var(--cab-brand);
}
[data-bs-theme="dark"] .cab-icon { color: color-mix(in srgb, var(--cab-brand) 70%, #fff); }
.cab-card-head .cab-icon { width: 28px; height: 28px; font-size: .9rem; background: transparent; }

.cab-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cab-page-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.cab-page-sub { color: var(--bs-secondary-color); margin: .15rem 0 0; font-size: .875rem; }

/* баланс: акцент бренду смугою зліва */
.cab-balance { border-left: 4px solid var(--cab-brand); }
.cab-amount { font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cab-amount small { font-size: .55em; font-weight: 600; color: var(--bs-secondary-color); }
.cab-balance-meta { color: var(--bs-secondary-color); font-size: .875rem; }

/* тарифи */
.cab-speed { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.cab-speed small { font-size: .5em; font-weight: 600; color: var(--bs-secondary-color); }
.cab-tariff { height: 100%; display: flex; flex-direction: column; transition: border-color .15s ease; }
.cab-tariff:hover { border-color: var(--cab-brand-ring); }
.cab-tariff.is-current { border-color: var(--cab-brand); box-shadow: inset 0 0 0 1px var(--cab-brand); }
.cab-tariff-stripe { height: 3px; border-radius: var(--cab-radius) var(--cab-radius) 0 0; background: var(--cab-brand); }
.cab-price { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cab-price small { font-size: .7em; font-weight: 500; color: var(--bs-secondary-color); }

/* перелік операцій */
.cab-list { list-style: none; margin: 0; padding: 0; }
.cab-list > li { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.cab-list > li:first-child { border-top: 0; }
.cab-op-icon { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.cab-money { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cab-kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .35rem 1rem; margin: 0; font-size: .875rem; }
.cab-kv dt { font-weight: 500; color: var(--bs-secondary-color); }
.cab-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .cab-kv { grid-template-columns: 1fr; gap: .1rem; } .cab-kv dd { margin-bottom: .6rem; } }

.cab-when-dark { display: none; }
[data-bs-theme="dark"] .cab-when-dark { display: inline-block; }
[data-bs-theme="dark"] .cab-when-light { display: none; }

.cab-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.cab-empty { text-align: center; padding: 1.75rem 1rem; color: var(--bs-secondary-color); font-size: .875rem; }
.cab-empty > i { font-size: 1.5rem; display: block; margin-bottom: .35rem; opacity: .6; }
.cab-md > :last-child { margin-bottom: 0; }

/* сторінка входу */
.cab-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bs-body-bg); }
.cab-auth-aside {
	display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 3rem;
	color: #fff; position: relative; overflow: hidden;
	background: color-mix(in srgb, var(--cab-brand) 82%, #0b1020);
}
.cab-auth-aside .cab-brand, .cab-auth-aside .cab-brand-tag { color: #fff; }
.cab-auth-aside .cab-brand-mark { background: rgba(255, 255, 255, .18); }
.cab-auth-hero { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.2; max-width: 28rem; }
.cab-auth-feature { display: flex; gap: .75rem; align-items: center; color: rgba(255, 255, 255, .9); }
.cab-auth-feature i { width: 32px; height: 32px; border-radius: var(--cab-radius); display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.cab-auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.cab-auth-box { width: 100%; max-width: 400px; }
@media (max-width: 991.98px) {
	.cab-auth { grid-template-columns: 1fr; }
	.cab-auth-aside { padding: 1.5rem 1.25rem; gap: 1rem; }
	.cab-auth-aside .cab-auth-hide { display: none !important; }
	.cab-auth-hero { font-size: 1.35rem; }
	.cab-auth-form { align-items: flex-start; padding-top: 1.75rem; }
}

/* стан завантаження Snowboard і помилки полів */
.btn.wn-loading { pointer-events: none; opacity: .8; }
.btn.wn-loading::after {
	content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .5rem; vertical-align: -.15em;
	border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: spinner-border .75s linear infinite;
}
[data-validate-for] { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--bs-form-invalid-color); }
.flash-message {
	position: fixed; top: 1rem; right: 1rem; left: auto; z-index: 1090; max-width: min(420px, calc(100vw - 2rem));
	padding: .7rem 1rem; border-radius: var(--cab-radius); font-size: .875rem; box-shadow: 0 4px 16px rgba(15, 23, 42, .14);
	background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color);
	border-left: 4px solid var(--bs-info);
}
.flash-message.error { border-left-color: var(--bs-danger); }
.flash-message.success { border-left-color: var(--bs-success); }
.flash-message.warning { border-left-color: var(--bs-warning); }
.flash-message .flash-timer { display: none; }
@media (max-width: 575.98px) { .flash-message { left: 1rem; right: 1rem; max-width: none; } }