/* =========================================================
   COMMUNITY WATERWORKS
   PREMIUM CENTRAL THEME
   ระบบบริหารค่าน้ำประปาชุมชน
   ---------------------------------------------------------
   Design:
   - Modern Municipal
   - Premium Water UI
   - Navy + Aqua
   - Clean / Professional / Trustworthy
   - Bootstrap compatible
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

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

  --ink: #172B3A;
  --ink-2: #263E50;

  --muted: #6B7D8C;
  --muted-2: #91A0AC;

  /* Navy */
  --pipe: #0B2942;
  --pipe-2: #123F63;
  --pipe-3: #1B5A86;
  --pipe-4: #2877A8;

  /* Water */
  --flow: #10A7BC;
  --flow-2: #22C2D4;
  --flow-3: #5ED8E4;

  --flow-soft: #E7F8FA;
  --flow-pale: #F2FCFD;

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

  --green: #198754;
  --green-soft: #EAF8F0;

  --amber: #D08A00;
  --amber-soft: #FFF7E4;

  --red: #D64545;
  --red-soft: #FFF0F0;

  --blue: #2778B7;
  --blue-soft: #EDF6FD;

  /* ================= SURFACE ================= */

  --paper: #F4F8FB;
  --paper-2: #EEF4F8;

  --card: #FFFFFF;
  --soft: #F8FAFC;

  /* ================= BORDER ================= */

  --line: #DDE7EE;
  --line-soft: #EAF0F4;

  /* ================= RADIUS ================= */

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ================= SHADOW ================= */

  --shadow-xs:
    0 1px 2px rgba(11,41,66,.04);

  --shadow-sm:
    0 3px 10px rgba(11,41,66,.06);

  --shadow:
    0 8px 24px rgba(11,41,66,.08);

  --shadow-lg:
    0 16px 45px rgba(11,41,66,.12);

  /* ================= LAYOUT ================= */

  --topbar-height: 62px;
  --sidebar-width: 314px;

  /* ================= BOOTSTRAP ================= */

  --bs-body-font-family:
    "Anuphan",
    "Sarabun",
    system-ui,
    -apple-system,
    sans-serif;

  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);

  --bs-primary: var(--pipe-2);
  --bs-primary-rgb: 18,63,99;

  --bs-link-color: var(--pipe-3);
  --bs-link-color-rgb: 27,90,134;

  --bs-border-color: var(--line);

  --bs-border-radius: var(--radius-sm);
}


/* =========================================================
   02. BASE
   ========================================================= */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;

  min-height: 100vh;

  font-size: 15px;

  line-height: 1.6;

  color: var(--ink);

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(34,194,212,.055),
      transparent 30%
    ),
    var(--paper);

  font-family: var(--bs-body-font-family);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}

a {
  color: var(--pipe-3);

  transition:
    color .18s ease;
}

a:hover {
  color: var(--flow);
}

img {
  max-width: 100%;
}

::selection {
  color: #fff;

  background:
    var(--flow);
}


/* =========================================================
   03. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #C7D6E0;

  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9FB4C3;
}


/* =========================================================
   04. FOCUS
   ========================================================= */

:focus-visible {
  outline:
    2px solid var(--flow);

  outline-offset:
    3px;
}

.form-control:focus,
.form-select:focus {

  border-color:
    var(--flow);

  box-shadow:
    0 0 0 .22rem
    rgba(16,167,188,.13);
}


/* =========================================================
   05. BUTTONS
   ========================================================= */

.btn {

  border-radius:
    var(--radius-sm);

  font-weight:
    500;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease;

}

.btn:hover {
  transform:
    translateY(-1px);
}

.btn:active {
  transform:
    translateY(0);
}


/* ---------- Primary ---------- */

.btn-primary {

  --bs-btn-bg:
    var(--pipe-2);

  --bs-btn-border-color:
    var(--pipe-2);

  --bs-btn-hover-bg:
    var(--pipe);

  --bs-btn-hover-border-color:
    var(--pipe);

  --bs-btn-active-bg:
    var(--pipe);

  --bs-btn-active-border-color:
    var(--pipe);

  box-shadow:
    0 4px 10px
    rgba(18,63,99,.15);
}

.btn-primary:hover {
  box-shadow:
    0 6px 15px
    rgba(18,63,99,.22);
}


/* ---------- Flow ---------- */

.btn-flow {

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--flow),
      var(--flow-2)
    );

  border:
    0;

  box-shadow:
    0 5px 14px
    rgba(16,167,188,.20);
}

.btn-flow:hover {

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #0D91A5,
      var(--flow)
    );

  box-shadow:
    0 7px 18px
    rgba(16,167,188,.27);
}


/* ---------- Outline ---------- */

.btn-outline-primary {

  --bs-btn-color:
    var(--pipe-3);

  --bs-btn-border-color:
    #AFC3D1;

  --bs-btn-hover-bg:
    var(--pipe-2);

  --bs-btn-hover-border-color:
    var(--pipe-2);

  --bs-btn-active-bg:
    var(--pipe);

  --bs-btn-active-border-color:
    var(--pipe);
}


/* ---------- Status Buttons ---------- */

.btn-success {
  background:
    var(--green);

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

.btn-warning {
  background:
    var(--amber);

  border-color:
    var(--amber);

  color: #fff;
}

.btn-danger {
  background:
    var(--red);

  border-color:
    var(--red);
}

.btn-light {

  background:
    #fff;

  border-color:
    var(--line);

  color:
    var(--ink-2);
}


/* =========================================================
   06. FORM
   ========================================================= */

.form-label {

  color:
    var(--ink-2);

  font-weight:
    600;

  margin-bottom:
    .4rem;
}

.form-control,
.form-select {

  min-height:
    40px;

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

  border-radius:
    var(--radius-sm);

  background:
    rgba(255,255,255,.92);

  color:
    var(--ink);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.form-control:hover,
.form-select:hover {

  border-color:
    #B9CBD8;
}

.form-control::placeholder {
  color:
    #A1AFBA;
}

.form-text {

  color:
    var(--muted);

  font-size:
    .82rem;
}

.input-group-text {

  background:
    var(--soft);

  border-color:
    var(--line);

  color:
    var(--muted);
}


/* =========================================================
   07. NUMBERS
   ========================================================= */

.num,
.table td.num,
.amount,
.money {

  font-variant-numeric:
    tabular-nums;

  text-align:
    right;

  white-space:
    nowrap;
}

.money {
  font-weight:
    600;
}


/* =========================================================
   08. APP SHELL / SIDEBAR
   ========================================================= */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-zindex: 1045;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: #C8D8E4;
  background:
    radial-gradient(circle at 0% 0%, rgba(34,194,212,.16), transparent 40%),
    linear-gradient(180deg, #09253D 0%, #0B2942 55%, #071F34 100%);
}

@media (min-width: 992px) {
  .sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    height: 100vh;
    z-index: 1031;
    box-shadow: 6px 0 22px rgba(7,31,52,.14);
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--topbar-height);
  padding: .6rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: none;
}

.sidebar-close {
  margin-left: auto;
  color: #C8D8E4;
  font-size: 1.1rem;
}

.sidebar-close:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .65rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
}

.side-menu,
.side-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-menu > li + li {
  margin-top: .15rem;
}


/* ---------- Links & group headers ---------- */

.side-link,
.side-group-btn {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #C7D5E0;
  font-size: .88rem;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.side-link > i,
.side-group-btn > i:first-child {
  flex: none;
  width: 1.2rem;
  text-align: center;
  font-size: 1rem;
  color: #8FA8BB;
}

.side-link:hover,
.side-group-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.side-group-btn.active {
  color: #fff;
  font-weight: 600;
}

.side-group-btn.active > i:first-child {
  color: var(--flow-3);
}

.side-group-btn .caret {
  margin-left: auto;
  font-size: .75rem;
  transition: transform .2s ease;
}

.side-group-btn.collapsed .caret {
  transform: rotate(-90deg);
}

.side-link.active {
  color: #fff;
  font-weight: 600;
  background: rgba(16,167,188,.22);
  box-shadow: inset 3px 0 0 var(--flow-3);
}

.side-link.active > i {
  color: var(--flow-3);
}


/* ---------- Sub items ---------- */

.side-sub {
  position: relative;
  margin: .15rem 0 .4rem 1.35rem;
  padding-left: .55rem;
  border-left: 1px solid rgba(255,255,255,.1);
}

.side-sub .side-link {
  padding: .45rem .65rem;
  font-size: .84rem;
}

.side-sub .side-link > i {
  font-size: .9rem;
}

/* กลุ่มย่อยซ้อนในกลุ่ม (เช่น ตั้งค่าข้อมูลพื้นฐาน) */
.side-sub .side-subgroup-btn {
  padding: .45rem .65rem;
  font-size: .84rem;
}

.side-sub .side-subgroup-btn > i:first-child {
  font-size: .9rem;
}

.side-sub .side-sub {
  margin: .1rem 0 .25rem 1rem;
}


/* =========================================================
   09. BRAND
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.brand:hover {
  color: #fff;
}

.brand img {
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px 12px 12px 4px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--flow), var(--flow-2));
  box-shadow: 0 5px 15px rgba(16,167,188,.25);
  font-size: 1.15rem;
  flex: none;
}

.brand > span {
  min-width: 0;
}

.brand strong {
  display: block;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.brand small {
  display: block;
  font-size: .7rem;
  color: #8FA8BB;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   10. TOPBAR
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.5rem;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}

.topbar-title {
  min-width: 0;
  color: var(--pipe);
  font-weight: 600;
  font-size: .98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   11. MAIN
   ========================================================= */

.main {

  flex:
    1;

  min-width:
    0;

  min-height:
    100vh;

  display:
    flex;

  flex-direction:
    column;
}

.content {

  flex:
    1;

  width:
    100%;

  max-width:
    1600px;

  padding:
    1.5rem;

  margin:
    0 auto;
}

.app-footer {

  padding:
    1rem 1.5rem;

  color:
    var(--muted);

  font-size:
    .78rem;
}


/* =========================================================
   12. TOPBAR RIGHT
   ========================================================= */

.topbar-right {

  display:
    flex;

  align-items:
    center;

  gap:
    .55rem;

  margin-left:
    auto;
}

.btn-icon {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    10px;

  background:
    transparent;

  color:
    var(--pipe-2);

  font-size:
    1.35rem;

  transition:
    background .18s ease,
    color .18s ease;
}

.btn-icon:hover {

  background:
    var(--flow-soft);

  color:
    var(--flow);
}


/* =========================================================
   13. LANGUAGE SWITCH
   ========================================================= */

.lang-switch {

  display:
    flex;

  overflow:
    hidden;

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

  border-radius:
    999px;

  padding:
    2px;

  background:
    #F7FAFC;

  font-size:
    .76rem;
}

.lang-switch a {

  padding:
    .22rem .68rem;

  border-radius:
    999px;

  text-decoration:
    none;

  color:
    var(--muted);

  transition:
    background .18s ease,
    color .18s ease;
}

.lang-switch a:hover {
  color:
    var(--pipe-2);
}

.lang-switch a.on {

  color:
    #fff;

  background:
    var(--pipe-2);

  box-shadow:
    0 2px 6px
    rgba(18,63,99,.15);
}


/* =========================================================
   14. USER
   ========================================================= */

.btn-user {

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

  border-radius:
    999px;

  background:
    rgba(255,255,255,.9);

  color:
    var(--ink-2);

  font-size:
    .85rem;

  padding:
    .38rem .75rem;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.btn-user:hover {

  border-color:
    #B7CAD8;

  box-shadow:
    var(--shadow-sm);
}


/* =========================================================
   15. PAGE HEADER
   ========================================================= */

.page-head {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    1rem;

  margin-bottom:
    1.15rem;
}

.page-head h1 {

  position:
    relative;

  margin:
    0;

  padding-left:
    .85rem;

  color:
    var(--pipe);

  font-size:
    1.5rem;

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    -.02em;
}

.page-head h1::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    12%;

  width:
    4px;

  height:
    76%;

  border-radius:
    5px;

  background:
    linear-gradient(
      180deg,
      var(--flow-2),
      var(--pipe-3)
    );
}

.page-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    .5rem;
}


/* =========================================================
   16. PANEL
   ========================================================= */

.panel {

  position:
    relative;

  overflow:
    hidden;

  background:
    rgba(255,255,255,.96);

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

  border-radius:
    var(--radius);

  padding:
    1.25rem;

  margin-bottom:
    1.25rem;

  box-shadow:
    var(--shadow-sm);

  transition:
    box-shadow .2s ease,
    transform .2s ease;
}

.panel::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    100%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16,167,188,.35),
      transparent
    );

  opacity:
    .7;
}

.panel > h2,
.panel-title {

  margin:
    0 0 1rem;

  color:
    var(--pipe);

  font-size:
    1rem;

  font-weight:
    700;
}

.panel.p-0 .table {
  margin:
    0;
}


/* =========================================================
   17. TOOLBAR
   ========================================================= */

.toolbar {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    .6rem;

  margin-bottom:
    1rem;

  padding:
    .7rem;

  border:
    1px solid var(--line-soft);

  border-radius:
    var(--radius-sm);

  background:
    linear-gradient(
      180deg,
      #FBFCFD,
      #F7FAFC
    );
}

.toolbar .input-group {
  max-width:
    420px;
}


/* ---------- List pager (บน/ล่างตาราง) ---------- */

.list-pager {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    .5rem 1rem;

  position:
    relative;

  z-index:
    1;
}

.list-pager-top {
  margin-bottom:
    .6rem;
}

.list-pager-bottom {
  margin-top:
    .75rem;
}

.toolbar .form-select,
.toolbar .form-control {

  width:
    auto;

  min-width:
    150px;
}


/* =========================================================
   18. FORM ACTIONS
   ========================================================= */

.form-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    .55rem;

  margin-top:
    1.4rem;

  padding-top:
    1rem;

  border-top:
    1px solid var(--line-soft);
}


/* =========================================================
   19. TABLE
   ========================================================= */

.table {

  --bs-table-bg:
    transparent;

  vertical-align:
    middle;

  margin-bottom:
    0;
}

.table thead th {

  padding:
    .75rem .7rem;

  color:
    #617483;

  background:
    linear-gradient(
      180deg,
      #F9FBFC,
      #F3F7F9
    );

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

  font-size:
    .78rem;

  font-weight:
    700;

  white-space:
    nowrap;
}

.table tbody td {

  padding:
    .72rem .7rem;

  border-color:
    var(--line-soft);

  color:
    var(--ink-2);
}

.table tbody tr {

  transition:
    background .15s ease;
}

.table tbody tr:hover {

  background:
    rgba(16,167,188,.035);
}

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

.table > :not(caption) > * > * {
  vertical-align:
    middle;
}

.empty {

  padding:
    3rem 1rem !important;

  text-align:
    center;

  color:
    var(--muted);
}


/* =========================================================
   20. TAG
   ========================================================= */

.tag {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    .3rem;

  padding:
    .22rem .58rem;

  border-radius:
    999px;

  color:
    #176B79;

  background:
    var(--flow-soft);

  font-size:
    .75rem;

  font-weight:
    500;
}


/* =========================================================
   21. STATUS
   ========================================================= */

.status {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    .38rem;

  padding:
    .25rem .62rem;

  border-radius:
    999px;

  font-size:
    .74rem;

  font-weight:
    600;

  white-space:
    nowrap;
}

.status::before {

  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0 0 0 3px
    rgba(0,0,0,.025);
}

.status-success {
  color:
    var(--green);

  background:
    var(--green-soft);
}

.status-warning {
  color:
    var(--amber);

  background:
    var(--amber-soft);
}

.status-danger {
  color:
    var(--red);

  background:
    var(--red-soft);
}

.status-info {
  color:
    #147586;

  background:
    var(--flow-soft);
}

.status-primary {
  color:
    var(--pipe-3);

  background:
    var(--blue-soft);
}

.status-muted {

  color:
    var(--muted);

  background:
    #EEF2F5;
}


/* =========================================================
   22. DASHBOARD GAUGES
   ========================================================= */

.gauges {

  display:
    grid;

  grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

  overflow:
    hidden;

  margin-bottom:
    1.25rem;

  background:
    rgba(255,255,255,.96);

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

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow-sm);
}

.gauge {

  position:
    relative;

  padding:
    1.15rem 1.25rem;

  border-right:
    1px solid var(--line-soft);

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

  transition:
    background .18s ease;
}

.gauge:hover {

  background:
    linear-gradient(
      180deg,
      #fff,
      #F7FCFD
    );
}

.gauge .v {

  margin-bottom:
    .18rem;

  color:
    var(--pipe);

  font-size:
    1.65rem;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;

  line-height:
    1.2;
}

.gauge .l {

  color:
    var(--muted);

  font-size:
    .78rem;

  font-weight:
    500;
}

.gauge.alert-v .v {
  color:
    var(--red);
}

.gauge.flow-v .v {
  color:
    var(--flow);
}

.progress-line {

  height:
    6px;

  margin-top:
    .55rem;

  overflow:
    hidden;

  border-radius:
    99px;

  background:
    #E7EEF2;
}

.progress-line span {

  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--flow),
      var(--flow-2)
    );

  box-shadow:
    0 0 8px
    rgba(16,167,188,.25);
}


/* =========================================================
   23. METER READING
   ========================================================= */

.read-summary {

  position:
    sticky;

  top:
    var(--topbar-height);

  z-index:
    10;

  padding:
    .6rem 0 .8rem;

  background:
    linear-gradient(
      180deg,
      var(--paper) 70%,
      rgba(244,248,251,0)
    );
}

.meter-card {

  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    .5rem 1rem;

  align-items:
    center;

  margin-bottom:
    .7rem;

  padding:
    1rem 1.05rem;

  background:
    rgba(255,255,255,.98);

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

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow-xs);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.meter-card:hover {

  border-color:
    #C9DCE7;

  box-shadow:
    var(--shadow-sm);

  transform:
    translateY(-1px);
}

.meter-card.done {

  border-left:
    4px solid var(--flow);

  background:
    linear-gradient(
      90deg,
      #F7FEFF,
      #fff
    );
}

.meter-card.warn {

  border-left:
    4px solid var(--amber);

  background:
    linear-gradient(
      90deg,
      #FFFBF1,
      #fff
    );
}

.meter-card.locked {
  opacity:
    .65;
}

.meter-card .who {

  color:
    var(--pipe);

  font-weight:
    650;
}

.meter-card .meta {

  color:
    var(--muted);

  font-size:
    .8rem;
}

.meter-card .seq {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    2rem;

  min-height:
    2rem;

  margin-right:
    .25rem;

  border-radius:
    8px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      var(--flow),
      var(--flow-2)
    );

  font-weight:
    700;
}


/* ---------- Odometer ---------- */

.odometer {

  display:
    flex;

  align-items:
    stretch;

  gap:
    .4rem;
}

.odometer input {

  width:
    9.5rem;

  padding:
    .3rem .7rem;

  color:
    #F5FBFF;

  background:
    linear-gradient(
      145deg,
      #172D40,
      #0C1E2E
    );

  border:
    2px solid #071522;

  border-radius:
    10px;

  font-size:
    1.55rem;

  font-weight:
    650;

  letter-spacing:
    .1em;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;

  box-shadow:
    inset 0 2px 5px
    rgba(0,0,0,.18),
    0 3px 8px
    rgba(7,31,52,.10);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.odometer input::placeholder {

  color:
    #526D82;

  letter-spacing:
    .04em;
}

.odometer input:focus {

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #142D43,
      #0B1E2F
    );

  border-color:
    var(--flow);

  box-shadow:
    0 0 0 3px
    rgba(16,167,188,.15),
    inset 0 2px 5px
    rgba(0,0,0,.18);
}

.prev-read {

  color:
    var(--muted);

  font-size:
    .82rem;

  font-variant-numeric:
    tabular-nums;
}

.usage-out {

  color:
    var(--pipe-2);

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;
}

.meter-card .extra {

  grid-column:
    1 / -1;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    .5rem;

  padding-top:
    .55rem;

  border-top:
    1px dashed
    var(--line);
}

.meter-card .extra .form-select,
.meter-card .extra .form-control {
  max-width:
    260px;
}


/* =========================================================
   24. FINANCIAL
   ========================================================= */

.amount-main {

  color:
    var(--pipe);

  font-size:
    1.75rem;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}

.amount-paid {

  color:
    var(--green);

  font-weight:
    650;

  font-variant-numeric:
    tabular-nums;
}

.amount-due {

  color:
    var(--red);

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}

.amount-discount {

  color:
    var(--flow);

  font-weight:
    650;

  font-variant-numeric:
    tabular-nums;
}

.financial-summary {

  display:
    grid;

  grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

  gap:
    .8rem;
}

.financial-item {

  position:
    relative;

  overflow:
    hidden;

  padding:
    1rem;

  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #F7FAFC
    );

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

  border-radius:
    var(--radius-sm);

  box-shadow:
    var(--shadow-xs);
}

.financial-item::after {

  content:
    "";

  position:
    absolute;

  width:
    60px;

  height:
    60px;

  right:
    -25px;

  bottom:
    -25px;

  border-radius:
    50%;

  background:
    rgba(16,167,188,.06);
}

.financial-item .label {

  margin-bottom:
    .2rem;

  color:
    var(--muted);

  font-size:
    .78rem;
}

.financial-item .value {

  color:
    var(--pipe);

  font-size:
    1.3rem;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   25. ALERT
   ========================================================= */

.alert {

  border-radius:
    var(--radius-sm);
}

.alert-water {

  color:
    #176978;

  background:
    linear-gradient(
      135deg,
      #E8F9FB,
      #F5FDFE
    );

  border:
    1px solid #C8E9ED;
}


/* =========================================================
   26. LOGIN
   ========================================================= */

.auth-wrap {

  min-height:
    100vh;

  display:
    grid;

  grid-template-columns:
    1.08fr 1fr;

  background:
    #fff;
}

.auth-side {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  overflow:
    hidden;

  padding:
    3.5rem;

  color:
    #fff;

  background:

    radial-gradient(
      circle at 85% 15%,
      rgba(94,216,228,.18),
      transparent 25%
    ),

    linear-gradient(
      145deg,
      #08243B,
      #103F62 55%,
      #0E7182
    );
}

.auth-side::before {

  content:
    "";

  position:
    absolute;

  width:
    500px;

  height:
    500px;

  right:
    -240px;

  bottom:
    -240px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    50%;

  box-shadow:

    0 0 0 45px
    rgba(255,255,255,.025),

    0 0 0 100px
    rgba(255,255,255,.018),

    0 0 0 170px
    rgba(255,255,255,.012);
}

.auth-side h1 {

  position:
    relative;

  z-index:
    2;

  max-width:
    14em;

  margin-bottom:
    1rem;

  font-size:
    2.25rem;

  font-weight:
    750;

  line-height:
    1.25;

  letter-spacing:
    -.025em;
}

.auth-side p {

  position:
    relative;

  z-index:
    2;

  max-width:
    32em;

  color:
    #C2D6E4;
}

.auth-side .ripple {

  position:
    absolute;

  right:
    -130px;

  top:
    -130px;

  width:
    440px;

  height:
    440px;

  border-radius:
    50%;

  border:
    38px solid
    rgba(94,216,228,.10);

  box-shadow:

    0 0 0 55px
    rgba(94,216,228,.055),

    0 0 0 120px
    rgba(94,216,228,.03),

    0 0 0 190px
    rgba(94,216,228,.018);
}

.auth-form {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    2rem;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(16,167,188,.035),
      transparent 30%
    );
}

.auth-form form {

  width:
    100%;

  max-width:
    380px;

  padding:
    2rem;

  background:
    rgba(255,255,255,.96);

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

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);
}


/* =========================================================
   27. SMALL SCREENS
   ========================================================= */

@media (max-width: 991.98px) {

  .content {
    padding:
      1rem;
  }

  .topbar {
    padding:
      .55rem .8rem;
  }

  .topbar-right {
    margin-left:
      auto;
  }

  .odometer input {

    width:
      8rem;

    font-size:
      1.4rem;
  }
}


/* =========================================================
   28. TABLET
   ========================================================= */

@media (max-width: 767.98px) {

  .page-head {

    align-items:
      flex-start;
  }

  .page-actions {

    width:
      100%;
  }

  .page-actions .btn {

    flex:
      1;
  }

  .financial-summary {

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

  .table-responsive {

    border-radius:
      var(--radius-sm);
  }
}


/* =========================================================
   29. MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

  .topbar-title {

    font-size:
      .9rem;
  }

  .topbar-right {

    gap:
      .25rem;
  }

  .lang-switch {

    font-size:
      .72rem;
  }

  .lang-switch a {

    padding:
      .18rem .48rem;
  }

  .content {

    padding:
      .75rem;
  }

  .page-head h1 {

    font-size:
      1.3rem;
  }

  .panel {

    padding:
      1rem;

    border-radius:
      12px;
  }

  .meter-card {

    grid-template-columns:
      1fr;
  }

  .financial-summary {

    grid-template-columns:
      1fr;
  }

  .odometer {

    width:
      100%;
  }

  .odometer input {

    width:
      100%;

    font-size:
      1.3rem;
  }

  .auth-form form {

    padding:
      1.3rem;

    border:
      0;

    box-shadow:
      none;
  }
}


/* =========================================================
   30. LOGIN MOBILE
   ========================================================= */

@media (max-width: 860px) {

  .auth-wrap {

    grid-template-columns:
      1fr;
  }

  .auth-side {

    min-height:
      250px;

    padding:
      2rem;
  }

  .auth-side h1 {

    font-size:
      1.65rem;
  }
}


/* =========================================================
   31. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    transition:
      none !important;

    animation:
      none !important;

    scroll-behavior:
      auto !important;
  }
}


/* =========================================================
   32. PRINT
   ========================================================= */

@media print {

  .topbar,
  .sidebar,
  .app-footer,
  .no-print,
  .toolbar,
  .page-actions,
  .btn {

    display:
      none !important;
  }

  .main {

    margin:
      0;
  }

  .content {

    max-width:
      none;

    padding:
      0;
  }

  .panel {

    padding:
      0;

    border:
      0;

    box-shadow:
      none;
  }

  body {

    background:
      #fff;

    font-family:
      "Sarabun",
      sans-serif;
  }

  .table {

    border-collapse:
      collapse;
  }
}

/* ตารางบันทึกการใช้น้ำประปาประจำเดือน (หน้า billing) */
#usageTable thead th { text-align: center; vertical-align: middle; font-size: 1rem; }