/* Urixzen Client — mobile-first responsive overrides
   Loaded after /assets/tailwind.css. Preserves desktop design; fixes overflow,
   cramped padding, and non-wrapping layouts down to 320px. */

/* --- Global guards --- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
code, pre, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Flex/grid children must be allowed to shrink (prevents overflow) */
[class*="flex"] > *, [class*="grid"] > * { min-width: 0; }

/* --- Shell: header + main (top.ejs) --- */
.app-shell-header { gap: 0.5rem; }
.app-shell-main { min-width: 0; }
.app-header-right { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.25rem; }
.app-wallet-pill { white-space: nowrap; }
.app-user-btn { max-width: 100%; }
.app-username { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
#userMenu { max-width: calc(100vw - 1rem); }

/* Scale shell padding (prebuilt responsive px utilities are not compiled) */
@media (max-width: 639.98px) {
  .app-shell-header { padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
  .app-shell-main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .app-wallet-pill { padding-left: 0.5rem !important; padding-right: 0.5rem !important; font-size: 0.8125rem; }
  .app-wallet-pill .app-coin-name { display: none; }
  .app-user-btn { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .app-username { max-width: 6.5rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .app-shell-header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .app-shell-main { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}
@media (min-width: 1024px) {
  .app-shell-main { padding-left: 2rem !important; padding-right: 2rem !important; }
}
@media (max-width: 359.98px) {
  .app-username { display: none; }
  #userMenuChevron { display: none; }
}

/* --- Page containers: normalize px-10 (main views) & keep desktop spacing --- */
main.container.mx-auto { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { main.container.mx-auto { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { main.container.mx-auto { padding-left: 2.5rem; padding-right: 2.5rem; } }
main.container.mx-auto.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 640px) { main.container.mx-auto.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }

/* Page header rows: stack on small screens when space is tight */
@media (max-width: 639.98px) {
  .page-header { flex-direction: column; align-items: flex-start !important; gap: 0.75rem; }
  .page-header > * { max-width: 100%; }
}

/* --- Breadcrumb --- */
.app-breadcrumb { max-width: 100%; flex-wrap: wrap; }
.app-breadcrumb ol { flex-wrap: wrap; row-gap: 0.25rem; }
@media (max-width: 639.98px) { .app-breadcrumb { padding-left: 0.625rem !important; padding-right: 0.625rem !important; } }

/* --- Server tab nav: horizontal scroll on mobile --- */
.server-tabs { max-width: 100%; }
.server-tab { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767.98px) {
  .server-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .server-tabs::-webkit-scrollbar { height: 4px; }
}

/* --- Cards / stat grids that are too dense on 320px --- */
@media (max-width: 399.98px) {
  .server-stat-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .server-action-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}
@media (min-width: 400px) and (max-width: 639.98px) {
  .server-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.375rem; }
  .server-stat-grid > * { padding: 0.5rem !important; }
}

/* --- Toolbars / action rows: allow wrap --- */
@media (max-width: 639.98px) {
  .toolbar-row { flex-wrap: wrap; gap: 0.5rem; }
  .toolbar-row > .ms-auto, .toolbar-row > [class*="sm:ms-auto"] { margin-left: 0 !important; }
}

/* --- Fixed widths / nowrap hotspots --- */
.w-\[300px\].server-preview-img, img.server-preview-img { width: 100% !important; max-width: 300px; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 639.98px) {
  .files-head, .backups-head { flex-wrap: wrap; gap: 0.5rem; }
  .nowrap-mobile-normal { white-space: normal !important; }
}

/* --- Modals / dialogs: fit viewport --- */
#confirm-modal .card, .modal .modal-content, .modal-content { max-width: calc(100vw - 2rem) !important; }
.confirm-dialog { width: calc(100% - 2rem); }
.confirm-dialog__actions { flex-wrap: wrap; }
.confirm-dialog__actions .confirm-dialog__btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 639.98px) {
  #confirm-modal { padding: 0.75rem; }
  .modal-content { padding: 1rem !important; width: 100% !important; }
}

/* --- Forms: stack joins/inline groups that overflow --- */
@media (max-width: 479.98px) {
  .join { max-width: 100%; }
  .card-body { padding: 1rem; }
}

/* --- Generic overflow helpers --- */
.overflow-x-auto-touch { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
table { max-width: 100%; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Auth page --- */
@media (max-width: 639.98px) {
  #mainContent .modal-content, .modal .modal-content { max-width: calc(100vw - 1.5rem) !important; }
  #mainContent > div { padding-left: 1rem !important; padding-right: 1rem !important; }
}