/* ============================================================================
   USsoft Puerto — 販売管理システム
   テーマ: ネイビー / ライト・ダーク両対応
   ----------------------------------------------------------------------------
   ・独自トークン（--psl-*）でアプリ側の配色を定義
   ・IgniteUI の配色は --ig-primary-500 / --ig-surface-500 / --ig-gray-* を
     上書きすることで派生スケール（50〜900）ごとネイビーへ寄せる
     （fluent テーマは hsl(from var(--ig-primary-500) …) で全階調を導出する）
   ・html[data-theme="light"|"dark"] を JS（wwwroot/js/psl.js）が付与する
   ========================================================================== */

/* ─── ネイビーパレット（テーマ非依存の生の色） ───────────────────────────── */
:root {
    --psl-navy-950: #050D1E;
    --psl-navy-900: #0A1731;
    --psl-navy-850: #0D1E3F;
    --psl-navy-800: #11284F;
    --psl-navy-700: #163566;
    --psl-navy-600: #1C4382;
    --psl-navy-500: #24539E;
    --psl-navy-400: #4272B8;
    --psl-navy-300: #6D95CE;
    --psl-navy-200: #A3BEE3;
    --psl-navy-100: #CFDEF2;
    --psl-navy-50:  #EDF3FB;

    --psl-accent:      #C9A227;   /* ゴールド系アクセント（ネイビーの補色） */
    --psl-danger:      #C62828;
    --psl-danger-soft: #EF5350;
    --psl-success:     #2E7D32;

    --psl-font-sans: 'Noto Sans JP', 'Segoe UI', 'Yu Gothic UI', system-ui, sans-serif;
    --psl-font-num:  'Roboto Mono', 'Consolas', ui-monospace, monospace;

    --psl-radius:      10px;
    --psl-radius-sm:   6px;
    --psl-transition:  180ms cubic-bezier(.4, 0, .2, 1);
}

/* ─── ライトモード ───────────────────────────────────────────────────────── */
:root,
html[data-theme="light"] {
    color-scheme: light;

    --psl-bg-0:      #EEF2F9;   /* ページ背景 */
    --psl-bg-1:      #FFFFFF;   /* カード / パネル */
    --psl-bg-2:      #F6F8FC;   /* 一段落とした面 */
    --psl-bg-inset:  #E6ECF6;

    --psl-text-hi:    var(--psl-navy-900);
    --psl-text:       #2A3B54;
    --psl-text-muted: #647796;
    --psl-text-dim:   #93A3BD;
    --psl-text-on-brand: #FFFFFF;

    --psl-border:       #D5DEEC;
    --psl-border-strong:#B9C7DD;

    --psl-brand:       var(--psl-navy-600);
    --psl-brand-hover: var(--psl-navy-700);
    --psl-brand-soft:  var(--psl-navy-50);

    --psl-shadow-card: 0 1px 2px rgba(10, 23, 49, .06),
                       0 12px 32px rgba(10, 23, 49, .10);
    --psl-shadow-pop:  0 8px 24px rgba(10, 23, 49, .16);

    /* ログイン画面の背景装飾 */
    --psl-glow-1: rgba(28, 67, 130, .13);
    --psl-glow-2: rgba(201, 162, 39, .09);
    --psl-dot:    rgba(28, 67, 130, .07);

    /* IgniteUI (fluent / light) 上書き */
    --ig-primary-500: #1C4382;
    --ig-secondary-500: #647796;
    --ig-surface-500: #FFFFFF;
}

/* ─── ダークモード ───────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;

    --psl-bg-0:      var(--psl-navy-950);
    --psl-bg-1:      #0B1A34;
    --psl-bg-2:      #10233F;
    --psl-bg-inset:  #081428;

    --psl-text-hi:    #E9EFF9;
    --psl-text:       #C3D0E4;
    --psl-text-muted: #8496B1;
    --psl-text-dim:   #5C6E8C;
    --psl-text-on-brand: #FFFFFF;

    --psl-border:       #1E3457;
    --psl-border-strong:#2B4570;

    --psl-brand:       #4C86E8;
    --psl-brand-hover: #6B9DF0;
    --psl-brand-soft:  rgba(76, 134, 232, .12);

    --psl-danger-soft: #FF8A80;

    --psl-shadow-card: 0 1px 2px rgba(0, 0, 0, .5),
                       0 18px 48px rgba(0, 0, 0, .55);
    --psl-shadow-pop:  0 10px 30px rgba(0, 0, 0, .6);

    /* ログイン画面の背景装飾 */
    --psl-glow-1: rgba(76, 134, 232, .17);
    --psl-glow-2: rgba(201, 162, 39, .07);
    --psl-dot:    rgba(120, 160, 220, .06);

    /* IgniteUI (fluent / dark) 上書き */
    --ig-primary-500: #4C86E8;
    --ig-secondary-500: #8496B1;
    --ig-surface-500: #0B1A34;
}

/* ─── ベース ─────────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--psl-bg-0);
    color: var(--psl-text);
    font-family: var(--psl-font-sans);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--psl-transition), color var(--psl-transition);
}

h1, h2, h3, h4 {
    color: var(--psl-text-hi);
    font-weight: 600;
    letter-spacing: .01em;
}

h1:focus {
    outline: none;
}

a {
    color: var(--psl-brand);
    text-decoration: none;
}

a:hover {
    color: var(--psl-brand-hover);
    text-decoration: underline;
}

/* 数値・コード・IP などの等幅表示 */
.psl-num {
    font-family: var(--psl-font-num);
    font-variant-numeric: tabular-nums;
}

/* ─── フォーム検証（Blazor 既定クラスの配色合わせ） ───────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--psl-success);
}

.invalid {
    outline: 1px solid var(--psl-danger);
}

.validation-message {
    color: var(--psl-danger);
}

/* ─── エラーバウンダリ ───────────────────────────────────────────────────── */
.blazor-error-boundary {
    background: var(--psl-danger);
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: var(--psl-radius-sm);
}

.blazor-error-boundary::after {
    content: "エラーが発生しました。";
}

/* ============================================================================
   IgniteUI コンポーネント向けスタイル
   ----------------------------------------------------------------------------
   Blazor の CSS 分離（*.razor.css）はコンポーネントが描画する要素に
   スコープ属性を付与しないため、IgniteUI コンポーネント（IgbCard / IgbButton /
   IgbDivider / IgbCircularProgress）を対象にするルールはここへ置く。
   素の HTML 要素向けのスタイルは各 *.razor.css 側に残している。
   ========================================================================== */

/* ─── ログインカード ─────────────────────────────────────────────────────── */
.psl-login-card {
    position: relative;
    width: 100%;
    max-width: 432px;
    overflow: hidden;
    --ig-card-background: var(--psl-bg-1);
    --ig-card-border-radius: var(--psl-radius);
    --ig-card-content-text-color: var(--psl-text);
    border: 1px solid var(--psl-border);
    border-radius: var(--psl-radius);
    box-shadow: var(--psl-shadow-card);
}

/* ─── ラベル付きセパレータの罫線（IgbDivider） ───────────────────────────── */
.psl-sep-line {
    flex: 1;
    --ig-divider-color: var(--psl-border);
}

/* ─── 読み込みスピナー（IgbCircularProgress） ────────────────────────────── */
.psl-spinner {
    --ig-circular-bar-diameter: 42px;
    --ig-circular-bar-track-color: var(--psl-border);
    --ig-circular-bar-fill-color-default: var(--psl-brand);
}

/* ─── テーマ切り替えボタン（IgbButton / Flat） ───────────────────────────── */
/* --ig-size: 1 = small / 2 = medium / 3 = large */
.psl-theme-toggle {
    --ig-size: 1;
    --ig-flat-button-foreground: var(--psl-text-muted);
    --ig-flat-button-hover-background: var(--psl-brand-soft);
    --ig-flat-button-hover-foreground: var(--psl-brand);
    --ig-flat-button-focus-foreground: var(--psl-brand);
    --ig-flat-button-focus-background: var(--psl-brand-soft);
}

/* ─── サインアウトボタン（IgbButton / Outlined） ─────────────────────────── */
.psl-logout {
    --ig-size: 1;
    --ig-outlined-button-foreground: rgba(255, 255, 255, .82);
    --ig-outlined-button-border-color: rgba(255, 255, 255, .3);
    --ig-outlined-button-hover-background: rgba(255, 255, 255, .12);
    --ig-outlined-button-hover-foreground: #FFFFFF;
    --ig-outlined-button-focus-foreground: #FFFFFF;
    --ig-outlined-button-focus-background: rgba(255, 255, 255, .12);
}

/* ─── 検索ツールバー（IgbInput / IgbButton） ─────────────────────────────── */
.psl-search-input {
    min-width: 260px;
    --ig-input-group-idle-text-color: var(--psl-text-muted);
    --ig-input-group-filled-text-color: var(--psl-text-hi);
    --ig-input-group-focused-text-color: var(--psl-brand);
    --ig-input-group-border-color: var(--psl-border);
    --ig-input-group-hover-border-color: var(--psl-border-strong);
    --ig-input-group-focused-border-color: var(--psl-brand);
    --ig-input-group-box-background: var(--psl-bg-1);
}

.psl-btn-search {
    --ig-contained-button-background: var(--psl-brand);
    --ig-contained-button-foreground: var(--psl-text-on-brand);
    --ig-contained-button-hover-background: var(--psl-brand-hover);
    --ig-contained-button-hover-foreground: var(--psl-text-on-brand);
    --ig-contained-button-focus-background: var(--psl-brand-hover);
}

.psl-btn-clear {
    --ig-flat-button-foreground: var(--psl-text-muted);
    --ig-flat-button-hover-background: var(--psl-brand-soft);
    --ig-flat-button-hover-foreground: var(--psl-brand);
}

.psl-btn-new {
    --ig-contained-button-background: var(--psl-brand);
    --ig-contained-button-foreground: var(--psl-text-on-brand);
    --ig-contained-button-hover-background: var(--psl-brand-hover);
    --ig-contained-button-hover-foreground: var(--psl-text-on-brand);
    --ig-contained-button-focus-background: var(--psl-brand-hover);
}

.psl-btn-edit,
.psl-btn-quote,
.psl-btn-print,
.psl-btn-month {
    --ig-outlined-button-foreground: var(--psl-brand);
    --ig-outlined-button-border-color: var(--psl-border-strong);
    --ig-outlined-button-hover-background: var(--psl-brand-soft);
    --ig-outlined-button-hover-foreground: var(--psl-brand-hover);
    --ig-outlined-button-focus-background: var(--psl-brand-soft);
}

/* 削除ボタン（ツールバー）: 破壊的操作なので危険色で区別する */
.psl-btn-delete {
    --ig-outlined-button-foreground: var(--psl-danger-soft);
    --ig-outlined-button-border-color: var(--psl-border-strong);
    --ig-outlined-button-hover-background: color-mix(in srgb, var(--psl-danger-soft) 12%, transparent);
    --ig-outlined-button-hover-foreground: var(--psl-danger-soft);
    --ig-outlined-button-focus-background: color-mix(in srgb, var(--psl-danger-soft) 12%, transparent);
}

/* ─── 新規作成 / 編集ダイアログ ───────────────────────────────────────────── */
.psl-dialog {
    --ig-dialog-background: var(--psl-bg-1);
    --ig-dialog-border-color: var(--psl-border);
    --ig-dialog-border-radius: var(--psl-radius);
    --ig-dialog-title-color: var(--psl-text-hi);
    --ig-dialog-message-color: var(--psl-text);
    --ig-dialog-backdrop: rgba(5, 13, 30, .55);
}

/* ダイアログ本体の幅。内側のフォームが 12 カラムなので広めに取る。 */
.psl-dialog::part(base) {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
}

/* 本文だけをスクロールさせ、footer スロットのボタンは固定表示にする */
.psl-dialog::part(content) {
    overflow-y: auto;
    padding: 4px 16px 8px;
}

/* ダイアログ内の入力欄（IgbInput / IgbSelect） */
.psl-dialog igc-input,
.psl-dialog igc-select {
    width: 100%;
    --ig-input-group-idle-text-color: var(--psl-text-muted);
    --ig-input-group-filled-text-color: var(--psl-text-hi);
    --ig-input-group-focused-text-color: var(--psl-brand);
    --ig-input-group-border-color: var(--psl-border);
    --ig-input-group-hover-border-color: var(--psl-border-strong);
    --ig-input-group-focused-border-color: var(--psl-brand);
    --ig-input-group-box-background: var(--psl-bg-1);
    --ig-input-group-helper-text-color: var(--psl-text-dim);
}

/* IgbSelect のドロップダウン（part=base）は既定で max-height を持たず、
   igc-popover 側も size ミドルウェアを使わないため、得意先のように項目数が
   多いとパネルがビューポート外まで伸び、下側の項目までスクロールできない。
   part=base は overflow:auto なので、上限を与えれば内部スクロールが効く。 */
.psl-dialog igc-select::part(base) {
    max-height: min(320px, 60vh);
}

/* ─── 売上 新規登録 / 編集ダイアログ ─────────────────────────────────────────
   幅は開いた元の売上一覧ウィンドウの80%を実測してJS(salesDialog.js)がpxで
   直接上書きする。高さは固定せず、内容が収まる分にはコンパクトに、収まりきらない
   分だけ80%を上限にスクロールさせる（明細行が少ないときに下側が大きな余白に
   なるのを避けるため）。ここでの vw/vh 指定は、JS実行前や失敗時のフォールバック値
   （.psl-dialog の既定サイズをこちらで上書き。同じ詳細度なのでCSSソース順で後勝ち）。 */
.psl-sales-dialog::part(base) {
    width: 80vw;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
}

.psl-sales-dialog::part(content) {
    overflow-y: auto;
    padding: 4px 16px 8px;
}

/* 明細テーブルを含み縦に長くなりやすいため、入力欄をコンパクトなサイズにする
   （--ig-size: 1=small / 2=medium / 3=large）。他のダイアログには影響しない。 */
.psl-sales-dialog igc-input,
.psl-sales-dialog igc-select {
    --ig-size: 1;
}

/* 明細行の削除ボタン（IgbButton） */
.psl-detail-remove {
    --ig-size: 1;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    --ig-flat-button-foreground: var(--psl-text-dim);
    --ig-flat-button-hover-background: var(--psl-danger);
    --ig-flat-button-hover-foreground: #FFFFFF;
}

.psl-detail-remove::part(base) {
    width: 100%;
    height: 100%;
    min-width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 明細行の追加ボタン（IgbButton） */
.psl-detail-add {
    align-self: flex-start;
    margin-top: 8px;
    --ig-flat-button-foreground: var(--psl-brand);
    --ig-flat-button-hover-background: var(--psl-brand-soft);
}

.psl-btn-save {
    --ig-contained-button-background: var(--psl-brand);
    --ig-contained-button-foreground: var(--psl-text-on-brand);
    --ig-contained-button-hover-background: var(--psl-brand-hover);
    --ig-contained-button-hover-foreground: var(--psl-text-on-brand);
    --ig-contained-button-focus-background: var(--psl-brand-hover);
}

.psl-btn-cancel {
    --ig-flat-button-foreground: var(--psl-text-muted);
    --ig-flat-button-hover-background: var(--psl-brand-soft);
    --ig-flat-button-hover-foreground: var(--psl-brand);
}

/* 削除確認ダイアログの実行ボタン */
.psl-btn-danger {
    --ig-contained-button-background: var(--psl-danger);
    --ig-contained-button-foreground: #FFFFFF;
    --ig-contained-button-hover-background: var(--psl-danger-soft);
    --ig-contained-button-hover-foreground: #FFFFFF;
    --ig-contained-button-focus-background: var(--psl-danger-soft);
}

/* 確認ダイアログは入力欄を持たないので小さくする（.psl-dialog の幅を後勝ちで上書き） */
.psl-confirm-dialog::part(base) {
    width: min(440px, calc(100vw - 32px));
}

/* ─── 保存完了トースト ───────────────────────────────────────────────────── */
.psl-snackbar {
    --ig-snackbar-background: var(--psl-navy-800);
    --ig-snackbar-text-color: #FFFFFF;
    --ig-snackbar-button-color: var(--psl-accent);
    --ig-snackbar-border-radius: var(--psl-radius-sm);
}

/* ─── 一覧グリッドを載せるカード ─────────────────────────────────────────── */
.psl-grid-card {
    /* Grid は Height="100%" なので、親に確定した高さが必要 */
    height: calc(100dvh - 210px);
    min-height: 380px;
    overflow: hidden;
    --ig-card-background: var(--psl-bg-1);
    --ig-card-border-radius: var(--psl-radius);
    border: 1px solid var(--psl-border);
    border-radius: var(--psl-radius);
    box-shadow: var(--psl-shadow-card);
}

/* ─── 入金予定表を載せるカード（ダッシュボード） ─────────────────────────── */
.psl-schedule-card {
    overflow: hidden;
    --ig-card-background: var(--psl-bg-1);
    --ig-card-border-radius: var(--psl-radius);
    border: 1px solid var(--psl-border);
    border-radius: var(--psl-radius);
    box-shadow: var(--psl-shadow-card);
}

/* ─── データグリッド（IgbGrid）のネイビー配色 ────────────────────────────── */
.psl-grid {
    --ig-grid-background: var(--psl-bg-1);
    --ig-grid-content-background: var(--psl-bg-1);
    --ig-grid-content-text-color: var(--psl-text);

    /* ヘッダー: ネイビー地に白文字 */
    --ig-grid-header-background: var(--psl-navy-800);
    --ig-grid-header-text-color: #FFFFFF;
    --ig-grid-header-border-width: 0;
    --ig-grid-header-selected-background: var(--psl-navy-700);
    --ig-grid-header-selected-text-color: #FFFFFF;
    --ig-grid-sorted-header-icon-color: var(--psl-accent);
    --ig-grid-sortable-header-icon-hover-color: #FFFFFF;
    --ig-grid-filtering-header-background: var(--psl-navy-700);
    --ig-grid-filtering-header-text-color: #FFFFFF;

    /* 行 */
    --ig-grid-row-border-color: var(--psl-border);
    --ig-grid-row-hover-background: var(--psl-brand-soft);
    --ig-grid-row-hover-text-color: var(--psl-text-hi);
    --ig-grid-row-selected-background: var(--psl-brand-soft);
    --ig-grid-row-selected-text-color: var(--psl-text-hi);
    --ig-grid-row-odd-background: var(--psl-bg-1);
    --ig-grid-row-even-background: var(--psl-bg-2);

    /* セル / フォーカス */
    --ig-grid-cell-active-border-color: var(--psl-brand);
    --ig-grid-cell-selected-background: var(--psl-brand-soft);
    --ig-grid-cell-selected-text-color: var(--psl-text-hi);

    /* ページャー / フッター */
    --ig-grid-pinned-border-color: var(--psl-border-strong);
    --ig-grid-accent-color: var(--psl-brand);
}

/* ─── ホームのカード ─────────────────────────────────────────────────────── */
.psl-home-card {
    max-width: 520px;
    --ig-card-background: var(--psl-bg-1);
    --ig-card-border-radius: var(--psl-radius);
    --ig-card-content-text-color: var(--psl-text);
    border: 1px solid var(--psl-border);
    border-radius: var(--psl-radius);
    box-shadow: var(--psl-shadow-card);
}

/* ─── スマートフォン対応（共通） ─────────────────────────────────────────────
   各画面の素のHTML要素は CSS 分離（スコープ属性付き）で定義されているため、
   ここでは詳細度に負けないよう !important で上書きする。 */
@media (max-width: 768px) {
    /* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を自動拡大してしまう */
    input.psl-date-input,
    select.psl-date-input,
    textarea {
        font-size: 16px !important;
    }

    /* 検索ツールバー: キーワード欄は1行まるごと使い、折り返したボタンと縦区切り線は整理する */
    .psl-search-input {
        min-width: 0;
        flex: 1 1 100%;
    }

    .psl-toolbar-sep {
        display: none !important;
    }

    .psl-toolbar {
        width: 100%;
    }

    /* ダイアログは画面幅いっぱいに */
    .psl-dialog::part(base),
    .psl-sales-dialog::part(base),
    .psl-confirm-dialog::part(base) {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    /* 一覧グリッドカード: MDI外で表示された場合も、ヘッダー分を引いた高さにする */
    .psl-grid-card {
        height: calc(100dvh - 250px);
        min-height: 320px;
    }

    .psl-home-card {
        max-width: none;
    }
}

/* ─── スクロールバー（ネイビー） ─────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--psl-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--psl-border-strong);
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--psl-brand);
}