/* =========================================================
   JORDANPORTAL SECURE APPLICATION
   Dashboard, sidebar, cards, navigation and responsive layout
   ========================================================= */


/* ---------------------------------------------------------
   Application page foundation
   --------------------------------------------------------- */

.application-page {
    min-height: 100vh;
    background: #f3f2ee;
    color: #17191d;
}

.application-page .site-main {
    min-height: 0;
}

.application-page .jp-footer {
    margin-top: 0;
}


/* ---------------------------------------------------------
   Main application shell
   --------------------------------------------------------- */

.app-shell {
    display: grid;
    min-height: 900px;
    grid-template-columns: 285px minmax(0, 1fr);
    background: #f3f2ee;
}


/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */

.app-sidebar {
    position: relative;
    z-index: 20;
    min-width: 0;
    padding: 30px 20px 42px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(245, 173, 18, 0.1),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #17191d 0%,
            #101114 100%
        );
    color: rgba(255, 255, 255, 0.7);
}

.app-sidebar::before {
    position: absolute;
    right: -150px;
    bottom: 120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(245, 173, 18, 0.08);
    border-radius: 50%;
    content: "";
}

.app-sidebar-brand {
    position: relative;
    z-index: 2;
    margin-bottom: 32px;
    padding: 0 10px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.app-sidebar-brand a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.app-sidebar-brand a::before {
    display: inline-flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    background: #f5ad12;
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(245, 173, 18, 0.18);
    color: #101114;
    content: "J";
    font-size: 0.94rem;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Sidebar navigation
   --------------------------------------------------------- */

.app-navigation {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
}

.app-nav-heading {
    margin: 25px 0 8px;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.app-nav-item {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    font-weight: 720;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.app-nav-item:hover {
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    transform: translateX(3px);
}

.app-nav-item.active,
.app-nav-item[aria-current="page"] {
    background: #f5ad12;
    border-color: #f5ad12;
    box-shadow: 0 12px 24px rgba(245, 173, 18, 0.15);
    color: #101114;
}

.app-nav-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.065);
    border-radius: 9px;
    color: #f5ad12;
    font-size: 0.76rem;
    font-weight: 900;
}

.app-nav-item.active .app-nav-icon {
    background: rgba(0, 0, 0, 0.11);
    color: #101114;
}


/* ---------------------------------------------------------
   Main application area
   --------------------------------------------------------- */

.app-main {
    min-width: 0;
    background:
        radial-gradient(
            circle at 93% 2%,
            rgba(245, 173, 18, 0.07),
            transparent 24%
        ),
        #f3f2ee;
}


/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 34px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(20, 24, 30, 0.08);
    box-shadow: 0 4px 18px rgba(20, 24, 30, 0.035);
    backdrop-filter: blur(16px);
}

.app-topbar > div:first-child strong {
    color: #17191d;
    font-size: 1.04rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.app-user-menu {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #363a40;
    font-size: 0.84rem;
    font-weight: 750;
}

.app-user-menu::before {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-right: 3px;
    background: #17191d;
    border-radius: 50%;
    color: #f5ad12;
    content: "JP";
    font-size: 0.7rem;
    font-weight: 900;
}

.app-role {
    display: inline-flex;
    padding: 6px 9px;
    background: #fff1c8;
    border-radius: 999px;
    color: #9a6700;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: capitalize;
}

.app-logout-link {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 8px 14px;
    background: #17191d;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 820;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.app-logout-link:hover {
    background: #f5ad12;
    color: #101114;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Main dashboard content
   --------------------------------------------------------- */

.app-content {
    width: min(calc(100% - 64px), 1450px);
    margin: 0 auto;
    padding: 52px 0 72px;
}

.app-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px;
}

.app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 13px;
    color: #b67600;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-eyebrow::before {
    width: 28px;
    height: 3px;
    background: #f5ad12;
    border-radius: 999px;
    content: "";
}

.app-page-heading h1 {
    margin: 0 0 12px;
    color: #17191d;
    font-size: clamp(2.7rem, 4.5vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.app-page-heading p:last-child {
    max-width: 720px;
    margin: 0;
    color: #74787f;
    font-size: 1rem;
    line-height: 1.7;
}

.app-primary-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 13px 21px;
    background: #17191d;
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(20, 24, 30, 0.16);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.app-primary-button:hover {
    background: #f5ad12;
    box-shadow: 0 18px 36px rgba(245, 173, 18, 0.22);
    color: #101114;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Statistics cards
   --------------------------------------------------------- */

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-stat-card {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    padding: 26px;
    background: #ffffff;
    border: 1px solid rgba(20, 24, 30, 0.07);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(20, 24, 30, 0.06);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.dashboard-stat-card:hover {
    border-color: rgba(245, 173, 18, 0.38);
    box-shadow: 0 20px 46px rgba(20, 24, 30, 0.1);
    transform: translateY(-4px);
}

.dashboard-stat-card::before {
    position: absolute;
    top: -50px;
    right: -45px;
    width: 145px;
    height: 145px;
    background: rgba(245, 173, 18, 0.07);
    border-radius: 50%;
    content: "";
}

.dashboard-stat-card::after {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: #fff1c8;
    border-radius: 12px;
    color: #b67600;
    content: "↗";
    font-weight: 900;
}

.dashboard-stat-card:nth-child(2)::after {
    content: "≡";
}

.dashboard-stat-card:nth-child(3)::after {
    content: "!";
}

.dashboard-stat-card:nth-child(4)::after {
    content: "£";
}

.dashboard-stat-card p {
    margin: 0 0 10px;
    color: #777b81;
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-stat-card strong {
    display: block;
    margin-bottom: 8px;
    color: #17191d;
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}

.dashboard-stat-card span {
    color: #84888e;
    font-size: 0.78rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Dashboard panels
   --------------------------------------------------------- */

.dashboard-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.55fr);
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-panel {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(20, 24, 30, 0.07);
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(20, 24, 30, 0.055);
}

.dashboard-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 27px 22px;
    border-bottom: 1px solid rgba(20, 24, 30, 0.075);
}

.dashboard-panel-heading h2 {
    margin: 0 0 5px;
    color: #17191d;
    font-size: 1.4rem;
    letter-spacing: -0.035em;
}

.dashboard-panel-heading p {
    margin: 0;
    color: #84888e;
    font-size: 0.79rem;
}


/* ---------------------------------------------------------
   Quick action cards
   --------------------------------------------------------- */

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
}

.quick-action-card {
    position: relative;
    min-height: 130px;
    overflow: hidden;
    padding: 22px;
    background: #f8f7f3;
    border: 1px solid rgba(20, 24, 30, 0.075);
    border-radius: 16px;
    color: #17191d;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.quick-action-card::after {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: #17191d;
    border-radius: 50%;
    color: #f5ad12;
    content: "→";
    font-size: 0.8rem;
    font-weight: 900;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.quick-action-card:hover {
    background: #ffffff;
    border-color: rgba(245, 173, 18, 0.46);
    box-shadow: 0 15px 30px rgba(20, 24, 30, 0.08);
    color: #17191d;
    transform: translateY(-3px);
}

.quick-action-card:hover::after {
    background: #f5ad12;
    color: #101114;
    transform: translateX(3px);
}

.quick-action-card strong {
    display: block;
    max-width: calc(100% - 45px);
    margin-bottom: 9px;
    color: #17191d;
    font-size: 1rem;
}

.quick-action-card span {
    display: block;
    max-width: 90%;
    color: #777b82;
    font-size: 0.79rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   QuickBooks integration panel
   --------------------------------------------------------- */

.integration-status-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    padding: 26px;
}

.integration-logo {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    background: #e8f6ee;
    border-radius: 16px;
    color: #23845a;
    font-size: 0.9rem;
    font-weight: 900;
}

.integration-status-card strong {
    display: block;
    margin-bottom: 8px;
    color: #17191d;
    font-size: 1rem;
}

.integration-status-card p {
    margin: 0 0 15px;
    color: #74787e;
    font-size: 0.82rem;
    line-height: 1.65;
}

.integration-status-card a {
    color: #17191d;
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration-color: #f5ad12;
}


/* ---------------------------------------------------------
   Recent activity
   --------------------------------------------------------- */

.recent-activity-panel {
    min-height: 260px;
}

.empty-state {
    display: flex;
    min-height: 185px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 35px;
    text-align: center;
}

.empty-state::before {
    display: flex;
    width: 62px;
    height: 62px;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    background: #fff1c8;
    border-radius: 18px;
    color: #b67600;
    content: "◎";
    font-size: 1.25rem;
    font-weight: 900;
}

.empty-state strong {
    display: block;
    margin-bottom: 7px;
    color: #17191d;
    font-size: 1rem;
}

.empty-state p {
    max-width: 470px;
    margin: 0;
    color: #83878d;
    font-size: 0.82rem;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1250px) {
    .app-shell {
        grid-template-columns: 255px minmax(0, 1fr);
    }

    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 940px) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: relative;
        width: 100%;
        padding: 22px;
    }

    .app-sidebar-brand {
        margin-bottom: 15px;
    }

    .app-navigation {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-nav-heading {
        display: none;
    }

    .app-nav-item {
        justify-content: center;
        text-align: center;
    }

    .app-nav-item span:last-child {
        display: none;
    }

    .app-topbar {
        position: relative;
    }
}

@media (max-width: 720px) {
    .app-content {
        width: min(calc(100% - 28px), 1450px);
        padding-top: 34px;
    }

    .app-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-primary-button {
        width: 100%;
    }

    .dashboard-stat-grid,
    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .app-user-menu > span:first-of-type,
    .app-role {
        display: none;
    }

    .app-topbar {
        padding-right: 18px;
        padding-left: 18px;
    }

    .dashboard-panel-heading,
    .quick-action-grid,
    .integration-status-card {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .app-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-stat-card {
        min-height: 170px;
    }

    .integration-status-card {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   MY PROFILE
   ========================================================= */

.profile-page {
    width: min(calc(100% - 64px), 1450px);
    margin: 0 auto;
    padding: 52px 0 72px;
}

.profile-page .app-page-heading {
    margin-bottom: 32px;
}

.profile-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 13px;
    color: #b67600;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-page .eyebrow::before {
    width: 28px;
    height: 3px;
    background: #f5ad12;
    border-radius: 999px;
    content: "";
}

.profile-page .app-page-heading h1 {
    margin: 0 0 12px;
    color: #17191d;
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.profile-page .app-page-intro {
    max-width: 720px;
    margin: 0;
    color: #74787f;
    font-size: 1rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   Messages
   --------------------------------------------------------- */

.profile-page .form-message {
    margin-bottom: 24px;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.5;
}

.profile-page .form-message-success {
    background: #e8f6ee;
    border: 1px solid rgba(35, 132, 90, 0.22);
    color: #176943;
}

.profile-page .form-message-error {
    background: #fff0ec;
    border: 1px solid rgba(180, 56, 35, 0.22);
    color: #a62f1c;
}


/* ---------------------------------------------------------
   Main profile layout
   --------------------------------------------------------- */

.profile-layout {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.profile-content {
    display: grid;
    gap: 22px;
}


/* ---------------------------------------------------------
   Avatar card
   --------------------------------------------------------- */

.profile-avatar-card,
.profile-card {
    background: #ffffff;
    border: 1px solid rgba(20, 24, 30, 0.07);
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(20, 24, 30, 0.055);
}

.profile-avatar-card {
    position: sticky;
    top: 98px;
    padding: 30px;
    text-align: center;
}

.profile-avatar {
    display: flex;
    width: 142px;
    height: 142px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    overflow: hidden;
    background: #17191d;
    border: 7px solid #fff1c8;
    border-radius: 50%;
    box-shadow: 0 18px 38px rgba(20, 24, 30, 0.14);
}

.profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #f5ad12;
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.profile-avatar-card h2 {
    margin: 0 0 7px;
    color: #17191d;
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.profile-avatar-card > p {
    margin: 0 0 25px;
    color: #85898f;
    font-size: 0.86rem;
    text-transform: capitalize;
}

.profile-avatar-card form {
    padding-top: 22px;
    border-top: 1px solid rgba(20, 24, 30, 0.08);
    text-align: left;
}


/* ---------------------------------------------------------
   Profile cards
   --------------------------------------------------------- */

.profile-card {
    overflow: hidden;
    padding: 29px;
}

.profile-card-heading {
    margin-bottom: 25px;
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(20, 24, 30, 0.075);
}

.profile-card-heading h2 {
    margin: 0 0 6px;
    color: #17191d;
    font-size: 1.45rem;
    letter-spacing: -0.04em;
}

.profile-card-heading p {
    margin: 0;
    color: #84888e;
    font-size: 0.82rem;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */

.profile-page .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

.profile-page .form-group {
    display: grid;
    gap: 8px;
}

.profile-page .form-group label {
    color: #24272c;
    font-size: 0.8rem;
    font-weight: 850;
}

.profile-page input[type="text"],
.profile-page input[type="email"],
.profile-page input[type="tel"],
.profile-page input[type="password"],
.profile-page input[type="file"] {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    background: #f8f7f3;
    border: 1px solid rgba(20, 24, 30, 0.13);
    border-radius: 13px;
    color: #17191d;
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.profile-page input[type="file"] {
    min-height: 0;
    padding: 10px;
    font-size: 0.78rem;
}

.profile-page input:focus {
    background: #ffffff;
    border-color: #f5ad12;
    box-shadow: 0 0 0 4px rgba(245, 173, 18, 0.14);
}

.profile-page input[readonly] {
    background: #efeee9;
    color: #777b81;
    cursor: not-allowed;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.profile-page .primary-button,
.profile-page .secondary-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 19px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.profile-page .primary-button {
    background: #17191d;
    box-shadow: 0 13px 26px rgba(20, 24, 30, 0.15);
    color: #ffffff;
}

.profile-page .primary-button:hover {
    background: #f5ad12;
    color: #101114;
    transform: translateY(-2px);
}

.profile-page .secondary-button {
    background: #fff1c8;
    color: #8d5e00;
}

.profile-page .secondary-button:hover {
    background: #f5ad12;
    color: #101114;
    transform: translateY(-2px);
}

.profile-avatar-card .secondary-button {
    width: 100%;
    margin-top: 15px;
}


/* ---------------------------------------------------------
   Responsive profile layout
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-avatar-card {
        position: static;
    }

    .profile-avatar-card form {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 720px) {
    .profile-page {
        width: min(calc(100% - 28px), 1450px);
        padding-top: 34px;
    }

    .profile-page .form-grid {
        grid-template-columns: 1fr;
    }

    .profile-card,
    .profile-avatar-card {
        padding: 22px;
        border-radius: 18px;
    }

    .profile-page .primary-button,
    .profile-page .secondary-button {
        width: 100%;
    }
}
/* =========================================================
   LIVE DASHBOARD DATA
   ========================================================= */

.dashboard-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 24px;
    overflow: hidden;
    background: rgba(20, 24, 30, 0.08);
    border: 1px solid rgba(20, 24, 30, 0.07);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(20, 24, 30, 0.045);
}

.dashboard-summary-strip > div {
    display: flex;
    min-height: 88px;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: #ffffff;
}

.dashboard-summary-strip strong {
    color: #17191d;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.dashboard-summary-strip span {
    color: #777b81;
    font-size: 0.78rem;
    font-weight: 800;
}

.dashboard-live-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(330px, 0.4fr);
}

.dashboard-heading-link {
    color: #17191d;
    font-size: 0.76rem;
    font-weight: 850;
    text-decoration-color: #f5ad12;
    text-underline-offset: 4px;
}

.dashboard-table-wrap {
    overflow-x: auto;
}

.dashboard-case-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-case-table th,
.dashboard-case-table td {
    padding: 17px 20px;
    border-bottom: 1px solid rgba(20, 24, 30, 0.07);
    text-align: left;
    vertical-align: middle;
}

.dashboard-case-table th {
    background: #f8f7f3;
    color: #777b81;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-case-table td {
    color: #4d5157;
    font-size: 0.78rem;
}

.dashboard-case-table td strong,
.dashboard-case-table td span {
    display: block;
}

.dashboard-case-table td strong {
    margin-bottom: 4px;
    color: #17191d;
    font-size: 0.82rem;
}

.dashboard-case-table td span {
    color: #85898f;
    font-size: 0.72rem;
}

.case-reference-link {
    color: #17191d;
    font-weight: 900;
    text-decoration-color: #f5ad12;
    text-underline-offset: 4px;
}

.case-status,
.case-priority {
    display: inline-flex !important;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.66rem !important;
    font-weight: 850;
}

.case-status {
    background: #fff1c8;
    color: #8d5e00 !important;
}

.case-status-completed,
.case-status-approved {
    background: #e8f6ee;
    color: #176943 !important;
}

.case-status-client-action-required,
.case-status-action-required {
    background: #fff0ec;
    color: #a62f1c !important;
}

.case-priority {
    background: #efeee9;
    color: #555a60 !important;
}

.case-priority-high,
.case-priority-urgent {
    background: #fff0ec;
    color: #a62f1c !important;
}

.dashboard-compact-actions {
    grid-template-columns: 1fr;
}

.dashboard-activity-list {
    display: grid;
    margin: 0;
    padding: 8px 26px 18px;
    list-style: none;
}

.dashboard-activity-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(20, 24, 30, 0.07);
}

.dashboard-activity-item:last-child {
    border-bottom: 0;
}

.dashboard-activity-marker {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: #fff1c8;
    border-radius: 10px;
    color: #a46b00;
    font-size: 0.72rem;
    font-weight: 900;
}

.dashboard-activity-item strong {
    display: block;
    margin-bottom: 5px;
    color: #24272c;
    font-size: 0.82rem;
}

.dashboard-activity-item div > span {
    color: #85898f;
    font-size: 0.72rem;
}

@media (max-width: 1100px) {
    .dashboard-live-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dashboard-summary-strip {
        grid-template-columns: 1fr;
    }

    .dashboard-case-table th:nth-child(4),
    .dashboard-case-table td:nth-child(4),
    .dashboard-case-table th:nth-child(5),
    .dashboard-case-table td:nth-child(5) {
        display: none;
    }
}

/* =========================================================
   MY CASES
   ========================================================= */

.cases-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 24px;
    overflow: hidden;
    background: rgba(20, 24, 30, 0.08);
    border: 1px solid rgba(20, 24, 30, 0.07);
    border-radius: 18px;
}

.cases-summary > div {
    display: flex;
    min-height: 82px;
    align-items: center;
    gap: 15px;
    padding: 20px 24px;
    background: #ffffff;
}

.cases-summary strong {
    color: #17191d;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.cases-summary span {
    color: #777b81;
    font-size: 0.78rem;
    font-weight: 800;
}

.cases-panel {
    overflow: hidden;
}

.cases-table-wrap {
    overflow-x: auto;
}

.cases-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
}

.cases-table th,
.cases-table td {
    padding: 17px 18px;
    border-bottom: 1px solid rgba(20, 24, 30, 0.07);
    text-align: left;
    vertical-align: middle;
}

.cases-table th {
    background: #f8f7f3;
    color: #777b81;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cases-table td {
    color: #555a60;
    font-size: 0.76rem;
    line-height: 1.45;
}

.cases-table td strong,
.cases-table td span {
    display: block;
}

.cases-table td strong {
    margin-bottom: 4px;
    color: #17191d;
    font-size: 0.82rem;
}

.cases-table td span {
    color: #85898f;
    font-size: 0.7rem;
}

.case-property-cell {
    max-width: 260px;
}

.cases-table tbody tr {
    transition:
        background-color 0.16s ease;
}

.cases-table tbody tr:hover {
    background: #fffdf7;
}

@media (max-width: 720px) {
    .cases-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CASE WORKSPACE
   ========================================================= */

.case-workspace {
    display: grid;
    gap: 24px;
}

.case-workspace-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.case-back-link {
    display: inline-flex;
    margin-bottom: 22px;
    color: #555a60;
    font-size: 0.76rem;
    font-weight: 850;
    text-decoration-color: #f5ad12;
    text-underline-offset: 4px;
}

.case-workspace-heading h1 {
    margin: 0 0 8px;
    color: #17191d;
    font-size: clamp(2.6rem, 4.3vw, 4.7rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.case-heading-client {
    margin-bottom: 6px;
    color: #31353a;
    font-size: 1.08rem;
    font-weight: 900;
}

.case-heading-property {
    max-width: 760px;
    color: #777b81;
    font-size: 0.88rem;
    line-height: 1.6;
}

.case-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.case-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.case-overview-card {
    min-height: 120px;
    padding: 23px;
    background: #ffffff;
    border: 1px solid rgba(20, 24, 30, 0.07);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(20, 24, 30, 0.05);
}

.case-overview-card span {
    display: block;
    margin-bottom: 18px;
    color: #85898f;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-overview-card strong {
    color: #17191d;
    font-size: 1.05rem;
    line-height: 1.35;
}

.case-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    align-items: start;
    gap: 22px;
}

.case-workspace-main,
.case-workspace-sidebar {
    display: grid;
    gap: 22px;
}

.case-workspace-sidebar {
    position: sticky;
    top: 100px;
}

.case-section {
    overflow: hidden;
}

.case-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(20, 24, 30, 0.075);
}

.case-detail-grid > div {
    min-height: 105px;
    padding: 22px 26px;
    background: #ffffff;
}

.case-detail-grid span {
    display: block;
    margin-bottom: 9px;
    color: #85898f;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.case-detail-grid strong {
    color: #24272c;
    font-size: 0.9rem;
    line-height: 1.6;
}

.case-detail-wide {
    grid-column: 1 / -1;
}

.case-document-list {
    display: grid;
}

.case-document-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 18px;
    padding: 23px 26px;
    border-bottom: 1px solid rgba(20, 24, 30, 0.075);
}

.case-document-card:last-child {
    border-bottom: 0;
}

.case-document-icon {
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    background: #17191d;
    border-radius: 14px;
    color: #f5ad12;
    font-size: 0.72rem;
    font-weight: 900;
}

.case-document-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.case-document-heading h3 {
    margin: 0 0 6px;
    color: #24272c;
    font-size: 1rem;
}

.case-document-heading p {
    margin: 0;
    color: #85898f;
    font-size: 0.72rem;
}

.case-document-review {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 15px;
    margin-top: 17px;
    padding: 14px 16px;
    background: #f8f7f3;
    border-radius: 12px;
}

.case-document-review span {
    color: #85898f;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.case-document-review strong {
    color: #24272c;
    font-size: 0.78rem;
}

.case-document-review small {
    grid-column: 2;
    color: #85898f;
    font-size: 0.69rem;
}

.case-document-message {
    margin: 14px 0 0;
    padding: 13px 15px;
    background: #fff1c8;
    border-radius: 11px;
    color: #765000;
    font-size: 0.75rem;
    line-height: 1.55;
}

.case-document-actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.case-document-actions a {
    color: #24272c;
    font-size: 0.72rem;
    font-weight: 850;
    text-decoration-color: #f5ad12;
    text-underline-offset: 4px;
}

.case-notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-notes-grid article {
    min-height: 185px;
    padding: 26px;
}

.case-notes-grid article + article {
    border-left: 1px solid rgba(20, 24, 30, 0.075);
}

.case-notes-grid h3 {
    margin: 0 0 14px;
    color: #24272c;
    font-size: 0.92rem;
}

.case-notes-grid p {
    margin: 0;
    color: #686d73;
    font-size: 0.8rem;
    line-height: 1.75;
}

.case-internal-note {
    background: #fffdf7;
}

.case-action-list {
    display: grid;
    padding: 18px;
    gap: 9px;
}

.case-action-list a {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: #f8f7f3;
    border: 1px solid rgba(20, 24, 30, 0.075);
    border-radius: 11px;
    color: #24272c;
    font-size: 0.76rem;
    font-weight: 850;
    text-decoration: none;
}

.case-action-list a::after {
    color: #b67600;
    content: "→";
}

.case-action-list a:hover {
    background: #fff1c8;
    border-color: rgba(245, 173, 18, 0.4);
}

.case-information-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 18px;
    margin: 0;
    padding: 22px 25px 26px;
}

.case-information-list dt {
    color: #85898f;
    font-size: 0.69rem;
    font-weight: 850;
}

.case-information-list dd {
    margin: 0;
    color: #31353a;
    font-size: 0.74rem;
    text-align: right;
}

.case-activity-list {
    display: grid;
    margin: 0;
    padding: 8px 24px 20px;
    list-style: none;
}

.case-activity-list li {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(20, 24, 30, 0.07);
}

.case-activity-list li:last-child {
    border-bottom: 0;
}

.case-activity-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    background: #f5ad12;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #fff1c8;
}

.case-activity-list strong {
    display: block;
    margin-bottom: 6px;
    color: #31353a;
    font-size: 0.74rem;
    line-height: 1.45;
}

.case-activity-list small {
    color: #85898f;
    font-size: 0.65rem;
    line-height: 1.45;
}

.case-activity-empty {
    padding: 28px;
    color: #85898f;
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 1180px) {
    .case-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-workspace-grid {
        grid-template-columns: 1fr;
    }

    .case-workspace-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .case-workspace-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .case-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .case-overview-grid,
    .case-detail-grid,
    .case-notes-grid {
        grid-template-columns: 1fr;
    }

    .case-detail-wide {
        grid-column: auto;
    }

    .case-notes-grid article + article {
        border-top: 1px solid rgba(20, 24, 30, 0.075);
        border-left: 0;
    }

    .case-document-card {
        grid-template-columns: 1fr;
    }

    .case-document-heading {
        flex-direction: column;
    }
}

/* JordanPortal V3 document upload */
.jp-upload-panel{padding:28px}.jp-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.jp-form-field{display:flex;flex-direction:column;gap:8px}.jp-form-field-wide{grid-column:1/-1}.jp-form-field span{font-weight:700}.jp-form-field input,.jp-form-field select,.jp-form-field textarea{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #d8d8d8;border-radius:10px;background:#fff;font:inherit}.jp-drop-zone{position:relative;margin-top:24px;padding:42px 24px;border:2px dashed #c8c8c8;border-radius:16px;text-align:center;cursor:pointer}.jp-drop-zone strong,.jp-drop-zone span,.jp-drop-zone small,#jp-selected-file{display:block;margin-top:7px}.jp-drop-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}#jp-selected-file{font-weight:700}.jp-upload-actions{display:flex;justify-content:flex-end;margin-top:24px}.jp-upload-error{margin-bottom:20px;padding:14px 16px;border-radius:10px;background:#fee9e7;color:#8a1f17;font-weight:700}@media(max-width:800px){.jp-upload-grid{grid-template-columns:1fr}.jp-form-field-wide{grid-column:auto}}

/* JordanPortal visible upload action */
.jp-upload-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 28px -28px -28px;
    padding: 18px 28px;
    border-top: 1px solid #e3e3e3;
    border-radius: 0 0 18px 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -12px 30px rgba(18, 20, 24, 0.08);
    backdrop-filter: blur(10px);
}

.jp-upload-action-message {
    max-width: 620px;
    color: #666b73;
    font-size: 0.95rem;
}

.jp-save-upload-button {
    min-width: 250px;
    padding: 15px 24px;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 760px) {
    .jp-upload-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jp-save-upload-button {
        width: 100%;
        min-width: 0;
    }
}

/* JordanPortal document management */
.jp-document-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr);
    gap: 24px;
    align-items: start;
}
.jp-document-preview { min-height: 620px; padding: 20px; overflow: hidden; }
.jp-document-image { display: block; width: 100%; max-height: 760px; object-fit: contain; border-radius: 12px; }
.jp-document-pdf { width: 100%; height: 760px; border: 0; border-radius: 12px; }
.jp-document-no-preview { min-height: 560px; display: grid; place-content: center; text-align: center; }
.jp-document-details { padding: 26px; }
.jp-document-details dl { display: grid; grid-template-columns: 110px 1fr; gap: 12px 16px; margin: 24px 0; }
.jp-document-details dt { color: #777; font-weight: 700; }
.jp-document-details dd { margin: 0; overflow-wrap: anywhere; }
.jp-checksum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.jp-document-buttons { display: grid; gap: 10px; }
.jp-document-buttons a { text-align: center; }
.jp-document-notes { margin: 18px 0; padding: 14px; border-radius: 10px; background: #f5f4f1; }
.jp-version-list { padding: 20px; }
.jp-version-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: center; padding: 20px; border-bottom: 1px solid #e8e8e8; }
.jp-version-card:last-child { border-bottom: 0; }
.jp-version-number { width: 58px; height: 58px; display: grid; place-content: center; border-radius: 14px; background: #17191d; color: #ffb400; font-weight: 900; }
.jp-version-main h3 { margin: 0 0 6px; }
.jp-version-main p { margin: 3px 0; color: #666; }
.jp-version-actions { display: flex; gap: 14px; }
.jp-version-actions a { font-weight: 800; text-decoration: underline; text-decoration-color: #e3a700; text-underline-offset: 5px; }
@media (max-width: 1000px) {
  .jp-document-layout { grid-template-columns: 1fr; }
  .jp-document-preview { min-height: 420px; }
  .jp-document-pdf { height: 600px; }
}
@media (max-width: 700px) {
  .jp-version-card { grid-template-columns: 58px 1fr; }
  .jp-version-actions { grid-column: 1 / -1; }
}

/* JordanPortal firm administration */
.jp-admin-panel { padding: 28px; }
.jp-admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.jp-admin-form-grid label { display:flex; flex-direction:column; gap:7px; font-weight:700; }
.jp-admin-form-grid input, .jp-admin-form-grid select, .jp-admin-form-grid textarea { box-sizing:border-box; width:100%; padding:12px 13px; border:1px solid #d8d8d8; border-radius:10px; background:#fff; font:inherit; }
.jp-admin-checkbox { flex-direction:row !important; align-items:center; }
.jp-admin-checkbox input { width:auto; }
.jp-admin-actions { grid-column:1/-1; display:flex; justify-content:flex-end; }
.jp-admin-message { margin-bottom:20px; padding:14px 16px; border-radius:10px; background:#edf8ee; color:#205b2a; font-weight:700; }
.jp-admin-table-wrap { overflow-x:auto; }
.jp-admin-table { width:100%; border-collapse:collapse; }
.jp-admin-table th, .jp-admin-table td { padding:14px 12px; border-bottom:1px solid #e7e7e7; text-align:left; vertical-align:top; }
.jp-admin-table th { font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:#666; }
.jp-admin-card-grid { display:grid; gap:22px; margin-top:22px; }
.jp-admin-card { padding:24px; border:1px solid #e6e6e6; border-radius:16px; background:#fff; }
@media (max-width:800px) { .jp-admin-form-grid { grid-template-columns:1fr; } }

/* JordanPortal V3.4 document interface */
.jp-document-library-panel {
    padding: 0;
}

.jp-document-table-wrap {
    overflow-x: auto;
}

.jp-document-table th:first-child,
.jp-document-table td:first-child {
    width: 42%;
}

.jp-document-name {
    color: #17191d;
    font-size: 1rem;
    font-weight: 850;
}

.jp-document-description {
    max-width: 620px;
    margin-top: 5px;
    color: #7b7f85;
    font-size: 0.82rem;
    line-height: 1.5;
}

.jp-document-type,
.jp-case-reference {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f3f1eb;
    color: #3e4248;
    font-size: 0.78rem;
    font-weight: 800;
}

.jp-status-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: capitalize;
}

.jp-status-pill.is-active,
.jp-status-pill.is-final {
    background: #e7f7eb;
    color: #216b35;
}

.jp-status-pill.is-inactive {
    background: #f0f1f2;
    color: #696e75;
}

.jp-status-pill.is-draft {
    background: #fff2cf;
    color: #8c6200;
}

.jp-document-date {
    color: #777c82;
    white-space: nowrap;
}

.jp-table-action {
    text-align: right;
}

.jp-document-empty {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    padding: 54px 24px;
    text-align: center;
}

.jp-document-empty-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-content: center;
    margin-bottom: 20px;
    border-radius: 20px;
    background: #17191d;
    box-shadow: 0 16px 30px rgba(20,24,30,.14);
    color: #f5ad12;
    font-size: 1.8rem;
    font-weight: 900;
}

.jp-document-empty h2 {
    margin: 0 0 9px;
    color: #17191d;
    font-size: 1.55rem;
    letter-spacing: -.035em;
}

.jp-document-empty p {
    max-width: 560px;
    margin: 0 0 24px;
    color: #777c82;
    line-height: 1.7;
}

.jp-template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .65fr);
    gap: 22px;
    align-items: start;
}

.jp-template-main {
    overflow: visible;
}

.jp-template-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 28px;
}

.jp-template-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #25282d;
    font-weight: 800;
}

.jp-template-form-grid input,
.jp-template-form-grid select,
.jp-template-form-grid textarea,
.jp-template-editor textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #d8dadd;
    border-radius: 12px;
    background: #fff;
    color: #17191d;
    font: inherit;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.jp-template-form-grid input:focus,
.jp-template-form-grid select:focus,
.jp-template-form-grid textarea:focus,
.jp-template-editor textarea:focus {
    border-color: #e4a20f;
    box-shadow: 0 0 0 4px rgba(245,173,18,.15);
}

.jp-template-wide {
    grid-column: 1 / -1;
}

.jp-template-editor-heading {
    border-top: 1px solid rgba(20,24,30,.075);
}

.jp-template-editor {
    padding: 28px;
}

.jp-template-editor textarea {
    min-height: 480px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92rem;
    line-height: 1.7;
}

.jp-template-editor-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
    color: #8b8f95;
    font-size: .76rem;
}

.jp-template-sidebar {
    display: grid;
    gap: 22px;
    position: sticky;
    top: 24px;
}

.jp-template-help,
.jp-template-settings {
    overflow: hidden;
}

.jp-merge-field-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 24px 24px 10px;
}

.jp-merge-field-list code {
    display: inline-flex;
    padding: 8px 10px;
    border: 1px solid #e6e2d8;
    border-radius: 9px;
    background: #f8f6f0;
    color: #6d5100;
    font-size: .78rem;
    font-weight: 800;
}

.jp-template-help-note {
    margin: 0;
    padding: 14px 24px 24px;
    color: #777c82;
    font-size: .8rem;
    line-height: 1.6;
}

.jp-template-settings-body {
    display: grid;
    gap: 22px;
    padding: 24px;
}

.jp-template-active {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.jp-template-active input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #f5ad12;
}

.jp-template-active span {
    display: grid;
    gap: 3px;
}

.jp-template-active strong {
    color: #17191d;
}

.jp-template-active small {
    color: #7e8389;
    line-height: 1.45;
}

.jp-template-save {
    width: 100%;
    border: 0;
    cursor: pointer;
}

@media (max-width: 1050px) {
    .jp-template-layout {
        grid-template-columns: 1fr;
    }

    .jp-template-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .jp-template-form-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .jp-template-wide {
        grid-column: auto;
    }

    .jp-template-editor {
        padding: 20px;
    }

    .jp-template-editor-footer {
        flex-direction: column;
    }

    .jp-template-sidebar {
        grid-template-columns: 1fr;
    }
}
/* JordanPortal V3.5 case workspace */
.jp-case-workspace-v35{display:grid;gap:22px}.jp-workspace-hero{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;padding:12px 4px}.jp-workspace-hero h1{margin:8px 0 6px;font-size:clamp(2.7rem,5vw,5rem);line-height:.92;letter-spacing:-.065em}.jp-workspace-client{font-size:1.22rem;font-weight:900}.jp-workspace-address{max-width:760px;margin-top:7px;color:#747981;line-height:1.55}.jp-workspace-hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.jp-workspace-status{display:inline-flex;padding:11px 15px;border-radius:999px;background:#fff1c7;color:#805b00;font-weight:900}.jp-workspace-message{padding:14px 17px;border-radius:12px;background:#e9f8ee;color:#256b38;font-weight:800}.jp-workspace-tabs{display:flex;gap:8px;overflow:auto;padding:8px;border-radius:16px;background:#fff;box-shadow:0 12px 36px rgba(20,24,30,.07)}.jp-workspace-tabs a{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:11px;color:#34383e;text-decoration:none;font-weight:850;white-space:nowrap}.jp-workspace-tabs a:hover{background:#f6f3eb}.jp-workspace-tabs span{display:inline-grid;place-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#f3ad10;color:#17191d;font-size:.72rem}.jp-workspace-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.jp-workspace-metrics article{display:grid;gap:10px;min-height:105px;padding:22px;border:1px solid rgba(20,24,30,.08);border-radius:18px;background:#fff;box-shadow:0 14px 38px rgba(20,24,30,.06)}.jp-workspace-metrics span{color:#858990;font-size:.73rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.jp-workspace-metrics strong{font-size:1.05rem}.jp-workspace-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr);gap:22px;align-items:start}.jp-workspace-main,.jp-workspace-sidebar{display:grid;gap:22px}.jp-workspace-sidebar{position:sticky;top:20px}.jp-workspace-section{overflow:hidden}.jp-workspace-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.jp-workspace-detail-grid>div{display:grid;gap:9px;padding:24px;border-top:1px solid rgba(20,24,30,.075);border-right:1px solid rgba(20,24,30,.075)}.jp-workspace-detail-grid>div:nth-child(even){border-right:0}.jp-workspace-detail-grid .is-wide{grid-column:1/-1;border-right:0}.jp-workspace-detail-grid span{color:#858990;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.jp-workspace-detail-grid strong{line-height:1.6}.jp-workspace-empty{display:grid;place-items:center;text-align:center;gap:8px;padding:40px 22px;color:#777c83}.jp-workspace-empty strong{color:#24272c;font-size:1.08rem}.jp-workspace-empty p{margin:0}.jp-workspace-empty a{color:#9a6b00;font-weight:850}.jp-workspace-document-list{display:grid}.jp-workspace-document-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:18px 24px;border-top:1px solid rgba(20,24,30,.075)}.jp-document-symbol{display:grid;place-content:center;width:48px;height:48px;border-radius:13px;background:#17191d;color:#f4ad12;font-size:.68rem;font-weight:900}.jp-workspace-document-list h3{margin:0 0 4px}.jp-workspace-document-list p{margin:0;color:#858990;font-size:.8rem}.jp-workspace-doc-status{padding:7px 10px;border-radius:999px;background:#f5f1e7;font-size:.73rem;font-weight:850}.jp-workspace-doc-links{display:flex;gap:10px}.jp-workspace-doc-links a{color:#8b6200;font-weight:850}.jp-generated-case-documents{padding:0 24px 24px}.jp-generated-case-documents>h3{margin:22px 0 10px}.jp-generated-case-documents article{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:14px 0;border-top:1px solid rgba(20,24,30,.075)}.jp-generated-case-documents article div{display:grid;gap:3px}.jp-generated-case-documents small{color:#858990}.jp-validation-summary{display:flex;gap:22px;align-items:center;padding:26px;border-top:1px solid rgba(20,24,30,.075)}.jp-validation-ring{--jp-progress:0%;display:grid;place-content:center;width:104px;height:104px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle,#fff 57%,transparent 59%),conic-gradient(#f3ad10 var(--jp-progress),#ece9e1 0)}.jp-validation-ring strong{font-size:1.25rem}.jp-validation-summary h3{margin:10px 0 5px}.jp-validation-summary p{margin:0;color:#7d8288}.jp-validation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 26px 26px}.jp-validation-list article{display:flex;gap:12px;padding:16px;border:1px solid #e5e3dd;border-radius:13px}.jp-validation-list article>span{display:grid;place-content:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;font-weight:950}.jp-validation-list article div{display:grid;gap:4px}.jp-validation-list small{color:#7c8187;line-height:1.45}.jp-validation-list .is-pass>span{background:#e7f7eb;color:#226b36}.jp-validation-list .is-warning>span{background:#fff0c6;color:#845e00}.jp-note-form{display:grid;gap:12px;padding:24px;border-top:1px solid rgba(20,24,30,.075)}.jp-note-form textarea{box-sizing:border-box;width:100%;padding:15px;border:1px solid #d7d9dc;border-radius:13px;font:inherit;resize:vertical;outline:none}.jp-note-form textarea:focus{border-color:#e5a311;box-shadow:0 0 0 4px rgba(243,173,16,.15)}.jp-note-form button{justify-self:end;border:0;cursor:pointer}.jp-note-list{display:grid;padding:0 24px 24px}.jp-note-list article{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:18px 0;border-top:1px solid rgba(20,24,30,.075)}.jp-note-avatar{display:grid;place-content:center;width:42px;height:42px;border-radius:50%;background:#17191d;color:#f3ad10;font-size:.72rem;font-weight:950}.jp-note-meta{display:flex;justify-content:space-between;gap:12px}.jp-note-meta time{color:#858990;font-size:.76rem}.jp-note-list p{margin:7px 0 0;line-height:1.65}.jp-workspace-timeline{list-style:none;margin:0;padding:10px 24px 26px}.jp-workspace-timeline li{display:grid;grid-template-columns:auto 1fr;gap:13px;position:relative;padding:11px 0}.jp-workspace-timeline li>span{width:12px;height:12px;margin-top:5px;border:3px solid #fff;border-radius:50%;background:#f3ad10;box-shadow:0 0 0 2px #f3ad10}.jp-workspace-timeline li:not(:last-child):after{content:"";position:absolute;left:6px;top:25px;bottom:-9px;width:2px;background:#e8e5dd}.jp-workspace-timeline div{display:grid;gap:4px}.jp-workspace-timeline small{color:#858990}.jp-workspace-action-list{display:grid;padding:14px}.jp-workspace-action-list a{padding:14px;border-bottom:1px solid rgba(20,24,30,.075);color:#24272c;text-decoration:none;font-weight:850}.jp-workspace-action-list a:after{content:"→";float:right;color:#d29100}.jp-status-panel form{display:grid;gap:12px;padding:20px}.jp-status-panel select{width:100%;padding:13px;border:1px solid #d7d9dc;border-radius:11px;background:#fff;font:inherit}.jp-status-panel button{border:0;cursor:pointer}.jp-case-information dl{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;padding:10px 20px 22px}.jp-case-information dt,.jp-case-information dd{margin:0;padding:10px 0;border-bottom:1px solid rgba(20,24,30,.06)}.jp-case-information dt{color:#81868d}.jp-case-information dd{text-align:right;font-weight:800}@media(max-width:1100px){.jp-workspace-layout{grid-template-columns:1fr}.jp-workspace-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.jp-case-information{grid-column:1/-1}}@media(max-width:760px){.jp-workspace-hero{align-items:flex-start;flex-direction:column}.jp-workspace-hero-actions{justify-content:flex-start}.jp-workspace-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.jp-workspace-detail-grid,.jp-validation-list{grid-template-columns:1fr}.jp-workspace-detail-grid>div{border-right:0}.jp-workspace-sidebar{grid-template-columns:1fr}.jp-workspace-document-list article{grid-template-columns:auto 1fr}.jp-workspace-doc-status,.jp-workspace-doc-links{grid-column:2}.jp-validation-summary{align-items:flex-start;flex-direction:column}}