@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/geist-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/geist-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gray-0:   #ffffff; /* tile / card surface   */
  --gray-50:  #f4f5f7; /* page backdrop         */
  --gray-100: #eceef2; /* subtle fill / hover   */
  --gray-150: #e6e8ec;
  --gray-200: #e0e3e8; /* borders               */
  --gray-300: #cdd2d9;
  --gray-400: #9aa1ac; /* faint text            */
  --gray-500: #6b727d; /* muted / secondary     */
  --gray-600: #4c525b;
  --gray-700: #363b43; /* body text             */
  --gray-800: #23272d;
  --gray-900: #14161a; /* headings / emphasis   */

  --red-500: #e5484d;
  --red-600: #d3383d;
  --red-700: #b92d33;
  --red-rgb: 229, 72, 77;

  --green-500: #1b9c5c;
  --green-600: #1a7f4b;
  --green-700: #166d41;
  --green-rgb: 26, 127, 75;
  --blue-600: #2563eb;
  --blue-rgb: 37, 99, 235;
  --amber-500: #e0960e;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-rgb: 180, 83, 9;

  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-2: 0 10px 30px rgba(20, 22, 26, 0.08);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

:root {
  --bs-body-bg: var(--gray-50);
  --bs-body-color: var(--gray-700);
  --bs-emphasis-color: var(--gray-900);
  --bs-secondary-color: var(--gray-500);
  --bs-tertiary-color: var(--gray-400);
  --bs-border-color: var(--gray-200);
  --bs-body-font-family: var(--font-sans);

  --bs-primary: var(--red-500);
  --bs-primary-rgb: var(--red-rgb);
  --bs-link-color: var(--red-600);
  --bs-link-color-rgb: var(--red-rgb);
  --bs-link-hover-color: var(--red-700);

  --bs-success-rgb: var(--green-rgb);
  --bs-info-rgb: var(--blue-rgb);
  --bs-warning-rgb: var(--amber-rgb);
  --bs-danger-rgb: var(--red-rgb);
  --bs-secondary-rgb: 107, 114, 125;
}

body {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  /* Column layout so the footer sticks to the bottom on short pages. */
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}

/* --- Footer --- */
.app-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--gray-200);
  background: rgba(255, 255, 255, 0.6);
  color: var(--gray-500);
  font-size: 0.85rem;
  padding: 1rem 0;
  margin-top: 100px;
}
.brand-mark--sm {
  height: 1.1rem;
  width: auto;
}


body {
  min-height: 100vh;
  background-color: var(--gray-50);
  background-image:
    linear-gradient(to right, rgba(20, 22, 26, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 22, 26, 0.022) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6, .fw-semibold {
  color: var(--gray-900);
}

/* --- Navbar --- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--gray-200);
}
.navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-700);
  /* Drop Bootstrap's default brand padding so the mark can grow without
     adding its own height on top of the navbar's. */
  padding-block: 0;
}
.brand-mark {
  height: 2.8rem;
  width: auto;
  display: inline-block;
}
/* Extra breathing room between nav items (horizontal on desktop). */
.navbar .navbar-nav { column-gap: 0.75rem; }
.navbar .nav-link { color: var(--gray-500); }
.navbar .nav-link:hover { color: var(--gray-900); }
/* Active tab: label and icon in the accent red. The icons are
   stroke="currentColor", so `color` carries both. */
.navbar .nav-link.active {
  color: var(--red-500);
}
/* Keep some hover feedback on the tab you're already on. */
.navbar .nav-link.active:hover {
  color: var(--red-600);
}
.navbar .navbar-text { color: var(--gray-500); }

.navbar .container {
    display: grid;
    /* Brand takes the free space, so both nav groups sit together on the right. */
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
}
.navbar .container > .navbar-brand {
    justify-self: start;
}
.navbar .container > .navbar-nav:last-child {
    justify-self: end;
    /* On top of the grid's 1rem, to set the account button apart from the nav links. */
    margin-left: 1rem;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

/* Profile avatar */
.avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius);
  background: var(--red-500);
  border: 1px solid var(--red-600);
  color: var(--gray-0);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Clickable avatar that opens the account dropdown */
.avatar-link { display: inline-flex; text-decoration: none; cursor: pointer; }
.avatar-link:hover .avatar {
  border-color: var(--red-700);
  background: var(--red-600);
}

/* Account dropdown */
.dropdown-menu {
  --bs-dropdown-bg: var(--gray-0);
  --bs-dropdown-border-color: var(--gray-200);
  --bs-dropdown-border-radius: var(--radius);
  --bs-dropdown-link-color: var(--gray-700);
  --bs-dropdown-link-hover-bg: var(--gray-100);
  --bs-dropdown-link-hover-color: var(--gray-900);
  --bs-dropdown-min-width: 12rem;

  background-color: var(--gray-0);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-2);
  padding: 0.35rem;
  max-width: 18rem;
}
.dropdown-menu .dropdown-item { border-radius: var(--radius-sm); }
.dropdown-item--danger { --bs-dropdown-link-color: var(--red-600); }
.dropdown-item--danger:hover,
.dropdown-item--danger:focus {
  color: #fff;
  background-color: var(--red-500);
}

/* --- Bento tiles --- */
.bento {
  background: var(--gray-0);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.bento--pad { padding: 1.5rem 1.6rem; }
.bento__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red-600);
}

.card {
  --bs-card-bg: var(--gray-0);
  --bs-card-border-color: var(--gray-200);
  --bs-card-border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* --- Buttons --- */
.btn {
  --bs-btn-font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn .bi { flex-shrink: 0; }
.btn-primary {
  --bs-btn-bg: var(--red-500);
  --bs-btn-border-color: var(--red-500);
  --bs-btn-hover-bg: var(--red-600);
  --bs-btn-hover-border-color: var(--red-600);
  --bs-btn-active-bg: var(--red-700);
  --bs-btn-active-border-color: var(--red-700);
  --bs-btn-disabled-bg: var(--red-500);
  --bs-btn-disabled-border-color: var(--red-500);
}

.btn-secondary {
  --bs-btn-color: var(--gray-800);
  --bs-btn-bg: var(--gray-100);
  --bs-btn-border-color: var(--gray-200);
  --bs-btn-hover-color: var(--gray-900);
  --bs-btn-hover-bg: var(--gray-150);
  --bs-btn-hover-border-color: var(--gray-300);
  --bs-btn-active-color: var(--gray-900);
  --bs-btn-active-bg: var(--gray-200);
  --bs-btn-active-border-color: var(--gray-300);
  --bs-btn-disabled-color: var(--gray-500);
  --bs-btn-disabled-bg: var(--gray-100);
  --bs-btn-disabled-border-color: var(--gray-200);
}

.btn-info,
.btn-danger,
.btn-warning,
.btn-success {
  --bs-btn-color: var(--btn-fg);
  --bs-btn-bg: rgba(var(--btn-rgb), 0.10);
  --bs-btn-border-color: rgba(var(--btn-rgb), 0.20);
  --bs-btn-hover-color: var(--btn-fg);
  --bs-btn-hover-bg: rgba(var(--btn-rgb), 0.18);
  --bs-btn-hover-border-color: rgba(var(--btn-rgb), 0.28);
  --bs-btn-active-color: var(--btn-fg);
  --bs-btn-active-bg: rgba(var(--btn-rgb), 0.24);
  --bs-btn-active-border-color: rgba(var(--btn-rgb), 0.30);
  --bs-btn-disabled-color: var(--btn-fg);
  --bs-btn-disabled-bg: rgba(var(--btn-rgb), 0.08);
  --bs-btn-disabled-border-color: rgba(var(--btn-rgb), 0.15);
}
.btn-info    { --btn-rgb: var(--blue-rgb);  --btn-fg: var(--blue-600); }  /* blue   */
.btn-danger  { --btn-rgb: var(--red-rgb);   --btn-fg: var(--red-600); }   /* red    */
.btn-warning { --btn-rgb: var(--amber-rgb); --btn-fg: var(--amber-700); } /* amber  */
.btn-success { --btn-rgb: var(--green-rgb); --btn-fg: var(--green-600); } /* green  */

.badge {
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.35em 0.6em;
  letter-spacing: 0.01em;
}
.badge[title] {
  cursor: pointer;
}
.badge.text-bg-success { color: var(--green-500) !important; background: rgba(var(--green-rgb), 0.12) !important; }
.badge.text-bg-info    { color: var(--blue-600) !important;  background: rgba(var(--blue-rgb), 0.10) !important; }
.badge.text-bg-warning { color: var(--amber-500) !important; background: rgba(var(--amber-rgb), 0.12) !important; }
.badge.text-bg-danger  { color: var(--red-600) !important;   background: rgba(var(--red-rgb), 0.10) !important; }
.badge.text-bg-secondary { color: var(--gray-600) !important; background: var(--gray-100) !important; }

/* --- Table --- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--gray-800);
  --bs-table-border-color: var(--gray-200);
  --bs-table-hover-bg: rgba(20, 22, 26, 0.02);
  --bs-table-hover-color: var(--gray-900);
  margin-bottom: 0;
}
.table > thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  border-bottom-color: var(--gray-200);
  font-weight: 600;
}
.table > :not(caption) > * > * { padding: 0.85rem 0.75rem; }

.cluster-name { font-weight: 400; font-size: 0.85rem; color: var(--gray-800); }

/* Fixed layout so the shared columns line up across the owned + shared tables.
   The Actions column has no width set, so it absorbs the remaining space. */
.cluster-table { table-layout: fixed; }
.cluster-table col.col-name    { width: 22%; }
.cluster-table col.col-status  { width: 14%; }
.cluster-table col.col-created { width: 14%; }
.cluster-table col.col-owner   { width: 20%; }

.text-underline-accent {
  text-decoration: none;
  padding-bottom: 0.18em;
  background-repeat: no-repeat;
  background-position: 0 95%;
  background-size: 100% 0.45em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 Q 92 1 197 8' fill='none' stroke='%23e5484d' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Resource links (homepage) --- */
.resource-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
}
.resource-link:last-child { border-bottom: 0; }
.resource-link:hover { background: var(--gray-50); color: var(--gray-900); }
/* Standalone tile variant (used in the homepage guides grid) */
.resource-tile {
  height: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-0);
  box-shadow: var(--shadow-1);
}
.resource-link > .bi:first-child { color: var(--gray-500); flex-shrink: 0; }
.resource-link:hover > .bi:first-child { color: var(--gray-700); }
/* Red leading icon in the guide tiles */
.resource-tile > .bi:first-child,
.resource-tile:hover > .bi:first-child { color: var(--red-500); }
.resource-link__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.resource-link__title { font-weight: 600; color: var(--gray-900); line-height: 1.3; }
.resource-link__desc { font-size: 0.85rem; color: var(--gray-500); }
.resource-link > .bi:last-child { color: var(--gray-400); flex-shrink: 0; }
.resource-link:hover > .bi:last-child { color: var(--gray-600); }

/* --- Forms --- */
.form-control, .form-select {
  background-color: var(--gray-0);
  border-color: var(--gray-300);
  color: var(--gray-900);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  background-color: var(--gray-0);
  border-color: var(--red-500);
  color: var(--gray-900);
  box-shadow: 0 0 0 0.2rem rgba(var(--red-rgb), 0.15);
}
.form-control::placeholder { color: var(--gray-400); }
.form-label { color: var(--gray-500); font-size: 0.85rem; font-weight: 500; }

/* --- Toasts (flash messages) --- */
.toast {
  --bs-toast-font-size: 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  border: none;
}
.toast.text-bg-danger {
  background-color: var(--red-500) !important;
  color: white !important;
}
.toast.text-bg-warning {
  background-color: var(--amber-500) !important;
  color: white !important;
}
.toast.text-bg-success {
  background-color: var(--green-500) !important;
  color: white !important;
}
.toast .btn-close {
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  /* Bootstrap's stock icon is a thin filled shape; swap in a bolder stroked X. */
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3e%3c/svg%3e");
}

/* --- Modal --- */
.modal-content {
  background-color: var(--gray-0);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.modal-header {
  border-bottom: 1px solid var(--gray-200);
  padding: 1rem 1.25rem;
}
.modal-header .modal-title { font-size: 1rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }

/* --- Docs content (rendered Markdown) --- */
.docs-content {
  color: var(--gray-700);
  line-height: 1.65;
}
.docs-content > :first-child { margin-top: 0; }
.docs-content h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}
.docs-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--red-500);
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.85rem;
}
.docs-content h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 1.75rem 0 0.6rem;
}
.docs-content p { margin: 0 0 1rem; }
.docs-content ul,
.docs-content ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.docs-content li + li { margin-top: 0.35rem; }
.docs-content a { color: var(--bs-link-color); text-decoration: underline; text-decoration-color: var(--gray-300); }
.docs-content a:hover { color: var(--bs-link-hover-color); }
.docs-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--gray-100);
  color: var(--gray-800);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}
.docs-content pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gray-100);
  background: var(--gray-900);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  overflow-x: auto;
}
.docs-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}
.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}
.docs-content th, .docs-content td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
}
.docs-content thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  font-weight: 600;
}
.docs-content blockquote {
  margin: 0 0 1.25rem;
  padding: 0.1rem 1rem;
  border-left: 3px solid var(--gray-200);
  color: var(--gray-500);
}
.docs-content hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 2rem 0;
}

/* Container log output */
.log-output {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-100);
  background: var(--gray-900);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  max-height: 55vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}