/* ===== Shared Variables ===== */
:root {
    --blue: #C4704F;
    --blue-light: #F5EDE8;
    --sand: #C4956A;
    --sand-light: #F5EDE0;
    --white: #FFFFFF;
    --card-bg: #EDE8E3;
    --gray: #6B6B6B;
    --gray-light: #FAF9F7;
    --text: #1A1A1A;
    --fs-lg: 1.25rem;
    --fs-md: 1.15rem;
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 56px;
    --sidebar-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --content-max-w: 800px;
    --info-panel-w: 280px;
}

/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { overflow-x: hidden; }
body { font-family: 'Noto Sans TC', sans-serif; background: var(--white); font-size: var(--fs-md); color: var(--text); line-height: 1.6; max-width: 100vw; }

/* ===== Page Layout ===== */
.page-layout { display: flex; min-height: 100vh; }

/* ===== Trip Buttons (shared by switch + edit) ===== */
.trip-btn { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 10px; border: none; background: var(--blue-light); cursor: pointer; font-family: inherit; font-size: var(--fs-md); color: var(--text); text-decoration: none; }
.trip-btn:hover { opacity: 0.85; }
.trip-btn.active { box-shadow: 0 0 0 2px var(--blue); }
.trip-btn strong { display: block; font-size: var(--fs-lg); }
.trip-btn .trip-sub { font-size: 0.85em; color: var(--gray); margin-top: 2px; display: block; }

/* ===== Dark Mode (shared base) ===== */
body.dark { --blue: #D4845E; --blue-light: #302A25; --sand: #D4A373; --sand-light: #302A22; --white: #292624; --card-bg: #292624; --gray: #9B9590; --gray-light: #343130; --text: #E8E5E0; background: #1A1816; }
body.dark .trip-btn { background: #3D3A37; }
body.dark .trip-btn:hover { opacity: 0.85; }
body.dark .trip-btn.active { box-shadow: 0 0 0 2px #D4845E; }

/* ===== Container & Sticky Nav (shared by index + edit) ===== */
.container { flex: 1; min-width: 0; max-width: 100%; margin: 0 auto; padding: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s; }
.sticky-nav { position: sticky; top: 0; z-index: 200; background: var(--white); color: var(--text); padding: 8px 12px; display: flex; align-items: center; gap: 8px; }

/* ===== SVG Icon Wrapper ===== */
.svg-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
.svg-icon svg { width: 100%; height: 100%; }

/* ===== Focus Visible (remove default outline, use box-shadow) ===== */
button:focus-visible { outline: none; }
.sidebar-toggle:focus-visible,
.dh-menu:focus-visible,
.dn:focus-visible,
.menu-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue); }

/* ===== Custom Scrollbar (global) ===== */
:root { scrollbar-width: thin; scrollbar-color: #C4C0BB transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C4C0BB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B0ABA6; }
body.dark { scrollbar-color: #5A5651 transparent; }
body.dark ::-webkit-scrollbar-thumb { background: #5A5651; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #6A6560; }

/* ===== Desktop Page Layout Gap ===== */
@media (min-width: 1200px) {
    .page-layout { gap: 12px; }
}