/* ================================================================
   Stock Tracker Pro – Stylesheet
   ================================================================ */

/* Direction */
.st-wrap, .st-profile-tab, .st-fav-widget {
    direction: rtl;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    color: #1a1a1a;
    max-width: 960px;
    margin: 0 auto;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.st-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.st-search {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 220px;
}

.st-input {
    flex: 1;
    font-size: 15px;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: border-color .15s;
    outline: none;
}
.st-input:focus { border-color: #378ADD; }
.st-input::placeholder { text-transform: none; letter-spacing: 0; color: #aaa; }

/* ── Buttons ─────────────────────────────────────────────────── */
.st-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid #ccc;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.st-btn-primary {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.st-btn-primary:hover { background: #333; }

.st-btn-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 8px;
    border: 1.5px solid #ddd;
    background: #fff;
    color: #555;
    transition: all .15s;
}
.st-btn-fav:hover { border-color: #f0a500; color: #f0a500; }
.st-btn-fav.is-fav { border-color: #f0a500; background: #fff8e1; color: #c47f00; }
.st-btn-fav.is-fav .st-fav-icon { color: #f0a500; }
.st-fav-icon { font-size: 16px; line-height: 1; }

/* ── Interval buttons ────────────────────────────────────────── */
.st-intervals {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.st-interval-btn {
    padding: 7px 14px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: transparent;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    font-family: monospace;
    transition: all .15s;
}
.st-interval-btn.active,
.st-interval-btn:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* ── Metrics ─────────────────────────────────────────────────── */
.st-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 1.2rem;
}
.st-metric {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.st-metric-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-family: monospace;
}
.st-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: monospace;
}
.st-up   { color: #1a9e65 !important; }
.st-down { color: #e24b4a !important; }

/* ── Cards ────────────────────────────────────────────────────── */
.st-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

/* ── Chart header ─────────────────────────────────────────────── */
.st-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}
.st-chart-title-group { display: flex; flex-direction: column; gap: 3px; }
.st-symbol-title  { font-size: 22px; font-weight: 700; color: #111; }
.st-exchange-label { font-size: 13px; color: #888; }
.st-chart-right { text-align: left; }
.st-current-price { font-size: 22px; font-weight: 700; font-family: monospace; }
.st-price-change  { font-size: 13px; font-family: monospace; font-weight: 600; }

/* ── Favorites row ────────────────────────────────────────────── */
.st-fav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.st-fav-msg { font-size: 13px; color: #1a9e65; }

/* ── Status / loading ─────────────────────────────────────────── */
.st-status-msg {
    text-align: center;
    color: #999;
    padding: 2.5rem 1rem;
    font-size: 14px;
    margin: 0;
}

/* ── Canvas wrap ─────────────────────────────────────────────── */
.st-canvas-wrap canvas {
    width: 100% !important;
}

/* ── Section title ────────────────────────────────────────────── */
.st-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: monospace;
    margin-bottom: 10px;
}

/* ── History table ────────────────────────────────────────────── */
.st-table-wrap { overflow-x: auto; }
.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: monospace;
}
.st-table thead tr { border-bottom: 1px solid #eee; }
.st-table th {
    color: #aaa;
    font-weight: 400;
    text-align: right;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.st-table td {
    padding: 8px 10px;
    color: #222;
    border-bottom: 1px solid #f0f0f0;
}
.st-table tr:last-child td { border-bottom: none; }
.st-table tr:hover td { background: #fafafa; }

/* ── Favorites chip list ─────────────────────────────────────── */
.st-favlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: .5rem;
}
.st-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 30px;
    border: 1.5px solid #ddd;
    background: #fff;
    font-size: 13px;
    font-family: monospace;
    font-weight: 600;
    cursor: pointer;
    color: #333;
    transition: all .15s;
}
.st-fav-chip:hover { border-color: #378ADD; color: #378ADD; background: #eaf3fb; }
.st-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #eee;
    color: #888;
    font-size: 13px;
    line-height: 1;
    transition: background .15s;
}
.st-chip-remove:hover { background: #e24b4a; color: #fff; }

/* ── Empty state ─────────────────────────────────────────────── */
.st-empty-favorites {
    color: #aaa;
    font-size: 14px;
    padding: .5rem 0;
}

/* ── Profile tab wrapper ─────────────────────────────────────── */
.st-profile-tab    { padding: 1.5rem 0; }
.st-profile-intro  { font-size: 14px; color: #666; margin-bottom: .8rem; }
.st-profile-chips  { margin-bottom: 1.2rem; }
.st-profile-tracker { margin-top: 1.2rem; }

/* ── Login notice ────────────────────────────────────────────── */
.st-login-notice {
    background: #fff8e1;
    border: 1px solid #f0a500;
    border-radius: 8px;
    padding: .8rem 1rem;
    color: #7a5800;
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .st-topbar { flex-direction: column; align-items: stretch; }
    .st-search  { flex-direction: column; }
    .st-metrics { grid-template-columns: repeat(3, 1fr); }
    .st-chart-header { flex-direction: column; }
    .st-chart-right { text-align: right; }
}