/* ═══════════════════════════════════════════════════════════════════════════
   Go-To Date Calendar — Compact Professional Trading Design

   Date states (full-cell styling):
     hasData   — soft green background + border
     noData    — soft red background + border
     future    — gray, faded, disabled (unavailable)
     today     — blue accent ring (additive overlay)
     selected  — solid blue, white text (overrides everything)
     outside   — hidden (empty padding cells)
     inRange   — subtle blue background between range start/end
     rangeStart / rangeEnd — blue endpoints for range selection

   Theme: html[data-theme="lig:root {
    /* Card */
    --gtc-card-bg: var(--ui-panel, #1e222d);
    --gtc-card-border: var(--ui-panel-border, rgba(255, 255, 255, 0.06));
    --gtc-card-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);

    /* Text */
    --gtc-text: var(--ui-fg, #d1d4dc);
    --gtc-text-muted: var(--ui-muted, #787b86);
    --gtc-text-strong: var(--ui-fg, #ffffff);

    /* Data available (green) */
    --gtc-data-bg: rgba(38, 166, 154, 0.12);
    --gtc-data-bg-hover: rgba(38, 166, 154, 0.22);
    --gtc-data-border: rgba(38, 166, 154, 0.35);
    --gtc-data-border-hover: rgba(38, 166, 154, 0.55);
    --gtc-data-text: var(--ui-fg, #e0e3e8);

    /* No market data (gray) */
    --gtc-nodata-bg: var(--ui-hover, rgba(128, 128, 128, 0.10));
    --gtc-nodata-bg-hover: var(--ui-button-hover, rgba(128, 128, 128, 0.18));
    --gtc-nodata-border: var(--ui-border, rgba(128, 128, 128, 0.28));
    --gtc-nodata-border-hover: var(--ui-panel-border, rgba(128, 128, 128, 0.40));
    --gtc-nodata-text: var(--ui-muted, #a1a5ad);
    --gtc-unknown-bg: var(--ui-hover, rgba(128, 128, 128, 0.10));
    --gtc-unknown-bg-hover: var(--ui-button-hover, rgba(128, 128, 128, 0.18));
    --gtc-unknown-border: var(--ui-border, rgba(128, 128, 128, 0.28));
    --gtc-unknown-border-hover: var(--ui-panel-border, rgba(128, 128, 128, 0.40));
    --gtc-unknown-text: var(--ui-muted, #a1a5ad);

    /* Unavailable (gray) */
    --gtc-unavail-text: var(--ui-muted, #4a4d56);
    --gtc-unavail-opacity: 0.4;

    /* Selected (blue) */
    --gtc-selected-bg: var(--ui-primary, #2962ff);
    --gtc-selected-text: #ffffff;
    --gtc-selected-shadow: 0 2px 12px rgba(41, 98, 255, 0.40);

    /* Today accent ring */
    --gtc-today-accent: var(--ui-primary, #2962ff);

    /* Range selection */
    --gtc-range-bg: rgba(41, 98, 255, 0.12);
    --gtc-range-border: rgba(41, 98, 255, 0.25);
    --gtc-range-text: var(--ui-fg, #d1d4dc);

    /* Surfaces */
    --gtc-surface: var(--ui-hover, rgba(255, 255, 255, 0.03));
    --gtc-surface-hover: var(--ui-button-hover, rgba(255, 255, 255, 0.06));
    --gtc-divider: var(--ui-panel-border, rgba(255, 255, 255, 0.06));
    --gtc-input-bg: var(--ui-bg, rgba(255, 255, 255, 0.04));
    --gtc-input-border: var(--ui-border, rgba(255, 255, 255, 0.10));
    --gtc-input-border-focus: var(--ui-primary, rgba(255, 255, 255, 0.25));

    /* Button */
    --gtc-btn-primary: var(--ui-primary, #2962ff);
    --gtc-btn-primary-hover: var(--ui-primary, #2962ff);
    --gtc-btn-ghost-border: var(--ui-border, rgba(255, 255, 255, 0.12));
    --gtc-btn-ghost-hover: var(--ui-hover, rgba(255, 255, 255, 0.06));
}ange-bg: rgba(41, 98, 255, 0.08);
    --gtc-range-border: rgba(41, 98, 255, 0.20);
    --gtc-range-text: #131722;
    --gtc-surface: rgba(0, 0, 0, 0.02);
    --gtc-surface-hover: rgba(0, 0, 0, 0.04);
    --gtc-divider: rgba(0, 0, 0, 0.08);
    --gtc-input-bg: rgba(0, 0, 0, 0.03);
    --gtc-input-border: rgba(0, 0, 0, 0.12);
    --gtc-input-border-focus: rgba(0, 0, 0, 0.25);
    --gtc-btn-primary: #2962ff;
    --gtc-btn-primary-hover: #1e53e5;
    --gtc-btn-ghost-border: rgba(0, 0, 0, 0.12);
    --gtc-btn-ghost-hover: rgba(0, 0, 0, 0.05);
}


/* ═══════════════════════════════════════════════════════════
   OVERLAY
   ═══════════════════════════════════════════════════════════ */
.gtc-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: gtc-fadeIn 0.18s ease-out;
}

@keyframes gtc-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   CARD — Compact
   ═══════════════════════════════════════════════════════════ */
.gtc-card {
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--gtc-card-bg);
    color: var(--gtc-text);
    border-radius: 14px;
    box-shadow: var(--gtc-card-shadow);
    width: 360px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    border: 1px solid var(--gtc-card-border);
    animation: gtc-cardIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gtc-cardIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/* ═══════════════════════════════════════════════════════════
   HEADER — Compact
   ═══════════════════════════════════════════════════════════ */
.gtc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 0;
}

.gtc-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gtc-text);
    letter-spacing: -0.01em;
}

.gtc-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--gtc-text-muted);
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.gtc-close-btn:hover {
    color: var(--gtc-text);
    background: var(--gtc-surface-hover);
}


/* ═══════════════════════════════════════════════════════════
   TABS — Compact
   ═══════════════════════════════════════════════════════════ */
.gtc-tabs {
    display: flex;
    gap: 0;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--gtc-divider);
}

.gtc-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 14px 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--gtc-text-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.gtc-tab:hover {
    color: var(--gtc-text);
}

.gtc-tab--active {
    border-bottom-color: var(--gtc-selected-bg);
    color: var(--gtc-text);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   DATE TAB CONTENT — Compact padding
   ═══════════════════════════════════════════════════════════ */
#gotoDateContent,
#gotoRangeContent {
    padding: 12px 16px 4px;
}


/* ═══════════════════════════════════════════════════════════
   INPUT ROWS (kept for time input)
   ═══════════════════════════════════════════════════════════ */
.gtc-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.gtc-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--gtc-input-border);
    border-radius: 7px;
    padding: 6px 10px;
    gap: 6px;
    background: var(--gtc-input-bg);
    transition: border-color 0.15s ease;
}

.gtc-input-wrap:focus-within {
    border-color: var(--gtc-input-border-focus);
}

.gtc-input {
    border: none;
    outline: none;
    font-size: 12px;
    width: 100%;
    color: var(--gtc-text);
    background: transparent;
    font-family: inherit;
}

.gtc-input::placeholder {
    color: var(--gtc-text-muted);
}

.gtc-input-icon {
    color: var(--gtc-text-muted);
    flex-shrink: 0;
}

/* Time row — shown/hidden by JS based on timeframe */
.gtc-time-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    margin-bottom: 2px;
}


/* ═══════════════════════════════════════════════════════════
   MONTH NAVIGATION — Compact
   ═══════════════════════════════════════════════════════════ */
.gtc-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gtc-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--gtc-text-muted);
    padding: 2px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
    font-family: inherit;
}

.gtc-nav-btn:hover {
    color: var(--gtc-text);
    background: var(--gtc-surface-hover);
}

.gtc-month-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gtc-text);
    letter-spacing: -0.01em;
}


/* ═══════════════════════════════════════════════════════════
   CALENDAR GRID — Compact cells
   ═══════════════════════════════════════════════════════════ */
.gtc-grid {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    gap: 3px;
    justify-content: center;
}

/* ── Day-of-week headers ────────────────────────────────── */
.gtc-dow {
    font-size: 10px;
    font-weight: 600;
    color: var(--gtc-text-muted);
    padding: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}


/* ═══════════════════════════════════════════════════════════
   DAY CELLS — Base
   ═══════════════════════════════════════════════════════════ */
.gtc-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--gtc-text);
    transition: background 0.12s ease,
                border-color 0.12s ease,
                color 0.12s ease,
                box-shadow 0.12s ease,
                opacity 0.12s ease,
                transform 0.10s ease;
}

.gtc-day:focus {
    outline: 2px solid rgba(41, 98, 255, 0.6);
    outline-offset: 1px;
}

.gtc-day:active:not(.gtc-day--future):not(.gtc-day--outside) {
    transform: scale(0.94);
}


/* ═══════════════════════════════════════════════════════════
   STATE: hasData — Data Available (green)
   ═══════════════════════════════════════════════════════════ */
.gtc-day--hasData {
    background: var(--gtc-data-bg);
    border-color: var(--gtc-data-border);
    color: var(--gtc-data-text);
}

.gtc-day--hasData:hover {
    background: var(--gtc-data-bg-hover);
    border-color: var(--gtc-data-border-hover);
}


/* ═══════════════════════════════════════════════════════════
   STATE: noData — No Market Data (red)
   ═══════════════════════════════════════════════════════════ */
.gtc-day--noData {
    background: var(--gtc-nodata-bg);
    border-color: var(--gtc-nodata-border);
    color: var(--gtc-nodata-text);
}

.gtc-day--noData:hover {
    background: var(--gtc-nodata-bg-hover);
    border-color: var(--gtc-nodata-border-hover);
}

.gtc-day--unknown {
    background: var(--gtc-unknown-bg);
    border-color: var(--gtc-unknown-border);
    color: var(--gtc-unknown-text);
}

.gtc-day--unknown:hover {
    background: var(--gtc-unknown-bg-hover);
    border-color: var(--gtc-unknown-border-hover);
}


/* ═══════════════════════════════════════════════════════════
   STATE: future — Unavailable (gray, disabled)
   ═══════════════════════════════════════════════════════════ */
.gtc-day--future {
    color: var(--gtc-unavail-text);
    opacity: var(--gtc-unavail-opacity);
    cursor: not-allowed;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   STATE: today — Accent Ring (additive, overlays any bg)
   ═══════════════════════════════════════════════════════════ */
.gtc-day--today:not(.gtc-day--selected):not(.gtc-day--rangeStart):not(.gtc-day--rangeEnd)::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--gtc-today-accent);
    pointer-events: none;
    animation: gtc-todayPulse 2.5s ease-in-out infinite;
}

@keyframes gtc-todayPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Today with data: ensure the ring is visible over green bg */
.gtc-day--today.gtc-day--hasData:not(.gtc-day--selected):not(.gtc-day--rangeStart):not(.gtc-day--rangeEnd)::after {
    border-color: var(--gtc-today-accent);
}

/* Today with no data: ring over red bg */
.gtc-day--today.gtc-day--noData:not(.gtc-day--selected):not(.gtc-day--rangeStart):not(.gtc-day--rangeEnd)::after {
    border-color: var(--gtc-today-accent);
}

/* Today without any data state (fallback) */
.gtc-day--today:not(.gtc-day--hasData):not(.gtc-day--noData):not(.gtc-day--selected):not(.gtc-day--rangeStart):not(.gtc-day--rangeEnd) {
    font-weight: 700;
    border-color: rgba(41, 98, 255, 0.25);
    background: rgba(41, 98, 255, 0.06);
}


/* ═══════════════════════════════════════════════════════════
   STATE: selected — Solid Blue (overrides everything)
   Used in Date tab single selection
   ═══════════════════════════════════════════════════════════ */
.gtc-day--selected {
    background: var(--gtc-selected-bg) !important;
    color: var(--gtc-selected-text) !important;
    border-color: var(--gtc-selected-bg) !important;
    font-weight: 700;
    box-shadow: var(--gtc-selected-shadow);
    opacity: 1 !important;
}

.gtc-day--selected::after {
    display: none !important;
}

.gtc-day--selected:hover {
    background: var(--gtc-btn-primary-hover) !important;
    border-color: var(--gtc-btn-primary-hover) !important;
}


/* ═══════════════════════════════════════════════════════════
   STATE: inRange — Blue highlight between range endpoints
   ═══════════════════════════════════════════════════════════ */
.gtc-day--inRange {
    background: var(--gtc-range-bg);
    border-color: var(--gtc-range-border);
    color: var(--gtc-range-text);
    border-radius: 4px;
}

.gtc-day--inRange::after {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   STATE: rangeStart / rangeEnd — Blue endpoints
   ═══════════════════════════════════════════════════════════ */
.gtc-day--rangeStart,
.gtc-day--rangeEnd {
    background: var(--gtc-selected-bg) !important;
    color: var(--gtc-selected-text) !important;
    border-color: var(--gtc-selected-bg) !important;
    font-weight: 700;
    box-shadow: var(--gtc-selected-shadow);
    opacity: 1 !important;
}

.gtc-day--rangeStart::after,
.gtc-day--rangeEnd::after {
    display: none !important;
}

.gtc-day--rangeStart:hover,
.gtc-day--rangeEnd:hover {
    background: var(--gtc-btn-primary-hover) !important;
    border-color: var(--gtc-btn-primary-hover) !important;
}

/* Range endpoints get rounder corners */
.gtc-day--rangeStart {
    border-radius: 8px 4px 4px 8px;
}

.gtc-day--rangeEnd {
    border-radius: 4px 8px 8px 4px;
}


/* ═══════════════════════════════════════════════════════════
   STATE: outside month — Hidden padding
   ═══════════════════════════════════════════════════════════ */
.gtc-day--outside {
    visibility: hidden;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   NO-DATA INLINE MESSAGE
   ═══════════════════════════════════════════════════════════ */
.gtc-no-data-msg {
    display: none;
    text-align: center;
    padding: 6px 0 0;
    font-size: 11px;
    color: #ef5350;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   STATUS BAR — Compact footer info
   ═══════════════════════════════════════════════════════════ */
.gtc-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 2px;
    font-size: 10px;
    color: var(--gtc-text-muted);
    gap: 5px;
    line-height: 1.4;
}

.gtc-status-sep {
    opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════
   RANGE TAB
   ═══════════════════════════════════════════════════════════ */
.gtc-range-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.gtc-range-field {
    flex: 1;
}

.gtc-range-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gtc-text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gtc-range-input {
    width: 100%;
    border: 1.5px solid var(--gtc-input-border);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--gtc-text);
    background: var(--gtc-input-bg);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.gtc-range-input:focus {
    border-color: var(--gtc-input-border-focus);
}

.gtc-range-input::placeholder {
    color: var(--gtc-text-muted);
}

/* Range input error state */
.gtc-range-input--error {
    border-color: #ef5350 !important;
}

.gtc-range-input--valid {
    border-color: rgba(38, 166, 154, 0.5) !important;
}

/* Hint text below inputs */
.gtc-range-hint {
    font-size: 10px;
    color: var(--gtc-text-muted);
    text-align: center;
    padding: 2px 0 8px;
    line-height: 1.4;
}

/* Validation message */
.gtc-range-validation {
    font-size: 11px;
    color: #ef5350;
    text-align: center;
    padding: 2px 0 6px;
    font-weight: 500;
}

/* Range selection instructions - active state */
.gtc-range-hint--active {
    color: var(--gtc-btn-primary);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER BUTTONS — Compact
   ═══════════════════════════════════════════════════════════ */
.gtc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 16px 14px;
}

.gtc-btn {
    padding: 7px 20px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gtc-btn--cancel {
    border: 1.5px solid var(--gtc-btn-ghost-border);
    background: transparent;
    color: var(--gtc-text);
}

.gtc-btn--cancel:hover {
    background: var(--gtc-btn-ghost-hover);
}

.gtc-btn--go {
    border: none;
    background: var(--gtc-btn-primary);
    color: #ffffff;
}

.gtc-btn--go:hover {
    background: var(--gtc-btn-primary-hover);
    box-shadow: 0 2px 8px rgba(41, 98, 255, 0.30);
}

/* Disabled Go button */
.gtc-btn--go:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   SELECTED DATE CHIP STYLING (matching left toolbar badge)
   ═══════════════════════════════════════════════════════════ */
#goto-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(18, 36, 24, 0.92);
    color: #d1fae5;
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.5;
}

#goto-toast-close {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.12s ease;
}

#goto-toast-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.08);
}

/* Error state override */
#goto-toast.goto-toast--error {
    background: rgba(36, 18, 18, 0.92);
    color: #fad1d1;
    border-color: rgba(255, 255, 255, 0.06);
}

/* Light theme overrides */
html[data-theme="light"] #goto-toast {
    background: rgba(236, 253, 245, 0.96);
    color: #14532d;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] #goto-toast-close {
    background: rgba(21, 128, 61, 0.12);
}

html[data-theme="light"] #goto-toast-close:hover {
    background: rgba(21, 128, 61, 0.18);
}

html[data-theme="light"] #goto-toast.goto-toast--error {
    background: rgba(253, 236, 236, 0.96);
    color: #531414;
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Calendar Legend ────────────────────────────────────── */
.gtc-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--gtc-text-muted);
}
.gtc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gtc-legend-dot {
    font-size: 8px;
    line-height: 1;
}
.gtc-legend-dot--available {
    color: #26a69a; /* Green (same as --gtc-data-bg but solid color for dot) */
}
.gtc-legend-dot--nodata {
    color: var(--gtc-text-muted); /* Gray */
}