/* Modern replacement for -ms-high-contrast deprecation */
@media (forced-colors: active) {
  html, body {
    background-color: Canvas;
    color: CanvasText;
  }
}

/* Legacy fallback for older Edge */
@media (-ms-high-contrast: active) {
  html, body {
    background-color: Window;
    color: WindowText;
  }
}


#top-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: #1565c0 !important; /* 深藍色 */
  border-bottom: 1.5px solid #1976d2;
}
#top-menu a, #top-menu .dropdown-item {
  text-decoration: none;
  color: #fff !important;
}
#top-menu .dropdown-toggle {
  text-decoration: none;
  color: #fff !important;
}
#top-menu .dropdown-menu {
  background-color: #1976d2;
  color: #fff;
}
#top-menu .dropdown-item:hover, #top-menu .dropdown-item:focus {
  background-color: #0d47a1;
  color: #fff;
}

.container {
  margin-top: 70px; /* 根據實際 menu 高度調整，可視情況用 padding-top */
}


table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    /*color:#333333;*/
    color: black;
    border-width: 1px;
    /*border-color: #666666;*/
    border-color: black;
    border-collapse: collapse;
}

    table.gridtable th {
        text-align: center;
        align-content: center;
        align-items: center;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        /*border-color: #666666;*/
        border-color: black;
        background-color: #dedede;
    }

    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        /*border-color: #666666;*/
        border-color: black;
        background-color: #ffffff;
    }

body.bg-dark table.gridtable {
  color: #f8f9fa;
  border-color: #6c757d;
}

body.bg-dark table.gridtable th {
  background-color: #495057;
  border-color: #6c757d;
  color: #f8f9fa;
}

body.bg-dark table.gridtable td {
  background-color: #343a40;
  border-color: #6c757d;
  color: #f8f9fa;
}



body { margin: 0; }
body.bg-dark #top-menu .dropdown-menu {
  background-color: #343a40;
  color: #f8f9fa;
}
body.bg-dark #top-menu {
  background-color: #343a40;
  border-color: #555;
}
body.bg-dark #top-menu .dropdown-item {
  color: #dee2e6;
}
body.bg-dark #top-menu .dropdown-item:hover,
body.bg-dark #top-menu .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

/* display login email on the right side of the menu
   `.login-email` uses auto left margin to push itself to the end
   while keeping items aligned horizontally
   this ensures the email appears on the far right
   across both light and dark modes
   and remains consistent with existing flex layout
   這段 CSS 用於將登入信箱顯示在導覽列最右側
   並保持深色／淺色主題下的呈現一致
   English comment summarizing same purpose
   it's recommended to keep comment in English for maintainers
   since rest of project uses English comments */
.login-email {
  margin-left: auto;
}
.login-nameid {
  margin-left: 0.5rem;
}

.dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/* Readonly form fields should look disabled but still submit values */
textarea[readonly],
input[readonly] {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 1;
}
body.bg-dark textarea[readonly],
body.bg-dark input[readonly] {
  background-color: #495057;
  color: #fff;
  border-color: #6c757d;
}

/*
  Override Bootstrap's bg-light to use a softer gray.
  This reduces eye strain when light mode is enabled
  without affecting existing theme toggle logic.
*/
.bg-light {
  background-color: #e9ecef !important;
}

/* Water Theme Styles */
.water-theme {
  background: linear-gradient(135deg, #b3e0ff 0%, #e0f7fa 100%) !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.water-theme h1, .water-theme h2, .water-theme h3, .water-theme label, .water-theme .form-label {
  color: #0077b6;
  text-shadow: 0 2px 8px #b3e0ff88;
}
.water-theme .btn-primary {
  background: linear-gradient(90deg, #0093e9 0%, #80d0c7 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px #b3e0ff44;
}
.water-theme .btn-primary:hover {
  background: linear-gradient(90deg, #0077b6 0%, #00c6fb 100%);
}
.water-theme .form-control {
  border: 1.5px solid #90caf9;
  background: #f0faff;
}
.water-theme .form-control:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 0.2rem #b3e0ff55;
}
.water-theme .form-text, .water-theme ul {
  color: #0277bd;
}
.water-theme .table {
  background: #e3f2fd;
  border-color: #b3e0ff;
}
.water-theme .table th {
  background: #b3e0ff;
  color: #01579b;
}
.water-theme .table td {
  background: #e0f7fa;
}
/* Water ripple effect for main container */
.water-theme .container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"><ellipse cx="50%25" cy="60%25" rx="60%25" ry="20%25" fill="%23b3e0ff33"/><ellipse cx="60%25" cy="70%25" rx="40%25" ry="10%25" fill="%23e0f7fa33"/></svg>');
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.water-theme .container {
  position: relative;
  z-index: 1;
}
.water-theme #top-menu {
  background: linear-gradient(90deg, #7ed6fb 0%, #b2f0fb 100%) !important;
  border-bottom: 1.5px solid #4fc3f7;
  box-shadow: 0 2px 8px #b3e0ff33;
}
.water-theme #top-menu a, .water-theme #top-menu .dropdown-item {
  color: #1976d2;
}
.water-theme #top-menu .dropdown-menu {
  background: #e3f2fd;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 16px #b3e0ff22;
}
.water-theme #top-menu .dropdown-item:hover, .water-theme #top-menu .dropdown-item:focus {
  background: #b3e0ff;
  color: #01579b;
}