/* ============================================================
   FXD Forex Tools – Shared Stylesheet
   Colors now sourced from the site-wide FXD Color System
   (fxd-color-system.css) — this file no longer defines its own
   color palette. Only non-color layout tokens stay local.
   Every var() below has a fallback matching the root system's
   default, in case this file ever loads before/without it.
   ============================================================ */

:root {
    /* Layout-only tokens — not part of the shared color system */
    --fxd-radius:        10px;
    --fxd-radius-sm:     6px;
    --fxd-shadow:        0 2px 12px rgba(75, 82, 255, 0.08);
    --fxd-shadow-hover:  0 4px 20px rgba(75, 82, 255, 0.15);
    --fxd-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.fxd-tool-wrap {
    font-family:      var(--fxd-font);
    background:       var(--fxd-surface, #FFFFFF);
    border:           1px solid var(--fxd-border, #E5E7EB);
    border-radius:    var(--fxd-radius);
    box-shadow:       var(--fxd-shadow);
    max-width:        680px;
    margin:           0 auto 2rem;
    overflow:         hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.fxd-tool-header {
    display:          flex;
    align-items:      center;
    gap:              16px;
    margin-bottom:    28px;
}

.fxd-tool-icon-wrap {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            56px;
    height:           56px;
    border-radius:    14px;
    background:       var(--fxd-primary-tint, #F1F1FB);
    flex-shrink:      0;
}

.fxd-tool-icon {
    width:            28px;
    height:           28px;
    color:            var(--fxd-primary, #4B52FF);
    flex-shrink:      0;
}

.fxd-tool-title {
    margin:           0;
    color:            var(--fxd-text, #1F2937);
    font-size:        1.4rem;
    font-weight:      800;
    letter-spacing:   -0.015em;
    line-height:      1.2;
}

/* ── Body ────────────────────────────────────────────────── */
.fxd-tool-body {
    padding:          28px;
}

/* ── Field grid ──────────────────────────────────────────── */
.fxd-field-grid {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              16px;
    margin-bottom:    20px;
}

@media (max-width: 520px) {
    .fxd-field-grid {
        grid-template-columns: 1fr;
    }
}

.fxd-field-group {
    display:          flex;
    flex-direction:   column;
    gap:              6px;
}

.fxd-label {
    font-size:        0.78rem;
    font-weight:      600;
    color:            var(--fxd-text-muted, #6B7280);
    text-transform:   uppercase;
    letter-spacing:   0.04em;
}

/* ── Select ──────────────────────────────────────────────── */
.fxd-select-wrap {
    position:         relative;
}

.fxd-select {
    width:            100%;
    appearance:       none;
    -webkit-appearance: none;
    background:       var(--fxd-surface-alt, #FAFAFA);
    border:           1.5px solid var(--fxd-border, #E5E7EB);
    border-radius:    var(--fxd-radius-sm);
    padding:          10px 36px 10px 12px;
    font-size:        0.92rem;
    color:            var(--fxd-text, #1F2937);
    cursor:           pointer;
    transition:       border-color 0.15s, box-shadow 0.15s;
    font-family:      var(--fxd-font);
}

.fxd-select:focus {
    outline:          none;
    border-color:     var(--fxd-primary, #4B52FF);
    box-shadow:       0 0 0 3px rgba(75, 82, 255, 0.15);
}

.fxd-chevron {
    position:         absolute;
    right:            10px;
    top:              50%;
    transform:        translateY(-50%);
    width:            18px;
    height:           18px;
    color:            var(--fxd-text-muted, #6B7280);
    pointer-events:   none;
}

/* ── Number input with spinners ──────────────────────────── */
.fxd-spinner-wrap {
    display:          flex;
    border:           1.5px solid var(--fxd-border, #E5E7EB);
    border-radius:    var(--fxd-radius-sm);
    overflow:         hidden;
    transition:       border-color 0.15s, box-shadow 0.15s;
    background:       var(--fxd-surface-alt, #FAFAFA);
}

.fxd-spinner-wrap:focus-within {
    border-color:     var(--fxd-primary, #4B52FF);
    box-shadow:       0 0 0 3px rgba(75, 82, 255, 0.15);
}

.fxd-input {
    flex:             1;
    border:           none;
    background:       transparent;
    padding:          10px 12px;
    font-size:        0.92rem;
    color:            var(--fxd-text, #1F2937);
    font-family:      var(--fxd-font);
    min-width:        0;
    -moz-appearance:  textfield;
}

.fxd-input::-webkit-outer-spin-button,
.fxd-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fxd-input:focus {
    outline: none;
}

.fxd-spinner-btns {
    display:          flex;
    flex-direction:   column;
    border-left:      1.5px solid var(--fxd-border, #E5E7EB);
    flex-shrink:      0;
}

.fxd-spin-up,
.fxd-spin-dn {
    flex:             1;
    border:           none;
    background:       transparent;
    color:            var(--fxd-text-muted, #6B7280);
    cursor:           pointer;
    font-size:        0.7rem;
    padding:          0 8px;
    line-height:      1;
    transition:       background 0.12s, color 0.12s;
    width:            30px;
}

.fxd-spin-up {
    border-bottom:    1px solid var(--fxd-border, #E5E7EB);
}

.fxd-spin-up:hover,
.fxd-spin-dn:hover {
    background:       var(--fxd-primary-tint, #F1F1FB);
    color:            var(--fxd-primary, #4B52FF);
}

/* ── Live price button ───────────────────────────────────── */
.fxd-live-price-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            34px;
    border:           none;
    border-left:      1.5px solid var(--fxd-border, #E5E7EB);
    background:       transparent;
    color:            var(--fxd-text-muted, #6B7280);
    cursor:           pointer;
    transition:       background 0.12s, color 0.12s;
}

.fxd-live-price-btn:hover:not(:disabled) {
    background:       var(--fxd-primary-tint, #F1F1FB);
    color:            var(--fxd-primary, #4B52FF);
}

.fxd-live-price-btn:disabled {
    cursor:           default;
    opacity:          0.6;
}

.fxd-live-price-btn svg {
    width:            15px;
    height:           15px;
}

.fxd-live-price-btn.fxd-live-price-loading svg {
    animation:        fxd-spin 0.8s linear infinite;
}

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

.fxd-live-price-msg {
    display:          block;
    min-height:       16px;
    font-size:        0.75rem;
    margin-top:       4px;
    color:            var(--fxd-text-muted, #6B7280);
}

.fxd-live-price-msg.fxd-live-price-success {
    color:            var(--fxd-positive, #16A34A);
}

.fxd-live-price-msg.fxd-live-price-error {
    color:            var(--fxd-negative, #DC2626);
}

/* ── Calculate button ────────────────────────────────────── */
.fxd-btn-primary {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    width:            100%;
    background:       var(--fxd-primary, #4B52FF);
    color:            #fff;
    border:           none;
    border-radius:    var(--fxd-radius-sm);
    padding:          13px 24px;
    font-size:        1rem;
    font-weight:      700;
    letter-spacing:   -0.01em;
    cursor:           pointer;
    transition:       background 0.15s, transform 0.1s, box-shadow 0.15s;
    font-family:      var(--fxd-font);
    margin-bottom:    20px;
}

.fxd-btn-primary:hover {
    background:       var(--fxd-primary-hover, #4A51FE);
    box-shadow:       var(--fxd-shadow-hover);
}

.fxd-btn-primary:active {
    transform:        scale(0.98);
}

/* ── Result panel ────────────────────────────────────────── */
.fxd-result-panel {
    background:       var(--fxd-primary-tint, #F1F1FB);
    border:           1.5px solid rgba(75, 82, 255, 0.2);
    border-radius:    var(--fxd-radius-sm);
    padding:          20px;
    margin-bottom:    16px;
    animation:        fxdFadeIn 0.25s ease;
}

@keyframes fxdFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fxd-result-grid {
    display:          grid;
    grid-template-columns: 1fr 1fr;
    gap:              12px;
}

@media (max-width: 400px) {
    .fxd-result-grid { grid-template-columns: 1fr; }
}

.fxd-result-item {
    display:          flex;
    flex-direction:   column;
    gap:              4px;
}

.fxd-result-main {
    grid-column:      1 / -1;
    border-bottom:    1.5px solid rgba(75, 82, 255, 0.15);
    padding-bottom:   12px;
    margin-bottom:    4px;
}

.fxd-result-label {
    font-size:        0.72rem;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.05em;
    color:            var(--fxd-primary, #4B52FF);
}

.fxd-result-value {
    font-size:        1.05rem;
    font-weight:      700;
    color:            var(--fxd-text, #1F2937);
}

.fxd-result-main .fxd-result-value {
    font-size:        1.5rem;
}

.fxd-positive { color: var(--fxd-positive, #2ECC8A) !important; }
.fxd-negative { color: var(--fxd-negative, #E85555) !important; }

.fxd-result-note {
    margin:           12px 0 0;
    font-size:        0.78rem;
    color:            var(--fxd-warning, #B45309);
    background:       var(--fxd-warning-tint, rgba(217,119,6,.10));
    border:           1px solid var(--fxd-warning, #B45309);
    border-radius:    4px;
    padding:          6px 10px;
}

/* ── Error ───────────────────────────────────────────────── */
.fxd-error-msg {
    background:       var(--fxd-negative-bg, #fef2f2);
    border:           1.5px solid var(--fxd-negative-border, #fecaca);
    border-radius:    var(--fxd-radius-sm);
    padding:          10px 14px;
    color:            var(--fxd-negative-text, #b91c1c);
    font-size:        0.88rem;
    font-weight:      600;
    margin-bottom:    16px;
}

/* ── Disclaimer ──────────────────────────────────────────── */
.fxd-disclaimer {
    font-size:        0.78rem;
    color:            var(--fxd-text-muted, #6B7280);
    margin:           0;
    line-height:      1.6;
    border-top:       1px solid var(--fxd-border, #E5E7EB);
    padding-top:      14px;
}

.fxd-disclaimer strong {
    color:            var(--fxd-text, #1F2937);
}

/* ── Data Table (compound, drawdown, pivot) ──────────────── */
.fxd-data-table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        0.82rem;
    font-family:      var(--fxd-font);
}

.fxd-data-table th {
    background:       var(--fxd-primary, #4B52FF);
    color:            #fff;
    padding:          8px 10px;
    text-align:       left;
    font-weight:      600;
    font-size:        0.75rem;
    text-transform:   uppercase;
    letter-spacing:   0.04em;
}

.fxd-data-table td {
    padding:          7px 10px;
    border-bottom:    1px solid var(--fxd-border, #E5E7EB);
    color:            var(--fxd-text, #1F2937);
}

.fxd-data-table tr:last-child td {
    border-bottom:    none;
}

.fxd-data-table tr:nth-child(even) td {
    background:       var(--fxd-surface-alt, #FAFAFA);
}

.fxd-data-table tr:hover td {
    background:       var(--fxd-primary-tint, #F1F1FB);
}

/* ── Pivot table specific ────────────────────────────────── */
.fxd-pivot-table .fxd-pivot-row td {
    background:       var(--fxd-primary-tint, #F1F1FB) !important;
    font-weight:      700;
    color:            var(--fxd-primary, #4B52FF);
}

.fxd-pivot-badge {
    display:          inline-block;
    padding:          2px 8px;
    border-radius:    20px;
    font-size:        0.7rem;
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   0.04em;
}

.fxd-pivot-badge-resistance {
    background:       var(--fxd-negative-bg, #fef2f2);
    color:            var(--fxd-negative-text, #b91c1c);
    border:           1px solid var(--fxd-negative-border, #fecaca);
}

.fxd-pivot-badge-support {
    background:       var(--fxd-success-bg, #E6F7F2);
    color:            var(--fxd-success-text, #0F6E56);
    border:           1px solid var(--fxd-success-border, #B6E8D9);
}

.fxd-pivot-badge-pivot {
    background:       var(--fxd-primary-tint, #F1F1FB);
    color:            var(--fxd-primary, #4B52FF);
    border:           1px solid rgba(75,82,255,.3);
}

/* ── Random tools grid ───────────────────────────────────── */
.fxd-tools-grid-wrap {
    margin:           2.5rem auto;
    font-family:      var(--fxd-font);
}

.fxd-tools-grid-heading {
    margin:           0 0 16px;
    font-size:        1.25rem;
    font-weight:      700;
    color:            var(--fxd-text, #1F2937);
}

.fxd-tools-grid {
    display:          grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:              16px;
}

.fxd-tools-grid-card {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              10px;
    background:       var(--fxd-surface, #FFFFFF);
    border:           1px solid var(--fxd-border, #E5E7EB);
    border-radius:    var(--fxd-radius);
    box-shadow:       var(--fxd-shadow);
    padding:          20px;
    text-decoration:  none;
    transition:       transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.fxd-tools-grid-card:hover {
    transform:        translateY(-2px);
    box-shadow:       var(--fxd-shadow-hover);
    border-color:     var(--fxd-primary, #4B52FF);
}

.fxd-tools-grid-icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            48px;
    height:           48px;
    border-radius:    12px;
    background:       var(--fxd-primary-tint, #F1F1FB);
    color:            var(--fxd-primary, #4B52FF);
    flex-shrink:      0;
    overflow:         hidden;
}

.fxd-tools-grid-icon svg {
    width:            24px;
    height:           24px;
}

.fxd-tools-grid-icon img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
}

.fxd-tools-grid-title {
    font-size:        0.8rem;
    font-weight:      600;
    color:            var(--fxd-text, #1F2937);
    line-height:      1.3;
}

.fxd-tools-grid-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    margin-top:       auto;
    font-size:        0.85rem;
    font-weight:      600;
    color:            var(--fxd-primary, #4B52FF);
}

.fxd-tools-grid-btn svg {
    width:            14px;
    height:           14px;
    transition:       transform 0.15s;
}

.fxd-tools-grid-card:hover .fxd-tools-grid-btn svg {
    transform:        translateX(3px);
}

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 420px) {
    .fxd-tool-body       { padding: 18px; }
    .fxd-tool-header     { gap: 12px; margin-bottom: 20px; }
    .fxd-tool-icon-wrap  { width: 44px; height: 44px; border-radius: 12px; }
    .fxd-tool-icon       { width: 22px; height: 22px; }
    .fxd-tool-title      { font-size: 1.15rem; }
    .fxd-result-main .fxd-result-value { font-size: 1.2rem; }
    .fxd-data-table      { font-size: 0.75rem; }
    .fxd-data-table td,
    .fxd-data-table th   { padding: 6px 7px; }
    .fxd-tools-grid      { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fxd-tools-grid-card { padding: 14px; }
}