/* django_threek_utils/static/django_threek_utils/css/utils.css */

/* ファイルアップローダー */
.file-uploader-wrapper {
    width: 100%;
}

.file-drop-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-drop-area:hover {
    border-color: #007bff;
    background-color: #e9ecef;
}

.file-drop-area.drag-over {
    border-color: #28a745;
    background-color: #d4edda;
}

.file-drop-message {
    color: #6c757d;
}

.file-drop-message i {
    color: #007bff;
}

.file-preview-area {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
}

.file-item {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
}

.file-name {
    font-weight: 500;
    word-break: break-word;
}

.file-size {
    font-size: 0.875rem;
}

/* フォームバリデーション */
.is-invalid {
    border-color: #dc3545 !important;
}

.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* DataTables の「処理中」インジケータのスタイルはここには置かない。
 * このファイルは pj の base.html が任意に link する opt-in なので、DataTables 由来の
 * 版差を吸収する置き場としては「link していない pj に届かない」。
 * 正は `{% datatables_assets %}` が配る css/dtu-datatables-tailwind.css 側
 * (assets タグ経由なので DataTables を使う全 pj に届く)。 */

/* AutoNumeric フィールド */
.formatted_quantity {
    text-align: right;
}

/* オーバーレイ */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.cv-copy {
    position: absolute;
    width: 100%;
    margin-top: 35vh;
    text-align: center;
}

.cv-copy h2 {
    color: #fff;
}

.cv-copy p {
    color: #fff;
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 4px #ddd solid;
    border-top: 4px #999 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

/* SweetAlert2 (dialog.yesno) のボタン間隔。dialog.js は Bootstrap の ms-5/me-5 を
   customClass で付けるが、Tailwind pj ではこれが no-op でボタンが密着する
   (実測 2026-07-16 ogawa)。Bootstrap と同値の margin をクラス名に対して
   framework 非依存で保証する。Bootstrap pj では同値が二重に当たるだけで不変。 */
.swal2-actions .swal2-confirm.ms-5 {
    margin-inline-start: 3rem;
}
.swal2-actions .swal2-cancel.me-5 {
    margin-inline-end: 3rem;
}

/* 共有部品の最小文字サイズの床 (2026-09-11 決裁 / VSW-NEXT-001)。
   固定 12px でなく max() にしてあるのは、親フォントを上げた画面でだけ縮むのを避けるため
   (先例 = dtu-datatables-common.css の font-size: max(0.75em, 12px))。
   (1) 当てる範囲は**複数画面で共有される部品**だけ。画面固有のパネルと vendor の内部は対象外。
   (2) 既存の散在分 (@media(max-width:480px) を持つ DTU css 5 本 = issues.css / dtu-rowbtn.css /
       manual-editor.css / dtu-ai-chat.css / dtu-card-header.css) は置換しない。
   (3) utils.css は pj の base.html が任意で link する opt-in。現在 link しているのは
       sanwa / ogawa / threek_base の 3 pj だけ。
   (4) DTU の assets テンプレートはどれも utils.css を link していない。DTU のウィジェットに
       このクラスを書いても、Bootstrap 系 7 pj では何も言われずに効かない。 */
.dtu-fs-min12 {
    font-size: max(1em, 12px);
}