/*
 * eCase shared visual theme
 * Light, spacious interface using locally available Raleway with system fallbacks.
 * Business behavior and page-specific layout remain owned by each PHP page.
 */
:root {
    --ecase-bg: #f7f9fc;
    --ecase-surface: #ffffff;
    --ecase-blue: #eaf3ff;
    --ecase-green: #edf9f1;
    --ecase-peach: #fff4e8;
    --ecase-lilac: #f5efff;
    --ecase-yellow: #fff9dc;
    --ecase-text: #263548;
    --ecase-muted: #64748b;
    --ecase-border: #d9e2ec;
    --ecase-primary: #376fa3;
    --ecase-primary-hover: #285a87;
    --ecase-danger: #a94343;
    --ecase-radius: 14px;
    --ecase-shadow: 0 5px 18px rgba(55, 77, 103, .08);
}

html {
    font-size: 17px;
    background: var(--ecase-bg);
}

body {
    margin: 0;
    background: var(--ecase-bg) !important;
    color: var(--ecase-text) !important;
    font-family: "Raleway", "Segoe UI", Arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.55;
}

body,
button,
input,
select,
textarea {
    font-family: "Raleway", "Segoe UI", Arial, sans-serif !important;
}

.page-wrap,
.container,
.content-wrap,
.main-wrap,
body > main,
body > .wrap,
body > .content,
body > .page-container {
    box-sizing: border-box;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(14px, 1.8vw, 28px) !important;
    padding-right: clamp(14px, 1.8vw, 28px) !important;
}

h1,
h2,
h3,
h4 {
    color: #29445f;
    line-height: 1.25;
    letter-spacing: .01em;
}

h1 {
    font-size: clamp(1.65rem, 2.5vw, 2.15rem);
}

h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
}

p,
li,
td,
th,
label {
    font-size: 1rem;
}

label {
    color: #34495e;
    font-weight: 650 !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="file"],
select,
textarea {
    min-height: 44px;
    padding: 10px 12px !important;
    border: 1px solid #bdcbd9 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ecase-text) !important;
    font-size: 1rem !important;
    line-height: 1.35;
    box-shadow: inset 0 1px 2px rgba(38, 53, 72, .04);
}

textarea {
    min-height: 96px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(69, 137, 194, .28) !important;
    outline-offset: 2px;
    border-color: #5994c4 !important;
}

button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
    min-height: 42px;
    padding: 10px 17px !important;
    border-radius: 10px !important;
    font-size: .96rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

button,
.button,
.btn-primary,
input[type="submit"] {
    background: var(--ecase-primary);
    color: #fff;
}

button:hover,
.button:hover,
.btn-primary:hover,
input[type="submit"]:hover {
    background: var(--ecase-primary-hover);
}

.section,
.card,
.nameplate,
.panel,
.box,
fieldset,
.my-caseload-card {
    border: 1px solid var(--ecase-border) !important;
    border-radius: var(--ecase-radius) !important;
    box-shadow: var(--ecase-shadow) !important;
}

.section,
.card,
.panel,
.box,
.my-caseload-card {
    background: var(--ecase-surface) !important;
    padding: clamp(18px, 2.5vw, 28px) !important;
    margin-bottom: 22px !important;
}

.nameplate {
    background: var(--ecase-blue) !important;
    padding: 18px 20px !important;
}

.section:nth-of-type(4n + 1),
.card:nth-of-type(4n + 1) {
    background: var(--ecase-blue) !important;
}

.section:nth-of-type(4n + 2),
.card:nth-of-type(4n + 2) {
    background: var(--ecase-green) !important;
}

.section:nth-of-type(4n + 3),
.card:nth-of-type(4n + 3) {
    background: var(--ecase-peach) !important;
}

.section:nth-of-type(4n),
.card:nth-of-type(4n) {
    background: var(--ecase-lilac) !important;
}

.current-address-box {
    background: var(--ecase-blue) !important;
}

.message,
.success,
.alert-success {
    background: var(--ecase-green) !important;
    border: 1px solid #a9d7b7 !important;
    border-radius: 12px !important;
    color: #285c3a !important;
    padding: 13px 16px !important;
}

.warning-box,
.warning,
.alert-warning {
    background: var(--ecase-yellow) !important;
    border: 1px solid #e8d47c !important;
    border-radius: 12px !important;
    color: #65561d !important;
    padding: 14px 16px !important;
}

.error,
.error-box,
.alert-danger {
    background: #fff0f0 !important;
    border: 1px solid #e3abab !important;
    border-radius: 12px !important;
    color: #7d3030 !important;
    padding: 14px 16px !important;
}

.muted,
.hint,
.caseload-small {
    color: var(--ecase-muted) !important;
    font-size: .92rem !important;
}

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
}

th {
    background: #e9f1f8;
    color: #334e68;
    font-weight: 750;
}

th,
td {
    padding: 11px 12px !important;
    border-color: var(--ecase-border) !important;
}

tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, .46);
}

a {
    color: #2f6f9f;
    text-underline-offset: 3px;
}

.i2-site-nav-wrap {
    width: calc(100% - 24px) !important;
    margin: 12px 12px 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--ecase-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--ecase-shadow) !important;
}

.i2-site-nav {
    min-height: 58px !important;
    padding: 6px 12px !important;
    gap: 7px !important;
}

.i2-site-nav a,
.i2-site-nav .i2-nav-dropbtn {
    color: #35516c !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: .96rem !important;
}

.i2-site-nav a:hover,
.i2-site-nav .i2-nav-dropbtn:hover,
.i2-site-nav a.active,
.i2-site-nav .i2-nav-dropbtn.active {
    background: var(--ecase-blue) !important;
    color: #214f78 !important;
}

.i2-nav-brand,
.i2-nav-user {
    color: #4b6278 !important;
}

.i2-nav-dropdown-content {
    top: 50px !important;
    border: 1px solid var(--ecase-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(55, 77, 103, .16) !important;
    overflow: hidden;
}

.i2-nav-dropdown-content a {
    background: #fff !important;
    color: #35516c !important;
    font-size: .94rem !important;
}

.ecase-client-nav {
    margin: 14px 12px 24px !important;
    background: var(--ecase-blue) !important;
    border: 1px solid #c8ddef !important;
    border-radius: 14px !important;
    box-shadow: var(--ecase-shadow) !important;
}

.ecase-client-nav a,
.ecase-client-nav .nav-header {
    color: #31536f !important;
    padding: 12px 16px !important;
    font-size: .96rem !important;
    border-radius: 9px;
}

.ecase-client-nav li:hover > .nav-header,
.ecase-client-nav a:hover {
    background: #d8eaf8 !important;
    color: #214f78 !important;
}

.ecase-client-nav .dropdown {
    background: #fff !important;
    border: 1px solid var(--ecase-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(55, 77, 103, .16) !important;
    overflow: hidden;
}

.ecase-client-nav .dropdown a {
    background: #fff !important;
    color: #35516c !important;
}


/*
 * Shared page-heading treatment.
 * Page-specific workflow controls remain in their original header containers.
 */
.hero,
.page-header,
.page-head,
.ann-head,
.dpa-hero,
.eh-hero,
.pr-hero,
.page-title,
.page-wrap > .topbar:first-child,
.page > .topbar:first-child,
.wrap > .page-card:first-child,
.page > .nameplate:first-child,
.wrap > .topbar:first-child {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 16px !important;
    min-height: 104px;
    margin-bottom: 20px !important;
    padding: clamp(20px, 2.6vw, 32px) !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #103b61 0%, #176392 55%, #148296 100%) !important;
    color: #f4fbff !important;
    box-shadow: 0 12px 28px rgba(16, 59, 97, .18) !important;
}

.hero::after,
.page-header::after,
.page-head::after,
.ann-head::after,
.dpa-hero::after,
.eh-hero::after,
.pr-hero::after,
.page-title::after,
.page-wrap > .topbar:first-child::after,
.page > .topbar:first-child::after,
.wrap > .page-card:first-child::after,
.page > .nameplate:first-child::after,
.wrap > .topbar:first-child::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -46px;
    right: -28px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .055);
    pointer-events: none;
}

.hero h1,
.page-header h1,
.page-head h1,
.ann-head h1,
.dpa-hero h1,
.eh-hero h1,
.pr-hero h1,
.page-title h1,
.page-wrap > .topbar:first-child h1,
.page > .topbar:first-child h1,
.wrap > .page-card:first-child h1,
.page > .nameplate:first-child h1,
.wrap > .topbar:first-child h1 {
    margin: 0 0 5px !important;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .28);
}

.hero p,
.hero > div:not(.actions),
.page-header p,
.page-head p,
.ann-head p,
.dpa-hero p,
.eh-hero p,
.pr-hero p,
.page-title .subtitle,
.page-wrap > .topbar:first-child .small-muted,
.page > .topbar:first-child .small-muted,
.wrap > .page-card:first-child .muted,
.page > .nameplate:first-child .muted,
.wrap > .topbar:first-child .muted,
.wrap > .topbar:first-child p {
    color: #e8f6fb !important;
}

.hero .button,
.hero .btn,
.hero button,
.page-header .button,
.page-header .btn,
.page-header button,
.page-head .button,
.page-head .btn,
.page-head button,
.ann-head .button,
.ann-head .btn,
.ann-head button,
.dpa-hero .button,
.dpa-hero .btn,
.dpa-hero button,
.eh-hero .button,
.eh-hero .btn,
.eh-hero button,
.pr-hero .button,
.pr-hero .btn,
.pr-hero button,
.page-title .button,
.page-title .btn,
.page-title button,
.topbar .button,
.topbar .btn,
.topbar button {
    border-color: rgba(255, 255, 255, .5) !important;
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.hero .button:hover,
.hero .btn:hover,
.hero button:hover,
.page-header .button:hover,
.page-header .btn:hover,
.page-header button:hover,
.page-head .button:hover,
.page-head .btn:hover,
.page-head button:hover,
.ann-head .button:hover,
.ann-head .btn:hover,
.ann-head button:hover,
.dpa-hero .button:hover,
.dpa-hero .btn:hover,
.dpa-hero button:hover,
.eh-hero .button:hover,
.eh-hero .btn:hover,
.eh-hero button:hover,
.pr-hero .button:hover,
.pr-hero .btn:hover,
.pr-hero button:hover,
.page-title .button:hover,
.page-title .btn:hover,
.page-title button:hover,
.topbar .button:hover,
.topbar .btn:hover,
.topbar button:hover {
    background: rgba(255, 255, 255, .24) !important;
}


.page > .nameplate:first-child a,
.wrap > .topbar:first-child a,
.wrap > .page-card:first-child .navlinks a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 4px 6px 0 0;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    color: #fff !important;
    text-decoration: none;
}

.page > .nameplate:first-child a:hover,
.wrap > .topbar:first-child a:hover,
.wrap > .page-card:first-child .navlinks a:hover {
    background: rgba(255,255,255,.23);
}

/* Keep action controls consistently centered, readable, and separated. */
main button:not(.i2-nav-dropbtn):not([class*="jodit"]),
main .button,
main .btn,
main input[type="submit"],
main input[type="button"],
.page-wrap button:not(.i2-nav-dropbtn):not([class*="jodit"]),
.page-wrap .button,
.page-wrap .btn,
.page-wrap input[type="submit"],
.page-wrap input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    vertical-align: middle;
    line-height: 1.2 !important;
    text-align: center;
    text-decoration: none !important;
    color: #fff !important;
    margin: 3px 5px 3px 0;
}

main :is(.button, .btn, button).secondary,
main :is(.button, .btn, button).light,
main :is(.button, .btn, button).outline,
.page-wrap :is(.button, .btn, button).secondary,
.page-wrap :is(.button, .btn, button).light,
.page-wrap :is(.button, .btn, button).outline {
    border: 1px solid #a9bfd3 !important;
    background: #fff !important;
    color: #29445f !important;
}

main :is(.button, .btn, button).danger,
main :is(.button, .btn, button).warn,
main :is(.button, .btn, button).delete,
.page-wrap :is(.button, .btn, button).danger,
.page-wrap :is(.button, .btn, button).warn,
.page-wrap :is(.button, .btn, button).delete {
    border-color: #873636 !important;
    background: #a94343 !important;
    color: #fff !important;
}

.actions,
.page-actions,
.top-links,
.button-row,
.action-row,
.form-actions,
.toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px !important;
}

.actions > *,
.page-actions > *,
.top-links > *,
.button-row > *,
.action-row > *,
.form-actions > *,
.toolbar-actions > * {
    margin: 0 !important;
}

@media (max-width: 700px) {
    .hero,
    .page-header,
    .page-head,
    .ann-head,
    .dpa-hero,
    .eh-hero,
    .pr-hero,
    .page-title,
    .page-wrap > .topbar:first-child,
    .page > .topbar:first-child,
    .wrap > .page-card:first-child,
.page > .nameplate:first-child,
.wrap > .topbar:first-child {
        align-items: flex-start !important;
        min-height: 0;
        padding: 20px !important;
    }
}

@media (max-width: 800px) {
    html {
        font-size: 16px;
    }

    .i2-site-nav-wrap {
        width: calc(100% - 12px) !important;
        margin: 6px 6px 16px !important;
    }

    .ecase-client-nav {
        margin: 10px 6px 18px !important;
    }
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .page-wrap,
    .container,
    .content-wrap,
    .main-wrap,
    body > main,
    body > .wrap,
    body > .content,
    body > .page-container {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .section,
    .card,
    .panel,
    .box,
    .nameplate {
        background: #fff !important;
        box-shadow: none !important;
    }
}