* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
background: #fff;
color: #222;
font-size: 14px;
/* Phase 5B: prevent any single element (wide table, banner with min-width,
* etc.) from triggering page-level horizontal scroll on phones. Wide tables
* still scroll inside their own .overflow-x:auto containers.
*
* Phase 5W: use `overflow-x: clip` instead of `hidden`. `hidden` creates
* an implicit scroll container which BREAKS position:sticky on every
* descendant — including the headers we just made sticky in Phase 5V.
* `clip` simply clips overflowing content WITHOUT becoming a scroll
* container, so position:sticky resolves against the viewport as
* intended. Falls back to `hidden` on browsers that don't support clip. */
overflow-x: hidden;
overflow-x: clip;
-webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
.screen { min-height: 100vh; }
/* ===== Phase 5V: Sticky headers across all tiers =====
* Keeps the user greeting / logout / nav controls always visible while
* scrolling long tables. Applies to:
* - .app-header (HQ / Agency / Admin)
* - .me-header (Staff /me page)
* - .punch-header (timeclock page)
* Each header MUST have a non-transparent background so content
* underneath doesn't bleed through while scrolling.
*/
.app-header,
.me-header,
.punch-header {
position: sticky;
top: 0;
z-index: 30;
background: #fff;
backdrop-filter: saturate(180%) blur(4px);
-webkit-backdrop-filter: saturate(180%) blur(4px);
}
/* Phase 5Y: when a scrollIntoView()/anchor lands on a section, leave
* enough space above so the sticky header doesn't cover the section
* heading. The browser respects scroll-margin-top on the target element
* during programmatic scrolling. Also applies to document-level anchor
* jumps so deep-linking (e.g. /me#payslip) lands properly. */
html { scroll-padding-top: 80px; }
.me-history-section,
.me-payslip-section,
.me-expense-section,
.admin-section,
.admin-page {
scroll-margin-top: 80px;
}
@media (max-width: 640px) {
html { scroll-padding-top: 70px; }
.me-history-section,
.me-payslip-section,
.me-expense-section,
.admin-section,
.admin-page {
scroll-margin-top: 70px;
}
}
/* Print/PDF and screenshot exports should NOT have a sticky header
* (it'd overlap the printable area on every page break). */
@media print {
.app-header, .me-header, .punch-header { position: static !important; }
}
/* ===== Phase 5H: Fuloco brand mark =====
* Reusable logo image classes. Always references /logo.svg so updating
* the file replaces the logo everywhere on the site instantly. Keep the
* SVG file at public/logo.svg.
*/
.brand-logo {
display: inline-block;
height: 36px;
width: auto;
vertical-align: middle;
user-select: none;
-webkit-user-drag: none;
}
.brand-logo-sm { height: 24px; }
.brand-logo-lg { height: 56px; }
.brand-logo-xl { height: 80px; }
/* Replace any text-based "Fuloco" heading with the logo. Used on the
* login screens of all three tiers (business / agency / HQ).
* Phase 5AD: bumped from 60px → 96px so the real logo is comfortably
* visible at a glance. object-fit: contain prevents stretching even
* if the source image has different aspect ratio than expected. */
.auth-card .auth-title-logo {
display: block;
margin: 0 auto 12px;
height: 96px;
max-width: 80%;
object-fit: contain;
}
@media (max-width: 640px) {
.auth-card .auth-title-logo { height: 78px; }
}
/* Sidebar brand area: small logo + (optional) "本部" / "代理店" label. */
.sidebar-brand-logo {
height: 22px;
width: auto;
vertical-align: middle;
filter: brightness(0) invert(1); /* invert to white on dark sidebar */
}
/* ---------- Mobile table overflow (Phase 4H/4I + 5B + 5D) ----------
* Strategy: PC keeps natural table layout (no changes). On mobile we
* convert wide tables to display:block + overflow-x:auto so they scroll
* INSIDE the card instead of forcing the whole page wider than the
* viewport. Combined with html/body overflow-x:hidden, the page itself
* never scrolls horizontally on phones.
*
* Classes covered (mobile only):
* .hq-table, .ag-table, .payroll-table, .journal-table, .punch-table,
* .staff-settings-table, .special-table, .loco-table, .sales-table,
* .invoice-list-table, .inv-items-table, .hd-table, .summary-table
*
* Plus a JS safety net in /mobile-table-wrap.js wraps EVERY
in
* a .mobile-scroll div so even tables without a recognised class get
* scroll containers.
*/
@media (max-width: 900px) {
.hq-table, .ag-table,
.payroll-table, .journal-table, .punch-table,
.staff-settings-table, .special-table,
.loco-table, .sales-table,
.invoice-list-table, .inv-items-table,
.hd-table, .summary-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.hq-table { min-width: 720px; }
.ag-table { min-width: 720px; }
.payroll-table, .journal-table, .punch-table,
.loco-table, .sales-table { min-width: 640px; }
.invoice-list-table, .inv-items-table { min-width: 600px; }
.hd-table { min-width: 480px; }
}
/* Phase 5D: JS-injected wrapper for any remaining
element.
* The wrapper is a block-level div that constrains width to the
* available container and provides horizontal scroll on overflow.
* PC display is unaffected because we only show scroll bars when
* content actually overflows. */
.mobile-scroll {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Visual cue on mobile: gradient shadow on the right edge that
* signals "more content is hidden, swipe to see it". Only shown
* when the wrapper is actually scrollable (handled by JS). */
position: relative;
}
.mobile-scroll > table {
/* Re-enforce default table behaviour inside the wrapper so column
* widths size correctly and don't collapse. */
border-collapse: inherit;
}
/* Scroll-hint shadow only visible on mobile-sized viewports. The
* right-edge gradient fades out when the user scrolls all the way
* to the right (via .mobile-scroll.scrolled-end class set by JS). */
@media (max-width: 900px) {
.mobile-scroll.is-scrollable::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 100%;
pointer-events: none;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(15,23,42,0.18) 100%);
transition: opacity 0.2s;
opacity: 1;
}
.mobile-scroll.is-scrollable.scrolled-end::after {
opacity: 0;
}
.mobile-scroll.is-scrollable {
/* Force a visible (chunky) scrollbar on iOS Safari mobile so users
* realise the table scrolls. By default it auto-hides. */
scrollbar-width: thin;
}
.mobile-scroll.is-scrollable::-webkit-scrollbar {
height: 6px;
}
.mobile-scroll.is-scrollable::-webkit-scrollbar-thumb {
background: rgba(15,23,42,0.35);
border-radius: 3px;
}
/* Small hint label above scrollable tables. Only shown on mobile
* and only when the table actually scrolls. */
.mobile-scroll.is-scrollable::before {
content: "← 左右にスワイプして全列を表示 →";
display: block;
padding: 6px 10px;
font-size: 11px;
color: #64748b;
background: #f1f5f9;
border-radius: 4px;
margin-bottom: 6px;
text-align: center;
font-family: inherit;
}
}
/* ===== Phase 5F: Mobile card layout =====
*
* On phones (<= 640px) we convert every wrapped table into a stacked
* "card list": each row becomes a card, each cell becomes a
* [label]: [value]
* pair (the label comes from the matching
via data-label,
* injected by mobile-table-wrap.js). This eliminates the need for
* horizontal scrolling entirely on mobile.
*
* PC (>900px) and tablets (641-900px) keep the normal table layout
* with the overflow-x:auto fallback from Phase 4H/4I/5D.
*
* Conditions for the card layout to apply:
* - viewport <= 640px
* - the
is inside .mobile-scroll (i.e. wrapped by the JS
* safety net, which is loaded on portal pages)
*/
@media (max-width: 640px) {
.mobile-scroll {
overflow-x: visible !important;
}
.mobile-scroll > table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
border-collapse: separate;
border-spacing: 0;
background: transparent !important;
}
.mobile-scroll > table > thead {
display: none !important;
}
/* Phase 5K: horizontal label:value rows, single column per card.
* - Each
is one ROW inside the card
* - Label sits on the LEFT (75px slot), value on the RIGHT
* - Tight vertical spacing so a whole record fits on one screen
* - PC layout (>640px) is unaffected — these rules live inside
* @media (max-width: 640px) */
.mobile-scroll > table > tbody {
display: block;
}
.mobile-scroll > table > tbody > tr {
display: block;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 8px 12px;
margin: 0 0 8px 0;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
width: auto !important;
max-width: 100% !important;
}
/* Each labeled cell becomes one horizontal "label : value" row. */
.mobile-scroll > table > tbody > tr > td[data-label]:not([data-label=""]) {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 10px;
border: none !important;
padding: 2px 0 !important;
margin: 0 !important;
text-align: left !important;
background: transparent !important;
word-break: break-word;
min-width: 0;
font-size: 13.5px;
line-height: 1.55;
}
.mobile-scroll > table > tbody > tr > td[data-label]:not([data-label=""])::before {
content: attr(data-label);
color: #64748b;
font-size: 12px;
font-weight: 500;
flex: 0 0 75px;
text-align: left;
line-height: 1.55;
/* Allow very long labels to wrap inside the 75px slot rather
* than overflowing or pushing the value right. */
white-space: normal;
word-break: keep-all;
}
/* Action / button cells (no
removal is done in JS (beforeprint/afterprint) so the
fixed table layout keeps day columns equal width. CSS here is a fallback only. */
.week-table .cost-row { display: none !important; }
.week-table .total-header,
.week-table .total-cell { display: none !important; }
.week-table .col-total { width: 0 !important; }
.week-table {
page-break-inside: avoid;
margin-bottom: 14px;
}
.week-table th, .week-table td {
font-size: 11px; padding: 3px 2px; height: auto;
}
.print-title-only {
text-align: center; margin: 0 0 14px;
}
.print-title-only h1 {
margin: 8px 0; font-size: 16px; font-weight: 600;
}
/* 月間合計勤務時間 is for on-screen reference only — keep it off the
printed shift sheet that staff receive. */
.summary-section { display: none !important; }
/* @page orientation: default is the browser's portrait. Landscape is applied
only on the shift page by toggling the external /print-landscape.css
(CSP-safe). No global @page here so other print pages keep their own margins. */
/* Single-week print mode (週(縦)/週(横) buttons). app.js tags body with
.week-print-mode and the chosen week-block with .print-target. Moved here
from an injected