/* system50c universal mobile hardening */

/* Universal Responsive Tokens */
:root {
  --mobile-page-gutter: clamp(12px, 4vw, 24px);
  --mobile-control-height: 44px;
  --mobile-card-radius: 8px;
  --mobile-border: rgba(15, 23, 42, 0.12);
  --mobile-surface: #ffffff;
  --mobile-muted: #64748b;
  --mobile-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Global Overflow Safety */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

table,
pre,
code,
.table-responsive,
.diagnostic-scroll-table,
.qr-preview,
.qr-card,
.chart,
.map,
.overflow-x-auto {
  max-width: 100%;
}

pre,
code,
.token,
.badge,
.status,
.notice,
.alert,
.success {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Arabic RTL Wrapping */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
p,
li,
label,
th,
td,
a,
button,
input,
select,
textarea,
.card,
.panel,
.settings-card,
.admin-app-title,
.owner-app-page-title {
  overflow-wrap: anywhere;
}

/* App Containers */
.admin-app-body,
.owner-app-body,
.installer-shell {
  max-width: 100%;
}

.admin-app-main,
.owner-app-main,
.admin-main,
.restaurant-main,
.restaurant-shell,
.admin-shell,
.owner-app-content,
.admin-app-content,
.installer-shell,
main,
section,
article,
.card,
.panel,
.settings-card,
.dashboard-card,
.stats-card,
.form-card {
  min-width: 0;
}

.admin-app-content,
.owner-app-content,
.admin-main,
.restaurant-main,
.installer-shell {
  overflow-x: clip;
}

/* Mobile Forms */
input,
select,
textarea,
button {
  max-width: 100%;
}

textarea {
  resize: vertical;
}

.form-row,
.form-grid,
.admin-form,
.settings-grid,
.filters,
.filter-row,
.search-row,
.toolbar,
.actions,
.bulk-actions {
  min-width: 0;
}

@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    min-height: var(--mobile-control-height);
  }

  .form-row,
  .form-grid,
  .admin-form,
  .settings-grid,
  .filters,
  .filter-row,
  .search-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

/* Mobile Buttons */
.btn,
.button,
button,
input[type="submit"],
input[type="button"],
a.button {
  min-width: 0;
  white-space: normal;
}

@media (max-width: 480px) {
  .btn,
  .button,
  button,
  input[type="submit"],
  input[type="button"],
  a.button {
    min-height: var(--mobile-control-height);
  }

  .actions,
  .bulk-actions,
  .toolbar,
  .admin-actions,
  .owner-app-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .actions > *,
  .bulk-actions > *,
  .toolbar > *,
  .admin-actions > *,
  .owner-app-actions > * {
    flex: 1 1 min(100%, 160px);
  }
}

/* Mobile Toolbars */
@media (max-width: 640px) {
  .admin-app-topbar,
  .owner-app-topbar,
  .admin-topbar,
  .restaurant-topbar,
  .page-header,
  .section-header {
    min-width: 0;
    gap: 10px;
  }

  .page-header,
  .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Mobile Tables To Cards */
.responsive-table,
.table-responsive,
.diagnostic-scroll-table,
.diagnostic-table {
  width: 100%;
  max-width: 100%;
}

.diagnostic-scroll-table,
.diagnostic-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table td,
.responsive-table th,
.mobile-card-table td,
.mobile-card-table th,
.diagnostic-table td,
.diagnostic-table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

table {
  border-collapse: collapse;
}

@media (max-width: 700px) {
  .mobile-card-table,
  .mobile-card-table table,
  .admin-app-body table.mobile-card-table,
  .owner-app-body table.mobile-card-table,
  .restaurant-shell table.mobile-card-table,
  .admin-shell table.mobile-card-table,
  .installer-shell table.mobile-card-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: 0;
    overflow: visible;
  }

  .mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mobile-card-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .mobile-card-table tr {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--mobile-border);
    border-radius: var(--mobile-card-radius);
    background: var(--mobile-surface);
    box-shadow: var(--mobile-shadow);
  }

  .mobile-card-table td,
  .mobile-card-table th {
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    text-align: start;
    color: #111827;
  }

  .mobile-card-table td::before {
    content: attr(data-label);
    color: #4b5563;
    font-weight: 700;
  }

  .mobile-card-table td:not([data-label]) {
    display: block;
  }

  .mobile-card-table td:not([data-label])::before {
    content: "القيمة";
    display: block;
    margin-bottom: 6px;
    color: #4b5563;
    font-weight: 700;
  }

  .mobile-card-table tbody th {
    display: block;
    padding: 0 0 6px;
    color: #4b5563;
    background: transparent;
    font-size: .9rem;
    font-weight: 800;
  }

  .mobile-card-table tbody th + td {
    display: block;
    padding-top: 0;
  }

  .mobile-card-table tbody th + td::before {
    content: none;
  }

  .mobile-card-table td.actions,
  .mobile-card-table td[data-label="Actions"],
  .mobile-card-table td[data-label*="إجراءات"],
  .mobile-card-table td[data-label*="إجر"] {
    display: block;
  }

  .mobile-card-table td.actions::before,
  .mobile-card-table td[data-label="Actions"]::before,
  .mobile-card-table td[data-label*="إجراءات"]::before,
  .mobile-card-table td[data-label*="إجر"]::before {
    display: block;
    margin-bottom: 8px;
  }

  .mobile-card-table .actions,
  .mobile-card-table .toolbar,
  .mobile-card-table .inline-form,
  .mobile-card-table form {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-card-table .actions,
  .mobile-card-table .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mobile-card-table .actions > *,
  .mobile-card-table .toolbar > * {
    flex: 1 1 min(100%, 150px);
  }
}

/* Admin Mobile Compatibility */
@media (max-width: 900px) {
  .admin-app-shell,
  .admin-shell {
    width: 100%;
    max-width: 100%;
  }

  .admin-app-main,
  .admin-main {
    padding-inline: var(--mobile-page-gutter);
  }

  .admin-app-title h1,
  .admin-main h1 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.2;
  }
}

@media (max-width: 430px) {
  .admin-app-main,
  .admin-main {
    padding-inline: 12px;
  }
}

/* Owner Mobile Compatibility */
@media (max-width: 900px) {
  .owner-app-shell,
  .restaurant-shell {
    width: 100%;
    max-width: 100%;
  }

  .owner-app-main,
  .restaurant-main {
    padding-inline: var(--mobile-page-gutter);
  }

  .owner-app-page-title h1,
  .restaurant-main h1 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.2;
  }
}

@media (max-width: 430px) {
  .owner-app-main,
  .restaurant-main {
    padding-inline: 12px;
  }
}

/* Public Menu Mobile Compatibility */
@media (max-width: 640px) {
  .menu-grid,
  .category-grid,
  .landing-grid,
  .public-grid,
  .cart-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cart,
  .cart-drawer,
  .order-summary {
    max-width: 100%;
  }
}

/* Installer Mobile Compatibility */
@media (max-width: 700px) {
  .installer-shell {
    width: 100%;
    padding: var(--mobile-page-gutter);
  }

  .installer-shell header,
  .installer-shell nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .installer-shell nav a {
    flex: 1 1 min(100%, 140px);
    text-align: center;
  }
}

/* Auth Mobile Compatibility */
@media (max-width: 480px) {
  .auth-card,
  .login-card,
  .register-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: var(--mobile-card-radius);
  }
}

/* Modals Drawers Bottom Sheets */
dialog,
.modal,
.drawer,
.bottom-sheet,
.dropdown-menu {
  max-width: min(100%, 100vw - 24px);
}

@media (max-width: 640px) {
  dialog,
  .modal,
  .drawer,
  .bottom-sheet {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
}

/* Safe Area Insets */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .admin-app-main,
    .owner-app-main,
    .admin-main,
    .restaurant-main,
    .installer-shell {
      padding-left: max(var(--mobile-page-gutter), env(safe-area-inset-left));
      padding-right: max(var(--mobile-page-gutter), env(safe-area-inset-right));
    }
  }
}

/* Print Safety */
@media print {
  html,
  body {
    overflow: visible;
  }

  .admin-app-body table,
  .owner-app-body table,
  .restaurant-shell table,
  .admin-shell table,
  .installer-shell table {
    display: table;
  }
}