/* ============================================================
   soap-glass.css  —  SOAP Glass Morphism
   ALL button overrides are scoped to .soap-tcm-wrap
   so they NEVER affect tabs or other page elements.

   REQUIRED: wrap the @if (activeTab == "TCM") block content
   in <div class="soap-tcm-wrap"> ... </div>
   ============================================================ */

/* ── 1. Wrapper: left-edge padding fix ─────────────────────── */

.soap-tcm-wrap {
    padding: 0 1.5rem;
}

    /* ── 2. + Tongue / + Pulse / + Points / + Herbal
        Bootstrap: btn btn-success btn-sm  → teal glass ──────── */

    .soap-tcm-wrap .btn.btn-success.btn-sm {
        background: rgba(16, 185, 129, 0.12) !important;
        border: 1px solid rgba(16, 185, 129, 0.42) !important;
        color: #047857 !important;
        border-radius: 10px !important;
        padding: 5px 14px !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: background 0.2s, border-color 0.2s !important;
    }

        .soap-tcm-wrap .btn.btn-success.btn-sm:hover {
            background: rgba(16, 185, 129, 0.24) !important;
            border-color: rgba(16, 185, 129, 0.62) !important;
            color: #065f46 !important;
        }

    /* ── 3. History buttons (Tongue / Pulse / Points)
        Bootstrap: btn btn-outline-info btn-sm  → white glass ── */

    .soap-tcm-wrap .btn.btn-outline-info.btn-sm {
        background: rgba(255, 255, 255, 0.58) !important;
        border: 1px solid rgba(160, 190, 230, 0.55) !important;
        color: #3a6090 !important;
        border-radius: 10px !important;
        padding: 5px 14px !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: background 0.2s !important;
    }

        .soap-tcm-wrap .btn.btn-outline-info.btn-sm:hover {
            background: rgba(255, 255, 255, 0.88) !important;
            color: #1e3a5f !important;
        }

    /* ── 4. Herbal History button
        Bootstrap: btn btn-info btn-sm (filled, NOT outline)
        → same white glass as above ────────────────────────── */

    .soap-tcm-wrap .btn.btn-info.btn-sm {
        background: rgba(255, 255, 255, 0.58) !important;
        border: 1px solid rgba(160, 190, 230, 0.55) !important;
        color: #3a6090 !important;
        border-radius: 10px !important;
        padding: 5px 14px !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: background 0.2s !important;
    }

        .soap-tcm-wrap .btn.btn-info.btn-sm:hover {
            background: rgba(255, 255, 255, 0.88) !important;
            color: #1e3a5f !important;
        }

    /* ── 5. Print Herbal Rx
        Bootstrap: btn btn-outline-secondary btn-sm  → amber glass */

    .soap-tcm-wrap .btn.btn-outline-secondary.btn-sm {
        background: rgba(245, 158, 11, 0.10) !important;
        border: 1px solid rgba(245, 158, 11, 0.42) !important;
        color: #b45309 !important;
        border-radius: 10px !important;
        padding: 5px 14px !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: background 0.2s, border-color 0.2s !important;
    }

        .soap-tcm-wrap .btn.btn-outline-secondary.btn-sm:hover {
            background: rgba(245, 158, 11, 0.22) !important;
            border-color: rgba(245, 158, 11, 0.62) !important;
            color: #92400e !important;
        }

    /* ── 6. btn-group: rounded pill-pair corners ─────────────────
        First child gets left-rounded, last child right-rounded  */

    .soap-tcm-wrap .btn-group .btn:first-child {
        border-radius: 10px 0 0 10px !important;
    }

    .soap-tcm-wrap .btn-group .btn:last-child {
        border-radius: 0 10px 10px 0 !important;
    }

    .soap-tcm-wrap .btn-group .btn:only-child {
        border-radius: 10px !important;
    }

    /* ── 7. Summary textareas  (form-control bg-light) ──────────── */

    .soap-tcm-wrap .form-control.bg-light,
    .soap-tcm-wrap textarea.form-control.bg-light {
        background: rgba(255, 255, 255, 0.62) !important;
        border: 1px solid rgba(160, 190, 230, 0.52) !important;
        color: #1e3a5f !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        transition: border-color 0.2s, background 0.2s !important;
    }

        .soap-tcm-wrap .form-control.bg-light:focus,
        .soap-tcm-wrap textarea.form-control.bg-light:focus {
            background: rgba(255, 255, 255, 0.90) !important;
            border-color: rgba(50, 110, 200, 0.52) !important;
            box-shadow: none !important;
        }

    /* ── 8. Bottom action bar custom glass classes ───────────────
        Scoped to .soap-tcm-wrap to avoid affecting other pages  */

    /* Cancel */
    .soap-tcm-wrap .glass-button-outline {
        background: rgba(255, 255, 255, 0.55) !important;
        border: 1px solid rgba(200, 80, 80, 0.32) !important;
        color: #c0392b !important;
        border-radius: 10px !important;
        padding: 8px 20px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        transition: background 0.2s, border-color 0.2s !important;
    }

        .soap-tcm-wrap .glass-button-outline:hover {
            background: rgba(255, 220, 220, 0.45) !important;
            border-color: rgba(200, 80, 80, 0.55) !important;
        }

    /* Save TCM Visit */
    .soap-tcm-wrap .glass-button-primary {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.85) 0%, rgba(16, 185, 129, 0.78) 100%) !important;
        border: 1px solid rgba(37, 99, 235, 0.28) !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        padding: 8px 22px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 12px rgba(37, 99, 235, 0.20) !important;
        transition: opacity 0.2s, box-shadow 0.2s !important;
    }

        .soap-tcm-wrap .glass-button-primary:hover {
            opacity: 0.90 !important;
            box-shadow: 0 4px 18px rgba(37, 99, 235, 0.30) !important;
        }

        .soap-tcm-wrap .glass-button-primary:disabled {
            opacity: 0.45 !important;
            cursor: not-allowed !important;
        }

    /* Load Previous / Load From Previous Session */
    .soap-tcm-wrap .glass-button,
    .soap-tcm-wrap .glass-button-secondary {
        background: rgba(255, 255, 255, 0.55) !important;
        border: 1px solid rgba(160, 190, 230, 0.50) !important;
        color: #3a6090 !important;
        border-radius: 10px !important;
        padding: 8px 18px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
        transition: background 0.2s !important;
    }

        .soap-tcm-wrap .glass-button:hover,
        .soap-tcm-wrap .glass-button-secondary:hover {
            background: rgba(255, 255, 255, 0.85) !important;
            color: #1e3a5f !important;
        }
    }