/* QRQueue/Views/Shared/Layout.tsx から抽出したスタイル */

* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
.app-container { display: flex; flex-direction: column; min-height: 100vh; }
.layout-header {
    display: flex; align-items: center; justify-content: space-between;
    background-color: #3f51b5; color: white; padding: 0.75rem 1rem;
    position: sticky; top: 0; z-index: 100;
}
.header-left { display: flex; align-items: center; }
.menu-button {
    display: none; font-size: 1.5rem; background: none; border: none;
    color: white; cursor: pointer; margin-right: 1rem;
}
.layout-title { font-size: 1.2rem; font-weight: bold; }
.header-right { font-size: 0.75rem; opacity: 0.8; text-align: right; }
.layout-body { display: flex; flex: 1; height: 100%; }
.sidebar {
    width: 240px; background-color: #f4f4f4; padding: 1rem;
    border-right: 1px solid #ddd;
}
.sidebar nav a, .drawer nav a {
    display: block; padding: 0.5rem; color: #333;
    text-decoration: none; border-radius: 4px;
}
.logout-link {
    display: block; width: 100%; padding: 0.5rem; margin-top: 0.5rem;
    background: none; border: none; text-align: left; font-size: 1rem;
    color: #c62828; cursor: pointer; border-radius: 4px;
}
.logout-link:hover { background-color: #ddd; }
.sidebar nav a:hover, .drawer nav a:hover { background-color: #ddd; }
.main { flex: 1; padding: 1rem; }
.layout-footer {
    text-align: center; padding: 0.8rem 1rem;
    font-size: 0.75rem; color: #999;
}
.drawer {
    position: fixed; top: 0; left: 0; width: 240px; height: 100%;
    background-color: #f4f4f4; padding: 1rem;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); z-index: 200;
}
.drawer-close {
    background: none; border: none; font-size: 1.2rem;
    margin-bottom: 1rem; cursor: pointer;
}
@media (max-width: 768px) {
    .sidebar { display: none; }
    .menu-button { display: block; }
    .layout-body { flex-direction: column; }
}