/* ==============================================
   GWS Watchlists - AzimutSuite CI Design
   ============================================== */

/* -- CSS Variables ----------------------------- */
:root {
    --gws-bg: #f8f9fa;
    --gws-card: #ffffff;
    --gws-header-dark: #2C3E50;
    --gws-header-mid: #1a2836;
    --gws-accent: #2C3E50;
    --gws-accent-hover: #1a2836;
    --gws-positive: #10B981;
    --gws-positive-bg: rgba(16, 185, 129, 0.08);
    --gws-negative: #EF4444;
    --gws-negative-bg: rgba(239, 68, 68, 0.08);
    --gws-text: #1e293b;
    --gws-text-muted: #64748b;
    --gws-border: #e2e8f0;
    --gws-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --gws-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
    --gws-radius: 10px;
    --gws-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Header Bar -------------------------------- */
.gws-nav-bar {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--gws-accent);
    border-radius: var(--gws-radius);
    padding: 0.4rem 0.5rem 0.4rem 0.4rem;
    margin-bottom: 1.25rem;
}
.gws-brand-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.gws-nav-right {
    display: flex; align-items: center; gap: 0.6rem;
}

/* -- Buttons ----------------------------------- */
.gws-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border: none; border-radius: 8px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all var(--gws-transition);
}
.gws-btn-text { display: inline; }

.gws-btn-primary { background: var(--gws-accent); color: white; }
.gws-btn-primary:hover { background: var(--gws-accent-hover); }

.gws-btn-outline {
    background: transparent; color: var(--gws-accent);
    border: 1.5px solid var(--gws-accent);
}
.gws-btn-outline:hover { background: rgba(44, 62, 80, 0.06); }
.gws-btn-outline.refreshing { pointer-events: none; opacity: 0.6; }
.gws-btn-outline.refreshing i { animation: gws-spin 1s linear infinite; }

.gws-btn-danger {
    background: transparent; color: var(--gws-negative);
    padding: 0.35rem 0.5rem; border: none; border-radius: 6px;
    cursor: pointer; transition: all var(--gws-transition);
}
.gws-btn-danger:hover { background: var(--gws-negative-bg); }

@keyframes gws-spin { to { transform: rotate(360deg); } }

/* -- Main Section Tabs (top-level) ------------- */
.gws-main-tabs {
    display: flex; gap: 0.3rem; flex: 1;
}

.gws-main-tab {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1;
    padding: 0.35rem 0.25rem;
    background: transparent;
    color: rgba(255,255,255,0.65);
    border: 0.5px solid transparent;
    border-radius: 5px;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: all var(--gws-transition);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.gws-main-tab i { display: none; }
.gws-main-tab:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
}
.gws-main-tab.active {
    background: #fff; color: var(--gws-accent);
    border-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.gws-main-tab.active i { opacity: 1; }

/* -- Section Containers ----------------------- */
.gws-section { min-height: 300px; }

/* -- Placeholder (Coming Soon) ---------------- */
.gws-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 5rem 2rem; text-align: center;
    color: var(--gws-text-muted);
}
.gws-placeholder i { opacity: 0.2; margin-bottom: 1rem; }
.gws-placeholder h5 { font-weight: 700; color: var(--gws-accent); margin-bottom: 0.5rem; }
.gws-placeholder p { font-size: 0.9rem; }

/* -- Tab Bar (watchlist sub-tabs) -------------- */
/* Row layout: [Equity|FixedIncome] ... [search] ... [Manage].
   The search fills the empty middle space (the Manage button is pushed
   to the far right by margin-left:auto on .gws-tab-manage). This frees
   the region row below, which was overcrowded. */
.gws-tab-bar {
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.75rem 1rem;
    flex-wrap: wrap;
}
.gws-tabs { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Search promoted to the tab row. Grows to fill the gap between the
   tabs and Manage; on narrow widths it wraps to its own full-width row
   (flex-basis large enough to force the wrap before it gets cramped). */
.gws-search-top {
    flex: 1 1 280px;
    min-width: 220px;
    max-width: none;
    order: 0;
}

.gws-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.5rem; background: var(--gws-card);
    color: var(--gws-accent); border: 1.5px solid var(--gws-border);
    border-radius: var(--gws-radius); font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: all var(--gws-transition); position: relative;
}
.gws-tab:hover { border-color: var(--gws-accent); color: var(--gws-accent); }
.gws-tab.active {
    background: var(--gws-accent); color: white;
    border-color: var(--gws-accent);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.25);
}

.gws-tab-badge {
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: 10px;
    min-width: 20px; text-align: center; display: none;
}
.gws-tab:not(.active) .gws-tab-badge {
    background: rgba(44, 62, 80, 0.1); display: none;
}
.gws-tab.active .gws-tab-badge {
    display: inline-block; background: rgba(255,255,255,0.25);
}
.gws-tab-manage { margin-left: auto; border-style: dashed; }
.gws-tab-manage.active { border-style: solid; }

/* -- Region/currency selector + Toolbar -------- */
/* The two groups (region selector + tools) sit on one row on wide
   screens; on smaller desktops the tools group wraps as a UNIT to a
   second row (flex-basis on .gws-toolbar-right) instead of breaking
   apart mid-group, which was the "ugly on smaller screens" problem. */
.gws-regions-toolbar {
    display: flex; align-items: center;
    gap: 0.75rem 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}

/* Group label for the segmented control — "Region" on equities,
   "Currency" on fixed income (set in renderRegions). Small uppercase
   eyebrow per the design guide so the FI EUR/USD/MENA set reads
   clearly instead of looking like an arbitrary pill mix. */
.gws-regions-label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--gws-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Region/currency pills as a single segmented control — one deliberate
   unit with a hairline frame instead of separate floating chips
   (design guide: clean card, hairline borders, no decorative
   gradients). Same component for Equity (All/US/Europe/MENA) and Fixed
   Income (All/EUR/USD/MENA). */
.gws-regions {
    display: inline-flex; gap: 0.25rem; flex-wrap: wrap;
    background: var(--gws-card);
    border: 1px solid var(--gws-border);
    border-radius: 12px;
    padding: 0.25rem;
    box-shadow: var(--gws-shadow);
}

.gws-region {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem; background: transparent;
    color: var(--gws-text-muted); border: 1px solid transparent;
    border-radius: 8px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: all var(--gws-transition);
    white-space: nowrap;
}
.gws-region i { font-size: 0.78rem; opacity: 0.85; }
.gws-region:hover {
    color: var(--gws-accent); background: rgba(44, 62, 80, 0.06);
}
.gws-region.active {
    background: var(--gws-accent); color: #fff;
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.25);
}
.gws-region.active i { opacity: 1; }
/* "All" is just the default member of the segmented control now — no
   decorative gradient (design guide §1). Uniform with the other pills;
   the navy active state is the only emphasis. */
.gws-region-all { background: transparent; }
.gws-region-all.active { background: var(--gws-accent); }

.gws-toolbar-right {
    display: flex; align-items: center; gap: 0.6rem;
    flex: 1 1 460px; justify-content: flex-end;
    min-width: 0;
}

/* -- Search (larger + more prominent) --------- */
.gws-search {
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 560px;
}
.gws-search i {
    position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%); color: #94a3b8; font-size: 0.92rem;
    pointer-events: none;
}
.gws-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 44px;
    border: 1.5px solid var(--gws-border);
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--gws-text);
    background: var(--gws-card);
    transition: all var(--gws-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.gws-search-input::placeholder { color: #94a3b8; }
.gws-search-input:focus {
    outline: none; border-color: var(--gws-accent);
    box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.08), 0 2px 8px rgba(0,0,0,0.04);
}

/* -- Filter toggle button ---------------------- */
.gws-filter-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.65rem 1rem;
    background: var(--gws-card);
    color: var(--gws-text);
    border: 1.5px solid var(--gws-border);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--gws-transition);
    white-space: nowrap;
}
.gws-filter-toggle:hover {
    border-color: var(--gws-accent);
    background: rgba(44, 62, 80, 0.04);
}
.gws-filter-toggle.active {
    background: var(--gws-accent);
    color: white;
    border-color: var(--gws-accent);
}
.gws-filter-toggle i { font-size: 0.82rem; }
.gws-filter-count {
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

.gws-count {
    display: flex; align-items: center; gap: 0.4rem;
    white-space: nowrap;
}
.gws-count-badge {
    background: var(--gws-accent); color: white;
    font-size: 0.78rem; font-weight: 700;
    padding: 0.25rem 0.65rem; border-radius: 10px;
    min-width: 32px; text-align: center;
}
.gws-count-label { font-size: 0.78rem; color: var(--gws-text-muted); }

/* -- As-of timestamp --------------------------- */
/* Quiet metadata, not a boxed control — the dashed box competed with the
   real buttons for attention (design guide: hairline/clean, reserve
   emphasis for actions). Plain muted text + a mono timestamp. */
.gws-asof {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.25rem;
    font-size: 0.73rem;
    color: var(--gws-text-muted);
    white-space: nowrap;
}
.gws-asof i { color: #94a3b8; font-size: 0.72rem; }
.gws-asof strong {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--gws-text);
    font-weight: 600;
}

/* -- Advanced Filters Panel -------------------- */
.gws-filters-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem 1rem;
    padding: 1rem 1.15rem;
    background: #f8fafc;
    border: 1px solid var(--gws-border);
    border-radius: 10px;
    margin-bottom: 1rem;
    animation: gws-filters-slide 0.2s ease-out;
}
@keyframes gws-filters-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Variant wrappers are transparent to the grid — their children become
   direct grid items, same as before the equity/bond split. */
.gws-filters-equity,
.gws-filters-bond {
    display: contents;
}

.gws-filter-group {
    display: flex; flex-direction: column; gap: 0.3rem;
}

.gws-filter-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--gws-text-muted);
    margin: 0;
}

.gws-filter-range {
    display: flex; align-items: center; gap: 0.35rem;
}

.gws-filter-input {
    flex: 1; min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--gws-border);
    border-radius: 7px;
    font-size: 0.82rem;
    background: white;
    color: var(--gws-text);
    transition: all var(--gws-transition);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.gws-filter-input:focus {
    outline: none;
    border-color: var(--gws-accent);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.08);
}
.gws-filter-dash { color: var(--gws-text-muted); font-weight: 700; }

.gws-filter-select {
    padding: 0.5rem 0.7rem;
    border: 1.5px solid var(--gws-border);
    border-radius: 7px;
    font-size: 0.82rem;
    background: white;
    color: var(--gws-text);
    cursor: pointer;
    transition: all var(--gws-transition);
}
.gws-filter-select:focus {
    outline: none;
    border-color: var(--gws-accent);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.08);
}

.gws-filter-actions {
    justify-content: flex-end;
    flex-direction: row;
    align-items: flex-end;
    grid-column: 1 / -1;
}

/* -- Fixed-width value for alignment with badges */
.gws-val-fixed {
    display: inline-block;
    min-width: 5.5em;
    text-align: left;
}

/* -- House view pill on sector cells ----------- */
.gws-hv-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.35rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
    border: 1px solid transparent;
}
.gws-hv-ow {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}
.gws-hv-n {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.gws-hv-uw {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* -- Insight link icon button on ticker cell --- */
.gws-insight-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    margin-left: 0.4rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #b45309;
    border-radius: 50%;
    font-size: 0.7rem;
    cursor: pointer;
    vertical-align: middle;
    transition: all var(--gws-transition);
}
.gws-insight-link:hover {
    background: #fcd34d;
    color: #78350f;
    transform: scale(1.1);
}

/* Detail panel insight link button */
.gws-detail-insight-link {
    margin-bottom: 1rem;
}
.gws-detail-insight-link .gws-btn {
    width: 100%;
    justify-content: center;
}

/* ── Performance Analytics — stats grid + calendar year bars ── */
.gws-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.65rem 0.85rem;
    margin-bottom: 1.1rem;
}
.gws-stat-item {
    background: #f8fafc;
    border: 1px solid var(--gws-border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}
.gws-stat-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--gws-text-muted);
    margin-bottom: 0.25rem;
}
.gws-stat-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--gws-text);
    letter-spacing: -0.01em;
}
.gws-stat-pos { color: #047857; }
.gws-stat-neg { color: #b91c1c; }
.gws-stat-neutral { color: var(--gws-text); }
.gws-stat-muted { color: #cbd5e1; }

.gws-calyear-wrap {
    border-top: 1px dashed var(--gws-border);
    padding-top: 0.9rem;
}
.gws-calyear-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--gws-text-muted);
    margin-bottom: 0.6rem;
}
.gws-calyear-bars {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.gws-calyear-row {
    display: grid;
    grid-template-columns: 48px 1fr 72px;
    align-items: center;
    gap: 0.65rem;
}
.gws-calyear-year {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gws-text-muted);
    text-align: right;
}
.gws-calyear-track {
    position: relative;
    height: 18px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}
.gws-calyear-bar {
    position: absolute;
    top: 0; bottom: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease-out;
}
.gws-calyear-bar-pos {
    left: 0;
    background: linear-gradient(90deg, #10b981, #34d399);
}
.gws-calyear-bar-neg {
    left: 0;
    background: linear-gradient(90deg, #ef4444, #f87171);
}
.gws-calyear-val {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
}
.gws-calyear-footer {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    color: var(--gws-text-muted);
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ── Bond spread to treasury ────────────────── */
.gws-bond-spread {
    margin-top: 0.85rem;
    padding: 0.7rem 0.9rem;
    background: #f1f5f9;
    border-left: 3px solid var(--gws-accent);
    border-radius: 6px;
}
.gws-bond-spread-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.gws-bond-spread-label {
    font-size: 0.78rem;
    color: var(--gws-text-muted);
    font-weight: 600;
}
.gws-bond-spread-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1rem;
    font-weight: 700;
}
.gws-bond-spread-sub {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--gws-text-muted);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ── Treasury curve mini-chart ──────────────── */
.gws-curve-chart {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.gws-curve-row {
    display: grid;
    grid-template-columns: 48px 1fr 64px;
    align-items: center;
    gap: 0.6rem;
}
.gws-curve-tenor {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gws-text-muted);
    text-align: right;
}
.gws-curve-track {
    position: relative;
    height: 16px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}
.gws-curve-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    border-radius: 4px;
    transition: width 0.25s ease-out;
}
.gws-curve-bar-bond {
    background: linear-gradient(90deg, #fb923c, #f97316);
}
.gws-curve-bond-row .gws-curve-tenor {
    color: #ea580c;
    font-weight: 800;
}
.gws-curve-val {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: right;
}
.gws-curve-footer {
    margin-top: 0.7rem;
    font-size: 0.68rem;
    color: var(--gws-text-muted);
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* -- Sub-category Pills ------------------------ */
.gws-subcats-bar {
    display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.85rem;
}
.gws-subcat {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem; background: var(--gws-card);
    color: var(--gws-text-muted); border: 1px solid var(--gws-border);
    border-radius: 6px; font-size: 0.78rem; font-weight: 500;
    cursor: pointer; transition: all var(--gws-transition);
}
.gws-subcat:hover { border-color: #94a3b8; }
.gws-subcat.active {
    background: var(--gws-accent); color: white;
    border-color: var(--gws-accent); font-weight: 600;
}

.gws-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gws-dot-all { background: #94a3b8; }
.gws-dot-ig  { background: #10B981; }
.gws-dot-hy  { background: #F59E0B; }
.gws-dot-t2  { background: #8b5cf6; }
.gws-dot-hyb { background: #3b82f6; }
.gws-dot-at1 { background: #EF4444; }

/* -- Refresh Progress Bar ---------------------- */
.gws-refresh-bar {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.75rem; padding: 0.5rem 0.75rem;
    background: rgba(44, 62, 80, 0.06); border-radius: 8px;
}
.gws-refresh-progress {
    flex: 1; height: 4px; background: var(--gws-border);
    border-radius: 2px; overflow: hidden;
}
.gws-refresh-fill {
    height: 100%; width: 0%; background: var(--gws-accent);
    border-radius: 2px; transition: width 0.5s ease;
}
.gws-refresh-text {
    font-size: 0.75rem; color: var(--gws-accent);
    font-weight: 600; white-space: nowrap;
}

/* -- Data Table -------------------------------- */
.gws-table-wrapper {
    background: var(--gws-card); border: 1px solid var(--gws-border);
    border-radius: var(--gws-radius); overflow: hidden;
    box-shadow: var(--gws-shadow);
}
.gws-table-scroll { overflow-x: auto; }
.gws-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.gws-table thead th {
    background: var(--gws-accent); color: white;
    font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 0.7rem 0.65rem; border: none;
    white-space: nowrap; cursor: pointer; user-select: none;
    position: sticky; top: 0; z-index: 2; transition: background 0.15s ease;
}
.gws-table thead th:hover { background: var(--gws-accent-hover); }

.gws-table thead th .gws-sort-icon {
    margin-left: 0.3rem; opacity: 0.35; font-size: 0.65rem;
    transition: opacity 0.2s ease;
}
.gws-table thead th.sort-asc .gws-sort-icon,
.gws-table thead th.sort-desc .gws-sort-icon { opacity: 1; }

.gws-table tbody tr {
    cursor: pointer; transition: background 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}
.gws-table tbody tr:nth-child(even) { background: #fafbfc; }
.gws-table tbody tr:hover { background: #eff6ff; }

.gws-table tbody td {
    padding: 0.6rem 0.65rem; vertical-align: middle;
    white-space: nowrap; color: var(--gws-text);
}
.gws-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gws-table .gws-col-ticker { font-weight: 700; color: var(--gws-accent); }
.gws-table .gws-col-name {
    max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.gws-table .gws-col-sector {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}

/* -- Performance Cells ------------------------- */
.gws-perf {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.45rem; border-radius: 4px;
    font-weight: 700; font-size: 0.8rem;
}
.gws-perf-pos { color: var(--gws-positive); background: var(--gws-positive-bg); }
.gws-perf-neg { color: var(--gws-negative); background: var(--gws-negative-bg); }
.gws-perf-zero { color: var(--gws-text-muted); }

/* -- Rating Badges ----------------------------- */
.gws-rating-wrap {
    position: relative; display: inline-block; cursor: pointer;
}
.gws-rating-badge {
    display: inline-block; min-width: 42px; text-align: center;
    padding: 0.2rem 0.45rem; border-radius: 6px;
    font-weight: 700; font-size: 0.76rem; color: white;
}
.gws-rating-legend {
    display: none; position: fixed;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 0.6rem 0.75rem;
    min-width: 170px; z-index: 1100; white-space: nowrap;
    pointer-events: none;
}
.gws-rating-wrap:hover .gws-rating-legend { display: block; }
.gws-rl-title {
    font-size: 0.72rem; color: #475569; margin-bottom: 0.4rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid #f1f5f9;
}
.gws-rl-scale > div {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.18rem 0; font-size: 0.7rem; color: #64748b;
}
.gws-rl-scale > div.gws-rl-active {
    font-weight: 700; color: #1e293b;
}
.gws-rl-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; flex-shrink: 0;
}
.gws-rl-label { flex: 1; }
.gws-rl-score { font-variant-numeric: tabular-nums; min-width: 12px; text-align: right; }
.gws-rl-source {
    font-size: 0.62rem; color: #94a3b8; margin-top: 0.35rem;
    padding-top: 0.3rem; border-top: 1px solid #f1f5f9;
}

/* -- Sub-category Badges in Table -------------- */
.gws-subcat-pill {
    display: inline-block; padding: 0.15rem 0.5rem;
    border-radius: 4px; font-size: 0.68rem;
    font-weight: 700; letter-spacing: 0.04em; color: white;
}
.gws-subcat-pill-ig  { background: #10B981; }
.gws-subcat-pill-hy  { background: #F59E0B; }
.gws-subcat-pill-t2  { background: #8b5cf6; }
.gws-subcat-pill-hyb { background: #3b82f6; }
.gws-subcat-pill-at1 { background: #EF4444; }

/* "Perp" badge in the Maturity column / detail panel — neutral grey to
   distinguish a perpetual bond from a dated one without competing with
   subcategory pills for visual weight. */
.gws-perp-badge {
    display: inline-block; padding: 0.1rem 0.45rem;
    border-radius: 4px; font-size: 0.68rem;
    font-weight: 700; letter-spacing: 0.04em;
    color: #475569; background: #E2E8F0;
}

.gws-bond-rating {
    display: inline-block; padding: 0.15rem 0.4rem;
    border-radius: 4px; font-size: 0.76rem; font-weight: 700;
}

/* -- Loading / Empty States -------------------- */
.gws-loading, .gws-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3.5rem 1rem; color: var(--gws-text-muted);
}
.gws-loading p, .gws-empty p { margin: 0.75rem 0 0.25rem; font-weight: 600; }
.gws-empty i { font-size: 2.5rem; opacity: 0.3; }

.gws-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--gws-border);
    border-top-color: var(--gws-accent);
    border-radius: 50%; animation: gws-spin 0.8s linear infinite;
}

/* -- Detail Slide Panel ------------------------ */
.gws-detail-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px);
    z-index: 1050; opacity: 0; transition: opacity var(--gws-transition);
}
.gws-detail-overlay.show { display: block; opacity: 1; }

.gws-detail-panel {
    /* Anchor at right: 0 and push off-screen with translateX(100%) so the
       hidden state is exactly the panel's own width regardless of viewport.
       The old `right: -500px` was a fixed pixel offset and broke between
       500-768px wide, where the @media rule below bumps the panel to
       width: 100vw — at e.g. 600px viewport the panel was 600px wide but
       only pushed off by 500px, leaving a 100px sliver of the "Details"
       header stuck to the right edge on every page. */
    position: fixed; top: 0; right: 0;
    width: 480px; max-width: 92vw; height: 100vh;
    background: var(--gws-card); z-index: 1051;
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform var(--gws-transition);
    display: flex; flex-direction: column;
}
.gws-detail-panel.show { transform: translateX(0); }

.gws-detail-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem;
    background: var(--gws-accent); color: white;
}
.gws-detail-header-info h5 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.gws-detail-age { font-size: 0.7rem; opacity: 0.7; }

.gws-detail-close {
    background: rgba(255,255,255,0.1); border: none;
    color: white; width: 32px; height: 32px; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.gws-detail-close:hover { background: rgba(255,255,255,0.2); }
.gws-detail-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.gws-detail-section { margin-bottom: 1.25rem; }

.gws-detail-section h6 {
    color: var(--gws-accent); font-weight: 700;
    font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 0.6rem;
    padding-bottom: 0.4rem; border-bottom: 2px solid var(--gws-border);
    display: flex; align-items: center; gap: 0.4rem;
}
.gws-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* -- Estimate Tables (earnings/revenue) ------- */
.gws-est-table {
    width: 100%; border-collapse: collapse; font-size: 0.72rem;
    margin-top: 0.3rem;
}
.gws-est-table th {
    text-align: right; font-weight: 600; color: #475569;
    padding: 0.3rem 0.4rem; border-bottom: 1px solid #e2e8f0;
    font-size: 0.68rem; white-space: nowrap;
}
.gws-est-table th:first-child { text-align: left; }
.gws-est-table td {
    text-align: right; padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #f8fafc; color: #334155;
    font-variant-numeric: tabular-nums;
}
.gws-est-table td:first-child {
    text-align: left; font-weight: 600; color: #64748b;
    font-size: 0.68rem; white-space: nowrap;
}

.gws-detail-item {
    padding: 0.55rem 0.65rem; background: #f8fafc;
    border-radius: 8px; border: 1px solid #f1f5f9;
}
.gws-detail-item .label {
    font-size: 0.68rem; color: var(--gws-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem;
}
.gws-detail-item .value { font-size: 0.9rem; font-weight: 600; color: var(--gws-text); }

.gws-detail-chart-wrap { height: 200px; position: relative; }
.gws-detail-chart-loading {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 200px; color: var(--gws-text-muted); font-size: 0.82rem;
}
.gws-detail-chart-periods {
    display: flex; gap: 0.35rem; margin-bottom: 0.5rem;
}
.gws-detail-period {
    padding: 0.2rem 0.6rem; border: 1px solid var(--gws-border);
    background: white; border-radius: 4px; font-size: 0.72rem;
    font-weight: 600; cursor: pointer; color: var(--gws-text-muted);
    transition: all var(--gws-transition);
}
.gws-detail-period:hover { border-color: var(--gws-accent); color: var(--gws-accent); }
.gws-detail-period.active {
    background: var(--gws-accent); color: white; border-color: var(--gws-accent);
}

.gws-detail-chart-placeholder {
    padding: 2rem 1rem; text-align: center;
    background: #f8fafc; border-radius: 8px;
    border: 1px dashed var(--gws-border); color: var(--gws-text-muted);
}
.gws-detail-chart-placeholder i {
    font-size: 1.5rem; margin-bottom: 0.5rem; display: block;
}

/* ── Detail panel: warning banner + enrichment sections ── */
.gws-detail-warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 1rem;
}
.gws-detail-warning i { margin-right: 0.4rem; }

.gws-detail-asof {
    text-align: center; font-size: 0.7rem; color: #94a3b8;
    padding: 0.75rem 0 0.5rem; margin-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.gws-exec-list {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.gws-exec-row {
    display: flex; justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.82rem;
}
.gws-exec-name { font-weight: 600; color: var(--gws-text); }
.gws-exec-title { color: var(--gws-text-muted); text-align: right; }

.gws-detail-description {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--gws-text);
    margin: 0 0 0.5rem;
}
.gws-detail-website {
    margin: 0;
    font-size: 0.78rem;
}
.gws-detail-website a {
    color: var(--gws-accent);
    text-decoration: none;
    word-break: break-all;
}
.gws-detail-website a:hover { text-decoration: underline; }

/* -- Toast Notifications ----------------------- */
.gws-toast-container {
    position: fixed; top: 1rem; right: 1rem;
    z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem;
}
.gws-toast {
    padding: 0.75rem 1.25rem; border-radius: var(--gws-radius);
    font-size: 0.82rem; font-weight: 600; color: white;
    box-shadow: var(--gws-shadow-lg); animation: gws-toast-in 0.3s ease;
    display: flex; align-items: center; gap: 0.5rem;
}
.gws-toast-success { background: var(--gws-positive); }
.gws-toast-error { background: var(--gws-negative); }
.gws-toast-info { background: var(--gws-accent); }
.gws-toast.gws-toast-out { animation: gws-toast-out 0.3s ease forwards; }

@keyframes gws-toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes gws-toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* -- Responsive -------------------------------- */
/* Tablet (incl. iPad portrait): denser data tables + a frozen first
   column so the 10–12 column watchlist needs less sideways scrolling and
   the instrument name/ticker stays visible while scrolling across. */
@media (max-width: 900px) {
    .gws-table { font-size: 0.76rem; }
    .gws-table thead th { padding: 0.55rem 0.45rem; }
    .gws-table tbody td { padding: 0.45rem 0.45rem; }
    .gws-table tbody td:first-child,
    .gws-table thead th:first-child {
        position: sticky; left: 0; z-index: 1;
    }
    /* Opaque backgrounds so scrolled cells don't bleed through the frozen
       column; mirror the row striping + hover so it looks continuous. */
    .gws-table tbody td:first-child { background: var(--gws-card); }
    .gws-table tbody tr:nth-child(even) td:first-child { background: #fafbfc; }
    .gws-table tbody tr:hover td:first-child { background: #eff6ff; }
    .gws-table thead th:first-child { background: var(--gws-accent); z-index: 3; }

    /* Top tab bar: hide the decorative brand logo (it was clipping off the
       right edge on iPad portrait, which sits above the old 768 break) and
       make the tabs a scrollable icon+label strip so long labels never
       clip or squeeze the bar. */
    .gws-brand-logo { display: none; }
    /* Wrap the 6 tabs onto multiple rows instead of horizontal-scrolling
       (dev feedback: the sideways scroll felt wrong). flex-basis ~30% =>
       3 per row on iPad portrait (2 tidy rows); narrower phones fall to
       2 per row naturally. All tabs stay visible, no scroll gesture. */
    .gws-main-tabs { gap: 0.3rem; flex-wrap: wrap; }
    .gws-main-tab {
        flex: 1 1 30%; padding: 0.45rem 0.7rem; font-size: 0.78rem; gap: 0.4rem;
    }
    /* Re-enable the tab icons (hidden globally for the desktop text tabs). */
    .gws-main-tab i { display: inline-block; font-size: 0.8rem; }

    /* Watchlist region row: stack the region selector + filter/pdf/count
       so they don't overflow on tablet widths. (Search now lives on the
       tab row above, where it wraps to its own line via flex-basis.) */
    .gws-regions-toolbar { flex-direction: column; align-items: stretch; }
    .gws-toolbar-right { flex-wrap: wrap; }
    .gws-search-top { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 768px) {
    /* Phone-only tightening, layered on top of the <=900 rules above. */
    .gws-nav-bar { gap: 0.4rem; padding: 0.35rem; }
    .gws-btn-text { display: none; }
    .gws-main-tab { padding: 0.4rem 0.55rem; font-size: 0.74rem; }
    /* Watchlist sub-tabs row: tabs take their natural width on the left,
       Manage stays pinned right (margin-left:auto), search drops to a
       full-width second line. */
    .gws-tabs { flex: 1 1 auto; }
    .gws-tab {
        flex: 1; justify-content: center;
        padding: 0.5rem 0.5rem; font-size: 0.82rem;
    }
    .gws-tab span:not(.gws-tab-badge) { display: none; }
    .gws-table-wrapper { border-radius: 0; margin: 0 -0.75rem; }
    .gws-detail-panel { width: 100vw; max-width: 100vw; }
    .gws-subcats-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; }
}

/* -- Shared "hover an item → reveal eye → click eye opens PDF preview" ----
   Drop this class on any clickable parent that:
     1. has position: relative
     2. should download (or otherwise act) when clicked anywhere except the eye
   The eye opens the shared GWS PDF preview modal via the
   `[data-gws-pdf-preview]` global handler in gws.js.

   Mirrors the Materials module conventions (general.html .preview-icon +
   funds.html .preview-eye): always-visible-ish on desktop hover, hidden on
   touch devices via @media (hover: none).
   ------------------------------------------------------------------------- */
.gws-pdf-preview-eye {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gws-accent, #2C3E50);
    color: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.6rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 6;
}
.gws-pdf-preview-eye i {
    font-size: 0.62rem;
    line-height: 1;
    pointer-events: none;
}
.gws-pdf-preview-eye:hover,
.gws-pdf-preview-eye:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9),
                0 2px 6px rgba(0, 0, 0, 0.25);
    outline: none;
}
.gws-pdf-preview-host { position: relative; }
.gws-pdf-preview-host:hover .gws-pdf-preview-eye,
.gws-pdf-preview-host:focus-within .gws-pdf-preview-eye {
    opacity: 1;
    pointer-events: auto;
}
@media (hover: none) {
    /* Touch devices: skip the eye entirely (matches Materials behaviour).
       The parent stays tappable for the download action. */
    .gws-pdf-preview-eye { display: none !important; }
}

/* -- Shared PDF Preview Modal ------------------- */
.gws-mat-modal {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.gws-mat-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(3px);
}
.gws-mat-modal-box {
    position: relative; background: #fff; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    width: min(95vw, 1000px); height: min(92vh, 900px);
    display: flex; flex-direction: column; overflow: hidden;
}
.gws-mat-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem; border-bottom: 1px solid var(--gws-border);
    background: #f8fafc;
}
.gws-mat-modal-head h6 {
    margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--gws-accent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 600px;
}
.gws-mat-modal-actions { display: flex; gap: 0.5rem; align-items: center; }
.gws-mat-modal-body { flex: 1; background: #f1f5f9; overflow: hidden; }
.gws-mat-modal-body iframe { width: 100%; height: 100%; border: none; background: #fff; }
body.gws-mat-modal-open { overflow: hidden; }
@media (max-width: 768px) {
    .gws-mat-modal { padding: 0.5rem; }
    .gws-mat-modal-box { width: 100%; height: 100%; border-radius: 0; }
}

/* ── Shared image context menu (see gws_image_context_menu.js) ──
   Used by both the Stock Insights builder and the Market View editor.
   Fixed positioning + high z-index so it sits above drawers/modals. */
.gws-imgmenu {
    position: fixed;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(15, 23, 42, 0.08);
    padding: 4px;
    z-index: 10000;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gws-imgmenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 7px 12px;
    font: inherit;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}
.gws-imgmenu-item:hover:not(:disabled) {
    background: #f1f5f9;
    color: #0f172a;
}
.gws-imgmenu-item:disabled {
    color: #cbd5e1;
    cursor: default;
}
.gws-imgmenu-item i {
    color: #94a3b8;
    width: 14px;
    text-align: center;
    font-size: 0.8rem;
}
.gws-imgmenu-item.danger { color: #dc2626; }
.gws-imgmenu-item.danger i { color: #dc2626; }
.gws-imgmenu-item.danger:hover:not(:disabled) {
    background: #fee2e2;
    color: #b91c1c;
}
.gws-imgmenu-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 2px;
}

/* ============================================================
   Daily disclaimer modal
   Shown once per day on first GWS visit. State in localStorage.
   ============================================================ */

.gws-disclaimer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: gwsDisclaimerFadeIn 0.28s ease-out;
}
.gws-disclaimer-overlay.is-open {
    display: flex;
}

@keyframes gwsDisclaimerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes gwsDisclaimerSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gws-disclaimer-card {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow:
        0 24px 60px -12px rgba(15, 23, 42, 0.45),
        0 4px 12px rgba(15, 23, 42, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 40px 44px 32px;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1e293b;
    animation: gwsDisclaimerSlideIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.gws-disclaimer-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}
.gws-disclaimer-brand img {
    max-height: 44px;
    width: auto;
    opacity: 0.92;
}

.gws-disclaimer-title {
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2C3E50;
    text-align: center;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}

.gws-disclaimer-body {
    font-size: 0.92rem;
    line-height: 1.62;
    color: #475569;
}
.gws-disclaimer-body p {
    margin: 0 0 14px;
}
.gws-disclaimer-body p:last-child {
    margin-bottom: 0;
}
.gws-disclaimer-body strong {
    color: #1e293b;
    font-weight: 600;
}

.gws-disclaimer-cta {
    display: block;
    width: 100%;
    margin-top: 28px;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #34495e 0%, #2C3E50 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 4px 12px -2px rgba(44, 62, 80, 0.4);
}
.gws-disclaimer-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(44, 62, 80, 0.5);
}
.gws-disclaimer-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px -1px rgba(44, 62, 80, 0.35);
}

/* Lock background scroll while modal is open. */
body.gws-disclaimer-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .gws-disclaimer-card {
        padding: 28px 22px 22px;
        border-radius: 14px;
    }
    .gws-disclaimer-title { font-size: 1.2rem; }
    .gws-disclaimer-body  { font-size: 0.86rem; }
}