/**
 * @file
 * DAM Gin Admin Theme - Custom Styles
 *
 * Tightens up form spacing and typography for a cleaner editing experience.
 */

/* ===========================================
   CSS CUSTOM PROPERTIES
   =========================================== */
:root {
  /* Typography */
  --dam-font-size-xs: 12px;
  --dam-font-size-sm: 13px;
  --dam-font-size-base: 14px;

  /* Spacing */
  --dam-space-xs: 4px;
  --dam-space-sm: 8px;
  --dam-space-md: 12px;
  --dam-space-lg: 16px;

  /* Colors */
  --dam-text-muted: #6b7280;
  --dam-border-light: #e5e7eb;
}

/* ===========================================
   FORM LAYOUT
   =========================================== */

/* Reduce overall form item spacing */
.form-item {
  margin-bottom: var(--dam-space-md);
}

/* Tighter spacing for stacked form items */
.form-item + .form-item {
  margin-top: var(--dam-space-md);
}

/* ===========================================
   LABELS
   =========================================== */

/* Form labels - smaller and tighter */
.form-item__label,
.form-item label,
label {
  font-size: var(--dam-font-size-sm);
  margin-bottom: var(--dam-space-xs);
}

/* Required indicator */
.form-item__label.form-required::after,
.form-required::after {
  font-size: var(--dam-font-size-xs);
}

/* ===========================================
   FIELD DESCRIPTIONS
   =========================================== */

/* Help text / descriptions - smaller and muted */
.form-item__description,
.description {
  font-size: var(--dam-font-size-xs);
  color: var(--dam-text-muted);
  margin-top: var(--dam-space-xs);
  line-height: 1.4;
}

/* ===========================================
   TEXT INPUTS & TEXTAREAS
   =========================================== */

/* Standard text inputs */
.form-text,
.form-email,
.form-url,
.form-search,
.form-number,
.form-tel,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"] {
  font-size: var(--dam-font-size-base);
  padding: var(--dam-space-sm) var(--dam-space-md);
}

/* Textareas */
.form-textarea,
textarea {
  font-size: var(--dam-font-size-base);
  padding: var(--dam-space-sm) var(--dam-space-md);
}

/* Select dropdowns */
.form-select,
select {
  font-size: var(--dam-font-size-base);
  padding: var(--dam-space-sm) var(--dam-space-md);
}

/* ===========================================
   DETAILS & FIELDSETS (Collapsible Groups)
   =========================================== */

/* Details element - tighter padding */
details,
.form-wrapper > details {
  margin-bottom: var(--dam-space-md);
}

/* Details summary (clickable header) */
details > summary,
.details__summary {
  font-size: var(--dam-font-size-sm);
  padding: var(--dam-space-sm) var(--dam-space-md);
}

/* Details content area */
details > .details__content,
details > .details-wrapper,
.details__content {
  padding: var(--dam-space-md);
}

/* Fieldsets */
fieldset {
  margin-bottom: var(--dam-space-md);
  padding: var(--dam-space-md);
}

fieldset > legend {
  font-size: var(--dam-font-size-sm);
  font-weight: 600;
}

/* ===========================================
   FIELD GROUPS (Drupal Field Group Module)
   =========================================== */

/* Horizontal tabs */
.field-group-tabs-wrapper {
  margin-bottom: var(--dam-space-md);
}

.horizontal-tabs .horizontal-tab-button {
  font-size: var(--dam-font-size-sm);
  padding: var(--dam-space-sm) var(--dam-space-md);
}

/* Vertical tabs */
.vertical-tabs__menu-item {
  font-size: var(--dam-font-size-sm);
}

/* Sidebar details */
.layout-region-node-secondary details {
  margin-bottom: var(--dam-space-md);
}

.layout-region-node-secondary details > summary {
  font-size: var(--dam-font-size-sm);
}

.layout-region-node-secondary .details__content {
  padding: var(--dam-space-md);
}

/* ===========================================
   PARAGRAPHS
   =========================================== */

/* Paragraph field wrapper */
.field--widget-entity-reference-paragraphs {
  margin-bottom: var(--dam-space-lg);
}

/* Individual paragraph item */
.paragraph-type--inline-images,
.paragraph-type--audio-collection,
.paragraph-type--video,
.paragraphs-subform {
  padding: var(--dam-space-md);
  background-color: #f9fafb;
  border: 1px solid var(--dam-border-light);
  border-radius: 4px;
  margin-bottom: var(--dam-space-md);
}

/* Paragraph header/top bar */
.paragraph-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dam-space-sm) var(--dam-space-md);
  background-color: #f3f4f6;
  border-bottom: 1px solid var(--dam-border-light);
  margin: calc(var(--dam-space-md) * -1);
  margin-bottom: var(--dam-space-md);
  border-radius: 4px 4px 0 0;
}

/* Paragraph type label/title */
.paragraph-type-title {
  font-size: var(--dam-font-size-sm);
  font-weight: 600;
  color: var(--dam-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Paragraph actions (drag handle, remove, etc.) */
.paragraphs-actions {
  display: flex;
  gap: var(--dam-space-xs);
}

/* Dropbutton wrapper (add paragraph buttons) */
.paragraphs-dropbutton-wrapper {
  margin: var(--dam-space-md) 0 var(--dam-space-sm);
}

/* Paragraph form fields - tighter spacing */
.paragraphs-subform .form-item {
  margin-bottom: var(--dam-space-sm);
}

.paragraphs-subform .form-item:last-child {
  margin-bottom: 0;
}

/* Paragraph drag handle */
.tabledrag-handle {
  padding: var(--dam-space-xs);
}

/* Multiple paragraphs - spacing between items */
.field--widget-entity-reference-paragraphs .draggable {
  margin-bottom: var(--dam-space-md);
}

.field--widget-entity-reference-paragraphs .draggable:last-child {
  margin-bottom: 0;
}

/* Paragraph table layout */
.field--widget-entity-reference-paragraphs table {
  border-collapse: separate;
  border-spacing: 0 var(--dam-space-sm);
}

.field--widget-entity-reference-paragraphs td {
  padding: 0;
  border: none;
  vertical-align: top;
}

/* Collapsed paragraph summary */
.paragraph-summary {
  font-size: var(--dam-font-size-sm);
  color: var(--dam-text-muted);
  padding: var(--dam-space-sm);
}

/* Add paragraph button styling */
.paragraph-type-add-modal-button,
.paragraphs-add-wrapper .button {
  font-size: var(--dam-font-size-sm);
  padding: var(--dam-space-sm) var(--dam-space-md);
}

/* ===========================================
   ENTITY REFERENCE & AUTOCOMPLETE
   =========================================== */

/* Autocomplete fields */
.form-autocomplete {
  font-size: var(--dam-font-size-base);
}

/* Entity browser / media library */
.entity-browser-field {
  margin-bottom: var(--dam-space-md);
}

/* ===========================================
   IMAGE & MEDIA FIELDS
   =========================================== */

/* Image widget */
.image-widget {
  padding: var(--dam-space-sm);
}

.image-preview {
  margin-bottom: var(--dam-space-sm);
}

/* Focal point widget */
.focal-point-wrapper {
  margin-bottom: var(--dam-space-sm);
}

/* ===========================================
   CHECKBOXES & RADIOS
   =========================================== */

/* Checkbox/radio items */
.form-type-checkbox,
.form-type-radio {
  margin-bottom: var(--dam-space-sm);
}

.form-type-checkbox label,
.form-type-radio label {
  font-size: var(--dam-font-size-sm);
}

/* Boolean checkbox (single) */
.form-type-boolean {
  margin-bottom: var(--dam-space-sm);
}

/* ===========================================
   TABLES (Draggable, etc.)
   =========================================== */

/* Table cells */
table td,
table th {
  font-size: var(--dam-font-size-sm);
  padding: var(--dam-space-sm);
}

/* Draggable table rows */
.draggable td {
  padding: var(--dam-space-sm);
}

/* ===========================================
   CKEditor
   =========================================== */

/* CKEditor toolbar - slightly more compact */
.ck.ck-toolbar {
  padding: var(--dam-space-xs);
}

/* ===========================================
   ACTION BUTTONS
   =========================================== */

/* Form actions container */
.form-actions {
  margin-top: var(--dam-space-lg);
  padding-top: var(--dam-space-md);
}

/* ===========================================
   FIELD GROUP DEFAULTS
   =========================================== */

/* Inline images paragraph spacing */
#edit-field-inline-images-text {
  margin: 20px 0;
}

/* ===========================================
   NODE EDIT SPECIFIC
   =========================================== */

/* Main content region */
.layout-region-node-main {
  padding-right: var(--dam-space-lg);
}

/* Secondary region (sidebar) */
/* Removed padding override to preserve Gin defaults */

/* Page title field */
.gin--edit-form .field--name-title .form-element {
  font-size: 16px;
  font-weight: 600;
}

/* Body field label - can be hidden since it's obvious */
.field--name-body > .form-item__label {
  font-size: var(--dam-font-size-sm);
}

/* ===========================================
   MESSAGES & STATUS
   =========================================== */

/* System messages - slightly smaller */
.messages {
  font-size: var(--dam-font-size-sm);
  padding: var(--dam-space-md);
}