/* ============================================================
   NAS Manager — 視覺升級層

   這個檔案「只改外觀」,載入順序排在 style.css 之後,靠後載入覆蓋。
   刻意不碰任何版面骨架、不碰 .hidden 語意、不新增/改名任何 class,
   所以把 index.html 裡引用這支的那行 <link> 刪掉,就會完整退回舊樣式 ——
   萬一哪裡看不順眼,一秒還原,不用回退整包。

   用到的新能力全部包在 @supports 裡,舊瀏覽器自動退回原本的靜態樣式:
   - View Transitions ......... 切換功能頁交叉淡入、側邊欄指示條滑過去
   - @starting-style + allow-discrete ... 彈窗進退場不再硬跳
   - animation-timeline: view() ......... 卡片捲到才進場
   - container-type: scroll-state ....... sticky 工具列「黏住時」才長陰影
   - corner-shape: squircle ............. 卡片超橢圓圓角
   - color-mix() ........................ hover / 光暈全部從 --accent 推導,
                                          五種主題色與淺色主題自動跟著變
   ============================================================ */

/* ===== 衍生 token:全部從既有變數推導,不硬寫顏色 ===== */
:root{
  --r-lg:18px;
  --r-md:13px;
  --edge:color-mix(in oklab, var(--accent) 34%, var(--border));
  --glow:color-mix(in oklab, var(--accent) 20%, transparent);
  --glow-soft:color-mix(in oklab, var(--accent) 9%, transparent);
  --ring-focus:0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent);
  /* 卡片頂部那道微光:深色用白光提亮,淺色改用陰影壓邊,不然會糊成一片 */
  --sheen:linear-gradient(180deg, color-mix(in oklab, #fff 6%, transparent), transparent 46%);
  --shadow-soft:0 1px 2px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lift:0 2px 4px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.42);
}
:root[data-theme="light"]{
  --sheen:linear-gradient(180deg, color-mix(in oklab, #fff 92%, transparent), transparent 52%);
  --shadow-soft:0 1px 2px rgba(30,41,59,.05), 0 8px 22px rgba(30,41,59,.07);
  --shadow-lift:0 2px 6px rgba(30,41,59,.08), 0 18px 40px rgba(30,41,59,.14);
}

/* ===== 全域 ===== */
body{ text-rendering:optimizeLegibility; }
/* 數字全部等寬對齊 —— 儀表板每秒在跳,不對齊會左右抖動 */
.sc-val, .stat-val, .tg-val, .dv-stat, .chart2-now, #live-time,
.data-table td, .smart-grid, .vol-free, .stat-sub{
  font-variant-numeric:tabular-nums;
}
/* 鍵盤操作看得見焦點(原本完全沒有 focus 樣式)*/
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}
::selection{ background:color-mix(in oklab, var(--accent) 34%, transparent); }

@supports (corner-shape:squircle){
  .card, .card2, .modal-box, .sidebar .user-chip, .data-table,
  .dl, .temp-chip, .btn-sm, .logout, .icon-btn, .welcome-float{
    corner-shape:squircle;
  }
}

/* ===== 側邊欄 ===== */
.sidebar{
  /* 右緣加一道極淡的漸層光,把側欄跟內容區分開,不再只是一條硬線 */
  box-shadow:inset -1px 0 0 var(--border), 6px 0 24px -18px rgba(0,0,0,.8);
}
.brand-logo{
  box-shadow:0 6px 18px color-mix(in oklab, var(--accent) 32%, transparent);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.brand:hover .brand-logo{ transform:rotate(-6deg) scale(1.05); }

#nav a{
  position:relative;
  font-size:14.5px; font-weight:500;
  padding:11px 14px;
  transition:color .18s, background .18s, transform .18s;
}
#nav a:hover{ transform:translateX(2px); }
/* 原本 active 是 inset box-shadow;改成 ::before 才能掛 view-transition-name,
   切換功能頁時這條指示器會「滑」到新位置,而不是瞬間跳過去 */
#nav a.active{
  color:var(--text);
  background:linear-gradient(100deg, var(--glow), transparent 78%);
  box-shadow:none;
  font-weight:600;
}
#nav a.active::before{
  content:"";
  position:absolute; left:0; top:7px; bottom:7px; width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
}
@supports (view-transition-name:x){
  #nav a.active::before{ view-transition-name:nav-indicator; }
}
.nav-dot{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent);
}
.user-chip{
  background:linear-gradient(140deg, var(--glow-soft), var(--bg-inset));
  border-color:var(--border);
  transition:border-color .2s;
}
.user-chip:hover{ border-color:var(--edge); }
.uc-avatar{
  background:linear-gradient(135deg, var(--accent), var(--accent-hi));
  color:#fff;
}
.ws-dot.on{
  /* 呼吸的連線指示燈:比原本的靜態光暈更看得出「還活著」 */
  animation:ui-beat 2.4s ease-out infinite;
}
@keyframes ui-beat{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--accent-2) 55%, transparent); }
  55%{ box-shadow:0 0 0 6px transparent; }
}
.icon-btn:hover{ transform:rotate(30deg); }
.icon-btn{ transition:var(--trans), transform .3s cubic-bezier(.2,.8,.3,1); }

/* ===== 內容區 + 切換功能頁的 View Transition ===== */
@supports (view-transition-name:x){
  .content{ view-transition-name:main-content; }
  ::view-transition-old(main-content){ animation:ui-vt-out .18s ease both; }
  ::view-transition-new(main-content){ animation:ui-vt-in .26s cubic-bezier(.2,.8,.3,1) both; }
  ::view-transition-old(nav-indicator),
  ::view-transition-new(nav-indicator){ animation-duration:.3s; }
}
@keyframes ui-vt-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes ui-vt-in{ from{ opacity:0; transform:translateY(10px); } }

.content h2{ font-size:22px; font-weight:700; letter-spacing:-.2px; }
.dash-title{ font-size:30px; letter-spacing:-.6px; }
.dash-crumb{ text-transform:uppercase; font-size:11.5px; letter-spacing:1.6px; opacity:.8; }

/* ===== 卡片 ===== */
.card, .card2{
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
/* 頂緣微光:讓卡片看起來是「亮面」而不是一塊平色 */
.card2::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--sheen); pointer-events:none; z-index:0;
}
.card2 > *{ position:relative; z-index:1; }
.card2:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
  border-color:var(--edge);
}
.sc-bar{ height:3px; filter:saturate(1.15); }
.sc-val{ font-size:38px; letter-spacing:-1.2px; }
.sc-label{ letter-spacing:.2px; }
.sc-icon{
  background:var(--glow-soft);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.card2:hover .sc-icon{ transform:scale(1.08) rotate(-5deg); }
.ring .ring-fg{ filter:drop-shadow(0 0 4px currentColor); }

.live-pill{
  background:color-mix(in oklab, var(--accent-2) 12%, transparent);
  border-color:color-mix(in oklab, var(--accent-2) 34%, transparent);
  backdrop-filter:blur(6px);
}
.reboot-btn{ transition:var(--trans), transform .18s; }
.reboot-btn:hover:not(:disabled){ transform:translateY(-1px); }

.chart2-title{ font-size:15.5px; letter-spacing:-.1px; }
.dv-bar, .vol-bar{ box-shadow:inset 0 1px 2px rgba(0,0,0,.25); }
.dv-bar span, .vol-bar span{ box-shadow:0 0 10px color-mix(in oklab, var(--accent) 40%, transparent); }

/* ===== 表格 ===== */
.data-table{ border-radius:var(--r-md); box-shadow:var(--shadow-soft); }
/* 註:這裡刻意「不」做 sticky 表頭 —— .data-table 有 overflow:hidden,
   自己就成了捲動容器,th 的 position:sticky 會完全沒作用;而且檔案頁的
   .files-head 本來就已經 sticky 釘住工具列了,不需要再釘一層。 */
.data-table th{
  font-size:12.5px; letter-spacing:.6px;
}
.data-table tbody tr{ transition:background .15s; }
.data-table tbody tr:nth-child(even) td{
  background:color-mix(in oklab, var(--text) 2.5%, transparent);
}
.data-table tbody tr:hover td{ background:var(--glow-soft); }

/* ===== 按鈕 / 工具列 ===== */
.btn-sm, .logout, .icon-btn, .reportbtn{ transition:var(--trans), transform .16s; }
.btn-sm:hover{ transform:translateY(-1px); }
.badge{ letter-spacing:.2px; }
.temp-chip{ background:linear-gradient(140deg, var(--glow-soft), var(--bg-elev)); }

/* ===== 彈窗:進退場動畫 =====
   .modal 靠 .hidden(display:none)開關,所以要用 allow-discrete 才動得起來。
   @starting-style 提供「剛從 display:none 現身」那一格的起始值。 */
.modal{
  background:color-mix(in oklab, #000 78%, transparent);
  backdrop-filter:blur(4px);
  opacity:1;
  transition:opacity .2s, backdrop-filter .2s,
             overlay .2s allow-discrete, display .2s allow-discrete;
}
@starting-style{ .modal{ opacity:0; backdrop-filter:blur(0); } }
.modal-box{
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
  transition:translate .26s cubic-bezier(.2,.8,.3,1), scale .26s cubic-bezier(.2,.8,.3,1);
  translate:0 0; scale:1;
}
@starting-style{ .modal-box{ translate:0 -12px; scale:.97; } }
/* 全螢幕的預覽/編輯器不要跟著縮放,不然開檔案會有位移感 */
.doc-box, .editor-box{ transition:none; }
.modal-close:hover{ transform:scale(1.15); }
.modal-close{ transition:color .15s, transform .15s; }

/* ===== 檔案管理:sticky 工具列黏住時才長陰影 ===== */
@supports (container-type:scroll-state){
  .files-head{ container-type:scroll-state; }
  /* 注意:@container 查的是容器的「子孫」,元素不能查自己 ——
     所以陰影要畫在 ::after 上(偽元素的容器就是它的本體元素)。 */
  .files-head::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:14px;
    pointer-events:none; opacity:0; transition:opacity .2s;
    background:linear-gradient(180deg, rgba(0,0,0,.28), transparent);
  }
  :root[data-theme="light"] .files-head::after{
    background:linear-gradient(180deg, rgba(30,41,59,.13), transparent);
  }
  @container scroll-state(stuck: top){
    .files-head::after{ opacity:1; }
  }
}
.file-row:hover, .grid-item:hover{ transition:background .15s, transform .15s; }
.transfer-panel{ border-radius:var(--r-lg); box-shadow:var(--shadow-lift); }

/* ===== 捲動進場 =====
   每張卡片各自算自己的 view() 進度,所以自然就是交錯的,不用手寫 delay。

   ⚠️ 只給儲存頁的靜態卡片用。儀表板刻意排除 —— 那是即時監控頁,
   半透明的卡片會被當成「壞掉/沒載到」,而且螢幕矮的時候可能一直停在淡的狀態。 */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    #storage .cards > .card{
      animation:ui-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
  }
}
@keyframes ui-rise{
  from{ opacity:0; transform:translateY(18px) scale(.99); }
  to{ opacity:1; transform:none; }
}

/* ===== 登入頁 ===== */
.login-card{
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
}
.login-card::before{
  /* 卡片上緣一條主題色細線,登入頁不再是純粹的方框 */
  content:""; display:block; height:3px; margin:-1px -1px 20px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ===== 尊重系統的減少動態設定 ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}