/*
* Shared responsive design tokens for all four Elucid Legal surfaces:
* the public site, attorney portal, client portal, and admin console.
*
* Each portal includes this file in its so they share breakpoints,
* container widths, fluid type, spacing, and touch-target sizing. Surface
* stylesheets layer on top — these tokens should never need to be redefined.
*/
:root {
/* Breakpoints (use as min-width queries). Kept in sync with --bp-*. */
--bp-xs: 360px;
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-xxl: 1536px;
/* Container widths — use max-width on a centered wrapper. */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1200px;
/* Fluid type scale (clamp-based — readable on phones, comfortable on desktop). */
--fs-xs: clamp(11px, 0.7vw + 9px, 12px);
--fs-sm: clamp(12px, 0.8vw + 10px, 14px);
--fs-base: clamp(14px, 0.9vw + 11px, 16px);
--fs-md: clamp(15px, 1vw + 12px, 18px);
--fs-lg: clamp(18px, 1.4vw + 13px, 22px);
--fs-xl: clamp(22px, 2vw + 14px, 28px);
--fs-2xl: clamp(28px, 3vw + 16px, 40px);
--fs-3xl: clamp(34px, 4vw + 18px, 56px);
/* 4px-based spacing scale. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* Minimum touch target — Apple HIG/WCAG. Always at least this on mobile. */
--touch-min: 44px;
/* Page gutter that grows on larger screens. */
--page-gutter: clamp(16px, 4vw, 32px);
}
/* Layout helpers — opt-in utility classes. */
.container-fluid {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.container-md {
width: 100%;
max-width: var(--container-md);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.container-lg {
width: 100%;
max-width: var(--container-lg);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.container-xl {
width: 100%;
max-width: var(--container-xl);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
/* Touch-target enforcement on small viewports — links/buttons in toolbars
must hit at least 44x44 so phones don't make taps frustrating. */
@media (max-width: 768px) {
.touch-target,
.touch-target button,
.touch-target a,
button.touch-target,
a.touch-target {
min-height: var(--touch-min);
min-width: var(--touch-min);
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* Visibility helpers shared across surfaces. */
.hide-on-mobile {
display: initial;
}
.show-on-mobile {
display: none !important;
}
@media (max-width: 768px) {
.hide-on-mobile {
display: none !important;
}
.show-on-mobile {
display: initial !important;
}
}
/* Avoid horizontal scrollbars on phones — every surface should opt into this. */
html.shared-responsive,
body.shared-responsive {
max-width: 100%;
overflow-x: hidden;
}
/* Improve form-control hit area on small screens without re-styling each control. */
@media (max-width: 768px) {
.shared-responsive input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.shared-responsive select,
.shared-responsive textarea,
.shared-responsive button {
min-height: var(--touch-min);
}
}
/* ──────────────────────────────────────────────────────────────────────────
TOUCH HYGIENE — eliminate the iOS Safari 300ms tap delay and the
"first tap triggers hover, second tap triggers click" pattern on
coarse pointers. Applied to every common interactive element so we
don't have to remember to opt in per surface.
────────────────────────────────────────────────────────────────────── */
button,
a,
[role="button"],
[onclick],
input[type="submit"],
input[type="button"],
input[type="reset"],
label,
summary,
select {
touch-action: manipulation;
}
/* ──────────────────────────────────────────────────────────────────────────
APP DRAWER — collapsible sidebar pattern shared by attorney + admin
surfaces. Opt in by giving the sidebar `class="app-drawer"`, adding an
`` in the topbar and an empty
`` after the sidebar. JS toggles
the `.open` class on both the drawer and overlay.
────────────────────────────────────────────────────────────────────── */
.drawer-toggle {
display: none;
background: transparent;
border: 1px solid var(--border, #E5E7EB);
border-radius: 8px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
cursor: pointer;
color: inherit;
padding: 0;
flex-shrink: 0;
}
.drawer-toggle:focus-visible {
outline: 2px solid #3B82F6;
outline-offset: 2px;
}
.drawer-toggle svg {
width: 22px;
height: 22px;
}
.app-drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
z-index: 199;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.app-drawer-overlay.open {
display: block;
opacity: 1;
pointer-events: auto;
}
@media (max-width: 768px) {
.drawer-toggle {
display: inline-flex;
}
.app-drawer {
position: fixed !important;
top: 0;
left: 0;
bottom: 0;
width: 84vw !important;
max-width: 300px;
height: 100vh !important;
min-height: 100vh !important;
z-index: 200;
transform: translateX(-100%);
transition: transform 0.25s ease;
box-shadow: 2px 0 14px rgba(0, 0, 0, 0.25);
}
.app-drawer.open {
transform: translateX(0);
}
body.drawer-open {
overflow: hidden;
}
}
/* ──────────────────────────────────────────────────────────────────────────
SCROLLABLE TABS — for tab strips that won't fit on phones. Opt in with
`class="scroll-tabs"` on the wrapper.
────────────────────────────────────────────────────────────────────── */
.scroll-tabs {
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.scroll-tabs {
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
padding-bottom: 4px;
}
.scroll-tabs > * {
flex-shrink: 0;
}
}
/* ──────────────────────────────────────────────────────────────────────────
MODAL CARD — generic helper to keep popup cards inside the viewport on
phones. Opt in by giving the inner card `class="modal-card"`. Combine
with inline `width:` for desktop sizing — width auto-overrides on phones.
────────────────────────────────────────────────────────────────────── */
.modal-card {
max-width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
overflow-y: auto;
box-sizing: border-box;
}
@media (max-width: 480px) {
.modal-card {
width: calc(100vw - 24px) !important;
padding: 20px !important;
}
}
/* ──────────────────────────────────────────────────────────────────────────
TABLE WRAPPER — opt in with `class="responsive-table-wrap"`. Provides a
horizontal scroll container with a subtle right-edge fade to hint at
off-screen content on phones.
────────────────────────────────────────────────────────────────────── */
.responsive-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
}
.responsive-table-wrap > table {
min-width: max-content;
}
@media (max-width: 768px) {
.responsive-table-wrap {
margin-left: -4px;
margin-right: -4px;
}
}
/* ──────────────────────────────────────────────────────────────────────────
SHARED PORTAL DEFAULTS — these target the common admin/attorney portal
shell (sticky `.topbar`, `.content` padding, `.stats-row`, `.stat-num`,
`.form-grid`) so phone view feels intentionally compact without each
surface restating the rules.
────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.shared-responsive .topbar {
padding: 12px 16px !important;
gap: 8px;
}
.shared-responsive .topbar-title {
font-size: 15px !important;
}
.shared-responsive .topbar-right {
gap: 6px !important;
flex-wrap: wrap;
justify-content: flex-end;
}
.shared-responsive .content {
padding: 16px !important;
}
.shared-responsive .stats-row {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-bottom: 18px !important;
}
.shared-responsive .stat-card {
padding: 14px !important;
}
.shared-responsive .stat-num {
font-size: 22px !important;
}
.shared-responsive .stat-label {
font-size: 10px !important;
}
.shared-responsive .form-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.shared-responsive .panel-header {
padding: 12px 14px !important;
flex-wrap: wrap;
gap: 8px;
}
.shared-responsive .panel-body {
padding: 14px !important;
}
.shared-responsive .two-col {
grid-template-columns: 1fr !important;
}
.shared-responsive .tbl-toolbar {
padding: 12px !important;
gap: 8px;
}
.shared-responsive .tbl-toolbar .search-input,
.shared-responsive .tbl-toolbar select.filter,
.shared-responsive .tbl-toolbar .filter {
width: 100% !important;
flex: 1 1 100%;
}
.shared-responsive .tbl-info {
margin-left: 0 !important;
width: 100%;
}
.shared-responsive .login-card {
padding: 24px !important;
border-radius: 12px !important;
}
/* Make every inside a portal scroll horizontally rather than
break out of the viewport — opt-in via .shared-responsive on body. */
.shared-responsive table {
min-width: max-content;
}
}
@media (max-width: 480px) {
.shared-responsive .stats-row {
grid-template-columns: 1fr !important;
}
.shared-responsive .topbar {
padding: 10px 12px !important;
}
.shared-responsive .content {
padding: 12px !important;
}
}