/* moved from root style.css */
body { font-family: 'Inter', sans-serif; }
        .file-input-label { transition: all 0.2s ease-in-out; position: relative; }
        .file-input-label.loaded { background-color: #22c55e !important; border-color: #16a34a !important; color: white; cursor: pointer; }
        .kpi-card { transition: transform 0.2s ease-in-out; }
        .kpi-card:hover { transform: translateY(-5px); }
        .details-table th, .details-table td { padding: 12px 15px; text-align: left; vertical-align: middle; }
        .details-table thead th { background-color: #f3f4f6; font-weight: 600; color: #374151; }
        .details-table tbody tr:nth-child(even) { background-color: #f9fafb; }
        .order-total-row td, .pendapatan-total-row td { background-color: #e5e7eb; font-weight: bold; color: #1f2937; }
        .export-btn { background-color: #10b981; color: white; padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 500; transition: background-color 0.2s; }
        .export-btn:hover { background-color: #059669; }
        .sortable-header { cursor: pointer; position: relative; user-select: none; }
        .sort-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: #9ca3af; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
        .sortable-header:hover .sort-arrow { opacity: 1; }
        .sortable-header.sorted .sort-arrow { opacity: 1; fill: #1f2937; }
        .tooltip-container { position: relative; display: inline-flex; align-items: center; }
        .tooltip-icon { cursor: pointer; margin-left: 8px; }
        .tooltip-text { visibility: hidden; width: 280px; background-color: #555; color: #fff; text-align: left; border-radius: 6px; padding: 8px 10px; position: absolute; z-index: 30; bottom: 125%; left: 50%; margin-left: -140px; opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; font-weight: normal; line-height: 1.5; }
        .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }
        .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; }
        .op-cost-label { background-color: #e0e7ff; color: #4338ca; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 9999px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 4px; }
        .op-cost-label:hover { background-color: #c7d2fe; }
        .op-cost-label.loaded { background-color: #16a34a; color: white; cursor: pointer; }
        #comparison-section, .tab-content { transition: opacity 0.3s ease-in-out, max-height 0.5s ease-in-out; }
        .details-section { 
            overflow: hidden; 
            /* ... sisa properti ... */
        }
        #comparison-section { max-height: 0; opacity: 0; overflow: hidden; }
        #comparison-section.active { max-height: 1000px; opacity: 1; }
        .details-btn.active { background-color: #4f46e5 !important; color: white !important; }
        .tab-btn {
            border-bottom-width: 2px;
            border-color: transparent;
            color: #6b7280; /* text-gray-500 */
        }
        .tab-btn:hover {
            border-color: #d1d5db; /* border-gray-300 */
            color: #374151; /* text-gray-700 */
        }
        .tab-btn.active { 
            border-color: #4f46e5; /* border-indigo-600 */
            color: #4f46e5; /* text-indigo-600 */
        }
        .drag-over { border-color: #4f46e5 !important; background-color: #eef2ff !important; }
        .quick-modal-input::-webkit-input-placeholder { color: #cbd5e1; }
        .quick-modal-input::-moz-placeholder { color: #cbd5e1; }
        .quick-modal-input:-ms-input-placeholder { color: #cbd5e1; }
        .quick-modal-input:-moz-placeholder { color: #cbd5e1; }
        .row-fade-out {
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            opacity: 0;
            transform: translateX(20px);
        }