/* Bootstrap Parser 配色方案樣式表 */

/* ========================================
   基礎配色變數（可選，用於自定義）
   ======================================== */
:root {
    --bp-color-0: #1C1C1E;    /* 底層背景色 */
    --bp-color-1: #242426;    /* 區域填充 */
    --bp-color-1h: #2a2a2c;   /* 區域填充 hover */
    --bp-color-2: #c6c7bd;    /* 文字主色 */
    --bp-color-3: #C3A5E5;    /* 薰衣草色 */
    --bp-color-4: #b9c971;    /* 特殊標記 */
    --bp-color-5: #E5A6A6;    /* 警告色 */
    --bp-color-6: #E5C3B3;    /* 柔和色 */
    --bp-color-7: #E5E5A6;    /* 注意色 */
    --bp-color-8: #A6E5E5;    /* 天空藍 */
    --bp-color-9: #84c498;    /* 安全色 */
    --bp-color-10: #a88e31;   /* 棕色 */
    --bp-color-11: #8aa1f2;   /* 資訊色 */
    --bp-color-12: #FFB3D9;   /* 粉紅色 */
    --bp-color-13: #f69653;   /* 橘色 */
}
 
/* ========================================
   Alert 元件樣式
   ======================================== */
.bp-alert {
    border-radius: 4px;
    padding: 12px 16px;
    margin: 8px 0px;
    display: block;
}

.bp-alert-primary {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border: 1px solid #C3A5E5;
}

.bp-alert-lavender {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border: 1px solid #C3A5E5;
}

.bp-alert-success {
    background-color: #84c498;
    color: #1C1C1E;
    border: 1px solid #84c498;
}

.bp-alert-safe {
    background-color: #84c498;
    color: #1C1C1E;
    border: 1px solid #84c498;
}

.bp-alert-warning {
    background-color: #E5A6A6;
    color: #1C1C1E;
    border: 1px solid #E5A6A6;
}

.bp-alert-info {
    background-color: #8aa1f2;
    color: #1C1C1E;
    border: 1px solid #8aa1f2;
}

.bp-alert-light {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border: 1px solid #E5E5A6;
}

.bp-alert-attention {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border: 1px solid #E5E5A6;
}

.bp-alert-dark {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #C3A5E5;
}

.bp-alert-decoration {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border: 1px solid #E5C3B3;
}

.bp-alert-salmon {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border: 1px solid #E5C3B3;
}

.bp-alert-danger {
    background-color: #E5A6A6;
    color: #1C1C1E;
    border: 1px solid #E5A6A6;
}

.bp-alert-special {
    background-color: #b9c971;
    color: #1C1C1E;
    border: 1px solid #b9c971;
}

.bp-alert-standard {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border: 1px solid #A6E5E5;
}

.bp-alert-sky {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border: 1px solid #A6E5E5;
}

.bp-alert-auxiliary {
    background-color: #a88e31;
    color: #1C1C1E;
    border: 1px solid #a88e31;
}

.bp-alert-brown {
    background-color: #a88e31;
    color: #1C1C1E;
    border: 1px solid #a88e31;
}

.bp-alert-auxiliary:hover,
.bp-alert-brown:hover {
    background-color: #967e2c;
}

.bp-alert-danger:hover {
    background-color: #d99292;
}

.bp-alert-pink {
    background-color: #FFB3D9;
    color: #1C1C1E;
    border: 1px solid #FFB3D9;
}

.bp-alert-pink:hover {
    background-color: #ffa0cc;
}

.bp-alert-orange {
    background-color: #f69653;
    color: #1C1C1E;
    border: 1px solid #f69653;
}

.bp-alert-orange:hover {
    background-color: #e5843f;
}

/* ========================================
   Button 元件樣式
   ======================================== */
.bp-btn {
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: bold;
    display: inline-block;
    margin: 2px 2px;
    cursor: pointer;
}

.bp-btn-primary {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border: 1px solid #C3A5E5;
}

.bp-btn-primary:hover {
    background-color: #b090d0;
}

.bp-btn-lavender {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border: 1px solid #C3A5E5;
}

.bp-btn-lavender:hover {
    background-color: #b090d0;
}

.bp-btn-success {
    background-color: #84c498;
    color: #1C1C1E;
    border: 1px solid #84c498;
}

.bp-btn-success:hover {
    background-color: #72b085;
}

.bp-btn-safe {
    background-color: #84c498;
    color: #1C1C1E;
    border: 1px solid #84c498;
}

.bp-btn-safe:hover {
    background-color: #72b085;
}

.bp-btn-danger {
    background-color: #E5A6A6;
    color: #1C1C1E;
    border: 1px solid #E5A6A6;
}

.bp-btn-danger:hover {
    background-color: #d99292;
}

.bp-btn-info {
    background-color: #8aa1f2;
    color: #1C1C1E;
    border: 1px solid #8aa1f2;
}

.bp-btn-info:hover {
    background-color: #748dd9;
}

.bp-btn-warning {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border: 1px solid #E5E5A6;
}

.bp-btn-warning:hover {
    background-color: #d1d192;
}

.bp-btn-light {
    background-color: #c6c7bd;
    color: #1C1C1E;
    border: 1px solid #c6c7bd;
}

.bp-btn-light:hover {
    background-color: #b3b4aa;
}

.bp-btn-shell {
    background-color: #c6c7bd;
    color: #1C1C1E;
    border: 1px solid #c6c7bd;
}

.bp-btn-shell:hover {
    background-color: #b3b4aa;
}

.bp-btn-attention {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border: 1px solid #E5E5A6;
}

.bp-btn-attention:hover {
    background-color: #d1d192;
}

.bp-btn-dark {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #C3A5E5;
}

.bp-btn-dark:hover {
    background-color: #1C1C1E;
}

/* Button Decoration */
.bp-btn-decoration {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border: 1px solid #E5C3B3;
}

.bp-btn-decoration:hover {
    background-color: #d4b3a3;
}

.bp-btn-salmon {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border: 1px solid #E5C3B3;
}

.bp-btn-salmon:hover {
    background-color: #d4b3a3;
}

/* Button Special */
.bp-btn-special {
    background-color: #b9c971;
    color: #1C1C1E;
    border: 1px solid #b9c971;
}

.bp-btn-special:hover {
    background-color: #a5b560;
}

/* Button Standard */
.bp-btn-standard {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border: 1px solid #A6E5E5;
}

.bp-btn-standard:hover {
    background-color: #92d1d1;
}

.bp-btn-sky {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border: 1px solid #A6E5E5;
}

.bp-btn-sky:hover {
    background-color: #92d1d1;
}

/* Button Auxiliary */
.bp-btn-auxiliary {
    background-color: #a88e31;
    color: #1C1C1E;
    border: 1px solid #a88e31;
}

.bp-btn-auxiliary:hover {
    background-color: #967e2c;
}

.bp-btn-brown {
    background-color: #a88e31;
    color: #1C1C1E;
    border: 1px solid #a88e31;
}

.bp-btn-brown:hover {
    background-color: #967e2c;
}

/* Button Pink */
.bp-btn-pink {
    background-color: #FFB3D9;
    color: #1C1C1E;
    border: 1px solid #FFB3D9;
}

.bp-btn-pink:hover {
    background-color: #ffa0cc;
}

/* Button Orange */
.bp-btn-orange {
    background-color: #f69653;
    color: #1C1C1E;
    border: 1px solid #f69653;
}

.bp-btn-orange:hover {
    background-color: #e5843f;
}

/* Button Orange */
.bp-btn-orange {
    background-color: #f69653;
    color: #1C1C1E;
    border: 1px solid #f69653;
}

.bp-btn-orange:hover {
    background-color: #e5843f;
}

/* ========================================
   Card 元件樣式
   ======================================== */
.bp-card {
    border-radius: 4px;
    margin-bottom: 16px;
}

.bp-card-header {
    padding: 12px 16px;
    font-weight: bold;
}

.bp-card-body {
    padding: 16px;
}

.bp-card-footer {
    padding: 12px 16px;
}

/* Card Primary */
.bp-card-primary {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #C3A5E5;
}

.bp-card-primary .bp-card-header {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border-bottom: 1px solid #C3A5E5;
}

.bp-card-primary .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #C3A5E5;
}

/* Card Success */
.bp-card-success {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #84c498;
}

.bp-card-success .bp-card-header {
    background-color: #84c498;
    color: #1C1C1E;
    border-bottom: 1px solid #84c498;
}

.bp-card-success .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #84c498;
}

/* Card Warning */
.bp-card-warning {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #E5A6A6;
}

.bp-card-warning .bp-card-header {
    background-color: #E5A6A6;
    color: #1C1C1E;
    border-bottom: 1px solid #E5A6A6;
}

.bp-card-warning .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #E5A6A6;
}

/* Card Info */
.bp-card-info {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #8aa1f2;
}

.bp-card-info .bp-card-header {
    background-color: #8aa1f2;
    color: #1C1C1E;
    border-bottom: 1px solid #8aa1f2;
}

.bp-card-info .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #8aa1f2;
}

/* Card Light */
.bp-card-light {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #E5E5A6;
}

.bp-card-light .bp-card-header {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border-bottom: 1px solid #E5E5A6;
}

.bp-card-light .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #E5E5A6;
}

/* Card Dark */
.bp-card-dark {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #b9c971;
}

.bp-card-dark .bp-card-header {
    background-color: #b9c971;
    color: #1C1C1E;
    border-bottom: 1px solid #b9c971;
}

.bp-card-dark .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #b9c971;
}

/* Card Decoration */
.bp-card-decoration {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #E5C3B3;
}

.bp-card-decoration .bp-card-header {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border-bottom: 1px solid #E5C3B3;
}

.bp-card-decoration .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #E5C3B3;
}

/* Card Special */
.bp-card-special {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #b9c971;
}

.bp-card-special .bp-card-header {
    background-color: #b9c971;
    color: #1C1C1E;
    border-bottom: 1px solid #b9c971;
}

.bp-card-special .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #b9c971;
}

/* Card Standard */
.bp-card-standard {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #A6E5E5;
}

.bp-card-standard .bp-card-header {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border-bottom: 1px solid #A6E5E5;
}

.bp-card-standard .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #A6E5E5;
}

/* Card Auxiliary */
.bp-card-auxiliary {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #a88e31;
}

.bp-card-auxiliary .bp-card-header {
    background-color: #a88e31;
    color: #1C1C1E;
    border-bottom: 1px solid #a88e31;
}

.bp-card-auxiliary .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #a88e31;
}

/* Card Pink */
.bp-card-pink {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #FFB3D9;
}

.bp-card-pink .bp-card-header {
    background-color: #FFB3D9;
    color: #1C1C1E;
    border-bottom: 1px solid #FFB3D9;
}

.bp-card-pink .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #FFB3D9;
}

/* Card Orange */
.bp-card-orange {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #f69653;
}

.bp-card-orange .bp-card-header {
    background-color: #f69653;
    color: #1C1C1E;
    border-bottom: 1px solid #f69653;
}

.bp-card-orange .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #f69653;
}

/* ========================================
   Progress Bar 元件樣式
   ======================================== */
.bp-progress {
    background-color: #242426;
    border-radius: 4px;
    overflow: hidden;
    height: 24px;
    margin: 8px 0px;
    border: 1px solid #1C1C1E;
}

.bp-progress-bar {
    height: 100%;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1C1C1E;
}

.bp-progress-primary .bp-progress-bar {
    background-color: #C3A5E5;
}

.bp-progress-success .bp-progress-bar {
    background-color: #84c498;
}

.bp-progress-warning .bp-progress-bar {
    background-color: #E5A6A6;
}

.bp-progress-info .bp-progress-bar {
    background-color: #8aa1f2;
}

.bp-progress-light .bp-progress-bar {
    background-color: #E5E5A6;
}

.bp-progress-dark .bp-progress-bar {
    background-color: #b9c971;
}

.bp-progress-decoration .bp-progress-bar {
    background-color: #E5C3B3;
}

.bp-progress-special .bp-progress-bar {
    background-color: #b9c971;
}

.bp-progress-standard .bp-progress-bar {
    background-color: #A6E5E5;
}

.bp-progress-auxiliary .bp-progress-bar {
    background-color: #a88e31;
}

.bp-progress-pink .bp-progress-bar {
    background-color: #FFB3D9;
}

.bp-progress-orange .bp-progress-bar {
    background-color: #f69653;
}

/* ========================================
   Badge 元件樣式
   ======================================== */
.bp-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 12px;
    margin: 2px;
}

.bp-badge-primary {
    background-color: #C3A5E5;
    color: #1C1C1E;
}

.bp-badge-lavender {
    background-color: #C3A5E5;
    color: #1C1C1E;
}

.bp-badge-success {
    background-color: #84c498;
    color: #1C1C1E;
}

.bp-badge-safe {
    background-color: #84c498;
    color: #1C1C1E;
}

.bp-badge-warning {
    background-color: #E5A6A6;
    color: #1C1C1E;
}

.bp-badge-info {
    background-color: #8aa1f2;
    color: #1C1C1E;
}

.bp-badge-light {
    background-color: #E5E5A6;
    color: #1C1C1E;
}

.bp-badge-attention {
    background-color: #E5E5A6;
    color: #1C1C1E;
}

.bp-badge-dark {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #C3A5E5;
}

.bp-badge-decoration {
    background-color: #E5C3B3;
    color: #1C1C1E;
}

.bp-badge-salmon {
    background-color: #E5C3B3;
    color: #1C1C1E;
}

.bp-badge-special {
    background-color: #b9c971;
    color: #1C1C1E;
}

.bp-badge-standard {
    background-color: #A6E5E5;
    color: #1C1C1E;
}

.bp-badge-sky {
    background-color: #A6E5E5;
    color: #1C1C1E;
}

.bp-badge-auxiliary {
    background-color: #a88e31;
    color: #1C1C1E;
}

.bp-badge-brown {
    background-color: #a88e31;
    color: #1C1C1E;
}

.bp-badge-pink {
    background-color: #FFB3D9;
    color: #1C1C1E;
}

.bp-badge-orange {
    background-color: #f69653;
    color: #1C1C1E;
}

.bp-badge-shell {
    background-color: #c6c7bd;
    color: #1C1C1E;
}

/* ========================================
   Summary/Details 元件樣式
   ======================================== */
.bp-summary {
    border-radius: 4px;
    padding: 12px;
    margin: 12px 0px;
}

.bp-summary summary {
    cursor: pointer;
    font-weight: bold;
    padding: 4px 0px;
    user-select: none;
    transition: opacity 0.2s;
}

.bp-summary summary:hover {
    opacity: 0.8;
}

.bp-summary-content {
    padding-top: 8px;
    margin-top: 12px;
    border-top: 1px solid;
}

/* Summary Primary/Lavender */
.bp-summary-primary,
.bp-summary-lavender {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #C3A5E5;
}

.bp-summary-primary summary,
.bp-summary-lavender summary {
    color: #C3A5E5;
}

.bp-summary-primary .bp-summary-content,
.bp-summary-lavender .bp-summary-content {
    border-top-color: #C3A5E5;
}

/* Summary Success/Safe */
.bp-summary-success,
.bp-summary-safe {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #84c498;
}

.bp-summary-success summary,
.bp-summary-safe summary {
    color: #84c498;
}

.bp-summary-success .bp-summary-content,
.bp-summary-safe .bp-summary-content {
    border-top-color: #84c498;
}

/* Summary Warning */
.bp-summary-warning {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #E5A6A6;
}

.bp-summary-warning summary {
    color: #E5A6A6;
}

.bp-summary-warning .bp-summary-content {
    border-top-color: #E5A6A6;
}

/* Summary Info */
.bp-summary-info {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #8aa1f2;
}

.bp-summary-info summary {
    color: #8aa1f2;
}

.bp-summary-info .bp-summary-content {
    border-top-color: #8aa1f2;
}

/* Summary Light/Attention */
.bp-summary-light,
.bp-summary-attention {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #E5E5A6;
}

.bp-summary-light summary,
.bp-summary-attention summary {
    color: #E5E5A6;
}

.bp-summary-light .bp-summary-content,
.bp-summary-attention .bp-summary-content {
    border-top-color: #E5E5A6;
}

/* Summary Dark/Special */
.bp-summary-dark,
.bp-summary-special {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #b9c971;
}

.bp-summary-dark summary,
.bp-summary-special summary {
    color: #b9c971;
}

.bp-summary-dark .bp-summary-content,
.bp-summary-special .bp-summary-content {
    border-top-color: #b9c971;
}

/* Summary Decoration/Salmon */
.bp-summary-decoration,
.bp-summary-salmon {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #E5C3B3;
}

.bp-summary-decoration summary,
.bp-summary-salmon summary {
    color: #E5C3B3;
}

.bp-summary-decoration .bp-summary-content,
.bp-summary-salmon .bp-summary-content {
    border-top-color: #E5C3B3;
}

/* Summary Sky */
.bp-summary-sky {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #A6E5E5;
}

.bp-summary-sky summary {
    color: #A6E5E5;
}

.bp-summary-sky .bp-summary-content {
    border-top-color: #A6E5E5;
}

/* Summary Brown */
.bp-summary-brown {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #a88e31;
}

.bp-summary-brown summary {
    color: #a88e31;
}

.bp-summary-brown .bp-summary-content {
    border-top-color: #a88e31;
}

/* Summary Pink */
.bp-summary-pink {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #FFB3D9;
}

.bp-summary-pink summary {
    color: #FFB3D9;
}

.bp-summary-pink .bp-summary-content {
    border-top-color: #FFB3D9;
}

/* Summary Orange */
.bp-summary-orange {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #f69653;
}

.bp-summary-orange summary {
    color: #f69653;
}

.bp-summary-orange .bp-summary-content {
    border-top-color: #f69653;
}

/* ========================================
   Table 元件樣式
   ======================================== */
.bp-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0px;
}

.bp-table thead {
    background-color: #242426;
    color: #c6c7bd;
}

.bp-table th {
    padding: 12px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #C3A5E5;
}

.bp-table td {
    padding: 12px;
    border-bottom: 1px solid #242426;
    color: #c6c7bd;
}

.bp-table tbody tr {
    background-color: #1C1C1E;
    transition: background-color 0.2s;
}

.bp-table tbody tr:hover {
    background-color: #2a2a2c;
}

.bp-table-primary thead {
    background-color: #C3A5E5;
    color: #1C1C1E;
}

.bp-table-primary th {
    border-bottom-color: #C3A5E5;
}

.bp-table-success thead {
    background-color: #84c498;
    color: #1C1C1E;
}

.bp-table-success th {
    border-bottom-color: #84c498;
}

.bp-table-warning thead {
    background-color: #E5A6A6;
    color: #1C1C1E;
}

.bp-table-warning th {
    border-bottom-color: #E5A6A6;
}

.bp-table-info thead {
    background-color: #8aa1f2;
    color: #1C1C1E;
}

.bp-table-info th {
    border-bottom-color: #8aa1f2;
}

.bp-table-light thead {
    background-color: #E5E5A6;
    color: #1C1C1E;
}

.bp-table-light th {
    border-bottom-color: #E5E5A6;
}

.bp-table-dark thead {
    background-color: #b9c971;
    color: #1C1C1E;
}

.bp-table-dark th {
    border-bottom-color: #b9c971;
}

.bp-table-decoration thead {
    background-color: #E5C3B3;
    color: #1C1C1E;
}

.bp-table-decoration th {
    border-bottom-color: #E5C3B3;
}

.bp-table-special thead {
    background-color: #b9c971;
    color: #1C1C1E;
}

.bp-table-special th {
    border-bottom-color: #b9c971;
}

.bp-table-standard thead {
    background-color: #A6E5E5;
    color: #1C1C1E;
}

.bp-table-standard th {
    border-bottom-color: #A6E5E5;
}

.bp-table-auxiliary thead {
    background-color: #a88e31;
    color: #1C1C1E;
}

.bp-table-auxiliary th {
    border-bottom-color: #a88e31;
}

.bp-table-pink thead {
    background-color: #FFB3D9;
    color: #1C1C1E;
}

.bp-table-pink th {
    border-bottom-color: #FFB3D9;
}

.bp-table-orange thead {
    background-color: #f69653;
    color: #1C1C1E;
}

.bp-table-orange th {
    border-bottom-color: #f69653;
}

/* ========================================
   List 元件樣式
   ======================================== */
.bp-list {
    list-style: none;
    padding: 0px;
    margin: 16px 0px;
    background-color: #1C1C1E;
    border-radius: 4px;
}

.bp-list-item {
    padding: 12px 16px;
    border-bottom: 1px solid #242426;
    transition: all 0.2s;
}

.bp-list-item:last-child {
    border-bottom: none;
}

.bp-list-item:hover {
    background-color: #2a2a2c;
    cursor: pointer;
}

/* List Primary */
.bp-list-primary {
    background-color: #1C1C1E;
    border-color: #C3A5E5;
}

.bp-list-primary .bp-list-item {
    color: #c6c7bd;
    border-color: #C3A5E5;
}

.bp-list-primary .bp-list-item:hover {
    background-color: #C3A5E5;
    color: #1C1C1E;
}

/* List Success */
.bp-list-success {
    background-color: #1C1C1E;
    border-color: #84c498;
}

.bp-list-success .bp-list-item {
    color: #c6c7bd;
    border-color: #84c498;
}

.bp-list-success .bp-list-item:hover {
    background-color: #84c498;
    color: #1C1C1E;
}

/* List Warning */
.bp-list-warning {
    background-color: #1C1C1E;
    border-color: #E5A6A6;
}

.bp-list-warning .bp-list-item {
    color: #c6c7bd;
    border-color: #E5A6A6;
}

.bp-list-warning .bp-list-item:hover {
    background-color: #E5A6A6;
    color: #1C1C1E;
}

/* List Info */
.bp-list-info {
    background-color: #1C1C1E;
    border-color: #8aa1f2;
}

.bp-list-info .bp-list-item {
    color: #c6c7bd;
    border-color: #8aa1f2;
}

.bp-list-info .bp-list-item:hover {
    background-color: #8aa1f2;
    color: #1C1C1E;
}

/* List Light */
.bp-list-light {
    background-color: #242426;
    border-color: #E5E5A6;
}

.bp-list-light .bp-list-item {
    color: #c6c7bd;
    border-color: #E5E5A6;
}

.bp-list-light .bp-list-item:hover {
    background-color: #E5E5A6;
    color: #1C1C1E;
}

/* List Dark */
.bp-list-dark {
    background-color: #242426;
    border-color: #b9c971;
}

.bp-list-dark .bp-list-item {
    color: #c6c7bd;
    border-color: #b9c971;
}

.bp-list-dark .bp-list-item:hover {
    background-color: #b9c971;
    color: #1C1C1E;
}

/* List Decoration */
.bp-list-decoration {
    background-color: #1C1C1E;
    border-color: #E5C3B3;
}

.bp-list-decoration .bp-list-item {
    color: #c6c7bd;
    border-color: #E5C3B3;
}

.bp-list-decoration .bp-list-item:hover {
    background-color: #E5C3B3;
    color: #1C1C1E;
}

/* List Special */
.bp-list-special {
    background-color: #1C1C1E;
    border-color: #b9c971;
}

.bp-list-special .bp-list-item {
    color: #c6c7bd;
    border-color: #b9c971;
}

.bp-list-special .bp-list-item:hover {
    background-color: #b9c971;
    color: #1C1C1E;
}

/* List Standard */
.bp-list-standard {
    background-color: #1C1C1E;
    border-color: #A6E5E5;
}

.bp-list-standard .bp-list-item {
    color: #c6c7bd;
    border-color: #A6E5E5;
}

.bp-list-standard .bp-list-item:hover {
    background-color: #A6E5E5;
    color: #1C1C1E;
}

/* List Auxiliary */
.bp-list-auxiliary {
    background-color: #1C1C1E;
    border-color: #a88e31;
}

.bp-list-auxiliary .bp-list-item {
    color: #c6c7bd;
    border-color: #a88e31;
}

.bp-list-auxiliary .bp-list-item:hover {
    background-color: #a88e31;
    color: #1C1C1E;
}

/* List Pink */
.bp-list-pink {
    background-color: #1C1C1E;
    border-color: #FFB3D9;
}

.bp-list-pink .bp-list-item {
    color: #c6c7bd;
    border-color: #FFB3D9;
}

.bp-list-pink .bp-list-item:hover {
    background-color: #FFB3D9;
    color: #1C1C1E;
}

/* List Orange */
.bp-list-orange {
    background-color: #1C1C1E;
    border-color: #f69653;
}

.bp-list-orange .bp-list-item {
    color: #c6c7bd;
    border-color: #f69653;
}

.bp-list-orange .bp-list-item:hover {
    background-color: #f69653;
    color: #1C1C1E;
}

/* ========================================
   Bootstrap Nav 自訂樣式
   ======================================== */
.nav-link {
    transition: all 0.2s;
}

.nav-link:hover {
    transform: translateY(-2px);
}

.nav-link.active {
    font-weight: bold;
}

/* 橫向導航 active 樣式 */
.nav-tabs .nav-link.active {
    background-color: #242426 !important;
    color: #c6c7bd !important;
    border-bottom-color: transparent !important;
}

/* 垂直導航 active 樣式 */
.nav.flex-column .nav-link.active {
    background-color: #242426 !important;
    color: #c6c7bd !important;
    border-right-color: transparent !important;
}

.tab-content {
    min-height: 100px;
}

/* ========================================
   配色標籤樣式
   ======================================== */
/* 數字編號樣式（向下相容） */
.bp-c-0 { color: #1C1C1E; }
.bp-c-1 { color: #242426; }
.bp-c-1h { color: #2a2a2c; }
.bp-c-2 { color: #c6c7bd; }
.bp-c-3 { color: #C3A5E5; }
.bp-c-4 { color: #b9c971; }
.bp-c-5 { color: #E5A6A6; }
.bp-c-6 { color: #E5C3B3; }
.bp-c-7 { color: #E5E5A6; }
.bp-c-8 { color: #A6E5E5; }
.bp-c-9 { color: #84c498; }
.bp-c-10 { color: #a88e31; }
.bp-c-11 { color: #8aa1f2; }
.bp-c-12 { color: #FFB3D9; }
.bp-c-13 { color: #f69653; }

.bp-bg-0 { background-color: #1C1C1E; }
.bp-bg-1 { background-color: #242426; }
.bp-bg-1h { background-color: #2a2a2c; }
.bp-bg-2 { background-color: #c6c7bd; }
.bp-bg-3 { background-color: #C3A5E5; }
.bp-bg-4 { background-color: #b9c971; }
.bp-bg-5 { background-color: #E5A6A6; }
.bp-bg-6 { background-color: #E5C3B3; }
.bp-bg-7 { background-color: #E5E5A6; }
.bp-bg-8 { background-color: #A6E5E5; }
.bp-bg-9 { background-color: #84c498; }
.bp-bg-10 { background-color: #a88e31; }
.bp-bg-11 { background-color: #8aa1f2; }
.bp-bg-12 { background-color: #FFB3D9; }
.bp-bg-13 { background-color: #f69653; }

/* 語義化品牌色彩樣式 */
/* 文字顏色 */
.bp-text-base { color: #1C1C1E; }
.bp-text-fill { color: #242426; }
.bp-text-fill-hover { color: #2a2a2c; }
.bp-text-shell { color: #c6c7bd; }
.bp-text-lavender { color: #C3A5E5; }
.bp-text-special { color: #b9c971; }
.bp-text-warning { color: #E5A6A6; }
.bp-text-salmon { color: #E5C3B3; }
.bp-text-attention { color: #E5E5A6; }
.bp-text-sky { color: #A6E5E5; }
.bp-text-safe { color: #84c498; }
.bp-text-brown { color: #a88e31; }
.bp-text-info { color: #8aa1f2; }
.bp-text-pink { color: #FFB3D9; }
.bp-text-orange { color: #f69653; }

/* 背景顏色 */
.bp-bg-base { background-color: #1C1C1E; }
.bp-bg-fill { background-color: #242426; }
.bp-bg-fill-hover { background-color: #2a2a2c; }
.bp-bg-shell { background-color: #c6c7bd; }
.bp-bg-lavender { background-color: #C3A5E5; }
.bp-bg-special { background-color: #b9c971; }
.bp-bg-warning { background-color: #E5A6A6; }
.bp-bg-salmon { background-color: #E5C3B3; }
.bp-bg-attention { background-color: #E5E5A6; }
.bp-bg-sky { background-color: #A6E5E5; }
.bp-bg-safe { background-color: #84c498; }
.bp-bg-brown { background-color: #a88e31; }
.bp-bg-info { background-color: #8aa1f2; }
.bp-bg-pink { background-color: #FFB3D9; }
.bp-bg-orange { background-color: #f69653; }

/* 邊框顏色 */
.bp-border-base { border-color: #1C1C1E; }
.bp-border-fill { border-color: #242426; }
.bp-border-fill-hover { border-color: #2a2a2c; }
.bp-border-shell { border-color: #c6c7bd; }
.bp-border-lavender { border-color: #C3A5E5; }
.bp-border-special { border-color: #b9c971; }
.bp-border-warning { border-color: #E5A6A6; }
.bp-border-salmon { border-color: #E5C3B3; }
.bp-border-attention { border-color: #E5E5A6; }
.bp-border-sky { border-color: #A6E5E5; }
.bp-border-safe { border-color: #84c498; }
.bp-border-brown { border-color: #a88e31; }
.bp-border-info { border-color: #8aa1f2; }
.bp-border-pink { border-color: #FFB3D9; }
.bp-border-orange { border-color: #f69653; }

.bp-color-span {
    padding: 2px 6px;
    border-radius: 3px;
}

/* ========================================
   Modal 元件樣式
   ======================================== */
.bp-modal-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.bp-modal-wrapper.bp-modal-show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.bp-modal {
    position: relative;
    background-color: #1C1C1E;
    border: 1px solid #C3A5E5;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bp-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #C3A5E5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #242426;
}

.bp-modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #c6c7bd;
    margin: 0px;
}

.bp-modal-close {
    background: none;
    border: none;
    color: #c6c7bd;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.bp-modal-close:hover {
    background-color: #E5A6A6;
    color: #1C1C1E;
}

.bp-modal-body {
    padding: 20px;
    color: #c6c7bd;
}

.bp-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #C3A5E5;
    background-color: #242426;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Modal 樣式變體 */
.bp-modal-primary {
    border-color: #C3A5E5;
}

.bp-modal-primary .bp-modal-header {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border-bottom-color: #C3A5E5;
}

.bp-modal-primary .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-primary .bp-modal-footer {
    border-top-color: #C3A5E5;
}

.bp-modal-success {
    border-color: #84c498;
}

.bp-modal-success .bp-modal-header {
    background-color: #84c498;
    color: #1C1C1E;
    border-bottom-color: #84c498;
}

.bp-modal-success .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-success .bp-modal-footer {
    border-top-color: #84c498;
}

.bp-modal-warning {
    border-color: #E5A6A6;
}

.bp-modal-warning .bp-modal-header {
    background-color: #E5A6A6;
    color: #1C1C1E;
    border-bottom-color: #E5A6A6;
}

.bp-modal-warning .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-warning .bp-modal-footer {
    border-top-color: #E5A6A6;
}

.bp-modal-info {
    border-color: #8aa1f2;
}

.bp-modal-info .bp-modal-header {
    background-color: #8aa1f2;
    color: #1C1C1E;
    border-bottom-color: #8aa1f2;
}

.bp-modal-info .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-info .bp-modal-footer {
    border-top-color: #8aa1f2;
}

.bp-modal-light {
    border-color: #E5E5A6;
}

.bp-modal-light .bp-modal-header {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border-bottom-color: #E5E5A6;
}

.bp-modal-light .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-light .bp-modal-footer {
    border-top-color: #E5E5A6;
}

.bp-modal-dark {
    border-color: #b9c971;
}

.bp-modal-dark .bp-modal-header {
    background-color: #b9c971;
    color: #1C1C1E;
    border-bottom-color: #b9c971;
}

.bp-modal-dark .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-dark .bp-modal-footer {
    border-top-color: #b9c971;
}

.bp-modal-decoration {
    border-color: #E5C3B3;
}

.bp-modal-decoration .bp-modal-header {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border-bottom-color: #E5C3B3;
}

.bp-modal-decoration .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-decoration .bp-modal-footer {
    border-top-color: #E5C3B3;
}

.bp-modal-special {
    border-color: #b9c971;
}

.bp-modal-special .bp-modal-header {
    background-color: #b9c971;
    color: #1C1C1E;
    border-bottom-color: #b9c971;
}

.bp-modal-special .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-special .bp-modal-footer {
    border-top-color: #b9c971;
}

.bp-modal-standard {
    border-color: #A6E5E5;
}

.bp-modal-standard .bp-modal-header {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border-bottom-color: #A6E5E5;
}

.bp-modal-standard .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-standard .bp-modal-footer {
    border-top-color: #A6E5E5;
}

.bp-modal-auxiliary {
    border-color: #a88e31;
}

.bp-modal-auxiliary .bp-modal-header {
    background-color: #a88e31;
    color: #1C1C1E;
    border-bottom-color: #a88e31;
}

.bp-modal-auxiliary .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-auxiliary .bp-modal-footer {
    border-top-color: #a88e31;
}

.bp-modal-pink {
    border-color: #FFB3D9;
}

.bp-modal-pink .bp-modal-header {
    background-color: #FFB3D9;
    color: #1C1C1E;
    border-bottom-color: #FFB3D9;
}

.bp-modal-pink .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-pink .bp-modal-footer {
    border-top-color: #FFB3D9;
}

.bp-modal-orange {
    border-color: #f69653;
}

.bp-modal-orange .bp-modal-header {
    background-color: #f69653;
    color: #1C1C1E;
    border-bottom-color: #f69653;
}

.bp-modal-orange .bp-modal-title {
    color: #1C1C1E;
}

.bp-modal-orange .bp-modal-footer {
    border-top-color: #f69653;
}

.fs-large {font-size: 2.8rem;}
.fs-xlarge {font-size: 3.5rem;}
.fs-small {font-size: 0.75rem;}
.fs-xsmall {font-size: 0.6rem;}
.w-90 {width: 90%;}
.w-80 {width: 80%;}
.w-60 {width: 60%;}

/* Card 語義化別名 */
.bp-card-lavender {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #C3A5E5;
}

.bp-card-lavender .bp-card-header {
    background-color: #C3A5E5;
    color: #1C1C1E;
    border-bottom: 1px solid #C3A5E5;
}

.bp-card-lavender .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #C3A5E5;
}

.bp-card-safe {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #84c498;
}

.bp-card-safe .bp-card-header {
    background-color: #84c498;
    color: #1C1C1E;
    border-bottom: 1px solid #84c498;
}

.bp-card-safe .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #84c498;
}

.bp-card-salmon {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #E5C3B3;
}

.bp-card-salmon .bp-card-header {
    background-color: #E5C3B3;
    color: #1C1C1E;
    border-bottom: 1px solid #E5C3B3;
}

.bp-card-salmon .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #E5C3B3;
}

.bp-card-attention {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #E5E5A6;
}

.bp-card-attention .bp-card-header {
    background-color: #E5E5A6;
    color: #1C1C1E;
    border-bottom: 1px solid #E5E5A6;
}

.bp-card-attention .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #E5E5A6;
}

.bp-card-special {
    background-color: #242426;
    color: #c6c7bd;
    border: 1px solid #b9c971;
}

.bp-card-special .bp-card-header {
    background-color: #b9c971;
    color: #1C1C1E;
    border-bottom: 1px solid #b9c971;
}

.bp-card-special .bp-card-footer {
    background-color: #1C1C1E;
    border-top: 1px solid #b9c971;
}

.bp-card-sky {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #A6E5E5;
}

.bp-card-sky .bp-card-header {
    background-color: #A6E5E5;
    color: #1C1C1E;
    border-bottom: 1px solid #A6E5E5;
}

.bp-card-sky .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #A6E5E5;
}

.bp-card-brown {
    background-color: #1C1C1E;
    color: #c6c7bd;
    border: 1px solid #a88e31;
}

.bp-card-brown .bp-card-header {
    background-color: #a88e31;
    color: #1C1C1E;
    border-bottom: 1px solid #a88e31;
}

.bp-card-brown .bp-card-footer {
    background-color: #242426;
    border-top: 1px solid #a88e31;
}