/* 代客泊車看板樣式
   移植自舊站台 wwwroot/css/homepage.css，配色沿用（在場綠 / 超時紅），
   class 名稱對齊新版 View：ParkingImage → ParkingDetail、btnGetIn/Out → btnCheckIn/Out。 */

.parking-body {
    background: #f4f6f8;
    overflow-x: hidden;
}

.parking-wrap {
    max-width: 100%;
}

/* 頂部時鐘：比照舊版 .TitleTime（置中、1.5rem、粗體），不放標題。
   tabular-nums 是唯一的加料 —— 秒數跳動時寬度才不會抖。 */
.TitleTime {
    font-size: 1.5rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.ParkingDiv {
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 1px 1px 20px -10px black;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ParkingDiv.intime {
    background: #28e1bd;
}

.ParkingDiv.overtime {
    background: #ff849f;
}

.ParkingDiv .ParkingHeader {
    text-align: center;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px solid #999;
}

.ParkingDiv.intime .ParkingHeader {
    background: #1abc9c;
}

.ParkingDiv.overtime .ParkingHeader {
    background: #ff5177;
}

.ParkingDiv .ParkingInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    height: 100%;
}

.ParkingDiv .ParkingInfo .ParkingDetail {
    display: flex;
    flex-direction: column;
}

.ParkingDiv .ParkingInfo .ParkingDetail .ParkingInfoText {
    font-size: 1.3rem;
    font-weight: bold;
    word-break: break-all;
}

.ParkingDiv .ParkingInfo .ParkingDetail .ParkingCard {
    border: 1px solid;
    border-radius: 5px;
    background: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 8px 12px;
}

.ParkingDiv .ParkingInfo .ParkingDetail .ParkingOverTime {
    font-weight: bold;
    color: #162ff2;
    text-align: center;
}

.ParkingDiv .ParkingInfo .ParkingDetail .OvertimeNotice {
    font-weight: bold;
    color: #f00;
    text-align: center;
    font-size: 1.3rem;
    display: none;
}

/* 空位的 P 停車標誌。
   舊版是 <img width="100%">，圖會撐滿卡片寬度、把空位卡的高度拉到與在場卡一致；
   這裡用 inline SVG 複製同樣的尺寸行為（width:100% + height:auto）。 */
.ParkingDiv .ParkingSign {
    display: flex;
}

.ParkingDiv .ParkingSign svg {
    display: block;
    width: 100%;
    height: auto;
}

.ParkingDiv .ParkingSign svg rect {
    fill: #404040;
}

.ParkingDiv .ParkingSign svg text {
    fill: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 62px;
    font-weight: 700;
}

.ParkingDiv .ParkingButton {
    width: 100%;
    margin-top: 10px;
}

.ParkingDiv .ParkingButton .btnCheckIn,
.ParkingDiv .ParkingButton .btnCheckOut {
    display: block;
    width: 100%;
    border: 1px solid #eee;
    padding: 8px 12px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    background: #1abc9c;
}

.ParkingDiv.overtime .ParkingButton .btnCheckOut {
    background: #ff5177;
}