/* ======================================================================================
   APOLLO KATEGORI FORM & INPUT (apollo-forms.css)
   Description: Modern Form Inputs, Centralized Selects, Floating Labels, Custom Controls
   Author     : Apollo Enterprise Design System
   ====================================================================================== */

/* --------------------------------------------------------------------------------------
   1. BASE TEXT INPUTS & TEXTAREAS
   -------------------------------------------------------------------------------------- */
.form-control,
.form-control-apollo,
.form-control-custom,
.apollo-form-control {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

.form-control:focus,
.form-control-apollo:focus,
.form-control-custom:focus,
.apollo-form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    outline: none !important;
}

.form-control:disabled,
.form-control[readonly],
.form-control-apollo:disabled,
.form-control-apollo[readonly],
.form-control-custom:disabled,
.form-control-custom[readonly] {
    background-color: #f8fafc !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    border-color: #e2e8f0 !important;
}

/* --------------------------------------------------------------------------------------
   2. UNIVERSAL SELECT DROPDOWNS (CENTRALIZED & FULLY FUNCTIONAL)
   -------------------------------------------------------------------------------------- */
select.form-control,
select.form-control-apollo,
select.form-control-custom,
select.apollo-form-control,
select.custom-select,
select.apollo-select,
select.filter-input,
select.apollo-filter-select,
select.apollo-entries-select,
.apollo-portal-wrapper select,
.portal-main-card select,
.portal-cards-container select,
.card-body select,
form select {
    display: inline-block !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 1.5 !important;
    padding: 7px 34px 7px 12px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.15rem 1.15rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Select Focus State */
select.form-control:focus,
select.form-control-apollo:focus,
select.form-control-custom:focus,
select.apollo-form-control:focus,
select.custom-select:focus,
select.apollo-select:focus,
select.filter-input:focus,
select.apollo-filter-select:focus,
select.apollo-entries-select:focus,
.apollo-portal-wrapper select:focus,
form select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Small Select Dropdowns */
select.form-control-sm,
select.custom-select-sm,
select.apollo-select-sm,
select.filter-input.form-control-sm,
select.filter-input-sm {
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 28px 4px 10px !important;
    font-size: 0.82rem !important;
    background-position: right 0.5rem center !important;
    background-size: 0.95rem 0.95rem !important;
    border-radius: 6px !important;
}

/* Per-page Select Dropdown */
select.select-per-page,
.select-per-page {
    width: 76px !important;
    display: inline-block !important;
}

/* Borderless Header / Transparent Select */
select.border-0,
select.bg-transparent,
select.select-auto-height {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 22px !important;
    height: auto !important;
    min-height: unset !important;
    line-height: normal !important;
}

/* Disabled Select State */
select:disabled,
select.form-control:disabled,
select.custom-select:disabled {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.75 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* Option Items Styling */
select option {
    background-color: #ffffff;
    color: #1e293b;
    padding: 8px 12px;
    font-weight: normal;
}

/* --------------------------------------------------------------------------------------
   3. INPUT GROUPS & SELECT INTEGRATION
   -------------------------------------------------------------------------------------- */
.input-group {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

.input-group-prepend,
.input-group-append {
    display: flex !important;
    z-index: 3 !important;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
}

/* Seamless Rounded Corners in Input Groups */
.input-group > .form-control:not(:first-child),
.input-group > select:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > select:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-prepend > .input-group-text {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.input-group > .input-group-append > .input-group-text {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.input-group > .form-control,
.input-group > select,
.input-group > .custom-select {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
}

.input-group > .form-control:focus,
.input-group > select:focus,
.input-group > .custom-select:focus {
    z-index: 4 !important;
}

/* --------------------------------------------------------------------------------------
   4. FORM LABELS & SECTION DIVIDERS
   -------------------------------------------------------------------------------------- */
.form-group label,
.form-label-bold,
.form-label-custom {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
    letter-spacing: 0.2px !important;
}

.form-section-divider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 24px 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.form-section-divider .section-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

.form-section-divider .section-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* --------------------------------------------------------------------------------------
   5. SEARCH BOX TOOLBAR COMPONENTS
   -------------------------------------------------------------------------------------- */
.apollo-search-box-wrap {
    position: relative !important;
    width: 100% !important;
}

.apollo-search-box-wrap i {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 0.88rem !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.apollo-search-box-input {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 12px 8px 34px !important;
    font-size: 0.84rem !important;
    color: #1e293b !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.apollo-search-box-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    background: #ffffff !important;
}

/* --------------------------------------------------------------------------------------
   6. BUTTONS & ACTIONS
   -------------------------------------------------------------------------------------- */
.btn-apollo-primary,
.btn-primary {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
    transition: all 0.18s ease !important;
}
.btn-apollo-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    color: #ffffff !important;
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    transition: all 0.18s ease !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
    color: #ffffff !important;
}

.btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
    transition: all 0.18s ease !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    color: #ffffff !important;
}

.btn-light,
.btn-secondary {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}

/* Custom Checkbox & Radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* --------------------------------------------------------------------------------------
   7. DARK MODE FORM & SELECT OVERRIDES
   -------------------------------------------------------------------------------------- */
html.dark-mode .form-control,
body.dark-mode .form-control,
html.dark-mode .form-control-apollo,
body.dark-mode .form-control-apollo,
html.dark-mode .form-control-custom,
body.dark-mode .form-control-custom,
html.dark-mode .apollo-form-control,
body.dark-mode .apollo-form-control {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .form-control:focus,
body.dark-mode .form-control:focus,
html.dark-mode .form-control-apollo:focus,
body.dark-mode .form-control-apollo:focus,
html.dark-mode .form-control-custom:focus,
body.dark-mode .form-control-custom:focus {
    background-color: #1e293b !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
    color: #ffffff !important;
}

/* Dark Mode Selects */
html.dark-mode select.form-control,
html.dark-mode select.form-control-apollo,
html.dark-mode select.form-control-custom,
html.dark-mode select.apollo-form-control,
html.dark-mode select.custom-select,
html.dark-mode select.apollo-select,
html.dark-mode select.filter-input,
html.dark-mode select.apollo-filter-select,
html.dark-mode select.apollo-entries-select,
html.dark-mode .apollo-portal-wrapper select,
html.dark-mode select,
body.dark-mode select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

html.dark-mode select:focus,
body.dark-mode select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2360a5fa'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

html.dark-mode select option,
body.dark-mode select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .form-control:disabled,
body.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly],
body.dark-mode .form-control[readonly],
html.dark-mode select:disabled,
body.dark-mode select:disabled {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

html.dark-mode .form-group label,
body.dark-mode .form-group label,
html.dark-mode .form-label-bold,
body.dark-mode .form-label-bold,
html.dark-mode .form-label-custom,
body.dark-mode .form-label-custom {
    color: #e2e8f0 !important;
}

html.dark-mode .form-section-divider,
body.dark-mode .form-section-divider {
    border-bottom-color: #334155 !important;
}

html.dark-mode .form-section-divider .section-badge,
body.dark-mode .form-section-divider .section-badge {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
}

html.dark-mode .form-section-divider .section-title,
body.dark-mode .form-section-divider .section-title {
    color: #f1f5f9 !important;
}

html.dark-mode .input-group-prepend .input-group-text,
body.dark-mode .input-group-prepend .input-group-text,
html.dark-mode .input-group-append .input-group-text,
body.dark-mode .input-group-append .input-group-text {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .apollo-search-box-input,
body.dark-mode .apollo-search-box-input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
html.dark-mode .apollo-search-box-input:focus,
body.dark-mode .apollo-search-box-input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* ======================================================================================
   8. APOLLO COMPANY & ENTERPRISE CONFIGURATION STYLES
   ====================================================================================== */
/* Ensure the Company Form and portal content container never clip or trap scroll */
body.task-company,
body.task-company #layout,
body.task-company .apollo-portal-wrapper,
body.task-company .portal-cards-container,
body.task-company #portalMainCard {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.company-form-grid {
    display: grid !important;
    grid-template-columns: 7fr 5fr !important;
    gap: 20px !important;
    align-items: start !important;
}

@media (max-width: 991.98px) {
    .company-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.form-row-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.form-row-2-1 {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 14px !important;
}

@media (max-width: 576px) {
    .form-row-2col,
    .form-row-2-1 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Section Cards inside Company Form */
.apollo-section-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}

.apollo-section-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.apollo-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.apollo-section-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.apollo-section-body {
    padding: 20px !important;
}

.apollo-form-group {
    margin-bottom: 16px !important;
}

.apollo-form-group label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.apollo-form-group label .required {
    color: #ef4444 !important;
    margin-left: 2px !important;
    font-weight: 700 !important;
}

.apollo-form-group .form-hint {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Visual Asset Upload Card */
.asset-upload-card {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    transition: all 0.2s ease !important;
}

.asset-upload-card:hover {
    background: #f1f5f9 !important;
    border-color: #3b82f6 !important;
}

.asset-upload-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

.asset-upload-label {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.asset-preview-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.asset-preview-img {
    max-height: 64px !important;
    max-width: 140px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    padding: 4px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.btn-delete-asset {
    padding: 5px 10px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.btn-delete-asset:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    text-decoration: none !important;
}

/* Dark Mode Overrides for Company Form */
html.dark-mode .apollo-section-card,
body.dark-mode .apollo-section-card {
    background: #111827 !important;
    border-color: #1f293d !important;
}

html.dark-mode .apollo-section-header,
body.dark-mode .apollo-section-header {
    background: #162032 !important;
    border-bottom-color: #1f293d !important;
}

html.dark-mode .apollo-section-title,
body.dark-mode .apollo-section-title {
    color: #f8fafc !important;
}

html.dark-mode .apollo-form-group label,
body.dark-mode .apollo-form-group label {
    color: #94a3b8 !important;
}

html.dark-mode .asset-upload-card,
body.dark-mode .asset-upload-card {
    background: #162032 !important;
    border-color: #334155 !important;
}

html.dark-mode .asset-upload-card:hover,
body.dark-mode .asset-upload-card:hover {
    background: #1e293b !important;
    border-color: #60a5fa !important;
}

html.dark-mode .asset-upload-label,
body.dark-mode .asset-upload-label {
    color: #f1f5f9 !important;
}

html.dark-mode .asset-preview-container,
body.dark-mode .asset-preview-container {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .asset-preview-img,
body.dark-mode .asset-preview-img {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .btn-delete-asset,
body.dark-mode .btn-delete-asset {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark-mode .btn-delete-asset:hover,
body.dark-mode .btn-delete-asset:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------------------
   9. APOLLO QUOTATION & DETAIL SPECIFICATION STYLES
   -------------------------------------------------------------------------------------- */
.order-summary-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.summary-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    margin-bottom: 2px !important;
}

.summary-value {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
}

.form-section-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.detail-info-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    height: 100% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.detail-info-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.detail-info-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #64748b !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
}

.detail-info-value {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.table-detail-apollo {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.85rem !important;
}

.table-detail-apollo thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.table-detail-apollo tbody td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    color: #1e293b !important;
}

.table-detail-apollo tbody tr:hover:not(.inline-add-row) {
    background: #f8fafc !important;
}

.inline-add-row {
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border-bottom: 2px solid #a7f3d0 !important;
}

.inline-add-row td {
    padding: 8px 6px !important;
    vertical-align: middle !important;
}

.icon-add-wrapper {
    color: #059669 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.display-amount-wrapper {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: #059669 !important;
    text-align: right !important;
    padding: 6px 10px !important;
    background: #ffffff !important;
    border: 1px solid #d1fae5 !important;
    border-radius: 6px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.btn-save-item {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

.pricing-summary-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.pricing-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 0 !important;
    font-size: 0.88rem !important;
    border-bottom: 1px dashed #f1f5f9 !important;
}

.pricing-row.grand-total {
    border-top: 2px solid #2563eb !important;
    border-bottom: none !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
}

.item-thumb-img {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.15s ease !important;
}

.item-thumb-img:hover {
    transform: scale(1.15) !important;
}

.badge-apollo-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

.badge-soft-primary {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.badge-soft-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.badge-soft-warning {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.badge-soft-danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.badge-soft-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.badge-status-proses {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.badge-status-pengajuan {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.badge-status-selesai {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.badge-status-batal,
.badge-status-belum-acc {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

.badge-status-disetujui {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

.badge-status-menunggu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.badge-options-normal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}


/* Dark Mode Overrides for Quotation */
html.dark-mode .order-summary-box,
body.dark-mode .order-summary-box {
    background: #111827 !important;
    border-color: #1f293d !important;
}

html.dark-mode .summary-label,
body.dark-mode .summary-label {
    color: #94a3b8 !important;
}

html.dark-mode .summary-value,
body.dark-mode .summary-value {
    color: #f8fafc !important;
}

html.dark-mode .form-section-title,
body.dark-mode .form-section-title {
    color: #f8fafc !important;
    border-bottom-color: #1f293d !important;
}

html.dark-mode .detail-info-box,
body.dark-mode .detail-info-box {
    background: #111827 !important;
    border-color: #1f293d !important;
}

html.dark-mode .detail-info-label,
body.dark-mode .detail-info-label {
    color: #94a3b8 !important;
}

html.dark-mode .detail-info-value,
body.dark-mode .detail-info-value {
    color: #f8fafc !important;
}

html.dark-mode .table-detail-apollo thead th,
body.dark-mode .table-detail-apollo thead th {
    background: #162032 !important;
    color: #94a3b8 !important;
    border-bottom-color: #1f293d !important;
}

html.dark-mode .table-detail-apollo tbody td,
body.dark-mode .table-detail-apollo tbody td {
    color: #e2e8f0 !important;
    border-bottom-color: #1f293d !important;
}

html.dark-mode .table-detail-apollo tbody tr:hover:not(.inline-add-row),
body.dark-mode .table-detail-apollo tbody tr:hover:not(.inline-add-row) {
    background: #162032 !important;
}

html.dark-mode .inline-add-row,
body.dark-mode .inline-add-row {
    background: rgba(16, 185, 129, 0.12) !important;
    border-bottom-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark-mode .display-amount-wrapper,
body.dark-mode .display-amount-wrapper {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #34d399 !important;
}

html.dark-mode .pricing-summary-card,
body.dark-mode .pricing-summary-card {
    background: #111827 !important;
    border-color: #1f293d !important;
}

html.dark-mode .pricing-row,
body.dark-mode .pricing-row {
    border-bottom-color: #1f293d !important;
}

html.dark-mode .pricing-row.grand-total,
body.dark-mode .pricing-row.grand-total {
    border-top-color: #3b82f6 !important;
    color: #60a5fa !important;
}

html.dark-mode .badge-soft-primary,
body.dark-mode .badge-soft-primary {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode .badge-soft-success,
body.dark-mode .badge-soft-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark-mode .badge-soft-warning,
body.dark-mode .badge-soft-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .badge-soft-danger,
body.dark-mode .badge-soft-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .badge-soft-secondary,
body.dark-mode .badge-soft-secondary {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}