body.swal2-height-auto {
    height: 100% !important
}
input, select {
    -webkit-appearance: none;
    appearance: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--mainHover) !important;
}
:root,
.is-theme-light{
    /* ------------------------------------------------- */
    /* color */
    /* ------------------------------------------------- */
    --white: #ffffff;
    --black: #000000;
    --mainBlack: #2e3036;
    --mainBlackHover: #333333;
    --mainWhite: #f2f2f2;
    --mainWhiteHover: #cccccc;
    --mainHover: #4AA5D9;
    --textColor: var(--mainBlack);

    --mainColor: #248DC6;
    --mainTextColor: white;
    --subColor: #248DC6;
    --subTextColor: white;
    --accentColor: #ffa724;
    --accentTextColor: white;
    
    --hoverColor: #45a049;
    --hoverTextColor: white;
    --hoverColorR: 69;
    --hoverColorG: 160;
    --hoverColorB: 73;
    --activeColor: #45a049;
    --activeTextColor: white;
    --activeColorR: 69;
    --activeColorG: 160;
    --activeColorB: 73;
    
    --adminColor: rgb(80, 177, 0);
    --adminTextColor: white;
    --registerColor: var(--mainColor);
    --registerTextColor: white;
    --updateColor: #0068c9;
    --updateTextColor: white;
    --deleteColor: #da0404;
    --deleteTextColor: white;
    --deleteBGColor: #9e9e9e;

    --headerBG: white;
    --navBG: white;
    --mainBG: var(--mainWhite);
    --contentBG: white;
    --bottomBG: white;
    --footerBG: var(--mainColor);

    --borderLineColor: #cccccc;

    /* ------------------------------------------------- */
    /* margin */
    /* ------------------------------------------------- */
    --gutter: 23px;
    --vw-gutter : calc(100vw - var(--gutter) * 2);
}

.is-theme-dark {
    color-scheme: dark;

    --white: #eeeeee;
    --black: #000000;

    --mainWhite: rgb(71, 74, 83);;
    --mainWhiteHover: rgb(99, 102, 112);;
    --mainBlack: #d4d7dd;
    --mainBlackHover: #cccccc;
    --textColor: var(--mainBlack);

    --mainColor: #248DC6;
    --mainTextColor: #ffffff;
    --subColor: #248DC6;
    --subTextColor: #eeeeee;
    --accentColor: #248DC6;
    --accentTextColor: #eeeeee;
    
    --hoverColor: #3a8a3f;
    --hoverTextColor: #eeeeee;
    --hoverColorR: 58;
    --hoverColorG: 138;
    --hoverColorB: 63;
    --activeColor: #3a8a3f;
    --activeTextColor: #eeeeee;
    --activeColorR: 58;
    --activeColorG: 138;
    --activeColorB: 63;
    
    --adminColor: rgb(80, 177, 0);
    --adminTextColor: #eeeeee;
    --registerColor: var(--mainColor);
    --registerTextColor: #eeeeee;
    --updateColor: #0068c9;
    --updateTextColor: #eeeeee;
    --deleteColor: #da0404;
    --deleteTextColor: #eeeeee;
    --deleteBGColor: #4d4f52;

    --headerBG: #202124;
    --navBG: #202124;
    --mainBG: #202124;
    --contentBG: #000;
    --bottomBG: #202124;
    --footerBG: #202124;

    --borderLineColor: #888888;
}

body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* ------------------------------------------------- */
/* ページレイアウト */
/* ------------------------------------------------- */
.gutter {
    margin: 0 var(--gutter);
}

/* ------------------------------------------------- */
/* ページタイトル */
/* ------------------------------------------------- */
.pageTitle-box {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-size: 1.2rem;
}

/* ------------------------------------------------- */
/* ボタン */
/* ------------------------------------------------- */
/* 塗りつぶしボタン */
.solidButton {
    display: inline-block;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-width: 7.5rem;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border-radius: 4px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    /*box-shadow: 1px 6px 15px rgba(0,0,0,0.2);*/
    /*box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.5);*/
    border: none; 
    font-size: 1rem;
    text-align: center;
}
.solidButton:hover {
    filter:brightness(1.1);
}
.solidButton.blue{
    background-color: var(--updateColor);
    color: var(--white);
}

.solidButton.red{
    background-color: var(--deleteColor);
    color: var(--deleteTextColor);
}

.solidButton.orange{
    background-color: var(--accentColor);
    color: var(--accentTextColor);
}

.solidButton.gray{
    background-color: var(--deleteBGColor);
    color: var(--textColor);
}
.solidButton.main{
    background-color: var(--mainColor);
    color: var(--mainTextColor);
}
.solidButton.sub{
    background-color: var(--subColor);
    color: var(--subTextColor);
}
.solidButton.accent{
    background-color: var(--accentColor);
    color: var(--accentTextColor);
}
.solidButton:disabled{
    background-color: var(--deleteBGColor) !important;
    color: var(--textColor) !important;
    opacity: 0.65;
    box-shadow: 0px 0px !important;
    top: 0px !important;
    pointer-events: none;
}

.solidButton.in-cell {
    padding: 0.3rem 1rem;
    min-width: auto;
    font-size: 1.0rem;
}

.solidButton.in-cell:hover {
    background-color: var(--hoverColor);
    color: var(--hoverTextColor);
}

.solidButton.active-hover {
    background-color: var(--hoverColor);
    color: var(--hoverTextColor);
}

.solidButton.active {
    background-color: var(--activeColor) !important;
    color: var(--activeTextColor) !important;
}


/* 塗りつぶしなし */
.outlineButton {
    display: inline-block;
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-width: 7.5rem;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border-radius: 8px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    /*box-shadow: 1px 6px 15px rgba(0,0,0,0.2);*/
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.5); */
    border: 1px;
    border: solid 0.1em;
    background-color: var(--white);
    font-size: 1rem;
    text-align: center;
}

.outlineButton.blue{
    color: var(--updateColor);
    border-color: var(--updateColor);
}
.outlineButton.blue:hover{
    color: var(--white);
    background-color: var(--updateColor);
}

.outlineButton.red{
    color: var(--deleteColor);
    border-color: var(--deleteColor);
}
.outlineButton.red:hover{
    color: var(--white);
    background-color: var(--deleteColor);
    border-color: var(--deleteColor);
}

.outlineButton.redFill{
    color: var(--deleteColor);
    border-color: var(--deleteColor);
    background-color: rgba(218, 4, 4, 0.12);
}

.outlineButton.main{
    color: var(--mainColor);
    border-color: var(--mainColor);
}
.outlineButton.main:hover{
    color: var(--white);
    background-color: var(--mainColor);
}
.outlineButton.sub{
    color: var(--subColor);
    border-color: var(--subColor);
}
.outlineButton.sub:hover{
    color: var(--white);
    background-color: var(--subColor);
}
.outlineButton.accent{
    color: var(--accentColor);
    border-color: var(--accentColor);
}
.outlineButton.accent:hover{
    color: var(--white);
    background-color: var(--accentColor);
}

/* ラジオボタン */
.radioButton {
    color: var(--textColor);
    background-color: var(--mainWhite);
    display: inline-block;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-width: 7rem;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border-radius: 8px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: none; 
    font-size: 1rem;
    text-align: center;
}
.radioButton:hover {
    background-color: var(--mainWhiteHover);
    border-radius: 25px;
}
.radioButton.selected{
    background: var(--mainColor); 
    color: var(--mainTextColor);
    border-radius: 25px;
}


/* ------------------------------------------------- */
/* ラベル */
/* ------------------------------------------------- */
label.required{
    align-self:center;
    background-color: var(--deleteColor);
    color: var(--deleteTextColor);
    border-radius: 0.5rem;
    padding-left:0.5rem;
    padding-right:0.5rem;
    font-size: 0.6rem;
}

/* ------------------------------------------------- */
/* データテーブルカスタムCSS追加 */
/* ------------------------------------------------- */
body .dataTables_wrapper .dataTables_length{
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
}
body .dataTables_wrapper .dataTables_length > label > select {
    padding-right: 2.5rem!important;
}
body .dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-top: 0.5em;
    float: none;
    text-align: center;
}
body .dataTables_wrapper .dataTables_paginate.paging_simple_numbers span {
    display: flex;
    flex-direction: row;
    gap: 5px;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--mainBlack);
    background-color: var(--white);
    border: 1px solid var(--borderLineColor);
    cursor: pointer;
    transition: all 0.3s ease;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--subColor);
    color: var(--subTextColor) !important;
    border: none;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--mainHover, var(--subColor));
    background: var(--mainHover, var(--subColor));
    color: var(--subTextColor) !important;
    border: none;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--mainBlackHover);
    border: 1px solid transparent;
    background: transparent;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background-color: var(--mainHover, var(--subColor));
    background: var(--mainHover, var(--subColor));
    color: var(--subTextColor);
    border-color: var(--mainHover, var(--subColor));
}
body .dataTables_wrapper .dataTables_paginate .paging_simple_numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px;
}
.table-ssr {
    width: 100%;
    min-width: 800px;
    max-width: 100%;
    border-collapse: collapse;
    background-color: var(--contentBG);
    color: var(--textColor);
}
.table-ssr th,
.table-ssr td {
    border: 1px solid var(--borderLineColor);
    padding: 12px;
    text-align: left;
    vertical-align: middle;
}
.table-ssr th {
    background-color: var(--mainWhite);
    color: var(--subColor);
    text-align: center!important;
    font-size: 0.9rem;
    white-space: nowrap;
    font-weight: 600;
}
.table-ssr td {
    color: var(--textColor);
    font-size: 0.9rem;
}
.table-ssr td.status-col {
    text-align: center;
}
.table-ssr td.center {
    text-align: center;
}

/* ------------------------------------------------- */
/* ダークモード: テーブルの視認性を統一 */
/* ------------------------------------------------- */
.is-theme-dark .table-ssr {
    background: #1f2733;
    color: #e5e7eb;
}
.is-theme-dark .table-ssr th {
    background: #243040;
    color: #e5e7eb;
    border: 1px solid #394656;
}
.is-theme-dark .table-ssr td {
    background: #1f2733;
    color: #e5e7eb;
    border: 1px solid #394656;
}
.is-theme-dark .table-ssr tr:hover td {
    background: #2a3442;
}
.pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.table-ssr-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    border-radius: 0.5rem;
    background: var(--contentBG);
}

.is-theme-dark .table-ssr-wrapper {
    background: #1f2733;
}

/* ------------------------------------------------- */
/* データテーブルカスタムCSS追加 */
/* ------------------------------------------------- */
.flatpickr.input-group {
    display: flex;
    align-items: center;
    width: 15rem;
}

.flatpickr .input-button{
    text-decoration: none;
    border: 1px solid var(--borderLineColor);
    background-color: var(--contentBG);
    color: var(--textColor);
    display: block;
    padding: 0.3125rem;
    border-left: 0;
    cursor: pointer;
    align-self: center;
    justify-content: center;
    line-height: 1;
}
.flatpickr .input-button.cross{
    border-radius: 0 0.5rem 0.5rem 0; /* 8px */
}

.flatpickr .input-button:hover {
    background: var(--mainWhiteHover);
    color: var(--textColor);
}

.flatpickr .input-button svg path {
    fill: inherit;
}

.flatpickr input{
    display: block;
    width: 100%;
    border-color: var(--borderLineColor);
    background: var(--contentBG);
    color: var(--textColor);
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
    border-radius: 0.5rem 0 0 0.5rem; /* 8px */
}

.flatpickr .icono-cross{
    color: var(--deleteColor);
}

/* flatpickr ダークモード補正（通常 / monthSelect 共通） */
.is-theme-dark .flatpickr-calendar {
    background: #1f1f24;
    color: var(--textColor);
    border: 1px solid var(--borderLineColor);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.is-theme-dark .flatpickr-days,
.is-theme-dark .flatpickr-innerContainer,
.is-theme-dark .flatpickr-rContainer,
.is-theme-dark .flatpickr-monthSelect-months {
    background: #1f1f24;
}

.is-theme-dark .flatpickr-day {
    color: var(--textColor);
}

.is-theme-dark .flatpickr-day.prevMonthDay,
.is-theme-dark .flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.25);
}

.is-theme-dark .flatpickr-day:hover {
    background: rgba(36, 141, 198, 0.15);
}

.is-theme-dark .flatpickr-day.today {
    border-color: var(--subColor);
    color: var(--textColor);
}

.is-theme-dark .flatpickr-day.selected,
.is-theme-dark .flatpickr-day.startRange,
.is-theme-dark .flatpickr-day.endRange,
.is-theme-dark .flatpickr-day.inRange {
    background: var(--subColor);
    color: var(--subTextColor);
    border-color: var(--subColor);
}

.is-theme-dark .flatpickr-weekday {
    color: #ffffff;
}

.is-theme-dark .flatpickr-monthSelect-month {
    color: #ffffff;
}

.is-theme-dark .flatpickr-monthSelect-month:hover,
.is-theme-dark .flatpickr-monthSelect-month:focus {
    background: rgba(36, 141, 198, 0.15);
    border-color: rgba(36, 141, 198, 0.15);
}

.is-theme-dark .flatpickr-monthSelect-month.selected,
.is-theme-dark .flatpickr-monthSelect-month.startRange,
.is-theme-dark .flatpickr-monthSelect-month.endRange {
    background: var(--subColor);
    color: var(--subTextColor);
    border-color: var(--subColor);
}

/* ------------------------------------------------- */
/* フローステップバー */
/* ------------------------------------------------- */
.flow-stepbar {
    background: var(--mainWhite);
    border: 1px solid var(--borderLineColor);
    border-radius: 8px;
    padding: 20px 24px 16px 24px;
    margin: 0 0 24px 0;
}
.flow-stepbar .left {
    min-width: 600px;
}
.flow-stepbar-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flow-stepbar-body .left {
    flex: 0 0 70%;
    min-width: 0;
    margin-right: 8px;
}
.flow-stepbar-body .right {
    flex: 0 0 25%;
    text-align: right;
}

@media (max-width: 600px) {
    .flow-stepbar-body {
        flex-wrap: wrap;
    }
    .flow-stepbar-body .left,
    .flow-stepbar-body .right {
        flex: 0 0 100%;
    }
    .flow-stepbar-body .right {
        margin-top: 8px;
    }
}
.flow-stepbar-title {
    font-size: 1em;
    font-weight: normal;
    color: var(--textColor);
    margin-left: 8px;
    display: block;
    font-weight: bold;
}
.flow-step-bar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 0;
    position: relative;
    --dot-size:20px;
    --dot-radius:calc(var(--dot-size)/2);
    --step-gap:5px;
    --progress:0%;
    gap: var(--step-gap);
}

.flow-step {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    z-index:0;
    text-align:center;
    max-width: 300px;
}

.flow-step .dot {
    width:var(--dot-size);
    height:var(--dot-size);
    border-radius:50%;
    background:var(--borderLineColor);
    margin:0 auto 6px;
    transition:background .2s;
    position:relative;
    z-index:2;
}

.flow-step.done .dot,
.flow-step.current .dot {
    background:var(--subColor);
}

.flow-step .label {
    font-size: 0.95em;
    color: var(--textColor);
    opacity: 0.85;
    margin-top: 2px;
    white-space: nowrap;
    font-weight: normal;
    min-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 一行固定にしてドット位置を安定化 */
.flow-step .label:first-child {
    height: 1.5em;
    line-height: 1.5em;
}
.flow-step .label.date {
    height: 1.5em;
    line-height: 1.5em;
}
.bar {
    display: none;
}
.flow-step:not(:first-child)::before,
.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.5em + var(--dot-radius) - 1px);
    width: calc(50% + var(--step-gap) / 2);
    height: 2px;
    background: var(--borderLineColor);
    z-index: 1;
}

.flow-step:not(:first-child)::before {
    right: 50%;
}

.flow-step:not(:last-child)::after {
    left: 50%;
}

.flow-step.done:not(:last-child)::after,
.flow-step.done:not(:first-child)::before {
    background: var(--subColor);
}

.flow-step.current:not(:first-child)::before {
    background: var(--subColor);
}

.flow-step.current:not(:last-child)::after {
    background: var(--borderLineColor);
}

@media (max-width: 600px) {
    .flow-step:not(:first-child)::before,
    .flow-step:not(:last-child)::after {
        top: calc(0.9em + var(--dot-radius) - 1px);
    }
    .flow-step-bar {
        margin-left: 0;
        flex-direction: row;
        gap: var(--step-gap);
        --dot-size:10px;
    }
    .flow-step .label {
        font-size: 0.5rem;
    }
}

/* 署名サムネイル */
.flow-step .sigs {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.flow-step .sig-thumb {
    width: 60px;
    height: 40px;
    object-fit: contain;
    background: var(--contentBG);
    border: 1px solid var(--borderLineColor);
    border-radius: 2px;
}
.flow-step .sig-thumb.sig-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--textColor);
    padding: 2px;
    text-align: center;
    word-break: break-word;
}
.flow-step .sig-thumb.more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--textColor);
    background: var(--white);
    border: 1px dashed var(--borderLineColor);
}

/* 画像なし時の承認者表示（サムネイル外、横幅=サムネイル2個分、折返し可） */
.flow-step .sig-fallback-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}
.flow-step .sig-fallback-text {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(60px * 2 + 8px); /* 2サムネ + ギャップ2つ */
    margin: 0 auto;
    font-size: 11px;
    color: var(--textColor);
    text-align: center;
    min-height: 40px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
.flow-step .sig-fallback-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    color: var(--textColor);
    background: var(--white);
    border: 1px dashed var(--borderLineColor);
    border-radius: 2px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .flow-step .sig-thumb {
        width: 44px;
        height: 32px;
    }
    .flow-step .sig-fallback-text {
        max-width: calc(44px * 3 + 8px);
        min-height: 32px;
    }
}

/* 署名プレビュー（ライトボックス） */
.sig-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 9999;
}
.sig-lightbox .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--contentBG);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    padding: 12px;
    max-width: 90vw;
    max-height: 85vh;
    border: 1px solid var(--borderLineColor);
    color: var(--textColor);
}
.sig-lightbox .content img {
    display: block;
    max-width: 86vw;
    max-height: 72vh;
    object-fit: contain;
}
.sig-lightbox .caption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--textColor);
    opacity: 0.82;
    text-align: center;
}
.sig-lightbox .close-btn {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
    color: var(--textColor);
    cursor: pointer;
    z-index: 10;
}

/* ギャラリー（+n）用: スクロールと×が重ならないよう余白を確保 */
#sigGalleryBox .content{
    padding-top: 28px;
    padding-right: 28px;
}
#sigGalleryBox .gallery-list{
    padding-right: 10px;
    box-sizing: border-box;
}

/* テキスト承認者一覧（+n）用: ×ボタンと重ならない余白を確保 */
#sigApproverListBox .content{
    padding-top: 28px;
    padding-right: 28px;
}
#sigApproverListBox .text-list{
    padding-right: 10px;
    box-sizing: border-box;
}

/* ------------------------------------------------- */
/* オフライン状態メッセージボックス（共通） */
/* ------------------------------------------------- */
.offline-message-box {
    background-color: rgba(218, 4, 4, 0.12);
    border: 1px solid rgba(218, 4, 4, 0.5);
    border-radius: 4px;
    color: #b30000;
    padding: 10px 15px;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(255, 77, 77, 0.1);
}

.offline-message-box i {
    color: #b30000;
    animation: pulse 2s infinite;
    margin-right: 8px;
}

.is-theme-dark .offline-message-box {
    background-color: rgba(218, 4, 4, 0.2);
    border-color: rgba(218, 4, 4, 0.65);
    color: #ffbcbc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.is-theme-dark .offline-message-box i {
    color: #ffbcbc;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* オフライン時のボタン無効化スタイル（共通） */
.offline-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: var(--deleteBGColor) !important;
}

.offline-disabled:hover {
    background-color: var(--deleteBGColor) !important;
    transform: none !important;
}

/* ------------------------------------------------- */
/* Dark Mode Adjustments for Signatures */
/* ------------------------------------------------- */
.is-theme-dark .flow-step img.sig-thumb {
    filter: invert(1);
    background: transparent;
}

.is-theme-dark .sig-lightbox .content img {
    filter: invert(1);
}

/* 承認者リスト（モーダル内） */
.approver-list-item {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--borderLineColor);
    border-radius: 4px;
    background: var(--contentBG);
}
.approver-list-item .name {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--textColor);
}
.approver-list-item .date {
    flex: 0 0 auto;
    color: var(--textColor);
    opacity: 0.8;
    font-size: 12px;
}

/* ダークテーマ用オーバーライド */
.is-theme-dark .flow-stepbar {
    background: #4b5563;
    border-color: #6b7280;
}
.is-theme-dark .flow-stepbar-title {
    color: #f3f4f6;
}
.is-theme-dark .flow-step .label {
    color: #f3f4f6;
}
.is-theme-dark .flow-step .sig-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-color: #0c0b09;
    filter: invert(1);
}
.is-theme-dark .flow-step .sig-thumb.sig-fallback {
    color: #1f2937;
}
.is-theme-dark .flow-step .sig-thumb.more {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.1);
    border-color: #f3f4f6;
}
.is-theme-dark .flow-step .sig-fallback-text {
    color: #f3f4f6;
}
.is-theme-dark .flow-step .sig-fallback-more {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.1);
    border-color: #f3f4f6;
}
.is-theme-dark .sig-lightbox .content {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}
.is-theme-dark .sig-lightbox .caption {
    color: #d1d5db;
}
.is-theme-dark .sig-lightbox .close-btn {
    color: #9ca3af;
}
.is-theme-dark .approver-list-item {
    border-color: #4b5563;
    background: #374151;
}
.is-theme-dark .approver-list-item .name {
    color: #f3f4f6;
}
.is-theme-dark .approver-list-item .date {
    color: #d1d5db;
}