/* ── Brand tokens ─────────────────────────────────────────── */
:root {
  --gp-teal:        #1a525f;
  --gp-teal-dark:   #112f38;
  --gp-teal-mid:    #22697a;
  --gp-teal-light:  #d4eaed;
  --gp-teal-xlight: #eef6f8;
  --gp-green:       #97c92d;
  --gp-green-dark:  #78a020;
  --gp-green-light: #eef7d4;
  --gp-bg:          #f2f6f7;
  --gp-text:        #1b2428;
  --gp-muted:       #6b8490;
  --gp-border:      #dde7ea;
  --gp-sidebar-w:   260px;
  --gp-topbar-h:    56px;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--gp-bg);
  color: var(--gp-text);
}

/* ── App wrapper ──────────────────────────────────────────── */
#wrapper {
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────── */

/* Mobile: use Bootstrap offcanvas defaults, just override colours */
#sidebar {
  --bs-offcanvas-bg: var(--gp-teal-dark);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-color: rgba(255, 255, 255, .8);
  background: var(--gp-teal-dark) !important;
}

/* Desktop: show inline, sticky, full height */
@media (min-width: 992px) {
  #sidebar {
    width: var(--gp-sidebar-w) !important;
    min-width: var(--gp-sidebar-w) !important;
    position: sticky !important;
    top: 0;
    height: 100vh !important;
    overflow-y: auto;
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column;
  }

  #sidebar .offcanvas-body {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1 !important;
    overflow-y: auto;
    padding: 0;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-brand img {
  height: 32px;
  width: auto;
}

.sidebar-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  display: block;
}

.sidebar-brand-tagline {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--gp-green);
  display: block;
  margin-top: 1px;
}

/* offcanvas header (mobile only — hidden on desktop by Bootstrap) */
.offcanvas-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.offcanvas-header .btn-close-white {
  opacity: .5;
}

.sidebar-nav-body {
  flex-grow: 1;
  padding: .5rem 0;
}

.sidebar-section-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: rgba(255, 255, 255, .28);
  padding: 1rem 1.25rem .3rem;
  display: block;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav a,
.sidebar-nav-btn {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .575rem 1.25rem;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: .8375rem;
  font-weight: 500;
  transition: background .12s, color .12s;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.sidebar-nav a .nav-icon,
.sidebar-nav-btn .nav-icon {
  width: 17px;
  text-align: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .38);
  flex-shrink: 0;
  transition: color .12s;
}

.sidebar-nav a:hover,
.sidebar-nav-btn:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.sidebar-nav a:hover .nav-icon,
.sidebar-nav-btn:hover .nav-icon {
  color: var(--gp-green);
}

.sidebar-nav a.active {
  background: rgba(151, 201, 45, .1);
  color: #fff;
  border-left: 3px solid var(--gp-green);
  padding-left: calc(1.25rem - 3px);
}

.sidebar-nav a.active .nav-icon {
  color: var(--gp-green);
}

.sidebar-footer {
  padding: .5rem 0 .75rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  flex-shrink: 0;
}

/* ── Topbar ───────────────────────────────────────────────── */
#topbar {
  height: var(--gp-topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--gp-border);
  display: flex;
  align-items: center;
  padding: 0 1.375rem;
  gap: .875rem;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.topbar-menu-btn {
  background: none;
  border: none;
  padding: .25rem .375rem;
  color: var(--gp-muted);
  font-size: 1rem;
  cursor: pointer;
  border-radius: .3rem;
  line-height: 1;
}

.topbar-menu-btn:hover {
  color: var(--gp-teal);
  background: var(--gp-teal-xlight);
}

.topbar-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gp-muted);
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--gp-muted);
  min-width: 0;
}

.topbar-user .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gp-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.topbar-user span {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Page content ─────────────────────────────────────────── */
#page-content {
  min-width: 0;
}

.main-content {
  padding: 1.75rem;
}

/* ── Page header ──────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
}

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}

.page-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gp-teal-dark);
  margin: 0 0 .2rem;
}

.page-header .page-subtitle {
  font-size: .8125rem;
  color: var(--gp-muted);
  margin: 0;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  border-color: var(--gp-border);
  box-shadow: 0 1px 3px rgba(26, 82, 95, .06);
  border-radius: .5rem;
}

.card-header {
  background: #fff;
  border-bottom-color: var(--gp-border);
  font-weight: 600;
  font-size: .875rem;
  color: var(--gp-teal-dark);
  padding: .875rem 1.25rem;
}

.card-body {
  background: #fff;
}

.card-footer {
  background: #fafcfc;
  border-top-color: var(--gp-border);
}

/* ── Tables ───────────────────────────────────────────────── */
.table thead th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 700;
  color: var(--gp-muted);
  border-bottom: 2px solid var(--gp-border);
  background: #f8fbfc;
  padding: .75rem 1rem;
}

.table td {
  vertical-align: middle;
  font-size: .8375rem;
  padding: .75rem 1rem;
  color: var(--gp-text);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--gp-teal-xlight);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--gp-teal);
  --bs-btn-border-color: var(--gp-teal);
  --bs-btn-hover-bg: var(--gp-teal-mid);
  --bs-btn-hover-border-color: var(--gp-teal-mid);
  --bs-btn-active-bg: var(--gp-teal-dark);
  --bs-btn-active-border-color: var(--gp-teal-dark);
  --bs-btn-focus-shadow-rgb: 26, 82, 95;
}

.btn-accent {
  --bs-btn-bg: var(--gp-green);
  --bs-btn-border-color: var(--gp-green);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--gp-green-dark);
  --bs-btn-hover-border-color: var(--gp-green-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--gp-green-dark);
  --bs-btn-active-color: #fff;
}

.btn-accent {
  background: var(--gp-green);
  border-color: var(--gp-green);
  color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--gp-green-dark);
  border-color: var(--gp-green-dark);
  color: #fff;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gp-text);
  margin-bottom: .3rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gp-teal);
  box-shadow: 0 0 0 .2rem rgba(26, 82, 95, .18);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge-active {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: var(--gp-green-light);
  color: var(--gp-green-dark);
  font-size: .7rem;
  padding: .2em .55em;
  border-radius: 100px;
  font-weight: 600;
}

.badge-inactive {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: rgba(107, 132, 144, .1);
  color: var(--gp-muted);
  font-size: .7rem;
  padding: .2em .55em;
  border-radius: 100px;
  font-weight: 600;
}

.badge-teal {
  background: var(--gp-teal-light);
  color: var(--gp-teal-dark);
  font-size: .7rem;
  padding: .2em .55em;
  border-radius: 100px;
  font-weight: 600;
}

/* ── Capability pills ─────────────────────────────────────── */
.cap-pill {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .7rem;
  font-weight: 600;
  padding: .2em .55em;
  border-radius: 100px;
}

.cap-pill-bookable  { background: #e8f4ff; color: #1565c0; }
.cap-pill-cleanable { background: var(--gp-green-light); color: var(--gp-green-dark); }
.cap-pill-maintain  { background: #fff3e0; color: #e65100; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gp-muted);
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--gp-teal-light);
  margin-bottom: 1rem;
  display: block;
}

.empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gp-teal-dark);
  margin-bottom: .375rem;
}

.empty-state p {
  font-size: .825rem;
  margin-bottom: 1.25rem;
}

/* ── Auth layout ──────────────────────────────────────────── */
.auth-body {
  background: var(--gp-teal-dark);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: .625rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
  padding: 2.25rem;
}

.auth-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auth-logo img {
  height: 145px;
}

.auth-logo .auth-brand-name {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gp-teal-dark);
  margin-top: .625rem;
}

.auth-logo .auth-brand-tagline {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gp-green-dark);
  font-weight: 600;
}

.auth-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gp-teal-dark);
  margin-bottom: .25rem;
}

.auth-card .auth-subtitle {
  font-size: .8rem;
  color: var(--gp-muted);
  margin-bottom: 1.5rem;
}

.auth-footer-note {
  font-size: .75rem;
  color: var(--gp-muted);
  text-align: center;
  margin-top: 1.25rem;
}

/* ── Alert overrides ──────────────────────────────────────── */
.alert-info {
  --bs-alert-color: var(--gp-teal-dark);
  --bs-alert-bg: var(--gp-teal-xlight);
  --bs-alert-border-color: var(--gp-teal-light);
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  font-size: .8rem;
  margin-bottom: .75rem;
}

.breadcrumb-item a {
  color: var(--gp-teal);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--gp-muted);
}

/* ── Site cards ───────────────────────────────────────────── */
.site-card-link {
  text-decoration: none;
  display: flex;
  height: 100%;
}

.site-card {
  height: 100%;
  transition: box-shadow .15s, transform .15s;
  overflow: hidden;
}

.site-card-link:hover .site-card {
  box-shadow: 0 6px 20px rgba(26, 82, 95, .14);
  transform: translateY(-2px);
}

.site-card-image {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #112f38 0%, #1a525f 100%);
  flex-shrink: 0;
}

.site-card-image--1 { background: linear-gradient(135deg, #4a6010 0%, #78a020 100%); }
.site-card-image--2 { background: linear-gradient(135deg, #1a3f5f 0%, #2a6090 100%); }
.site-card-image--3 { background: linear-gradient(135deg, #1a4f40 0%, #2a7a60 100%); }
.site-card-image--4 { background: linear-gradient(135deg, #2a1a5f 0%, #4a3090 100%); }

.site-initials {
  font-size: 2.25rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .03em;
  user-select: none;
}

.site-card-name {
  font-weight: 700;
  color: var(--gp-teal-dark);
  margin-bottom: .3rem;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-card-address {
  font-size: .775rem;
  color: var(--gp-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-card-no-address {
  font-style: italic;
  opacity: .6;
}

/* New site card */
.site-card-new-link {
  text-decoration: none;
  display: flex;
  height: 100%;
}

.site-card-new {
  border: 2px dashed var(--gp-teal-light) !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s !important;
}

.site-card-new-link:hover .site-card-new {
  border-color: var(--gp-teal) !important;
  background: var(--gp-teal-xlight) !important;
  transform: none;
  box-shadow: none !important;
}

.site-card-new-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--gp-teal);
  padding: 2rem 1rem;
}

.site-card-new-icon {
  font-size: 1.75rem;
  opacity: .55;
}

.site-card-new-label {
  font-size: .8375rem;
  font-weight: 600;
  color: var(--gp-teal-mid);
}

/* ── Auth tabs ────────────────────────────────────────────── */
.auth-tabs {
  border-bottom: 2px solid var(--gp-border);
  margin: 0 -2.25rem 0;
  padding: 0 2.25rem;
}

.auth-tabs .nav-item {
  flex: 1;
}

.auth-tabs .nav-link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gp-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .65rem .5rem;
  margin-bottom: -2px;
  background: none;
  transition: color .12s, border-color .12s;
}

.auth-tabs .nav-link.active {
  color: var(--gp-teal);
  border-bottom-color: var(--gp-teal);
  background: none;
}

.auth-tabs .nav-link:hover:not(.active) {
  color: var(--gp-teal-mid);
  border-bottom-color: var(--gp-teal-light);
}

/* ── Validation summary ───────────────────────────────────── */
.validation-summary-valid {
  display: none !important;
}

.validation-summary-errors {
  background: #f8d7da;
  border: 1px solid #f1aeb5;
  color: #58151c;
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .8125rem;
  margin-bottom: 1rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

.field-validation-error {
  color: #dc3545;
  font-size: .775rem;
  display: block;
  margin-top: .2rem;
}

.field-validation-valid {
  display: none;
}

/* ── Capability checkbox group ────────────────────────────── */
.cap-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

.cap-check-item {
  cursor: pointer;
  margin: 0;
}

.cap-check-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cap-check-label {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .8rem;
  font-weight: 600;
  padding: .35em .75em;
  border-radius: 100px;
  border: 1.5px solid var(--gp-border);
  background: #fff;
  color: var(--gp-muted);
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
}

.cap-check-item input:checked + .cap-check-label {
  border-color: var(--gp-teal);
  background: var(--gp-teal-xlight);
  color: var(--gp-teal-dark);
}

.cap-check-item:hover .cap-check-label {
  border-color: var(--gp-teal-mid);
  color: var(--gp-teal);
}

/* ── Space cards ───────────────────────────────────────────── */
.space-card-link {
  color: inherit;
  text-decoration: none;
}

.space-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 300px;
  height: 100%;
  transition: box-shadow .15s ease, transform .15s ease;
}

#sites-grid > [data-id],
#spaces-grid > [data-id] {
  display: flex;
  align-items: stretch;
}

#sites-grid > [data-id] > .space-card,
#spaces-grid > [data-id] > .space-card {
  flex: 1 1 auto;
}

.space-card:hover {
  box-shadow: 0 6px 20px rgba(26, 82, 95, .14);
  transform: translateY(-2px);
}

.space-card-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #112f38 0%, #1a525f 100%);
  overflow: hidden;
}

.space-card-media-link {
  display: block;
}

.space-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-card-icon-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3fffb;
  font-size: 2rem;
}

.space-card-icon-wrap--0 { background: linear-gradient(135deg, #1a525f 0%, #2e7685 100%); }
.space-card-icon-wrap--1 { background: linear-gradient(135deg, #4a6010 0%, #78a020 100%); }
.space-card-icon-wrap--2 { background: linear-gradient(135deg, #1a3f5f 0%, #2a6090 100%); }
.space-card-icon-wrap--3 { background: linear-gradient(135deg, #1a4f40 0%, #2a7a60 100%); }

.space-card .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.space-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}

.space-card-name {
  font-weight: 700;
  color: var(--gp-teal-dark);
  margin: 0;
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-card-desc {
  font-size: .775rem;
  color: var(--gp-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.space-card-desc--placeholder {
  visibility: hidden;
}

.space-card-caps {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: auto;
  padding-top: .375rem;
}

.space-card-no-caps {
  font-size: .7rem;
  color: var(--gp-muted);
  font-style: italic;
}

.space-card-footer {
  border-top: 1px solid var(--gp-border);
  background: #fafcfc;
  padding: .4rem .875rem;
  display: flex;
  gap: .75rem;
}

.space-card-action {
  position: relative;
  z-index: 3;
}

.space-card .card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  min-height: 46px;
  position: relative;
  z-index: 3;
}

.space-card .card-footer .btn {
  white-space: nowrap;
}

/* New space card */
.space-card-new-link {
  text-decoration: none;
  display: flex;
  height: 100%;
}

.space-card-new {
  border: 2px dashed var(--gp-teal-light) !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 300px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s !important;
}

.space-card-new-link:hover .space-card-new {
  border-color: var(--gp-teal) !important;
  background: var(--gp-teal-xlight) !important;
  transform: none;
  box-shadow: none !important;
}

.space-card-new-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--gp-teal);
  padding: 2rem 1rem;
}

.space-card-new-icon {
  font-size: 1.75rem;
  opacity: .55;
}

.space-card-new-label {
  font-size: .8375rem;
  font-weight: 600;
  color: var(--gp-teal-mid);
}

/* ── Space props (detail page) ─────────────────────────────── */
.space-props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  font-size: .8375rem;
  margin: 0;
}

.space-props dt {
  font-weight: 600;
  color: var(--gp-muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: .25rem;
  white-space: nowrap;
}

.space-props dd {
  margin: 0;
  padding-top: .15rem;
  color: var(--gp-text);
}

.space-props dt:not(:first-child),
.space-props dd:not(:nth-child(2)) {
  border-top: 1px solid var(--gp-border);
  padding-top: .6rem;
  margin-top: .3rem;
}

/* ── Space edit image cropper ─────────────────────────────── */
.space-edit-current-image-wrap {
  border: 1px solid var(--gp-border);
  border-radius: .5rem;
  overflow: hidden;
  background: #f7fbfb;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-edit-current-image-wrap--empty {
  flex-direction: column;
  gap: .5rem;
  color: var(--gp-muted);
  font-size: .825rem;
}

.space-edit-current-image-wrap--empty i {
  font-size: 1.5rem;
  opacity: .55;
}

.space-edit-current-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-crop-panel {
  border-top: 1px solid var(--gp-border);
  padding-top: .9rem;
}

.space-crop-stage {
  position: relative;
  margin-top: .5rem;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid var(--gp-border);
  background: #f0f6f7;
}

.space-crop-stage img {
  width: 100%;
  display: block;
  user-select: none;
}

.space-crop-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
}

.space-crop-box {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .32);
  border-radius: .35rem;
  cursor: grab;
}

.space-crop-box:active {
  cursor: grabbing;
}

/* ── Space tree ────────────────────────────────────────────── */
.space-tree {
  display: flex;
  flex-direction: column;
}

.space-tree-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid var(--gp-border);
  padding-left: calc(1.25rem + var(--depth, 0) * 1.5rem);
  transition: background .1s;
}

.space-tree-row:last-child {
  border-bottom: none;
}

.space-tree-row:hover {
  background: var(--gp-teal-xlight);
}

.space-tree-connector {
  width: 14px;
  flex-shrink: 0;
  color: var(--gp-border);
  font-size: .7rem;
}

.space-tree-elbow {
  color: var(--gp-teal-light);
}

.space-tree-icon {
  width: 28px;
  height: 28px;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}

.space-tree-icon--0 { background: linear-gradient(135deg, #112f38, #1a525f); }
.space-tree-icon--1 { background: linear-gradient(135deg, #4a6010, #78a020); }
.space-tree-icon--2 { background: linear-gradient(135deg, #1a3f5f, #2a6090); }
.space-tree-icon--3 { background: linear-gradient(135deg, #1a4f40, #2a7a60); }

.space-tree-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.space-tree-name {
  font-size: .8375rem;
  font-weight: 600;
  color: var(--gp-teal-dark);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-tree-name:hover {
  color: var(--gp-teal);
  text-decoration: underline;
}

.space-tree-desc {
  font-size: .75rem;
  color: var(--gp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-tree-caps {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  flex-shrink: 0;
}

.space-tree-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.space-tree-action {
  font-size: .775rem;
  color: var(--gp-muted);
  text-decoration: none;
  padding: .2rem .3rem;
  border-radius: .25rem;
  transition: color .12s, background .12s;
  line-height: 1;
}

.space-tree-action:hover {
  color: var(--gp-teal);
  background: var(--gp-teal-light);
}

/* ── Drag and drop ────────────────────────────────────────── */
.sort-ghost .card {
  opacity: .3;
  border: 2px dashed var(--gp-teal) !important;
  box-shadow: none !important;
}

.sort-chosen .card {
  box-shadow: 0 8px 24px rgba(26, 82, 95, .22) !important;
  transform: rotate(1.5deg);
}

.sort-drag .card {
  opacity: .95;
  cursor: grabbing !important;
}

.sort-handle {
  cursor: grab;
  touch-action: none;
}

.sort-handle:active {
  cursor: grabbing;
}

.sort-handle-overlay {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255, 255, 255, .75);
  background: rgba(17, 47, 56, .66);
  color: #fff;
}

.sort-handle-overlay:hover,
.sort-handle-overlay:focus-visible {
  border-color: #fff;
  background: rgba(17, 47, 56, .9);
  color: #fff;
}

.reorder-status {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .875rem;
  border-radius: 100px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.reorder-status--saved {
  background: var(--gp-green-light);
  color: var(--gp-green-dark);
  opacity: 1;
}

.reorder-status--error {
  background: #f8d7da;
  color: #58151c;
  opacity: 1;
}

/* ── Scrollbar (webkit) ───────────────────────────────────── */
#sidebar::-webkit-scrollbar {
  width: 4px;
}

#sidebar::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 2px;
}