/**
 * @author Taka<taka.home@msa.hinet.net>
 * @modifyDate 2026-06-23 14:10:00 CST
 * @fileName block_count/css/block_count.css
 * @description block_count 樣式 - Mobile-first RWD (Compact Tool UI)
 */

/* ===== 全域重置 ===== */
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 8px;
    font-family: Arial, sans-serif;
    background-color: #e3edcd;
}
img {
    max-width: 100%;
    height: auto;
}

/* ===== 容器 ===== */
.rwd-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== 基本 input / 按鈕重置（桌面優先）===== */
input, textarea, select, button {
    font-size: 16px;
}

/* ===== 手機版（<=768px）===== */
@media only screen and (max-width: 768px) {
    /* 強制表格變區塊，移除固定高度 */
    table, tbody, tr, td, th {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    table {
        height: auto !important; /* 移除 90% height 造成的巨大空白 */
    }
    td, th {
        padding: 2px 4px;
        text-align: left;
    }
    th {
        font-size: 12px;
        padding: 4px;
    }
    th[colspan="2"] {
        font-size: 12px;
        line-height: 1.3;
    }
    /* 移除多餘 br */
    td[align="center"][colspan="2"] br {
        display: none;
    }
    /* 移除任何固定高度 */
    td[height="90%"] {
        height: auto !important;
    }

    /* ===== textarea 高度縮小 ===== */
    #multiInput {
        width: 100% !important;
        height: 140px !important;
        min-height: 140px !important;
        max-height: 180px !important;
        font-size: 14px !important;
        padding: 6px;
        margin-top: 2px;
    }

    /* ===== outputContainer ===== */
    #outputContainer {
        width: 100% !important;
    }
    #calcResults {
        min-height: 0 !important; /* 移除 min-height 避免撐高 */
        max-height: 180px;
        overflow-y: auto;
        padding: 6px !important;
        margin-bottom: 4px !important;
        font-size: 13px;
    }

    /* ===== 複製按鈕 ===== */
    #copyResultsBtn {
        height: 36px !important;
        font-size: 14px !important;
    }

    /* ===== CountMode radio ===== */
    input[name="CountMode"] {
        width: auto;
        height: auto;
        margin: 2px;
        transform: scale(1.1);
    }

    /* ===== 隱藏手機版不用的 mode 按鈕與對應的 Help 問號 ===== */
    .mode-btn-grid input[value="區塊計算"],
    .mode-btn-grid button[data-showmode="0"],
    .mode-btn-grid button[data-showmode="4"] {
        display: none;
    }

    /* ===== 主模式按鈕：2x2 grid (只顯示目標價/漲停價) ===== */
    .mode-btn-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin: 4px 0;
    }
    .mode-btn-grid input[type="submit"],
    .mode-btn-grid button {
        width: 100%;
        height: 36px;
        font-size: 14px;
        margin: 0;
        padding: 4px;
        cursor: pointer;
        border: 1px solid #bbb;
        border-radius: 4px;
        background: #f5f5f5;
    }

    /* ===== 目標價倍率列（手機版保留） ===== */
    .defaultPa-row {
        display: flex !important;
        align-items: center;
        gap: 6px;
        margin: 4px 0;
        flex-wrap: nowrap;
    }

    .defaultPa-row input {
        width: 72px !important;
        height: 30px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }

    /* ===== 停利停損參數：一列橫向 ===== */
    .profit-loss-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        margin: 4px 0;
        background: #f0f4e8;
        border: 1px solid #c8d6b0;
        border-radius: 6px;
        padding: 4px 6px;
        overflow-x: auto;
    }
    .profit-loss-grid > div {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 2px;
        white-space: nowrap;
    }
    .profit-loss-grid label {
        font-size: 11px;
        font-weight: bold;
        display: inline;
        margin-bottom: 0;
    }
    .profit-loss-grid input,
    .profit-loss-grid select {
        width: 60px !important;
        height: 26px !important;
        font-size: 12px !important;
        margin: 0 !important;
        padding: 1px 3px;
        box-sizing: border-box;
    }
    /* 套用按鈕 */
    .profit-loss-grid .apply-btn-cell {
        flex: 0 0 auto;
        text-align: center;
    }
    #applyProfitLoss {
        width: auto !important;
        height: 28px !important;
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        background: linear-gradient(135deg, #FF6B6B 0%, #FF4444 100%) !important;
        color: white !important;
        font-weight: bold !important;
        border: 2px solid #CC0000 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        white-space: nowrap;
    }


    /* ===== 進階工具 toggle ===== */
    .mobile-advanced-toggle td {
        padding: 4px;
    }
    .btn-advanced-toggle {
        width: 100%;
        height: 34px;
        font-size: 13px;
        font-weight: bold;
        background: #f0f4e8;
        border: 1px solid #c8d6b0;
        border-radius: 6px;
        cursor: pointer;
        color: #333;
        text-align: center;
        margin: 2px 0;
    }
    .mobile-advanced-content {
        display: none;
    }

    /* ===== 進階區塊內緊湊 ===== */
    .mobile-advanced-content td {
        padding: 2px 4px;
    }
    .mobile-advanced-content p,
    .mobile-advanced-content hr {
        margin: 2px 0;
    }
    .mobile-advanced-content input[type="button"] {
        height: 34px;
        font-size: 13px;
        margin: 2px 0;
    }

    /* 獲利計算區塊內 input */
    input[name="m1"], input[name="m2"], input[name="amt"],
    input[name="f2_m1"], input[name="f2_m2"], input[name="f2_amt"] {
        width: 65px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    /* 工具說明區 */
    div[style*="background:#ffffff"] {
        font-size: 11px !important;
        padding: 6px !important;
        margin-top: 8px !important;
    }
    div[style*="background:#ffffff"] ul {
        margin: 2px 0;
        padding-left: 14px;
    }
    div[style*="background:#ffffff"] li {
        font-size: 11px;
        line-height: 1.4;
    }

    /* 工具範例 */
    td[style*="font-size:12"] {
        font-size: 11px !important;
    }

    /* ===== 禁止橫向卷軸 ===== */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    table, div, td, th, p, span, form {
        max-width: 100%;
        word-wrap: break-word;
    }

    hr {
        margin: 4px 0;
    }

    /* 第一個 <br> 在表格上方的移除 */
    tr td[align="center"][colspan="2"] > br:first-child {
        display: none;
    }
}

/* ===== Help 問號 Icon 統一尺寸 ===== */
.help-icon {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 12px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border: 1px solid #999 !important;
    background: #f0f0f0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    box-sizing: content-box;
}

/* ===== 功能按鈕顏色 Class ===== */
.btn-mode-count {
    background: #4CAF50 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: 2px solid #45a049 !important;
}
.btn-mode-target {
    background: #2196F3 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: 2px solid #1e88e5 !important;
}
.btn-mode-limit {
    background: #FF9800 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: 2px solid #f57c00 !important;
}
.btn-mode-future {
    background: #9C27B0 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: 2px solid #7b1fa2 !important;
}

/* ===== 桌面版（>768px）原樣 ===== */
@media only screen and (min-width: 769px) {
    .mobile-advanced-content {
        display: none;
    }

    input {
        width: 100px;
        height: 30px;
        font-size: 16px;
    }
    .mode-btn-grid input[type="submit"] {
        width: auto;
        min-width: 100px;
        padding: 0 8px;
    }
    #multiInput {
        font-size: 12px;
    }
    /* 停利停損參數：桌面版固定單列 */
    .profit-loss-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center;
        gap: 10px;
        margin: 6px 0;
        width: 100%;
    }

    .profit-loss-grid > div {
        display: inline-flex !important;
        align-items: center;
        flex: 0 0 auto;
        gap: 4px;
        white-space: nowrap;
    }

    .profit-loss-grid label {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
    }

    .profit-loss-grid input,
    .profit-loss-grid select {
        width: 78px !important;
        height: 30px !important;
        margin: 0 !important;
        font-size: 14px !important;
    }

    .profit-loss-grid .apply-btn-cell {
        display: inline-flex !important;
        align-items: center;
    }

    #applyProfitLoss {
        height: 32px;
        padding: 0 12px;
        white-space: nowrap;
        background: linear-gradient(135deg, #FF6B6B 0%, #FF4444 100%) !important;
        color: white !important;
        font-weight: bold !important;
        border: 2px solid #CC0000 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
    }

    /* 交易方向面板（桌面版置中，位於期貨計算按鈕下方） */
    #futureDirectionPanel {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    #futureDirectionPanel label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        cursor: pointer;
        white-space: nowrap;
    }
    
    #futureDirectionPanel input[type="radio"] {
        width: auto;
        height: auto;
        transform: none;
        margin: 0;
    }
    
    /* 目標價比例面板（與期貨交易方向一致風格） */
    #futureDirectionPanel + div {
        max-width: 400px;
        margin: 4px auto;
        padding: 4px 6px;
        text-align: center;
        background: #f0f4e8;
        border: 1px solid #c8d6b0;
        border-radius: 4px;
    }
}

/* ===== 交易方向面板（手機版，位於期貨計算按鈕下方）===== */
@media only screen and (max-width: 768px) {
    #futureDirectionPanel {
        font-size: 14px;
        padding: 4px 6px;
        margin: 4px 0;
    }
}