@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../assets/fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../assets/fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --p50: #F8EEF8;
    --p100: #EDCAED;
    --p200: #D89ED8;
    --p400: #B45AB4;
    --p600: #7F2A7B;
    --p800: #5C1E59;
    --p900: #7F2A7B;
    --a50: #FAEEDA;
    --a100: #FAC775;
    --a400: #BA7517;
    --g50: #EAF3DE;
    --g600: #3B6D11;
    --r50: #FCEBEB;
    --r600: #A32D2D;
    --n50: #F1EFE8;
    --n100: #D3D1C7;
    --n200: #B4B2A9;
    --n400: #888780;
    --n600: #5F5E5A;
    --n800: #444441;
    --bg: #fff;
    --bg2: #f0eee9;
    --white: #fff;
    --black: #000;
    --page-card-bg: #0000000d;
    --shadow: 0 24px 64px rgba(127, 42, 123, .26);
    --font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
}

html,
body {
    font-family: var(--font)
}

body {
    background: var(--bg);
    min-height: 100vh;
    color: var(--n800)
}

body.modal-open {
    overflow: hidden
}

input,
textarea,
select,
button {
    font-family: var(--font)
}

button {
    cursor: pointer
}

button:focus-visible {
    outline: 2px solid var(--p600);
    outline-offset: 1px
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--p200);
    box-shadow: none
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--p600);
    border-radius: 3px
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-6px)
    }

    75% {
        transform: translateX(6px)
    }
}

.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--p900) 0%, var(--p600) 100%)
}

body:not(.is-booting) .boot-splash {
    display: none
}

body.is-booting #login-screen,
body.is-booting #app-shell {
    display: none !important
}

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, var(--p900) 0%, var(--p600) 100%)
}

.login-screen.is-active {
    display: flex
}

.login-card {
    background: #fff;
    border-radius: 28px;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.login-card.is-shaking {
    animation: shake .28s ease
}

.mj-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    flex-shrink: 0
}

.mj-logo-img--large {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin: 0
}

.boot-splash .boot-splash__logo {
    width: 72px;
    height: 72px;
    border-radius: 20px
}

@media(max-width:768px) {
    .boot-splash .boot-splash__logo {
        width: 56px;
        height: 56px;
        border-radius: 16px
    }
}

.login-card__brand {
    background: var(--p50);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    flex: 0 0 auto;
}

.login-card__logo-wrap {
    flex: 0 0 auto
}

.login-card__brand-copy {
    min-width: 0
}

.mj-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--p600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0
}

.mj-logo--large {
    width: 72px;
    height: 72px;
    background: #fff;
    color: var(--p900);
    margin: 0 auto 16px;
    font-size: 28px
}

.login-card__firm {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    color: #000;
    margin: 0 0 4px;
    line-height: 1.2
}

.login-card__system {
    font-size: 11px;
    color: var(--p400);
    letter-spacing: .08em;
    text-transform: uppercase
}

.login-card__form {
    padding: 28px 32px 30px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.login-card__form h1 {
    font-family: var(--display);
    font-size: 26px;
    color: var(--p900);
    margin-bottom: 7px
}

.login-card__form>p {
    font-size: 13px;
    color: #1c1c1c;
    line-height: 1.6;
    margin-bottom: 24px
}

.field {
    display: block;
    margin-bottom: 16px
}

.field span:first-child {
    font-size: 11px;
    font-weight: 500;
    color: var(--p800);
    letter-spacing: .06em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 19px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: var(--n800);
    background: var(--page-card-bg);
}

.password-wrap {
    position: relative;
    display: block
}

.password-wrap input {
    padding-right: 58px
}

.text-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--n400);
    font-size: 12px;
    font-weight: 600
}

.login-error {
    background: var(--r50);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--r600);
    display: flex;
    gap: 8px;
    align-items: center
}

.form-notice {
    display: none;
    background: var(--r50);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--r600);
    gap: 8px;
    align-items: center
}

.form-notice.is-visible {
    display: flex
}

.form-notice.is-success {
    background: var(--g50);
    color: var(--g600)
}

.field-notice {
    display: block;
    margin-top: 7px;
    color: var(--r600);
    font-size: 12px;
    line-height: 1.35
}

.field-notice[hidden] {
    display: none
}

.primary-btn {
    padding: 12px 26px;
    border-radius: 8px;
    border: none;
    background: var(--p800);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.primary-btn[disabled] {
    cursor: not-allowed;
    opacity: .8
}

.btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgb(255 255 255 / 45%);
    border-top-color: #fff;
    border-radius: 999px;
    animation: spin .75s linear infinite
}

.primary-btn.is-loading .btn-spinner {
    display: inline-block
}

.ghost-btn.is-loading .btn-spinner {
    display: inline-block;
    border-color: rgb(127 42 123 / 25%);
    border-top-color: var(--p800)
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.primary-btn--full {
    width: 100%;
    padding: 17px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer
}

.ghost-btn {
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    background: #fff;
    color: var(--n600);
    font-size: 14px
}

.danger-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    background: var(--r50);
    color: var(--r600);
    font-size: 13px;
    font-weight: 500
}

.login-card__help {
    margin-top: 20px !important;
    font-size: 12px !important;
    color: var(--n400) !important;
    text-align: center !important
}

.app-shell {
    min-height: 100vh
}

.topbar {
    background: var(--p900);
    padding: 15px 18px;
    position: sticky;
    top: 0;
    z-index: 100
}

.topbar__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 11px
}

.brand-lockup__name {
    font-family: var(--display);
    font-size: 17px;
    color: #fff;
    font-weight: 600;
}

.brand-lockup__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--p200);
    letter-spacing: .08em;
    text-transform: uppercase
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FAC775
}

.desktop-nav {
    display: flex;
    gap: 8px;
    align-items: center
}

.nav-pill {
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 500
}

.nav-pill.is-active {
    background: rgba(0, 0, 0, 0.795);
    border-color: none;
    font-weight: 700
}

.nav-pill--accent {
    border: none;
    font-weight: 600;
    padding-inline: 18px
}

.user-chip {
    padding: 7px 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    border: none;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 13px
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--p100);
    color: var(--p800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    font-size: 9px;
    font-weight: 700
}

.main-pad {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 18px
}

.notice-card {
    background: #fff;
    border: none;
    border-left: 4px solid var(--g600);
    border-radius: 10px;
    padding: 11px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--n600);
    line-height: 1.5
}

.notice-card strong {
    color: var(--g600)
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    margin-bottom: 22px
}

.stat-card {
    background: var(--p50);
    border-radius: 13px;
    padding: 17px 20px;
    border: none
}

.stat-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px
}

.stat-card__label {
    font-size: 11px;
    color: var(--n400);
    letter-spacing: .06em;
    text-transform: uppercase
}

.stat-card__icon {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--p600);
    opacity: .72
}

.stat-card__icon .icon-slot {
    width: 17px;
    height: 17px
}

.stat-card__value {
    font-family: var(--display);
    font-size: 29px;
    font-weight: 700
}

.toolbar {
    display: flex;
    gap: 11px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center
}

.search-box {
    position: relative;
    flex: 1;
    width: 100%
}

.search-box span {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--n400);
    font-size: 14px;
    pointer-events: none
}

.search-box input {
    width: 100%;
    padding: 15px 14px 15px 34px;
    border-radius: 10px;
    font-size: 14px;
    background: var(--page-card-bg);
    color: var(--n800);
    border: none;
}

.filter-btns {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.filter-btns button {
    padding: 12px 18px;
    border-radius: 9px;
    font-size: 13px;
    border: none;
    background: #eeeeee;
    color: var(--n600)
}

.filter-btns button.is-active {
    border-color: var(--p800);
    background: var(--p800);
    color: #fff;
    font-weight: 600
}

.filter-btns .filter-personal {
    margin-left: 4px;
    background: var(--p50);
    color: var(--p800)
}

.filter-btns .filter-personal.is-active {
    background: var(--p800);
    color: #fff
}

.view-panel {
    display: none
}

.view-panel.is-active {
    display: block
}

.case-table-card,
.calendar-card {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px
}

.case-table-wrap {
    overflow-x: auto
}

.case-table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse
}

.case-table thead tr {
    background: var(--p900)
}

.case-table th {
    padding: 18px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap
}

.case-table th button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit
}

.case-table tr {
    border-top: 1px solid var(--n50)
}

.case-table tbody tr:nth-child(even) {
    background: #fafaf9
}

.case-table tbody tr:hover {
    background: rgba(0, 0, 0, .035) !important;
    transition: background .12s
}

.case-table td {
    padding: 14px 16px;
    vertical-align: middle
}

.case-title {
    font-weight: 600;
    color: var(--n800);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mono {
    font-family: monospace
}

.small-muted {
    font-size: 11px;
    color: var(--n400);
    margin-top: 3px
}

.court-cell,
.filing-cell {
    font-size: 13px;
    color: var(--n600);
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.filing-cell.has-warning {
    color: var(--a400)
}

.badge {
    font-size: 12px;
    padding: 4px 11px;
    border-radius: 20px;
    font-weight: 400;
    white-space: nowrap;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center
}

.date-badge {
    font-size: 11px;
    padding: 4px 8px 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    display: inline-block
}

.row-user {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap
}

.view-btn {
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    background: var(--p50);
    color: var(--p600);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap
}

.table-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--n50);
    font-size: 12px;
    color: var(--n400);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(127, 42, 123, .52);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: fadeIn .18s ease
}

.modal-box {
    background: #fff;
    border-radius: 28px;
    width: 100%;
    max-width: 640px;
    max-height: 91vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: slideUp .22s cubic-bezier(.22, .68, 0, 1.2)
}

.modal-box--sm {
    max-width: 500px
}

.modal-head {
    background: var(--p50);
    padding: 22px 24px 18px;
    border-radius: 28px 28px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px
}

.modal-head__sub {
    margin: 0;
    font-size: 11px;
    color: #000;
    letter-spacing: .1em;
    text-transform: uppercase
}

.modal-head h2 {
    margin: 5px 0 0;
    font-family: var(--display);
    font-size: 19px;
    color: #000;
    line-height: 1.35
}

.modal-close {
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-body {
    padding: 20px 24px
}

.modal-actions {
    padding: 4px 24px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.modal-actions--split {
    justify-content: space-between
}

.modal-actions--left {
    justify-content: flex-start
}

.modal-actions--case-detail {
    justify-content: space-between;
    align-items: center;
    gap: 8px
}

.case-delete-btn {
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid rgba(220, 38, 38, .24);
    border-radius: 8px;
    background: var(--r50);
    color: var(--r600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.case-delete-btn .icon-slot {
    font-size: 15px
}

.case-delete-btn[disabled] {
    cursor: not-allowed;
    opacity: .72
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 15px
}

.form-grid .full {
    grid-column: 1/-1
}

.form-input {
    width: 100%;
    min-width: 0;
    padding: 17px 15px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: var(--n800);
    background: var(--page-card-bg);
    display: block;
}

.form-grid label,
.form-grid .full {
    min-width: 0
}

.form-grid input[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none
}

.form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--p800);
    margin-bottom: 5px;
    display: block;
    letter-spacing: .05em;
    text-transform: uppercase
}

.form-help {
    display: block;
    margin-top: 8px;
    color: var(--n400);
    font-size: 12px;
    line-height: 1.5
}

.reminder-box {
    background: var(--p50);
    border-radius: 12px;
    padding: 15px 17px;
    border: none;
}

.reminder-box p {
    font-size: 13px;
    color: var(--p600);
    line-height: 1.6;
    margin-bottom: 6px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px
}

.detail-tile {
    background: #eee;
    border-radius: 10px;
    padding: 12px 15px
}

.detail-label {
    margin: 0 0 10px;
    font-size: 11px;
    color: var(--n400);
    text-transform: uppercase;
    letter-spacing: .05em
}

.detail-value {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--n800)
}

.detail-section {
    margin-bottom: 13px
}

.detail-box {
    border-radius: 10px;
    padding: 14px;
    font-size: 13px;
    line-height: 1.7
}

.detail-box--neutral {
    background:var(--page-card-bg);
    color: var(--n600)
}

.detail-box--warning {
    background: var(--a50);
    border: none;
    color: var(--a400)
}

.detail-box--mail {
    background: var(--p50);
    border: none;
    color: var(--p800)
}

.detail-link {
    color: var(--p800);
    font-weight: 700;
    text-decoration: none
}

.detail-link:hover,
.detail-link:focus {
    text-decoration: underline
}

.case-team {
    margin-bottom: 13px
}

.case-team__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px
}

.case-team__head .detail-label {
    margin: 0
}

.case-team__head > span {
    color: var(--n400);
    font-size: 12px
}

.case-team__box {
    border-radius: 10px;
    background: var(--page-card-bg);
    overflow: hidden;
    padding: 6px 0 6px 0;
}

.case-team-list {
    display: grid
}

.case-team-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--n50)
}

.case-team-member__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.case-team-member__person strong,
.case-team-member__person span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.case-team-member__person strong {
    color: var(--n800);
    font-size: 13px
}

.case-team-member__person span {
    color: var(--n800);
    font-size: 12px;
    font-weight: 400;
}

.case-team-member__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.case-team-role {
    color: var(--p800);
    background: var(--p50);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    padding: 5px 8px;
    white-space: nowrap
}

.case-team-remove {
    width: 30px;
    height: 30px;
    border: 1px solid var(--n50);
    color: var(--n500);
    background: #fff
}

.case-team-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px auto;
    gap: 10px;
    padding: 12px 14px;
    background: #f2f2f2
}

.activity-item {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: flex-start;
    background: var(--page-card-bg);
    padding: 18px 12px;
    border-radius: 23px;
}

.activity-item p {
    font-size: 14px;
    line-height: 1.6
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    color: var(--n400);
    font-size: 12px
}

.pagination__controls {
    display: flex;
    align-items: center;
    gap: 8px
}

.pagination__btn {
    background: var(--n100);
    color: var(--n800);
    border-radius: 8px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.pagination__btn:hover {
    background: var(--black);
    color: var(--white);
}

.pagination__btn .btn-spinner {
    width: 12px;
    height: 12px;
    border-width: 2px
}

.pagination__btn:not(.is-loading) .btn-spinner {
    display: none
}

.pagination__btn[disabled] {
    cursor: default;
    opacity: .42
}

.pagination__page {
    color: var(--n600);
    font-weight: 500;
    white-space: nowrap
}

.calendar-head {
    background: var(--p50);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.calendar-title {
    display: flex;
    align-items: center;
    gap: 10px
}

.calendar-title p {
    font-size: 11px;
    color: var(--p500);
    letter-spacing: .1em;
    text-transform: uppercase
}

.calendar-title h3 {
    font-family: var(--display);
    font-size: 18px;
    color: var(--black)
}

.calendar-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.calendar-actions button {
    height: 30px;
    border-radius: 7px;
    background: var(--p600);
    border: none;
    color: #fff;
    font-size: 13px;
    padding: 0 11px
}

.calendar-range-wrap {
    position: relative;
    display: inline-flex
}

.calendar-range-wrap::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--p700);
    border-bottom: 1.5px solid var(--p700);
    transform: rotate(45deg);
    pointer-events: none
}

.calendar-range-select {
    height: 30px;
    min-width: 76px;
    border: 1px solid var(--p200);
    border-radius: 7px;
    background: var(--p50);
    color: var(--p900);
    font-size: 13px;
    font-weight: 600;
    padding: 0 22px 0 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none
}


.calendar-layout {
    display: grid;
    grid-template-columns: 1fr 280px
}

.calendar-grid-wrap {
    border-right: 1px solid var(--n100)
}

.weekday-grid,
.day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr)
}

.weekday {
    padding: 10px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--n400);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--n100)
}

.day-cell {
    min-height: 80px;
    padding: 6px 8px;
    border-right: 1px solid var(--n50);
    border-bottom: 1px solid var(--n50);
    background: #fff;
    position: relative
}

.day-cell:nth-child(7n) {
    border-right: 0
}

.day-cell.has-cases {
    background: #fdfafd;
    cursor: pointer
}

.day-cell.has-cases:hover {
    background: var(--p100)
}

.day-cell.is-today {
    background: var(--p50)
}

.day-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--n800)
}

.day-cell.is-muted .day-num {
    color: var(--n200)
}

.day-cell.is-today .day-num {
    background: var(--p600);
    color: #fff;
    font-weight: 700
}

.cal-case-chip {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.4
}

.cal-sidebar {
    padding: 16px;
    overflow-y: auto;
    max-height: 480px
}

.cal-sidebar-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--n400);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px
}

.month-case {
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    cursor: pointer
}

.month-case:hover {
    border-color: var(--p400)
}

.legend {
    padding: 10px 16px;
    border-top: 1px solid var(--n50);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center
}

.legend span {
    font-size: 12px;
    color: var(--n800)
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    border: none;
}

.toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--p900);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 28px rgba(127, 42, 123, .28);
    z-index: 9999;
    white-space: nowrap
}

.refresh-notice {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--p900);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap
}

.refresh-notice[hidden] {
    display: none
}

.mob-nav {
    display: none
}

/* v2 login polish */
.login-card__brand.login-card__firm {
    color: #000
}

.login-error,
.login-error[hidden],
.login-error:not(.is-visible) {
    display: none !important
}

.login-error.is-visible {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--r50);
    border: none;
    color: var(--r600);
    font-size: 13px;
    line-height: 1.45
}

.remember-login {
    display: flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin: -4px 0 16px;
    color: var(--n800);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer
}

.remember-login input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid;
    border-radius: 3px;
    background: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.remember-login input:checked {
    border-color: var(--p800);
    background: var(--p800)
}

.remember-login input:checked:after {
    content: "";
    width: 7px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: -1px
}

.remember-login span {
    display: block
}

.forgot-password,
.forgot-password:visited {
    display: block;
    width: max-content;
    text-align: center;
    color: var(--p800);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px
}

.forgot-password:hover {
    color: var(--p900)
}

/* v2 advanced filters */
.advanced-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin: -4px 0 18px;
    width: 100%
}

.advanced-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
    max-width: 220px;
    flex: 0 1 180px;
    position: relative
}

.advanced-filter--wide {
    flex: 1 1 230px;
    max-width: 360px
}

.advanced-filter span {
    font-size: 11px;
    font-weight: 700;
    color: var(--p800);
    letter-spacing: .06em;
    text-transform: uppercase
}

.advanced-filter__select {
    width: 100%;
    height: 42px;
    padding: 0 34px 0 13px;
    border-radius: 10px;
    background: var(--page-card-bg);
    color: var(--n800);
    font-size: 13px;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
}



.advanced-filter::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 17px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--n600);
    border-bottom: 2px solid var(--n600);
    transform: rotate(45deg);
    pointer-events: none
}

.advanced-filter__select:focus {
    border-color: var(--p200)
}

/* v2 icon sizing guard */
.icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    flex: 0 0 auto;
    margin: 0;
}

.icon-slot svg {
    display: block;
    width: 1em;
    height: 1em;
    max-width: 1em;
    max-height: 1em;
    fill: none;
    stroke: var(--p400);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.case-filter-toggle .icon-slot svg {
    width: 2em;
    height: 2em;
    max-width: 2em;
    max-height: 2em;
}

.password-wrap .icon-slot {
    width: 2em;
    height: 2em;
    max-width: 2em;
    max-height: 2em;
}

.nav-pill .icon-slot {
    font-size: 14px
}

.mob-nav .icon-slot {
    font-size: 18px
}

.search-box .icon-slot {
    font-size: 14px
}

.modal-close .icon-slot {
    font-size: 18px
}

.detail-label .icon-slot,
.form-label .icon-slot {
    font-size: 13px;
    margin-right: 5px
}

.primary-btn .icon-slot,
.danger-btn .icon-slot,
.ghost-btn .icon-slot,
.view-btn .icon-slot {
    font-size: 14px;
    margin-right: 5px
}

.primary-btn .icon-slot svg {
    stroke: #fff
}

.mob-nav button .icon-slot svg {
    stroke: var(--p200)
}

.mob-nav button.is-active .icon-slot svg {
    stroke: var(--p600);
}

/* v2 notes feed */
.case-notes {
    margin: 16px 0 14px;
    border: 1px solid var(--n100);
    border-radius: 13px;
    background: #fff;
    overflow: hidden
}

.case-notes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--n50);
    background: #fafaf8
}

.case-notes__head .detail-label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px
}

.case-notes__head>span {
    font-size: 11px;
    font-weight: 700;
    color: var(--n400);
    text-transform: uppercase;
    letter-spacing: .05em
}

.note-feed {
    display: flex;
    flex-direction: column
}

.note-feed-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--n50)
}

.note-feed-item:last-child {
    border-bottom: 0
}

.note-feed-item .avatar {
    width: 28px;
    height: 28px;
    font-size: 10px
}

.note-feed-item__body {
    min-width: 0
}

.note-feed-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px
}

.note-feed-meta strong {
    font-size: 13px;
    color: var(--n800);
    font-weight: 700
}

.note-feed-meta span {
    font-size: 11px;
    color: var(--n400);
    white-space: nowrap
}

.note-feed-item p {
    margin: 0;
    color: var(--n600);
    font-size: 13px;
    line-height: 1.65
}

.note-feed-empty {
    padding: 18px 14px;
    color: var(--n400);
    font-size: 13px;
    text-align: left;
}

.note-composer {
    border-top: 1px solid var(--n50);
    background: #fafaf8;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end
}

.note-composer textarea {
    background: var(--page-card-bg);
}

.note-composer .primary-btn {
    height: 40px;
    align-self: end;
    white-space: nowrap;
}

/* v2 clickable cards and empty state */
.case-table tbody tr[data-case-id] {
    cursor: pointer
}

.case-table tbody tr[data-case-id]:active {
    background: rgba(0, 0, 0, 0.15) !important
}

.case-empty-row,
.case-empty-row:hover {
    background: #fff !important;
    cursor: default
}

.case-empty-row td {
    padding: 44px 18px !important
}

.case-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #000;
    font-size: 14px;
    line-height: 1.5
}

.case-empty-state strong {
    font-weight: 500;
    color: #000
}

.inline-link {
    border: 0;
    border-radius: 8px;
    background: var(--p800);
    color: #fff;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none
}

.inline-link:hover,
.inline-link:focus {
    background: var(--p900);
    color: #fff
}

.inline-link:active {
    transform: translateY(1px)
}

/* v2 profile and nav affordance */
.nav-pill,
.mob-nav button,
.user-chip,
[data-profile-open] {
    cursor: pointer
}

.user-chip {
    border: none;
    font: inherit
}

.user-chip:hover,
.user-chip:focus {
    background: rgba(255, 255, 255, .18)
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--page-card-bg)
}

.profile-summary__avatar {
    width: 44px;
    height: 44px;
    font-size: 14px
}

.profile-summary h3 {
    color: var(--n800);
    font-size: 17px;
    font-weight: 700
}

.profile-summary p {
    margin: 0;
    color: var(--n400);
    font-size: 13px
}

.mob-nav [data-profile-open] .icon-slot {
    font-size: 18px
}



.profile-logout {
    background: var(--r600);
    color: var(--white)
}

.profile-logout:hover,
.profile-logout:focus {
    background: #000;
    color: var(--white)
}

.profile-logout .icon-slot svg {
    stroke: var(--white)
}

/* v2 page views */
.desktop-nav .icon-slot {
    display: none !important
}

.desktop-nav .nav-pill {
    gap: 0
}

.page-panel {
    border: 1px solid var(--n100);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px
}

.page-panel__head {
    background: #fff;
    padding: 18px 20px;
    border-bottom: 1px solid var(--n50)
}

.page-panel__head p {
    margin: 0 0 5px;
    color: var(--n400);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

.page-panel__head h2 {
    margin: 0;
    color: var(--p900);
    font-family: var(--display);
    font-size: 20px;
    line-height: 1.3
}

.page-panel__body {
    padding: 18px 20px
}

.page-panel__body--activity {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.page-panel__body--activity .pagination {
    justify-content: space-between;
    padding-top: 8px
}

.page-card-list {
    display: grid;
    gap: 12px
}

.reminder-card {
    margin: 0
}

.view-panel:not(.is-active) {
    display: none !important
}

@media(max-width:960px) {
    .desktop-nav {
        display: none !important
    }

    .mob-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 200;
        height: 60px;
        border-top: 1px solid rgba(0, 0, 0, .05)
    }

    .mob-nav button {
        flex: 1;
        background: none;
        border: none;
        color: rgba(0, 0, 0, 0.7);
        font-size: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px
    }

    .mob-nav button.is-active {
        color: #000
    }

    .mob-nav > [data-profile-open] {
        display: none !important
    }

    .main-pad {
        padding-bottom: 80px
    }
}

/* Responsive */
@media(max-width:768px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden
    }

    .desktop-nav {
        display: none !important
    }

    .mob-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 200;
        height: 60px;
        border-top: 1px solid rgba(0, 0, 0, .05)
    }

    .mob-nav button {
        flex: 1;
        background: none;
        border: none;
        color: rgba(0, 0, 0, 0.7);
        font-size: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px
    }

    .mob-nav button.is-active {
        color: #000
    }

    .mob-nav .icon {
        font-size: 18px;
        line-height: 1
    }

    .topbar {
        padding: 18px 12px
    }

    .topbar__inner {
        align-items: flex-start
    }

    .user-chip {
        display: none
    }

    .brand-lockup__name {
        font-size: 15px
    }

    .main-pad {
        padding: 16px 12px 80px;
        min-width: 0;
        overflow: hidden
    }

    .notice-card {
        align-items: flex-start
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .stat-card {
        padding: 14px
    }

    .stat-card__value {
        font-size: 25px
    }

    .toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden
    }

    .search-box {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: none
    }

    .search-box input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box
    }

    .filter-btns {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        white-space: normal;
        padding-bottom: 0;
        display: flex;
        gap: 10px 6px;
        flex-wrap: wrap
    }

    .filter-btns button {
        flex: 0 1 auto;
        max-width: 100%;
        box-sizing: border-box
    }

    .case-table-wrap {
        overflow-x: visible
    }

    .case-table thead {
        display: none
    }

    .case-table,
    .case-table tbody,
    .case-table tr,
    .case-table td {
        display: block;
        width: 100%
    }

    .case-table tr {
        border: 1px solid var(--n100);
        border-radius: 10px;
        margin: 10px 0;
        background: #fff;
        padding: 12px 14px;
        position: relative
    }

    .case-table td {
        border: none !important;
        padding: 3px 0 !important;
        font-size: 13px
    }

    .case-table td:first-child {
        font-weight: 600;
        color: var(--n800);
        font-size: 14px;
        padding-bottom: 6px !important
    }

    .case-title {
        white-space: normal;
        max-width: none
    }

    .court-cell,
    .filing-cell {
        max-width: none;
        white-space: normal
    }

    .case-table td:last-child {
        margin-top: 8px
    }

    .table-footer {
        margin-top: 8px;
        display: block;
        line-height: 1.7
    }

    .pagination {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px
    }

    .calendar-layout {
        grid-template-columns: 1fr
    }

    .cal-sidebar {
        display: none
    }

    .calendar-grid-wrap {
        border-right: none
    }

    .calendar-head {
        display: block
    }

    .calendar-actions {
        margin-top: 12px
    }

    .day-cell {
        min-height: 66px;
        padding: 5px
    }

    .cal-case-chip {
        display: none
    }

    .legend {
        gap: 9px
    }

    .modal-box {
        max-height: 92vh
    }

    .modal-body {
        padding: 18px
    }

    .modal-head {
        padding: 20px
    }

    .form-grid,
    .detail-grid {
        grid-template-columns: 1fr
    }

    .form-grid .full {
        grid-column: 1
    }

    .modal-actions {
        padding: 4px 18px 20px;
        display: flex;
        grid-template-columns: 1fr
    }

    .modal-actions--split {
        grid-template-columns: 1fr
    }

    .case-team-member {
        align-items: flex-start;
        flex-direction: column
    }

    .case-team-member__actions {
        width: 100%;
        justify-content: space-between
    }

    .case-team-form {
        grid-template-columns: 1fr
    }

    .login-card__form {
        padding: 24px
    }

    .login-card__brand {
        padding: 24px
    }

    .login-card__form h1 {
        font-size: 24px
    }
}

@media(max-width:430px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .stat-card__label {
        font-size: 10px
    }

    .stat-card__value {
        font-size: 23px
    }

    .weekday {
        font-size: 10px
    }

    .day-num {
        width: 21px;
        height: 21px
    }

    .day-cell {
        min-height: 54px
    }

    .calendar-actions button {
        padding: 0 8px
    }

    .brand-lockup {
        gap: 8px
    }

    .mj-logo,
    .mj-logo-img {
        width: 36px;
        height: 36px
    }
}

@media(max-width:768px) {
    .advanced-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0 0 14px;
        max-width: 100%;
        overflow: hidden
    }

    .advanced-filter {
        min-width: 0;
        max-width: none;
        flex: none;
        width: 100%
    }

    .advanced-filter--wide {
        grid-column: 1/-1;
        max-width: none
    }

    .advanced-filter__select {
        height: 48px;
        min-width: 0;
        max-width: 100%;
        font-size: 13px
    }
}

@media(max-width:430px) {
    .advanced-filters {
        grid-template-columns: 1fr
    }

    .advanced-filter--wide {
        grid-column: auto
    }
}

@media(max-width:768px) {
    .case-notes {
        border-radius: 12px
    }

    .note-feed-meta {
        display: block
    }

    .note-feed-meta span {
        display: block;
        margin-top: 2px;
        white-space: normal
    }

    .note-composer {
        grid-template-columns: 1fr
    }

    .note-composer .primary-btn {
        width: 100%
    }
}

@media(max-width:768px) {
    .case-empty-row td {
        padding: 34px 14px !important
    }

    .case-empty-state {
        display: grid;
        justify-items: center;
        gap: 9px
    }

    .inline-link {
        padding: 8px 14px
    }
}

@media(max-width:430px) {
    .mob-nav button {
        font-size: 9px
    }

    .mob-nav .icon-slot {
        font-size: 17px
    }
}

@media(max-width:768px) {
    .page-panel {
        border-radius: 12px
    }

    .page-panel__head {
        padding: 16px
    }

    .page-panel__head h2 {
        font-size: 18px
    }

    .page-panel__body {
        padding: 15px
    }
}

/* v2 radius standard */
.login-card,
.modal-box {
    border-radius: 28px
}

.modal-head {
    border-radius: 28px 28px 0 0
}

/* v2 modal scrollbar hide */
.modal-box {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.modal-box::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

/* v2 brand/profile click targets */
.brand-lockup {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer
}

.brand-lockup:hover .brand-lockup__name,
.brand-lockup:focus .brand-lockup__name {
    color: #fff
}

.user-chip--avatar-only {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 12px
}

.user-chip--avatar-only .avatar {
    width: 26px;
    height: 26px
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto
}

.topbar-icon-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto
}

.topbar-icon-btn .icon-slot,
.topbar-icon-btn .icon-slot svg {
    width: 18px;
    height: 18px;
    color: #edcaed !important;
    stroke: currentColor
}

.topbar-icon-btn .icon-slot svg {
    max-width: 18px;
    max-height: 18px;
    stroke: #edcaed !important
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus {
    background: rgba(255, 255, 255, .18)
}

.preference-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--page-card-bg);
    border-radius: 12px;
    padding: 14px
}

.preference-toggle strong,
.preference-toggle small {
    display: block
}

.preference-toggle strong {
    color: var(--n800);
    font-size: 14px
}

.preference-toggle small {
    color: var(--n400);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px
}

.preference-toggle input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto
}

.preferences-guide {
    font-size: 12px;
    line-height: 1.5
}

.preferences-topic-card {
    display: grid;
    gap: 8px
}

.preferences-topic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center
}

.preferences-copy-btn {
    min-height: 44px;
    padding-inline: 14px
}

.preferences-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px
}

.preferences-links a {
    color: var(--p800);
    font-weight: 700;
    text-decoration: none
}

@media (max-width: 620px) {
    .preferences-topic-row {
        grid-template-columns: 1fr
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* v2 class-based rendering */
.badge--active {
    background: var(--p50);
    color: var(--p800);
    border-color: none
}

.badge--pending {
    background: var(--r50);
    color: var(--r600);
    border-color: none
}

.badge--concluded {
    background: var(--g50);
    color: var(--g600);
    border-color: none
}

.date-badge--neutral {
    background: var(--n50);
    color: var(--n600)
}

.date-badge--past {
    background: var(--n100);
    color: var(--n600)
}

.date-badge--today {
    background: var(--r50);
    color: var(--r600)
}

.date-badge--warning {
    background: var(--a50);
    color: var(--a400)
}

.date-badge--soon {
    background: var(--p50);
    color: var(--p600)
}

.stat-card__value--brand {
    color: var(--p600)
}

.stat-card__value--danger {
    color: var(--r600)
}

.case-date-cell {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--n800)
}

.case-detail-suit {
    margin-bottom: 13px
}

.case-detail-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.empty-copy {
    color: var(--n400);
    font-size: 14px;
    text-align: center;
    padding: 32px 0;
    line-height: 1.6
}

.empty-copy--compact {
    font-size: 13px;
    padding: 20px 0
}

.legend-dot.badge--active {
    background: var(--p50);
    border-color: none
}

.legend-dot.badge--pending {
    background: var(--r50);
    border-color: none
}

.legend-dot.badge--concluded {
    background: var(--g50);
    border-color: none
}

.legend-dot--today {
    border-radius: 50%;
    background: var(--p600);
    border-color: var(--p600)
}

.cal-case-chip.badge--active {
    background: var(--p50);
    color: var(--p800);
    border: 1px solid var(--p200)
}

.cal-case-chip.badge--pending {
    background: var(--r50);
    color: var(--r600);
    border: 1px solid #F7C1C1
}

.cal-case-chip.badge--concluded {
    background: var(--g50);
    color: var(--g600);
    border: 1px solid #C0DD97
}

.cal-more {
    font-size: 10px;
    color: var(--p600);
    font-weight: 600
}

.month-case__title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--n800);
    line-height: 1.4
}

.month-case__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.month-case__status {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 500;
    border: 1px solid transparent
}

.month-case__date {
    font-size: 10px;
    color: var(--n400)
}

.month-case__badge {
    margin-top: 4px
}

.month-case__status.badge--active,
.day-case-card__status.badge--active {
    background: var(--p50);
    color: var(--p800);
    border-color: var(--p200)
}

.month-case__status.badge--pending,
.day-case-card__status.badge--pending {
    background: var(--r50);
    color: var(--r600);
    border-color: #F7C1C1
}

.month-case__status.badge--concluded,
.day-case-card__status.badge--concluded {
    background: var(--g50);
    color: var(--g600);
    border-color: #C0DD97
}

.day-case-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px
}

.day-case-card__title {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--n800);
    line-height: 1.4;
    padding-right: 10px
}

.day-case-card__status {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent
}

.day-case-card__court {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--n600)
}

.day-case-card__pending {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--a400)
}

.reminder-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 11px
}

.reminder-card__title {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--black)
}

.reminder-card__schedule {
    border-top: 1px solid var(--n50);
    padding-top: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.reminder-card__schedule p {
    font-size: 13px
}

.reminder-card__schedule span {
    color: var(--n400);
    display: inline-block;
    min-width: 118px
}

.reminder-card__email {
    font-size: 12px;
    color: var(--p600);
    padding-left: 0
}

.page-note {
    margin-bottom: 18px
}

.activity-action {
    color: var(--n400)
}

/* v2 mobile case card refresh */
@media(max-width:768px) {
    .case-table-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
        margin-top: 22px;
    }

    .case-table-wrap {
        overflow: visible
    }

    .case-table tbody {
        display: grid;
        gap: 12px
    }

    .case-table tr {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 7px 12px;
        border: 0 !important;
        border-radius: 18px !important;
        margin: 0 !important;
        background: rgb(0 0 0 / 5%) !important;
        padding: 16px !important;
        box-shadow: 0 10px 28px rgba(68, 68, 65, .07)
    }

    .case-table tbody tr:hover {
        background: #fff !important
    }

    .case-table td {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: 13px;
        min-width: 0
    }

    .case-table td:first-child {
        grid-column: 1 / -1;
        padding: 0 0 10px !important
    }

    .case-title {
        max-width: none;
        white-space: normal;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 700;
        color: #000;
        margin: 0 0 10px
    }

    .case-table td:first-child .small-muted {
        font-size: 11px;
        color: var(--n400);
        margin-top: 0;
        letter-spacing: .01em
    }

    .court-cell {
        grid-column: 1 / -1;
        max-width: none;
        white-space: normal;
        color: var(--n600);
        font-size: 13px;
        line-height: 1.45;
        padding-bottom: 3px !important
    }

    .case-table td:nth-child(3) {
        display: flex !important;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        color: var(--n600)
    }

    .case-date-cell {
        margin: 0;
        font-size: 12px;
        color: var(--n600);
        font-weight: 600
    }

    .case-table td:nth-child(4) {
        justify-self: end;
        align-self: start;
        grid-row: 3 / span 1;
        grid-column: 2
    }

    .filing-cell {
        grid-column: 1 / -1;
        max-width: none;
        white-space: normal;
        font-size: 12px;
        line-height: 1.45;
        color: var(--n600);
        padding-top: 3px !important
    }

    .filing-cell:empty {
        display: none !important
    }

    .row-user {
        gap: 6px;
        font-size: 12px;
        color: var(--n600)
    }

    .case-table td:nth-child(6) {
        grid-column: 1;
        align-self: center;
        padding-top: 5px !important
    }

    .case-table td:nth-child(7) {
        grid-column: 2;
        justify-self: end;
        align-self: center;
        padding-top: 5px !important;
        margin-top: 0 !important
    }

    .view-btn {
        border-radius: 999px;
        background: var(--p800);
        color: #fff;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 700
    }

    .view-btn:hover,
    .view-btn:focus {
        background: #000;
        color: #fff
    }
}


/* v2 auth secondary screens */
.auth-screen[hidden] {
    display: none !important
}

.auth-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    justify-content: center;
}

.auth-link,
.auth-link:visited {
    color: var(--p800);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px
}

.auth-link:hover,
.auth-link:focus,
.forgot-password:hover,
.forgot-password:focus {
    color: var(--p900)
}

.auth-back {
    border: 0;
    background: transparent;
    color: var(--n800);
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.auth-back:hover,
.auth-back:focus {
    color: var(--p900)
}

.auth-back .icon-slot {
    width: 14px;
    height: 14px
}

.auth-back .icon-slot svg,
.auth-link .icon-slot svg {
    stroke: currentColor
}

/* v4 compact login for short laptop/browser viewports */
@media(max-height:720px) {
    .login-screen {
        padding: 10px;
    }

    .login-card {
        max-height: calc(100dvh - 20px);
        max-width: 400px;
        border-radius: 20px;
    }

    .login-card__brand {
        padding: 16px 24px;
    }

    .mj-logo-img--large {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .login-card__firm {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .login-card__system {
        font-size: 10px;
    }

    .login-card__form {
        padding: 20px 24px 22px;
    }

    .login-card__form h1 {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .login-card__form>p {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .field {
        margin-bottom: 11px;
    }

    .field span:first-child {
        margin-bottom: 4px;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 15px 14px;
    }

    .remember-login {
        margin: -2px 0 12px;
    }

    .primary-btn--full {
        padding: 12px;
    }

    .auth-links {
        margin-top: 12px;
    }
}


/* v2 login brand flex */
@media(max-width:380px) {
    .login-card__brand {
        align-items: center;
        justify-content: flex-start;
        padding-inline: 24px
    }

    .login-card__firm {
        font-size: 15px
    }

    .login-card__system {
        font-size: 10px
    }

    .mj-logo-img--large {
        width: 52px;
        height: 52px
    }
}

/* v2 mobile calendar activity indicator */
@media(max-width:768px) {
    .day-cell.has-cases {
        background: var(--p50) !important;
        box-shadow: inset 0 -3px 0 var(--p400);
    }

    .day-cell.has-cases.is-today {
        background: var(--p50) !important;
        box-shadow: inset 0 -3px 0 var(--p800);
    }
}
/* v2 calendar legend/chip polish */
.legend{
    background:#fbfaf7;
    padding:12px 16px;
    border-top:1px solid var(--n50);
    gap:14px;
    align-items:center
}

.legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--n600);
    font-size:12px;
    line-height:1.4
}

.legend span:first-child{
    color:var(--n800)
}

.legend-dot{
    width:10px;
    height:10px;
    border-radius:3px;
    border:1px solid transparent;
    flex:0 0 auto
}

.legend-dot.badge--active{
    background:var(--p50);
    border-color:var(--p200)
}

.legend-dot.badge--pending{
    background:var(--r50);
    border-color:#F7C1C1
}

.legend-dot.badge--concluded{
    background:var(--g50);
    border-color:#C0DD97
}

.legend-dot--today{
    border-radius:50%;
    background:var(--p600);
    border-color:var(--p600)
}

@media(max-width:768px){
  .cal-case-chip{
    display:block;
    font-size:9px;
    padding:1px 4px;
    border-radius:4px;
    margin-bottom:2px;
    line-height:1.35
  }
  .legend{
    gap:10px 12px;
    padding:11px 12px
  }
  .legend span{
    font-size:11px
  }
}

/* v2 mobile calendar fixed grid */
@media(max-width:768px){
  .calendar-grid-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .weekday-grid,
  .day-grid{
    grid-template-columns:repeat(7, minmax(58px, 1fr));
    min-width:600px;
  }
  .day-cell{
    min-height:78px;
    height:78px;
    overflow:hidden;
  }
  .day-num{
    margin-bottom:3px;
  }
  .cal-case-chip{
    max-height:15px;
  }
  .cal-more{
    font-size:9px;
    line-height:1.2;
  }
}

@media(max-width:430px){
  .weekday-grid,
  .day-grid{
    min-width:600px;
  }
  .day-cell{
    min-height:74px;
    height:74px;
    padding:5px 6px;
  }
}

/* v2 case controls popover */
.case-controls{
    position:relative;
    display:grid;
    gap:10px;
    margin-bottom:18px
}

.case-controls__top{
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px;
    gap:10px;
    align-items:stretch
}

.case-filter-toggle{
    width:46px;
    height:46px;
    border:0;
    border-radius:12px;
    background:var(--p800);
    color:var(--white);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0
}

.case-filter-toggle .icon-slot{
    width:18px;
    height:18px;
    margin:0
}

.case-filter-toggle .icon-slot svg{
    stroke:currentColor
}

.case-filter-toggle:hover,
.case-filter-toggle:focus,
.case-filter-toggle.is-active{
    background:#000;
    color:var(--white)
}

.advanced-filters-popover{
    position:absolute;
    top:56px;
    right:0;
    z-index:30;
    width:min(100%, 520px);
    background:#fff;
    border-radius:14px;
    padding:14px;
    box-shadow:0 18px 44px rgba(68,68,65,.14)
}

.advanced-filters-popover[hidden]{
    display:none!important
}

.advanced-filters-popover .advanced-filters{
    margin:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:end
}

.advanced-filters-popover .advanced-filter{
    min-width:0;
    max-width:none;
    flex:none;
    width:100%
}

.advanced-filters-popover .advanced-filter--wide{
    grid-column:1/-1;
    max-width:none
}

@media(max-width:768px){
  .toolbar{display:none}
  .case-controls{margin-bottom:14px}
  .case-controls__top{grid-template-columns:minmax(0,1fr) 44px;gap:8px}
  .case-filter-toggle{width:44px;height:44px;border-radius:12px}
  .advanced-filters-popover{
    position: static;
    width: 100%;
    padding: 18px;
    margin-top: 12px;
    border-radius: 18px;
    box-shadow: none;
    background: rgb(0 0 0 / 4%);}
  .advanced-filters-popover .advanced-filters{grid-template-columns:1fr 1fr;gap:8px}
  .advanced-filters-popover .advanced-filter--wide{grid-column:1/-1}
}

@media(max-width:430px){
  .advanced-filters-popover .advanced-filters{grid-template-columns:1fr}
  .advanced-filters-popover .advanced-filter--wide{grid-column:auto}
}

/* v2 password toggle icon scope */
button.text-toggle[data-toggle-password] > span.icon-slot[data-icon="eye"],
button.text-toggle[data-toggle-password] > span.icon-slot[data-icon="eyeOff"] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    font-size: 20px !important;
}

button.text-toggle[data-toggle-password] > span.icon-slot[data-icon="eye"] svg,
button.text-toggle[data-toggle-password] > span.icon-slot[data-icon="eyeOff"] svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    stroke: currentColor !important;
}

/* v2 mobile modal/auth height control */
@media(max-width:700px) {
    .login-screen {
        align-items: flex-start;
        overflow-y: auto;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .login-card {
        max-height: calc(100dvh - 32px);
        display: flex;
        flex-direction: column;
    }

    .login-card__brand {
        flex: 0 0 auto;
    }

    .login-card__form.is-active {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-overlay {
        align-items: flex-start;
        justify-content: center;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    }

    .modal-box {
        max-height: calc(100dvh - 28px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-head,
    .modal-actions {
        flex: 0 0 auto;
    }

    .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* v2 mobile nav/header profile */
@media(max-width:768px) {
    .mob-nav .icon-slot {
        font-size: 2.2em !important;
    }

    .topbar__inner {
        align-items: center;
    }

    .topbar .user-chip--avatar-only {
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* v2 mobile hearing date compact */
@media(max-width:768px) {
    .case-table tr {
        max-width: 100%;
        overflow: hidden;
    }

    .case-table td:nth-child(3) {
        grid-column: 1 / -1;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: start;
        align-self: start;
        box-sizing: border-box;
        overflow: hidden;
    }

    .case-table td:nth-child(3) .date-badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .case-date-cell {
        display: inline-block;
        width: auto !important;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* v2 mobile bottom nav profile hidden */
@media(max-width:768px) {
    .mob-nav > [data-profile-open] {
        display: none !important;
    }
}

/* v2 avatar shape lock */
.avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

.note-feed-item .avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-basis: 28px !important;
}

.user-chip--avatar-only .avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    flex-basis: 26px !important;
}

/* v2 admin-reserved nav */
.is-admin-reserved {
    display: none !important;
}

/* v2 task page panel */
.task-submit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.task-submit-form label {
    display: block;
    min-width: 0;
}

.task-submit-form .full {
    grid-column: 1 / -1;
}

.task-submit-form .primary-btn.full {
    width: max-content;
    grid-column: 1 / -1;
}

@media(max-width:768px) {
    .task-submit-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* v2 themed page panels */
.page-panel {
    border: 0;
}

.page-panel__head {
    background: var(--p50);
}

.page-panel__body {
    padding-left: 0;
    padding-right: 0;
}

@media(max-width:768px) {
    .page-panel__body {
        padding-left: 0;
        padding-right: 0;
    }
}

/* v2 page panel calendar typography */
.page-panel__head p {
    color: var(--p500);
    font-weight: 400;
}

.page-panel__head h2 {
    color: var(--black);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

@media(max-width:768px) {
    .page-panel__head h2 {
        font-size: 18px;
    }
}

/* v2 form group spacing */
.form-grid {
    gap: 22px;
}

.task-submit-form {
    gap: 22px;
}

.field {
    margin-bottom: 22px;
}

@media(max-width:768px) {
    .form-grid,
    .task-submit-form {
        gap: 20px;
    }
}


/* v2 requested mobile case structure */
.month-case {
    background: var(--page-card-bg);
}

@media(max-width:768px) {
    .case-table tr {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .case-table td.case-user-cell {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }

    .case-table td.case-status-cell {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }

    .case-table td.case-title-cell {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .case-table td.court-cell {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .case-table td.filing-cell {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .case-table td.case-date-cell-wrap {
        grid-column: 1;
        grid-row: 5;
        align-self: end;
        display: flex !important;
        align-items: flex-end;
        gap: 7px;
        flex-wrap: wrap;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    .case-table td.case-action-cell {
        grid-column: 2;
        grid-row: 5;
        justify-self: end;
        align-self: center;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* v2 real mobile case cards */
.case-mobile-list {
    display: none;
}

@media(max-width:768px) {
    .case-table-wrap {
        display: none;
    }

    .case-mobile-list {
        display: grid;
        gap: 12px;
    }

    .case-mobile-card {
        background: rgb(0 0 0 / 5%);
        border-radius: 18px;
        padding: 16px;
        box-shadow: 0 10px 28px rgba(68, 68, 65, .07);
        cursor: pointer;
    }

    .case-mobile-card__top,
    .case-mobile-card__bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .case-mobile-card__top {
        margin-bottom: 8px;
    }

    .case-mobile-card__suit {
        margin: 0 0 4px;
        font-size: 11px;
        letter-spacing: .01em;
    }

    .case-mobile-card__title {
        margin: 0 0 7px;
        max-width: none;
        white-space: normal;
        font-size: 16px;
        line-height: 1.35;
    }

    .case-mobile-card__court {
        margin: 0;
        max-width: none;
        white-space: normal;
    }

    .case-mobile-card__filing {
        margin: 6px 0 0;
        max-width: none;
        white-space: normal;
    }

    .case-mobile-card__bottom {
        margin-top: 11px;
    }

    .case-mobile-card__bottom .case-date-cell {
        margin: 0;
        min-width: 0;
    }
}

/* v4 auth field padding lock */
.login-card .field input,
.login-card .field select,
.login-card .field textarea {
    padding: 19px 16px;
}

.login-card .primary-btn--full {
    padding: 17px;
}

@media(max-width:768px) {
    .login-card .field input,
    .login-card .field select,
    .login-card .field textarea {
        padding: 15px 14px;
    }
}

input.form-input:disabled {
    background: #d3d3d3;
    color: black;
}