/* The original desktop styles remain authoritative above 1000px. */
.mobile-login, .mobile-game-controls, .scroll-hint, .mobile-list-toggle { display: none; }
.table-scroll { display: contents; }

@media screen and (max-width: 1000px) {
  #container { width: 100%; }
  #logo, #logo img { max-width: 100%; }
  #container, #content { min-width: 0; }
  #content { overflow-wrap: anywhere; }
  #content img, #content video { max-width: 100%; height: auto; }
  #content iframe { max-width: 100%; box-sizing: border-box; }
  #content input, #content select, #content textarea, #content button { box-sizing: border-box; max-width: 100%; }
  #content pre { overflow: auto; white-space: pre-wrap; }

  /* Wide comparisons keep their columns and scroll independently of the page. */
  #content .table-scroll { display: block; width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
  #content .table-scroll:focus-visible { outline: 2px solid #ffc000; outline-offset: 2px; }
  #content .scroll-hint.is-scrollable { display: block; margin: 8px 0; font-size: 0.85rem; color: #bbb; }
  #content .table-scroll > table { min-width: 100%; }
  #content #schedule { min-width: 850px; }
  #content table.assignments { min-width: 700px; }
  #content .table-scroll th, #content .table-scroll td { overflow-wrap: normal; }
  #content #schedule td:first-child, #content #schedule th:first-child,
  #content table.assignments td:first-child, #content table.assignments th:first-child,
  #content .comparison-table td:first-child, #content .comparison-table th:first-child {
    position: sticky; left: 0; z-index: 1; background: #333; min-width: 100px;
    box-shadow: 1px 0 #555;
  }
  #content #schedule .logged-in-user td:first-child { background: #422c2c; }
  #content .comparison-table { min-width: 700px; }
  #content .widget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; overflow: visible; margin-top: 16px; }
  #content .widget-grid > .dashboard-widget { float: none; width: auto; min-width: 0; margin: 0; align-self: start; }
  #content .widget-grid > .apps-widget { grid-column: 1 / -1; }
  #content .apps-widget ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #content .apps-widget li { min-width: 0; margin: 0; }
  #content .apps-widget li a { height: 100%; box-sizing: border-box; background: #444; }
  #content .dashboard-widget2 { min-width: 0; }
  #content .calendar-widget { display: flex; align-items: center; }
  #content .calendar-widget .date { flex: 0 0 70px; margin: 10px; }
  #content .calendar-widget .info { float: none; min-width: 0; width: auto; height: auto; white-space: normal; margin: 10px 10px 10px 0; }
  #content .calendar-widget .name { line-height: 1.4; }
  #content .calendar-widget .time { float: none; }
  #content .streep-section { min-width: 0; }
}

@media screen and (max-width: 700px) {
  body { -webkit-text-size-adjust: 100%; }
  #container .site-header { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; }
  #logo { position: static; display: block; width: 260px; max-width: 85%; margin: 0 auto; }
  #logo img { display: block; width: 100%; height: auto; }
  #slogan { float: none; order: 2; width: 100%; padding: 0; text-align: center; font-size: 9px; letter-spacing: 0.6px; }
  #login { float: none; height: auto; width: 100%; padding: 0; order: 3; }
  #login > form { display: none; }
  #login:has(> form) { display: none; }
  #login > span { position: static; display: flex; align-items: center; gap: 12px; font-size: 12px; }
  #login .account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #login .account-separator { display: none; }
  #login > span > a { display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-login { display: inline-flex; order: 3; align-items: center; justify-content: center; min-height: 44px; margin-left: auto; padding: 0 12px; color: #ffc000; border: 1px solid #bb8000; border-radius: 4px; text-decoration: none; font-size: 14px; }
  #menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #menu::before, #menu::after { display: none; }
  #menu > li { float: none; width: auto; height: auto; }
  #menu > li > a { height: auto; min-height: 46px; line-height: 46px; font-size: 17px; box-sizing: border-box; border: 1px solid #720000; }
  #menu a[aria-current="page"] { background: #660101; box-shadow: inset 0 -2px #ffc000; }
  #content { padding: 20px 16px; font-size: 16px; line-height: 1.5; }
  #content h1 { font-size: 1.65rem; line-height: 1.25; }
  #content h2 { font-size: 1.3rem; line-height: 1.35; }
  #content h3 { font-size: 1.1rem; }
  #content > p:first-child { margin-top: 0; }
  #content .page-actions, #content p.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  #content .page-actions a, #content p.nav a { display: inline-flex; align-items: center; min-height: 44px; }
  #content .page-actions .separator, #content p.nav .separator { display: none; }
  #content .page-actions { font-size: 14px; }
  #content .page-actions a { padding: 0 8px; border: 1px solid #555; border-radius: 4px; }
  #content a:focus-visible, #menu a:focus-visible, #login a:focus-visible,
  #content input:focus-visible, #content select:focus-visible, #content textarea:focus-visible,
  #content button:focus-visible { outline: 2px solid #ffc000; outline-offset: 2px; }
  #content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #content select, #content button { min-height: 44px; font-size: 16px; padding: 8px 10px; }
  #content input[type="text"], #content input[type="password"], #content input[type="email"],
  #content input[type="number"], #content select, #content textarea { width: 100%; }
  #content textarea { font-size: 16px; min-height: 120px; resize: vertical; }
  #content input[type="submit"], #content button { white-space: normal; cursor: pointer; }
  #content input[type="checkbox"], #content input[type="radio"] { width: 22px; height: 22px; vertical-align: middle; accent-color: #bb8000; }
  #content label { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-size: 16px; }
  #content form { max-width: 100%; }
  #content .form-table, #content .form-table > tbody, #content .form-table > tbody > tr,
  #content .form-table > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; }
  #content .form-table > tbody > tr { margin-bottom: 10px; }
  #content .form-table > tbody > tr > td { padding: 3px 0; }
  #content .form-table > tbody > tr > td:empty { display: none; }
  #content .form-table input[type="submit"] { margin-top: 8px; }
  #content .eetlijst-widget, #content .dienstlijst-widget, #content .declaratie-widget,
  #content .recept-widget { float: none; width: 100% !important; max-width: 100% !important; margin: 18px 0; box-sizing: border-box; }
  #content .dashboard-widget-content { box-sizing: border-box; max-width: 100%; }
  #content .eetlijst-widget > h2, #content .dienstlijst-widget > h2,
  #content .declaratie-widget > h2, #content .recept-widget > h2,
  #content .dienstlijst-widget > .dashboard-widget-content:not(.with_padding) { padding: 12px; }
  #content .widget-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #content .widget-grid > .apps-widget { grid-column: auto; padding: 0; }
  #content .apps-widget ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content .apps-widget li a { display: flex !important; align-items: center; min-height: 54px; font-size: 14px; padding: 10px !important; }
  #content .apps-widget li img { flex: 0 0 20px; width: 20px; object-fit: contain; }
  #content .apps-widget a[href="/boodschappen"] { flex-wrap: wrap; }
  #content .apps-widget .shopping-label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  #content .apps-widget ul.apps-collapsed .secondary-app { display: none; }
  #content .mobile-list-toggle { display: block; width: 100%; margin: 12px 0; color: #ffc000; background: #444; border: 1px solid #777; border-radius: 4px; }
  #content #cooking_moments.mobile-past-collapsed tr.past-moment { display: none; }
  #content .fussie-top { flex-wrap: wrap; }
  #content .fussie-info { font-size: 13px; }
  #content .fussie-controls a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
  #content .widget-grid .dashboard-widget-content { margin: 0; width: 100%; }
  #content .calendar-widget .date { height: auto; min-height: 80px; padding-bottom: 8px; }
  #content .calendar-widget .day-of-month { line-height: 1; }
  #content .calendar-widget .month { font-size: 12px; }
  #content .widget-grid .dashboard-widget-content a { display: inline-flex; align-items: center; min-height: 44px; }
  #content #signedin, #content #deelnemers { width: 100%; }
  #content #signedin a, #content #deelnemers a, #content #schedule a { display: inline-flex; min-height: 44px; align-items: center; }
  #content #autosignin { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  #content #autosignin .autosignin-label { flex-basis: 100%; }
  #content #autosignin label { flex: 1 0 40%; padding: 8px; background: #3c3c3c; border: 1px solid #555; border-radius: 4px; box-sizing: border-box; }

  /* Readable entries, retaining the existing table nodes and their action handlers. */
  #content table.mobile-cards, #content table.mobile-cards > tbody { display: block; width: 100%; }
  #content .mobile-cards > thead, #content .mobile-cards > tbody > tr.card-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #content .mobile-cards > tbody > tr:not(.card-heading) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; margin: 12px 0; padding: 12px; background: #3c3c3c; border: 1px solid #555; border-radius: 8px; }
  #content .mobile-cards > tbody > tr > td { display: block; width: auto; min-width: 0; text-align: left; padding: 2px 0; }
  #content .mobile-cards > tbody > tr > td::before { content: attr(data-label); display: block; font-size: 12px; color: #aaa; font-weight: normal; }
  #content .mobile-cards > tbody > tr > td:first-child { grid-column: 1 / -1; color: #ffc000; font-size: 1.05rem; }
  #content .mobile-cards > tbody > tr > td:first-child::before { display: none; }
  #content .mobile-cards a { display: inline-flex; align-items: center; min-height: 44px; }
  #content #cooking_moments.mobile-cards > tbody > tr.today { background: #422c2c; border-color: #bb8000; }
  #content #cooking_moments.mobile-cards > tbody > tr.empty { background: #383838; }
  #content #cooking_moments.mobile-cards td:nth-child(2) { grid-row: 2; }
  #content #cooking_moments.mobile-cards td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  #content #cooking_moments.mobile-cards td:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
  #content #cooking_moments.mobile-cards td:last-child a, #content #boodschappen.mobile-cards td:last-child a { padding: 0 12px; background: #300; border: 1px solid #bb8000; border-radius: 4px; }
  #content #cooking_moments.mobile-cards td:last-child::before,
  #content #boodschappen.mobile-cards td:last-child::before { display: none; }
  #content #boodschappen.mobile-cards td:last-child { justify-self: end; align-self: end; }
  #content .threads.mobile-cards td:last-child { grid-column: 1 / -1; }
  #content .streep-history-table.mobile-cards > tbody > tr > td { background: transparent; }
  #content .streep-history-table.mobile-cards > tbody > tr > td:last-child { grid-column: 1 / -1; }
  #content .streep-sections { flex-direction: column; gap: 16px; }
  #content .streep-section, #content .streep-snapshots, #content .streep-history { padding: 12px; min-width: 0; }
  #content .streep-table th { white-space: normal; font-size: 13px; }
  #content .streep-table td { font-size: 14px; }
  #content .period-label { display: block; margin: 4px 0 10px; }
  #content .snapshot-row { flex-wrap: wrap; gap: 8px; }
  #content .snapshot-date { min-width: 100px; }
  #content .streep-btn-download { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }

  /* Calendar entries open into a vertical detail panel. */
  #content #events, #content #events > tbody { display: block; width: 100%; }
  #content #events .table-header { display: none; }
  #content #events tr.main-info { display: block; margin-top: 12px; padding: 12px; border: 1px solid #555; border-radius: 6px; cursor: pointer; }
  #content #events tr.main-info td { display: block; width: auto !important; padding: 0; }
  #content #events tr.main-info td:first-child { color: #ffc000; font-weight: bold; }
  #content #events tr.main-info td:last-child::after { content: 'Details bekijken +'; display: block; margin-top: 8px; color: #bb8000; font-size: 14px; }
  #content #events tr.main-info.open td:last-child::after { content: 'Details sluiten −'; }
  #content #events tr.main-info.open + tr.extra-info { display: block; padding: 12px; border: 1px solid #555; border-top: 0; text-align: left; line-height: 1.5; }
  #content #events tr.extra-info td { display: block; width: auto !important; padding: 8px 0; }
  #content #events tr.extra-info a { display: inline-flex; min-height: 44px; align-items: center; }
  body[data-page="calendar"] #content form span { width: auto; margin-right: 8px; }
  body[data-page="calendar"] #content form input[name$="time"] { width: 100px; }
  body[data-page="calendar"] #content form input[name$="date"] { width: calc(100% - 60px); }
  body[data-page="calendar"] #content form textarea { width: 100% !important; }
  body[data-page="calendar"] #content .display-none { display: none; }
  body[data-page="quoteboek"] #content form { margin: 20px 0; }
  #content blockquote { margin: 8px 0 24px; padding-left: 16px; border-left: 3px solid #900; text-align: left; }
  #content .post-info { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px; }
  #content .post-info .time { font-size: 12px; }
  #content .post-content { margin: 0; padding: 12px; min-height: 72px; }
  #content .avatar { position: static; margin: 0 12px 8px 0; width: 44px; height: 44px; }
  #content .avatar img { width: 44px; height: 44px; object-fit: cover; }
  body[data-page="home"] #content p { text-align: left !important; }
  body[data-page="home"] #content img { float: none !important; display: block; width: 100% !important; margin: 0 0 20px !important; box-sizing: border-box; }
  #content .bewoners-container { padding: 0; gap: 16px; }
  #content .bewoner-card { box-sizing: border-box; max-width: 100%; padding: 20px 16px; }
  #content .bewoner-info { min-width: 0; max-width: 100%; }
  #content .thumb { width: calc(50% - 12px); height: auto; aspect-ratio: 4 / 3; margin: 6px; background-size: cover; background-position: center; }
  #content .thumb .title a { display: inline-flex; align-items: center; min-height: 44px; min-width: 36px; }
  #content .mobile-game-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }
  #content .mobile-game-controls button { min-width: 44px; background: #444; color: #ffc000; border: 1px solid #777; border-radius: 4px; touch-action: manipulation; }
  #content .mobile-game-controls button[aria-pressed="true"] { background: #600; border-color: #ffc000; }
  #content .mobile-game-controls p { flex-basis: 100%; margin: 0; font-size: 14px; }
}