/*!
 * data-fit-theme v2.0
 * 2025/4
 * data-ardswc246-theme 針對土石流防災資訊網的顏色主題
 * 2025/5
 */
:root,
[data-fit-theme="fitColor"] {
  --fit-green: #00bb00;
  --fit-green-dark: #1f845a;
  --fit-green-light: #baf3db;
  --fit-green-rgb: 31, 132, 90;
  --fit-green-dark-rgb: 75, 206, 151;
  --fit-green-light-rgb: 186, 243, 219;

  --fit-yellow: #f5cd47;
  --fit-yellow-dark: #946f00;
  --fit-yellow-light: #f8e6a0;
  --fit-yellow-rgb: 245, 205, 71;
  --fit-yellow-dark-rgb: 148, 111, 0;
  --fit-yellow-light-rgb: 248, 230, 160;

  --fit-orange: #fea362;
  --fit-orange-dark: #c25100;
  --fit-orange-light: #fedec8;
  --fit-orange-rgb: 254, 163, 98;
  --fit-orange-dark-rgb: 194, 81, 0;
  --fit-orange-light-rgb: 254, 222, 200;

  --fit-red: #dc143c;
  --fit-red-dark: #9b112c;
  --fit-red-light: #ffced8;
  --fit-red-rgb: 220, 20, 60;
  --fit-red-dark-rgb: 201, 55, 44;
  --fit-red-light-rgb: 255, 169, 186;

  --fit-purple: #9f8fef;
  --fit-purple-dark: #6e5dc6;
  --fit-purple-light: #dfd8fd;
  --fit-purple-rgb: 159, 143, 239;
  --fit-purple-dark-rgb: 110, 93, 198;
  --fit-purple-light-rgb: 223, 216, 253;

  --fit-blue: #603813;
  --fit-blue-dark: #0c66e4;
  --fit-blue-light: #cce0ff;
  --fit-blue-rgb: 87, 157, 255;
  --fit-blue-dark-rgb: 12, 102, 228;
  --fit-blue-light-rgb: 204, 224, 255;

  --fit-brown: #603813;
  --fit-brown-dark: #261608;
  --fit-brown-light: #c47226;
  --fit-brown-rgb: 96, 56, 19;
  --fit-brown-dark-rgb: 38, 22, 8;
  --fit-brown-light-rgb: 196, 114, 38;

  --fit-pink: #e774bb;
  --fit-pink-dark: #ae4787;
  --fit-pink-light: #fdd0ec;
  --fit-pink-rgb: 231, 116, 187;
  --fit-pink-dark-rgb: 174, 71, 135;
  --fit-pink-light-rgb: 253, 208, 236;

  --fit-black: #8590a2;
  --fit-black-dark: #626f86;
  --fit-black-light: #dcdfe4;
  --fit-black-rgb: 133, 144, 162;
  --fit-black-dark-rgb: 98, 111, 134;
  --fit-black-light-rgb: 220, 223, 228;

  --fit-dark: #212529;
  --fit-light: #f8f9fa;
  --fit-dark-rgb: 33, 37, 41;
  --fit-light-rgb: 248, 249, 250;

  --fit-white: #ffffff;
  --fit-white-rgb: 255, 255, 255;
}

:root,
[data-ardswc246-theme="light"] {
  --ardswc246-red: #ed001d;
  --ardswc246-red-rgb: 237, 0, 29;
  --ardswc246-yellow: #ffe75c;
  --ardswc246-yellow-rgb: 255, 231, 92;
  --ardswc246-green: #00cdd2;
  --ardswc246-green-rgb: 0, 205, 210;
  --ardswc246-blue: #2385c4;
  --ardswc246-blue-rgb: 35, 133, 196;
  --ardswc246-blue-light: #b0d8f3;
  --ardswc246-blue-light-rgb: 176, 216, 243;
  --ardswc246-blue-dark: #003050;
  --ardswc246-blue-dark-rgb: 0, 48, 80;

  --ardswc246-orange: #ee742b;
  --ardswc246-orange-rgb: 238, 116, 43;
  --ardswc246-text-dark: #44546f;
  --ardswc246-text-dark-rgb: 68, 84, 111;
}

/*ardswc-雨量值*/
.rain-green,
table .rain-green,
.dtTable > tbody > tr.rain-green > td {
  color: var(--fit-green) !important;
}
.rain-blue,
table .rain-blue,
.dtTable > tbody > tr.rain-blue > td {
  color: var(--fit-blue-dark) !important;
}
.rain-brown,
table .rain-brown,
.dtTable > tbody > tr.rain-brown > td {
  color: var(--fit-yellow-dark) !important;
}
.rain-pink,
table .rain-pink,
.dtTable > tbody > tr.rain-pink > td {
  color: var(--fit-pink) !important;
}
.rain-red,
table .rain-red,
.dtTable > tbody > tr.rain-red > td {
  color: var(--fit-red) !important;
}

/*增加bootstrap沒有的樣式*/

/*自訂按鈕*/
.btn-custom-blue {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--ardswc246-blue);
  --bs-btn-border-color: var(--fit-white);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
  --bs-btn-hover-border-color: var(--fit-white);
  --bs-btn-focus-shadow-rgb: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
  --bs-btn-active-color: var(--fit-white);
  --bs-btn-active-bg: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
  --bs-btn-active-border-color: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
}
.btn-custom-blue-light {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--ardswc246-blue-dark);
  --bs-btn-bg: var(--ardswc246-blue-light);
  --bs-btn-border-color: var(--fit-white);
  --bs-btn-hover-color: var(--ardswc246-blue-dark);
  --bs-btn-hover-bg: rgba(var(--ardswc246-blue-rgb), 0.5);
  --bs-btn-hover-border-color: var(--fit-white);
  --bs-btn-focus-shadow-rgb: #06546b98;
  --bs-btn-active-color: var(--fit-white);
  --bs-btn-active-bg: #06546b98;
  --bs-btn-active-border-color: #06546b98;
}
.btn-custom-outline-blue-light {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--ardswc246-blue);
  --bs-btn-bg: var(--fit-white);
  --bs-btn-border-color: var(--ardswc246-blue-light);
  --bs-btn-hover-color: var(--ardswc246-blue-dark);
  --bs-btn-hover-bg: var(--ardswc246-blue-light);
  --bs-btn-hover-border-color: var(--fit-white);
  --bs-btn-focus-shadow-rgb: #06546b;
  --bs-btn-active-color: var(--ardswc246-blue-dark);
  --bs-btn-active-bg: #06546b;
  --bs-btn-active-border-color: #06546b;
}
.btn-custom-green {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--ardswc246-green);
  --bs-btn-border-color: var(--ardswc246-green);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #009396;
  --bs-btn-hover-border-color: #009396;
  --bs-btn-focus-shadow-rgb: #009396;
  --bs-btn-active-color: #009396;
  --bs-btn-active-bg: #009396;
  --bs-btn-active-border-color: #009396;
}
.btn-custom-light {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-bg: var(--bs-white);
  --bs-btn-border-color: var(--bs-gray-400);
  --bs-btn-hover-color: var(--bs-gray-800);
  --bs-btn-hover-bg: var(--bs-gray-200);
  --bs-btn-hover-border-color: var(--bs-gray-800);
  --bs-btn-focus-shadow-rgb: var(--bs-gray-200);
  --bs-btn-active-color: var(--bs-gray-200);
  --bs-btn-active-bg: var(--bs-gray-200);
  --bs-btn-active-border-color: var(--bs-gray-200);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
  --bs-btn-bg: var(--fit-white);
}

/* 自訂table顏色 */
.table-purple {
  --bs-table-color: #000;
  --bs-table-bg: #e6e0f8; /* 淡紫色背景 */
  --bs-table-border-color: #d3c6f0; /* 淺紫色邊框 */
  --bs-table-striped-bg: #ddd4f5; /* 條紋背景 */
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d3c6f0; /* 點擊時背景 */
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d9ccf3; /* 滑鼠懸停背景 */
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
/* 線條顏色 */
.border-custom-blue {
  /* --bs-border-opacity: 1; */
  border-color: rgba(var(--ardswc246-blue-light), 1) !important;
}
/*背景*/
.bg-black {
  background: var(--fit-black) !important;
  color: var(--fit-white);
}
.bg-blue {
  background: var(--ardswc246-blue) !important;
  color: var(--fit-white);
}
.bg-blue-light {
  background: var(--ardswc246-blue-light) !important;
  color: var(--ardswc246-blue-dark);
}
.bg-blue-dark {
  background: var(--ardswc246-blue-dark) !important;
  color: var(--fit-white);
}

/* 字體顏色-ardswc246 */
.text-ardswc246-blue {
  color: var(--ardswc246-blue-dark) !important;
}
.text-ardswc246-blue-light {
  color: var(--ardswc246-blue) !important;
}

/* 字體顏色-fit */
.text-fit-white {
  color: var(--fit-white) !important;
}
.text-fit-purple {
  color: var(--fit-purple) !important;
}
.text-fit-green {
  color: var(--fit-green) !important;
}
.text-fit-pink {
  color: var(--fit-pink) !important;
}
.text-fit-orange {
  color: var(--fit-orange) !important;
}
.text-fit-orange-dark {
  color: var(--fit-orange-dark) !important;
}
.text-fit-red {
  color: var(--fit-red) !important;
}

/* 藍色漸層 */
.bg-blue-gradient {
  background: linear-gradient(
    135deg,
    rgba(75, 186, 255, 1),
    rgba(23, 116, 209, 1)
  );
  color: var(--fit-white);
}