/* ダークテーマスタイル */

/* ベース背景とテキスト色 */
body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* ヘッダー */
header {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border-bottom: 1px solid #334155;
}

header * {
    color: #f1f5f9 !important;
}

/* ボタン */
.bg-orange-600 {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

.bg-orange-600:hover {
    background-color: #c2410c !important;
}

.bg-orange-500 {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

.bg-orange-500:hover {
    background-color: #ea580c !important;
}

.bg-green-600 {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.bg-green-600:hover {
    background-color: #15803d !important;
}

.bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.bg-blue-600:hover {
    background-color: #1d4ed8 !important;
}

.bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.bg-red-600:hover {
    background-color: #b91c1c !important;
}

/* ツールバー */
.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

.border-gray-200 {
    border-color: #334155 !important;
}

.border-gray-300 {
    border-color: #475569 !important;
}

/* テキスト色 - 明るく調整 */
.text-gray-700 {
    color: #e2e8f0 !important;
}

.text-gray-600 {
    color: #cbd5e1 !important;
}

.text-gray-500 {
    color: #94a3b8 !important;
}

.text-gray-900 {
    color: #f8fafc !important;
}

.text-gray-800 {
    color: #f1f5f9 !important;
}

.text-gray-400 {
    color: #94a3b8 !important;
}

.text-gray-300 {
    color: #cbd5e1 !important;
}

/* カード */
.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

/* ガントチャート */
.gantt-header {
    background: #1e293b !important;
    border-bottom: 2px solid #334155 !important;
    color: #e2e8f0 !important;
}

.gantt-header th {
    color: #e2e8f0 !important;
}

.vessel-label, .cargo-label {
    background: #1e293b !important;
    border-right: 2px solid #334155 !important;
    color: #e2e8f0 !important;
}

.vessel-label div, .cargo-label div {
    color: #e2e8f0 !important;
}

.gantt-row {
    border-bottom: 1px solid #334155 !important;
}

.gantt-cell {
    border-right: 1px solid #2d3748 !important;
}

.weekend {
    background-color: #1a202c !important;
}

.bg-red-50 {
    background-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* ドロップゾーン */
.drop-zone {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border: 2px dashed #3b82f6 !important;
}

/* フォーム */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: #3b82f6 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* フリー日セレクター */
.free-date-selector {
    background-color: #0f172a !important;
    border: 1px solid #475569 !important;
    color: #e2e8f0 !important;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    width: 100%;
    margin-top: 2px;
}

/* モーダル */
.bg-black {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* モーダル内容 */
#addVoyageModal .bg-white,
#addCargoModal .bg-white,
#addVesselModal .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* モーダルヘッダー */
#addVoyageModal .border-b,
#addCargoModal .border-b,
#addVesselModal .border-b {
    border-color: #334155 !important;
}

/* クローズボタン */
#closeModalBtn {
    color: #94a3b8 !important;
}

#closeModalBtn:hover {
    color: #cbd5e1 !important;
}

/* フリーバー（ダークテーマ用） */
.free-bar {
    background: repeating-linear-gradient(
        45deg,
        #475569,
        #475569 10px,
        #334155 10px,
        #334155 20px
    ) !important;
    border: 2px dashed #64748b !important;
    color: #cbd5e1 !important;
}

/* 今日のマーカー */
.today-marker {
    background: #ef4444 !important;
}

/* ホバー効果 */
.hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* テーブル */
table {
    color: #e2e8f0 !important;
}

th {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

td {
    color: #e2e8f0 !important;
}

/* カード（貨物リスト等） */
.bg-orange-50 {
    background-color: #422006 !important;
    border-color: #78350f !important;
    color: #fed7aa !important;
}

.bg-orange-50 * {
    color: #fed7aa !important;
}

.bg-orange-50 .text-gray-900 {
    color: #fef3c7 !important;
}

.bg-orange-50 .text-gray-600 {
    color: #fde68a !important;
}

.bg-orange-50 .text-gray-500 {
    color: #fcd34d !important;
}

/* スクロールバー（Webkit系ブラウザ） */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ボーダー */
.border-b {
    border-bottom-color: #334155 !important;
}

.border-t {
    border-top-color: #334155 !important;
}

.border-l {
    border-left-color: #334155 !important;
}

.border-r {
    border-right-color: #334155 !important;
}

/* 凡例 */
.legend-item {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* リンク */
a {
    color: #60a5fa !important;
}

a:hover {
    color: #93c5fd !important;
    text-decoration: underline;
}

/* パターン番号のハイライト */
.text-blue-600 {
    color: #60a5fa !important;
}

/* ラベルとフォーム要素 */
label {
    color: #e2e8f0 !important;
}

.font-medium {
    color: #e2e8f9 !important;
}

.font-semibold {
    color: #f1f5f9 !important;
}

.font-bold {
    color: #f8fafc !important;
}

/* 説明テキスト */
p {
    color: #cbd5e1 !important;
}

/* スパン */
span {
    color: inherit !important;
}

/* グラデーション維持（3フェーズ航海バー） */
.loading-stay {
    background: linear-gradient(135deg, #1e40af, #1e3a8a) !important;
}

.laden-voyage {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.4)) !important;
    border-top: 2px dashed #3b82f6 !important;
    border-bottom: 2px dashed #3b82f6 !important;
}

.discharging-stay {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

/* 貨物バー（オレンジ） */
.cargo-bar {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

/* 透明度 */
.bg-opacity-50 {
    --tw-bg-opacity: 0.5 !important;
}

/* 強制的にすべてのテキスト要素を明るく */
.bg-white .text-gray-700,
.bg-white .text-gray-600,
.bg-white .text-gray-500,
.bg-white .text-gray-900,
.bg-white .text-gray-800 {
    color: #e2e8f0 !important;
}

/* ボタンのテキスト色を強制 */
button {
    color: #e2e8f0 !important;
}

button.bg-orange-600,
button.bg-orange-500,
button.bg-green-600,
button.bg-blue-600,
button.bg-red-600 {
    color: #ffffff !important;
}

button.border-gray-300 {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* モーダル内のすべてのテキスト */
#addVoyageModal *,
#addCargoModal *,
#addVesselModal * {
    color: #e2e8f0 !important;
}

#addVoyageModal h2,
#addCargoModal h2,
#addVesselModal h2 {
    color: #f8fafc !important;
}

/* セレクトボックスのオプション */
option {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* プレースホルダーテキスト */
::placeholder {
    color: #64748b !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #64748b !important;
}

::-ms-input-placeholder {
    color: #64748b !important;
}

/* アイコンの色 */
i.fa, i.fas, i.far, i.fab {
    color: inherit !important;
}

/* ツールバーの情報テキスト */
.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

/* 凡例テキスト */
.legend-item span {
    color: #e2e8f0 !important;
}

/* 中央揃えメッセージ */
.text-center.text-gray-500 {
    color: #94a3b8 !important;
}

/* すべてのdiv内のテキスト（ガントチャート内） */
.vessel-label .text-gray-900,
.vessel-label .text-gray-500,
.vessel-label .text-blue-600,
.cargo-label .text-gray-900,
.cargo-label .text-gray-600,
.cargo-label .text-gray-500 {
    color: #e2e8f0 !important;
}

/* 船舶/貨物情報の詳細テキスト */
.font-semibold.text-gray-900 {
    color: #f1f5f9 !important;
}

.text-xs.text-gray-600 {
    color: #cbd5e1 !important;
}

.text-xs.text-gray-500 {
    color: #94a3b8 !important;
}

/* ヘッダー内のすべての要素 */
header .text-gray-700,
header .text-gray-600,
header .text-gray-500 {
    color: #f1f5f9 !important;
}

/* 船舶カード（vessel-manage.html） */
.vessel-card {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.vessel-card * {
    color: #e2e8f0 !important;
}

.vessel-card .text-gray-900 {
    color: #f8fafc !important;
}

.vessel-card .text-gray-600 {
    color: #cbd5e1 !important;
}

.vessel-card .text-gray-500 {
    color: #94a3b8 !important;
}

/* ドラッグ中 */
.vessel-card.dragging {
    opacity: 0.5;
    border-color: #3b82f6 !important;
}

/* 船舶アイテム（vessel-manage.html） */
.vessel-item {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.vessel-item .font-bold.text-lg.text-gray-900 {
    color: #f8fafc !important;
}

.vessel-item .text-sm.text-gray-600 {
    color: #cbd5e1 !important;
}

.vessel-item .text-gray-400 {
    color: #94a3b8 !important;
}

/* ドラッグ中 */
.vessel-item.dragging {
    opacity: 0.5;
    border-color: #3b82f6 !important;
}

/* 船舶番号バッジ */
.bg-purple-100 {
    background-color: #581c87 !important;
}

.text-purple-700 {
    color: #e9d5ff !important;
}

.text-purple-600 {
    color: #c084fc !important;
}

/* 空の状態メッセージ */
.text-center.py-20 {
    color: #94a3b8 !important;
}

.text-center.py-20 i {
    color: #64748b !important;
}

.text-center.py-20 p {
    color: #94a3b8 !important;
}

/* タイトル */
h1, h2, h3, h4, h5, h6 {
    color: #f1f5f9 !important;
}

/* すべての説明文 */
.text-sm {
    color: #cbd5e1 !important;
}

/* エラーメッセージや警告 */
.text-red-600 {
    color: #fca5a5 !important;
}

.text-yellow-600 {
    color: #fde047 !important;
}

.text-green-600 {
    color: #86efac !important;
}

/* ツールバー情報 */
.text-sm.text-gray-600 i {
    color: #60a5fa !important;
}

/* ステータスバッジ */
.bg-orange-600.text-white,
.bg-green-600.text-white,
.bg-blue-600.text-white,
.bg-red-600.text-white {
    color: #ffffff !important;
}

/* カード内のボタン */
.bg-orange-50 button {
    color: #1e293b !important;
}

.bg-orange-50 .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.bg-orange-50 .bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* 凡例エリア */
.flex.items-center.space-x-6 {
    color: #e2e8f0 !important;
}

.flex.items-center.space-x-6 span {
    color: #e2e8f0 !important;
}

/* 貨物件数表示 */
.text-xs.text-gray-600.mt-1 {
    color: #94a3b8 !important;
}

/* パターン表示 */
.text-xs.text-blue-600 {
    color: #60a5fa !important;
}

.text-xs.text-gray-500:not(.text-blue-600) {
    color: #94a3b8 !important;
}

/* 日付セル */
.gantt-cell .font-medium {
    color: #cbd5e1 !important;
}

.gantt-cell .text-gray-500 {
    color: #64748b !important;
}

/* フリー日セレクター */
.free-date-selector {
    color: #e2e8f0 !important;
}

/* 船舶リスト内のすべてのテキスト要素 */
#vesselList .font-bold {
    color: #f8fafc !important;
}

#vesselList .text-lg {
    color: #f8fafc !important;
}

#vesselList .text-gray-900 {
    color: #f8fafc !important;
}

#vesselList .text-gray-600 {
    color: #cbd5e1 !important;
}

#vesselList .text-gray-500 {
    color: #94a3b8 !important;
}

#vesselList .text-gray-400 {
    color: #94a3b8 !important;
}

/* bg-gray-50 を持つすべての要素 */
.bg-gray-50 {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.bg-gray-50 * {
    color: #e2e8f0 !important;
}

.bg-gray-50 .text-gray-900,
.bg-gray-50 .font-bold {
    color: #f8fafc !important;
}

.bg-gray-50 .text-gray-600 {
    color: #cbd5e1 !important;
}

.bg-gray-50 .text-gray-500 {
    color: #94a3b8 !important;
}

.bg-gray-50 .text-gray-400 {
    color: #94a3b8 !important;
}

/* すべてのdivの中のフォントボールド大きいテキスト */
div[class*="bg-gray"] .font-bold.text-lg {
    color: #f8fafc !important;
}

/* 船名専用（最優先） */
.vessel-item > div > div > div.font-bold.text-lg,
div[data-vessel-id] .font-bold.text-lg,
#vesselList div .font-bold.text-lg {
    color: #f8fafc !important;
    font-weight: bold !important;
}