/* ========================================================================== 
   ADWA ERP — طبقة الهاتف واللوحي
   تُحمّل بعد أنماط الشاشة كي تعالج التخطيط فقط من دون لمس منطق الأعمال.
   ========================================================================== */

/* دفاع عام: أبناء flex/grid لا يفرضون عرض محتواهم على الصفحة. */
.main,
.content,
.view,
.card,
.kpi,
.card-head > *,
.toolbar > *,
.db-group,
.db-g-head h3,
.switch-row .txt {
  min-inline-size: 0;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* القاعدة القديمة أخفت كل div داخل شريحة المستخدم، ومنها الصورة الرمزية نفسها. */
@media (max-width: 900px) {
  .user-chip > .avatar { display: grid; }
  .user-chip > div:not(.avatar) { display: none; }
}

.drawer-close { display: none; }

@media (max-width: 1024px) {
  html,
  body {
    max-inline-size: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
  }

  body.nav-open { overflow: hidden; }

  body::before,
  body::after {
    inline-size: min(86vw, 430px);
    block-size: min(86vw, 430px);
  }

  .sidebar {
    inline-size: min(86vw, 320px);
    max-inline-size: calc(100vw - 44px);
    height: 100dvh;
  }

  .sidebar .brand { min-block-size: 76px; }

  .drawer-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 42px;
    block-size: 42px;
    margin-inline-start: auto;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
  }

  .drawer-close:hover,
  .drawer-close:focus-visible { background: rgba(255,255,255,.12); }

  .drawer-close svg { inline-size: 22px; block-size: 22px; }

  .nav a {
    min-block-size: 44px;
  }

  .scrim { touch-action: none; }
}

.scrim {
  border: 0;
  padding: 0;
}

body.modal-open { overflow: hidden; }

.table-swipe-hint { display: none; }

@media (max-width: 768px) {
  .topbar {
    min-inline-size: 0;
    height: 60px;
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
    gap: 7px;
  }

  .hamburger {
    flex: 0 0 auto;
    inline-size: 38px;
    block-size: 38px;
    padding: 8px;
  }

  .page-title {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
  }

  .topbar-actions {
    flex: 0 0 auto;
    min-inline-size: 0;
    gap: 5px;
  }

  .icon-btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 38px;
    block-size: 38px;
    min-inline-size: 38px;
    padding: 8px;
  }

  .lang-btn { min-inline-size: 38px; }

  .notif-menu {
    position: fixed;
    top: 68px;
    inset-inline: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }

  .content {
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 14px;
  }

  .kpi-grid,
  .kpi-grid.kpi-grid-3,
  #prospects-list .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }

  .kpi {
    min-inline-size: 0;
    padding: 15px 16px;
  }

  .kpi-label,
  .kpi-note,
  .kpi-value {
    overflow-wrap: anywhere;
  }

  .kpi-value {
    font-size: 24px;
    letter-spacing: 0;
  }

  .card-head {
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 16px 0;
  }

  .card-head h2,
  .card-head .sub {
    overflow-wrap: anywhere;
  }

  .card-body { padding: 14px 16px 17px; }
  .section-note { padding-inline: 16px; }
  .empty-note { padding: 34px 16px; }
  .alert-row,
  .sup-row,
  .top-cust { padding-inline: 16px; }

  .toolbar {
    align-items: stretch;
    gap: 9px;
    margin-bottom: 14px;
  }

  .toolbar > .search,
  #view-duty .duty-toolbar .search {
    flex: 1 0 100%;
    inline-size: 100%;
    max-inline-size: none !important;
    min-block-size: 44px;
  }

  .toolbar .spring { display: none; }

  .toolbar select,
  .toolbar > .btn {
    min-block-size: 42px;
  }

  .result-count {
    align-self: center;
    margin-inline-end: auto;
  }

  .table-wrap {
    border-radius: 0 0 var(--radius) var(--radius);
    scrollbar-width: thin;
    scrollbar-color: var(--axis) transparent;
  }

  .table-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-block-size: 30px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-page);
    color: var(--ink-3);
    font-size: 11px;
  }

  thead th,
  tbody td { padding: 10px; }

  .tabs,
  .seg-tabs {
    display: flex;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tabs {
    flex-wrap: nowrap;
    padding: 10px 14px 0;
  }

  .tab,
  .seg-tab {
    flex: 0 0 auto;
    min-block-size: 42px;
    white-space: nowrap;
  }

  .seg-tabs { inline-size: 100%; }

  .pipeline,
  .journey {
    gap: 5px;
  }

  .pipeline { padding: 13px 16px; }

  .pl-chip {
    max-inline-size: 100%;
    padding: 5px 10px;
  }

  .pl-chip span,
  .pl-chip .jn-sub { overflow-wrap: anywhere; }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .field input,
  .field select,
  .field textarea,
  .toolbar input,
  .toolbar select,
  .q-items-table input,
  input[type="date"],
  input[type="number"] {
    font-size: 16px !important;
  }

  .form-actions,
  .q-items-head,
  .q-file-row,
  .q-gimg > div {
    flex-wrap: wrap;
  }

  .q-items-head .cell-muted {
    flex: 1 0 100%;
    order: 2;
  }

  .q-items-head .btn { order: 3; }

  .q-file-row input[type="text"] {
    flex: 1 0 100%;
  }

  #inq-form .field > div[style*="display:flex"] {
    min-inline-size: 0;
    flex-wrap: wrap;
  }

  #rq-client-combo {
    flex: 1 1 220px !important;
    min-inline-size: 0;
  }

  .q-file-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .q-gimg {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .q-gimg > div { min-inline-size: 0; }

  .bom-row {
    min-inline-size: 0;
    flex-wrap: wrap !important;
  }

  .bom-row > .field[style*="flex:1"] {
    flex: 1 0 min(100%, 220px) !important;
    min-inline-size: 0;
  }

  .bom-row > .field[style*="width:110px"] {
    flex: 1 1 110px;
    inline-size: auto !important;
  }

  .bom-row + .form-actions span,
  [id^="bom-editor"] > .form-actions span {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .info-grid.sheet { gap: 0; }

  .info-grid.sheet > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .info-grid.sheet .k { flex-basis: auto; }

  .detail-head {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .detail-head .avatar {
    inline-size: 44px;
    block-size: 44px;
    font-size: 18px;
  }

  .detail-head .dh-name { overflow-wrap: anywhere; }

  .detail-stats,
  #inq-detail .detail-stats,
  #client-detail .detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dstat { padding: 12px; }
  .dstat .v { overflow-wrap: anywhere; }

  .route-step {
    padding: 11px;
    gap: 9px;
  }

  .rs-name {
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .route-blocker .rb-txt {
    flex-basis: 100%;
    min-inline-size: 0;
  }

  .route-blocker .rb-link {
    inline-size: 100%;
    white-space: normal;
    text-align: center;
  }

  .switch-row .txt,
  .top-cust .txt { min-inline-size: 0; }

  .top-cust .val {
    max-inline-size: 42%;
    overflow-wrap: anywhere;
  }

  .db-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .db-g-head h3 {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }

  .db-g-r-main { overflow-wrap: anywhere; }

  .hr-legend { gap: 8px 12px; }
  .hr-cert-stat { margin-inline-start: 0; }
  .note-stream { max-block-size: none; }

  .erp-modal {
    align-items: flex-end;
    padding: 0;
  }

  .erp-modal-shell {
    inline-size: 100% !important;
    max-inline-size: 100%;
    max-block-size: min(94dvh, calc(100dvh - env(safe-area-inset-top)));
    animation-name: erp-mobile-sheet-in;
  }

  .erp-modal-shell > .card,
  .erp-modal-shell .card:first-child {
    border-radius: 20px 20px 0 0;
  }

  .erp-modal .form-actions {
    position: sticky;
    z-index: 3;
    bottom: 0;
    margin-top: 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
  }

  body:has(.erp-modal:not([hidden])) { overflow: hidden; }

  @keyframes erp-mobile-sheet-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 640px) {
  /* الهوية موجودة كاملة في تذييل القائمة الجانبية؛ إخفاؤها هنا يترك العنوان سليماً. */
  .topbar .user-chip { display: none; }
}

@media (max-width: 480px) {
  .content { padding: 12px; }

  .kpi-grid,
  .kpi-grid.kpi-grid-3,
  #prospects-list .kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kpi {
    padding: 14px 15px;
  }

  .card-head {
    padding: 14px 14px 0;
  }

  .card-head > :first-child {
    flex: 1 0 100%;
  }

  .card-head > [style*="margin-inline-start"] {
    margin-inline-start: 0 !important;
  }

  .card-body { padding: 13px 14px 15px; }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn {
    inline-size: 100%;
    min-block-size: 44px;
    justify-content: center;
  }

  .q-items-head .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .q-gimg {
    flex-direction: column;
  }

  .q-gimg img {
    inline-size: min(100%, 180px);
  }

  #rq-client-combo,
  #rq-client-new {
    flex: 1 0 100% !important;
  }

  #rq-client-new { justify-content: center; }

  .bom-row > .field[style*="flex:1"] {
    flex-basis: 100% !important;
  }

  .wo-planline .btn {
    inline-size: 100%;
    margin-inline-start: 0;
    justify-content: center;
  }

  .db-status { gap: 6px; }
  .db-st { flex: 1 1 auto; justify-content: center; }
  .db-st-sep { display: none; }

  .sup-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .empty-note { padding-block: 28px; }
}

@media (max-width: 350px) {
  .topbar {
    padding-inline: 9px;
    gap: 4px;
  }

  .page-title { font-size: 16px; }
  .topbar-actions { gap: 3px; }

  .icon-btn,
  .hamburger {
    inline-size: 36px;
    block-size: 36px;
    min-inline-size: 36px;
  }

  .detail-stats,
  #inq-detail .detail-stats,
  #client-detail .detail-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn,
  .tab,
  .seg-tab,
  .nav a,
  .card-toggle,
  .db-g-info,
  .sc-tick {
    min-block-size: 42px;
  }

  .card-toggle,
  .db-g-info {
    min-inline-size: 42px;
  }

  .kpi:hover,
  .report-card:hover,
  .icon-btn:hover {
    transform: none;
  }
}