*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Every page is locked to the browser viewport: the window itself never
   scrolls; overflowing content scrolls inside its own page/tab area. */
html, body { height: 100%; width: 100%; overflow: hidden; }
body {
  font-family: 'Segoe UI', sans-serif;
  background: #f0f2f5;
  color: #222;
  display: flex;
  flex-direction: column;
}

/* CONFIG BAR */
#config-bar {
  background: #1a1a2e;
  color: #ccc;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  flex-shrink: 0;
}
#config-bar label { display: flex; align-items: center; gap: 6px; }
#config-bar input {
  background: #2a2a4a;
  border: 1px solid #444;
  color: #eee;
  padding: 4px 8px;
  border-radius: 4px;
  width: 220px;
  font-size: 12px;
}

/* PAGES */
.page { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; }
#page-dashboard { display: flex; flex-direction: column; overflow: hidden; }
.hidden { display: none !important; }

/* AUTH CARDS */
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  padding: 36px 40px;
  width: 380px;
  max-width: calc(100% - 32px);
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h2 { text-align: center; color: #1a1a2e; margin-bottom: 4px; }
.card input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
}
.card input:focus { outline: none; border-color: #4f46e5; }
.card button {
  background: #4f46e5;
  color: #fff;
  border: none;
  padding: 11px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 4px;
}
.card button:hover { background: #4338ca; }
.row-links { display: flex; justify-content: space-between; font-size: 13px; }
.row-links a { color: #4f46e5; text-decoration: none; }

/* NAV */
nav {
  background: #1a1a2e;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.brand { color: #fff; font-weight: 700; font-size: 16px; margin-right: 16px; padding: 14px 0; }
.tab-btn {
  background: none;
  border: none;
  color: #aaa;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.tab-btn:hover { color: #fff; }
.tab-btn.active { color: #fff; border-bottom-color: #4f46e5; }
.logout-btn {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.logout-btn:hover { background: #b91c1c; }

/* TAB CONTENT */
.tab-content {
  padding: 28px 32px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
}
#tab-tables {
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}

/* ─── VIEWPORT-FIT LAYOUT (use on every page/tab with a list, table or log) ───
   Goal: a page never makes the browser window scroll, and its controls
   (toolbars, buttons, pagination) stay on screen. Only the data region scrolls.

     <div id="tab-foo" class="tab-content fill">   ← flex column sized to viewport
       <h3>…</h3> <div class="toolbar">…</div>      ← fixed-height rows (never shrink)
       <div class="fill-scroll"> <table>…</table> </div>  ← takes remaining height, scrolls
       <div class="pager">…</div>                   ← stays visible at the bottom
     </div>

   - .fill        flex column. On a .tab-content it fills the space under the nav;
                  nested inside another .fill it grows to take the leftover space.
   - .fill-scroll the one region that scrolls (both axes); table headers stick.
   - .fill-grow   takes leftover space but does NOT scroll itself — use for a
                  custom inner layout (e.g. side-by-side panes) whose children scroll.
   If the fixed content is taller than the window, the tab itself scrolls as a
   fallback, and .fill-scroll keeps a usable minimum height. */
.fill { display: flex; flex-direction: column; min-height: 0; }
.fill > * { flex-shrink: 0; }
.fill > button { align-self: flex-start; }
.fill > .fill,
.fill > .fill-grow { flex: 1 1 auto; min-height: 0; }
.fill > .fill-scroll { flex: 1 1 auto; min-height: 260px; overflow: auto; }
.fill-scroll > table { overflow: visible !important; }
.fill-scroll > table > thead th { position: sticky; top: 0; z-index: 1; }
.tab-content h3 { margin-bottom: 20px; color: #1a1a2e; font-size: 18px; }

/* GRID FORM */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.grid2 label, .tab-content label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #555;
  gap: 4px;
}
.grid2 input, .tab-content input, .tab-content textarea, .tab-content select {
  padding: 9px 11px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
.grid2 input:focus, .tab-content input:focus,
.tab-content textarea:focus, .tab-content select:focus {
  outline: none;
  border-color: #4f46e5;
}
.tab-content input[readonly] { background: #f5f5f5; }
/* The text-box rules above must not stretch checkboxes/radios: keep them their natural size,
   and lay out a label that wraps one as a single row (box then text), vertically centred. */
.tab-content input[type="checkbox"], .tab-content input[type="radio"],
.grid2 input[type="checkbox"], .grid2 input[type="radio"] {
  width: auto; padding: 0; margin: 0; flex: 0 0 auto; accent-color: #4f46e5;
}
.tab-content label:has(> input[type="checkbox"]), .tab-content label:has(> input[type="radio"]) {
  flex-direction: row; align-items: center; gap: 6px;
}

/* BUTTONS */
.tab-content > button, .row > button {
  background: #4f46e5;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}
.tab-content > button:hover, .row > button:hover { background: #4338ca; }

/* DYNAMO ROW */
.row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.row select {
  padding: 9px 11px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}
#dynamo-body { width: 100%; font-family: monospace; font-size: 13px; border: 1px solid #ddd; border-radius: 6px; padding: 10px; }
#dynamo-result {
  margin-top: 14px;
  background: #1a1a2e;
  color: #7dd3fc;
  padding: 16px;
  border-radius: 8px;
  font-size: 12px;
  min-height: 160px; /* fills remaining tab height via .fill-scroll */
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* MESSAGES */
.msg {
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
  border-radius: 4px;
  padding: 0 2px;
}
.msg.ok { color: #16a34a; }
.msg.err { color: #dc2626; }

/* EMAIL / SMS labels stacked */
#tab-email label, #tab-sms label, #tab-password label {
  margin-bottom: 10px;
}

/* DB TABLES TAB */
#tables-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  cursor: pointer;
  transition: box-shadow .15s;
}
.table-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.1); border-color: #4f46e5; }
.table-card .icon { font-size: 20px; }

/* DB TABLES EXPLORER (shared by the dashboard's "DB Tables" tab and the
   standalone tables.html page — both load tables.js against this markup) */
#tbl-sidebar {
  width: 220px; min-width: 120px; max-width: 480px; flex-shrink: 0;
  background: #1a1a2e; color: #ccc;
  overflow-y: auto; padding: 12px 0;
  resize: horizontal; overflow-x: hidden;
}
#tbl-sidebar h4 { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 0 16px 8px; margin: 0; }
.tbl-item { padding: 9px 16px; cursor: pointer; font-size: 13px; border-left: 3px solid transparent; transition: background .1s; display: flex; align-items: center; gap: 8px; }
.tbl-item:hover { background: #2a2a4a; color: #fff; }
.tbl-item.active { background: #2a2a4a; color: #fff; border-left-color: #4f46e5; }
.tbl-item .badge { margin-left: auto; background: #4f46e5; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
.tbl-item .count-badge { margin-left: auto; background: #374151; color: #d1d5db; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
/* #tbl-main fills the space beside the sidebar. Only the data grid (.tbl-wrap)
   scrolls, so the header, search bar and pagination always stay on screen. */
#tbl-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 20px 28px; background: #f0f2f5; }
#tbl-table-detail { flex: 1 1 auto; min-height: 0; flex-direction: column; }
#tbl-table-detail > * { flex-shrink: 0; }
#tbl-table-detail > .data-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#tbl-table-detail > .data-section > * { flex-shrink: 0; }
#tbl-table-detail > .data-section > .tbl-wrap { flex: 1 1 auto; min-height: 120px; overflow: auto; }
/* Open schema panels scroll internally instead of pushing the grid off screen */
#tbl-table-detail .schema-section.open .section-body { max-height: 30vh; overflow: auto; }
#tbl-main h2 { color: #1a1a2e; margin-bottom: 4px; }
.meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.badge-pill { background: #e0e7ff; color: #4338ca; font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 500; }
.badge-pill.gsi { background: #fef3c7; color: #92400e; }
.badge-pill.range { background: #dcfce7; color: #166534; }
.schema-section { margin-bottom: 24px; }
.schema-section h4 { font-size: 13px; color: #555; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.schema-section h4::before { content: '▶'; font-size: 10px; transition: transform .2s; }
.schema-section.open h4::before { transform: rotate(90deg); }
.schema-section .section-body { display: none; }
.schema-section.open .section-body { display: block; }
table.schema { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
table.schema th { background: #1a1a2e; color: #fff; font-size: 12px; padding: 9px 14px; text-align: left; }
table.schema td { padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
table.schema tr:last-child td { border-bottom: none; }
.key-hash { color: #4f46e5; font-weight: 600; }
.key-range { color: #16a34a; font-weight: 600; }
.data-section { margin-top: 8px; }
.data-section h4 { font-size: 13px; color: #555; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 10px; }
.data-section h4 button { background: #4f46e5; color: #fff; border: none; padding: 4px 12px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.data-section h4 button:hover { background: #4338ca; }
.tbl-wrap { overflow: auto; }
/* Keep column headers visible while scrolling the grid vertically */
.tbl-wrap table.data { overflow: visible; }
.tbl-wrap table.data thead th { position: sticky; top: 0; z-index: 1; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); font-size: 12px; }
table.data th { background: #f8fafc; color: #444; padding: 8px 12px; text-align: left; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
table.data td { padding: 7px 12px; border-bottom: 1px solid #f0f0f0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data tr:hover td { background: #f8f8ff; }
table.data td.editable { cursor: pointer; }
table.data td.editable:hover { background: #eef2ff; outline: 1px dashed #a5b4fc; }
table.data td.editable[contenteditable=true] { background: #fff8dc; outline: 2px solid #4f46e5; cursor: text; white-space: normal; }
table.data td.dirty { background: #fef9c3 !important; }
.save-btn { background: #16a34a; color: #fff; border: none; padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.save-btn:hover { background: #15803d; }
.del-bar { display: none; margin-bottom: 8px; align-items: center; gap: 10px; }
.del-bar.visible { display: flex; }
.del-btn { background: #dc2626; color: #fff; border: none; padding: 5px 14px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.del-btn:hover { background: #b91c1c; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { background: #eef2ff; color: #4f46e5; }
table.data th.sort-asc::after { content: ' ▲'; font-size: 10px; }
table.data th.sort-desc::after { content: ' ▼'; font-size: 10px; }
table.data th.cb-cell, table.data td.cb-cell { width: 32px; padding: 7px 8px; text-align: center; }
table.data tr.selected td { background: #fee2e2 !important; }
#tbl-data-msg { font-size: 13px; margin: 8px 0; min-height: 18px; }
#tbl-data-msg.ok { color: #16a34a; }
#tbl-data-msg.err { color: #dc2626; }
#tbl-placeholder { color: #888; margin-top: 80px; text-align: center; font-size: 15px; }
#tbl-search-bar { display: none; margin-bottom: 10px; }
#tbl-search-bar.visible { display: flex; align-items: center; gap: 8px; }
#tbl-search-col { width: auto; flex: 0 0 auto; padding: 6px 8px; font-size: 13px; }
#tbl-search-input { flex: 1; max-width: 320px; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; }
#tbl-search-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 2px #e0e7ff; }
#tbl-pagination { display: none; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#tbl-pagination.visible { display: flex; }
.pg-btn { background: #fff; border: 1px solid #d1d5db; color: #374151; padding: 4px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.pg-btn:hover:not(:disabled) { background: #e0e7ff; border-color: #4f46e5; color: #4f46e5; }
.pg-btn:disabled { opacity: .4; cursor: default; }
#tbl-pg-info { font-size: 12px; color: #555; margin: 0 4px; }

/* EXCEL-LIKE COLUMN FILTERS */
.th-label { margin-right: 4px; }
.col-filter-btn {
  display: inline-block;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 10px;
  color: #94a3b8;
  cursor: pointer;
}
.col-filter-btn:hover { background: #e0e7ff; color: #4f46e5; }
.col-filter-btn.active { color: #4f46e5; font-weight: 700; }

.col-filter-dropdown {
  position: fixed;
  z-index: 3000;
  width: 230px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 10px;
  font-size: 13px;
  color: #222;
}
.col-filter-dropdown .cf-search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 12px;
  margin-bottom: 6px;
}
.col-filter-dropdown .cf-search:focus { outline: none; border-color: #4f46e5; }
.col-filter-dropdown .cf-actions {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 6px;
}
.col-filter-dropdown .cf-actions a { color: #4f46e5; text-decoration: none; }
.col-filter-dropdown .cf-actions a:hover { text-decoration: underline; }
.col-filter-dropdown .cf-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 4px 6px;
  margin-bottom: 8px;
}
.col-filter-dropdown .cf-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  font-size: 12px;
  cursor: pointer;
}
.col-filter-dropdown .cf-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-filter-dropdown .cf-footer { display: flex; gap: 6px; justify-content: flex-end; }
.col-filter-dropdown .cf-btn {
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  background: #f1f5f9;
  color: #334155;
}
.col-filter-dropdown .cf-btn:hover { background: #e2e8f0; }
.col-filter-dropdown .cf-btn.cf-apply { background: #4f46e5; color: #fff; }
.col-filter-dropdown .cf-btn.cf-apply:hover { background: #4338ca; }
.col-filter-dropdown .cf-btn.cf-reset { margin-right: auto; }

/* ADD ROW MODAL */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 4000;
}
.modal-panel {
  background: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.modal-panel h3 { color: #1a1a2e; margin-bottom: 14px; font-size: 17px; }
.modal-body { display: flex; flex-direction: column; gap: 18px; }
.ar-section h4 {
  font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ar-add-field {
  background: #4f46e5; color: #fff; border: none; padding: 4px 10px;
  border-radius: 5px; font-size: 12px; cursor: pointer;
}
.ar-add-field:hover { background: #4338ca; }
.ar-key-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.ar-key-row label { font-size: 12px; color: #333; display: flex; align-items: center; gap: 6px; }
.ar-key-badge { font-size: 10px; color: #4f46e5; background: #e0e7ff; padding: 1px 6px; border-radius: 8px; }
.ar-key-row input { padding: 7px 9px; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; }
.ar-field-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.ar-field-row input, .ar-field-row select { padding: 6px 8px; border: 1px solid #ddd; border-radius: 5px; font-size: 12px; width: 100%; }
.ar-extra-note { font-size: 12px; color: #666; margin: -4px 0 8px; line-height: 1.4; }
.ar-extra-note:empty { display: none; }
.ar-field-remove { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 14px; padding: 2px 6px; }
.ar-field-remove:hover { background: #fee2e2; border-radius: 4px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }