/*
 * cast 画面の個別スタイル。共通のトークン・部品は site.css を使う。単位は rem (16px = 1rem)。
 * このファイルはお客様向けレイアウトでも読み込まれるので、セレクタは必ず .dh-cast-* / .dh-reward でスコープする。
 * 枠は site.css の型 (.dh-panel / .dh-card / .dh-card-grid) を使い、ここでは並べ方と中身の調整だけを書く。
 */

/* ---------- 共通: ページ見出し・補足 ---------- */
.dh-cast-page-title {
    margin: 0 0 1.5rem;
}

.dh-cast-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.dh-cast-page-head .dh-cast-page-title {
    margin: 0;
}

.dh-cast-note {
    color: var(--dh-muted);
    font-size: var(--dh-fs-small);
}

.dh-cast-note p {
    margin: 0 0 0.25rem;
}

.dh-cast-subtitle {
    margin: 2rem 0 0.75rem;
    font-size: var(--dh-fs-h3);
}

.dh-cast-empty {
    margin: 0;
    color: var(--dh-muted);
    text-align: center;
}

/* ---------- ログイン ---------- */
.dh-cast-login {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.dh-cast-login__title {
    margin: 0 0 1.5rem;
    text-align: center;
}

.dh-cast-login__actions {
    margin-top: 2rem;
}

/* ---------- ホーム (ダッシュボード) ---------- */
.dh-cast-home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dh-cast-home > .dh-panel + .dh-panel {
    margin-top: 0;
}

.dh-cast-home .notice-warning {
    margin: 0;
}

.dh-cast-notices__item {
    margin: 0;
    padding: 0.75rem 0;
    border-top: 0.0625rem solid var(--dh-border);
}

.dh-cast-notices__item:first-child {
    padding-top: 0;
    border-top: none;
}

.dh-cast-notices__item:last-child {
    padding-bottom: 0;
}

.dh-card-grid.dh-cast-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dh-cast-stat__label {
    color: var(--dh-muted);
    font-size: var(--dh-fs-small);
    font-weight: 700;
}

.dh-cast-stat__value {
    margin-top: 0.25rem;
    color: var(--dh-pink);
    font-size: var(--dh-fs-h2);
    font-weight: 700;
    line-height: 1.2;
}

.dh-cast-stat__unit {
    margin-left: 0.125rem;
    color: var(--dh-foreground-thin);
    font-size: var(--dh-fs-small);
}

@media screen and (max-width: 61.9375rem) {
    .dh-card-grid.dh-cast-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 47.9375rem) {
    .dh-card-grid.dh-cast-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 売上の内訳 (layouts/all_reward, price_reward, tip_price_reward, accordion_transfer) ---------- */
.dh-reward {
    margin: 0;
    padding: 0 !important;
    list-style: none;
}

.dh-reward .menu__item,
.dh-reward .menu__item_all {
    overflow: hidden;
    margin: 0;
    border-radius: var(--dh-radius-md);
    background: var(--dh-background);
    color: var(--dh-foreground-thin);
}

.dh-reward .menu__item_all {
    background: var(--dh-pink-light);
    cursor: default;
}

.dh-reward .menu__item__link,
.dh-reward .menu__item__link_all {
    height: auto;
    padding: var(--dh-pad-card);
    color: var(--dh-foreground-thin);
    line-height: 1.4;
    text-decoration: none;
}

.dh-reward .menu__item__link {
    padding-right: 4rem;
}

.dh-reward .menu__item__link > .row,
.dh-reward .menu__item__link_all > .row {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
}

.dh-reward .menu__item__link > .row > [class*="col"],
.dh-reward .menu__item__link_all > .row > [class*="col"] {
    min-width: 0;
    padding: 0 0.25rem;
}

.dh-reward small {
    color: var(--dh-muted);
    font-size: var(--dh-fs-caption);
    font-weight: 700;
}

.dh-reward h4 {
    margin: 0.25rem 0 0;
    color: var(--dh-foreground-thin);
    font-size: var(--dh-fs-h3);
    white-space: nowrap;
}

.dh-reward .menu__item_all h4 {
    color: var(--dh-pink);
}

.dh-reward .math-symbol,
.dh-reward h5.math-symbol {
    margin: 0;
    color: var(--dh-muted);
    font-size: var(--dh-fs-h3);
    line-height: 1.4;
}

/* 開閉ボタン (+ / -) */
.dh-reward .menu__item__link::after {
    top: 50%;
    right: var(--dh-pad-card);
    width: 2rem;
    height: 2rem;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-pink);
    color: var(--dh-white);
    font-size: var(--dh-fs-small);
    line-height: 2rem;
    transform: translateY(-50%);
}

.dh-reward .submenu {
    margin: 0;
    padding: 0 var(--dh-pad-card) var(--dh-pad-card) !important;
    background: var(--dh-white);
    list-style: none;
}

.dh-reward .submenu__item {
    margin: 0;
    padding: 0.75rem 0;
    color: var(--dh-foreground);
    font-size: var(--dh-fs-small);
}

.dh-reward .submenu__item_border {
    border-bottom: 0.0625rem solid var(--dh-border);
}

.dh-reward .submenu__item:first-child {
    color: var(--dh-muted);
    font-weight: 700;
}

.dh-reward .submenu__item:last-child {
    border-bottom: none;
    font-weight: 700;
}

.dh-reward__line {
    line-height: 1.8;
}

.dh-reward__section-title {
    border-top: 0.0625rem solid var(--dh-border);
}

.dh-reward__divider {
    border-top: 0.0625rem solid var(--dh-border);
}

/* ---------- 売上一覧 (月の切り替え) ---------- */
.dh-cast-month {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dh-cast-month .btn {
    padding: 0.25rem 1rem;
}

/* ---------- 請求書の作成・確認・送信完了 ---------- */
.dh-cast-bill {
    max-width: 48rem;
}

.dh-cast-bill__note {
    padding: var(--dh-pad-card);
    border-radius: var(--dh-radius-md);
    background: var(--dh-background);
    color: var(--dh-foreground-thin);
    font-size: var(--dh-fs-small);
}

.dh-cast-bill__fields {
    margin-top: 1.5rem;
}

.dh-cast-bill__fields .control-label {
    padding-top: 0.625rem;
}

.dh-cast-bill__unit {
    align-self: center;
    font-weight: 700;
}

.dh-cast-bill__radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.dh-cast-bill__radio label {
    margin: 0;
    font-weight: 500;
}

.dh-cast-bill__actions {
    margin-top: 1rem;
    text-align: center;
}

.dh-cast-confirm__row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    border-bottom: 0.0625rem solid var(--dh-border);
}

.dh-cast-confirm__row:first-child {
    padding-top: 0;
}

.dh-cast-confirm__label {
    color: var(--dh-foreground-thin);
    font-weight: 700;
}

.dh-cast-confirm__value {
    overflow-wrap: anywhere;
}

.dh-cast-confirm__note {
    margin: 1rem 0 0;
}

.dh-cast-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.dh-cast-confirm__actions form {
    margin: 0;
}

.dh-cast-done {
    text-align: center;
}

.dh-cast-done .dh-cast-page-title {
    margin-bottom: 2rem;
}

@media screen and (max-width: 35.9375rem) {
    .dh-cast-confirm__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }
}

/* ---------- 注文・チャット 一覧 ---------- */
.dh-cast-applies__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.dh-cast-applies__toolbar .pagination {
    margin: 0;
}

/* ---------- 振り込み 一覧 ---------- */
.dh-cast-transfers__name {
    margin-bottom: 1rem;
    color: var(--dh-foreground-thin);
    font-weight: 700;
}

.dh-cast-transfers .table-responsive {
    margin: 0;
}

.dh-cast-table {
    margin: 0;
    font-size: var(--dh-fs-small);
    white-space: nowrap;
}

/* ---------- チャット ---------- */
.dh-cast-chat {
    width: 100%;
}

/* ---------- プロフィール編集 (share/companies/edit) ---------- */
.dh-cast-profile {
    max-width: none;
    padding: 0;
}

.dh-cast-profile > .notice-warning,
.dh-cast-profile > .alert {
    margin-bottom: 1.5rem;
}

.dh-cast-profile__section .dh-panel__title {
    padding-bottom: 0;
    border-bottom: none;
}

.dh-cast-profile__section .form-group:last-child {
    margin-bottom: 0;
}

.dh-cast-profile__section .row + .row {
    margin-top: 1rem;
}

.dh-cast-profile__section .control-label {
    padding-top: 0.625rem;
}

.dh-cast-profile__password-toggle {
    margin: 1.5rem 0 0;
}

.dh-cast-profile__images {
    row-gap: 1.5rem;
}

.dh-cast-profile__images > [class*="col"] > .text-center {
    margin-top: 0.5rem;
    padding: var(--dh-pad-card);
    border-radius: var(--dh-radius-md);
    background: var(--dh-background);
}

.dh-cast-profile__images .img-size-200 {
    max-width: 100%;
    margin-top: 0.75rem !important;
    border-radius: var(--dh-radius-md);
    object-fit: cover;
}

.dh-cast-profile__images input[type="file"],
.dh-cast-profile__images .row {
    max-width: 100%;
    margin: 0;
    font-size: var(--dh-fs-small);
}

.dh-cast-profile input[type="file"]::file-selector-button {
    margin-right: 0.5rem;
    padding: 0.25rem 0.875rem;
    border: 0.0625rem solid var(--dh-pink);
    border-radius: var(--dh-radius-pill);
    background: var(--dh-white);
    color: var(--dh-pink);
    font-weight: 700;
    cursor: pointer;
}

/* 受け取り方法・資格のチェックボックス: [□ ラベル] を縦に並べる */
.dh-cast-profile__checks {
    display: grid;
    flex: 1 1 0;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 12rem;
    margin: 0;
    padding: 0.625rem 0.9375rem 0;
}

.dh-cast-profile__checks > label {
    grid-column: 2;
    max-width: none;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

.dh-cast-profile__checks > input[type="checkbox"] {
    grid-column: 1;
    width: 1.125rem;
    max-width: none;
    height: 1.125rem;
    margin: 0;
    padding: 0;
}

.dh-cast-profile__address {
    flex: 1 1 0;
    min-width: 12rem;
    padding: 0 0.9375rem;
}

.dh-cast-profile__address .dh-cast-note {
    margin: 0.5rem 0 0;
}

@media screen and (max-width: 47.9375rem) {
    .dh-cast-profile__checks,
    .dh-cast-profile__address {
        flex-basis: 100%;
    }
}

/* 値段と「円」はスマホでも横並びにする */
@media screen and (max-width: 35.9375rem) {
    .dh-cast-bill__price-row {
        align-items: center;
    }

    .dh-cast-bill__price-row > .col-sm-6 {
        flex: 1 1 0;
        min-width: 0;
    }

    .dh-cast-bill__price-row > .dh-cast-bill__unit {
        flex: 0 0 auto;
        width: auto;
        padding-left: 0;
    }
}

/* 売上の内訳: スマホでも計算式の記号 (＋ ＝ ー) と「売上」の列を出す (salary.css は 576px 以下で隠している) */
@media screen and (max-width: 36rem) {
    .dh-reward .math-symbol,
    .dh-reward .profit-sm {
        display: block !important;
    }

    .dh-reward .math-symbol {
        margin: 0;
        font-size: var(--dh-fs-body);
        line-height: 2.5rem;
    }

    /* 列の幅は中身に合わせ、ラベルを折り返さない */
    .dh-reward .row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .dh-reward .row > [class*="col-"] {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        padding-right: 0.125rem;
        padding-left: 0.125rem;
    }

    .dh-reward .row > [class*="col-"]:has(> .math-symbol) {
        flex: 0 0 auto;
    }

    .dh-reward small {
        white-space: nowrap;
    }
}