/*
 * ECport 認証・登録導線の配色（LP TOP 準拠）
 *
 * LP TOP（ecport-lp / resources/css/lp-top.css）のトークンと部品を、manage の認証画面へ持ち込む。
 * LP から遷移してきた利用者に、地続きの画面として見せるためのもの。
 * layouts/auth.blade.php から読み込む。個々の画面の構造依存な指定は各 Blade 側に置く。
 */

:root {
    --lp-bg: #ffffff;
    --lp-cream: #f8f6f1;
    --lp-cream-2: #f2efe8;
    --lp-text: #1b1c1a;
    --lp-text-2: #5e615c;
    --lp-text-3: #8b8e88;
    --lp-border: #e7e4dc;
    --lp-border-2: #d9d5cb;
    --lp-border-hover: #bfb9ac;
    --lp-orange: #f0801f;
    --lp-orange-soft: #fdf1e5;
    --lp-orange-line: #f7c9a3;
    --lp-green: #2fa75a;
    --lp-green-text: #23783f;
    --lp-green-soft: #eaf6ee;
    --lp-green-line: #b9e2c5;
    --lp-danger: #e15359;
    --lp-danger-line: #f2c4c6;
    --lp-danger-soft: #fdf0f0;
    --lp-grad-brand: linear-gradient(90deg, #f0801f 0%, #f4a13a 38%, #86bd45 70%, #2fa75a 100%);
    --lp-shadow-card: 0 1px 2px rgba(27, 28, 26, .04), 0 14px 40px -20px rgba(27, 28, 26, .18);
    --lp-shadow-float: 0 2px 6px rgba(27, 28, 26, .05), 0 28px 60px -28px rgba(27, 28, 26, .26);
    --lp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --lp-font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, -apple-system, sans-serif;
    /* app.css の共通インタラクション（フォーカスリング）も LP のオレンジに合わせる */
    --ec-interaction-accent-rgb: 240, 128, 31;
}

/* 書体は LP と同じく Noto Sans JP 優先・詰め組み */
body.auth-lp {
    font-family: var(--lp-font-sans);
    font-feature-settings: "palt" 1;
    color: var(--lp-text);
    background: linear-gradient(180deg, #fbfaf7 0%, var(--lp-cream) 100%);
}

body.auth-lp h1,
body.auth-lp h2,
body.auth-lp h3,
body.auth-lp label {
    color: var(--lp-text);
}

body.auth-lp h1 {
    letter-spacing: .005em;
}

/* LP のセクション見出しと同じキッカー */
.auth-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-green-text);
}

/* ── 入力欄 ───────────────────────────────── */
.auth-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--lp-border-2);
    border-radius: 10px;
    padding: 0 14px;
    color: var(--lp-text);
    background: #fff;
    outline: none;
    transition: .18s;
}
.auth-input::placeholder { color: var(--lp-text-3); }
.auth-input:hover { border-color: var(--lp-border-hover); }
.auth-input:focus {
    border-color: var(--lp-orange);
    box-shadow: 0 0 0 3px rgba(240, 128, 31, .14);
}
.auth-input-error { border-color: #ef6b70 !important; }
.auth-error {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-danger);
}

/* ── ボタン（LP の .btn 系: ピル型・グラデーション・白アウトライン）─── */
.auth-btn-primary,
.auth-btn-oauth,
.auth-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .85rem 1.75rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    background-origin: border-box;
    transition: background-color .2s var(--lp-ease-out), border-color .2s var(--lp-ease-out),
        box-shadow .2s var(--lp-ease-out), filter .2s var(--lp-ease-out), transform .16s var(--lp-ease-out);
}
.auth-btn-primary {
    /* border-box を明示しないと、透明ボーダーにグラデーションの反対端が回り込んで角に色ズレが出る */
    background: var(--lp-grad-brand) border-box;
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(240, 128, 31, .55);
}
.auth-btn-primary:hover {
    filter: saturate(1.08) brightness(1.03);
    box-shadow: 0 12px 28px -12px rgba(240, 128, 31, .6);
}
.auth-btn-primary:active { transform: translateY(1px); }
.auth-btn-oauth,
.auth-btn-ghost {
    background: #fff;
    color: var(--lp-text);
    border-color: var(--lp-border-2);
}
.auth-btn-oauth:hover,
.auth-btn-ghost:hover { border-color: var(--lp-text); }

/* ── リンク ───────────────────────────────── */
/* LP は a { color: inherit } でインライン本文リンクの前例が無い。
   緑だけだと小さい太字が黒に沈むので、下線でリンクだと分かるようにする。 */
.auth-link {
    color: var(--lp-green-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(35, 120, 63, .4);
}
.auth-link:hover { text-decoration-color: var(--lp-green-text); }

/* ── 区切り線・入力欄アイコン ─────────────────────── */
/* 線を文字の左右に分けることで、地色（白/クリーム）に依存しなくなる */
.ec-sp-auth-divider {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin: 26px 0 18px;
    text-align: center;
}
.ec-sp-auth-divider::before,
.ec-sp-auth-divider::after {
    content: '';
    position: static;
    height: 1px;
    background: var(--lp-border);
}
.ec-sp-auth-divider span {
    position: static;
    padding: 0;
    background: none;
    color: var(--lp-text-3);
    font-size: 13px;
}

/* ecport-sp-design.css の .ec-sp-auth-field-icon は 767.98px 以下だけの定義なので PC 幅を補う */
@media (min-width: 768px) {
    .ec-sp-auth-field-icon {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: var(--lp-text-3);
        font-size: 18px;
        line-height: 1;
        pointer-events: none;
        z-index: 1;
    }
    .ec-sp-auth-field-icon + input { padding-left: 42px !important; }
}

/* ── 状態表示 ─────────────────────────────── */
.auth-note-success {
    border: 1px solid var(--lp-green-line);
    background: var(--lp-green-soft);
    color: var(--lp-green-text);
}
.auth-note-danger {
    border: 1px solid var(--lp-danger-line);
    background: var(--lp-danger-soft);
    color: #c8434a;
}
.auth-note-info {
    border: 1px solid var(--lp-orange-line);
    background: var(--lp-orange-soft);
    color: #b8520a;
}

/* ============================================================
 * 管理画面（Velzon シェル）の配色も LP TOP に合わせる
 *
 * ecport-pc-design.css / ecport-sp-design.css が :root で --ec-* を定義しているため、
 * それらより後に読み込んでトークンだけ差し替える。
 * （この2ファイルは他セッションが編集中なので直接は触らない）
 * ============================================================ */
:root {
    /* アクセント */
    --ec-primary: #f0801f;
    --ec-primary-hover: #d9701a;
    --ec-primary-soft: #fdf1e5;
    --ec-navy: #1b1c1a;
    --ec-accent: #7656c6; /* Connector のロール識別色。LP に該当色が無いため据え置き */

    /* 地色・面 */
    --ec-bg: #f8f6f1;
    --ec-canvas: #f8f6f1;
    --ec-surface: #ffffff;
    --ec-hover-bg: #f2efe8;

    /* 文字・罫線 */
    --ec-ink: #1b1c1a;
    --ec-text: #1b1c1a;
    --ec-text-body: #1b1c1a;
    --ec-muted: #5e615c;
    --ec-text-muted: #5e615c;
    --ec-border: #e7e4dc;
    --ec-divider: #e7e4dc;
    --ec-breadcrumb-divider: #5e615c;

    /* 状態色。warning は primary のオレンジと役割が混ざらないよう黄寄りへ */
    --ec-success: #2fa75a;
    --ec-warning: #d9a441;
    --ec-warning-strong: #b8860b;
    --ec-warning-soft: #fdf6e3;
    --ec-warning-border: #ecd08a;
    --ec-danger: #e15359;
    --ec-danger-hover: #cf464c;
    --ec-danger-soft: #fdf0f0;
    --ec-danger-border: #f2c4c6;
    --ec-badge-red: #e15359;

    /* ロールカラー（発見・コネクトの識別用） */
    --ec-supplier: #f0801f;
    --ec-builder: #2fa75a;
    --ec-connector: #7656c6;

    /* SP デザイン（ecport-sp-design.css）のトークン */
    --ec-sp-bg: #f8f6f1;
    --ec-sp-surface: #ffffff;
    --ec-sp-ink: #1b1c1a;
    --ec-sp-ink-muted: #5e615c;
    --ec-sp-accent: #f0801f;
    --ec-sp-accent-soft: #fdf1e5;
    --ec-sp-border: #e7e4dc;
}