/* ========================================================================
   theme-1b-dark-cyan.css
   ダークシアンテーマ (Claude design)
   既存の base.css / side_button.css / bootstrap 等の後に読み込む前提。
   drag&drop (moveable.js) に関わる要素のサイズ・position は一切変更しない。
   ======================================================================== */

:root {
  --dc-bg: #0b0f14;
  --dc-bg-canvas-area: #10161d;
  --dc-panel: #151c25;
  --dc-panel-alt: #1b2430;
  --dc-border: #26323f;
  --dc-border-soft: #1f2933;

  --dc-cyan: #22d3ee;
  --dc-cyan-dim: #0e94ac;
  --dc-cyan-glow: rgba(34, 211, 238, 0.35);

  --dc-text: #e6edf3;
  --dc-text-secondary: #9fb0bf;
  --dc-text-muted: #8c9caa; /* WCAG AA (4.5:1) を満たすよう明るさを調整 */

  --dc-success: #34d399;
  --dc-warning: #fbbf24;
  --dc-danger: #f87171;

  --dc-tank: #38bdf8;
  --dc-healer: #4ade80;
  --dc-dps: #f87171;
  --dc-neutral: #94a3b3;
}

html, body {
  background-color: var(--dc-bg);
  color: var(--dc-text);
}

body.bg-secondary {
  background-color: var(--dc-bg) !important;
}

/* スクロールバー */
* {
  scrollbar-color: var(--dc-cyan-dim) var(--dc-panel);
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--dc-panel);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--dc-cyan-dim);
  border-radius: 6px;
}

/* ---- header ---- */
header.bg-light {
  background: linear-gradient(180deg, var(--dc-panel-alt), var(--dc-panel)) !important;
  border-bottom: 1px solid var(--dc-border);
  box-shadow: 0 1px 12px rgba(34, 211, 238, 0.08);
}

.logo p {
  color: var(--dc-text);
}
.logo .text-danger {
  color: var(--dc-cyan) !important;
}

.header_link {
  color: var(--dc-text-secondary);
}
.header_link:hover {
  color: var(--dc-cyan);
}

/* ---- 汎用パネル (汎用ギミック / 限定ギミック) ---- */
.general_gimmick,
.limit_gimmick {
  background-color: var(--dc-panel) !important;
  border: 1px solid var(--dc-border) !important;
  border-style: solid !important;
  color: var(--dc-text);
}

.general_gimmick {
  border-left: 3px solid var(--dc-success) !important;
}

.limit_gimmick {
  border-left: 3px solid var(--dc-warning) !important;
}

.general_gimmick p,
.limit_gimmick p {
  color: var(--dc-text);
}

/* ---- ボタン全般 (bootstrap 上書き) ---- */
.btn-secondary {
  background-color: var(--dc-panel-alt);
  border-color: var(--dc-border);
  color: var(--dc-text);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--dc-cyan-dim);
  border-color: var(--dc-cyan);
  color: #04141a;
}

.btn-success.gimmick {
  background-color: var(--dc-panel-alt);
  border-color: var(--dc-success);
  color: var(--dc-success);
}
.btn-success.gimmick:hover {
  background-color: var(--dc-success);
  color: #04140c;
}

.btn-danger {
  background-color: var(--dc-panel-alt);
  border-color: var(--dc-danger);
  color: var(--dc-danger);
}
.btn-danger:hover {
  background-color: var(--dc-danger);
  color: #1a0505;
}

/* ---- 入力系 ----
   Bootstrap の <link> がテーマCSSより後に読み込まれる構成のため、
   .form-control は !important で確実に上書きする。 */
#roomName,
.form-control {
  background-color: var(--dc-panel-alt) !important;
  border: 1px solid var(--dc-border) !important;
  color: var(--dc-text) !important;
}
#roomName::placeholder,
.form-control::placeholder {
  color: var(--dc-text-muted) !important;
}
#roomName:focus,
.form-control:focus {
  background-color: var(--dc-panel-alt) !important;
  border-color: var(--dc-cyan) !important;
  color: var(--dc-text) !important;
  box-shadow: 0 0 0 0.2rem var(--dc-cyan-glow) !important;
}

#joiningCount,
#joiningRoomName {
  color: var(--dc-text-secondary) !important;
}

/* ---- select2 ----
   select2 本体の <link> がテーマCSSより後に読み込まれる構成のため、
   背景色・枠線・文字色は !important で確実に上書きする。 */
.select2-container--default .select2-selection--single {
  background-color: var(--dc-panel-alt) !important;
  border: 1px solid var(--dc-border) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--dc-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--dc-text-secondary) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  filter: invert(1) grayscale(1);
}
.select2-dropdown {
  background-color: var(--dc-panel) !important;
  border: 1px solid var(--dc-border) !important;
}
.select2-search--dropdown .select2-search__field {
  background-color: var(--dc-panel-alt) !important;
  border: 1px solid var(--dc-border) !important;
  color: var(--dc-text) !important;
}
.select2-results__option {
  color: var(--dc-text) !important;
}
.select2-results__option:nth-child(odd) {
  background-color: var(--dc-panel) !important;
}
.select2-results__option:nth-child(even) {
  background-color: var(--dc-panel-alt) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--dc-cyan-dim) !important;
  color: #04141a !important;
}
.select2-results__option[aria-disabled="true"] {
  color: var(--dc-text-muted) !important;
}

/* ---- キャンバスエリア ---- */
.canvas {
  border: 1px solid var(--dc-border) !important;
  background-color: var(--dc-bg-canvas-area) !important;
  box-shadow: 0 0 0 1px var(--dc-border), 0 8px 24px rgba(0, 0, 0, 0.45);
}

.my_canvas {
  border: 1px solid transparent !important;
}

.canvas-toolbar {
  background-color: rgba(11, 15, 20, 0.82);
  border-color: var(--dc-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

#undo,
#redo,
#paintModeToggle,
#operationModeToggle,
#marqueeModeToggle {
  color: var(--dc-text-secondary);
  background-color: transparent;
  border-color: var(--dc-border);
}
.paint_mode.active,
#paintModeToggle.active,
#operationModeToggle.active,
#marqueeModeToggle.active {
  background-color: var(--dc-cyan-dim);
  border-color: var(--dc-cyan);
  color: #04141a;
}

/* マーキー(範囲)選択の枠 */
.marquee-box {
  position: absolute;
  border: 1px dashed var(--dc-cyan);
  background-color: rgba(34, 211, 238, 0.15);
  pointer-events: none;
  z-index: 9998;
}

/* マーキー選択されたオブジェクトの強調(clip-pathで切り抜かれた線にも効くようdrop-shadowを使う) */
.marquee-selected {
  filter: drop-shadow(0 0 3px var(--dc-cyan)) drop-shadow(0 0 3px var(--dc-cyan));
}

input[type="color"]#colorPicker {
  background-color: var(--dc-panel-alt);
  border: 1px solid var(--dc-border);
}

/* ---- side_button 系ロールカラー(縁のみ着色、背面はダークパネル) ---- */
.buttonFrame {
  background-color: var(--dc-panel-alt) !important;
  border: 1px solid var(--dc-border) !important;
  border-style: solid !important;
}

.tank {
  border-left: 3px solid var(--dc-tank) !important;
}
.healer {
  border-left: 3px solid var(--dc-healer) !important;
}
.dps {
  border-left: 3px solid var(--dc-dps) !important;
}
.field-marker,
.aoe {
  border-left: 3px solid var(--dc-neutral) !important;
}
.text,
.status {
  background-color: var(--dc-panel-alt) !important;
  border-left: 3px solid var(--dc-cyan) !important;
}

.add_icon {
  color: var(--dc-text-secondary);
}
.plusButton:hover .add_icon {
  color: var(--dc-cyan);
}

/* ---- 色調整パネル ---- */
.color-adjust-panel {
  background-color: rgba(21, 28, 37, 0.97) !important;
  border: 1px solid var(--dc-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--dc-cyan-glow);
  color: var(--dc-text);
}
.color-panel-header {
  border-bottom: 1px solid var(--dc-border) !important;
}
.color-panel-title {
  color: var(--dc-text);
}
.color-panel-close {
  color: var(--dc-text-secondary) !important;
}
.color-panel-close:hover {
  color: var(--dc-text) !important;
  background-color: var(--dc-panel-alt) !important;
}
.color-label {
  color: var(--dc-text-secondary);
}
.color-input {
  background-color: var(--dc-panel-alt);
  border: 1px solid var(--dc-border) !important;
  color: var(--dc-text);
}
.color-reset-btn {
  background-color: var(--dc-panel-alt) !important;
  border: 1px solid var(--dc-cyan-dim) !important;
  color: var(--dc-cyan);
}
.color-reset-btn:hover {
  background-color: var(--dc-cyan-dim) !important;
  color: #04141a;
}
.color-panel-divider {
  background-color: var(--dc-border) !important;
}
.clip-preview-container {
  background-color: var(--dc-panel-alt) !important;
}
#clipPreviewCanvas {
  border: 2px solid var(--dc-border) !important;
  background-color: var(--dc-bg-canvas-area) !important;
}
.clip-control-hint {
  color: var(--dc-text-muted) !important;
}

/* ---- ギミックパネル ラベル ---- */
.gimmick-panel-label {
  color: var(--dc-text-secondary);
}
.gimmick-panel-label {
  text-transform: uppercase;
}

/* ---- ピルボタン ---- */
.btn-pill {
  background-color: var(--dc-panel-alt);
  border-color: var(--dc-border);
  color: var(--dc-text);
}
.btn-pill:hover {
  border-color: var(--dc-cyan);
  color: var(--dc-cyan);
}

.btn-pill-primary {
  background-color: var(--dc-cyan-dim);
  border-color: var(--dc-cyan);
  color: #04141a;
}
.btn-pill-primary:hover {
  background-color: var(--dc-cyan);
  color: #04141a;
}

.btn-pill-cyan {
  background-color: transparent;
  border-color: var(--dc-cyan-dim);
  color: var(--dc-cyan);
}
.btn-pill-cyan:hover {
  background-color: var(--dc-cyan-dim);
  color: #04141a;
}

.btn-pill-amber {
  background-color: transparent;
  border-color: var(--dc-warning);
  color: var(--dc-warning);
}
.btn-pill-amber:hover {
  background-color: var(--dc-warning);
  color: #1a1204;
}

.btn-pill-outline-danger {
  background-color: transparent;
  border-color: var(--dc-danger);
  color: var(--dc-danger);
}
.btn-pill-outline-danger:hover {
  background-color: var(--dc-danger);
  color: #1a0505;
}

/* ---- アイコン追加パネル: タブ ---- */
.icon-tab {
  background-color: var(--dc-panel);
  border-color: var(--dc-border);
  color: var(--dc-text-secondary);
}
.icon-tab:hover {
  color: var(--dc-cyan);
  border-color: var(--dc-cyan-dim);
}
.icon-tab.active {
  background-color: var(--dc-cyan-dim);
  border-color: var(--dc-cyan);
  color: #04141a;
}
.icon-tab-content.active {
  background-color: var(--dc-panel);
  border-color: var(--dc-border);
}

/* ---- footer ---- */
footer {
  background-color: var(--dc-panel) !important;
  border-top: 1px solid var(--dc-border);
  color: var(--dc-text-secondary) !important;
}
footer .copyright {
  color: var(--dc-text-muted);
}

/* ---- toast ---- */
.toast-container .toast {
  background-color: var(--dc-panel) !important;
  color: var(--dc-text) !important;
  border: 1px solid var(--dc-border) !important;
}