/* ==========================================================
   Utility Classes
   Replaces all one-off inline style="" attributes across templates.
   ========================================================== */

/* ----------------------------------------------------------
   Spacing — margin
   ---------------------------------------------------------- */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm  { margin-top: var(--spacing-sm); }
.mt-md  { margin-top: var(--spacing-md); }
.mt-lg  { margin-top: var(--spacing-lg); }
.mt-xl  { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }
.mb-xl  { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------
   Spacing — padding
   ---------------------------------------------------------- */
.p-0   { padding: 0; }
.pt-0  { padding-top: 0; }
.pb-0  { padding-bottom: 0; }
.pt-md { padding-top: var(--spacing-md); }
.pb-md { padding-bottom: var(--spacing-md); }
.pt-xl { padding-top: var(--spacing-xl); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }

/* Page content wrapper — replaces the most common style="padding-top/bottom" pattern */
.page-section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
}

/* ----------------------------------------------------------
   Typography
   ---------------------------------------------------------- */
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.8125rem; }
.text-base { font-size: 0.875rem; }
.text-md   { font-size: 0.9375rem; }
.text-lg   { font-size: 1rem; }

.d-block { display: block; }
.d-flex  { display: flex; }
.d-none  { display: none; }

.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }

/* ----------------------------------------------------------
   Display / Layout helpers
   ---------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.p-0-overflow { padding: 0; overflow: hidden; }

/* Sidebar / related panel title row */
.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}
.panel-title-row h2,
.panel-title-row h3 { margin: 0; }

/* ----------------------------------------------------------
   TradingView chart containers
   ---------------------------------------------------------- */

/* Card wrapper for TradingView (removes default card padding) */
.tv-chart-card {
    padding: 0;
    overflow: hidden;
}

/* Full chart embed heights */
.tv-chart-h460 { height: 460px; }
.tv-chart-h480 { height: 480px; }

/* Min height for dashboard chart column */
.tv-chart-min400 { min-height: 400px; }

/* ----------------------------------------------------------
   Dashboard stat icon color variants
   Replaces inline background/color styles on .dashboard-stat-icon
   ---------------------------------------------------------- */
.stat-icon-primary {
    background: rgba(240, 185, 11, 0.12);
    color: var(--color-primary);
}
.stat-icon-accent {
    background: rgba(2, 192, 118, 0.12);
    color: var(--color-accent);
}
.stat-icon-danger {
    background: rgba(246, 70, 93, 0.12);
    color: var(--color-danger);
}
.stat-icon-btc {
    background: rgba(247, 147, 26, 0.12);
    color: #F7931A;
}

/* ----------------------------------------------------------
   Navbar badge (watchlist count pill)
   ---------------------------------------------------------- */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
    line-height: 1.4;
}

/* ----------------------------------------------------------
   Inline-block price/change in sidebar / lists
   ---------------------------------------------------------- */
.price-col {
    text-align: right;
    margin-left: auto;
}
.price-col .symbol-row { font-size: 0.75rem; display: block; }

/* ----------------------------------------------------------
   Section label display: block pattern
   ---------------------------------------------------------- */
.section-label-block {
    display: block;
    margin-bottom: 4px;
}

/* ----------------------------------------------------------
   Chart feature text sizes
   ---------------------------------------------------------- */
.chart-feature-title { font-size: 0.9375rem; }
.chart-feature-desc  { font-size: 0.8125rem; }

/* ----------------------------------------------------------
   Chart loading message
   ---------------------------------------------------------- */
.chart-loading-msg { margin-top: var(--spacing-lg); }

/* ----------------------------------------------------------
   Search results area spacing
   ---------------------------------------------------------- */
.search-results-section    { margin-bottom: var(--spacing-2xl); }
.search-section-title      { margin-bottom: var(--spacing-lg); }
.search-more-link-wrap     { margin-top: var(--spacing-xl); }
.search-form-row           { margin-top: var(--spacing-md); }

/* ----------------------------------------------------------
   Sidebar widget
   ---------------------------------------------------------- */
.sidebar-widget { margin-bottom: var(--spacing-md); }

/* ----------------------------------------------------------
   Comments
   ---------------------------------------------------------- */
.no-comments-msg {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* ----------------------------------------------------------
   Single post navigation
   ---------------------------------------------------------- */
.post-nav-next { text-align: right; }

/* ----------------------------------------------------------
   Coin hero rank badge
   ---------------------------------------------------------- */
.coin-rank-badge { margin-left: 8px; }

/* ----------------------------------------------------------
   Coin interval label (24h / 7d badges in hero)
   ---------------------------------------------------------- */
.change-pill-label {
    font-weight: 400;
    font-size: 0.75rem;
}

/* ----------------------------------------------------------
   Coin hero stat label / value
   ---------------------------------------------------------- */
.coin-stat-label { font-size: 0.75rem; }
.coin-stat-value {
    font-size: 0.9375rem;
}

/* ----------------------------------------------------------
   Coin detail related — sidebar ticker item right block
   ---------------------------------------------------------- */
.ticker-item-right {
    text-align: right;
    margin-left: auto;
}
.ticker-item-right a {
    display: contents;
    text-decoration: none;
    color: inherit;
}

/* ----------------------------------------------------------
   Dashboard content + widget areas below main grid
   ---------------------------------------------------------- */
.dashboard-content-area { margin-top: var(--spacing-xl); }
.dashboard-widgets-area { margin-top: var(--spacing-xl); }

/* ----------------------------------------------------------
   Dashboard welcome date line
   ---------------------------------------------------------- */
.dashboard-date {
    font-size: 0.875rem;
    margin: 0;
}