/* ============================================================ T-Go v1.0.3d -- Costsheet Color UI Polish Scope: visual only. No data writes / no DB changes. ============================================================ */ #costsheetPage{ --cs103d-sales:#7c3aed; --cs103d-sales-soft:#f5f3ff; --cs103d-sales-line:#ddd6fe; --cs103d-cs:#2563eb; --cs103d-cs-soft:#eff6ff; --cs103d-cs-line:#bfdbfe; --cs103d-template:#0f766e; --cs103d-template-soft:#ecfdf5; --cs103d-template-line:#99f6e4; --cs103d-sell:#d97706; --cs103d-sell-soft:#fffbeb; --cs103d-sell-line:#fde68a; --cs103d-est:#ca8a04; --cs103d-est-soft:#fefce8; --cs103d-est-line:#fef08a; --cs103d-cost:#16a34a; --cs103d-cost-soft:#f0fdf4; --cs103d-cost-line:#bbf7d0; --cs103d-approval:#be123c; --cs103d-approval-soft:#fff1f2; --cs103d-approval-line:#fecdd3; --cs103d-po:#0891b2; --cs103d-po-soft:#ecfeff; --cs103d-po-line:#a5f3fc; } /* Costsheet shell: reduce all-white feeling while keeping readability */ #costsheetPage .cs365-header{ background: radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 34%), linear-gradient(135deg,#ffffff 0%,#f0fdfa 48%,#eff6ff 100%) !important; border-bottom:1px solid #ccfbf1 !important; } #costsheetPage .cs365-command, #costsheetPage .cs365-tabs{ background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important; } #costsheetPage .cs365-content, #costsheetPage .cs-scope .main{ background:linear-gradient(180deg,#f8fafc 0%,#ffffff 180px) !important; } #costsheetPage #cs-main-container{ background:transparent !important; } /* Top Costsheet menu / command buttons */ #costsheetPage .cs103d-btn-sales, #costsheetPage .cs103d-btn-cs, #costsheetPage .cs103d-btn-template, #costsheetPage .cs103d-btn-money, #costsheetPage .cs103d-btn-primary{ border-width:1px !important; font-weight:750 !important; box-shadow:0 1px 2px rgba(15,23,42,.05) !important; } #costsheetPage .cs103d-btn-sales{background:var(--cs103d-sales-soft)!important;border-color:var(--cs103d-sales-line)!important;color:#5b21b6!important;} #costsheetPage .cs103d-btn-cs{background:var(--cs103d-cs-soft)!important;border-color:var(--cs103d-cs-line)!important;color:#1d4ed8!important;} #costsheetPage .cs103d-btn-template{background:var(--cs103d-template-soft)!important;border-color:var(--cs103d-template-line)!important;color:#0f766e!important;} #costsheetPage .cs103d-btn-money{background:var(--cs103d-sell-soft)!important;border-color:var(--cs103d-sell-line)!important;color:#92400e!important;} #costsheetPage .cs103d-btn-primary{background:#0f766e!important;border-color:#0f766e!important;color:#fff!important;} #costsheetPage .cs103d-btn-sales:hover{background:#ede9fe!important;border-color:#c4b5fd!important;} #costsheetPage .cs103d-btn-cs:hover{background:#dbeafe!important;border-color:#93c5fd!important;} #costsheetPage .cs103d-btn-template:hover{background:#ccfbf1!important;border-color:#5eead4!important;} #costsheetPage .cs103d-btn-money:hover{background:#fef3c7!important;border-color:#fcd34d!important;} /* Status Costsheet action bar */ #costsheetPage #approval-actionbar > div, #costsheetPage .cs103d-status-bar{ background:linear-gradient(90deg,#fff7ed 0%,#ffffff 54%,#eff6ff 100%) !important; border:1px solid #fed7aa !important; border-left:5px solid #f59e0b !important; box-shadow:0 2px 10px rgba(15,23,42,.06) !important; } #costsheetPage #approval-actionbar strong{color:#7c2d12!important;} #costsheetPage #approval-actionbar .btn:not(.btn-g){background:#fff7ed!important;border-color:#fed7aa!important;color:#9a3412!important;} #costsheetPage #approval-actionbar .btn.btn-g{background:#ea580c!important;border-color:#ea580c!important;color:#fff!important;} /* Detail tabs: sell / estimate / actual cost / approval / PO */ #costsheetPage .tabs{ gap:8px !important; flex-wrap:wrap !important; margin:12px 0 14px !important; background:transparent !important; border:0 !important; } #costsheetPage .tabs .tab, #costsheetPage .cs365-tabs button{ border:1px solid #e5e7eb !important; border-radius:999px !important; min-height:34px !important; padding:0 14px !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; } #costsheetPage .tabs .tab[data-tab="sell"], #costsheetPage .cs103d-tab-sell{background:var(--cs103d-sell-soft)!important;border-color:var(--cs103d-sell-line)!important;color:#92400e!important;} #costsheetPage .tabs .tab[data-tab="estimate"], #costsheetPage .cs103d-tab-estimate{background:var(--cs103d-est-soft)!important;border-color:var(--cs103d-est-line)!important;color:#854d0e!important;} #costsheetPage .tabs .tab[data-tab="cost"], #costsheetPage .cs103d-tab-cost{background:var(--cs103d-cost-soft)!important;border-color:var(--cs103d-cost-line)!important;color:#166534!important;} #costsheetPage .tabs .tab[data-tab="ap"], #costsheetPage .cs103d-tab-approval{background:var(--cs103d-approval-soft)!important;border-color:var(--cs103d-approval-line)!important;color:#9f1239!important;} #costsheetPage .tabs .tab[data-tab="po"], #costsheetPage .cs103d-tab-po{background:var(--cs103d-po-soft)!important;border-color:var(--cs103d-po-line)!important;color:#0e7490!important;} #costsheetPage .tabs .tab.on, #costsheetPage .cs365-tabs button.on{ color:#fff!important; transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.13)!important; } #costsheetPage .tabs .tab.on[data-tab="sell"],#costsheetPage .cs103d-tab-sell.on{background:#d97706!important;border-color:#d97706!important;} #costsheetPage .tabs .tab.on[data-tab="estimate"],#costsheetPage .cs103d-tab-estimate.on{background:#ca8a04!important;border-color:#ca8a04!important;} #costsheetPage .tabs .tab.on[data-tab="cost"],#costsheetPage .cs103d-tab-cost.on{background:#16a34a!important;border-color:#16a34a!important;} #costsheetPage .tabs .tab.on[data-tab="ap"],#costsheetPage .cs103d-tab-approval.on{background:#be123c!important;border-color:#be123c!important;} #costsheetPage .tabs .tab.on[data-tab="po"],#costsheetPage .cs103d-tab-po.on{background:#0891b2!important;border-color:#0891b2!important;} /* Costsheet inner section color rails */ #costsheetPage #tab-sell .twrap, #costsheetPage .c67-section.c67-sell, #costsheetPage .cs103d-panel-sell{border:1px solid var(--cs103d-sell-line)!important;border-left:5px solid var(--cs103d-sell)!important;background:#fff!important;} #costsheetPage #tab-estimate .twrap, #costsheetPage .c67-section.c67-est, #costsheetPage .cs103d-panel-estimate{border:1px solid var(--cs103d-est-line)!important;border-left:5px solid var(--cs103d-est)!important;background:#fff!important;} #costsheetPage #tab-cost .twrap, #costsheetPage .c67-section.c67-det, #costsheetPage .cs103d-panel-cost{border:1px solid var(--cs103d-cost-line)!important;border-left:5px solid var(--cs103d-cost)!important;background:#fff!important;} #costsheetPage #tab-sell thead th{background:#fff7ed!important;color:#92400e!important;border-bottom-color:#fed7aa!important;} #costsheetPage #tab-estimate thead th{background:#fefce8!important;color:#854d0e!important;border-bottom-color:#fde68a!important;} #costsheetPage #tab-cost thead th{background:#f0fdf4!important;color:#166534!important;border-bottom-color:#bbf7d0!important;} /* Add-row and inline action buttons inside each colored section */ #costsheetPage #tab-sell .addrow{background:#fffbeb!important;color:#92400e!important;border-color:#fde68a!important;} #costsheetPage #tab-estimate .addrow{background:#fefce8!important;color:#854d0e!important;border-color:#fef08a!important;} #costsheetPage #tab-cost .addrow{background:#f0fdf4!important;color:#166534!important;border-color:#bbf7d0!important;} #costsheetPage #tab-sell .addrow:hover{background:#fef3c7!important;} #costsheetPage #tab-estimate .addrow:hover{background:#fef9c3!important;} #costsheetPage #tab-cost .addrow:hover{background:#dcfce7!important;} /* Cards and metric blocks */ #costsheetPage .pal, #costsheetPage .pav{font-variant-numeric:tabular-nums;} #costsheetPage .card, #costsheetPage .fc, #costsheetPage .policy-panel, #costsheetPage .ptcard{ box-shadow:0 2px 10px rgba(15,23,42,.06)!important; } #costsheetPage .policy-panel{ background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%)!important; border-left:4px solid #6366f1!important; } #costsheetPage input.ci, #costsheetPage select.ci, #costsheetPage textarea.ci{ border-color:#cbd5e1!important; background:#fff!important; } #costsheetPage input.ci:focus, #costsheetPage select.ci:focus, #costsheetPage textarea.ci:focus{ outline:2px solid rgba(37,99,235,.16)!important; border-color:#60a5fa!important; } /* v1.034: เมื่อ Cost Sheet ถูกล็อก (อนุมัติแล้ว/รออนุมัติ) ช่องกรอกเป็น readonly/disabled ให้ดูชัดว่าแก้ไขไม่ได้ — พื้นเทา ตัวอักษรจาง เส้นประ */ #costsheetPage input.ci[readonly], #costsheetPage textarea.ci[readonly], #costsheetPage input.ci:disabled, #costsheetPage select.ci:disabled, #costsheetPage select.ci[disabled], #costsheetPage textarea.ci:disabled{ background:#f1f5f9!important; color:#64748b!important; border-color:#cbd5e1!important; border-style:dashed!important; cursor:not-allowed!important; box-shadow:none!important; } #costsheetPage input.ci[readonly]:focus, #costsheetPage select.ci[disabled]:focus, #costsheetPage textarea.ci[readonly]:focus{ outline:none!important; border-color:#cbd5e1!important; } /* v1.034: รางสีของแต่ละ section ให้อยู่ที่กล่องนอก (.c67-section) เท่านั้น เอารางส้ม/รางสีของ .twrap ด้านในออก กันเส้นซ้อนกัน 2 เส้น */ #costsheetPage #tab-sell .c67-section .twrap, #costsheetPage #tab-estimate .c67-section .twrap, #costsheetPage #tab-cost .c67-section .twrap{ border:none!important; border-radius:0!important; } @media(max-width:900px){ #costsheetPage .tabs .tab{flex:1 1 46%;justify-content:center;} } /* ============================================================ v1.001: ปุ่มกรอง (filter pills) ใน T-Costsheet ที่ถูกเลือก ให้เด่นชัดแบบ T-Quote — พื้นทึบ + ตัวอักษรขาว + เงา (ใช้ !important กันโดน override) ============================================================ */ #costsheetPage .fb .btn.on, #costsheetPage main .fb .btn.on{ background:#16a34a !important; color:#fff !important; border-color:#16a34a !important; font-weight:800 !important; box-shadow:0 3px 10px rgba(22,163,74,0.40) !important; } #costsheetPage .fb .btn.on .cs-chip-n, #costsheetPage main .fb .btn.on .cs-chip-n{ background:rgba(255,255,255,0.30) !important; color:#fff !important; } /* ปุ่ม "รอทำ" (todo chip) ที่เลือกอยู่ ให้เด่นเช่นกัน */ #costsheetPage .fb .btn.cs-chip-todo.on{ background:#0f766e !important; border-color:#0f766e !important; }