/* MY LIFE v14｜柔霧版面 V2｜六大分類統一透明度｜2026-11-04
   獨立樣式調整，不觸碰 JavaScript、資料格式或 localStorage。
   在 index.html 的所有舊 CSS 後面載入，才會覆蓋原版白框。
*/
:root {
  /* 只調這些數字就能改變整體質感，0=透明，1=不透明 */
  --life-record-alpha: .85;
  --life-background-wash: .12;   /* 風景底圖的白色柔光 */
  --life-shell-alpha: .50;      /* 其他工具頁的大面板 */
  --life-card-alpha: .94;       /* 其他工具頁的紀錄卡片 */
  --life-input-alpha: .78;      /* 全站輸入框：保留閱讀清晰度 */
  --life-hero-alpha: .90;       /* 夢想清單淡紫橫幅 */
  --life-calendar-day-alpha: .80; /* 月曆每日格子 */

  /* 核心設定：六大分類的「記一筆」＋「統計」＋「紀錄卡」共用同一個數字 */
  --life-category-alpha: .80;  /* 0=完全透、1=完全白；建議先試 .65～.75 */

  /* 版面數字：可自由小幅微調 */
  --life-dream-hero-height: 95px;
  --life-dream-title-size: 19px;
  --life-dream-row-height: 70px;
  --life-search-row-height: 78px;
  --life-search-text-size: 14px;
}

/* 一、底圖：原本工具頁疊 #fff7 的白色薄霧，現在淡一些。 */
body[data-page="calendar"] main,
body[data-page="dreams"] main,
body[data-page="search"] main,
body[data-page="settings"] main {
  background-image:
    linear-gradient(rgba(255,255,255,var(--life-background-wash)), rgba(255,255,255,var(--life-background-wash))),
    url('assets/tools-wide.png');
}
@media (max-width:600px) {
  body[data-page="calendar"] main,
  body[data-page="dreams"] main,
  body[data-page="search"] main,
  body[data-page="settings"] main {
    background-image:
      linear-gradient(rgba(255,255,255,var(--life-background-wash)), rgba(255,255,255,var(--life-background-wash))),
      url('assets/tools-tall.png');
  }
}

/* 二、上方白色標題列、大面板及統計外框。 */
body[data-page="calendar"] header,
body[data-page="dreams"] header,
body[data-page="search"] header,
body[data-page="settings"] header {
  background:rgba(252,249,243,var(--life-shell-alpha));
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(2px);
}
body[data-page="category"] header>div,
body[data-page="category"] #headerBack,
body[data-page="category"] #headerAdd,
body[data-page="category"] .category-tabs {
  background:rgba(252,249,243,var(--life-category-alpha));
  border-color:rgba(255,255,255,.50);
}
body[data-page="calendar"] .calendar-controls,
body[data-page="calendar"] .calendar-records,
body[data-page="dreams"] .dream-column,
body[data-page="settings"] .panel,
body:not([data-page="home"]) .calendar-box {
  background:rgba(252,249,243,var(--life-shell-alpha));
  border-color:rgba(255,255,255,.50);
  box-shadow:none;
}
/* 六大分類同一套濃淡：外層只留輕薄底色，避免兩層白框疊到太濃。 */
body[data-page="category"] .category-record-panel {
  background:rgba(252,249,243,.50);
  border-color:rgba(255,255,255,.38);
  box-shadow:none;
}
body[data-page="category"] .category-record-panel .summary-box,
body[data-page="category"] .category-record-panel .summary-box.v245-summary-host {
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.50);
}
/* 全六類都統一覆蓋統計 JS 寫入的預設透明度（包含運動與書房）。 */
body[data-page="category"] .v245-card {
  --panel-alpha:var(--life-category-alpha) !important;
  border-color:rgba(255,255,255,.50);
  box-shadow:0 3px 10px rgba(84,74,73,.045);
}
/* 「記一筆」也是六類共用值；只改底色，不改輸入欄位、驗證或按鈕行為。 */
body[data-page="category"] .category-inline-form {
  background:rgba(252,249,243,var(--life-category-alpha));
  border-color:rgba(255,255,255,.62);
  box-shadow:0 3px 12px rgba(84,74,73,.045);
  backdrop-filter:blur(1.5px);
}
/* 取消強制撐高：解決棒棒糖、甜甜圈圖下方的大留白。 */
.v245-card .chart-content {min-height:0;}

/* 三、搜尋、分類紀錄、月曆中所有「展示用」白卡。 */
body:not([data-page="home"]) .record,
body:not([data-page="home"]) .dream-row,
body:not([data-page="home"]) .today,
body[data-page="calendar"] .calendar-lookup,
body[data-page="calendar"] .calendar-lookup-hit {
  background:rgba(255,255,255,var(--life-card-alpha));
  border-color:rgba(255,255,255,.55);
  box-shadow:none;
}
/* v14 分類頁有較強的白卡樣式，需要單獨覆蓋。 */
body[data-page="category"] .category-record-panel .record {
  background:rgba(255,255,255,var(--life-record-alpha));
}
body[data-page="dreams"] .dream-row.completed {
  background:rgba(235,240,230,.55);
}
body[data-page="category"] .category-record-panel .record.future-record {
  background:rgba(235,240,230,var(--life-record-alpha));
}
body:not([data-page="home"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body:not([data-page="home"]) select,
body:not([data-page="home"]) textarea,
body[data-page="category"] .category-record-panel .toolbar input,
body[data-page="calendar"] #calendarLookup {
  background-color:rgba(255,255,255,var(--life-input-alpha));
}
/* 彈窗保持清楚；分類頁的「記一筆」已由共用濃淡控制。 */
#editor, #dreamDialog, #categoryPicker, #mobileCalendarLookupDialog {
  background-color:rgba(252,249,243,.95);
}

/* 月曆｜一般日期格透明度 */
body[data-page="calendar"]
.day:not(.is-today):not(.selected-day) {
  background:rgba(
    255,255,255,
    var(--life-calendar-day-alpha)
  );
}

body[data-page="calendar"] .records .month-divider,
body[data-page="search"] .records .month-divider,
body[data-page="category"] .records .month-divider {
  background:rgba(219,210,229,.30);
}
/* 標題、工具頁搜尋框的大小稍微整理。 */
body[data-page="search"] header {padding:8px 14px;}
body[data-page="search"] header h1 {font-size:21px;margin:3px 0 0;}
body[data-page="search"] .toolbar {margin:11px 0 13px;}
body[data-page="search"] .toolbar input {min-height:42px;}

/* 四、夢想清單：橫幅縮短、句子靠左置中、右邊按鈕維持單行。 */
body[data-page="dreams"] .visual-dream-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:var(--life-dream-hero-height);
  padding:12px 20px;
  margin:0 0 12px;
  border-radius:17px;
  background:rgba(232,225,240,var(--life-hero-alpha));
  border:1px solid rgba(255,255,255,.45);
}
body[data-page="dreams"] .visual-dream-intro h2 {
  margin:0;
  flex:1;
  min-width:0;
  font-size:var(--life-dream-title-size);
  line-height:1.5;
  letter-spacing:.5px;
}
body[data-page="dreams"] .visual-dream-intro #addDream {
  flex:none;
  width:auto;
  min-width:148px;
  height:auto;
  min-height:44px;
  padding:10px 15px;
  margin:0;
  white-space:nowrap;
  line-height:1.3;
  text-align:center;
  font-size:12px;
  letter-spacing:.2px;
}
body[data-page="dreams"] .dream-columns {gap:15px;}
body[data-page="dreams"] .dream-column {padding:12px 13px;min-width:0;}
body[data-page="dreams"] .dream-column>h2 {
  margin:0 0 10px;
  padding:5px 3px 8px;
  background:rgba(252,249,243,.43);
  border-radius:7px;
  font-size:12px;
  letter-spacing:1.7px;
}
body[data-page="dreams"] .dream-list {gap:8px;}
body[data-page="dreams"] .dream-row {
  height:var(--life-dream-row-height);
  min-height:var(--life-dream-row-height);
  padding:9px 12px;
  gap:11px;
  align-items:center;
}
body[data-page="dreams"] .dream-row-title {font-size:13px;line-height:1.5;}
body[data-page="dreams"] .dream-preview {margin-top:3px!important;font-size:11px;}

/* 五、搜尋：內容更緊湊，讓風景多露出一些。 */
body[data-page="search"] .records {gap:8px;}
body[data-page="search"] .record {
  min-height:var(--life-search-row-height);
  padding:10px 13px;
  gap:12px;
  align-items:center;
}
body[data-page="search"] .record-icon {
  width:37px;
  height:37px;
  border-radius:11px;
  font-size:19px;
}
body[data-page="search"] .record-meta {gap:8px;margin-bottom:4px;font-size:10px;}
body[data-page="search"] .record-content {
  font-size:var(--life-search-text-size);
  line-height:1.55;
}
body[data-page="search"] .record small {margin-top:4px;line-height:1.5;}
body[data-page="search"] .record .more {align-self:center;}
body[data-page="search"] .records .month-divider {margin:9px 0 3px;padding:9px 12px;}
body[data-page="search"] .records .day-divider {padding:7px 4px 3px;}
@media(min-width:1100px) {
  body[data-page="search"] #content.list-view {
    width:min(100%,1190px);
    margin-inline:auto;
  }
}
@media(max-width:600px) {
  body[data-page="dreams"] .visual-dream-intro {
    min-height:0;
    padding:14px 13px;
    gap:10px;
    flex-direction:column;
    align-items:flex-start;
  }
  body[data-page="dreams"] .visual-dream-intro h2 {font-size:17px;}
  body[data-page="dreams"] .visual-dream-intro #addDream {min-width:0;min-height:44px;padding:10px 14px;}
  body[data-page="dreams"] .dream-row {min-height:68px;height:68px;}
  body[data-page="search"] .record {min-height:70px;padding:10px 11px;gap:9px;}
  body[data-page="search"] header h1 {font-size:19px;}
}


/* 六、書房桌機版專用：僅改內部排版，不另設透明度。 */
@media (min-width:1450px) and (min-height:760px) {
  body[data-page="category"]
  .summary-box:has(.v245-study) > .summary-content {
    max-height:none;
    overflow:visible;
  }
  .v245-study .chart-content {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:14px;
    align-items:center;
    min-height:0;
  }
  .v245-study .study-chart-wrap {min-width:0;padding-top:0;}
  .v245-study .study-chart-wrap .chart-svg {width:100%;max-width:none;}
  .v245-study .study-calendar {min-width:0;margin-top:0;gap:4px;}
  .v245-study .study-calendar .cal-day {min-height:30px;}
  .v245-study .study-calendar .cal-head {padding:3px 0;}
  .v245-study .chart-summary {min-height:0;margin:5px 0 7px;}
  .v245-study .chart-footer {margin-top:5px;padding-top:6px;}
}


/* 七、桌機六大統計：展開優先看圖，收合恢復紀錄；手機版不受影響 */
/*
  真實結構：#category-records > .record-panel-tools > details.summary-box
  與 #category-records > #listArea。
  避免改動原本的展開事件、列表搜尋、月份篩選及資料儲存。
*/
@media (min-width:901px) {
  /* 統計已展開：右欄最多只留下外層一條捲軸，不會裁切整張圖。 */
  body[data-page="category"] #category-records:has(> .record-panel-tools > .summary-box[open]) {
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
  }

  /* 解除先前 style / update / category-ui / stats-v245 對統計內容的高度限制。 */
  body[data-page="category"] #category-records .summary-box[open] > .summary-content {
    max-height:none;
    height:auto;
    overflow:visible;
  }

  /* 展開時先看完整統計；原本紀錄仍在 DOM 中，不改任何資料。 */
  body[data-page="category"] #category-records:has(> .record-panel-tools > .summary-box[open]) > #listArea {
    display:none;
  }

  /* 收合時讓原本列表再次獨立捲動，不影響原有的搜尋與翻頁。 */
  body[data-page="category"] #category-records:not(:has(> .record-panel-tools > .summary-box[open])) {
    overflow:hidden;
  }
}

/* 月曆｜柔和薰衣草紫 */

/* 今天：稍深的柔霧紫 */
body[data-page="calendar"] .day.is-today {
  background: rgba(221, 208, 235, .90);
  color: #5F4F70;
  box-shadow: inset 0 0 0 2px #B8A1CC;
}

/* 選取日期：淺薰衣草紫 */
body[data-page="calendar"] .day.selected-day {
  background: rgba(240, 231, 245, .90);
  color: #5F4F70;
  box-shadow: inset 0 0 0 2px #B69ACB;
}

/* 今天剛好也是選取日期 */
body[data-page="calendar"]
.day.is-today.selected-day {
  background: rgba(221, 208, 235, .95);
  box-shadow: inset 0 0 0 2px #A68BBF;
}

/* MY LIFE｜月曆桌機版面 V3 */
/* 只影響電腦，不影響手機 */

@media (min-width: 1000px) {

  /* 左右欄比例 */
  body[data-page="calendar"]
  #content.calendar-layout {
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
    gap: 14px;
  }

  /* 月曆從上方開始排列 */
  body[data-page="calendar"]
  .calendar-controls {
    justify-content: flex-start;
    overflow: hidden;
  }

  /* 月份月曆的高度 */
  body[data-page="calendar"]
  .desktop-calendar.calendar {
    flex: 0 0 auto;
    height: min(65dvh, 540px);
    max-height: none;
    min-height: 0;
  }

  /* 日期格內部間距 */
  body[data-page="calendar"]
  .desktop-calendar .day {
    min-height: 0;
    padding: 4px 3px;
    gap: 3px;
  }

  /* 右側紀錄保持獨立滑動 */
  body[data-page="calendar"]
  .calendar-records > #listArea {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
  }
}

/* MY LIFE｜夢想清單版面微調 V1 */

/* 電腦版專用 */
@media (min-width: 1000px) {

  /* 左右兩欄 */
  body[data-page="dreams"] .dream-columns {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* 夢想卡片高度 */
  body[data-page="dreams"] .dream-row {
    height: 64px;
    min-height: 64px;
  }

  /* 夢想文字 */
  body[data-page="dreams"] .dream-row-title {
    font-size: 18px;
  }
}

/* 手機版專用 */
@media (max-width: 600px) {

  /* 紫色橫幅：文字與按鈕左右排列 */
  body[data-page="dreams"] .visual-dream-intro {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 84px;
    padding: 12px 14px;
  }

  body[data-page="dreams"] .visual-dream-intro h2 {
    font-size: 16px;
    margin: 0;
  }

  /* 新增夢想按鈕 */
  body[data-page="dreams"] .visual-dream-intro #addDream {
    min-width: 0;
    min-height: 42px;
    padding: 9px 11px;
    font-size: 11px;
  }

  /* 手機夢想卡片 */
  body[data-page="dreams"] .dream-row {
    height: 68px;
    min-height: 68px;
  }

  body[data-page="dreams"] .dream-row-title {
    font-size: 15px;
  }
}