/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
    --primary: #1a73e8;
    --bg: #f8f9fa;
    --sidebar: #ffffff;
    --card: #ffffff;
    --text: #202124;
    --text-sub: #5f6368;
    --border: #dadce0;
    --danger: #d93025;
}

body { margin: 0; font-family: 'Noto Sans JP', sans-serif; background-color: var(--bg); color: var(--text); display: flex; height: 100vh; overflow: hidden; }

.sidebar { width: 260px; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.sidebar-brand { padding: 24px; font-size: 1.2rem; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border); }
.nav-menu { list-style: none; padding: 12px 0; margin: 0; flex: 1; }
.nav-item { display: flex; align-items: center; padding: 12px 24px; color: var(--text); text-decoration: none; font-weight: 500; gap: 12px; }
.nav-item:hover { background: #f1f3f4; }
.nav-item.active { background: #e8f0fe; color: var(--primary); }

.main-content { flex: 1; padding: 32px; overflow-y: auto; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; }
.kpi-card { background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid var(--border); }
.kpi-label { color: var(--text-sub); font-size: 0.8rem; margin-bottom: 4px; }
.kpi-value { font-size: 1.5rem; font-weight: 700; }

.filter-bar { background: var(--card); padding: 16px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 24px; display: flex; gap: 12px; align-items: center; }
.db-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.card { background: var(--card); padding: 24px; border-radius: 8px; border: 1px solid var(--border); }
.chart-container { height: 300px; width: 100%; position: relative; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
th { background: #f8f9fa; color: var(--text-sub); }

.btn-primary { background: var(--primary); color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: 500; }
.btn-outline { background: #fff; color: var(--text); border: 1px solid var(--border); padding: 8px 16px; border-radius: 4px; text-decoration: none; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 5px; }
.btn-delete { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 0.8rem; }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-content { background: #fff; padding: 30px; border-radius: 8px; width: 400px; position: relative; }
.close-btn { position: absolute; top: 15px; right: 20px; cursor: pointer; font-size: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 0.9rem; }
.form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }