/* Strong8K admin — responsive & cross-browser enhancement layer.
   Loads AFTER admin-theme.css. Pure CSS; remove the <link> to revert.
   Goal: one dashboard that works on phones, tablets, desktops and TVs,
   across Chrome/Edge/Firefox/Safari/Samsung, incl. touch + notched screens. */

/* ---- Foundation / cross-browser normalisation ---------------------------- */
html {
  -webkit-text-size-adjust: 100%;   /* iOS: stop rotate-to-landscape text inflation */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: rgba(239,191,74,.35) rgba(255,255,255,.04);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;                 /* never allow a sideways body scroll */
  overscroll-behavior-y: contain;     /* kill pull-to-refresh bounce inside the app */
  min-height: 100vh;
  min-height: 100dvh;                 /* dynamic viewport: correct with mobile URL bars */
}
*, *::before, *::after { box-sizing: border-box; }

/* Respect notches / rounded corners on phones & foldables. */
.RaLayout-appFrame, .MuiAppBar-root > .MuiToolbar-root {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Fluid base type so everything scales from small phones to 4K TVs. */
:root { font-size: clamp(15px, 0.9rem + 0.15vw, 17px); }

/* Comfortable touch targets on touch/coarse pointers only (keeps desktop tight). */
@media (pointer: coarse) {
  .MuiButtonBase-root, .MuiIconButton-root, .RaMenuItemLink-root, .MuiMenuItem-root,
  .MuiTab-root, .MuiChip-root, .MuiCheckbox-root, .MuiSwitch-root {
    min-height: 44px;
  }
  .MuiIconButton-root { min-width: 44px; }
}

/* ---- Tables: the #1 mobile pain point in react-admin ---------------------
   Let every datagrid scroll horizontally inside its own card instead of
   blowing out the page width. Momentum-scroll on iOS. */
.RaList-content, .RaDatagrid-root, .MuiTableContainer-root,
.RaDatagrid-tableWrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.RaDatagrid-table, .MuiTable-root { min-width: max-content; }

/* ---- Small phones (<= 600px) --------------------------------------------- */
@media (max-width: 600px) {
  .RaLayout-content, .RaList-main, .RaCreate-main, .RaEdit-main, .RaShow-main {
    padding: 8px !important;
    margin: 0 !important;
  }
  .MuiPaper-root { border-radius: 12px !important; }
  .MuiCard-root, .RaList-content { border-radius: 12px !important; }

  /* Denser tables so more columns fit before scrolling. */
  .MuiTableCell-root { padding: 8px 10px !important; font-size: .92rem !important; }
  .MuiTableCell-head { font-size: .8rem !important; }

  /* Toolbars, filters and pagination wrap instead of overflowing. */
  .RaTopToolbar-root, .RaFilterForm-root, .MuiTablePagination-toolbar,
  .RaListToolbar-toolbar, .MuiToolbar-root {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  .RaFilterForm-root .MuiFormControl-root { width: 100%; }

  /* Forms go single-column and full width. */
  .RaSimpleForm-root .MuiFormControl-root,
  .RaSimpleFormIterator-form .MuiFormControl-root,
  .MuiCardContent-root > .ra-input { width: 100% !important; }
  .MuiFormControl-root.MuiTextField-root { min-width: 0 !important; }

  /* Dialogs use the full screen on phones. */
  .MuiDialog-paper {
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  /* Page title never pushes the appbar actions off-screen. */
  .MuiAppBar-root .RaAppBar-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---- Tablets (601–1024px) ------------------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .RaLayout-content { padding: 12px !important; }
}

/* ---- Full-width layout: every section spans 100% of the content area ------
   No centered max-width cap on any breakpoint — the dashboard and all
   react-admin list/edit/create/show sections use the full available width. */
.RaLayout-content,
.RaList-main, .RaEdit-main, .RaCreate-main, .RaShow-main {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
}
.RaList-content, .RaEdit-main > .MuiCard-root, .RaCreate-main > .MuiCard-root,
.RaShow-main > .MuiCard-root, .RaList-main > .MuiCard-root {
  width: 100% !important;
  max-width: none !important;
}
/* Let datagrids use the whole width instead of shrinking to content. */
.RaDatagrid-table, .MuiTable-root { width: 100% !important; }

/* ---- Inputs: kill the iOS "zoom on focus" (needs >=16px font) ------------- */
.MuiInputBase-input, .MuiInputBase-input.MuiOutlinedInput-input,
.MuiInputBase-input.MuiFilledInput-input, select, textarea {
  font-size: max(16px, 1rem);
}

/* ---- Motion & accessibility ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
:focus-visible { outline: 2px solid var(--s8k-gold, #efbf4a); outline-offset: 2px; }

/* ---- Install chip: keep clear of the react-admin FAB/appbar on mobile ---- */
#s8k-install-chip { bottom: max(20px, env(safe-area-inset-bottom)) !important; }

/* ---- Devices list: fit + trim columns on FIRST paint (no old-design flash) --
   These live in the head stylesheet (loaded before the app bundle) and are
   scoped with :has() to the devices datagrid — device_key (MAC) is a
   devices-only column — so they apply the instant the table renders, before the
   overlay JS (devices-list.js) runs. That JS still adds the row Delete button
   and the trial-only column reduction. */
.RaDatagrid-table:has(th.column-device_key) {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: auto;
}
.RaDatagrid-tableWrapper:has(th.column-device_key),
.MuiTableContainer-root:has(th.column-device_key),
.RaList-content:has(th.column-device_key) {
  overflow-x: hidden !important;
}
.RaDatagrid-table:has(th.column-device_key) th,
.RaDatagrid-table:has(th.column-device_key) td {
  padding: 6px 8px !important;
  font-size: 12px !important;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.RaDatagrid-table:has(th.column-device_key) .MuiTableCell-head { font-size: 11px !important; }
/* Low-value columns removed from the devices list (data stays in the edit form). */
.RaDatagrid-table:has(th.column-device_key) th.column-name,
.RaDatagrid-table:has(th.column-device_key) td.column-name,
.RaDatagrid-table:has(th.column-device_key) th.column-username,
.RaDatagrid-table:has(th.column-device_key) td.column-username,
.RaDatagrid-table:has(th.column-device_key) th.column-m3u_url,
.RaDatagrid-table:has(th.column-device_key) td.column-m3u_url,
.RaDatagrid-table:has(th.column-device_key) th.column-ip_address,
.RaDatagrid-table:has(th.column-device_key) td.column-ip_address {
  display: none !important;
}