/* ===================================================================
   wright-components.css — Wright 非入力系コンポーネントスタイル
   Button, Chip, Avatar, Badge, Tabs 等の UI コンポーネントスタイルを定義する。
   =================================================================== */

:root {
    /* --- Button colors --- */
    --wright-btn-primary: var(--wright-color-primary, #1976D2);
    --wright-btn-primary-hover: var(--wright-color-primary-darken, #1565C0);
    --wright-btn-primary-text: #FFFFFF;
    --wright-btn-error: var(--wright-color-error, #F44336);
    --wright-btn-error-hover: var(--wright-color-error-darken, #D32F2F);
    --wright-btn-success: #2e7d32;
    --wright-btn-success-hover: #1b5e20;
    --wright-btn-warning: #ed6c02;
    --wright-btn-warning-hover: #e65100;
}

/* ==========================================================================
   Button Base
   ========================================================================== */

.wright-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: var(--wright-field-border-radius);
    font-family: inherit;
    font-size: var(--wright-field-font-size);
    font-weight: 500;
    cursor: pointer;
    padding: 0 16px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    text-transform: none;
    white-space: nowrap;
    user-select: none;
    line-height: 1.1;
}

.wright-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.wright-btn:focus-visible {
    outline: 2px solid var(--wright-btn-primary);
    outline-offset: 2px;
}

.wright-btn-error:focus-visible {
    outline-color: var(--wright-btn-error);
}

.wright-btn-success:focus-visible {
    outline-color: var(--wright-btn-success);
}

.wright-btn-warning:focus-visible {
    outline-color: var(--wright-btn-warning);
}

/* --- Button size variants --- */
.wright-btn-sm {
    height: var(--wright-field-height-sm);
    font-size: 0.8125rem;
    padding: 0 12px;
}

.wright-btn-md {
    height: var(--wright-field-height-md);
}

.wright-btn-lg {
    height: var(--wright-field-height-lg);
    font-size: 0.9375rem;
    padding: 0 20px;
}

/* --- Button variants --- */

/* Filled (primary) */
.wright-btn-filled {
    background-color: var(--wright-btn-primary);
    color: var(--wright-btn-primary-text);
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-filled:hover:not(:disabled) {
        background-color: var(--wright-btn-primary-hover);
    }
}

/* Outlined (primary) */
.wright-btn-outlined {
    background-color: transparent;
    border: 1px solid var(--wright-btn-primary);
    color: var(--wright-btn-primary);
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-outlined:hover:not(:disabled) {
        background-color: rgba(0, 0, 0, 0.04);
    }
}

/* Text (no border) */
.wright-btn-text {
    background-color: transparent;
    color: var(--wright-btn-primary);
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-text:hover:not(:disabled) {
        background-color: rgba(0, 0, 0, 0.04);
    }
}

/* Error variant */
.wright-btn-error {
    border-color: var(--wright-btn-error);
    color: var(--wright-btn-error);
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-error:hover:not(:disabled) {
        background-color: rgba(244, 67, 54, 0.04);
    }
}

.wright-btn-error.wright-btn-filled {
    background-color: var(--wright-btn-error);
    color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-error.wright-btn-filled:hover:not(:disabled) {
        background-color: var(--wright-btn-error-hover);
    }
}

/* Success variant */
.wright-btn-success {
    border-color: var(--wright-btn-success);
    color: var(--wright-btn-success);
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-success:hover:not(:disabled) {
        background-color: rgba(46, 125, 50, 0.04);
    }
}

.wright-btn-success.wright-btn-filled {
    background-color: var(--wright-btn-success);
    color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-success.wright-btn-filled:hover:not(:disabled) {
        background-color: var(--wright-btn-success-hover);
    }
}

/* Warning variant */
.wright-btn-warning {
    border-color: var(--wright-btn-warning);
    color: var(--wright-btn-warning);
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-warning:hover:not(:disabled) {
        background-color: rgba(237, 108, 2, 0.04);
    }
}

.wright-btn-warning.wright-btn-filled {
    background-color: var(--wright-btn-warning);
    color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
    .wright-btn-warning.wright-btn-filled:hover:not(:disabled) {
        background-color: var(--wright-btn-warning-hover);
    }
}

/* ==========================================================================
   Icon Button
   ========================================================================== */

.wright-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease;
    color: inherit;
    flex-shrink: 0;
}

.wright-icon-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Icon button sizes */
.wright-icon-btn-sm {
    width: var(--wright-field-height-sm);
    height: var(--wright-field-height-sm);
}

.wright-icon-btn-md {
    width: var(--wright-field-height-md);
    height: var(--wright-field-height-md);
}

.wright-icon-btn-lg {
    width: var(--wright-field-height-lg);
    height: var(--wright-field-height-lg);
}

@media (hover: hover) and (pointer: fine) {
    .wright-icon-btn:hover:not(:disabled) {
        background-color: rgba(0, 0, 0, 0.04);
    }
}

/* Icon button outlined variant */
.wright-icon-btn-outlined {
    border: 1px solid var(--wright-color-primary);
    border-radius: var(--wright-field-border-radius);
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .wright-icon-btn-outlined:hover:not(:disabled) {
        background-color: rgba(55, 77, 108, 0.08);
    }
}


/* ==========================================================================
   WrightErrorTip — Fixed Bubble (body 直下に JS で描画)
   overflow:hidden の親コンテナ内でも正しく表示される
   ========================================================================== */

.wright-errortip-bubble {
    position: fixed;
    z-index: var(--wright-zindex-errortip);
    padding: 4px 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: wrightErrorTipIn 0.15s ease-out;
}

@keyframes wrightErrorTipIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   WrightDropZone — SortableJS ドラッグ中カーソル
   forceFallback モードではマウス下の要素が次々変わるため、
   ドラッグ中はルートレベルで cursor を固定する。
   クラスの付与/除去は WrightDropZone.razor.js の onStart/onEnd で行う。
   ========================================================================== */

html.wright-dragging,
html.wright-dragging * {
    cursor: grabbing !important;
}

/* ドラッグ中の fallback クローンでは操作UIを非表示。
   SortableJS の fallback は document.body に追加されるため、
   scoped CSS では到達できない。グローバルで制御する。 */
.wright-sort-fallback .wright-drop-hide-on-drag {
    display: none !important;
}

/* 繰り越しタスクの fallback / ghost クローン:
   ::deep (scoped CSS) は body 直下の clone に届かないため、
   赤バー・背景色をグローバルで定義する。
   .wright-drop-item との複合セレクタで scoped CSS (0-2-0) を上回る (0-3-0)。 */
.wright-drop-item.wright-sort-fallback:has(.is-carried-over) {
    overflow: hidden;
    background: #fef2f2;
}

.wright-drop-item.wright-sort-fallback:has(.is-carried-over)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ef4444;
}

/* ゴースト: 繰り越しの赤系を維持しつつゴースト表示 */
.wright-drop-item.wright-sort-ghost:has(.is-carried-over) {
    background: color-mix(in srgb, #ef4444 15%, #f8fafc);
}

/* ==========================================================================
   Wright Icon
   ========================================================================== */

.wright-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.wright-icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.wright-icon-sm { font-size: 18px; }
.wright-icon-md { font-size: 20px; }
.wright-icon-lg { font-size: 24px; }

/* ==========================================================================
   Wright Color Utilities
   ========================================================================== */

/* カラー変数は wright-tokens.css で一元定義 */

.wright-primary-text { color: var(--wright-color-primary); }
.wright-secondary-text { color: var(--wright-color-secondary); }
.wright-info-text { color: var(--wright-color-info); }
.wright-success-text { color: var(--wright-color-success); }
.wright-warning-text { color: var(--wright-color-warning); }
.wright-error-text { color: var(--wright-color-error); }

/* ==========================================================================
   Wright Text (Typography)
   ========================================================================== */

.wright-text { margin: 0; }

.wright-text-h1        { font-size: 6rem;     font-weight: 300; line-height: 1.167; letter-spacing: -0.01562em; }
.wright-text-h2        { font-size: 3.75rem;  font-weight: 300; line-height: 1.2;   letter-spacing: -0.00833em; }
.wright-text-h3        { font-size: 3rem;     font-weight: 400; line-height: 1.167; letter-spacing: 0em; }
.wright-text-h4        { font-size: 2.125rem; font-weight: 400; line-height: 1.235; letter-spacing: 0.00735em; }
.wright-text-h5        { font-size: 1.5rem;   font-weight: 400; line-height: 1.334; letter-spacing: 0em; }
.wright-text-h6        { font-size: 1.25rem;  font-weight: 500; line-height: 1.6;   letter-spacing: 0.0075em; }
.wright-text-subtitle1 { font-size: 1rem;     font-weight: 400; line-height: 1.75;  letter-spacing: 0.00938em; }
.wright-text-subtitle2 { font-size: 0.875rem; font-weight: 500; line-height: 1.57;  letter-spacing: 0.00714em; }
.wright-text-body1     { font-size: 1rem;     font-weight: 400; line-height: 1.5;   letter-spacing: 0.00938em; }
.wright-text-body2     { font-size: 0.875rem; font-weight: 400; line-height: 1.43;  letter-spacing: 0.01071em; }
.wright-text-caption   { font-size: 0.75rem;  font-weight: 400; line-height: 1.66;  letter-spacing: 0.03333em; }
.wright-text-overline  { font-size: 0.75rem;  font-weight: 400; line-height: 2.66;  letter-spacing: 0.08333em; text-transform: uppercase; }
.wright-text-button    { font-size: 0.875rem; font-weight: 500; line-height: 1.75;  letter-spacing: 0.02857em; text-transform: uppercase; }

.wright-text-center { text-align: center; }
.wright-text-left   { text-align: left; }
.wright-text-right  { text-align: right; }

.wright-text-gutter { margin-bottom: 0.35em; }

/* ==========================================================================
   Wright Alert
   ========================================================================== */

.wright-alert {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.43;
    color: #212121;
    gap: 12px;
}



/* Alert icon */
.wright-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

.wright-alert-content {
    flex: 1;
    min-width: 0;
}

/* Primary (独自テーマ色 — テキスト色はデフォルト黒) */
.wright-alert-primary {
    border-color: #374d6c;
    background-color: rgba(55, 77, 108, 0.08);
}
.wright-alert-primary .wright-alert-icon { color: #374d6c; }

/* Secondary */
.wright-alert-secondary {
    border-color: #90a4ae;
    background-color: rgba(144, 164, 174, 0.08);
    color: #546e7a;
}
.wright-alert-secondary .wright-alert-icon { color: #90a4ae; }

/* Info (MudBlazor: #2196F3) */
.wright-alert-info {
    border-color: #2196F3;
    background-color: rgba(33, 150, 243, 0.08);
    color: #0d47a1;
}
.wright-alert-info .wright-alert-icon { color: #2196F3; }

/* Success (ProjectTracker History dot green: #4CAF50) */
.wright-alert-success {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.08);
    color: #1b5e20;
}
.wright-alert-success .wright-alert-icon { color: #4CAF50; }

/* Warning (MudBlazor: #FF9800) */
.wright-alert-warning {
    border-color: #FF9800;
    background-color: rgba(255, 152, 0, 0.08);
    color: #e65100;
}
.wright-alert-warning .wright-alert-icon { color: #FF9800; }

/* Error (MudBlazor: #F44336) */
.wright-alert-error {
    border-color: #F44336;
    background-color: rgba(244, 67, 54, 0.08);
    color: #b71c1c;
}
.wright-alert-error .wright-alert-icon { color: #F44336; }

/* ==========================================================================
   Wright Skeleton
   ========================================================================== */

@keyframes wright-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.wright-skeleton {
    display: block;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.08) 25%,
        rgba(0, 0, 0, 0.04) 50%,
        rgba(0, 0, 0, 0.08) 75%
    );
    background-size: 200% 100%;
    animation: wright-shimmer 1.5s ease-in-out infinite;
}

.wright-skeleton-rect {
    width: 100%;
    height: 16px;
    border-radius: 4px;
}

.wright-skeleton-text {
    width: 100%;
    height: 1em;
    border-radius: 4px;
    transform: scale(1, 0.6);
    transform-origin: 0 60%;
}

.wright-skeleton-circle {
    border-radius: 50%;
}

/* ==========================================================================
   Wright Chip
   ========================================================================== */

.wright-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: 32px;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 0.15s;
}

.wright-chip-label { border-radius: 4px; }

.wright-chip-sm  { height: 24px; padding: 0 8px; font-size: 0.75rem; }
.wright-chip-md  { height: 32px; }
.wright-chip-lg  { height: 40px; padding: 0 16px; font-size: 0.875rem; }

/* Filled */
.wright-chip-filled.wright-chip-default   { background-color: #e0e0e0; color: #212121; }
.wright-chip-filled.wright-chip-primary   { background-color: var(--wright-color-primary); color: #fff; }
.wright-chip-filled.wright-chip-secondary { background-color: var(--wright-color-secondary); color: #fff; }
.wright-chip-filled.wright-chip-info      { background-color: var(--wright-color-info); color: #fff; }
.wright-chip-filled.wright-chip-success   { background-color: var(--wright-color-success); color: #fff; }
.wright-chip-filled.wright-chip-warning   { background-color: var(--wright-color-warning); color: #fff; }
.wright-chip-filled.wright-chip-error     { background-color: var(--wright-color-error); color: #fff; }

/* Outlined */
.wright-chip-outlined { background-color: transparent; border: 1px solid; }
.wright-chip-outlined.wright-chip-default   { border-color: #bdbdbd; color: #212121; }
.wright-chip-outlined.wright-chip-primary   { border-color: var(--wright-color-primary); color: var(--wright-color-primary); }
.wright-chip-outlined.wright-chip-secondary { border-color: var(--wright-color-secondary); color: var(--wright-color-secondary); }
.wright-chip-outlined.wright-chip-info      { border-color: var(--wright-color-info); color: var(--wright-color-info); }
.wright-chip-outlined.wright-chip-success   { border-color: var(--wright-color-success); color: var(--wright-color-success); }
.wright-chip-outlined.wright-chip-warning   { border-color: var(--wright-color-warning); color: var(--wright-color-warning); }
.wright-chip-outlined.wright-chip-error     { border-color: var(--wright-color-error); color: var(--wright-color-error); }

/* Text */
.wright-chip-text { background-color: transparent; }
.wright-chip-text.wright-chip-default   { color: #212121; }
.wright-chip-text.wright-chip-primary   { color: var(--wright-color-primary); }
.wright-chip-text.wright-chip-info      { color: var(--wright-color-info); }
.wright-chip-text.wright-chip-success   { color: var(--wright-color-success); }
.wright-chip-text.wright-chip-warning   { color: var(--wright-color-warning); }
.wright-chip-text.wright-chip-error     { color: var(--wright-color-error); }

.wright-chip-content { display: inline-flex; align-items: center; }

/* ==========================================================================
   Wright Avatar
   ========================================================================== */

.wright-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    overflow: hidden;
    user-select: none;
    flex-shrink: 0;
}

.wright-avatar-sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 0.8rem; }
.wright-avatar-md { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 1rem; }
.wright-avatar-lg { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 1.2rem; }

.wright-avatar-default   { background-color: #bdbdbd; }
.wright-avatar-primary   { background-color: var(--wright-color-primary); }
.wright-avatar-secondary { background-color: var(--wright-color-secondary); }
.wright-avatar-info      { background-color: var(--wright-color-info); }
.wright-avatar-success   { background-color: var(--wright-color-success); }
.wright-avatar-warning   { background-color: var(--wright-color-warning); }
.wright-avatar-error     { background-color: var(--wright-color-error); }

/* ==========================================================================
   Wright Badge
   ========================================================================== */

.wright-badge-root {
    position: relative;
    display: inline-flex;
    overflow: visible;
}

.wright-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(50%, -50%);
}

.wright-badge--dot {
    min-width: 0;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
}

.wright-badge--overlap { transform: translate(25%, -25%); }

.wright-badge--default   { background: rgba(97, 97, 97, 0.8); }
.wright-badge--primary   { background: var(--wright-color-primary, #1976d2); }
.wright-badge--secondary { background: var(--wright-color-secondary); }
.wright-badge--error     { background: #f44336; }
.wright-badge--warning   { background: #ff9800; }
.wright-badge--success   { background: #4caf50; }
.wright-badge--info      { background: #2196f3; }

/* ── Inline variant (for use inside overflow:hidden containers) ── */
.wright-badge--inline {
    position: static;
    transform: none;
    margin-left: 8px;
}


/* ==========================================================================
   Wright Spinner (circular progress) — MudBlazor 風 SVG stroke アニメーション
   ========================================================================== */

@keyframes wright-spinner-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes wright-spinner-dash {
    0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.wright-spinner {
    display: inline-block;
    animation: wright-spinner-rotate 1.4s linear infinite;
}

.wright-spinner svg {
    display: block;
}

.wright-spinner circle {
    fill: none;
    stroke: var(--wright-color-primary);
    stroke-linecap: round;
    animation: wright-spinner-dash 1.4s ease-in-out infinite;
}

.wright-spinner-small        { width: 20px; height: 20px; }
.wright-spinner-small circle { stroke-width: 3; }
.wright-spinner-medium        { width: 36px; height: 36px; }
.wright-spinner-medium circle { stroke-width: 3; }
.wright-spinner-large        { width: 48px; height: 48px; }
.wright-spinner-large circle { stroke-width: 3; }

.wright-spinner-primary   circle { stroke: var(--wright-color-primary); }
.wright-spinner-secondary circle { stroke: var(--wright-color-secondary); }
.wright-spinner-info      circle { stroke: var(--wright-color-info); }
.wright-spinner-success   circle { stroke: var(--wright-color-success); }
.wright-spinner-warning   circle { stroke: var(--wright-color-warning); }
.wright-spinner-error     circle { stroke: var(--wright-color-error); }

/* ==========================================================================
   Wright ProgressBar (linear) — MudBlazor 風 2 バーアニメーション
   ========================================================================== */

@keyframes wright-progress-bar1 {
    0%   { left: -35%; right: 100%; }
    60%  { left: 100%; right: -90%; }
    100% { left: 100%; right: -90%; }
}

@keyframes wright-progress-bar2 {
    0%   { left: -200%; right: 100%; }
    60%  { left: 107%;  right: -8%; }
    100% { left: 107%;  right: -8%; }
}

.wright-progressbar {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 2px;
}

.wright-progressbar-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.wright-progressbar-indeterminate .wright-progressbar-bar {
    animation: wright-progress-bar1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.wright-progressbar-indeterminate .wright-progressbar-bar2 {
    animation: wright-progress-bar2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
}

.wright-progressbar-primary   { background-color: var(--wright-color-primary); }
.wright-progressbar-secondary { background-color: var(--wright-color-secondary); }
.wright-progressbar-info      { background-color: var(--wright-color-info); }
.wright-progressbar-success   { background-color: var(--wright-color-success); }
.wright-progressbar-warning   { background-color: var(--wright-color-warning); }
.wright-progressbar-error     { background-color: var(--wright-color-error); }

/* ==========================================================================
   Wright CheckBox
   ========================================================================== */

.wright-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
}


.wright-checkbox-disabled { opacity: 0.5; cursor: not-allowed; }
.wright-checkbox-readonly { cursor: default; }

.wright-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wright-checkbox-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid #757575;
    border-radius: 3px;
    box-sizing: border-box;
    transition: background-color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.wright-checkbox-box::after {
    content: "";
    display: none;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -1px;
}

.wright-checkbox-input:checked ~ .wright-checkbox-box::after { display: block; }

.wright-checkbox-input:checked ~ .wright-checkbox-box.wright-checkbox-primary   { background-color: var(--wright-color-primary);   border-color: var(--wright-color-primary); }
.wright-checkbox-input:checked ~ .wright-checkbox-box.wright-checkbox-secondary { background-color: var(--wright-color-secondary); border-color: var(--wright-color-secondary); }
.wright-checkbox-input:checked ~ .wright-checkbox-box.wright-checkbox-info      { background-color: var(--wright-color-info);      border-color: var(--wright-color-info); }
.wright-checkbox-input:checked ~ .wright-checkbox-box.wright-checkbox-success   { background-color: var(--wright-color-success);   border-color: var(--wright-color-success); }
.wright-checkbox-input:checked ~ .wright-checkbox-box.wright-checkbox-warning   { background-color: var(--wright-color-warning);   border-color: var(--wright-color-warning); }
.wright-checkbox-input:checked ~ .wright-checkbox-box.wright-checkbox-error     { background-color: var(--wright-color-error);     border-color: var(--wright-color-error); }

.wright-checkbox-label { font-size: 0.875rem; color: #212121; }

/* ==========================================================================
   Wright Switch
   ========================================================================== */

.wright-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.wright-switch-disabled { opacity: 0.5; cursor: not-allowed; }

.wright-switch-track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background-color: #bdbdbd;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.wright-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wright-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.2s;
}

.wright-switch-checked .wright-switch-thumb { left: 18px; }

.wright-switch-checked.wright-switch-primary   { background-color: var(--wright-color-primary); }
.wright-switch-checked.wright-switch-secondary { background-color: var(--wright-color-secondary); }
.wright-switch-checked.wright-switch-info      { background-color: var(--wright-color-info); }
.wright-switch-checked.wright-switch-success   { background-color: var(--wright-color-success); }
.wright-switch-checked.wright-switch-warning   { background-color: var(--wright-color-warning); }
.wright-switch-checked.wright-switch-error     { background-color: var(--wright-color-error); }

.wright-switch-label { font-size: 0.875rem; color: #212121; }

/* ==========================================================================
   Wright Radio
   ========================================================================== */

.wright-radio-group { display: flex; flex-direction: column; gap: 4px; }

.wright-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
}



.wright-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wright-radio-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #757575;
    border-radius: 50%;
    transition: border-color 0.15s;
    flex-shrink: 0;
}

.wright-radio-circle::after {
    content: "";
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
}

.wright-radio-circle.wright-radio-checked::after { display: block; }

.wright-radio-circle.wright-radio-checked.wright-radio-primary   { border-color: var(--wright-color-primary);   color: var(--wright-color-primary); }
.wright-radio-circle.wright-radio-checked.wright-radio-secondary { border-color: var(--wright-color-secondary); color: var(--wright-color-secondary); }
.wright-radio-circle.wright-radio-checked.wright-radio-info      { border-color: var(--wright-color-info);      color: var(--wright-color-info); }
.wright-radio-circle.wright-radio-checked.wright-radio-success   { border-color: var(--wright-color-success);   color: var(--wright-color-success); }
.wright-radio-circle.wright-radio-checked.wright-radio-warning   { border-color: var(--wright-color-warning);   color: var(--wright-color-warning); }
.wright-radio-circle.wright-radio-checked.wright-radio-error     { border-color: var(--wright-color-error);     color: var(--wright-color-error); }

.wright-radio-label { font-size: 0.875rem; color: #212121; }

/* ==========================================================================
   Wright SimpleTable
   ========================================================================== */

.wright-simpletable-wrapper {
    overflow-x: auto;
}

.wright-simpletable-fixedheader {
    max-height: 400px;
    overflow-y: auto;
}

.wright-simpletable-fixedheader thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
}

.wright-simpletable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.wright-simpletable th,
.wright-simpletable td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.wright-simpletable th {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    background-color: #fafafa;
}

.wright-simpletable-dense th,
.wright-simpletable-dense td {
    padding: 6px 12px;
}

.wright-simpletable-bordered th,
.wright-simpletable-bordered td {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.wright-simpletable-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Wright Tooltip — Fixed Bubble (body 直下に JS で描画)
   ========================================================================== */

.wright-tooltip-anchor {
    display: inline-flex;
}

.wright-tooltip-bubble {
    position: fixed;
    z-index: var(--wright-zindex-tooltip);
    padding: 4px 8px;
    background: #424242;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.wright-tooltip-bubble--visible {
    opacity: 1;
}

/* ==========================================================================
   Wright Accordion — MudBlazor ExpansionPanel 準拠の設計
   - パネル間は border-bottom で分離
   - 展開時はコンテンツ上部に border-top でヘッダーと明確に分離
   - padding は header / content で独立管理
   ========================================================================== */

.wright-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.wright-accordion-panel {
    border-bottom: 1px solid #e0e0e0;
}

.wright-accordion-panel:last-child {
    border-bottom: none;
}

.wright-accordion-panel-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    text-align: left;
}

.wright-accordion-panel-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

.wright-accordion-panel-title {
    flex: 1;
    font-weight: 500;
}

.wright-accordion-panel-arrow {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.wright-accordion-panel-expanded .wright-accordion-panel-arrow {
    transform: rotate(180deg);
}

.wright-accordion-panel-content {
    border-top: 1px solid #e0e0e0;
    padding: 16px;
}

/* ==========================================================================
   Wright Timeline
   薄い色の外輪 (shadow) + solid 内ドット (::after) 構造。
   外輪が不透明のためコネクタ線は構造的にマスクされる。
   ========================================================================== */

.wright-timeline {
    position: relative;
    padding: 0;
}

.wright-timeline-item {
    display: flex;
    position: relative;
    padding-bottom: 24px;
}

/* --- Dot: 薄色外輪 + shadow + 内ドット (14px) --- */
.wright-timeline-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #efefef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wright-timeline-dot::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #bdbdbd;
}

/* ItemDot がある場合は ::after を非表示 */
.wright-timeline-dot:has(> *)::after {
    display: none;
}

/* --- Dot color variants (外輪: pre-blended 薄色, 内ドット: solid) --- */
.wright-timeline-dot-default                 { background: #efefef; }
.wright-timeline-dot-default::after          { background: #bdbdbd; }
.wright-timeline-dot-primary                 { background: #c5ddf4; }
.wright-timeline-dot-primary::after          { background: var(--wright-color-primary); }
.wright-timeline-dot-secondary               { background: #d9d9d9; }
.wright-timeline-dot-secondary::after        { background: var(--wright-color-secondary); }
.wright-timeline-dot-info                    { background: #c8e5fc; }
.wright-timeline-dot-info::after             { background: var(--wright-color-info); }
.wright-timeline-dot-success                 { background: #d2ebd3; }
.wright-timeline-dot-success::after          { background: var(--wright-color-success); }
.wright-timeline-dot-warning                 { background: #ffe5bf; }
.wright-timeline-dot-warning::after          { background: var(--wright-color-warning); }
.wright-timeline-dot-error                   { background: #fcd0cd; }
.wright-timeline-dot-error::after            { background: var(--wright-color-error); }

/* --- Connector line --- */
.wright-timeline-connector {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e0e0e0;
}

.wright-timeline-item:first-child .wright-timeline-connector {
    top: 11px;
}

.wright-timeline-item:last-child .wright-timeline-connector {
    bottom: auto;
    height: 11px;
}

.wright-timeline-item:first-child:last-child .wright-timeline-connector {
    display: none;
}

/* --- Content --- */
.wright-timeline-content {
    flex: 1;
    padding-left: 12px;
    min-width: 0;
}

/* ==========================================================================
   Wright Grid — 12 カラムグリッドシステム (CSS Grid ベース)
   ========================================================================== */

/* ── Grid コンテナ ── */
.wright-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: 100%;
    /* gap はインラインスタイルで動的適用 */
}

/* ── Grid アイテム ── */
.wright-item {
    box-sizing: border-box;
    min-width: 0;
}

/* xs (デフォルト — モバイルファースト) */
.wright-item-xs-1  { grid-column: span 1;  }
.wright-item-xs-2  { grid-column: span 2;  }
.wright-item-xs-3  { grid-column: span 3;  }
.wright-item-xs-4  { grid-column: span 4;  }
.wright-item-xs-5  { grid-column: span 5;  }
.wright-item-xs-6  { grid-column: span 6;  }
.wright-item-xs-7  { grid-column: span 7;  }
.wright-item-xs-8  { grid-column: span 8;  }
.wright-item-xs-9  { grid-column: span 9;  }
.wright-item-xs-10 { grid-column: span 10; }
.wright-item-xs-11 { grid-column: span 11; }
.wright-item-xs-12 { grid-column: span 12; }

/* sm ≥ 600px */
@media (min-width: 600px) {
    .wright-item-sm-1  { grid-column: span 1;  }
    .wright-item-sm-2  { grid-column: span 2;  }
    .wright-item-sm-3  { grid-column: span 3;  }
    .wright-item-sm-4  { grid-column: span 4;  }
    .wright-item-sm-5  { grid-column: span 5;  }
    .wright-item-sm-6  { grid-column: span 6;  }
    .wright-item-sm-7  { grid-column: span 7;  }
    .wright-item-sm-8  { grid-column: span 8;  }
    .wright-item-sm-9  { grid-column: span 9;  }
    .wright-item-sm-10 { grid-column: span 10; }
    .wright-item-sm-11 { grid-column: span 11; }
    .wright-item-sm-12 { grid-column: span 12; }
}

/* md ≥ 960px */
@media (min-width: 960px) {
    .wright-item-md-1  { grid-column: span 1;  }
    .wright-item-md-2  { grid-column: span 2;  }
    .wright-item-md-3  { grid-column: span 3;  }
    .wright-item-md-4  { grid-column: span 4;  }
    .wright-item-md-5  { grid-column: span 5;  }
    .wright-item-md-6  { grid-column: span 6;  }
    .wright-item-md-7  { grid-column: span 7;  }
    .wright-item-md-8  { grid-column: span 8;  }
    .wright-item-md-9  { grid-column: span 9;  }
    .wright-item-md-10 { grid-column: span 10; }
    .wright-item-md-11 { grid-column: span 11; }
    .wright-item-md-12 { grid-column: span 12; }
}

/* lg ≥ 1280px */
@media (min-width: 1280px) {
    .wright-item-lg-1  { grid-column: span 1;  }
    .wright-item-lg-2  { grid-column: span 2;  }
    .wright-item-lg-3  { grid-column: span 3;  }
    .wright-item-lg-4  { grid-column: span 4;  }
    .wright-item-lg-5  { grid-column: span 5;  }
    .wright-item-lg-6  { grid-column: span 6;  }
    .wright-item-lg-7  { grid-column: span 7;  }
    .wright-item-lg-8  { grid-column: span 8;  }
    .wright-item-lg-9  { grid-column: span 9;  }
    .wright-item-lg-10 { grid-column: span 10; }
    .wright-item-lg-11 { grid-column: span 11; }
    .wright-item-lg-12 { grid-column: span 12; }
}

/* xl ≥ 1920px */
@media (min-width: 1920px) {
    .wright-item-xl-1  { grid-column: span 1;  }
    .wright-item-xl-2  { grid-column: span 2;  }
    .wright-item-xl-3  { grid-column: span 3;  }
    .wright-item-xl-4  { grid-column: span 4;  }
    .wright-item-xl-5  { grid-column: span 5;  }
    .wright-item-xl-6  { grid-column: span 6;  }
    .wright-item-xl-7  { grid-column: span 7;  }
    .wright-item-xl-8  { grid-column: span 8;  }
    .wright-item-xl-9  { grid-column: span 9;  }
    .wright-item-xl-10 { grid-column: span 10; }
    .wright-item-xl-11 { grid-column: span 11; }
    .wright-item-xl-12 { grid-column: span 12; }
}


/* ==========================================================================
   Wright Stack — Flexbox レイアウト (MudStack 代替)
   ========================================================================== */

.wright-stack {
    display: flex;
    flex-direction: column;
    /* gap, justify-content, align-items はインラインスタイルで動的適用 */
}

.wright-stack-row {
    flex-direction: row;
}

.wright-stack-wrap {
    flex-wrap: wrap;
}

/* ==========================================================================
   Wright Divider — 区切り線 (MudDivider 代替)
   ========================================================================== */

.wright-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 0;
    width: 100%;
    flex-shrink: 0;
}

.wright-divider-vertical {
    border-top: none;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    width: auto;
    height: auto;
    align-self: stretch;
}

.wright-divider-flexitem {
    align-self: stretch;
    height: auto;
}

/* ==========================================================================
   Wright Paper — 影付きサーフェス (MudPaper 代替)
   ========================================================================== */

.wright-paper {
    background-color: #fff;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.87);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wright-paper-elevation-0 { box-shadow: none; }
.wright-paper-elevation-1 { box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12); }
.wright-paper-elevation-2 { box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12); }
.wright-paper-elevation-3 { box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12); }
.wright-paper-elevation-4 { box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12); }

.wright-paper-outlined {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.wright-paper-square {
    border-radius: 0;
}

/* ==========================================================================
   Wright Container — 最大幅制約コンテナ (MudContainer 代替)
   ========================================================================== */

.wright-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.wright-container-xs  { max-width: 444px; }
.wright-container-sm  { max-width: 600px; }
.wright-container-md  { max-width: 960px; }
.wright-container-lg  { max-width: 1280px; }
.wright-container-xl  { max-width: 1920px; }
.wright-container-full { max-width: none; }

/* ==========================================================================
   Wright ToolBar — ツールバー (MudToolBar 代替)
   ========================================================================== */

.wright-toolbar {
    display: flex;
    align-items: center;
    min-height: 48px;
    position: relative;
}

.wright-toolbar-dense {
    min-height: 36px;
}

.wright-toolbar-gutters {
    padding-left: 16px;
    padding-right: 16px;
}

.wright-toolbar-wrap {
    flex-wrap: wrap;
}

/* ==========================================================================
   Wright Sort Label
   ========================================================================== */

.wright-sort-label {
    user-select: none;
}

.wright-sort-label-content {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ソートボタン: 20x20 サイズ、アイコン 14px */
.wright-sort-btn {
    width: 20px;
    height: 20px;
}

.wright-sort-btn .wright-icon {
    font-size: 16px;
}

/* ソートボタン: 未ソート時は薄く、ホバーで浮かび上がる */
.wright-sort-btn-inactive {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.wright-sort-btn-inactive:hover {
    opacity: 0.7;
}

/* ソートボタン: ソート中は通常表示 */
.wright-sort-btn-active {
    opacity: 1;
}

/* ==========================================================================
   Wright Table Pager
   ========================================================================== */

.wright-table-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 16px;
    min-height: 48px;
    gap: 16px;
    font-size: 0.8125rem;
    color: var(--wright-color-text-secondary);
    border-top: 1px solid var(--wright-color-table-lines);
}

.wright-table-pager-size {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.wright-table-pager-info {
    white-space: nowrap;
}

.wright-table-pager-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wright-table-pager-page {
    padding: 0 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   WrightTabs
   ═══════════════════════════════════════════════════════════════ */

.wright-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* --- Header bar --- */
.wright-tabs-header {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* --- Tab bar (scrollable area) --- */
.wright-tabs-bar {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* --- Scroll buttons --- */
.wright-tabs-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.wright-tabs-scroll-btn:not(:disabled):hover {
    opacity: 1;
}

.wright-tabs-scroll-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* --- Individual tab --- */
.wright-tabs-tab {
    display: block;
    text-align: center;
    line-height: 48px;
    flex-shrink: 0;
    padding: 0 16px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease;
    color: inherit;
    position: relative;
}

.wright-tabs-tab:disabled {
    opacity: 0.38;
    cursor: default;
}

/* --- Centered: tabs centered in bar --- */
.wright-tabs-centered .wright-tabs-bar {
    justify-content: center;
}

/* ═══ Primary variant (dark navy) ═══ */
.wright-tabs-primary .wright-tabs-header {
    background: #374d6c;
    color: #fff;
}

.wright-tabs-primary .wright-tabs-tab:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ═══ Slider indicator ═══ */
.wright-tabs-slider {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: #fff;
    pointer-events: none;
}

.wright-tabs--animated .wright-tabs-slider {
    transition: left 0.25s ease, width 0.25s ease;
}

/* ═══ Default variant (white bg) ═══ */
.wright-tabs-default .wright-tabs-header {
    background: #fff;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.wright-tabs-default .wright-tabs-tab--active {
    color: var(--wright-color-primary);
}

.wright-tabs-default .wright-tabs-tab:not(:disabled):hover {
    background: rgba(0, 0, 0, 0.04);
}

.wright-tabs-default .wright-tabs-slider {
    background: var(--wright-color-primary);
    transition: none;
}

/* ═══ Rounded ═══ */
.wright-tabs-rounded .wright-tabs-header {
    border-radius: 4px;
    overflow: hidden;
}

/* ═══ Elevation ═══ */
.wright-tabs-elevated .wright-tabs-header {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}

/* ═══ Outlined ═══ */
.wright-tabs-outlined .wright-tabs-header {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* ═══ Panels ═══ */
.wright-tabs-panels {
    /* no default padding — consumers decide */
}

.wright-tabs-panel-hidden {
    display: none;
}