/* =============================================================================
   trading-desk/css/trading-desk.css
   Styles for the Trading Desk page template.
============================================================================= */

/* ── Layout ────────────────────────────────────────────────────────────────── */
.td-container {
    padding: 0 15px;
}

.container-2c {
    display: flex;
    gap: 20px;
}

.main-content {
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 2;
}

.side-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 300px;
}

@media (max-width: 1024px) {
    .container-2c  { flex-direction: column; }
    .side-content  { flex-wrap: wrap; gap: 10px; max-width: 100%; }
}

@media (max-width: 768px) {
    .container-2c  { flex-direction: column; }
}

/* ── Card / panel ──────────────────────────────────────────────────────────── */
.td-card {
    padding: 10px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 14px #0000001c;
}

/* ── Wine page header ──────────────────────────────────────────────────────── */
.td-wine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
h1 {
    font-size: 26px !important;
    font-weight: 600 !important;
    font-family: sans-serif;
}

h1, p {
    margin-bottom: 0 !important;
    line-height: normal;
}

.primary-text {
    font-size: 18px;
    color: black;
    font-weight: 600;
    font-family: sans-serif;
}

.secondary-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    font-family: sans-serif;
}

@media screen and (max-width: 480px) {
    h1           { font-size: 20px !important; }
    .primary-text,
    .tab-button  { font-size: 16px; }
    .price-option{ font-size: 12px !important; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: #4472c4;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
}
.btn-primary:hover { background-color: #0056b3; }

.b-button {
    border-radius: 5px;
    background: #4472c4;
    color: #fff !important;
    border: none;
    padding: 5px 10px;
    font-weight: 600;
}
.b-button:hover { background: #375da0; }

.sell-button {
    width: 50%;
    background: #ae4747;
    color: white !important;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}
.buy-button {
    width: 50%;
    background: #4da03e;
    color: white !important;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}
.buy-button:hover  { background: #3b862d; text-decoration: none !important; }
.sell-button:hover { background: #913636; text-decoration: none !important; }

.btn-steps { min-width: 50px; }
.btn-steps:hover { background-color: #d5e8f7 !important; }

.price-option {
    font-size: 14px !important;
    background-color: #eee !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
}
.price-option:hover  { background-color: #ccc !important; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    justify-content: flex-start;
    margin: 5px 0;
    border-bottom: 1px solid #ccc;
    overflow-x: auto;
    scrollbar-width: none;
    text-wrap: nowrap;
}

.tab-button {
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    font-size: 18px;
    font-weight: 600;
    color: #666;
}
.tab-button:hover       { color: black; }
.tab-button.active      { background-color: transparent; border-bottom: 2px solid; color: #4472c4 !important; }

/* ── Stats grid ────────────────────────────────────────────────────────────── */
.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row;
    align-items: baseline;
}

.stats-item {
    padding: 10px 0;
    display: grid;
    gap: 3px;
}

@media screen and (max-width: 480px) {
    .stats-container { grid-template-columns: unset; }
    .stats-item      { display: flex; justify-content: space-between; align-items: center; text-align: right; }
}

/* ── Range bars ────────────────────────────────────────────────────────────── */
.range-bar-container { display: grid; width: 100%; }

.range-bar {
    position: relative;
    flex-grow: 1;
    height: 10px;
    background: #ccc;
    border-radius: 3px;
    margin-top: 15px;
}

.market-fill, .trade-fill, .market-12-fill, .trade-12-fill {
    height: 100%;
    background: green;
    border-radius: 3px;
    width: 0%;
}

.trade-indicator, .market-indicator, .market-12-indicator, .trade-12-indicator {
    position: absolute;
    top: -15px;
    transform: translateX(-50%);
    font-size: 12px;
    color: black;
}

/* ── Order book ────────────────────────────────────────────────────────────── */
.order-book-container {
    display: inline-flex;
    width: 100%;
    align-items: baseline;
    max-height: 314px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 10px;
}

.order-book-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 14px;
    min-width: auto;
}

.order-book-table th, .order-book-table td { 
    padding: 0 !important; 
    border-bottom: none !important; 
    font-size: 14px;
    }


.order-book-table th {
    color: #666;
    font-weight: 500;
}

.order-book-bids td  { color: red; }
.order-book-offers td{ color: green; }

/* ── DataTables overrides ──────────────────────────────────────────────────── */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    border-bottom: none !important;
    font-weight: 500;
    text-align: center !important;
    color: #666 !important;
    font-family: var(--bs-body-font-family) !important;
}

table.dataTable > tbody > tr > td,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: center !important;
    font-family: sans-serif;
    font-weight: 600;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * { border-bottom: none !important; }

.order-book-table td,
#order_book td { font-weight: normal !important; }

/* ── Wine table columns ────────────────────────────────────────────────────── */
.wine-col  { width: 30%; }
.wine-img  { width: 40px; border: 1px solid #ccc; border-radius: 4px; }

.wine-name a       { color: black; }
.wine-name a:hover { color: blue; text-decoration: none !important; }

@media screen and (max-width: 480px) {
    .wine-name { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wine-img  { width: 30px; }
}

tr > td:not(:first-child),
tr > th:not(:first-child) { text-align: right; }

tr.active { background: #e0e0e0 !important; }

/* ── Editable rows ─────────────────────────────────────────────────────────── */
.edit-order,
.wine-holdings-row,
.purchase-details-row { cursor: pointer; border-radius: 10px; }

.edit-order:hover,
.wine-holdings-row:hover,
.purchase-details-row:hover { background: #eee; }

/* ── Info trigger / floating box ──────────────────────────────────────────── */
.info-trigger {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
    cursor: pointer;
    width: fit-content;
}

.info-box {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    width: 250px;
    z-index: 10000;
}

.info-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.info-box-body { padding: 10px; }

.close-btn {
    font-size: 18px;
    color: black;
    font-weight: 600;
    font-family: sans-serif;
    cursor: pointer;
}

/* ── Modals ────────────────────────────────────────────────────────────────── */

.modal-content {
    background: aliceblue;
    background-color: aliceblue;
    margin: auto;
    width: 100%;
    max-width: 600px;
    border: 1px solid #ddd;
    position: relative;
    overflow-x: hidden;
}

.modal-body {
    display: grid;
    gap: 20px;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.td-modal-content {
    background-color: aliceblue !important;
    margin: auto;
    width: 100%;
    max-width: 500px;
    border: 1px solid #ddd;
    position: relative;
    overflow-x: hidden;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .td-modal-content { width: 95%; }
}

.modal-title  { font-weight: 600; }

/* ── Critic reviews ────────────────────────────────────────────────────────── */
.critic-reviews-container { display: grid; gap: 10px; }

.new-critic-review { display: flex; gap: 20px; }

@media screen and (max-width: 480px) {
    .new-critic-review { display: grid; }
}

.critic-score {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 75px;
    min-height: 75px;
}

.score-circle {
    width: 75px;
    height: 75px;
    border: 2px solid #666;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score {
    font-weight: 700;
    color: #4472C4;
}

/* ── Order detail rows (modal) ─────────────────────────────────────────────── */
.order-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.order-detail-row:last-child { border-bottom: none; }
.order-detail-label { font-weight: 600; color: #666; min-width: 120px; }
.order-detail-value { font-weight: 500; color: #333; }

.order-wine-header {
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    gap: 15px;
    border-bottom: 2px solid #eee;
}

#modal-wine-title, #modal-purchase-title {
    color: black;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
}

.wine-details {
    color: #333;
    display: grid;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    font-size: 16px;
    margin-top: 10px;
}

/* ── Form controls ─────────────────────────────────────────────────────────── */
.form-control { box-shadow: none !important; }

.form-price {
    display: flex;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

label  { margin-bottom: 0; font-weight: 600; }
select,
input,
label  { font-size: 16px !important; }

/* Remove number input spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── Blurred overlay (logged-out) ─────────────────────────────────────────── */
.blurred {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

.blurred-overlay {
    display: grid;
    gap: 10px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: #fff;
    color: black;
    box-shadow: 0 0 14px #0000001c;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    pointer-events: auto;
    min-width: 350px;
    font-size: 16px;
}

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.fa-pen,
.fa-trash { padding: 5px; }
.fa-pen:hover,
.fa-trash:hover { background: #ccc; border-radius: 4px; }

#toggleTradingPrices:hover,
#editToggleTradingPrices:hover { color: blue; }

/* ── Spinner (chart loading) ───────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top: 4px solid #4472C4;
    border-radius: 50%;
    animation: td-spin 1s linear infinite;
}

@keyframes td-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Range selector buttons ────────────────────────────────────────────────── */
.range-buttons { display: flex; justify-content: center; margin: 10px 0; gap: 5px; }

.range-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    font-family: sans-serif;
    transition: all 0.2s ease;
}
.range-btn:hover:not(.disabled) { background: #f5f5f5; }
.range-btn.active               { background: #4472C4 !important; color: white; border-color: #4472C4; }
.range-btn.disabled             { background: #f8f9fa; color: #6c757d; border-color: #dee2e6; cursor: not-allowed; opacity: 0.6; }

/* ── Utility ───────────────────────────────────────────────────────────────── */
.hidden { display: none; }

/* ── New layout classes replacing inline styles ────────────────────────────── */
.td-wine-header        { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; }
.td-wine-header-left   { display: flex; align-items: center; gap: 10px; }
.td-header-img         { max-width: 75px; background: transparent; border: 1px solid #ccc; border-radius: 4px; }
.td-portfolio-btn      { display: flex; align-items: center; gap: 5px; }
.td-market-price       { font-size: 36px !important; }
.td-chart-loader       { text-align: center; }
.td-chart-container    { height: 300px; width: 100%; visibility: hidden; }
.td-range-buttons      { visibility: hidden; }
.td-buysell-mobile     { display: flex; gap: 10px; margin: 10px 0; }
.td-buysell-sidebar    { display: flex; gap: 10px; }
.td-buysell-price      { font-size: 20px !important; }
.td-sidebar-inner      { display: grid; gap: 10px; }
.td-table-header       { border-bottom: 1px solid #ccc; }
.td-th-left            { text-align: left !important; }
.td-action-cell        { text-align: center; }
.td-order-row          { font-weight: 600; font-size: 14px; cursor: pointer; }
.td-stats-wrap         { display: grid; gap: 10px; }
.td-range-bars         { display: grid; gap: 10px; }
.td-range-labels       { display: flex; justify-content: space-between; }
.td-range-labels-right { display: grid; text-align: right; }
.td-review-meta        { margin-top: 5px; font-weight: 600; }
.td-tab-loader         { text-align: center; padding: 20px; }
.td-empty-state        { text-align: center; padding: 20px; }

/* ── Inline order side panel ───────────────────────────────────────────────── */
.sp-tabs {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 14px;
}

.sp-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.sp-tab.active {
    color: #4472c4;
    border-bottom-color: #4472c4;
}

.sp-tab:hover:not(.active) { color: black; }

.sp-field {
    margin-bottom: 12px;
}

.sp-label {
    font-size: 14px !important;
    font-weight: 600;
    color: black;
    margin-bottom: 4px;
    display: block;
}

.sp-price-row {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px;
    gap: 4px;
}

.sp-step-btn {
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    background: aliceblue !important;
    color: #4472C4 !important;
    min-width: 42px;
    flex-shrink: 0;
}

.sp-price-input {
    border: none !important;
    font-size: 15px !important;
    font-weight: 600;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.sp-price-option {
    font-size: 11px !important;
    padding: 3px 6px !important;
}

.sp-select {
    font-size: 14px !important;
    padding: 8px !important;
}

.sp-submit-btn {
    border-radius: 4px !important;
    margin-top: 4px;
    font-weight: 600;
}

/* Buy tab → green submit, Sell tab → red submit */
.sp-panel-buy  .sp-submit-btn { background-color: #4da03e !important; border-color: #4da03e !important; }
.sp-panel-sell .sp-submit-btn { background-color: #ae4747 !important; border-color: #ae4747 !important; }

.sp-step { transition: opacity 0.15s; }

/* ── Chart card header — market price + inline stats ───────────────────────── */
.td-chart-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
}

.td-chart-header-left { flex-shrink: 0; }

.td-price-change {
    font-size: 14px;
    font-weight: 500;
    margin: 2px 0 0;
    min-height: 1.4em;
}

/* ── Price stats bar (Last Traded / Highest Bid / Lowest Offer) ────────────── */
.td-price-stats {
    display: flex;
    align-items: stretch;
    flex: 1;
    max-width: 600px;
}

.td-price-stat {
    flex: 1;
    padding: 0px 16px;
    min-width: 0;
}

.td-price-stat-divider {
    width: 0.5px;
    background: #ccc;
    flex-shrink: 0;
    margin: 10px 0px;
}

.td-price-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 3px;
    line-height: 1.1;
}

.td-price-stat-bid   { color: #ae4747; }
.td-price-stat-offer { color: #4da03e; }

.td-vs-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    margin: 3px 0px;
    white-space: nowrap;
}

.td-vs-positive { background: #d4edda; color: #1a6630; }
.td-vs-negative { background: #f8d7da; color: #842029; }
.td-vs-neutral  { background: #666; color: #666; }

.td-price-stat-meta {
    font-size: 14px;
    color: #888;
    margin: 0;
    white-space: nowrap;
}

/* ── Flash animations ───────────────────────────────────────────────────────── */
@keyframes td-flash {
    0%   { background-color: transparent; }
    30%  { background-color: #fffbcc; }
    100% { background-color: transparent; }
}

.td-flash {
    animation: td-flash 1.6s ease-out;
}

/* Stronger flash for the buy/sell price buttons */
@keyframes td-flash-btn {
    0%   { opacity: 1; }
    25%  { opacity: 0.4; }
    50%  { opacity: 1; }
    75%  { opacity: 0.4; }
    100% { opacity: 1; }
}

.td-flash-btn {
    animation: td-flash-btn 1.6s ease-in-out;
}
.td-chart-error {
    text-align: center;
    padding: 20px;
    color: #666;
}
.td-retry-btn {
    background: #4472c4;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 8px;
    font-size: 13px;
}
.td-retry-btn:hover { background: #375da0; }

/* Hide on mobile / desktop helpers */
@media screen and (max-width: 768px) {
    .hide-m { display: none !important; }
}
@media screen and (min-width: 769px) {
    .hide-c { display: none !important; }
}

/* Wine holdings row */
.wine-holdings-row { font-size: 14px; font-weight: 600; }