/* ============================================================
   策略 detail 面板「下單」tab  (admin only)
   T22 — app-shioaji-phase2
   ============================================================ */

.sdo-panel {
    padding: 14px 16px;
    font-size: 13px;
}

.sdo-title {
    margin: 0 0 10px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--color-text-primary, #1a1a1a);
}

.sdo-stock {
    color: var(--color-accent, #1976d2);
    font-weight: 600;
}

/* 2-column grid form */
.sdo-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.sdo-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sdo-field > span {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sdo-field select,
.sdo-field input[type="number"] {
    padding: 5px 8px;
    font-size: 0.9em;
    border: 1px solid var(--color-border-default, #ccc);
    border-radius: 4px;
    background: var(--color-bg-page, #fff);
    color: var(--color-text-primary, #1a1a1a);
    line-height: 1.4;
}

/* select 內 <option> 在 dark mode 部分瀏覽器 (Chrome) 預設用系統色,要強制
   color-scheme + 顯式 background-color 才會跟 form 統一(否則 dropdown
   會出現黑底白字超低對比) */
.sdo-field select option {
    background-color: var(--color-bg-elevated, #fff);
    color: var(--color-text-primary, #1a1a1a);
}

.sdo-field select:focus,
.sdo-field input[type="number"]:focus {
    outline: none;
    border-color: var(--color-accent, #1976d2);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.18);
}

/* Submit button spans both columns */
.sdo-submit {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 9px 20px;
    background: var(--color-accent, #1976d2);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.93em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.sdo-submit:hover:not(:disabled) {
    background: #1565c0;
}

.sdo-submit:disabled {
    background: var(--color-border, #ccc);
    cursor: not-allowed;
}

.sdo-result {
    margin-top: 12px;
    min-height: 20px;
    font-size: 0.9em;
}

.sdo-pending { color: var(--color-text-secondary, #888); }
.sdo-ok      { color: #2e7d32; font-weight: 600; }
.sdo-err     { color: #c62828; }

/* ── Dark mode ──
   TalkStock 用 <html data-theme="dark"> (主) 或 .dark-mode (副) 來切換。
   絕大部分顏色已透過 brand-system.css 的 CSS var 在 :root 切換自動套上,
   這裡只補需要強制覆蓋的細節 (主要是 <option> dropdown 在 Chrome 系統色)。 */
[data-theme="dark"] .sdo-field select,
[data-theme="dark"] .sdo-field input[type="number"],
.dark-mode .sdo-field select,
.dark-mode .sdo-field input[type="number"] {
    /* var 已自動切深色,但顯式 color-scheme 讓系統 UI 元素 (autocomplete /
       number stepper / scrollbar) 跟著切深色,避免 Chrome 強制白底 */
    color-scheme: dark;
}

[data-theme="dark"] .sdo-field select option,
.dark-mode .sdo-field select option {
    background-color: var(--color-bg-elevated, #2a2a2e);
    color: var(--color-text-primary, #e0e0e0);
}

[data-theme="dark"] .sdo-submit:disabled,
.dark-mode .sdo-submit:disabled {
    background: var(--color-border-strong, #555);
    color: var(--color-text-tertiary, #999);
}
