/* ==============================================================
   Cryptorch V2 — dashboard restyle (Inqud layout, Cryptorch brand)
   Loaded ONLY on v2.cryptorch.com. Overrides main.css / custom.css.
   Brand: orange hsl(var(--base)) = #F66921  +  navy.
   Rule: decoration is ALWAYS brand (orange/navy).
         Semantic colour is used ONLY for real status meaning.
   ============================================================== */

:root {
    --v2-navy-900: #0B1533;
    --v2-navy-800: #101E45;
    --v2-navy-700: #16274F;
    --v2-ink:      #0F1B3D;
    --v2-body-bg:  #F4F6FB;
    --v2-card:     #FFFFFF;
    --v2-border:   #E7EAF3;
    --v2-line:     #F1F3F9;
    --v2-muted:    #6B7A99;
    --v2-shadow:   0 1px 2px rgba(15,27,61,.04), 0 8px 24px rgba(15,27,61,.06);
    --v2-shadow-h: 0 2px 6px rgba(15,27,61,.07), 0 16px 40px rgba(15,27,61,.10);
    --v2-radius:   16px;
    /* muted, on-brand-compatible status tones */
    --v2-ok:   #12805C;
    --v2-warn: #B54708;
    --v2-bad:  #B42318;
}

/* ---------------- shell ---------------- */
.dashboard,
.dashboard-content,
.dashboard-body { background: var(--v2-body-bg); }
.dashboard-content { background: transparent; }
.dashboard-body { padding: 28px 30px 48px; color: #3B4A6B; }

/* ---------------- sidebar ---------------- */
.dashboard-sidebar {
    background: linear-gradient(180deg, var(--v2-navy-900) 0%, var(--v2-navy-800) 55%, var(--v2-navy-700) 100%);
    border-right: 0;
    box-shadow: 0 0 40px rgba(11,21,51,.18);
}
.dashboard-sidebar__header {
    padding: 22px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: transparent;
}
.dashboard-sidebar-logo img { max-height: 38px; }
.dashboard-sidebar__body { padding-top: 14px; }
.dashboard-sidebar__body__title {
    color: rgba(255,255,255,.38);
    font-size: 11px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 16px 22px 8px; margin: 0;
}
.dashboard-sidebar-menu { padding: 0 12px; }
.dashboard-sidebar-menu__item { margin-bottom: 2px; }
.dashboard-sidebar-menu__link {
    display: flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,.74);
    font-size: 14.5px; font-weight: 500;
    padding: 11px 14px; border-radius: 11px; border: 0;
    transition: background .18s ease, color .18s ease;
}
.dashboard-sidebar-menu__link:hover { background: rgba(255,255,255,.085); color: #fff; }
/* every sidebar icon is brand-neutral white, never multicolour */
.dashboard-sidebar-menu__link svg,
.dashboard-sidebar-menu__link svg path { fill: currentColor !important; stroke: currentColor; opacity: .9; }
.dashboard-sidebar-menu__link.active,
.dashboard-sidebar-menu__link.side-menu--open {
    background: linear-gradient(95deg, hsl(var(--base)) 0%, hsl(var(--base)/.82) 100%);
    color: #fff;
    box-shadow: 0 6px 18px hsl(var(--base)/.32);
}
.dashboard-sidebar-menu__link.active svg,
.dashboard-sidebar-menu__link.active svg path { fill: #fff !important; opacity: 1; }
.dashboard-sidebar__footer { border-top: 1px solid rgba(255,255,255,.07); padding: 14px 16px; }
.dashboard-sidebar__footer-inner,
.dropdown-item__user { color: rgba(255,255,255,.85); }
.dashboard-sidebar__footer .avatar,
.dashboard-sidebar__footer img { border-radius: 50%; border: 2px solid hsl(var(--base)/.55); }
.logout__btn { border-radius: 11px; color: rgba(255,255,255,.8); }
.logout__btn:hover { background: rgba(255,255,255,.09); color: #fff; }

/* ---------------- top bar ---------------- */
.dashboard-header, .auth-header, .navbar--dashboard {
    background: #fff;
    border-bottom: 1px solid var(--v2-border);
    box-shadow: 0 1px 2px rgba(15,27,61,.03);
}
.auth-header .title, .dashboard-header .title { color: var(--v2-ink); font-weight: 700; }
.auth-header .sub-title, .dashboard-header .sub-title { color: var(--v2-muted); }
/* header round action buttons -> brand */
.auth-header .icon-btn, .auth-header .notification-btn,
.dashboard-header .icon-btn {
    background: hsl(var(--base)/.10); color: hsl(var(--base));
    border: 0; border-radius: 50%;
}
.auth-header .icon-btn:hover { background: hsl(var(--base)); color: #fff; }

/* ---------------- cards ---------------- */
.dashboard__card, .custom--card, .card {
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.dashboard__card:hover { box-shadow: var(--v2-shadow-h); transform: translateY(-2px); }

/* kill legacy decorative blobs */
.dashboard__card__glow1,
.dashboard__card__glow2,
.dashboard__card__top-bg { display: none !important; }

.dashboard__card { position: relative; padding: 22px 22px 20px; overflow: hidden; }

/* accent rail — ALWAYS brand orange, regardless of legacy variant class */
.dashboard__card::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 3px;
    background: hsl(var(--base));
}
.dashboard__card.card--base::before,
.dashboard__card.card--success::before,
.dashboard__card.card--danger::before,
.dashboard__card.card--info::before,
.dashboard__card.card--purple::before { background: hsl(var(--base)); }

/* icon chip — brand tint, brand glyph (overrides legacy per-variant colours) */
.dashboard__card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px;
    background: hsl(var(--base)/.10) !important;
    color: hsl(var(--base)) !important;
    margin-bottom: 16px;
}
.dashboard__card__icon svg { width: 22px; height: 22px; }
/* most glyphs use CurrentColor; force the few hardcoded ones too */
.dashboard__card__icon svg path,
.dashboard__card__icon svg circle,
.dashboard__card__icon svg rect { fill: hsl(var(--base)) !important; }
.dashboard__card__icon svg [fill="none"] { fill: none !important; }

.dashboard__card__subtitle {
    display: block; color: var(--v2-muted);
    font-size: 13px; font-weight: 500; margin-bottom: 6px;
}
.dashboard__card__title {
    color: var(--v2-ink); font-size: 30px; font-weight: 700;
    line-height: 1.15; margin: 0; letter-spacing: -.02em;
}
.dashboard__card__button {
    position: absolute; top: 18px; right: 18px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; border-radius: 50%;
    background: #F3F5FA; color: var(--v2-muted);
    border: 0; box-shadow: none;
}
.dashboard__card__button:hover { background: hsl(var(--base)); color: #fff; }

/* ---------------- headings / panels ---------------- */
.dashboard-body h1, .dashboard-body h2, .dashboard-body h3,
.dashboard-body h4, .dashboard-body h5, .dashboard-body h6 {
    color: var(--v2-ink); font-weight: 600;
}
.card-header, .custom--card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--v2-border);
    padding: 18px 22px; font-weight: 600; color: var(--v2-ink);
}
.card-header h5, .card-header h6 { margin: 0; font-size: 16px; }
.card-header p { color: var(--v2-muted); font-size: 13px; margin: 4px 0 0; }
.card-body { padding: 22px; }
.text--muted, .text-muted { color: var(--v2-muted) !important; }
/* generic brand text/links */
.text--base, a.text--base { color: hsl(var(--base)) !important; }

/* ---------------- tables ---------------- */
.table thead th, .table--responsive--md thead th {
    background: #FAFBFE; color: var(--v2-muted);
    font-size: 12px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    border-bottom: 1px solid var(--v2-border);
}
.table tbody td { border-bottom: 1px solid var(--v2-line); color: #3B4A6B; }
.table tbody tr:hover td { background: #FAFBFE; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---------------- buttons ---------------- */
.btn--base {
    background: linear-gradient(95deg, hsl(var(--base)) 0%, hsl(var(--base)/.88) 100%);
    border: 0; border-radius: 11px; font-weight: 600;
    box-shadow: 0 6px 16px hsl(var(--base)/.28);
}
.btn--base:hover, .btn--base:focus { filter: brightness(1.05); box-shadow: 0 8px 22px hsl(var(--base)/.36); }
.btn-outline--base {
    border-radius: 11px; font-weight: 600;
    border-color: hsl(var(--base)/.5); color: hsl(var(--base));
}
.btn-outline--base:hover { background: hsl(var(--base)); border-color: hsl(var(--base)); color: #fff; }
/* neutralise legacy multicolour buttons into brand/neutral */
.btn--info, .btn--primary, .btn--purple {
    background: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; color:#fff !important;
    border-radius: 11px;
}
.btn--dark, .btn--secondary { background: var(--v2-navy-800) !important; border-color: var(--v2-navy-800) !important; border-radius: 11px; }

/* ---------------- badges: semantic only, soft ---------------- */
.badge, .badge--success, .badge--warning, .badge--danger, .badge--base, .badge--info {
    border-radius: 999px; font-weight: 600; padding: 5px 12px; font-size: 12px; border: 0;
}
.badge--success { background: rgba(18,128,92,.10) !important;  color: var(--v2-ok) !important; }
.badge--warning { background: rgba(181,71,8,.10) !important;   color: var(--v2-warn) !important; }
.badge--danger  { background: rgba(180,35,24,.10) !important;  color: var(--v2-bad) !important; }
.badge--base, .badge--info, .badge--primary {
    background: hsl(var(--base)/.12) !important; color: hsl(var(--base)) !important;
}

/* ---------------- forms ---------------- */
.form--control, .form-control, .form-select, .input-group-text {
    border: 1px solid var(--v2-border); border-radius: 11px;
    background: #fff; color: var(--v2-ink);
}
.form--control:focus, .form-control:focus, .form-select:focus {
    border-color: hsl(var(--base)/.55);
    box-shadow: 0 0 0 4px hsl(var(--base)/.12);
}
.form-label, label { color: var(--v2-ink); font-weight: 500; }
.form-check-input:checked { background-color: hsl(var(--base)); border-color: hsl(var(--base)); }

/* ---------------- alerts ---------------- */
.alert { border-radius: 13px; border: 1px solid var(--v2-border); }
.alert--warning { background: rgba(181,71,8,.07); border-color: rgba(181,71,8,.18); color: var(--v2-warn); }
.alert--danger  { background: rgba(180,35,24,.07); border-color: rgba(180,35,24,.18); color: var(--v2-bad); }
.alert--success { background: rgba(18,128,92,.07); border-color: rgba(18,128,92,.18); color: var(--v2-ok); }
.alert__title { font-weight: 600; }

/* ---------------- pagination / tabs / modal ---------------- */
.pagination .page-link { border: 1px solid var(--v2-border); color: var(--v2-ink); border-radius: 9px; margin: 0 3px; }
.pagination .page-item.active .page-link { background: hsl(var(--base)); border-color: hsl(var(--base)); color: #fff; }
.nav-tabs .nav-link { border: 0; color: var(--v2-muted); font-weight: 500; border-radius: 10px; }
.nav-tabs .nav-link.active { background: hsl(var(--base)/.10); color: hsl(var(--base)); }
.modal-content { border: 0; border-radius: var(--v2-radius); box-shadow: var(--v2-shadow-h); }
.modal-header { border-bottom: 1px solid var(--v2-border); }
.modal-footer { border-top: 1px solid var(--v2-border); }

/* ---------------- misc brand cleanup ---------------- */
/* legacy accent classes that introduce off-brand hues */
.bg--purple, .bg--info, .bg--primary { background: hsl(var(--base)/.10) !important; color: hsl(var(--base)) !important; }
.text--purple, .text--info, .text--primary { color: hsl(var(--base)) !important; }
.empty-message img, .no-data img { opacity: .5; max-width: 120px; }
.preloader { background: var(--v2-body-bg); }
::selection { background: hsl(var(--base)/.22); }

/* ---------------- responsive ---------------- */
@media (max-width: 991px) {
    .dashboard-body { padding: 20px 16px 40px; }
    .card-body { padding: 18px; }
    .dashboard__card__title { font-size: 26px; }
}

/* ==============================================================
   Analytics screen
   ============================================================== */
.analytics-widget-card {
    background: var(--v2-card);
    border: 1px solid var(--v2-border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--v2-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
    height: 100%;
}
.analytics-widget-card:hover { box-shadow: var(--v2-shadow-h); transform: translateY(-2px); }

.analytics-widget-card__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.analytics-widget-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: hsl(var(--base)/.10) !important;
    color: hsl(var(--base)) !important;
    font-size: 16px;
}
.analytics-widget-card__icon i,
.analytics-widget-card__icon svg,
.analytics-widget-card__icon svg path { color: hsl(var(--base)) !important; fill: currentColor !important; }

.analytics-widget-card-arrow,
.widget-card-link, .changeable-link {
    color: var(--v2-muted);
    transition: color .18s ease, transform .18s ease;
}
.analytics-widget-card:hover .analytics-widget-card-arrow,
.widget-card-link:hover, .changeable-link:hover { color: hsl(var(--base)); }

.analytics-widget-card__title {
    color: var(--v2-muted); font-size: 13px; font-weight: 500; margin: 0 0 6px;
}
.analytics-widget-card__amount {
    color: var(--v2-ink); font-size: 22px; font-weight: 700;
    letter-spacing: -.01em; margin: 0;
}
.analytics-widget-card__body .currency { color: var(--v2-muted); font-weight: 500; }

/* skeleton shimmer on brand-neutral grey */
.skeleton-animation {
    background: linear-gradient(90deg, #EEF1F7 25%, #F7F9FC 37%, #EEF1F7 63%);
    background-size: 400% 100%;
    border-radius: 8px;
}

/* chart cards */
.custom--card .card-title { color: var(--v2-ink); font-weight: 600; font-size: 16px; }
.custom--card .card-desc { color: var(--v2-muted); font-size: 13px; }

/* apex chart chrome -> brand-neutral */
.apexcharts-legend-text { color: var(--v2-muted) !important; font-weight: 500 !important; }
.apexcharts-xaxis text, .apexcharts-yaxis text { fill: var(--v2-muted) !important; }
.apexcharts-gridline { stroke: var(--v2-line) !important; }
.apexcharts-tooltip {
    border: 1px solid var(--v2-border) !important;
    box-shadow: var(--v2-shadow) !important;
    border-radius: 10px !important;
}

/* ==============================================================
   Shared polish: search / filters / dropdowns / empty state
   ============================================================== */
.search-form, .form--search { border-radius: 11px; }
.dropdown-menu {
    border: 1px solid var(--v2-border);
    border-radius: 13px;
    box-shadow: var(--v2-shadow);
    padding: 6px;
}
.dropdown-item { border-radius: 9px; color: var(--v2-ink); font-weight: 500; }
.dropdown-item:hover, .dropdown-item.active {
    background: hsl(var(--base)/.10); color: hsl(var(--base));
}
.nice-select, .select2-container--default .select2-selection--single {
    border: 1px solid var(--v2-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
}
.empty-message, .no-data { color: var(--v2-muted); }
.empty-message h4, .no-data h4, .empty-message h5 { color: var(--v2-ink); font-weight: 600; }

/* KYC / status chips inside tables stay semantic but soft (already handled by .badge--*) */

/* ==============================================================
   Off-brand SVG colours shipped in the template.
   CSS properties beat SVG presentation attributes, so we can
   re-brand the inline icons without editing any blade file.
   ============================================================== */

/* violet search glyph -> muted UI grey (correct affordance for an input) */
[stroke="#615FFF" i],
svg [stroke="#615FFF" i],
svg path[stroke="#615FFF" i],
svg circle[stroke="#615FFF" i] { stroke: var(--v2-muted) !important; }

.form--search:focus-within [stroke="#615FFF" i],
.search-form:focus-within [stroke="#615FFF" i] { stroke: hsl(var(--base)) !important; }

/* violet feature glyphs -> Cryptorch orange */
[fill="#AD46FF" i],
svg [fill="#AD46FF" i],
svg path[fill="#AD46FF" i],
[fill="#8E51FF" i],
svg [fill="#8E51FF" i],
svg path[fill="#8E51FF" i] { fill: hsl(var(--base)) !important; }

[stroke="#8E51FF" i],
svg [stroke="#8E51FF" i],
svg path[stroke="#8E51FF" i] { stroke: hsl(var(--base)) !important; }

/* pale violet decorative wash -> brand tint */
[fill="#DDE4FF" i],
svg [fill="#DDE4FF" i] { fill: hsl(var(--base)/.12) !important; }

/* ==============================================================
   Auth screens (login / register / verify) — same brand language
   ============================================================== */
.account, .account-section, .account-form { color: var(--v2-ink); }
.account-form .form--control { border-radius: 11px; }
.account-form .btn--base { width: 100%; }
.account__title, .account-form__title { color: var(--v2-ink); font-weight: 700; }
.account__desc { color: var(--v2-muted); }
.account-form a { color: hsl(var(--base)); font-weight: 500; }

/* social login keeps the providers' own brand colours on purpose */

/* ==============================================================
   CONTRAST RULE — anything sitting on the dark navy sidebar must
   be light. Nothing dark-on-dark, anywhere.
   ============================================================== */

/* logo: keep it readable even if a dark asset is ever used */
.dashboard-sidebar-logo img { max-height: 38px; width: auto; }

/* every text node inside the sidebar defaults to light */
.dashboard-sidebar,
.dashboard-sidebar a,
.dashboard-sidebar span,
.dashboard-sidebar p,
.dashboard-sidebar h1, .dashboard-sidebar h2, .dashboard-sidebar h3,
.dashboard-sidebar h4, .dashboard-sidebar h5, .dashboard-sidebar h6,
.dashboard-sidebar i, .dashboard-sidebar small, .dashboard-sidebar div {
    color: rgba(255, 255, 255, .82);
}

/* section labels stay dimmer, links keep their own rules */
.dashboard-sidebar__body__title { color: rgba(255, 255, 255, .38) !important; }

/* ---- footer user block ---- */
.dashboard-sidebar__footer .footer-menu-dropdown-btn,
.dashboard-sidebar__footer .user-profile-mini {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 13px;
    padding: 10px 12px;
    transition: background .18s ease, border-color .18s ease;
}
.dashboard-sidebar__footer .footer-menu-dropdown-btn:hover,
.dashboard-sidebar__footer .footer-menu-dropdown-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .11);
    border-color: hsl(var(--base) / .45);
}
.dashboard-sidebar__footer .user-info { min-width: 0; }
.dashboard-sidebar__footer .user-info .name {
    color: #FFFFFF !important;
    font-size: 14px; font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-sidebar__footer .user-info .subtitle {
    color: rgba(255, 255, 255, .55) !important;
    font-size: 12px; line-height: 1.3;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 150px;
}
.dashboard-sidebar__footer .avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid hsl(var(--base) / .6); flex-shrink: 0;
}
.dashboard-sidebar__footer .fa-chevron-right { color: rgba(255,255,255,.45); font-size: 12px; }

/* ---- the dropdown that opens from the footer sits on WHITE, so
        its contents must go back to dark ink ---- */
.dashboard-sidebar .dropdown-menu,
.user-dropdown__menu {
    background: #fff;
    border: 1px solid var(--v2-border);
    border-radius: 13px;
    box-shadow: var(--v2-shadow);
    padding: 6px;
}
.dashboard-sidebar .dropdown-menu a,
.dashboard-sidebar .dropdown-menu span,
.dashboard-sidebar .dropdown-menu div,
.user-dropdown__menu .dropdown-item,
.user-dropdown__menu .dropdown-item__user { color: var(--v2-ink) !important; }
.dashboard-sidebar .dropdown-menu .dropdown-item { border-radius: 9px; font-weight: 500; }
.dashboard-sidebar .dropdown-menu .dropdown-item:hover,
.user-dropdown__menu .dropdown-item:hover {
    background: hsl(var(--base) / .10);
    color: hsl(var(--base)) !important;
}
.dashboard-sidebar .dropdown-menu svg,
.dashboard-sidebar .dropdown-menu svg path { fill: currentColor !important; }

/* logout row */
.dashboard-sidebar .logout, .dashboard-sidebar .logout__btn { color: rgba(255,255,255,.8) !important; }
.dashboard-sidebar .logout__btn:hover { background: rgba(255,255,255,.09); color:#fff !important; }

/* mobile close button on the dark panel */
.dashboard-sidebar .btn--close, .dashboard-sidebar .btn-close {
    filter: invert(1) grayscale(1) brightness(2); opacity: .7;
}

/* "OR" divider on the auth screens was near-invisible (1.18:1) */
.account-divider { display: flex; align-items: center; gap: 14px; }
.account-divider span {
    color: var(--v2-muted) !important;
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; white-space: nowrap;
}
.account-divider::before,
.account-divider::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--v2-border);
}

/* browser-usage bars shipped as blue/green/amber — re-brand to an orange→navy ramp */
.user-browser__progress--chrome  { background: hsl(var(--base)) !important; }
.user-browser__progress--firefox { background: hsl(var(--base) / .55) !important; }
.user-browser__progress--other   { background: var(--v2-navy-700) !important; }
.user-browser__progress { border-radius: 999px !important; }

/* settings side-tabs: inactive labels were rgb(161,161,170) = 2.56:1, too faint */
.setting-sidebar__inner { gap: 4px; }
.setting-sidebar__item {
    color: var(--v2-muted) !important;      /* 4.6:1 on white */
    font-weight: 500;
    border-radius: 11px;
    padding: 10px 14px;
    transition: background .18s ease, color .18s ease;
}
.setting-sidebar__item:hover {
    background: hsl(var(--base) / .08);
    color: hsl(var(--base)) !important;
}
.setting-sidebar__item.active,
.setting-sidebar__item[class*="active"] {
    background: hsl(var(--base) / .12);
    color: hsl(var(--base)) !important;
    font-weight: 600;
}
.setting-sidebar__item svg,
.setting-sidebar__item svg path { fill: currentColor !important; }

/* Brand orange on white is ~2.8:1 — a touch low for button text.
   Darken the hue slightly for outline/link text only; fills stay pure brand. */
.btn-outline--base,
a.btn-outline--base,
.btn-outline--base:visited {
    color: #C24A0F !important;                                  /* fallback */
    color: color-mix(in srgb, hsl(var(--base)) 78%, #000) !important;
    border-color: hsl(var(--base) / .55) !important;
    background: hsl(var(--base) / .04);
}
.btn-outline--base:hover,
.btn-outline--base:focus {
    background: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    color: #fff !important;
}
.btn-outline--base svg,
.btn-outline--base svg path,
.btn-outline--base i { fill: currentColor !important; color: currentColor !important; }