/*
 * Hub entity-row polish.
 * Keep task/inbox/habit/hobby rows visually legible on small RTL/LTR screens:
 * primary content first, supporting metadata second, explicit action last.
 */

/* TASK FILTERS — four equal controls with deliberate breathing room. */
.tasks-page nav.task-filters.athar-chip-row {
  display: flex !important;
  inline-size: 100% !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-inline: 0 !important;
  padding: 2px 0 6px !important;
  overflow: visible !important;
}

.tasks-page nav.task-filters.athar-chip-row > .athar-chip {
  flex: 1 1 0 !important;
  min-inline-size: 0 !important;
  min-block-size: 44px !important;
  padding-inline: 8px !important;
  border-radius: 16px !important;
  text-align: center !important;
  white-space: nowrap;
}

/* TASKS — completion, content and actions read as one coherent card. */
.tasks-page .task-row {
  display: grid !important;
  grid-template-columns: 26px auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 10px !important;
  row-gap: 9px !important;
  min-block-size: 0 !important;
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--athar-border) 88%, transparent) !important;
  border-radius: 20px !important;
  background: var(--athar-surface) !important;
  box-shadow: 0 4px 14px rgba(30,25,15,.055) !important;
  align-items: start !important;
}

.tasks-page .task-row > .athar-check {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: center !important;
  display: grid !important;
  inline-size: 24px !important;
  min-inline-size: 24px !important;
  block-size: 24px !important;
  min-block-size: 24px !important;
  place-items: center !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  border: 2px solid var(--athar-sand) !important;
  border-radius: 50% !important;
  background: var(--athar-surface) !important;
  color: var(--athar-cream) !important;
  box-shadow: inset 0 0 0 2px var(--athar-surface) !important;
  cursor: pointer;
}

.tasks-page .task-row > .athar-check.done {
  border-color: var(--athar-hub) !important;
  background: var(--athar-hub) !important;
  box-shadow: none !important;
}

.tasks-page .task-row > .athar-check:disabled:not(.done) {
  opacity: .5;
}

.tasks-page .task-main {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  display: flex !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  inline-size: 100% !important;
  padding: 0 !important;
  text-align: start !important;
}

.tasks-page .task-title {
  display: block !important;
  overflow-wrap: anywhere;
  color: var(--athar-ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}

.tasks-page .task-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px 9px !important;
  min-block-size: 0 !important;
  color: var(--athar-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.tasks-page .task-meta:empty {
  display: none !important;
}

.tasks-page .row-tag {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: center !important;
  display: inline-flex !important;
  min-block-size: 30px !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.tasks-page .energy {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: center !important;
  display: inline-grid !important;
  inline-size: 32px !important;
  block-size: 30px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: var(--athar-soft-gold) !important;
  color: var(--athar-growth) !important;
}

.tasks-page .snooze-button {
  grid-column: 2 / 4 !important;
  grid-row: 3 !important;
  justify-self: start !important;
  align-self: center !important;
  display: inline-flex !important;
  inline-size: auto !important;
  min-inline-size: 82px !important;
  block-size: 40px !important;
  min-block-size: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding-inline: 13px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--athar-soft) !important;
  color: var(--athar-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.tasks-page .snooze-button::after {
  content: 'تأجيل';
}

html[lang^='en'] .tasks-page .snooze-button::after {
  content: 'Snooze';
}

.tasks-page .snooze-button:active {
  transform: scale(.97);
  background: var(--athar-soft-green) !important;
}

.tasks-page .task-row.done {
  box-shadow: none !important;
}

.tasks-page .task-row.done .task-title {
  color: var(--athar-faint) !important;
}

.tasks-page .task-row.snoozed {
  border-color: color-mix(in srgb, var(--athar-hub) 10%, var(--athar-border)) !important;
  background: color-mix(in srgb, var(--athar-soft-green) 42%, var(--athar-surface)) !important;
}

/* INBOX — title and state should read as one unit, not two opposite pills. */
.inbox-page .inbox-row {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px !important;
  grid-template-rows: auto auto !important;
  gap: 4px 12px !important;
  min-block-size: 72px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  align-items: center !important;
}

.inbox-page .inbox-row > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.inbox-page .inbox-row > small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--athar-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.inbox-page .inbox-row::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  content: '‹';
  color: var(--athar-muted);
  font-family: system-ui, sans-serif !important;
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}

html[dir='ltr'] .inbox-page .inbox-row::after {
  content: '›';
}

/* TRACKING — use the same density and typographic hierarchy for entities. */
.tracking-page .habit-card,
.tracking-page .hobby-row {
  border-radius: 18px !important;
}

.tracking-page .habit-card {
  padding: 15px 16px !important;
  gap: 12px !important;
}

.tracking-page .habit-icon,
.tracking-page .hobby-icon {
  inline-size: 40px !important;
  block-size: 40px !important;
  border-radius: 13px !important;
  background: var(--athar-soft-green) !important;
}

.tracking-page .habit-copy strong,
.tracking-page .hobby-row strong {
  color: var(--athar-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.tracking-page .hobby-row {
  min-block-size: 76px !important;
  padding: 14px 16px !important;
  gap: 12px !important;
}

.tracking-page .hobby-row small {
  margin-block-start: 3px !important;
  color: var(--athar-muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.tracking-page .hobby-row > hub-icon:last-child {
  display: grid !important;
  inline-size: 32px !important;
  block-size: 32px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: var(--athar-soft) !important;
  color: var(--athar-muted) !important;
}

/* Large text keeps hierarchy without forcing metadata off-screen. */
html.text-size-large .tasks-page .task-title,
html.text-size-large .inbox-page .inbox-row > span,
html.text-size-large .tracking-page :is(.habit-copy strong, .hobby-row strong) {
  font-size: 17px !important;
}

@media (max-width: 350px) {
  .tasks-page nav.task-filters.athar-chip-row {
    gap: 7px !important;
  }

  .tasks-page nav.task-filters.athar-chip-row > .athar-chip {
    min-block-size: 42px !important;
    padding-inline: 4px !important;
    font-size: 12px !important;
  }

  .tasks-page .task-row {
    grid-template-columns: 24px auto minmax(0, 1fr) !important;
    padding: 14px !important;
  }

  .tasks-page .row-tag {
    max-inline-size: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tasks-page .snooze-button {
    min-inline-size: 44px !important;
    inline-size: 44px !important;
    padding-inline: 0 !important;
  }

  .tasks-page .snooze-button::after {
    content: '' !important;
  }
}