/* ===================================================================
   wright-utilities.css — MudBlazor 互換ユーティリティクラス
   MudBlazor CSS クラス名を Wright 管理の独自実装として再定義。
   既存ページの Class="d-flex align-center pa-4" はそのまま動作する。
   =================================================================== */

/* ===== Display ===== */
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-block        { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline       { display: inline !important; }
.d-none         { display: none !important; }

/* Responsive display */
@media (min-width: 600px) {
    .d-sm-none { display: none !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-block { display: block !important; }
}
@media (min-width: 960px) {
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
}
@media (min-width: 1280px) {
    .d-lg-none { display: none !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-block { display: block !important; }
}

/* ===== Flex Direction ===== */
.flex-row            { flex-direction: row !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column         { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* ===== Flex Wrap ===== */
.flex-wrap   { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

/* ===== Flex Grow / Shrink ===== */
.flex-grow-0   { flex-grow: 0 !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-1        { flex: 1 !important; }

/* ===== Align Items ===== */
.align-start    { align-items: flex-start !important; }
.align-center   { align-items: center !important; }
.align-end      { align-items: flex-end !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch  { align-items: stretch !important; }

/* ===== Align Self ===== */
.align-self-start  { align-self: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-self-end    { align-self: flex-end !important; }

/* ===== Justify Content ===== */
.justify-start         { justify-content: flex-start !important; }
.justify-center        { justify-content: center !important; }
.justify-end           { justify-content: flex-end !important; }
.justify-space-between { justify-content: space-between !important; }
.justify-space-around  { justify-content: space-around !important; }
.justify-space-evenly  { justify-content: space-evenly !important; }

/* ===== Spacing (4px 単位: *-1=4px, *-2=8px, ..., *-16=64px) =====
   MudBlazor 互換: padding (pa/px/py/pt/pb/pl/pr) + margin (ma/mx/my/mt/mb/ml/mr)
   自動生成風だが CSS 変数や SASS なしのため手書き展開。 */

/* --- Padding: all (pa-*) --- */
.pa-0  { padding: 0 !important; }
.pa-1  { padding: 4px !important; }
.pa-2  { padding: 8px !important; }
.pa-3  { padding: 12px !important; }
.pa-4  { padding: 16px !important; }
.pa-5  { padding: 20px !important; }
.pa-6  { padding: 24px !important; }
.pa-7  { padding: 28px !important; }
.pa-8  { padding: 32px !important; }
.pa-10 { padding: 40px !important; }
.pa-12 { padding: 48px !important; }
.pa-16 { padding: 64px !important; }

/* --- Padding: horizontal (px-*) --- */
.px-0  { padding-left: 0 !important; padding-right: 0 !important; }
.px-1  { padding-left: 4px !important; padding-right: 4px !important; }
.px-2  { padding-left: 8px !important; padding-right: 8px !important; }
.px-3  { padding-left: 12px !important; padding-right: 12px !important; }
.px-4  { padding-left: 16px !important; padding-right: 16px !important; }
.px-5  { padding-left: 20px !important; padding-right: 20px !important; }
.px-6  { padding-left: 24px !important; padding-right: 24px !important; }
.px-8  { padding-left: 32px !important; padding-right: 32px !important; }

/* --- Padding: vertical (py-*) --- */
.py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1  { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2  { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3  { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-4  { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-5  { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-6  { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-8  { padding-top: 32px !important; padding-bottom: 32px !important; }

/* --- Padding: individual sides --- */
.pt-0 { padding-top: 0 !important; }     .pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }   .pt-3 { padding-top: 12px !important; }
.pt-4 { padding-top: 16px !important; }  .pt-5 { padding-top: 20px !important; }
.pt-6 { padding-top: 24px !important; }

.pb-0 { padding-bottom: 0 !important; }  .pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; } .pb-3 { padding-bottom: 12px !important; }
.pb-4 { padding-bottom: 16px !important; } .pb-5 { padding-bottom: 20px !important; }

.pl-0 { padding-left: 0 !important; }    .pl-1 { padding-left: 4px !important; }
.pl-2 { padding-left: 8px !important; }  .pl-3 { padding-left: 12px !important; }
.pl-4 { padding-left: 16px !important; } .pl-5 { padding-left: 20px !important; }

.pr-0 { padding-right: 0 !important; }   .pr-1 { padding-right: 4px !important; }
.pr-2 { padding-right: 8px !important; } .pr-3 { padding-right: 12px !important; }
.pr-4 { padding-right: 16px !important; }

/* --- Margin: all (ma-*) --- */
.ma-0  { margin: 0 !important; }
.ma-1  { margin: 4px !important; }
.ma-2  { margin: 8px !important; }
.ma-3  { margin: 12px !important; }
.ma-4  { margin: 16px !important; }
.ma-5  { margin: 20px !important; }
.ma-6  { margin: 24px !important; }
.ma-8  { margin: 32px !important; }
.ma-auto { margin: auto !important; }

/* --- Margin: horizontal (mx-*) --- */
.mx-0    { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1    { margin-left: 4px !important; margin-right: 4px !important; }
.mx-2    { margin-left: 8px !important; margin-right: 8px !important; }
.mx-3    { margin-left: 12px !important; margin-right: 12px !important; }
.mx-4    { margin-left: 16px !important; margin-right: 16px !important; }
.mx-5    { margin-left: 20px !important; margin-right: 20px !important; }
.mx-6    { margin-left: 24px !important; margin-right: 24px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* --- Margin: vertical (my-*) --- */
.my-0  { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1  { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2  { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3  { margin-top: 12px !important; margin-bottom: 12px !important; }
.my-4  { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* --- Margin: individual sides --- */
.mt-0    { margin-top: 0 !important; }
.mt-1    { margin-top: 4px !important; }
.mt-2    { margin-top: 8px !important; }
.mt-3    { margin-top: 12px !important; }
.mt-4    { margin-top: 16px !important; }
.mt-5    { margin-top: 20px !important; }
.mt-6    { margin-top: 24px !important; }
.mt-8    { margin-top: 32px !important; }
.mt-auto { margin-top: auto !important; }

.mb-0    { margin-bottom: 0 !important; }
.mb-1    { margin-bottom: 4px !important; }
.mb-2    { margin-bottom: 8px !important; }
.mb-3    { margin-bottom: 12px !important; }
.mb-4    { margin-bottom: 16px !important; }
.mb-5    { margin-bottom: 20px !important; }
.mb-6    { margin-bottom: 24px !important; }
.mb-8    { margin-bottom: 32px !important; }
.mb-10   { margin-bottom: 40px !important; }

.ml-0    { margin-left: 0 !important; }
.ml-1    { margin-left: 4px !important; }
.ml-2    { margin-left: 8px !important; }
.ml-3    { margin-left: 12px !important; }
.ml-4    { margin-left: 16px !important; }
.ml-auto { margin-left: auto !important; }

.mr-0    { margin-right: 0 !important; }
.mr-1    { margin-right: 4px !important; }
.mr-2    { margin-right: 8px !important; }
.mr-3    { margin-right: 12px !important; }
.mr-4    { margin-right: 16px !important; }
.mr-auto { margin-right: auto !important; }

/* MudBlazor RTL-aware margin (me = margin-end, ms = margin-start) */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 12px !important; }
.me-4 { margin-right: 16px !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 12px !important; }
.ms-4 { margin-left: 16px !important; }

/* ===== Gap ===== */
.gap-0  { gap: 0 !important; }
.gap-1  { gap: 4px !important; }
.gap-2  { gap: 8px !important; }
.gap-3  { gap: 12px !important; }
.gap-4  { gap: 16px !important; }
.gap-5  { gap: 20px !important; }
.gap-6  { gap: 24px !important; }
.gap-8  { gap: 32px !important; }

/* ===== Width / Height ===== */
.mud-width-full  { width: 100% !important; }
.mud-height-full { height: 100% !important; }
.w-100           { width: 100% !important; }
.h-100           { height: 100% !important; }

/* ===== Overflow ===== */
.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }
.overflow-visible { overflow: visible !important; }
.overflow-x-auto  { overflow-x: auto !important; }
.overflow-y-auto  { overflow-y: auto !important; }

/* ===== Position ===== */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

/* ===== Text Alignment ===== */
.mud-typography-align-center { text-align: center !important; }
.mud-typography-align-left   { text-align: left !important; }
.mud-typography-align-right  { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

/* ===== Border Radius ===== */
.rounded    { border-radius: var(--wright-border-radius, 4px) !important; }
.rounded-lg { border-radius: 8px !important; }
.rounded-xl { border-radius: 12px !important; }
.rounded-0  { border-radius: 0 !important; }

/* ===== Cursor ===== */
.cursor-pointer { cursor: pointer !important; }
.clickable      { cursor: pointer !important; }

/* ===== Visibility ===== */
.visible   { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ===== Float ===== */
.float-left  { float: left !important; }
.float-right { float: right !important; }
.float-none  { float: none !important; }

/* ===== Font ===== */
.font-weight-bold   { font-weight: 700 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light  { font-weight: 300 !important; }
.font-italic        { font-style: italic !important; }
.text-decoration-none { text-decoration: none !important; }
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}