/*
 * GrapesJS カスタムテーマ — Signact Server
 * デフォルトの grapes.min.css を上書きし、
 * Signact のカラーパレット（Emerald / Slate）に合わせる。
 */

/* ── 全体フォント ── */
.gjs-one-bg,
.gjs-two-color,
.gjs-pn-panel,
.gjs-blocks-c,
.gjs-sm-sector,
.gjs-trt-traits,
.gjs-category-title,
.gjs-layer-name,
.gjs-clm-tags {
   font-family: 'Inter', system-ui, sans-serif;
}

/* ── パネル背景を Slate 系に ── */
.gjs-one-bg {
   background-color: #1e293b; /* slate-800 */
}

.gjs-two-color {
   color: #e2e8f0; /* slate-200 */
}

.gjs-three-bg {
   background-color: #334155; /* slate-700 */
}

.gjs-four-color,
.gjs-four-color-h:hover {
   color: #10b981; /* emerald-500 */
}

/* ── コマンドバー・オプションバー ── */
.gjs-pn-commands,
.gjs-pn-options {
   overflow: visible !important;
}

/* ── ツールバー・パネルボタン ── */
.gjs-pn-btn {
   color: #94a3b8; /* slate-400 */
   border-radius: 6px;
   transition: all 0.15s ease;
}

.gjs-pn-btn:hover {
   color: #e2e8f0;
   background-color: #334155;
}

.gjs-pn-btn.gjs-pn-active {
   color: #10b981; /* emerald-500 */
   background-color: rgba(16, 185, 129, 0.1);
}

/* ── 右パネル ── */
.gjs-pn-views-container {
   background-color: #1e293b;
   /*
    * 構造: .gjs-pn-views(タブ行, absolute, 42px) が上に重なり、
    *        views-container は padding-top:42px でその分を確保している。
    *        → padding をスクロールバーが侵食するため margin に置き換える。
    *        134px = header(56) + pageTab(36) + viewsTab(42)
    */
   padding-top: 0 !important;
   margin-top: 42px !important;
   height: calc(100vh - 134px) !important;
}

.gjs-pn-views {
   background-color: #1e293b;
}

/* リサイズハンドル（#grapes-editor 直下に配置、右パネルの position を変更しない） */
.gjs-resize-handle {
   position: fixed;
   top: 92px; /* header 56px + tab bar 36px */
   width: 6px;
   height: calc(100vh - 92px);
   cursor: col-resize;
   z-index: 100;
   transition: background-color 0.15s ease;
}

.gjs-resize-handle:hover,
.gjs-resize-handle:active {
   background-color: #10b981;
}

/* 右パネルのタブアイコン行 — 右寄せ、Gap をコマンドバーと統一 */
.gjs-pn-views {
   display: flex;
   justify-content: flex-end;
   padding: 4px 6px;
}

.gjs-pn-views .gjs-pn-btn {
   margin: 0 3px;
}

/* ── ブロックパネル ── */
.gjs-blocks-c {
   background-color: #1e293b;
}

.gjs-block {
   background-color: #334155;
   border: 1px solid #475569;
   border-radius: 8px;
   color: #e2e8f0;
   transition: all 0.15s ease;
}

.gjs-block:hover {
   border-color: #10b981;
   box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.gjs-block svg {
   fill: #94a3b8;
}

.gjs-block:hover svg {
   fill: #10b981;
}

.gjs-block-label {
   font-size: 11px;
   font-weight: 500;
   color: #cbd5e1; /* slate-300 */
}

/* ── カテゴリ見出し ── */
.gjs-title,
.gjs-category-title {
   background-color: #0f172a; /* slate-900 */
   color: #e2e8f0;
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 0.02em;
   border-bottom: 1px solid #334155;
   padding: 10px 12px;
}

/* ── セレクターマネージャ ── */
.gjs-clm-tags {
   background-color: #1e293b;
   padding: 8px;
}

.gjs-clm-tags .gjs-sm-title {
   color: #94a3b8;
}

.gjs-clm-tag {
   background-color: #334155;
   border-radius: 4px;
   color: #e2e8f0;
}

.gjs-clm-tag:hover {
   background-color: #475569;
}

/* ── スタイルマネージャ ── */
.gjs-sm-sector {
   border-bottom: 1px solid #334155;
}

.gjs-sm-sector-title {
   background-color: #0f172a;
   color: #e2e8f0;
   font-weight: 600;
   font-size: 12px;
   padding: 10px 12px;
   border-bottom: 1px solid #334155;
}

.gjs-sm-properties {
   background-color: #1e293b;
   padding: 8px 10px;
}

.gjs-sm-label {
   color: #94a3b8;
   font-size: 11px;
   font-weight: 500;
}

/* 日本語ラベルの溢れ防止 */
.gjs-field select {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

.gjs-radio-item label {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   font-size: 10px;
}

/* display select の幅を日本語ラベルに合わせて拡張 */
.gjs-sm-property__display .gjs-field select {
   min-width: 100% !important;
}

/* 単位ドロップダウンの矢印と単位テキストの被り防止 */
.gjs-field-units select {
   padding-right: 14px !important;
   min-width: 40px !important;
}

/* スライダー（不透明度等）のトラック色を見やすく */
.gjs-field-range input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
}

.gjs-field-range input[type="range"]::-webkit-slider-runnable-track {
   background: #475569;
   height: 4px;
   border-radius: 2px;
}

.gjs-field-range input[type="range"]::-moz-range-track {
   background: #475569;
   height: 4px;
   border-radius: 2px;
   border: none;
}

.gjs-field-range input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #10b981;
   margin-top: -5px;
   cursor: pointer;
}

.gjs-field-range input[type="range"]::-moz-range-thumb {
   width: 14px;
   height: 14px;
   border: none;
   border-radius: 50%;
   background: #10b981;
   cursor: pointer;
}

.gjs-field {
   background-color: #0f172a;
   border: 1px solid #475569;
   border-radius: 4px;
   color: #e2e8f0;
   transition: border-color 0.15s ease;
}

.gjs-field:focus-within {
   border-color: #10b981;
}

.gjs-field input,
.gjs-field select,
.gjs-field textarea {
   color: #e2e8f0;
}

.gjs-field-arrows {
   color: #64748b;
}

.gjs-field-color-picker {
   border-radius: 3px;
}

/* ── トレイトマネージャ ── */
.gjs-trt-traits {
   background-color: #1e293b;
   padding: 8px;
}

.gjs-trt-trait {
   padding: 6px 0;
}

.gjs-trt-trait .gjs-label {
   color: #94a3b8;
   font-size: 11px;
}

/* ── レイヤーマネージャ ── */
.gjs-layers {
   background-color: #1e293b;
}

.gjs-layer {
   background-color: transparent;
   border-bottom: 1px solid #334155;
}

.gjs-layer:hover {
   background-color: rgba(16, 185, 129, 0.05);
}

.gjs-layer.gjs-selected {
   background-color: rgba(16, 185, 129, 0.1);
}

.gjs-layer-name {
   color: #e2e8f0;
   font-size: 12px;
}

/* ── デバイスマネージャ ── */

/* デバイスパネル — preset-webpage のアイコン表示用 */
.gjs-pn-panel.gjs-pn-devices-c {
   width: auto !important;
   display: flex !important;
   align-items: center !important;
   flex-wrap: nowrap !important;
}

/* ── ズームコントロール ── */
.gjs-zoom-control {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   margin-left: 12px;
   padding: 2px 6px;
   border-left: 1px solid #334155;
}

.gjs-zoom-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border: none;
   border-radius: 4px;
   background: transparent;
   color: #94a3b8;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.15s ease;
   line-height: 1;
}

.gjs-zoom-btn:hover {
   color: #e2e8f0;
   background-color: #334155;
}

.gjs-zoom-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 80px;
   height: 4px;
   background: #334155;
   border-radius: 2px;
   outline: none;
   cursor: pointer;
}

.gjs-zoom-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #10b981;
   cursor: pointer;
   transition: transform 0.1s ease;
}

.gjs-zoom-slider::-webkit-slider-thumb:hover {
   transform: scale(1.3);
}

.gjs-zoom-slider::-moz-range-thumb {
   width: 12px;
   height: 12px;
   border: none;
   border-radius: 50%;
   background: #10b981;
   cursor: pointer;
}

.gjs-zoom-label {
   min-width: 38px;
   text-align: center;
   color: #94a3b8;
   font-size: 11px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   cursor: pointer;
   border-radius: 4px;
   padding: 2px 4px;
   transition: all 0.15s ease;
   user-select: none;
}

.gjs-zoom-label:hover {
   color: #10b981;
   background-color: rgba(16, 185, 129, 0.1);
}

/* ── キャンバスフレーム ── */
.gjs-cv-canvas {
   background-color: #475569;
}

/* パン移動カーソル */
.gjs-cv-canvas.gjs-canvas-grab {
   cursor: grab !important;
}

.gjs-cv-canvas.gjs-canvas-grab iframe {
   pointer-events: none;
}

.gjs-cv-canvas.gjs-canvas-grabbing {
   cursor: grabbing !important;
}

.gjs-cv-canvas.gjs-canvas-grabbing iframe {
   pointer-events: none;
}

/* パントグルボタン — デバイスアイコンと横並び */
.gjs-pan-toggle {
   margin-left: 4px;
}

/* ── コンポーネント選択時のハイライト ── */
.gjs-comp-selected {
   outline: 2px solid #10b981 !important;
   outline-offset: -2px;
}

.gjs-highlighter {
   outline: 2px solid #10b981;
   outline-offset: -2px;
}

/* ── ツールバー（コンポーネント上部の操作バー） ── */
.gjs-toolbar {
   background-color: #0f172a;
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gjs-toolbar-item {
   color: #94a3b8;
   padding: 4px 6px;
   border-radius: 4px;
   transition: all 0.15s ease;
}

.gjs-toolbar-item:hover {
   color: #10b981;
   background-color: #334155;
}

/* ── リサイズハンドル ── */
.gjs-resizer-h {
   border: 2px solid #10b981;
   border-radius: 3px;
   background-color: #10b981;
}

/* ── モーダル ── */
.gjs-mdl-dialog {
   background-color: #1e293b;
   border-radius: 12px;
   border: 1px solid #334155;
}

.gjs-mdl-header {
   background-color: #0f172a;
   border-bottom: 1px solid #334155;
   border-radius: 12px 12px 0 0;
   color: #e2e8f0;
   font-weight: 600;
}

.gjs-mdl-content {
   color: #e2e8f0;
}

.gjs-mdl-btn-close {
   color: #94a3b8;
}

.gjs-mdl-btn-close:hover {
   color: #f87171;
}

/* ── コードエディタ（インポート/エクスポート） ── */
.gjs-cm-editor {
   background-color: #0f172a;
   border-radius: 6px;
}

.CodeMirror {
   background-color: #0f172a !important;
   color: #e2e8f0 !important;
}

/* ── 空状態テキスト ── */
.gjs-sm-sector .gjs-sm-properties .gjs-sm-property .gjs-empty-state,
.gjs-sm-sector .gjs-empty-state {
   color: #64748b;
   font-size: 12px;
}

/* ── スクロールバー（右パネル内） ── */
.gjs-pn-views-container::-webkit-scrollbar,
.gjs-blocks-c::-webkit-scrollbar {
   width: 6px;
}

.gjs-pn-views-container::-webkit-scrollbar-track,
.gjs-blocks-c::-webkit-scrollbar-track {
   background: transparent;
}

.gjs-pn-views-container::-webkit-scrollbar-thumb,
.gjs-blocks-c::-webkit-scrollbar-thumb {
   background-color: #475569;
   border-radius: 3px;
}

.gjs-pn-views-container::-webkit-scrollbar-thumb:hover,
.gjs-blocks-c::-webkit-scrollbar-thumb:hover {
   background-color: #64748b;
}