/* src/public/css/mosaic.css */

/* =========================================
   💡 画面左右の余白を完全に消去（100%フルウィンドウ化）
   ========================================= */
main.container,
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ワークスペースの幅を画面いっぱいに解放 */
.mosaic-editor-layout {
    width: 100% !important;
    max-width: 100% !important;
}

/* 💡 全体レイアウト：大画面を最大活用 */
.mosaic-editor-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start; /* 追従（sticky）を効かせるために必須 */
    width: 100%;
}

/* 💡 左側サイドバー：左寄せ＆スクロール追従（Sticky） */
.editor-sidebar {
    width: 320px;
    min-width: 320px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    box-sizing: border-box;
    position: sticky;
    top: 20px; /* 画面スクロール時に上部に追従固定 */
    z-index: 100;
}

/* 💡 右側メインエリア：画面の空き領域を100%フル活用 */
.editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0; /* Flexボックスのあふれ防止 */
}

/* ファイルアップロード領域 */
.file-input-group {
    border: 2px dashed #cbd5e1; border-radius: 10px; padding: 40px 20px;
    text-align: center; background: #f8fafc; transition: all 0.2s;
}
.file-input-group.dragover { border-color: #f39c12; background: #fdf6e2; }
.btn-upload {
    background: #f39c12; color: #fff; padding: 12px 24px; border-radius: 50px;
    font-weight: bold; cursor: pointer; display: inline-block; box-shadow: 0 4px 10px rgba(243,156,18,0.2);
}
#file-input { display: none; }
/* 💡 追加：スタンプ用のファイル選択欄も非表示にします。
   （blade 側の style 属性で隠していたものを、役割どおり CSS に移動）
   ラベル「画像ファイルをアップロード」がクリックの受け口になります。 */
#stamp-file-input { display: none; }
.upload-tip { font-size: 0.8rem; color: #64748b; margin-top: 12px; margin-bottom: 0; }

/* タブシステム */
.sidebar-tabs { display: flex; border-bottom: 2px solid #e2e8f0; margin-bottom: 20px; gap: 4px; }
.tab-btn {
    flex: 1; padding: 10px 5px; border: none; background: transparent; font-size: 0.85rem;
    font-weight: bold; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.2s;
}
.tab-btn.active { color: #2a5298; border-bottom-color: #2a5298; }
.tab-content { display: none; animation: fadeIn 0.2s ease; }
.tab-content.active { display: block; }

/* コントロールパーツ */
.control-group { margin-bottom: 18px; }
.control-label { font-size: 0.85rem; font-weight: bold; color: #475569; display: block; margin-bottom: 8px; }
.type-selectors { display: flex; gap: 6px; }
.type-btn { flex: 1; text-align: center; cursor: pointer; }
.type-btn input { display: none; }
.type-btn span {
    display: block; padding: 8px 4px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.85rem; font-weight: bold; background: #f8fafc; color: #64748b; transition: all 0.15s;
}
.type-btn input:checked + span { background: #2a5298; color: #fff; border-color: #2a5298; }

.range-slider { width: 100%; cursor: pointer; }
.control-hr { border: 0; border-top: 1px dashed #e2e8f0; margin: 18px 0; }
.text-field { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; box-sizing: border-box; }
.style-pickers { display: flex; align-items: center; gap: 15px; }
.style-pickers input[type="color"] { width: 35px; height: 35px; border: none; padding: 0; cursor: pointer; background: transparent; }
.check-label { font-size: 0.85rem; font-weight: bold; color: #475569; cursor: pointer; display: flex; align-items: center; gap: 4px; }

.btn-main-action, .btn-sub-action {
    width: 100%; padding: 10px; font-weight: bold; border-radius: 6px; cursor: pointer; border: none; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
}
.btn-main-action { background: #2a5298; color: #fff; }
.btn-main-action:hover { background: #1e3c72; }
.btn-sub-action { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; font-size: 0.85rem; }
.btn-sub-action:hover { background: #e2e8f0; }
.btn-flex { display: flex; gap: 8px; }

.action-footer { display: flex; gap: 8px; margin-top: 25px; border-top: 1px solid #e2e8f0; padding-top: 15px; }
.btn-footer-tool {
    flex: 1; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font-size: 0.8rem; font-weight: bold; color: #64748b; cursor: pointer; transition: all 0.2s;
}
.btn-footer-tool:hover { background: #f8fafc; }
.btn-footer-tool.danger { color: #ef4444; border-color: #fca5a5; }
.btn-footer-tool.danger:hover { background: #fee2e2; }

.top-bar-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; }
/* 💡 追加：display 指定がある要素は hidden 属性だけでは隠れないため、明示的に非表示にします */
.top-bar-actions[hidden] { display: none; }
.btn-top-nav { background: none; border: none; color: #64748b; font-weight: bold; cursor: pointer; font-size: 0.9rem; }
.btn-top-nav:hover { color: #334155; }
.btn-download-action { background: #2ecc71; color: #fff; border: none; padding: 10px 24px; border-radius: 50px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(46,204,113,0.2); }
.btn-download-action:hover { background: #27ae60; }

/* 💡 キャンバスワークスペース：画面一杯にダイナミックに広がる設定 */
.canvas-wrapper {
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    min-height: 550px;
    height: calc(100vh - 180px); /* 画面の高さいっぱいまで拡大 */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
}

#editor-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* アスペクト比を保ったまま大画面いっぱいに描画 */
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    background: #fff;
    /* 💡 追加：スマートフォンで指を置いた瞬間に画面スクロール・拡大が始まり、
       なぞってもモザイクが引けませんでした。キャンバス上だけ既定の指操作を止めます
       （JS 側の touchstart / touchmove の preventDefault と対で必要） */
    touch-action: none;
}

/* 💡 ブラシモードごとのマウスカーソル変更 */
#editor-canvas.cursor-mosaic { cursor: crosshair; }
#editor-canvas.cursor-blur   { cursor: cell; }
#editor-canvas.cursor-eraser { cursor: alias; }
#editor-canvas.active-select { cursor: move; }

.empty-guide { text-align: center; color: #94a3b8; }
.empty-guide i { font-size: 3.5rem; margin-bottom: 10px; }
.empty-guide p { font-size: 0.95rem; font-weight: bold; margin: 0; }

/* 📱 モバイル・タブレットレスポンシブ */
@media (max-width: 900px) {
    .mosaic-editor-layout { flex-direction: column; }
    .editor-sidebar { width: 100%; min-width: 100%; position: static; }
    .canvas-wrapper { height: 450px; min-height: 350px; }
}

.toast-area { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-msg { background: rgba(30, 41, 59, 0.9); color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; font-weight: bold; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.toast-msg.show { opacity: 1; transform: translateY(0); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }