/* ============================================================
   The Tech Pad — local design polish (super-admin page)
   Applied on top of the production bundle CSS, scoped to the
   admin page only. Fixes:
     1. Create-user form: equal-width columns + top alignment
        (was content-sized columns with align-items:end, which
        made Workspace/Role sit 40px above the other fields)
     2. Label typography + spacing consistency
     3. Input/select height + font-size unification, focus rings
     4. Submit button sized to match the field row
     5. Error banner restyled with real error semantics
        (was mint-green success colors on an error message)
     6. Users table graceful empty state
   ============================================================ */

/* ---------- 1. Create-user form grid ---------- */
.admin-page form.admin-user-form {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: start;
  row-gap: 18px;
}

/* ---------- 2. Labels ---------- */
.admin-page form.admin-user-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2f3d38;
}

.admin-page form.admin-user-form label small {
  font-size: 11px;
  font-weight: 400;
  color: #7d8a85;
  line-height: 1.4;
}

/* ---------- 3. Inputs & selects ---------- */
.admin-page form.admin-user-form input,
.admin-page form.admin-user-form select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  color: #14231e;
  background: #fff;
  border: 1px solid #c8d7d0;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-page form.admin-user-form input::placeholder {
  color: #9aa8a3;
}

.admin-page form.admin-user-form input:focus,
.admin-page form.admin-user-form select:focus {
  outline: none;
  border-color: #0d2b22;
  box-shadow: 0 0 0 3px rgba(13, 43, 34, 0.12);
}

/* ---------- 4. Submit button ---------- */
.admin-page form.admin-user-form button.primary {
  height: 40px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  align-self: start;
  margin-top: 20px; /* label line-height + gap — aligns button with the input row */
}

/* ---------- 5. Error banner ---------- */
.admin-page .form-message.error-message {
  background: #fdecea;
  border: 1px solid #f3c6c0;
  color: #a02c1f;
  font-size: 12.5px;
}

.admin-page .form-message.error-message::before {
  content: "\26A0\FE0F  ";
}

/* ---------- 6. Users table empty state ---------- */
.admin-page .admin-table table tbody:empty::after {
  content: "No users yet — create your first reviewer account above.";
  display: block;
  padding: 28px 16px;
  text-align: center;
  color: #8a9792;
  font-size: 13px;
}

/* ============================================================
   Team page — viewport overflow fix
   The compiled CSS gives .team-page a hardcoded 1114px grid
   column and the invite form fixed 300/260/250/200px columns,
   which overflow the viewport on smaller screens. Make the card
   and its grid fluid so the page always fits the viewport.
   ============================================================ */

main.dashboard {
  min-width: 0; /* allow the shell grid item to shrink below content min-width */
}

section.page-card.team-page {
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
}

form.invite-card {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
}

/* ============================================================
   Inbox mobile — contact details slide-over drawer
   The bundle hides .contact-pane below 760px. On mobile, the
   "Details" header button (driven by inbox-mobile.js) slides it
   in as a right-side drawer with a dimmed backdrop. Desktop
   behavior (3-column grid, Details toggles .hidden) untouched.
   ============================================================ */
@media (max-width: 760px) {
  .shared-inbox .contact-pane,
  .shared-inbox .contact-pane.hidden {
    display: block;
    position: fixed;
    top: 66px;
    right: 0;
    bottom: 0;
    width: min(85vw, 340px);
    z-index: 40;
    transform: translateX(105%);
    transition: transform 0.25s ease;
    box-shadow: -10px 0 28px rgba(11, 29, 26, 0.18);
    background: #fff;
  }

  .shared-inbox.mobile-details-open .contact-pane,
  .shared-inbox.mobile-details-open .contact-pane.hidden {
    transform: translateX(0);
  }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 66px 0 0 0;
    background: rgba(11, 29, 26, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 39;
  }

  .shared-inbox.mobile-details-open .mobile-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* the driver-injected back button must never appear on desktop */
@media (min-width: 761px) {
  .mobile-chat-back {
    display: none !important;
  }
}

/* ============================================================
   Mobile top header — compact, consistent design + content
   safety. The bundle's fixed topbar is 101px tall (desktop-
   sized h1) while the dashboard reserves only 66px, so page
   content hides behind the header. Redesign: fixed 64px header
   on every page, matched padding, fluid page content, and no
   horizontal page scroll at mobile widths.
   ============================================================ */
@media (max-width: 760px) {
  header.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
    height: 64px;
    padding: 0 16px;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e1e8e4;
    box-shadow: 0 1px 4px rgba(11, 29, 26, 0.06);
  }

  header.topbar .mobile-menu-button {
    width: 40px;
    height: 40px;
    margin: 0;
  }

  header.topbar > div {
    height: auto;
    line-height: 1.25;
    text-align: right;
  }

  header.topbar .eyebrow {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  header.topbar h1 {
    font-size: 21px;
    line-height: 1.2;
    margin: 1px 0 0;
  }

  main.dashboard {
    padding-top: 66px;
    overflow-x: clip;
  }

  /* fluid page cards + long-string safety (ticket ids, code, filenames) */
  section.page-card {
    min-width: 0;
    max-width: 100%;
  }

  .ticket-id,
  code,
  pre,
  dd,
  .message-bubble {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* multi-column forms stack full-width on phones */
  form.request-builder,
  form.test-console,
  form.settings-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Attachment icon fix — the bundle renders ⌕ (U+2315), a glyph
   missing from many system fonts (shows as an empty box), and
   the mobile rule `.composer-tools span{display:none}` hides the
   icon entirely. Replace with a paperclip SVG mask that inherits
   the button color. Specificity (0,1,2) beats the bundle's
   `.composer-tools span` (0,1,1) so it shows on mobile too.
   ============================================================ */
label.attachment-button span {
  display: inline-block;
  width: 15px;
  height: 15px;
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   Sidebar scrollbar — the bundle only sets the Firefox thin
   scrollbar (scrollbar-width/color); Chromium/WebKit still shows
   the default gray bar on the dark sidebar. Match the theme.
   ============================================================ */
aside.sidebar nav::-webkit-scrollbar { width: 6px; }
aside.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
aside.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
aside.sidebar nav::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Sidebar profile trigger (bottom) — workspace name + email were
   small, low-contrast text on the dark green. Bump readability.
   ============================================================ */
button.profile-trigger b { color: #eaf3ee; font-size: 13.5px; line-height: 1.3; }
button.profile-trigger small { color: #93b3a6; font-size: 12px; line-height: 1.35; margin-top: 1px; }
button.profile-trigger .avatar {
  background: #2c594a;
  color: #d9ece3;
  border: 1px solid rgba(255,255,255,.12);
}