/* MFU Big Data Portal look (from the original Apps Script portal):
   dark navy with a faint grid, navy cards with thin gold borders, gold accents. */
:root {
  --bg: #0a1628;
  --grid-line: rgba(120, 150, 200, 0.05);
  --surface: #0f1f3d;
  --surface-2: #122449;
  --input-bg: #11224a;
  --border: #22375e;
  --gold-border: rgba(201, 162, 74, 0.55);
  --text: #e6ecf5;
  --muted: #8ea3c4;
  --label: #9ec1f0;
  --gold: #e8bd55;
  --gold-1: #c9a24a;
  --gold-2: #f0c75e;
  --on-gold: #1a1406;
  --accent-soft: rgba(232, 189, 85, 0.12);
  --error: #ff8a80;
  --warn: #f5c16c;
  --warn-bg: rgba(245, 193, 108, 0.1);
  --row-alt: rgba(255, 255, 255, 0.025);
  --radius: 12px;
  --topbar: #0f1f3d;
  font-family: "Noto Sans Thai", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Icons: one line style everywhere, a soft duotone fill for the infographic look */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon .tone { fill: currentColor; stroke: none; opacity: .18; }
.icon .solid { fill: currentColor; stroke: none; }
.btn, .tab, legend { display: inline-flex; align-items: center; gap: 7px; }
.btn { justify-content: center; }
.result-meta .search-field { flex: 0 1 300px; }
legend .icon { color: var(--gold); }
.tab .icon { opacity: .85; }
.search-field { position: relative; display: block; flex: 1; }
.search-field > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none; }
.search-field > input { width: 100%; padding-left: 38px; }
[hidden] { display: none !important; }
body {
  display: flex; flex-direction: column; height: 100vh;
  margin: 0; color: var(--text); font-size: 16px; line-height: 1.6;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
h1, h2 { margin: 0; font-weight: 700; }
h1 { font-size: 30px; color: var(--gold); }
h2 { font-size: 22px; word-break: break-all; color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.fine { font-size: 13.5px; color: var(--muted); margin: 0; text-align: center; }
.error { color: var(--error); margin: 8px 0; white-space: pre-wrap; }
.warn { color: var(--warn); background: var(--warn-bg); border: 1px solid rgba(245, 193, 108, 0.25); padding: 7px 12px; border-radius: 8px; }
.note { color: var(--label); background: var(--accent-soft); padding: 6px 8px; border-radius: 8px; margin: 6px 0 0; }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px;
}
input::placeholder, textarea::placeholder { color: #6f86ab; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
input[type="checkbox"] { accent-color: var(--gold); width: 18px; height: 18px; }

.btn {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px;
  padding: 9px 18px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--gold-border); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.primary {
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); color: var(--on-gold);
  border-color: transparent; font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
/* Log out: its own solid red so it stands out from the navy bar (white on #b91c1c = 6.5:1) */
.btn.logout {
  background: #b91c1c; border-color: #b91c1c; color: #fff; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn.logout:hover { background: #dc2626; border-color: #fca5a5; }
.btn.small { padding: 5px 12px; font-size: 14px; }

/* Login */
.login-view { flex: 1; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(480px, 100%); font-size: 14px; background: var(--surface); border: 1px solid rgba(201, 162, 74, 0.35);
  border-radius: 16px; padding: 30px 28px 28px; display: grid; gap: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.login-card p { margin: 0; }
.login-logo { width: 64px; height: 64px; justify-self: center; filter: drop-shadow(0 6px 14px rgba(232, 189, 85, 0.25)); }
.login-card h1 { text-align: center; margin-top: -4px; font-size: 24px; }
.login-sub { text-align: center; color: var(--label); font-size: 13px; margin-top: -8px !important; margin-bottom: 8px !important; }
.login-card label { display: grid; gap: 6px; font-size: 13px; color: var(--label); }
.login-card input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border-color: var(--gold-border);
  font-size: 15px; color: var(--text);
}
.login-card .btn.primary { padding: 12px; border-radius: 12px; font-size: 16px; margin-top: 4px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 46px; }
.eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px;
  color: var(--label); display: grid; place-items: center;
}
.eye .icon { width: 22px; height: 22px; }
.eye:hover { color: var(--gold); }

/* Avatar + presence dot (status drives colour; the label next to the name carries the same meaning) */
.avatar {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 19px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: var(--on-gold);
}
.presence { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; }
.presence-core, .presence-ping { position: absolute; inset: 0; border-radius: 50%; background: var(--presence); }
/* 2px ring in the top bar's surface colour separates the dot from the avatar */
.presence-core { border: 2px solid var(--topbar); }
.presence-ping { display: none; }
.presence[data-status="available"] { --presence: #22c55e; }
.presence[data-status="away"] { --presence: #f59e0b; }
.presence[data-status="busy"] { --presence: #ef4444; }
.presence[data-status="offline"] { --presence: #94a3b8; }
@media (prefers-reduced-motion: no-preference) {
  /* Live state: a halo pings behind the dot while the solid core stays still */
  .presence[data-live="true"] .presence-ping { display: block; animation: presence-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}
@keyframes presence-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.user-text { display: grid; line-height: 1.25; text-align: right; }
.presence-label { font-size: 13.5px; color: var(--muted); }
.presence-label[data-status="available"] { color: #86efac; }
.presence-label[data-status="away"] { color: #fcd34d; }
.presence-label[data-status="busy"] { color: #fca5a5; }

/* App shell */
.app {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "side main";
}
.topbar {
  grid-area: top; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 22px; background: var(--topbar); border-bottom: 1px solid var(--gold-border);
}
.brand { font-weight: 700; color: var(--gold); font-size: 26px; display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 40px; height: 40px; flex: none; }
.user { display: flex; gap: 10px; align-items: center; color: var(--label); }

.sidebar {
  grid-area: side; display: flex; flex-direction: column; min-height: 0;
  background: rgba(15, 31, 61, 0.85); border-right: 1px solid var(--border);
}
.sidebar-head { padding: 12px; border-bottom: 1px solid var(--border); }
.sidebar-head .search-field input { border-color: var(--gold-border); }
.sidebar-head p { margin: 6px 0 0; }
.table-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.table-list li {
  padding: 8px 10px; border-radius: 8px; cursor: pointer; display: grid; gap: 1px;
  border: 1px solid transparent;
}
.table-list li:hover { background: var(--row-alt); border-color: var(--border); }
.table-list li[aria-selected="true"] { background: var(--accent-soft); border-color: var(--gold-border); }
.table-list .t-name { font-family: "IBM Plex Mono", monospace; font-size: 14.5px; word-break: break-all; }
.table-list li[aria-selected="true"] .t-name { color: var(--gold); }
.table-list .t-desc { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content { grid-area: main; overflow: auto; padding: 20px 24px; min-width: 0; }
.empty {
  max-width: 520px; margin: 12vh auto; text-align: center; display: grid; gap: 10px; justify-items: center;
  background: var(--surface); border: 1px solid var(--gold-border); border-radius: 16px; padding: 28px;
}
.empty h2 { word-break: normal; }
.empty p { margin: 0; }

.table-head { margin-bottom: 12px; }
.table-head p { margin: 2px 0 0; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab {
  background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 18px; font-size: 17px;
  cursor: pointer; color: var(--muted);
}
.tab:disabled { opacity: .45; cursor: default; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
fieldset {
  border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--surface);
  padding: 10px 14px 14px; margin: 0; min-width: 0;
}
legend { font-weight: 600; padding: 0 6px; color: var(--label); }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.row input[type="search"] { flex: 1; min-width: 120px; }
.row.gap { gap: 16px; margin: 12px 0 0; }
.inline { display: inline-flex; gap: 6px; align-items: center; color: var(--label); }

.col-list { max-height: 280px; overflow-y: auto; display: grid; gap: 1px; }
.col-list label { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; border-radius: 6px; }
.col-list label:hover { background: var(--row-alt); }
.col-list code { font-family: "IBM Plex Mono", monospace; font-size: 14.5px; }
.col-list .c-meta { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filter-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 6px; margin-bottom: 6px; }
.filter-row > * { min-width: 0; }

textarea#sql-input {
  width: 100%; min-height: 150px; resize: vertical; border-color: var(--gold-border);
  font-family: "IBM Plex Mono", monospace; font-size: 15px;
}
.panel p { margin: 4px 0 0; }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 8px; }
#row-limit { width: 120px; }

.export-box {
  border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--surface);
  padding: 12px 14px; margin: 8px 0; display: grid; gap: 8px;
}
.export-box strong { color: var(--gold); }
.export-box p { margin: 0; }
.export-box a.btn { justify-self: start; text-decoration: none; }
.export-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-left: 14px; border-left: 1px solid var(--border); }
.export-label { color: var(--label); font-weight: 600; }
/* one stand-alone button per format; the icon takes the format's own colour */
.export-btn { border-color: var(--gold-border); font-weight: 600; }
.export-btn[data-format="csv"] .icon { color: #9ec1f0; }
.export-btn[data-format="xlsx"] .icon { color: #4ade80; }
.export-btn[data-format="gsheet"] .icon { color: #34d399; }
.export-btn:hover:not(:disabled) { background: var(--accent-soft); }
.export-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.export-box progress { width: 100%; height: 10px; accent-color: var(--gold); }

.result-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 14px 0 6px; flex-wrap: wrap; color: var(--label); }
.table-wrap { overflow: auto; max-height: 60vh; border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 15px; }
th, td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
th { position: sticky; top: 0; background: var(--surface-2); color: var(--gold); font-weight: 600; z-index: 1; box-shadow: 0 1px 0 var(--gold-border); }
tbody tr:nth-child(even) td { background: var(--row-alt); }
tbody tr:hover td { background: var(--accent-soft); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.null { color: var(--muted); font-style: italic; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.sql-used summary { cursor: pointer; }
.sql-used pre { white-space: pre-wrap; word-break: break-all; font-family: "IBM Plex Mono", monospace; font-size: 14px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }

.site-footer {
  flex: none; text-align: center; padding: 10px 16px; font-size: 14px; color: var(--muted);
  background: var(--topbar); border-top: 1px solid var(--gold-border);
}
.site-footer p { margin: 0; line-height: 1.5; }
.login-view:not([hidden]) ~ .site-footer { background: transparent; border-top-color: transparent; font-size: 12px; }
.login-card .fine { font-size: 12px; }

/* Table health check */
.count-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.count-row p { margin: 0 !important; }
.check-view { display: grid; gap: 12px; }
.check-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.check-head h2 { display: flex; align-items: center; gap: 8px; word-break: normal; }
.check-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.check-actions a.btn { text-decoration: none; }
.check-view p { margin: 0; }
.check-view progress { width: 100%; height: 10px; accent-color: var(--gold); }
.check-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.chip, .t-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--chip, var(--border)); color: var(--chip, var(--muted)); background: rgba(255, 255, 255, 0.03);
}
.chip { padding: 4px 12px; font-size: 14px; }
.t-badge { padding: 0 8px; font-size: 12px; justify-self: start; margin-top: 2px; }
[data-status="ok"] { --chip: #86efac; }
[data-status="empty"] { --chip: #9ec1f0; }
[data-status="timeout"], [data-status="session"] { --chip: #fcd34d; }
[data-status="denied"], [data-status="not_found"], [data-status="broken_view"], [data-status="error"] { --chip: #fca5a5; }
#check-table td.detail { white-space: normal; max-width: 520px; color: var(--muted); font-size: 14px; }
#check-table td button { background: none; border: none; padding: 0; color: var(--text); cursor: pointer; font: inherit; text-decoration: underline dotted; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a4170; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 820px) {
  body { height: auto; min-height: 100vh; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "top" "side" "main"; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; }
  .content { padding: 14px 16px; }
  .grid { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .login-card { padding: 24px 18px; }
  .brand { font-size: 19px; }
  .brand-icon { width: 30px; height: 30px; }
  .user-text { font-size: 13px; }
  .topbar { padding: 8px 12px; gap: 8px; }
}