/* LINE風Redmineテーマ - responsive.css */
/* レスポンシブデザイン用CSS */

/* タブレット - 1024px以下 */
@media screen and (max-width: 1024px) {
  /* サイドバーを少し狭くする */
  #main-menu {
    width: 220px;
  }
  
  /* コンテンツの余白を調整 */
  #main {
    padding: 15px;
  }
  
  #content {
    padding: 20px;
  }
  
  /* 検索ボックスの幅調整 */
  #top-menu #q {
    width: 180px;
  }
}

/* タブレット - 899px以下 */
@media screen and (max-width: 899px) {
  /* ヘッダーの調整 */
  #top-menu form {
    display: none; /* 検索ボックスを非表示 */
  }
  
  /* テーブルの調整 */
  table.list.issues th,
  table.list.issues td {
    padding: 8px 4px;
    font-size: 14px;
  }
  
  /* 一部の列を非表示に */
  table.list.issues .due_date,
  table.list.issues .created_on,
  table.list.issues .tracker,
  table.list.issues .priority {
    display: none;
  }
  
  /* チケット詳細の調整 */
  div.issue .issue-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  div.issue .issue-actions {
    margin-top: 10px;
    width: 100%;
    justify-content: space-between;
  }
  
  div.issue .attributes th {
    width: 120px;
  }
  
  /* ページネーションの調整 */
  .pagination {
    flex-direction: column;
    align-items: center;
  }
  
  .pagination .items,
  .pagination .per-page {
    margin-top: 10px;
    margin-left: 0;
  }
}

/* モバイル - 768px以下 */
@media screen and (max-width: 768px) {
  /* 基本レイアウト */
  body, html {
    overflow-x: hidden;
  }
  
  /* ヘッダーの調整 */
  #top-menu {
    padding: 0 10px;
  }
  
  #top-menu ul {
    gap: 10px;
  }
  
  /* メインメニュー調整 */
  #main-menu {
    position: fixed;
    width: 250px;
    left: -250px;
    top: 56px;
    transition: left var(--transition-speed) ease;
    box-shadow: var(--shadow-medium);
    z-index: 1000;
  }
  
  #main-menu.open {
    left: 0;
  }
  
  /* トグルボタンの表示 */
  #main-menu .main-menu-toggle {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: var(--line-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    border-radius: 0 0 var(--border-radius-small) 0;
    box-shadow: var(--shadow-small);
  }
  
  /* メインコンテンツ調整 */
  #main {
    padding: 10px;
    margin-top: 40px; /* トグルボタンの高さ分 */
  }
  
  #content {
    padding: 15px;
  }
  
  /* チケット一覧 */
  table.list.issues {
    font-size: 13px;
  }
  
  /* チケット詳細 */
  div.journal h4 {
    flex-direction: column;
    align-items: flex-start;
  }
  
  div.journal h4 .journal-link {
    margin-top: 5px;
  }
  
  /* フォーム要素 */
  select, input[type="text"] {
    max-width: 100%;
  }
  
  /* ボタングループ */
  .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .buttons input, .buttons a {
    margin: 0;
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }
}

/* モバイル - 599px以下 */
@media screen and (max-width: 599px) {
  /* ヘッダー調整 */
  #top-menu .home-text {
    display: none; /* ロゴのテキスト部分を非表示 */
  }
  
  /* テーブル調整 */
  table.list.issues th,
  table.list.issues td {
    padding: 6px 3px;
    font-size: 13px;
  }
  
  /* さらに列を非表示に */
  table.list.issues .assigned_to,
  table.list.issues .status,
  table.list.issues .project {
    display: none;
  }
  
  /* チケット詳細 */
  div.issue .attributes {
    display: block;
  }
  
  div.issue .attributes tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  
  div.issue .attributes th, 
  div.issue .attributes td {
    display: block;
    width: 100%;
    text-align: left;
    padding: 3px 0;
  }
  
  /* ページネーション */
  .pagination ul.pages li.page:not(.current) {
    display: none;
  }
  
  /* 履歴 */
  div.journal ul.details li {
    flex-direction: column;
  }
  
  div.journal ul.details li .label {
    width: 100%;
    margin-bottom: 5px;
  }
  
  /* コメントフォーム */
  #update .input-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #update .input-group label {
    margin-bottom: 5px;
  }
  
  /* 添付ファイル */
  div.attachments ul li {
    width: 100%;
    max-width: none;
  }
}

/* フォームのレスポンシブ対応 */
@media screen and (max-width: 480px) {
  input, select, textarea {
    width: 100%;
  }
  
  .splitcontent {
    display: block;
  }
  
  .splitcontent > * {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .splitcontentleft, .splitcontentright {
    width: 100%;
    float: none;
  }
  
  .filter {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter .field,
  .filter .operator,
  .filter .values {
    width: 100%;
    margin-bottom: 5px;
  }
}

/* ダークモードサポート（オプション） */
@media (prefers-color-scheme: dark) {
  /* ダークモード用の変数を上書き */
  :root {
    --line-background: #121212;
    --line-secondary: #FFFFFF;
    --line-light-gray: #2C2C2E;
    --line-mid-gray: #3A3A3C;
    --line-dark-gray: #8E8E93;
    --line-white: #1C1C1E;
    --line-sidebar-bg: #000000;
    --line-panel-bg: #2C2C2E;
    --line-border: #3A3A3C;
  }
  
  /* テキスト色の調整 */
  body {
    color: #E5E5E7;
  }
  
  /* リンク色の調整 */
  a {
    color: #0A84FF;
  }
  
  a:hover {
    color: #5AC8FA;
  }
  
  /* コントラスト調整 */
  #top-menu #q {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  div.issue .issue-header {
    background-color: rgba(6, 199, 85, 0.2);
  }
  
  table.list.issues tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
  }
  
  table.list.issues tbody tr:hover {
    background-color: rgba(6, 199, 85, 0.1);
  }
}