/* Telegram AutoSuite V3.5.16 responsive UI hotfix
   Scope: layout width control, mobile-safe tables/cards/forms.
   No data/session/secret changes. */

:root { --v3516-safe-gap: .75rem; }

html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, code, .text-break, .text-safe { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

.container, .container-fluid, .main-content, main, .content-wrapper, .page-content,
.card, .console-card, .soft-panel, .panel-card, .modal-content, .tab-content,
.row, [class^="col-"], [class*=" col-"] { min-width: 0 !important; max-width: 100% !important; }

.row { --bs-gutter-x: 1rem; }
.card-body, .card-header, .console-card, .soft-panel, .panel-card { overflow-wrap: anywhere; }

.table-responsive, .responsive-table, .accounts-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
.responsive-table > table {
  max-width: 100%;
}

input, select, textarea, .form-control, .form-select, .input-group,
.btn, .dropdown-menu { max-width: 100%; }
textarea { min-height: 7rem; }

.btn-group, .btn-toolbar, .actions, .action-buttons,
.d-flex.flex-wrap, .toolbar, .page-actions {
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: .5rem;
}

.text-truncate, .small, td, th, .badge, .alert, .list-group-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  body { font-size: .95rem; }

  .container, .container-fluid, main, .main-content, .content-wrapper, .page-content {
    width: 100% !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  h1, .h1 { font-size: 1.45rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
  h3, .h3 { font-size: 1.1rem !important; }

  .card, .console-card, .soft-panel, .panel-card { border-radius: 1rem !important; }
  .card-body, .card-header, .console-card .card-body, .soft-panel { padding: .85rem !important; }

  .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  [class^="col-"], [class*=" col-"] { flex: 0 0 100% !important; width: 100% !important; }

  .btn, .form-control, .form-select, .input-group-text { min-height: 2.55rem; }

  .btn-group, .btn-toolbar, .page-actions, .actions, .action-buttons {
    display: flex !important;
    width: 100%;
  }

  .btn-group > .btn, .btn-toolbar .btn, .page-actions .btn, .actions .btn, .action-buttons .btn {
    flex: 1 1 auto;
    min-width: min(100%, 8rem);
  }

  .nav-tabs, .nav-pills { overflow-x: auto; flex-wrap: nowrap !important; white-space: nowrap; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
  .modal-dialog { margin: .5rem !important; max-width: calc(100% - 1rem) !important; }

  table.table:not(.accounts-table) {
    width: max-content;
    min-width: 100%;
  }

  .accounts-table-wrap { overflow-x: visible !important; }
  table.accounts-table,
  .accounts-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  .accounts-table thead { display: none !important; }
  .accounts-table tbody { display: grid !important; gap: .85rem !important; width: 100% !important; }
  .accounts-table tr {
    display: block !important;
    width: 100% !important;
    padding: .85rem !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    border-radius: 1rem !important;
    background: #fff !important;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .06) !important;
  }
  .accounts-table td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    width: 100% !important;
    padding: .55rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
    text-align: end !important;
  }
  .accounts-table td:last-child { border-bottom: 0 !important; }
  .accounts-table td::before {
    flex: 0 0 7.5rem;
    text-align: start;
    color: #64748b;
    font-weight: 700;
    content: "";
  }
  .accounts-table td:nth-child(1)::before { content: "الحساب"; }
  .accounts-table td:nth-child(2)::before { content: "الحالة"; }
  .accounts-table td:nth-child(3)::before { content: "الصحة"; }
  .accounts-table td:nth-child(4)::before { content: "الانضمام"; }
  .accounts-table td:nth-child(5)::before { content: "المجموعات"; }
  .accounts-table td:nth-child(6)::before { content: "آخر تحديث"; }
  .accounts-table td:nth-child(7)::before { content: "الإعدادات"; }
  .accounts-table td:nth-child(8)::before { content: "الإجراءات"; }
  .accounts-table td > * { max-width: 100%; min-width: 0; }

  .join-settings-form,
  .accounts-table form,
  .accounts-table .input-group {
    width: 100% !important;
    min-width: 0 !important;
  }
  .accounts-table .btn,
  .accounts-table button,
  .accounts-table input,
  .accounts-table select { width: 100%; }
}

@media (max-width: 420px) {
  body { font-size: .9rem; }
  .container, .container-fluid, main, .main-content, .content-wrapper, .page-content {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
  .accounts-table td { display: block !important; text-align: start !important; }
  .accounts-table td::before { display: block; margin-bottom: .25rem; }
  .btn, .page-actions .btn, .actions .btn { width: 100%; }
}