@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.gh-tree-box {
    min-height: 260px;
    max-height: 420px;
    overflow: auto;
    background: #f8fafc;
    border: 1px solid #dbe4ec;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
}

.gh-tree-item {
    padding: 6px 0;
    border-bottom: 1px dashed #dbe4ec;
}

.gh-tree-item:last-child {
    border-bottom: 0;
}

.gh-stat-empty {
    color: #94a3b8;
    font-style: italic;
}

.gh-code {
    font-family: Consolas, monospace;
    font-size: 12px;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.navigation-menu > li.active > a {
    color: #ffffff !important;
}

.list-inline-item .nav-link {
    cursor: pointer;
}

.gh-result-box {
    min-height: 48px;
}

.gh-btn-link {
    border: 0;
    background: transparent;
    color: #2f855a;
    padding: 0;
    cursor: pointer;
}

body {
    font-family: Sarabun, Tahoma, Arial, sans-serif;
}

.header-bg,
.topbar-main,
.navbar-custom {
    background: #1f7a4d !important;
}

.logo-large,
.logo-small {
    object-fit: contain;
}

.page-title-box .page-title {
    text-transform: uppercase;
    letter-spacing: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: rgba(255,255,255,.78) !important;
}

.gh-legacy-card .card-body {
    padding: 24px;
}

.gh-filter-panel {
    background: #f7fbf8;
    border: 1px solid #dcefe4;
    border-radius: 6px;
    padding: 16px 16px 0;
}

.gh-legacy-table-wrap {
    border: 1px solid #dbe4ec;
    border-radius: 6px;
}

.gh-legacy-table thead th {
    background: #e9f4ee;
    color: #234a37;
    vertical-align: middle;
    text-align: center;
}

.gh-legacy-table tbody td {
    vertical-align: middle;
}

.gh-legacy-table .table-active td {
    background: #f0f7f3;
    color: #1f5c3e;
}

/* Bulk electric/water recording table (electric.php / water.php): closer to Legacy's spacing —
   generous row height, meter name gets real breathing room, numeric columns are right-aligned and
   sized for digits (not squeezed to fit a name), note doesn't dominate the row, status stays compact.
   Group rows (from utilityMeterGroupLabel()) already carry .table-active from gh-legacy-table above,
   so the building/group name is never repeated on every data row underneath it. */
.gh-bulk-reading-row td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.gh-bulk-reading-row .gh-bulk-previous,
.gh-bulk-reading-row .gh-bulk-usage {
    display: inline-block;
    min-width: 4.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gh-bulk-reading-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gh-bulk-status {
    font-weight: 500;
    padding: 5px 8px;
}

/* PART B1: collapsible legacy-department group headers in the bulk reading table. */
.gh-bulk-group-header:hover {
    background: #e3f0e9;
}

.gh-bulk-group-caret {
    transition: transform 0.15s ease;
}

.gh-bulk-group-header.gh-bulk-group-collapsed .gh-bulk-group-caret {
    transform: rotate(-90deg);
}

@media (min-width: 1200px) {
    #electric-form-column .card,
    #water-form-column .card {
        max-width: 100%;
    }
}

.gh-summary-tile {
    border: 1px solid #dcefe4;
    background: #f8fbf9;
    border-radius: 6px;
    padding: 14px 10px;
}

.gh-admin-card {
    border: 1px dashed #cbd5df;
}

.gh-admin-card > .card-body {
    background: #fbfcfd;
}

.gh-admin-table {
    max-height: 300px;
    overflow: auto;
}

.nav-tabs .nav-link.active {
    color: #1f7a4d;
    font-weight: 600;
}

.btn-primary,
.btn-success {
    border-radius: 4px;
}

.swal2-popup {
    font-family: Sarabun, Tahoma, Arial, sans-serif;
}

/* Legacy recordmobile/GHG compatibility screens */
.gh-recordmobile-card h3,
.gh-recordmobile-card h4,
.gh-recordmobile-card h5 {
    font-family: "Sarabun", Tahoma, sans-serif;
}

.gh-recordmobile-list-table th,
.gh-recordmobile-list-table td,
.gh-ghg-month-matrix th,
.gh-ghg-month-matrix td {
    vertical-align: middle;
}

.recordmobile-open-meter,
.ghg-month-link {
    font-weight: 600;
    color: #177245;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.recordmobile-open-meter:hover,
.ghg-month-link:hover {
    color: #0f5132;
}

.gh-ghg-month-matrix .ghg-month-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border-radius: 4px;
    background: #eef8f2;
    text-decoration: none;
}

.gh-ghg-month-matrix .ghg-month-link:hover {
    background: #d7f0e2;
}

@media (max-width: 767.98px) {
    .gh-recordmobile-card .form-group.row label {
        text-align: left !important;
        margin-left: 0;
    }

    .gh-recordmobile-card .btn-lg {
        font-size: 1rem;
        padding: .75rem 1rem;
    }
}

.gh-admin-flow {
    border-left: 4px solid #1f8f5f;
    background: #f3fbf7;
    color: #24513f;
}

.gh-structure-form h5,
#meter-create-form h5,
#meter-update-form h5,
#meter-installation-form h5,
#installation-close-form h5,
#meter-relationship-form h5 {
    font-weight: 700;
    color: #234236;
}
.gh-home-intro .card-body {
    padding: 32px 20px;
}

.gh-home-logo {
    max-height: 74px;
    max-width: 280px;
    object-fit: contain;
}

.gh-home-actions {
    gap: 10px;
}

.gh-home-summary .card-body {
    min-height: 160px;
}

.gh-home-number {
    font-size: 2.35rem;
    line-height: 1.15;
    font-weight: 700;
}

.gh-home-links .list-group-item {
    border-color: #dbe4ec;
}
/* Legacy-like public home page */
.gh-legacy-home-header .navbar-custom .container-fluid {
    min-height: 72px;
}

.gh-home-nav .gh-home-action-item {
    float: right;
    padding-top: 5px;
    margin-left: 8px;
}

.gh-home-nav .gh-home-action-item > a.gh-home-top-btn {
    display: inline-block;
    color: #333 !important;
    line-height: 20px;
    padding: 9px 18px !important;
    margin: 0;
}

.gh-legacy-home-page > .col-lg-12 > .card > .card-body {
    padding: 20px;
}

.gh-legacy-home-page .card-body > .card-body {
    padding-left: 0;
    padding-right: 0;
}

.gh-home-inner-card {
    border: 1px solid #e6e9ef;
    box-shadow: none;
}

.gh-home-chart {
    height: 300px;
    position: relative;
    border: 1px solid #edf0f4;
    background: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 34px 28px 54px;
}

.gh-home-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    height: 210px;
}

.gh-home-bar {
    display: block;
    width: 54px;
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

.gh-home-bar-1 {
    height: 42%;
    background: #55a868;
}

.gh-home-bar-2 {
    height: 78%;
    background: #4c72b0;
}

.gh-home-bar-3 {
    height: 58%;
    background: #c44e52;
}

.gh-home-chart-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}

.gh-home-summary-table th,
.gh-home-summary-table td {
    vertical-align: middle;
}

.gh-home-tab-content {
    min-height: 60px;
}

/* Empty-year state (e.g. the current year has no GHG data committed yet) inside a left/right split
   panel — without this, the "no data" caption collapses to a single short line while its sibling
   column shows a full chart+table, leaving a visually broken, disproportionate empty gap. Matches the
   sibling panel's rough height instead so the two-column layout still reads as intentional. */
.gh-home-empty-year {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6c757d;
    border: 1px dashed #dbe4ec;
    border-radius: 6px;
    padding: 24px;
}

/* Every table header inside the Home dashboard's own content is centered, consistently, regardless
   of how many columns a given table has (organization summary, monthly usage table, etc.). */
#home-ghg-content th,
#home-usage-content th {
    text-align: center;
}

.gh-home-tab-caption {
    text-align: center;
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 12px;
}

.gh-home-compare-bars {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: flex-end;
}

.gh-home-compare-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 110px;
}

.gh-home-compare-col .gh-home-chart-bars {
    height: 160px;
    gap: 0;
}

.gh-home-bar-empty {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.gh-home-compare-label {
    margin-top: 8px;
    font-size: 13px;
    color: #495057;
    text-align: center;
}

.gh-home-compare-value {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
}

.gh-home-bar-electric {
    background: #e69f38;
}

.gh-home-bar-water {
    background: #2f9bd6;
}

.gh-home-usage-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.gh-home-usage-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.gh-home-usage-dot-electric {
    background: #e69f38;
}

.gh-home-usage-dot-water {
    background: #2f9bd6;
}

/* Two-column layout: GHG "left chart / right org table" and Usage "left charts / right table". */
.gh-home-split {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.gh-home-split-col {
    flex: 1 1 0;
    min-width: 0;
}

.gh-home-split-heading {
    font-size: 14px;
    color: #495057;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

@media (max-width: 767.98px) {
    .gh-home-split {
        flex-direction: column;
    }
}

/* GHG compare tab: chart gets ~60% of the row, table ~40% — the chart is the primary visual, the
   table is supporting detail. Falls back to the same stacked-vertical behavior as .gh-home-split on
   narrow screens (chart first, table below), since it's still just .gh-home-split underneath. */
.gh-home-split-60-40 > .gh-home-split-col:first-child {
    flex: 3 1 0;
}

.gh-home-split-60-40 > .gh-home-split-col:last-child {
    flex: 2 1 0;
}

/* Scope 1/2/3 legend, reused by both the yearly GHG panel and the 3-year comparison panel. */
.gh-home-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: #495057;
}

.gh-home-legend-item {
    display: inline-flex;
    align-items: center;
}

.gh-home-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 6px;
}

/* Grouped columns for renderHomeAxisGroupedBarChart() — GHG "เปรียบเทียบ 3 ปี" tab (one group per
   year, one bar per scope inside it). Sits inside the same .gh-axis-bars/.gh-axis-labels rows as the
   single-series axis chart, so ticks/gridlines/scroll behavior are all shared and unmodified. */
.gh-axis-groups {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    height: 156px;
    padding: 0 8px;
    border-bottom: 1px solid #cfd6de;
    background-repeat: no-repeat;
}

.gh-axis-group {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 90px;
    height: 100%;
}

.gh-axis-group-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.gh-axis-group-bars .gh-axis-bar {
    width: 20px;
    max-width: none;
}

.gh-axis-group-labels {
    display: flex;
    gap: 24px;
    padding: 6px 8px 0;
}

.gh-axis-group-label {
    flex: 1 1 0;
    min-width: 90px;
    font-size: 11px;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
}

/*
 * Y-axis bar chart component (electricity/water — both the 3-year comparison and the monthly-per-
 * year charts). Ticks/gridlines are computed dynamically in JS (homeNiceAxisScale) from that chart's
 * own data — nothing here hard-codes a scale. The bars area scrolls horizontally within its own box
 * on narrow screens for charts with many columns (12 months), rather than squeezing bars/labels into
 * illegibility or forcing the whole page to overflow — the axis/tick column stays fixed in place
 * while only the bars scroll, and the page itself never gains a scrollbar from this.
 */
.gh-axis-chart {
    display: flex;
}

/* Height matches .gh-axis-bars exactly (not the labels row below it), so tick % positions line up
   with the bar track precisely — labels live in their own row underneath, sized independently. */
.gh-axis-ticks {
    position: relative;
    width: 56px;
    flex-shrink: 0;
    height: 156px;
}

.gh-axis-tick {
    position: absolute;
    left: 0;
    right: 8px;
    transform: translateY(50%);
    font-size: 11px;
    color: #6c757d;
    text-align: right;
    white-space: nowrap;
}

.gh-axis-plot {
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px solid #dde3ea;
    overflow-x: auto;
    overflow-y: hidden;
}

.gh-axis-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 156px;
    padding: 0 8px;
    border-bottom: 1px solid #cfd6de;
    background-repeat: no-repeat;
}

.gh-axis-col {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 28px;
    height: 100%;
}

.gh-axis-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gh-axis-bar {
    display: block;
    width: 70%;
    max-width: 24px;
    border-radius: 3px 3px 0 0;
}

.gh-axis-bar-empty {
    display: block;
    width: 70%;
    max-width: 24px;
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(45deg, #ced4da, #ced4da 3px, #f1f3f6 3px, #f1f3f6 6px);
}

/* Second row, directly below .gh-axis-bars — same gap/padding/per-column flex-basis, so each label
   lines up under its matching bar without needing to share height/positioning with the bar itself. */
.gh-axis-labels {
    display: flex;
    gap: 8px;
    padding: 6px 8px 0;
}

.gh-axis-col-label {
    flex: 1 1 0;
    min-width: 28px;
    font-size: 11px;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .gh-axis-col-label,
    .gh-axis-tick {
        font-size: 10px;
    }

    .gh-axis-ticks {
        width: 48px;
    }
}

/*
 * Home dashboard tab labels. Scoped to #home-ghg-tabs/#home-usage-tabs specifically (not a global
 * .nav-pills/.nav-link override) so this never touches structure.php's tabs or any other nav-pills
 * usage elsewhere in the app. The theme's own style.css sets .nav-pills .nav-link.active to the same
 * green (#35bf84) for both text color and background color, which makes the active tab's label
 * invisible against its own background — that conflict is fixed here by giving every state an
 * explicit, contrasting text color instead of leaving it to inherit the clashing default.
 */
#home-ghg-tabs .nav-link,
#home-usage-tabs .nav-link {
    color: #0f1f3e;
    background-color: #f1f3f6;
    border: 1px solid #dde3ea;
    border-radius: 4px;
    margin: 0 4px 8px;
    font-weight: 600;
}

#home-ghg-tabs .nav-link:hover,
#home-ghg-tabs .nav-link:focus,
#home-usage-tabs .nav-link:hover,
#home-usage-tabs .nav-link:focus {
    color: #0f1f3e;
    background-color: #e3f7ee;
    border-color: #35bf84;
}

#home-ghg-tabs .nav-link.active,
#home-usage-tabs .nav-link.active {
    color: #ffffff;
    background-color: #35bf84;
    border-color: #35bf84;
}

#home-ghg-tabs .nav-link.active:hover,
#home-ghg-tabs .nav-link.active:focus,
#home-usage-tabs .nav-link.active:hover,
#home-usage-tabs .nav-link.active:focus {
    color: #ffffff;
    background-color: #2ea876;
    border-color: #2ea876;
}

@media (max-width: 991.98px) {
    .gh-home-nav .gh-home-action-item {
        float: none;
        padding: 6px 0;
        margin-left: 0;
    }
}
html,
body,
button,
input,
select,
textarea,
.table,
.btn,
.dropdown-menu {
    font-family: 'Sarabun', Tahoma, Arial, sans-serif !important;
}
.gh-organization-row,
.gh-building-row,
.gh-space-row,
.gh-tenant-row,
.gh-contract-row {
    cursor: pointer;
}

.gh-organization-row:hover,
.gh-building-row:hover,
.gh-space-row:hover,
.gh-tenant-row:hover,
.gh-contract-row:hover {
    background: #f2fbf6;
}
.gh-setting-row { cursor: pointer; }
.gh-setting-row:hover { background: #f2fbf6; }

.gh-table-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 12px;
    gap: 4px;
}

.gh-table-pager .btn[disabled] {
    cursor: not-allowed;
}
.gh-result-box:empty {
    display: none;
}

/* Reconciliation Processing Progress revision, PART A/K: full-screen overlay shown while "สรุปข้อมูลการใช้งาน"
   is running. Plain fixed-position div, not a Bootstrap modal (see the JS comment on
   #reconciliation-processing-overlay for why). */
.gh-processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gh-processing-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
}