/* ============================================================
   SAKURA WALLET — User Dashboard v3
   ============================================================ */

/* ── 既存スタイル維持 ── */
.rejected { background-color: #fc544b19; }
.pending  { background-color: #ffc10723; }
.review   { background-color: #1d60b029; }

/* ── Design Tokens ── */
:root {
  --f:       -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --bg:      #f2f2f7;
  --sur:     #ffffff;
  --bdr:     rgba(0,0,0,0.08);
  --tx:      #1c1c1e;
  --mu:      #6e6e73;
  --ac:      #0a84ff;
  --ok:      #30d158;
  --ng:      #ff3b30;
  --nav:     #2c3e50;
  --nav-h:   rgba(255,255,255,0.09);
  --nav-w:   220px;
  --top-h:   52px;
  --r:       12px;
  --rl:      16px;
}

body.theme-dark, [data-bs-theme="dark"] body, [data-bs-theme="dark"] {
  --bg:  #1a1a2e;
  --sur: #242438;
  --bdr: rgba(255,255,255,0.09);
  --tx:  #e8e8ed;
  --mu:  #8e8e93;
  --nav: #16213e;
}

/* ── Base ── */
body { font-family: var(--f) !important; background: var(--bg) !important; color: var(--tx) !important; -webkit-font-smoothing: antialiased; }

/* Tablerの元ナビを非表示 */
header.navbar.navbar-expand-xl { display: none !important; }
.navbar-expand-xl              { display: none !important; }

/* ═══════════════ SIDEBAR ═══════════════ */
.sk-sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--nav-w); height: 100vh;
  background: var(--nav);
  display: flex; flex-direction: column;
  z-index: 1040;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}

/* ロゴ */
.sk-sidebar-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 17px 16px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sk-logo-mark {
  width: 28px; height: 28px; background: var(--ac); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.sk-logo-text { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff; white-space: nowrap; }

/* ナビ */
.sk-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 8px; }
.sk-sidebar-nav::-webkit-scrollbar { width: 0; }

/* 共通リンク */
.sk-nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 9px;
  color: rgba(255,255,255,0.62); font-size: 13px; font-weight: 500;
  font-family: var(--f); text-decoration: none;
  transition: all .15s; width: 100%; border: none;
  background: transparent; cursor: pointer; text-align: left; margin-bottom: 1px;
}
.sk-nav-link:hover, .sk-nav-link:focus { background: var(--nav-h); color: #fff; }
.sk-nav-link.sk-active { background: var(--ac) !important; color: #fff !important; }
.sk-nav-icon { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; }
.sk-nav-divider { height: 0.5px; background: rgba(255,255,255,0.1); margin: 8px 12px; }

/* バッジ */
.sk-badge {
  background: var(--ng); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 99px; padding: 1px 6px; margin-left: auto; flex-shrink: 0;
}

/* アコーディオン */
.sk-chev { margin-left: auto; font-size: 10px; transition: transform .2s; opacity: .5; flex-shrink: 0; }
.sk-acc.sk-acc-open .sk-chev { transform: rotate(90deg); opacity: 1; }
.sk-acc-body { display: none; padding: 2px 0 4px 26px; }
.sk-acc.sk-acc-open .sk-acc-body { display: block; }
.sk-sub-link {
  display: flex; align-items: center; padding: 7px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.45); text-decoration: none;
  transition: all .14s; font-family: var(--f); gap: 6px;
}
.sk-sub-link:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* ── フッター ── */
.sk-sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 11px 10px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sk-lang-sel {
  width: 100%; background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px; padding: 6px 10px;
  font-size: 12px; font-family: var(--f); cursor: pointer;
}
.sk-lang-sel option { background: #2c3e50; }
.sk-theme-row { display: flex; gap: 6px; }
.sk-theme-btn {
  flex: 1; padding: 6px 4px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 500;
  font-family: var(--f); cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all .15s;
}
.sk-theme-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sk-theme-btn.sk-theme-active { background: var(--ac); border-color: var(--ac); color: #fff; }
.sk-user-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.sk-user-chip { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sk-user-init {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ac);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sk-user-name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-user-role { font-size: 10px; color: rgba(255,255,255,0.4); }
.sk-logout-btn {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13px;
  transition: all .15s; flex-shrink: 0;
}
.sk-logout-btn:hover { background: rgba(255,59,48,.25); color: var(--ng); }

/* ═══════════════ MOBILE TOPBAR ═══════════════ */
.sk-topbar {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  height: var(--top-h); background: var(--nav); z-index: 1039;
  align-items: center; padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sk-topbar-logo { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .06em; }
.sk-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sk-topbar-lang {
  background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 7px;
  padding: 4px 8px; font-size: 12px; font-family: var(--f); cursor: pointer; max-width: 100px;
}
.sk-topbar-lang option { background: #2c3e50; }
.sk-topbar-theme {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sk-hamburger {
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(255,255,255,0.1); border: none; border-radius: 8px;
  padding: 8px; cursor: pointer;
}
.sk-hamburger span { display: block; width: 18px; height: 2px; background: rgba(255,255,255,.85); border-radius: 2px; transition: all .2s; }
.sk-hamburger.sk-hbg-open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.sk-hamburger.sk-hbg-open span:nth-child(2) { opacity: 0; }
.sk-hamburger.sk-hbg-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* オーバーレイ */
.sk-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1038; }
.sk-overlay.sk-ov-active { display: block; }

/* ═══════════════ PAGE BODY ═══════════════ */
.wrapper     { margin-left: var(--nav-w) !important; min-height: 100vh; background: var(--bg) !important; }
.page-wrapper{ padding-top: 28px !important; background: var(--bg) !important; }
.page-header { background: transparent !important; padding: 0 0 20px !important; border-bottom: none !important; }
.page-title  { font-size: 22px !important; font-weight: 700 !important; color: var(--tx) !important; letter-spacing: -.02em !important; font-family: var(--f) !important; }
.page-header.text-white .page-title { color: var(--tx) !important; }

/* ═══════════════ CARDS ═══════════════ */
.card, .soft-card { border-radius: var(--rl) !important; border: .5px solid var(--bdr) !important; box-shadow: none !important; background: var(--sur) !important; }
.card-header { background: transparent !important; border-bottom: .5px solid var(--bdr) !important; padding: 16px 20px !important; }
.card-title  { font-size: 15px !important; font-weight: 600 !important; color: var(--tx) !important; font-family: var(--f) !important; }
.card-body   { padding: 20px !important; }
.card-footer { background: transparent !important; border-top: .5px solid var(--bdr) !important; padding: 14px 20px !important; }

/* ═══════════════ TABLES ═══════════════ */
.table { font-size: 13px !important; font-family: var(--f) !important; color: var(--tx) !important; }
.table thead th { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--mu) !important; border-bottom: .5px solid var(--bdr) !important; padding: 10px 16px !important; background: transparent !important; }
.table tbody td { padding: 12px 16px !important; border-bottom: .5px solid var(--bdr) !important; vertical-align: middle !important; color: var(--tx) !important; }
.table tbody tr:hover td { background: rgba(0,0,0,.02) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }
body.theme-dark .table tbody tr:hover td { background: rgba(255,255,255,.03) !important; }

/* ═══════════════ BUTTONS ═══════════════ */
.btn { font-family: var(--f) !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 9px !important; padding: 7px 16px !important; transition: all .16s !important; }
.btn-primary { background: var(--ac) !important; border-color: var(--ac) !important; color: #fff !important; }
.btn-primary:hover { background: #0066cc !important; border-color: #0066cc !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10,132,255,.28) !important; }
.btn-success { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.btn-danger  { background: var(--ng) !important; border-color: var(--ng) !important; color: #fff !important; }
.btn-outline-primary { color: var(--ac) !important; border-color: rgba(10,132,255,.3) !important; background: transparent !important; }
.btn-outline-primary:hover { background: rgba(10,132,255,.08) !important; }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; border-radius: 7px !important; }
.btn-lg { padding: 11px 24px !important; font-size: 15px !important; border-radius: 12px !important; }

/* ═══════════════ FORMS ═══════════════ */
.form-control, .form-select { font-family: var(--f) !important; font-size: 14px !important; border-radius: 10px !important; border: 1px solid var(--bdr) !important; padding: 9px 14px !important; color: var(--tx) !important; background: var(--sur) !important; }
.form-control:focus, .form-select:focus { border-color: var(--ac) !important; box-shadow: 0 0 0 3px rgba(10,132,255,.12) !important; outline: none !important; }
.form-label { font-size: 13px !important; font-weight: 500 !important; color: var(--tx) !important; margin-bottom: 6px !important; font-family: var(--f) !important; }

/* ═══════════════ BADGES ═══════════════ */
.badge { font-family: var(--f) !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 6px !important; padding: 3px 8px !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--ng) !important; }
.text-muted   { color: var(--mu) !important; }

/* ═══════════════ MODALS ═══════════════ */
.modal-content { border-radius: var(--rl) !important; border: none !important; box-shadow: 0 24px 64px rgba(0,0,0,.18) !important; font-family: var(--f) !important; background: var(--sur) !important; }
.modal-header  { border-bottom: .5px solid var(--bdr) !important; padding: 18px 22px !important; }
.modal-title   { font-size: 16px !important; font-weight: 600 !important; color: var(--tx) !important; }
.modal-body    { padding: 20px 22px !important; color: var(--tx) !important; }
.modal-footer  { border-top: .5px solid var(--bdr) !important; padding: 14px 22px !important; }

/* ═══════════════ ALERTS ═══════════════ */
.alert { border-radius: var(--r) !important; border: none !important; font-family: var(--f) !important; font-size: 14px !important; padding: 14px 18px !important; }
.alert-success { background: rgba(48,209,88,.1)  !important; color: #1a6b2c !important; }
.alert-danger  { background: rgba(255,59,48,.1)  !important; color: #c0392b !important; }
.alert-warning { background: rgba(255,159,10,.1) !important; color: #8a5d00 !important; }
.alert-info    { background: rgba(10,132,255,.08)!important; color: #0056b3 !important; }

/* ═══════════════ DARK MODE overrides ═══════════════ */
body.theme-dark .card,
body.theme-dark .soft-card  { background: var(--sur) !important; border-color: var(--bdr) !important; }
body.theme-dark .modal-content { background: var(--sur) !important; }
body.theme-dark .form-control,
body.theme-dark .form-select  { border-color: rgba(255,255,255,.15) !important; background: rgba(255,255,255,.06) !important; color: var(--tx) !important; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 991px) {
  .sk-sidebar {
    transform: translateX(-100%);
    top: var(--top-h); height: calc(100vh - var(--top-h));
  }
  .sk-sidebar.sk-mob-open { transform: translateX(0); }
  .sk-topbar  { display: flex; }
  .wrapper    { margin-left: 0 !important; padding-top: var(--top-h) !important; }
  .page-wrapper { padding-top: 16px !important; }
}
@media (max-width: 575px) {
  .card-body { padding: 14px !important; }
  .table thead th, .table tbody td { padding: 10px 12px !important; }
  .page-title { font-size: 18px !important; }
}

/* ═══════════════════════════════════════════
   テーブル横スクロール修正
   （dashboard.blade.phpのインラインCSSを上書き）
═══════════════════════════════════════════ */

/* カード内のtable-responsiveを横スクロール可能に */
.card .table-responsive,
.soft-card .table-responsive,
.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーをiOSでも表示 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

/* スクロールバースタイル（WebKit） */
.table-responsive::-webkit-scrollbar {
  height: 4px;
}
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 4px;
}

/* カードのborder-radiusをtable-responsiveの角に適用 */
.card .table-responsive:last-child,
.soft-card .table-responsive:last-child {
  border-radius: 0 0 var(--rl) var(--rl);
}

/* テーブル自体は最小幅を確保（横スクロールを発生させる） */
.table-responsive .table {
  min-width: 600px;
  margin-bottom: 0 !important;
}

/* モバイルでスクロール可能であることをユーザーに示す */
@media (max-width: 768px) {
  .table-responsive::after {
    content: '';
    display: block;
  }
}