/* 價格牌編輯器樣式 - 老人友善版本 */
/* 設計原則：
   1. 高對比度 - 深色文字配淺色背景
   2. 較大字體和間距
   3. 溫和的顏色（避免刺眼）
   4. 清晰的邊界
   5. 更大的點擊區域
*/

/* === 根級變數定義 === */
:root {
    --bg-primary: #f5f3ef;
    /* 米白色主背景 */
    --bg-secondary: #ffffff;
    /* 純白次要背景 */
    --bg-sidebar: #e8e4dc;
    /* 側欄淡棕色 */
    --border-color: #b8a99a;
    /* 溫暖棕邊框 */
    --text-primary: #2d2a26;
    /* 深棕色文字 */
    --text-secondary: #5a5248;
    /* 次要文字 */
    --accent-primary: #1e5a8a;
    /* 深藍強調色 */
    --accent-hover: #2874a6;
    /* 懸停藍色 */
    --success: #2e7d32;
    /* 成功綠色 */
    --error: #c62828;
    /* 錯誤紅色 */
    --warning: #e65100;
    /* 警告橙色 */
}

/* === 全局字體放大 === */
html {
    font-size: 18px;
    /* 基礎字體放大 */
}

body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 玻璃態卡片 -> 實體卡片 */
.glass-card {
    background: var(--bg-sidebar);
    backdrop-filter: none;
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 工具按鈕 - 緊湊版 */
.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

.tool-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tool-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.tool-btn span {
    font-size: 0.875rem;
}

/* 圖層項目 - 緊湊版 */
.layer-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: grab;
    user-select: none;
    transition: all 0.2s;
}

.layer-item:hover {
    background: #f0ebe3;
    border-color: var(--accent-primary);
}

.layer-item.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    border-width: 2px;
    color: white;
    font-weight: 600;
}

.layer-item:active {
    cursor: grabbing;
}

.layer-item .layer-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.layer-item .layer-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-item .layer-visibility {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.layer-item .layer-visibility:hover {
    color: var(--text-primary);
}

/* 拖曳手把 */
.layer-drag-handle {
    opacity: 0.5;
    margin-right: 4px;
    font-size: 12px;
    cursor: grab;
    color: var(--text-secondary);
}

.layer-item:hover .layer-drag-handle {
    opacity: 1;
    color: var(--accent-primary);
}

.layer-item.active .layer-drag-handle {
    color: rgba(255, 255, 255, 0.7);
}

.layer-item.dragging {
    opacity: 0.6;
    background: var(--accent-primary) !important;
    color: white !important;
}

.layer-item.drag-over {
    border-top: 3px solid var(--accent-primary);
    padding-top: 6px;
}

/* Canvas 容器 */
#main-canvas {
    border: 3px solid var(--border-color);
    background: white;
}

/* 專案卡片 - 更大更清晰 */
.project-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.project-card:hover {
    background: #f0ebe3;
    border-color: var(--accent-primary);
    transform: translateX(4px);
}

.project-thumbnail {
    width: 7rem;
    height: 7rem;
    background: #e8e4dc;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 專案卡片網格 */
.project-card-grid {
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s;
    cursor: pointer;
}

.project-card-grid:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 吸附輔助線 */
#guide-h,
#guide-v {
    box-shadow: 0 0 8px rgba(30, 90, 138, 0.8);
    background-color: var(--accent-primary);
}

/* Toast 樣式 - 更高對比度 */
#toast {
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
}

#toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#toast.success {
    background: var(--success);
    color: white;
}

#toast.error {
    background: var(--error);
    color: white;
}

#toast.info {
    background: var(--accent-primary);
    color: white;
}

/* 滾動條樣式 */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 動畫 - 減少閃爍 */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(30, 90, 138, 0.2);
    }

    50% {
        box-shadow: 0 0 25px rgba(30, 90, 138, 0.4);
    }
}

.canvas-active {
    animation: pulse-glow 3s infinite;
}

/* 畫廊卡片 */
.gallery-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    transition: all 0.2s;
}

.gallery-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.gallery-card.ring-2 {
    border-color: var(--accent-primary);
    border-width: 3px;
}

/* 拖放區高亮 */
.drag-over {
    border-color: var(--accent-primary) !important;
    background: rgba(30, 90, 138, 0.1) !important;
}

/* 資料夾項目 */
.folder-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.15s;
    text-align: left;
}

.folder-item:hover {
    background: rgba(30, 90, 138, 0.15);
    color: var(--accent-primary);
}

.folder-item.active {
    background: var(--accent-primary);
    color: white;
}

.folder-item-wrapper {
    position: relative;
}

.folder-actions {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    gap: 0.5rem;
}

.folder-actions button {
    padding: 0.5rem;
    border-radius: 0.25rem;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.folder-actions button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* 素材標籤 */
.material-tab {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}

.material-tab.active {
    background: var(--accent-primary) !important;
    color: white !important;
}

.material-tab:not(.active):hover {
    background: #e0dbd3;
}

/* === 覆蓋 Tailwind 暗色類別 === */
.bg-gradient-to-br {
    background: var(--bg-primary) !important;
}

.from-slate-900,
.via-purple-900,
.to-slate-900 {
    background: none !important;
}

/* 頂部導航欄 */
header,
nav,
.bg-slate-800,
.bg-slate-900 {
    background: var(--bg-sidebar) !important;
    border-bottom: 2px solid var(--border-color);
}

/* 側欄 */
aside,
.bg-slate-800\/80 {
    background: var(--bg-sidebar) !important;
}

/* 按鈕樣式覆蓋 */
.bg-indigo-600,
.bg-purple-600,
.bg-violet-600 {
    background: var(--accent-primary) !important;
}

.bg-indigo-600:hover,
.bg-purple-600:hover,
.bg-violet-600:hover {
    background: var(--accent-hover) !important;
}

.hover\:bg-indigo-700:hover {
    background: var(--accent-hover) !important;
}

/* 文字顏色覆蓋 */
.text-slate-300,
.text-slate-400,
.text-gray-300,
.text-gray-400 {
    color: var(--text-secondary) !important;
}

.text-white {
    color: var(--text-primary) !important;
}

/* 標題強調 */
h1,
h2,
h3,
.text-xl,
.text-2xl,
.text-3xl {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* 輸入框樣式 */
input,
textarea,
select {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 90, 138, 0.2);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* 模態框樣式 */
.modal,
[class*="modal"] {
    background: var(--bg-secondary);
}

/* 確認對話框 */
#confirm-modal>div {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
}

/* 刪除按鈕保持紅色警示 */
.bg-red-600,
.bg-red-500 {
    background: var(--error) !important;
}

.hover\:bg-red-700:hover {
    background: #a31f1f !important;
}

/* 成功按鈕 */
.bg-green-600,
.bg-green-500 {
    background: var(--success) !important;
}

/* 灰色按鈕 */
.bg-slate-600,
.bg-slate-700 {
    background: var(--text-secondary) !important;
}

/* 邊框覆蓋 */
.border-slate-700,
.border-slate-600,
.border-gray-700 {
    border-color: var(--border-color) !important;
}

/* 分隔線 */
hr,
.divide-y>* {
    border-color: var(--border-color) !important;
}

/* 圖標顏色 */
svg {
    color: inherit;
}

/* 頂部按鈕樣式（確保可見） */
header button,
nav button {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

header button:hover,
nav button:hover {
    background: var(--accent-primary) !important;
    color: white !important;
    border-color: var(--accent-primary) !important;
}

/* 專案名稱輸入框 */
#project-name {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* 小節標題 */
.text-sm {
    font-size: 0.95rem !important;
}

.text-xs {
    font-size: 0.875rem !important;
}

/* 確保所有 Tailwind 深色背景被覆蓋 */
[class*="bg-slate"],
[class*="bg-gray"] {
    background: var(--bg-sidebar) !important;
}