/* LiveMentorHub v112 — layout corrections.
   Loads after every other stylesheet. */


/* ===========================================================================
   1. My Day: duplicated page identity and 78px of dead space
   ---------------------------------------------------------------------------
   The page stacked three strips before any content:

     .topbar            "My Day" + "Your priorities, people and progress"
     .ui111-context     "My Day" .................... "10 Sept 2026"
     .ui111-workspace-tools                          [Refresh workspace]
     .ui111-welcome     "YOUR DAY, AT A GLANCE" / "Good afternoon, Admin." /
                        "Your priorities, people and progress. All in one place."
                        ................. "Thursday, 10 September"

   Measured: the page name appeared twice, the subtitle twice and the date twice,
   and the two strips cost 78px before the hero began.

   Where a hero is present it already states the page, the greeting and a fuller
   date, so the context strip is pure repetition and is dropped. The refresh
   control moves into the hero's top-right corner (ui_v112.js relocates it) so it
   no longer needs a band of its own.
   =========================================================================== */
#app .content:has(.ui111-welcome) .ui111-context { display: none; }

/* Without :has() support the strip stays; it is redundant, not broken. */
#app .content .p108:has(.ui111-welcome) { position: relative; }

.ui111-welcome > .ui111-workspace-tools {
  position: absolute;
  top: 14px;
  right: 16px;
  margin: 0;
  z-index: 2;
}
.ui111-welcome > .ui111-workspace-tools .p108-button {
  background: var(--lmh-surface);
  border: 1px solid var(--lmh-line);
  color: var(--lmh-text-2);
}
.ui111-welcome > .ui111-workspace-tools .p108-button:hover {
  background: var(--lmh-surface-2);
  color: var(--lmh-text);
}

/* The hero's decorative circle sits bottom-right; keep the date block clear of
   the relocated control. */
#app .content .ui111-welcome .ui111-welcome-date { padding-top: 18px; }

@media (max-width: 700px) {
  .ui111-welcome > .ui111-workspace-tools { position: static; margin: 12px 0 0; }
  #app .content .ui111-welcome .ui111-welcome-date { padding-top: 0; }
}


/* ===========================================================================
   2. Admin news and policy rows
   ---------------------------------------------------------------------------
   Both lists share .admin-news-row. The grid declares four tracks
   (status | copy | media | actions) which matched the policy rows, but the news
   rows emitted only three children, so the action buttons landed in the 82px
   media track and overflowed across the text — the reported "buttons
   inactive/ineffective". The news renderer now emits the media cell too, and the
   action track is sized to its content instead of a fixed 430px.

   These rules are the safety net: they keep the row usable even if a renderer
   emits a different number of children again.
   =========================================================================== */
.admin-news-actions {
  min-width: 0;
  justify-self: end;
}
.admin-news-actions .btn {
  flex: 0 0 auto;
}
/* A row that somehow has no media cell must not squeeze the actions. */
.admin-news-row:not(:has(.admin-news-media)) {
  grid-template-columns: 92px minmax(240px, 1fr) max-content !important;
}
.admin-news-thumb {
  max-width: 100%;
  max-height: 100%;
}


/* ===========================================================================
   3. Chat attachments in a sent message
   ---------------------------------------------------------------------------
   .chat-attachment-preview (the composer's pending file) is styled, but
   .chat-attachment — the same file once it is part of a message — had no rules
   at all, so the icon, filename, size and open link ran together as inline text.
   =========================================================================== */
.chat-attachment {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid var(--lmh-line);
  border-radius: var(--lmh-r-sm);
  background: var(--lmh-surface-2);
  font-size: 12px;
  max-width: 100%;
}
.chat-attachment-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--lmh-primary-tint);
  color: var(--lmh-primary);
}
.chat-attachment-icon .lm-icon { width: 14px; height: 14px; }
.chat-attachment-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-attachment-copy b {
  font-size: 12px;
  color: var(--lmh-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attachment-copy small { font-size: 10.5px; color: var(--lmh-text-3); }
.chat-attachment-open {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lmh-link);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.chat-attachment-open:hover { background: var(--lmh-primary-tint); }

/* The bubble carries a dark ground for the sender's own messages. */
.chat-message-row.mine .chat-attachment {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
}
.chat-message-row.mine .chat-attachment-copy b,
.chat-message-row.mine .chat-attachment-open { color: #fff; }
.chat-message-row.mine .chat-attachment-copy small { color: rgba(255, 255, 255, .75); }


/* ===========================================================================
   4. Onboarding checklist
   ---------------------------------------------------------------------------
   The step table carried six columns — Step, Owner, Due, Verification, Status,
   Action — and printed the raw verification rule ("policy acknowledgement",
   "training certificate") in a column of its own for every row. Owner and due
   are now one cell and the rule appears only when it is not manual, so a
   checklist reads as a checklist. These rules give the merged cells their
   two-line shape.
   =========================================================================== */
.p108-table td small {
  display: block;
  margin-top: 2px;
  color: var(--lmh-text-3);
  font-size: 11px;
  line-height: 1.4;
}
.p108-table td b { line-height: 1.35; }