/* Stage 4 Organisation A — canonical Product UI System v2 adapter.
   Scope: shell, Übersicht and low-risk/global primitives only.
   Operational workspace geometry remains owned by legacy styles.css until later phases. */

.tool-organisation {
  --sidebar: var(--zg-sidebar-width);
  background: var(--zg-surface-page);
  color: var(--zg-text-secondary);
  font-family: var(--zg-font-family);
}

.tool-organisation :focus-visible {
  outline: 2px solid var(--zg-focus-ring);
  outline-offset: 2px;
}

.tool-organisation .app-shell {
  min-height: 100vh;
  background: var(--zg-surface-page);
}

.tool-organisation .sidebar {
  width: var(--zg-sidebar-width);
  background: var(--zg-surface-sidebar);
  color: var(--zg-text-on-dark);
}

.tool-organisation .brand {
  height: var(--zg-topbar-height);
  gap: var(--zg-space-3);
  padding: 0 var(--zg-space-3);
  font-size: var(--zg-font-body-sm);
}

.tool-organisation .icon-button {
  width: var(--zg-button-icon-size);
  height: var(--zg-button-icon-size);
  border-radius: var(--zg-radius-md);
}

.tool-organisation .icon-button:disabled {
  color: var(--zg-text-disabled);
  cursor: not-allowed;
  opacity: .6;
}

.tool-organisation .sidebar nav {
  gap: var(--zg-nav-item-gap);
  padding-right: var(--zg-space-2);
}

.tool-organisation .organisation-legacy-link {
  margin: var(--zg-space-3) var(--zg-space-2);
  flex-shrink: 0;
}

.tool-organisation.sidebar-collapsed .organisation-legacy-link {
  justify-content: center;
  padding-inline: 0;
}

.tool-organisation.sidebar-collapsed .organisation-legacy-link .zg-nav-item__copy {
  display: none;
}

.tool-organisation .nav-item {
  grid-template-columns: var(--zg-nav-item-icon-size) minmax(0, 1fr);
  min-height: var(--zg-nav-item-height);
  gap: var(--zg-nav-item-gap);
  padding: var(--zg-nav-item-padding-y) var(--zg-nav-item-padding-x);
  border-left: var(--zg-nav-active-marker-width) solid transparent;
  border-radius: 0 var(--zg-radius-md) var(--zg-radius-md) 0;
  color: var(--zg-neutral-300);
}

.tool-organisation .nav-item:hover {
  border-left-color: transparent;
  background: var(--zg-surface-sidebar-hover);
  color: var(--zg-text-on-dark);
}

.tool-organisation .nav-item.is-active {
  border-left-color: var(--zg-accent-primary);
  background: var(--zg-surface-sidebar-active);
  color: var(--zg-text-on-dark);
}

.tool-organisation .nav-item strong {
  font-size: var(--zg-nav-item-font-size);
  font-weight: 600;
}

.tool-organisation .nav-item small,
.tool-organisation .sidebar-foot {
  color: var(--zg-neutral-400);
}

.tool-organisation .nav-icon,
.tool-organisation .status-dot {
  color: var(--zg-accent-primary);
}

.tool-organisation .status-dot {
  background: var(--zg-accent-primary);
}

.tool-organisation .main-content {
  margin-left: var(--zg-sidebar-width);
  min-height: 100vh;
  padding: var(--zg-page-padding-y) var(--zg-page-padding-x) 60px;
  background: var(--zg-surface-page);
}

.tool-organisation .topbar {
  width: 100%;
  min-height: var(--zg-topbar-height);
  max-width: none;
  margin: 0 0 var(--zg-page-header-spacing);
  gap: var(--zg-page-header-gap);
  justify-content: flex-start;
}

.tool-organisation .topbar > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.tool-organisation .topbar .header-actions {
  margin-left: auto;
}

.tool-organisation .mobile-menu {
  display: none;
}

.tool-organisation .topbar h1 {
  color: var(--zg-text-primary);
  font-size: var(--zg-font-h1);
  line-height: var(--zg-line-height-heading);
  font-weight: 700;
}

.tool-organisation .topbar p {
  color: var(--zg-text-muted);
}

.tool-organisation .topbar .eyebrow {
  color: var(--zg-accent-primary);
}

.tool-organisation .user-chip {
  width: var(--zg-button-height);
  height: var(--zg-button-height);
  border-color: var(--zg-border-soft);
  background: var(--zg-surface-card);
  color: var(--zg-text-secondary);
}

.tool-organisation .button {
  min-height: var(--zg-button-height);
  padding: 0 var(--zg-space-4);
  border-radius: var(--zg-radius-md);
  font-size: var(--zg-font-body-sm);
  font-weight: 600;
  box-shadow: none;
}

.tool-organisation .button.primary {
  border-color: var(--zg-accent-primary);
  background: var(--zg-accent-primary);
  color: var(--zg-text-on-accent);
}

.tool-organisation .button.primary:hover {
  border-color: var(--zg-accent-hover);
  background: var(--zg-accent-hover);
}

.tool-organisation .button.secondary {
  border-color: var(--zg-border-default);
  background: var(--zg-surface-card);
  color: var(--zg-text-secondary);
}

.tool-organisation .button.secondary:hover,
.tool-organisation .button.ghost:hover {
  background: var(--zg-surface-hover);
}

.tool-organisation .button.ghost {
  min-height: var(--zg-button-height-small);
  color: var(--zg-text-secondary);
}

.tool-organisation .button:disabled {
  border-color: var(--zg-control-disabled-fill);
  background: var(--zg-control-disabled-fill);
  color: var(--zg-control-disabled-text);
  cursor: not-allowed;
  box-shadow: none;
}

.tool-organisation .create-menu {
  top: calc(var(--zg-button-height) + var(--zg-space-2));
  padding: var(--zg-space-2);
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-floating);
  box-shadow: var(--zg-shadow-floating);
}

.tool-organisation .create-menu button {
  min-height: var(--zg-button-height);
  align-items: center;
  border-radius: var(--zg-radius-md);
  color: var(--zg-text-secondary);
}

.tool-organisation .create-menu button:hover {
  background: var(--zg-surface-hover);
}

.tool-organisation .banner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: var(--zg-radius-md);
}

.tool-organisation .banner.warning {
  border-color: color-mix(in srgb, var(--zg-state-warning) 35%, white);
  background: color-mix(in srgb, var(--zg-state-warning) 14%, white);
  color: color-mix(in srgb, var(--zg-state-warning) 62%, black);
}

.tool-organisation .loading-grid div {
  border-radius: var(--zg-radius-lg);
  background: linear-gradient(100deg, var(--zg-neutral-200) 20%, var(--zg-neutral-50) 40%, var(--zg-neutral-200) 60%);
  background-size: 220% 100%;
}

.tool-organisation .state-card,
.tool-organisation .metric,
.tool-organisation .panel {
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-card);
  box-shadow: var(--zg-shadow-soft);
}

.tool-organisation .state-card {
  padding: var(--zg-space-9) var(--zg-space-6);
}

.tool-organisation .state-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--zg-radius-full);
  background: color-mix(in srgb, var(--zg-state-danger) 12%, white);
  color: var(--zg-state-danger);
}

.tool-organisation .state-card h2,
.tool-organisation .metric strong,
.tool-organisation .panel h2,
.tool-organisation .list-item h3 {
  color: var(--zg-text-primary);
}

.tool-organisation .state-card p,
.tool-organisation .metric span,
.tool-organisation .panel-head p,
.tool-organisation .list-item p,
.tool-organisation .empty {
  color: var(--zg-text-muted);
}

.tool-organisation .metrics {
  gap: var(--zg-space-3);
  margin-bottom: var(--zg-section-gap);
}

.tool-organisation .metric {
  padding: var(--zg-card-padding);
}

.tool-organisation .dashboard-grid {
  gap: var(--zg-section-gap);
}

.tool-organisation .panel-head {
  padding: var(--zg-card-padding) var(--zg-card-padding) var(--zg-space-3);
}

.tool-organisation .list-item {
  padding: var(--zg-space-3) var(--zg-card-padding);
  border-top-color: var(--zg-border-soft);
}

.tool-organisation .list-item:hover {
  background: var(--zg-surface-hover);
}

.tool-organisation .empty {
  border-top-color: var(--zg-border-soft);
}

.tool-organisation .badge {
  min-height: var(--zg-badge-height);
  border-radius: var(--zg-radius-full);
  background: var(--zg-neutral-100);
  color: var(--zg-text-secondary);
}

.tool-organisation .badge.area {
  background: var(--zg-accent-secondary);
  color: color-mix(in srgb, var(--zg-accent-primary) 58%, black);
}

.tool-organisation .badge.danger {
  background: color-mix(in srgb, var(--zg-state-danger) 12%, white);
  color: var(--zg-state-danger);
}

.tool-organisation .badge.warning {
  background: color-mix(in srgb, var(--zg-state-warning) 14%, white);
  color: color-mix(in srgb, var(--zg-state-warning) 65%, black);
}

.tool-organisation .badge.success {
  background: color-mix(in srgb, var(--zg-state-success) 12%, white);
  color: var(--zg-state-success);
}

.tool-organisation .toolbar input,
.tool-organisation .toolbar select,
.tool-organisation .create-form input:not(.zg-checkbox),
.tool-organisation .create-form select,
.tool-organisation .create-form textarea {
  min-height: var(--zg-input-height);
  padding: 0 var(--zg-input-padding-x);
  border: 1px solid var(--zg-border-default);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
  color: var(--zg-text-primary);
}

.tool-organisation .create-form {
  gap: var(--zg-form-field-gap);
}

.tool-organisation .create-form label:not(.zg-control) {
  gap: var(--zg-space-2);
  color: var(--zg-text-secondary);
  font-size: var(--zg-font-body-sm);
  font-weight: 600;
}

.tool-organisation .create-form textarea {
  min-height: var(--zg-textarea-min-height);
  padding-block: var(--zg-space-3);
}

.tool-organisation .toolbar input:focus,
.tool-organisation .toolbar select:focus,
.tool-organisation .create-form input:not(.zg-checkbox):focus,
.tool-organisation .create-form select:focus,
.tool-organisation .create-form textarea:focus {
  border-color: var(--zg-accent-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zg-focus-ring) 20%, transparent);
  outline: none;
}

.tool-organisation .toolbar input:disabled,
.tool-organisation .toolbar select:disabled,
.tool-organisation .create-form input:not(.zg-checkbox):disabled,
.tool-organisation .create-form select:disabled,
.tool-organisation .create-form textarea:disabled {
  border-color: var(--zg-selection-disabled-border);
  background: var(--zg-selection-disabled-fill);
  color: var(--zg-text-disabled);
  cursor: not-allowed;
}

.tool-organisation .create-form input:not(.zg-checkbox)[type="checkbox"],
.tool-organisation .create-form input:not(.zg-checkbox)[type="radio"] {
  min-height: auto;
  accent-color: var(--zg-accent-primary);
}

.tool-organisation .form-error {
  border: 1px solid color-mix(in srgb, var(--zg-state-danger) 24%, white);
  border-radius: var(--zg-radius-md);
  background: color-mix(in srgb, var(--zg-state-danger) 10%, white);
  color: var(--zg-state-danger) !important;
}

.tool-organisation .tabs {
  gap: var(--zg-space-1);
  padding: var(--zg-space-1);
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-card);
}

.tool-organisation .tab {
  min-height: var(--zg-input-height-compact);
  border-radius: var(--zg-radius-md);
  color: var(--zg-text-muted);
}

.tool-organisation .tab:hover {
  background: var(--zg-surface-hover);
  color: var(--zg-text-secondary);
}

.tool-organisation .tab.is-active {
  background: var(--zg-accent-secondary);
  color: color-mix(in srgb, var(--zg-accent-primary) 58%, black);
}

.tool-organisation .dialog {
  width: min(var(--zg-modal-width-md), calc(100% - 28px));
  border-radius: var(--zg-radius-xl);
  background: var(--zg-surface-modal-shell);
  color: var(--zg-text-secondary);
  box-shadow: var(--zg-shadow-modal);
}

.tool-organisation .dialog::backdrop {
  background: var(--zg-modal-overlay);
}

.tool-organisation .dialog-close {
  top: var(--zg-space-3);
  right: var(--zg-space-3);
  color: var(--zg-text-muted);
}

.tool-organisation .dialog-close:hover {
  background: var(--zg-surface-hover);
  color: var(--zg-text-primary);
}

.tool-organisation .dialog-body {
  padding: var(--zg-space-6);
}

.tool-organisation .dialog-body h2 {
  color: var(--zg-text-primary);
}

.tool-organisation .dialog-body > p {
  color: var(--zg-text-muted);
}

.tool-organisation .dialog-actions {
  gap: var(--zg-toolbar-gap);
  margin-top: var(--zg-section-gap);
}

.tool-organisation .detail-meta {
  gap: var(--zg-space-3);
}

.tool-organisation .detail-meta div {
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
}

.tool-organisation .detail-meta span {
  color: var(--zg-text-muted);
}

.tool-organisation .detail-meta strong {
  color: var(--zg-text-primary);
}

.tool-organisation .toast {
  max-width: min(420px, calc(100vw - 32px));
  border-radius: var(--zg-radius-md);
  background: var(--zg-neutral-900);
  color: var(--zg-text-on-dark);
  box-shadow: var(--zg-shadow-floating);
}

.tool-organisation.sidebar-collapsed .sidebar,
.tool-organisation .sidebar-collapsed .sidebar {
  width: var(--zg-sidebar-collapsed-width);
}

.tool-organisation.sidebar-collapsed .main-content,
.tool-organisation .sidebar-collapsed .main-content {
  margin-left: var(--zg-sidebar-collapsed-width);
}

@media (max-width: 760px) {
  .tool-organisation .sidebar {
    width: min(310px, 88vw);
  }

  .tool-organisation .main-content,
  .tool-organisation .sidebar-collapsed .main-content {
    margin-left: 0;
    padding: var(--zg-page-padding-y) var(--zg-page-padding-x) 45px;
  }

  .tool-organisation .topbar {
    min-height: auto;
  }

  .tool-organisation .mobile-menu {
    display: grid;
  }

  .tool-organisation .dialog-body {
    padding: var(--zg-space-5);
  }
}