/* * Design tokens. * * --color-primary-* and --color-accent-* are NOT declared here: ThemeService emits them * inline on from the two configured brand colors (see _Layout). Everything else is * fixed. Page background is off-white, surfaces are white and float on soft, long shadows; * the palette is deliberately low-contrast so the brand colors carry the emphasis. */ :root { --color-bg: #f9f9fb; --color-surface: #ffffff; --color-border: #ececf0; --color-text: #171b21; --color-text-muted: #8a8f98; --color-text-subtle: #a4a9b0; --color-divider: #f1f0f3; --color-error: #b8392a; --color-error2: #7e1313; --color-error-soft: #fff4f2; --color-error-soft2: #ff918d; --color-info: #4338ca; --color-info-soft: #e0e7ff; --color-success: #1c7a3a; --color-success-soft: #e6f5ea; --color-warning: #92400e; --color-warning-soft: #fef3c7; --color-warning-border: #fde68a; --color-neutral: #767c87; --color-neutral-soft: #f4f4f6; --color-neutral-border: #e2e2e7; /* Long, soft, downward shadows — cards read as lifted rather than outlined. */ --shadow-sm: 0 8px 20px -16px rgba(23, 27, 33, 0.20); --shadow-md: 0 16px 34px -22px rgba(23, 27, 33, 0.18); --shadow-lg: 0 24px 48px -28px rgba(23, 27, 33, 0.20); --shadow-hover: 0 20px 40px -20px rgba(23, 27, 33, 0.22); /* Generous radii are the signature of this design; keep the scale, not the old 8/12/16. */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px; --radius-pill: 999px; --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Space Grotesk", var(--font-sans); --font-mono: "IBM Plex Mono", Consolas, "SF Mono", Menlo, monospace; --sidebar-width: 240px; } /* Headings and figures carry the display face; body copy stays in the text face. */ h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.02em; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); /* * No -webkit-font-smoothing: antialiased here. It forces grayscale antialiasing, which thins * the strokes and is what makes text read as harsh/over-sharp. Letting each platform use its * own default (subpixel on Windows, and the standard rendering on macOS) gives fuller, * softer-looking text. */ -webkit-text-size-adjust: 100%; } a { color: var(--color-primary-text, var(--color-primary)); text-decoration: none; } a:hover { color: var(--color-primary-text, var(--color-primary-hover)); } img, svg { max-width: 100%; display: block; } /* ===================================================================== App shell — mobile first. Mobile: a sticky translucent top bar; the sidebar is an off-canvas drawer. Desktop (>= 700px, further down): the drawer becomes a fixed 240px sidebar and the top bar disappears. ===================================================================== */ .app-shell { min-height: 100vh; min-height: 100dvh; display: flex; } .app-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--color-text); text-decoration: none; padding: 0 8px; } .app-brand:hover { color: var(--color-text); } /* * Logos vary wildly in aspect ratio: a square mark, or a wide lockup that already contains the * company name. Constrain the HEIGHT and let width follow, so a wide logo stays legible instead * of being letterboxed inside a square box. max-width keeps it inside the sidebar either way. */ .app-brand-logo { /* Explicit height, never auto — see the note on .app-topbar .app-brand-logo. */ height: 30px; width: auto; min-width: 30px; max-width: 100%; object-fit: contain; object-position: left center; flex-shrink: 0; } /* With no name beside it, the logo gets the full width of the sidebar to breathe. */ .app-brand.is-logo-only { padding: 0 4px; } .app-brand.is-logo-only .app-brand-logo { height: 44px; max-width: 100%; } /* ---------- Sidebar (desktop only; see the min-width media query) ---------- */ .app-sidebar { display: none; width: var(--sidebar-width); flex-shrink: 0; background-color: var(--color-surface); flex-direction: column; gap: 32px; padding: 28px 20px; box-shadow: 6px 0 24px -20px rgba(23, 27, 33, 0.18); overflow-y: auto; } .app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---------- Mobile bottom navigation ---------- A floating translucent island above the bottom edge: content scrolls *under* it and is blurred by it, which is what makes it read as glass. Thumb-reachable and always visible, so there is no drawer and no hamburger. Hidden on desktop, where the sidebar does this job. */ .app-tabbar { position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 6; display: flex; justify-content: space-around; padding: 10px 4px; /* Keeps the island clear of the iOS home indicator. */ padding-bottom: calc(10px + env(safe-area-inset-bottom)); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 22px; background-color: rgba(255, 255, 255, 0.68); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 20px 40px -16px rgba(23, 27, 33, 0.28); } /* Without backdrop-filter the translucency would just look like a washed-out bar, so go solid. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .app-tabbar { background-color: var(--color-surface); border-color: var(--color-border); } } .app-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 8px; min-width: 0; flex: 1 1 0; text-decoration: none; font-size: 10.5px; font-weight: 500; color: var(--color-text-subtle); transition: color 0.2s ease; } .app-tab .material-icons { font-size: 21px; } .app-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Current tab picks up the brand accent — same signal as the sidebar's current item. */ .app-tab.is-current { color: var(--color-accent); font-weight: 700; } /* ---------- Mobile top bar ---------- */ .app-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background-color: rgba(249, 249, 251, 0.9); backdrop-filter: blur(10px); } /* * The brand must never collapse. Two things could make it vanish here, and both are avoided: * * - min-width:0 + overflow:hidden would let this flex item shrink to zero width instead of * pushing back, so neither is used. * - height:auto gives an SVG with only a viewBox (no width/height attributes) nothing to size * against, and it renders at zero. So the logo is ALWAYS given an explicit height, never auto, * in both the top bar and the sidebar. Width follows from the aspect ratio. */ .app-topbar .app-brand { flex: 0 1 auto; } .app-topbar .app-brand-logo, .app-topbar .app-brand.is-logo-only .app-brand-logo { height: 30px; width: auto; /* Floor: even a zero-intrinsic-size image still occupies space and stays visible. */ min-width: 30px; max-width: 60vw; } .app-topbar .app-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Logo-only: no name beside it, so it may take more of the bar. */ .app-topbar .app-brand.is-logo-only .app-brand-logo { height: 38px; max-width: 70vw; } /* ---------- User card (sidebar footer) ---------- */ .app-user { position: relative; margin-top: auto; } .app-user-button { appearance: none; -webkit-appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; border: none; border-radius: var(--radius-md); background-color: var(--color-neutral-soft); color: var(--color-text); cursor: pointer; text-align: left; font-family: inherit; transition: background-color 0.15s ease; } .app-user-button:hover, .app-user-button.is-open { background-color: var(--color-border); } .app-user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-primary); color: var(--color-primary-on, #fff); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; flex-shrink: 0; } .app-user-identity { min-width: 0; flex: 1; } .app-user-caret { font-size: 18px; color: var(--color-text-muted); flex-shrink: 0; } /* Sidebar variant drops UP: its trigger sits at the bottom of the sidebar. */ .app-user-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 200px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 30; } /* ---------- Top bar variant (mobile): just the avatar, menu drops DOWN ---------- */ .app-user--topbar { margin-top: 0; flex-shrink: 0; } .app-user--topbar .app-user-button { width: auto; padding: 0; background-color: transparent; border-radius: 50%; } .app-user--topbar .app-user-button:hover, .app-user--topbar .app-user-button.is-open { background-color: transparent; } /* The name is redundant next to your own avatar on a small screen. */ .app-user--topbar .app-user-identity, .app-user--topbar .app-user-caret { display: none; } .app-user--topbar .app-user-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; min-width: 240px; } .app-user--topbar .app-user-menu.is-open { animation: app-user-menu-down-in 0.12s ease-out; } @keyframes app-user-menu-down-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .app-user-menu.is-open { animation: app-user-menu-in 0.12s ease-out; } @keyframes app-user-menu-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Name and login sit in a fixed-width sidebar, so they truncate rather than wrap. */ .app-user-name { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-user-login { display: block; margin-top: 2px; font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-user-divider { height: 1px; background-color: var(--color-border); margin: 6px 4px; } .app-user-section-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); padding: 8px 10px 4px; } .app-user-langs { display: flex; gap: 6px; padding: 0 6px 4px; } .app-user-lang { flex: 1; text-align: center; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--color-text-muted); background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 0; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .app-user-lang:hover, .app-user-lang:focus-visible { color: var(--color-primary); border-color: var(--color-primary); background-color: var(--color-primary-soft); outline: none; } .app-user-lang.is-current { color: var(--color-primary); border-color: var(--color-primary); background-color: var(--color-primary-soft); cursor: default; } .app-user-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--color-text); background-color: transparent; border: none; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .app-user-action:hover, .app-user-action:focus-visible { background-color: var(--color-primary-soft); color: var(--color-primary); outline: none; } .app-user-action svg { flex-shrink: 0; } .app-user-action .material-icons { flex-shrink: 0; font-size: 18px; } .app-nav-toggle { appearance: none; -webkit-appearance: none; background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .app-nav-toggle:hover, .app-nav-toggle:focus-visible { background-color: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary-soft); outline: none; } .app-nav-toggle .icon-close { display: none; } .app-nav-toggle.is-open .icon-menu { display: none; } .app-nav-toggle.is-open .icon-close { display: block; } /* ---------- Sidebar nav ---------- */ .app-nav-links { display: flex; flex-direction: column; gap: 2px; } .app-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-md); background-color: transparent; color: var(--color-neutral); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .app-nav-link .material-icons { font-size: 20px; color: var(--color-text-subtle); flex-shrink: 0; transition: color 0.2s ease; } .app-nav-link:hover { background-color: var(--color-bg); color: var(--color-text); } /* The page you are on: soft accent wash, accent icon, full-strength label. */ .app-nav-link.is-current { background-color: var(--color-accent-soft); color: var(--color-text); font-weight: 600; } .app-nav-link.is-current .material-icons { color: var(--color-accent); } .app-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; /* Bottom padding clears the floating island, so the last row of content is never trapped underneath it. Reset on desktop, where the island is gone. */ padding: 8px 18px 96px; } .app-footer { border-top: 1px solid var(--color-border); background-color: var(--color-surface); color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 14px 16px; } /* ---------- Hero ---------- */ .hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; } /* The small uppercase kicker above a page title — one of the accent's designated jobs. */ .eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text, var(--color-accent)); margin-bottom: 6px; } .hero h1 { margin: 0 0 5px; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; } .hero p { margin: 0; color: var(--color-text-muted); font-size: 14.5px; } .hero-actions { width: 100%; display: flex; } .hero-actions .btn-ghost { width: 100%; } /* ---------- Card grid ---------- */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } /* Cards float on a shadow instead of sitting behind a border, and lift slightly on hover. */ .surface-card { background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); /* * The lift is done with the shadow alone, deliberately -- NOT with transform: translateY(). * A transform promotes the card to its own compositing layer, which on Windows drops its text * from subpixel (ClearType) to grayscale antialiasing, and re-rasterises it at fractional * offsets mid-transition. The result is text that looks thin and goes blurry while animating. * Growing the shadow reads as the same lift and keeps the text crisp. */ transition: box-shadow 0.2s ease; } .surface-card:hover { box-shadow: var(--shadow-hover); } .surface-card h2 { margin: 12px 0 6px; font-size: 16px; font-weight: 600; } .surface-card p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; } /* Icon chips are one of the few places the brand accent is allowed to show up. */ .card-icon { width: 38px; height: 38px; border-radius: 10px; background-color: var(--color-accent-soft); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; } .card-link { font-size: 14px; font-weight: 500; } /* ---------- Buttons ---------- */ .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; padding: 12px 22px; min-height: 44px; cursor: pointer; border: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; text-decoration: none; font-family: inherit; min-width:100px; } .btn-primary { background-color: var(--color-primary); color: var(--color-primary-on, #fff); } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--color-primary-hover); color: var(--color-primary-on, #fff); outline: none; } .btn-primary:active { background-color: var(--color-primary-active); } .btn-ghost { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover, .btn-ghost:focus-visible { background-color: var(--color-neutral-soft); color: var(--color-text); border-color: var(--color-neutral-border); outline: none; } /* Focus ring derived from the brand color; applies to anything keyboard-focused. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ---------- Auth ---------- */ .auth-body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; /* Tinted from the brand colors rather than a fixed blue, so the sign-in page rebrands too. */ background: radial-gradient(circle at 20% 20%, rgba(var(--color-accent-rgb), 0.10), transparent 55%), radial-gradient(circle at 80% 80%, rgba(var(--color-primary-rgb), 0.08), transparent 55%), var(--color-bg); padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .auth-shell { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; } .auth-card { width: 100%; background-color: var(--color-surface); border: none; border-radius: var(--radius-xl); padding: 28px 26px; box-shadow: var(--shadow-lg); } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; text-align: center; } /* * Height-constrained so wide lockups stay readable (same reasoning as .app-brand-logo), and * scaled with the viewport rather than pinned to one pixel height: a size that suits a 420px * card on a phone looks lost on a desktop, and vice versa. clamp() gives a floor, a fluid * middle, and a ceiling. Height is always explicit — never auto — so an SVG carrying only a * viewBox cannot collapse to nothing. */ .auth-logo { height: clamp(40px, 6vw, 68px); width: auto; min-width: 40px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.08)); } /* Sole brand element on the card, so it gets a little more room. */ .auth-brand.is-logo-only .auth-logo { height: clamp(48px, 7.5vw, 88px); max-width: 90%; } .auth-company { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); } .auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 13px; font-weight: 500; color: var(--color-text); } .form-field input { width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); /* 16px keeps iOS Safari from auto-zooming the viewport on focus */ font-size: 16px; font-family: inherit; background-color: #fff; color: var(--color-text); min-height: 44px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(47, 107, 255, 0.18)); } .field-error { font-size: 12px; color: var(--color-error); } .password-input { position: relative; display: flex; } .password-input input { flex: 1; padding-right: 44px; } .password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; border: 0; color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .password-toggle:hover, .password-toggle:focus-visible { color: var(--color-primary); background-color: var(--color-primary-soft); outline: none; } .password-toggle .icon-eye-off { display: none; } .password-toggle.is-showing .icon-eye { display: none; } .password-toggle.is-showing .icon-eye-off { display: block; } .auth-alert { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; line-height: 1.45; } .auth-alert-error { background-color: var(--color-error-soft); color: var(--color-error); border: 1px solid #f5b8b8; } .auth-alert-info { background-color: var(--color-info-soft); color: var(--color-info); border: 1px solid #c7d2fe; } .auth-alert-success { background-color: var(--color-success-soft); color: var(--color-success); border: 1px solid #bbf7d0; } /* ---------- Utilities ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4; border: 1px solid transparent; } .badge-info { background-color: var(--color-info-soft); color: var(--color-info); border-color: #c7d2fe; } .badge-reserved { background-color: var(--color-info-soft); color: var(--color-info); border-color: #c7d2fe; } .badge-programmed { background-color: var(--color-neutral-soft); color: var(--color-neutral); border-color: var(--color-neutral-border); } .badge-free { background-color: var(--color-success-soft); color: var(--color-success); border-color: #bbf7d0; } /* ---------- Schedule page ---------- */ .schedule-header { margin-bottom: 16px; } .schedule-header h1 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; } .date-nav { display: flex; align-items: center; gap: 8px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-sm); margin-bottom: 12px; } .date-nav-arrow { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text); background-color: transparent; border: 1px solid var(--color-border); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .date-nav-arrow:hover, .date-nav-arrow:focus-visible { background-color: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary-soft); outline: none; } .date-nav-picker { flex: 1 1 auto; display: flex; } .date-nav-picker input[type="date"] { width: 100%; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; font-size: 16px; color: var(--color-text); background-color: #fff; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .date-nav-picker input[type="date"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18); } .today-link { display: inline-block; font-size: 13px; font-weight: 500; margin-bottom: 16px; } /* ---------- Schedule sections ---------- */ .slot-section { margin-top: 20px; } .slot-section:first-of-type { margin-top: 8px; } .slot-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .slot-section-header h2 { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .slot-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background-color: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); font-size: 12px; font-weight: 600; } .slot-section-empty { margin: 0; padding: 14px; text-align: center; background-color: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 13px; } .slot-section-empty-sm { padding: 8px 12px; text-align: left; font-size: 12px; } /* ---------- Slot sub-sections ---------- */ .slot-subsection { margin-top: 12px; } .slot-subsection:first-child { margin-top: 0; } .slot-subsection-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .slot-subsection-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .slot-count-sm { min-width: 20px; height: 18px; font-size: 11px; padding: 0 6px; } /* ---------- Cabinet groups ---------- */ .slot-cabinet-group + .slot-cabinet-group { margin-top: 10px; } .slot-cabinet-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 6px; } /* ---------- Time chips (Open + Reserved) ---------- */ .time-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .time-chip { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 10px 14px; min-height: 40px; min-width: 64px; border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .time-chip:active { transform: scale(0.97); } .time-chip:focus-visible { outline: none; } .time-chip-open { background-color: var(--color-success-soft); color: var(--color-success); border-color: #bbf7d0; } .time-chip-open:hover, .time-chip-open:focus-visible { background-color: #bbf7d0; border-color: #86efac; } .time-chip-reserved { background-color: var(--color-info-soft); color: var(--color-info); border-color: #c7d2fe; } .time-chip-reserved:hover, .time-chip-reserved:focus-visible { background-color: #c7d2fe; border-color: #a5b4fc; } /* ---------- Programmed slot list ---------- */ .slot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .slot-item { display: flex; gap: 14px; padding: 10px; background-color: var(--color-surface); border: none; border-left: 4px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); align-items: center; } .slot-item.slot-programmed { border-left-color: var(--color-primary); } .slot-time { display: flex; flex-direction: column; align-items: flex-start; min-width: 56px; font-variant-numeric: tabular-nums; flex-shrink: 0; } .slot-time-start { font-size: 17px; font-weight: 600; color: var(--color-text); line-height: 1.1; } .slot-time-end { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .slot-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .slot-patient { font-size: 14px; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; } .slot-venue-muted { font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; } .slot-item .badge { flex-shrink: 0; } /* ---------- Booking dialog ---------- */ .booking-dialog { /* Mobile-first: full screen */ width: 100%; max-width: none; height: 100%; max-height: none; border: none; border-radius: 0; padding: 0; margin: 0; inset: 0; background-color: var(--color-surface); color: var(--color-text); } .booking-dialog::backdrop { background-color: rgba(15, 23, 42, 0.72); } .booking-form { display: flex; flex-direction: column; gap: 16px; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); box-sizing: border-box; height: 100%; overflow-y: auto; } .booking-step { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; } .booking-step[hidden] { display: none; } .booking-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .confirm-lead { margin: 0; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; } .confirm-summary { margin: 0; display: flex; flex-direction: column; gap: 0; background-color: #f8fafc; border: none; box-shadow: var(--shadow-md); border-radius: var(--radius-lg); overflow: hidden; } .confirm-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--color-border); } .confirm-summary > div:first-child { border-top: none; } .confirm-summary dt { margin: 0; font-size: 12px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .confirm-summary dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); text-align: right; overflow-wrap: anywhere; } .booking-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .booking-header h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .booking-close { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background-color: transparent; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .booking-close:hover, .booking-close:focus-visible { background-color: var(--color-primary-soft); color: var(--color-primary); outline: none; } .booking-meta { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; background-color: #f8fafc; border: none; box-shadow: var(--shadow-md); border-radius: var(--radius-lg); padding: 12px 14px; } .booking-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .booking-meta dt { margin: 0; font-size: 12px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .booking-meta dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--color-text); text-align: right; overflow-wrap: anywhere; } .search-row { display: flex; gap: 8px; align-items: stretch; } .search-row .search-input { flex: 1 1 auto; min-width: 0; } .search-btn { flex: 0 0 auto; appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); background-color: var(--color-primary); color: #fff; border: 1px solid transparent; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease; } .search-btn:hover, .search-btn:focus-visible { background-color: var(--color-primary-hover); outline: none; } .search-input { position: relative; display: flex; align-items: center; } .search-input svg { position: absolute; left: 12px; color: var(--color-text-muted); pointer-events: none; } .search-input input { width: 100%; padding: 12px 12px 12px 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 16px; color: var(--color-text); background-color: #fff; min-height: 44px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search-input input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18); } .search-results { min-height: 120px; max-height: 600px; overflow-y: auto; border: none; box-shadow: var(--shadow-md); border-radius: var(--radius-lg); padding: 6px; background-color: #fafbfd; display: flex; flex-direction: column; gap: 4px; } .search-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-muted); text-align: center; padding: 14px; } .search-placeholder p { margin: 0; font-size: 13px; } .search-status { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: 14px; } .search-debug { border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; background-color: #fafbfd; } .search-debug summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .search-debug pre { margin: 10px 0 0; font-family: "Cascadia Code", "Consolas", "Menlo", monospace; font-size: 12px; line-height: 1.45; background-color: #0f172a; color: #e2e8f0; padding: 12px; border-radius: var(--radius-sm); max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .patient-result { width: 100%; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .patient-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .patient-name { font-size: 14px; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; } .patient-meta { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .patient-reserve-btn { flex: 0 0 auto; appearance: none; -webkit-appearance: none; background-color: var(--color-primary); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; min-height: 36px; cursor: pointer; transition: background-color 0.15s ease; } .patient-reserve-btn:hover, .patient-reserve-btn:focus-visible { background-color: var(--color-primary-hover); outline: none; } .patient-reserve-btn:disabled { background-color: #b7c5e6; cursor: not-allowed; } .no-match-submit { width: 100%; margin-top: 4px; } /* ---------- Booking dialog: no-match (new patient) ---------- */ .no-match { display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: center; } .no-match-icon { align-self: center; width: 44px; height: 44px; border-radius: 12px; background-color: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; } .no-match-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; } .no-match-help { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.45; } .no-match .form-field { text-align: left; margin-top: 6px; } .field-hint { font-size: 12px; color: var(--color-text-muted); } .month-list { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px) { .month-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } .month-day { list-style: none; display: flex; } .month-day-link { display: flex; flex-direction: column; width: 100%; background-color: #ffffff; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 12px); padding: 14px 14px 12px; text-decoration: none; color: var(--color-text); transition: border-color 0.15s ease, background-color 0.15s ease; } .month-day-link:hover { border-color: var(--color-primary); background-color: var(--color-primary-soft); } .month-day-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .month-day-date { display: flex; align-items: baseline; gap: 8px; } .month-day-number { font-size: 18px; font-weight: 700; color: var(--color-text); } .month-day-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .month-day-free-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; } .month-day-free-badge.is-positive { background-color: var(--color-success-soft, #dcfce7); color: var(--color-success, #15803d); border-color: #bbf7d0; } .month-day-free-badge.is-zero { background-color: #f1f5f9; color: var(--color-text-muted); border-color: #e2e8f0; } .month-day-cabinets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .month-cabinet { background-color: var(--color-surface-muted, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-sm, 8px); padding: 10px; display: flex; align-items: center; gap: 12px; } .cabinet-name { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; } .cabinet-door-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--color-accent); } .cabinet-name-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cabinet-name-label { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--color-text); } .cabinet-name-hours { font-size: 11px; line-height: 1.2; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .cabinet-stats-column { flex: 1; min-width: 0; position: relative; padding-left: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .cabinet-stats-column::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient( to bottom, transparent, var(--color-primary-border, var(--color-border)) 18%, var(--color-primary-border, var(--color-border)) 82%, transparent ); border-radius: 1px; } .cabinet-stats-column .stat-pill { align-self: flex-start; padding: 0; border-radius: 0; background-color: transparent; border: 0; font-size: 12px; font-weight: 500; line-height: 1.3; } .cabinet-stats-column .stat-pill.stat-free, .cabinet-stats-column .stat-pill.stat-reserved, .cabinet-stats-column .stat-pill.stat-programmed { background-color: transparent; border: 0; padding: 0; } .cabinet-stats-column .stat-pill.stat-free { color: var(--color-success, #15803d); } .cabinet-stats-column .stat-pill.stat-reserved { color: var(--color-info, #4338ca); } .cabinet-stats-column .stat-pill.stat-programmed { color: var(--color-neutral, #475569); } .stat-pill { display: inline-flex; align-items: center; padding: 2px 5px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; line-height: 1.4; } .stat-pill.stat-free { background-color: var(--color-success-soft, #dcfce7); color: var(--color-success, #15803d); border-color: #bbf7d0; } .stat-pill.stat-reserved { background-color: var(--color-info-soft, #e0e7ff); color: var(--color-info, #4338ca); border-color: #c7d2fe; } .stat-pill.stat-programmed { background-color: var(--color-neutral-soft, #f1f5f9); color: var(--color-neutral, #475569); border-color: var(--color-neutral-border, #cbd5e1); } .stat-total { margin-left: auto; align-self: center; font-size: 11px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .month-day-freetimes { padding-top: 8px; border-top: 1px dashed var(--color-border, #e2e8f0); font-size: 12px; line-height: 1.6; color: var(--color-text); } .month-day-freetimes b { font-weight: 600; color: var(--color-text); } .month-debug { margin-top: 16px; } .settings-list { list-style: none; margin: 16px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .settings-card { background-color: #ffffff; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 12px); padding: 16px; } .settings-card-header { margin-bottom: 12px; } .settings-card-header h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--color-text); } .settings-card-header p { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.45; } .settings-form { display: flex; flex-direction: column; gap: 12px; } .settings-form .btn-primary { align-self: flex-start; } .settings-card-proc { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--color-text-muted); word-break: break-all; } .settings-action-btn { align-self: flex-start; } .settings-error { margin-top: 10px; } .settings-card .search-debug { margin-top: 10px; } .settings-empty { margin: 0; color: var(--color-text-muted); font-size: 13px; } .settings-localized-title { margin: 6px 0 0; font-size: 12px; color: var(--color-text-muted); } .settings-localized-title strong { color: var(--color-text); font-weight: 600; } .settings-signout-btn { align-self: flex-start; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .language-btn.is-current { border-color: var(--color-primary); background-color: var(--color-primary-soft, #eff6ff); } .auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px 0 0; } .auth-links a { font-size: 14px; font-weight: 500; color: var(--color-primary); } .auth-links a:hover, .auth-links a:focus-visible { text-decoration: underline; outline: none; } .auth-subtitle { margin: 4px 0 14px; font-size: 16px; font-weight: 600; text-align: center; color: var(--color-text); } .auth-placeholder { margin: 0; text-align: center; color: var(--color-text-muted); font-size: 14px; } .auth-back-link { display: block; margin-top: 18px; text-align: center; font-size: 14px; font-weight: 500; color: var(--color-primary); } .auth-back-link:hover, .auth-back-link:focus-visible { text-decoration: underline; outline: none; } /* ---------- Server-driven dynamic forms ---------- */ .dyn-markup { margin-bottom: 16px; } .dyn-markup h2, .dyn-markup h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--color-text); } .dyn-markup p { margin: 0; font-size: 14px; color: var(--color-text-muted); } .dyn-markup table { width: 100%; border-collapse: collapse; } .dyn-form { display: flex; flex-direction: column; gap: 14px; } .dyn-spacer { height: 2px; } .dyn-radio-group { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .dyn-radio-group legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--color-text); } .dyn-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; line-height: 1.4; transition: border-color 0.15s ease, background-color 0.15s ease; } .dyn-radio:hover { border-color: var(--color-primary); background-color: var(--color-primary-soft); } .dyn-radio input[type="radio"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--color-primary); } .dyn-button { margin-top: 6px; } .dyn-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--color-text); cursor: pointer; } .dyn-checkbox input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--color-primary); } .dyn-link { display: inline-block; font-size: 14px; font-weight: 500; color: var(--color-primary); } .dyn-link:hover, .dyn-link:focus-visible { text-decoration: underline; outline: none; } .dyn-text { margin: 0; padding: 12px 14px; background-color: var(--color-info-soft); border-left: 3px solid var(--color-info); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; color: var(--color-text); } .lang-switcher { display: flex; justify-content: center; gap: 6px; margin: 30px 0 0; } .user-combo { position: relative; } .user-combo-input { padding-right: 36px; } .user-combo-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; transition: color 0.15s ease, transform 0.2s ease; } .user-combo-toggle:hover { color: var(--color-text); } .user-combo[data-open="true"] .user-combo-toggle { color: var(--color-primary); transform: rotate(180deg); } .user-combo-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 4px; list-style: none; background-color: #ffffff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.25), 0 4px 8px -6px rgba(15, 23, 42, 0.15); max-height: 240px; overflow-y: auto; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; } .user-combo[data-open="true"] .user-combo-panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-combo-option { display: flex; align-items: stretch; border-radius: 6px; } .user-combo-option + .user-combo-option { margin-top: 2px; } .user-combo-option-pick { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--color-text); text-align: left; cursor: pointer; overflow: hidden; } .user-combo-option-pick:hover, .user-combo-option-pick.is-active { background-color: var(--color-primary-soft, #eff6ff); color: var(--color-primary-text, var(--color-primary)); } .user-combo-option-icon { flex: 0 0 auto; color: var(--color-text-muted); } .user-combo-option-pick:hover .user-combo-option-icon, .user-combo-option-pick.is-active .user-combo-option-icon { color: var(--color-primary); } .user-combo-option-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; overflow: hidden; flex: 1 1 auto; min-width: 0; } .user-combo-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--color-text); max-width: 100%; } .user-combo-option-login { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-text-muted); max-width: 100%; } .user-combo-forget-form { display: none; } .user-combo-option-forget { display: inline-flex; align-items: center; justify-content: center; width: 28px; background: transparent; border: 0; border-radius: 6px; color: var(--color-text-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .user-combo-option:hover .user-combo-option-forget, .user-combo-option:focus-within .user-combo-option-forget { opacity: 1; } .user-combo-option-forget:hover { color: #b3261e; background-color: rgba(179, 38, 30, 0.08); } .lang-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--color-border, #e2e8f0); background-color: #ffffff; color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .lang-pill:hover { border-color: var(--color-primary); color: var(--color-text); } .lang-pill.is-active { border-color: var(--color-primary); background-color: var(--color-primary-soft, #eff6ff); color: var(--color-primary-text, var(--color-primary)); } .home-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 16px 0 24px; } @media (min-width: 720px) { .home-grid { grid-template-columns: repeat(3, 1fr); } } .home-tile { display: flex; align-items: center; gap: 14px; padding: 20px; background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text); /* Shadow-only lift — see the note on .surface-card for why there is no transform here. */ transition: box-shadow 0.2s ease; min-height: 96px; } .home-tile:hover { box-shadow: var(--shadow-hover); color: var(--color-text); } .home-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; background-color: var(--color-accent-soft, #eff6ff); color: var(--color-accent); } .home-tile-month .home-tile-icon { background-color: var(--color-info-soft, #e0e7ff); color: var(--color-info, #4338ca); } .home-tile-settings .home-tile-icon { background-color: #f1f5f9; color: #475569; } .home-tile-text { min-width: 0; } .home-tile-text h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.3; } .home-tile-text p { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.4; } @media (min-width: 720px) { .home-tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; min-height: 160px; } } .settings-entry-debug { margin-top: 12px; } .language-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .language-btn { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background-color: #ffffff; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-sm, 8px); cursor: pointer; text-align: left; color: var(--color-text); font-size: 14px; font-weight: 500; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .language-btn:hover:not(:disabled) { border-color: var(--color-primary); background-color: var(--color-primary-soft, #eff6ff); } .language-btn:disabled { opacity: 0.6; cursor: not-allowed; } .language-btn.is-loading { opacity: 0.85; } .language-code { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 2px 8px; border-radius: 999px; background-color: var(--color-info-soft, #e0e7ff); color: var(--color-info, #4338ca); border: 1px solid #c7d2fe; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .language-label { flex: 1; } @media (min-width: 720px) { .settings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } } .result-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 4px 6px; } .result-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; } .result-card[data-state="success"] .result-icon { background-color: var(--color-success-soft, #dcfce7); color: var(--color-success, #15803d); } .result-card[data-state="error"] .result-icon { background-color: var(--color-error-soft); color: var(--color-error); } .result-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--color-text); line-height: 1.35; } .result-summary { width: 100%; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; text-align: left; } .result-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background-color: var(--color-surface-muted, #f8fafc); border-radius: var(--radius-sm); border: 1px solid var(--color-border, #e2e8f0); } .result-summary dt { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .result-summary dd { margin: 0; font-size: 14px; color: var(--color-text); line-height: 1.4; } .result-message { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.45; } .booking-footer { display: flex; flex-direction: column; gap: 8px; } .booking-footer .btn-ghost, .booking-footer .btn-primary { width: 100%; } .booking-footer .btn-primary[disabled] { background-color: #b7c5e6; cursor: not-allowed; } /* ---------- Empty state ---------- */ .schedule-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px; background-color: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); } .schedule-empty-icon { width: 52px; height: 52px; border-radius: 14px; background-color: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .schedule-empty h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--color-text); } .schedule-empty p { margin: 0; font-size: 14px; } .schedule-subtle { margin: 6px 0 0; color: var(--color-text-muted); font-size: 13px; } /* ---------- Visit list (PatientSchedules) ---------- */ .visit-section { margin-top: 18px; } .visit-section:first-of-type { margin-top: 8px; } .visit-section-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .visit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .visit-card { background-color: var(--color-surface); /* The 4px left edge is the visit's status colour (see .visit-kind-* below), so the card drops its outline but keeps this one. */ border: none; border-left: 4px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-md); transition: box-shadow 0.15s ease; } /* Ensure the card has no extra padding that would separate the button */ .visit-card { padding: 0 !important; overflow: hidden; /* Keeps the button corners clipped to the card radius */ } .visit-card:hover { box-shadow: var(--shadow-hover); } .visit-card.visit-kind-completed { border-left-color: var(--color-success); } .visit-card.visit-kind-failed { border-left-color: var(--color-error); } .visit-card.visit-kind-pending { border-left-color: var(--color-warning); } .visit-card.visit-kind-planned { border-left-color: var(--color-info); } .visit-card.visit-kind-active { border-left-color: var(--color-primary); } .visit-card.visit-kind-inactive { border-left-color: var(--color-neutral); } .visit-card.visit-kind-canceled { border-left-color: var(--color-error); opacity: 0.85; } /* 1. Ensure the card row is a flex container */ .visit-card-row { display: flex; align-items: stretch; /* Makes the right section full height */ width: 100%; } /* 2. The info sections take up the remaining space */ .visit-when, .visit-medic, .visit-cabinet { padding: 12px 16px; flex: 1; } .visit-when { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 110px; } .visit-date { font-size: 15px; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; } .visit-time { margin-top: 2px; font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .visit-medic { display: flex; flex-direction: column; min-width: 0; max-width:250px; } .visit-cabinet { font-size: 13px; color: var(--color-text-muted); min-width: 0; /* Center text vertically */ display: flex; align-items: center; } /* The right side container for the action button */ .visit-card-actions { display: flex; flex: 0 0 auto; /* Button container doesn't shrink or grow unnecessarily */ border-left: 1px solid var(--color-border); /* Separator line */ background-color: var(--color-neutral-soft); /* Light background to distinguish it */ } /* 4. Style the status labels specifically for this right-hand block */ .visit-status { /* Layout */ display: inline-flex; /* Uses flexbox for internal alignment */ align-items: center; /* Centers text vertically */ justify-content: center; /* Centers text horizontally */ /* Spacing & Size */ padding: 6px 12px; min-height: 28px; /* Ensures a consistent height */ border-radius: var(--radius-sm); /* Typography */ font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; line-height: 1; /* Prevents line-height from adding extra bottom space */ } .visit-status-completed { background-color: white; color: var(--color-success); } .visit-status-failed { background-color: white; color: var(--color-error); } .visit-status-pending { background-color: white; color: var(--color-warning); } .visit-status-planned { background-color: white; color: var(--color-info); } .visit-status-active { background-color: white; color: var(--color-primary); } .visit-status-inactive { background-color: white; color: var(--color-neutral); } .visit-status-canceled { background-color: white; color: var(--color-error); } .visit-status-default { background-color: white; color: var(--color-neutral); } /* ---------- Reception (booking) ---------- */ .reception-doctor { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--color-text); } .reception-toggle-row { display: flex; justify-content: flex-end; margin: 8px 0 16px; } .pill-toggle { appearance: none; -webkit-appearance: none; background-color: transparent; border: none; box-shadow: var(--shadow-md); color: var(--color-text-muted); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pill-toggle:hover, .pill-toggle:focus-visible { color: var(--color-text); border-color: var(--color-text-muted); outline: none; } .pill-toggle.is-active { background-color: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); } .reception-day { margin-bottom: 22px; } .reception-day-title { margin: 0 0 10px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-weight: 600; } .reception-day-date { font-size: 16px; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .reception-day-name { font-size: 13px; font-weight: 500; color: var(--color-text-muted); width:85px; } .reception-day-hours { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-info); background-color: var(--color-info-soft); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; } .reception-day-hours .material-icons { font-size: 14px; } .reception-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; } .reception-slot { appearance: none; -webkit-appearance: none; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background-color: transparent; color: var(--color-primary); font-size: 14px; font-weight: 600; padding: 10px 8px; text-align: center; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .reception-slot.is-available:hover, .reception-slot.is-available:focus-visible { background-color: var(--color-primary); color: var(--color-surface); outline: none; } .reception-slot.is-available:disabled { opacity: 0.6; cursor: not-allowed; } .reception-slot.is-busy { border-color: var(--color-border); color: var(--color-text-muted); background-color: var(--color-neutral-soft); cursor: not-allowed; font-weight: 500; } /* ---------- Patient profile (PatientInfo) ---------- */ .profile-card { background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .profile-header { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--color-border); background-color: var(--color-primary-soft); } .profile-avatar { width: 52px; height: 52px; border-radius: 50%; background-color: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profile-avatar .material-icons { font-size: 34px; } .profile-name { font-size: 18px; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; word-break: break-word; } .profile-list { margin: 0; padding: 6px 18px 14px; } .profile-row { padding: 11px 0; border-bottom: 1px solid var(--color-border); } .profile-row:last-child { border-bottom: none; } .profile-label { margin: 0 0 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .profile-value { margin: 0; font-size: 15px; color: var(--color-text); word-break: break-word; } .profile-value-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; } .profile-empty { color: var(--color-text-muted); } /* ---------- Back link ---------- */ .page-back { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; margin: 0 0 12px; transition: color 0.15s ease; } .page-back:hover, .page-back:focus-visible { color: var(--color-primary); outline: none; } .page-back .material-icons { font-size: 20px; } /* ---------- User list (UserList) ---------- */ .user-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; } .user-search-wrap { position: relative; display: flex; align-items: center; } .user-search-icon { position: absolute; left: 12px; color: var(--color-text-muted); pointer-events: none; font-size: 20px; } .user-search { appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 14px 10px 40px; font-size: 14px; color: var(--color-text); background-color: var(--color-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .user-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); outline: none; } .user-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .user-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--color-text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } /* The card has no border any more, so the hover reads through the shadow. */ .user-card:hover, .user-card:focus-visible { box-shadow: var(--shadow-hover); outline: none; } .user-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background-color: var(--color-accent-soft); color: var(--color-accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; letter-spacing: 0.02em; } .user-info { flex: 1 1 auto; min-width: 0; } .user-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-specialty { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-time { margin: 6px 0 0; font-size: 12px; color: var(--color-info); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; } .user-time .material-icons { font-size: 16px; } .user-time-label { color: var(--color-text-muted); } .user-time-value { font-weight: 600; font-variant-numeric: tabular-nums; } .user-arrow { color: var(--color-text-muted); flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; } .user-card:hover .user-arrow, .user-card:focus-visible .user-arrow { color: var(--color-primary); transform: translateX(2px); } .user-no-match { text-align: center; color: var(--color-text-muted); margin: 16px 0; font-size: 14px; } /* ---------- Speciality list ---------- */ .speciality-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .speciality-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--color-text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .speciality-card:hover, .speciality-card:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-md); outline: none; } .speciality-icon { width: 40px; height: 40px; border-radius: 10px; background-color: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .speciality-icon .material-icons { font-size: 22px; } .speciality-name { flex: 1 1 auto; font-size: 15px; font-weight: 500; color: var(--color-text); min-width: 0; } /* ---------- Appointment selector (UsersGroupType) ---------- */ .appointment-notice { background-color: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); padding: 12px 16px; margin: 6px 0 18px; font-size: 14px; font-weight: 600; text-align: center; } .appointment-tiles { display: grid; grid-template-columns: 1fr; gap: 12px; } .appointment-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--color-text); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .appointment-tile:hover, .appointment-tile:focus-visible { border-color: var(--color-primary); background-color: var(--color-primary-soft); color: var(--color-primary); box-shadow: var(--shadow-md); outline: none; } .appointment-tile:active { transform: translateY(1px); } .appointment-tile-icon { width: 64px; height: 64px; border-radius: 16px; background-color: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background-color 0.15s ease, color 0.15s ease; } .appointment-tile:hover .appointment-tile-icon, .appointment-tile:focus-visible .appointment-tile-icon { background-color: var(--color-surface); color: var(--color-primary); } .appointment-tile-icon .material-icons { font-size: 32px; } .appointment-tile-label { font-size: 15px; font-weight: 600; line-height: 1.35; } @media (min-width: 700px) { .appointment-tiles { grid-template-columns: 1fr 1fr; gap: 16px; } .appointment-tile { padding: 36px 24px; } } /* ---------- Collapsible section header ---------- */ .visit-section-toggle { appearance: none; -webkit-appearance: none; background-color: transparent; border: none; padding: 0 0 8px; margin: 0; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; text-align: left; } .visit-section-toggle .visit-section-title { margin: 0; transition: color 0.15s ease; } .visit-section-toggle:hover .visit-section-title, .visit-section-toggle:focus-visible .visit-section-title { color: var(--color-text); } .visit-section-toggle:focus-visible { outline: none; } .visit-section-chevron { color: var(--color-text-muted); flex-shrink: 0; transition: transform 0.18s ease; } .visit-section.is-collapsed .visit-section-chevron { transform: rotate(-90deg); } .visit-section.is-collapsed .visit-list { display: none; } /* The button itself */ .visit-cancel { background: var(--color-error-soft); border: none; padding: 0 24px; height: 100%; color: var(--color-error); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .visit-cancel:hover { background-color: var(--color-error-soft2); color: var(--color-error2); } /* ---------- Confirm dialog modal ---------- */ .confirm-dialog { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 0; background-color: var(--color-surface); color: var(--color-text); max-width: 420px; width: calc(100% - 32px); } .confirm-dialog::backdrop { background-color: rgba(15, 23, 42, 0.45); } .confirm-dialog-content { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 18px; } .confirm-dialog-message { margin: 0; text-align:center; font-size: 15px; line-height: 1.4; color: var(--color-text); } .confirm-dialog-actions { margin-top:10px; display: flex; justify-content: center; gap: 8px; } .visit-doctor { font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .visit-specialty { margin-top: 2px; font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================================== Tablet and up (≥ 640px) ===================================================================== */ @media (min-width: 700px) { /* Desktop: the sidebar takes over navigation, so the mobile chrome goes away entirely. */ .app-topbar, .app-tabbar { display: none; } .app-sidebar { display: flex; position: sticky; top: 0; height: 100vh; height: 100dvh; } /* No floating island to clear any more. */ .app-main { padding: 32px 32px 48px; } .app-footer { padding: 16px 24px; } .hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; } .hero h1 { font-size: 28px; } .hero p { font-size: 15px; } .hero-actions { width: auto; } .hero-actions .btn-ghost { width: auto; } .card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .surface-card { padding: 22px; } .surface-card h2 { font-size: 17px; } .auth-card { padding: 32px 32px 15px 32px; } .auth-logo { width: 72px; height: 72px; } .auth-company { font-size: 22px; } .auth-form { gap: 16px; } .schedule-header h1 { font-size: 24px; } .date-nav { padding: 10px; gap: 12px; } .slot-item { padding: 10px 18px; align-items: center; } .slot-time-start { font-size: 18px; } .time-chip { font-size: 15px; padding: 11px 16px; } .booking-dialog { width: 100%; max-width: 480px; height: auto; max-height: calc(100vh - 32px); border-radius: var(--radius-lg); margin: auto; inset: 0; box-shadow: var(--shadow-md); } .booking-form { height: auto; overflow-y: visible; padding: 24px; gap: 18px; } .booking-footer { flex-direction: row; justify-content: flex-end; margin-top: 0; } .booking-footer .btn-ghost, .booking-footer .btn-primary { width: auto; } } /* ===================================================================== Desktop (≥ 1024px) ===================================================================== */ @media (min-width: 1024px) { .app-brand { font-size: 16px; } .hero h1 { font-size: 30px; } } .document-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .document-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .document-card:hover, .document-card:focus-visible { background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); box-shadow: var(--shadow-hover); outline: none; } .document-card.is-unavailable { cursor: default; opacity: 0.72; } .document-card.is-unavailable:hover { background-color: var(--color-surface); border-color: var(--color-border); transform: none; box-shadow: var(--shadow-sm); } .document-card-chevron { flex-shrink: 0; align-self: center; color: var(--color-text-muted); font-size: 24px !important; transition: transform 0.15s ease, color 0.15s ease; } .document-card:hover .document-card-chevron, .document-card:focus-visible .document-card-chevron { color: var(--color-primary); transform: translateX(2px); } .document-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent-soft); color: var(--color-accent); } .document-icon .material-icons { color: var(--color-primary); font-size: 24px; } .document-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .document-title { font-size: 16px; font-weight: 600; color: var(--color-text); margin: 0; line-height: 1.35; } .document-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .document-meta-item { display: inline-flex; gap: 4px; align-items: baseline; } .document-meta-label { color: var(--color-text-muted); } .document-meta-value { color: var(--color-text); font-weight: 500; } .document-actions { flex-shrink: 0; display: flex; align-items: center; } .document-open { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; white-space: nowrap; } .document-open .material-icons { font-size: 18px; } .document-unavailable { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; color: var(--color-text-muted); background-color: var(--color-surface-muted, color-mix(in srgb, var(--color-border) 30%, transparent)); border-radius: var(--radius-sm); white-space: nowrap; } .document-unavailable .material-icons { font-size: 18px; } .document-empty { padding: 28px 24px; text-align: center; } .document-empty .material-icons { font-size: 40px; color: var(--color-text-muted); margin-bottom: 8px; } .document-empty h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; } .document-empty p { margin: 0; color: var(--color-text-muted); font-size: 14px; } @media (max-width: 700px) { .document-card-chevron { display: none; } .document-meta { flex-direction: column; gap: 4px; } .document-unavailable { width: 100%; justify-content: center; } } .document-viewer { padding: 0; border: none; border-radius: var(--radius-lg, 12px); width: 98vw; max-width: 98vw; height: 97vh; max-height: 97vh; background-color: var(--color-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); overflow: hidden; } .document-viewer::backdrop { background-color: rgba(15, 23, 42, 0.55); } .document-viewer[open] { display: flex; flex-direction: column; } body.document-viewer-open { overflow: hidden; } .document-viewer-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--color-border); background-color: var(--color-surface); /* Keep the header (and its close button) clickable above the overlays, which cover the whole dialog. */ position: relative; z-index: 30; } .document-viewer-title { margin: 0; flex: 1 1 auto; font-size: 16px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .document-viewer-zoom { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; background-color: color-mix(in srgb, var(--color-border) 35%, transparent); border-radius: 999px; padding: 3px; } .document-viewer-zoom-btn, .document-viewer-zoom-reset { border: none; background: transparent; color: var(--color-text); cursor: pointer; border-radius: 999px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font: inherit; line-height: 1; } .document-viewer-zoom-btn { width: 30px; } .document-viewer-zoom-btn:hover, .document-viewer-zoom-reset:hover, .document-viewer-zoom-btn:focus-visible, .document-viewer-zoom-reset:focus-visible { background-color: var(--color-surface); outline: none; } .document-viewer-zoom-btn .material-icons { font-size: 18px; } .document-viewer-zoom-reset { padding: 0 10px; min-width: 56px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .document-viewer-zoom-label { pointer-events: none; } .document-viewer-close, .document-viewer-iconbtn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none; background-color: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .document-viewer-close:hover, .document-viewer-close:focus-visible, .document-viewer-iconbtn:hover, .document-viewer-iconbtn:focus-visible { background-color: color-mix(in srgb, var(--color-border) 50%, transparent); color: var(--color-text); outline: none; } .document-viewer-close .material-icons { font-size: 22px; } .document-viewer-iconbtn .material-icons { font-size: 20px; } /* PDF + Print actions. On desktop they render inline as two icon buttons and the "Options" toggle is hidden. On mobile (see media query) they collapse into a popup revealed by the Options (⋮) button. */ .document-viewer-actions { position: relative; display: inline-flex; align-items: center; } .document-viewer-options { display: none; } .document-viewer-actions-menu { display: inline-flex; align-items: center; gap: 2px; } .document-viewer-action-label { display: none; } .document-viewer-body { flex: 1 1 auto; position: relative; background-color: #e9eaee; min-height: 0; overflow: auto; padding: 16px; touch-action: pan-x pan-y; overscroll-behavior: contain; } /* The iframe is the white "page". JS sets its width/height to the document's content size and scales it (CSS zoom) to fit the viewer width. The body scrolls vertically (and horizontally when zoomed in past fit-to-width). */ .document-viewer-frame { border: none; background-color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); border-radius: 6px; display: block; margin: 0 auto; /* Read-only viewer: let wheel/touch pass through to the scrolling body so the document can be panned. (The iframe has scrolling="no" and would otherwise swallow the gesture.) */ pointer-events: none; } .document-viewer-frame[hidden], .document-viewer-loading[hidden], .document-viewer-error[hidden] { display: none !important; } .document-viewer-loading, .document-viewer-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background-color: rgba(15, 23, 42, 0.42); z-index: 20; animation: document-viewer-overlay-fade 0.18s ease-out both; } @keyframes document-viewer-overlay-fade { from { opacity: 0; } to { opacity: 1; } } .document-viewer-overlay-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 36px; min-width: 240px; max-width: 360px; background-color: var(--color-surface); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.10); text-align: center; animation: document-viewer-card-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; } @keyframes document-viewer-card-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Circular CSS spinner — accent-colored arc orbiting a faint track. */ .document-viewer-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--color-primary) 22%, transparent); border-top-color: var(--color-primary); animation: document-viewer-spinner-rotate 0.9s linear infinite; } @keyframes document-viewer-spinner-rotate { to { transform: rotate(360deg); } } .document-viewer-loading-text { font-size: 14.5px; font-weight: 500; color: var(--color-text); line-height: 1.4; letter-spacing: 0.01em; } .document-viewer-overlay-card-error .material-icons { font-size: 36px; color: var(--color-danger, #c0392b); } .document-viewer-error-text { font-size: 14.5px; font-weight: 500; color: var(--color-text); line-height: 1.4; } @media (max-width: 700px) { .document-viewer { width: 100vw; max-width: 100vw; /* 100vh on a phone is the viewport with the URL bar retracted, so the dialog overflows the visible area and the bottom toolbar falls off screen. dvh tracks the actually-visible height. */ height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; } /* On mobile the toolbar sits at the bottom (thumb-reachable). The dialog is a flex column; `order` reorders header below the body, and the divider border moves from bottom to top. */ /* The layout uses viewport-fit=cover, so the bottom toolbar would sit under the home indicator without the safe-area inset. */ .document-viewer-header { padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; order: 2; border-bottom: none; border-top: 1px solid var(--color-border); } .document-viewer-title { font-size: 14px; } .document-viewer-zoom-reset { min-width: 44px; padding: 0 6px; } /* Show the Options (⋮) toggle and collapse PDF/Print into a popup that opens upward (the toolbar is at the bottom on mobile). */ .document-viewer-options { display: inline-flex; } .document-viewer-actions-menu { position: absolute; bottom: calc(100% + 10px); right: 0; flex-direction: column; align-items: stretch; gap: 2px; min-width: 190px; padding: 6px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22); z-index: 40; display: none; } .document-viewer-actions-menu.is-open { display: flex; } .document-viewer-actions-menu .document-viewer-iconbtn { width: 100%; height: 44px; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 8px; } .document-viewer-action-label { display: inline; font-size: 14px; font-weight: 500; color: var(--color-text); } .document-viewer-body { padding: 0; order: 1; } .document-viewer-frame { width: 100%; max-width: 100%; border-radius: 0; box-shadow: none; } } @media print { .document-viewer-header, .document-viewer-loading, .document-viewer-error, .document-viewer::backdrop { display: none !important; } /* When the page is printed in "host" mode (URL docs), every element on the host page is hidden except the document viewer dialog and its iframe — so the print output is just the document. The dialog is temporarily switched from showModal() to show() by JS so it is no longer in the top layer and these CSS rules can take effect. */ body.printing-document > *:not(#documentViewer) { display: none !important; } body.printing-document #documentViewer { position: static !important; inset: auto !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; background: #fff !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; } body.printing-document #documentViewer .document-viewer-body { display: block !important; padding: 0 !important; background: #fff !important; overflow: visible !important; height: auto !important; } body.printing-document #documentViewer .document-viewer-frame { width: 100% !important; height: 100vh !important; min-height: 100vh !important; background: #fff !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; display: block !important; } /* URL print mode: a temp iframe is attached directly to with the remote URL. Hide everything else (including the dialog) and reveal it. */ body.printing-document-url > *:not(.document-print-frame) { display: none !important; } body.printing-document-url .document-print-frame { position: static !important; visibility: visible !important; z-index: auto !important; pointer-events: auto !important; width: 100% !important; height: 100vh !important; min-height: 100vh !important; border: 0 !important; display: block !important; background: #fff !important; } } .contacts-page { display: flex; flex-direction: column; gap: 16px; } .contacts-card { background-color: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .contacts-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); } .contacts-card-header h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text); } .contacts-card-header .material-icons { color: var(--color-primary); font-size: 22px; } .contacts-list { margin: 0; padding: 8px 18px 12px; display: flex; flex-direction: column; } .contacts-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .contacts-row + .contacts-row { border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .contacts-row-icon { flex-shrink: 0; width: 22px; display: inline-flex; align-items: center; justify-content: center; } .contacts-row-icon .material-icons { font-size: 18px; color: var(--color-text-muted); } .contacts-label { flex: 1 1 auto; margin: 0; color: var(--color-text-muted); font-size: 14px; min-width: 0; } .contacts-value { margin: 0; color: var(--color-text); font-weight: 500; font-size: 14px; text-align: right; word-break: break-word; } .contacts-value a { color: var(--color-primary); text-decoration: none; } .contacts-value a:hover { text-decoration: underline; } .contacts-break { height: 1px; background-color: var(--color-border); margin: 8px 0; } .contacts-space { height: 8px; } .contacts-links { list-style: none; margin: 0; padding: 0; } .contacts-link + .contacts-link { border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .contacts-link a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--color-text); text-decoration: none; transition: background-color 0.15s ease; } .contacts-link a:hover, .contacts-link a:focus-visible { background-color: color-mix(in srgb, var(--color-primary) 6%, transparent); outline: none; } .contacts-link-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent-soft); color: var(--color-accent); } .contacts-link-icon .material-icons { font-size: 20px; color: var(--color-primary); } .contacts-link-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .contacts-link-title { font-weight: 500; color: var(--color-text); } .contacts-link-subtitle { font-size: 12px; color: var(--color-text-muted); } .contacts-link-arrow { color: var(--color-text-muted); font-size: 18px; flex-shrink: 0; } @media (max-width: 700px) { .contacts-row { flex-wrap: wrap; } .contacts-value { flex-basis: 100%; text-align: left; padding-left: 34px; font-size: 15px; } }