/* =====================================================================
   Mobniq restyle — theme-tokens.css
   Load AFTER bootstrap.min.css / dashboard.css / style.css.
   One variable layer drives both themes; components below only reference
   variables, so light/dark is a class flip on <html> (set before first paint
   by partials/theme-boot.blade.php).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --body-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: var(--body-font);
  --mono-font: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --primary-color: #5c5cf0;
  --btn-hover-bg: #4b4be0;
  --primary-color-opacity-low: rgba(92, 92, 240, .10);
  --on-primary: #ffffff;

  --bg-color1: #f6f7f9;   /* page */
  --bg-color2: #ffffff;   /* cards */
  --bg-color3: #ffffff;   /* header / sidebar */
  --input-color: #ffffff;
  --surface2: #f3f4f6;    /* tinted wells, tab tracks */

  --heading-color: #111318;
  --body-color: #5b6170;
  --muted-color: #8a90a2;

  --border-color1: #e5e7eb;
  --border-color2: #e5e7eb;
  --nav-border: #e5e7eb;

  --shadow1: 0 1px 2px rgba(16, 18, 24, .04);
  --shadow2: 0 1px 2px rgba(16, 18, 24, .04);
  --shadow3: 0 1px 2px rgba(16, 18, 24, .04);

  --success: #1f9d61;  --success-soft: rgba(31, 157, 97, .10);
  --danger:  #d64562;  --danger-soft:  rgba(214, 69, 98, .10);
  --warning: #d98a12;  --warning-soft: rgba(217, 138, 18, .12);
  --info:    #5c5cf0;  --info-soft:    rgba(92, 92, 240, .10);

  --ticker-bg: #111318; --ticker-text: #e8eaee; --ticker-muted: #8a90a2;

  --radius: 12px; --radius-sm: 8px;
  --transition: all .18s ease;
  color-scheme: light;
}

html.dark-theme, body.dark-theme {
  --primary-color: #7b7bf5;
  --btn-hover-bg: #8d8df7;
  --primary-color-opacity-low: rgba(123, 123, 245, .16);

  --bg-color1: #0f1115;
  --bg-color2: #16181d;
  --bg-color3: #16181d;
  --input-color: #0f1115;
  --surface2: #1c1f26;

  --heading-color: #e8eaee;
  --body-color: #a9afbb;
  --muted-color: #6f7683;

  --border-color1: #262a33;
  --border-color2: #262a33;
  --nav-border: #262a33;

  --shadow1: none; --shadow2: none; --shadow3: none;

  --success: #3ccf86;  --success-soft: rgba(60, 207, 134, .12);
  --danger:  #f0698a;  --danger-soft:  rgba(240, 105, 138, .12);
  --warning: #f0b24a;  --warning-soft: rgba(240, 178, 74, .14);

  --ticker-bg: #0b0d11;
  --loader-color: #16181d;
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
body { background: var(--bg-color1); color: var(--body-color); font-family: var(--body-font); }
body.dark-theme { background: var(--bg-color1); color: var(--body-color); }
.dark-theme p { color: var(--body-color); }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 600; letter-spacing: -.01em; }

/* numerals */
.cmn-table tbody td h5, .cmn-table tbody td h6,
.box-card .box-card-body h4, .custom-card h4,
.input-amount-box input, .input-amount-box .title,
.wallet-box h5, #totalUsdValue, .transaction-summery h6,
.mobniq-ticker { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }

/* ---------- 3. Shell ---------- */
.header { height: 64px; background: var(--bg-color3); box-shadow: none; border-bottom: 1px solid var(--nav-border); }
.header .toggle-sidebar-btn { font-size: 18px; width: 36px; height: 36px; border: 1px solid var(--nav-border); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.header .search-bar .search-form .form-control { height: 36px; background: transparent; border-radius: var(--radius-sm); font-size: 14px; }
.header-nav .nav-icon, .header-nav .toggle-btn { font-size: 15px; width: 36px; height: 36px; border: 1px solid var(--nav-border); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
.header-nav .toggle-btn { border-radius: 999px; }
.header-nav .nav-profile { border: 1px solid var(--nav-border); border-radius: 999px; padding: 3px 10px 3px 3px !important; }
.header-nav .nav-profile img { width: 28px; height: 28px; }
.header-nav .nav-profile span { font-size: 13px; font-weight: 600; }
.header-nav .badge-number { border-radius: 9px; font-family: var(--mono-font); }
@media (min-width: 1200px) { .logo-container { width: 240px; } }

.sidebar { top: 64px; width: 260px; padding: 20px 16px; box-shadow: none; border-right: 1px solid var(--nav-border); }
.sidebar-nav .nav-item { margin-bottom: 2px; }
.sidebar-nav .nav-link { font-size: 14px; height: 40px; padding: 0 12px; border-left: 0; border-radius: var(--radius-sm); color: var(--body-color); background: transparent; gap: 12px; }
.sidebar-nav .nav-link i { font-size: 15px; width: 18px; text-align: center; margin-right: 0; }
.sidebar-nav .nav-link:hover { background: var(--surface2); color: var(--heading-color); border-left: 0; }
.sidebar-nav .nav-link.active, .sidebar-nav .nav-link.active:hover { background: var(--primary-color-opacity-low); color: var(--primary-color); border-left: 0; font-weight: 600; }
@media (min-width: 1200px) { #main, #footer { margin-left: 260px; } .toggle-sidebar .sidebar { left: -260px; } }
@media (max-width: 1199px) { .sidebar { left: -260px; } }

#main { margin-top: 64px; padding: 28px 32px 40px; min-height: calc(100vh - 115px); }
#main .pagetitle { margin-bottom: 24px; }
#main .pagetitle h3 { font-size: 26px; }
.footer { background: var(--bg-color1); border-top: 1px solid var(--border-color1); font-size: 12px; padding: 14px 32px; }
.footer .copyright { color: var(--muted-color); }

/* ---------- 4. Cards / tables / badges / buttons ---------- */
.card, .box-card, .custom-card, .calculator, .cmn-table { border-radius: var(--radius); background: var(--bg-color2); box-shadow: var(--shadow2); border: 1px solid var(--border-color1); }
.card .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color1) !important; border-radius: var(--radius) var(--radius) 0 0; }
.card .card-header h4 { font-size: 15px; margin: 0; }
.card .card-body { padding: 0; }
.card .card-body > form { padding: 16px 20px; }
.card .card-body .cmn-table { border: 0; border-radius: 0; }
.mt-50 { margin-top: 20px !important; }

.cmn-table table thead tr th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-color); padding: 12px 20px; background: transparent; border-bottom: 1px solid var(--border-color1); border-radius: 0 !important; }
.cmn-table tbody td { padding: 14px 20px; font-size: 13px; border-bottom: 1px solid var(--border-color1); }
.cmn-table tbody tr:last-child td { border-bottom: 0; }
.cmn-table tbody td h5 { font-size: 13px; font-weight: 500; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
.table > :not(caption) > * > * { background: transparent; color: inherit; }

.badge { font-family: var(--body-font); font-size: 12px; font-weight: 600; padding: 3px 10px 3px 18px; border-radius: 999px; }
.badge::before { left: 7px; width: 6px; height: 6px; }
.badge.text-bg-success { color: var(--success) !important; background: var(--success-soft) !important; } .badge.text-bg-success::before { background: var(--success) !important; }
.badge.text-bg-danger  { color: var(--danger) !important;  background: var(--danger-soft) !important; }  .badge.text-bg-danger::before  { background: var(--danger) !important; }
.badge.text-bg-warning { color: var(--warning) !important; background: var(--warning-soft) !important; } .badge.text-bg-warning::before { background: var(--warning) !important; }
.badge.text-bg-primary, .badge.text-bg-info { color: var(--primary-color) !important; background: var(--primary-color-opacity-low) !important; }
.badge.text-bg-primary::before, .badge.text-bg-info::before { background: var(--primary-color) !important; }
.badge.text-bg-secondary, .badge.text-bg-dark { color: var(--muted-color) !important; background: var(--surface2) !important; }
.badge.text-bg-secondary::before, .badge.text-bg-dark::before { background: var(--muted-color) !important; }

.cmn-btn, .cmn-btn2, .cmn-btn3, .cmn-btn4 { border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; padding: 0 14px; height: 36px; text-transform: none; }
.cmn-btn.w-100 { height: 44px; font-size: 14px; }
.cmn-btn3 { background: var(--bg-color2); border: 1px solid var(--border-color1); color: var(--heading-color); }
.cmn-btn3::after { display: none; }
.action-btn-primary { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color1); border-radius: var(--radius-sm); color: var(--body-color); background: transparent; }

.form-control, .form-select { height: 38px; border-radius: var(--radius-sm); background: var(--input-color); border-color: var(--border-color1); color: var(--heading-color); font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-color-opacity-low); background: var(--input-color); }
.dark-theme .form-control, .dark-theme .form-select { border: 1px solid var(--border-color1); }
.form-control::placeholder { color: var(--muted-color); }

/* stat tiles: one flat style replaces the four pastel variants */
.box-card, .box-card.grayish-custom-card, .box-card.grayish-blue-card, .box-card.grayish-green-card, .box-card.strong-orange-card {
  background-color: var(--bg-color2) !important; background-image: none !important; padding: 16px 18px; gap: 12px; }
.box-card .box-card-header { padding: 0; }
.box-card .box-card-header .box-card-title { font-size: 13px; color: var(--body-color); display: flex; align-items: center; }
.box-card .box-card-header .box-card-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); font-size: 0; margin-right: 10px; }
.box-card.grayish-green-card .box-card-title i { background: var(--success); }
.box-card.strong-orange-card .box-card-title i { background: var(--warning); }
.box-card.grayish-blue-card .box-card-title i { background: var(--danger); }
.box-card .box-card-body, .dark-theme .box-card .box-card-body { padding: 0; background: transparent; align-items: flex-end; }
.box-card .box-card-body h4 { font-size: 26px; line-height: 1; }
.box-card .box-card-body h4 sub small { font-family: var(--body-font); font-size: 13px; color: var(--muted-color); }
.box-card .box-card-body .statistics .growth { font-family: var(--mono-font); font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); }
.box-card .box-card-body .statistics .growth.down { background: var(--danger-soft); color: var(--danger); }
.box-card .box-card-body .statistics .time, .dark-theme .box-card .box-card-body .statistics .time { color: var(--muted-color); text-align: right; margin-top: 4px; }

.custom-card, .custom-card:hover { background: var(--bg-color2); transform: none; box-shadow: var(--shadow2); padding: 16px 18px; }
.custom-card p.text-muted { font-size: 12px !important; color: var(--body-color) !important; }
.custom-card h4 { font-size: 22px; font-weight: 500 !important; color: var(--heading-color) !important; }
.icon-wrapper { background: var(--primary-color-opacity-low); color: var(--primary-color); width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: 15px; }

/* calculator */
.calculator { box-shadow: var(--shadow2); }
.calculator-banner { background: transparent; border-bottom: 1px solid var(--border-color1); border-radius: var(--radius) var(--radius) 0 0; padding: 14px 16px; }
.calculator-banner-wrapper .left-side p, .dark-theme .calculator-banner-wrapper .left-side p { color: var(--heading-color); font-size: 13px; font-weight: 600; }
.cmn-tabs .nav-pills { background: var(--surface2); border-radius: var(--radius-sm); padding: 4px; }
.cmn-tabs .nav-pills .nav-link { border-radius: 6px; font-size: 13px; font-weight: 600; padding: 6px 20px; color: var(--body-color); }
.cmn-tabs .nav-pills .nav-link.active { background: var(--bg-color2); color: var(--heading-color); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.input-amount-box .input-amount-wrapper { background: var(--input-color); border: 1px solid var(--border-color1); border-radius: var(--radius-sm); }
.input-amount-box .linear-gradient { display: none; }
.input-amount-box input { font-size: 22px; font-weight: 500; }
.swap-area { justify-content: center; margin: -10px 0; position: relative; z-index: 1; }
.swap-area .swap-icon { width: 32px; height: 32px; background: var(--bg-color2); border: 1px solid var(--border-color1); }

/* ticker (mobniq-brand.css) */
.mobniq-ticker { background: var(--ticker-bg); color: var(--ticker-text); border-bottom: 1px solid var(--nav-border); font-size: 12px; height: 34px; display: flex; align-items: center; overflow: hidden; padding: 0; }
.mobniq-ticker .bm-track { animation: mobniq-marquee-ltr 40s linear infinite; }
.mobniq-ticker:hover .bm-track { animation-play-state: paused; }
.mobniq-ticker .bm-tick b { color: var(--ticker-muted); font-weight: 500; }
.mobniq-ticker .bm-chg.up { color: var(--success); } .mobniq-ticker .bm-chg.down { color: var(--danger); }

/* alerts */
.alert { border-radius: var(--radius-sm); border: 1px solid var(--border-color1); border-left-width: 1px; background: var(--primary-color-opacity-low); }

/* preloader is removed from the layout; keep it hidden if a page still includes it */
.loader-wrap, .handle-preloader { display: none !important; }

/* mobile bottom nav */
.bottom-nav { background: var(--bg-color3); border-top: 1px solid var(--nav-border); box-shadow: none; border-radius: 0; }
.bottom-nav .nav-item .nav-link.active, .bottom-nav .nav-item .nav-link:hover { margin-top: 0; background: var(--primary-color-opacity-low); color: var(--primary-color); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- mobniq polish + app feel ---------- */
.calculator-banner-wrapper{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calculator-banner-wrapper .left-side{display:flex;align-items:center;gap:10px;min-width:0}
.calculator-banner-wrapper .left-side .image-area{flex:0 0 auto;line-height:0}
.calculator-banner-wrapper .left-side .image-area img{width:34px;height:34px;object-fit:contain;border-radius:8px}
.calculator-banner-wrapper .left-side .text-area{min-width:0}
.calculator-banner-wrapper .left-side .text-area p{font-size:13px;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.calculator-banner-wrapper .right-side{flex:0 0 auto;color:var(--body-color)}
/* app-like interactions */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
a,button,.btn,.nav-link,.cmn-btn,.cmn-btn2{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease}
.btn:active,.cmn-btn:active,.cmn-btn2:active,button:active{transform:translateY(1px)}
@media (display-mode:standalone){body{padding-bottom:env(safe-area-inset-bottom)}.header-section,.navbar,header{padding-top:env(safe-area-inset-top)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* calculator promo banner — de-absolute the wrapper, sane image, no clip */
.calculator-banner{position:relative;overflow:hidden;padding:0 !important;background:var(--surface2) !important;
  border:1px solid var(--border-color1) !important;border-radius:var(--radius-sm) !important;margin-bottom:14px;cursor:pointer}
.calculator-banner-wrapper{position:static !important;width:auto !important;height:auto !important;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.calculator-banner-wrapper .left-side{display:flex;align-items:center;gap:10px;min-width:0;flex-grow:1}
.calculator-banner-wrapper .left-side .image-area img{width:32px !important;height:32px;object-fit:contain;border-radius:6px}
.calculator-banner-wrapper .left-side .text-area p{font-size:13px;line-height:1.35;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.calculator-banner-wrapper .right-side{margin:0 !important;font-size:16px;flex:0 0 auto;color:var(--body-color)}