/* styles.css */

/* --- CSS Variables --- */
:root {
  --bg-color: #000000; /* Dark blue/purple background */
  --surface-color: #16213e; /* Slightly lighter surface for form */
  --primary-color: #0f3460; /* Button, focus, links */
  --primary-hover-color: #1f5a8e; /* Button hover */
  --text-color: #e4e4e4; /* Light text */
  --text-muted-color: #a0a0a0; /* Muted text (labels, placeholders) */
  --error-color: #e94560; /* Error text */
  --border-color: #4a4a6a; /* Subtle border */
  --input-bg-color: #2a2a4a; /* Input field background */
  --disabled-bg-color: #555;
  --disabled-text-color: #999;

  --border-radius: 8px;
  --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  --transition-speed: 0.3s ease;
}

/* --- Base & Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  font-size: 16px; /* Base font size */
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--primary-hover-color);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space below images */
}

/* --- Layout --- */
.content.sign-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px; /* Padding for smaller screens */
}

.content-in {
  width: 100%;
  max-width: 450px; /* Max width of the login box */
  margin-bottom: auto; /* Pushes footer down */
  margin-top: auto; /* Centers vertically */
}

.sign-title {
  text-align: center;
  margin-bottom: 30px;
}

.sign-title img {
  max-width: 200px; /* Adjust logo size as needed */
  margin: 0 auto;
}

.sign-form-wrap {
  background-color: var(--surface-color);
  padding: 30px 40px; /* More padding on larger screens */
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  text-align: center; /* Center bottom links */
}

.sign-form-wrap h3 {
  font-size: 1.8em;
  margin-bottom: 25px;
  font-weight: 600;
  color: var(--text-color);
}

/* --- Form Elements --- */
.signform {
  text-align: left; /* Align form elements left */
}

.input_column {
  margin-bottom: 20px;
  position: relative; /* For error positioning if needed */
}

.input_column label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--text-muted-color);
}

.input_column input[type="text"],
.input_column input[type="email"],
.input_column input[type="number"],
.input_column input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
  font-size: 1em;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.input_column input[type="text"]::placeholder,
.input_column input[type="password"]::placeholder {
  color: var(--text-muted-color);
  opacity: 0.7;
}

.input_column input[type="text"]:focus,
.input_column input[type="password"]:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.5); /* Focus ring matching primary color */
}

/* Password visibility toggle */
.passinput {
  position: relative;
}

.passinput .buttonEye {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-speed);
}

.passinput .buttonEye:hover {
  opacity: 1;
}

.passinput .buttonEye img {
  width: 20px; /* Adjust eye icon size */
  height: 20px;
  vertical-align: middle; /* Better alignment if needed */
}

/* Error Text */
.errortxt {
  display: block; /* Ensure it takes space */
  min-height: 1.2em; /* Reserve space even when empty */
  margin-top: 5px;
  color: var(--error-color);
  font-size: 0.85em;
  font-weight: 500;
}
/* Hide empty spans visually if preferred, but keep space */
.errortxt:empty {
 /* visibility: hidden; */ /* Alternative: just let it be empty */
}

/* Button Area */
.btn_area {
  margin-top: 25px;
  margin-bottom: 20px;
}

.btn_area input[type="submit"] {
  width: 100%;
  padding: 12px 20px;
  background-color: var(--primary-color);
  color: #fff; /* White text on button */
  border: none;
  border-radius: var(--border-radius);
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn_area input[type="submit"]:hover:not(:disabled) {
  background-color: var(--primary-hover-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn_area input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.5); /* Focus ring */
}

.btn_area input[type="submit"]:disabled {
  background-color: var(--disabled-bg-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  box-shadow: none;
}

/* Links below button */
.sign-form-wrap form a { /* Forgot password link */
  display: block; /* Make it take full width */
  margin-bottom: 20px;
  font-size: 0.9em;
  text-align: center;
}

.undertxt { /* Sign up text */
  margin-top: 25px;
  font-size: 0.9em;
  color: var(--text-muted-color);
}

.undertxt a {
  font-weight: 600;
  color: var(--primary-color); /* Make sign up link stand out */
}
.undertxt a:hover {
  color: var(--primary-hover-color);
}


/* ヘッダー基本スタイル */
.header {
  background-color: var(--bg-color); /* ヘッダー背景色 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative; /* メニューの位置決めの基点 */
  z-index: 1000; /* メニューが他の要素より手前に来るように */
}

.hd-in {
  max-width: 1200px; /* コンテンツ幅 */
  margin: 0 auto;
  padding: 0 1rem; /* 左右のパディング */
  display: flex;
  justify-content: space-between; /* ロゴとメニューを両端寄せ */
  align-items: center;
  height: 60px; /* ヘッダーの高さ */
}

.head-logo {
  height: 40px; /* ロゴの高さ調整 */
  display: block; /* 余白調整のため */
}

/* PC表示時のナビゲーション */
.header-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 横並び */
  align-items: center;
}

.header-nav li {
  margin-left: 1.5rem; /* メニュー間のスペース */
}

.header-nav a,
.header-nav .logout-button {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  background: none; /* ボタンのデフォルトスタイル解除 */
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit; /* 親要素のフォントサイズを継承 */
}
.header-nav a:hover,
.header-nav .logout-button:hover {
  color: var(--link-hover-color); /* ホバー時の色 */
}


/* スマホ用メニューボタンスタイル */
.menu-trigger {
  display: none; /* デフォルト (PC) では非表示 */
  width: 30px;
  height: 22px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 1010; /* メニューより手前に */
}

.menu-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-color); /* 線の色 */
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.menu-trigger span:nth-child(1) {
  top: 0;
}

.menu-trigger span:nth-child(2) {
  top: 10px;
}

.menu-trigger span:nth-child(3) {
  top: 20px;
}

/* メニューボタンがアクティブ (is-active) の時のスタイル (×印) */
.menu-trigger.is-active span:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
}

.menu-trigger.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-trigger.is-active span:nth-child(3) {
  top: 10px;
  transform: rotate(-45deg);
}


/* --- レスポンシブ (スマホ表示) --- */
@media (max-width: 768px) { /* ブレークポイントは適宜調整 */

  .menu-trigger {
      display: block; /* スマホでは表示 */
  }

  .header-nav {
      /* メニューを画面上部から降ろすための設定 */
      position: absolute;
      top: 60px; /* ヘッダーの高さに合わせる */
      left: 0;
      width: 100%;
      background-color: var(--bg-color); /* メニューの背景色 */
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);

      /* アニメーションのための初期状態 */
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-out; /* スライドダウン/アップのアニメーション */

      /* スマホ表示用にスタイル調整 */
      display: block; /* 縦並びにする */
      padding: 0; /* 上下のパディングは li で調整 */
  }

  .header-nav.is-active {
      max-height: 500px; /* 表示時の最大の高さ (十分な値を設定) */
      /* 必要であれば transition: max-height 0.4s ease-in; など調整 */
  }

  .header-nav li {
      margin-left: 0; /* 左マージンをリセット */
      border-bottom: 1px solid #eee; /* メニュー項目の区切り線 */
  }

  .header-nav li:last-child {
      border-bottom: none;
  }

  .header-nav span,
  .header-nav a,
  .header-nav .logout-button {
      display: block; /* リンク領域を広げる */
      padding: 1rem; /* パディング調整 */
      text-align: center; /* 中央寄せ */
      width: 100%; /* 幅いっぱい */
      color: var(--text-color);
  }
   .header-nav .logout-button {
      color: #dc3545; /* ログアウトボタンの色を赤系に */
  }
}

/* --- Footer --- */
.footer-wrap {
  width: 100%;
  text-align: center;
  padding: 15px 20px;
  margin-top: 30px; /* Space above footer */
  font-size: 0.85em;
  color: var(--text-muted-color);
  flex-shrink: 0; /* Prevent shrinking if content is tall */
}

/* --- Popup --- */
.info-popup-wrap {
  position: fixed;
  inset: 0; /* top, right, bottom, left = 0 */
  background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 1; /* Add transitions if you animate showing/hiding */
  visibility: visible; /* Add transitions if you animate showing/hiding */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Add a class like 'hidden' to hide the popup */
/* .info-popup-wrap.hidden {
  opacity: 0;
  visibility: hidden;
} */


.alert-container {
  position: fixed; /* 画面に固定 */
  top: 1rem;       /* 上からの距離 */
  left: 50%;       /* 水平方向中央寄せのための起点 */
  transform: translateX(-50%); /* 水平方向中央寄せ */
  z-index: 9999;   /* 他の要素より手前に表示 */
  width: auto;     /* 内容に合わせる */
  min-width: 300px; /* 最小幅 */
  max-width: 90%;  /* 最大幅 */
}

.alert {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  opacity: 1;
  transition: opacity 0.5s ease-out; /* フェードアウト用 */
  display: flex; /* Closeボタン用 */
  justify-content: space-between; /* Closeボタン用 */
  align-items: center; /* Closeボタン用 */
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-danger { /* error を danger と表現することが多い */
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-dismissible .btn-close {
  padding: 0.75rem 1.25rem;
  margin: -0.75rem -1.25rem -0.75rem auto; /* 右寄せ */
  background: transparent;
  border: 0;
  color: inherit; /* 親要素の色を継承 */
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
}
.alert-dismissible .btn-close:hover {
  opacity: 0.75;
}

/* フェードアウト開始時のスタイル（JSで追加されるクラス） */
.alert-fadeout {
  opacity: 0;
}


.popup-wrap {
  background-color: var(--surface-color);
  padding: 30px 40px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  color: var(--text-color); /* Ensure text inside popup is light */
}

.popup-wrap .close_btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.8em;
  font-weight: bold;
  color: var(--text-muted-color);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-speed);
}

.popup-wrap .close_btn:hover {
  color: var(--text-color);
}

.popup-wrap img {
  max-width: 50px; /* Adjust icon size */
  margin: 0 auto 20px auto; /* Center and add space below */
}

.popup-wrap p {
  margin-bottom: 10px; /* Space between error messages */
  font-size: 1em;
  color: var(--error-color); /* Make error messages stand out */
  font-weight: 500;
}

.popup-wrap p:last-child {
  margin-bottom: 0;
}


/* --- Responsive Adjustments --- */

/* Small devices (phones, less than 600px) */
@media (max-width: 599.98px) {
  .sign-form-wrap {
      padding: 25px 20px; /* Less padding on small screens */
  }

  .sign-form-wrap h3 {
      font-size: 1.6em;
  }

  .btn_area input[type="submit"] {
      font-size: 1em;
      padding: 10px 15px;
  }

  .popup-wrap {
      padding: 25px 20px;
  }
}

/* Medium devices (tablets, 600px and up) */
@media (min-width: 600px) {
  /* Most styles are already good for tablets due to max-width on the form */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
   /* Optional: Slightly increase max-width or padding if desired on large desktops */
  /* .content-in {
      max-width: 500px;
  } */
}



/* styles.css (追記または別ファイル) */

/* --- Variables (前回のものを継承または再定義) --- */
:root {
  --header-bg: #16213e; /* ヘッダー背景色 */
  --header-border: #2a2a4a; /* ヘッダー下部ボーダー */
  --dropdown-bg: #1f3a63; /* ドロップダウン背景 */
  --dropdown-hover-bg: #2a4a7a; /* ドロップダウンホバー背景 */
  --link-color: #e4e4e4; /* ヘッダーリンク色 */
  --link-hover-color: #ffffff; /* ヘッダーリンクホバー色 */
  --balance-color: #50fa7b; /* 残高の色 (例: 明るい緑) */
  --account-type-color: #f1fa8c; /* アカウント種別 (例: 黄色) */

  /* Responsive breakpoint */
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px; /* PC/SP切り替え点 */
}

/* --- Base Body Style (コンテンツ背景) --- */
body {
  background-color: var(--bg-color); /* 全体の背景 */
}






/* --- Mobile First: Hide PC elements, Show SP elements --- */
.pc-only {
  display: none;
}
.sp-only {
  display: block; /* Or list-item if needed */
}

/* --- Responsive: Tablet/Desktop Styles (>= 992px) --- */
@media (min-width: 992px) {
  .pc-only {
      display: block; /* Or list-item */
  }
  .sp-only {
      display: none;
  }

}



.card {
  border-radius: 0.5rem; /* sm:rounded-lg */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
  margin-bottom: 1.5rem; /* Spacing between cards */
}
.dark .card {
   border: 1px solid #374151; /* dark:border-gray-700 */
}
.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb; /* light border */
}
.dark .card-header {
  border-bottom: 1px solid #374151; /* dark:border-gray-700 */
}
.card-body {
  padding: 1.5rem;
}

.trade-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: stack */
  gap: 1.5rem; /* Spacing between grid items */
}
@media (min-width: 1024px) { /* lg breakpoint */
  .trade-dashboard-grid {
      grid-template-columns: 2fr 1fr; /* Chart | Form */
      grid-template-areas:
          "chart form"
          "history history"; /* History spans full width below */
  }
  .chart-area { grid-area: chart; margin-bottom: 0;}
  .trade-form-area { grid-area: form; margin-bottom: 0;}
  .history-area { grid-area: history; }
}

/* Chart Tabs */
.chart-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: none; /* Override card header border if needed */
  padding-bottom: 0; /* Adjust padding */
}
.tab-button {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0; /* Rounded top corners */
  cursor: pointer;
  font-weight: 500;
  color: #6b7280; /* text-gray-500 */
  background-color: transparent;
   transition: all 0.2s ease-in-out;
}
.dark .tab-button {
   color: #9ca3af; /* dark:text-gray-400 */
}
.tab-button:hover {
  color: #1f2937; /* text-gray-800 */
   background-color: #f3f4f6; /* bg-gray-100 */
}
.dark .tab-button:hover {
   color: #f9fafb; /* dark:text-gray-50 */
   background-color: #374151; /* dark:bg-gray-700 */
}
.tab-button.active {
  color: #3b82f6; /* text-blue-500 */
  border-color: #d1d5db #d1d5db #ffffff; /* Light mode border */
   background-color: #ffffff; /* Light mode bg */
   font-weight: 600;
}
.dark .tab-button.active {
   color: #60a5fa; /* dark:text-blue-400 */
   border-color: #4b5563 #4b5563 #1f2937; /* dark border */
   background-color: #1f2937; /* dark:bg-gray-800 or 900 */
}


/* Trade Form Elements */
.asset-box {
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db; /* light border */
  border-radius: 0.375rem;
   font-weight: 500;
}
.trade-input {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db; /* light border */
   padding: 0.75rem 1rem;
}
.dark .trade-input {
   border-color: #4b5563; /* dark border */
}

.direction-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.direction-button {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
   display: flex;
   align-items: center;
   justify-content: center;
}
.buy-button {
  background-color: rgba(34, 197, 94, 0.1); /* bg-green-100 */
  color: #16a34a; /* text-green-600 */
  border-color: transparent;
}
.dark .buy-button {
   background-color: rgba(74, 222, 128, 0.2); /* dark green */
   color: #4ade80; /* dark:text-green-400 */
}
.buy-button:hover {
    background-color: rgba(34, 197, 94, 0.2);
}
.buy-button.selected {
  background-color: #16a34a; /* bg-green-600 */
  color: #ffffff;
  border-color: #15803d; /* darker green border */
}
.dark .buy-button.selected {
    background-color: #22c55e;
    border-color: #16a34a;
    color: #f9fafb;
}


.sell-button {
  background-color: rgba(239, 68, 68, 0.1); /* bg-red-100 */
  color: #dc2626; /* text-red-600 */
  border-color: transparent;
}
.dark .sell-button {
   background-color: rgba(248, 113, 113, 0.2); /* dark red */
   color: #f87171; /* dark:text-red-400 */
}
.sell-button:hover {
   background-color: rgba(239, 68, 68, 0.2);
}
.sell-button.selected {
  background-color: #dc2626; /* bg-red-600 */
  color: #ffffff;
  border-color: #b91c1c; /* darker red border */
}
.dark .sell-button.selected {
    background-color: #ef4444;
    border-color: #dc2626;
     color: #f9fafb;
}

.submit-trade-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  background-color: #3b82f6; /* bg-blue-500 */
  color: #ffffff;
}
.submit-trade-btn:hover:not(:disabled) {
   background-color: #2563eb; /* bg-blue-600 */
}
.submit-trade-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
   background-color: #6b7280; /* bg-gray-500 */
}
.dark .submit-trade-btn:disabled {
    background-color: #4b5563; /* dark:bg-gray-600 */
}


/* History Table */
.history-table-wrapper {
  max-height: 400px; /* Limit height and allow scroll */
  overflow-y: auto;
  border: 1px solid #e5e7eb; /* light border */
  border-radius: 0.375rem;
}
.dark .history-table-wrapper {
   border-color: #374151; /* dark border */
}
.history-table {
  width: 100%;
  border-collapse: collapse; /* Ensures borders connect cleanly */
}
.history-table thead th {
  position: sticky;
  top: 0;
  background-color: #f9fafb; /* bg-gray-50 */
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-medium */
  color: #6b7280; /* text-gray-500 */
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb; /* light border */
  z-index: 10;
}
.dark .history-table thead th {
   background-color: #1f2937; /* dark:bg-gray-800 */
   border-color: #374151; /* dark border */
   color: #9ca3af; /* dark:text-gray-400 */
}
.history-table tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem; /* text-sm */
  border-bottom: 1px solid #e5e7eb; /* light border */
  white-space: nowrap; /* Prevent text wrapping */
}
.dark .history-table tbody td {
   border-color: #374151; /* dark border */
}
.history-table tbody tr:last-child td {
  border-bottom: none; /* No border on last row */
}
.history-table tbody tr:hover {
   background-color: #f3f4f6; /* Light hover */
}
.dark .history-table tbody tr:hover {
   background-color: #374151; /* Dark hover */
}

/* Loading Indicator */
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9ca3af; /* dark:text-gray-400 */
  font-size: 1.1rem;
}