/*
 * RMF DRAW Phase 1 UI/UX spacing cleanup
 * Presentation-only final authority layer.
 * Scope: hosted giveaway records plus low-risk shared spacing/accessibility fixes.
 */

:root {
  --rmf-phase1-space-1: 4px;
  --rmf-phase1-space-2: 8px;
  --rmf-phase1-space-3: 12px;
  --rmf-phase1-space-4: 16px;
  --rmf-phase1-touch: 44px;
}

/* My Giveaways: keep record content and both action tiers predictable. */
.hosted-giveaway-sections {
  gap: var(--rmf-phase1-space-4) !important;
  margin-bottom: 20px !important;
}

.hosted-giveaway-sections > .ui-nav-section > h2 {
  padding: 13px 4px 6px !important;
}

.hosted-giveaway-row {
  grid-template-columns: minmax(0, 1fr) minmax(184px, 224px) !important;
  grid-template-areas:
    "giveaway-content giveaway-manage"
    "giveaway-content giveaway-share" !important;
  column-gap: var(--rmf-phase1-space-3) !important;
  row-gap: var(--rmf-phase1-space-2) !important;
  min-height: 0 !important;
  padding: 13px 4px !important;
}

.hosted-giveaway-row > .ui-record-main {
  grid-area: giveaway-content;
  align-self: center;
  display: grid;
  min-width: 0;
  gap: 3px !important;
}

.hosted-giveaway-row > .ui-record-main > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.hosted-giveaway-row > .ui-record-main > small {
  line-height: 1.42;
}

.hosted-giveaway-row > [data-host-open] {
  grid-area: giveaway-manage;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: var(--rmf-phase1-touch) !important;
  background: linear-gradient(135deg, var(--rmf-accent-2), var(--rmf-accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.hosted-giveaway-row > .rmf-giveaway-share-tools {
  grid-area: giveaway-share;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rmf-phase1-space-2) !important;
  width: 100%;
  padding-top: 0 !important;
}

.hosted-giveaway-row > .rmf-giveaway-share-tools > button {
  width: 100% !important;
  min-width: 0;
  min-height: var(--rmf-phase1-touch) !important;
  padding: 8px 10px !important;
  line-height: 1.2;
}

/* Archived records remain complete but use denser vertical rhythm. */
[data-giveaway-group="archived"] .hosted-giveaway-row {
  padding-block: 10px !important;
}

[data-giveaway-group="archived"] .hosted-giveaway-row > .ui-record-main {
  gap: 2px !important;
}

[data-giveaway-group="archived"] .hosted-giveaway-row > .ui-record-main > small {
  color: color-mix(in srgb, var(--rmf-muted) 86%, transparent);
}

/* Shared heading and record rhythm. */
.ui-page-header {
  gap: var(--rmf-phase1-space-3) !important;
  margin-bottom: var(--rmf-phase1-space-4) !important;
}

.ui-page-header h1 {
  margin: .08rem 0 .3rem !important;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.ui-page-header p,
.section-heading p {
  margin: .15rem 0 0 !important;
  line-height: 1.48;
}

.ui-section,
.ui-form-section {
  gap: var(--rmf-phase1-space-3) !important;
}

.ui-section > h2:first-child,
.ui-section > h3:first-child,
.ui-form-section > h2:first-child,
.ui-form-section > h3:first-child {
  margin-bottom: 0 !important;
  line-height: 1.25;
}

.ui-record-row .ui-record-main {
  min-width: 0;
}

.ui-record-row .ui-record-main > strong,
.ui-record-row .ui-record-main > h2,
.ui-record-row .ui-record-main > h3 {
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.ui-record-row small {
  line-height: 1.42;
}

.ui-action-row {
  gap: var(--rmf-phase1-space-2) !important;
  padding-top: var(--rmf-phase1-space-1) !important;
}

/* Keep sparse messaging readable without shrinking data-heavy pages. */
.card.empty-state,
.ui-empty-state:only-child {
  max-width: 760px;
}

/* Mobile table affordance: data and table markup remain untouched. */
.administration-page table {
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.administration-page table:focus-visible {
  outline: 3px solid rgba(37, 174, 234, .36);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  /* A compact icon may remain visually small; its interactive box stays usable. */
  .icon-button,
  #menuButton,
  #adminMenuButton {
    width: var(--rmf-phase1-touch) !important;
    height: var(--rmf-phase1-touch) !important;
    min-width: var(--rmf-phase1-touch) !important;
    min-height: var(--rmf-phase1-touch) !important;
  }

  .tabs button,
  .tabbar button,
  .section-tabs button,
  .filter-tabs button,
  .entry-tabs button,
  .notification-tabs button,
  .account-nav button,
  .manage-nav button,
  .approval-filter-tabs button {
    min-height: var(--rmf-phase1-touch) !important;
  }

  .hosted-giveaway-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "giveaway-content"
      "giveaway-manage"
      "giveaway-share" !important;
    gap: 0 !important;
    padding: var(--rmf-phase1-space-3) 4px 0 !important;
  }

  .hosted-giveaway-row > .ui-record-main {
    margin-bottom: var(--rmf-phase1-space-3);
  }

  .hosted-giveaway-row > .ui-record-main > strong {
    line-height: 1.32;
  }

  .hosted-giveaway-row > .ui-record-main > small {
    line-height: 1.48;
  }

  .hosted-giveaway-row > [data-host-open] {
    justify-self: start !important;
    width: auto !important;
    min-width: 168px;
    margin-bottom: var(--rmf-phase1-space-2);
  }

  .hosted-giveaway-row > .rmf-giveaway-share-tools {
    width: min(100%, 360px);
    margin-bottom: 20px;
  }

  [data-giveaway-group="archived"] .hosted-giveaway-row {
    padding-top: 10px !important;
  }

  [data-giveaway-group="archived"] .hosted-giveaway-row > .ui-record-main {
    margin-bottom: 10px;
  }

  [data-giveaway-group="archived"] .hosted-giveaway-row > .rmf-giveaway-share-tools {
    margin-bottom: 18px;
  }

  footer {
    gap: 2px var(--rmf-phase1-space-3) !important;
  }

  footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--rmf-phase1-touch);
    padding-block: 6px;
    line-height: 1.3;
  }

  .administration-page table {
    position: relative;
    padding-bottom: 8px;
    border-inline: 1px solid rgba(82, 150, 198, .18);
    background:
      linear-gradient(90deg, transparent calc(100% - 20px), rgba(37, 174, 234, .08));
  }
}

@media (max-width: 390px) {
  .hosted-giveaway-row > [data-host-open],
  .hosted-giveaway-row > .rmf-giveaway-share-tools {
    width: 100% !important;
  }

  footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 330px) {
  .hosted-giveaway-row > .rmf-giveaway-share-tools,
  footer {
    grid-template-columns: minmax(0, 1fr);
  }
}