/* Unified styles for utilities dashboard */

:root{
  --bg-1: #3a4f6e;
  --bg-2: #0f1316;
  --card-glass: rgba(255,255,255,0.06);
  --card-inner: rgba(255,255,255,0.025);
  --muted: rgba(220,230,240,0.55);
  --accent: rgba(90,170,255,0.95);
}

html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #e9f6ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px 40px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
}

.card{
  display:flex;
  flex-direction:column;
  min-height:420px;
  font-size:13px;
  line-height:1.3;
  position:relative;
  padding:20px 18px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  overflow:visible;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.card:hover,
.card:focus-within{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 14px 38px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.02);
  z-index: 2;
}

.card-title{font-size:13px; font-weight:600; margin-bottom:8px; color:#e9f6ff}
.card-sub{color:var(--muted); font-size:13px; margin-bottom:10px}

.ls{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; color: #d7eefb; font-weight:500}

.sync-status-icon{
  width:14px;
  height:14px;
  margin-left:6px;
  vertical-align:middle;
  display:inline-block;
}

/* Position sync status to the right edge of account card */
.account-line{
  position:relative;
  display:block;
  padding-right:40px; /* reserve space for the icon */
}

.sync-status-wrapper{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  display:inline-block;
}

.btn-receipts{
  display:inline-block; padding:8px 12px; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  color:#d8f1ff; cursor:pointer; margin-bottom:12px; font-size:13px;
  font-weight:600;
}

.btn-pay img{
  width:18px;
  height:18px;
  vertical-align:middle;
  margin-right:8px;
}

.meters-wrap{
  margin-top:12px;
  padding:14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  flex:0 0 auto;
  overflow:visible;
}

.meters-wrap > div{
  display:block;
  padding:8px 6px;
  margin-bottom:6px;
}

.meters-wrap > div > div:first-child{
  display:flex;
  align-items:center;
  gap:1px;
}

.meter-block{
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.02);
}

.meter-header{
  display:flex;
  align-items:center;
  gap:8px;
}

.meter-icon{
  width:20px;
  height:20px;
  border-radius:4px;
}

.meter-number{
  font-weight: normal;
  color: var(--muted);
  font-size:13px;
}

.meter-readings{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color: var(--muted);
  font-size: 13px;
}

.reading-item{
  font-size:13px;
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:baseline;
}

.reading-value{margin-left:0}

.reading-label{
  color: var(--muted);
  font-size:13px;
  line-height:1.3;
  margin:0;
  display:inline-block;
}

.reading-value{
  color: var(--muted);
  font-size:13px;
  line-height:1.3;
  display:inline-block;
  margin-left:0;
}

.meter-value{
  font-weight: normal;
  color: #ffffff;
  font-size: 13px;
}

.meter-reading{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:8px;
  justify-content:flex-start;
  margin-bottom:8px;
}

.meter-reading-inline{margin-bottom:6px}

.meters-wrap img{width:20px; height:20px; border-radius:4px}

.no-accounts{padding:24px; text-align:center; color:var(--muted); background:transparent}

.muted-note{color:var(--muted);margin-top:6px}

.provider-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.provider-label {
  font-weight: 600;
  font-size: 14px;
  color: #6ba3ff;
  margin-bottom: 8px;
}

.meters-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.meters-label {
  font-weight: 600;
  font-size: 14px;
  color: #6ba3ff;
  margin-bottom: 8px;
}

.billing-info {
  background: transparent;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-size: 13px;
}

.billing-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 4px 0;
}

.billing-label {
  color: #b8c3d0;
  font-weight: 500;
}

.billing-value {
  font-weight: 600;
  color: #e8eef5;
}

.billing-value.positive {
  color: #ff6b6b;
}

.billing-value.negative {
  color: #51cf66;
}

.billing-value.zero {
  color: #51cf66;
}

.unpaid-bills-list {
  margin-top: 8px;
  font-size: 12px;
}

.unpaid-bill-item {
  padding: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  color: #e8eef5;
}

/* Modal styles */
.ep-modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 18, 34, 0.75);
  z-index: 1200;
}

.ep-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1201;
  max-width: 720px;
  width: 90%;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(58,79,110,0.65), rgba(10,18,34,0.95));
  backdrop-filter: blur(4px) saturate(110%);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
}

.ep-modal h3 {
  margin:0 0 8px 0;
  font-size:1.05rem;
  color:#e9f6ff;
}

.ep-modal #ep-modal-title {
  margin:0 0 8px 0;
  font-size:1.05rem;
  color:#e9f6ff;
}

.ep-modal .ep-close {
  position:absolute;
  right:12px;
  top:8px;
  background:none;
  border:0;
  color:var(--muted);
  font-size:20px;
  cursor:pointer;
}

.ep-modal-content {
  white-space:pre-wrap;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  color: #dff3ff;
}

.ep-modal .ep-modal-content {
  white-space:pre-wrap;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  color: #dff3ff;
}

.ep-modal .ep-modal-content pre {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  color: #dff3ff;
  margin: 0;
}

/* Details list inside modal: category left, values right */
.ep-modal .details-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}

.ep-modal .details-item {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:4px 0;
  border-bottom:1px dashed rgba(255,255,255,0.03);
}

.ep-modal .details-name {
  color:var(--muted);
  font-size:13px;
}

.ep-modal .details-values {
  display:flex;
  gap:6px;
  align-items:baseline;
}

.ep-modal .details-amount {
  font-weight:700;
  color:#ffffff;
  font-size:13px;
}

.ep-modal .details-fee {
  color:#ffb3b3;
  font-weight:600;
  font-size:12px;
}

.ep-modal-actions {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  margin-top:12px;
}

.ep-modal .ep-modal-actions {
  margin-top:12px;
  text-align:right;
}

.btn-action {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  background: var(--accent, #ffd54f);
  color: #062431;
  transition: filter 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.ep-modal .btn-action,
.ep-modal .btn-download,
.ep-modal .ep-close-btn,
#ep-modal-download,
.ep-modal .btn-action a {
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  color:#d8f1ff;
  cursor:pointer;
  font-size:13px;
  text-decoration:none;
}

.btn-action:hover,
.ep-modal .btn-action:hover,
.ep-modal .btn-download:hover,
.ep-modal .ep-close-btn:hover,
#ep-modal-download:hover {
  filter: brightness(0.98);
}

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

.btn-action[disabled], .btn-action.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.btn-download {
  display: inline-block;
}

/* Ensure anchors styled as .btn-action match button appearance */
.btn-action, a.btn-action {
  font-family:inherit;
  font-weight:600;
  text-decoration:none;
}

.ep-close {
  background: transparent;
  color: var(--muted, #fff);
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
}

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

.ep-spinner {
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.08);
  border-top-color: var(--accent, #ffd54f);
  animation: ep-spin 0.9s linear infinite;
  margin-right:8px;
}

@keyframes ep-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Toasts */
.ep-toast-container {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 1300;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ep-toast {
  min-width: 260px;
  max-width: 420px;
  background: #072b34;
  color: #eaf6fb;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(-8px);
  transition: all 220ms ease;
}

.ep-toast.ep-show {
  opacity: 1;
  transform: translateY(0);
}

.ep-toast__title {
  font-weight:700;
  font-size:13px;
  margin-bottom:4px;
}

.ep-toast__msg {
  font-size:13px;
  color: #dff6ff;
}

.ep-toast--error {
  background: #3b1212;
}

.ep-toast--success {
  background: #123b1f;
}

/* Send readings form */
.send-readings-form {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.send-meter-block {
  border:1px solid rgba(255,255,255,0.03);
  padding:10px;
  border-radius:8px;
  background: rgba(255,255,255,0.01);
}

.send-meter-title {
  font-weight:700;
  margin-bottom:8px;
}

.send-meter-row {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:6px;
}

.send-meter-label {
  width:110px;
  color: var(--muted);
}

.send-meter-prev {
  min-width:80px;
  color:#cfeff7;
}

.send-meter-input {
  flex:1;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: #eaffff;
}

.send-meter-input::placeholder {
  color: rgba(255,255,255,0.35);
}

/* subtle table style */
#global-receipts table{width:100%; border-collapse:collapse; color:#e6f9ff}
#global-receipts th{ text-align:left; padding:8px 6px; color:var(--muted); font-weight:600}
#global-receipts td{padding:8px 6px; border-top:1px solid rgba(255,255,255,0.02)}

/* Inline status area */
#status{max-width:1200px;margin:0 auto 12px;padding:0 4px}
.kv-status{display:inline-block;padding:10px 14px;border-radius:10px;margin-bottom:8px;font-weight:700;color:#062431;background:#d9edff;border:1px solid rgba(0,0,0,0.06);opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}
.kv-status.kv-show{opacity:1;transform:translateY(0)}
.kv-status--error{background:linear-gradient(180deg,#ffdfe0,#ffced0);color:#5a1b1b}
.kv-status--success{background:linear-gradient(180deg,#d7f6e6,#bff0d9);color:#114f28}
.kv-status--info{background:linear-gradient(180deg,#e8f3ff,#cfe9ff);color:#0b5394}

/* Responsive adjustments */
@media (max-width: 560px) {
  .send-meter-row {
    flex-direction: column;
    align-items:stretch;
  }
  .send-meter-label, .send-meter-prev {
    width: auto;
  }
}

@media (max-width:720px){
  .cards{grid-template-columns: 1fr; padding:0 12px}
  .card{min-height:0;height:auto}
}

@media (hover: none) and (pointer: coarse) {
  body {
    background-attachment: scroll;
    background-size: auto;
  }
}