/* responsive.css — Mobile-first responsive layout */
/* Breakpoint: 768px (desktop/mobile divide) */

/* HAMBURGER NAV */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--space-2);
  font-size: var(--text-xl);
  color: var(--text-primary);
  line-height: 1;
}

/* ==========================================================
   ACCOUNT MENU DROPDOWN
   Replaces the standalone Logout link in the top nav with a
   dropdown containing Account, Change Password, Logout.
   ========================================================== */

.account-menu {
  position: relative;
}

.account-menu-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: inherit;
  line-height: 1.4;
  border-radius: var(--radius-sm);
}

.account-menu-trigger:hover {
  color: var(--accent);
  background: var(--bg-muted);
}

.account-menu-trigger[aria-expanded="true"] {
  color: var(--accent);
  background: var(--bg-muted);
}

.account-menu-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.account-menu-trigger[aria-expanded="true"] .account-menu-chevron {
  transform: rotate(180deg);
}

.account-menu-name {
  font-weight: var(--font-medium);
}

.account-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  margin: var(--space-1) 0 0 0;
  list-style: none;
  z-index: 100;
}

.account-menu-dropdown.is-open {
  display: block;
}

.account-menu-dropdown li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.account-menu-dropdown li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.account-menu-dropdown li a:hover {
  background: var(--bg-muted);
  color: var(--accent);
}

.account-menu-dropdown li a i,
.account-menu-dropdown li a [data-lucide] {
  width: 14px;
  height: 14px;
}

.account-menu-divider {
  height: 1px;
  background: var(--border-default);
  margin: var(--space-1) 0;
}

/* On mobile, the account menu lives inside the hamburger dropdown.
   Show the dropdown items inline rather than as a sub-dropdown. */
@media (max-width: 768px) {
  .account-menu {
    width: 100%;
  }
  
  .account-menu-trigger {
    display: none; /* Hide the trigger — items are shown inline below */
  }
  
  .account-menu-dropdown {
    display: block !important;
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  
  .account-menu-dropdown li a {
    padding: var(--space-3) var(--space-2);
    min-height: 44px;
    border-bottom: 1px solid var(--border-subtle);
  }
}

@media (max-width: 768px) {
  /* Safety net: any table without responsive-table class gets horizontal scroll
     instead of being squashed into vertical letter-stacked columns by PicoCSS. */
  main.layout table:not(.responsive-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  main.layout table:not(.responsive-table) th,
  main.layout table:not(.responsive-table) td {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  header.site-header nav { position: relative; }

  html body header.site-header nav ul.nav-right {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) var(--space-4);
    margin: 0;
    gap: 0;
  }

  html body header.site-header nav ul.nav-right.is-open { display: flex !important; }

  html body header.site-header nav ul.nav-right li {
    padding: 0;
    width: 100%;
  }

  html body header.site-header nav ul.nav-right li a {
    display: block;
    padding: var(--space-3) var(--space-2);
    min-height: 44px;
    line-height: 1.4;
    border-bottom: 1px solid var(--border-subtle);
  }

  html body header.site-header nav ul.nav-right li:last-child a {
    border-bottom: 0;
  }
}

/* RESPONSIVE TABLES — CARD STACK */

@media (max-width: 768px) {
  table.responsive-table,
  table.responsive-table thead,
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table th,
  table.responsive-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  table.responsive-table thead { display: none; }

  table.responsive-table tr {
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
  }

  table.responsive-table td {
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-2) 0;
    text-align: left;
    position: relative;
    padding-left: 40%;
    min-height: 24px;
  }

  table.responsive-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  table.responsive-table td:first-child { padding-top: 0; }

  table.responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: var(--space-2);
    width: 35%;
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  table.responsive-table td.actions {
    padding-left: 0;
    padding-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  table.responsive-table td.actions::before { display: none; }

  /* Handle 2-column metadata-style tables where <th> is inside <tr> (not in <thead>) */
  table.responsive-table tr th {
    display: none;
  }

  table.responsive-table td.actions a[role="button"],
  table.responsive-table td.actions button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    margin: 0;
  }

  table.responsive-table tr.empty-row td {
    padding-left: 0;
    text-align: center;
  }
  table.responsive-table tr.empty-row td::before { display: none; }
}

/* GENERAL MOBILE LAYOUT */

@media (max-width: 768px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .grid > form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  a[role="button"], button {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  form.status-filter {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-2) !important;
  }

  form.status-filter select { width: 100%; }
}

/* ==========================================================
   HYBRID OVERFLOW HANDLING (mobile only)
   - Long content never causes horizontal scroll on mobile
   - Different content types get different overflow treatments
   ========================================================== */

@media (max-width: 768px) {

  /* Global safety: nothing on mobile causes horizontal page scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  main.layout {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Card-stack table cells: long strings (URLs, emails, long IDs) wrap cleanly
     using overflow-wrap which respects word boundaries when possible
     but breaks long unbreakable strings instead of overflowing. */
  table.responsive-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Truncate-with-ellipsis utility class.
     Apply via class="truncate" to any element on mobile that should
     show "..." when content overflows rather than wrap.
     The full value remains in the DOM and is accessible via the
     title attribute or tap-to-expand. */
  .truncate {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  /* Tap-to-expand pattern:
     An element with class="expandable" shows truncated by default.
     When the user taps (which toggles class "expanded" via JS),
     it wraps and shows the full content. */
  .expandable {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    cursor: pointer;
    border-bottom: 1px dotted var(--text-tertiary);
  }

  .expandable.expanded {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-bottom-style: solid;
  }

  /* When mid-cell text contains "(email@example.com)" pattern
     wrapped in <span class="muted">, allow the muted email span
     to truncate cleanly. The email is supplementary because the
     full name is usually above it. */
  table.responsive-table td span.muted {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* For links inside cards: same wrapping rules so URLs don't overflow */
  table.responsive-table td a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Forms and form fields — never exceed viewport width on mobile */
  input, textarea, select, button {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Pre/code blocks — horizontal scroll inside the block, not the page */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Images and videos — never exceed container */
  img, video {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================
   DESKTOP TABLE DENSITY (>768px)
   Tighter buttons, denser rows, no wrapping in action cells.
   Applies to all admin/creator/reviewer tables.
   ========================================================== */

@media (min-width: 769px) {

  /* Action cells: inline-row layout, no wrapping */
  table td.actions,
  table th.actions {
    white-space: nowrap;
    text-align: right;
  }

  table td.actions {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
  }

  table td.actions > a[role="button"],
  table td.actions > button {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--space-2);
  }

  table td.actions > a[role="button"]:first-child,
  table td.actions > button:first-child {
    margin-left: 0;
  }

  /* Compact buttons inside any table action cell */
  table td.actions a[role="button"],
  table td.actions button {
    min-height: 0;
    padding: 4px 10px;
    font-size: var(--text-xs);
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }

  /* Smaller icons inside compact buttons */
  table td.actions a[role="button"] svg,
  table td.actions button svg,
  table td.actions a[role="button"] [data-lucide],
  table td.actions button [data-lucide] {
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-right: 2px;
  }

  /* Denser table rows overall */
  main.layout table {
    font-size: var(--text-sm);
  }

  main.layout table th,
  main.layout table td {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    vertical-align: middle;
  }

  /* Compact headers */
  main.layout table thead th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  /* Badges inside dense cells should be slightly smaller too */
  main.layout table .badge {
    font-size: 10px;
    padding: 1px 6px;
  }
}

.viewer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.viewer-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.caption-inline {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.caption-inline .caption-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.caption-inline textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Media gallery — Instagram-style uniform 1:1 grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.media-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.media-card .thumb {
  display: block;
  background: var(--bg-muted);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.media-card .thumb img,
.media-card .thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-card figcaption {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.media-card .filename {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.media-card .media-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: auto;
}

.media-card .media-actions a[role="button"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px;
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
  border-radius: var(--radius-sm);
}

.media-card .media-actions a[role="button"] svg,
.media-card .media-actions a[role="button"] [data-lucide] {
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
  margin-right: 2px;
}

@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   ACCOUNT MENU — Role Switcher additions
   ========================================================== */

.account-menu-section-label {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
  pointer-events: none;
}

.account-menu-role-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  color: var(--text-primary);
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
  font-family: inherit;
}

.account-menu-role-btn:hover {
  background: var(--bg-muted);
  color: var(--accent);
}

.account-menu-role-btn i,
.account-menu-role-btn [data-lucide] {
  width: 14px;
  height: 14px;
}

/* Admin user form — multi-role checkboxes */
.form-row ul#id_roles,
.form-row ul[id^="id_roles"] {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0;
}

.form-row ul#id_roles li,
.form-row ul[id^="id_roles"] li {
  padding: var(--space-1) 0;
}

.form-row ul#id_roles label,
.form-row ul[id^="id_roles"] label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: normal;
}
/* ==========================================================
   ACCOUNT MENU — Role Switcher spacing fixes
   ========================================================== */

/* Forms inside the dropdown menu must have zero margin */
.account-menu-dropdown form {
  margin: 0;
  padding: 0;
}

/* List items containing forms should also have zero padding/margin */
.account-menu-dropdown li {
  margin: 0;
}

/* The SWITCH ROLE section label should match the indent of other items */
.account-menu-section-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  margin: 0;
}

/* Role buttons inside forms — match the padding of regular menu links */
.account-menu-dropdown form .account-menu-role-btn {
  padding: var(--space-2) var(--space-3);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile (≤768px): same fixes apply inside the hamburger menu */
@media (max-width: 768px) {
  .account-menu-dropdown form {
    margin: 0;
    padding: 0;
  }
  
}
/* ==========================================================
   ACCOUNT MENU — Focus styling
   Suppress browser default focus ring on mouse click while
   preserving keyboard accessibility via :focus-visible.
   ========================================================== */

/* The trigger button: hide outline on mouse focus, keep custom outline for keyboard focus */
.account-menu-trigger:focus {
  outline: none;
}

.account-menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dropdown menu links: same treatment */
.account-menu-dropdown li a:focus,
.account-menu-dropdown form .account-menu-role-btn:focus {
  outline: none;
}

.account-menu-dropdown li a:focus-visible,
.account-menu-dropdown form .account-menu-role-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--bg-muted);
}
/* ==========================================================
   ADMIN POST DETAIL — Inline Caption Editor
   Override PicoCSS button styling so caption looks like plain text by default.
   Frame only appears when actively editing.
   ========================================================== */

/* The display div has role="button" for keyboard accessibility, but should
   look like plain text in its idle state — NOT a button. */
.caption-editor .caption-display[role="button"] {
  display: inline-block;
  background: transparent;
  color: var(--text-primary);
  border: 0;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  min-height: 1.5em;
  width: 100%;
  box-shadow: none;
}

/* Subtle hover hint so users know it's clickable */
.caption-editor .caption-display[role="button"]:hover {
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  border-bottom: 1px dotted var(--border-default);
  margin-bottom: -1px;
}

/* Keyboard focus: subtle outline for accessibility */
.caption-editor .caption-display[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: transparent;
}

/* When editing: the textarea is shown, the display is hidden */
.caption-editor .caption-input {
  display: none;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
}

/* Edit mode: input shown via JS removing the hidden attribute */
.caption-editor .caption-input:not([hidden]) {
  display: block;
}

/* Hide display when editing */
.caption-editor .caption-display.is-editing {
  display: none;
}

/* Status label below the field */
.caption-editor .caption-status {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  display: block;
}

.caption-editor .caption-status.saving { color: var(--text-secondary); }
.caption-editor .caption-status.saved { color: var(--success); }
.caption-editor .caption-status.error { color: var(--danger); }

/* ==========================================================
   REVIEWER MEDIA DETAIL — Mobile header layout
   Stack title and action buttons vertically below 768px.
   Buttons arrange in a clean 2-column grid for thumb-friendly tap targets.
   ========================================================== */
@media (max-width: 768px) {
  .media-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .media-head .title {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    margin-bottom: var(--space-3);
  }

  .media-head .actions {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .media-head .actions a[role="button"],
  .media-head .actions button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    min-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}