/* =========================================================================
   Kmp Smart Sheet v5.0 - Stylesheet
   ========================================================================= */

* { box-sizing: border-box; }

body {
    font-family: "Sarabun", "Segoe UI", Tahoma, Roboto, Arial, sans-serif;
    user-select: none;
    overflow: hidden;
}

input, textarea, select { user-select: text; }

/* Ribbon */
.tool-group {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-right: 8px;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.tool-group:last-child { border-right: none; }
.tool-btn {
    padding: 5px;
    border-radius: 6px;
    color: #334155;
    transition: all 0.15s ease;
}
.tool-btn:hover { background: #e0f2fe; color: #0891b2; }
.tool-btn:disabled { opacity: 0.3; }
.tool-btn-text {
    padding: 4px 9px;
    border-radius: 6px;
    color: #334155;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.tool-btn-text:hover { background: #ecfeff; border-color: #a5f3fc; color: #0891b2; }
.tool-active { background: #cffafe !important; color: #0891b2 !important; border-color: #67e8f9 !important; }
.tool-select {
    height: 28px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 6px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-select:focus { outline: none; border-color: #0891b2; box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2); }

/* Menus */
.menu-item {
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.menu-item:hover { background: #ecfeff; color: #0e7490; }
.menu-item.danger:hover { background: #fef2f2; color: #b91c1c; }
.menu-sep { margin: 4px 0; border-top: 1px solid #e2e8f0; }
.menu-label { padding: 4px 12px 2px; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }

/* Grid headers */
.grid-header {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    position: sticky;
    z-index: 10;
}
.grid-header.col-header {
    top: 0;
    height: 26px;
    line-height: 26px;
    cursor: s-resize;
}
/* Colour only: changing font-weight here would force a relayout of the whole table on every selection */
.grid-header.col-header.active-header,
.grid-header.row-header.active-header {
    background-color: #cffafe;
    color: #0e7490;
}
.grid-header.row-header {
    left: 0;
    width: 46px;
    min-width: 46px;
    line-height: 20px;
    z-index: 11;
    cursor: e-resize;
}
.grid-header.row-header.frozen { z-index: 14; }
.grid-header.corner-header {
    top: 0;
    left: 0;
    z-index: 20;
    width: 46px;
    height: 26px;
    cursor: pointer;
}
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 15;
}
.col-resizer:hover, .col-resizer.resizing { background-color: #0891b2; }

/* Cells */
.excel-cell {
    /* ตารางใช้ border-collapse: เส้นกว้างเท่ากัน แบบ solid ชนะแบบ ridge จึงทำให้เส้นที่ผู้ใช้วาดอยู่เหนือเส้นตารางเสมอ */
    border-right: 1px ridge #e2e8f0;
    border-bottom: 1px ridge #e2e8f0;
    font-size: 13px;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    background-color: #ffffff;
    outline: none;
    height: 24px;
    line-height: 20px;
    cursor: cell;
}
.excel-cell.frozen { box-shadow: inset 0 -1px 0 #cbd5e1; }
/* House style: square controls everywhere (no pill / rounded buttons) */
button, select, input, textarea, .rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-full, .rounded-t, .rounded-b { border-radius: 2px !important; }

/* Document look: no vertical gridlines, quiet row rules, roomier rows */
.doc-look .excel-cell { border-right-color: transparent; border-bottom-color: #f1f5f9; height: 30px; line-height: 24px; padding: 3px 10px; }
.doc-look .excel-cell:empty { border-bottom-color: transparent; }
.excel-cell.selected {
    outline: 2px solid #0891b2 !important;
    outline-offset: -2px;
}
/* Overlay tint keeps the cell's own fill colour visible */
.excel-cell.in-range {
    box-shadow: inset 0 0 0 1000px rgba(6, 182, 212, 0.12);
}
.excel-cell.copied-range {
    outline: 2px dashed #06b6d4 !important;
    outline-offset: -2px;
}
.excel-cell.formula-highlight-0 { outline: 2px dashed #0284c7 !important; outline-offset: -2px; box-shadow: inset 0 0 0 1000px rgba(2, 132, 199, 0.12); }
.excel-cell.formula-highlight-1 { outline: 2px dashed #f59e0b !important; outline-offset: -2px; box-shadow: inset 0 0 0 1000px rgba(245, 158, 11, 0.12); }
.excel-cell.formula-highlight-2 { outline: 2px dashed #06b6d4 !important; outline-offset: -2px; box-shadow: inset 0 0 0 1000px rgba(6, 182, 212, 0.12); }
.excel-cell.formula-highlight-3 { outline: 2px dashed #8b5cf6 !important; outline-offset: -2px; box-shadow: inset 0 0 0 1000px rgba(139, 92, 246, 0.12); }
.excel-cell.formula-highlight-4 { outline: 2px dashed #ec4899 !important; outline-offset: -2px; box-shadow: inset 0 0 0 1000px rgba(236, 72, 153, 0.12); }

.cell-editor { font-family: "Sarabun", Consolas, monospace; font-size: 13px; }

/* Fill handle (overlay positioned over the grid, never inserted into a cell) */
.fill-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    background-color: #0891b2;
    border: 1px solid #ffffff;
    cursor: crosshair;
    z-index: 12;
}

/* Data validation arrow */
.dv-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    font-size: 9px;
    line-height: 13px;
    text-align: center;
    color: #0891b2;
    cursor: pointer;
    z-index: 11;
}
.dv-indicator:hover { background-color: #0891b2; color: #ffffff; }

/* Sheet tabs */
.sheet-tab { border-top: 2px solid transparent; transition: background-color 0.15s ease; }
.sheet-tab.active {
    background-color: #ffffff;
    color: #0891b2;
    border-top-color: #0891b2;
    font-weight: 700;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

/* Autocomplete */
.autocomplete-item.active {
    background-color: #ecfeff;
    color: #0e7490;
    border-left: 3px solid #0891b2;
}

/* Scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 2D preview: thumbnails inside BOM cells and clickable part rectangles on scene images */
.excel-cell.th-img { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; }
/* Part shapes over the scene image. The fill is painted over a wide stroke (paint-order), so only the
   outer half of the stroke shows: a clean outline around the part's silhouette, no inner edges.
   The group's opacity makes overlapping faces of one part one even tint. Quiet until hovered / selected. */
.pv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pv-hs { cursor: pointer; opacity: 0; transition: opacity .12s; }
.pv-hs path { fill: #ffffff; stroke: #0f172a; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; vector-effect: non-scaling-stroke; pointer-events: all; }
.pv-hs.st-new { opacity: .32; }
.pv-hs.st-new path { fill: #22c55e; stroke: #15803d; }
.pv-hs.st-qty, .pv-hs.st-edit { opacity: .32; }
.pv-hs.st-qty path, .pv-hs.st-edit path { fill: #f59e0b; stroke: #b45309; }
.pv-hs:hover { opacity: .5; }
/* selected parts: shown through the selection layer (rest of the image dimmed, yellow ring on the outline) */
.pv-hs.on, .pv-hs.on:hover { opacity: 0; }
.pv-sel { pointer-events: none; }
.pv-dim { fill: #0f172a; opacity: .45; }
.pv-ring, .pv-ring-dark { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pv-ring-dark { stroke: #0f172a; stroke-width: 7px; opacity: .5; }
.pv-ring { stroke: #facc15; stroke-width: 4px; }
.pv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* PDF -> BOQ window (js/modules/pdf_boq.js): square, framed tables, numbers on one right edge */
body.pdf-drag::after { content: 'วางไฟล์ PDF เพื่อสร้าง BOQ'; position: fixed; inset: 12px; z-index: 70; display: flex; align-items: center; justify-content: center;
    border: 3px dashed #0f766e; background: rgba(240, 253, 250, .92); color: #115e59; font: 700 20px Sarabun, sans-serif; pointer-events: none; }
.pb-panel { width: 1180px; max-width: 96vw; height: 88vh; }
.pb-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid #cbd5e1; background: #f8fafc; font-size: 13px; }
.pb-foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid #cbd5e1; background: #f8fafc; font-size: 12px; }
.pb-btn { padding: 5px 14px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 600; font-size: 12px; }
.pb-btn:hover { background: #f1f5f9; }
.pb-primary { background: #0f766e; border-color: #0f766e; color: #fff; }
.pb-primary:hover { background: #115e59; }
.pb-input { height: 28px; border: 1px solid #cbd5e1; padding: 0 8px; font-size: 12px; background: #fff; width: 100%; }
.pb-input:focus, .pb-cell:focus { outline: none; border-color: #0f766e; }
.pb-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 190px; border: 2px dashed #94a3b8; background: #f8fafc; cursor: pointer; text-align: center; }
.pb-drop:hover { border-color: #0f766e; background: #f0fdfa; }
.pb-form { border-collapse: collapse; width: 100%; max-width: 620px; }
.pb-form th { width: 110px; text-align: left; font-weight: 600; color: #475569; padding: 5px 10px 5px 0; }
.pb-form td { padding: 4px 0; }
.pb-how { border: 1px solid #e2e8f0; padding: 10px 12px; color: #475569; line-height: 1.9; }
.pb-how b { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #0f766e; color: #fff; margin-right: 6px; font-size: 11px; }
.pb-bar { height: 8px; background: #e2e8f0; }
.pb-bar > div { height: 100%; width: 0; background: #0f766e; transition: width .3s; }
.pb-log { border: 1px solid #e2e8f0; height: 52vh; overflow-y: auto; font-size: 11px; line-height: 1.8; padding: 6px 10px; color: #334155; }
.pb-kind { display: inline-block; min-width: 92px; color: #0f766e; font-weight: 600; }
.pb-chip { border: 1px solid #cbd5e1; padding: 2px 8px; font-size: 11px; color: #334155; background: #fff; }
.pb-chip b { color: #64748b; font-weight: 600; margin-right: 2px; }
.pb-ok { border-color: #16a34a; color: #166534; background: #f0fdf4; font-weight: 700; }
.pb-bad { border-color: #dc2626; color: #991b1b; background: #fef2f2; font-weight: 700; }
.pb-warn { margin: 0 16px 8px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; font-size: 11px; padding: 6px 10px; line-height: 1.7; max-height: 96px; overflow-y: auto; }
.pb-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.pb-table th { position: sticky; top: 0; z-index: 1; background: #ecfdf5; color: #115e59; font-weight: 700; border: 1px solid #94a3b8; padding: 5px 4px; }
.pb-table td { border: 1px solid #cbd5e1; padding: 2px 4px; vertical-align: top; }
.pb-table tr.pb-band td { background: #f1f5f9; font-weight: 700; color: #115e59; padding: 5px 4px; }
.pb-table tr.pb-off td { opacity: .4; }
.pb-cell { width: 100%; border: 1px solid transparent; padding: 2px 4px; font-size: 12px; background: transparent; }
.pb-cell:hover { border-color: #e2e8f0; }
.pb-sub { font-size: 10px; color: #64748b; padding: 0 4px; }
.pb-db { display: block; text-align: right; padding: 3px 4px; color: #166534; font-family: ui-monospace, Consolas, monospace; }
.pb-page { display: inline-block; margin: 2px 3px 0 0; padding: 0 4px; border: 1px solid #99f6e4; color: #0f766e; font-size: 10px; cursor: zoom-in; }
.pb-page:hover { background: #0f766e; color: #fff; }
.pb-conf { display: inline-block; padding: 0 6px; font-size: 10px; font-weight: 700; }
.pb-high { color: #166534; background: #dcfce7; }
.pb-mid { color: #92400e; background: #fef3c7; }
.pb-low { color: #991b1b; background: #fee2e2; }
#pb-peek img { display: block; width: 100%; height: auto; }

/* =========================================================================
   Modern Pro & Dark Theme System
   ========================================================================= */

/* Formula range highlight box */
.formula-range-highlight {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    animation: pulseHighlight 1.8s infinite ease-in-out;
}
@keyframes pulseHighlight {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.65; }
}

/* Modern Pro View Mode */
body.kmp-modern-mode .ribbon {
    padding: 6px 12px;
    gap: 8px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
body.kmp-modern-mode .tool-group {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    gap: 3px;
}
body.kmp-modern-mode .tool-btn {
    border-radius: 6px;
    transition: all 0.15s ease;
}
body.kmp-modern-mode .tool-btn:hover {
    background: #ecfeff;
    color: #0891b2;
}
body.kmp-modern-mode .tool-btn-text {
    border-radius: 6px;
    padding: 4px 10px;
    transition: all 0.15s ease;
}
body.kmp-modern-mode .tool-select {
    border-radius: 6px;
    height: 30px;
}

/* Dark Theme Overrides */
body.dark-theme {
    background-color: #0f172a;
    color: #f1f5f9;
}
body.dark-theme .ribbon {
    background-color: #1e293b;
    border-bottom-color: #334155;
}
body.dark-theme .tool-group {
    background-color: #0f172a;
    border-color: #334155;
}
body.dark-theme .tool-btn {
    color: #cbd5e1;
}
body.dark-theme .tool-btn:hover {
    background-color: #334155;
    color: #38bdf8;
}
body.dark-theme .tool-btn-text {
    color: #e2e8f0;
    border-color: #334155;
}
body.dark-theme .tool-btn-text:hover {
    background-color: #334155;
}
body.dark-theme .tool-select {
    background-color: #1e293b;
    color: #f8fafc;
    border-color: #475569;
}
body.dark-theme #grid-container {
    background-color: #0b1120;
}
body.dark-theme #spreadsheet-table {
    background-color: #0f172a;
}
body.dark-theme .grid-header {
    background-color: #1e293b;
    color: #94a3b8;
    border-right-color: #334155;
    border-bottom-color: #334155;
}
body.dark-theme .grid-header.active-header {
    background-color: #155e75;
    color: #22d3ee;
}
body.dark-theme .excel-cell {
    background-color: #0f172a;
    color: #f1f5f9;
    border-right-color: #1e293b;
    border-bottom-color: #1e293b;
}
body.dark-theme .cell-selected {
    background-color: rgba(6, 182, 212, 0.18) !important;
}
body.dark-theme .cell-primary {
    outline-color: #06b6d4 !important;
}
body.dark-theme footer {
    background-color: #1e293b;
    border-top-color: #334155;
}
body.dark-theme .sheet-tab {
    background-color: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}
body.dark-theme .sheet-tab.active {
    background-color: #1e293b;
    color: #22d3ee;
    border-top-color: #22d3ee;
}
body.dark-theme #address-box {
    background-color: #0f172a;
    color: #22d3ee;
    border-color: #334155;
}
body.dark-theme #formula-bar {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: #334155;
}
body.dark-theme .dropdown-panel,
body.dark-theme #context-menu {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}
body.dark-theme .menu-item:hover {
    background-color: #334155;
    color: #22d3ee;
}
body.dark-theme .menu-sep {
    border-top-color: #334155;
}
body.dark-theme #preview-panel {
    background-color: #0f172a;
    border-left-color: #334155;
}
/* Hidden rows: a thin strip (select across it and choose "แสดงแถวที่ซ่อน" to show it again) */
#spreadsheet-table tr.row-hidden > td {
    height: 4px;
    max-height: 4px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    background-image: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 8px);
}
/* Recovery bar: which autosaved work came back at start, "ทำงานต่อ" / "เริ่มงานใหม่" (app.showRecoveryBar) */
#recovery-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 12px; font-size: 12.5px; line-height: 1.4;
    background: #fef3c7; color: #422006; border-bottom: 1px solid #f59e0b;
}
#recovery-bar .rc-icon { width: 16px; height: 16px; flex-shrink: 0; color: #b45309; }
#recovery-bar .rc-text { flex: 1; min-width: 240px; }
#recovery-bar .rc-name { font-weight: 700; }
#recovery-bar .rc-meta { color: #713f12; }
#recovery-bar button { padding: 3px 12px; border-radius: 4px; font-weight: 600; font-size: 12px; border: 1px solid transparent; cursor: pointer; }
#recovery-bar .rc-go { background: #0b8a96; color: #fff; }
#recovery-bar .rc-go:hover { background: #087580; }
#recovery-bar .rc-new { background: #fff; color: #422006; border-color: #d97706; }
#recovery-bar .rc-new:hover { background: #fffbeb; }
body.dark-theme #recovery-bar { background: #3a2a06; color: #fde68a; border-bottom-color: #b45309; }
body.dark-theme #recovery-bar .rc-icon { color: #fbbf24; }
body.dark-theme #recovery-bar .rc-meta { color: #fcd34d; }
body.dark-theme #recovery-bar .rc-new { background: #1e293b; color: #fde68a; border-color: #b45309; }