admin-web/src/styles/adminDensity.css

@import './adminDensityTokens.css';

/* Explicit opt-in for approved dense business workspaces and teleported dialogs. */
.admin-density, .admin-density-dialog, .admin-density-drawer {
  --el-font-size-base: var(--admin-font-body);
  --el-component-size: var(--admin-control-height);
  --cc-list-table-font-size: var(--admin-font-body);
  --cc-list-action-font-size: var(--admin-font-body);
  --cc-list-query-font-size: var(--admin-font-body);
  font-size: var(--admin-font-body, 13px);
}
.admin-density .surface-panel, .admin-density .query-toolbar {
  border-radius: var(--admin-radius, 4px); box-shadow: none;
}
.admin-density .el-table, .admin-density-dialog .el-table {
  --el-table-header-bg-color: var(--admin-label-bg);
  --el-table-border-color: var(--admin-table-border);
  --el-table-row-hover-bg-color: var(--admin-row-hover);
  font-size: var(--admin-font-body, 13px);
}
.admin-density .data-table .el-table .el-table__cell, .admin-density-dialog .el-table .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
.admin-density .el-table .cell, .admin-density-dialog .el-table .cell { line-height: 22px; }
.admin-density .el-table .el-button--small, .admin-density-dialog .el-table .el-button--small { height: var(--admin-action-height, 28px); padding: var(--admin-space-1, 4px) var(--admin-space-3, 8px); }
.admin-density .el-table__body tr.el-table__row--striped td.el-table__cell { background: #fcfcfd; }
.admin-density .data-table .data-table__toolbar { min-height: 44px; padding: var(--admin-space-2, 6px) var(--admin-space-5, 12px); }
.admin-density .data-table .data-table__pagination { min-height: 48px; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); }
.admin-density .el-empty { padding: var(--admin-space-5, 12px) 0; }
.admin-density .el-empty__image { display: none; }
.admin-density .el-empty__description { margin-top: 0; }
.admin-density .el-empty__description p { font-size: var(--admin-font-body, 13px); }
.admin-density-dialog .el-form-item__label { line-height: 22px; }
.admin-density-dialog .el-descriptions__label.el-descriptions__cell { font-size: var(--admin-font-caption, 12px); background: #f8fafc; }
.admin-density-dialog .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
.admin-density-dialog.el-dialog.is-fullscreen { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
.admin-density-dialog.el-dialog.admin-density-workspace:not(.is-fullscreen) { height: 92vh; max-height: 92vh; margin-top: 4vh; }
.admin-density-dialog .el-dialog__headerbtn { top: 0; }
.admin-density-dialog .app-dialog__native-fullscreen-control { top: 6px; }
.admin-density-confirm.el-message-box { --el-font-size-base: var(--admin-font-body); border-radius: var(--admin-radius, 4px); padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
.admin-density-confirm .el-message-box__title { font-size: var(--admin-font-title, 16px); }

/* Dialogs are teleported; opt in explicitly instead of styling all AppDialog instances. */
.admin-density-dialog.el-dialog {
  --el-font-size-base: var(--admin-font-body);
  --el-component-size: var(--admin-control-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: var(--admin-radius, 4px);
}
.admin-density-dialog.el-dialog:not(.is-fullscreen) { margin-top: 6vh; max-height: 88vh; }
.admin-density-dialog.el-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
.admin-density-dialog.el-dialog .el-dialog__title { font-size: var(--admin-font-title, 16px); line-height: 24px; font-weight: 600; }
.admin-density-dialog.el-dialog .el-dialog__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--admin-space-5, 12px) var(--admin-space-6, 16px); }
.admin-density-dialog.el-dialog .el-dialog__footer { flex: 0 0 auto; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-top: 1px solid var(--cc-border); }
.admin-density-dialog.el-dialog .el-table { font-size: var(--admin-font-body, 13px); }
.admin-density-dialog.el-dialog .el-table__cell { height: var(--admin-row-height, 36px); padding: var(--admin-space-1, 4px) 0; }
.admin-density-dialog.el-dialog .el-table .cell { line-height: 22px; }
.admin-density-dialog.el-dialog .el-form-item { margin-bottom: 14px; }
.admin-density-dialog.el-dialog .el-form-item__label { font-size: var(--admin-font-body, 13px); }
.admin-density-dialog.el-dialog .el-alert { padding: var(--admin-space-3, 8px) var(--admin-space-4, 10px); border-radius: 3px; }
.admin-density-dialog.el-dialog .el-empty { padding: var(--admin-space-5, 12px) 0; }
.admin-density-dialog.el-dialog .el-empty__image { display: none; }
.admin-density-dialog.el-dialog .el-empty__description { margin-top: 0; }

/* Headers must keep units visible even when a saved column width is narrow. */
.admin-density .el-table th.el-table__cell .cell,
.admin-density-dialog .el-table th.el-table__cell .cell { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 18px; }

/* Shared outlined business actions. Pages choose tone, never redefine paint/size. */
:is(.admin-density, .admin-density-dialog) .el-button.density-action {
  --action-color: var(--admin-action-neutral);
  --action-border: var(--admin-action-neutral-border);
  --el-button-text-color: var(--action-color);
  --el-button-border-color: var(--action-border);
  --el-button-bg-color: var(--admin-surface);
  --el-button-hover-text-color: var(--action-color);
  --el-button-hover-border-color: var(--action-color);
  --el-button-hover-bg-color: var(--admin-label-bg);
  --el-button-active-text-color: var(--action-color);
  --el-button-active-border-color: var(--action-color);
  --el-button-active-bg-color: var(--admin-label-bg);
  --el-button-disabled-text-color: #a1a1aa;
  --el-button-disabled-border-color: var(--admin-table-border);
  --el-button-disabled-bg-color: var(--admin-surface);
  height: var(--admin-action-height); min-height: var(--admin-action-height);
  padding: var(--admin-space-1) var(--admin-space-4); margin: 0;
  border: 1px solid var(--action-border); border-radius: var(--admin-action-radius);
  color: var(--action-color); background: var(--admin-surface);
  font-size: var(--admin-font-body); font-weight: 600; box-shadow: none;
}
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="warning"] { --action-color: var(--admin-action-warning); --action-border: var(--admin-action-warning-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="purple"] { --action-color: var(--admin-action-purple); --action-border: var(--admin-action-purple-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="primary"] { --action-color: var(--admin-action-primary); --action-border: var(--admin-action-primary-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="success"] { --action-color: var(--admin-action-success); --action-border: var(--admin-action-success-border); }
:is(.admin-density, .admin-density-dialog) .density-action[data-tone="danger"] { --action-color: var(--admin-action-danger); --action-border: var(--admin-action-danger-border); }
:is(.admin-density, .admin-density-dialog) .el-button.density-action:hover:not(:disabled) { color: var(--action-color); border-color: var(--action-color); background: var(--admin-label-bg); box-shadow: none; }
:is(.admin-density, .admin-density-dialog) .el-button.density-action:disabled { color: var(--el-button-disabled-text-color); border-color: var(--el-button-disabled-border-color); background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog) .el-button.density-action:focus-visible { outline: 2px solid var(--action-color); outline-offset: 2px; }

/* Navigation tabs shared by customer/order details. Layout-specific borders stay local. */
.admin-density .density-tabs { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; background: var(--admin-surface); scrollbar-width: thin; }
.admin-density .density-tabs > button { position: relative; display: inline-flex; min-width: max-content; height: var(--admin-tab-height); min-height: var(--admin-tab-height); flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--admin-space-2); padding: 0 var(--admin-space-6); border: 0; background: transparent; color: #475467; font-size: var(--admin-font-body); font-weight: 500; white-space: nowrap; cursor: pointer; }
.admin-density .density-tabs > button::after { position: absolute; right: var(--admin-space-5); bottom: 0; left: var(--admin-space-5); height: 2px; background: transparent; content: ''; }
.admin-density .density-tabs > button:hover { background: #fafbff; color: #344054; }
.admin-density .density-tabs > button.active { background: #f7f8ff; color: var(--cc-primary); font-weight: 600; }
.admin-density .density-tabs > button.active::after { background: var(--cc-primary); }
.admin-density .density-tabs > button:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
.admin-density .density-tab-icon { display: inline-flex; width: var(--admin-tab-icon-slot); height: var(--admin-tab-icon-slot); flex: 0 0 var(--admin-tab-icon-slot); align-items: center; justify-content: center; font: var(--admin-tab-icon-size)/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

.admin-density-drawer .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
.admin-density-drawer .el-drawer__title { font-size: var(--admin-font-title); }
.admin-density-drawer .el-drawer__body { padding: var(--admin-space-5) var(--admin-space-6); }

/* Reusable row action group; no business action names in the shared layer. */
.admin-density .data-table .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); }
.admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }

/* Continuous description grid. Page owns column count and wide-field spans only. */
:is(.admin-density, .admin-density-dialog) .density-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog) .density-fields > div { display: grid; grid-template-columns: var(--admin-field-label-width, var(--admin-label-width)) minmax(0, 1fr); min-width: 0; min-height: var(--admin-row-height); gap: 0; padding: 0; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); border-radius: 0; background: var(--admin-surface); }
:is(.admin-density, .admin-density-dialog) .density-fields dt { display: flex; align-items: center; margin: 0; padding: var(--admin-space-2) var(--admin-space-3); color: var(--cc-muted); background: var(--admin-label-bg); font-size: var(--admin-font-caption); line-height: 20px; }
:is(.admin-density, .admin-density-dialog) .density-fields dd { align-self: center; min-width: 0; margin: 0; padding: var(--admin-space-2) var(--admin-space-3); color: #25324a; font-size: var(--admin-font-body); font-weight: 400; line-height: 20px; overflow-wrap: anywhere; white-space: normal; }