/* 
    Project: ShinSoft AI Sensor Dome NVR IPCAM
    File: common.css
    Author: Eason Wang
    Created: 2024-10-15
    Description: 通用基本樣式

    Version: 1.0.0
    Last Modified: 2024-10-30
    Last Modified By: Eason Wang
    Purpose: 管理統一、共用的排版、顏色和文字樣式，確保統一管理與響應式設計效果。
    Note: 最佳解析度 1920*1080。測試過的瀏覽器：Chrome, Edge。
*/

html, body {
    width: 100%;
	height: 100%;
	margin: 0; 
	padding: 0;
	color: #FFFFFF;
	font-family: "Microsoft JhengHei", sans-serif;
    font-weight: normal;
	font-size: clamp(15px, calc(20 * 100vh / 1080), 30px); /* 1920*1080 時是 20px，隨解析度做縮放 */
	line-height: 1.5em;
	background-color: #202028;
}

/* ======================== scrollbar ======================== */

/* 滾動條的寬度（垂直）或高度（水平） */
html {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #8C949C #2A2A30; /* For Firefox */
}

::-webkit-scrollbar {
    width: 20px; /* 設定垂直滾動條的寬度 */
    height: 20px; /* 設定水平滾動條的高度 */
}

/* 滾動條軌道 (track) */
::-webkit-scrollbar-track {
    background: #2A2A30; /* 滾動條軌道的背景色 */
}

/* 滾動條滑塊 (thumb) */
::-webkit-scrollbar-thumb {
    background-color: #8C949C; /* 滑塊的顏色 */
    border-radius: 10px; /* 滑塊的圓角效果 */
    border: 2px solid #2A2A30; /* 滑塊周圍的邊框 */
}

/* 滑鼠懸停時滾動條滑塊的顏色變化 */
::-webkit-scrollbar-thumb:hover {
    background-color: #8C949C; /* 懸停時變更顏色 */
}

/* ======================== 共同 UI ======================== */

#title-bar {
    background-color: #343A42;
    height: 7.41vh;
}

.page-height {
    height: 92.59vh; /* 暫時的，隨 title bar、footer 高度需用 js 再做調整 */
}

/* ======================== Footer 效果 ======================== */

.wrapper {
    min-height: 100%; /* 外層高度100% */
    margin-bottom: -40px; /* 隨footer高度需做調整 */
}

.content{
    padding-bottom: 40px; /* 避免內容超出瀏覽器時，內容區塊不會和footer打架 */
}

footer {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    margin: 0px;
    background-color: #3A3A42;
}

.footer-text {
    line-height: 1em;
}

/* ======================== 共同文字 ======================== */

/* 上方標題-微軟正黑-BOLD-30px */
h1 {
    margin: 0;
    font-size: clamp(20px, 1.5rem, 40px);
    font-weight: bold;
}

/* 每項目首標題-微軟正黑-Regular-30px */
h2 {
    margin: 0;
    font-size: clamp(20px, 1.5rem, 40px);
    font-weight: normal;
}

/* 左方項目-微軟正黑-BOLD-20px */
h3 {
    margin: 0;
    font-size: clamp(18px, 1rem, 30px);
    font-weight: bold;
}

/* Footer左邊中間-微軟正黑-BOLD-20px */
h4 {
    margin: 0;
    font-size: clamp(15px, 1rem, 30px);
    font-weight: bold;
}

/* 小字-微軟正黑-BOLD-10px */
h6 {
    margin: 0;
    font-size: clamp(10px, 0.5rem, 20px);
    font-weight: bold;
}

/* ======================== 基本排版 ======================== */

/* 垂直排列 */
.vertical {
    display: flex;            
    flex-direction: column;
}

/* 垂直排列且水平置中 */
.vertically-centered {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平置中 */
    justify-content: center; /* 垂直方向置中 */
}

/* 垂直排列且靠右 */
.vertical-right {
    display: flex;            
    flex-direction: column;
    align-items: flex-end; /* 水平靠右對齊 */
}

/* 水平排列 */
.horizontal {
    display: flex;      
}

/* 水平置中排列 */
.horizontal-top {
    display: flex;  
    justify-content: center;
}

/* 水平置中排列且垂直置中 */
.horizontal-centered {
    display: flex;  
    justify-content: center;
    align-items: center;    
}

/* 水平前後排列，且垂直置中 */
.horizontally-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}