/**
 * /home/influencers/assets/css/index.css
 * 
 * インフルエンサー管理コンソール - メインスタイルシート
 * 
 * @version 1.0.0
 * @build 20250929-001
 * @author BinaryTraffic
 * @since 2025-09-29
 * 
 * 機能:
 * - タブスタイル（アクティブマーカー）
 * - テーブル改行抑止
 * - ダッシュボードカードスタイル
 * - レスポンシブデザイン
 * - 管理画面レイアウト
 */

/* Basic styles */

/* Progress bar styles */
.progress-container {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.progress-container.show {
  opacity: 1;
}

.progress {
  background-color: #e9ecef;
  border-radius: 0.25rem;
  overflow: hidden;
}

.progress-bar {
  transition: width 0.3s ease;
}

.progress-bar.bg-success {
  background-color: #28a745 !important;
}

.progress-bar.bg-danger {
  background-color: #dc3545 !important;
}

.progress-bar.bg-info {
  background-color: #17a2b8 !important;
}

/* Remove extra margin from btn-group in tables */
.table .btn-group {
  margin-bottom: 0;
}

/* Red triangle marker for edited rows (like Google Sheets memo marker) */
.row-edited td:first-child {
  position: relative;
}

.row-edited td:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #dc3545 transparent transparent transparent;
  z-index: 1;
}

/* Fix select box width in admin members table */
#adminMembers-rows .form-select {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

/* Smaller buttons for management screens */
button#addBankMaster,
button#addBranchDetail,
button#addProjectBtn,
button#addContractBtn,
button#addInfluencerBtnTab,
button#adminMembers-btnUpdate,
button#adminMembers-btnReload {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  min-height: auto !important;
  width: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
}

/* Search input group sizing */
.input-group-sm .form-control,
.input-group-sm .input-group-text {
  padding: 0.375rem 0.75rem !important;
}

/* Form select sizing to match input groups */
.form-select-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  min-height: auto !important;
}

/* Form select sizing to match input-group-sm */
#statusFilter.form-select-sm {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.875rem !important;
  min-height: auto !important;
}

#bankMasterTable .btn-sm,
#branchDetailTable .btn-sm {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  width: auto !important;
  min-height: auto !important;
}

/* Unified table header styles */
.table thead th {
  background-color: #4c85da !important;
  color: white !important;
  border-color: #4c85da !important;
}

/* Table body background */
.table tbody tr {
  background-color: #f8f8f8 !important; /* テーブル行の背景を薄いグレーに */
}

.table tbody tr:nth-of-type(even) {
  background-color: #f0f0f0 !important; /* 偶数行を少し濃いグレーに */
}

/* Unified pagination styles */
.pagination {
  margin-top: 1rem;
  margin-bottom: 0;
}

/* ページネーション行の下余白をゼロに */
.pagination-row {
  margin-bottom: 0 !important;
}

.pagination .page-link {
  color: #4c85da;
  border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
  background-color: #4c85da;
  border-color: #4c85da;
  color: white;
}

.pagination .page-link:hover {
  background-color: #e7f1ff;
  border-color: #4c85da;
  color: #4c85da;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #fff;
  border-color: #dee2e6;
}


/* Base styles */
html, body { 
  height: 100%; 
  margin: 0; 
  font-size: 14px; /* Reduce base font size */
}

body { 
  padding-top: 48px; /* Reduce navbar height */
  padding-bottom: 48px;
  background-color: #e0e0e0; /* メインページ背景をライトグレーに変更 */
}

/* Landing page specific */
body.landing { 
  padding-top: 0 !important; 
}

/* Header */
.navbar-brand { 
  font-weight: 600; 
}

/* Cards */
.card { 
  border-radius: 8px;
  background-color: #fff; /* カード背景を白に */
}

.card .card-body { 
  display: flex; 
  flex-direction: column; 
}

.card .card-body .btn { 
  margin-top: auto; 
}

/* Landing page cards */
.landing .card { 
  height: 100%; 
}

.landing .card .card-body { 
  display: flex; 
  flex-direction: column; 
}

.landing .card .card-body .btn { 
  margin-top: auto; 
}

/* Tables - unified responsive styling */
.table-responsive { 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;
}

/* Footer */
#siteFooter.fixed-bottom {
  z-index: 1030;
  height: 48px; /* Reduce footer height */
  line-height: 48px;
  left: 0; 
  right: 0; 
  width: 100%;
  background: #e0e0e0; /* フッター背景をライトグレーに変更 */
  border-top: 1px solid #d0d0d0; /* ボーダー色も調整 */
}

/* Navigation */
.nav {
  background-color: #e0e0e0 !important;
}

/* Management screen - tight spacing */
.kanri-main {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  background: #e0e0e0;
}

/* Reduce margins and padding for tight layout */
.kanri-main .container-fluid {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.kanri-main .card {
  margin-bottom: 1rem;
}

/* Bootstrap 5.3 のサイズユーティリティを使用するためサイズ強制を停止
.kanri-main .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.kanri-main .form-control,
.kanri-main .form-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
*/

/* Card body padding for management layout */
.kanri-main .card-body {
  padding: 1rem !important;
}

/* Tab container - adjust for navbar */
#mainTabs {
  margin-inline: 0px;
  overflow-x: visible;
  overflow-y: visible;
  white-space: nowrap;
  padding-top: 26px; /* Space for the blue marker above tabs */
}

/* Tab content container - unified layout */
#mainTabsContent {
  margin: 0;
  padding: 0;
}

.tab-pane {
  padding: 0 !important;
  margin: 0 !important;
}

/* Container fluid - unified spacing */
.tab-pane .container-fluid {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Card containers - unified spacing */
.tab-pane .card {
  margin-bottom: 1rem;
}

.tab-pane .card-body {
  padding: 1rem !important;
}

/* Table responsive - unified width (consolidated above) */

/* Tab content headers - unified styling */
.tab-pane h4,
.tab-pane h5,
.tab-pane h6 {
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
}

/* Tab content buttons - unified spacing */
.tab-pane .btn-group:not(.table .btn-group) {
  margin-bottom: 1rem;
}

/* Tab content d-flex - exclude search/filter areas */
.tab-pane .d-flex:not(.justify-content-between) {
  margin-bottom: 1rem;
}

/* Search control bars - specific to management pages only */
#tabPane-projectManagement .search-control-bar,
#tabPane-projectList .search-control-bar,
#tabPane-influencerList .search-control-bar,
#adminMembers-pane .search-control-bar {
  margin-bottom: 0rem !important;
}

/* Fallback for influencer and admin pages */
.search-control-bar {
  margin-bottom: 0rem !important;
}

/* Force override for problematic pages */
.d-flex.justify-content-between.align-items-center.search-control-bar,
.d-flex.justify-content-between.align-items-end.search-control-bar {
  margin-bottom: 0rem !important;
}

/* Table button groups - no bottom margin */
.tab-pane .table .btn-group {
  margin-bottom: 0;
}

/* Tab content forms - unified spacing */
.tab-pane .form-control,
.tab-pane .form-select {
  margin-bottom: 0rem;
}

/* Tab content rows - unified spacing */
.tab-pane .row {
  margin-bottom: 1rem;
}

.tab-pane .row:last-child {
  margin-bottom: 0;
}

/* Tab active marker */
#mainTabs .nav-link {
  position: relative;
  padding: .4rem .6rem;
  border: none;
  background: #e0e0e0; /* 非アクティブタブの背景色 */
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  border-radius: 0 0 0 0; /* 下部のみ角丸 */
  display: block;
  color: #333;
  transition: background-color .2s ease;
}

/* Tab active marker - using actual HTML element */
#mainTabs .nav-link .tab-head-top {
  position: absolute;
  left: 0; 
  right: 0;
  top: 0px;
  height: 3px;
  border-radius: 3px 3px 0 0; /* 上部角丸、下部四角 */
  background: transparent;
  content: "";
  display: block;
  transition: background .2s ease;
}

#mainTabs .nav-link.active {
  color: #1d4ed8;
  font-weight: 500;
  background: #fff; /* アクティブタブは白背景で目立たせる */
}

#mainTabs .nav-link.active .tab-head-top {
  background: #1d4ed8; /* Blue color for active tab */
}

/* Dashboard card number styling - Updated */
.dashboard-count {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin: 0.2rem 0 !important;
  font-variant-numeric: tabular-nums !important; /* 数字の幅を統一 */
  text-align: center !important; /* センター配置 */
}

/* Table header styling - prevent line breaks */
.table th {
  white-space: nowrap !important; /* 改行を抑止 */
  font-size: 0.9rem !important; /* フォントサイズを少し小さく */
  padding: 0.5rem 0.3rem !important; /* パディングを調整 */
}


/* Container and content spacing - minimize margins */
.container-fluid {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Card body padding - unified */
.card-body {
  padding: 1rem !important;
}

/* Table responsive container - consolidated above */

/* Additional table styling for all tables - prevent line breaks (consolidated) */
table th,
table td {
  white-space: nowrap !important; /* 改行を抑止 */
  font-size: 0.9rem !important; /* フォントサイズを少し小さく */
  padding: 0.5rem 0.3rem !important; /* パディングを調整 */
}

/* Specific styling for admin members table */
#adminMembersTable th,
#adminMembersTable td {
  white-space: nowrap !important; /* 改行を抑止 */
  font-size: 0.85rem !important; /* さらに小さく */
  padding: 0.4rem 0.2rem !important; /* よりタイトなパディング */
}

/* Quick action buttons - unified sizing */
.kanri-main .card .btn {
  width: 100% !important;
  min-height: 2.5rem !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsive compact left/right padding - OUTER REGION ONLY */
@media (max-width: 992px) {
  main, .kanri-main, main.kanri-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Remove side gaps by expanding container width on small screens */
@media (max-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Keep outer padding compact */
  main, .kanri-main, main.kanri-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ドロップダウンメニューのスタイリング */
.navbar-nav .dropdown-menu {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin-top: 0.125rem;
}

.navbar-nav .dropdown-item {
  color: #212529;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: background-color 0.15s ease-in-out;
}

.navbar-nav .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
}

.navbar-nav .dropdown-item:active {
  background-color: #e9ecef;
}

.navbar-nav .dropdown-toggle::after {
  margin-left: 0.5em;
  vertical-align: 0.15em;
}

/* モバイル用アコーディオンメニューのスタイリング */
#mobileMenuAccordion .accordion-button {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  font-weight: 500;
}

#mobileMenuAccordion .accordion-button:not(.collapsed) {
  background-color: #e9ecef;
  color: #0d6efd;
}

#mobileMenuAccordion .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#mobileMenuAccordion .accordion-item {
  border: 1px solid #dee2e6;
  margin-bottom: 0.5rem;
}

#mobileMenuAccordion .list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

#mobileMenuAccordion .list-group-item:first-child {
  border-top: none;
}

#mobileMenuAccordion .list-group-item:last-child {
  border-bottom: none;
}