/* BlueSky Remote Support -- mobile responsiveness overrides for the
   rustdesk-api (Element Plus) admin, injected by nginx before </head>.
   Desktop (>820px) is untouched. */
/* The admin's open-page tab strip must scroll, not push the page wider
   (fixes horizontal overflow once several tabs are open, all viewports). */
.header-tags{ overflow-x:auto !important; overflow-y:hidden; flex-wrap:nowrap !important; max-width:100%; }
.header-tags::-webkit-scrollbar{ height:6px; }

@media (max-width: 820px){
  html, body, #app { overflow-x: hidden !important; }

  /* The 230px desktop sidebar becomes an off-canvas drawer. */
  .el-aside.app-left{
    position: fixed !important; left: 0; top: 0; height: 100vh; z-index: 3001;
    box-shadow: 2px 0 16px rgba(0,0,0,.45); transition: transform .22s ease;
  }
  body:not(.bsky-nav-open) .el-aside.app-left{ transform: translateX(-100%); }
  .el-container .el-container{ margin-left: 0 !important; }

  /* Content uses the full width. */
  .el-main{ padding: 10px !important; }
  .el-header{ position: sticky; top: 0; z-index: 1500; }

  /* Fixed floating menu button -- always reachable, never clipped. */
  #bsky-nav-btn{
    position: fixed; left: 12px; bottom: 16px; z-index: 3002;
    width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: #2f7bff; color: #fff; font-size: 26px; line-height: 52px;
    box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: pointer; padding: 0;
  }
  body.bsky-nav-open #bsky-nav-btn{ left: auto; right: 12px; }

  /* Dim scrim behind the open drawer. */
  #bsky-scrim{ position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 3000; display: none; }
  body.bsky-nav-open #bsky-scrim{ display: block; }

  /* Toolbar buttons wrap instead of overlapping. */
  .el-main .el-button{ margin: 0 8px 8px 0 !important; float: none !important; }
  .el-row, .el-col, .el-form--inline, .el-space__item{ max-width: 100% !important; }

  /* Wide tables scroll inside their own card, not the page. */
  .el-table__body-wrapper, .el-scrollbar__wrap,
  .el-table__inner-wrapper, .el-card__body{ overflow-x: auto !important; }
}

/* --- dialogs & forms (added: change-password modal, filter forms) --- */
@media (max-width: 820px){
  /* Modal fits the screen instead of overflowing. */
  .el-dialog{ width: 94vw !important; max-width: 94vw !important; margin: 6vh auto !important; }
  .el-dialog__body{ padding: 12px 14px !important; }
  .el-overlay-dialog{ overflow: hidden auto; }

  /* Stack the label above the control so inputs are full-width, not squares. */
  .el-form-item{ display: block !important; margin-bottom: 14px !important; }
  .el-form-item__label{
    width: auto !important; max-width: 100% !important; display: block !important;
    text-align: left !important; float: none !important; padding: 0 0 4px !important;
    justify-content: flex-start !important;
  }
  .el-form-item__content{ margin-left: 0 !important; display: block !important; }
  .el-form-item__content > *{ max-width: 100% !important; }

  /* Every text field / select fills its row. */
  .el-input, .el-select, .el-input__wrapper,
  .el-select__wrapper, .el-textarea, .el-date-editor{ width: 100% !important; }

  /* Dialog footer buttons sit on one row, wrapping if needed. */
  .el-dialog__footer{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .el-dialog__footer .el-button{ margin: 0 !important; }
}