/* owner: internal/common; layer: infrastructure; contract: admin-token-controls/v1.
 * Values come from /admin/tokens. This named layer owns control appearance:
 * important declarations beat the unlayered historical page overrides without
 * escalating selector specificity. Business layout and event/state owners stay
 * in their domains. Remove legacy appearance rules as those domains migrate.
 */
@layer admin-controls;

:root[data-admin-ui] {
  --admin-control-height: 34px;
  --admin-control-radius: 8px;
  --admin-control-font-size: 12px;
  --admin-filter-width: 240px;
  --admin-control-border: rgba(255, 255, 255, 0.78);
  --admin-control-bg: rgba(247, 249, 255, 0.72);
  --admin-control-focus-bg: rgba(255, 255, 255, 0.9);
  --admin-control-text: #303743;
  --admin-control-muted: #8790a3;
  --admin-control-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.84), 0 0 0 1px rgba(133, 154, 214, 0.14), 0 0 7px rgba(133, 154, 214, 0.14);
  --admin-control-focus-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(133, 154, 214, 0.2), 0 0 10px rgba(133, 154, 214, 0.18);
  --admin-control-primary: linear-gradient(135deg, #dce8ff 0%, #eef1ff 52%, #efe5ff 100%);
  --admin-control-danger: linear-gradient(135deg, #ffe2e7 0%, #fff2f4 55%, #f1e8ff 100%);
}

@layer admin-controls {
  /* List status labels share geometry while keeping their domain colors and type. */
  :where([data-admin-ui]) :is(.data-table, .table-shell, .list-table-shell) :is(.chip, .contract-node-chip, .contract-status-chip, .project-session-command-status, .project-session-active-badge, .project-session-conversation-status, .workbench-disabled-chip, .workbench-origin-locked-chip, .enterprise-workbench-primary-badge, .gitlab-resource-delete-scheduled-badge) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    max-height: none !important;
    padding: var(--admin-status-padding-block, 3px) var(--admin-status-padding-inline, 6px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  :where([data-admin-ui]) :is(.data-table, .table-shell, .list-table-shell) :is(.chip, .contract-node-chip, .contract-status-chip, .project-session-command-status, .project-session-active-badge, .project-session-conversation-status, .workbench-disabled-chip, .workbench-origin-locked-chip, .enterprise-workbench-primary-badge, .gitlab-resource-delete-scheduled-badge):is(.hidden, [hidden]) { display: none !important; }

  :where([data-admin-ui]) .admin-upload-slot > .admin-upload-preview {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  :where([data-admin-ui]) .admin-upload-slot > .admin-upload-preview > .admin-upload-preview-item {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 0;
  }

  :where([data-admin-ui]) .admin-upload-preview {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
    vertical-align: middle;
    pointer-events: none;
  }

  :where([data-admin-ui]) .admin-upload-preview-item {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    overflow: hidden;
    border: 1px solid var(--admin-control-border);
    border-radius: var(--admin-control-radius);
    background: var(--admin-control-bg);
    color: var(--admin-control-text);
  }

  :where([data-admin-ui]) .admin-upload-file-icon {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600;
  }

  :where([data-admin-ui]) .admin-upload-file-icon > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  :where([data-admin-ui]) .admin-upload-file-icon > span {
    position: relative;
    margin-top: 8px;
  }

  :where([data-admin-ui]) .admin-upload-preview-item > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    border-radius: inherit;
    background: var(--admin-control-bg);
  }

  :where([data-admin-ui]) :is(.field, .toolbar-search, .toolbar-select) {
    min-width: 0;
  }

  :where([data-admin-ui]) .field > span:first-child:not(.admin-select-control) {
    color: var(--admin-control-muted) !important;
    font-size: var(--admin-control-font-size) !important;
    font-weight: 400 !important;
  }

  :where([data-admin-ui]) :is(.field, .toolbar-search, .enterprise-user-search, .mail-compose-line, .project-session-filter-field) input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.contract-date-field input)),
  :where([data-admin-ui]) :is(.field, .toolbar-search) select:not(.admin-select-native):not([multiple]),
  :where([data-admin-ui]) :is(.admin-select-button, .toolbar-select-button),
  :where([data-admin-ui]) .field textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    border: 1px solid var(--admin-control-border) !important;
    border-radius: var(--admin-control-radius) !important;
    background: var(--admin-control-bg) !important;
    color: var(--admin-control-text) !important;
    box-shadow: var(--admin-control-shadow) !important;
    font-family: "Arial Narrow", "Microsoft YaHei", sans-serif !important;
    font-size: var(--admin-control-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    outline: none !important;
  }

  :where([data-admin-ui]) :is(.field, .toolbar-search, .enterprise-user-search, .mail-compose-line, .project-session-filter-field) input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.contract-date-field input)),
  :where([data-admin-ui]) :is(.field, .toolbar-search) select:not(.admin-select-native):not([multiple]),
  :where([data-admin-ui]) :is(.admin-select-control, .admin-select-button, .toolbar-select-button) {
    height: var(--admin-control-height) !important;
    min-height: var(--admin-control-height) !important;
    max-height: var(--admin-control-height) !important;
  }

  :where([data-admin-ui]) :is(.field, .toolbar-search, .enterprise-user-search, .mail-compose-line, .project-session-filter-field) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.contract-date-field input)),
  :where([data-admin-ui]) :is(.field, .toolbar-search) select:not(.admin-select-native):not([multiple]) {
    padding: 0 14px !important;
  }

  :where([data-admin-ui]) .field textarea {
    padding: 12px 14px !important;
    line-height: 1.55 !important;
  }

  :where([data-admin-ui]) :is(.admin-select-button, .toolbar-select-button) {
    padding: 0 42px 0 14px !important;
    text-align: left !important;
  }

  :where([data-admin-ui]) :is(.field, .toolbar-search, .enterprise-user-search, .mail-compose-line, .project-session-filter-field) :is(input, textarea):focus,
  :where([data-admin-ui]) :is(.admin-select-button, .toolbar-select-button):is(:focus-visible, [aria-expanded="true"]) {
    border-color: var(--line-strong) !important;
    background: var(--admin-control-focus-bg) !important;
    box-shadow: var(--admin-control-focus-shadow) !important;
  }

  :where([data-admin-ui]) :is(input, textarea)::placeholder {
    color: var(--admin-control-muted) !important;
    opacity: 1 !important;
  }

  :where([data-admin-ui]) :is(.admin-select-button, .toolbar-select-button)[data-placeholder-value] {
    color: var(--admin-control-muted) !important;
  }

  :where([data-admin-ui]) .field.has-error :is(input, textarea, .admin-select-button) {
    border-color: #d94b5c !important;
    box-shadow: 0 0 0 3px rgba(217, 75, 92, 0.14) !important;
  }

  :where([data-admin-ui]) :is(.field, .toolbar-search) :is(input, textarea):disabled,
  :where([data-admin-ui]) .admin-select-control.is-disabled .admin-select-button {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
  }

  :where([data-admin-ui]) :is(.field-error, .field-hint.is-error) {
    color: #d94b5c !important;
    font-size: 12px !important;
  }

  :where([data-admin-ui]) :is(.page-toolbar, .filter-actions) :is(.toolbar-search, .toolbar-select, .contract-date-range),
  :where([data-admin-ui]) :is(.overview-date-toolbar, .enterprise-overview-toolbar) .contract-date-range {
    box-sizing: border-box !important;
    flex: 0 0 var(--admin-filter-width) !important;
    width: var(--admin-filter-width) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :where([data-admin-ui]) .contract-date-range {
    box-sizing: border-box !important;
    height: var(--admin-control-height) !important;
    min-height: var(--admin-control-height) !important;
    padding: 0 8px !important;
    border: 1px solid var(--admin-control-border) !important;
    border-radius: var(--admin-control-radius) !important;
    background: var(--admin-control-bg) !important;
    box-shadow: var(--admin-control-shadow) !important;
  }

  :where([data-admin-ui]) .contract-date-field input {
    height: calc(var(--admin-control-height) - 2px) !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--admin-control-font-size) !important;
  }

  :where([data-admin-ui]) :is(.primary, .secondary, .danger, :where(button, a).small) {
    box-sizing: border-box !important;
    height: var(--admin-control-height) !important;
    min-height: var(--admin-control-height) !important;
    max-height: var(--admin-control-height) !important;
    padding: 0 12px !important;
    border: 1px solid var(--admin-control-border) !important;
    border-radius: var(--admin-control-radius) !important;
    background: var(--admin-control-bg) !important;
    color: var(--admin-control-text) !important;
    box-shadow: var(--admin-control-shadow) !important;
    font-family: "Arial Narrow", "Microsoft YaHei", sans-serif !important;
    font-size: var(--admin-control-font-size) !important;
    font-weight: 400 !important;
    cursor: pointer;
  }

  :where([data-admin-ui]) :is(.primary, .danger) {
    border-color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--admin-control-focus-shadow) !important;
  }

  :where([data-admin-ui]) .primary {
    background: var(--admin-control-primary) !important;
    color: #5d72aa !important;
  }

  :where([data-admin-ui]) .danger {
    background: var(--admin-control-danger) !important;
    color: #a83e51 !important;
  }

  :where([data-admin-ui]) :is(.small, .page-toolbar .primary, .page-toolbar .secondary, .page-toolbar .danger) {
    height: var(--admin-control-height) !important;
    min-height: var(--admin-control-height) !important;
    padding: 0 12px !important;
    border-radius: var(--admin-control-radius) !important;
    font-size: var(--admin-control-font-size) !important;
  }

  :where([data-admin-ui]) :is(.table-actions, .workbench-project-actions) :is(button, a.small) {
    height: var(--admin-control-height) !important;
    min-height: var(--admin-control-height) !important;
    max-height: var(--admin-control-height) !important;
    padding: 0 10px !important;
    border-radius: var(--admin-control-radius) !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  :where([data-admin-ui]) .workbench-token-model-item :is(.workbench-model-default-button, .workbench-model-fallback-button) {
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  :where([data-admin-ui]) .workbench-token-model-item :is(.workbench-model-default-button, .workbench-model-fallback-button) svg {
    display: block !important;
    margin: 0 !important;
  }

  :where([data-admin-ui]) .enterprise-list-page .enterprise-https-action {
    font-size: 11px !important;
  }

  :where([data-admin-ui]) :is(.primary, .secondary, .danger):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--line-strong) !important;
    box-shadow: var(--admin-control-focus-shadow) !important;
  }

  :where([data-admin-ui]) .secondary:is(:hover, :focus-visible):not(:disabled) {
    background: var(--admin-control-focus-bg) !important;
  }

  :where([data-admin-ui]) :is(.primary, .secondary, .danger):disabled {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
  }

  :where([data-admin-ui]) :is(.page-toolbar, .filter-actions) .admin-icon-action {
    flex: 0 0 var(--admin-control-height) !important;
    width: var(--admin-control-height) !important;
    min-width: var(--admin-control-height) !important;
    max-width: var(--admin-control-height) !important;
    height: var(--admin-control-height) !important;
    padding: 0 !important;
  }

  :where([data-admin-ui]) .admin-icon-action.admin-filter-reset {
    padding: 0 !important;
  }

  :where([data-admin-ui]) :is([data-icon-action="copy"], [data-icon-action="refresh"]):not(.admin-icon-text-button):not(.admin-icon-text-action) {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--admin-control-border) !important;
    border-radius: var(--admin-control-radius) !important;
    background: var(--admin-control-bg) !important;
    color: var(--admin-control-text) !important;
    box-shadow: var(--admin-control-shadow) !important;
  }

  :where([data-admin-ui]) :is(.modal-layer, .enterprise-project-drawer) :is(.admin-icon-text-button, .admin-icon-text-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px !important;
    height: 34px !important;
    padding: 0 12px !important;
  }

  :where([data-admin-ui]) :is([data-icon-action="copy"], [data-icon-action="refresh"]):not(.admin-icon-text-button):not(.admin-icon-text-action):is(:hover, :focus-visible):not(:disabled) {
    background: var(--admin-control-focus-bg) !important;
    border-color: var(--line-strong) !important;
    box-shadow: var(--admin-control-focus-shadow) !important;
  }

  :where([data-admin-ui]) :is([data-icon-action="copy"], [data-icon-action="refresh"], [data-icon-action="close"]) svg {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    fill: currentColor;
  }

  :where([data-admin-ui]) .admin-icon-action.admin-filter-reset svg {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
  }

  :where([data-admin-ui]) .admin-global-header .admin-icon-action[data-icon-action="home"] {
    box-sizing: border-box !important;
    flex: 0 0 var(--admin-control-height) !important;
    width: var(--admin-control-height) !important;
    min-width: var(--admin-control-height) !important;
    max-width: var(--admin-control-height) !important;
    height: var(--admin-control-height) !important;
    min-height: var(--admin-control-height) !important;
    padding: 0 !important;
    border-radius: var(--admin-control-radius) !important;
  }

  :where([data-admin-ui]) .admin-select-menu,
  :where([data-admin-ui]) .toolbar-select-dropdown {
    z-index: 32000 !important;
    padding: 6px !important;
    border: 1px solid rgba(180, 191, 218, 0.9) !important;
    border-radius: var(--admin-control-radius) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 44px rgba(58, 70, 103, 0.22), 0 4px 14px rgba(58, 70, 103, 0.14) !important;
    font-size: var(--admin-control-font-size) !important;
  }

  :where([data-admin-ui]) :is(.admin-select-option, .toolbar-select-option) {
    min-height: var(--admin-control-height) !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--admin-control-text) !important;
    box-shadow: none !important;
    font-size: var(--admin-control-font-size) !important;
  }

  :where([data-admin-ui]) :is(.admin-select-option, .toolbar-select-option):is(:hover, :focus-visible, .is-selected) {
    background: rgba(218, 230, 255, 0.76) !important;
    color: #2f64d6 !important;
  }

  /* Native select keeps the existing transparent full-size validation target. */

  @media (max-width: 600px) {
    :where([data-admin-ui]) :is(.page-toolbar-search-group, .page-toolbar-actions, .sessions-filters, .filter-actions) {
      flex-wrap: wrap !important;
      min-width: 0 !important;
    }

    :where([data-admin-ui]) :is(.page-toolbar, .filter-actions) :is(.toolbar-search, .toolbar-select, .contract-date-range) {
      flex: 0 1 min(var(--admin-filter-width), 100%) !important;
    }
  }
}