/*
 GREENBOX_FIELD_FAMILY_VISUAL_CONTRACT_V1:BEGIN

 Shared visual contract for:
 - GreenBox Field production
 - staged GreenBox Field
 - Layout Manager
 - Icon Library
 - Quick Links Manager

 Global Theme V2 owns visual theme tokens.

 Editor workspaces intentionally do NOT load
 Matrix/effect runtimes.
*/


:root {
  --gb-field-control-radius: 8px;
  --gb-field-control-min-height: 38px;
}


html,
body {
  background-color:
    var(--gb-bg) !important;

  color:
    var(--gb-text) !important;
}


/* =========================================================
   FIELD CARD TITLE CLEANUP
   ========================================================= */


.gb-card-top,
.gb-card-title,
.gb-card-title h2,
.gb-card-group {
  background:
    transparent !important;

  background-image:
    none !important;

  box-shadow:
    none !important;
}


.gb-card-top {
  min-width:
    0 !important;
}


.gb-card-title {
  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  overflow:
    visible !important;
}


.gb-card-title h2 {
  color:
    var(--gb-text) !important;

  max-width:
    100% !important;

  overflow-wrap:
    anywhere !important;

  word-break:
    normal !important;
}


.gb-card-group {
  color:
    var(--gb-text-muted) !important;
}


/* =========================================================
   FIELD BUTTON / SPLIT CONTROL CLEANUP
   ========================================================= */


.gb-actions,
.gb-action-wrap {
  min-width:
    0 !important;
}


.gb-action-wrap {
  align-items:
    stretch !important;
}


.gb-action,
.gb-action-wrap > button,
.gb-action-wrap > details,
.gb-action-wrap > details > summary {
  box-sizing:
    border-box !important;

  min-width:
    0 !important;
}


.gb-action {
  width:
    100% !important;

  min-height:
    var(
      --gb-field-control-min-height
    ) !important;

  padding:
    7px 9px !important;

  line-height:
    1.15 !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  word-break:
    normal !important;

  text-overflow:
    clip !important;

  overflow:
    visible !important;
}


.gb-action > span {
  flex:
    0 0 auto !important;
}


.gb-action-wrap > button,
.gb-action-wrap > details > summary {
  min-height:
    var(
      --gb-field-control-min-height
    ) !important;

  padding-inline:
    9px !important;
}


/* =========================================================
   FIELD SURFACES
   ========================================================= */


.gb-side,
.gb-card,
.gb-panel,
.gb-banner,
.gb-menu-box,
.gb-route-menu,
.gb-footer {
  border-color:
    var(--gb-border) !important;
}


.gb-side,
.gb-panel,
.gb-banner,
.gb-menu-box,
.gb-route-menu,
.gb-footer {
  background-color:
    var(--gb-surface) !important;
}


.gb-card {
  background-color:
    var(--gb-surface-raised) !important;
}


/* =========================================================
   FIELD EDITOR WORKSPACES
   ========================================================= */


body[data-mode="manager"],
body[data-mode="icons"],
body[data-mode="quicklinks"] {
  background:
    var(--gb-bg) !important;

  color:
    var(--gb-text) !important;
}


/* Main editor shell surfaces */


body[data-mode="manager"] .top,
body[data-mode="icons"] .top,
body[data-mode="quicklinks"] .top,

body[data-mode="manager"] .toolbar,
body[data-mode="icons"] .toolbar,
body[data-mode="quicklinks"] .toolbar,

body[data-mode="manager"] .panel,
body[data-mode="icons"] .panel,
body[data-mode="quicklinks"] .panel,

body[data-mode="manager"] .sidebar,
body[data-mode="icons"] .sidebar,
body[data-mode="quicklinks"] .sidebar,

body[data-mode="manager"] .rail,
body[data-mode="icons"] .rail,
body[data-mode="quicklinks"] .rail,

body[data-mode="manager"] .inspector,
body[data-mode="icons"] .inspector,
body[data-mode="quicklinks"] .inspector {
  background-color:
    var(--gb-surface) !important;

  color:
    var(--gb-text) !important;

  border-color:
    var(--gb-border) !important;
}


/* Editor cards / groups */


body[data-mode="manager"] .card,
body[data-mode="icons"] .card,
body[data-mode="quicklinks"] .card,

body[data-mode="manager"] .section,
body[data-mode="icons"] .section,
body[data-mode="quicklinks"] .section,

body[data-mode="manager"] .group,
body[data-mode="icons"] .group,
body[data-mode="quicklinks"] .group,

body[data-mode="manager"] .item,
body[data-mode="icons"] .item,
body[data-mode="quicklinks"] .item {
  background-color:
    var(--gb-surface-raised) !important;

  color:
    var(--gb-text) !important;

  border-color:
    var(--gb-border) !important;
}


/* Editor form controls */


body[data-mode="manager"] input,
body[data-mode="manager"] select,
body[data-mode="manager"] textarea,

body[data-mode="icons"] input,
body[data-mode="icons"] select,
body[data-mode="icons"] textarea,

body[data-mode="quicklinks"] input,
body[data-mode="quicklinks"] select,
body[data-mode="quicklinks"] textarea {
  background-color:
    var(--gb-surface) !important;

  color:
    var(--gb-text) !important;

  border-color:
    var(--gb-border) !important;
}


/* Normal editor buttons use global theme.
   Destructive controls stay application-owned. */


body[data-mode="manager"]
button:not(.danger):not(.delete):not(.destructive)
:not([class*="danger"]):not([class*="delete"]),

body[data-mode="icons"]
button:not(.danger):not(.delete):not(.destructive)
:not([class*="danger"]):not([class*="delete"]),

body[data-mode="quicklinks"]
button:not(.danger):not(.delete):not(.destructive)
:not([class*="danger"]):not([class*="delete"]) {
  background-color:
    var(--gb-surface-raised) !important;

  color:
    var(--gb-text) !important;

  border-color:
    var(--gb-border) !important;
}


/* Button geometry */


body[data-mode="manager"] button,
body[data-mode="manager"] .btn,
body[data-mode="manager"] a.btn,

body[data-mode="icons"] button,
body[data-mode="icons"] .btn,
body[data-mode="icons"] a.btn,

body[data-mode="quicklinks"] button,
body[data-mode="quicklinks"] .btn,
body[data-mode="quicklinks"] a.btn {
  box-sizing:
    border-box !important;

  min-height:
    34px !important;

  line-height:
    1.1 !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  border-radius:
    var(
      --gb-field-control-radius
    ) !important;
}


/* Editor hover */


body[data-mode="manager"] button:hover,
body[data-mode="manager"] .btn:hover,
body[data-mode="manager"] a.btn:hover,

body[data-mode="icons"] button:hover,
body[data-mode="icons"] .btn:hover,
body[data-mode="icons"] a.btn:hover,

body[data-mode="quicklinks"] button:hover,
body[data-mode="quicklinks"] .btn:hover,
body[data-mode="quicklinks"] a.btn:hover {
  border-color:
    var(--gb-accent) !important;
}


/* Branding */


body[data-mode="manager"] .brand,
body[data-mode="icons"] .brand,
body[data-mode="quicklinks"] .brand {
  color:
    var(--gb-text) !important;
}


body[data-mode="manager"] .brand small,
body[data-mode="icons"] .brand small,
body[data-mode="quicklinks"] .brand small {
  color:
    var(--gb-text-muted) !important;
}


/* Semantic destructive controls remain app-owned. */


.danger,
.delete,
.destructive,
[class*="danger"],
[class*="delete"] {
  --gb-field-semantic-control:
    application-owned;
}


/*
 GREENBOX_FIELD_FAMILY_VISUAL_CONTRACT_V1:END
*/