/* ============================================================
   portal.css — 深色科技感儀表板主題
   作法：覆寫 osh-ui.css 的 --ui- token 成深色，元件 class 沿用，
        再加啟動台專屬的版面（卡片牆、狀態燈、頂列）。
   引入順序：先 osh-ui.css，再本檔。
   ============================================================ */
:root {
  --ui-background:        #0b1120;
  --ui-foreground:        #e6edf6;
  --ui-card:              #131c2e;
  --ui-card-foreground:   #e6edf6;
  --ui-popover:           #131c2e;
  --ui-popover-foreground:#e6edf6;

  --ui-primary:             #38bdf8;
  --ui-primary-foreground:  #06121f;
  --ui-primary-hover:       #7dd3fc;
  --ui-secondary:           #1e293b;
  --ui-secondary-foreground:#cbd5e1;
  --ui-secondary-hover:     #273449;
  --ui-muted:               #1a2436;
  --ui-muted-foreground:    #8a99b3;
  --ui-accent:              #1e293b;
  --ui-accent-foreground:   #e6edf6;

  --ui-brand:               #f59e0b;
  --ui-brand-foreground:    #1a1205;
  --ui-brand-hover:         #fbbf24;

  --ui-border: #243049;
  --ui-input:  #2a3852;
  --ui-ring:   56 189 248;     /* sky RGB */

  --grid-glow: radial-gradient(1200px 600px at 80% -10%, rgba(56,189,248,.12), transparent 60%),
               radial-gradient(900px 500px at 10% 110%, rgba(245,158,11,.08), transparent 55%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Segoe UI", system-ui, sans-serif;
  background: var(--ui-background);
  background-image: var(--grid-glow);
  background-attachment: fixed;
  color: var(--ui-foreground);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── 頂列 ── */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(11,17,32,.7);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.topbar .brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.05rem; letter-spacing: .3px;
}
.topbar .brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ui-primary);
  box-shadow: 0 0 12px var(--ui-primary);
}
.topbar .spacer { flex: 1; }
.topbar .meta { color: var(--ui-muted-foreground); font-size: .8rem; }

/* ── 容器 ── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

/* ── 區段標題 ── */
.section-head {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.75rem 0 .9rem;
}
.section-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.section-head .count {
  font-size: .75rem; color: var(--ui-muted-foreground);
  background: var(--ui-muted); padding: .12rem .5rem; border-radius: 999px;
}
.section-head .line { flex: 1; height: 1px; background: var(--ui-border); }

/* ── 卡片牆 ── */
.grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.tile {
  position: relative;
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1rem 1rem .85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(160deg, var(--ui-card), #0f1726);
  text-decoration: none; color: inherit;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  cursor: pointer;
  min-height: 116px;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--ui-primary);
  box-shadow: 0 12px 30px -12px rgba(56,189,248,.4);
}
.tile .row1 { display: flex; align-items: center; gap: .6rem; }
.tile .icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  font-size: 1.35rem; border-radius: 11px;
  background: var(--ui-muted); border: 1px solid var(--ui-border);
}
.tile .name { font-weight: 600; font-size: .98rem; line-height: 1.2; }
.tile .desc { font-size: .78rem; color: var(--ui-muted-foreground); line-height: 1.35; flex: 1; }

/* 狀態燈 */
.status {
  position: absolute; top: .8rem; right: .85rem;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; color: var(--ui-muted-foreground);
}
.status .led { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.status.up .led    { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.status.down .led  { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.status.checking .led { background: #eab308; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* 卡片底列：備註 + Zeabur 連結 */
.tile .foot {
  display: flex; align-items: center; gap: .5rem;
  border-top: 1px solid var(--ui-border); padding-top: .55rem; margin-top: .15rem;
}
.tile .note {
  font-size: .72rem; color: var(--ui-brand);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .zbtn {
  font-size: .72rem; color: var(--ui-muted-foreground);
  border: 1px solid var(--ui-border); border-radius: 7px;
  padding: .18rem .5rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .25rem;
}
.tile .zbtn:hover { color: var(--ui-primary); border-color: var(--ui-primary); }

/* ── 登入頁 ── */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card {
  width: 100%; max-width: 380px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl);
  background: linear-gradient(160deg, var(--ui-card), #0f1726);
  padding: 2rem 1.75rem; box-shadow: var(--ui-shadow-lg);
}
.login-card h1 { margin: 0 0 .35rem; font-size: 1.4rem; }
.login-card p { margin: 0 0 1.4rem; color: var(--ui-muted-foreground); font-size: .85rem; }
.login-card .field { margin-bottom: 1rem; }
.login-card .err { color: #f87171; font-size: .8rem; min-height: 1.1rem; margin-top: .4rem; }

/* ── admin 表格 ── */
.admin-toolbar { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.admin-toolbar .spacer { flex: 1; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); }
table.sys { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 760px; }
table.sys th, table.sys td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--ui-border); }
table.sys th { background: var(--ui-muted); color: var(--ui-muted-foreground); font-weight: 600; position: sticky; top: 0; }
table.sys input, table.sys select {
  width: 100%; background: var(--ui-background); color: var(--ui-foreground);
  border: 1px solid var(--ui-input); border-radius: 7px; padding: .35rem .5rem; font: inherit; font-size: .82rem;
}
table.sys .col-icon  { width: 56px; }
table.sys .col-cat   { width: 96px; }
table.sys .col-act   { width: 92px; white-space: nowrap; }
.drag-handle { cursor: grab; color: var(--ui-muted-foreground); user-select: none; }
tr.dragging { opacity: .4; }

.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--ui-card); border: 1px solid var(--ui-primary);
  color: var(--ui-foreground); padding: .7rem 1.1rem; border-radius: 10px;
  box-shadow: var(--ui-shadow-lg); font-size: .85rem; z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

.empty { text-align: center; color: var(--ui-muted-foreground); padding: 3rem 1rem; }
a.plain { color: var(--ui-primary); text-decoration: none; }
a.plain:hover { text-decoration: underline; }