/* ============================================================
   LOOPIN ZEN DESIGN SYSTEM
   Philosophy: Quiet Software, Loud Data
   Style: Japanese Minimalism x Quiet SaaS Technology
   ============================================================ */

/* === Design Tokens (CSS Variables) === */
:root {
    /* Surfaces */
    --zen-bg: #FAFAF8;
    --zen-surface: #FFFFFF;
    --zen-surface-2: #F3F1EC;
    --zen-surface-alt: #F7F5F0;
    --zen-surface-elevated: rgba(255, 255, 255, 0.82);
    --zen-surface-glass: rgba(255, 255, 255, 0.68);
    --zen-bg-subtle: #F7F5F0;

    /* Borders */
    --zen-border: #E4E1DA;
    --zen-border-hover: #C8C0B5;

    /* Typography */
    --zen-text-primary: #2B2B2E;
    --zen-text-secondary: #5D5B56;
    --zen-text-muted: #8B8983;

    /* Accent */
    --zen-accent: #6E89B5;
    --zen-accent-hover: #3D5A8A;
    --zen-accent-soft: rgba(110, 137, 181, 0.12);
    --zen-tech: #4FB6B0;
    --zen-warm: #D98E6B;
    --zen-focus: rgba(110, 137, 181, 0.18);
    --zen-grid-line: rgba(61, 90, 138, 0.035);

    /* Semantic */
    --zen-gold: #B28A5E;
    --zen-gold-bg: rgba(178, 138, 94, 0.10);
    --zen-gold-border: rgba(178, 138, 94, 0.22);
    --zen-success: #7A9B7E;
    --zen-success-bg: rgba(122, 155, 126, 0.12);
    --zen-warning: #B96A5E;
    --zen-warning-bg: rgba(217, 142, 107, 0.13);
    --zen-info: #4FB6B0;
    --zen-info-bg: rgba(79, 182, 176, 0.12);

    /* Layout */
    --zen-sidebar-w: 4rem;
    /* 64px - icon rail */
    --zen-sidebar-full: 16rem;
    /* 256px - mobile full */
    --zen-topbar-h: 3rem;
    /* 48px */
    --zen-panel-w: 30rem;
    /* 480px - right context panel */

    /* Motion */
    --zen-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --zen-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --zen-fast: 0.12s;
    --zen-normal: 0.28s;
    --zen-slow: 0.45s;

    /* Radius */
    --zen-r-sm: 0.625rem;
    --zen-r-md: 0.875rem;
    --zen-r-lg: 1rem;
    --zen-r-xl: 1.25rem;

    /* Shadows */
    --zen-shadow-xs: 0 1px 2px rgba(43, 43, 46, 0.025);
    --zen-shadow-sm: 0 8px 24px rgba(43, 43, 46, 0.045);
    --zen-shadow-md: 0 14px 42px rgba(43, 43, 46, 0.065);
    --zen-shadow-lg: 0 22px 64px rgba(14, 17, 22, 0.10);
    --zen-shadow-panel: -12px 0 56px rgba(14, 17, 22, 0.08);
}

/* === Base Override === */
body,
html {
    font-family: 'Noto Sans TC', 'Montserrat', 'Inter', sans-serif !important;
    background: var(--zen-bg) !important;
    color: var(--zen-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    max-width: 100%;
}

body {
    line-height: 1.7;
    background:
        radial-gradient(circle at 12% 8%, rgba(110, 137, 181, 0.13), transparent 24rem),
        radial-gradient(circle at 84% 4%, rgba(79, 182, 176, 0.08), transparent 22rem),
        linear-gradient(var(--zen-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--zen-grid-line) 1px, transparent 1px),
        var(--zen-bg) !important;
    background-size: auto, auto, 40px 40px, 40px 40px, auto;
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--zen-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--zen-border-hover);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.zen-topbar {
    height: var(--zen-topbar-h);
    background: rgba(250, 250, 248, 0.84);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    border-bottom: 1px solid var(--zen-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
}

.zen-brand {
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'Montserrat', 'Inter', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zen-accent);
    text-decoration: none;
    flex-shrink: 0;
}

/* Command Bar Button */
.zen-cmd-trigger {
    flex: 1;
    max-width: 18rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 1.875rem;
    padding: 0 0.625rem;
    background: var(--zen-bg);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-sm);
    font-size: 0.75rem;
    color: var(--zen-text-muted);
    cursor: pointer;
    transition: border-color var(--zen-fast) var(--zen-ease),
        box-shadow var(--zen-fast) var(--zen-ease);
    text-align: left;
    white-space: nowrap;
}

.zen-cmd-trigger:hover {
    border-color: var(--zen-border-hover);
    box-shadow: var(--zen-shadow-xs);
}

.zen-cmd-trigger .zen-cmd-kbd {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 1.125rem;
    padding: 0 0.3125rem;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    color: var(--zen-text-muted);
    font-family: 'Montserrat', 'Inter', sans-serif;
    flex-shrink: 0;
}

/* Topbar right side tools */
.zen-topbar-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.zen-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 1.875rem;
    padding: 0 0.5rem;
    border-radius: var(--zen-r-sm);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--zen-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--zen-fast), color var(--zen-fast);
    white-space: nowrap;
}

.zen-topbar-btn:hover {
    background: var(--zen-surface-2);
    color: var(--zen-text-primary);
}

.zen-topbar-btn.hidden {
    display: none !important;
}

@media (min-width: 768px) {
    .zen-topbar-btn.hidden.md\:inline-flex {
        display: inline-flex !important;
    }

    .zen-topbar-divider.hidden.md\:block {
        display: block !important;
    }

    .zen-topbar-btn.md\:hidden {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .zen-topbar-btn.lg\:hidden {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .drawer.md\:drawer-open {
        grid-auto-columns: var(--zen-sidebar-w) minmax(0, 1fr);
        grid-template-columns: var(--zen-sidebar-w) minmax(0, 1fr);
    }

    .drawer.md\:drawer-open>.drawer-content {
        grid-column-start: 2;
        width: 100%;
        min-width: 0;
    }

    .drawer.md\:drawer-open>.drawer-toggle~.drawer-side {
        grid-column-start: 1;
        position: sticky;
        top: 0;
        display: grid;
        width: var(--zen-sidebar-w);
        min-width: var(--zen-sidebar-w);
        height: 100svh;
        pointer-events: auto;
        visibility: visible;
        overflow: visible;
        z-index: 40;
    }

    .drawer.md\:drawer-open>.drawer-toggle~.drawer-side>.drawer-overlay {
        display: none;
    }

    .drawer.md\:drawer-open>.drawer-toggle~.drawer-side>*:not(.drawer-overlay) {
        transform: translateX(0) !important;
    }
}

@media (max-width: 767.98px) {

    html,
    body {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: none;
        overflow-x: clip;
        max-width: 100%;
    }

    .drawer-toggle {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
    }

    .drawer {
        grid-auto-columns: minmax(0, 1fr);
        overflow-x: clip;
        overscroll-behavior-x: none;
        max-width: 100%;
    }

    .drawer-content {
        grid-column-start: 1;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    #page-main {
        overflow-x: clip !important;
        overscroll-behavior-x: none;
        max-width: 100%;
    }

    .zen-topbar {
        min-width: 0;
        padding: 0 0.5rem;
    }

    .zen-brand {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0 0.5rem;
        border-radius: var(--zen-r-sm);
    }

    .zen-cmd-trigger {
        min-height: 2.75rem;
        height: auto;
        max-width: none;
        padding: 0 0.75rem;
        font-size: 0.8125rem;
    }

    .zen-topbar-tools {
        gap: 0.125rem;
        min-width: 0;
    }

    .zen-topbar-tools>.dropdown {
        flex-shrink: 0;
    }

    .zen-topbar-tools>a.zen-topbar-btn.hidden.md\:inline-flex,
    .zen-topbar-tools>.zen-topbar-divider.hidden.md\:block {
        display: none !important;
    }

    .zen-topbar-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
        padding: 0 0.5rem;
    }

    .zen-sidebar-logo,
    .zen-sidebar-menu .zen-sidebar-logo,
    .zen-sidebar-menu li .zen-sidebar-logo {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (min-width: 768px) and (max-width: 1279.98px) {

    .md\:drawer-open>.drawer-toggle~.drawer-side {
        overflow: visible;
    }

    .zen-topbar {
        min-width: 0;
        padding: 0 0.625rem;
    }

    .zen-brand {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0 0.5rem;
        border-radius: var(--zen-r-sm);
    }

    .zen-cmd-trigger {
        min-height: 2.75rem;
        height: auto;
        max-width: 20rem;
        padding: 0 0.75rem;
        font-size: 0.8125rem;
    }

    .zen-topbar-tools {
        gap: 0.1875rem;
        min-width: 0;
    }

    .zen-topbar-tools>.dropdown {
        flex-shrink: 0;
    }

    .zen-topbar-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
        padding: 0 0.625rem;
    }

    .zen-sidebar-logo,
    .zen-sidebar-menu .zen-sidebar-logo,
    .zen-sidebar-menu li .zen-sidebar-logo {
        width: 2.75rem;
        height: 2.75rem;
    }
}

.zen-topbar-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--zen-border);
    flex-shrink: 0;
}

/* ============================================================
   SIDEBAR - ICON RAIL
   ============================================================ */
.zen-sidebar-menu {
    width: var(--zen-sidebar-full);
    min-height: 100svh;
    background: rgba(250, 250, 248, 0.88);
    backdrop-filter: blur(16px) saturate(110%);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    border-right: 1px solid var(--zen-border);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* Reset DaisyUI menu styles */
    list-style: none;
    margin: 0;
}

@media (min-width: 768px) {
    .zen-sidebar-menu {
        width: var(--zen-sidebar-w);
        padding: 0.875rem 0.375rem;
        align-items: center;
    }

    /* 平板以上 drawer-side 預設 overflow: hidden，會裁切子選單飛出面板，需覆蓋為 visible */
    .md\:drawer-open>.drawer-toggle~.drawer-side {
        overflow: visible;
    }
}

/* Sidebar logo area */
.zen-sidebar-logo,
.zen-sidebar-menu .zen-sidebar-logo,
.zen-sidebar-menu li .zen-sidebar-logo {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
    padding: 0 !important;
}

/* Nav section divider */
.zen-sidebar-section {
    width: 100%;
    height: 1px;
    background: var(--zen-border);
    margin: 0.5rem 0;
}

@media (min-width: 768px) {
    .zen-sidebar-section {
        width: 1.5rem;
    }
}

/* Nav items */
.zen-nav-item {
    list-style: none;
    width: 100%;
}

@media (min-width: 768px) {
    .zen-nav-item {
        display: flex;
        justify-content: center;
    }
}

.zen-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    /* BUG-033：所有裝置最低觸控目標 44px */
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--zen-r-sm);
    color: var(--zen-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background var(--zen-fast) var(--zen-ease),
        color var(--zen-fast) var(--zen-ease);
    position: relative;
}

.zen-nav-link:hover {
    background: var(--zen-surface-2);
    color: var(--zen-text-primary);
}

.zen-nav-link.active {
    background: var(--zen-surface-2);
    color: var(--zen-accent);
    font-weight: 600;
}

.zen-nav-link.active i,
.zen-nav-link.active .zen-nav-label {
    color: var(--zen-accent);
}

/* 手機版展開側欄：active 項目加左側強調線，清楚標示目前頁面 */
.zen-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2.5px;
    background: var(--zen-accent);
    border-radius: 0 2px 2px 0;
}

.zen-nav-icon {
    width: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.zen-nav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On desktop: icon-only mode */
@media (min-width: 768px) {
    .zen-nav-link {
        width: 2.375rem;
        height: 2.375rem;
        padding: 0;
        justify-content: center;
    }

    .zen-nav-label {
        display: none;
    }

    .zen-nav-link .fa-caret-down,
    .zen-nav-sub-arrow {
        display: none;
    }

    /* 桌機 icon-only：隱藏左側強調線（正方形圖示區容不下，且無必要） */
    .zen-nav-link.active::before {
        display: none;
    }
}

/* Tooltip on hover for desktop */
@media (min-width: 768px) {
    .zen-nav-item {
        position: relative;
        /* 確保填滿側欄寬度，absolute 定位基準點才能正確對齊 */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 有子選單時隱藏 tooltip（避免與子選單面板衝突） */
    .zen-nav-item:has(.zen-nav-sub)::after {
        display: none !important;
    }

    .zen-nav-item::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(var(--zen-sidebar-w) - 0.375rem);
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        background: var(--zen-text-primary);
        color: white;
        font-size: 0.75rem;
        font-weight: 500;
        padding: 0.3125rem 0.625rem;
        border-radius: var(--zen-r-sm);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--zen-fast), transform var(--zen-fast);
        z-index: 100;
        box-shadow: var(--zen-shadow-sm);
    }

    .zen-nav-item:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Submenu (for costs / reports) */
.zen-nav-sub {
    list-style: none;
    /* 手機：父選單項目下方縮排顯示 */
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

@media (min-width: 768px) {

    /* 平板以上：子選單以浮動面板方式貼齊側欄右側顯示
       由 JS（zen-ui.js initSubmenus）以 mouseenter/mouseleave + clearTimeout
       控制 .sub-open class，避免純 CSS :hover 在元素邊界產生的閃退問題 */
    .zen-nav-sub {
        position: absolute;
        /* 側欄 4rem（--zen-sidebar-w），面板從右側邊緣開始 */
        left: var(--zen-sidebar-w);
        top: 0;
        width: auto;
        padding: 0.375rem;
        background: var(--zen-surface);
        border: 1px solid var(--zen-border);
        border-radius: var(--zen-r-sm);
        box-shadow: var(--zen-shadow);
        min-width: 8.5rem;
        z-index: 200;
        /* 預設隱藏 */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.1s ease, visibility 0.1s ease;
    }

    /* JS 加上 .sub-open 時展開 */
    .zen-nav-sub.sub-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.zen-nav-sub-link {
    display: block;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--zen-r-sm);
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--zen-text-muted);
    text-decoration: none;
    transition: background var(--zen-fast), color var(--zen-fast);
}

.zen-nav-sub-link:hover {
    background: var(--zen-surface-2);
    color: var(--zen-text-primary);
}

.zen-nav-sub-link.active {
    color: var(--zen-text-primary);
    font-weight: 600;
}

/* ============================================================
   COMMAND BAR OVERLAY (Cmd+K)
   ============================================================ */
#zen-cmd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(9, 9, 11, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 12vh 1rem 1rem;
    align-items: flex-start;
    justify-content: center;
}

#zen-cmd-overlay.open {
    display: flex;
    animation: zen-fade-in var(--zen-fast) var(--zen-ease);
}

@keyframes zen-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#zen-cmd-modal {
    width: 100%;
    max-width: 38rem;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-xl);
    box-shadow: var(--zen-shadow-lg);
    overflow: hidden;
    animation: zen-slide-down var(--zen-normal) var(--zen-spring);
}

@keyframes zen-slide-down {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#zen-cmd-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 0.9375rem 1.125rem;
    font-size: 1rem;
    font-weight: 500;
    background: transparent;
    color: var(--zen-text-primary);
    font-family: 'Noto Sans TC', 'Inter', sans-serif;
    border-bottom: 1px solid var(--zen-border);
}

#zen-cmd-input::placeholder {
    color: var(--zen-text-muted);
    font-weight: 400;
}

.zen-cmd-results {
    padding: 0.375rem;
    max-height: 22rem;
    overflow-y: auto;
}

.zen-cmd-group-label {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--zen-text-muted);
}

.zen-cmd-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--zen-r-sm);
    cursor: pointer;
    font-size: 0.84375rem;
    color: var(--zen-text-primary);
    transition: background var(--zen-fast);
    text-decoration: none;
}

.zen-cmd-item:hover,
.zen-cmd-item.selected {
    background: var(--zen-surface-2);
}

.zen-cmd-item-icon {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zen-bg);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-sm);
    font-size: 0.75rem;
    color: var(--zen-text-secondary);
    flex-shrink: 0;
}

.zen-cmd-item-label {
    flex: 1;
    font-weight: 500;
}

.zen-cmd-item-hint {
    font-size: 0.75rem;
    color: var(--zen-text-muted);
    flex-shrink: 0;
}

.zen-cmd-footer {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--zen-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.6875rem;
    color: var(--zen-text-muted);
}

.zen-cmd-footer-key {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.zen-cmd-footer-key kbd {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.3125rem;
    background: var(--zen-bg);
    border: 1px solid var(--zen-border);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-family: 'Montserrat', 'Inter', sans-serif;
    color: var(--zen-text-muted);
}

/* ============================================================
   CONTEXT PANEL (right slide-in)
   ============================================================ */
#zen-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
}

#zen-panel-overlay.open {
    display: block;
}

.zen-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.zen-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: var(--zen-panel-w);
    background: var(--zen-surface);
    border-left: 1px solid var(--zen-border);
    box-shadow: var(--zen-shadow-panel);
    transform: translateX(100%);
    transition: transform var(--zen-slow) var(--zen-spring);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#zen-panel-overlay.open .zen-panel {
    transform: translateX(0);
}

.zen-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--zen-border);
    position: sticky;
    top: 0;
    background: var(--zen-surface);
    z-index: 1;
    flex-shrink: 0;
}

.zen-panel-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--zen-text-primary);
}

.zen-panel-close {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--zen-r-sm);
    border: none;
    background: transparent;
    color: var(--zen-text-muted);
    cursor: pointer;
    transition: background var(--zen-fast), color var(--zen-fast);
    font-size: 0.875rem;
}

.zen-panel-close:hover {
    background: var(--zen-surface-2);
    color: var(--zen-text-primary);
}

.zen-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.zen-panel-footer {
    border-top: 1px solid var(--zen-border);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.zen-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.zen-body {
    display: flex;
    flex: 1;
}

.zen-main {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

@media (max-width: 767px) {
    .zen-main {
        padding: 1rem 0.875rem;
        padding-bottom: 5.5rem;
        /* space for mobile bottom nav */
    }
}

/* ============================================================
   PAGE HEADER (shared across pages)
   ============================================================ */
.zen-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.zen-page-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--zen-text-primary);
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.zen-page-subtitle {
    font-size: 0.8125rem;
    color: var(--zen-text-muted);
    margin-top: 0.25rem;
    font-weight: 400;
    line-height: 1.7;
}

/* ============================================================
   ZEN CARD
   ============================================================ */
.zen-card {
    background: var(--zen-surface-elevated);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-lg);
    box-shadow: var(--zen-shadow-xs);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow var(--zen-normal) var(--zen-ease),
        border-color var(--zen-normal) var(--zen-ease);
}

.zen-card:hover {
    box-shadow: var(--zen-shadow-sm);
    border-color: var(--zen-border-hover);
}

/* ============================================================
   STAT WIDGETS (Dashboard KPI)
   ============================================================ */
.zen-stat {
    padding: 1.5rem;
}

.zen-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zen-text-muted);
    margin-bottom: 0.625rem;
}

.zen-stat-value {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--zen-text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.zen-stat-value.sm {
    font-size: 1.375rem;
}

.zen-stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--zen-text-muted);
}

.zen-stat-delta.up {
    color: var(--zen-success);
}

.zen-stat-delta.down {
    color: var(--zen-warning);
}

.zen-stat-divider {
    width: 1px;
    background: var(--zen-border);
    align-self: stretch;
    margin: 0.875rem 0;
}

/* ============================================================
   BADGES
   ============================================================ */
.zen-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
}

.zen-badge-neutral {
    background: var(--zen-surface-2);
    border: 1px solid var(--zen-border);
    color: var(--zen-text-secondary);
}

.zen-badge-gold {
    background: var(--zen-gold-bg);
    border: 1px solid var(--zen-gold-border);
    color: var(--zen-gold);
}

.zen-badge-success {
    background: var(--zen-success-bg);
    border: 1px solid rgba(122, 155, 126, 0.26);
    color: var(--zen-success);
}

.zen-badge-warning {
    background: var(--zen-warning-bg);
    border: 1px solid rgba(185, 106, 94, 0.26);
    color: var(--zen-warning);
}

.zen-badge-info {
    background: var(--zen-info-bg);
    border: 1px solid rgba(79, 182, 176, 0.26);
    color: var(--zen-info);
}

.zen-badge-primary {
    background: var(--zen-accent-soft);
    border: 1px solid rgba(110, 137, 181, 0.26);
    color: var(--zen-accent-hover);
}

.zen-badge-error {
    background: rgba(185, 106, 94, 0.13);
    border: 1px solid rgba(185, 106, 94, 0.28);
    color: var(--zen-warning);
}

/* .zen-badge 的 display:inline-flex 會蓋掉 Tailwind .hidden 的 display:none，
   需要明確用雙 class selector (0,2,0) 提升優先級確保 hidden 生效 */
.zen-badge.hidden {
    display: none !important;
}

/* ============================================================
   DAISYUI BADGE-XS 修正
   原始定義 height=font-size=line-height=0.75rem，三者相等導致文字無垂直空間，
   文字溢出框外且視覺上極小。改為 height:auto + 垂直 padding 自適應文字高度。
   ============================================================ */
.badge-xs {
    height: auto !important;
    min-height: 1rem;
    font-size: 0.6875rem !important;
    line-height: 1 !important;
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ============================================================
   PROFIT WARNING PULSE
   ============================================================ */
@keyframes zen-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.5);
    }
}

.zen-warn-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zen-warning);
    animation: zen-pulse 2s ease-in-out infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================================
   FINANCIAL NUMBERS
   ============================================================ */
.zen-num {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.zen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    height: 2rem;
    padding: 0 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--zen-fast), box-shadow var(--zen-fast), border-color var(--zen-fast);
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
}

.zen-btn-primary {
    background: var(--zen-accent);
    color: #FFFFFF;
    border-color: var(--zen-accent);
    box-shadow: 0 8px 22px rgba(110, 137, 181, 0.18);
}

.zen-btn-primary:hover {
    background: var(--zen-accent-hover);
    border-color: var(--zen-accent-hover);
}

.zen-btn-secondary {
    background: var(--zen-surface-glass);
    color: var(--zen-text-primary);
    border-color: var(--zen-border);
    box-shadow: var(--zen-shadow-xs);
}

.zen-btn-secondary:hover {
    border-color: var(--zen-border-hover);
    box-shadow: var(--zen-shadow-sm);
}

.zen-btn-ghost {
    background: transparent;
    color: var(--zen-text-secondary);
    border-color: transparent;
}

.zen-btn-ghost:hover {
    background: var(--zen-surface-2);
    color: var(--zen-text-primary);
}

.zen-btn-danger {
    background: var(--zen-warning-bg);
    color: var(--zen-warning);
    border-color: rgba(185, 106, 94, 0.26);
}

.zen-btn-danger:hover {
    background: var(--zen-warning);
    color: white;
    border-color: var(--zen-warning);
}

.zen-btn-sm {
    /* BUG-033：所有裝置最低觸控目標 44px（Apple HIG / WCAG 2.5.5） */
    min-height: 2.75rem;
    padding: 0 0.6875rem;
    font-size: 0.75rem;
}

.zen-btn.btn-sm {
    min-height: 2.75rem;
    padding: 0 0.6875rem;
    font-size: 0.75rem;
}

.zen-btn-lg {
    height: 2.5rem;
    padding: 0 1.125rem;
    font-size: 0.9375rem;
    border-radius: 9999px;
}

.zen-btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.zen-btn-icon.zen-btn-sm {
    width: 1.75rem;
    height: 1.75rem;
}

/* BUG-033：觸控裝置圖示按鈕最低觸控目標 44×44px */
@media (pointer: coarse) {
    .zen-btn-icon.zen-btn-sm {
        min-width: 2.75rem;
        /* 44px */
        min-height: 2.75rem;
        /* 44px */
    }
}

/* ============================================================
   INPUT FIELDS
   ============================================================ */
.zen-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    background: var(--zen-surface-elevated);
    border: 1px solid var(--zen-border);
    border-radius: 0.75rem;
    font-size: 0.84375rem;
    font-family: 'Noto Sans TC', 'Inter', sans-serif;
    color: var(--zen-text-primary);
    transition: border-color var(--zen-fast), box-shadow var(--zen-fast);
    outline: none;
}

.zen-input:focus {
    border-color: var(--zen-accent);
    box-shadow: 0 0 0 3px var(--zen-focus);
}

.zen-input::placeholder {
    color: var(--zen-text-muted);
}

.zen-input-group {
    display: flex;
    align-items: center;
    background: var(--zen-surface-elevated);
    border: 1px solid var(--zen-border);
    border-radius: 0.75rem;
    transition: border-color var(--zen-fast), box-shadow var(--zen-fast);
    overflow: hidden;
}

.zen-input-group:focus-within {
    border-color: var(--zen-accent);
    box-shadow: 0 0 0 3px var(--zen-focus);
}

.zen-input-group .zen-input {
    border: none;
    box-shadow: none;
    flex: 1;
}

.zen-input-group .zen-input:focus {
    border: none;
    box-shadow: none;
}

.zen-input-icon {
    padding: 0 0.625rem;
    color: var(--zen-text-muted);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* ============================================================
   DAISYUI RUNTIME HARMONIZATION
   zen.css loads after Tailwind/DaisyUI, so these overrides keep
   generated utility classes aligned with the Japanese minimal spec.
   ============================================================ */
.card,
.modal-box,
.dropdown-content {
    background: var(--zen-surface-elevated) !important;
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-lg) !important;
    box-shadow: var(--zen-shadow-sm);
    color: var(--zen-text-primary);
}

.btn {
    border-radius: 9999px !important;
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: background var(--zen-normal) var(--zen-ease),
        border-color var(--zen-normal) var(--zen-ease),
        color var(--zen-normal) var(--zen-ease),
        box-shadow var(--zen-normal) var(--zen-ease) !important;
}

.btn-primary,
.bg-primary {
    background-color: var(--zen-accent) !important;
    border-color: var(--zen-accent) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--zen-accent-hover) !important;
    border-color: var(--zen-accent-hover) !important;
}

.btn-neutral,
.btn-zen-indigo {
    background-color: var(--zen-accent-hover) !important;
    border-color: var(--zen-accent-hover) !important;
    color: #FFFFFF !important;
}

.btn-outline {
    background-color: transparent !important;
    border-color: var(--zen-border) !important;
    color: var(--zen-text-secondary) !important;
}

.btn-outline:hover {
    background-color: var(--zen-surface-2) !important;
    border-color: var(--zen-border-hover) !important;
    color: var(--zen-text-primary) !important;
}

.btn-ghost {
    color: var(--zen-text-secondary) !important;
}

.btn-ghost:hover {
    background-color: var(--zen-surface-2) !important;
    color: var(--zen-text-primary) !important;
}

.input,
.select,
.textarea,
.input-bordered,
.select-bordered,
.textarea-bordered {
    background-color: var(--zen-surface-elevated) !important;
    border-color: var(--zen-border) !important;
    border-radius: 0.75rem !important;
    color: var(--zen-text-primary) !important;
}

.input:focus,
.select:focus,
.textarea:focus,
.input-bordered:focus,
.select-bordered:focus,
.textarea-bordered:focus {
    border-color: var(--zen-accent) !important;
    box-shadow: 0 0 0 3px var(--zen-focus) !important;
    outline: none !important;
}

.label-text,
.text-gray-500,
.text-base-content\/50,
.text-base-content\/60 {
    color: var(--zen-text-muted) !important;
}

.text-primary,
.link-primary {
    color: var(--zen-accent-hover) !important;
}

.text-success {
    color: var(--zen-success) !important;
}

.text-error {
    color: var(--zen-warning) !important;
}

.text-primary-content {
    color: #FFFFFF !important;
}

.bg-base-100 {
    background-color: var(--zen-surface) !important;
}

.bg-base-200 {
    background-color: var(--zen-surface-2) !important;
}

.border-base-300 {
    border-color: var(--zen-border) !important;
}

.badge {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
}

.badge-success {
    background-color: var(--zen-success-bg) !important;
    border-color: rgba(122, 155, 126, 0.26) !important;
    color: var(--zen-success) !important;
}

.badge-warning {
    background-color: var(--zen-warning-bg) !important;
    border-color: rgba(217, 142, 107, 0.28) !important;
    color: var(--zen-warning) !important;
}

.badge-error {
    background-color: rgba(185, 106, 94, 0.13) !important;
    border-color: rgba(185, 106, 94, 0.28) !important;
    color: var(--zen-warning) !important;
}

.badge-info,
.alert-info {
    background-color: var(--zen-info-bg) !important;
    border-color: rgba(79, 182, 176, 0.26) !important;
    color: var(--zen-info) !important;
}

.alert-success {
    background-color: var(--zen-success-bg) !important;
    border-color: rgba(122, 155, 126, 0.26) !important;
    color: var(--zen-success) !important;
}

.alert-warning,
.alert-error {
    background-color: var(--zen-warning-bg) !important;
    border-color: rgba(185, 106, 94, 0.26) !important;
    color: var(--zen-warning) !important;
}

@media (max-width: 1279.98px) {

    .zen-btn,
    .zen-btn-sm,
    .zen-btn.btn-sm,
    .btn.btn-sm,
    .btn.btn-xs {
        min-height: 2.75rem;
        height: 2.75rem;
    }

    .zen-btn-icon,
    .zen-btn-icon.zen-btn-sm,
    .zen-btn-icon.btn-sm,
    .btn.btn-circle,
    .btn.btn-square {
        min-width: 2.75rem;
        width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
    }

    .zen-input,
    .zen-input-group,
    .input,
    .select,
    .textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px;
    }

    .zen-input,
    .zen-input-group,
    .input,
    .select,
    input[type="date"],
    input[type="datetime-local"],
    select {
        height: 2.75rem;
        min-height: 2.75rem;
    }

    .textarea,
    textarea {
        min-height: 6rem;
    }

    .input.input-sm,
    .select.select-sm,
    .btn.btn-sm,
    .btn.btn-xs {
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
        font-size: 0.8125rem;
    }

    .zen-btn-sm {
        min-width: 2.75rem;
    }

    .toggle.toggle-sm,
    .toggle.toggle-xs {
        width: 3rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
    }

    .checkbox.checkbox-sm,
    .checkbox.checkbox-xs {
        width: 1.5rem;
        min-width: 1.5rem;
        height: 1.5rem;
        min-height: 1.5rem;
    }

    .ts-control {
        min-height: 2.75rem !important;
        padding: 0.375rem 0.625rem !important;
        font-size: 16px !important;
    }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    .tablet-checkbox-row {
        min-height: 2.75rem;
        padding: 0.5rem 0;
    }

    .tablet-checkbox-row .toggle,
    .tablet-checkbox-row .checkbox {
        flex-shrink: 0;
    }

    .tablet-checkbox-row span,
    .tablet-checkbox-row label {
        font-size: 1rem;
        line-height: 1.4;
    }
}

/* ============================================================
   TABLE
   ============================================================ */
.zen-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84375rem;
}

.zen-table thead tr {
    border-bottom: 1px solid var(--zen-border);
}

.zen-table th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--zen-text-muted);
    white-space: nowrap;
}

.zen-table td {
    padding: 0.75rem 1rem;
    color: var(--zen-text-secondary);
    border-bottom: 1px solid rgba(228, 228, 231, 0.5);
    vertical-align: middle;
}

.zen-table tbody tr {
    transition: background var(--zen-fast);
}

.zen-table tbody tr:hover td {
    background: var(--zen-bg);
    color: var(--zen-text-primary);
}

.zen-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   ============================================================ */
.zen-mobile-nav {
    display: none;
}

@media (max-width: 767.98px) {
    .zen-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3.75rem;
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--zen-border);
        z-index: 40;
        justify-content: space-around;
        align-items: center;
    }
}

.zen-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--zen-r-sm);
    text-decoration: none;
    color: var(--zen-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: color var(--zen-fast);
    min-width: 3.5rem;
    text-align: center;
}

.zen-mobile-nav-item i {
    font-size: 1.125rem;
    line-height: 1;
}

.zen-mobile-nav-item.active {
    color: var(--zen-text-primary);
}

.zen-mobile-nav-item.active i {
    color: var(--zen-text-primary);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.zen-divider {
    height: 1px;
    background: var(--zen-border);
    border: none;
    margin: 0;
}

.zen-section-heading {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zen-text-muted);
    margin-bottom: 0.75rem;
}

.zen-subtle-link {
    color: var(--zen-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color var(--zen-fast);
}

.zen-subtle-link:hover {
    color: var(--zen-text-primary);
}

/* Impersonation banner offset */
.zen-impersonate-offset {
    margin-top: 2.5rem;
}

/* ============================================================
   CRM PANEL COMPONENTS
   ============================================================ */

.zen-client-avatar {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: var(--zen-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.zen-appt-row:hover {
    background: var(--zen-bg);
}

.zen-client-row:hover td {
    background: var(--zen-bg);
    color: var(--zen-text-primary);
}

.zen-panel-footer:empty {
    display: none;
}

.htmx-request .zen-panel-body {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity .15s;
}

/* ============================================================
   PULSING DOT 利潤預警指標
   HEALTHY ≥ 30%，WARNING 10–29%，CRITICAL < 10%
   ============================================================ */
@keyframes zen-pulse-green {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(122, 155, 126, 0.34);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(122, 155, 126, 0);
    }
}

@keyframes zen-pulse-amber {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(217, 142, 107, 0.34);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(217, 142, 107, 0);
    }
}

@keyframes zen-pulse-red {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(185, 106, 94, 0.38);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(185, 106, 94, 0);
    }
}

.zen-pulse-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.zen-pulse-dot.healthy {
    background: var(--zen-success);
    animation: zen-pulse-green 2.2s ease infinite;
}

.zen-pulse-dot.warning {
    background: var(--zen-warm);
    animation: zen-pulse-amber 1.5s ease infinite;
}

.zen-pulse-dot.critical {
    background: var(--zen-warning);
    animation: zen-pulse-red 0.9s ease infinite;
}

/* ============================================================
   FULLCALENDAR ZEN INTEGRATION
   Philosophy: Events speak, chrome is quiet
   ============================================================ */

/* Toolbar title: quiet Japanese minimal typography */
.fc .fc-toolbar-title {
    font-family: 'Noto Sans TC', 'Montserrat', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: var(--zen-text-primary) !important;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
}

.fc .fc-toolbar-title::after {
    content: ' \25BE';
    font-size: 0.7em;
    opacity: 0.4;
    vertical-align: middle;
}

/* FC 按鈕 → zen token */
.fc .fc-button-primary {
    background: var(--zen-accent) !important;
    border-color: var(--zen-accent) !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    padding: .3125rem .75rem !important;
    box-shadow: none !important;
    transition: background var(--zen-fast) var(--zen-ease) !important;
}

@media (max-width: 1279.98px) {

    .fc .fc-button,
    .fc .fc-button-primary {
        min-height: 2.75rem !important;
        height: 2.75rem !important;
        padding: 0.5rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
}

.fc .fc-button-primary:hover {
    background: var(--zen-accent-hover) !important;
    border-color: var(--zen-accent-hover) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--zen-accent-hover) !important;
    border-color: var(--zen-accent-hover) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15) !important;
}

/* 事件統一圓角 */
.fc-event {
    cursor: pointer;
    border-radius: var(--zen-r-sm) !important;
    border: none !important;
    transition: opacity var(--zen-fast) var(--zen-ease), box-shadow var(--zen-fast) var(--zen-ease) !important;
}

.fc-event:hover {
    filter: brightness(1.08);
}

/* === 狀態 Glow 樣式 === */

/* scheduled（即將到來）：左側強調線 */
.fc-event-zen-scheduled {
    border-left: 3px solid rgba(255, 255, 255, 0.55) !important;
}

/* in_progress（進行中）：綠色光暈 */
.fc-event-zen-in-progress {
    box-shadow: 0 0 0 2px var(--zen-success),
        0 0 14px rgba(122, 155, 126, 0.28) !important;
    border-left: 3px solid var(--zen-success) !important;
}

/* completed（已完成/已收款）：綠色樣式 */
.fc-event-zen-completed {
    background-color: rgba(122, 155, 126, 0.16) !important;
    border-left: 3px solid var(--zen-success) !important;
    color: var(--zen-text-primary) !important;
}

/* cancelled（已取消）：極淡 + 刪除線 */
.fc-event-zen-cancelled {
    opacity: 0.22 !important;
    text-decoration: line-through !important;
}

/* overdue（逾期未收款）：保留紅色刪除線 + 紅光暈 */
.fc-event-overdue .fc-event-title,
.fc-event-overdue .fc-list-event-title a,
.fc-event-overdue .fc-event-title-container {
    text-decoration: line-through !important;
    text-decoration-color: rgba(220, 40, 40, 0.9) !important;
    text-decoration-thickness: 2px !important;
}

.fc-event-overdue {
    background-color: rgba(185, 106, 94, 0.16) !important;
    border-left: 3px solid var(--zen-warning) !important;
    box-shadow: 0 0 8px rgba(185, 106, 94, 0.18) !important;
}

/* 行事曆格子背景：使用 zen surface */
.fc .fc-daygrid-day,
.fc .fc-timegrid-col {
    background: var(--zen-surface);
}

.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
    background: var(--zen-surface-2) !important;
}

/* border 使用 zen 邊框色 */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
    border-color: var(--zen-border) !important;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
    color: var(--zen-text-secondary);
    font-size: .8125rem;
    font-weight: 500;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--zen-accent);
    color: #fff;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
}

/* 非營業時間格 */
.fc .fc-non-business {
    background: repeating-linear-gradient(-45deg,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.015) 4px,
            rgba(0, 0, 0, 0.015) 8px) !important;
}

/* ============================================================
   TIME GRID 事件區塊 - 大字版本
   ============================================================ */

/* 時間格事件外框：給更多 padding，讓文字呼吸 */
.fc-timegrid-event .fc-event-main {
    padding: .25rem .4375rem !important;
    overflow: hidden;
}

/* 客製化事件內容 Block（timeGridWeek / timeGridDay 專用）*/
.fc-appt-block {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: 1.25;
    overflow: hidden;
    height: 100%;
}

.fc-appt-time {
    font-size: .6875rem;
    font-weight: 600;
    opacity: .75;
    letter-spacing: .02em;
    white-space: nowrap;
}

.fc-appt-name {
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.fc-appt-service {
    font-size: .6875rem;
    opacity: .82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-appt-price {
    font-size: .6875rem;
    font-weight: 600;
    opacity: .88;
    background: rgba(255, 255, 255, .18);
    border-radius: 2px;
    padding: .0625rem .25rem;
    display: inline-block;
    margin-top: .125rem;
    max-width: fit-content;
}

/* 月視圖/清單 - 簡潔版 */
.fc-appt-compact {
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* 時間格時間標籤（左側 09:00, 10:00...）*/
.fc .fc-timegrid-slot-label-cushion {
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--zen-text-muted) !important;
    padding: 0 .625rem !important;
}

/* 時間格欄位標題（週一、週二...）*/
.fc .fc-timegrid .fc-col-header-cell-cushion {
    font-size: .8125rem !important;
    font-weight: 700 !important;
    padding: .5rem .25rem !important;
}

/* 現在時間指示線加粗 */
.fc .fc-timegrid-now-indicator-line {
    border-color: var(--zen-warning) !important;
    border-width: 2px !important;
    z-index: 5 !important;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-top-color: var(--zen-warning) !important;
    border-bottom-color: var(--zen-warning) !important;
}

/* 周視圖日期列今日列高亮 */
.fc .fc-timegrid .fc-day-today .fc-col-header-cell-cushion {
    background: color-mix(in srgb, var(--zen-accent) 10%, transparent);
    border-radius: var(--zen-r-sm);
    color: var(--zen-accent) !important;
}

/* listDay 清單視圖 */
.fc .fc-list-event {
    cursor: pointer;
}

.fc .fc-list-event:hover td {
    background: var(--zen-surface-2) !important;
}

.fc .fc-list-event-time {
    font-size: .8125rem !important;
    font-weight: 600 !important;
    color: var(--zen-text-secondary) !important;
    min-width: 5.5rem !important;
}

.fc .fc-list-event-title {
    font-size: .9375rem !important;
    font-weight: 600 !important;
}

.fc .fc-list-day-cushion {
    background: color-mix(in srgb, var(--zen-accent) 8%, var(--zen-surface)) !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    padding: .5rem 1rem !important;
}

/* 時間格最小欄高（讓 30 分鐘 slot 夠大放文字）*/
.fc .fc-timegrid-slot {
    height: 3rem !important;
}

/* ============================================================
   DaisyUI v4 dialog.modal 幽靈遮罩修正
   問題：DaisyUI v4 的 .modal { display: grid } 覆蓋了瀏覽器原生
         dialog:not([open]) { display: none }，導致關閉的 dialog
         仍以 position:fixed; inset:0; z-index:999 渲染在頁面上。
         而內部 .modal-backdrop（form element）pointer-events 不繼承
         父元素的 none，持續攔截全頁面所有的滑鼠點擊事件。
   修正：強制關閉狀態的 dialog.modal 完全隱藏且不攔截事件。
   ============================================================ */
dialog.modal:not([open]) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

dialog.modal:not([open])::backdrop {
    display: none !important;
}

/* 確保 dialog 開啟時正確顯示（對應 DaisyUI 開啟狀態樣式） */
dialog.modal[open] {
    display: grid !important;
    opacity: 1;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* ============================================================
   共用卡片入場動畫 & 新增佔位卡樣式
   供員工管理、客戶管理等卡片式頁面共用
   ============================================================ */
@keyframes staffCardIn {
    from {
        opacity: 0;
        transform: translateY(.625rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 停用狀態卡片 */
.staff-card-inactive {
    opacity: .62;
}

.staff-card-inactive .staff-name-display {
    color: var(--zen-text-muted) !important;
}

/* 新增佔位卡 hover 效果 */
.staff-card-add-wrapper:hover .staff-add-card {
    border-color: var(--zen-accent) !important;
    background: color-mix(in srgb, var(--zen-accent) 4%, transparent) !important;
}

.staff-card-add-wrapper:hover .fa-plus-circle,
.staff-card-add-wrapper:hover .fa-user-plus,
.staff-card-add-wrapper:hover .fa-user-tie {
    opacity: .5 !important;
}

/* === Dialog Banner 關閉按鈕 hover === */
.dialog-banner-close {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9375rem;
    transition: background .15s;
    flex-shrink: 0;
}

.dialog-banner-close:hover {
    background: rgba(255, 255, 255, .28);
}

.modal-backdrop>button {
    width: 100%;
    height: 100%;
    min-width: 2.75rem;
    min-height: 2.75rem;
    cursor: default;
}

.bug-report-fab {
    right: max(1.25rem, calc(env(safe-area-inset-right, 0px) + 1rem));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.bug-report-modal-box {
    width: min(100% - 2rem, 32rem);
    max-width: 32rem;
    margin: 0 auto calc(1rem + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bug-report-modal-form {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.bug-report-modal-footer {
    padding: .875rem 1.5rem calc(.875rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--zen-border);
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    background: var(--zen-surface-alt);
    flex-shrink: 0;
}

.bug-report-screenshot-input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    font-size: 1rem;
    line-height: 1.4;
}

.bug-report-screenshot-clear,
.bug-report-preview-clear {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}

@media (max-width: 639px) {
    .bug-report-modal-box {
        width: calc(100% - 2rem);
        border-radius: 1rem;
    }

    .bug-report-modal-form {
        padding: 1rem 1rem 1.25rem;
    }

    .bug-report-modal-footer {
        padding: .75rem 1rem calc(.875rem + env(safe-area-inset-bottom, 0px));
        gap: .75rem;
    }
}

/* ============================================================
   TOM SELECT — ZEN 主題覆寫
   強制覆寫 Bootstrap5 預設樣式，匹配 zen-input 風格
   ============================================================ */
.ts-wrapper {
    width: 100% !important;
}

/* 控件主體：就像 zen-input */
.ts-control {
    background: var(--zen-surface-elevated) !important;
    border: 1px solid var(--zen-border) !important;
    border-radius: var(--zen-r-sm) !important;
    min-height: 2rem !important;
    padding: .25rem .625rem !important;
    font-size: .8125rem !important;
    color: var(--zen-text-primary) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .25rem !important;
    cursor: text !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--zen-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--zen-accent) 18%, transparent) !important;
    outline: none !important;
}

.ts-wrapper.invalid .ts-control {
    border-color: var(--zen-warning) !important;
}

/* 選中項目標籤（Tags）*/
.ts-control .item {
    background: color-mix(in srgb, var(--zen-accent) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--zen-accent) 28%, transparent) !important;
    border-radius: var(--zen-r-sm) !important;
    color: var(--zen-accent) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    padding: .125rem .5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .25rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Tag 刪除按鈕 */
.ts-control .item .remove {
    color: var(--zen-accent) !important;
    opacity: .6 !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    margin-left: .125rem !important;
    cursor: pointer !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ts-control .item .remove:hover {
    opacity: 1 !important;
    color: var(--zen-warning) !important;
}

/* 文字輸入框 */
.ts-control input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: .8125rem !important;
    color: var(--zen-text-primary) !important;
    min-width: 60px !important;
    padding: 0 !important;
    height: 1.5rem !important;
    line-height: 1.5rem !important;
    flex: 1 !important;
}

.ts-control input::placeholder {
    color: var(--zen-text-muted) !important;
    opacity: .7 !important;
}

/* 下拉選單 */
.ts-dropdown {
    background: var(--zen-surface-elevated) !important;
    border: 1px solid var(--zen-border) !important;
    border-radius: var(--zen-r-sm) !important;
    box-shadow: var(--zen-shadow-md) !important;
    padding: .25rem !important;
    margin-top: .25rem !important;
    font-size: .8125rem !important;
    color: var(--zen-text-primary) !important;
    z-index: 9999 !important;
}

.ts-dropdown .option {
    padding: .4375rem .625rem !important;
    border-radius: calc(var(--zen-r-sm) - 2px) !important;
    cursor: pointer !important;
    color: var(--zen-text-primary) !important;
    transition: background .1s !important;
    display: flex !important;
    align-items: center !important;
    gap: .375rem !important;
}

.ts-dropdown .option::before {
    content: '' !important;
    width: .75rem !important;
    height: .75rem !important;
    border: 1.5px solid var(--zen-border) !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    transition: all .1s !important;
    background: transparent !important;
}

.ts-dropdown .option.selected::before {
    background: var(--zen-accent) !important;
    border-color: var(--zen-accent) !important;
}

.ts-dropdown .option.active {
    background: color-mix(in srgb, var(--zen-accent) 8%, transparent) !important;
    color: var(--zen-accent) !important;
}

.ts-dropdown .option.selected {
    color: var(--zen-accent) !important;
    font-weight: 600 !important;
    background: color-mix(in srgb, var(--zen-accent) 5%, transparent) !important;
}

/* 空選項提示 */
.ts-dropdown .no-results {
    padding: .625rem !important;
    color: var(--zen-text-muted) !important;
    font-size: .8125rem !important;
    text-align: center !important;
}

/* ============================================================
   Zen Toggle (input[type=checkbox].toggle)
   DaisyUI 的球效果由 box-shadow 搭配 --tglbg（容器背景色）產生。
   此專案自訂 theme 使用 hex，不含 DaisyUI oklch 變數（--b1），
   導致 --tglbg 失效、球消失、整個 toggle 變成填滿色塊。
   解法：直接 override background-color（繞過 currentColor 機制）
         並明確設定 --tglbg:#FFFFFF 確保白球可見。
   - 未選中：灰色軌道 #D4D4D8 + 白球
   - 選中  ：綠色軌道 --zen-success + 白球
   - focus  ：outline --zen-accent
   ============================================================ */

.toggle {
    --tglbg: #FFFFFF;
    background-color: #D4D4D8 !important;
    border-color: #D4D4D8 !important;
    color: #D4D4D8;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.toggle:checked,
.toggle[aria-checked="true"] {
    --tglbg: #FFFFFF;
    background-color: var(--zen-success) !important;
    border-color: var(--zen-success) !important;
    color: var(--zen-success);
}

.toggle:focus-visible {
    outline: 2px solid var(--zen-accent);
    outline-offset: 2px;
}

.toggle:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================================
   Zen Error Pages
   Shared quiet error surface for 400/401/403/404/500.
   ============================================================ */

.zen-error-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(217, 142, 107, 0.14), transparent 28rem),
        radial-gradient(circle at 82% 12%, rgba(110, 137, 181, 0.14), transparent 30rem),
        linear-gradient(135deg, var(--zen-bg) 0%, var(--zen-surface-2) 100%);
    color: var(--zen-text-primary);
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
}

.zen-error-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--zen-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--zen-grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black, transparent 70%);
}

.zen-error-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
}

.zen-error-card {
    background: var(--zen-surface-elevated);
    border: 1px solid var(--zen-border);
    border-radius: 1.75rem;
    box-shadow: var(--zen-shadow-lg);
    backdrop-filter: blur(18px);
    padding: clamp(2rem, 7vw, 3.25rem);
    text-align: center;
}

.zen-error-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .75rem;
    border: 1px solid var(--zen-border);
    border-radius: 999px;
    color: var(--zen-text-muted);
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.zen-error-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.5rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    background: var(--zen-accent-soft);
    color: var(--zen-accent-hover);
    font-size: 1.65rem;
}

.zen-error-code {
    margin: 0;
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-size: clamp(4rem, 16vw, 7rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.08em;
    color: var(--zen-text-primary);
}

.zen-error-title {
    margin: 1.15rem 0 .55rem;
    font-size: clamp(1.45rem, 5vw, 2rem);
    font-weight: 500;
    letter-spacing: -.03em;
}

.zen-error-message {
    margin: 0 auto;
    max-width: 28rem;
    color: var(--zen-text-secondary);
    line-height: 1.75;
    font-size: .96rem;
}

.zen-error-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.zen-error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.75rem;
    padding: .7rem 1.05rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    border: 1px solid var(--zen-border);
    color: var(--zen-text-secondary);
    background: var(--zen-surface);
    transition: transform .16s var(--zen-ease), border-color .16s var(--zen-ease), background .16s var(--zen-ease);
    cursor: pointer;
}

.zen-error-btn:hover {
    transform: translateY(-1px);
    border-color: var(--zen-border-hover);
    background: var(--zen-surface-alt);
}

.zen-error-btn-primary {
    border-color: transparent;
    color: #fff;
    background: var(--zen-accent-hover);
}

.zen-error-btn-primary:hover {
    background: var(--zen-accent);
}

/* ============================================================
   SuperAdmin Application Logs
   Quiet operational console with Zen shell surfaces.
   ============================================================ */
.app-log-page {
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-log-hero {
    position: relative;
    overflow: hidden;
    min-height: 10rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-xl);
    background:
        radial-gradient(circle at 82% 20%, rgba(79, 182, 176, .14), transparent 17rem),
        linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(247, 245, 240, .74));
    box-shadow: var(--zen-shadow-sm);
}

.app-log-kicker,
.app-log-section-label {
    margin: 0 0 .35rem;
    color: var(--zen-accent);
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.app-log-title {
    margin: 0;
    color: var(--zen-text-primary);
    font-size: clamp(1.75rem, 4vw, 2.7rem);
    font-weight: 500;
    letter-spacing: -.04em;
}

.app-log-subtitle,
.app-log-note {
    margin: .45rem 0 0;
    color: var(--zen-text-muted);
    font-size: .9rem;
    line-height: 1.8;
}

.app-log-hero-mark {
    position: absolute;
    right: clamp(1.25rem, 4vw, 2.5rem);
    bottom: 1.25rem;
    width: 8.5rem;
    height: 8.5rem;
    opacity: .55;
    pointer-events: none;
}

.app-log-hero-mark span {
    position: absolute;
    border: 1px solid rgba(110, 137, 181, .26);
    border-radius: 999px;
}

.app-log-hero-mark span:nth-child(1) {
    inset: 0;
}

.app-log-hero-mark span:nth-child(2) {
    inset: 1.7rem;
}

.app-log-hero-mark span:nth-child(3) {
    right: 0;
    bottom: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .8rem;
}

.app-log-storage-card,
.app-log-console-card,
.app-log-files-card {
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-xl);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--zen-shadow-sm);
    backdrop-filter: blur(14px);
}

.app-log-storage-card {
    padding: 1.25rem;
}

.app-log-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-log-card-head-stack {
    flex-wrap: wrap;
}

.app-log-path {
    margin: .15rem 0 0;
    color: var(--zen-text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.app-log-storage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.app-log-metric {
    min-height: 6rem;
    padding: 1rem;
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-lg);
    background: var(--zen-surface-alt);
}

.app-log-metric span,
.app-log-controls label>span {
    display: block;
    color: var(--zen-text-muted);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .04em;
}

.app-log-metric strong {
    display: block;
    margin-top: .65rem;
    color: var(--zen-text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 500;
}

.app-log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.65rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--zen-border);
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    white-space: nowrap;
}

.app-log-badge-muted {
    color: var(--zen-text-muted);
    background: var(--zen-surface);
}

.app-log-badge-active {
    color: var(--zen-accent-hover);
    background: var(--zen-accent-soft);
    border-color: rgba(110, 137, 181, .24);
}

.app-log-badge-danger {
    color: var(--zen-warning);
    background: var(--zen-warning-bg);
    border-color: rgba(185, 106, 94, .24);
}

.app-log-warning {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .7rem .85rem;
    color: var(--zen-warning);
    border: 1px solid rgba(185, 106, 94, .24);
    border-radius: var(--zen-r-md);
    background: var(--zen-warning-bg);
    font-size: .86rem;
}

.app-log-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr);
    gap: 1rem;
    align-items: start;
}

.app-log-console-card,
.app-log-files-card {
    padding: 1.25rem;
}

.app-log-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.app-log-controls {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 9rem minmax(12rem, 1fr) auto;
    gap: .75rem;
    align-items: end;
    margin: 1rem 0;
}

.app-log-controls .zen-input {
    width: 100%;
    margin-top: .3rem;
}

.app-log-checkbox {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-bottom: .15rem;
    color: var(--zen-text-secondary);
    font-size: .82rem;
    white-space: nowrap;
}

.app-log-console {
    min-height: 34rem;
    max-height: 58vh;
    overflow: auto;
    padding: 1rem;
    border: 1px solid rgba(228, 225, 218, .28);
    border-radius: var(--zen-r-lg);
    background:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        #101419;
    background-size: 100% 1.7rem, auto;
    color: #DCE2EA;
    font-family: 'JetBrains Mono', 'Noto Sans TC', monospace;
    font-size: .78rem;
    line-height: 1.7;
}

.app-log-line {
    min-height: 1.35rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.app-log-line.is-error {
    color: #F2A7A0;
}

.app-log-line.is-warn {
    color: #E6C38B;
}

.app-log-line.is-info {
    color: #A8C0E6;
}

.app-log-line.is-debug,
.app-log-line.is-stack {
    color: #9AA3AD;
}

.app-log-file-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1rem;
    max-height: 42rem;
    overflow: auto;
}

.app-log-file-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-r-md);
    background: var(--zen-surface-alt);
    color: var(--zen-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--zen-fast), background var(--zen-fast), transform var(--zen-fast);
}

.app-log-file-item:hover {
    transform: translateY(-1px);
    border-color: var(--zen-border-hover);
    background: var(--zen-surface);
}

.app-log-file-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.app-log-file-main strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.app-log-file-main small,
.app-log-empty {
    color: var(--zen-text-muted);
    font-size: .74rem;
}

@media (max-width: 1023.98px) {
    .app-log-storage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-log-workspace,
    .app-log-controls {
        grid-template-columns: 1fr;
    }

    .app-log-control-row {
        justify-content: flex-start;
    }
}

@media (max-width: 639.98px) {
    .app-log-hero,
    .app-log-storage-card,
    .app-log-console-card,
    .app-log-files-card {
        border-radius: var(--zen-r-lg);
        padding: 1rem;
    }

    .app-log-storage-grid {
        grid-template-columns: 1fr;
    }

    .app-log-console {
        min-height: 26rem;
        max-height: 62vh;
        font-size: .72rem;
    }
}