/* =========================================================
   Root Variables
   ========================================================= */
:root {
  --font-family-base: 'Inter', 'Noto Sans TC', sans-serif;
  --font-family-heading: 'Inter', 'Noto Sans TC', sans-serif;
  --font-weight-heading: 700;
  --font-size-post-heading: 1.25rem;
  --color-divider: #6c757d;

  --alert-max-width: 520px;
  --alert-spacing: 1rem;
  --alert-radius: 0.25rem;

  --container-mobile-padding: 1.5rem;

  --navbar-bg-light: #ffffff;
  --navbar-bg-dark: #1a1a1a;

}

/* =========================================================
   Theme: Light
   ========================================================= */
[data-bs-theme="light"] {
  --bs-heading-color: #212529;
  --bs-body-color: #212529;
  --bs-body-real-color: #F8F9FA;

  --bs-danger: #dd1405;

  --bs-link-color-rgb: 108, 117, 125;
  --bs-link-hover-color-rgb: 4, 16, 30;

  --disabled-color: var(--bs-gray-500);

  /* 14.5 SPEC 圓角規範 */
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 24px;
  --bs-border-radius-xxl: 24px;
  --bs-border-radius-2xl: 24px;
}

/* =========================================================
   Theme: Dark
   ========================================================= */
[data-bs-theme="dark"] {
  --bs-heading-color: #E8E8ED;
  --bs-body-color: #E8E8ED;
  --bs-body-real-color: #121212;

  --bs-danger: #dd1405;

  --bs-link-color-rgb: 200, 200, 200;
  --bs-link-hover-color-rgb: 255, 255, 255;

  --disabled-color: var(--bs-gray-700);

  /* 14.5 SPEC 圓角規範 */
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 24px;
  --bs-border-radius-xxl: 24px;
  --bs-border-radius-2xl: 24px;
}

/* =========================================================
   Base Elements
   ========================================================= */
body {
  background-color: var(--bs-body-real-color);
  font-family: var(--font-family-base);
}

.body::after {
  content: "";
  position: absolute;
  inset: 0; /* 等同於 top:0; right:0; bottom:0; left:0; */
  background: linear-gradient(
    to bottom,
    transparent,
    var(--bs-body-real-color) 50%,
    var(--bs-body-real-color)
  );
  pointer-events: none;
}

body,
input,
textarea,
button {
  font-family: var(--font-family-base);
}

input::placeholder,
textarea::placeholder {
  color: var(--disabled-color) !important;
}

a {
  text-decoration: none;
}

a:hover:not(.btn, .dropdown-item) {
  text-decoration: underline;
}

legend,
.form-text {
  font-size: 1rem;
}

legend {
  font-weight: var(--font-weight-heading);
}

/* =========================================================
   Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
  font-size: var(--font-size-post-heading);
  font-style: italic;
}

/* =========================================================
   Navbar
   ========================================================= */
.navbar,
.navbar .btn {
  font-weight: var(--font-weight-heading);
}

.navbar-brand {
  display: none;
}

.navbar .dropdown-menu {
  z-index: 2000;
}

[data-bs-theme="light"] .navbar {
  background-color: var(--navbar-bg-light);
  border-bottom: 1px solid rgb(237, 237, 238);
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--navbar-bg-dark);
  border-bottom: 1px solid rgb(48, 53, 59);
}

.py-3.sticky-top {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  font-family: var(--font-family-base);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-check-input:checked {
    background-color: #dd1405;
    border-color: #dd1405;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dd1405;
    --bs-btn-border-color: #dd1405;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b51103; /* 稍深一點的紅色 hover */
    --bs-btn-hover-border-color: #a70f03;
    --bs-btn-focus-shadow-rgb: 221, 20, 5; /* focus 光暈顏色 */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a70f03; /* active 更深的紅 */
    --bs-btn-active-border-color: #950d03;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dd1405;
    --bs-btn-disabled-border-color: #dd1405;
}

.btn-outline-danger {
    --bs-btn-color: #dd1405;
    --bs-btn-border-color: #dd1405;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dd1405;
    --bs-btn-hover-border-color: #dd1405;
    --bs-btn-focus-shadow-rgb: 221, 20, 5;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dd1405;
    --bs-btn-active-border-color: #dd1405;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #dd1405;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dd1405;
    --bs-gradient: none;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  --bs-btn-disabled-bg: var(--disabled-color);
  --bs-btn-disabled-border-color: var(--disabled-color);
  --bs-btn-disabled-color: var(--bs-light);
  cursor: not-allowed;
}

.btn-group-xs > .btn,
.btn-xs {
  --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-color: var(--bs-body-color);
  --bs-pagination-focus-color: var(--bs-body-color);
  --bs-pagination-active-bg: var(--bs-danger);
  --bs-pagination-active-border-color: var(--bs-danger);
}


/* =========================================================
   Fieldset
   ========================================================= */

.fieldset,
label {
  font-size: 0.85rem;
}
.fieldset .fieldset {
  padding: 1rem;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.fieldset .fieldset legend {
  color: var(--bs-gray-500);
}

/* =========================================================
   Nav Pills Underline
   ========================================================= */
.nav-pills--underline {
  --bs-nav-pills-link-active-color: var(--bs-body-color);
  --bs-nav-pills-link-active-bg: transparent;
  --bs-nav-pills-border-radius: 0;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-padding-x: 0;

  --bs-nav-pills-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-secondary-color);
  --bs-nav-link-color: var(--bs-secondary-color);
}

.nav-pills--underline .active.nav-link {
  border-bottom: 3px solid var(--bs-primary);
}

.nav-pills--underline .nav-item:not(:last-child) {
  margin-right: 1rem;
}

/* =========================================================
   Amount Form + Table
   ========================================================= */
/* =========================================================
   Components / Utilities
   ========================================================= */
.draggable-wrapper .list-group-item {
  cursor: grab;
}

.alert--notify {
  width: auto;
  max-width: var(--alert-max-width);
  left: var(--alert-spacing);
  right: auto;
  z-index: 1050;
  border-radius: var(--alert-radius);
}

.dragover-active {
  border-color: var(--bs-info) !important;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pen {
  color: var(--bs-primary) !important;
  font-weight: bold;
}

.strikethrough {
  position: relative;
  color: var(--bs-secondary);
}

.strikethrough::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--bs-danger);
  transform: translateY(-50%);
}

.custom-divider .list-inline-item:not(:last-child)::after {
  content: "|";
  color: var(--color-divider);
  margin-left: 0.5rem;
}

.hero-section {
  transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-only-not-absolute {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}

.blurred {
  pointer-events: none;
}

.bounce-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.bounce-hover:hover {
  /* SPEC 14.4 高級感微互動，降低大卡片的放大比例，避免過度突兀 */
  transform: scale(1.02);
}

.editable-text {
  min-width: 1ch;
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  white-space: pre;
  font-size: 0.875rem;
  line-height: 1;
}

.editable-text:empty:before {
  content: attr(data-placeholder);
  color: var(--disabled-color);
}

footer,
.foot-note,
.foot-note h2 {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

/* =========================================================
   Media Queries
   ========================================================= */
@media (max-width: 576px) {
  .alert {
    max-width: calc(100vw - 2 * var(--alert-spacing));
    right: var(--alert-spacing);
    left: var(--alert-spacing);
    border-radius: var(--alert-radius);
  }

  .container,
  .container-fluid {
    padding-left: var(--container-mobile-padding) !important;
    padding-right: var(--container-mobile-padding) !important;
  }
}

@media (max-width: 768px) {
  .amount-form {
    font-size: 1rem;
  }

  .table--amount-form th,
  .table--amount-form td {
    padding: 0.25rem 0;
    font-size: 0.75rem;
    line-height: 0.95rem;
  }
}