/* 
   ══ Koala Station Shared UI Shell ══
   v1.0 (2026-04-20)
*/

:root {
    --bg:          #080C14;
    --surface:     #0D1117;
    --surface2:    #111820;
    --border:      #1F2633;
    --border2:     #2A3345;
    --border3:     #3D4F68;
    --text:        #C9D1E0;
    --text-muted:  #8899AA;
    --text-dim:    #4D6080;
    --text-strong: #E8EEF8;

    --accent:      #4F8EF7;
    --accent-bg:   #1A3567;
    --accent-bdr:  #2D5CB8;
    --accent-text: #93B8FC;

    --koala:       #4A9B6F;
    --koala-bg:    #0E2818;
    --koala-bdr:   #1A4D30;
    --koala-text:  #6EE7A0;

    --warn-bg:     #1E1A08;
    --warn-bdr:    #3D3010;
    --warn-text:   #D4B44A;

    --danger-bg:   #200E0E;
    --danger-bdr:  #3D1414;
    --danger-text: #F08080;

    --gray-bg:     #1F2633;
    --gray-text:   #8899AA;

    --log-bg:      #050810;
    --log-fg:      #6EE7A0;

    --modal-bg:    rgba(8,12,20,0.88);
    --drop-hover:  #0D1B35;
    
    --radius-sm:   5px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --header-h:    64px;
}

html.light {
    --bg:          #F0EDE8;
    --surface:     #FFFFFF;
    --surface2:    #F7F5F2;
    --border:      #E0D9D0;
    --border2:     #CEC6BA;
    --border3:     #B0A898;
    --text:        #2D2A26;
    --text-muted:  #6B6560;
    --text-dim:    #9E988F;
    --text-strong: #1A1816;

    --accent:      #2E63CC;
    --accent-bg:   #E8EFFE;
    --accent-bdr:  #9DB8E8;
    --accent-text: #1A4DAA;

    --koala:       #2E7A52;
    --koala-bg:    #E8F5EE;
    --koala-bdr:   #9ACDB4;
    --koala-text:  #1A5C38;

    --warn-bg:     #FBF5E0;
    --warn-bdr:    #D4B95A;
    --warn-text:   #7A5E10;

    --danger-bg:   #FEEEEE;
    --danger-bdr:  #E8AAAA;
    --danger-text: #8C2828;

    --gray-bg:     #EEEBE6;
    --gray-text:   #6B6560;

    --log-bg:      #1A1816;
    --log-fg:      #6EE7A0;

    --modal-bg:    rgba(30,28,25,0.6);
    --drop-hover:  #EAF0FF;
}

/* ══ BASE RESET ══ */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    transition: background 0.2s, color 0.2s;
}

/* ══ HEADER ══ */
/* v2.2.15: header gap 與 tab 內 gap 一致 (6px)，所有按鈕等距
 * v2.2.32: gap 調到 10px，避免 brand 旁的 ↻ 按鈕與「上傳 PDF」黏在一起。*/
.app-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 100%;
    overflow: hidden;
}

.app-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    flex-shrink: 0;
}

.brand-icon {
    width: 28px; height: 28px; object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-brand:hover .brand-icon { transform: scale(1.15) rotate(-5deg); }

.brand-text { line-height: 1.2; }
.brand-title { font-size: 14px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.2px; }
.brand-subtitle { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

.header-divider {
    width: 1px; height: 24px;
    background: var(--border);
    margin: 0 4px; flex-shrink: 0;
}

/* Slot B: Actions —— v2.2.15: margin-left:auto 讓 brand 靠左、所有 tab 往右靠齊 */
.app-actions {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap; flex-shrink: 0;
    margin-left: auto;
}

/* Slot C: Nav —— v2.2.35: margin-left:auto 讓 brand 靠左、nav 整組靠右 */
.app-nav {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap; flex-shrink: 1;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.app-nav::-webkit-scrollbar {
    display: none;
}

/* ══ LINKS & BUTTONS ══ */
.btn, .nav-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer; transition: all 0.15s;
    white-space: nowrap; text-decoration: none;
    background: none; color: var(--text);
}

.btn-primary { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-bdr); }
.btn-primary:hover { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

.btn-ghost { color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }

.btn-success { background: var(--koala-bg); color: var(--koala-text); border-color: var(--koala-bdr); }
.btn-success:hover { background: var(--koala); color: #fff; transform: translateY(-1px); }

.btn-warning { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-bdr); }
.btn-warning:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-bdr); }
.btn-danger:hover { background: var(--danger-text); color: #fff; transform: translateY(-1px); }

/* .nav-link 繼承 .btn 的 padding (6px 12px)，外觀寬度與 .btn-ghost 一致 */
.nav-link { color: var(--text-muted); }
.nav-link:hover { color: var(--text); background: var(--surface2); }

/* v2.2.16: .btn.active 與 .nav-link.active 共用同一「選中」樣式
   → 任何 toggle 面板的按鈕（如 Bot status）在打開時顯示淡藍底色 */
.nav-link.active,
.btn.active {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent-bdr);
    font-weight: 600;
}

/* v2.2.34: 4 顆 icon（Reload / Restart / Shutdown / Theme）改用
 * 統一 stroke-based 的 inline SVG（Lucide 風格）— 一律 22×22，
 * stroke-width 2，linecap/linejoin round。不再依賴字型 glyph / emoji，
 * 所以 font-size 那套光學補償全部移除了。button container 維持 40×40 圓形。*/
.theme-toggle {
    position: relative;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface2); border: 1px solid var(--border2);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0;
    transition: all 0.15s; color: var(--text);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--text-strong); }

/* ── Icon buttons：reload / restart / stop — 一律 28x28 圓形 ── */
.svc-btn {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
/* 4 顆 icon 共用的 SVG 尺寸規則 — width/height 寫死在 <svg> 上也 OK，但這裡
 * 再加 CSS 保險，避免 Vue 模板裡不小心忘記加 attr 時 SVG 變成 0×0 或 inherit
 * 到父元素的 font-size。color 走 currentColor，所以 theme / hover 色都會跟上。*/
.svc-btn svg,
.theme-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}
/* v2.2.32: hover 一律只改顏色 / 邊框 / 亮度 — 不用 transform，避免 :after
 *          tooltip 跟著旋轉或縮放（pseudo-element 會共用 button 的 transform）。*/
.svc-btn-reload {
    background: var(--surface2);
    color: var(--text-muted);
    border: 1px solid var(--border2);
    opacity: 0.85;
}
.svc-btn-reload:hover {
    opacity: 1;
    color: var(--text-strong);
    border-color: var(--accent);
}
.svc-btn-restart {
    background: var(--warn-bg);
    color: var(--warn-text);
    border: 1px solid var(--warn-bdr);
}
.svc-btn-restart:hover { filter: brightness(1.2); border-color: var(--warn-text); }
.svc-btn-stop {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-bdr);
}
.svc-btn-stop:hover { background: var(--danger-text); color: #fff; border-color: var(--danger-text); }

/* Hover 浮動文字 —— 讀取 data-tip 屬性（不是 title！），顯示在按鈕下方。
 * 為什麼不用 title：瀏覽器會同時顯示原生 tooltip + 我們這個 CSS tooltip，
 * 兩層文字撞在一起。改用 data-tip 就沒原生干擾；無障礙仍由 aria-label 提供。
 * 套用範圍：.svc-btn（reload / restart / stop）+ .theme-toggle，樣式一致。
 * text-shadow:none + font-weight:500 保證 tooltip 的字體不會被 host button
 *   的 text-shadow / font-weight 污染（修 v2.2.33 light/dark tooltip bold 的 bug）。 */
.svc-btn[data-tip]:hover::after,
.theme-toggle[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: var(--surface);
    color: var(--text-strong);
    border: 1px solid var(--border2);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    text-shadow: none;
    letter-spacing: 0.2px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    animation: svc-tip-in 0.12s ease-out;
}
/* 小三角指向按鈕 */
.svc-btn[data-tip]:hover::before,
.theme-toggle[data-tip]:hover::before {
    content: '';
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    width: 8px; height: 8px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--surface);
    border-left: 1px solid var(--border2);
    border-top: 1px solid var(--border2);
    box-shadow: none;
    z-index: 101;
    pointer-events: none;
}
@keyframes svc-tip-in {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* nav 內把 theme-toggle 之前那一段服務控制 group 用細間距分開；取消粗分隔線讓版面更緊湊 */
.nav-svc-group {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 4px;
}

/* v2.2.35: page sub-toolbar — sits directly below .app-header, holds the
 * page-specific buttons that were previously inside the header so that
 * .app-header can stay identical across all pages. */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.page-toolbar .spacer { margin-left: auto; }

/* ══ MODALS & POP-UPS ══ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: var(--modal-bg); backdrop-filter: blur(8px);
    animation: fadeIn 0.2s ease-out;
}

.modal-box {
    width: 100%; max-width: 440px; margin: 0 16px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}

.modal-title { font-size: 15px; font-weight: 600; color: var(--text-strong); }

.modal-body { padding: 20px; }

.modal-close {
    background: none; border: none; color: var(--text-dim);
    font-size: 20px; cursor: pointer; padding: 4px;
}
.modal-close:hover { color: var(--danger-text); }

/* ══ LOGS ══ */
.log-container {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px; line-height: 1.6;
    color: var(--log-fg); background: var(--log-bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 14px; max-height: 200px; overflow-y: auto;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* ══ RWD ══ */
@media (max-width: 1200px) {
    .brand-subtitle { display: none; }
    .btn, .nav-link { padding: 5px 8px; gap: 4px; font-size: 11.5px; }
    .app-header { padding: 8px 12px; gap: 6px; }
    .app-nav { gap: 4px; }
}

@media (max-width: 768px) {
    .brand-text { display: none; }
    .nav-label { display: none; }
    .app-header { padding: 6px 10px; gap: 4px; }
    .btn, .nav-link { padding: 5px 6px; font-size: 11px; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ══ UTILITIES ══ */
.text-center { text-align: center; }
.empty-state-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
.help-table th, .help-table td {
    border: 1px solid var(--border2);
    padding: 8px 12px;
    text-align: left;
}
.help-table th {
    background: var(--surface2);
    font-weight: 600;
}

.ai-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 4px 8px;
}

.chat-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

/* v2.2.45 (2026-05-11): 移除 <input type="number"> 右側 spinner（瀏覽器原生上下箭頭佔 16-17px，讓 toolbar input 看起來變寬）
 * Toolbar 三個 input（凌晨批次 days / Browser-Mode 篇 / API Mode 篇）用 type=number 是為了行動裝置鍵盤切數字版面，
 * 視覺上不需要 spinner — user 直接打字最快。
 */
input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}