/* Etesal Paya status page — brand theme: soft green on white.
 *
 * The green is carried by surfaces, borders and fills. Text and small numerals
 * use a deeper green so they stay readable: pale green type on white fails
 * contrast badly, and this page exists to be read at a glance.
 *
 * System fonts only. Google Fonts is unreliable from Iranian networks and a
 * status page that is slow to paint defeats its own purpose.
 */
:root {
  --bg: #f2f9f5;          /* white with the faintest green cast */
  --bg-accent: #e4f4ea;   /* header wash */
  --card: #ffffff;
  --line: #dcebe2;
  --line-strong: #c3ddcd;

  --text: #14261d;        /* near-black, green-leaning */
  --muted: #5d7868;

  /* Two greens on purpose. The pale one is the brand and covers fills,
     borders and the logo; the deep one is what type and the button sit on,
     because pale green on white measures ~3:1 and fails to be readable. */
  --brand: #3aa76d;       /* pale brand green - fills and decoration only */
  --brand-strong: #2e8657;/* same hue, dark enough for text and buttons */
  --brand-soft: #e8f6ee;  /* the palest tint, for surfaces */
  --brand-ink: #0f5132;   /* text on brand-coloured fills */

  --ok: #278654;
  --warn: #a76708;
  --bad: #d54040;

  --shadow: 0 1px 2px rgba(20, 60, 40, .05), 0 10px 28px rgba(20, 60, 40, .06);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-accent), var(--bg) 320px);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: Vazirmatn, "Segoe UI", Tahoma, "Iranian Sans", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

/* ---------- header ---------- */
.head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.brand { display: flex; align-items: center; gap: 13px; }
/* The real mark. Its artwork already sits on white, so it needs a ring rather
   than a coloured plate behind it - a green fill would double up on the green
   inside the logo and muddy both. */
.logo {
  width: 56px; height: 56px; flex: none;
  border-radius: 16px; object-fit: cover; display: block;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(20, 60, 40, .10);
}
h1 { margin: 0; font-size: 1.4rem; letter-spacing: -.2px; }
.sub { margin: 0; color: var(--muted); font-size: .88rem; }
.tg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--brand-strong); color: #fff;
  font-weight: 700; font-size: .9rem; text-decoration: none;
  box-shadow: 0 3px 10px rgba(58, 167, 109, .3);
  transition: transform .12s, box-shadow .12s;
}
.tg:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(58, 167, 109, .36); }

/* ---------- tabs ----------
   One section at a time. Stacked, whichever list sat lower went unseen and
   read as "my connections are missing". Each tab carries its own count and
   health dot so the other side is legible without switching to it. */
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px; margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  padding: 12px 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 700; font-size: .93rem;
  cursor: pointer; transition: background .15s, color .15s;
}
.tab:hover { background: var(--brand-soft); }
.tab[aria-selected="true"] {
  background: var(--brand-soft);
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1.5px var(--brand-strong);
}
.tab-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .tab-meta { color: var(--brand-ink); }
.tab .dot { width: 8px; height: 8px; }
.tab:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }

/* ---------- summary ---------- */
.summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.stat {
  display: flex; align-items: baseline; gap: 6px;
  padding: 5px 14px; border-radius: 10px; background: var(--bg);
}
.stat b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .82rem; }
#s-online { color: var(--ok); }
#s-slow { color: var(--warn); }
#s-offline { color: var(--bad); }
.updated { margin-inline-start: auto; color: var(--muted); font-size: .8rem; }

/* ---------- sections ---------- */
.section { margin-bottom: 26px; }
.section-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 10px; }
.section-head h2 { margin: 0; font-size: 1.02rem; }
.pill {
  font-size: .74rem; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink);
}
.section-note { color: var(--muted); font-size: .78rem; margin-inline-start: auto; }

.list {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.row {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center;
  gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line);
  transition: background .12s;
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--bg); }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.online  { background: var(--ok);   box-shadow: 0 0 0 3px rgba(39, 134, 84, .16); }
.dot.offline { background: var(--bad);  box-shadow: 0 0 0 3px rgba(213, 64, 64, .16); }
.dot.slow    { background: var(--warn); box-shadow: 0 0 0 3px rgba(167, 103, 8, .16); }
.dot.unknown { background: var(--muted); box-shadow: 0 0 0 3px rgba(93, 120, 104, .16); }

.name { font-weight: 600; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: .78rem; }

.metrics { display: flex; align-items: center; gap: 16px; }
.metric { text-align: center; min-width: 56px; }
.metric b { display: block; font-size: .92rem; font-variant-numeric: tabular-nums; }
.metric span { display: block; color: var(--muted); font-size: .68rem; }

/* ---------- signal bars ----------
   Packet loss shown the way phone signal is: five rungs, emptying as loss
   climbs. direction:ltr keeps them ascending left-to-right on this RTL page,
   which is how the icon is read everywhere. */
.bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 17px; direction: ltr; margin-bottom: 2px;
}
.bars i { width: 3px; border-radius: 1px; background: var(--line-strong); }
.bars i:nth-child(1) { height: 5px; }
.bars i:nth-child(2) { height: 8px; }
.bars i:nth-child(3) { height: 11px; }
.bars i:nth-child(4) { height: 14px; }
.bars i:nth-child(5) { height: 17px; }
.bars.q-good i.on { background: var(--ok); }
.bars.q-mid  i.on { background: var(--warn); }
.bars.q-bad  i.on { background: var(--bad); }

.state { font-size: .78rem; font-weight: 700; min-width: 52px; text-align: center; }
.state.online  { color: var(--ok); }
.state.offline { color: var(--bad); }
.state.slow    { color: var(--warn); }
.state.unknown { color: var(--muted); }

@media (max-width: 560px) {
  .row { grid-template-columns: 12px 1fr; row-gap: 8px; }
  .metrics { grid-column: 2; justify-content: flex-start; }
  .updated { margin-inline-start: 0; width: 100%; }
}

/* ---------- misc ---------- */
.error {
  background: #fdf2f2; border: 1px solid #f3d3d3; color: #a83232;
  border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: .88rem;
}
.skeleton {
  height: 76px; border-radius: var(--radius); margin-bottom: 12px;
  background: linear-gradient(90deg, var(--card), var(--brand-soft), var(--card));
  background-size: 200% 100%; animation: sk 1.3s linear infinite;
}
@keyframes sk { to { background-position: -200% 0; } }
.foot { margin-top: 32px; text-align: center; color: var(--muted); font-size: .82rem; }
.foot a { color: var(--brand-strong); text-decoration: none; font-weight: 600; }
.tiny { font-size: .74rem; opacity: .85; }