@charset "UTF-8";

:root {
  --yorusuki-color:#D65BD1;
  --yorusuki: 214, 91, 209;          /* base */
  --yorusuki-light: 222, 114, 218;   /* hover */
  --yorusuki-dark: 201, 79, 196;     /* active */
}


.yorusuki-f-color {
    color: var(--yorusuki-color) !important
}
.btn-yorusuki {
    background-color: rgba(var(--yorusuki), 1) !important;
    border: 1px solid rgba(var(--yorusuki), 1) !important;
}
.btn-yorusuki:hover,
.btn-yorusuki:active,
.btn-yorusuki.active,
.btn-yorusuki.show,
.btn-yorusuki:checked,
.btn-yorusuki:focus,
.btn-yorusuki:focus-visible,
.btn-yorusuki.disabled {
  background-color: rgba(var(--yorusuki-light), 1) !important;
  border-color: rgba(var(--yorusuki-light), 1) !important;
  transition: var(--app-transition);
}
.btn-yorusuki {
    --bs-btn-color: #fff;
    --bs-btn-bg: #D65BD1;
    --bs-btn-border-color: #D65BD1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #de72da;
    --bs-btn-hover-border-color: #dc6bd8;
    --bs-btn-focus-shadow-rgb: 214, 91, 209;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c94fc4;
    --bs-btn-active-border-color: #c94fc4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #D65BD1;
    --bs-btn-disabled-border-color: #D65BD1;
}
.text-bg-info {
  color: var(--white) !important;
}
.text-bg-warning {
  color: var(--white) !important;
}
/*
:root {
 --yorusuki-main-color: #D65BD1;
}
.btn-yorusuki {
    --bs-btn-color: #fff;
    --bs-btn-bg: #D65BD1;
    --bs-btn-border-color: #D65BD1;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #de72da;
    --bs-btn-hover-border-color: #dc6bd8;

    --bs-btn-focus-shadow-rgb: 214, 91, 209;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c94fc4;
    --bs-btn-active-border-color: #c94fc4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #D65BD1;
    --bs-btn-disabled-border-color: #D65BD1;
}
*/

.icon-muted {
  opacity: 0.25;
  color: #6c757d !important; /* Bootstrapのsecondary */
  pointer-events: none;     /* クリック不可 */
  filter: grayscale(100%);
}
th a.fw-semibold { color: inherit; }

.loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-box{
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  text-align: center;
  min-width: 220px;
}


/* ソート可能な列はカーソルと薄いアイコンで気づける */
.sort-link {
  color: inherit;
  cursor: pointer;
}

.sort-link .sort-icon {
  opacity: .35;           /* 未ソートは薄く */
  transition: opacity .15s ease;
}

.sort-link:hover .sort-icon {
  opacity: .75;           /* hoverで少し濃く */
}

/* ソート中の列は強調 */
th.th-sorted {
  background: rgba(13,110,253,.06); /* bootstrap primary薄色 */
}

.sort-link.is-sorted {
  font-weight: 600;
}

.sort-link.is-sorted .sort-icon {
  opacity: 1;             /* ソート中は濃く */
}


/* 無効行の背景 */
tr.is-disabled {
  background-color: rgba(108,117,125,.10); /* secondary薄 */
}

/* Action列「以外」をグレーアウト */
tr.is-disabled td:not(.td-action),
tr.is-disabled td:not(.td-action) * {
  color: rgba(108,117,125,.85) !important;
}

/* Action列以外のリンク・アイコンだけ薄く */
tr.is-disabled td:not(.td-action) a,
tr.is-disabled td:not(.td-action) i {
  opacity: .55;
}

/* Action列は完全に通常表示 */
tr.is-disabled td.td-action,
tr.is-disabled td.td-action * {
  opacity: 1 !important;
  color: #fff !important;
}