/* ============ Airtable clone: base tokens & shared primitives ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: #1d1f25;
  --text-mid: #4c535d;
  --text-quiet: #616670;
  --text-faint: #979aa0;
  --blue: #166ee1;
  --blue-hover: #0e5fcc;
  --blue-focus: #2d7ff9;
  --blue-selected: rgba(45, 127, 249, 0.10);
  --blue-selected-solid: #eaf2fe;
  --border: #dde1e3;
  --border-quiet: #e8eaed;
  --border-dark: #c0c4c9;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-hover-quiet: rgba(0, 0, 0, 0.03);
  --bg-gray: #f5f5f5;
  --bg-gray-header: #fbfbfb;
  --bg-panel: #ffffff;
  --red: #f82b60;
  --red-dark: #d5265b;
  --shadow-menu: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.16);
  --shadow-modal: 0 0 0 2px rgba(0,0,0,0.04), 0 6px 32px rgba(0,0,0,0.24);
  --shadow-card: 0 0 0 1px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06);
  --radius: 6px;
  --radius-lg: 8px;

  /* select / base color palette (Airtable light-2 + bright) */
  --c-blueLight: #cfdfff;   --c-blueBright: #2d7ff9;  --c-blueDark: #2750ae;
  --c-cyanLight: #d0f0fd;   --c-cyanBright: #18bfff;  --c-cyanDark: #0b76b7;
  --c-tealLight: #c2f5e9;   --c-tealBright: #20d9d2;  --c-tealDark: #06a09b;
  --c-greenLight: #d1f7c4;  --c-greenBright: #20c933; --c-greenDark: #338a17;
  --c-yellowLight: #ffeab6; --c-yellowBright: #fcb400;--c-yellowDark: #b87503;
  --c-orangeLight: #fee2d5; --c-orangeBright: #ff6f2c;--c-orangeDark: #d74d26;
  --c-redLight: #ffdce5;    --c-redBright: #f82b60;   --c-redDark: #ba1e45;
  --c-pinkLight: #ffdaf9;   --c-pinkBright: #ff08c2;  --c-pinkDark: #b2158b;
  --c-purpleLight: #ede2fe; --c-purpleBright: #8b46ff;--c-purpleDark: #6b1cb0;
  --c-grayLight: #eeeeee;   --c-grayBright: #666666;  --c-grayDark: #444444;
}

html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: #fff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app { display: flex; flex-direction: column; height: 100vh; }
#main { display: flex; flex: 1; min-height: 0; position: relative; }
#viewport { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: #f7f8fa; }

svg.icon { display: inline-block; vertical-align: middle; flex: none; fill: currentColor; }

/* ---------- scrollbars ---------- */
.scrollable::-webkit-scrollbar, .grid-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.scrollable::-webkit-scrollbar-thumb, .grid-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22); border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
.scrollable::-webkit-scrollbar-thumb:hover, .grid-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.35); background-clip: content-box; }
.scrollable::-webkit-scrollbar-corner, .grid-scroll::-webkit-scrollbar-corner { background: transparent; }

/* ---------- buttons ---------- */
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: var(--radius);
  font-size: 13px; color: var(--text); white-space: nowrap;
  transition: background-color 0.08s ease;
}
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--blue); color: #fff; font-weight: 500; }
.btn.primary:hover { background: var(--blue-hover); }
.btn.danger { background: var(--red); color: #fff; font-weight: 500; }
.btn.danger:hover { background: var(--red-dark); }
.btn.quietBorder { box-shadow: inset 0 0 0 1px var(--border-dark); background: #fff; }
.btn.quietBorder:hover { background: var(--bg-gray); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { background: none; }
.btn.primary:disabled:hover { background: var(--blue); }

/* ---------- inputs ---------- */
input, textarea, select { font-family: inherit; font-size: 13px; color: var(--text); }
.text-input {
  width: 100%; height: 30px; padding: 0 8px;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--border-dark);
  border-radius: var(--radius); outline: none; background: #fff;
}
.text-input:focus { box-shadow: none; border-color: var(--blue-focus); }
.text-input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ---------- select pills ---------- */
.pill {
  display: inline-flex; align-items: center; max-width: 100%;
  height: 18px; padding: 0 8px; border-radius: 9999px;
  font-size: 13px; line-height: 18px; color: var(--text);
  white-space: nowrap;
}
.pill .pill-text { overflow: hidden; text-overflow: ellipsis; }
.pill.c-blue { background: var(--c-blueLight); }
.pill.c-cyan { background: var(--c-cyanLight); }
.pill.c-teal { background: var(--c-tealLight); }
.pill.c-green { background: var(--c-greenLight); }
.pill.c-yellow { background: var(--c-yellowLight); }
.pill.c-orange { background: var(--c-orangeLight); }
.pill.c-red { background: var(--c-redLight); }
.pill.c-pink { background: var(--c-pinkLight); }
.pill.c-purple { background: var(--c-purpleLight); }
.pill.c-gray { background: var(--c-grayLight); }

.swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.sw-blue { background: var(--c-blueLight); } .sw-cyan { background: var(--c-cyanLight); }
.sw-teal { background: var(--c-tealLight); } .sw-green { background: var(--c-greenLight); }
.sw-yellow { background: var(--c-yellowLight); } .sw-orange { background: var(--c-orangeLight); }
.sw-red { background: var(--c-redLight); } .sw-pink { background: var(--c-pinkLight); }
.sw-purple { background: var(--c-purpleLight); } .sw-gray { background: var(--c-grayLight); }

/* linked record pill */
.link-pill {
  display: inline-flex; align-items: center; max-width: 100%;
  height: 20px; padding: 0 8px; border-radius: 9999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--border-dark);
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.link-pill:hover { background: var(--bg-gray); }
.link-pill .pill-text { overflow: hidden; text-overflow: ellipsis; }

/* rating stars */
.stars { display: inline-flex; align-items: center; gap: 1px; }
.stars .star { color: #fcb400; display: inline-flex; }
.stars .star.empty { color: rgba(0,0,0,0.15); }
.stars.editable .star { cursor: pointer; }

/* checkbox rendering */
.at-check { color: #20c933; display: inline-flex; }

/* misc */
.flex { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiet { color: var(--text-quiet); }
.faint { color: var(--text-faint); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.linklike { color: var(--blue); cursor: pointer; text-decoration: none; }
.linklike:hover { text-decoration: underline; }
a.cell-url { color: var(--blue); text-decoration: none; }
a.cell-url:hover { text-decoration: underline; }

::selection { background: rgba(45,127,249,0.25); }