/* 自定義主題色系 - 基於指定的五種顏色 */

:root {
    --primary-dark: #272932;    /* Raisin Black - 深灰黑色 */
    --primary-blue: #4D7EA8;    /* Steel Blue - 鋼藍色 */
    --primary-gray: #828489;    /* Gray - 灰色 */
    --primary-rose: #9E90A2;    /* Rose Quartz - 玫瑰石英色 */
    --primary-light: #B6C2D9;   /* Powder Blue - 粉藍色 */
    --text-color: #FFFFFF;      /* 白色文字 */
}

/* 背景色設定 */
body {
    background-color: var(--primary-light);
    color: var(--text-color);
}

/* 頁首設定 */
.header.black-bg {
    background-color: var(--primary-dark) !important;
    color: var(--text-color);
}

/* 側邊欄設定 */
#sidebar {
    background-color: var(--primary-dark);
}

#sidebar .sidebar-menu > li > a {
    color: var(--text-color);
}

#sidebar .sidebar-menu > li.active > a,
#sidebar .sidebar-menu > li > a:hover {
    background-color: var(--primary-blue);
    color: var(--text-color);
}

/* 主內容區域設定 */
#main-content {
    background-color: var(--primary-light);
}

.wrapper {
    background-color: var(--primary-light);
}

/* 卡片和面板設定 */
.panel {
    background-color: var(--primary-gray);
    border-color: var(--primary-dark);
}

.panel-heading {
    background-color: var(--primary-blue);
    color: var(--text-color);
    border-color: var(--primary-dark);
}

/* 表格設定 */
.table {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--primary-light);
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #FFFFFF;
}

.table-hover > tbody > tr:hover {
    background-color: var(--primary-rose);
    color: var(--text-color);
}

/* 表格標題 */
.table > thead > tr > th {
    background-color: var(--primary-blue);
    color: var(--text-color);
}

/* 固定浮動標題 - 不影響 PatientDataManagement 頁面 */
/* 將這個樣式註釋掉，以免影響原有的固定標題功能 */
/*
.sticky-header {
    position: sticky;
    top: 60px;
    z-index: 100;
    background-color: var(--primary-blue);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
*/

/* 按鈕設定 */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-blue);
    color: var(--text-color);
}

.btn-success {
    background-color: var(--primary-blue);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.btn-success:hover, .btn-success:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-blue);
    color: var(--text-color);
}

.btn-info {
    background-color: var(--primary-rose);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.btn-info:hover, .btn-info:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-rose);
    color: var(--text-color);
}

.btn-warning {
    background-color: var(--primary-gray);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.btn-warning:hover, .btn-warning:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-gray);
    color: var(--text-color);
}

.btn-danger {
    background-color: var(--primary-dark);
    border-color: var(--primary-blue);
    color: var(--text-color);
}

.btn-danger:hover, .btn-danger:focus {
    background-color: var(--primary-blue);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

/* 導航設定 */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--primary-blue);
    color: var(--text-color);
    border-color: var(--primary-dark);
}

/* 分頁設定 */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--primary-blue);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

/* 表單設定 */
.form-control {
    background-color: #FFFFFF;
    border-color: var(--primary-gray);
    color: var(--primary-dark);
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 8px var(--primary-blue);
}

/* 警告訊息設定 */
.alert-success {
    background-color: var(--primary-blue);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.alert-info {
    background-color: var(--primary-light);
    border-color: var(--primary-blue);
    color: var(--primary-dark);
}

/* 底部欄設定 - 適用於所有頁面 */
html, body {
    height: 100%;
}

#container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-content {
    flex: 1;
}

.site-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: var(--primary-dark);
    color: var(--text-color);
    padding: 15px 0;
    z-index: 1000;
}

/* 白色背景頁面樣式 - 適用於登入、註冊和其他需要白色背景的頁面 */
.account-page .row.mt,
.full-white-bg .row.mt {
    margin-top: 0;
    margin-bottom: 0;
}

.account-page .form-panel,
.account-page .content-panel,
.full-white-bg .form-panel,
.full-white-bg .content-panel {
    background-color: #fff;
    min-height: calc(100vh - 150px); /* 減去頭部和底部的高度 */
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 30px;
    width: 100%;
}

.account-page .wrapper,
.full-white-bg .wrapper {
    padding: 0;
    background-color: #fff;
}

.account-page #main-content,
.full-white-bg #main-content {
    background-color: #fff;
}

/* QDrant頁面的白色背景錐到底 */
.full-white-bg .content-panel,
.full-white-bg .form-panel {
    background-color: #fff;
    min-height: calc(100vh - 150px);
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 30px;
    width: 100%;
}

/* 登入和註冊頁面的主內容區域樣式 - 完全錐滿整個頁面寬度 */
.account-page #main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

.account-page .wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 全局提示字樣式 - 適用於所有頁面 */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-dark);
    font-weight: bold;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.9rem;
}

h4 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.3rem;
}

/* 表單標籤樣式 */
label.control-label {
    color: var(--primary-dark);
    font-weight: bold;
    font-size: 1.4rem;
}

/* 表格標題和提示文字 */
.panel-heading h3, .panel-heading h4 {
    color: var(--text-color);
    font-weight: bold;
}

/* 表格內容文字 */
.table th {
    font-weight: bold;
    color: var(--text-color);
}

/* 提示文字和說明文字 */
.help-block, .text-muted, .form-text {
    color: var(--primary-dark);
    font-weight: 500;
    font-size: 1.2rem;
}

/* 小提示字 */
small {
    color: var(--primary-dark);
    font-weight: 500;
    font-size: 1.1rem;
}

/* 選單項目文字 */
.sidebar-menu li a span {
    font-weight: bold;
    font-size: 1.2rem;
}

/* 按鈕文字 */
.btn {
    font-weight: bold;
    font-size: 1.2rem;
}

/* 表格內容 */
.table td, .table th {
    font-size: 1.2rem;
}

/* 一般段落文字 */
p {
    font-size: 1.2rem;
}

/* 表單元素 */
.form-control {
    font-size: 1.2rem;
    height: auto;
    padding: 10px 12px;
}

.alert-warning {
    background-color: var(--primary-rose);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.alert-danger {
    background-color: var(--primary-dark);
    border-color: var(--primary-blue);
    color: var(--text-color);
}

/* Bootstrap Table 設定 */
.bootstrap-table .table {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.bootstrap-table .table > thead > tr > th {
    background-color: var(--primary-blue);
    color: var(--text-color);
}

.bootstrap-table .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--primary-light);
}

.bootstrap-table .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #FFFFFF;
}

.bootstrap-table .table-hover > tbody > tr:hover {
    background-color: var(--primary-rose);
    color: var(--text-color);
}

.fixed-table-container {
    border-color: var(--primary-gray);
}

.fixed-table-header {
    background-color: var(--primary-blue);
}

.fixed-table-toolbar .btn-group > .btn {
    background-color: var(--primary-blue);
    border-color: var(--primary-dark);
    color: var(--text-color);
}

.fixed-table-toolbar .btn-group > .btn:hover {
    background-color: var(--primary-dark);
    color: var(--text-color);
}

.fixed-table-pagination .pagination-detail {
    color: var(--primary-dark);
}

.fixed-table-pagination .page-list {
    color: var(--primary-dark);
}