/* Shared board attachments. Deliberately does not target existing question media. */
.board-photo-composer{margin:5px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;box-sizing:border-box}
.board-photo-add,.board-photo-save,.board-photo-retry button,.board-photo-compose-item button{min-height:38px;border:1px solid #c9dace;border-radius:9px;background:#fff;color:#225f40;padding:6px 11px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
.board-photo-add:disabled,.board-photo-compose-item button:disabled{opacity:.5;cursor:default}
.board-photo-count{font-size:12px;color:#60766a;white-space:nowrap}
.board-photo-status{font-size:12px;color:#89592f;overflow-wrap:anywhere}
.board-photo-compose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,125px));gap:7px;flex-basis:100%;max-width:100%}
.board-photo-compose-grid[hidden],.board-photo-grid[hidden]{display:none!important}
.board-photo-compose-item{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;border:1px solid #dce6df;border-radius:10px;background:#f7faf8}
.board-photo-compose-item img{width:100%;height:83px;object-fit:contain;grid-column:1/-1}
.board-photo-compose-item button{font-size:12px;min-height:32px;padding:4px 2px}
.board-photo-compose-item button:last-child{grid-column:1/-1}
.board-photo-gallery{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0;max-width:100%;min-width:0}
.board-photo-grid{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;min-width:0}
.board-photo-thumb{display:grid;place-items:center;width:108px;height:86px;max-width:30vw;padding:2px;border:1px solid #d8e3dc;border-radius:9px;background:#fff;overflow:hidden;cursor:zoom-in;font:inherit;font-size:12px;color:#617369}
.board-photo-thumb img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.board-photo-gallery.is-small .board-photo-thumb{width:76px;height:64px}
/* Home stock attachment preview v1. */
#recentStockRows .recent-stock-row>.board-photo-gallery.is-small{grid-column:2 / -1;grid-row:auto;justify-self:start;width:max-content;max-width:100%}
/* End home stock attachment preview v1. */
.board-photo-manage{border:1px solid #d5e1d9;border-radius:10px;padding:8px;margin:6px 0;background:#f7faf8;max-width:100%;box-sizing:border-box}
.board-photo-save{background:#edf8f1;margin-right:6px}
.board-photo-retry{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin:8px;padding:8px;border:1px solid #ddb178;border-radius:10px;background:#fff8ed;color:#714b22;font-size:13px;overflow-wrap:anywhere}
.board-photo-composer :focus-visible,.board-photo-gallery :focus-visible,.board-photo-manage :focus-visible{outline:3px solid #418363;outline-offset:2px}
#boardMemberGuideImages:empty{display:none}
@media(max-width:430px){.board-photo-add,.board-photo-save,.board-photo-retry button{min-height:44px}.board-photo-thumb{width:94px;height:76px}.board-photo-compose-grid{grid-template-columns:repeat(2,minmax(0,122px))}}

/* Photo composer placement v1 — body, attachments, then publication actions. */
.board-photo-controls,.oreumup-reply-photo-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}
.board-photo-controls :focus-visible{outline:3px solid #418363;outline-offset:2px}
.board-photo-composer>.board-photo-status{flex-basis:100%}
.board-photo-status:empty,[data-board-compose]:empty{display:none}
.char-line.board-photo-field-line,
#questionWriteModal #questionComposeBox .char-line.board-photo-field-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;flex-wrap:wrap;min-width:0}
.char-line.board-photo-field-line>span:not([id]){display:none!important}
.char-line.board-photo-field-line>span[id]{margin-left:auto;white-space:nowrap}
#questionComposeBox .char-line.board-photo-field-line>#oreumupImageAdd{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%}
.reply-compose.oreumup-reply-photo-compose{grid-template-areas:"input input" "photo photo" "status status" "preview preview" ". submit"!important}
.reply-compose.oreumup-reply-photo-compose>.oreumup-reply-photo-tools{grid-area:photo!important}
.reply-compose.oreumup-reply-photo-compose>.oreumup-reply-image-status{grid-area:status!important;overflow-wrap:anywhere;min-width:0}
.reply-compose.oreumup-reply-photo-compose>.oreumup-reply-image-status:empty,
.reply-compose.oreumup-reply-photo-compose>.oreumup-reply-image-preview[hidden]{display:none!important}
#oreumupQuestionReplyModal .reply-compose.oreumup-reply-photo-compose{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"input input" "photo photo" "status status" "preview preview" "cancel submit"!important}
@media(max-width:430px){.board-photo-field-line #oreumupImageAdd,.oreumup-reply-photo-tools>.oreumup-reply-image-add{min-height:44px!important}}
/* End photo composer placement v1. */

/* Mobile header + shared viewer v1.0.1-20261010.
   Use the existing device class, not window width alone: a narrow Windows PC-app
   must keep its desktop layout. No DOM relocation, auth or viewer-event changes.
   Header v1.0.3: each status is a flex item; trailing items wrap independently.
   Only the logo absorbs first-line free space. All other rows align right.
   Header v1.0.4: compact padding, equal 44px minimum touch targets and explicit
   cross-axis alignment; controls must not stretch to the taller logo line. */
@media screen and (max-width:760px){
  html.oreumup-mobile-device .topbar{
    display:flex!important;
    flex-flow:row wrap!important;
    justify-content:flex-end!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:6px!important;
    height:auto!important;
    min-height:0!important;
    position:relative;
  }
  html.oreumup-mobile-device .topbar>.brand{
    order:1!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0 auto 0 0!important;
  }
  html.oreumup-mobile-device .topbar>.userbar{display:contents!important}
  html.oreumup-mobile-device .topbar #notificationBtn{
    order:2!important;
    flex:0 0 auto!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    align-self:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  html.oreumup-mobile-device .topbar #participantStat{order:3!important}
  html.oreumup-mobile-device .topbar #topTodayBtn{order:4!important}
  html.oreumup-mobile-device .topbar #participantStat,
  html.oreumup-mobile-device .topbar #topTodayBtn{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:0!important;
    max-width:100%!important;
    align-self:center!important;
    min-height:44px!important;
    height:auto!important;
    padding:4px 6px!important;
    margin:0!important;
    box-sizing:border-box!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  html.oreumup-mobile-device .topbar #participantStat svg,
  html.oreumup-mobile-device .topbar #topTodayBtn svg{flex:0 0 21px!important;width:21px!important;height:21px!important}
  html.oreumup-mobile-device .topbar #topTodayBtn>span{font-size:20px!important;line-height:1.25!important}
  html.oreumup-mobile-device .topbar #participantCount,
  html.oreumup-mobile-device .topbar #topTodayStockCount{font-size:24px!important;line-height:1.25!important;margin:0!important}
  html.oreumup-mobile-device .topbar #userPill{
    order:5!important;
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content max-content!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    gap:8px!important;
    width:fit-content!important;
    min-width:0!important;
    max-width:100%!important;
    align-self:center!important;
    min-height:44px!important;
    height:auto!important;
    padding:4px 8px!important;
    margin:0!important;
    box-sizing:border-box!important;
    white-space:normal!important;
  }
  html.oreumup-mobile-device .topbar #userPill>.avatar{display:none!important}
  html.oreumup-mobile-device .topbar #userPill>strong{
    grid-column:1!important;
    grid-row:1!important;
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    font-size:clamp(20px,5.4vw,24px)!important;
    line-height:1.3!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
    overflow:visible!important;
    text-overflow:clip!important;
    margin:0!important;
  }
  html.oreumup-mobile-device .topbar #currentRoleBadge{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    font-size:16px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    padding:4px 7px!important;
    margin:0!important;
  }
  html.oreumup-mobile-device .topbar #userPill>span:last-child:not(.avatar):not(.role-mini){
    grid-column:3!important;
    grid-row:1!important;
    width:auto!important;
    font-size:22px!important;
    line-height:1!important;
    margin:0!important;
  }
  html.oreumup-mobile-device .topbar>.search-area{
    order:6!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  html.oreumup-mobile-device .topbar .search-line,
  html.oreumup-mobile-device .topbar .search{margin-top:0!important;margin-bottom:0!important}
  html.oreumup-mobile-device .topbar #openMiniBtn{display:none!important}
}
@media screen and (max-width:1024px){
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer{
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#15222d!important;
  }
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer .oreumup-photo-viewer-panel{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer header,
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer footer{
    min-height:44px!important;
    gap:12px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    font-size:18px!important;
    line-height:1.25!important;
    box-sizing:border-box!important;
  }
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer header{padding-top:0!important;padding-bottom:4px!important}
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer footer{padding-top:4px!important;padding-bottom:0!important}
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer .oreumup-photo-viewer-stage{
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer [data-photo-viewer-image]{object-fit:contain!important;border:0!important;border-radius:0!important}
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer [data-photo-viewer-count]{min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
  html.oreumup-mobile-device #oreumupQuestionPhotoViewer button{width:44px!important;height:44px!important;min-width:44px!important;font-size:26px!important}
}

/* Attachment count controls v1. */
.board-photo-count-button{min-height:38px;border:1px solid #c9dace;border-radius:9px;background:#fff;color:#225f40;padding:6px 11px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
.board-photo-count-button:disabled{opacity:.5;cursor:default}
@media(max-width:430px){.board-photo-count-button{min-height:44px}}
/* End attachment count controls v1. */