:root {
    --primary: #0f172a;
    --primary-light: #2563eb;
    --bg-main: #f8fafc;
    --border-color: #cbd5e1;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --panel-bg: #ffffff;
}

* { box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }
body, html { margin: 0; padding: 0; height: 100%; background: var(--bg-main); color: var(--text-dark); overflow: hidden; }

/* 📈 【改善点】サイドバー展開に合わせて地図・マトリクスの専有面積比率を美しく動的制御 */
#terminal-container { display: flex; width: 100vw; height: 100vh; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
#main-workspace { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }

#terminal-container.sidebar-closed #sidebar { width: 0px; overflow: hidden; border-left: none; }
#terminal-container.sidebar-closed #map-frame { height: 48%; }

#terminal-container.sidebar-opened #sidebar { width: 45vw; min-width: 480px; }
#terminal-container.sidebar-opened #map-frame { height: 26%; } /* 📈 地図の枠を約半分程度へコンパクト化 */

/* ヘッダー */
#terminal-header { background: var(--primary); padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.15); z-index: 10; }
.brand-block h1 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #f8fafc; letter-spacing: 0.5px; }
.premium-tag { background: #2563eb; color: #ffffff; font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 2px; letter-spacing: 0.5px; }

#filter-matrix { display: flex; gap: 16px; }
.input-unit { display: flex; flex-direction: column; gap: 3px; }
.input-unit label { font-size: 0.6rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
.input-unit select { 
    border: 1px solid #475569; padding: 6px 32px 6px 12px; border-radius: 6px; 
    font-size: 0.8rem; color: #f8fafc; background: #1e293b; font-weight: 600; min-width: 180px;
    appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 8px auto;
}
.input-unit select:disabled { background-color: #0f172a; color: #475569; border-color: #334155; }

#map-frame { width: 100%; transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1); relative; border-bottom: 2px solid var(--primary); }
#map { width: 100%; height: 100%; }

/* データマトリクス */
#matrix-frame { flex: 1; background: var(--panel-bg); display: flex; flex-direction: column; overflow: hidden; }
.frame-title-block { padding: 10px 24px; background: #f1f5f9; border-bottom: 1px solid var(--border-color); }
.frame-title-block h2 { font-size: 0.9rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--primary); }
.badge-count { background: #cbd5e1; color: var(--primary); font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; font-weight: 700; font-family: monospace; }
.frame-title-block p { font-size: 0.75rem; color: var(--text-muted); margin: 2px 0 0 0; }

.table-scroll-wrapper { flex: 1; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.8rem; }
th { background: #ffffff; color: var(--text-muted); font-weight: 700; padding: 10px 16px; border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 10; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.5px; }
td { padding: 9px 16px; border-bottom: 1px solid #e2e8f0; color: var(--text-dark); }

.asset-row:hover { background: #f8fafc; cursor: pointer; }
.selected-row { background: #eff6ff !important; border-left: 4px solid var(--primary-light); }
.hotel-name-cell { font-weight: 600; color: #0f172a; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-premium { font-weight: 700; color: #2563eb !important; }
.rating-star { color: #b45309; font-weight: 700; background: #fef3c7; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; display: inline-block; }
.station-cell { color: var(--text-muted); font-size: 0.75rem; }
.badge-status { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.badge-status.vacant { background: #dcfce7; color: #166534; }
.badge-status.full { background: #fee2e2; color: #991b1b; }

/* サイドパネル */
#sidebar { height: 100%; background: var(--panel-bg); display: flex; flex-direction: column; border-left: 1px solid var(--border-color); background: #ffffff; transition: width 0.4s ease; }
#sidebar-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 40px; text-align: center; color: var(--text-muted); background: #f8fafc; }
.empty-vector p { font-size: 0.8rem; margin-top: 12px; line-height: 1.5; max-width: 300px; }
#sidebar-active { height: 100%; display: flex; flex-direction: column; }
.sidebar-scroller { flex: 1; overflow-y: auto; }

.sidebar-header { padding: 12px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: #ffffff; position: sticky; top: 0; z-index: 20; }
#panel-close-btn { background: none; border: none; color: var(--text-dark); font-weight: 700; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; padding: 4px 8px; border-radius: 4px; }
#panel-close-btn:hover { background: #f1f5f9; }
.panel-meta { font-size: 0.65rem; color: var(--text-muted); font-family: monospace; font-weight: 600; }

.hero-wrapper { position: relative; width: 100%; height: 140px; background: #000; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px; background: linear-gradient(transparent, rgba(15,23,42,0.95)); color: #ffffff; }
.hero-overlay h2 { margin: 0 0 2px 0; font-size: 1.1rem; font-weight: 700; }
.hero-overlay p { margin: 0; font-size: 0.75rem; opacity: 0.8; }

.sidebar-body { padding: 20px; }
.block-title { font-size: 0.75rem; font-weight: 700; color: var(--primary); border-left: 4px solid var(--primary-light); padding-left: 8px; margin: 20px 0 10px 0; text-transform: uppercase; letter-spacing: 0.5px; }

.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 6px; text-align: center; }
.m-label { font-size: 0.6rem; color: var(--text-muted); display: block; font-weight: 700; margin-bottom: 2px; }
.m-val { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); }
.status-callout { background: #f8fafc; padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); margin-bottom: 20px; }

.pricing-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.pricing-table tr { border-bottom: 1px solid var(--border-color); }
.pricing-table tr:last-child { border-bottom: none; }
.pt-label { padding: 10px 12px; background: #f8fafc; font-weight: 600; width: 60%; color: var(--text-dark); }
.pt-val { padding: 10px 12px; font-weight: 700; text-align: right; }

.timeline-box { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); }
.t-node { text-align: center; }
.t-lbl { font-size: 0.55rem; color: var(--text-muted); font-weight: 700; display: block; }
.t-val { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); }
.t-line { flex: 1; border-bottom: 2px dashed #cbd5e1; margin: 0 10px; position: relative; }
.t-line span { font-size: 0.55rem; color: var(--text-muted); background: #ffffff; padding: 0 4px; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-weight: 700; }

.inventory-table { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background: #ffffff; }
.inv-row { display: flex; border-bottom: 1px solid var(--border-color); }
.inv-row:last-child { border-bottom: none; }
.inv-lbl { width: 35%; background: #f8fafc; padding: 10px; font-size: 0.7rem; font-weight: 600; color: var(--text-dark); border-right: 1px solid var(--border-color); display: flex; align-items: center; }
.inv-val { width: 65%; padding: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inventory-tag { background: #f1f5f9; color: var(--text-dark); font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid #e2e8f0; }
.inventory-tag-sub { font-size: 0.75rem; font-weight: 600; color: var(--primary); }

.trend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.trend-card { border-radius: 6px; padding: 8px 2px; text-align: center; border: 1px solid var(--border-color); }
.trend-card.vacant { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.trend-card.full { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.trend-date { font-size: 0.6rem; display: block; font-weight: 700; opacity: 0.8; }
.trend-marker { font-size: 0.8rem; font-weight: 700; margin-top: 2px; display: block; }

.chart-holder { height: 180px; position: relative; margin-bottom: 12px; width: 100%; border: 1px solid var(--border-color); border-radius: 6px; padding: 8px; background: #ffffff; }
.font-mono { font-family: 'SFMono-Regular', Consolas, monospace; }
.text-center { text-align: center; } .text-right { text-align: right; }
.text-muted { color: var(--text-muted); } .hidden { display: none !important; }
.placeholder-text, .table-loading, .table-error, .panel-loading, .panel-error { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 36px !important; font-weight: 600; }