/* ===================================================
   1. リセットと基本設定
   =================================================== */
body {
    font-family: system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    /* 縦並び（上：ヘッダー、下：コンテンツエリア） */
    display: flex !important;
    flex-direction: column !important;
}

h1 { margin: 0; }

/* ===================================================
   2. ヘッダー (Site Header)
   =================================================== */
.site-header {
    background-color: #343a40; /* ダークグレー */
    color: #fff;
    width: 100%;
    padding: 10px 20px;
    flex-shrink: 0; /* 固定 */
}

.site-header h1 {
    line-height: 1.5;
}

/* ===================================================
   3. コンテンツラッパー (レイアウトの骨組み)
   =================================================== */
.content-wrapper {
    display: flex;         /* 横並び（左：メニュー、右：本文） */
    flex-direction: row;   /* 明示的に横並び */
    flex: 1;               /* 残りの高さを全て使う */
    width: 100%;
    overflow-x: hidden;    /* ★追加：アニメーション中のはみ出し防止 */
}

/* ===================================================
   4. サイドメニュー (Side Menu)
   =================================================== */
.side-menu {
    min-width: 250px;      /* 幅固定 */
    max-width: 250px;
    min-height: 100vh;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding: 0;            /* ★修正：ListGroupを使うため余白なしに統一 */
    flex-shrink: 0;
    transition: margin 0.25s ease-out; /* ★追加：開閉アニメーション */
}

/* --- ★重要：閉じた時の設定 (JavaScript連動) --- */
body.sb-sidenav-toggled .side-menu {
    margin-left: -250px; /* 左に隠す */
}

/* サイドメニュー内のリストアイテム調整 */
.list-group-item {
    background-color: transparent;
    border-color: #dee2e6;
    border-left: none;
    border-right: none;
    border-radius: 0 !important;
}

/* アクティブなメニュー */
.list-group-item.active {
    background-color: #343a40; /* テーマに合わせて黒っぽく */
    border-color: #343a40;
    color: #fff;
}

/* ホバー時の挙動 */
.sidebar-btn:hover {
    background-color: #e9ecef;
    color: #000;
}

/* ===================================================
   5. メインコンテンツエリア (Main Content)
   =================================================== */
.main-content {
    flex-grow: 1;          /* 残りの幅を埋める */
    padding: 30px;
    background-color: #ffffff;
    overflow-x: hidden;
    width: 100%;
}

/* ===================================================
   6. ログイン画面専用 (.login-body)
   =================================================== */
.login-body {
    background-color: #f8f9fa;
    justify-content: center;
}

.login-body .content-wrapper {
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* ログイン画面ではサイドメニューを完全非表示 */
.login-body .side-menu {
    display: none !important;
}

.login-body .main-content {
    flex-grow: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    max-width: 400px;
}

.login-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ===================================================
   7. その他パーツ（トップメニュー・マップなど）
   =================================================== */

/* --- トップメニュー・ダッシュボード --- */
.transition-effect {
    transition: transform 0.2s, box-shadow 0.2s;
}
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.user-icon-placeholder {
    width: 50px;
    height: 50px;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

/* --- テーブルビュー (マップ表示) --- */
.map-container {
    min-height: 500px;
}

.map-object {
    width: 100%;
    height: 120px;
    border-radius: 15px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.map-object-entrance {
    height: 180px;
    width: 100px;
}

/* 状態カラー正常 */
.status-normal {
    background-color: #cfe2ff; /* 薄い青 */
    border-color: #b6d4fe;
}
/* 状態カラー警告 */
.status-warning {
    background-color: #f8d7da; /* 薄い赤 */
    border-color: #f5c6cb;
}

/* 凡例ボックス */
.legend-box {
    width: 60px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* --- ヘルプページ --- */
.help-content-box {
    min-height: 400px;
    border: 1px solid #aaa !important;
    border-radius: 20px !important;
    background-color: #fff !important;
}

/* 左側ナビゲーション (Pills) */
.nav-pills .nav-link.active {
    background-color: #343a40;
    color: #fff;
}
.nav-pills .nav-link {
    color: #333;
    border-bottom: 1px solid #dee2e6;
}
/* seapp/static/css/style.css */

/* ▼▼▼ アイコンの共通スタイル ▼▼▼ */
.map-object {
    width: 100px;
    height: 60px;
    border: 2px solid #333;
    border-radius: 8px;
    transition: all 0.3s ease;
    z-index: 10;
    background-color: white; /* 背景色は白を基本に */
}

/* 正常時 (青) */
.status-normal {
    background-color: #e7f3ff;
    border-color: #0d6efd;
}

/* 異常時 (赤) */
.status-warning {
    background-color: #ffebe9;
    border-color: #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5) !important;
    animation: pulse 2s infinite;
}

/* 凡例用の四角 */
.legend-box {
    width: 40px;
    height: 40px;
    border: 2px solid #ccc;
    border-radius: 6px;
}

/* アニメーション定義 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ついでに、登録画面で使っていた文字選択禁止もここに入れておくと便利です */
.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* ===================================================
   8. テーマの上書き (Bootswatch LUX 修正)
   =================================================== */

/* 基本の文字色を真っ黒・中太にする */
body {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* 見出しも真っ黒・太字にする */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* カード内の文字も黒くする */
.card, .card-body {
    color: #000000 !important;
}

/* 薄い文字(text-muted)も見やすくする */
.text-muted {
    color: #444444 !important;
}

/* ===================================================
   9. フォームの共通設定 (入力欄を少し引き締める)端末登録画面に適用
   =================================================== */
.form-control, .form-select { 
    padding: 0.4rem 0.7rem !important; 
    font-size: 0.95rem !important; 
}
/* ===================================================
   10. パスワード入力欄の個別設定　ユーザー登録画面
   =================================================== */

/* Djangoのフォームでクラスが上手く当たらない場合用 */
input[type="password"] {
    display: block;
    width: 100%;
    /* 上の .form-control とサイズを合わせるために数値を統一しました */
    padding: 0.4rem 0.7rem !important;
    font-size: 0.95rem !important;
    
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff; /* 背景白 */
    color: #000;            /* 文字黒 */
}

/* パスワード入力しようとした時（フォーカス時）に青く光らせる設定（LUXテーマ合わせ） */
input[type="password"]:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ===================================================
   11. テーブルレイアウト編集画面 (ドラッグ&ドロップ)
   =================================================== */

/* 共通スタイル: テーブルなどの動かせるアイテム */
.table-item {
    position: absolute;
    width: 100px;   /* 基本サイズ */
    height: 60px;
    border: 2px solid #212529;
    border-radius: 8px;
    background-color: #f8f9fa; /* 基本の色 */
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

/* ドラッグ中の見た目 */
.table-item:active {
    cursor: grabbing;
    z-index: 100 !important; /* ドラッグ中は確実に最前面へ */
}

/* クリックして選択された時の見た目（青い枠線） */
.table-item.selected {
    border-color: #0d6efd !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    z-index: 50;
}

/* --- 種類別の色とサイズの上書き --- */

/* トイレ */
.toilet-item { 
    background-color: #e7f3ff; 
    width: 80px; 
    height: 80px; 
}

/* 入口 */
.entrance-item { 
    background-color: #fff3cd; 
    width: 80px; 
    height: 100px; 
    border-style: dashed; 
}