/* 社員向け画面(申請・許可・出航前・帰港後・アカウント)の最小限のスタイル。
 * 本番公開中のトップページ(top.css)とは独立させる —— base.html.twig の
 * stylesheets ブロックは home/index.html.twig が丸ごと上書きするため、
 * ここを変えてもトップページの見た目には影響しない。
 *
 * 桟橋でスマートフォン片手に操作する前提のため、リンク・ボタンは
 * 最低 44px 四方のタップ領域を確保する。
 */
body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    padding: 1rem;
    line-height: 1.6;
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: -1rem -1rem 1rem;
    background: #0f2a3d;
}

.app-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.5rem;
    color: #fff;
    text-decoration: none;
}

.app-nav a:hover {
    text-decoration: underline;
}

a.button,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    box-sizing: border-box;
}

a.button {
    text-decoration: none;
}

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

ul.booking-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #ddd;
}