:root {
    --cfoat-green-primary: #57A483;
    --cfoat-green-accent: #70BA96;
    --cfoat-green-dark: #546F64;
    --cfoat-green-pale: #D6E0DB;
    --cfoat-green-soft: #BFDACC;
    --cfoat-text: #1F2937;
    --cfoat-text-muted: #64748B;
    --cfoat-background: #FFFFFF;
    --cfoat-surface: #FFFFFF;
    --cfoat-border: #DDE5E1;
    --cfoat-success: #2E8B57;
    --cfoat-warning: #C98716;
    --cfoat-danger: #B42318;
    --cfoat-info: #2E6F9E;
}

body {
    background: var(--cfoat-background);
    color: var(--cfoat-text);
}

.navbar-inverse {
    background: #FFFFFF !important;
    border-color: var(--cfoat-border);
}

.navbar-brand.cfoat-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.navbar-brand.cfoat-brand img {
    height: 32px;
    width: auto;
}

.navbar-brand.cfoat-brand span {
    color: var(--cfoat-green-dark);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.navbar-inverse .nav > li > a,
.navbar-inverse .nav > li.current-user > a {
    color: var(--cfoat-green-dark) !important;
}

.navbar-inverse .nav > li.current-user > a i,
.navbar-inverse .navbar-brand i {
    color: var(--cfoat-green-primary) !important;
}

ul.main-navigation-menu > li a > i {
    color: var(--cfoat-green-primary) !important;
}

ul.main-navigation-menu > li.active > a,
ul.main-navigation-menu > li.active.open > a {
    background: var(--cfoat-green-primary) !important;
    border-top: none !important;
    color: #ffffff !important;
}

ul.main-navigation-menu > li.active > a i,
ul.main-navigation-menu > li.active > a .title {
    color: #ffffff !important;
}

ul.main-navigation-menu > li.active > a .selected {
    background: var(--cfoat-green-primary);
}

ul.main-navigation-menu > li.active > a .selected:before {
    color: var(--cfoat-green-primary) !important;
}

ul.main-navigation-menu > li.open > a,
ul.main-navigation-menu > li > a:hover,
ul.main-navigation-menu > li:hover > a {
    background-color: var(--cfoat-green-pale) !important;
}

ul.main-navigation-menu > li.active > a:hover,
ul.main-navigation-menu > li.active:hover > a {
    background: var(--cfoat-green-primary) !important;
    color: #ffffff !important;
}

.btn-cfoat,
.btn-primary,
.btn-bricky {
    background: var(--cfoat-green-primary);
    border-color: var(--cfoat-green-dark);
    color: #fff;
}

.btn-cfoat:hover,
.btn-primary:hover,
.btn-bricky:hover {
    background: var(--cfoat-green-accent);
    border-color: var(--cfoat-green-primary);
    color: #fff;
}

.label-success {
    background: var(--cfoat-success);
}

.cfoat-login {
    background: #FFFFFF !important;
    background-image: none !important;
    min-height: 100vh;
}

/*
 * Clip-One hides .box-login until login.js runs (register/forgot switcher).
 * CFOAT does not load that script, so the card must stay visible.
 */
body.login .box-login,
body.login .box-forgot,
body.login .box-register {
    display: block !important;
}

body.login input.password {
    padding-right: 12px;
}

.cfoat-login-logo {
    text-align: center;
    margin: 30px 0 20px;
}

.cfoat-login-logo img {
    max-width: 280px;
    width: 100%;
    height: auto;
}

.cfoat-auth-card h3 {
    color: var(--cfoat-green-dark);
    font-weight: 600;
    margin-top: 0;
    text-align: center;
}

.cfoat-auth-card > p {
    text-align: center;
    color: var(--cfoat-text-muted);
    margin-bottom: 18px;
}

.cfoat-auth-card label {
    display: block;
    color: var(--cfoat-text);
    font-weight: 600;
    margin-bottom: 6px;
}

.cfoat-auth-card .form-control {
    height: auto;
    padding: 12px 14px;
    font-size: 16px;
}

.cfoat-auth-card .btn-block {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-weight: 600;
}

.cfoat-auth-card .alert {
    border-radius: 5px;
}

.cfoat-resend {
    text-align: center;
    margin-top: 8px;
}

.cfoat-resend .btn-link {
    color: var(--cfoat-green-dark);
}

.cfoat-otp {
    letter-spacing: 0.4em;
    font-size: 22px;
    text-align: center;
}

.cfoat-kpi {
    min-height: 120px;
}

.cfoat-kpi-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--cfoat-green-dark);
}

.cfoat-kpi-label {
    font-weight: 600;
}

.cfoat-empty-chart {
    min-height: 180px;
    display: flex;
    align-items: center;
}

.cfoat-activity {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cfoat-activity li {
    padding: 8px 0;
    border-bottom: 1px solid var(--cfoat-border);
}

.cfoat-filters {
    margin-bottom: 16px;
}

.cfoat-filters .form-control {
    margin-right: 8px;
    margin-bottom: 8px;
}

.cfoat-btn-gap {
    margin-right: 8px;
}

.cfoat-tabs {
    padding-top: 16px;
}

ul.main-navigation-menu li.open > ul.sub-menu {
    display: block;
}

.navbar-tools .dropdown.open > .dropdown-menu {
    display: block;
}

.cfoat-logout {
    margin: 0;
}

.cfoat-logout button {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    padding: 8px 20px;
}

.cfoat-logout-form {
    display: none;
}

.cfoat-env-badge span {
    display: inline-block;
    margin: 14px 8px 0;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--cfoat-warning);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.checkbox-block {
    display: block;
    font-weight: 400;
    margin-bottom: 6px;
}

.page-header h1 {
    color: var(--cfoat-green-dark);
}

.cfoat-explorer-chart {
    min-height: 220px;
    margin: 12px 0 20px;
}

.cfoat-map-toolbar {
    margin-bottom: 12px;
}

.cfoat-map-toolbar label {
    margin-right: 8px;
}

.cfoat-map-body {
    position: relative;
    padding: 0;
}

.cfoat-map {
    height: 620px;
    width: 100%;
    background: #d9e7d4;
}

.cfoat-map-info,
.cfoat-map-panel {
    min-height: 620px;
}

.cfoat-map-info .dl-horizontal dt {
    width: 110px;
}

.cfoat-map-info .dl-horizontal dd {
    margin-left: 125px;
    min-height: 18px;
}

.cfoat-map-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 500;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #cfd8d3;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.7;
}

.cfoat-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #999;
}

.cfoat-dot-residential {
    background: #c62828;
}

.cfoat-dot-public {
    background: #2e7d32;
}

.cfoat-dot-office {
    background: #1565c0;
    color: #fff;
    text-align: center;
    line-height: 12px;
    font-size: 9px;
}

.cfoat-office-icon {
    background: transparent;
}

.cfoat-office-x {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1565c0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #1565c0;
}

.cfoat-metric {
    display: inline-block;
    margin: 0 6px 6px 0;
    font-weight: 500;
}

.cfoat-mongo-tree {
    border: 1px solid var(--cfoat-border);
    border-radius: 4px;
    padding: 12px 16px;
    background: #f7faf8;
    min-height: 320px;
}

.cfoat-tree,
.cfoat-tree ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.cfoat-tree ul {
    padding-left: 16px;
    margin: 6px 0 12px;
}

.cfoat-tree a {
    display: block;
    padding: 3px 0;
}

.cfoat-tree a.active {
    font-weight: 700;
    color: var(--cfoat-green-dark);
}

.cfoat-json {
    background: #f4f7f6;
    border: 1px solid var(--cfoat-border);
    padding: 8px;
    font-size: 12px;
    white-space: pre-wrap;
    margin: 0;
}

.cfoat-mongo-doc {
    margin-bottom: 0;
}

.cfoat-telemetry-charts .panel-heading {
    overflow: visible;
}

.cfoat-chart-range {
    margin-top: 2px;
}

.cfoat-chart-caption {
    margin: 8px 0 0;
    font-size: 12px;
}

.cfoat-hotdrop-guide {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #f7faf8;
    border: 1px solid var(--cfoat-border);
    border-radius: 3px;
}

.cfoat-hotdrop-guide p {
    margin: 0 0 8px;
}

.cfoat-hotdrop-guide p:last-child {
    margin-bottom: 0;
}

.cfoat-panel-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cfoat-help-btn {
    flex: 0 0 auto;
}

.cfoat-elec-latest dt a {
    color: inherit;
    border-bottom: 1px dotted var(--cfoat-green-primary);
}

.cfoat-elec-latest dt a:hover,
.cfoat-elec-latest dt a:focus {
    color: var(--cfoat-green-dark);
    text-decoration: none;
}

.cfoat-env-latest {
    margin-bottom: 8px;
}

.cfoat-env-latest th {
    width: 38%;
    font-weight: 600;
    vertical-align: middle;
    border-top: none;
}

.cfoat-env-latest td {
    vertical-align: middle;
    border-top: none;
}

.cfoat-env-latest tr + tr th,
.cfoat-env-latest tr + tr td {
    border-top: 1px solid var(--cfoat-border);
}

.cfoat-env-metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cfoat-env-reading {
    font-variant-numeric: tabular-nums;
}

.cfoat-env-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cfoat-text);
}

.cfoat-env-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 10px;
}

.cfoat-env-status-good .cfoat-env-status-dot {
    background: var(--cfoat-success);
}

.cfoat-env-status-attention .cfoat-env-status-dot {
    background: var(--cfoat-warning);
}

.cfoat-env-status-alert .cfoat-env-status-dot {
    background: var(--cfoat-danger);
}

.cfoat-env-status-context .cfoat-env-status-dot {
    background: #94A3B8;
}

.cfoat-telemetry-charts .cfoat-amchart-wrap {
    position: relative;
    height: 280px;
}

.cfoat-telemetry-charts .cfoat-amchart-wrap-gauge {
    height: 200px;
}

.cfoat-telemetry-charts .cfoat-amchart {
    width: 100%;
    height: 100%;
}

.cfoat-datatable-wrap .dataTables_wrapper .dt-buttons,
#cfoat-telemetry-table_wrapper .dt-buttons,
.dataTables_wrapper .dt-buttons {
    margin: 0 12px 12px 0;
}

.dataTables_wrapper .dt-button {
    background: #fff;
    border: 1px solid var(--cfoat-border);
    border-radius: 3px;
    color: var(--cfoat-text);
    padding: 4px 10px;
    margin-right: 4px;
}

.dataTables_wrapper .dt-button:hover {
    background: var(--cfoat-green-pale);
    border-color: var(--cfoat-green-primary);
    color: var(--cfoat-green-dark);
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 12px;
}

.panel > .panel-heading {
    height: auto !important;
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 5px 12px 5px 16px !important;
    line-height: 1.42857;
    overflow: visible;
}

.panel > .panel-heading > [class^="fa-"],
.panel > .panel-heading > [class*=" fa-"],
.panel > .panel-heading > [class^="clip-"],
.panel > .panel-heading > [class*=" clip-"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    padding: 0 8px 0 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    opacity: 1;
}

.panel > .panel-heading > .pull-right {
    float: none !important;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.panel > .panel-heading > .pull-right ~ .pull-right {
    margin-left: 0;
}

.panel > .panel-heading .btn,
.panel > .panel-heading .btn-group {
    margin-top: 0;
    margin-bottom: 0;
}

.panel > .panel-heading form.pull-right {
    float: none !important;
    margin-left: auto;
    margin-bottom: 0;
}

ul.main-navigation-menu > li > a {
    display: flex !important;
    align-items: center;
    padding-right: 18px;
}

ul.main-navigation-menu > li > a > i:first-child {
    flex: 0 0 22px;
    width: 22px;
    margin-right: 8px;
    text-align: center;
}

ul.main-navigation-menu > li > a > .title {
    flex: 1 1 auto;
}

ul.main-navigation-menu li a .icon-arrow {
    float: none !important;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 8px !important;
    line-height: 1;
    font-family: "clip-font" !important;
    width: 14px;
    height: 14px;
}

ul.main-navigation-menu li a .icon-arrow:before {
    font-family: "clip-font" !important;
    content: "\e163";
    display: block;
    line-height: 1;
}

ul.main-navigation-menu li.open > a > .icon-arrow:before {
    content: "\e164";
}

ul.main-navigation-menu > li > a > .selected {
    display: none;
}

ul.main-navigation-menu > li.active > a > .selected {
    display: none;
}

ul.main-navigation-menu li > ul.sub-menu {
    clear: both;
    margin: 0;
}

.cfoat-status-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cfoat-status-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--cfoat-border);
}

.cfoat-status-list li:last-child {
    border-bottom: 0;
}

.cfoat-status-name {
    font-weight: 600;
}

.cfoat-weather-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}

.cfoat-weather-temp {
    font-size: 48px;
    font-weight: 600;
    color: var(--cfoat-green-dark);
    line-height: 1;
}

.cfoat-weather-temp small {
    font-size: 22px;
    color: var(--cfoat-text-muted);
    font-weight: 400;
}

.cfoat-weather-condition {
    margin-top: 8px;
    color: var(--cfoat-text-muted);
    text-transform: capitalize;
}

.cfoat-weather-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 12px 28px;
    flex: 1 1 360px;
}

.cfoat-weather-metric {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cfoat-weather-metric i {
    color: var(--cfoat-green-primary);
    width: 18px;
    margin-top: 3px;
    text-align: center;
}

.cfoat-weather-metric strong {
    display: block;
    color: var(--cfoat-text);
}

.cfoat-weather-days {
    margin-top: 8px;
}

.cfoat-weather-day {
    text-align: center;
    padding: 18px 12px;
    border: 1px solid var(--cfoat-border);
    border-radius: 8px;
    background: #f7faf8;
    min-height: 180px;
}

.cfoat-weather-day h4 {
    margin: 0 0 8px;
    color: var(--cfoat-green-dark);
    font-weight: 600;
}

.cfoat-weather-day .cfoat-weather-day-temp {
    font-size: 28px;
    font-weight: 600;
    color: var(--cfoat-text);
}

.cfoat-weather-day .cfoat-weather-day-cond {
    color: var(--cfoat-text-muted);
    margin: 6px 0 14px;
}

.cfoat-weather-day-meta {
    color: var(--cfoat-text-muted);
    font-size: 12px;
}

.cfoat-weather-day-meta span {
    display: inline-block;
    margin: 0 6px;
}

.cfoat-weather-table {
    margin-bottom: 0;
}

.cfoat-weather-table > thead > tr > th {
    border-bottom: 1px solid var(--cfoat-border);
    font-weight: 700;
}

.cfoat-weather-table > tbody > tr > td {
    border-top: 1px solid var(--cfoat-border);
    border-bottom: 0;
}

.cfoat-weather-source {
    margin-top: 8px;
}