/* ═══════════════════════════════════════════
   AtlasWatch — Watchlist Frontend Styles
   AtlasBase Design System
   atlasbase.one
═══════════════════════════════════════════ */

.aw-wrap {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: #1f2024;
    width: 100%;
    border: 1px solid #b5b7bf;
    overflow: hidden;
}

/* ─── Market Summary Bar ─── */
.aw-market-bar {
    background: #1f2024;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    border-bottom: 2px solid #1a3a5c;
}
.aw-market-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-right: 1px solid #343a40;
    white-space: nowrap;
    flex-shrink: 0;
}
.aw-market-item--right {
    margin-left: auto;
    border-right: none;
    border-left: 1px solid #343a40;
}
.aw-market-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5e5e69;
}
.aw-market-price {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}
.aw-market-chg {
    font-size: 11px;
    font-weight: 600;
}
.aw-market-brand {
    font-size: 11px;
    font-weight: 700;
    color: #1a3a5c;
    letter-spacing: 0.08em;
    background: #ffffff;
    padding: 2px 8px;
    font-family: inherit;
}

/* ─── Up / Down colors ─── */
.aw-up  { color: #166534; }
.aw-dn  { color: #991b1b; }

/* ─── Main layout ─── */
.aw-main {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0;
    background: #b5b7bf;
    min-height: 420px;
}

/* ─── Left panel ─── */
.aw-left {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

/* ─── Tabs ─── */
.aw-tabs {
    display: flex;
    background: #343a40;
    padding: 0 16px;
    gap: 2px;
    flex-shrink: 0;
}
.aw-tab {
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a0a1ad;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    font-family: inherit;
}
.aw-tab:hover { color: #ffffff; }
.aw-tab--active {
    color: #ffffff;
    border-bottom-color: #1a3a5c;
}
.aw-tab--customize {
    margin-left: auto;
    color: #5e5e69;
    font-size: 10px;
}
.aw-tab--customize:hover { color: #a0a1ad; }

/* ─── Ticker panel ─── */
.aw-panel { display: none; flex: 1; overflow-y: auto; }
.aw-panel--active { display: flex; flex-direction: column; }

.aw-table-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 52px;
    gap: 8px;
    padding: 8px 16px;
    background: #f2f2f2;
    border-bottom: 1px solid #e0e0e0;
}
.aw-table-head span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a0a1ad;
}

.aw-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 52px;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    transition: background 0.12s;
}
.aw-row:hover { background: #f2f2f2; }
.aw-row.aw-row--active { background: #f0f4f8; border-left: 3px solid #1a3a5c; padding-left: 13px; }
.aw-row:last-child { border-bottom: none; }

.aw-sym {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1f2024;
    letter-spacing: 0.02em;
}
.aw-name {
    display: block;
    font-size: 11px;
    color: #a0a1ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aw-row-price {
    font-size: 13px;
    font-weight: 600;
    color: #1f2024;
}
.aw-row-chg { }
.aw-chg-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    display: inline-block;
}
.aw-chg-up { background: #f0fdf4; color: #166534; }
.aw-chg-dn { background: #fef2f2; color: #991b1b; }

/* ─── Sparklines ─── */
.aw-spark { display: block; }
.aw-spark-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.aw-spark-up { stroke: #166534; }
.aw-spark-dn { stroke: #991b1b; }

/* ─── Customize panel ─── */
.aw-customize-inner {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.aw-customize-desc {
    font-size: 12px;
    color: #5e5e69;
    line-height: 1.6;
}
.aw-customize-input-row {
    display: flex;
    gap: 8px;
}
.aw-customize-input-row input {
    flex: 1;
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
    font-family: monospace;
    font-weight: 600;
    border: 1.5px solid #b5b7bf;
    outline: none;
    text-transform: uppercase;
}
.aw-customize-input-row input:focus { border-color: #1a3a5c; }
.aw-customize-input-row button,
#aw-reset-list {
    background: #1a3a5c;
    color: #ffffff;
    border: none;
    padding: 0 16px;
    height: 38px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.aw-customize-input-row button:hover,
#aw-reset-list:hover { background: #0f2744; }
#aw-reset-list {
    background: transparent;
    color: #a0a1ad;
    border: 1px solid #e0e0e0;
    font-size: 10px;
}
#aw-reset-list:hover { background: #f2f2f2; color: #5e5e69; }
.aw-custom-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f2f2f2;
    border: 1px solid #b5b7bf;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
    margin: 2px;
}
.aw-custom-tag-remove {
    background: none;
    border: none;
    color: #a0a1ad;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}
.aw-custom-tag-remove:hover { color: #991b1b; }

/* ─── Right panel ─── */
.aw-right {
    background: #ffffff;
    border-left: 1px solid #b5b7bf;
    display: flex;
    flex-direction: column;
}
.aw-chart-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ─── Empty state ─── */
.aw-chart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #b5b7bf;
}
.aw-chart-empty-icon {
    font-size: 32px;
    color: #e0e0e0;
}
.aw-chart-empty-text {
    font-size: 13px;
    color: #a0a1ad;
    text-align: center;
}

/* ─── Chart loaded ─── */
.aw-chart-loaded {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.aw-chart-hd {
    padding: 14px 16px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #f2f2f2;
}
.aw-chart-hd-left { }
.aw-chart-symbol {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a0a1ad;
    margin-bottom: 2px;
}
.aw-chart-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2024;
}
.aw-chart-hd-right {
    text-align: right;
    flex-shrink: 0;
}
.aw-chart-price {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1f2024;
    line-height: 1.1;
}
.aw-chart-chg {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}

/* ─── Timeframe tabs ─── */
.aw-tf-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 16px;
    background: #f2f2f2;
    border-bottom: 1px solid #e0e0e0;
}
.aw-tf-tab {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #5e5e69;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.06em;
    transition: all 0.15s;
}
.aw-tf-tab:hover { background: #ffffff; color: #1f2024; }
.aw-tf-tab--active {
    background: #1a3a5c;
    border-color: #1a3a5c;
    color: #ffffff;
}

/* ─── TradingView widget container ─── */
.aw-tv-widget {
    height: 220px;
    background: #f2f2f2;
    position: relative;
    overflow: hidden;
}
.aw-tv-widget iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* ─── TradingView affiliate link ─── */
.aw-tv-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    background: #1a3a5c;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.15s;
    border: none;
}
.aw-tv-link:hover { background: #0f2744; color: #ffffff !important; }

/* ─── Stat row ─── */
.aw-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: #e0e0e0;
    border-top: 1px solid #e0e0e0;
}
.aw-stat {
    background: #f2f2f2;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.aw-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a0a1ad;
}
.aw-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: #1f2024;
}

/* ─── Affiliate banners ─── */
.aw-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #1f2024;
    border-top: 1px solid #343a40;
    text-decoration: none !important;
    transition: background 0.15s;
}
.aw-banner:hover { background: #343a40; }
.aw-banner-text {
    font-size: 12px;
    color: #a0a1ad;
    line-height: 1.4;
}
.aw-banner-text strong { color: #ffffff; font-weight: 600; }
.aw-banner-cta {
    background: #1a3a5c;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.aw-banner:hover .aw-banner-cta { background: #0f2744; }

/* ─── Related articles ─── */
.aw-related {
    padding: 12px 16px;
    border-top: 1px solid #f2f2f2;
}
.aw-related-hd {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a0a1ad;
    margin-bottom: 8px;
}
.aw-related-link {
    display: block;
    font-size: 12px;
    color: #1a3a5c;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid #f2f2f2;
    transition: color 0.15s;
}
.aw-related-link:last-child { border-bottom: none; }
.aw-related-link:hover { color: #0f2744; text-decoration: underline; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .aw-main { grid-template-columns: 1fr; }
    .aw-right { border-left: none; border-top: 1px solid #b5b7bf; }
    .aw-market-bar { flex-wrap: wrap; }
    .aw-market-item--right { margin-left: 0; border-left: none; }
}
@media (max-width: 480px) {
    .aw-row { grid-template-columns: 2fr 1fr 1fr; }
    .aw-row-spark { display: none; }
    .aw-table-head { grid-template-columns: 2fr 1fr 1fr; }
}