/*
 * SupportCandy を濃紺の見た目に合わせる。
 *
 * 地・文字・主色などは SupportCandy の「外観」設定（サイトの色に合わせ済み）で決まる。
 * ここでは、SupportCandy が CSS に直接書いている色（白い地、黒い文字、主色の上の白い文字）だけを上書きする。
 * SupportCandy の指定は !important を含むため、#wpsc-container / .wpsc-modal を付けて詳細度で勝つ。
 */

/* ---------- 枠と文字 ---------- */
#wpsc-container .wpsc-shortcode-container {
	border-color: var(--wp--preset--color--line) !important;
	border-radius: var(--nf-radius, 16px);
}

#wpsc-container .wpsc-tff-label,
#wpsc-container .wpsc-input-group .label-container,
#wpsc-container .wpsc-it-subject-container h2,
#wpsc-container .wpsc-it-mob-widget-trigger-btn,
#wpsc-container .wpsc-it-mob-widget-trigger-btn h2,
.wpsc-modal .wpsc-input-group .label-container {
	color: var(--wp--preset--color--contrast) !important;
}

/* リンクは本文の文字と色が近いので、下線で見分ける（SupportCandy は下線を消している） */
#wpsc-container .wpsc-link,
.wpsc-modal .wpsc-link {
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}

#wpsc-container .wpsc-link:hover,
.wpsc-modal .wpsc-link:hover {
	text-decoration: none !important;
}

/* ログイン画面の欄は幅 300px 固定。狭い画面では枠に収める */
#wpsc-container .wpsc-auth-container .auth-inner-container {
	width: min(300px, 100%);
}

#wpsc-container .wpsc-auth-container input {
	box-sizing: border-box;
	max-width: 100%;
}

/* ---------- 入力欄 ----------
   SupportCandy の同じ詳細度の !important（後から出る）に勝つため、body を付ける。 */
body #wpsc-container input[type=text],
body #wpsc-container input[type=text]:focus,
body #wpsc-container input[type=email],
body #wpsc-container input[type=email]:focus,
body #wpsc-container input[type=password],
body #wpsc-container input[type=password]:focus,
body #wpsc-container input[type=number],
body #wpsc-container input[type=number]:focus,
body #wpsc-container select,
body #wpsc-container select:focus,
body #wpsc-container textarea,
body #wpsc-container textarea:focus,
body #wpsc-container .wpsc-search .search-field,
body .wpsc-modal input[type=text],
body .wpsc-modal input[type=text]:focus,
body .wpsc-modal input[type=email],
body .wpsc-modal input[type=password],
body .wpsc-modal select,
body .wpsc-modal textarea {
	background-color: var(--wp--preset--color--base-2) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 10px;
	color: var(--wp--preset--color--contrast) !important;
}

body #wpsc-container :is(input, textarea):focus,
body .wpsc-modal :is(input, textarea):focus {
	border-color: var(--wp--preset--color--sub) !important;
	outline: none;
}

body #wpsc-container ::placeholder,
body .wpsc-modal ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

body #wpsc-container .wpsc-search input {
	color: var(--wp--preset--color--contrast) !important;
}

body #wpsc-container .checkbox-container label::before,
body #wpsc-container .radio-container input + label::before,
body .wpsc-modal .checkbox-container label::before,
body .wpsc-modal .radio-container input + label::before {
	background-color: var(--wp--preset--color--base-2) !important;
	border-color: var(--wp--preset--color--sub) !important;
}

/* チェックとラジオの印（SupportCandy は青。濃紺の地では見えにくい） */
body #wpsc-container .checkbox-container input:checked + label::after,
body .wpsc-modal .checkbox-container input:checked + label::after {
	border-color: var(--wp--preset--color--accent) !important;
}

body #wpsc-container .radio-container input + label::after,
body .wpsc-modal .radio-container input + label::after {
	background: var(--wp--preset--color--accent) !important;
}

/* 選択欄（select2。一覧は body の直下に出る） */
#wpsc-container .select2-container--default .select2-selection,
.wpsc-modal .select2-container--default .select2-selection {
	background-color: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
}

#wpsc-container .select2-selection__rendered,
.wpsc-modal .select2-selection__rendered {
	color: var(--wp--preset--color--contrast) !important;
}

#wpsc-container .select2-selection__placeholder,
.wpsc-modal .select2-selection__placeholder {
	color: var(--wp--preset--color--muted) !important;
}

#wpsc-container .select2-selection__arrow b {
	border-top-color: var(--wp--preset--color--sub) !important;
}

.select2-container--open .select2-dropdown {
	background-color: var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.select2-container--open .select2-search__field {
	background-color: var(--wp--preset--color--base-2);
	border-color: var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--contrast);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

/* ---------- ボタン（主色＝アイボリーの上は濃紺の文字） ---------- */
#wpsc-container .wpsc-button.primary,
.wpsc-modal .wpsc-button.primary,
#wpsc-container .wpsc-add-ticket-tag,
.wpsc-modal .wpsc-add-ticket-tag {
	color: var(--wp--preset--color--on-accent) !important;
	border-radius: 10px;
	font-weight: 700;
}

#wpsc-container .wpsc-button.secondary,
.wpsc-modal .wpsc-button.secondary,
#wpsc-container .wpsc-close-ticket-tag,
.wpsc-modal .wpsc-close-ticket-tag {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 10px;
}

/* ---------- ログイン後のメニュー・一覧（地が白いものを濃紺に） ---------- */
#wpsc-container .wpsc-humbargar,
#wpsc-container .wpsc-humbargar-title {
	color: var(--wp--preset--color--on-accent) !important;
}

.wpsc-humbargar-menu,
.wpsc-humbargar-menu-item,
#wpsc-container .wpsc-setting-nav,
#wpsc-container .wpsc-popover-menu-item,
.wpsc-popover-menu-item,
#wpsc-container .wpsc-ap-menu-container,
#wpsc-container .wpsc-ap-nav,
#wpsc-container .wpsc-toggle-btn div,
#wpsc-container .wpsc-switch-editor {
	background-color: var(--wp--preset--color--card) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wpsc-humbargar-close {
	color: var(--wp--preset--color--contrast) !important;
}

.wpsc-humbargar-menu-item:hover,
.wpsc-humbargar-menu-item.active,
#wpsc-container .wpsc-setting-nav:hover,
#wpsc-container .wpsc-setting-nav.active,
.wpsc-popover-menu-item:hover,
#wpsc-container .wpsc-ap-nav.active,
#wpsc-container .wpsc-ap-nav:hover {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
}

#wpsc-container .wpsc-up-container,
#wpsc-container .wpsc-dash-widget {
	background-color: var(--wp--preset--color--base-2) !important;
}

/* チケット一覧：SupportCandy が列ごとに入れる最小幅（style 属性）を外し、列幅は内容と表の幅で決める。
   合計の最小幅が表の幅を超えて横スクロールが出るため。 */
#wpsc-container .wpsc-ticket-list-tbl :is(th, td) {
	min-width: 0 !important;
}