/* soawhat portal additions: collapsible sidebar (from the design guide), ajax spinners, chips, route picker. */

.sidebar { overflow: hidden; transition: width 0.2s ease, padding 0.2s ease; }   /* .sidebar is already position: sticky */

.brand-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.brand-row .brand { flex: 1; min-width: 0; }
.brand-collapse {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; margin-top: 6px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: #8891aa; cursor: pointer;
}
.brand-collapse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-collapse:hover, .brand-collapse:focus-visible { background: var(--navy-2); color: #fff; outline: none; }
.nav-collapsed .brand-collapse { display: none; }
@media (max-width: 900px) { .brand-collapse { display: none; } }
.brand-text, .nav-label, .user-name { white-space: nowrap; }

.sidebar-toggle {
  position: absolute; top: 50%; right: 0; z-index: 2;
  width: 14px; height: 72px; padding: 0;
  border: 0; background: none; cursor: pointer; transform: translateY(-50%);
}
.sidebar-toggle::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 4px;
  width: 4px; border-radius: 2px; background: #6b7a96;
  transition: background 0.15s, width 0.15s;
}
.sidebar-toggle:hover::before,
.sidebar-toggle:focus-visible::before { width: 5px; background: #fff; }
.sidebar-toggle:focus-visible { outline: none; }

.btn-link { display: inline-flex; align-items: center; gap: 8px; }
.btn-link svg { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 901px) {
  .nav-collapsed .sidebar { width: 64px; padding: 16px 8px; }
  .nav-collapsed .brand { justify-content: center; padding: 4px 0 20px; }
  .nav-collapsed .brand-text,
  .nav-collapsed .nav-label,
  .nav-collapsed .user-name { display: none; }
  .nav-collapsed .nav-section {            /* section titles become thin dividers */
	height: 0; margin: 12px 8px; padding: 0; overflow: hidden; border-top: 1px solid var(--navy-2);
  }
  .nav-collapsed .nav a { justify-content: center; padding: 0; }
  .nav-collapsed .sidebar-footer { flex-direction: column; gap: 6px; padding: 12px 0 0; }
  .nav-collapsed .user-chip { padding: 4px; }
  .nav-collapsed .btn-link { padding: 8px; }
  .nav-collapsed .btn-link svg { display: block; }
}
@media (max-width: 900px) { .sidebar-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

.nav-tip {                                 /* hover label beside a folded item */
  position: fixed; z-index: 50; padding: 5px 10px; border-radius: 6px;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(18, 28, 45, 0.25); transform: translateY(-50%); pointer-events: none;
}
.nav-tip[hidden] { display: none; }

/* Loading states for ajax-filled areas */
.loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 24px;
	color: var(--muted);
	font-size: 13px;
}

.spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-strong);
	border-top-color: var(--blue);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	flex-shrink: 0;
}

.btn-secondary.btn-loading::before,
.btn-ghost.btn-loading::before,
.btn-danger.btn-loading::before {
	border-color: rgba(18, 28, 45, 0.2);
	border-top-color: currentColor;
}

/* Stacked cards in a grid column */
.stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.card-head-pad {
	padding: 24px 24px 0;
}

/* SPID chips */
.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	min-height: 28px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 4px 0 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg);
}

.chip code {
	background: none;
	padding: 0;
}

.chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--muted);
	font-size: 11px;
	cursor: pointer;
}

.chip-remove:hover {
	background: var(--red-soft);
	color: var(--red);
}

.form-inline {
	flex-direction: row;
	align-items: flex-end;
	gap: 10px;
}

.form-inline .input {
	flex: 1;
}

.form-inline .btn {
	height: 38px;
}

/* Route picker on the permission group page */
.route-picker {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.route-section {
	margin: 0;
	padding: 0 0 4px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.route-section legend {
	padding: 0 8px;
	margin-left: 12px;
	font-size: 13px;
}

.route-section .check-inline {
	margin: 0;
}

.route-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	cursor: pointer;
}

.route-item:first-of-type {
	border-top: 0;
}

.route-item:hover {
	background: #fafbfd;
}

.route-item.is-checked {
	background: var(--blue-soft);
}

.route-item input {
	margin-top: 3px;
	accent-color: var(--blue);
}

.route-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.route-desc {
	font-weight: 500;
}

.route-meta {
	font-size: 12px;
	color: var(--muted);
	word-break: break-all;
}

.route-meta code {
	font-size: 11px;
}

/* Activity details */
.row-details summary {
	cursor: pointer;
	color: var(--blue);
	font-size: 12px;
}

.row-details .log {
	margin-top: 6px;
	max-height: 160px;
	white-space: pre-wrap;
}

@media (max-width: 900px) {
	.form-inline {
		flex-direction: column;
		align-items: stretch;
	}
}