*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; font-family:system-ui,Arial,sans-serif; }

/* ---------- Layout ---------- */
.dashboard{ display:flex; flex-direction:column; height:100vh; }

header{
	height:50px; background:#0066cc; color:#fff;
	display:flex; align-items:center; justify-content:space-between;
	padding:0 1rem; flex-shrink:0;
}
header h1{ font-size:1.2rem; margin:0; }
.toggle-btn{
	background:none; border:none; color:#fff;
	font-size:1.6rem; cursor:pointer;
}
.toggle-btn:hover{ opacity:0.8; }

.main{
	display:flex; flex:1; overflow:hidden;
}

/* ---------- Sidebar ---------- */
.sidebar{
	width:250px; flex:0 0 250px;
	background:#f4f4f4; border-right:1px solid #ddd;
	padding:1rem; overflow-y:auto;
	transition:width .3s ease, flex .3s ease;
	scrollbar-width:none; -ms-overflow-style:none;
}
.sidebar::-webkit-scrollbar{ display:none; }
.sidebar.hidden{ width:0; flex:0 0 0; border-right:none; padding:0; }

.sidebar h2{ font-size:1.1rem; margin-bottom:0.8rem; color:#333; }

details{
	margin-bottom:0.5rem; border:1px solid #ccc;
	border-radius:4px; background:#fff;
}
summary{
	padding:0.6rem 0.8rem; cursor:pointer;
	font-weight:500; display:flex; align-items:center;
}
summary::after{
	content:'▸'; margin-left:auto; transition:transform .2s;
}
details[open] summary::after{ transform:rotate(90deg); }

.tool-list{ list-style:none; margin:0; padding:0; }

/* ---------- link‑style (PDF, Image, Office, …) ---------- */
.tool-list li a{
	display:block; padding:0.4rem 0.8rem;
	text-decoration:none; color:#444;
	border-left:3px solid transparent;
}
.tool-list li a:hover{
	background:#e9e9e9; border-left-color:#007bff;
}
.tool-list li a.active{
	background:#d0e7ff; color:#003366; font-weight:600;
	border-left-color:#0066cc;
}

/* ---------- button‑style (GAS Tools) ---------- */
.tool-list button.tool-btn{
	display:block; width:100%; padding:0.4rem 0.8rem;
	text-align:left; background:none; border:none;
	color:#444; cursor:pointer; font:inherit;
	border-left:3px solid transparent;
}
.tool-list button.tool-btn:hover{
	background:#e9e9e9; border-left-color:#007bff;
}
.tool-list button.tool-btn.active{
	background:#d0e7ff; color:#003366; font-weight:600;
	border-left-color:#0066cc;
}
.tool-list button.tool-btn:focus{ outline:none; }

/* ---------- Content (iframe) ---------- */
.content{
	flex:1; position:relative; overflow:hidden;
}
iframe{
	width:100%; height:100%; border:none;
}

/* ---------- Loader overlay ---------- */
#loader{
	position:absolute; top:0; left:0; right:0; bottom:0;
	background:rgba(255,255,255,0.8);
	display:flex; align-items:center; justify-content:center;
	visibility:hidden; z-index:10;
}
.spinner{
	width:45px; height:45px;
	border:5px solid #c0c0c0;
	border-top-color:#0066cc;
	border-radius:50%;
	animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }