/* =========================================================
   CHIKWIN
   CLEAN CORPORATE MASTER STYLE
========================================================= */

:root {
    --green-dark: #17472f;
    --green: #3d7350;
    --green-soft: #eef5f0;

    --bg: #f7f8f6;
    --white: #ffffff;

    --text: #26352c;
    --secondary: #6a756d;
    --muted: #949d96;

    --border: #e1e6e2;

    --success: #347048;
    --success-bg: #edf5ef;

    --warning: #a37222;
    --warning-bg: #fff4df;

    --danger: #ad5148;
    --danger-bg: #faecea;
}


/* RESET */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: Inter, Arial, sans-serif;
}


/* APP */

.app-wrapper {
    min-height: 100vh;
}

.main-content {
    width: calc(100% - 250px);
    min-height: 100vh;
    margin-left: 250px;
}


/* SIDEBAR */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;

    width: 250px;
    height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--green-dark);
    color: #ffffff;

    z-index: 1000;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 24px 20px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text h2 {
    margin: 0;
    color: #ffffff;

    font-size: 19px;
    font-weight: 700;
}

.brand-text span {
    display: block;
    margin-top: 4px;

    font-size: 10px;
    line-height: 1.4;

    color: rgba(255,255,255,.62);
}

.sidebar-menu {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 18px 12px;
}

.sidebar-section-title {
    margin: 0 10px 10px;

    font-size: 11px;
    color: rgba(255,255,255,.44);
}

.sidebar-link {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 44px;

    padding: 10px 13px;
    margin-bottom: 4px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;

    color: rgba(255,255,255,.75);
}

.sidebar-link i {
    width: 18px;
    text-align: center;

    font-size: 12px;
}

.sidebar-link:hover {
    background: rgba(255,255,255,.06);
    color: #ffffff;
}

.sidebar-link.active {
    background: #ffffff;
    color: var(--green-dark);

    font-weight: 600;
}

.sidebar-footer {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 17px 20px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.system-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #9bc083;
}

.sidebar-footer strong {
    display: block;

    font-size: 11px;
    font-weight: 500;
}

.sidebar-footer small {
    display: block;

    margin-top: 2px;

    font-size: 9px;

    color: rgba(255,255,255,.5);
}


/* TOPBAR */

.topbar {
    min-height: 66px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    background: #ffffff;

    border-bottom: 1px solid var(--border);
}

.topbar-system-name {
    font-size: 12px;
    color: var(--secondary);
}

.topbar-user {
    display: flex;
    align-items: center;

    gap: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green-soft);

    color: var(--green-dark);

    font-size: 11px;
    font-weight: 600;
}

.user-info strong {
    display: block;

    font-size: 11px;
    font-weight: 600;
}

.user-info span {
    display: block;

    margin-top: 2px;

    font-size: 9px;

    color: var(--muted);
}


/* PAGE */

.page-content {
    padding: 30px 32px;
}

.page-heading,
.simple-page-header,
.module-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 32px;
}

.page-heading h1,
.simple-page-header h1,
.module-page-header h1 {
    margin: 0;

    font-size: 24px;
    font-weight: 600;

    color: var(--green-dark);
}

.page-heading p,
.simple-page-header p,
.module-page-header p {
    max-width: 700px;

    margin: 7px 0 0;

    font-size: 13px;
    line-height: 1.6;

    color: var(--secondary);
}


/* PERIOD */

.period-box,
.simple-period {
    min-width: 150px;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #ffffff;
}

.period-box span,
.simple-period span {
    display: block;

    font-size: 10px;

    color: var(--muted);
}

.period-box strong,
.simple-period strong {
    display: block;

    margin-top: 3px;

    font-size: 11px;
    font-weight: 600;
}


/* SECTION */

.content-section {
    margin-bottom: 42px;
}

.section-title {
    margin-bottom: 16px;
}

.section-title h2 {
    margin: 0;

    font-size: 18px;
    font-weight: 600;

    color: var(--green-dark);
}

.section-title p {
    max-width: 760px;

    margin: 6px 0 0;

    font-size: 12px;
    line-height: 1.55;

    color: var(--secondary);
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 16px;
}

.section-heading-row .section-title {
    margin-bottom: 0;
}


/* OVERVIEW */

.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}

.overview-item {
    padding: 18px;

    border-right: 1px solid var(--border);
}

.overview-item:last-child {
    border-right: none;
}

.overview-item span {
    display: block;

    font-size: 11px;

    color: var(--secondary);
}

.overview-item strong {
    display: block;

    margin-top: 7px;

    font-size: 18px;
    font-weight: 600;

    color: var(--green-dark);
}

.overview-item small {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    color: var(--muted);
}

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

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


/* COMPARISON */

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}

.comparison-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.comparison-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 14px;

    border-bottom: 1px solid var(--border);
}

.comparison-header h3 {
    margin: 0;

    font-size: 15px;
    font-weight: 600;
}

.comparison-header span {
    display: block;

    margin-top: 4px;

    font-size: 10px;

    color: var(--muted);
}

.comparison-header > strong {
    white-space: nowrap;

    font-size: 15px;
    font-weight: 600;

    color: var(--green);
}

.comparison-list {
    margin-top: 4px;
}

.comparison-list > div {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    padding: 11px 0;

    border-bottom: 1px solid #edf0ed;
}

.comparison-list > div:last-child {
    border-bottom: none;
}

.comparison-list span {
    font-size: 11px;

    color: var(--secondary);
}

.comparison-list strong {
    font-size: 11px;
    font-weight: 600;
}


/* SUMMARY GRID */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 14px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}

.summary-grid > div {
    padding: 13px 16px;

    border-right: 1px solid var(--border);
}

.summary-grid > div:last-child {
    border-right: none;
}

.summary-grid span {
    display: block;

    font-size: 10px;

    color: var(--secondary);
}

.summary-grid strong {
    display: block;

    margin-top: 4px;

    font-size: 12px;
    font-weight: 600;
}


/* INFO */

.info-box {
    margin-top: 14px;

    padding: 13px 15px;

    border-radius: 8px;

    background: #f3f7f4;
}

.info-box strong {
    display: block;

    font-size: 10px;
    font-weight: 600;
}

.info-box p {
    margin: 4px 0 0;

    font-size: 10px;
    line-height: 1.55;

    color: var(--secondary);
}


/* SELECT */

.select-box,
.doc-region-selector,
.production-simple-selector,
.production-farm-selector,
.fulfillment-region-selector,
.distribution-region-selector {
    min-width: 210px;
}

.select-box label,
.doc-region-selector label,
.production-simple-selector label,
.production-farm-selector label,
.fulfillment-region-selector label,
.distribution-region-selector label {
    display: block;

    margin-bottom: 6px;

    font-size: 10px;

    color: var(--secondary);
}

.select-box select,
.doc-region-selector select,
.production-simple-selector select,
.production-farm-selector select,
.fulfillment-region-selector select,
.distribution-region-selector select {
    width: 100%;

    padding: 10px 11px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #ffffff;

    color: var(--text);

    font-size: 12px;
}


/* TABLE */

.table-container,
.simple-table-panel,
.doc-table-panel,
.production-table-panel,
.production-harvest-panel,
.production-rphu-panel,
.distribution-area-panel {
    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}

table {
    width: 100%;

    border-collapse: collapse;
}

table th {
    padding: 12px 14px;

    text-align: left;

    background: #f8f9f8;

    border-bottom: 1px solid var(--border);

    font-size: 11px;
    font-weight: 600;

    color: var(--secondary);
}

table td {
    padding: 13px 14px;

    border-bottom: 1px solid var(--border);

    font-size: 11.5px;

    color: #4d5951;
}

table tbody tr:last-child td {
    border-bottom: none;
}

table td strong {
    font-weight: 600;

    color: var(--text);
}


/* BOTTOM SUMMARY */

.bottom-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 12px;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.bottom-summary span {
    display: block;

    font-size: 10px;

    color: var(--secondary);
}

.bottom-summary strong {
    display: block;

    margin-top: 4px;

    font-size: 13px;
    font-weight: 600;
}

.bottom-summary small {
    font-size: 9px;

    color: var(--success);
}


/* STATUS */

.status,
.simple-status,
.production-status,
.distribution-status {
    width: 112px;
    min-width: 112px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 600;
}

.status.success,
.simple-status.normal,
.production-status.normal,
.distribution-status.normal {
    background: var(--success-bg);
    color: var(--success);
}

.status.warning,
.simple-status.warning,
.production-status.warning,
.distribution-status.warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.status.danger,
.simple-status.danger,
.production-status.danger {
    background: var(--danger-bg);
    color: var(--danger);
}


/* GENERIC CARD */

.dashboard-card {
    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow: none;
}


/* =========================================================
   HOME SUPPORT
========================================================= */

.summary-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}

.summary-item {
    padding: 20px;

    border-right: 1px solid var(--border);
}

.summary-item:last-child {
    border-right: none;
}

.summary-item span {
    display: block;

    font-size: 11px;

    color: var(--secondary);
}

.summary-item strong {
    display: block;

    margin-top: 8px;

    font-size: 20px;
    font-weight: 600;

    color: var(--green-dark);
}

.summary-item small {
    display: block;

    margin-top: 5px;

    font-size: 10px;

    color: var(--muted);
}

.operation-list {
    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}

.operation-row {
    display: grid;

    grid-template-columns:
        190px
        1fr
        130px;

    align-items: center;

    gap: 20px;

    padding: 15px 18px;

    border-bottom: 1px solid var(--border);
}

.operation-row:last-child {
    border-bottom: none;
}

.operation-name {
    font-size: 12px;
    font-weight: 600;
}

.operation-description {
    font-size: 11px;
    line-height: 1.55;

    color: var(--secondary);
}


/* =========================================================
   OTHER PAGE SUPPORT
========================================================= */

.production-simple-kpi-grid,
.fulfillment-kpi-grid,
.fulfillment-factor-grid,
.distribution-kpi-grid,
.distribution-channel-grid,
.doc-summary-grid,
.feed-simple-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 28px;
}

.production-simple-kpi-grid {
    grid-template-columns: repeat(5, 1fr);
}

.production-simple-kpi,
.fulfillment-kpi-card,
.fulfillment-factor-card,
.distribution-kpi-card,
.distribution-channel-card,
.doc-summary-card,
.feed-simple-card {
    padding: 18px;

    border: none;
    border-right: 1px solid var(--border);

    border-radius: 0;
}

.production-simple-kpi:last-child,
.fulfillment-kpi-card:last-child,
.fulfillment-factor-card:last-child,
.distribution-kpi-card:last-child,
.distribution-channel-card:last-child,
.doc-summary-card:last-child,
.feed-simple-card:last-child {
    border-right: none;
}

.production-simple-kpi span,
.fulfillment-kpi-card span,
.fulfillment-factor-card span,
.distribution-kpi-card span,
.distribution-channel-card span,
.doc-summary-card span,
.feed-simple-card span {
    display: block;

    font-size: 11px;

    color: var(--secondary);
}

.production-simple-kpi strong,
.fulfillment-kpi-card strong,
.distribution-kpi-card strong,
.distribution-channel-card strong,
.doc-summary-card strong,
.feed-simple-card strong {
    display: block;

    margin-top: 7px;

    font-size: 18px;
    font-weight: 600;

    color: var(--green-dark);
}

.production-simple-kpi small,
.fulfillment-kpi-card small,
.fulfillment-factor-card small,
.distribution-kpi-card small,
.distribution-channel-card small,
.doc-summary-card small,
.feed-simple-card small {
    display: block;

    margin-top: 4px;

    font-size: 9px;

    color: var(--muted);
}


/* PRODUCT CARDS */

.distribution-clean-product-grid,
.distribution-product-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}

.distribution-clean-product-card,
.distribution-product-card,
.fulfillment-option-card,
.production-farm-detail,
.feed-comparison-panel,
.fulfillment-coverage-panel,
.fulfillment-result-panel,
.doc-plan-panel,
.distribution-allocation-panel {
    border-radius: 10px !important;
}


/* HIDE OLD DECORATIVE LABELS */

.simple-section-title > span,
.section-eyebrow,
.card-eyebrow,
.doc-plan-label,
.fulfillment-result-label,
.production-farm-detail-top > div > span {
    display: none !important;
}


/* HIDE OLD FLOWS */

.feed-doc-flow,
.production-simple-flow,
.fulfillment-simple-flow,
.distribution-flow,
.simple-module-grid {
    display: none !important;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .overview-grid,
    .summary-grid,
    .summary-panel,
    .production-simple-kpi-grid,
    .fulfillment-kpi-grid,
    .fulfillment-factor-grid,
    .distribution-kpi-grid,
    .distribution-channel-grid,
    .doc-summary-grid,
    .feed-simple-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 850px) {

    .page-heading,
    .simple-page-header,
    .module-page-header,
    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .select-box,
    .doc-region-selector,
    .production-simple-selector,
    .production-farm-selector,
    .fulfillment-region-selector,
    .distribution-region-selector {
        width: 100%;
    }

    .operation-row {
        grid-template-columns: 1fr;
    }

    .distribution-clean-product-grid,
    .distribution-product-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .sidebar {
        width: 210px;
    }

    .main-content {
        width: calc(100% - 210px);

        margin-left: 210px;
    }

    .page-content {
        padding: 22px;
    }

    .overview-grid,
    .summary-grid,
    .summary-panel,
    .production-simple-kpi-grid,
    .fulfillment-kpi-grid,
    .fulfillment-factor-grid,
    .distribution-kpi-grid,
    .distribution-channel-grid,
    .doc-summary-grid,
    .feed-simple-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   PRODUKSI FARM - FINAL CLEAN LAYOUT
========================================================= */


/* RINGKASAN PRODUKSI */

.production-overview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}

.production-overview-item {
    padding: 18px;

    border-right: 1px solid var(--border);
}

.production-overview-item:last-child {
    border-right: none;
}

.production-overview-item span {
    display: block;

    font-size: 11px;

    color: var(--secondary);
}

.production-overview-item strong {
    display: block;

    margin-top: 7px;

    font-size: 18px;
    font-weight: 600;

    color: var(--green-dark);
}

.production-overview-item small {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    color: var(--muted);
}


/* =========================================================
   FARM DETAIL
========================================================= */

.farm-detail-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}


/* HEADER */

.farm-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--border);
}

.farm-detail-header h3 {
    margin: 0;

    font-size: 17px;
    font-weight: 600;

    color: var(--green-dark);
}

.farm-detail-header > div > span {
    display: block;

    margin-top: 5px;

    font-size: 10px;

    color: var(--secondary);
}


/* DATA UTAMA */

.farm-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 16px;

    border: 1px solid var(--border);
    border-radius: 9px;

    overflow: hidden;
}

.farm-detail-grid > div {
    min-height: 72px;

    padding: 13px 14px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.farm-detail-grid > div:nth-child(4n) {
    border-right: none;
}

.farm-detail-grid > div:nth-last-child(-n+4) {
    border-bottom: none;
}

.farm-detail-grid span {
    display: block;

    font-size: 10px;

    color: var(--muted);
}

.farm-detail-grid strong {
    display: block;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 600;

    color: var(--text);
}


/* KONDISI KANDANG */

.farm-condition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 12px;

    border: 1px solid var(--border);
    border-radius: 9px;

    overflow: hidden;
}

.farm-condition-grid > div {
    min-height: 80px;

    padding: 13px 14px;

    border-right: 1px solid var(--border);
}

.farm-condition-grid > div:last-child {
    border-right: none;
}

.farm-condition-grid span {
    display: block;

    font-size: 10px;

    color: var(--muted);
}

.farm-condition-grid strong {
    display: block;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 600;

    color: var(--text);
}

.farm-condition-grid small {
    display: block;

    margin-top: 4px;

    font-size: 9px;
    line-height: 1.4;

    color: var(--secondary);
}


/* CATATAN KONDISI */

.farm-condition-note {
    margin-top: 14px;

    padding: 13px 15px;

    background: #f3f7f4;

    border-radius: 8px;
}

.farm-condition-note strong {
    display: block;

    font-size: 10.5px;
    font-weight: 600;
}

.farm-condition-note p {
    margin: 4px 0 0;

    font-size: 10px;
    line-height: 1.55;

    color: var(--secondary);
}


/* =========================================================
   TABLE STATUS
========================================================= */

.table-container td:last-child {
    text-align: center;
}

.table-container th:last-child {
    text-align: center;
}


/* Semua status sama ukuran */

.table-container .status,
.farm-detail-card .status {
    width: 112px;
    min-width: 112px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   SPACING KHUSUS PRODUKSI
========================================================= */

.content-section + .content-section {
    margin-top: 6px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .production-overview {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .farm-detail-grid,
    .farm-condition-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .farm-detail-grid > div,
    .farm-condition-grid > div {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .farm-detail-grid > div:nth-child(2n),
    .farm-condition-grid > div:nth-child(2n) {
        border-right: none;
    }

}


@media (max-width: 700px) {

    .production-overview,
    .farm-detail-grid,
    .farm-condition-grid {
        grid-template-columns: 1fr;
    }

    .farm-detail-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .farm-detail-grid > div,
    .farm-condition-grid > div {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

}
/* =========================================================
   PEMENUHAN PERMINTAAN
========================================================= */

.demand-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.demand-summary-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px 16px;
}

.demand-summary-card span {
    display: block;
    font-size: 11px;
    color: var(--secondary);
    margin-bottom: 8px;
}

.demand-summary-card strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.2;
}

.demand-summary-card small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--muted);
}

.highlight-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
}

.highlight-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary);
}

.highlight-panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--green-dark);
}

.highlight-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--secondary);
}

.demand-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.demand-option-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.option-head {
    margin-bottom: 18px;
}

.option-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--secondary);
}

.option-head h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--green-dark);
}

.option-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--secondary);
}

.option-cost-list {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.option-cost-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.option-cost-list div:last-child {
    border-bottom: none;
}

.option-cost-list span {
    font-size: 12px;
    color: var(--secondary);
}

.option-cost-list strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: right;
}

.option-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.option-meta-grid div {
    background: #f8faf8;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.option-meta-grid span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 5px;
}

.option-meta-grid strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.recommendation-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
}

.recommendation-box h2 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--green-dark);
}

.recommendation-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--secondary);
}

.recommendation-meta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.recommendation-meta span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 4px;
}

.recommendation-meta strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--green-dark);
}

.recommendation-meta small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--secondary);
}

.decision-factor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.decision-factor-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}

.decision-factor-card span {
    display: block;
    font-size: 11px;
    color: var(--secondary);
    margin-bottom: 7px;
}

.decision-factor-card strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.25;
}

.decision-factor-card small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--muted);
}

@media (max-width: 1100px) {
    .demand-summary-grid,
    .decision-factor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .demand-option-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .demand-summary-grid,
    .decision-factor-grid,
    .option-meta-grid {
        grid-template-columns: 1fr;
    }

    .option-cost-list div {
        flex-direction: column;
        align-items: flex-start;
    }

    .option-cost-list strong {
        text-align: left;
    }
}
/* =========================================================
   DISTRIBUSI & PRODUK - FINAL CLEAN
========================================================= */


/* SUMMARY */

.distribution-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}

.distribution-summary-card {
    min-height: 105px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.distribution-summary-card span {
    display: block;

    font-size: 11px;

    color: var(--secondary);
}

.distribution-summary-card strong {
    display: block;

    margin-top: 7px;

    font-size: 18px;
    font-weight: 600;

    color: var(--green-dark);
}

.distribution-summary-card small {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    color: var(--muted);
}


/* CHANNEL */

.distribution-channel-grid-clean {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}

.distribution-channel-clean-card {
    min-height: 100px;

    padding: 18px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.distribution-channel-clean-card span {
    display: block;

    font-size: 11px;

    color: var(--secondary);
}

.distribution-channel-clean-card strong {
    display: block;

    margin-top: 7px;

    font-size: 18px;
    font-weight: 600;

    color: var(--green-dark);
}

.distribution-channel-clean-card small {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    color: var(--muted);
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.distribution-product-grid-clean {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.distribution-product-clean-card {
    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;
}


.distribution-product-clean-card h3 {
    margin: 0;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border);

    font-size: 15px;
    font-weight: 600;

    color: var(--green-dark);
}


.distribution-product-clean-info {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-top: 14px;
}


.distribution-product-clean-info > div {
    padding: 12px;

    background: #f7f9f7;

    border: 1px solid var(--border);
    border-radius: 8px;
}


.distribution-product-clean-info span {
    display: block;

    font-size: 10px;

    color: var(--muted);
}


.distribution-product-clean-info strong {
    display: block;

    margin-top: 4px;

    font-size: 12px;
    font-weight: 600;

    color: var(--text);
}


.distribution-product-clean-card p {
    margin: 14px 0 0;

    min-height: 36px;

    font-size: 11px;
    line-height: 1.6;

    color: var(--secondary);
}


/* =========================================================
   PACKAGING NOTE
========================================================= */

.distribution-packaging-note {
    margin-top: 16px;

    padding: 14px 16px;

    background: #f3f7f4;

    border-radius: 8px;
}


.distribution-packaging-note strong {
    display: block;

    font-size: 10.5px;
    font-weight: 600;

    color: var(--text);
}


.distribution-packaging-note p {
    margin: 5px 0 0;

    font-size: 10px;
    line-height: 1.6;

    color: var(--secondary);
}


/* =========================================================
   TOTAL ALLOCATION
========================================================= */

.distribution-total-box {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 0;

    margin-top: 12px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    overflow: hidden;
}


.distribution-total-box > div {
    padding: 14px 16px;
}


.distribution-total-box > div:first-child {
    border-right: 1px solid var(--border);
}


.distribution-total-box span {
    display: block;

    font-size: 10px;

    color: var(--secondary);
}


.distribution-total-box strong {
    display: block;

    margin-top: 5px;

    font-size: 14px;
    font-weight: 600;

    color: var(--green-dark);
}


/* =========================================================
   AREA TABLE
========================================================= */

#distributionAreaTableBody .status {
    width: 105px;
    min-width: 105px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .distribution-summary-grid,
    .distribution-channel-grid-clean {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .distribution-product-grid-clean {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .distribution-summary-grid,
    .distribution-channel-grid-clean,
    .distribution-product-clean-info,
    .distribution-total-box {
        grid-template-columns: 1fr;
    }


    .distribution-total-box > div:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

}
/* =========================================================
   CHIKWIN ICON SYSTEM
========================================================= */


/* ICON + LABEL DI CARD */

.metric-title {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 30px;
}


.metric-title i {
    width: 28px;
    height: 28px;

    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 11px;
}


.metric-title span {
    margin: 0 !important;

    font-size: 11px !important;
    font-weight: 500;

    color: var(--secondary);
}


/* Supaya angka punya jarak setelah icon */

.summary-item .metric-title + strong,
.overview-item .metric-title + strong,
.production-overview-item .metric-title + strong,
.demand-summary-card .metric-title + strong,
.distribution-summary-card .metric-title + strong,
.distribution-channel-clean-card .metric-title + strong {
    margin-top: 9px;
}


/* =========================================================
   SECTION ICON
========================================================= */

.section-title-icon {
    display: flex;

    align-items: flex-start;

    gap: 11px;
}


.section-title-icon > div:last-child {
    min-width: 0;
}


.section-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 12px;
}


.section-title-icon h2 {
    margin-top: 1px;
}


/* =========================================================
   OPERATION ICON
========================================================= */

.operation-name {
    display: flex;

    align-items: center;

    gap: 9px;
}


.operation-icon {
    width: 27px;
    height: 27px;

    min-width: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 10px;
}


/* =========================================================
   OPTION ICON
========================================================= */

.option-title-icon {
    margin-right: 7px;

    color: var(--green);

    font-size: 13px;
}


/* =========================================================
   DISTRIBUTION CHANNEL ICON
========================================================= */

.distribution-channel-clean-card .metric-title {
    margin-bottom: 2px;
}


/* =========================================================
   ICON HOVER - VERY SUBTLE
========================================================= */

.dashboard-card:hover .metric-title i,
.distribution-summary-card:hover .metric-title i,
.distribution-channel-clean-card:hover .metric-title i,
.overview-item:hover .metric-title i {
    background: #e5efe8;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .section-title-icon {
        gap: 9px;
    }

    .section-icon {
        width: 31px;
        height: 31px;

        min-width: 31px;
    }

}
/* =========================================================
   CHIKWIN ICON SYSTEM
========================================================= */


/* ICON + LABEL DI CARD */

.metric-title {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 30px;
}


.metric-title i {
    width: 28px;
    height: 28px;

    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 11px;
}


.metric-title span {
    margin: 0 !important;

    font-size: 11px !important;
    font-weight: 500;

    color: var(--secondary);
}


/* Supaya angka punya jarak setelah icon */

.summary-item .metric-title + strong,
.overview-item .metric-title + strong,
.production-overview-item .metric-title + strong,
.demand-summary-card .metric-title + strong,
.distribution-summary-card .metric-title + strong,
.distribution-channel-clean-card .metric-title + strong {
    margin-top: 9px;
}


/* =========================================================
   SECTION ICON
========================================================= */

.section-title-icon {
    display: flex;

    align-items: flex-start;

    gap: 11px;
}


.section-title-icon > div:last-child {
    min-width: 0;
}


.section-icon {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 12px;
}


.section-title-icon h2 {
    margin-top: 1px;
}


/* =========================================================
   OPERATION ICON
========================================================= */

.operation-name {
    display: flex;

    align-items: center;

    gap: 9px;
}


.operation-icon {
    width: 27px;
    height: 27px;

    min-width: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 10px;
}


/* =========================================================
   OPTION ICON
========================================================= */

.option-title-icon {
    margin-right: 7px;

    color: var(--green);

    font-size: 13px;
}


/* =========================================================
   DISTRIBUTION CHANNEL ICON
========================================================= */

.distribution-channel-clean-card .metric-title {
    margin-bottom: 2px;
}


/* =========================================================
   ICON HOVER - VERY SUBTLE
========================================================= */

.dashboard-card:hover .metric-title i,
.distribution-summary-card:hover .metric-title i,
.distribution-channel-clean-card:hover .metric-title i,
.overview-item:hover .metric-title i {
    background: #e5efe8;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .section-title-icon {
        gap: 9px;
    }

    .section-icon {
        width: 31px;
        height: 31px;

        min-width: 31px;
    }

}
/* =========================================================
   STATUS BADGE - FONT SIZE FIX
========================================================= */

.status,
.simple-status,
.production-status,
.distribution-status {
    font-size: 11px !important;
    font-weight: 600 !important;

    width: 120px !important;
    min-width: 120px !important;
    height: 32px !important;

    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 7px !important;

    line-height: 1 !important;
    letter-spacing: 0 !important;
}
/* =========================================================
   SIDEBAR WHITE CORPORATE STYLE
========================================================= */

.sidebar {
    background: #ffffff !important;
    color: #24372b !important;

    border-right: 1px solid #e3e8e4 !important;
}


/* =========================================================
   BRAND
========================================================= */

.sidebar-brand {
    padding: 24px 20px !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e7ebe8 !important;
}

.brand-logo {
    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
}

.brand-logo img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}


/* Nama perusahaan */

.brand-text h2 {
    margin: 0 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;

    font-weight: 700 !important;

    color: #17472f !important;
}


/* Subtitle */

.brand-text span {
    display: block !important;

    margin-top: 5px !important;

    font-size: 10px !important;
    line-height: 1.4 !important;

    color: #77837b !important;
}


/* =========================================================
   MENU
========================================================= */

.sidebar-menu {
    padding: 20px 12px !important;

    background: #ffffff !important;
}


.sidebar-section-title {
    margin: 0 10px 12px !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    color: #98a29b !important;
}


/* MENU DEFAULT */

.sidebar-link {
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    padding: 11px 14px !important;
    margin-bottom: 6px !important;

    border-radius: 9px !important;

    background: transparent !important;

    color: #425249 !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        color .15s ease !important;
}


/* ICON DEFAULT */

.sidebar-link i {
    width: 20px !important;

    text-align: center !important;

    font-size: 13px !important;

    color: #718078 !important;
}


/* =========================================================
   HOVER
========================================================= */

.sidebar-link:hover {
    background: #f2f6f3 !important;

    color: #17472f !important;
}

.sidebar-link:hover i {
    color: #356b49 !important;
}


/* =========================================================
   ACTIVE MENU
========================================================= */

.sidebar-link.active {
    background: #17472f !important;

    color: #ffffff !important;

    font-weight: 600 !important;
}


.sidebar-link.active i {
    color: #ffffff !important;
}


/* =========================================================
   FOOTER
========================================================= */

.sidebar-footer {
    padding: 17px 20px !important;

    background: #ffffff !important;

    border-top: 1px solid #e7ebe8 !important;
}


.sidebar-footer strong {
    color: #304138 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


.sidebar-footer small {
    color: #8b978f !important;

    font-size: 9px !important;
}


.system-dot {
    width: 8px !important;
    height: 8px !important;

    min-width: 8px !important;

    border-radius: 50% !important;

    background: #61a36f !important;
}
/* =========================================================
   SUPPORTED BY FOOTER - FIXED BOTTOM
========================================================= */

.global-supported-footer {
    position: fixed;

    left: 250px;
    right: 0;
    bottom: 0;

    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    background: rgba(255, 255, 255, 0.97);

    border-top: 1px solid #e4e9e5;

    z-index: 900;

    font-size: 10px;

    color: #8a958e;
}

.global-supported-footer strong {
    font-size: 10px;
    font-weight: 600;

    color: #17472f;
}


/* Biar isi halaman tidak ketutup footer */
.page-content {
    padding-bottom: 65px !important;
}


/* Responsive */
@media (max-width: 700px) {

    .global-supported-footer {
        left: 210px;
    }

}