/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');

/* ===== 基礎重置 ===== */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Maven Pro", sans-serif;
}

html,
body {
  height: 100%;
}

/* ===== 登入頁面樣式 ===== */
#userLogin {
  background-color: #6697ff;
}

#logoNav {
  background-color: #6697ff;
}

.wrapper {
  height: 100vh;
}

.myColor {
  background-color: #010f2e;
}

.myShadow {
  box-shadow: 0 5px 15px #111;
}

.loginBtn {
  border-radius: 50px;
  font-weight: bold;
  font-size: 20px;
  background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  border: none;
}

.loginBtn:hover {
  background-image: linear-gradient(to right, #495aff 0%, #0acffe 100%);
}

.myHr {
  height: 2px;
  border-radius: 100px;
}

.myLinkBtn {
  border-radius: 100px;
  width: 80%;
  border: 2px solid #fff;
}

/* ===== 登入表單輸入框圓角 ===== */
.input-group:not(:has(.input-group-append)) .form-control {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

.input-group:not(:has(.input-group-append)) .input-group-text {
  border-radius: 0.375rem 0 0 0.375rem !important;
}

.input-group:has(.input-group-append) .form-control {
  border-radius: 0 !important;
}

.input-group:has(.input-group-append) .input-group-text {
  border-radius: 0.375rem 0 0 0.375rem !important;
}

.input-group:has(.input-group-append) .input-group-append .btn {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* ===== 側邊欄導航 ===== */
.navbar-side {
  width: 240px;
  height: calc(100vh - 68px);
  position: fixed;
  top: 68px;
  left: 0;
  background-color: #343a40;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

.navbar-side ul li a {
  padding: 10px;
  display: inline-block;
  text-decoration: none;
  color: #ccc;
  font-size: 1.1em;
  width: 100%;
  padding-left: 20px;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
  white-space: nowrap;
}

.navbar-side ul li a:hover,
.navbar-side ul li a.link-active {
  background-color: #212121;
  border-left: 5px solid #ccc;
}

.navbar-side ul li a .icon {
  padding-right: 10px;
}

.navbar-side ul li {
  list-style-type: none;
}

/* ===== 主要內容區域 ===== */
.content {
  margin-left: 240px;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

.navbar {
  height: 68px !important;
  background-color: #6697ff;
}

.navbar img {
  width: 220px;
}

.content #navBtn {
  margin-right: auto;
  margin-left: 8px;
  font-size: 20px;
}

.myContent {
  margin-top: 68px;
}

/* ===== Header 樣式 ===== */
.navbar-side-header {
  width: 200px; 
  font-size: 1.3em; 
  font-weight: 900;
}

.navbar-logo {
  height: 50px; 
  width: auto; 
  object-fit: contain;
}

/* ===== 卡片樣式 ===== */
/* 預設 card 樣式 - 用於儀表板等頁面 */
.card-header {
  background-color: #204863;
}

.card {
  border-color: #204863;
}

/* profile 和 keysetting 頁面的 card 樣式 */
.myContent .card.round-0.border-dark {
  border-color: #343a40 !important;
}

.myContent .card-header.bg-light {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6;
}

.myContent .card-body {
  padding: 1.25rem;
}

.myContent .card-header .d-flex {
  align-items: center;
}

.myContent .card-header h5 {
  margin: 0;
  font-weight: 600;
}

/* enablebox 頁面專用樣式 */
.enablebox-card-header {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6;
}

/* ===== 按鈕樣式 ===== */
.myContent .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  font-weight: 500;
}

.myContent .btn-primary:hover {
  background-color: #0056b3;
  border-color: #004085;
}

.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none;
}

/* ===== 邊框樣式 ===== */
.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

/* ===== 側邊欄動畫 ===== */
.main.animate .navbar-side {
  width: 60px;
  -webkit-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

.main.animate .navbar-side .link-text {
  display: none;
}

.main.animate .navbar-side .myCaret {
  display: none;
}

.main.animate .content {
  margin-left: 60px;
}

.myBtn[aria-expanded="false"] .myCaret:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
  transition: all 0.5s;
}

.myBtn[aria-expanded="true"] .myCaret:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
  transition: all 0.5s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* ===== 固定滾動區域 ===== */
.lockscroll {
  position: fixed;
  width: 95%
}

/* ===== 表格和 DataTable 樣式 ===== */
/* 通用 DataTable 樣式 */
.dataTables_wrapper {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.dataTables_wrapper .row {
  margin: 0 !important;
  width: 100% !important;
  overflow: hidden;
}

.dataTables_wrapper .col-sm-12 {
  padding: 0 !important;
  overflow: hidden;
}

.dataTables_wrapper .dataTable {
  width: 100% !important;
  min-width: 100%;
}

.dataTables_wrapper .dataTables_scroll {
  width: 100%;
}

.table-responsive {
  max-width: 100%;
  border-radius: 6px;
  background: #fff;
  overflow-x: hidden !important;
  overflow-y: auto;
  margin-top: 1rem;
}

.table-responsive table {
  width: 100% !important;
}

/* DataTable 控制項樣式 */
.dataTables_filter {
  margin-bottom: 15px;
  text-align: right;
  overflow: visible !important;
}

.dataTables_filter input {
  max-width: 200px;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  overflow: visible !important;
}

.dataTables_filter label {
  white-space: nowrap;
  overflow: visible !important;
}

.dt-buttons {
  margin-bottom: 15px;
  overflow: visible !important;
}

.dt-buttons .btn {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 4px;
  margin-right: 5px;
  overflow: visible !important;
}

.dataTables_length {
  margin-bottom: 15px;
  overflow: visible !important;
}

.dataTables_length select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  overflow: visible !important;
}

.dataTables_info {
  margin-top: 15px;
  color: #666;
  overflow: visible !important;
}

.dataTables_paginate {
  margin-top: 15px;
  overflow: visible !important;
}

.dataTables_paginate .paginate_button {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 0 2px;
  background: transparent;
  color: #333;
  overflow: visible !important;
}

.dataTables_paginate .paginate_button.current {
  background: #007bff;
  color: #fff;
  border: none;
}

/* 表格文字置中 */
.dataTables_wrapper table thead th,
.dataTables_wrapper table tbody td {
  text-align: center !important;
}

.table td, .table th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* ===== Modal 樣式 ===== */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1050 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: 98% !important;
  width: 98% !important;
}

/* records-grid modal 特殊樣式 */
.records-modal-dialog {
  max-width: 98% !important;
  width: 98% !important;
}

.records-modal-content {
  width: 100% !important;
}

.records-modal-header {
  padding: 10px 20px !important;
}

.records-modal-body {
  padding: 20px !important;
}

/* 編輯設備 modal 樣式 */
#editDeviceModal .modal-dialog {
  max-width: 500px !important;
  width: 500px !important;
  max-height: 80vh !important;
  height: 80vh !important;
}

#editDeviceModal .modal-content {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0.3rem;
}

#editDeviceModal .modal-header {
  flex-shrink: 0 !important;
  padding: 0.5rem 1rem;
  background-color: #6697ff;
}

#editDeviceModal .modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0.75rem !important;
}

#editDeviceModal .modal-footer {
  flex-shrink: 0 !important;
}

#editDeviceModal .modal-title {
  font-size: 1rem;
}

#editDeviceModal .form-group {
  margin-bottom: 0.75rem;
}

#editDeviceModal .form-group h5 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

#editDeviceModal .form-control {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  height: auto;
}

#editDeviceModal .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
}

#editDeviceModal .btn-lg {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}

/* QR Modal 樣式 */
.qr-modal-header {
  background-color: #6697ff;
}

.qr-print-btn {
  background-color: #6697ff;
}

/* ===== 地圖相關樣式 ===== */
.map-wrapper {
  width: 100%; 
  overflow: hidden; 
  margin-top: 10px;
}

.map-container {
  display: none; 
  border: 1px solid #ddd; 
  border-radius: 5px; 
  box-sizing: border-box;
}

#editDeviceModal .map-wrapper {
  margin-top: 0.5rem;
}

#editDeviceModal #mapContainer {
  height: 400px;
  width: 100%;
  max-width: 100%;
}

.location-info {
  display: none;
}

/* Google Maps 樣式優化 */
.gm-style .gm-style-iw {
  padding: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 7px rgba(0,0,0,0.3) !important;
}

.gm-style .gm-style-iw-c {
  padding: 0 !important;
  max-width: 350px !important;
  min-width: 200px !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
}

.gm-style .gm-style-iw-tc {
  display: none !important;
  width: 20px !important;
  height: 20px !important;
}

.gm-style .gm-style-iw-tc::after {
  display: none !important;
}

.gm-style .gm-style-iw-tc .gm-style-iw-tc-gm {
  width: 20px !important;
  height: 20px !important;
}

/* 地圖信息窗口樣式 */
.map-info-window {
  padding: 10px 15px; 
  min-width: 200px; 
  max-width: 350px; 
  font-size: 15px; 
  line-height: 1.5;
}

.map-info-title {
  font-weight: bold; 
  color: #333; 
  margin-bottom: 6px; 
  font-size: 16px; 
  white-space: nowrap;
}

.map-info-address {
  color: #666; 
  font-size: 14px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

/* ===== 通知徽章 ===== */
.nav-link {
  position: relative;
}

.checkNotification {
  position: relative;
}

.checkNotification .badge-counter {
  position: absolute;
  transform: scale(0.7);
  transform-origin: top left;
  right: .25rem;
  margin-top: -.25rem;
}

.badge-counter {
  position: absolute;
  transform: scale(0.7);
  transform-origin: top right;
  right: .25rem;
  margin-top: -.25rem;
}

/* ===== 設備管理相關樣式 ===== */
#edit-device-form #ebxid {
  font-size: 2rem;
  font-weight: 500;
  background-color: transparent;
  border: none;
  outline-width: 0;
}

.dt-button.excelButton {
  width: 15em;
  background-color: #6697ff !important;
  color: white;
  border: 0em;
}

.marginImage {
  margin-left: 55px;
}

.circle-online {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgb(45, 183, 45);
  border-radius: 50% !important;
  height: 100px;
  width: 100px;
  border-width: 5px !important;
}

.circle-offline {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: rgb(228, 226, 226);
  border-radius: 50% !important;
  height: 100px;
  width: 100px;
  border-width: 5px !important;
}

/* ===== 表單樣式 ===== */
form.is-readonly input[readonly],
input[disabled],
textarea[disabled] {
  cursor: text;
  background-color: #fff !important;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

form.is-readonly .KeyUpdateBtn {
  display: none;
}

form.is-editing .KeyEditBtn {
  display: none;
}

/* 金鑰長度驗證樣式 */
.error {
  border-color: red;
}

.warning {
  color: red;
  display: none;
}

/* ===== Records 頁面樣式 ===== */
.records-container {
  position: fixed; 
  width: 85%;
}

.records-nav-icon {
  color: #7a7a7a;
}

/* 郵件驗證樣式 */
.email-verification {
  color: Gray;
}

.resend-email-link {
  color: red; 
  font-weight: 600;
}

/* Tab 圖片樣式 */
.tab-image {
  height: 30px !important;
}

/* 狀態圖標樣式 */
.status-4g-filter {
  filter: invert(69%) sepia(10%) saturate(2293%) hue-rotate(71deg) brightness(91%) contrast(86%);
}

.status-joystick-enabled {
  filter: invert(75%) sepia(18%) saturate(1467%) hue-rotate(346deg) brightness(98%) contrast(91%);
}

.status-joystick-disabled {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(71deg) brightness(100%) contrast(100%);
}

/* 操作按鈕樣式 */
.action-buttons {
  white-space: nowrap;
}