is a flex item of the flex , and flex items default to * `min-width: auto` — they refuse to shrink below their content. So a wide * table pushed

past the window, and because also sets * `overflow-x: hidden` the excess was clipped rather than scrolled: the Remarks * and Actions columns were unreachable, with no scrollbar to suggest otherwise. * * Allowing it to shrink hands the horizontal scrolling to .table-scroll, which * is the only element that should own it. */ main { min-width: 0; /* * Clamped, not just shrinkable. is a column flex container, so

a UA default of `min-width: min-content`, so a * fieldset expands to fit its widest child rather than constraining it. Every * table here lives in one, so .table-scroll grew to the table's full width, its * overflow-x never engaged, and the page itself ran wider than the window — * pushing Remarks and Actions off-screen with no scrollbar to reach them. * * Resetting it lets the fieldset take its parent's width and hands the * horizontal scrolling back to .table-scroll, where it belongs. */ fieldset { min-width: 0; } /* *

is a flex item of the flex , and flex items default to * `min-width: auto` — they refuse to shrink below their content. So a wide * table pushed

* stretches on the cross axis — but a table wider than the window still drove * its used width past , and `overflow-x: hidden` on then clipped * the overflow instead of scrolling it. Pinning the width hands the sideways * scrolling to .table-scroll, the only element that should own it. */ width: 100%; max-width: 100%; } .formset-table { width: 100%; /* * Nine columns need room. Below this they crush rather than compress, so the * table keeps its width and .table-scroll takes over horizontally — a * sideways scroll is easier to read than a column two characters wide. */ min-width: 900px; border-collapse: collapse; margin-top: 30px; background-color: #f9f9f9; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .formset-table thead { background-color: #d0d0d0; } .formset-table thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 2; font-size: 14px; font-weight: bold; color: #222; white-space: nowrap; } .formset-table th, .formset-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid #ccc; font-size: 14px; /* * break-word, not anywhere. `anywhere` lets a column shrink below the width * of its longest WORD, so nine columns in a narrow container turned * "Salzburg" into "Salzbu/rg" and restaurant names into three lines. * `break-word` still rescues a long unbroken string (an email, a URL) but * computes the column's minimum from whole words, so the table asks for the * width it needs and scrolls sideways instead of mangling the text. */ overflow-wrap: break-word; word-break: normal; } .formset-table tbody td { font-size: 13px; color: #333; } .formset-table tbody tr:hover { background-color: #f0f0f0; } .formset-table th { color: #444; font-weight: 600; } .formset-table td a { text-decoration: none; } /* Center the Actions column header and values (your existing rule) */ .formset-table th:last-child, .formset-table td:last-child { text-align: center; } /* Scroll container for long tables */ /* * Tables size to their content, up to a share of the viewport. * * Changed from a flat max-height:300px, which is the one deliberate deviation * from the original stylesheet. 300px is roughly three rows once padding and * wrapping are counted, so a six-service day — the whole point of the day * filter — arrived as a three-row window with a scrollbar, and a nested scroll * area is a poor place to read a short list: the wheel gets captured, Ctrl+F * skips what is out of view, and it prints badly. * * A viewport-relative cap means short lists (a filtered day) show in full with * no inner scrolling at all, while long ones (134 restaurants) still stop short * of burying the buttons beneath them. When it does scroll, the sticky header * above keeps the columns labelled. */ .table-scroll { max-height: 70vh; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-soft); } /* Small screens: leave room for the address bar and the form below. */ @media (max-height: 700px) { .table-scroll { max-height: 60vh; } } /* ============================= */ /* TABLE SEARCH ROW */ /* ============================= */ .table-search { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; overflow-x: auto; } .table-search input[type="text"], .table-search button, .table-search a.button { flex: 0 1 auto; min-width: 140px; } /* ============================= */ /* FORMS: TABLE LAYOUT (IF USED) */ /* ============================= */ .form-table { width: 100%; border-collapse: separate; border-spacing: 20px 12px; } .form-table td { vertical-align: top; width: 50%; } /* ============================= */ /* ACTION BUTTONS INSIDE TABLE */ /* ============================= */ .actions-cell { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: nowrap; /* keep on one line */ } /* Make all action buttons align perfectly */ .actions-cell .action-btn { height: 32px; min-width: 92px; /* same width for Edit/Export/Export2File */ padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.25); } .actions-cell .action-btn:hover { transform: translateY(-1px); } .actions-cell .action-btn:focus { outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 2px; } /* ============================= */ /* MISC / SPECIFIC IDS */ /* ============================= */ #id_restaurant { width: 200px; } /* Base icon button - TRANSPARENT */ .button-icon, button.button-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: transparent; /* ✅ key change */ color: #444; cursor: pointer; text-decoration: none; font-size: 16px; transition: all 0.2s ease; appearance: none; -webkit-appearance: none; } /* Hover effect (subtle background appears) */ .button-icon:hover, button.button-icon:hover { background: rgba(0, 0, 0, 0.05); } /* ✏️ Edit icon */ .button-icon.edit { color: #2563eb; /* blue */ } .button-icon.edit:hover { background: rgba(37, 99, 235, 0.1); } /* 🗑 Delete icon */ .button-icon-danger { color: #dc2626; /* red */ } .button-icon-danger:hover { background: rgba(220, 38, 38, 0.1); } /* remove shadow (optional, cleaner look) */ .button-icon { box-shadow: none; } .button-icon:hover { transform: scale(1.1); } /* FINAL override for transparent action icons */ a.button-icon, button.button-icon, button.button-icon.button-icon-danger, a.button-icon.button-icon-danger, a.button-icon.edit { background: transparent !important; border: none !important; box-shadow: none !important; } /* icon colors */ a.button-icon.edit { color: #2563eb; } button.button-icon.button-icon-danger { color: #dc2626; } /* hover */ a.button-icon.edit:hover, button.button-icon.button-icon-danger:hover, a.button-icon:hover, button.button-icon:hover { background: rgba(0, 0, 0, 0.05) !important; } a.button-icon.edit:hover { background: rgba(37, 99, 235, 0.10) !important; } button.button-icon.button-icon-danger:hover { background: rgba(220, 38, 38, 0.10) !important; } /* Search */ .button-icon.search { color: #2563eb; } .button-icon.search:hover { background: rgba(37, 99, 235, 0.1); } /* Clear */ .button-icon.clear { display: inline-flex; align-items: center; gap: 6px; width: auto; /* ✅ allow text */ padding: 6px 12px; /* ✅ button feel */ border-radius: 6px; text-decoration: none; font-size: 14px; background: transparent; color: #eb2546; /* red */ } .button-icon.clear:hover { background: rgba(0, 0, 0, 0.05); } /* Save */ .button-icon.save { color: #16a34a; /* green */ display: inline-flex; align-items: center; gap: 6px; width: auto; /* ✅ allow text */ padding: 6px 12px; /* ✅ button feel */ border-radius: 6px; text-decoration: none; font-size: 14px; background: transparent; } .button-icon.save:hover { background: rgba(22, 163, 74, 0.1); } /* Add */ .button-icon.add { display: inline-flex; align-items: center; gap: 6px; width: auto; /* ✅ allow text */ padding: 6px 12px; /* ✅ button feel */ border-radius: 6px; text-decoration: none; font-size: 14px; background: transparent; color: #2563eb; /* blue */ } .button-icon.add:hover { background: rgba(37, 99, 235, 0.1); } /* List button */ .button-icon.list { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 6px 12px; color: #374151; /* neutral gray */ background: transparent; border-radius: 6px; text-decoration: none; } .button-icon.list:hover { background: rgba(0, 0, 0, 0.05); } /* ============================= */ /* DASHBOARD */ /* ============================= */ /* * The only additions to the original stylesheet beyond the table fixes above. * Colours are drawn from the existing palette so the page still reads as the * same application. */ .dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 auto 22px; max-width: 1100px; } .dash-head__title { text-align: left; margin: 0; } .dash-head__sub { margin: 4px 0 0; color: #666; font-size: 14px; } /* One filled button on the page: the action people came to take. */ .button--primary { background: #2f6f57; border-color: #2f6f57; color: #fff; font-weight: 600; } .button--primary:hover { background: #275c48; border-color: #275c48; } .dash-switch { margin: 0 0 12px; font-size: 13px; } .dash-switch a { color: #2f6f57; font-weight: 600; } .trip-ref a { color: inherit; text-decoration: none; font-weight: 600; } .trip-ref a:hover { color: #2f6f57; text-decoration: underline; } .trip-when { color: #777; font-size: 12px; margin-top: 2px; } .trip-go a { color: #999; text-decoration: none; font-size: 16px; } .formset-table tbody tr:hover { background: #f0f2f0; } .formset-table tbody tr:hover .trip-go a { color: #2f6f57; } /* Status is encoded in shape as well as number, so it reads at a glance. */ .tag { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; } .tag--ok { background: #e3efe9; color: #2f6f57; } .tag--warn { background: #f8ecd8; color: #8a5410; } /* departing soon, still open */ .tag--quiet { background: #ececec; color: #6d6d6d; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .cat-card { border: 1px solid var(--border-soft, #ddd); border-radius: 8px; padding: 14px 15px; background: #fff; } .cat-card__n { font-size: 26px; font-weight: 700; line-height: 1; color: #333; } .cat-card__label { font-size: 13px; color: #666; margin-top: 3px; } .cat-card__acts { margin-top: 10px; display: flex; gap: 12px; font-size: 12.5px; } .cat-card__acts a { color: #2f6f57; text-decoration: none; font-weight: 600; } .cat-card__acts a:hover { text-decoration: underline; } /* ============================= */ /* UPLOAD */ /* ============================= */ .upload { max-width: 720px; } .drop { border: 2px dashed var(--border-soft, #cfcfcf); border-radius: 10px; padding: 26px 20px; text-align: center; background: #fbfbfb; transition: border-color .12s ease, background-color .12s ease; } /* Dragging over is the one moment the zone should feel live. */ .drop.is-over { border-color: #2f6f57; background: #f0f6f3; } .drop__lead { margin: 0; font-size: 15px; color: #444; } .drop__or { margin: 6px 0; font-size: 12px; color: #999; } .drop__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .drop__actions .button { cursor: pointer; } .drop__hint { margin: 12px 0 0; font-size: 12px; color: #8a8a8a; } /* Hidden from view, still focusable — so the form works without the script. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .upload__chosen { margin-top: 14px; padding: 11px 13px; border: 1px solid var(--border-soft, #ddd); border-radius: 8px; background: #fff; font-size: 13px; } .upload__chosen strong { color: #333; } .upload__names { color: #666; margin-top: 4px; word-break: break-word; } .upload__skip { color: #8a5410; margin-top: 4px; } /* * A `display` declaration outranks the hidden attribute's UA `display: none`, * so these need to opt back out explicitly or they show while empty. */ .upload__chosen[hidden], .upload__conflict[hidden] { display: none; } .upload__conflict { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; } .upload__conflict-q { color: #555; } .radio-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; color: #444; cursor: pointer; margin: 0; } .radio-inline input[type="radio"] { width: auto; flex: none; margin: 0; padding: 0; } #upload_btn { margin-top: 14px; } #upload_btn[disabled] { opacity: .5; cursor: not-allowed; } /* * Upload options: radios read as sentences. * * .form-group sets `input { width: 100% }`, which stretches a radio across the * row and strands it away from its own label. These override that so the * control sits immediately before the words it belongs to. */ .radio-line { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; font-size: 13px; margin: 5px 0; color: #444; cursor: pointer; } .radio-line input[type="radio"] { width: auto; flex: none; margin: 3px 0 0; padding: 0; } /* ============================= */ /* DUPLICATE */ /* ============================= */ /* * Copying a tour for new dates. Same palette as the dashboard, so the two pages * read as one application. */ .trip-dup { color: #999; text-decoration: none; font-size: 16px; margin-right: 10px; } .formset-table tbody tr:hover .trip-dup { color: #2f6f57; } .dup { max-width: 820px; } .dup__source { margin: 0 0 18px; font-size: 13px; color: #666; line-height: 1.7; } .dup__source strong { color: #333; font-size: 15px; } .dup__hint { display: block; margin-top: 5px; font-size: 12px; color: #777; } /* Where the tour lands — shown before a hundred rows exist, not after. */ .dup__span { margin: 4px 0 20px; padding: 11px 13px; border-radius: 8px; background: #e3efe9; color: #2f6f57; font-size: 13.5px; font-weight: 600; } .dup__agent { margin-bottom: 20px; } .dup__choice { display: flex; flex-direction: column; gap: 9px; } /* * Two overrides, both from .form-group: `label { display: block }` would stack * the radio above its own words, and `input { width: 100% }` would stretch it * across the row. Selector carries two classes so it outranks `.form-group label`. */ .dup__agent .dup__radio { display: flex; align-items: center; gap: 9px; font-weight: normal; font-size: 13.5px; color: #333; cursor: pointer; margin: 0; } .dup__radio input[type="radio"] { width: auto; flex: none; margin: 0; padding: 0; } .dup__said { color: #777; font-size: 12.5px; } .dup__other { margin-left: 26px; } .dup__other[hidden] { display: none; } /* `hidden` alone loses to display */ .dup__other select { max-width: 320px; } .dup__warn { margin: 10px 0 0; padding: 8px 11px; border-radius: 7px; background: #f8ecd8; color: #8a5410; font-size: 13px; } .dup__warn[hidden] { display: none; } .dup__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; border-top: 1px solid #e2e2e2; padding-top: 16px; margin: 4px 0 18px; } .dup__colhead { margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .dup__colhead--in { color: #2f6f57; } .dup__colhead--out { color: #8a5410; } .dup__cols ul { margin: 0; padding-left: 18px; font-size: 13px; color: #666; } .dup__cols li { margin-bottom: 3px; } /* Where a copy lands: green, since it reports a success, not a fault. */ .notice { margin: 0 0 14px; padding: 10px 13px; border-left: 3px solid #2f6f57; border-radius: 0 7px 7px 0; background: #e3efe9; color: #2f6f57; font-size: 13.5px; }