/* Staging 2025-03-08 */
/* Begin Customizations */

/* Skip to content — accessibility */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #02adff;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* Breakpoints (standardized #277):
     Small mobile:               <= 360px
     Standard mobile:      361px -  767px
     Tablet portrait:      768px - 1079px
     Tablet landscape/desktop: >= 1080px
   See the "Screen Size Specific Styles" section below. The old ad-hoc
   1200-1250px zoom hack and the 992-1280px font-size compromise it was
   layered with are removed -- 1080px+ is now a single desktop tier with
   no scaling override. */

/* Global Styles */

* {
 font-size: 18px !important;
}

.login-datetime {
 font-size: 16px !important;
 color: #ccc !important;
 justify-content: flex-end;
 text-align: right;
 margin-right: 40px;
}

.autocomplete-list {
 position: absolute;
 top: 100%; /* Adjust this value to control the vertical position */
 left: 20px;
 z-index: 10;
 background-color: white;
 border: 1px solid #ccc;
 list-style-type: none;
 padding: 0;
 margin: 0;
}

.autocomplete-list li {
 padding: 5px 10px;
 cursor: pointer;
 background-color: #ede1a1 !important;
}

html {
 font-size: 18px !important;
 max-width: 100%;
 width: 100%;
 overflow-x: hidden;
 color: #111;
}

h1,
h2 {
 font-size: 32px !important;
 text-transform: uppercase;
 margin-bottom: 0px !important;
}

h2 {
 font-weight: bold !important;
}

h3 {
 font-size: 22px !important;
 text-transform: uppercase;
 margin-bottom: 0px !important;
}

h4 {
 font-size: 30px !important;
 text-transform: uppercase;
 margin-bottom: 0px !important;
}

/* #617: 17px -> 18px. 17 made every bare <h5> exactly 1px smaller than body text (the `*` rule
   above is 18px), which is not a size difference anyone chooses -- it just looks like a mistake,
   and it did: it is what made the intake import's success message look wrong.

   The COLOUR stays. Bare <h5> is used almost entirely for alert text, and what remains after the
   #617 audit is refusals and failures ("could not be saved", "All fields are required", "locked
   because its status is set to Final"), where red is doing its job. A sentence that is NOT a
   failure should use .sd-modal-msg at the end of this file rather than an <h5>.

   Kept as !important at a fixed 18px rather than deleted, which would let the `*` rule take over
   and drop <h5> to 14px on phones -- where body text is 14px, so alert text would stop standing
   out at all. Today it is larger than body text on mobile and this keeps it that way.

   Unaffected, because both are more specific: modal titles (.modal .modal-header > h5, 26px --
   all 25 of them) and h5.alert-info (20px). */
h5 {
 font-size: 18px !important;
 color: #e03215 !important;
}

.nav-link {
 padding: 0.2rem 1.6rem;
}

.nav-pills .show>.nav-link {
 background-color: #7c5118;
}

.ps20 {
 font-size: 30px !important;
}

.ps20H4 {
 font-size: 20px !important;
}

.lblMarkA {
 font-size: 20px !important;
}

.greyText {
 color: grey;
}

.text-danger,
h4.text-danger {
 color: #e03215 !important;
}

h5.alert-info {
 color: #000 !important;
 font-size: 20px !important;
}

.alert-info {
 background-color: #fff;
 border-color: #fff;
}

/* Full-page loading overlay */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.75);
}

/* #633: floating Report Issue button, and the stacking that makes it worth having.
   Four z-indexes decide this whole feature, so they are written down together:

       .loading (above)          9999   full-page overlay
       .modal-backdrop           1040   bootstrap.bundle 4.1.1
       .modal                    1050   "
       div.topHSD (the header)   1030   ~line 456 -- i.e. UNDER both overlays, which is the bug

   The button has to clear 9999 to be clickable, and #reportIssueModal has to clear it too or the
   button opens a dialog rendered underneath the very overlay it was clicked through. The dialog
   also has to beat the OTHER modals: this partial is rendered at _Layout.cshtml:62, before
   #mymodal and friends at :84+, so at Bootstrap's shared 1050 they would win on source order. */
.sd-report-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #373737;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    /* Hidden by default and revealed by riPollGreyOut(). visibility rather than display:none so
       the fade can run, and so html2canvas leaves it out of the screenshot while it is off. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sd-report-fab.sd-report-fab-on {
    opacity: 1;
    visibility: visible;
}

.sd-report-fab:hover,
.sd-report-fab:focus {
    background-color: #0a368f;
    color: #fff;
}

.sd-report-fab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Beats the blanket `* { font-size: 18px !important }` at the top of this file, which would
   otherwise size the glyph as body text -- the same reason .sd-icon-circle's chevron needs it. */
.sd-report-fab .fas {
    font-size: 22px !important;
}

/* _EndUser_main_Layout has a <footer class="fixed-bottom"> (Cases/Documents/Contacts); _Layout
   (the document screens) does not. reportIssue.js adds this class only where that footer exists,
   rather than padding every screen for a footer most of them don't have. */
.sd-report-fab.sd-report-fab-above-footer {
    bottom: 74px;
}

/* Same CSS-only tooltip as .sd-icon-circle[data-tooltip], flipped to the left: this button sits
   against the right edge, where a centred bubble would overflow the viewport. Independent of
   Bootstrap's tooltip JS on purpose -- this button exists for pages whose scripts may be the
   thing that has gone wrong. */
.sd-report-fab[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    pointer-events: none;
}

/* The other half of #633. Permanent rather than set on open: a dialog that is always on top is
   one rule, whereas raising it only when it was opened from the button would leave the hamburger
   path on a different z-index from the floating-button path, for no gain. */
#reportIssueModal {
    z-index: 10060;
}

/* Rotating circle spinner (right-panel PDF overlay) */
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #0a368f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* #514: busy overlay for the group/collection manager dialog, set by setManagerBusy() in
   Scripts/wsCaseDocUtil_1.js. Covers the whole dialog -- body, footer and header X -- while
   a save/select chain is in flight, WITHOUT replacing the dialog's markup the way the
   message it replaces did, so the entry form is still there to restore if the save fails.
   Bootstrap's .modal-content is position:relative, which is what contains this.
   Long-hand edges rather than `inset`: Safari only shipped that in 14.1, and Safari is the
   browser this dialog's users are on. */
#mgrBusyOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* Deliberately see-through: the form underneath should stay legible, so the dialog reads
       as "busy" rather than as "gone" (the message this replaces blanked the body outright).
       0.75 matches the full-page .loading overlay above. */
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

/* Not the .spinner above: that one is position:absolute/top:50%, which would ignore this
   overlay's flex layout and sit on top of the message instead of below it. */
.mgrBusySpinner {
    margin-top: 20px;
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #0a368f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Bootstrap 4.2+ spinner-border polyfill (Bootstrap 4.1.1 is missing it) */
@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

.spinner-border {
    display: inline-block;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

/* Accessibility Outline */
*:focus {
    outline: 2px solid #f8a130 !important;
    outline-offset: 3px !important;
}

/* Login Page */

/* Courthouse background photo with Ken Burns-style zoom-out on load, matching
   the sign-in page treatment used in JurDocs (jd-site.css: body.bodyLogin).
   Shared by Home/Index (login) and Account/Recover (forgot password), the two
   views that render through _Sign_in_Layout without overriding it.

   #499: this rule is unchanged, but it only covers the screen on viewports at
   least as wide as 2:3 -- see the portrait-viewport override below. */
body.bodyLogin {
    background-image: url("../assets/images/courthouse-background.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 115vw auto;
    animation: shrinkBackground 3s ease-out forwards;
}

@keyframes shrinkBackground {
    from {
        background-size: 110vw auto;
    }
    to {
        background-size: 100vw auto;
    }
}

/* #499: courthouse-background.jpg is 2560x3840 -- a *portrait* image, 1.5x
   taller than it is wide. So "background-size: 100vw auto" above only reaches
   the bottom of the screen while the viewport is no taller than 1.5x its width,
   i.e. while its aspect ratio is >= 2/3. Every desktop, laptop, landscape phone
   and portrait tablet clears that; a portrait phone does not -- on a 390x844
   screen the photo rendered 390x585 and left the bottom ~215px bare.

   Only that case is overridden, and the media query tests the exact condition
   rather than a px breakpoint, so the boundary can't drift away from the real
   one. "cover" is what fills a viewport of any shape, but background-size can't
   be animated to the cover keyword (keyword and length aren't interpolable --
   it would snap at the midpoint instead of easing), so here the photo moves to
   a fixed full-viewport pseudo-element sized with cover and the zoom-out
   becomes a transform instead.

   Why not do this at every size and delete the rule above: painting the photo
   on a pseudo-element leaves <body> itself transparent, and text over a
   non-opaque backdrop loses subpixel antialiasing. Diffed against the old
   build, that changed every glyph on the sign-in page (0.5% of pixels, confined
   entirely to text rows) -- invisible in side-by-side screenshots, but a real
   change to the first page every customer sees, and there is no reason to take
   it on the viewports where the simple version already works. It costs nothing
   on portrait phones, which are high-DPI and don't use subpixel AA anyway.

   position:fixed rather than background-attachment:fixed: that property is
   unreliable on exactly the mobile browsers this branch targets. */
@media (max-aspect-ratio: 2/3) {
    /* Body's own background paints *above* a negative-z-index child (CSS 2.1
       Appendix E: negative stacking contexts come before in-flow block
       backgrounds), so the rule above has to be switched off here or the
       part-height photo would cover the pseudo-element. */
    body.bodyLogin {
        background-image: none;
        animation: none;
    }

    body.bodyLogin::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1; /* behind the page content, above the page canvas */
        background-image: url("../assets/images/courthouse-background.jpg");
        background-repeat: no-repeat;
        /* Anchors the top and crops the sides, matching the "top" anchoring and
           shrink-toward-the-top feel of the wider-viewport rule above. */
        background-position: top center;
        background-size: cover;
        transform-origin: top center;
        /* No "forwards": the last keyframe is scale(1), which renders
           identically to no transform, so letting the animation fill nothing
           drops the composited layer again once it has played. */
        animation: sdLoginBgZoomOut 3s ease-out;
    }
}

/* Starts 15% larger than "just covering" and settles at exactly covering. */
@keyframes sdLoginBgZoomOut {
    from {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
    }
}

/* Translucent card so the form stays legible over the photo */
body.bodyLogin #wrap.sd-login {
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 8px;
    padding: 24px 16px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Password Recovery only: more breathing room under the card, so the short form
   doesn't sit tight against the footer. Scoped by class rather than editing the
   shared rule above, which the sign-in page also uses. */
body.bodyLogin #wrap.sd-login.sd-recover {
    padding-bottom: 6em;
}

/* Hide old menu bar (#224: was body > div:nth-child(1) > div > ul.nav.col.top0 --
   broke the moment anything shifted the header partial's position in the DOM) */
.legacy-marketing-nav {
 display: none;
}

/* left align fields (#224: was #wrap.sd-login > div.clearfix.justify-content-center >
   div.col-sm-6.offset-sm-1 -- tied to the exact Bootstrap grid classes on the form
   columns, so changing those classes would have silently dropped this override) */
.signin-form-col {
    margin-left: 0px !important;
}

/* login buttons */
#loginForm.form-signin button {
	margin-left: 0px !important;
	padding: 5px 24px !important;
}

/* Keep the Forgot-password link and Submit button vertically aligned
   even though the link no longer has button padding */
.sd-login-actions-row {
    align-items: center;
}

/* Forgot password — plain text link, not a button */
.sd-forgot-link {
    color: #0a368f;
    font-size: 14px !important;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    display: inline-block;
}
.sd-forgot-link:hover {
    color: #062359;
    text-decoration: underline;
}

/* Recover page captcha image — was stretching to the col-sm-10 grid width
   (~80% of the container) instead of its small native size */
.recover-captcha-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: hue-rotate(-135deg) saturate(0.5);
}

/* #644: the signed-out footer -- legal links left, copyright right (_footer.cshtml).

   space-between rather than an ml-auto on the copyright, so that when the two blocks wrap they
   each start at the left edge instead of the second one hanging off to the right. Wrapping is
   the point: .footbottom is nowrap + overflow:hidden + ellipsis, so a row that cannot fit its
   contents drops TEXT rather than growing a line. Deliberately not a .row -- .fixed-bottom .row
   is flex-wrap: nowrap !important, written for the signed-in footer's three fixed columns.

   The 12px the copyright used to carry as an inline margin-right is now the row's padding, so
   both ends sit the same distance from the viewport edge.

   Neither child's bottom margin is touched: Bootstrap's 1rem on a <p> is 18px here, not 16px,
   and it is what gives this fixed footer its height today. column-gap needs Safari 14.1, the
   same floor #514 already accepted; where it is missing space-between still separates the two. */
.sd-login-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 16px;
    padding: 0 12px;
}

/* Matches .sd-forgot-link -- the login page's other plain-text link -- rather than Bootstrap's
   default #007bff. Explicitly NOT .text-muted like the copyright beside them: these are the only
   interactive things in the footer, and grey would read as static small print. Size comes from
   `.footbottom *` (12px !important) above, so they match the copyright's scale. */
.sd-login-legal-links a {
    color: #0a368f;
    text-decoration: none;
}

.sd-login-legal-links a:hover,
.sd-login-legal-links a:focus {
    color: #062359;
    text-decoration: underline;
}

.sd-login-legal-sep {
    color: #6c757d;
    padding: 0 4px;
}

/* #224: removed a dead rule here (#loginForm.form-signin div.col-sm-4) -- the
   button columns moved to col-6/col-5 at some point and this override, tied to
   the old col-sm-4 classes, had already silently stopped matching anything. */

/* Dropdown menu -- header burger menu only (.bdrop, see _toHeaderSD.cshtml). This used to be
   the only dropdown-menu on the whole site, so it was written unscoped; #240-followup3 added
   a second, unrelated set of dropdown-menus (the Share Case icon-access controls) and this
   !important top/left/transform silently hijacked their positioning too, since a stylesheet
   !important rule beats a plain inline style. Scoped to .bdrop so it only ever affects the
   menu it was actually written for. */
.bdrop.show {
 top: 5px !important;
 left: -190px !important;
 transform: translate3d(0px, 35px, 0px) !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 animation: dropdownFadeIn 0.133s ease-out;
}

/* #635: Bootstrap hovers a .dropdown-item to its own grey (#f8f9fa); use the brand cream,
   the same one the Share Case access dropdown already uses. :focus is included because
   Bootstrap pairs the two -- without it a keyboard user, or the item still focused after a
   click, would sit grey underneath a cream hover. Two classes plus the pseudo-class outrank
   Bootstrap's single-class rule, so no !important. Scoped to .bdrop (see the note above)
   so it cannot reach the Share Case menus. */
.bdrop .dropdown-item:hover,
.bdrop .dropdown-item:focus {
 background-color: #F6F0D0;
 color: #212529;
}

@keyframes dropdownFadeIn {
 from {
  opacity: 0;
  transform: translate3d(0px, 25px, 0px);
 }
 to {
  opacity: 1;
  transform: translate3d(0px, 35px, 0px);
 }
}

/* Header Styles */

ul.thsubMenu {
 padding-left: 0px !important;
 padding-right: 0px !important;
}
ul.thsubMenu li {
 min-width: 125px !important;
}

.bg-secondary {
 background-image: linear-gradient(to right, #111111, #373737);
}

.navbar {
 background-image: linear-gradient(to right, #111111, #373737);
}

.navbar-brand {
 /* #286: served from our own assets, not Shopify's CDN */
 background-image: url("../assets/images/SuperDocs.png");
 min-height: 50px;
 background-size: contain;
 background-repeat: no-repeat;
 margin-left: 20px;
}

.navbar-brand > .img-fluid {
 display: none;
}

div.topHSD {
 background-color: #222222;
 background-image: linear-gradient(to right, #111111, #373737);
 min-height: 100px !important;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1030;
 margin:0;
}

/* #224: was div.row.topHSD > div > a -- positional path assuming an exact
   3-level nesting under the shared .topHSD header row. Now a semantic class
   on the anchor itself (_toHeaderSD.cshtml's empty logo link). */
.sd-topnav-logo {
    /* #286: served from our own assets, not Shopify's CDN */
    background-image: url("../assets/images/SuperDocs.png");
    min-height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 17px 0;
}

/* #224: was div.row.topHSD > div > a > div:first-of-type > img /
   div:last-of-type -- these never matched _toHeaderSD.cshtml's empty anchor
   above; they're for _topHeaderSD_NoLinks.cshtml's two logo-image divs, which
   are hidden here by design (the "NoLinks" layout suppresses the branding
   link). Semantic classes on those two divs instead of a shared positional
   selector, since the two templates no longer look alike structurally. */
.sd-topnav-logo-a > img {
 display: none;
}

.sd-topnav-logo-b {
 display: none;
}

.nav-link.dropdown-toggle::after {
 display: none;
}

/* #224: was body > nav > div.col > form -- root-anchored path. Now a semantic
   class on the clock <form> itself (_topHeaderType-C0.cshtml, client layout). */
.datetime-clock {
 font-size: 12px !important;
 color: #888 !important;
}

.adminTitle2 {
 color: #ede1a1 !important;
 font-style: italic;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-transform-origin-x: center;
 max-width: 100%;
}

/* #636: keep the line box even with no case name. Every header partial ships this
   element with content (&nbsp;, or a <br /> on the client layouts), but a script may
   still empty it -- $('.adminTitle2').text(cinfo.caseDesc) with a blank description,
   for one -- and an empty block is 0px tall, so the menu bar under it moves up and the
   header height changes between screens. The pseudo-element is deliberate: it is not
   part of .text(), so sd.js's tooltip sync still sees "no case" rather than a stray
   space, and it cannot be overwritten by the next caller the way real content is. */
.adminTitle2:empty::before {
 content: "\00a0";
}

.adminTitle {
 color: #ffffff !important;
 white-space: nowrap;
}

/* #224: removed a dead rule here (body > footer > div > div.col-sm-2.col-2.
   offset-1.text-nowrap.text-muted.footbottom.ng-binding) -- the closest live
   footer markup (_footerBottom.cshtml) uses col-sm-4/col-4, not col-sm-2/col-2,
   so this had already silently stopped matching anything: a root-anchored,
   6-class-chain selector broken by a single grid-size change upstream. */

/* The descendant selector is required, not redundant: the global
   `* { font-size: 18px !important }` above matches every child element
   directly, and inherited 12px never beats a directly-matched !important
   declaration. So any element nested inside the footer -- e.g. the
   `<span ng-if="env"> / {{env}}</span>` environment label added in #485 --
   renders at 18px next to 12px sibling text unless it is matched here too. */
.footbottom,
.footbottom * {
 font-size: 12px !important;
}

.footbottom {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Navigation Buttons */

li.nav-item > .btn-link {
 color: #fff !important;
 text-decoration: uppercase !important;
 border: 0px none #fff !important;
 margin-bottom: 10px;
}

li.nav-item > .btn-link:hover {
 text-decoration: underline !important;
}

.whatevermenu {
 margin-top: 2px;
}

/* Scoped override of the global .btn-link padding (5px 24px, below) so
   this only affects the Cases/Documents/Contacts nav buttons. */
.whatevermenu .btn-link {
 padding: 4px 25px !important;
}

/* Help Text */

/* Shared circular icon badge -- black circle, white glyph. Used for the help
   ("?") and back ("<") icons across the portal in place of per-page raster
   PNGs, so both are built the same way. */
.sd-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #373737;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* Nudges the help-circle icon up slightly to align with the buttons it sits
   next to inline. */
.sd-icon-circle.mktIcon {
    margin-top: -4px;
}

/* The fa-chevron-left glyph renders visually larger than the "?" text glyph
   at the same shared font-size, so nudge it down to balance the two.
   !important is required to beat the blanket `* { font-size: 18px !important; }`
   rule above (line 34-36) -- that rule wins over plain .sd-icon-circle's
   font-size otherwise, which is why both glyphs render at 18px today. */
.sd-icon-circle .fa-chevron-left {
    font-size: 16px !important;
    margin-left: -2px;
}

/* CSS-only hover tooltip -- independent of Bootstrap's tooltip/popover JS, so
   it works regardless of which layout/init script the host page happens to
   include. */
.sd-icon-circle[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
}

p.mt-1.text-danger {
 border: 1px solid #777;
 padding: 0px 35px;
 border-radius: 4px;
 cursor: pointer;
}

.mktTxt {
 color: #333 !important;
 font-weight: 100 !important;
 font-style: italic;
}

.mktHelp {
 color: #333 !important;
 font-weight: 100;
}

.mktHelp::before {
 white-space: pre;
}
.mktHelp::after {
 content: "\A";
 white-space: pre;
}

/* Spacing */

/* #224: removed two dead rules here (.top4h1 > div.container-fluid >
   div.row.no-gutters.mt-0, and its > div.row.no-gutters child variant) --
   no live view has a .row.no-gutters.mt-0 anywhere. */

/* #224: was .top4h1 > div.container-fluid > div.row.no-gutters -- a generic
   "whatever page happens to render inside .top4h1" pattern that turned out to
   be live across 5 pages at once (casesClientAccess, Clients, Documents,
   Client/Cases, Client/Index -- some with two matching rows each). Semantic
   .sd-page-content-row class added to every matching row on all 5 instead. */
.sd-page-content-row {
 margin-top: 8px !important;
}

/* #224 identified this as matching the Documents screen's #tabs. #494: that
   was wrong -- #tabs is a <ul>, and div:nth-child(1) only matches a div, so it
   never applied there. Parsing every view rendered inside .top4h1, this
   actually matches 26 elements across 15 views (full list in #494): the DT
   search/length wrappers on Cases, Forms and Contacts, plus table wrappers,
   legends and button groups on a dozen other screens. It is load-bearing, not
   dead -- deleting it would shift layout on screens a diff can't verify.

   Being retired incrementally instead, the way #224 did it: tag a row with a
   semantic class, give that class its own explicit rule, and let :not() drop
   it out of here. Once every match has been tagged, this rule can go.

   #525: .sd-actions-row is the second such tag (Merge Contacts' button row). It
   gets NO replacement rule on purpose -- that row wants no top margin inside
   its columns at all, and its own spacing comes from Bootstrap's mt-3 on the
   row. Note the excluded row must carry the class itself; adding a :not() only
   ever narrows what this rule reaches, so it cannot affect any other screen. */
.top4h1 > div > div.row:not(.sd-dt-controls):not(.sd-actions-row) > div > div:nth-child(1) {
 margin-top: 8px !important;
}

/* #494: the row holding a table's DataTables search box and rows-per-page
   dropdown. The 8px keeps them off whatever sits above, and off each other
   once the two columns stack on a phone. Named rather than inherited from the
   chain above, which reached this row on Cases only because it happens to sit
   at the page root -- the identical row on Documents is three levels deeper,
   inside the tab panes, so it matched nothing and the controls rendered flush
   together.

   Targets the grandchild, not the column: the columns are empty in the markup
   and DataTables' initComplete moves .dataTables_filter / .dataTables_length
   into them, so the wrapper is what the retired chain's div:nth-child(1) was
   landing on. Keeping the margin there rather than on the column matters
   because the row is a flex container with align-items:center -- inside the
   item it grows the item; on the item it offsets it. */
.sd-dt-controls > div > div {
 margin-top: 8px !important;
}

/* #527: pins the Cases and Documents tables to a 15px side inset at EVERY
   width -- .container-fluid's own padding and nothing else.

   Two different wrapper chains had to be flattened to get one number:
     Cases:     .container-fluid > .row.no-gutters > .col > .row > .col-sm-12
     Documents: .container-fluid > .row.no-gutters > .col > .tab-content
                > .tab-pane > .col-sm-12
   Cases' extra plain .row contributes Bootstrap's -15px side margins, and both
   screens' innermost .col-sm-12 contributes 15px of padding. Left alone those
   summed differently per screen and per tier: Documents rendered at 15+15=30px
   on tablet/desktop, Cases at 15-15+15=15px, and on phones -- where the <=767px
   block zeroes .col-sm-12's padding outright -- Cases' uncancelled margins
   dragged it to a flush 0. Measured: Cases 0 / Documents 15 at 390px, Cases 15
   / Documents 30 at 768, 1024 and 1440.

   Zeroing both contributions instead of balancing them makes the inset
   independent of the tier, so the mobile block's padding rule can't change the
   answer and neither screen has to know what the other's chain looks like. The
   pair is load-bearing: sd-tbl-col without sd-cases-tbl-row would leave Cases'
   -15px uncancelled at 0px, and sd-cases-tbl-row without sd-tbl-col puts it
   back to 30px.

   Note the general trap behind the phone symptom -- a plain .row inside a
   column whose padding is zeroed (or absent) leaks -15px outward. The sign-in
   title's nested .row has the same problem, noted in the mobile block below. If
   a screen turns up flush to the viewport edge, look for this shape first. */
.sd-cases-tbl-row {
 margin-left: 0;
 margin-right: 0;
}

/* The column that wraps a .table-responsive on Cases and on all three
   Documents tab panes. Horizontal only -- .mt-3 on two of them is real spacing
   and must survive. */
.sd-tbl-col {
 padding-left: 0;
 padding-right: 0;
}

/* UI Controls */

.form-control,
#searchJuri,
.specialSearch,
.sd-contacts .select2-container .select2-selection--single {
 background-color: #F6F0D0 !important;
 border: 2px solid #FCD098 !important;
 border-radius: 4px !important;
 color: #111 !important;
}

.form-control:focus {
 box-shadow: 0 0 0 0.2rem rgba(240, 206, 208, 0.5) !important;
}

/* 1. Base styling (no appearance or layout changes) */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  zoom: 1 !important;
  cursor: pointer;

  /* match your other fields */
  background-color: #ede1a1 !important;
  border: 2px solid #f8a130 !important;
  border-radius: 4px !important;

  /* prep for the SVG tick */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 10px;
}

/* 2. Focus state */
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 206, 208, 0.5) !important;
}

/* 3. Checked state: fill + SVG tick */
input[type="checkbox"]:checked {
  background-color: rgba(10, 54, 143, 1) !important;
  border-color: rgba(10, 54, 143, 1) !important;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>\
<path d='M1 5 L4 8 L9 1' stroke='%23fff' stroke-width='2' fill='none' \
stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

/* 4. (Optional) Indeterminate state: dash instead of tick */
input[type="checkbox"]:indeterminate {
  background-color: #f8a130 !important;
  border-color: #f8a130 !important;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='2'>\
<rect width='12' height='2' fill='%23fff'/>\
</svg>");
}

/* lighten everything and show “not‐allowed” cursor */
input[type="checkbox"]:disabled {
  opacity: 0.6 !important;
  cursor: default;
}

select {
 background-color: #f6f0d0 !important;
 text-transform: none;
 border: 0px solid #f8a130 !important;
 height: 45px;
 background-color: #ede1a1 !important;
 cursor: pointer;
}

select option:checked,
select option:hover,
select:focus option:checked,
.juriList:focus > option:checked,
select:not(:focus) option:checked {
 border: 0px none #ede1a1 !important;
}

select option:checked,
select option:hover,
select:focus option:checked,
.juriList:focus > option:checked,
select:not(:focus) option:checked {
 background-color: rgba(10, 54, 143, 1) !important;
 color: #ffffff !important;
 text-transform: none;
 border: 0px solid #f8a130 !important;
}

select[multiple]:focus option:checked,
select[multiple].juriList:focus option:checked {
 background-color: rgba(10, 54, 143, 1) !important;
}

button {
 border-radius: 5px;
}

.btn-primary {
 background-color: #0a368f !important;
 border-color: #0a368f !important;
 margin-bottom: 4px;
}

.btn {
 border-radius: 25px !important;
 padding: 6px 12px !important;
 font-size: 18px !important;
 min-width: 85px;
 line-height: 1em;
 z-index: 10;
 margin-bottom: 4px !important;
}

.btn-link {
 color: #0a368f !important;
 text-decoration: none !important;
 border: 2px solid #0a368f !important;
 border-radius: 25px !important;
 padding: 5px 24px !important;
}

/* Buttons in Lists */

/* Select */
.btn-success {
 background-color: #0a368f !important;
 border-color: #0a368f !important;
}

/* Delete */
.btn-danger {
 background-color: #70190b !important;
 border-color: #70190b !important;
}

/* Share */
.btn-info {
 color: #0a368f !important;
 text-decoration: none !important;
 border: 2px solid #0a368f !important;
 background-color: unset !important;
}

/* Tables */
.table-striped tbody tr {
 padding-right: 8px;
}

.table-striped tbody tr:nth-of-type(odd) {
 background-color: #FBF8EA;
}

.table-hover tbody tr:hover {
 background-color: #ede1a1;
}

/* DataTables 1.13.x renders its row hover NOT as a background-color but as a
   translucent grey box-shadow overlay on each cell
   (table.dataTable.table-hover>tbody>tr:hover>* { box-shadow: inset 0 0 0 9999px
   rgba(var(--dt-row-hover,0 0 0), .075) }). That overlay paints ON TOP of any
   background-color, so setting the cell background to our brand cream alone is
   not enough -- the ~7.5% black shadow tints the cream into a muddy grey/khaki
   (#420-style "grey + brand-yellow" two-tone). Force the cell background to the
   brand cream AND suppress DataTables' overlay so the hovered row is a uniform
   #ede1a1, matching the hover on the non-DataTables lists elsewhere in the app. */
table.dataTable.table-hover tbody tr:hover > td {
    background-color: #ede1a1 !important;
    box-shadow: none !important;
}

/* Login, Edit(Rename) */

#userID,
#password {
 max-width: 400px !important;
}

#signin {
 padding: 5px 24px !important;
}

/* Modals */

#myCustomPackmodal input { max-width: 90% !important; }

/* #224: was #myCustomPackmodal > div > div > div.modal-body > div.row > div >
   div > label -- an 8-level chain of anonymous divs into one specific label.
   Semantic class on the label itself instead. */
.sd-packet-name-label { padding-left: 35px; font-weight: 600; white-space: nowrap; }

#myCustomPackmodal > div.modal-lg { max-width: 800px !important; }

#mymodalMsgYesNo > div.modal-lg { max-width: 700px !important; margin-top: 20px; box-shadow: 0 0px 100px rgba(0, 0, 0, 0.7); }

.modal .modal-header {
 background-color: #02adff !important;
}

.modal .modal-header > h5 {
 font-size: 26px !important;
 color: #111111 !important;
 text-transform: uppercase;
 font-weight: 700;
}

.modal .modal-header > button > span {
 font-size: 30px !important;
}

.radpdfFrame1 {
 height: 70vh !important;
}

/* Preview Modal */

#PdfWebControl1 {
 border-radius: 5px !important;
 height: 70vh !important;
}

/* #224: was #previewModal > div > div > div.modal-header > h5 / > div.modal-header
   / > button > span -- already dead (commented out) before this pass; updated
   to the semantic .sd-preview-modal-header class added to the markup anyway,
   so re-enabling this later doesn't resurrect the brittle version.

.sd-preview-modal-header .modal-title { font-size: 20px !important; color: #111111 !important; }
.sd-preview-modal-header { background-color: #02ADFF !important; }
.sd-preview-modal-header .close span { font-size: 30px !important; }
*/

#PdfWebControl1 {
 border-radius: 5px !important;
}

/* New Cases List */

#casesListTbl thead th,
.sd-list-tbl thead th {
 white-space: nowrap;
 font-weight: 600;
}

.sd-new-case-arrow {
 display: inline-block;
 color: #F8A130;
 font-size: 1.5rem !important;
 margin-right: 16px;
 animation: sdNewCaseArrowBounce 1s ease-in-out infinite;
}

.sd-new-case-arrow i {
 font-size: 1.5rem !important;
}

@keyframes sdNewCaseArrowBounce {
 0%, 100% { transform: translateX(0); }
 50% { transform: translateX(8px); }
}

/* Clickable name columns */
#casesListTbl tbody td[class*="csdesc-"],
.sd-list-tbl tbody td[class*="csdesc-"],
#caseDocsTbl tbody td[class*="dcdesc-"],
#caseDocsTbl_IN tbody td[class*="dcdesc-"],
#caseDocsTbl tbody td[class*="dcnum-"],
#caseDocsTbl_IN tbody td[class*="dcnum-"] {
    cursor: pointer;
}
#casesListTbl tbody td[class*="csdesc-"]:hover,
.sd-list-tbl tbody td[class*="csdesc-"]:hover,
#caseDocsTbl tbody td[class*="dcdesc-"]:hover,
#caseDocsTbl_IN tbody td[class*="dcdesc-"]:hover,
#caseDocsTbl tbody td[class*="dcnum-"]:hover,
#caseDocsTbl_IN tbody td[class*="dcnum-"]:hover {
    text-decoration: underline;
}

/* #231: jurisdiction subtitle under a document's name. Needs !important to beat
   the global * { font-size:18px !important } rule above, which otherwise wins
   over a plain inline font-size (an inline style only beats non-important CSS). */
.sd-doc-juri-subtitle {
    font-size: 13px !important;
    font-style: italic;
    margin: 0;
    color: #666;
}

/* #359: revision subtitle under the Form # (Revision column folded in to save
   tablet width). Same !important reasoning as the jurisdiction subtitle above. */
.sd-doc-rev-subtitle {
    font-size: 13px !important;
    font-style: italic;
    margin: 0;
    color: #666;
}

/* #359/#360: the time shown beneath a date in a table cell. Rendered as a <p>
   (block, margin:0) to match the revision/jurisdiction subtitles so the spacing
   is identical; the markup also carries an inline margin:0 so it stays tight on
   client-portal views that don't load this rule. font-size needs !important to
   beat the global * { font-size:18px !important } rule. */
.sd-doc-time-subtitle {
    font-size: 13px !important;
    color: #666;
    margin: 0;
}

/* #359: Forms table header labels — full by default, compact only on tablet
   (see the 768–1079px media query).
   #526: qualified with .sd-docs-tbl — the id is shared with the client portal's
   document list (see Views/Account/Index.cshtml). These particular rules were
   harmless there (that table has no hdr-full/hdr-short spans), but the whole
   #caseDocsTbl group is scoped consistently so the next rule added here can't
   silently reach the other page. */
#caseDocsTbl.sd-docs-tbl thead .hdr-short { display: none; }
#caseDocsTbl.sd-docs-tbl thead .hdr-full { display: inline; }

/* #359: the responsive child row (carat expand) reuses the header's HTML as the
   label. Since the header carries BOTH the full and short spans, without this
   they'd both render (e.g. "Sign StatusSign"). The child row is full-width, so
   show the full label and hide the compact one there. */
#caseDocsTbl.sd-docs-tbl .dtr-details .hdr-full { display: inline !important; }
#caseDocsTbl.sd-docs-tbl .dtr-details .hdr-short { display: none !important; }

/* #357: keep the carat control column narrow. It is hidden once every column
   fits (see the dtr-all-visible rule below) since nothing collapses then. */
#caseDocsTbl.sd-docs-tbl th.dtr-control-col,
#caseDocsTbl.sd-docs-tbl td.dtr-control {
    width: 1.75em;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center;
}

/* #371: only hide the carat once DataTables Responsive itself confirms every
   column is currently visible -- class dtr-all-visible is toggled in
   appCaseDocs.js off Responsive's own responsive-resize event. This used to
   be a static "@media (min-width:1080px)" rule on the assumption desktop
   always fits every column with no collapsing. When the column-width bug
   below caused the table to render wider than a given desktop viewport,
   Responsive still collapsed columns into the hidden child row, but the
   control needed to expand and see them was hidden regardless by the static
   rule -- the data just silently disappeared with no way to get it back.
   Driving this off Responsive's actual state is correct at any width. */
#caseDocsTbl.sd-docs-tbl.dtr-all-visible th.dtr-control-col,
#caseDocsTbl.sd-docs-tbl.dtr-all-visible td.dtr-control {
    display: none;
}

#casesListTbl > #ontable > tr > td,
.sd-list-tbl > #ontable > tr > td {
 padding: 0.4rem !important;
}

/* Actions cell: no horizontal padding. #493 excludes child rows -- the
   collapsed-detail cell is :last-of-type too, and zeroing its side padding
   leaves the expanded values flush against the table edge. */
#casesListTbl > #ontable > tr:not(.child) > td:last-of-type,
.sd-list-tbl > #ontable > tr:not(.child) > td:last-of-type {
 padding: 0.4rem 0rem !important;
}

/* #628: the "#casesListTbl > #ontable > h4.text-danger" block that was here is GONE.
   It existed only to patch appCases.js's "no cases" message, which was a bare <h4>
   appended straight into the tbody -- it repainted it black and pushed it down 120px,
   but could do nothing about the anonymous table cell CSS wraps such a block in, which
   under table-layout:fixed takes column 1's ~31px carat-column width. The message is a
   real <tr>/<td colspan='6'> now (renderCasesEmpty), so this matched nothing and was
   deleted rather than left to be re-read as live. No other tbody in the app carries an
   <h4>: the only one that did was this site.
   (dataLib_util_ext_1.cs's "Error loading contacts." <h4> also lands inside a
   <tbody id="ontable">, but on #contactListTbl, which is neither #casesListTbl nor
   .sd-list-tbl -- this rule never reached it. Same latent shape, different screen.) */

/* #628: the Cases screen's "no cases" message -- the single cell of the single row that
   replaces the table's contents when a firm has none (renderCasesEmpty in appCases.js).
   Both sites that can reach that state use it: first load with an empty firm, and deleting
   the last case.

   It is a class rather than the inline styles it replaces because of the trap at the top of
   this file: `* { font-size: 18px !important }` matches this span, and an !important
   stylesheet declaration beats a plain INLINE one -- so the first-load message's
   `style="font-size:26px"` had never taken effect and it was rendering at body size. Hence
   the !important here; it is required, not defensive.

   THE SELECTOR IS THIS LONG BECAUSE IT HAS TO BE, and the measurements are below. The
   empty state is a single <td colspan="6">, which makes it :last-of-type as well as
   :first-of-type, so it collects every rule written for the Actions cell:

     #casesListTbl > #ontable > tr:not(.child) > td:last-of-type   (2 ids + 2 classes)
     ...and the <=767px copy of the same, and
     #ontable > tr:not(.child) > td:last-of-type  { min-width: 100px; float: right; ... }

   Adding .sd-cases-tbl and :not(.child) is what puts this rule at 2 ids + 3 classes and
   therefore ahead of all of them -- with plain "#casesListTbl > #ontable > tr > td.sd-tbl-empty"
   it TIES with the last-of-type pair and loses on source order, since their <=767px copies come
   later in this file.

   Which also means .sd-tbl-empty is NOT a general-purpose class yet: putting it on another
   screen's table gets none of this, because everything it has to out-specify is keyed on
   #casesListTbl. Give that screen its own selector rather than weakening this one -- what
   each empty cell has to beat is whatever that table's own rules do to a last-of-type td. */
#casesListTbl.sd-cases-tbl > #ontable > tr:not(.child) > td.sd-tbl-empty {
 /* 7rem, as the inline style this replaces used. 1rem is 18px on EVERY tier here (see the
    note on rem lengths further down), so this is 126px of breathing room at any width. */
 padding: 7rem 0 !important;
 border: none !important;
 text-align: center;

 /* Measured on a phone-width window before these three: the message rendered in a 100px
    block floated to the right, wrapping to 7 lines, OUTSIDE the table box. That is the
    "#ontable > tr:not(.child) > td:last-of-type { min-width: 100px; float: right }" rule in
    the <=767px section, which exists to push the Actions cell to the right edge -- and as
    the note above it records, float on a table-cell forces display:block (CSS 2.1 9.7
    display fixup), which drops the cell out of the table entirely. The first-load message
    has been rendering that way on phones all along; it is the same defect as the <h4>, just
    reached through a different rule. display is restored explicitly because float:none alone
    does not undo the fixup once another rule has floated it. */
 float: none;
 display: table-cell;
 min-width: 0;
 margin-right: 0;
}

#casesListTbl.sd-cases-tbl > #ontable > tr:not(.child) > td.sd-tbl-empty > span {
 font-size: 26px !important;
 font-weight: 600;
 /* Not red. This is an empty state, not a failure -- the same distinction #617 drew for
    <h5> alert text. The message it replaced was .text-danger, and a rule further up this
    file existed solely to paint it black again. */
 color: #111;
}

/* #629: the Cases screen's first-run guidance panel, above the empty case list
   (#casesEmptyIntro in Cases.cshtml, revealed by renderCasesEmpty). */
.sd-empty-intro {
 background-color: #fff;
 border: 1px solid #dcdcdc;
 /* The same 6px brand-blue top edge the login/recover cards use further up this file. */
 border-top: 6px solid #0a368f;
 border-radius: 4px;
 /* VERTICAL ONLY, measured: the parent row carries .no-gutters (matching the table wrapper
    below it), and Bootstrap's ".no-gutters > [class*='col-']" zeroes this element's left and
    right padding with a class + attribute selector that outranks a single class. So a
    horizontal value written here is silently dropped and the text sits flush against the
    border. The horizontal inset is on .sd-empty-intro-inner instead, which is not a column
    and so has nothing fighting it. */
 padding: 16px 0 4px;
 margin-bottom: 12px;
}

/* The card spans the screen like the table below it; the CONTENT does not. A line of text
   running the full width of a wide monitor is hard to read back to, so it is capped here
   rather than on .sd-empty-intro itself, which would leave the card narrower than the
   table and read as a different width of page.

   Centred in the card by the auto margins (product owner, 2026-08-14). Below ~990px the cap
   stops binding, the wrapper fills the card and the margins collapse to nothing, so this is
   a wide-screen effect only -- which is where the empty space it balances exists. */
.sd-empty-intro-inner {
 max-width: 950px;
 margin-left: auto;
 margin-right: auto;
 /* Breathing room below the last item. It does NOT collapse through the card, because the card
    has a padding-bottom -- so the card grows by this much rather than the space landing outside
    it. That is the intent: the last row was sitting 16px off the bottom border while the heading
    had 21px above it. */
 margin-bottom: 30px;
 /* The card's horizontal inset, which cannot live on the card -- see above. It is what keeps
    the text off the border at narrow widths, where the cap does not bind and there is no
    margin. box-sizing is border-box app-wide (Bootstrap), so this comes out of the 950px. */
 padding: 0 20px;
}

/* A div, not an <h4>: bare h4 in this app is "30px !important; uppercase" (:89), so a
   heading element here would have to fight its own stylesheet to be a heading. #617 drew
   the same conclusion about <h5> for alert text -- pick the element for what it is and
   style it, rather than picking it for the size it happens to render at. */
.sd-empty-intro-hd {
 color: #0a368f;
 font-size: 22px !important;
 font-weight: 600;
 margin-bottom: 4px;
}

.sd-empty-intro-item {
 display: flex;
 align-items: center;
 /* Wrapping IS wanted here, unlike the #622 pill: on a narrow screen the button should
    drop below its paragraph rather than squeeze it. What must not happen is the button
    shrinking, which is why it is flex: 0 0 auto with nowrap below. */
 flex-wrap: wrap;
 gap: 14px;
 padding: 12px 0;
}

/* Divider between items only, so the panel reads as one block when the seats half is
   hidden -- which is the common case (a firm at its seat limit). */
.sd-empty-intro-item + .sd-empty-intro-item {
 border-top: 1px solid #ececec;
}

.sd-empty-intro-txt {
 /* min-width: 0 because a flex item's default min-width is auto, i.e. its intrinsic
    size -- without it the paragraph refuses to yield and the row overflows (#622). */
 flex: 1 1 320px;
 min-width: 0;
}

/* Both buttons the same width. The selector carries two classes on purpose: the <=767px block
   further down sets ".btn { min-width: 65px }", same specificity as .sd-empty-intro-btn alone
   and later in the file, so a single-class rule here would silently lose on a phone and the
   buttons would go back to their natural widths.

   190px, not the 165px first asked for (product owner, 2026-08-14): measured, the labels come
   out at 185.2px and 188.2px on desktop, so a 165px floor never binds there and the buttons
   would have stayed unequal, which was the point of the request. 190 is the next round number
   above the wider label. If either label is shortened, drop this to match the new wider one --
   it has to be >= the widest natural width or it stops equalising anything. */
.sd-empty-intro-item .sd-empty-intro-btn {
 min-width: 190px;
}

.sd-empty-intro-btn {
 flex: 0 0 auto;
 white-space: nowrap;
}

/* #661: the note that stands in for the hidden "Another person at this firm" option on the
   personal profile (userProfile.cshtml). It sits in the same block as #attyCaptionWarning and
   deliberately does NOT reuse that element's .alert-warning: nothing is wrong here, it is a
   signpost, and a yellow box on every load of a one-person firm's profile reads as a fault.
   .alert-info is no use either -- :149 overrides it to a white background AND a white border,
   so it would be indistinguishable from the body text around it.

   No font-size: "* { font-size: 18px !important }" (:34) would beat a plain declaration anyway,
   and body size is what this wants. Padding and margins in px, never rem -- 1rem is 18px here
   on every tier, so rem arithmetic against this file does not mean what it looks like
   (#527/#555). The left edge is the brand blue the panel headings use. */
.sd-atty-note {
 background-color: #f7f9fc;
 border: 1px solid #e3e8f0;
 border-left: 4px solid #0a368f;
 border-radius: 3px;
 padding: 10px 14px;
 margin-top: 10px;
 color: #111;
}

/* Share Case */
/* Hide sharing for non-users
.cb_isClient {
 display: none;
} */
 
#accessListTbl tbody tr:nth-of-type(odd) {
    background-color: unset !important;
}
.caseDocTable1 tbody tr {
 border-bottom: 2px solid #f6f0d0 !important;
}

/* Open Document */

#instancesListDB {
 min-width: 160px;
}

#caseDocInstancesPanel {
 height: 82vh !important;
}

#caseDocInstancesPanel
 > div
 > div
 > div
 > div
 > div.col-sm-1.col-md-1.col-lg-1 {
 white-space: nowrap !important;
}

/* #639: margin-bottom was 50px. The row is already 82vh, so the extra 50px
   pushed the page past the viewport and gave the intake screen a second,
   outer scrollbar beside the viewer's own. Only caseIntakeDoc.cshtml carries
   this class. */
.radpdfFrame {
 margin-bottom: 0px;
 height: 82vh !important;
}

#PdfWebControl1 {
 height: 100% !important;
 /* #459: RAD PDF renders the viewer frame with the legacy presentation attribute
    width="100%" (confirmed in the rendered markup) rather than a style. A
    presentation attribute sits in the presentational-hints origin -- the weakest
    there is -- so ANY author rule anywhere that sets a width on this element wins
    silently. Restating the intended width as an author !important declaration
    makes it unloseable. Set here rather than per-view so it covers every screen
    that hosts the control.

    This is necessary but NOT sufficient: it is still a percentage, resolved
    against a Bootstrap flex item, which is the combination WebKit gets wrong --
    the reported failures are all Safari, and the frame comes out narrower than
    its column (PDF against the left panel, blank space to its right, hover
    toolbar still correctly at the panel's right edge). Scripts/sd.radpdfFit.js
    measures the outcome and pins the frame in pixels when it falls short. Don't
    remove either half. */
 width: 100% !important;
 zoom: 100%;
 /* margin-bottom moved into the >=1080px (desktop/tablet-landscape) media
    query below -- it was unscoped here, applying at every tier including
    tablet portrait, where it contributed to a double scrollbar on the doc-
    editing screen (the JS in docCase_V2.cshtml trying to force it to 0 there
    wasn't reliably landing on the right element). */
}

.contextmenu button {
 cursor: pointer;
}

.infobtnG,
.delbtnG {
 cursor: pointer;
}

/* Font-Awesome replacements for the contact row's info/remove icons
   (previously outline_info_black_18dp.png / delete-icon.png) */
.iconX-C {
 font-size: 20px;
 vertical-align: middle;
}

.iconX-C-info {
 color: #373737;
}

.iconX-C-delete {
 color: #70190B;
 margin-left: 5px;
}

.btn-secondary.text-left {
 background-color: #6f6f6f;
 border-color: #6f6f6f;
}

.btn-secondary.text-left:hover {
 background-color: #5f5f5f;
 border-color: #5f5f5f;
}


/* Documents List */

#tabs > li > a {
 color: #000 !important;
 cursor: pointer !important;
 font-weight: 600;
}

.nav-tabs {
 border-bottom: 2px solid #777;
}

/* The Packets/Forms/Intake Forms tabs sit in the row right below the Help
   icon and action buttons. A `#tabs { margin-top: -24px }` rule used to pull
   the tabs up underneath that row, which is why the row needed to be raised
   above the tabs here in the first place -- with the tabs' whole clickable
   area sitting under the row's (invisible, but still hit-testable) box, this
   also silently broke clicking Packets/Forms/Intake Forms themselves once
   the row won the stacking order (see the negative-margin fix, since
   removed). Kept as a cheap safety net against future rounding-induced
   1px overlaps -- but don't reintroduce a negative margin-top on #tabs. */
.sd-documents .nav-tabs {
 position: relative;
 z-index: 1;
}

.sd-documents .sd-doc-actions-row {
 position: relative;
 z-index: 2;
}

.nav-tabs .nav-item {
 color: #000;
 margin-bottom: -3px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
 color: #000;
 background-color: #fff;
 border-color: #777 #777 #fff;
 border-width: 2px;
}

div.top4h1
 > div.container-fluid.ng-scope
 > div:nth-child(4)
 > div.col-12.col-sm-12.mt-1
 > button {
 margin-top: 2px;
}

/* Actions column — let DataTables size it; just prevent icon-row wrapping */
/*#caseDocsTbl > thead > tr > th:last-of-type,
#caseDocsTbl tbody tr > td:last-of-type {
    white-space: nowrap;
}*/

.tableCustomPacket {
  /* ensure the table respects your widths */
  table-layout: auto; /* or fixed, depending on your overall layout needs */
  width: 100%;
}

.tableCustomPacket td:first-child {
  /* make the very first column take up half the table */
  width: 63%;
  max-width: 63%;
}

.tableCustomPacket td:not(:first-child) {
  /* remove any max-width constraint on the other columns */
  max-width: none;
  /* #465: 88px -> 50px. Each Update/Rename/Delete icon sits in its own
     column; 88px min-width left each icon over-spaced. */
  width: 50px;
  min-width: 50px;
}

/* Sign Request - Hide Feature 
#caseDocsTbl > #ontable > tr > td:last-of-type > div {
 display: none;
 text-align: left !important;
} */

/* Signature Status - Hide Column 
#caseDocsTbl > thead > tr > th:nth-child(7) {
 display: none;
}

#caseDocsTbl > #ontable > tr > td:nth-child(7) {
 display: none;
} */

body
 > div.container-fluid1.body-content
 > div.top4h1
 > div.container-fluid.ng-scope {
 margin-top: 0px !important;
}

/*#caseDocsTbl > thead > tr > th:nth-child(6) {
 max-width: 110px !important;
}

#caseDocsTbl > #ontable > tr > td:nth-child(6) {
 max-width: 110px !important;
}*/

/*#caseDocsTbl .form-check-input {
 left: 35px;
 top: -2px;
}

caseDocsTbl_IN .form-check-input {
 left: 35px;
 top: 0px;
}*/

#caseDocsTbl .mr-5 { max-width: 100px !important; }

/* removed dead commented-out min-width:1440px block here (breakpoint
   standardization cleanup) -- it was already commented out and 1440 isn't
   one of the standardized tiers. */

/* Forms Library (Add Documents) */

div.sd-add-document input[type="checkbox"] { position: relative; top: 5px; }

/* #224: removed two more dead rules here (body > div.container-fluid1.body-content
   > div.top4h1 > div.container-fluid.ng-scope > div.row.no-gutters1 >
   div.col-4.col-sm-4.mt-1 / div.col-6.col-sm-6.text-left.mt-1) -- labeled "Forms
   Library" but no live view has a .row.no-gutters1 with those exact column
   classes anymore; a root-anchored, 6-level chain (through an Angular-injected
   .ng-scope class, no less) broken by markup drift on whichever page this
   used to target. */

.juriList > option {
 overflow-x: hidden;
}

/* #logoffBtn used to be its own 25px circular button (background: white +
   filter: invert(1), combined with .btn-link's border-radius: 25px !important,
   flipped a white circle to black) wrapping a plain chevron image. Now that
   the chevron is a .sd-icon-circle span with its own real 32px/#373737 circle,
   that old circle-drawing trick just produces a second, differently-sized
   circle around the first -- removed here (border: none suppresses
   .btn-link's blue border/radius since there's no fill left to round) so
   .sd-icon-circle is the only circle, sized to match its 32px box. */
#logoffBtn {
 margin-left: 0px !important;
 min-width: 0px !important;
 padding: 0px 0px !important;
 height: 32px;
 max-width: 32px;
 margin-right: 16px;
 border: none !important;
 background: none;
}

/* Scrollbars */

::-webkit-scrollbar {
 width: 16px;
 box-shadow: inset 0 0 2px white;
}

::-webkit-scrollbar-track {
 background: #f8f8ff;
 box-shadow: inset 0 0 2px #808088;
 border-radius: 4px;
}

::-webkit-scrollbar-thumb {
 background: #cbcbd4;
 box-shadow: inset 0 0 1px #808088;
 border-radius: 4px;
}

/* Reserve space so fixed footer does not overlap page content.
   margin-top offsets the fixed page header (div.topHSD); --sd-header-height
   is kept in sync with the header's real rendered height by a script in
   _EndUser_main_Layout.cshtml, so this stays correct at every breakpoint
   without a hardcoded number per zoom/font-size tier. 110px is only the
   fallback for if that script hasn't run yet. */
.top4h1 {
 margin-top: var(--sd-header-height, 110px);
 margin-bottom: 60px;
 /* #280: without this, a child's top margin (e.g. .row.mt-3 on the New
    Case/Add Forms button row) collapses straight through .top4h1's own
    zero-padding chain and out past its margin-top, so buttons render flush
    against the header instead of with their intended gap. flow-root opens
    a new block formatting context so child margins stay contained here. */
 display: flow-root;
}

/* Fixed Bottom / Footer */

.fixed-bottom {
 min-height: 28px !important;
}

.fixed-bottom .row {
 flex-wrap: nowrap !important;
}

.fixed-bottom .alert {
    margin-bottom: 0px;
    padding: 9px;
}

.alert-secondary {
 color: #111;
 background-color: #ede1a1;
 border-color: #ede1a1;
}

.alert-secondary_f {
 color: #111;
 background-color: ghostwhite;
 border-color: #ede1a1;
 font-size: 8px;
}

.text-muted {
 color: #111 !important;
}

/* Screen Size Specific Styles
   4 standardized tiers -- see the breakpoints comment near the top of this
   file. Small mobile and Standard mobile share one rule set (below) since
   nothing currently needs to differ between them; the small-mobile block
   right after is where narrower-only overrides go as real devices surface
   the need for them ("additional wrapping/spacing/content reductions where
   needed"). Tablet portrait now runs through 1079px (folding in what used
   to be a separate 992-1280px "small laptop" font compromise); Tablet
   landscape/desktop is one unified tier with no scaling override, same as
   today's plain desktop styling. */

@media (max-width: 767px) {
 /* #527: removed "html { zoom: 100% !important }" and the matching
    "zoom: 100% !important" on .topHSD below. Both existed only to cancel the
    per-breakpoint "html { zoom: 65%/75% }" and "html, .navbar { zoom: 65% }"
    rules in Content/Site.css -- and Site.css is not loaded by anything. No
    layout or view links it; its only reference in the repo was a
    Styles.Render("~/Content/css") branch in Infrastructure/Bundles.cs that
    nothing calls. So the rules being cancelled never applied, and the
    cancellations were no-ops too. Site.css has been deleted alongside this.
    Verified after removal: computed zoom on <html> is 1 at 320/390/576/767/
    768/1024/1440, unchanged from before.
    Note "#PdfWebControl1 { zoom: 100% }" further up is inert for the same
    reason but is deliberately left in place -- it sits in the #459 viewer-width
    block, which is Safari-sensitive and only verifiable by hand, and removing
    it gains nothing. */
 body {
  width: 100vw !important;
  overflow-x: hidden;
 }

 .topHSD {
  min-height: 120px;
 }

 * {
  font-size: 14px !important;
 }

 .adminTitle {
  margin-left: 0px !important;
  /* #495: drops the page title clear of the logo now that the nav bar below it
     is hidden and the hamburger has been pulled up alongside. */
  margin-top: 18px;
 }

 .adminTitle2 {
  margin-top: 15px;
  margin-bottom: 8px !important;
 }

 /* #495: the Cases/Documents/Contacts bar injected here duplicates the same
    three entries in the hamburger menu, so on phones it's hidden and the
    header gets that height back. The full-bleed properties below existed only
    to let the bar escape its col-6 and span the viewport -- inert while it's
    hidden, kept so restoring the bar stays a one-line change. */
 .whatevermenu {
  display: none;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
 }

 /* #495: line the hamburger up with the logo. The logo sits 15px from the left
    -- its column's Bootstrap gutter, since .sd-topnav-logo's "margin: 17px 0"
    overrides the -15px the .row class puts on that anchor. The toggle was
    ~24px from the right (the column's pr-4 plus the toggle's own p-1), which
    reads as off-centre against the logo. 11px here plus the toggle's remaining
    0.25rem lands its right edge at ~14.5px, and leaves the toggle's own
    padding alone so the tap target doesn't shrink. Deliberately a px value:
    the "* { font-size: 14px !important }" rule above also matches <html>, so
    rem is 14px in this block and pr-4 is really 21px, not 24px -- arithmetic
    in rem here would be quietly wrong.

    The brand column's 15px is pinned rather than left to Bootstrap's default
    gutter, since the 11px opposite it is calibrated against that number: the
    two are a pair, and a gutter change elsewhere shouldn't silently unbalance
    the header. */
 .sd-topnav-brand-col {
  padding-left: 15px !important;
 }

 .sd-topnav-menu-col {
  padding-right: 11px !important;
 }

 /* #495: with the nav bar hidden the column has room to spare, and
    justify-content-center left the hamburger sitting low against the logo.
    Pulls it up to sit level with the top of the header instead. */
 .burgermenu {
  margin-top: -44px;
 }

 h1,
 h2,
 h3,
 h4 {
  font-size: 22px !important;
 }

 h3 {
  font-size: 16px !important;
 }

 h4 {
  font-size: 18px !important;
 }

 .btn {
  font-size: 14px !important;
 }

 /* #240-followup3: scoped to .bdrop -- see the note above the desktop rule. */
 .bdrop.show {
  left: -118px !important;
 }

 .btn {
  border-radius: 25px !important;
  /* #527: 6px 8px, up from 4px 4px -- the buttons read as cramped against
     their labels on a phone, and the extra horizontal padding matters most
     since these are pill-shaped (border-radius 25px eats into the ends). */
  padding: 6px 8px !important;
  font-size: 14px !important;
  min-width: 65px;
  line-height: 1em;
 }

 /* New Cases List */

 #casesListTbl > #ontable > tr > td,
 .sd-list-tbl > #ontable > tr > td {
  padding: 4px !important;
 }

 /* #493: :not(.child) for the same reason as the desktop copy of this rule. */
 #casesListTbl > #ontable > tr:not(.child) > td:last-of-type,
 .sd-list-tbl > #ontable > tr:not(.child) > td:last-of-type {
  padding: 0.4rem 0rem !important;
 }

 .fixed-bottom {
  display: none;
 }

 /* Forms Library */

 div .mt-1 {
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
 }

 .specialSearchJury {
  max-width: 80%;
 }

 .specialSearch {
  min-width: 90%;
 }

 .col-sm-12 {
  padding: 0px !important;
 }

 /* #527: put a table's search box and its rows-per-page menu on ONE row on
    phones, with a compact search box. Their columns are col-12 col-sm-6
    (col-sm-4/col-sm-8 on Merge Contacts), so below 576px both are full width
    and stack -- measured at 390px: filter at top=140, length at top=182, with
    the search input sprawling to 280px.

    flex-wrap is the load-bearing part. Overriding the columns' basis alone is
    not enough: flex line-breaking measures each item's flex BASE size, and the
    filter column's auto basis includes the input's 220px below, so
    220 + icon + 4 gutters + the select still exceeds a 320px screen and the
    row would break anyway. nowrap forces one line and lets the shrink factors
    settle it instead -- the filter column shrinks, the length column doesn't.

    Applied across the whole <=767px tier rather than only below 576px, where
    the stacking actually happens: at 576-767px the two are already side by
    side (col-sm-6), and all these rules do there is hold the search box to the
    same 220px instead of 235-280px, which is the "smaller on mobile" half of
    the request. Deliberately not a new 575.98px breakpoint -- this file
    standardises on four tiers (see the comment above this block). */
 .sd-dt-controls {
  flex-wrap: nowrap;
 }

 /* Takes the space the length menu doesn't need, and is the column that gives
    way when there isn't enough. min-width:0 because the default of auto on a
    flex item refuses to shrink below its content, which would reintroduce the
    overflow nowrap is meant to avoid. The margin-bottom needs !important to
    beat Bootstrap's own: Merge Contacts' filter column carries mb-2, which
    paired with the row's align-items-center would sit it 8px above the
    dropdown once the two share a row. */
 .sd-dt-controls > [id$="DTFilter"] {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  margin-bottom: 0 !important;
 }

 /* Sized to the select (measured 73px) and not allowed to shrink, so the
    numbers stay readable however narrow the screen gets. */
 .sd-dt-controls > [id$="DTLength"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
 }

 /* 220px preferred, free to shrink (0 1) once the column runs out -- 164px at
    320px, which still holds ~20 characters. !important is unavoidable here:
    the rule it has to beat is the "#casesDTFilter .dataTables_filter
    input[type=search] { flex: 1 }" id list further down this file, and an id
    outweighs any number of classes/attributes, so no non-important selector
    written here can win. */
 .sd-dt-controls [id$="DTFilter"] input[type="search"] {
  flex: 0 1 220px !important;
 }

 /* #527: right-align the relocated rows-per-page menus. Their columns carry
    justify-content-sm-end (justify-content-md-end on Forms and Contacts), so
    below that breakpoint -- where the column is full width and stacks above
    the search box -- they fall back to flex-start and the dropdown sits on
    the left. The attribute-suffix selector covers all of the relocated menus
    at once (#casesDTLength, the three Documents tabs, #formsDTLength,
    #contactsDTLength, #mergeDTLength) rather than needing a new id listed
    here every time another table gets the same treatment; every one of those
    containers already carries .d-flex, which is what makes justify-content
    the right lever. Grant Access's menu is not one of them -- it stays inside
    its real .dataTables_wrapper and is right-aligned via text-align further
    down this file.

    #527-followup: this now only actually does work on Forms and Contacts.
    Their control rows are NOT .sd-dt-controls (each carries a third control --
    the Jurisdiction and Case pickers), so they still stack full-width on
    phones and this is what pushes their menu right. On the .sd-dt-controls
    rows the column above shrink-wraps the select, leaving justify-content
    nothing to distribute. Kept unscoped so it kicks in for whichever of those
    rows stacks. */
 div[id$="DTLength"] {
  justify-content: flex-end;
 }

 /* Documents */

 /* #527: drops the Packets/Forms/Intake Forms tab strip clear of the Add
    Forms / Custom Packets button row above it. Scoped to .sd-documents even
    though #tabs is currently unique to this screen -- ids get copy-pasted
    across views in this repo (see the casesListTbl / caseDocsTbl notes) and a
    bare #tabs would follow the markup wherever it went next. Positive margin
    only: per the .sd-documents .nav-tabs note earlier in this file, a
    *negative* margin-top on #tabs pulls the tabs under the action row's
    hit-testable box and silently breaks clicking them. */
 .sd-documents #tabs {
  margin-top: 12px;
 }

 body
  > div.container-fluid1.body-content
  > div.top4h1
  > div.container-fluid.ng-scope
  > div:nth-child(4)
  > div.col-12.col-sm-12.mt-1
  > button {
  right: 0px !important;
  margin-bottom: 0px !important;
  position: relative !important;
  margin-top: -30px;
 }

 #caseDocsTbl > thead > tr > th {
  height: unset !important;
  border: 0px;
 }

 /* #526: these three stay UNqualified by .sd-docs-tbl -- they were written for
    the *client portal's* #caseDocsTbl (Views/Client/Index.cshtml), whose th
    carry col-md-1/col-md-2/form-check-input.
    Careful, though: these are descendant selectors, and the Documents screen's
    Document Name *td* also carries `col-sm-2 col-md-2` (accountLib.cs:1406) even
    though none of its th do -- so .col-md-2 does reach it. That is also why
    Document Name needed an explicit !important width per tier below: Bootstrap's
    own .col-sm-2/.col-md-2 put `max-width: 16.666%` on that cell, and until #526
    there was no nth-child(3) rule to override it. Left unqualified rather than
    narrowed, because narrowing them is a separate behaviour change that isn't
    part of this fix. */
 #caseDocsTbl .col-md-1 {
  max-width: 45% !important;
  min-width: 45% !important;
  text-align: left !important;
 }

 #caseDocsTbl .col-md-2 {
  float: left !important;
 }

 #caseDocsTbl .form-check-input {
  left: 25px;
  top: -5px;
 }

 /* Document */
 div.row.clearfix {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
 }

 .col-4 {
  max-width: 100%;
 }

 /* #224: was div.col-md-4.col-lg-4.main / div.main .row -- .main's only live
    usage (docCase_V2.cshtml's left column) already carries the .sd-doc-left-col
    class added in phase 1, so this just retargets to that; no markup change
    needed. .main's other usages are dead/unreached pages (docCase.cshtml,
    docCase_V3.cshtml, the unlinked simulation.cshtml). */
 .sd-doc-left-col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0px;
 }

 .sd-doc-left-col .row {
  margin: 0px !important;
 }

 /* #308: mobile is read-only -- hide the Contacts/Assets instances panel and
    its slide-out toggle (the header row above it, with back/download/print/
    help, stays visible), and hide the Update Data / Font / Add Text icons
    (all three share .showthis, also the class lock_doc() hides for the
    existing mode=="view" read-only path). .sd-pdf-panel takes the full row
    width in place of the now-empty instances panel.

    #528: .fieldExpreAtt is the "Selected Field: {expression}" strip that
    wsCaseDoc_ext1_v0.js writes on field select. It reads as an editing
    affordance on a screen where nothing is editable, so it goes too. Note it
    needed adding here explicitly rather than being covered by the panel rule
    above: it is a SIBLING of #caseDocInstancesPanel, not a child -- deliberately,
    per #279, because that panel's innerHTML gets wholesale-replaced by JS. The
    element only exists in docCase_V2.cshtml, so this is safe to leave unscoped.
    The font face/size selectors are the other half of #528, but they live inside
    the RAD PDF iframe where this file cannot reach -- see
    Scripts/sd.radpdfMobileChrome.js. */
 #caseDocInstancesPanel,
 .sd-doc-panel-toggle,
 .showthis,
 .fieldExpreAtt {
  display: none !important;
 }

 .sd-pdf-panel {
  flex: 0 0 100% !important;
  max-width: 100% !important;
 }

 .sd-mobile-readonly-notice {
  display: block !important;
 }

 /* #496: RAD PDF's toolbar chrome is trimmed on phones too, but deliberately
    NOT from here -- the viewer lives in an iframe and stylesheets don't cross
    that boundary, so a rule in this file would look right and do nothing.
    Scripts/sd.radpdfMobileChrome.js injects into the frame document instead.
    Left as a note so the next person doesn't re-add the dead rule. */

 /* #224: removed div.col-sm-12.col1-12.col-md-12 (+ its button descendant
    rule) here -- col1-12 is a typo for col-12 that doesn't exist anywhere in
    the view tree, live or dead. */

 /* #639: 0px here for the same reason as the base rule above -- kept in step
    with it so the phone tier doesn't grow the outer scrollbar the desktop
    one just lost. */
 .radpdfFrame {
  margin-bottom: 0px;
  height: 80vh !important;
 }

 #PdfWebControl1 {
  height: 120% !important;
  zoom: 250%;
  margin-bottom: 30px;
 }

 /* #499: sign-in header (_topHeaderType-0). The markup's col-3/col-6/col-3 adds
    up to the full row on its own, so once flex-nowrap stops it wrapping the
    columns have to be re-proportioned by hand for phone widths -- 25% of a 390px
    screen is only ~97px, which is what made the logo tiny. Sizes are px/vw here
    rather than rem for the same reason as #495's header rules: the "*
    { font-size: 14px !important }" above also matches <html>, so 1rem is 14px
    inside this block and rem arithmetic would be quietly wrong.

    Nothing here applies above 767px -- the desktop header is untouched. */

 /* The middle column only ever holds a title on one transient screen -- the
    forced-password-change step, where appint.js's "tempPass" branch writes
    WELCOME into .adminTitle -- and it is empty on the sign-in and forgot-
    password views. Measured on a 360px phone there is room for the logo, the
    date/time, and 50px of title against the 68px WELCOME needs, so something
    had to give; this hides the title rather than shaving the logo, since the
    logo being too small is half of what #499 is about. Nothing is lost on
    phones: that same step also sets the card's own subtitle to "Welcome! Before
    we get started, let's change to a new password.", which carries the message
    in full. Restore by swapping this for the flex:1 1 0 / min-width:0 /
    overflow:hidden set it replaced -- but re-measure the title first, its
    nested .row's Bootstrap -15px side margins are uncancelled here (the
    "col-sm-12 { padding: 0px !important }" rule above strips the inner padding
    that would normally offset them), so the h3 renders 30px wider than the
    column that clips it and loses characters off both ends. */
 .sd-login-header .sd-login-title-col {
  display: none;
 }

 /* Fixed-width logo: SuperDocs.png is 600x200 (3:1), so with background-size:
    contain the *width* of this box is what sets the rendered logo size. The old
    col-3 gave it ~97px on a 390px screen, rendering the logo ~97x32; 190px
    (capped at 48vw so narrow phones keep the date/time on the same line)
    renders it ~190x63. The 15px margin-left matches the signed-in header's logo
    inset (#495); padding is zeroed because background-origin defaults to the
    padding box, so col-3's 15px gutter would otherwise eat into the logo rather
    than offset it.

    "left center" is the other half of the fix: the default background-position
    is "0% 0%", which pinned a contain-scaled logo to the *top* of its box and
    left dead space underneath -- the "not vertically centered" symptom.
    .navbar's own align-items:center centers the box itself in the 115px nav. */
 .sd-login-header .sd-login-brand-col {
  flex: 0 0 auto;
  width: 190px;
  max-width: 48vw;
  min-height: 64px;
  margin-left: 15px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-position: left center;
 }

 /* Sized to its content so the logo and the date/time sit at opposite ends of
    one line (.navbar's own justify-content:space-between does the pushing once
    the middle column is out). The padding-right replaces .login-datetime's 40px
    margin, zeroed below -- as a margin it counted toward the flex line's
    overflow, which is part of what made the row wrap in the first place. */
 .sd-login-header .sd-login-datetime-col {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 0 !important;
  padding-right: 12px !important;
 }

 /* display:block, because .form-inline makes this a flex row: the three <br>
    elements become blockified flex items instead of line breaks, so the date
    lines only stacked by accident when the column was too narrow to fit them
    side by side. As a block the <br>s do what the markup intends. nowrap keeps
    "September 30, 2026" (the longest date this renders) on one line, and 13px is
    what holds that line to ~113px, which is what leaves room for the logo
    alongside it down to a 320px screen. */
 .sd-login-header .login-datetime {
  display: block;
  white-space: nowrap;
  text-align: right;
  margin-right: 0 !important;
  font-size: 13px !important;
  line-height: 1.35;
 }

 /* #224: was #loginForm > div:nth-child(3) -- positional index into
    #loginForm's children. Now a semantic class on the password input-group
    itself. */
 .signin-password-group {
  margin-left: 0px !important;
  left: 0 !important;
  right: 0 !important;
 }
 /* #224: was #wrap > div:nth-child(1) > div.signINCss1 -- the positional
    prefix was redundant, .signINCss1 alone already uniquely identifies this
    element. */
 .signINCss1 {
  flex: 0 0 90% !important;
  max-width: 90% !important;
 }
 /* #224: was #wrap > div.row.clearfix.justify-content-center >
    div.col-sm-6.col-6.offset-sm-1.column -- the mobile-breakpoint copy of the
    same rule de-brittled in phase 1; reuses that .signin-form-col class. */
 .signin-form-col {
  flex: 0 0 82% !important;
  max-width: 82% !important;
 }
 ul.thsubMenu li {
  min-width: 10px !important;
  margin-left: 10px;
  margin-right: 10px;
 }

 /* This selector used to appear twice across the old <=575.98px and
    576-767.98px blocks with two different values (45% and 33.3%) -- since
    both blocks matched the same widths at the low end, only the later
    (33.3%) one ever actually applied. Keeping the one that was live. */
 #ontable > tr > td.col-sm-1 {
  max-width: 33.3% !important;
 }

 /* Pushes the Actions cell to the right edge on phones. #493: must skip
    DataTables Responsive's child rows. A child row is a single
    <td class="child" colspan="N"> holding the collapsed columns, so it is also
    :last-of-type and was matching here -- and "float" on a table-cell forces
    display:block (CSS 2.1 9.7 display fixup), which drops the cell out of the
    table box entirely and threw the expanded Created/Modified/Closed values
    off-screen. #ontable is the tbody id on the Documents screen too, whose
    child rows were matching this the same way. */
 #ontable > tr:not(.child) > td:last-of-type {
  min-width: 100px;
  float: right;
  margin-right: 10px;
 }

 /*login form*/
 #loginForm.form-signin div.col-sm-4 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
 }

 /* #499-followup: indent the Forgot-password link on phones. Its row carries
    .row.clearfix, so the mobile full-bleed rule above (width:100vw; left:50%;
    margin-left:-50vw) pulls the whole actions row out of the sign-in card and
    its first column starts at the viewport edge -- measured 15px in, against
    50px for the form fields at 390px, which is what left the link looking
    detached from the field stack. Mobile only: on desktop the row stays inside
    the card and the link already lines up with the fields exactly (both at
    x=496 on a 1440px viewport), so an indent there would break that.

    Scoped to the actions row, but note that matches both places the class is
    used -- this link on Home/Index and "Back to Sign In" on Account/Recover,
    which sit in identical markup and had the identical misalignment.

    nowrap because the indent eats into a col-6 that is only ~150px wide at
    360px: 42px of it leaves ~108px for a ~110px label, so "Forgot password?"
    broke onto two lines there without this. Overhanging the column by those two
    pixels is harmless -- nothing clips it, and the Submit button's column does
    not start until x=180 -- whereas the wrap was plainly visible. */
 .sd-login-actions-row .sd-forgot-link {
  margin-left: 42px;
  white-space: nowrap;
 }

 /* #502: opt the Recover page's actions row out of both rules above, so on
    phones it stays inside the sign-in card and aligns the same way it does on
    desktop -- the grid gutters, not a fixed offset. The 42px indent above can't
    track a card whose width is a percentage of the viewport: measured against
    the Email field's edges it still left "Back to Sign In" 14.8px (320px),
    18.4px (360px) and 21.1px (390px) short, and Submit overhanging the card's
    right edge by ~30px at all three. Inside the card those offsets are 0 at
    every width tested (320/360/390/768/1440).

    Kept scoped to Recover: Home/Index has a captcha-free, shorter card and its
    #499 layout is user-confirmed, so it keeps the full-bleed row and the 42px
    indent until anyone asks otherwise.

    margin-left/right must be -15px, not 0 -- the columns' 15px padding is what
    the .row gutters cancel, so zeroing them would inset both actions by 15px.
    The selector needs .row.clearfix's two classes plus this one to outweigh the
    (0,2,1) full-bleed rule above. */
 div.row.clearfix.sd-recover-actions-row {
  width: auto;
  position: static;
  left: auto;
  right: auto;
  margin-left: -15px;
  margin-right: -15px;
 }

 /* (0,2,1): beats .sd-login-actions-row .sd-forgot-link. nowrap stays inherited
    from it -- the link has ~121px of column at 390px for a ~110px label. */
 div.sd-recover-actions-row .sd-forgot-link {
  margin-left: 0;
 }
}

/* Small mobile: narrower-only overrides layer on top of the block above
   (loads after it, so equal-specificity rules for the same selector win
   here for widths <= 360px). Empty for now -- fill in as real small-phone
   issues are found. */
@media (max-width: 360px) {
}

/* Shared by Small mobile + Standard mobile + Tablet portrait (i.e.
   everything below the Tablet landscape/Desktop tier). These three rules
   held the same value in every mobile/tablet breakpoint block before this
   cleanup and were never set for Desktop, so they collapse into one
   below-desktop rule with no behavior change. */
@media (max-width: 1079px) {
 .juriList {
  max-height: 65vh;
 }

 #addTemplToDoc {
  margin-left: -80px;
 }

 .tableCustomPacket td:first-child {
  /* make the very first column take up half the table */
  width: 95%;
  max-width: 100%;
 }

 .tableCustomPacket td:not(:first-child) {
  /* remove any max-width constraint on the other columns */
  max-width: none;
  /* #465: 88px -> 50px, matching the base rule so the icon columns aren't over-spaced. */
  width: 50px;
  min-width: 50px;
 }

 .tableCustomPacket th:not(:first-child) { display: none; }
}

@media (min-width: 768px) and (max-width: 1079px) {
 body {
  width: 100vw !important;
  overflow-x: hidden;
 }

 .topHSD {
  zoom: 70% !important;
  min-height: 85px !important;
 }

 * {
  font-size: 14px !important;
 }

 /* Contact-selection dialog only: drop the table content one point below the
    14px tablet base to free horizontal room so the columns stay tight on the
    narrower tablet-portrait dialog (#309). Desktop (>=1080px) keeps full size.
    Higher id-specificity + !important beats the `*` rule just above. */
 #contactListTbl th,
 #contactListTbl td {
  font-size: calc(14px - 1pt) !important;
 }

 /* #359: compact Forms-table header labels on the tablet range to free width.
    #526: .sd-docs-tbl-qualified along with the rest of the group. */
 #caseDocsTbl.sd-docs-tbl thead .hdr-full { display: none !important; }
 #caseDocsTbl.sd-docs-tbl thead .hdr-short { display: inline !important; }

 h1,
 h2,
 h3,
 h4 {
  font-size: 22px !important;
 }

 .btn {
  font-size: 14px !important;
 }

 /*login form*/
 #loginForm.form-signin div.col-sm-4 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
 }
}

/* Tablet landscape and Desktop: one unified tier, no scaling override --
   same plain styling desktop screens already got above the old 1280px
   cutoff, now starting at 1080px instead. */
@media (min-width: 1080px) {
 #myModalManager #ontable > tr > td:nth-child(6) { white-space: nowrap; }

 #myModalManager > div.modal-lg { max-width: 1500px !important; }

 div.mycontactList div.col-5 { max-width: 220px !important; }
 div.mycontactList div.col-3 { max-width: 80px !important; }
 /* #224: removed button.btn.btn-link.btn-block.text-left.col-4 here -- no
    button anywhere in the view tree combines btn-link and btn-block. */

 #userInfo {
  background-color: #f8a130 !important;
  border: 6px solid #f8a130 !important;
  border-radius: 4px;
 }

 #PdfWebControl1 {
  margin-bottom: 0px;
 }
}

/* Action icon style used in server-generated table rows */
.sd-icon {
 color: #0a368f;
 cursor: pointer;
}

/* #624: a button that should read as a bare icon -- no border, no background, no hover or
   focus chrome. Pair it with .sd-icon, which supplies the colour and the pointer.

   Why a <button> at all when the rest of this app uses clickable <i> elements: an <i> is not
   focusable, not keyboard-operable and announces nothing to a screen reader. Keeping the
   real element and removing its appearance costs nothing and is the better default for
   anything new.

   The focus outline is REPLACED, not removed. Bootstrap's .btn box-shadow ring is what makes
   this look like a button, but deleting a focus indicator outright leaves a keyboard user
   with no idea where they are, so it becomes a plain outline instead. */
.sd-icon-btn {
    border: 0;
    background: none;
    padding: 0;
    box-shadow: none !important;
    line-height: 1;
}

.sd-icon-btn:hover,
.sd-icon-btn:focus,
.sd-icon-btn:active {
    border: 0;
    background: none;
    box-shadow: none !important;
}

/* Inherit .sd-icon's colour in every state -- Bootstrap's :hover/:focus rules would
   otherwise darken it and reintroduce the button feel this class exists to remove. */
.sd-icon.sd-icon-btn,
.sd-icon.sd-icon-btn:hover,
.sd-icon.sd-icon-btn:focus,
.sd-icon.sd-icon-btn:active {
    color: #0a368f;
}

.sd-icon-btn:focus-visible {
    outline: 2px solid #0a368f;
    outline-offset: 2px;
}

/* Greyed-out variant for an action that doesn't apply to a given row (e.g.
   Sign Request when the document has no signature fields configured) --
   overrides .sd-icon's color/cursor since both classes are applied together. */
.sd-icon-disabled {
 color: #a0a0a0 !important;
 cursor: default !important;
}

/* #240-followup2: icon-only access-level dropdown buttons (Share Case screen) and their
   legend -- see contactsLib.buildShareCaseData / casesAccess.cshtml. */
.access-dropdown .btn {
 padding: 0.25rem 0.5rem;
 line-height: 1;
}
/* #447: btn-outline-secondary fills dark grey with white text on hover/focus/open, which
   reads as disabled/pressed on these icon toggles. Use the brand cream and keep the icon
   dark so it stays legible. Covers the open state (.show) too, not just hover, so the
   button doesn't flash dark grey while its menu is open. Class-scoped selectors outrank
   Bootstrap's, so no !important needed. */
.access-dropdown .btn-outline-secondary:hover,
.access-dropdown .btn-outline-secondary:focus,
.access-dropdown .btn-outline-secondary:active,
.access-dropdown .btn-outline-secondary.dropdown-toggle:focus,
.access-dropdown .btn-outline-secondary.dropdown-toggle.show {
 background-color: #F6F0D0;
 border-color: #F6F0D0;
 color: #212529;
 box-shadow: none;
}
.access-dropdown .dropdown-item i {
 width: 1.1em;
 text-align: center;
}
/* Icon-only items (#240-followup4) don't need Bootstrap's default text-label sizing --
   min-width: 10rem on .dropdown-menu and 0.25rem 1.5rem item padding left a lot of empty
   space on either side of a single centered icon. */
.access-dropdown .dropdown-menu {
 min-width: 0;
 padding: 0.25rem 0;
}
.access-dropdown .dropdown-item {
 padding: 0.4rem 0.9rem;
}
.sd-access-legend {
 font-size: 0.9rem;
}
.sd-access-legend .legend-item {
 white-space: nowrap;
}
.sd-legend-group {
 font-weight: 600;
}
/* Share Case screen (casesAccess.cshtml): "Access List"/"Grant Access" headings
   and the View/Intake Only (blue) and Edit/Intake and View (green) access icons
   use these brand colors instead of Bootstrap's text-primary/text-success. */
.sd-access-heading {
 color: #0A368F;
}
.sd-access-blue {
 color: #0672C7;
}
.sd-access-green {
 color: #2AA876;
}

/* #607: the Share Case "Invite" button (JurDocs Portal Status column, rendered by
   contactsLib.buildShareCaseData). A full replacement for btn-outline-primary rather than an
   override of it -- Bootstrap's hover/active/focus rules all repaint with its own #007bff, so
   overriding only the resting colour would leave the button turning Bootstrap blue the moment
   the pointer touched it. Sits beside the amber Pending button, which is untouched: the two
   colours are what tells the states apart. */
.sd-btn-invite {
 color: #0A368F;
 border-color: #0A368F;
 background-color: transparent;
}
.sd-btn-invite:hover,
.sd-btn-invite:not(:disabled):not(.disabled):active,
.sd-btn-invite:not(:disabled):not(.disabled).active {
 color: #fff;
 background-color: #0A368F;
 border-color: #0A368F;
}
.sd-btn-invite:focus,
.sd-btn-invite.focus {
 box-shadow: 0 0 0 0.2rem rgba(10, 54, 143, 0.4);
}

/* #608: the Share Case "Pending" button, worn WITH btn-outline-warning rather than instead of it.
   Bootstrap's amber #ffc107 as text on white is 1.6:1 -- unreadable, and Pending is the state a
   contact sits in from the moment the invite email is sent, so it is the label a firm user reads
   most often. #7C5118 is the same hue carried down to 6.9:1.

   Resting state ONLY. Hover, active and focus are deliberately left to Bootstrap: they live on
   :hover/:active selectors, which outrank this plain class anyway, so the amber fill with dark
   text is preserved by construction rather than by copying its values here -- a copy would be free
   to drift from the button next to it. Contrast there is already fine (9.5:1). */
.sd-btn-pending {
 color: #7C5118;
 border-color: #7C5118;
}

/* Client-portal setup-link modal (#myshowcopy, _EndUser_main_Layout.cshtml): the signed
   setup link/portal URL is injected as both href and the anchor's own text (see
   getSetupLink/sendNoti in appCaseAccess.js), and a long unbroken token string doesn't wrap
   on its own, so it overflowed past the modal's edges instead of staying inside the body. */
/* #607: the client-email dialog's intro line ("Send this invitation to <name>, or copy it into
   your own email.") -- set by sd.clientEmailDialog.js per caller, so both Share Case's Invite and
   the Documents screen's Sign Request get the brand deep blue from one rule. The view no longer
   puts .text-primary on its wrapper; see the comment there. */
.sdEmailIntro {
 color: #0A368F;
}

.PC_Link,
.PC_Portal {
 display: inline-block;
 max-width: 100%;
 word-break: break-all;
 overflow-wrap: break-word;
}

/* #230: Form #/Name cells toggle the row's Select checkbox on click */
#templateListTable tbody td:nth-child(2),
#templateListTable tbody td:nth-child(3) {
 cursor: pointer;
}

/* DataTables sort arrows: the global * { font-size:18px } rule causes
   the pseudo-elements to inherit 18px, making .8em = 14.4px — far larger than
   DataTables' line-height:9px was designed for. The oversized characters
   overflow their line-height box and drift below the 50% anchor, so the
   arrows appear below the header text instead of beside it.
   Fix: pin both pseudo-elements to a small, self-consistent size. */
table.dataTable thead th::before,
table.dataTable thead th::after {
    font-size: 11px !important;
    line-height: 1 !important;
}
/* Keep a small gap between the ↑ and ↓ arrows */
table.dataTable thead th::after {
    margin-top: 2px;
}
.dataTables_wrapper{
    padding-top:10px;
}
/* DataTables pagination — grey theme, spacing, reduced font size */
.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 4px;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
 color: #6c757d;
 background-color: #f8f9fa;
 border-color: #dee2e6;
 font-size: 0.8rem;
 padding: 0.3rem 0.6rem;
 border-radius: 4px;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
 color: #fff;
 background-color: #6c757d;
 border-color: #6c757d;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
 color: #fff;
 background-color: #868e96;
 border-color: #868e96;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
 color: #adb5bd;
 background-color: #f8f9fa;
 border-color: #dee2e6;
}

/* DataTables page-length select
   #280: was scoped under .dataTables_wrapper, but this control is a custom
   relocated copy of DataTables' native length menu (see .dataTables_length
   placement in the case/document list views) that lives outside the real
   .dataTables_wrapper -- so the old selector never matched it. The global
   font-size:18px!important override inflates this <select>'s line-height to
   27px (1.5x, from Bootstrap's .custom-select base rule) while its height
   stays fixed at Bootstrap's calc(1.8125rem + 2px) = 38.25px, sized for a
   much smaller font -- the oversized line box overflows the control, which
   reads as the selected number sitting uncentered and clipped. */
.dataTables_length select {
 line-height: 18px;
}

/* #527: DataTables wraps the rows-per-page <select> in a <label>, and
   Bootstrap's reboot puts margin-bottom: .5rem on every <label>. In a row with
   align-items:center that margin counts as part of the item's height, so
   centring the item leaves the SELECT's centre half the margin above the search
   input's -- measured 4.5px off at every width tested (320 through 1440). The
   label is a single-line wrapper with nothing beneath it, so the margin buys
   nothing.

   4.5px rather than 4px because the "* { font-size: 18px !important }" at the
   top of this file matches <html> as well, making 1rem 18px and .5rem 9px --
   worth remembering before doing rem arithmetic anywhere in this file.

   Global, not mobile-only: the offset was present at every width, phones just
   made it obvious once the two controls started sharing a row. Forms, Contacts
   and Merge Contacts already zero this in their own <style> blocks
   ("label { margin: 0 }"); this brings Cases and the three Documents tabs into
   line and makes those inline copies redundant. They're left alone -- they also
   set display:flex/gap, which this rule has no opinion on. */
.dataTables_length label {
 margin-bottom: 0;
}

/* Relocated DataTables filter controls (Cases, Documents tabs, Contacts)
   #281: the search box was left behind in its own row when the length
   dropdown got relocated up near the action buttons, so they no longer
   lined up. Once moved to sit beside length, the native
   <label>Search:<input></label> markup still stacks -- the <input> carries
   Bootstrap's .form-control (display:block; width:100%), which forces a
   line break inside the label. Flexing the label puts "Search:" and the
   input back on one line, with the input filling the column responsively
   (matching Contacts, which already used this pattern) instead of stacking
   or wrapping at its default width. */
#casesDTFilter .dataTables_filter,
#formsDTFilter .dataTables_filter,
#intakeDTFilter .dataTables_filter,
#packetsDTFilter .dataTables_filter,
#contactsDTFilter .dataTables_filter,
#mergeDTFilter .dataTables_filter {
 display: block;
 width: 100%;
}
#casesDTFilter .dataTables_filter label,
#formsDTFilter .dataTables_filter label,
#intakeDTFilter .dataTables_filter label,
#packetsDTFilter .dataTables_filter label,
#contactsDTFilter .dataTables_filter label,
#mergeDTFilter .dataTables_filter label {
 display: flex;
 align-items: center;
 width: 100%;
 margin: 0;
}
#casesDTFilter .dataTables_filter input[type="search"],
#formsDTFilter .dataTables_filter input[type="search"],
#intakeDTFilter .dataTables_filter input[type="search"],
#packetsDTFilter .dataTables_filter input[type="search"],
#contactsDTFilter .dataTables_filter input[type="search"],
#mergeDTFilter .dataTables_filter input[type="search"] {
 flex: 1;
 min-width: 0;
}

/* DataTables search input width */
.dataTables_wrapper .dataTables_filter input {
    width: 400px !important;
    margin-right: 5px !important;
}

/* Override dataTables.bootstrap4.css which right-aligns the filter within its cell */
div.dataTables_wrapper div.dataTables_filter {
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: .25em !important;
}

/* DataTables table light border */
.dataTables_wrapper table.dataTable {
 border: 1px solid #dee2e6 !important;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable tbody td {
 border-color: #dee2e6 !important;
}

/* Column headers were browser-default bold (th { font-weight: bold }); the
   design wants a lighter semi-bold weight across every DataTables-driven
   table (cases, documents, contacts, select-contact dialog, etc). */
.dataTables_wrapper table.dataTable thead th {
 font-weight: 600;
}

/* Same header-weight fix for list-style tables that aren't DataTables
   instances (custom packet list, packet forms, role type preferences
   [sorttable.js, not DataTables], client intake forms library). */
.tableCustomPacket thead th,
.pcktFormsTbl thead th,
#templateListTable thead th,
.intakeList thead th {
 font-weight: 600;
}

/* Active case selection: row highlight (sd-row-active) already indicates
   the active case, so the icon is intentionally left its normal blue
   (no color override here). */

/* #448-followup: keep both Share Case tables fluid. With DataTables autoWidth off
   (appCaseAccess.js) the table follows width:100%; overflow-wrap:anywhere lets long,
   space-less values (emails especially) break onto another line instead of forcing the
   column -- and thus the whole table -- wider than its container. This is what makes the
   Grant Access table shrink with the viewport like the Access List one, replacing the old
   fixed ~1430px inline width. */
#accessListTbl,
#grantAccessTbl {
    width: 100% !important;
}
#accessListTbl td,
#accessListTbl th,
#grantAccessTbl td,
#grantAccessTbl th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* #668 Share Case column budget -- this is what decides WHEN each column
   collapses into the carat, and it only exists because of the rule directly
   above it.

   DataTables Responsive measures a column by cloning the table into a 1px
   probe with `width:auto` and reading each cloned header cell's offsetWidth
   (docs/frontend-ui-notes.md 2, #526), so it reads MIN-CONTENT, and
   `overflow-wrap: anywhere` drops min-content to roughly one character.
   Measured on tests/repro-share-case-table.html before this block existed:
   41 / 42 / 96 / 96 / 96 / 36 px, summing to 407px for the whole six-column
   Access List -- so Responsive concluded everything fitted at every width a
   phone can produce and collapsed nothing at all, while the real table went
   on squeezing six columns into 360px. `min-width` is the one property that
   raises a column's min-content contribution under automatic layout, and
   `!important` is required because the probe puts an inline `min-width: 0`
   on every cloned header cell.

   `width` and `min-width` are declared equal, per the same rule. These tables
   keep table-layout:auto (unlike #caseDocsTbl), so `width` is only a
   preference and the surplus on a wide screen is shared out over the columns
   -- roughly in the 2/3/2/2/2/2 proportion the col-md-* classes on the cells
   already ask for. There is deliberately NO max-width and no percentage
   anywhere here: a percentage resolves against that 1px probe and silently
   disables Responsive entirely.

   The budget, and what it buys (container width, i.e. rather less than the
   viewport once the fluid container's padding is taken off):
     Access List  150+210+105+105+125+135 = 830px  all six columns
                  under 830 -> Role goes; under 695 -> SuperDocs Access;
                  under 570 -> Email.
     Grant Access 150+210+105+125+135     = 725px  all five columns
                  (no JurDocs Status column, so it holds Role ~105px longer)
   Keep in step with the responsivePriority lists in appCaseAccess.js
   initCaseAccessDataTables(), which fix the ORDER these are given up in. */

/* Shared first three columns: Name (holds the carat), Email, JurDocs Access.
   The td half must skip Responsive's child row and the empty-table row -- both
   are a single colspan cell sitting at nth-child(1), so an unguarded rule for
   column 1 pins the expanded detail list to 150px. */
#accessListTbl > thead > tr > th:nth-child(1),
#accessListTbl > tbody > tr > td:nth-child(1):not(.child):not(.dataTables_empty),
#grantAccessTbl > thead > tr > th:nth-child(1),
#grantAccessTbl > tbody > tr > td:nth-child(1):not(.child):not(.dataTables_empty) {
    width: 150px !important;
    min-width: 150px !important;
}
#accessListTbl > thead > tr > th:nth-child(2),
#accessListTbl > tbody > tr > td:nth-child(2),
#grantAccessTbl > thead > tr > th:nth-child(2),
#grantAccessTbl > tbody > tr > td:nth-child(2) {
    width: 195px !important;
    min-width: 195px !important;
}
#accessListTbl > thead > tr > th:nth-child(3),
#accessListTbl > tbody > tr > td:nth-child(3),
#grantAccessTbl > thead > tr > th:nth-child(3),
#grantAccessTbl > tbody > tr > td:nth-child(3) {
    width: 105px !important;
    min-width: 105px !important;
}

/* Access List only: JurDocs Status (4), SuperDocs Access (5), Role (6). */
#accessListTbl > thead > tr > th:nth-child(4),
#accessListTbl > tbody > tr > td:nth-child(4) {
    width: 105px !important;
    min-width: 105px !important;
}
#accessListTbl > thead > tr > th:nth-child(5),
#accessListTbl > tbody > tr > td:nth-child(5) {
    width: 125px !important;
    min-width: 125px !important;
}
#accessListTbl > thead > tr > th:nth-child(6),
#accessListTbl > tbody > tr > td:nth-child(6) {
    width: 110px !important;
    min-width: 110px !important;
}

/* Grant Access only: one column short of the Access List from here on --
   SuperDocs Access (4) and Role (5). */
#grantAccessTbl > thead > tr > th:nth-child(4),
#grantAccessTbl > tbody > tr > td:nth-child(4) {
    width: 125px !important;
    min-width: 125px !important;
}
#grantAccessTbl > thead > tr > th:nth-child(5),
#grantAccessTbl > tbody > tr > td:nth-child(5) {
    width: 110px !important;
    min-width: 110px !important;
}

/* #668 The expanded detail row. Responsive's own stylesheet only lays out the
   <ul>; these two tables need the rest, because the collapsed cells are not
   plain text -- Email is an <input> and SuperDocs Access is a dropdown button,
   both MOVED here by the listHiddenNodes renderer (see appCaseAccess.js), so
   they arrive at whatever width their content asks for.
   The child row is deliberately given its own tint rather than inheriting the
   parent's stripe: DataTables puts .odd/.even on data rows only, so a child
   row cannot match its parent, and a neutral panel reads as "this belongs to
   the row above" better than a stripe that agrees with it half the time. */
#accessListTbl > tbody > tr.child > td.child,
#grantAccessTbl > tbody > tr.child > td.child {
    background-color: #F7F7F4;
    box-shadow: inset 3px 0 0 #0A368F;
    padding: 0.5rem 0.75rem;
}
#accessListTbl > tbody > tr.child ul.dtr-details,
#grantAccessTbl > tbody > tr.child ul.dtr-details {
    display: block;
    width: 100%;
}
/* Label above value, always. Responsive's own stylesheet puts the two side by side with
   a 75px label gutter, which works for short text but not for the two controls: the
   email <input> and the access dropdown are wider than what is left, so they wrapped
   under their label anyway while Role stayed inline -- three rows in the same list, laid
   out two different ways. Stacking every one of them is the same result, stated. */
#accessListTbl > tbody > tr.child span.dtr-title,
#grantAccessTbl > tbody > tr.child span.dtr-title {
    display: block;
    min-width: 0;
    margin-bottom: 0.15rem;
}
/* The moved email <input> carries col-12 from contactsLib, which is a flexbox
   column class; inside the detail list it just needs to stop short of the
   right edge rather than fill a grid cell. */
#accessListTbl > tbody > tr.child input[id^="uNotify-"],
#grantAccessTbl > tbody > tr.child input[id^="uNotify-"] {
    display: inline-block;
    max-width: 320px;
}

/* DataTables stripe — clear the box-shadow overlay DataTables 1.13.x places on
   td cells (box-shadow: inset 0 0 0 9999px rgba(0,0,0,.05)) so transparent td
   cells let the tr background show through. All tables consolidated here. */
#caseDocsTbl td,
#caseDocsTbl_IN td,
#caseDocsTbl-P td,
#casesListTbl td,
.sd-list-tbl td,
#accessListTbl td,
#grantAccessTbl td,
#contactListTbl td {
    box-shadow: none !important;
}

/* Documents table — status dropdown */
.doc-status-sel { font-size: 12px; padding: 2px 4px; height: auto; display: inline-block; }

/* Documents table — disabled status (Blank, or view-only permission) isn't
   clickable, so it shouldn't show the hand cursor the base `select` rule
   applies; only the interactive Draft/Final dropdown should. */
.doc-status-sel:disabled { cursor: default; }

/* Documents table — blank status: hide arrow, transparent bg/border (#372) */
.doc-status-sel-blank {
 background-color: transparent !important;
 border: 0px solid transparent !important;
 padding: 2px 10px;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
}

/* Documents table column widths (#371). Created/Modified/Status/Sign Status/
   Actions and Form # are fixed so the table's total width is predictable at
   desktop widths; Document Name gets whatever space is left. nth-child is
   1-indexed and includes the carat control column #357 added as the new
   column 1, so these targets sit one column later than the original version
   of this rule, which was never updated for that shift: Form # (2) was
   getting Document Name's old 40%, Document Name (3) had no width at all
   plus a stray nowrap, and every real data column was completely
   unconstrained. That's what let Document Name balloon and made the table's
   rendered width unpredictable enough to trip DataTables Responsive's
   column-hiding even on desktop.
   table-layout:fixed is required for Document Name to actually behave as
   the flexible column: under the default auto layout, a column with no
   width and white-space:nowrap still grows to fit its full unwrapped
   content (a long document name can easily be 600-800px+ at this site's
   base font size) -- overflow:hidden/text-overflow:ellipsis never engage
   because nothing bounds the box in the first place, so the table's real
   rendered width balloons far past the container and DataTables Responsive
   hides columns (by priority, then order) until what's left fits -- this is
   what caused only Form # + Actions to remain visible even at 1700px wide.
   Under fixed layout the browser is authoritative: every column with an
   explicit width gets exactly that, and the one column left unconstrained
   (Document Name) gets 100% of whatever's left over, which is what actually
   lets overflow/ellipsis truncate real overflow instead of never triggering.
   Column widths (Form #/Created/Modified/Status/Sign Status/Actions) were
   since tuned individually per follow-up product feedback -- treat each as
   its own deliberate value, not derived from any of the others.

   #526: these widths are ALSO the input to DataTables Responsive's
   column-hiding decision, which is why they have to be re-budgeted per
   breakpoint rather than declared once globally. Responsive measures each
   column in _resizeAuto() by shallow-cloning the table node
   (`cloneNode(false)`, so the clone keeps id="caseDocsTbl" and every rule
   here still applies to it), setting the clone's header cells to inline
   `width:auto; min-width:0` -- which our `!important` widths beat -- and
   recording `minWidth = th.offsetWidth`. It then spends
   `container.offsetWidth` on columns in ascending responsivePriority order
   and collapses the rest into the carat child row. So a width declared here
   is literally the column's bid for space.
   These used to be global, so the ~678px desktop budget applied unchanged at
   820px (iPad Air portrait), leaving Document Name -- the one flexible
   column -- around 110px, and pushing the table wider than
   #caseDocsTbl_wrapper so Actions hung outside it. Per-tier budgets below;
   the tiers match the existing media-query tiers in this file (mobile
   <=767, tablet 768-1079, desktop >=1080). */
#caseDocsTbl.sd-docs-tbl { table-layout: fixed; }

/* #526 DO NOT put a percentage width/max-width on this table.
   A `max-width: 100%` here (added as belt-and-braces against the Actions
   column overflowing, then reverted) silently disables Responsive's
   column-hiding entirely: every column stays visible and the container grows
   a horizontal scrollbar instead of collapsing anything into the carat.
   Why: _resizeAuto() measures each column by inserting its clone into a
   deliberately tiny probe container --
     $('<div/>').css({width: 1, height: 1, overflow: 'hidden'}).append(clone)
   -- and the clone is a shallow cloneNode(false), so it keeps this table's id
   AND class and every rule here still matches it. A percentage max-width
   therefore resolves against a 1px containing block, crushing the clone to
   1px, and `minWidth = th.offsetWidth` comes back ~0 for every column.
   _columnsVisiblity() then short-circuits on `&& e[u].minWidth` (0 is falsy),
   never marks any column hidden, and leaves the carat hidden too -- so the
   table renders at its full fixed-layout width and overflows.
   The overflow protection has to come from the pixel budget below being small
   enough that Responsive collapses columns to fit, which is its actual job.
   Only absolute lengths are safe on this table. */

/* #526 EVERY column rule below MUST carry `min-width` as well as `width`, and
   they must be equal. This is not redundancy -- without min-width, Responsive
   hides nothing at all and the table just grows a horizontal scrollbar.
   Measured on the standalone harness (tests/repro-docs-table.html): at an
   820px viewport the *computed* column widths were exactly the declared
   values, but the widths Responsive had *measured* were 79/92/82/83/64/65/58
   -- content min-widths -- summing to 543 against a 764px container, so it
   concluded everything fit while the table actually rendered 995px wide.
   Why: _resizeAuto() sets `clone.style.width = "auto"`, and per CSS Tables
   `table-layout: fixed` is IGNORED when the table's width is auto. So the
   probe clone silently falls back to *automatic* layout, and because its
   container is only 1px wide it shrink-to-fits every column down to
   min-content -- where a specified `width` is merely a preference and gets
   discarded. `min-width` is the one property that raises a column's
   min-content contribution under automatic layout, and !important beats the
   inline `min-width: 0` that _resizeAuto() puts on each cloned header cell.
   So: `width` sizes the real (fixed-layout) table, `min-width` is what
   Responsive actually reads. Keep them in sync or the two disagree. */

/* Desktop (>=1080px) budget: carat ~28 + 150 + 225 + 90 + 90 + 90 + 110 + 120.
   Left global (not wrapped in the min-width:1080px query) because the narrower
   tiers below override it. Document Name still has no fixed `width` here so it
   keeps absorbing leftover space on wide screens -- but it does get a
   min-width floor, both so Responsive can measure it and to hold the
   1.5x-Form-# ratio (225 = 1.5 x 150) if the container ever gets tight. */
#caseDocsTbl.sd-docs-tbl th:nth-child(2), #caseDocsTbl.sd-docs-tbl td:nth-child(2) { width: 150px !important; min-width: 150px !important; max-width: 150px !important; white-space: nowrap; } /* Form # */
#caseDocsTbl.sd-docs-tbl th:nth-child(3), #caseDocsTbl.sd-docs-tbl td:nth-child(3) { min-width: 225px !important; } /* Document Name — floor only, 1.5x Form # */
#caseDocsTbl.sd-docs-tbl th:nth-child(4), #caseDocsTbl.sd-docs-tbl td:nth-child(4) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; } /* Created */
#caseDocsTbl.sd-docs-tbl th:nth-child(5), #caseDocsTbl.sd-docs-tbl td:nth-child(5) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; } /* Modified */
#caseDocsTbl.sd-docs-tbl th:nth-child(6), #caseDocsTbl.sd-docs-tbl td:nth-child(6) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; } /* Status */
#caseDocsTbl.sd-docs-tbl th:nth-child(7), #caseDocsTbl.sd-docs-tbl td:nth-child(7) { width: 110px !important; min-width: 110px !important; max-width: 110px !important; white-space: nowrap; } /* Sign Status */
#caseDocsTbl.sd-docs-tbl th:nth-child(8), #caseDocsTbl.sd-docs-tbl td:nth-child(8) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; white-space: nowrap; } /* Actions */

/* #669: the Sign Status badge inherits the blanket `* { font-size: 18px !important }` (:34-36)
   which reads oversized for a compact pill in a 110px column, next to plain 18px text in every
   other cell of the row. 16px at the DESKTOP tier only, per product request -- wrapped in the
   1080px query on purpose: this selector is more specific than the bare `*` it's overriding, so
   left unwrapped it would also beat the tablet tier's own `* { font-size: 14px !important }`
   (:2432) and the mobile tier's (:1833) by specificity regardless of source order, shrinking
   the badge somewhere nobody asked for it to change. Wrapping means it simply doesn't exist
   below 1080px, leaving each narrower tier's own blanket rule as the only thing setting this
   badge's size there. */
@media (min-width: 1080px) {
 #caseDocsTbl.sd-docs-tbl td:nth-child(7) .badge { font-size: 16px !important; }
}

/* Document Name: absorbs the leftover width and wraps long names onto
   additional lines instead of truncating them or forcing the table wider. */
#caseDocsTbl.sd-docs-tbl td[class*="dcdesc-"] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* #526 Tablet (768-1079px, e.g. iPad Air portrait at 820px). This tier also
   drops the base font to 14px (see the * rule in that media query), so the
   columns are re-budgeted rather than just scaled.
   Document Name gets an explicit width here for two reasons: the product
   requirement that it be at least 1.5x Form #, and because leaving it
   width-less makes Responsive measure it from its longest *content* -- the
   unpredictable measurement that caused the original ballooning described
   above. Explicit on both sides makes the ratio a stated fact (260/110 =
   2.4x) instead of a side effect of whatever space happens to be left.
   Budget: 28 + 110 + 260 + 80 + 80 + 85 + 95 + 120 = 858 against ~790px of
   usable container at 820px, so Responsive collapses Created (the
   highest-priority-number column, see caseDocsTblOpts in appCaseDocs.js) and
   the remaining ~778px fits. */
@media (min-width: 768px) and (max-width: 1079px) {
 #caseDocsTbl.sd-docs-tbl th:nth-child(2), #caseDocsTbl.sd-docs-tbl td:nth-child(2) { width: 110px !important; min-width: 110px !important; max-width: 110px !important; } /* Form # */
 #caseDocsTbl.sd-docs-tbl th:nth-child(3), #caseDocsTbl.sd-docs-tbl td:nth-child(3) { width: 260px !important; min-width: 260px !important; max-width: 260px !important; } /* Document Name — 2.4x Form # */
 #caseDocsTbl.sd-docs-tbl th:nth-child(4), #caseDocsTbl.sd-docs-tbl td:nth-child(4) { width: 80px !important; min-width: 80px !important; max-width: 80px !important; } /* Created */
 #caseDocsTbl.sd-docs-tbl th:nth-child(5), #caseDocsTbl.sd-docs-tbl td:nth-child(5) { width: 80px !important; min-width: 80px !important; max-width: 80px !important; } /* Modified */
 #caseDocsTbl.sd-docs-tbl th:nth-child(6), #caseDocsTbl.sd-docs-tbl td:nth-child(6) { width: 85px !important; min-width: 85px !important; max-width: 85px !important; } /* Status */
 #caseDocsTbl.sd-docs-tbl th:nth-child(7), #caseDocsTbl.sd-docs-tbl td:nth-child(7) { width: 95px !important; min-width: 95px !important; max-width: 95px !important; } /* Sign Status */
}

/* #526 Mobile (<=767px): only Form # and Actions should stay in the table,
   everything else belongs in the carat child row.
   There is no "hide below breakpoint X" switch available here: Responsive's
   own breakpoint classes (min-/max-/not-tablet-p etc.) set that column's
   `auto` flag to false, which takes it out of the width-driven priority
   system at *every* width -- so using them for the mobile rule would break
   the progressive tablet behaviour above. Forcing visibility from JS with
   column().visible(false) is worse: Responsive marks such columns
   "not-visible" and omits them from the child row, so the data would become
   unreachable rather than collapsed.
   Instead this stays inside the mechanism: Document Name bids 520px, which
   cannot fit beside Form # (110) + Actions (120) + carat (28) = 258 within
   the ~747px of usable container available at the 767px top of this tier
   (258 + 520 = 778 > 747), so Responsive always collapses it -- and Created/
   Modified/Status/Sign are collapsed ahead of it by priority regardless. The
   floor to clear is 747 - 258 = 489px; 520 leaves ~30px of margin. If Form #
   or Actions is widened here, that floor drops and 520 still holds. */
@media (max-width: 767px) {
 #caseDocsTbl.sd-docs-tbl th:nth-child(2), #caseDocsTbl.sd-docs-tbl td:nth-child(2) { width: 110px !important; min-width: 110px !important; max-width: 110px !important; } /* Form # */
 #caseDocsTbl.sd-docs-tbl th:nth-child(3), #caseDocsTbl.sd-docs-tbl td:nth-child(3) { width: 520px !important; min-width: 520px !important; max-width: 520px !important; } /* Document Name — see above */
 #caseDocsTbl.sd-docs-tbl th:nth-child(8), #caseDocsTbl.sd-docs-tbl td:nth-child(8) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; } /* Actions */
}

/* #616 Intake Forms table (#caseDocsTbl_IN) — Document Name takes the width the
   removed document-status column freed up. Same *goal* as the #caseDocsTbl budget
   above, reached a different way, because this table is NOT .sd-docs-tbl: it has
   automatic layout, no carat control column, and had no width rules at all.

   Removing the column achieves nothing on its own. Measured on
   tests/repro-intake-table.html at a 1440px window (~1394px of table):

     before #616              Form 114 | DocName 207 (14.8%) | Rev 130 | Created 123 | Mod 141 | Status 118 | ClientStatus 263 | Actions 109
     column dropped, no CSS   Form 133 | DocName 207 (14.8%) | Rev 152 | Created 144 | Mod 164 |              Status 304 | Actions 125
     with the rules below     Form  79 | DocName 601 (43.1%) | Rev  92 | Created  86 | Mod 100 |              Status 192 | Actions  79

   Document Name gained exactly zero pixels from the removal: it is pinned at
   max-width: 16.6667% by the `col-sm-2 col-md-2` classes accountLib.cs puts on
   that cell — see the #caseDocsTbl .col-md-1/.col-md-2 note earlier in this file
   — so all 117px the Status column freed went to the columns that had no cap.
   Raising that one cap is the whole fix.

   Why a PERCENTAGE here, when #526 forbids percentages on #caseDocsTbl: an
   absolute max-width is silently ignored on this cell. Bootstrap's base
   `[class*="col-"]` rule also puts `width: 100%` on it, so under automatic
   layout the column claims all the surplus and only a percentage clamps it —
   720px, 640px and 560px all measured identically to `none` (DocName 831px,
   everything else crushed to min-content). #526's ban is about a percentage on
   the TABLE, which crushes Responsive's 1px measuring probe to zero for every
   column; a percentage on this one cell is what Bootstrap already had here, and
   Responsive's measurements are unchanged by it (sumMeasured 542 with these
   rules against a 721px container at the 767px tier, so nothing new collapses;
   Revision, the only responsivePriority-10001 column, is still the first to go).

   45% rather than 50/55%: it is the widest Document Name that still leaves
   "Completed by Client" on one line in Status down to 1080px (Status 130px at
   1080; 55% gives it 74px and wraps). Below ~900px every column sits at
   min-content and the percentage stops mattering.

   No `width`/`min-width` companions, deliberately — those exist on #caseDocsTbl
   to drive Responsive's hiding decisions, and nothing here is trying to change
   what collapses. The three nowrap rules are the reason the short columns keep a
   readable width instead of the min-content they get once Document Name is
   uncapped (Form # measured 42px, i.e. "FL-" / "100" over two lines). nth-child
   is 1-indexed; Responsive hides with display:none rather than removing nodes,
   so these indexes stay stable. */
#caseDocsTbl_IN th:nth-child(1), #caseDocsTbl_IN td:nth-child(1) { white-space: nowrap; } /* Form # */
#caseDocsTbl_IN th:nth-child(2), #caseDocsTbl_IN td:nth-child(2) { max-width: 45%; }      /* Document Name — the flexible column */
#caseDocsTbl_IN th:nth-child(4), #caseDocsTbl_IN td:nth-child(4) { white-space: nowrap; } /* Created */
#caseDocsTbl_IN th:nth-child(5), #caseDocsTbl_IN td:nth-child(5) { white-space: nowrap; } /* Modified */
#caseDocsTbl_IN th:nth-child(7), #caseDocsTbl_IN td:nth-child(7) { white-space: nowrap; } /* Actions */

/* Document Name wraps long names onto more lines rather than forcing the table
   wider -- the #caseDocsTbl rule above, for this table. white-space is the
   default, stated so a later nowrap added to the column rules can't reach the
   one column that must wrap; overflow-wrap is what handles a single very long
   unbroken name, which no line-break opportunity would otherwise fit. */
#caseDocsTbl_IN td[class*="dcdesc-"] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Cases table column widths. Same approach as #caseDocsTbl above: fixed
   widths on Created/Modified/Closed/Actions so the table's total width is
   predictable, Case Name gets whatever space is left. Closed matches
   Created/Modified's width; Actions matches the Documents table's Actions
   width (120px) -- the previous 84px (30% narrower, per earlier product
   feedback) was clipping the Share icon, since Actions holds up to three
   icons (Edit/Delete/Share). min-width pins the same floor as width so the
   column can't be squeezed narrower and re-clip the icons.
   #403: this table's id used to collide with the Share Case > Access List
   table's (both were id="casesListTbl", a completely different 6-column
   table on casesAccess.cshtml) -- since IDs aren't page-scoped in CSS,
   these nth-child pixel widths were also landing on Access List's unrelated
   columns, squeezing them far too narrow for their header text and making
   adjacent headers visually overlap. Fixed by giving Access List's table
   its own id (accessListTbl) instead of scoping here.
   #493: that fix removed the worst offender, but the id stayed shared with the
   Clients, Signers, Users, Intake Contacts and Client > Cases tables, which
   have their own column counts -- so these rules landed on them too, and that
   was left alone because none of those layouts had been checked.
   #623: they have now been checked, and every one of them has its own id:
   clientsListTbl, usersListTbl, clientCasesTbl and clientAccessTbl. (Signers was
   a sixth, an unreachable copy of Clients; it was deleted rather than renamed.
   #668: Intake Contacts turned out to be a seventh of the same kind -- no
   controller action, unreachable since the Core migration -- and went the same
   way, taking its own intakeContactsTbl block with it.)
   #casesListTbl is the Cases screen alone.
   What they legitimately DID share is the generic look -- padding, striping,
   hover, header weight, fixed layout, name-cell wrapping -- so that moved to
   the class .sd-list-tbl, which the survivors carry. Only column widths are
   keyed on an id now, because only column widths are per-screen.
   The lesson, since this is the third time: a shared id is not a shared style.
   Give the table a class for what is common and an id for what is not. */
#casesListTbl, .sd-list-tbl { table-layout: fixed; }

/* #493: the Cases screen's own table (tagged .sd-cases-tbl in Cases.cshtml)
   gained a leading carat/control column, so each data column there sits one
   position further right. Split into two blocks rather than shifting in
   place, so the other tables listed above keep rendering exactly as they do
   today -- shifting the shared rule would have silently restyled all of them.
   The td selector is written the long way (through #ontable) purely to
   out-specify the "#casesListTbl > #ontable > tr > td { padding: 0.4rem
   !important }" rule further up, which carries two ids and would otherwise
   win and leave the carat column padded out to full cell width. */
#casesListTbl.sd-cases-tbl th.dtr-control-col,
#casesListTbl.sd-cases-tbl > #ontable > tr > td.dtr-control {
    width: 1.75em !important;
    max-width: 1.75em !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center;
}
#casesListTbl.sd-cases-tbl th:nth-child(3), #casesListTbl.sd-cases-tbl td:nth-child(3) { width: 90px !important; max-width: 90px !important; white-space: nowrap; } /* Created */
#casesListTbl.sd-cases-tbl th:nth-child(4), #casesListTbl.sd-cases-tbl td:nth-child(4) { width: 90px !important; max-width: 90px !important; white-space: nowrap; } /* Modified */
#casesListTbl.sd-cases-tbl th:nth-child(5), #casesListTbl.sd-cases-tbl td:nth-child(5) { width: 90px !important; max-width: 90px !important; white-space: nowrap; } /* Closed */
#casesListTbl.sd-cases-tbl th:nth-child(6), #casesListTbl.sd-cases-tbl td:nth-child(6) { width: 120px !important; min-width: 120px !important; white-space: nowrap; } /* Actions */

/* #696: a floor under the whole table, so Case Name can never be squeezed to nothing.

   The four fixed columns above render 476px in total (measured, tests/run-cases-table.js:
   115.4 x 3 for the dates plus 131 for Actions -- these cells are content-box with ~25.4px
   of horizontal padding, so a rendered column is always its declared width plus that). The
   table is table-layout:fixed at width:100%, so when the container is narrower than 476px
   plus something for the name, the browser does not overflow -- it SHRINKS the one column
   with no declared width. At a 520px viewport Case Name came out 11px wide and every case
   name wrapped one letter per line (#696).

   The real fix for that is in appCases.js, which now collapses the three date columns into
   the responsive child row below 700px instead of below 480px. This is the second half:
   whatever DataTables Responsive decides, the table cannot render narrower than 660px
   (476 + 184 for the name) -- it scrolls inside .table-responsive instead. That matters
   because Responsive's measurement is document.documentElement.clientWidth, which iOS
   Safari reports differently from Chrome (see the appCases.js note), and a browser we have
   not measured could land somewhere neither of us predicted. A sideways scroll is a
   nuisance; a one-character column is unreadable.

   :not(.collapsed) is what keeps it inert in normal use. Responsive puts .collapsed on the
   table whenever it has hidden a column, which is every phone-width case, and there the
   table is three columns wide and must stay inside the viewport with no scrolling at all.
   Above 700px nothing is collapsed but the container is already wider than 660px, so the
   floor never binds either. It binds only when Responsive has shown every column at a width
   that cannot hold them -- exactly the failure this is here for.

   Keyed on #casesListTbl.sd-cases-tbl, which is the Cases screen and nothing else: that id
   was shared by five other differently-shaped tables until #623 and the width rules above
   landed on all of them a column out of place. run-cases-table.js asserts the id is still
   unique to this view rather than trusting that it stays that way. */
#casesListTbl.sd-cases-tbl:not(.collapsed) { min-width: 660px; }

/* #623: the ":not(.sd-cases-tbl)" block that used to sit here is GONE. It existed only to
   serve the five other screens that shared this id, and it fitted exactly one of them --
   Client > Cases, whose columns happen to be the same shape. On the rest it landed one or
   more positions out, so a rule commented "Created" was sizing Role on Users and Contact
   Name on Intake Contacts. Nothing carries #casesListTbl without .sd-cases-tbl any more, so
   the block matched nothing and was deleted rather than left to be re-read as live.

   Each screen's real widths follow. Every one sets min-width equal to width: these are all
   `responsive: true` DataTables (except Client Access), and DataTables Responsive measures
   MIN-WIDTH rather than width (#526) -- it clones the table into a 1px probe with width:auto,
   where table-layout:fixed is ignored per CSS Tables, so `width` alone is only a preference.
   Measured with tests/run-users-table.js, which reports every column of every one of them.

   Cells are content-box here with ~25.4px of horizontal padding, so a rendered column is
   always its declared width plus that. The numbers below are declared widths. */

/* Client > Cases (Case Name | Created | Modified | Closed | Action).
   These are the values the old shared block gave it, kept deliberately: this is the one
   table the block actually fitted, so nothing about its appearance should change. */
#clientCasesTbl th:nth-child(2), #clientCasesTbl td:nth-child(2) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; }    /* Created */
#clientCasesTbl th:nth-child(3), #clientCasesTbl td:nth-child(3) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; }    /* Modified */
#clientCasesTbl th:nth-child(4), #clientCasesTbl td:nth-child(4) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; }    /* Closed */
#clientCasesTbl th:nth-child(5), #clientCasesTbl td:nth-child(5) { width: 120px !important; min-width: 120px !important; white-space: nowrap; }                              /* Action */

/* Clients (Name | Created | Action). Action was getting 90px from the rule labelled
   "Modified"; 120px is the width the rest of this file uses for an actions column, set
   because 84px clipped a third icon.
   There was a near-identical Signers screen sharing this shape and this script -- an
   unreachable copy of Clients, deleted in #623 along with its controller action. */
#clientsListTbl th:nth-child(2), #clientsListTbl td:nth-child(2) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; }    /* Created */
#clientsListTbl th:nth-child(3), #clientsListTbl td:nth-child(3) { width: 120px !important; min-width: 120px !important; white-space: nowrap; }                              /* Action */

/* #668: the #intakeContactsTbl width block that was here is GONE, with the screen it sized.
   Views/Account/IntakeContacts.cshtml had no action on any controller and routing here is
   conventional only, so /Account/IntakeContacts had always 404'd -- an MVC5-era leftover that
   entered at the initial import and was only ever touched by repo-wide sweeps, this one
   (#623) included. Same disposal as Signers two paragraphs up. */

/* Share Case > Client Access deliberately gets NO width rules. Its own markup already sizes
   every column with Bootstrap col-sm-* classes on the <th>, and the shared block was simply
   overriding them with pixel widths meant for a different table. Removing it from that block
   is the whole fix -- the layout its author wrote now applies. It is also the one table here
   that is not a DataTable (tablesorter via bkgSortSpecial.js), so Responsive's min-width
   rule does not arise. */

/* #624: the firm-logo upload rows on the Law Firm Profile, switched off.
   `!important` in a stylesheet, NOT an inline style, and that is the whole point: those rows
   also carry .showlogo1, which appProfile.js turns on with jQuery .show(). .show() writes an
   inline `display`, and an inline declaration without !important loses to a stylesheet rule
   with it -- so this holds where `style="display:none !important"` on the element would have
   been wiped the moment the logo checkbox was ticked.
   The elements stay in the DOM deliberately; see the note in Profile.cshtml. */
.sd-logo-upload-disabled { display: none !important; }

/* #623: a 20% / 80% label-and-field pair for the Law Firm Profile.
   Bootstrap's 12-column grid cannot express 20% -- the nearest are col-sm-2 (16.666%) and
   col-sm-3 (25%) -- so these are declared rather than assembled from grid classes. Padding
   and position match Bootstrap's own .col-*, so they sit in a .row exactly like one.
   Percentages, not rem: a rem here is 18px and does not change per tier (#527/#555), so a
   rem-based column would not stay proportional the way this has to. */
.sd-lbl-20,
.sd-fld-80 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .sd-lbl-20 { flex: 0 0 20%; max-width: 20%; }
    .sd-fld-80 { flex: 0 0 80%; max-width: 80%; }
    /* For a row whose label is .sr-only: that label is position:absolute and so takes no
       space in the flex row, leaving the field to start at the page edge unless it is
       pushed across by the width the label would have had. */
    .sd-offset-20 { margin-left: 20%; }
}

/* #623: the Users screen (Name | Role | Created | Action) has its OWN id and its own widths.
   It used to share #casesListTbl, so the block above landed on it with everything one column
   out of place: the rule labelled "Created" was sizing ROLE, pinning it to 90px with
   max-width and white-space:nowrap. "Attorney (Admin)" and "Legal Assistant" do not fit in
   90px at this app's 18px base, which is what made the column look broken. #493 recorded that
   these rules reach Users and left it alone because that layout had not been checked; it has
   now, so the table is out of the shared id entirely rather than patched around.

   Role is TWICE AS WIDE ON SCREEN, which is not the same as twice the number here. These
   cells compute as content-box with 25.4px of horizontal padding (measured, not assumed --
   tests/repro-users-table.html reports it), so the rendered column is always the declared
   width plus 25.4px. Role was declared 90px and rendered 115.4px; doubling that to 230.8px
   means declaring 205px. Writing 180px would have looked like a doubling in the source and
   been 1.78x on the screen, which is the half that anybody actually sees.

   min-width is set alongside width, and that is load-bearing rather than belt-and-braces:
   this table is `responsive: true`, and DataTables Responsive measures MIN-WIDTH, not width
   (#526). It clones the table into a 1px-wide probe with width:auto, where table-layout:fixed
   is ignored per CSS Tables, so a specified `width` is only a preference and min-width is the
   one property that raises a column's min-content contribution. Keep the two in step. */
#usersListTbl th:nth-child(2), #usersListTbl td:nth-child(2) { width: 205px !important; min-width: 205px !important; max-width: 205px !important; white-space: nowrap; } /* Role */
#usersListTbl th:nth-child(3), #usersListTbl td:nth-child(3) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; }    /* Created */
#usersListTbl th:nth-child(4), #usersListTbl td:nth-child(4) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; white-space: nowrap; }    /* Action */
/* Name takes the remainder -- no width, so it absorbs whatever is left. */

/* Case Name: absorbs the leftover width and wraps long names onto
   additional lines instead of truncating them or forcing the table wider. */
#casesListTbl td[class*="csdesc-"],
.sd-list-tbl td[class*="csdesc-"] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Odd/even stripe at tr level — td is transparent, so tr color shows through. */
#caseDocsTbl tbody tr.odd,
#caseDocsTbl_IN tbody tr.odd,
#caseDocsTbl-P tbody tr.odd,
#casesListTbl tbody tr.odd,
.sd-list-tbl tbody tr.odd,
#accessListTbl tbody tr.odd,
#grantAccessTbl tbody tr.odd,
#contactListTbl tbody tr.odd,
#contactMergeTbl tbody tr.odd,
#templateListTable tbody tr.odd {
    background-color: #FBF8EA !important;
}

#caseDocsTbl tbody tr.even,
#caseDocsTbl_IN tbody tr.even,
#caseDocsTbl-P tbody tr.even,
#casesListTbl tbody tr.even,
.sd-list-tbl tbody tr.even,
#accessListTbl tbody tr.even,
#grantAccessTbl tbody tr.even,
#contactListTbl tbody tr.even,
#contactMergeTbl tbody tr.even,
#templateListTable tbody tr.even {
    background-color: #ffffff !important;
}

/* Edit/open active: row highlight (sd-row-active) already indicates the
   active document, so the icon is intentionally left its normal color
   (no color override here). */

#caseDocsTbl tbody tr.sd-row-active,
#caseDocsTbl_IN tbody tr.sd-row-active {
    background-color: #ede1a1 !important;
}

#casesListTbl tbody tr.sd-row-active,
.sd-list-tbl tbody tr.sd-row-active {
    background-color: #ede1a1 !important;
}

#accessListTbl tbody tr.sd-row-active {
    background-color: #ede1a1 !important;
}

#contactListTbl tbody tr.sd-row-active {
    background-color: #ede1a1 !important;
}

#contactListTbl {
    width: 100% !important;
    /* table-layout:auto (the default) so columns are content-driven and honour
       the per-column min-widths below. table-layout:fixed (tried in #305/#309)
       is purely proportional and cannot honour a min-width, so on a narrow
       dialog it shrank the bounded columns below their own header text --
       "State" wrapped to "S t a t e", "Phone" to "Pho ne" on iPad -- and could
       force content to overlap. Auto layout never sizes a column below its
       content, so headers always fit and nothing overlaps. */
}
/* Let flexible columns wrap long unbroken tokens (e.g. emails) into their own
   cell rather than overflowing into the neighbour. overflow-wrap breaks only
   when a token can't otherwise fit, so it won't chop short values.
   (Font size is left at the tier default here -- only the tablet-portrait tier
   trims it, in its media block below; desktop keeps the full size.) */
#contactListTbl th,
#contactListTbl td {
    overflow-wrap: break-word;
}
/* Bounded-content columns. Column order (leftPanel.cs buildModalGroup_list /
   hardAtt): 1 dedicated (empty) Responsive control column, 2 Full Name,
   3 Address, 4 City, 5 State, 6 Zip, 7 Phone, 8 Email, 9 Actions. State/Phone/
   Actions are nowrap, so their width is governed by their own content -- the
   smaller font makes them tight automatically and the min-width is only a
   floor so an empty cell can't collapse the column below its header. Phone's
   floor is set to just fit the 10-digit number. Zip is left wrappable so the
   optional +4 drops to a second line; its min-width protects the header and
   5-digit base.
   The max-width CAPS the column: under table-layout:auto a column with no upper
   bound soaks up the table's leftover space, so on the wide desktop dialog
   Phone (and the empty Email) ballooned. Capping the bounded columns forces the
   slack into the flexible text columns (Full Name/Address/City) instead. The
   caps sit above the desktop (18px) content width, so they only stop bloat --
   they never clip; on tablet the columns are well under the caps. (max-width is
   honoured in auto layout; it was ignored under the old fixed layout.)
   #678: :not(.sd-contacts-tbl) excludes the Contacts screen's own list, which
   reuses this id with a SIX-column layout (control, Full Name, Address, Phone,
   Email, [Case/Role]) -- see _contactList_v2.html. Positions 5-9 mean different
   things there, so before this the "State" cap and nowrap landed on its Case/Role
   column, and adding the control column would have moved them onto Email. Same
   lesson as #623 on #casesListTbl: a shared id is not a shared style. */
#contactListTbl:not(.sd-contacts-tbl) th:nth-child(5), #contactListTbl:not(.sd-contacts-tbl) td:nth-child(5) { min-width: 42px; max-width: 80px;  white-space: nowrap; } /* State */
#contactListTbl:not(.sd-contacts-tbl) th:nth-child(6), #contactListTbl:not(.sd-contacts-tbl) td:nth-child(6) { min-width: 50px; max-width: 90px; }                       /* Zip (+4 may wrap) */
#contactListTbl:not(.sd-contacts-tbl) th:nth-child(7), #contactListTbl:not(.sd-contacts-tbl) td:nth-child(7) { min-width: 84px; max-width: 165px; white-space: nowrap; } /* Phone */
#contactListTbl:not(.sd-contacts-tbl) th:nth-child(9), #contactListTbl:not(.sd-contacts-tbl) td:nth-child(9) { min-width: 52px; max-width: 110px; white-space: nowrap; } /* Actions */
/* Full Name (2nd cell -- 1st is the empty Responsive control column) acts as a
   click-to-select alias (wsCaseDoc_G.js initGroupDataTable): same
   cursor-pointer + underline-on-hover treatment as the clickable name columns
   on the Cases/Documents tables above (#casesListTbl/#caseDocsTbl csdesc-/
   dcdesc-/dcnum-), so it reads the same way as a clickable cell there.

   Deliberately UNSCOPED, and correct on both tables carrying this id only since
   #678. The Contacts screen's list had no control column until then, so this hit
   its Address column -- Address read as clickable and did nothing, while Full
   Name, which really does open the contact dialog, read as plain text. Both
   tables now put Full Name second, so don't "fix" this by scoping it to
   #mymodalManager: that would take the affordance off the Contacts screen's
   genuinely clickable cell. */
#contactListTbl tbody td:nth-child(2) { cursor: pointer; }
#contactListTbl tbody td:nth-child(2):hover { text-decoration: underline; }

/* #622: Select-Contact dialog's Case & Firm / All Contacts pill toggle (labelled "Case Contacts"
   until #640 -- the quoted measurements further down are from that wider label, so they are a
   ceiling for today's), injected after
   DataTables' own search box (wsCaseDoc_G.js initGroupDataTable). The pill's own look comes from
   the shared .sd-pill-toggle rules above -- only the layout of the controls row is set here.

   Scoped under #mymodalManager, NOT to #contactListTbl_wrapper alone: the Contacts screen
   (Views/Contacts/index.cshtml) reuses the #contactListTbl id for a different table with a
   different column set, so an unscoped rule on the wrapper would reach across to it. The dialog
   is the only place this toggle exists. */
#mymodalManager .dataTables_filter {
    display: flex;
    align-items: center;
    /* nowrap is load-bearing, and counter-intuitively so: flexbox WRAPS BEFORE IT SHRINKS. With
       `wrap`, the browser lays items out at their base sizes first, so the moment 400px of search
       box plus the pill exceeded the row it pushed the pill onto a second line instead of taking
       the 6px it needed off the input -- measured wrapping at every width below 992px. With
       `nowrap` the same shortfall comes out of the search box (which may shrink) and never out of
       the pill (which may not), so the two stay on one line and the pill stays whole. Overflow is
       not the risk it looks like: the pill is 232-278px and the row is 458px even on a phone. */
    flex-wrap: nowrap;
}
/* DIRECT child only: that is DataTables' own search <label>, the one wrapping the input. The
   pill's two labels are also descendants of .dataTables_filter and must NOT be given flex sizing
   -- they get their width from their text. */
#mymodalManager .dataTables_filter > label {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* #527/#555: .5rem here is 9px on EVERY tier, and inside an align-items:center flex row it
       lifts the search input off the pill's centre line. Zeroed rather than corrected, same as
       .dataTables_length label. */
    margin-bottom: 0;
    /* Do NOT grow: the search box keeps its stated width and the leftover space in the (now
       col-md-10) column stays empty between it and the pill, rather than the input stretching to
       ~700px. It may still SHRINK, and min-width: 0 is what allows that -- a flex item's min-width
       defaults to `auto`, which for a text input is its intrinsic size, so without this it refuses
       to yield at all and the pill absorbs the whole shortfall. Same pairing sd-site.css already
       uses for the main-page filter rows (~:2386). */
    flex: 0 1 auto;
    min-width: 0;
}
/* #622: the search box keeps the app-wide 400px (.dataTables_wrapper .dataTables_filter input,
   ~:2392 -- widened to 400 by explicit request in #453) but is allowed to give way on a narrow
   dialog instead of holding its width and crushing the pill. min-width and max-width only: the
   `width: 400px !important` is deliberately left alone so this stays the same size as every other
   search box in the app. */
#mymodalManager .dataTables_wrapper .dataTables_filter input {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
/* #622: the rows-per-page dropdown, now in a col-md-2 -- hug it to the right edge so the controls
   row reads search-left / pages-right. margin-bottom for the same #527/#555 reason as above. */
#mymodalManager .dataTables_length {
    text-align: right;
    white-space: nowrap;
    margin-bottom: 0;
}
#mymodalManager .dataTables_length label {
    margin-bottom: 0;
}
/* #622: the pill must never be compressed. .sd-pill-toggle is `overflow: hidden` (for its rounded
   ends) and, as a flex item, shrinks by default -- so a squeezed pill silently CLIPS its second
   option rather than overflowing visibly.

   The reported bug ("the toggle doesn't work, I just see Case Contacts") was those two facts
   meeting the 400px !important above in DataTables' default col-md-6 (574px at the modal's widest):
   the search box could not yield, so the pill absorbed the entire shortfall. Measured before the fix
   (tests/repro-contact-scope-toggle.html): the pill wanted 278px and got 129px at a 1250px modal,
   54px at 1100px and 0px at 992px and below -- at every width leaving part of "Case Contacts" and
   nothing else. The FILTERING worked throughout, which is why a behavioural test passed the whole
   time; a control you cannot reach is still broken, so that harness asserts reachability, not just
   effect.

   The real headroom comes from the col-md-10 controls row (the custom `dom` in initGroupDataTable);
   this rule and the min-width above are what keep the pill whole when the dialog is narrow enough
   that even that is tight. Keep all three -- mutation testing shows they cover different parts of
   the width range, so none is redundant. */
#mymodalManager .sd-pill-toggle {
    flex-shrink: 0;
}
/* Belt-and-braces against a more specific (or !important) input rule elsewhere on the page
   un-hiding the radios and showing them beside their labels -- the same guard the Grant Access
   copy of this toggle carries. */
#mymodalManager .sd-pill-toggle input[type="radio"] {
    display: none !important;
}

/* Contacts screen main list (#328) -- column order here (Full Name, Address,
   Phone, Email, [Case/Role]) differs from the Select-Contact modal's table,
   which reuses the same #contactListTbl id (see _viewGroup_tmpl.htm) with a
   different column set. Scoped under .sd-contacts (the container div in
   Views/Contacts/index.cshtml) so these widths can't leak into that modal.
   The last column (header "Role" for a specific case, "Case" for All Clients)
   is dropped entirely for All Contacts (build_contacts_html, #382) -- the
   nth-child(6) rule below simply matches nothing then, which is fine.

   #678: every position below is one further right than it was, because the
   table gained a leading carat/control column (_contactList_v2.html). Shifted
   in place rather than split into a second block the way #493 did on the Cases
   table: that split existed because #casesListTbl was shared by five screens
   and shifting the rule would have restyled all of them, whereas these rules
   are already scoped to this one screen by .sd-contacts. */
.sd-contacts #contactListTbl th:nth-child(2), .sd-contacts #contactListTbl td:nth-child(2),
.sd-contacts #contactListTbl th:nth-child(6), .sd-contacts #contactListTbl td:nth-child(6) { width: 20%; } /* Full Name, Case/Role */
.sd-contacts #contactListTbl th:nth-child(4), .sd-contacts #contactListTbl td:nth-child(4) { width: 11%; white-space: nowrap; } /* Phone */
.sd-contacts #contactListTbl th:nth-child(5), .sd-contacts #contactListTbl td:nth-child(5) { width: 15%; } /* Email */

/* #678: keep the carat column narrow and centred. Only the padding and the
   floor are set here -- the column's WIDTH goes through DataTables' columnDefs
   (appContactsList.js), because the Responsive extension computes its own
   column widths and overrides a page CSS `width`; a min-width is not a width,
   so it survives (same reasoning as wsCaseDoc_G.js's note on this table id).
   Responsive hides this column on its own whenever nothing is collapsed, so
   there is no rule here to hide it. */
.sd-contacts #contactListTbl th.dtr-control-col,
.sd-contacts #contactListTbl td.dtr-control {
    min-width: 1.75em;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center;
}

/* All Contacts (#383): no Case/Role column to soak up the extra 20%, so give
   it explicitly to Email instead of letting it fall to Address by default;
   Phone also shrinks since its fixed-format content doesn't need 11%. The
   extra .all-contacts class (set on <table> by build_contacts_html) makes
   these more specific than the generic rules above, so they win only here.
   Positions are #678-shifted, as above. */
.sd-contacts #contactListTbl.all-contacts th:nth-child(4), .sd-contacts #contactListTbl.all-contacts td:nth-child(4) { width: 8%; } /* Phone */
.sd-contacts #contactListTbl.all-contacts th:nth-child(5), .sd-contacts #contactListTbl.all-contacts td:nth-child(5) { width: 28%; } /* Email */

/* Select2 — match Bootstrap 4 form-control height; colour/border come from the
   shared field rule above (.form-control, #searchJuri, .specialSearch, ...) */
.sd-contacts .select2-container .select2-selection--single {
    height: 38px;
}
.sd-contacts .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    color: #111 !important;
    padding-left: 10px;
}
.sd-contacts .select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
.sd-contacts .select2-container--focus .select2-selection--single {
    box-shadow: 0 0 0 0.2rem rgba(252, 208, 152, 0.5) !important;
    border-color: #FCD098 !important;
}

/* Pill toggle — used on contactMerge filter */
.sd-pill-toggle {
    display: inline-flex;
    border: 2px solid #0a368f;
    border-radius: 50px;
    overflow: hidden;
}
.sd-pill-toggle input[type="radio"] {
    display: none;
}
.sd-pill-toggle label {
    margin: 0;
    padding: 4px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: #0a368f;
    background: #fff;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.sd-pill-toggle input[type="radio"]:checked + label {
    background: #0a368f;
    color: #fff;
}

/* Share Case tables (#438/#439): hide the "Showing X to Y of Z entries" DataTables info text.
   Access List keeps DataTables' default `dom` (which renders an info div), so it's hidden here.
   The Grant Access table's custom `dom` (appCaseAccess.js) omits the info element entirely, so
   its selector below is just a harmless belt-and-suspenders. */
#accessListTbl_wrapper .dataTables_info,
#grantAccessTbl_wrapper .dataTables_info {
    display: none;
}

/* #454: breathing room around the friendlier empty-state messages on both Share Case tables
   (appCaseAccess.js emptyTable) so they don't sit flush against the header row/border. */
#accessListTbl td.dataTables_empty,
#grantAccessTbl td.dataTables_empty {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Grant Access "All Contacts" pill toggle (appCaseAccess.js) -- scoped !important override so
   the radio inputs stay hidden even against a more specific/`!important` rule elsewhere on the
   page (e.g. DataTables' own filter input width rule) that could otherwise win. */
#grantAccessTbl_wrapper .sd-pill-toggle input[type="radio"] {
    display: none !important;
}

/* Grant Access controls row: search box + All Contacts pill toggle on the left, page-length
   dropdown right-aligned on the right, all on one line. The left/right column PLACEMENT comes
   from the custom DataTables `dom` in appCaseAccess.js (filter col-md-9 first, length col-md-3
   last) -- these rules only handle the inner layout, so there's no dependence on matching an
   auto-generated DOM structure the way the earlier `.row:first-child` + `order` approach did.
   flex-wrap: nowrap keeps "Search:" + input + the toggle on one line even when the column is
   narrow on smaller screens. */
#grantAccessTbl_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    text-align: left !important;
}
#grantAccessTbl_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-bottom: 0;
}
/* #453: widened from 200px to 400px per user request.
   #668: 400px is now a CEILING, not a fixed width, and the rule covers the Access List too.
   The app-wide `.dataTables_wrapper .dataTables_filter input { width: 400px !important }`
   plus the "Search:" label makes the control 456px wide, and DataTables' default `dom` puts
   the Access List's filter in a `col-md-6` -- half the container. So from roughly 768px to
   990px, and again below 470px, that one control was wider than #casesTableAccess, which is
   a `.table-responsive` (overflow-x: auto) and duly grew a horizontal scrollbar. It reads as
   a table problem and is not one: measured, the table fitted its container at every width
   (868px inside 870px at a 900px viewport) while the search box hung 36px past it.
   PRE-EXISTING -- it reproduces with the #668 Responsive config removed entirely, and the
   ≤767.98px block below is the same fault found once before, on the Grant Access table only
   (#447-followup, whose note that "the Access List has no fixed-width controls row so it
   never overflows" was simply wrong: it has the app-wide one).
   `width: 100%` + `max-width` keeps the requested 400px wherever there is room and lets the
   input shrink where there is not. `min-width: 0` is required for the Grant Access one: it
   is a flex item there, and a flex item's floor is its content size unless you say otherwise
   -- without it the box refuses to shrink and the fix silently does nothing. */
#accessListTbl_wrapper .dataTables_filter input,
#grantAccessTbl_wrapper .dataTables_filter input {
    width: 100% !important;
    max-width: 400px;
    min-width: 0;
}

/* #668: let the Access List's filter shrink as a whole, not just its input. The label wraps
   "Search:" and the input together and is what actually overflowed; as a flex row its text
   stays on one line while the input takes the remaining space. `max-width: 100%` is the part
   that bounds it to the column. Mirrors the Grant Access rules above, minus the pill toggle. */
#accessListTbl_wrapper .dataTables_filter {
    text-align: left !important;
}
#accessListTbl_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    white-space: nowrap;
    max-width: 100%;
    margin-bottom: 0;
}
/* Length menu sits in the right-hand column -- hug it to the far right edge of the row. */
#grantAccessTbl_wrapper .dataTables_length {
    text-align: right;
    white-space: nowrap;
    margin-bottom: 0;
}

/* #447-followup: below the md breakpoint the filter/length columns already stack full-width,
   but the nowrap filter row (Search: label + fixed 200px input + All Contacts pill toggle) is
   wider than the viewport, forcing a horizontal scrollbar on the .table-responsive wrapper.
   Let the controls wrap at these widths so the Grant Access table adjusts dynamically. The
   one-line nowrap layout is preserved at md and up, where the column is wide enough to hold
   everything.
   #668: the input's `width: 100% !important; max-width: 400px` used to live here too. It is
   now unconditional (see the shared rule above) and applies to the Access List as well --
   that table turned out to have the same overflow from md up, which the original note here
   said it could not have. */
@media (max-width: 767.98px) {
    #grantAccessTbl_wrapper .dataTables_filter {
        flex-wrap: wrap;
    }

    /* #668-followup: on a phone the two search boxes must be the same size and must not sit
       flush against the control below them. Measured at 360px before this block: Access List's
       input was 274px and Grant Access's 181px, and Grant's box bottom was EXACTLY on the page-
       length dropdown's top -- gap 0.
       Why they differed: Access List's filter is a block, so its <label> fills the row and the
       input fills the label. Grant Access's filter is a flex row shared with the All Contacts
       pill, so its label is a flex item with no `flex` of its own and shrinks to its content.
       `flex: 1 0 100%` gives that label the whole line -- which also pushes the pill onto its
       own line, where it does not need the ml-3 indent it was given for sitting alongside. Both
       inputs are then the row minus the "Search:" label, i.e. identical. */
    #grantAccessTbl_wrapper .dataTables_filter > label {
        flex: 1 0 100%;
    }
    #grantAccessTbl_wrapper .dataTables_filter .sd-pill-toggle {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }

    /* The app-wide `.dataTables_wrapper .dataTables_filter input` rule adds `margin-right: 5px`.
       It is there to hold the box off whatever sits beside it, and on a phone nothing does --
       the controls are stacked full-width -- so it only makes the input 5px narrower than the
       row it is supposed to fill, and unequal to any box measured a different way. */
    #accessListTbl_wrapper .dataTables_filter input,
    #grantAccessTbl_wrapper .dataTables_filter input {
        margin-right: 0 !important;
    }

    /* Stacked controls need air under them. The filter block is what the report was about; the
       length dropdown gets the same treatment because on the Access List it sits ABOVE the
       search box (DataTables' default `dom` puts length first) and was touching it the same
       way -- fixing only one of the two would have left the same complaint one control higher. */
    #accessListTbl_wrapper .dataTables_filter,
    #grantAccessTbl_wrapper .dataTables_filter,
    #accessListTbl_wrapper .dataTables_length,
    #grantAccessTbl_wrapper .dataTables_length {
        margin-bottom: 0.5rem;
    }
}

.ui-datepicker-calendar {
    background-color: white;
}

.caseFormLabel {
    flex: 0 0 17%;
}

/* sdShowSuccessToast (sd.csrf.js) success toasts -- brand green, not
   Bootstrap's default alert-success. Scoped to the bootstrap-notify
   container so the other .alert-success uses elsewhere are untouched. */
[data-notify="container"].alert-success {
    background-color: #E8F7F0;
    border-color: #15543B;
    color: #15543B;
}
[data-notify="container"].alert-success .alert-link {
    color: #15543B;
}

/* #566: the floating icon pill that sits over the PDF viewer, and the icon buttons in it.
   Shared by BOTH doc screens -- docCase_V2.cshtml (pinned top-right) and caseIntakeDoc.cshtml
   (top-left) -- so that "the intake screen looks like the editing screen" stays true without
   anyone having to keep two copies in step. It lived only in docCase_V2's inline <style>
   until the intake screen needed the same look.

   Position is deliberately NOT set here: each view pins its own pill (see the .sd-pdf-panel
   / .sdIntakePdfPanel rules in those views), and an inline <style> block is later in the
   cascade than this file, so a view's own top/left/right always wins. The host element needs
   position: relative for any of it to mean anything. */
.sd-pdf-hover-toolbar {
    position: absolute;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.92);
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 8px 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.sd-pdf-btn {
    background: transparent;
    border: none;
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    transition: background 0.12s;
}

.sd-pdf-btn:hover {
    background: rgba(0,0,0,0.07);
}

/* #566: a toolbar icon that is a MODE, not an action, stays visibly pressed while that mode
   is armed -- currently only Add note (#522: the mode is sticky, so the user has to be able
   to see that their next click plants a note). Amber rather than the grey hover wash, so
   "armed" can't be mistaken for "the pointer is over it" -- and since #569 removed the
   armed-mode pill this is the only thing in our own chrome that shows the mode is live. */
.sd-pdf-btn.active {
    background: rgba(248,161,48,0.35);
}

.sd-pdf-btn-divider {
    width: 22px;
    height: 1px;
    background: #dee2e6;
    margin: 3px 0;
}

/* #555: the intake doc toolbar (Views/WS/caseIntakeDoc.cshtml) -- one centred line with the
   back arrow and the help circle pinned to the window edges. (#566: it was two lines until
   zoom and Add note moved into the floating pill over the PDF, which left only Download and
   Print up here -- room enough for the review controls to come up onto the same line.)

   Every gap here is written in **px on purpose**. `html { font-size: 18px !important }`
   (line 64) makes 1rem 18px, on every tier -- it outranks the max-width:767px block's
   `* { font-size: 14px !important }` on specificity, so rem lengths do NOT shrink on mobile
   even though text does (measured; see the #527 note in CLAUDE.md). A Bootstrap p-/m-/gap
   utility would therefore give 18px where 15px was asked for. Measure, don't convert. */
.sdIntakeBar {
    /* .no-gutters zeroes the row's own -15px margins; the 15px inset is then ours to give,
       once, here -- so the two circles sit 15px off the window edge on every tier. */
    padding-left: 15px;
    padding-right: 15px;
}

.sdIntakeToolRow {
    display: flex;
    align-items: center;
}

/* Both end circles must keep their full width. Measured at a 500px viewport without this:
   #logoffBtn (a flex item, and .btn-link brings no flex-shrink of its own) shrank from 32px
   to 27.5px, which pulled the "centred" tool group 2.2px off centre. .sd-icon-circle already
   carries flex:none; the back arrow's wrapping <button> did not. */
.sdIntakeToolRow > #logoffBtn,
.sdIntakeToolRow > .sdIntakeHelp {
    flex: 0 0 auto;
}

/* Takes the space left between the two circles. The circles are equal in outer width
   (32px + 16px inner margin each -- #logoffBtn's margin-right, .sdIntakeHelp's
   margin-left), which is what makes "centred in the gap" also mean "centred on the
   window". Changing either margin breaks that, so change both. */
.sdIntakeTools {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 18px;
}

.sdIntakeHelp {
    margin-left: 16px;
}

/* A label and the button(s) it names stay together when the line wraps -- replaces the
   `&nbsp;  &nbsp;` and `|` spacers this bar used to be held together with. */
.sdToolGroup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* #556: the review bar replaced #554's Yes/No radios, so label.sdCompleteOpt and its
   input[type=radio] rule are gone with them -- nothing renders that markup any more. */

/* Where the form is right now (Completed by client / In process with client / Waiting for
   client).

   #566: this used to be a rounded pill with a border and the brand success wash, which put a
   green lozenge immediately beside the outline buttons it is the context FOR -- it read as a
   fourth button that happened not to respond to clicks. It is a statement, not a control, so
   it is now plain text: the markup's own <b> carries the emphasis and the buttons next to it
   are the only things that look pressable. Muted rather than black so it sits behind them.

   No `color` !important is needed because the view no longer puts .text-primary on the span
   (that class IS !important, so it was silently overriding the pill's own colour all along --
   the "green pill" was in fact blue text on a green wash). */
.sdReviewStatus {
    flex: 0 0 auto;
    color: #495057;
}
/* pclient_status() empties it for an unknown status code; a stray gap is worse than none. */
.sdReviewStatus:empty {
    display: none;
}

/* #641: "(read-only)" after "Completed by client". Lighter than the status it qualifies, because
   it is a consequence of that status rather than a second fact -- and NOT red: the form being
   protected is the feature working, not a refusal (#617).

   `!important` on the size, and it is not optional: the top of this file is
   `* { font-size: 18px !important }` and `*` matches this span, so a plain declaration here would
   be silently overridden and the text would come out the same size as the status (#527/#555).
   px rather than rem for the same reason -- `1rem` is 18px on every tier here. */
.sdReviewLocked {
    color: #6c757d;
    font-size: 15px !important;
}

/* The compose group can still outgrow the line on a narrow window, so unlike a plain
   .sdToolGroup -- which is deliberately nowrap, to keep a label attached to the buttons it
   names -- it is allowed to break.

   #566: the sentence it used to carry ("Add your questions as notes on the form, then send it
   back.") is gone from the bar entirely; it is now the Add note icon's tooltip, next to the
   control it describes rather than taking a third of the line to sit beside it. .sdComposeHint
   and its mobile override went with it -- nothing renders that markup any more. */
#sdReviewCompose {
    flex-wrap: wrap;
    justify-content: center;
}

/* #569: .sdNoteModeHint and .sdNoteModeHint .btn-link were here -- the amber "Click the form
   where the note goes / Done" pill. Both the markup and these rules are gone: RAD PDF's own
   message strip across the top of the viewer already announces the armed mode and carries the
   link that leaves it, nearer the form and unscrollable. The armed state is still shown, by
   .sd-pdf-btn.active on the Add note icons. */

/* #566: #sdAddNoteBtn is now the Add note ICON in the floating pill over the PDF (the
   duplicate .btn-outline-primary in the compose bar is gone), so its pressed-while-armed look
   comes from .sd-pdf-btn.active above -- appIntakeDoc.js's noteModeUI() toggles the same
   .active class on the same id, which is why that id moved with the control instead of being
   renamed. */

/* #566: the intake screen's floating pill. TOP-RIGHT, the same corner the doc-editing screen
   uses (docCase_V2 / docCase_noLeft, both right:36px) -- it was briefly put top-left here and
   that was simply wrong: the two screens sit next to each other in the workflow and the
   toolbar has to be in the same place on both. .sd-pdf-hover-toolbar above supplies
   everything except this pin.

   36px, not less: it has to clear the viewer's own vertical scrollbar, which on this screen
   runs down the full-width frame's right edge. */
.sdIntakePdfPanel {
    position: relative;
}
.sdIntakePdfPanel > .sd-pdf-hover-toolbar {
    right: 36px;
    top: 12px;
}

/* #617: the "Assign Client Role" cards, shown after the Import to Case confirm on an intake
   form (appIntakeDoc.js showClientRoleCards). Here rather than in caseIntakeDoc.cshtml's own
   <style> block because that block is for pinning things to that view's layout; a look does
   not belong re-copied into a view (the #566 rule for .sd-pdf-btn).

   They render inside #mymodalMsgYesNo, whose .modal-body carries text-center from _Layout --
   hence the explicit text-align: left below, or every caption centres.

   ALL LENGTHS IN px, NOT rem. sd-site.css opens with `* { font-size: 18px !important }` and
   `*` matches <html>, so 1rem is 18px on every tier including mobile (#527/#555) -- rem
   arithmetic against this file produces numbers nobody intended. */
.sd-role-q {
    text-align: left;
    font-weight: 600;
    margin-bottom: 6px;
}

.sd-role-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* A <button>, not a div: the choice is an action, so it has to be reachable and operable from
   the keyboard. Everything below is undoing the browser's button defaults.

   The resting state is deliberately NOT white-on-white: these three cards are the only thing
   to do in the dialog, so they have to read as pressable before the pointer reaches them.
   Cream fill with an amber edge does that without competing with the green the dialog uses
   for hover and for the remembered answer. */
.sd-role-card {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    text-align: left;
    background-color: #FBF8EA;
    border: 1px solid #F8A130;
    border-radius: 6px;
    cursor: pointer;
    /* The three cards are read as a set, so they have to line up even though the captions wrap
       to different heights. */
    align-items: flex-start;
    justify-content: flex-start;
}

.sd-role-card:hover,
.sd-role-card:focus {
    border-color: #15543B;
    background-color: #E8F7F0;
    outline: none;
}

/* The side stored on the case by a previous import. It carries the same light-green fill as
   :hover, not just the green edge: a border change alone was reported as invisible next to two
   cards with the identical cream background, and showing which answer is already on the case is
   this dialog's whole job on a re-import. The inset ring is what still separates it from a card
   the pointer merely happens to be over -- it is pre-selected, not chosen, and pressing is still
   required. Declared AFTER the :hover rule on purpose: one class each, so equal specificity, and
   the later rule is what makes the fill identical when the remembered card is itself hovered. */
.sd-role-card-on {
    border-color: #15543B;
    background-color: #E8F7F0;
    box-shadow: inset 0 0 0 1px #15543B;
}

.sd-role-card-title {
    font-weight: 600;
}

/* #656d75, not Bootstrap's #6c757d: at 15px this is normal-size text, so it needs 4.5:1, and
   #6c757d only manages 4.40:1 on the cream fill and 4.24:1 on the hover green. #656d75 clears
   it on all three states the card can be in (4.93 / 4.75 / 5.25). */
.sd-role-card-hint {
    color: #656d75;
    font-size: 15px !important;   /* beats the global * { font-size: 18px !important } (#527) */
}

/* Below the phone breakpoint the three cards stack; side by side they would each be about a
   third of a 360px screen, which is not enough for "Responding / Defending Party" to read as
   anything. */
@media (max-width: 767px) {
    .sd-role-card {
        flex: 1 1 100%;
    }
}

/* #617: a plain sentence shown in a message dialog (#mymodalMsg).

   NOT an <h5>, which is what the intake import's success message used to be. The site-wide
   rule at the top of this file is

       h5 { color: #e03215 !important }

   so EVERY bare <h5> in this app renders in the error red. That is right for a warning and
   wrong for "this worked". (It was also 17px against 18px body text, which is what made the
   message look subtly mis-sized; that half was fixed in the rule itself.)

   No font-size here on purpose: `* { font-size: 18px !important }` already gives body size at
   every tier (14px below 767px), and anything declared here without !important would lose to
   it anyway. Colour is set rather than inherited so the rule states its own intent.

   Margins in px, never rem -- 1rem is 18px here on every tier, so rem arithmetic against this
   file does not mean what it looks like (#527/#555). 18px is about one blank line at body
   size, which is the whitespace this is asked to leave above and below. */
.sd-modal-msg {
    text-align: center;
    color: #111;
    margin: 18px 0;
}

/* ------------------------------------------------------------------------------------------
   #625: "Add In Pro Per" -- the tick that rides after the Client label in the doc editor's
   left panel when the same contact holds both the Attorney and the Client role on the form.

   Sized in PX, not rem. `1rem` is 18px here on EVERY tier, because html{font-size:18px
   !important} at the top of this file beats the mobile `*` rule -- so rem LENGTHS do not
   change per breakpoint and rem arithmetic against this file is misleading (#527/#555).

   font-size needs !important for the same reason: `* { font-size: 18px !important }` at the
   top of this file matches these elements, and a plain declaration loses to it however
   specific the selector.
   ------------------------------------------------------------------------------------------ */
.sd-inproper {
    display: inline-flex;
    align-items: center;
    /* The label sits beside a role name in a narrow panel; it must not be the thing that
       wraps, and it must not be squeezed to nothing the way #622's pill was when a flex
       parent shrank it. */
    flex-shrink: 0;
}

.sd-inproper-box {
    /* Bootstrap's own margin puts the box hard against the role name. */
    margin: 0 5px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.sd-inproper-lbl {
    /* No margin-bottom: the parent is a flex row with align-items:center, and Bootstrap's
       label{margin-bottom:.5rem} = 9px would push the text below the box's centre -- the
       same 4.5px offset that had to be undone on DataTables' rows-per-page select (#555). */
    margin: 0;
    font-size: 14px !important;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}

.sd-inproper-box:disabled,
.sd-inproper-box:disabled + .sd-inproper-lbl {
    /* Document is Final, the user has view access only, or this is a phone -- tmplLock (#529). */
    cursor: default;
    opacity: .55;
}