﻿/* ================= 1. 全域基本樣式 (手機版預設, < 768px) ================= */

.h-Topic {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

/* 醫院切換頁籤 */
.a-hosp {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    border: 1px dashed #d7d7d7;
    border-radius: 10px;
    margin: 4px 0;
    padding: 6px 12px;
    display: block;
    white-space: nowrap; /* 防止按鈕內文字折行 */
    transition: all 0.2s ease-in-out;
}

.a-hosp.active {
    background-color: #007bff !important;
    color: #FFFFFF !important;
    border-color: #007bff;
}

/* 數據卡片與基本類別 */
.rblock {
    width: 100%;
}

.d-title {
    font-size: 36px;
    font-weight: bold;
    color: #3396D3;
    text-align: center;
}

.d-notify {
    font-size: 28px;
    font-weight: bold;
    color: #006A67;
    text-align: center;
}

.d-result {
    font-size: 32px;
    font-weight: bold;
    color: #154D71;
    text-align: center;
}

.d-border {
    border: 1px dashed #d1d1d1;
    border-radius: 10px;
    padding: 8px 15px;
}

/* 滿床通報特大區塊 */
.d-alert-title {
    font-size: 28px;
    font-weight: bold;
    color: #006A67; /* 已統一採用深綠色醒目色 */
    text-align: center;
    line-height: 1.3;
}

.d-alert-result {
    font-size: 40px;
    font-weight: 900;
    color: #006A67;
    text-align: center;
    margin-top: 5px;
}

/* 滿床警告狀態 (滿床時變紅字) */
.d-full {
    color: #E62727 !important;
}


/* ================= 2. 響應式 (RWD) 媒體查詢 ================= */

/* 平板尺寸 (>= 768px) */
@media (min-width: 768px) {
    .h-Topic {
        font-size: 42px;
    }

    .a-hosp {
        font-size: 20px;
        display: inline-block;
    }

    .rblock {
        width: 50%;
    }

    .d-notify, .d-result {
        font-size: 36px;
    }

    .d-alert-title {
        font-size: 42px;
    }

    .d-alert-result {
        font-size: 52px;
    }
}

/* 桌上型電腦 (>= 992px) */
@media (min-width: 992px) {
    .h-Topic {
        font-size: 54px;
    }

    .a-hosp {
        font-size: 24px; /* 適度控制按鈕字體大小，避免 4 個按鈕擠下第二行 */
    }

    .d-notify, .d-result {
        font-size: 42px;
    }

    .d-alert-title {
        font-size: 50px;
    }

    .d-alert-result {
        font-size: 64px;
    }
}

/* 大螢幕電腦 (>= 1200px) */
@media (min-width: 1200px) {
    .h-Topic {
        font-size: 65px;
    }

    .a-hosp {
        font-size: 26px;
    }

    .d-alert-title {
        font-size: 58px;
    }

    .d-alert-result {
        font-size: 72px;
    }
}