/* OMFED NEER ERP: the glass look chosen on 23-Oct-2026 (07_UI-UX/Chosen_Design, decision D-026).
   Loaded after theme.css: it changes the colours and surfaces, not the layout rules. Remove this file to go back to the old look.
   Navy floating sidebar · pale water background · frosted white cards · water-blue primary · status = colour + icon + word. */

:root {
  --erp-primary: #116cb7;
  --erp-primary-rgb: 17, 108, 183;
  --erp-primary-hover: #0e5a99;
  --erp-primary-subtle: #e1effa;
  --erp-secondary: #5e6a85;
  --erp-success: #1e9e5a;
  --erp-info: #116cb7;
  --erp-warning: #c98a0b;
  --erp-danger: #d64545;
  --erp-bg: #e8f2fb;
  --erp-paper: #fff;
  --erp-text: #25324d;
  --erp-heading: #0f1a3d;
  --erp-muted: #5e6a85;
  --erp-border: rgba(15, 26, 61, .09);
  --erp-input-border: #cfdbe8;
  --erp-hover: rgba(17, 108, 183, .07);
  --erp-grid: rgba(15, 26, 61, .08);
  --erp-radius: .75rem;
  --erp-radius-lg: 1rem;
  --erp-menu-width: 264px;
  --erp-navy: #1f2470;
  --erp-navy-2: #2a3190;
  --erp-sky: #7cc4f0;
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-border: rgba(255, 255, 255, .92);
  --glass-shadow: 0 .5rem 1.5rem rgba(19, 41, 122, .08), 0 .0625rem .1875rem rgba(19, 41, 122, .06);
  --erp-shadow: var(--glass-shadow);
  --erp-shadow-sm: 0 .25rem .75rem rgba(19, 41, 122, .07);

  --bs-secondary-rgb: 94, 106, 133;
  --bs-success-rgb: 30, 158, 90;
  --bs-info-rgb: 17, 108, 183;
  --bs-warning-rgb: 201, 138, 11;
  --bs-danger-rgb: 214, 69, 69;
  --bs-link-hover-color-rgb: 14, 90, 153;
  --bs-body-font-size: .9375rem;
}

body {
  background: #e8f2fb url(/img/water-bg.svg) center / cover fixed no-repeat;
  color: var(--erp-text);
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
.text-muted { color: var(--erp-muted) !important; }

/* ---------- Sidebar: navy panel floating on the water ---------- */
.layout-menu {
  background: linear-gradient(180deg, var(--erp-navy) 0%, var(--erp-navy-2) 100%);
  box-shadow: 0 1rem 2.5rem rgba(19, 26, 90, .25);
  color: rgba(255, 255, 255, .86);
}
@media (min-width: 1200px) {
  .layout-menu { inset: .875rem auto .875rem .875rem; border-radius: 1.25rem; }
  .layout-page { margin-left: calc(var(--erp-menu-width) + .875rem); }
}
.app-brand { height: auto; padding: 1.25rem 1.25rem 1rem 1.375rem; }
.app-brand-link { gap: .75rem; }
.app-brand-link .brand-tile {
  width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18); flex-shrink: 0;
}
.app-brand-link .brand-tile img { height: 2.25rem; width: auto; }
.app-brand-text { color: #fff; font-size: 1.1875rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.app-brand-text small { display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-sky); }
.menu-close { color: #fff; }
.menu-header { color: rgba(255, 255, 255, .5); padding: .625rem 1.625rem; font-size: .75rem; letter-spacing: .06em; }
.menu-link { color: rgba(255, 255, 255, .86); margin: 0 .875rem; padding: .5625rem .875rem; min-height: 42px; border-radius: .75rem; }
.menu-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-arrow { color: rgba(255, 255, 255, .5); }
.menu-inner > .menu-item.active > .menu-link {
  background: rgba(255, 255, 255, .13); color: var(--erp-sky); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.menu-inner > .menu-item.active > .menu-link .menu-arrow { color: var(--erp-sky); }
.menu-sub .menu-link::before { border-color: rgba(255, 255, 255, .45); }
.menu-sub .menu-item.active > .menu-link { color: #fff; font-weight: 600; }
.menu-sub .menu-item.active > .menu-link::before { background: var(--erp-sky); border-color: var(--erp-sky); box-shadow: 0 0 0 .1875rem rgba(124, 196, 240, .25); }
.menu-user {
  margin: .5rem .875rem .875rem; padding: .75rem; border-radius: .875rem; background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; gap: .625rem; color: #fff; flex-shrink: 0;
}
.menu-user .avatar { background: rgba(124, 196, 240, .25); color: #fff; }
.menu-user small { color: rgba(255, 255, 255, .65); }
.menu-inner::-webkit-scrollbar { width: 6px; }
.menu-inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }

/* ---------- Header: search pill, date, round icon buttons (no white bar) ---------- */
.navbar-wrap { background: linear-gradient(180deg, rgba(228, 240, 250, .96) 0%, rgba(228, 240, 250, .9) 70%, rgba(228, 240, 250, 0) 100%); padding-top: .875rem; padding-bottom: .5rem; }
.layout-navbar { background: transparent; box-shadow: none; padding: 0; height: 56px; gap: .75rem; }
.navbar-search {
  flex: 0 1 26rem; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: .875rem;
  padding: 0 .875rem; height: 44px; box-shadow: var(--erp-shadow-sm);
}
.navbar-date { color: var(--erp-heading); font-weight: 500; white-space: nowrap; }
.icon-btn {
  width: 44px; height: 44px; border-radius: .875rem; display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--erp-shadow-sm); color: var(--erp-heading);
  font-size: 1.25rem; text-decoration: none;
}
.icon-btn:hover { color: var(--erp-primary); }
.icon-btn .dot { position: absolute; top: -.375rem; right: -.375rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 1rem; background: var(--erp-danger); color: #fff; font-size: .6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.menu-toggle-btn { width: 44px; height: 44px; border-radius: .875rem; background: var(--glass-strong); border: 1px solid var(--glass-border); justify-content: center; align-items: center; }
.user-chip { padding: .25rem .5rem .25rem .25rem; border-radius: .875rem; background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--erp-shadow-sm); }
.avatar.bg-label-primary { background: #dbeaf8 !important; color: var(--erp-navy) !important; }

/* ---------- Glass surfaces ---------- */
.card, .dropdown-menu {
  background: var(--glass-bg); border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow);
}
.card { --bs-card-bg: transparent; --bs-card-border-radius: var(--erp-radius-lg); --bs-card-inner-border-radius: calc(var(--erp-radius-lg) - 1px); --bs-card-color: var(--erp-text); }
.dropdown-menu { background: rgba(255, 255, 255, .94); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 992px) {
    .card, .dropdown-menu, .navbar-search, .icon-btn, .user-chip { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
  }
}
@media (max-width: 991.98px) { :root { --glass-bg: rgba(255, 255, 255, .9); --glass-strong: rgba(255, 255, 255, .94); } }
.card-title { font-weight: 600; }
.page-title { font-size: 1.75rem; font-weight: 700; color: var(--erp-heading); letter-spacing: -.01em; }
.page-title .crumb { font-size: 1rem; font-weight: 500; color: var(--erp-muted); }

/* ---------- Buttons ---------- */
.btn { --bs-btn-border-radius: .75rem; --bs-btn-padding-y: .5rem; }
.btn-primary { box-shadow: 0 .25rem .75rem rgba(17, 108, 183, .3); }
.btn-glass {
  --bs-btn-color: var(--erp-heading); --bs-btn-bg: var(--glass-strong); --bs-btn-border-color: var(--glass-border);
  --bs-btn-hover-color: var(--erp-primary); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--erp-primary); --bs-btn-active-bg: #fff; box-shadow: var(--erp-shadow-sm);
}
.btn-sky {
  --bs-btn-color: var(--erp-heading); --bs-btn-border-color: rgba(255, 255, 255, .7); --bs-btn-hover-color: var(--erp-heading);
  --bs-btn-hover-border-color: #fff; --bs-btn-active-color: var(--erp-heading);
  background: linear-gradient(180deg, #a9dcf8 0%, #6cc0ef 100%); box-shadow: 0 .25rem .75rem rgba(17, 108, 183, .25);
}
.btn-sky:hover { background: linear-gradient(180deg, #bfe5fa 0%, #7ccaf2 100%); }
.btn-success { --bs-btn-bg: var(--erp-success); --bs-btn-border-color: var(--erp-success); --bs-btn-hover-bg: #178149; --bs-btn-hover-border-color: #178149; --bs-btn-active-bg: #178149; box-shadow: 0 .25rem .75rem rgba(30, 158, 90, .25); }
.btn-danger { --bs-btn-bg: var(--erp-danger); --bs-btn-border-color: var(--erp-danger); --bs-btn-hover-bg: #b93636; --bs-btn-hover-border-color: #b93636; --bs-btn-active-bg: #b93636; box-shadow: 0 .25rem .75rem rgba(214, 69, 69, .25); }
.btn-label-secondary { --bs-btn-color: var(--erp-heading); --bs-btn-bg: rgba(255, 255, 255, .7); --bs-btn-border-color: rgba(15, 26, 61, .1); --bs-btn-hover-color: var(--erp-primary); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: rgba(17, 108, 183, .3); --bs-btn-active-color: var(--erp-primary); --bs-btn-active-bg: #fff; }
.nav-pills .nav-link.active { box-shadow: 0 .25rem .75rem rgba(17, 108, 183, .3); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(17, 108, 183, .15); }
.form-control, .form-select { background-color: rgba(255, 255, 255, .9); }
.form-control.is-auto, .form-control[readonly] { background: rgba(232, 242, 251, .7); }

/* Status labels: darker text steps on light tints so they read on glass */
.bg-label-primary { background-color: #dcebf8 !important; color: #0c4f86 !important; }
.bg-label-secondary { background-color: #e7ebf1 !important; color: #3d4862 !important; }
.bg-label-success { background-color: #dcf3e6 !important; color: #136b3c !important; }
.bg-label-info { background-color: #dcebf8 !important; color: #0c4f86 !important; }
.bg-label-warning { background-color: #fcefd2 !important; color: #8a5d00 !important; }
.bg-label-danger { background-color: #fbe1e1 !important; color: #a52a2a !important; }
.alert { border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--erp-radius); }
.alert-primary, .alert-info { background: rgba(220, 235, 248, .9); color: #0c4f86; }
.alert-warning { background: rgba(252, 239, 210, .92); color: #7a5200; }
.alert-danger { background: rgba(251, 225, 225, .92); color: #a52a2a; }
.alert-success { background: rgba(220, 243, 230, .92); color: #136b3c; }
.table { --bs-table-hover-bg: rgba(17, 108, 183, .05); }
.table > thead th { color: var(--erp-muted); font-weight: 600; font-size: .75rem; letter-spacing: .05em; }
.chart .bar { fill: var(--erp-primary); }

/* ---------- Dashboard building blocks (same skeleton for every role) ---------- */
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.dash-head h1 { font-size: 1.875rem; font-weight: 700; margin: 0; color: var(--erp-heading); letter-spacing: -.015em; }
.dash-head .sub { color: var(--erp-muted); margin: .125rem 0 0; }
.dash-head .actions { display: flex; flex-wrap: wrap; gap: .625rem; }
.kpi { padding: 1.125rem 1.25rem; height: 100%; display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit; position: relative; }
a.kpi:hover { color: inherit; }
a.card:hover { box-shadow: 0 .75rem 2rem rgba(19, 41, 122, .13); }
.kpi-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--erp-muted); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kpi-label i { font-size: 1.25rem; color: var(--erp-muted); }
.kpi-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .375rem .5rem; }
.kpi-value { font-size: 2rem; font-weight: 700; color: var(--erp-heading); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.kpi-value small { font-size: .9375rem; font-weight: 600; color: var(--erp-muted); margin-left: .25rem; letter-spacing: 0; }
.kpi-foot { font-size: .8125rem; color: var(--erp-muted); }
.kpi-foot.up { color: #136b3c; } .kpi-foot.down { color: #a52a2a; } .kpi-foot.warn { color: #8a5d00; }
.spark { width: 92px; height: 34px; flex-shrink: 0; }
.spark path.line { fill: none; stroke: var(--erp-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#sparkfill); }
.pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .65rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.pill i { font-size: 1rem; }
.pill-ok { background: #dcf3e6; color: #136b3c; } .pill-watch { background: #fcefd2; color: #8a5d00; } .pill-act { background: #fbe1e1; color: #a52a2a; }
.pill-info { background: #dcebf8; color: #0c4f86; } .pill-muted { background: #e7ebf1; color: #3d4862; }

/* Area chart (as in the chosen design) */
.area-chart { width: 100%; height: auto; display: block; overflow: visible; }
.area-chart .grid { stroke: rgba(15, 26, 61, .08); stroke-dasharray: 4 4; }
.area-chart .tick { fill: var(--erp-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.area-chart .s1-line { fill: none; stroke: #2b2f86; stroke-width: 2.5; }
.area-chart .s2-line { fill: none; stroke: #4fb0e8; stroke-width: 2.5; }
.area-chart .target { stroke: #d64545; stroke-width: 1.5; stroke-dasharray: 6 5; }
.area-chart .dot { fill: #fff; stroke-width: 2.5; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8125rem; color: var(--erp-muted); }
.legend span::before { content: ''; display: inline-block; width: .75rem; height: .75rem; border-radius: .25rem; margin-right: .375rem; vertical-align: -1px; background: var(--c); }

/* Ring gauge */
.gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 0 0; text-align: center; }
.gauge svg { width: 168px; height: 168px; }
.gauge .track { fill: none; stroke: rgba(17, 108, 183, .12); stroke-width: 14; }
.gauge .val { fill: none; stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.gauge .num { font-size: 26px; font-weight: 700; fill: var(--erp-heading); }
.gauge .cap { font-size: 12px; fill: var(--erp-muted); }

/* "Do this now" rows */
.action-list { list-style: none; margin: 0; padding: 0; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .875rem 1.5rem; border-top: 1px solid var(--erp-border); }
.action-row:first-child { border-top: 0; }
.action-row .what { flex: 1 1 18rem; min-width: 0; color: var(--erp-heading); }
.action-row .what small { display: block; color: var(--erp-muted); }
.action-row .btns { display: flex; gap: .5rem; margin-left: auto; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--erp-border); color: var(--erp-heading); }
.check-list li:first-child { border-top: 0; }
.check-list i { font-size: 1.25rem; }
.cover-bar { height: .5rem; border-radius: .25rem; background: rgba(17, 108, 183, .1); overflow: hidden; }
.cover-bar span { display: block; height: 100%; border-radius: .25rem; }

/* Big phone buttons and tiles (plant roles) */
.btn-hero { display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 64px; font-size: 1.125rem; font-weight: 700; border-radius: 1rem; }
.btn-hero i { font-size: 1.625rem; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.125rem .5rem; min-height: 112px; text-decoration: none; color: var(--erp-heading); font-weight: 600; }
.tile i { font-size: 2rem; color: var(--erp-primary); }

/* ---------- Phone: bottom tab bar for plant roles ---------- */
.tabbar { display: none; }
@media (max-width: 991.98px) {
  .has-tabbar .content { padding-bottom: 6rem; }
  .has-tabbar .content-footer { padding-bottom: 6rem; }
  .tabbar {
    display: flex; position: fixed; left: .625rem; right: .625rem; bottom: .625rem; z-index: 1030; justify-content: space-around;
    background: linear-gradient(180deg, var(--erp-navy) 0%, var(--erp-navy-2) 100%); border-radius: 1.125rem; padding: .375rem;
    box-shadow: 0 .5rem 1.5rem rgba(19, 26, 90, .3);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .375rem .25rem; border-radius: .875rem; color: rgba(255, 255, 255, .75); text-decoration: none; font-size: .75rem; font-weight: 600; min-height: 52px; justify-content: center; }
  .tabbar a i { font-size: 1.5rem; }
  .tabbar a.active { background: rgba(255, 255, 255, .14); color: var(--erp-sky); }
  .dash-head h1 { font-size: 1.5rem; }
  .kpi-value { font-size: 1.625rem; }
}
@media (max-width: 575.98px) {
  .navbar-date { display: none; }
  .navbar-search { flex: 1 1 auto; }
  .page-title { font-size: 1.375rem; }
  body { font-size: 1rem; }
}

/* ---------- Phone step-by-step forms (form[data-wizard], app.js) ---------- */
.wiz-head, .wiz-nav, .wiz-only { display: none; }
@media (max-width: 991.98px) {
  form.wiz-on .wiz-head { display: block; padding: 1rem 1.25rem .5rem; }
  form.wiz-on .wiz-only { display: block; }
  .wiz-dots { display: flex; gap: .375rem; margin-bottom: .625rem; }
  .wiz-dots span { flex: 1; height: .375rem; border-radius: 1rem; background: rgba(17, 108, 183, .15); }
  .wiz-dots span.done { background: rgba(17, 108, 183, .5); }
  .wiz-dots span.on { background: var(--erp-primary); }
  .wiz-title { font-weight: 700; color: var(--erp-heading); font-size: 1.125rem; line-height: 1.3; }
  .wiz-title small { display: block; font-weight: 500; color: var(--erp-muted); font-size: .875rem; margin-top: .125rem; }
  form.wiz-on .wiz-step:not(.active) { display: none !important; }
  form.wiz-on:not(.at-last) [data-wiz-last] { display: none !important; }
  form.wiz-on .wiz-step .wiz-hide { display: none !important; }
  form.wiz-on .wiz-nav {
    display: flex; gap: .75rem; position: sticky; bottom: 5.25rem; z-index: 5; margin: .75rem 0 0; padding: .625rem;
    background: rgba(255, 255, 255, .95); border: 1px solid var(--glass-border); border-radius: 1rem; box-shadow: 0 .5rem 1.25rem rgba(19, 41, 122, .12);
  }
  form.card.wiz-on .wiz-nav { margin: 0 .75rem .75rem; }
  .wiz-nav .btn { flex: 1; min-height: 52px; font-size: 1.0625rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
  .wiz-nav .btn i { font-size: 1.375rem; }
  form.wiz-on.at-last [data-wiz-next], form.wiz-on.at-first [data-wiz-back] { display: none; }
  form.wiz-on.at-last .wiz-nav { position: static; box-shadow: none; }
  form.wiz-on .form-control, form.wiz-on .form-select { min-height: 48px; font-size: 1rem; }
  form.wiz-on .wiz-msg { margin-top: .75rem; font-weight: 600; }
  /* line tables become stacked cards, each cell with its column name */
  form.wiz-on table.lines thead, form.wiz-on table.stack thead { display: none; }
  form.wiz-on table.lines, form.wiz-on table.lines tbody, form.wiz-on table.stack, form.wiz-on table.stack tbody { display: block; width: 100%; }
  form.wiz-on table.lines tr, form.wiz-on table.stack tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: .625rem .75rem; padding: .875rem; margin-bottom: .75rem;
    border: 1px solid rgba(17, 108, 183, .15); border-radius: .875rem; background: rgba(255, 255, 255, .75);
  }
  form.wiz-on table.lines td, form.wiz-on table.stack td { display: block; padding: 0 !important; border: 0; text-align: left !important; }
  form.wiz-on table.lines td:first-child, form.wiz-on table.stack td:first-child { grid-column: 1 / -1; }
  form.wiz-on table.lines td:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  form.wiz-on table.lines td[data-label]::before, form.wiz-on table.stack td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .03em; color: var(--erp-muted); margin-bottom: .25rem;
  }
  form.wiz-on table.lines .form-control, form.wiz-on table.lines .form-select, form.wiz-on table.stack .form-control { min-width: 0 !important; width: 100%; }
  form.wiz-on .table-responsive { overflow: visible; }
  .wiz-sum { padding: .875rem 0; border-top: 1px solid var(--erp-border); }
  .wiz-sum:first-child { border-top: 0; padding-top: 0; }
  .wiz-sum h6 { margin: 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--erp-muted); }
  .wiz-sum dl { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .375rem .75rem; margin: .625rem 0 0; }
  .wiz-sum dt { font-weight: 500; color: var(--erp-muted); }
  .wiz-sum dd { margin: 0; color: var(--erp-heading); font-weight: 600; overflow-wrap: anywhere; }
}

/* ---------- Print: plain paper ---------- */
@media print {
  body { background: #fff !important; }
  .card { background: #fff; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar { display: none !important; }
}