:root {
    --bg-primary: #F8F9FC;
    --bg-secondary: #F6F8FA;

    --color-white: #FFF;
    --color-grey: #595959;
    --color-dark-main: #0B0D23;
    --color-black: #000;
    --color-almost-black: #000100;
    --color-blue: #2049C4;
    --color-dark-blue: #0E102B;
    --color-red: #AC3014;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

address {
    display: unset;
    font-style: unset;
}

table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: ''
}

button {
    font-family: "Inter", serif;
    border: none;
    cursor: pointer;
}

ins {
    text-decoration: none
}

del,
s,
strike {
    text-decoration: line-through
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
    margin: 0
}

* {
    box-sizing: border-box;
}

img {
    border: none;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}

svg {
    flex-shrink: 0;
    display: flex;
}

svg path {
    transition: .3s;
}

html {
    height: 100%;
    scrollbar-gutter: stable;
}

input {
    font-family: "Inter", serif;
}

input,
textarea,
button,
select,
label,
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:where(a, button, input, textarea):focus-visible {
    outline-color: var(--color-blue);
}

body {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: var(--color-dark-blue, #0E102B);
    background-color: var(--bg-primary, #F8F9FC);
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
}

@media only screen and (width < 1024px) {
    body.freeze {
        overflow: hidden;
        touch-action: none;
        -ms-touch-action: none;
    }
}

.dm-sans {
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.3px;
}

.page-body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100%;
}

.main {
    flex: 1;
}

.container {
    margin: 0 auto;
    max-width: 1406px;
    width: min(1406px, calc(100% - 34px));
}

.btn {
    position: relative;
    padding: 0 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 80px;
    height: 34px;
    border-radius: 8px;
    background-color: var(--color-dark-main);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-white, #FFF);
    text-decoration: none;
    transition: .3s;
    overflow: hidden;
    z-index: 1;
}

.btn:hover {
    background-color: #2049C4;
}

.btn-delete {
    border: 1px solid var(--color-red);
    color: var(--color-red);
    background-color: #FFF;
    min-width: 63px;
}

.btn-delete:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* registration form */

.registration-box {
    padding: 16px 0 20px;
    display: flex;
    gap: 21px;
    min-height: 100dvh;
}

.registration-img {
    position: relative;
    max-width: 800px;
    border-radius: 16px;
    overflow: hidden;
    background: #06070D61;
}

.registration-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #06070D;
    opacity: 0.38;
}

.registration-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.registration-form-box {
    padding: 44px;
    border: 1px solid #EBEAEF;
    box-shadow: 0px 2px 9px 0px #2122300A;
    background-color: var(--color-white);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: min(585px, calc(50% - 10px));
    gap: 30px;
}

.dashboard-menu-head .logo {
    flex: 0 0 auto;
}

.dashboard-menu-head .logo img {
    height: 65px;
    width: auto;
    display: block;
}

.dashboard-mobilemenu-open .logo img {
    height: 65px;
    width: auto;
    display: block;
}

.logo {
    max-width: 180px;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.registration-title-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.registration-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-almost-black);
}

.registration-text {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-black);
}

.sign-in-form {
    display: flex;
    flex-direction: column;
}

.sign-in-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sign-up-form-fields {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Input row for side-by-side fields */
.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Full width inputs */
.input-wrapper.full-width {
    grid-column: 1 / -1;
}

@media only screen and (width < 600px) {
    .input-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-wrapper label {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

.input-wrapper input {
    padding: 13px 15px;
    height: 48px;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey);
}

.input-wrapper:has(.password-icon) input {
    padding-right: 47px;
}

/* Handle Rails field_with_errors wrapper without breaking layout */
.field_with_errors {
    display: contents;
}

.input-wrapper input::placeholder {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey);
}

.password-icon {
    position: absolute;
    right: 16px;
    bottom: 15px;
    cursor: pointer;
}

.password-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
    transition: .3s;
}

input[type='password']+.password-icon::before {
    width: 0;
}

.forgot-password {
    margin-top: 12px;
    align-self: flex-end;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-blue);
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: .3s;
}

.forgot-password:hover {
    text-decoration-color: inherit;
}

form .btn {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    font-size: 14px;
    line-height: 20px;
}

@media only screen and (width < 1024px) {
    .registration-img {
        display: none;
    }

    .registration-form-box {
        width: 100%;
    }
}

@media only screen and (width < 768px) {
    .registration .container {
        width: 100%;
    }

    .registration-box {
        padding: 0;
    }

    .registration-form-box {
        padding: 30px 25px;
        border: none;
        border-radius: 0;
    }
}

/* social login */

.social-login-separator {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--color-grey);
    text-align: center;
}

.social-login-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: calc(50% - 12px - 9px);
    height: 1px;
    background-color: #EBEAEF;
}

.social-login-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: calc(50% - 12px - 9px);
    height: 1px;
    background-color: #EBEAEF;
}

.social-login-btns {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-login-btn {
    padding: 13px 15px;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #EAEAEA;
    background-color: var(--color-white);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    transition: .3s;
}

.social-login-btn:hover {
    border-color: var(--color-dark-main);
}

.sign-up-now {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
    text-align: center;
}

.sign-in-form+.sign-up-now {
    margin-top: -10px;
}

.sign-up-now> :is(a, button) {
    padding: 0;
    color: var(--color-dark-main);
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    background-color: transparent;
    transition: .3s;
}

.sign-up-now> :is(a, button):hover {
    text-decoration-color: inherit;
}

.back-to-login {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.back-to-login>span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-main);
    transition: .3s;
}

.back-to-login:hover span {
    color: var(--color-blue);
}

.back-to-login:hover svg path {
    stroke: var(--color-blue);
}

.registration-form-separator {
    width: 100%;
    height: 1px;
    background-color: #EBEAEF;
}

.forgot-password-icon {
    margin-bottom: -18px;
    width: 56px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
}

/* One time password */

.otp-container {
    display: flex;
    justify-content: space-between;
    gap: 13px;
}

.otp-input {
    padding: 14px;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 6);
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: var(--color-almost-black);
}

.otp-input:not(:placeholder-shown) {
    border-color: var(--color-dark-main);
}

@media only screen and (width < 768px) {
    .otp-input {
        padding: 9px;
        font-size: 24px;
    }
}

/* terms */

.terms {
    margin-top: 75px;
    display: flex;
    align-content: end;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 10px 12px;
}

.terms>a {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--color-grey);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: .3s;
}

.terms>a:hover {
    text-decoration-color: inherit;
}

.terms>span {
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: var(--color-grey);
}

/* dashboard */

.dashboard-container {
    /* margin: 0 auto; */
    max-width: -webkit-fill-available;
}

.dashboard-wrapper {
    padding: 19px 16px 19px 0;
    display: flex;
    min-height: 100dvh;
}

.dashboard-aside {
    padding: 11px 24px 6px;
    width: 270px;
    position: sticky;
    top: 19px;
    max-height: calc(100dvh - 38px);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 40px;
    transition: .3s;
}

@media only screen and (width >=1024px) {
    .dashboard-aside.narrow {
        width: 86px;
    }

    .dashboard-aside.narrow .dashboard-menu-item span {
        display: none;
    }

    .dashboard-aside.narrow .dashboard-menu-head {
        justify-content: center;
    }

    .dashboard-aside.narrow .logo {
        display: none;
    }
}

.dashboard-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 29px;
}

.dashboard-menu-toggle {
    cursor: pointer;
}

.dashboard-menu-toggle:hover svg path {
    stroke: var(--color-almost-black);
}

.dashboard-menu-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.dashboard-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-menu-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-blue);
    border-radius: 6px;
    transition: background-color .3s;
}

.dashboard-menu-item:is(.active, :hover) {
    background-color: #EEF0FF;
}

.dashboard-menu-item span {
    white-space: nowrap;
}

.dashboard-menu-separator {
    margin: 8px 0;
    border-bottom: 1px solid #ECECEC;
}

.dashboard-mobilemenu-open {
    display: none;
}

@media only screen and (width < 1024px) {
    .dashboard-wrapper {
        padding: 76px 25px 29px;
        display: flex;
        min-height: 100dvh;
    }

    .dashboard-mobilemenu-open {
        position: fixed;
        top: 18px;
        left: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 15;
    }

    .dashboard-mobilemenu-open::before {
        content: '';
        position: absolute;
        left: -25px;
        top: 50%;
        transform: translateY(-50%);
        height: 76px;
        width: 100vw;
        background-color: var(--bg-primary);
        z-index: -1;
    }

    .dashboard-aside {
        position: fixed;
        top: 76px;
        left: 0;
        transform: translateX(-105%);
        background-color: var(--bg-primary);
        z-index: 10;
        height: calc(100dvh - 76px);
        padding-bottom: 25px;
        overflow-y: auto;
    }

    .dashboard-aside.active {
        transform: translateX(0);
    }

    .dashboard-menu-head {
        display: none;
    }

    .burger {
        border: 1px solid #EBEAEF;
        border-radius: 8px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .burger-box {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .burger span {
        height: 1.5px;
        width: 20px;
        border-radius: 5px;
        background-color: var(--color-dark-main);
        transition: .3s;
    }

    .burger span:last-child {
        align-self: start;
        width: 10px;
    }

    .burger:hover span:last-child {
        width: 20px;
    }

    .burger.active .burger-box {
        justify-content: center;
        align-items: center;
    }

    .burger.active span:nth-child(1) {
        position: absolute;
        transform: rotate(-45deg);
    }

    .burger.active span:nth-child(2) {
        position: absolute;
        transform: rotate(45deg);
    }

    .burger.active span:nth-child(3) {
        display: none;
    }
}

/* dashboard content */

.dashboard-content {
    padding: 18px 30px 35px 30px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0px 1px 2px 0px #0000000D;
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.dashboard-top-bar {
    padding-bottom: 16px;
    border-bottom: 1px solid #F5F4F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-content .settings-header {
    margin-block: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.breadcrumbs {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark-blue);
}

.dashboard-search {
    position: relative;
}

.dashboard-search input {
    padding: 11px 11px 11px 35px;
    width: 270px;
    border: 1px solid #E9E9E9;
    box-shadow: 0px 1px 2px 0px #0000000D;
    border-radius: 8px;
    font-size: 14px;
    line-height: 16px;
    color: var(--color-dark-blue);
}

.dashboard-search input::placeholder {
    color: #979797;
}

.dashboard-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.dashboard-top-btns {
    display: flex;
    align-items: center;
    gap: 40px;
}

.dashboard-top-btns button {
    padding: 0;
    position: relative;
    background-color: transparent;
}

.dashboard-top-btns button:not(:first-child)::before {
    content: '';
    position: absolute;
    right: calc(100% + 19px);
    height: 19px;
    width: 1px;
    background-color: #F5F4F9;
}

.dashboard-top-btns button:hover svg path {
    stroke: var(--color-blue);
}

@media only screen and (width < 1280px) {
    .dashboard-content {
        width: calc(100vw - 300px);
    }

    .dashboard-search input {
        width: 400px;
    }
}

@media only screen and (width < 1024px) {
    .dashboard-top-btns {
        position: fixed;
        top: 28px;
        right: 25px;
        gap: 24px;
        z-index: 15;
    }

    .dashboard-top-btns button:not(:first-child)::before {
        right: calc(100% + 11px);
    }
}

@media only screen and (width < 768px) {
    .dashboard-content {
        padding: 14px 14px 21px;
    }

    .dashboard-top-bar {
        gap: 50px;
    }

    .dashboard-search input {
        width: 100%;
    }
}

/* statistic */

.statistic {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 30px;
}

.admin-dashboard .statistic {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.statistic-item {
    position: relative;
    padding: 23px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.statistic-item:hover {
    border-color: #4220ED;
    box-shadow: 0 2px 8px rgba(66, 32, 237, 0.1);
}

.statistic-item.active {
    background: #EDEDED;
    border-color: #4220ED;
}

.statistic-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 19px;
    width: 9px;
    height: 29px;
    border-radius: 0 16px 16px 0;
    background-color: #4220ED;
}

.statistic-item.red::before {
    background-color: #FF2E2E;
}

.statistic-item.yellow::before {
    background-color: #EEC844;
}

.statistic-item.orange::before {
    background-color: #FF692E;
}

.statistic-item p {
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: #616875;
}

/* Open-amount sub-label inside KPI stat cards */
.statistic-sub-amount {
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    color: #4220ED !important;
    margin-top: -4px;
}

.statistic-item span {
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #050828;
}

@media only screen and (width < 1280px) {
    .statistic {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        gap: 20px;
    }
}

@media only screen and (width < 768px) {
    .statistic {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 16px;
    }

    .admin-dashboard .statistic {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-dashboard .statistic:not(:has(.statistic-item:nth-child(4))) .statistic-item:nth-child(3) {
        grid-column: span 2;
    }

    .statistic-item {
        padding: 15px 19px;
        gap: 6px;
    }

    .statistic-item::before {
        top: 10px;
    }

    .statistic-item p {
        font-size: 13px;
    }
}

/* dashboard table */

.dashboard-box {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 100%;
}

.dashboard-table-wrapper {
    padding: 19px 19px 13px;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.dashboard-table-head {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.dashboard-table-head>span {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    flex-grow: 1;
}



.search-results-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.search-count {
    color: #3b82f6;
    font-weight: 600;
}

.search-term {
    color: #64748b;
    font-style: italic;
}

.clear-search {
    background: #f1f5f9;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s;
    margin-left: auto;
}

.clear-search:hover {
    background: #e2e8f0;
    color: #475569;
}

.dashboard-table-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

input.table-search {
    width: 270px;
    font-size: 12px;
}

.dashboard-table-filters button {
    border: 1px solid #EAEAEA;
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #FBFBFF;
    border-radius: 8px;
    transition: .3s;
}

.dashboard-table-filters button:hover {
    border-color: var(--color-dark-blue);
}

@media only screen and (width < 1440px) {
    .dashboard-box {
        flex-direction: column-reverse;
    }
}

@media only screen and (width < 768px) {
    .dashboard-table-wrapper {
        padding: 19px 16px 13px;
    }

    .dashboard-table-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dashboard-table-filters {
        width: 100%;
    }

    .dashboard-table-filters:has(.custom-select) {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-search {
        flex-grow: 1;
        width: 100%;
    }

    input.table-search {
        width: 100%;
    }
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

th {
    padding: 8px;
    border-top: 1px solid #EBEAEF;
    border-bottom: 1px solid #EBEAEF;
    text-align: left;
    vertical-align: middle;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

th:first-child {
    padding-left: 0;
    width: 26px;
}

th:nth-child(2) {
    width: 76px;
}

th:last-child {
    width: 80px;
}

td {
    padding: 11px 8px 10px;
    border-bottom: 1px solid #EBEAEF;
    vertical-align: middle;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td:first-child {
    padding-left: 0;
}

td:last-child {
    padding-right: 1px;
}

label.label {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    cursor: pointer;
}

label.label i {
    border: 1px solid #EBEAEF;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .3s;
    cursor: pointer;
}

label.label input:checked+i {
    background-color: #4220ED;
    border-color: #4220ED;
}

label.label svg {
    opacity: 0;
    transition: .3s;
}

label.label input:checked+i svg {
    opacity: 1;
}

label.label input {
    opacity: 0;
    width: 0;
    height: 0;
    z-index: -1;
    position: absolute;
}

label.label:hover i {
    border-color: #4220ED;
}

.table-action-btns {
    display: flex;
    gap: 10px;
}

.table-action-button {
    padding: 7px 12px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    transition: .3s;
    text-decoration: none;
}

.table-action-button.download {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI4MjBfMTM0OSkiPgo8cGF0aCBkPSJNNiA5TDkgMTJNOSAxMkwxMiA5TTkgMTJWNk0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaIiBzdHJva2U9IiMwNTA4MjgiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yODIwXzEzNDkiPgo8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
}

.table-action-button:not(.btn-delete):hover {
    border-color: var(--color-dark-blue);
}

.table-action-button.btn-delete {
    padding: 7px 12px;
    justify-content: center;
    min-width: 55px;
}

.table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
}

@media only screen and (width < 1280px) {
    tr:last-child td {
        border-bottom: none
    }

    .table-scroll-wrapper {
        padding-bottom: 11px;
        padding-right: 19px;
        width: calc(100% + 19px);
    }

    .table-scroll-wrapper .ps__rail-x {
        margin-left: 2px;
        background-color: #E2E2E2 !important;
        opacity: 1 !important;
        height: 11px !important;
        border-radius: 6px;
        transform: scale(.965);
        transform-origin: left;
    }

    .table-scroll-wrapper .ps__rail-x::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 4px);
        height: 100%;
        background-color: inherit;
        border-radius: 6px;
    }

    .table-scroll-wrapper .ps__thumb-x {
        background-color: var(--color-white) !important;
        border-radius: 4px;
        height: 7px !important;
        opacity: 1 !important;
    }
}

@media only screen and (width < 768px) {
    .table-scroll-wrapper {
        padding-right: 16px;
        width: calc(100% + 16px);
    }

    .table-scroll-wrapper .ps__rail-x {
        transform: scale(.93);
    }
}

/* table pagination */

.pagination {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-indicator {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}

.pagination-items {
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #475467;
    cursor: pointer;
    transition: .3s;
}

.pagination-item.active {
    background-color: #F9FAFB;
    color: #1D2939;
    font-weight: 500;
    pointer-events: none;
}

.pagination-item:hover {
    background-color: #F9FAFB;
}

.pagination-btns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-btn {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-dark-main);
    background-color: var(--color-dark-main);
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    transition: .3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-btn:not([disabled]):hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pagination-btn[disabled] {
    border: 1px solid #EAEAEA;
    background-color: transparent;
    color: #050828;
    pointer-events: none;
}

.pagination-btn:hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

@media only screen and (width < 768px) {
    .pagination {
        flex-direction: column;
        gap: 12px;
    }

    .pagination-item {
        width: 30px;
        height: 44px;
    }

    .pagination-btns {
        margin-top: -51px;
        width: 100%;
        justify-content: space-between;
    }

    .pagination-btn span {
        display: none;
    }
}

/* Recent Alerts Table */

.recent-alerts th:nth-child(3) {
    width: 180px;
}

.recent-alerts th:nth-child(4) {
    width: 114px;
}

.recent-alerts th:nth-child(5) {
    width: 124px;
}

.recent-alerts th:nth-child(6) {
    width: 106px;
}

@media only screen and (width < 1280px) and (width >=1024px) {
    .recent-alerts th:nth-child(3) {
        width: 152px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.recent-alerts {
        width: max(706px, 100%) !important;
    }
}

/* Alerts Table Column Widths */

.alerts-table .checkbox-col {
    width: 40px;
}

.alerts-table .bin-col {
    width: 70px;
}

.alerts-table .company-col {
    width: 100px;
}

.alerts-table .description-col {
    width: 180px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alerts-table .issue-date-col {
    width: 90px;
}

.alerts-table .violation-number-col {
    width: 120px;
}

.alerts-table .violation-type-col {
    width: 110px;
}

.alerts-table .status-col {
    width: 100px;
}

.alerts-table .penalty-col {
    width: 90px;
    text-align: right;
}

.alerts-table .disposition-date-col {
    width: 100px;
}

.alerts-table .action-col {
    width: 70px;
    text-align: center;
}

/* Ensure proper alignment for penalty amounts */
.alerts-table td.penalty-col {
    padding-right: 12px;
}

/* Alerts table - responsive width without horizontal scroll */
.table-scroll-wrapper table.alerts-table {
    table-layout: auto;
    width: 100%;
}

/* real-time */

.real-time {
    padding: 19px;
    border: 1px solid #E9E9E9;
    border-radius: 19px;
    width: 330px;
    flex-shrink: 0;
}

.real-time-title {
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-dark-blue);
}

.real-time-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.real-time-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark-blue);
}

.real-time-item:not(:last-child) {
    padding-bottom: 12px;
    border-bottom: 1px solid #F5F4F9;
}

.status {
    padding: 4px 12px;
    border-radius: 32px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

.status.reported {
    background-color: #FFF0EA;
    color: #FF692E;
}

.status.resolved {
    background-color: #E7F8F0;
    color: #10A760;
}

.status.court {
    background-color: #FEF4E6;
    color: #E18308;
}

@media only screen and (width < 1440px) {
    .real-time {
        width: 100%;
    }
}

@media only screen and (width < 1024px) {
    .real-time {
        display: none;
    }
}

/* Properties Table */

.properties th:nth-child(3) {
    width: 250px;
}

.properties th:nth-child(4),
.properties th:nth-child(5) {
    width: 100px;
}

.properties th:nth-child(6) {
    width: 200px;
}

.properties th:nth-child(7) {
    width: 120px;
}

@media only screen and (width < 1440px) {
    .properties th:nth-child(3) {
        width: 180px;
    }

    .properties th:nth-child(4),
    .properties th:nth-child(5) {
        width: 85px;
    }

    .properties th:nth-child(6) {
        width: 170px;
    }

    .properties th:nth-child(7) {
        width: 100px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.properties {
        width: max(850px, 100%) !important;
        min-width: 850px;
    }
}

/* custom select */

.custom-select {
    position: relative;
    width: 276px;
    z-index: 2;
}

.custom-select[open] {
    z-index: 12;
}

td:has(.custom-select[open]) {
    overflow: visible;
}

tr:last-child .custom-select ul {
    margin: 0 0 2px;
    top: auto;
    bottom: 100%;
}

.custom-select summary {
    padding: 9px 13px;
    background-color: #FBFBFF;
    border-radius: 8px;
    border: 1px solid #EAEAEA;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.custom-select summary span,
.custom-select ul li {
    color: #050828;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    flex-grow: 1;
    list-style: none;
}

.custom-select summary svg:last-child {
    transition: .3s;
}

.custom-select[open] summary svg:last-child {
    transform: scale(-1);
}

.custom-select ul {
    position: absolute;
    margin-top: 2px;
    background-color: #FBFBFF;
    color: #050828;
    list-style: none;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #EAEAEA;
}

.custom-select ul li {
    padding: 10px;
    cursor: pointer;
}

.custom-select ul li:hover {
    background: #EEF0FF;
}

@media only screen and (width < 1280px) {
    .custom-select {
        width: 220px;
    }
}

@media only screen and (width < 768px) {
    .custom-select {
        width: 100%;
    }
}

/* status select */

.status-select {
    width: fit-content;
}

.status-select summary {
    border-radius: 32px;
    padding: 4px 12px;
    background-color: #FBFBFF;
    border: none;
    gap: 4px;
}

.status-select summary.green {
    background-color: #E7F8F0;
}

.status-select summary.green span {
    color: #10A760;
    font-size: 14px;
}

.status-select summary.green svg:last-child path {
    stroke: #10A760;
}

.status-select summary.orange {
    background-color: #FFF0EA;
}

.status-select summary.orange span {
    color: #FF692E;
    font-size: 14px;
}

.status-select summary.orange svg:last-child path {
    stroke: #FF692E;
}

.status-select ul {
    width: max-content;
    min-width: 120px;
    max-width: 300px;
}

.status-select ul li {
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

/* Alerts Table */

/* Alerts table column sizing */
.alerts-table {
    table-layout: auto;
    min-width: 900px;
    width: 100%;
}

.alerts-table .checkbox-col {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

.alerts-table .bin-col {
    width: 100px;
    min-width: 100px;
    max-width: 120px;
}

.alerts-table .company-col {
    width: 150px;
    min-width: 150px;
    max-width: 180px;
}

.alerts-table .description-col {
    width: 200px;
    min-width: 180px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.alerts-table .issue-date-col {
    width: 120px;
    min-width: 120px;
    max-width: 140px;
}

.alerts-table .violation-number-col {
    width: 140px;
    min-width: 140px;
    max-width: 160px;
}

.alerts-table .violation-type-col {
    width: 140px;
    min-width: 140px;
    max-width: 160px;
}

.alerts-table .disposition-date-col {
    width: 140px;
    min-width: 140px;
    max-width: 160px;
    white-space: nowrap;
}

.alerts-table .action-col {
    width: 80px;
    min-width: 80px;
    max-width: 100px;
}

@media only screen and (width < 1440px) {
    .alerts-table .company-col {
        width: 130px;
        min-width: 130px;
        max-width: 150px;
    }

    .alerts-table .description-col {
        width: 160px;
        min-width: 140px;
        max-width: 160px;
    }

    .alerts-table .violation-number-col,
    .alerts-table .violation-type-col,
    .alerts-table .disposition-date-col {
        width: 120px;
        min-width: 120px;
        max-width: 140px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.alerts-table {
        width: max(900px, 100%) !important;
        min-width: 900px;
    }
}

/* Description tooltip styles */
.description-tooltip {
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

/* JavaScript tooltip */
.js-tooltip {
    position: fixed;
    background: white;
    color: #333;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 400px;
    min-width: 250px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.js-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.js-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #d1d5db;
}

/* popup alert */

.popup-alerts {
    padding: 30px 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 16;
}

.popup-alerts.active {
    display: flex;
}

.popup-alerts-box {
    padding: 19px 20px 30px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(684px, calc(100% - 50px));
    background-color: var(--color-white);
    box-shadow: 0px 4px 4px 1000px #00000040;
    border-radius: 16px;
    max-height: 80vh;
    overflow-y: auto;
}

.popup-alerts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popup-alerts-head span {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}

.popup-alerts-close {
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.popup-alerts-close::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    z-index: -1;
    transition: .3s;
}

.popup-alerts-close:hover::before {
    background-color: #EEF0FF;
}

.alerts-details {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #E9E9E9;
    border-radius: 11px;
}

.alerts-details-col {
    display: flex;
    flex-direction: column;
}

.alerts-details-col:first-child {
    border-right: 1px solid #E9E9E9;
}

.alerts-details-row {
    padding: 9px 14px;
    display: grid;
    grid-template-columns: minmax(122px, auto) 4px minmax(122px, auto);
    gap: 10px;
}

.alerts-details-row:not(:last-child) {
    border-bottom: 1px solid #E9E9E9;
}

.alerts-details-row span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

span.alerts-details-name {
    font-weight: 600;
}

.alerts-additional-details {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #F5F4F9;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Resolution Request Styles */
.alerts-resolution-request {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.resolution-request-header {
    margin-bottom: 20px;
    text-align: center;
}

.resolution-request-header h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
}

.resolution-request-header p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

.resolution-request-content {
    position: relative;
}

.resolution-request-form {
    display: block;
}

.resolution-request-form .form-group {
    margin-bottom: 16px;
    position: relative;
}

.resolution-request-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.priority-dropdown {
    width: 100%;
}

.priority-dropdown details {
    width: 100%;
}

.priority-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: white;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    list-style: none;
}

.priority-dropdown summary::-webkit-details-marker {
    display: none;
}

.priority-dropdown summary:focus {
    outline: none;
    border-color: #4220ED;
    box-shadow: 0 0 0 2px rgba(66, 32, 237, 0.2);
}

.priority-dropdown summary:hover {
    border-color: #4220ED;
}

.priority-dropdown summary span {
    font-size: 14px;
    color: #495057;
}

.priority-dropdown summary svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.priority-dropdown[open] summary svg {
    transform: rotate(180deg);
}

.priority-dropdown ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 6px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.priority-dropdown ul li {
    padding: 8px 12px;
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.priority-dropdown ul li:hover {
    background-color: #f8f9fa;
}

.priority-dropdown ul li:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.priority-dropdown ul li:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.resolution-description {
    width: 100%;
    min-height: 80px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: white;
    font-size: 14px;
    color: #495057;
    resize: vertical;
    font-family: inherit;
}

.resolution-description:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.resolution-description::placeholder {
    color: #adb5bd;
}

.form-actions {
    text-align: center;
    margin-top: 20px;
}

.request-resolution-btn,
.retry-request-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-top: 0 !important;
}

.btn.btn-primary {
    background: #4220ED;
    color: white;
}

.btn.btn-primary:hover {
    background: #3614c7;
}

.btn.btn-primary:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.btn.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn.btn-secondary:hover {
    background: #5a6268;
}

/* Success State */
.resolution-request-success {
    text-align: center;
    padding: 30px 20px;
}

.success-icon {
    width: 60px;
    height: 60px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 16px auto;
}

.resolution-request-success h4 {
    margin: 0 0 8px 0;
    color: #27ae60;
    font-size: 18px;
    font-weight: 600;
}

.resolution-request-success p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
}

/* Error State */
.resolution-request-error {
    text-align: center;
    padding: 30px 20px;
}

.error-icon {
    width: 60px;
    height: 60px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 16px auto;
}

.resolution-request-error h4 {
    margin: 0 0 8px 0;
    color: #e74c3c;
    font-size: 18px;
    font-weight: 600;
}

.resolution-request-error p {
    margin: 0 0 16px 0;
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alerts-resolution-request {
        margin-top: 20px;
        padding: 16px;
    }

    .resolution-request-header h3 {
        font-size: 16px;
    }

    .resolution-request-header p {
        font-size: 13px;
    }

    .resolution-priority-select,
    .resolution-description {
        font-size: 13px;
    }

    .request-resolution-btn,
    .retry-request-btn {
        padding: 8px 20px;
        font-size: 13px;
    }
}

/* Trial Info Popup Styles */
.trial-info-popup {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.trial-info-popup h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.trial-info-popup p {
    margin: 4px 0;
    font-size: 14px;
    opacity: 0.95;
}

.trial-info-popup a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
}

.trial-info-popup a:hover {
    opacity: 0.8;
}

/* Form Field Styles */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.form-field input,
.form-field select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field select:focus {
    border-color: #3b82f6;
    outline: none;
}

.form-help {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

.alerts-additional-details label {
    font-size: 12px;
    line-height: 16px;
    color: #433B3B;
}

.alerts-additional-details input {
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid #EBEAEF;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey);
}

/* upload */

.alerts-upload-file {
    position: relative;
    margin-top: 19px;
    padding: 20px;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #EBEAEF;
    border-radius: 8px;
    transition: .3s;
    cursor: pointer;
}

.alerts-upload-file:hover {
    border-color: var(--color-dark-blue);
}

.alerts-upload-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alerts-upload-info.hide {
    display: none;
}

.alerts-upload-info span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.alerts-upload-info p,
.alerts-uploaded-file {
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

.alerts-uploaded-file {
    display: none;
}

.alerts-uploaded-error {
    display: none;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-red);
}

:is(.alerts-uploaded-error, .alerts-uploaded-file).active {
    display: inline-block;
}

.popup-alerts .btn {
    margin-top: 30px;
    align-self: flex-end;
    min-width: 137px;
    height: 40px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.remove-file {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.remove-file.active {
    display: flex;
}

.remove-file:hover svg path {
    stroke: var(--color-red);
}

.remove-file svg {
    height: 100%;
}

.alerts-upload-file.dragover {
    background: #EEF0FF;
}

/* Professional Property Modal */
.property-details-modal {
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.property-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 12px 12px 0 0;
    margin: -20px -30px 24px -30px;
}

.property-title-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.property-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.property-status-badge {
    flex-shrink: 0;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

.property-address-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    opacity: 0.95;
}

.property-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.info-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.section-title {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.info-value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.info-value.highlight {
    color: #3b82f6;
    font-weight: 700;
}

.monitoring-active {
    color: #059669;
}

.monitoring-inactive {
    color: #dc2626;
}

.description-section {
    grid-column: 1 / -1;
}

.description-content {
    background: white;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.6;
}

.activity-summary {
    margin-bottom: 24px;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.activity-item {
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    background: #f8fafc;
}

.activity-count {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.activity-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.system-info {
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.system-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.system-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.system-value {
    font-size: 12px;
    color: #64748b;
}

@media (max-width: 768px) {
    .property-details-modal .property-header {
        margin: -19px -20px 20px -20px;
        padding: 20px;
    }

    .property-details-modal .property-title-section {
        flex-direction: column;
        gap: 12px;
    }

    .property-details-modal .property-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .property-details-modal .activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .property-details-modal .info-value {
        max-width: 50%;
    }
}

@media only screen and (width < 768px) {
    .popup-alerts-box {
        padding: 19px 20px;
    }

    .alerts-details {
        grid-template-columns: 1fr;
    }

    .alerts-details-col:first-child {
        border-bottom: 1px solid #E9E9E9;
        border-right: none;
    }

    .alerts-additional-details {
        margin-top: 16px;
        padding-top: 16px;
    }

    .alerts-upload-file {
        margin-top: 16px;
    }

    .popup-alerts .btn {
        margin-top: 16px;
    }
}

/* billing */

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.alert-success {
    background-color: #f0f9ff;
    border: 1px solid #7dd3fc;
    color: #0369a1;
}

.alert-error {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

.billing-info {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 19px 28px;
}

.billing-info-item {
    padding: 19px;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.billing-info-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.billing-info-table {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border: 1px solid #E9E9E9;
    border-radius: 12px;
}

.billing-info-table.no-border {
    border: none;
}

.billing-info-table.no-border .billing-info-row {
    padding: 0;
}

.billing-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.billing-info-row span {
    font-size: 14px;
    line-height: 20px;
}

span.billing-info-name {
    font-weight: 600;
}

.billing-info-item .btn {
    justify-self: flex-end;
    min-width: 129px;
    height: 38px;
}

.billing-main-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.billing-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.billing-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.billing-payments {
    max-width: 1200px;
    margin-top: 24px;
    font-family: 'DM Sans', sans-serif;
}

@media only screen and (width < 768px) {
    .billing-info {
        margin-top: 16px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        ;
    }
}

/* Billing & Payments Page Styles */

.billing-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.details-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 8px;
    align-items: center;
}

.detail-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.detail-colon {
    font-size: 14px;
    color: #6b7280;
}

.detail-value {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
}

.action-button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.action-button.primary {
    background: #1f2937;
    color: white;
}

.action-button.primary:hover {
    background: #374151;
    color: white !important;
    text-decoration: none !important;
}

.action-button.secondary {
    background: #1f2937;
    color: white;
}

.action-button.secondary:hover {
    background: #374151;
    color: white !important;
    text-decoration: none !important;
}

.action-button.danger {
    background: #ef4444;
    color: white;
}

.action-button.danger:hover {
    background: #dc2626;
    color: white !important;
    text-decoration: none !important;
}

.plan-actions {
    display: flex;
    flex-direction: column;
}



/* Plans Page Styles */
.plans-page {
    max-width: 1200px;
    padding: 40px 24px;
}

.plans-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 24px;
    margin-bottom: 48px;
}

.plan-card {
    position: relative;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.plan-card.featured {
    border-color: #2049c4;
    box-shadow: 0 4px 20px rgba(32, 73, 196, 0.15);
    transform: scale(1.05);
}

.plan-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 24px 44px rgba(32, 73, 196, 0.25);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2049c4, #1e40af);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-header {
    text-align: center;
    margin-bottom: 24px;
}

.plan-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #0f1419;
    margin-bottom: 16px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.plan-price .currency {
    font-size: 20px;
    font-weight: 600;
    color: #6b7280;
}

.plan-price .amount {
    font-size: 32px;
    font-weight: 700;
    color: #0f1419;
    line-height: 1;
}

.plan-price .period {
    font-size: 18px;
    font-weight: 500;
    color: #6b7280;
}

.plan-features {
    flex-grow: 1;
    margin-bottom: 32px;
}

.feature-highlight {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #374151;
    font-size: 16px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 12px 0;
    font-size: 16px;
    color: #374151;
    display: flex;
    align-items: center;
    position: relative;
}

.feature-list li:before {
    content: "✓";
    color: #10b981;
    font-weight: 700;
    font-size: 18px;
    margin-right: 12px;
    width: 20px;
}

.feature-list li:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.plan-action {
    margin-top: auto;
}

.plan-button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.plan-button:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #111827;
}

.plan-button.primary {
    background: linear-gradient(135deg, #2049c4, #1e40af);
    border-color: #2049c4;
    color: white;
}

.plan-button.primary:hover {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    border-color: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 73, 196, 0.3);
}

.plan-button.current {
    background: #10b981;
    border-color: #10b981;
    color: white;
    cursor: default;
}

.plan-button.current:hover {
    background: #10b981;
    border-color: #10b981;
    transform: none;
    box-shadow: none;
}

.plans-footer {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}

.plans-footer p {
    color: #6b7280;
    margin-bottom: 8px;
}

.plans-footer a {
    color: #2049c4;
    text-decoration: none;
    font-weight: 500;
}

.plans-footer a:hover {
    text-decoration: underline;
}

@media only screen and (width < 768px) {
    .plans-page {
        padding: 24px 16px;
    }

    .plans-header h1 {
        font-size: 32px;
    }

    .plans-header p {
        font-size: 16px;
    }

    .plans-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .plan-card.featured {
        transform: none;
    }

    .plan-card.featured:hover {
        transform: translateY(-8px);
    }

    .plan-price .amount {
        font-size: 36px;
    }
}

/* User Profile Page Styles */
.user-profile-page {
    max-width: 1000px;
    margin-top: 24px;
}

.user-profile-header {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.user-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2049c4, #1e40af);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-details h1 {
    font-size: 28px;
    font-weight: 700;
    color: #0f1419;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.user-email {
    color: #6b7280;
    font-size: 16px;
    margin: 0 0 12px 0;
}

.user-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.admin-badge {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fbbf24;
}

.badge.user-badge {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.badge.confirmed-badge {
    background: #dcfce7;
    color: #059669;
    border: 1px solid #10b981;
}

.badge.unconfirmed-badge {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #f87171;
}

.user-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.user-actions .action-button {
    text-align: center;
    white-space: nowrap;
}

.user-profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.profile-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.profile-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: #0f1419;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

/* Mobile Responsiveness */
@media only screen and (width < 768px) {
    .user-profile-page {
        padding: 16px;
    }

    .user-profile-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

    .user-info {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        font-size: 24px;
        align-self: center;
    }

    .user-details h1 {
        font-size: 24px;
    }

    .user-actions {
        flex-direction: row;
        min-width: auto;
        gap: 8px;
    }

    .user-actions .action-button {
        flex: 1;
        font-size: 13px;
        padding: 10px 12px;
    }

    .user-profile-content {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .profile-section {
        padding: 20px;
    }

    .user-badges {
        justify-content: center;
    }
}

@media only screen and (width < 480px) {
    .user-actions {
        flex-direction: column;
        gap: 12px;
    }

    .badge {
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* User Edit Page Styles */
.user-edit-page {
    max-width: 800px;
    margin-top: 24px;
}

.user-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.user-edit-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #0f1419;
    margin: 0;
}

.user-edit-actions {
    display: flex;
    gap: 12px;
}

.user-edit-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
}

/* Form Styles */
.user-form {
    width: 100%;
}

.form-errors {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.form-errors h3 {
    color: #dc2626;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.form-errors ul {
    color: #dc2626;
    margin: 0;
    padding-left: 20px;
}

.form-errors li {
    margin-bottom: 4px;
}

.form-sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-section {
    padding: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.form-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #0f1419;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

.form-input,
.form-select {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #2049c4;
    box-shadow: 0 0 0 3px rgba(32, 73, 196, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-checkbox:checked {
    background: #2049c4;
    border-color: #2049c4;
}

.checkbox-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.field-help {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.form-actions {
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Mobile Responsiveness */
@media only screen and (width < 768px) {
    .user-edit-page {
        padding: 16px;
    }

    .user-edit-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .user-edit-actions {
        justify-content: center;
    }

    .user-edit-content {
        padding: 20px;
    }

    .form-section {
        padding: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .action-button {
        width: 100%;
    }
}

.billing-history-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.billing-history-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.billing-table-container {
    overflow-x: auto;
}

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

.billing-table th {
    text-align: left;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.billing-table td {
    padding: 16px 0;
    font-size: 14px;
    color: #1a1a1a;
    border-bottom: 1px solid #f3f4f6;
}

.billing-table tr:last-child td {
    border-bottom: none;
}

.download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.download-link:hover {
    color: #1a1a1a;
}

.download-link svg {
    width: 16px;
    height: 16px;
}

.no-download {
    color: #9ca3af;
}

.no-billing-history {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

@media only screen and (width < 768px) {
    .billing-info-row {
        grid-template-columns: 1fr;
    }

    .billing-payments {
        padding: 16px;
    }

    .detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .detail-colon {
        display: none;
    }

    .detail-label {
        font-weight: 600;
    }
}

/* Billing Table */

.dashboard-table-wrapper:has(table.billing-history) .dashboard-table-head>span {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

table.billing-history tr:last-child td {
    border-bottom: none;
}

.billing-history th:nth-child(2) {
    width: 166px;
}

.billing-history th:nth-child(4) {
    width: 155px;
}

.table-action-button.download span:last-child {
    display: none;
}

@media only screen and (width < 768px) {
    .billing-history th:nth-child(2) {
        width: 110px;
    }

    .billing-history th:nth-child(3) {
        width: 66px;
    }

    .billing-history th:nth-child(4) {
        width: 73px;
    }

    .table-action-button.download span:first-child {
        display: none;
    }

    .table-action-button.download span:last-child {
        display: flex;
    }
}

/* profile settings */

.profile-info {
    margin-top: 29px;
    padding: 26px 30px;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
}

.profile-info-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-picture {
    width: 75px;
    height: 75px;
    border-radius: 100%;
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.profile-picture-actions>span {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey);
}

.profile-picture-btns {
    display: flex;
    gap: 11px;
}

.profile-picture-btns>.btn {
    padding: 8px;
}

.profile-details-item {
    margin-top: 26px;
    padding: 25px 24px;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
}

.profile-form-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.profile-form-fields input {
    color: var(--color-black);
}

.profile-form .btn {
    width: auto;
    height: 38px;
}

.profile-form .btn:disabled {
    background-color: #A7A8B0;
    cursor: default;
}

.profile-details-title {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.profile-notifications {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-notifications label {
    display: flex;
    gap: 16px;
}

.profile-notifications span {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    align-self: center;
}

.profile-password-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.profile-password-fields+.profile-notifications {
    margin-top: 16px;
}

@media only screen and (width < 1280px) {
    .profile-password-fields {
        grid-template-columns: 1fr;
    }
}

@media only screen and (width < 768px) {
    .profile-info {
        margin-top: 14px;
        padding: 13px 14px;
    }

    .profile-info-head {
        gap: 13px;
    }

    .profile-picture {
        width: 61px;
        height: 61px;
    }

    .profile-picture-actions>span {
        font-size: 10px;
        line-height: 14px;
    }

    .profile-details-item {
        margin-top: 17px;
        padding: 15px;
    }

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

}

/* infographics */

.infographics {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.infographics-item {
    padding: 20px 25px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid #E9E9E9;
    border-radius: 14px;
}

.infographics-item-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

@media only screen and (width < 1280px) {
    .infographics {
        grid-template-columns: 1fr;
    }
}

@media only screen and (width < 768px) {
    .infographics-item {
        padding: 10px 13px 6px 11px;
    }

    .infographics-item-title {
        font-size: 12px;
        line-height: 16px;
    }
}

/* Users table styling */
.users-table {
    table-layout: auto;
    max-width: 100%;
}

.users-table th:nth-child(2) {
    /* First Name */
    width: 150px;
    min-width: 120px;
    max-width: 200px;
}

.users-table th:nth-child(3) {
    /* Email */
    width: 250px;
    min-width: 200px;
    max-width: 300px;
}

.users-table th:nth-child(4) {
    /* Company (for super admin) */
    width: 180px;
    min-width: 150px;
    max-width: 220px;
}

.users-table th:nth-child(5) {
    /* Role */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

.users-table th:nth-child(6) {
    /* Action */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

/* For non-super admin users (no company column) */
.users-table th:nth-child(4):not([class*="company"]) {
    /* Role when no company column */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

.users-table th:nth-child(5):not([class*="action"]) {
    /* Action when no company column */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

@media only screen and (width < 1440px) {
    .users-table th:nth-child(2) {
        width: 130px;
        min-width: 110px;
        max-width: 160px;
    }

    .users-table th:nth-child(3) {
        width: 200px;
        min-width: 180px;
        max-width: 250px;
    }

    .users-table th:nth-child(4) {
        width: 150px;
        min-width: 130px;
        max-width: 180px;
    }
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.users-table {
        width: max(800px, 100%) !important;
        min-width: 800px;
    }
}

@media only screen and (width < 768px) {
    .users-table th:nth-child(2) {
        width: 120px;
        min-width: 100px;
        max-width: 140px;
    }

    .users-table th:nth-child(3) {
        width: 180px;
        min-width: 160px;
        max-width: 200px;
    }

    .table-scroll-wrapper table.users-table {
        width: max(750px, 100%) !important;
    }
}

/* task filters */

.task-page-header {
    margin-bottom: 20px;
}

.task-page-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #0E102B;
    margin: 0 0 8px 0;
}

.task-page-subtitle {
    color: #979797;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.task-title-section {
    margin-bottom: 18px;
}

.task-header-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #0E102B;
}

.task-filters-section {
    margin-bottom: 18px;
    display: flex;
    justify-content: flex-end;
}

.task-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.task-filters .btn {
    width: auto !important;
    background-color: var(--color-dark-main) !important;
    min-width: 80px;
    flex-shrink: 0;
}

@media only screen and (width < 768px) {
    .task-filters-section {
        justify-content: flex-start;
    }

    .task-filters {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
}

/* task empty state */

.task-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.task-empty-icon {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-empty-icon svg {
    opacity: 0.3;
}

.task-empty-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
    color: #0E102B;
}

.task-empty-text {
    color: #979797;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.task-empty-guide {
    background-color: #F8F9FC;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.task-empty-guide-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 24px;
    color: #0E102B;
    text-align: center;
}

.task-empty-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-empty-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.task-empty-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #2049C4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.task-empty-step-content {
    flex: 1;
}

.task-empty-step-title {
    font-weight: 600;
    font-size: 16px;
    color: #0E102B;
    margin-bottom: 4px;
}

.task-empty-step-description {
    font-size: 14px;
    color: #979797;
    line-height: 20px;
}

.task-empty-action {
    text-align: center;
}

.task-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* task table styles */

.tasks-table {
    table-layout: fixed;
    width: 100%;
}

.tasks-table th:nth-child(1) {
    /* Task */
    width: 25%;
    min-width: 200px;
}

.tasks-table th:nth-child(2) {
    /* Source */
    width: 15%;
    min-width: 120px;
}

.tasks-table th:nth-child(3) {
    /* Property */
    width: 20%;
    min-width: 150px;
}

.tasks-table th:nth-child(4) {
    /* Priority */
    width: 10%;
    min-width: 80px;
}

.tasks-table th:nth-child(5) {
    /* Status */
    width: 10%;
    min-width: 80px;
}

.tasks-table th:nth-child(6) {
    /* Created */
    width: 10%;
    min-width: 100px;
}

.tasks-table th:nth-child(7) {
    /* Actions */
    width: 20% !important;
    min-width: 200px !important;
}

.tasks-table th:last-child {
    width: 20% !important;
    min-width: 200px !important;
}

.tasks-table td:nth-child(1) {
    /* Task column */
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
}

.tasks-table td:nth-child(7) {
    /* Actions column */
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    width: 20% !important;
    min-width: 200px !important;
}

.tasks-table td:last-child {
    width: 20% !important;
    min-width: 200px !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
}

.tasks-table .table-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.tasks-table .table-action-button {
    flex-shrink: 0;
    min-width: 60px;
    max-width: none;
    white-space: nowrap;
    background-image: none !important;
    padding: 7px 12px;
    width: auto;
}

@media only screen and (width < 1024px) {
    .table-scroll-wrapper table.tasks-table {
        width: max(900px, 100%) !important;
        min-width: 900px;
    }
}

.task-link {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.task-description,
.task-meta {
    color: #979797;
}

.task-overdue {
    color: #AC3014;
    font-weight: 600;
}

/* Settings Page Styles */

/* Settings Page Header */
.settings-page-header {
    margin-top: 20px;
    margin-bottom: 32px;
}

.settings-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #0f1419;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.settings-page-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    color: #374151;
    text-decoration: none;
}

.settings-tab.active {
    color: #2049c4;
    border-bottom-color: #2049c4;
}

.settings-tab svg {
    width: 18px;
    height: 18px;
}

/* Settings Content */
.settings-content {
    min-height: 400px;
}

/* Settings Section */
.settings-section {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 24px;
}

.settings-section-header {
    margin-bottom: 24px;
}

.settings-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #0f1419;
    margin: 0 0 4px 0;
}

.settings-section-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Coming Soon State */
.settings-coming-soon {
    text-align: center;
    padding: 48px 24px;
}

.settings-coming-soon-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.settings-coming-soon-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.settings-coming-soon-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Notification Settings Specific Styles */

/* Notification Legend */
.notification-legend {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.notification-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.notification-icon.none {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-icon.email {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-icon.sms {
    background: #dcfce7;
    color: #059669;
}

.notification-icon.both {
    background: #fef3c7;
    color: #d97706;
}

/* Notification Form */
.notification-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Bulk Actions */
.notification-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.notification-bulk-actions .btn {
    font-size: 13px;
    padding: 8px 12px;
}

.notification-bulk-save .btn {
    background: #2049c4;
    color: white;
    font-weight: 600;
}

/* Properties List */
.notification-properties {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Property Card */
.notification-property-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notification-property-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Property Info */
.notification-property-info {
    flex: 1;
    min-width: 0;
}

.notification-property-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-property-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f1419;
    margin: 0;
}

.notification-property-status {
    display: flex;
    align-items: center;
}

.property-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
}

.property-status.monitoring {
    background: #dcfce7;
    color: #059669;
}

.property-status.not-monitoring {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-property-address {
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
}

.notification-property-location {
    font-size: 13px;
    color: #6b7280;
}

/* Property Settings */
.notification-property-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
}

/* Current Setting */
.notification-current-setting {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.notification-current-label {
    color: #6b7280;
    font-weight: 500;
}

.notification-current-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.notification-current-badge.none {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-current-badge.email {
    background: #dbeafe;
    color: #1d4ed8;
}

.notification-current-badge.sms {
    background: #dcfce7;
    color: #059669;
}

.notification-current-badge.both {
    background: #fef3c7;
    color: #d97706;
}

/* Notification Options */
.notification-options {
    display: flex;
    gap: 8px;
}

/* Global Notification Settings */
.notification-global-section {
    margin-bottom: 32px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.notification-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.notification-section-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Global Options (Who Gets Alerts) */
.notification-global-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.notification-global-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.notification-global-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-global-option-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.notification-global-option input[type="radio"]:checked+.notification-global-option-content {
    border-color: #2563eb;
    background: #eff6ff;
}

.notification-global-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.notification-global-icon.admin {
    background: #fef3c7;
}

.notification-global-icon.all {
    background: #dbeafe;
}

.notification-global-text h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.notification-global-text p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

/* Default Notification Options */
.notification-default-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.notification-default-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.notification-default-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-default-option-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
    height: 100%;
}

.notification-default-option input[type="radio"]:checked+.notification-default-option-content {
    border-color: #2563eb;
    background: #eff6ff;
}

.notification-default-text h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.notification-default-text p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Info Card */
.notification-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.notification-info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.notification-info-content {
    flex: 1;
}

.notification-info-content h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.notification-info-content p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.notification-info-content p:last-child {
    margin-bottom: 0;
}

.notification-info-action {
    flex-shrink: 0;
}

/* Save Section */
.notification-save-section {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.btn-primary {
    background: #2563eb;
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-large {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
}

.btn-outline {
    background: transparent;
    color: #2563eb;
    border: 1px solid #2563eb;
}

.btn-outline:hover {
    background: #2563eb;
    color: white;
}

@media (max-width: 768px) {
    .notification-global-options {
        grid-template-columns: 1fr;
    }

    .notification-default-options {
        grid-template-columns: 1fr;
    }

    .notification-info-card {
        flex-direction: column;
        text-align: center;
    }
}

.notification-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.notification-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
    min-width: 60px;
}

.notification-option-content span {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
}

.notification-option input[type="radio"]:checked+.notification-option-content {
    border-color: #2049c4;
    background: #f0f4ff;
}

.notification-option input[type="radio"]:checked+.notification-option-content span {
    color: #2049c4;
}

.notification-option:hover .notification-option-content {
    border-color: #d1d5db;
}

/* Empty State */
.notification-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.notification-empty-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.8;
}

.notification-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.notification-empty-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

.notification-empty-state .btn {
    background: #2049c4;
    color: white;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-tabs {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .settings-tab {
        border-bottom: 1px solid #e5e7eb;
        border-right: none;
    }

    .settings-tab.active {
        border-bottom-color: #e5e7eb;
        border-left: 3px solid #2049c4;
        background: #f0f4ff;
    }

    .notification-legend {
        flex-direction: column;
        gap: 12px;
    }

    .notification-property-card {
        flex-direction: column;
        gap: 16px;
    }

    .notification-property-settings {
        min-width: auto;
        width: 100%;
    }

    .notification-options {
        flex-wrap: wrap;
    }

    .notification-bulk-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}

/* Notification Styles */
.notification-container {
    position: relative;
    display: inline-block;
}

.notification-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.notification-bell:hover {
    background-color: #f3f4f6;
}

.notification-bell:focus {
    outline: none;
    background-color: #f3f4f6;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: -11px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 10px;
    min-width: 13px;
    height: 16px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    line-height: 1;
    letter-spacing: 0;
}

.notification-badge:empty {
    display: none;
}

/* Ensure the SVG icon has proper styling */
.notification-bell svg {
    transition: all 0.2s ease;
    width: 30px;
    height: auto;
}

.notification-bell:hover svg {
    stroke: #374151;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 320px;
    max-height: 400px;
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.notification-dropdown[style*="block"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Add a small arrow pointing to the bell */
.notification-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.notification-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.mark-all-read {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.mark-all-read:hover {
    background-color: #eff6ff;
}

.notification-list {
    max-height: 280px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-item:hover {
    background-color: #f9fafb;
}

.notification-item.unread {
    background-color: #eff6ff;
    border-left: 3px solid #3b82f6;
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.notification-icon.task-icon {
    background-color: #dbeafe;
    color: #3b82f6;
}

.notification-icon.complaint-icon {
    background-color: #fef3c7;
    color: #d97706;
}

.notification-icon.violation-icon {
    background-color: #fee2e2;
    color: #dc2626;
}

.notification-icon.property-icon {
    background-color: #d1fae5;
    color: #059669;
}

.notification-icon.alert-icon {
    background-color: #fde68a;
    color: #d97706;
}

.notification-icon.default-icon {
    background-color: #f3f4f6;
    color: #6b7280;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: 14px;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.notification-time {
    font-size: 12px;
    color: #6b7280;
}

.notification-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.view-all-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.view-all-link:hover {
    text-decoration: underline;
}

.loading {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.no-notifications {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.no-notifications svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Dro
pdown notification mark as read button */
.notification-actions-dropdown {
    flex-shrink: 0;
    margin-left: 8px;
}

.mark-read-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #6b7280;
    transition: all 0.2s;
}

.mark-read-btn:hover {
    background: #e5e7eb;
    color: #374151;
    border-color: #9ca3af;
}

.mark-read-btn:active {
    transform: scale(0.95);
}

/* Company Info Section Styles */
.company-info-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-input,
.form-group input,
.form-group textarea,
.form-group select {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    transition: border-color 0.2s;
}

.form-input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #4220ED;
    box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.btn,
.form-actions button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary,
.form-actions button[type="submit"] {
    background: #4220ED;
    color: white;
}

.btn-primary:hover,
.form-actions button[type="submit"]:hover {
    background: #3318d0;
}

.permission-notice {
    padding: 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 14px;
}

.company-info-display {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.info-label {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.info-value {
    color: #6b7280;
    font-size: 14px;
}

.settings-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 32px 0;
}

@media only screen and (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Flash Messages */
.flash-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.flash-notice {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.flash-alert {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.flash-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.flash-message span {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.flash-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.flash-close:hover {
    opacity: 1;
}
/* ========================================
   Accessibility Utilities
   ======================================== */

/* Skip Link for Keyboard Navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4220ED;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Visually Hidden - Screen Reader Only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Visible for Keyboard Navigation */
*:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

.alerts-details.one_column{
  grid-template-columns: repeat(1, 1fr)!important;
  /* display: none !important; */
}

/* Custom dropdown styling for filter and sort */
.custom-select.filter-dropdown,
.custom-select.sort-dropdown {
    width: auto;
    min-width: 48px;
}

.custom-select.filter-dropdown summary,
.custom-select.sort-dropdown summary {
    padding: 8px 12px;
    min-width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    background-color: #FBFBFF;
    cursor: pointer;
    transition: .3s;
}

.custom-select.filter-dropdown summary:hover,
.custom-select.sort-dropdown summary:hover {
    border-color: var(--color-dark-blue, #4220ED);
}

/* Custom monitoring status dropdown styling */
.custom-select.monitoring-status-dropdown {
    width: 100%;
    position: relative;
}

.custom-select.monitoring-status-dropdown summary {
    padding: 12px 16px;
    padding-right: 48px; /* Make room for the caret */
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-size: 14px;
    color: #111827;
}

.custom-select.monitoring-status-dropdown summary:hover,
.custom-select.monitoring-status-dropdown summary:focus {
    border-color: #3b82f6;
    outline: none;
}

.custom-select.monitoring-status-dropdown summary .selected-text {
    flex: 1;
    text-align: left;
}

.custom-select.monitoring-status-dropdown summary svg {
    position: absolute;
    right: 16px; /* Position caret 16px from the right edge */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.custom-select.monitoring-status-dropdown[open] summary svg {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select.filter-dropdown ul,
.custom-select.sort-dropdown ul,
.custom-select.monitoring-status-dropdown ul {
    min-width: 150px;
    background-color: #FBFBFF;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    z-index: 10;
}

/* Monitoring status dropdown specific styling */
.custom-select.monitoring-status-dropdown ul {
    width: 100%;
    min-width: auto;
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Position sort dropdown to the left when it's the last element */
.custom-select.sort-dropdown ul {
    left: auto;
    right: 0;
}

/* Ensure dropdown stays within viewport on smaller screens */
@media only screen and (max-width: 400px) {
    .custom-select.filter-dropdown ul,
    .custom-select.sort-dropdown ul {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 200px;
        max-width: calc(100vw - 40px);
    }
}

.custom-select.filter-dropdown ul li,
.custom-select.sort-dropdown ul li,
.custom-select.monitoring-status-dropdown ul li {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #050828;
    transition: background-color 0.2s ease;
}

/* Monitoring status dropdown items */
.custom-select.monitoring-status-dropdown ul li {
    font-size: 14px;
    color: #111827;
    padding: 12px 16px;
}

.custom-select.filter-dropdown ul li:hover,
.custom-select.sort-dropdown ul li:hover,
.custom-select.monitoring-status-dropdown ul li:hover {
    background-color: #EEF0FF;
}

.custom-select.filter-dropdown ul li:first-child,
.custom-select.sort-dropdown ul li:first-child,
.custom-select.monitoring-status-dropdown ul li:first-child {
    border-radius: 8px 8px 0 0;
}

.custom-select.filter-dropdown ul li:last-child,
.custom-select.sort-dropdown ul li:last-child,
.custom-select.monitoring-status-dropdown ul li:last-child {
    border-radius: 0 0 8px 8px;
}

/* Mobile responsive adjustments */
@media only screen and (width < 768px) {
    .dashboard-table-filters {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .dashboard-search {
        order: 1;
        width: 100%;
    }
    
    .custom-select.filter-dropdown,
    .custom-select.sort-dropdown {
        order: 2;
        flex: 1;
    }
    
    .custom-select.filter-dropdown summary,
    .custom-select.sort-dropdown summary {
        width: 100%;
        justify-content: space-between;
        padding: 12px 16px;
        height: 44px;
    }
    
    .custom-select.filter-dropdown ul,
    .custom-select.sort-dropdown ul {
        width: 100%;
        min-width: auto;
    }
}

/* Global Search Dropdown Styles */
.global-search-container {
    position: relative;
    display: inline-block;
}

.global-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-results-container {
    padding: 8px 0;
}

.search-results-section {
    margin-bottom: 8px;
}

.search-results-section:last-child {
    margin-bottom: 0;
}

.search-results-header {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #f3f4f6;
    background-color: #f9fafb;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f8fafc;
}

.search-result-icon {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-bin {
    font-size: 11px;
    color: #9ca3af;
    font-family: monospace;
}

.search-result-company {
    font-size: 11px;
    color: #3b82f6;
    margin-top: 2px;
    font-weight: 500;
}

.search-no-results {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* Responsive adjustments for global search */
@media only screen and (max-width: 768px) {
    .global-search-dropdown {
        left: -50%;
        right: -50%;
        width: 300px;
        max-width: calc(100vw - 40px);
    }
    
    .search-result-item {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .search-result-title {
        font-size: 13px;
    }
    
    .search-result-subtitle {
        font-size: 12px;
    }
}

/* Ensure search dropdown appears above other elements */
.dashboard-top-bar {
    z-index: 100;
}
/* U
ser Menu Dropdown Styles */
.user-menu-container {
    position: relative;
    display: inline-block;
}

.user-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}

.user-menu-button:hover .user-avatar-circle {
    transform: scale(1.05);
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
}

.user-dropdown-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
}

.user-dropdown-info {
    flex: 1;
}

.user-dropdown-name {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    margin-bottom: 2px;
}

.user-dropdown-email {
    font-size: 14px;
    color: #6b7280;
}

.user-dropdown-menu {
    padding: 8px 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.user-dropdown-item:hover {
    background-color: #f3f4f6;
    color: #111827;
    text-decoration: none;
}

.user-dropdown-item.logout {
    color: #dc2626;
}

.user-dropdown-item.logout:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

.user-dropdown-item svg {
    width: 16px;
    height: 16px;
    color: currentColor;
}

.user-dropdown-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 8px 0;
}

/* Notification dropdown positioning fix */
.notification-container {
    position: relative;
    margin-right: 16px;
}

.dashboard-top-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}/*
 User Profile Page Styles */
.user-profile-page {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.user-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-details h1 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.user-email {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 12px;
}

.user-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.super-admin-badge {
    background: #fef3c7;
    color: #92400e;
}

.admin-badge {
    background: #dbeafe;
    color: #1e40af;
}

.user-badge {
    background: #f3f4f6;
    color: #374151;
}

.confirmed-badge {
    background: #d1fae5;
    color: #065f46;
}

.unconfirmed-badge {
    background: #fee2e2;
    color: #991b1b;
}

.user-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.action-button {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.action-button.primary {
    background: #3b82f6;
    color: white;
}

.action-button.primary:hover {
    background: #2563eb;
    color: white;
    text-decoration: none;
}

.action-button.secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.action-button.secondary:hover {
    background: #e5e7eb;
    color: #374151 !important;
    text-decoration: none !important;
}

.action-button.danger {
    background: #dc2626;
    color: white;
}

.action-button.danger:hover {
    background: #b91c1c;
    color: white !important;
    text-decoration: none !important;
}

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

.profile-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
}

.details-grid {
    display: grid;
    gap: 16px;
}

.detail-row {
    display: grid;
    grid-template-columns: 200px 20px 1fr;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9fafb;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.detail-colon {
    color: #6b7280;
    font-weight: 600;
}

.detail-value {
    color: #111827;
    font-size: 14px;
}

@media (max-width: 768px) {
    .user-profile-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .user-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .detail-colon {
        display: none;
    }
    
    .detail-label {
        font-weight: 700;
        color: #111827;
    }
}
/* ========================================
   City Complaints Page Styles
   ======================================== */

/* Layout */
.dashboard-box.city-complaints-layout {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.city-complaints-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Dual Sidebar with Two Sections */
.complaints-sidebar {
  flex-shrink: 0;
  width: 280px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

/* Sidebar Sections */
.sidebar-section {
  margin-bottom: 32px;
}

.sidebar-section:last-of-type {
  margin-bottom: 20px;
}

.sidebar-header {
  margin-bottom: 16px;
}

.sidebar-title {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* Clear Filters Link */
.sidebar-clear-link {
  display: block;
  text-align: center;
  padding: 12px 16px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-top: 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
}

.sidebar-clear-link:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  text-decoration: none;
  color: #dc2626;
}

/* Descriptor Filter List */
.descriptor-filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Agency Filter List */
.agency-filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Custom scrollbar for filter lists */
.descriptor-filter-list::-webkit-scrollbar,
.agency-filter-list::-webkit-scrollbar {
  width: 6px;
}

.descriptor-filter-list::-webkit-scrollbar-track,
.agency-filter-list::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.descriptor-filter-list::-webkit-scrollbar-thumb,
.agency-filter-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.descriptor-filter-list::-webkit-scrollbar-thumb:hover,
.agency-filter-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Descriptor Filter Items */
.descriptor-filter-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 44px;
}

.descriptor-filter-item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  text-decoration: none;
}

.descriptor-filter-item.active {
  background: #EEF0FF;
  border-color: #4220ED;
  border-width: 2px;
  padding: 11px 13px;
}

.descriptor-filter-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.descriptor-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  order: 2;
}

.descriptor-filter-count {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  order: 1;
  min-width: 40px;
  text-align: left;
}

.descriptor-filter-item.active .descriptor-filter-label {
  font-weight: 600;
}

.descriptor-filter-item.active .descriptor-filter-count {
  color: #1f2937;
}

/* Agency Filter Items */
.agency-filter-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 44px;
}

.agency-filter-item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  text-decoration: none;
}

.agency-filter-item.active {
  background: #EEF0FF;
  border-color: #4220ED;
  border-width: 2px;
  padding: 11px 13px;
}

.agency-filter-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.agency-filter-label {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  order: 2;
}

.agency-filter-count {
  font-size: 16px;
  font-weight: 700;
  color: #6B7280;
  order: 3;
  min-width: 40px;
  text-align: right;
}

.agency-filter-item.active .agency-filter-label {
  font-weight: 600;
}

.agency-filter-item.active .agency-filter-count {
  color: #1f2937;
}

/* Main Content Area */
.city-complaints-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.city-complaints-content * {
  box-sizing: border-box;
}

/* City Complaints Dashboard Table Head */
.city-complaints-content .dashboard-table-head {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* City Complaints Filter Form */
.city-complaints-content .dashboard-filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
}

.city-complaints-content .filter-group {
  flex: 0 1 auto;
  min-width: 0;
}

.city-complaints-content .filter-select,
.city-complaints-content .filter-date,
.city-complaints-content .filter-search {
  max-width: 100%;
  box-sizing: border-box;
}

/* City Complaints Table Wrapper */
.city-complaints-content .table-scroll-wrapper,
.city-complaints-content .dashboard-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* City Complaints Table Styles */
.city-complaints-table {
  table-layout: fixed;
  width: 100%;
  min-width: 900px;
}

.city-complaints-table .checkbox-col {
  width: 50px;
}

.city-complaints-table .address-col {
  width: 200px;
}

.city-complaints-table .company-col {
  width: 120px;
}

.city-complaints-table .agency-col {
  width: 100px;
}

.city-complaints-table .complaint-type-col {
  width: 180px;
}

.city-complaints-table .descriptor-col {
  width: 180px;
}

.city-complaints-table .status-col {
  width: 130px;
}

.city-complaints-table .created-date-col {
  width: 110px;
}

.city-complaints-table .action-col {
  width: 80px;
  text-align: center;
}

/* Address and descriptor column truncation */
.city-complaints-table .address-col,
.city-complaints-table .descriptor-col,
.city-complaints-table .complaint-type-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* City Complaint Status Badge Styles */
.city-complaints-table .status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.city-complaints-table .status-badge.status-open,
.city-complaints-table .status-badge.status-pending {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.city-complaints-table .status-badge.status-closed,
.city-complaints-table .status-badge.status-resolved {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.city-complaints-table .status-badge.status-in-progress {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.city-complaints-table .status-badge.status-unknown {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* City Complaints Filter Form Styles */
.city-complaints-content .dashboard-filters-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.city-complaints-content .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-complaints-content .date-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-complaints-content .date-separator {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.city-complaints-content .filter-select,
.city-complaints-content .filter-date,
.city-complaints-content .filter-search {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  background-color: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 150px;
}

.city-complaints-content .filter-search {
  min-width: 200px;
}

.city-complaints-content .filter-date {
  min-width: 140px;
}

.city-complaints-content .filter-select:focus,
.city-complaints-content .filter-date:focus,
.city-complaints-content .filter-search:focus {
  outline: none;
  border-color: #4220ED;
  box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

.city-complaints-content .filter-submit-btn {
  padding: 8px 16px;
  background-color: #4220ED;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.city-complaints-content .filter-submit-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.city-complaints-content .filter-submit-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.city-complaints-content .filter-clear-btn {
  padding: 8px 16px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}

.city-complaints-content .filter-clear-btn:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
  text-decoration: none;
}

.city-complaints-content .filter-clear-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* City Complaints Empty State */
.city-complaints-content .empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 20px 0;
}

.city-complaints-content .empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.city-complaints-content .empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.city-complaints-content .empty-state-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.city-complaints-content .empty-state-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4220ED;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.city-complaints-content .empty-state-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.city-complaints-content .empty-state-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Responsive Design for City Complaints */
@media (max-width: 1200px) {
  .city-complaints-layout {
    flex-direction: column;
    overflow-x: hidden;
  }
  
  .complaints-sidebar {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .descriptor-filter-list,
  .agency-filter-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    max-height: none;
    overflow-y: visible;
  }
  
  .city-complaints-content {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  
  .city-complaints-content .dashboard-filters-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  
  .city-complaints-content .filter-group,
  .city-complaints-content .date-range-group {
    width: 100%;
  }
  
  .city-complaints-content .filter-select,
  .city-complaints-content .filter-date,
  .city-complaints-content .filter-search {
    width: 100%;
    max-width: 100%;
  }
  
  .city-complaints-content .filter-submit-btn,
  .city-complaints-content .filter-clear-btn {
    width: 100%;
  }
  
  /* Make table scrollable horizontally on smaller screens */
  .city-complaints-content .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .city-complaints-table {
    min-width: 800px;
  }
}

@media (max-width: 768px) {
  .city-complaints-layout {
    padding: 0;
    gap: 16px;
  }
  
  .complaints-sidebar {
    padding: 16px;
    margin: 0;
  }
  
  .descriptor-filter-list,
  .agency-filter-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
  }
  
  .descriptor-filter-item,
  .agency-filter-item {
    padding: 10px 12px;
    min-height: 44px;
  }
  
  .descriptor-filter-label,
  .agency-filter-label {
    font-size: 12px;
  }
  
  .descriptor-filter-count,
  .agency-filter-count {
    font-size: 14px;
  }
  
  .city-complaints-content {
    padding: 0;
    overflow-x: auto;
  }
  
  .city-complaints-content .dashboard-table-wrapper {
    overflow-x: auto;
  }
  
  .city-complaints-table {
    min-width: 900px;
  }
  
  .city-complaints-table .address-col {
    width: 180px;
  }
  
  .city-complaints-table .descriptor-col {
    width: 150px;
  }
}

@media (max-width: 480px) {
  .city-complaints-layout {
    gap: 12px;
  }
  
  .complaints-sidebar {
    padding: 12px;
  }
  
  .descriptor-filter-list,
  .agency-filter-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .sidebar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .city-complaints-content .date-range-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .city-complaints-content .date-separator {
    display: none;
  }
  
  .city-complaints-content .filter-select,
  .city-complaints-content .filter-date,
  .city-complaints-content .filter-search {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .city-complaints-table {
    min-width: 800px;
  }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  .descriptor-filter-item,
  .agency-filter-item,
  .city-complaints-content .filter-submit-btn,
  .city-complaints-content .filter-clear-btn,
  .city-complaints-content .empty-state-btn {
    transition: none;
  }
  
  .city-complaints-content .filter-submit-btn:hover,
  .city-complaints-content .empty-state-btn:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .descriptor-filter-item,
  .agency-filter-item {
    border-width: 2px;
  }
  
  .descriptor-filter-item.active,
  .agency-filter-item.active {
    border-width: 3px;
  }
  
  .city-complaints-table .status-badge {
    border-width: 2px;
  }
}

/* Focus visible for keyboard navigation */
.descriptor-filter-item:focus-visible,
.agency-filter-item:focus-visible,
.sidebar-clear-link:focus-visible,
.city-complaints-content .filter-submit-btn:focus-visible,
.city-complaints-content .filter-clear-btn:focus-visible,
.city-complaints-content .empty-state-btn:focus-visible {
  outline: 3px solid #4220ED;
  outline-offset: 2px;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .descriptor-filter-item,
  .agency-filter-item {
    min-height: 48px;
    padding: 12px 14px;
  }
  
  .city-complaints-content .filter-submit-btn,
  .city-complaints-content .filter-clear-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
}


/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Skip to content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0B0D23;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #4220ED;
    outline-offset: 2px;
}

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

/* Focus visible styles for better keyboard navigation */
*:focus-visible {
    outline: 3px solid #4220ED;
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
}

/* ========================================
   Super Admin Companies Status Badges
   ======================================== */

/* Base status badge styling */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Active subscription status */
.status-badge.status-active {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Trialing subscription status */
.status-badge.status-trialing {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Canceled subscription status */
.status-badge.status-canceled {
  background-color: #fed7d7;
  color: #742a2a;
  border: 1px solid #fca5a5;
}

/* Past due subscription status */
.status-badge.status-past_due {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* No subscription status */
.status-badge.status-no-subscription {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* Hover effect for status badges (optional, for interactive badges) */
.status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  .status-badge {
    border-width: 2px;
    font-weight: 700;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .status-badge {
    transition: none;
  }
  
  .status-badge:hover {
    transform: none;
  }
}

/* ========================================
   Super Admin Companies Actions Dropdown
   ======================================== */

/* Dropdown container */
.dropdown-container {
  position: relative;
  display: inline-block;
}

/* Actions dropdown button */
.actions-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.actions-dropdown-btn:hover {
  background-color: #e9ecef;
  border-color: #ced4da;
}

.actions-dropdown-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

.actions-dropdown-btn svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.actions-dropdown-btn.active svg {
  transform: rotate(180deg);
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999999;
  overflow: hidden;
  animation: dropdownFadeIn 0.15s ease;
}

.dropdown-menu.show {
  display: block;
}

/* Dropdown animation */
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown items */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #374151;
  text-decoration: none;
}

.dropdown-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

/* Dropdown item variants */
.dropdown-item.danger {
  color: #dc2626;
}

.dropdown-item.danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.dropdown-item.success {
  color: #16a34a;
}

.dropdown-item.success:hover {
  background-color: #f0fdf4;
  color: #16a34a;
}

/* Dropdown divider */
.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 4px 0;
}

/* Ensure dropdown stays within viewport */
.dropdown-container:last-child .dropdown-menu,
.action-col .dropdown-container .dropdown-menu {
  right: 0;
  left: auto;
}

/* Adjust dropdown position if near viewport edge */
@media (max-width: 768px) {
  .dropdown-menu {
    min-width: 160px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  
  @keyframes dropdownFadeIn {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu {
    animation: none;
  }
  
  .actions-dropdown-btn svg {
    transition: none;
  }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  .actions-dropdown-btn {
    border-width: 2px;
  }
  
  .dropdown-menu {
    border-width: 2px;
  }
  
  .dropdown-item {
    border-bottom: 1px solid #dee2e6;
  }
  
  .dropdown-item:last-child {
    border-bottom: none;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .actions-dropdown-btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  
  .dropdown-item {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* ========================================
   Super Admin Companies Search Styles
   ======================================== */

/* Dashboard search form */
.dashboard-search {
  position: relative;
  display: inline-block;
}

/* Search input field */
.dashboard-search .table-search {
  width: 270px;
  padding: 11px 11px 11px 35px;
  border: 1px solid #E9E9E9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #050828;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
  outline: none;
}

/* Search input placeholder */
.dashboard-search .table-search::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

/* Search input focus state */
.dashboard-search .table-search:focus {
  border-color: #4220ED;
  box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

/* Search icon positioning */
.dashboard-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Search results info */
.search-results-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
}

.search-results-info .search-count {
  font-weight: 600;
  color: #1f2937;
}

.search-results-info .search-term {
  color: #6b7280;
  font-style: italic;
}

.search-results-info .clear-search {
  margin-left: auto;
  padding: 4px 12px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
}

.search-results-info .clear-search:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  text-decoration: none;
}

/* Empty state for search results */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 0;
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.empty-state-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.empty-state-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4220ED;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.empty-state-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #ffffff;
}

.empty-state-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Responsive empty state styles */
@media (max-width: 768px) {
  .empty-state {
    padding: 40px 16px;
  }
  
  .empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }
  
  .empty-state-title {
    font-size: 18px;
  }
  
  .empty-state-message {
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  .empty-state-btn {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .empty-state {
    padding: 32px 12px;
  }
  
  .empty-state-icon {
    font-size: 40px;
  }
  
  .empty-state-title {
    font-size: 16px;
  }
  
  .empty-state-message {
    font-size: 12px;
  }
}

/* Loading state */
#companies-table-container {
  transition: opacity 0.2s ease;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
  .dashboard-search .table-search {
    width: 100%;
    min-width: 200px;
  }
  
  .dashboard-table-filters {
    width: 100%;
  }
  
  .dashboard-search {
    width: 100%;
  }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  .dashboard-search .table-search {
    border-width: 2px;
  }
  
  .dashboard-search .table-search:focus {
    border-width: 3px;
  }
  
  .search-results-info {
    border-width: 2px;
  }
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dashboard-search .table-search,
  .empty-state-btn,
  #companies-table-container {
    transition: none;
  }
  
  .empty-state-btn:hover {
    transform: none;
  }
}

/* Focus visible for keyboard navigation */
.dashboard-search .table-search:focus-visible {
  outline: 3px solid #4220ED;
  outline-offset: 2px;
}

.search-results-info .clear-search:focus-visible,
.empty-state-btn:focus-visible {
  outline: 3px solid #4220ED;
  outline-offset: 2px;
}

/* ========================================
   Super Admin Companies Table Styles
   ======================================== */

/* Companies table layout */
.companies-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1000px;
}

/* Column widths */
.companies-table .checkbox-col {
  width: 50px;
}

.companies-table .company-name-col {
  width: 220px;
}

.companies-table .users-col {
  width: 80px;
  text-align: center;
}

.companies-table .properties-col {
  width: 120px;
  text-align: center;
}

.companies-table .subscription-col {
  width: 150px;
}

.companies-table .joined-col {
  width: 120px;
}

.companies-table .action-col {
  width: 100px;
  text-align: center;
}

/* Company info styling */
.company-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.company-info strong {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-info .company-id {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
}

/* Table cell alignment */
.companies-table tbody td {
  vertical-align: middle;
}

/* Action column needs visible overflow for dropdown */
.companies-table .action-col {
  overflow: visible !important;
}

.companies-table tbody tr {
  position: relative;
}

/* Responsive table wrapper */
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Allow dropdowns to overflow the table wrapper */
.dashboard-table-wrapper:has(.companies-table) .table-scroll-wrapper {
  overflow: visible;
}

@media only screen and (max-width: 1024px) {
  .dashboard-table-wrapper:has(.companies-table) .table-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: visible;
  }
}

/* Responsive adjustments for companies table */
@media (max-width: 1200px) {
  .companies-table {
    min-width: 900px;
  }
  
  .companies-table .company-name-col {
    width: 180px;
  }
  
  .companies-table .subscription-col {
    width: 130px;
  }
}

@media (max-width: 768px) {
  .companies-table {
    min-width: 800px;
  }
  
  .companies-table .company-name-col {
    width: 160px;
  }
  
  .companies-table .properties-col {
    width: 100px;
  }
  
  .companies-table .subscription-col {
    width: 120px;
  }
  
  .companies-table .joined-col {
    width: 100px;
  }
}

/* ========================================
   Super Admin Companies Responsive Design
   ======================================== */

/* ========================================
   Desktop Styles (>= 1280px)
   ======================================== */
@media only screen and (min-width: 1280px) {
  /* Optimal column widths for desktop */
  .companies-table {
    min-width: 1000px;
  }
  
  .companies-table .checkbox-col {
    width: 50px;
  }
  
  .companies-table .company-name-col {
    width: 250px;
  }
  
  .companies-table .users-col {
    width: 90px;
  }
  
  .companies-table .properties-col {
    width: 130px;
  }
  
  .companies-table .subscription-col {
    width: 180px;
  }
  
  .companies-table .joined-col {
    width: 120px;
  }
  
  .companies-table .action-col {
    width: 120px;
  }
  
  /* Ensure proper spacing */
  .companies-table th,
  .companies-table td {
    padding: 12px 16px;
  }
  
  /* Position dropdowns correctly on desktop */
  .companies-table .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 180px;
  }
  
  /* Ensure dropdown stays within viewport */
  .companies-table .action-col .dropdown-container {
    position: relative;
  }
  
  /* Dashboard table filters layout */
  .dashboard-table-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  
  /* Search input optimal width */
  .dashboard-search .table-search {
    width: 300px;
  }
  
  /* Page header spacing */
  .super-admin-companies {
    padding: 24px 32px;
  }
  
  .page-header {
    margin-bottom: 32px;
  }
}

/* ========================================
   Tablet Styles (768px - 1279px)
   ======================================== */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
  /* Adjust column widths proportionally */
  .companies-table {
    min-width: 900px;
  }
  
  .companies-table .checkbox-col {
    width: 45px;
  }
  
  .companies-table .company-name-col {
    width: 200px;
  }
  
  .companies-table .users-col {
    width: 75px;
  }
  
  .companies-table .properties-col {
    width: 110px;
  }
  
  .companies-table .subscription-col {
    width: 140px;
  }
  
  .companies-table .joined-col {
    width: 110px;
  }
  
  .companies-table .action-col {
    width: 100px;
  }
  
  /* Enable horizontal scroll if needed */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Adjust padding for tablet */
  .companies-table th,
  .companies-table td {
    padding: 10px 12px;
  }
  
  /* Stack filters on smaller tablets */
  @media only screen and (max-width: 1024px) {
    .dashboard-table-filters {
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .dashboard-search {
      order: 1;
      flex: 1 1 100%;
    }
    
    .dashboard-search .table-search {
      width: 100%;
    }
  }
  
  /* Dropdown positioning for tablet */
  .companies-table .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 160px;
  }
  
  /* Adjust page padding */
  .super-admin-companies {
    padding: 20px 24px;
  }
  
  /* Reduce header size */
  .page-header h1 {
    font-size: 2rem;
  }
  
  .page-header p {
    font-size: 1rem;
  }
  
  /* Adjust company info font sizes */
  .company-info strong {
    font-size: 13px;
  }
  
  .company-info .company-id {
    font-size: 11px;
  }
  
  /* Adjust status badge size */
  .status-badge {
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* ========================================
   Mobile Styles (< 768px)
   ======================================== */
@media only screen and (max-width: 767px) {
  /* Enable horizontal scroll for table */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  
  /* Set minimum table width */
  .companies-table {
    min-width: 800px;
  }
  
  /* Adjust column widths for mobile */
  .companies-table .checkbox-col {
    width: 40px;
  }
  
  .companies-table .company-name-col {
    width: 180px;
  }
  
  .companies-table .users-col {
    width: 70px;
  }
  
  .companies-table .properties-col {
    width: 100px;
  }
  
  .companies-table .subscription-col {
    width: 120px;
  }
  
  .companies-table .joined-col {
    width: 100px;
  }
  
  .companies-table .action-col {
    width: 90px;
  }
  
  /* Reduce padding for mobile */
  .companies-table th,
  .companies-table td {
    padding: 8px 10px;
  }
  
  /* Stack search and filters vertically */
  .dashboard-table-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .dashboard-table-head > span {
    width: 100%;
  }
  
  .dashboard-table-filters {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Make search full-width */
  .dashboard-search {
    width: 100%;
  }
  
  .dashboard-search .table-search {
    width: 100%;
    min-width: auto;
  }
  
  /* Make buttons full-width */
  .add-new-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Simplify pagination layout */
  .pagination {
    flex-direction: column;
    gap: 16px;
    align-items: stretch !important;
  }
  
  .pagination-indicator {
    text-align: center;
    order: 1;
  }
  
  .pagination-items {
    order: 2;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .pagination-item {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  
  .pagination-btns {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  
  .pagination-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
  }
  
  /* Adjust page padding for mobile */
  .super-admin-companies {
    padding: 16px;
  }
  
  /* Reduce header size for mobile */
  .page-header {
    margin-bottom: 20px;
  }
  
  .page-header h1 {
    font-size: 1.75rem;
  }
  
  .page-header p {
    font-size: 0.9rem;
  }
  
  /* Adjust dashboard box padding */
  .dashboard-box {
    padding: 12px;
  }
  
  .dashboard-table-wrapper {
    padding: 12px;
  }
  
  /* Adjust company info for mobile */
  .company-info strong {
    font-size: 12px;
  }
  
  .company-info .company-id {
    font-size: 10px;
  }
  
  /* Adjust status badge for mobile */
  .status-badge {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 0.3px;
  }
  
  /* Adjust dropdown for mobile */
  .actions-dropdown-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .actions-dropdown-btn svg {
    width: 10px;
    height: 10px;
  }
  
  .dropdown-menu {
    min-width: 150px;
    font-size: 12px;
  }
  
  .dropdown-item {
    padding: 10px 14px;
    font-size: 12px;
  }
  
  /* Adjust search results info for mobile */
  .search-results-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    font-size: 12px;
  }
  
  .search-results-info .clear-search {
    align-self: flex-end;
  }
  
  /* Adjust empty state for mobile */
  .empty-state {
    padding: 40px 16px;
  }
  
  .empty-state-icon {
    font-size: 48px;
  }
  
  .empty-state-title {
    font-size: 18px;
  }
  
  .empty-state-message {
    font-size: 13px;
  }
  
  .empty-state-btn {
    width: 100%;
    padding: 12px 20px;
  }
}

/* ========================================
   Extra Small Mobile (< 480px)
   ======================================== */
@media only screen and (max-width: 479px) {
  /* Further reduce table minimum width */
  .companies-table {
    min-width: 700px;
  }
  
  /* Reduce column widths further */
  .companies-table .company-name-col {
    width: 160px;
  }
  
  .companies-table .subscription-col {
    width: 110px;
  }
  
  /* Reduce padding even more */
  .companies-table th,
  .companies-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  /* Adjust page padding */
  .super-admin-companies {
    padding: 12px;
  }
  
  /* Reduce header size */
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .page-header p {
    font-size: 0.85rem;
  }
  
  /* Adjust dashboard box */
  .dashboard-box {
    padding: 8px;
  }
  
  .dashboard-table-wrapper {
    padding: 8px;
  }
  
  /* Adjust table head title */
  .dashboard-table-head > span {
    font-size: 16px;
  }
  
  /* Adjust pagination for extra small screens */
  .pagination-item {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .pagination-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  /* Hide pagination text on very small screens */
  .pagination-btn span {
    display: none;
  }
  
  .pagination-btn svg {
    margin: 0;
  }
}

/* ========================================
   Landscape Mobile Optimization
   ======================================== */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  /* Optimize for landscape orientation */
  .page-header {
    margin-bottom: 16px;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }
  
  .page-header p {
    font-size: 0.85rem;
  }
  
  .dashboard-table-head {
    gap: 8px;
  }
  
  .companies-table th,
  .companies-table td {
    padding: 6px 8px;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  /* Hide interactive elements */
  .dashboard-table-filters,
  .checkbox-col,
  .action-col,
  .pagination,
  .actions-dropdown-btn,
  .dropdown-menu {
    display: none !important;
  }
  
  /* Optimize table for printing */
  .companies-table {
    width: 100%;
    min-width: auto;
  }
  
  .table-scroll-wrapper {
    overflow: visible;
  }
  
  /* Adjust colors for print */
  .status-badge {
    border: 1px solid #000;
    background: transparent !important;
  }
  
  /* Page breaks */
  .companies-table tr {
    page-break-inside: avoid;
  }
  
  .page-header {
    page-break-after: avoid;
  }
}

/* ========================================
   Accessibility: Touch Target Sizes
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Ensure minimum touch target size of 44x44px */
  .companies-table .checkbox-col label {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .actions-dropdown-btn {
    min-height: 44px;
    padding: 12px 14px;
  }
  
  .dropdown-item {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  .pagination-item {
    min-width: 44px;
    min-height: 44px;
  }
  
  .pagination-btn {
    min-height: 44px;
  }
  
  /* Increase spacing for touch devices */
  .dashboard-table-filters {
    gap: 12px;
  }
}

/* ========================================
   Accessibility: Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .companies-table tr,
  .dropdown-menu,
  .actions-dropdown-btn,
  .pagination-item,
  .pagination-btn,
  .status-badge {
    transition: none !important;
    animation: none !important;
  }
  
  .dropdown-menu {
    animation: none;
  }
  
  .actions-dropdown-btn svg {
    transition: none;
  }
}

/* ========================================
   Accessibility: High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
  .companies-table {
    border: 2px solid currentColor;
  }
  
  .companies-table th,
  .companies-table td {
    border: 1px solid currentColor;
  }
  
  .status-badge {
    border-width: 2px;
    font-weight: 700;
  }
  
  .actions-dropdown-btn {
    border-width: 2px;
  }
  
  .dropdown-menu {
    border-width: 2px;
  }
}

/* ========================================
   Dark Mode Support (Future Enhancement)
   ======================================== */
@media (prefers-color-scheme: dark) {
  /* Placeholder for dark mode styles */
  /* Can be implemented in future iterations */
}

/* ========================================
   Notification System
   ======================================== */

/* Notification Container */
#notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  pointer-events: none;
}

/* Base Notification Styles */
.notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  pointer-events: auto;
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  min-width: 300px;
  max-width: 400px;
  word-wrap: break-word;
}

/* Show state - slide in */
.notification.show {
  transform: translateX(0);
  opacity: 1;
}

/* Notification Message */
.notification-message {
  flex: 1;
  margin-right: 8px;
}

/* Close Button */
.notification-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  opacity: 0.8;
}

.notification-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.2);
}

.notification-close:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Success Variant (Green) */
.notification-success {
  background-color: #27ae60;
  border-left: 4px solid #1e8449;
}

/* Error Variant (Red) */
.notification-error {
  background-color: #e74c3c;
  border-left: 4px solid #c0392b;
}

/* Info Variant (Blue) */
.notification-info {
  background-color: #3b82f6;
  border-left: 4px solid #2563eb;
}

/* Warning Variant (Orange) - Optional */
.notification-warning {
  background-color: #f39c12;
  border-left: 4px solid #d68910;
}

/* ========================================
   Notification Responsive Styles
   ======================================== */

/* Tablet and below */
@media (max-width: 768px) {
  #notification-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .notification {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .notification {
    padding: 12px 14px;
    font-size: 13px;
  }
  
  .notification-close {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

/* ========================================
   Notification Accessibility
   ======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .notification {
    transition: opacity 0.1s ease;
    transform: translateX(0);
  }
  
  .notification:not(.show) {
    opacity: 0;
  }
  
  .notification.show {
    opacity: 1;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .notification {
    border: 2px solid currentColor;
    box-shadow: none;
  }
  
  .notification-close {
    border: 1px solid currentColor;
  }
}

/* Dashboard Welcome Section with Company Info */
.dashboard-welcome-section {
  padding: 16px 0;
  margin-right: auto;
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  color: #0E102B;
  margin: 0 0 12px 0;
  line-height: 1.2;
  font-family: 'DM Sans', sans-serif;
}

.company-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
  color: #65666E;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #65666E;
  font-weight: 500;
}

.contact-item svg {
  color: #4220ED;
  flex-shrink: 0;
}

.breadcrumbs-with-contact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: inherit;
}

/* Responsive design for welcome section */
@media only screen and (max-width: 1024px) {
  .welcome-title {
    font-size: 28px;
  }

  .company-contact-info {
    gap: 16px;
  }

  .contact-item {
    font-size: 13px;
  }
}

@media only screen and (max-width: 768px) {
  .welcome-title {
    font-size: 24px;
  }

  .company-contact-info {
    flex-direction: column;
    gap: 8px;
  }

  .contact-item {
    font-size: 12px;
  }

  .dashboard-welcome-section {
    padding: 12px 0;
  }
}

/* ========================================
   Hearing Result column (property & oath tables)
   ======================================== */

.hearing-result-col {
  width: 130px;
  white-space: nowrap;
}

/* result-badge styles (mirrors oath_hearings index inline styles
   so they work in the property alerts table too) */
.result-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.result-badge.guilty {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.result-badge.not-guilty {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.result-badge.dismissed {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.result-badge.default {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.result-badge.settled {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.result-badge.withdrawn {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.result-badge.in-default {
  background-color: #fed7aa;
  color: #9a3412;
  border: 1px solid #fdba74;
}
/* ============================================
   Enhanced Dashboard Styles
   ============================================ */

/* CSS Custom Properties */
:root {
    --dashboard-spacing-xs: 8px;
    --dashboard-spacing-sm: 12px;
    --dashboard-spacing-md: 16px;
    --dashboard-spacing-lg: 24px;
    --dashboard-spacing-xl: 32px;

    --dashboard-border-radius-sm: 8px;
    --dashboard-border-radius-md: 12px;
    --dashboard-border-radius-lg: 16px;

    /* Simplified color palette - use sparingly for status only */
    --dashboard-color-critical: #DC2626;
    --dashboard-color-warning: #F59E0B;
    --dashboard-color-info: #3B82F6;
    --dashboard-color-success: #10B981;

    /* Neutral colors for structure */
    --dashboard-border-color: #E5E7EB;
    --dashboard-bg-widget: #FFFFFF;
    --dashboard-bg-subtle: #F9FAFB;
    --dashboard-text-primary: #111827;
    --dashboard-text-secondary: #6B7280;
    --dashboard-text-tertiary: #9CA3AF;

    /* Refined shadows */
    --dashboard-shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    --dashboard-shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    --dashboard-shadow-hover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);

    --dashboard-transition: all 0.2s ease;
}

/* ============================================
   Dashboard Enhanced Wrapper
   ============================================ */

.dashboard-enhanced {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dashboard-spacing-lg);
    padding-bottom: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
}

.dashboard-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin: 0;
}

.dashboard-filters {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-md);
}

.refresh-btn {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dashboard-text-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--dashboard-border-radius-sm);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: var(--dashboard-transition);
}

.refresh-btn:hover {
    background-color: #374151;
    color: #FFFFFF !important;
    box-shadow: var(--dashboard-shadow-sm);
}

.refresh-btn.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

.refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

.refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner element for loading state */
.refresh-btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.last-updated {
    font-size: 12px;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
}

/* ============================================
   Dashboard Info Banner
   ============================================ */

.dashboard-info-banner {
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: var(--dashboard-border-radius-md);
    padding: var(--dashboard-spacing-md) var(--dashboard-spacing-lg);
    margin-bottom: var(--dashboard-spacing-lg);
}

.dashboard-info-banner-content {
    display: flex;
    align-items: flex-start;
    gap: var(--dashboard-spacing-md);
}

.dashboard-info-banner-icon {
    flex-shrink: 0;
    color: var(--dashboard-color-info);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.dashboard-info-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dashboard-text-secondary);
}

.dashboard-info-banner-text strong {
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.dashboard-info-link {
    color: var(--dashboard-color-info);
    text-decoration: underline;
    font-weight: 600;
    transition: var(--dashboard-transition);
}

.dashboard-info-link:hover {
    color: #2563EB;
    text-decoration: none;
}

.dashboard-info-link:focus {
    outline: 2px solid var(--dashboard-color-info);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mobile responsiveness for info banner */
@media only screen and (max-width: 767px) {
    .dashboard-info-banner {
        padding: var(--dashboard-spacing-sm) var(--dashboard-spacing-md);
    }

    .dashboard-info-banner-content {
        gap: var(--dashboard-spacing-sm);
    }

    .dashboard-info-banner-icon {
        width: 20px;
        height: 20px;
    }

    .dashboard-info-banner-icon svg {
        width: 18px;
        height: 18px;
    }

    .dashboard-info-banner-text {
        font-size: 13px;
    }
}

/* ============================================
   Metrics Grid
   ============================================ */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--dashboard-spacing-lg);
    margin-bottom: var(--dashboard-spacing-xl);
}

/* Tablet (768px - 1023px) - 3 columns */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dashboard-spacing-md);
    }

    .metric-card {
        padding: 20px;
    }
}

/* Mobile (480px - 767px) - 2 columns */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--dashboard-spacing-sm);
    }

    .metric-card {
        padding: var(--dashboard-spacing-md);
    }
}

/* Small Mobile (< 480px) - 1 column */
@media only screen and (max-width: 479px) {
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--dashboard-spacing-sm);
    }

    .metric-card {
        padding: var(--dashboard-spacing-md);
    }
}

/* ============================================
   Customer View Metrics Grid (4 cards instead of 6)
   ============================================ */

.metrics-grid-customer {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet - 2 columns for customer view */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .metrics-grid-customer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 2 columns for customer view */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .metrics-grid-customer {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Mobile - 1 column for customer view */
@media only screen and (max-width: 479px) {
    .metrics-grid-customer {
        grid-template-columns: 1fr;
    }
}

/* Larger metric values for customer view */
.metrics-grid-customer .metric-value {
    font-size: 48px;
    font-weight: 700;
}

.metrics-grid-customer .metric-card {
    padding: 32px;
    min-height: 160px;
}

.metrics-grid-customer .metric-title {
    font-size: 15px;
    font-weight: 600;
}

/* ============================================
   Metric Cards
   ============================================ */

.metric-card {
    position: relative;
    padding: 24px;
    background-color: var(--dashboard-bg-widget);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-md);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-md);
    transition: var(--dashboard-transition);
    overflow: hidden;
    min-height: 140px;
}

.metric-card:hover {
    border-color: var(--dashboard-text-secondary);
    box-shadow: var(--dashboard-shadow-hover);
    transform: translateY(-2px);
}

/* Only use color for critical status indicators */
.metric-card-red .metric-value {
    color: var(--dashboard-color-critical);
}

.metric-card-yellow .metric-value {
    color: var(--dashboard-color-warning);
}

.metric-card-orange .metric-value {
    color: var(--dashboard-color-warning);
}

.metric-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dashboard-spacing-xs);
}

.metric-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dashboard-text-secondary);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: var(--dashboard-text-tertiary);
    line-height: 1.3;
}

.metric-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.metric-change.up {
    color: var(--dashboard-color-success);
    background-color: #F0FDF4;
}

.metric-change.down {
    color: var(--dashboard-color-critical);
    background-color: #FEF2F2;
}

.metric-change.neutral {
    color: var(--dashboard-text-tertiary);
    background-color: var(--dashboard-bg-subtle);
}

.metric-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    line-height: 1.2;
    transition: opacity 150ms ease-out;
}

/* Fade transition for metric value updates */
.metric-value.updating {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.metric-value.updated {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

/* Fade transition for metric change updates */
.metric-change.updating {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.metric-change.updated {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

.metric-sub-stat {
    font-size: 13px;
    font-weight: 600;
    color: #4220ED;
    margin-top: -2px;
    margin-bottom: 2px;
    line-height: 1.3;
}

.metric-sub-stat-label {
    font-weight: 400;
    opacity: 0.85;
}

.metric-sub-stat-value {
    font-weight: 700;
    margin-left: 2px;
}

.metric-footer {
    font-size: 12px;
    color: var(--dashboard-text-tertiary);
}

.metric-comparison {
    opacity: 0.8;
}

/* ============================================
   Dashboard Grid Layout
   ============================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    /* Desktop: 24px gap between columns */
}

.dashboard-column-left,
.dashboard-column-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Desktop: 24px gap between widgets */
}

/* Customer view - single column for cleaner layout */
.dashboard-grid-customer {
    grid-template-columns: 1fr;
    max-width: 1200px;
}

.dashboard-grid-customer .dashboard-column-left {
    gap: 32px;
}

.dashboard-grid-customer .dashboard-column-right {
    gap: 32px;
}

/* ============================================
   Widget Components
   ============================================ */

.widget {
    background-color: var(--dashboard-bg-widget);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-md);
    padding: 24px;
    box-shadow: var(--dashboard-shadow-sm);
    transition: var(--dashboard-transition);
    position: relative;
}

.widget:hover {
    box-shadow: var(--dashboard-shadow-hover);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dashboard-spacing-md);
    padding-bottom: var(--dashboard-spacing-sm);
    border-bottom: 1px solid var(--dashboard-border-color);
    gap: var(--dashboard-spacing-sm);
}

.widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin: 0;
    flex-shrink: 0;
}

.widget-controls {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
    flex-shrink: 0;
    /* Prevent controls from shrinking */
}

/* Widget header count badges and labels */
.alert-count,
.property-count,
.task-total,
.activity-count,
.hearing-count {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: var(--dashboard-bg-subtle);
    color: var(--dashboard-text-secondary);
}

.widget-content {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-sm);
}

.widget-empty {
    padding: var(--dashboard-spacing-xl);
    text-align: center;
    color: var(--dashboard-text-secondary);
    font-size: 14px;
}

.widget-empty svg {
    margin: 0 auto var(--dashboard-spacing-md);
    opacity: 0.3;
}

/* ============================================
   Trend Chart Widget
   ============================================ */

.trend-chart-widget {
    min-height: 400px;
}

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    padding: var(--dashboard-spacing-sm);
}

.chart-canvas {
    max-height: 350px;
}

#trendChart {
    width: 100% !important;
    height: 350px !important;
}

/* Chart legend positioning and styling */
.trend-chart-widget .chart-container {
    padding-bottom: 20px;
    /* Add space for legend below chart */
}

/* Ensure legend has proper spacing */
.trend-chart-widget canvas {
    margin-bottom: 16px;
}

.time-period-filter {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
}

.time-period-filter label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dashboard-text-secondary);
}

.time-period-filter select {
    padding: 8px 12px;
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    color: var(--dashboard-text-primary);
    background-color: #FFFFFF;
    cursor: pointer;
    transition: var(--dashboard-transition);
}

.time-period-filter select:hover {
    border-color: var(--dashboard-text-secondary);
}

.time-period-filter select:focus {
    outline: none;
    border-color: var(--dashboard-color-info);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   Priority Alerts Widget
   ============================================ */

.priority-alerts-widget .widget-content {
    gap: var(--dashboard-spacing-xs);
}

.alert-item {
    padding: var(--dashboard-spacing-sm);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    background-color: #FFFFFF;
    transition: var(--dashboard-transition);
    cursor: pointer;
}

.alert-item:hover {
    box-shadow: var(--dashboard-shadow-sm);
    background-color: var(--dashboard-bg-subtle);
}

.alert-item.critical {
    border-left: 3px solid var(--dashboard-color-critical);
}

.alert-item.warning {
    border-left: 3px solid var(--dashboard-color-warning);
}

.alert-item.info {
    border-left: 3px solid var(--dashboard-color-info);
}

.alert-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 6px;
}

.alert-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-item.critical .alert-type {
    color: var(--dashboard-color-critical);
}

.alert-item.warning .alert-type {
    color: var(--dashboard-color-warning);
}

.alert-item.info .alert-type {
    color: var(--dashboard-color-info);
}

.alert-date {
    font-size: 11px;
    color: var(--dashboard-text-tertiary);
    white-space: nowrap;
}

.alert-property {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin-bottom: 4px;
}

.alert-description {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    line-height: 1.4;
}

.alert-action {
    margin-top: var(--dashboard-spacing-xs);
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--dashboard-text-primary);
    cursor: pointer;
    transition: var(--dashboard-transition);
    text-decoration: none;
    display: inline-block;
}

.alert-action:hover {
    background-color: var(--dashboard-text-primary);
    border-color: var(--dashboard-text-primary);
    color: #FFFFFF;
}

/* ============================================
   Property Performance Widget
   ============================================ */

.property-performance-widget .widget-content {
    gap: var(--dashboard-spacing-sm);
}

.property-card {
    padding: var(--dashboard-spacing-md);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    background-color: #FFFFFF;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-sm);
}

.property-card:hover {
    box-shadow: var(--dashboard-shadow-hover);
    transform: translateY(-2px);
    background-color: var(--dashboard-bg-subtle);
}

/* Severity indicator - left border */
.property-card.property-severity-low {
    border-left: 4px solid var(--dashboard-color-success);
}

.property-card.property-severity-medium {
    border-left: 4px solid var(--dashboard-color-warning);
}

.property-card.property-severity-high {
    border-left: 4px solid var(--dashboard-color-critical);
}

/* Severity visual indicator element */
.property-severity-indicator {
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--dashboard-border-radius-sm) 0 0 var(--dashboard-border-radius-sm);
}

.property-card.property-severity-low .property-severity-indicator {
    background-color: var(--dashboard-color-success);
}

.property-card.property-severity-medium .property-severity-indicator {
    background-color: var(--dashboard-color-warning);
}

.property-card.property-severity-high .property-severity-indicator {
    background-color: var(--dashboard-color-critical);
}

/* Property content wrapper */
.property-content {
    flex: 1;
    min-width: 0;
}

/* Property action arrow */
.property-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
}

.property-card:hover .property-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

.property-address {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: var(--dashboard-spacing-xs);
}

.property-metrics {
    display: flex;
    gap: var(--dashboard-spacing-md);
    flex-wrap: wrap;
}

.property-metric {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.property-metric svg {
    flex-shrink: 0;
}

.property-metric-label {
    font-size: 11px;
    color: var(--color-grey, #595959);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.property-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

/* Color-code metric values based on severity */
.property-card.property-severity-high .property-metric {
    color: var(--dashboard-color-critical);
}

.property-card.property-severity-medium .property-metric {
    color: var(--dashboard-color-warning);
}

.property-card.property-severity-low .property-metric {
    color: var(--dashboard-color-success);
}

/* ============================================
   Task Summary Widget
   ============================================ */

.task-summary-widget .widget-content {
    gap: var(--dashboard-spacing-md);
}

.task-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dashboard-spacing-sm);
}

.task-stat {
    padding: var(--dashboard-spacing-md);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    text-align: center;
    transition: var(--dashboard-transition);
    background-color: var(--dashboard-bg-subtle);
}

.task-stat:hover {
    box-shadow: var(--dashboard-shadow-sm);
}

.task-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
    margin-bottom: 4px;
}

.task-stat-label {
    font-size: 11px;
    color: var(--dashboard-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-stat.overdue {
    border-color: var(--dashboard-color-critical);
    background-color: #FEF2F2;
}

.task-stat.overdue .task-stat-value {
    color: var(--dashboard-color-critical);
}

.task-progress {
    margin-top: var(--dashboard-spacing-md);
}

.task-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--dashboard-spacing-xs);
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.task-progress-bar {
    height: 8px;
    background-color: #F3F4F6;
    border-radius: 4px;
    overflow: hidden;
}

.task-progress-fill {
    height: 100%;
    background-color: var(--dashboard-color-info);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.task-completion-time {
    margin-top: var(--dashboard-spacing-sm);
    padding: var(--dashboard-spacing-sm);
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    text-align: center;
    border: 1px solid var(--dashboard-border-color);
}

.task-completion-time strong {
    color: var(--dashboard-text-primary);
    font-weight: 600;
}

/* ============================================
   Hearing Calendar Widget
   ============================================ */

.hearing-calendar-widget .widget-content {
    gap: var(--dashboard-spacing-xs);
}

.hearing-date-group {
    padding: var(--dashboard-spacing-sm);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    background-color: #FFFFFF;
    transition: var(--dashboard-transition);
    cursor: pointer;
}

.hearing-date-group:hover {
    box-shadow: var(--dashboard-shadow-sm);
    background-color: var(--dashboard-bg-subtle);
}

.hearing-date-group.urgent-3 {
    border-left: 3px solid var(--dashboard-color-critical);
}

.hearing-date-group.urgent-7 {
    border-left: 3px solid var(--dashboard-color-warning);
}

.hearing-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dashboard-spacing-xs);
}

.hearing-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
}

.hearing-count-badge {
    padding: 4px 10px;
    background-color: var(--dashboard-bg-subtle);
    color: var(--dashboard-text-secondary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.hearing-date-group.urgent-3 .hearing-count-badge {
    background-color: var(--dashboard-color-critical);
}

.hearing-date-group.urgent-7 .hearing-count-badge {
    background-color: var(--dashboard-color-warning);
}

/* ============================================
   Recent Activity Widget
   ============================================ */

.recent-activity-widget .widget-content {
    gap: 0;
}

.activity-item {
    padding: var(--dashboard-spacing-sm);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-sm);
    align-items: flex-start;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
}

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

.activity-item:hover {
    background-color: var(--dashboard-bg-subtle);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background-color: var(--dashboard-bg-subtle);
    color: var(--dashboard-text-secondary);
}

.activity-icon.violation {
    background-color: #FEF2F2;
    color: var(--dashboard-color-critical);
}

.activity-icon.complaint {
    background-color: #FFFBEB;
    color: var(--dashboard-color-warning);
}

.activity-icon.hearing {
    background-color: #EFF6FF;
    color: var(--dashboard-color-info);
}

.activity-icon.task {
    background-color: #F0FDF4;
    color: var(--dashboard-color-success);
}

.activity-details {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-property {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    margin-bottom: 2px;
}

.activity-timestamp {
    font-size: 11px;
    color: var(--dashboard-text-tertiary);
}

/* ============================================
   Financial Impact Widget
   ============================================ */

.financial-impact-widget .widget-content {
    gap: var(--dashboard-spacing-md);
}

.financial-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dashboard-spacing-sm);
}

.financial-total {
    padding: var(--dashboard-spacing-lg);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    text-align: center;
    transition: var(--dashboard-transition);
    background-color: var(--dashboard-bg-subtle);
}

.financial-total:hover {
    box-shadow: var(--dashboard-shadow-sm);
}

.financial-label {
    display: block;
    font-size: 12px;
    color: var(--dashboard-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.financial-amount {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.financial-total.balance-due-high {
    border-color: var(--dashboard-color-critical);
    background-color: #FEF2F2;
}

.financial-total.balance-due-high .financial-amount {
    color: var(--dashboard-color-critical);
}

.financial-stat {
    padding: var(--dashboard-spacing-sm);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    text-align: center;
}

.financial-stat-label {
    font-size: 11px;
    color: var(--color-grey, #595959);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.financial-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

.financial-stat.balance-due {
    border-color: var(--dashboard-color-critical);
    background-color: rgba(255, 46, 46, 0.05);
}

.financial-stat.balance-due .financial-stat-value {
    color: var(--dashboard-color-critical);
}

.financial-breakdown {
    margin-top: var(--dashboard-spacing-md);
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-sm);
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    margin-bottom: var(--dashboard-spacing-xs);
    transition: var(--dashboard-transition);
}

.breakdown-item:hover {
    background-color: #F3F4F6;
}

.breakdown-label {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
}

.breakdown-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.breakdown-value.success {
    color: var(--dashboard-color-success);
}

.breakdown-by-type {
    margin-top: var(--dashboard-spacing-md);
}

.breakdown-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin-bottom: var(--dashboard-spacing-sm);
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-sm);
}

.breakdown-type-item {
    padding: var(--dashboard-spacing-sm);
    background-color: var(--dashboard-bg-subtle);
    border-radius: var(--dashboard-border-radius-sm);
    transition: var(--dashboard-transition);
}

.breakdown-type-item:hover {
    background-color: #F3F4F6;
}

.breakdown-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dashboard-spacing-xs);
}

.breakdown-type-label {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
    font-weight: 500;
}

.breakdown-type-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--dashboard-text-primary);
}

.breakdown-type-bar {
    height: 6px;
    background-color: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-type-fill {
    height: 100%;
    background-color: var(--dashboard-color-info);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.financial-breakdown-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: var(--dashboard-spacing-xs);
}

.financial-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-xs);
}

.financial-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-xs);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, #F9FAFB 100%);
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    border-left: 2px solid rgba(99, 102, 241, 0.1);
    transition: var(--dashboard-transition);
}

.financial-breakdown-item:hover {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.06) 0%, #F3F4F6 100%);
    border-left-color: #6366F1;
}

.financial-breakdown-label {
    color: var(--color-grey, #595959);
}

.financial-breakdown-value {
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
}

.largest-outstanding {
    margin-top: var(--dashboard-spacing-md);
}

.largest-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: var(--dashboard-spacing-sm);
}

.largest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-md);
    background-color: #FEF2F2;
    border: 1px solid var(--dashboard-color-critical);
    border-radius: var(--dashboard-border-radius-sm);
    text-decoration: none;
    transition: var(--dashboard-transition);
}

.largest-item:hover {
    box-shadow: var(--dashboard-shadow-hover);
    transform: translateY(-2px);
}

.largest-content {
    flex: 1;
    min-width: 0;
}

.largest-property {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-text-primary);
    margin: 0 0 4px 0;
}

.largest-reference {
    font-size: 12px;
    color: var(--dashboard-text-secondary);
    margin: 0;
}

.largest-amount {
    flex-shrink: 0;
    margin-left: var(--dashboard-spacing-md);
}

.largest-amount span {
    font-size: 28px;
    font-weight: 700;
    color: var(--dashboard-color-critical);
}

.financial-largest {
    margin-top: var(--dashboard-spacing-md);
    padding: var(--dashboard-spacing-md);
    background-color: #FEF2F2;
    border: 1px solid var(--dashboard-color-critical);
    border-radius: var(--dashboard-border-radius-sm);
}

.financial-largest-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--dashboard-color-critical);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--dashboard-spacing-xs);
}

.financial-largest-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--dashboard-color-critical);
    margin-bottom: 4px;
}

.financial-largest-property {
    font-size: 13px;
    color: var(--dashboard-text-secondary);
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Tablet (768px - 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .financial-summary {
        grid-template-columns: 1fr;
    }

    .task-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile (320px - 767px) */
@media only screen and (max-width: 767px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        /* Changed from flex-start to stretch for full width */
        gap: var(--dashboard-spacing-md);
    }

    .dashboard-title {
        text-align: left;
        width: 100%;
    }

    .dashboard-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--dashboard-spacing-sm);
    }

    .time-period-filter {
        width: 100%;
    }

    .time-period-filter select {
        width: 100%;
    }

    .refresh-btn {
        width: 100%;
        justify-content: center;
        order: 2;
        /* Ensure refresh button comes after filters */
    }

    .last-updated {
        text-align: center;
        width: 100%;
        order: 3;
        /* Ensure timestamp comes last */
    }

    .metric-value {
        font-size: 32px;
    }

    .metric-title {
        font-size: 14px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        /* Mobile: 16px gap between widgets when stacked */
    }

    .dashboard-column-left,
    .dashboard-column-right {
        gap: 16px;
        /* Mobile: 16px gap between widgets in columns */
    }

    .widget {
        padding: 16px;
        /* Mobile: 16px padding */
    }

    .widget-title {
        font-size: 16px;
    }

    .chart-container {
        height: 250px;
    }

    .chart-canvas {
        max-height: 250px;
    }

    #trendChart {
        height: 250px !important;
    }

    .trend-chart-widget {
        min-height: 300px;
    }

    .financial-summary {
        grid-template-columns: 1fr;
    }

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

    .property-metrics {
        flex-direction: column;
        gap: var(--dashboard-spacing-xs);
    }
}

/* Extra small mobile (320px - 479px) */
@media only screen and (max-width: 479px) {
    .dashboard-title {
        font-size: 20px;
    }

    .metric-value {
        font-size: 28px;
    }
}

/* Desktop (1024px+) */
@media only screen and (min-width: 1024px) {
    .dashboard-enhanced {
        padding: 0;
    }

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

/* Large desktop (1440px+) */
@media only screen and (min-width: 1440px) {
    .dashboard-enhanced {
        max-width: 1400px;
    }
}

/* ============================================
   Mobile-Specific Optimizations
   ============================================ */

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Handle device orientation changes smoothly */
@media screen and (orientation: portrait) {
    .dashboard-enhanced {
        transition: all 0.3s ease-in-out;
    }

    .chart-container,
    .chart-canvas,
    #trendChart {
        transition: height 0.3s ease-in-out;
    }
}

@media screen and (orientation: landscape) {
    .dashboard-enhanced {
        transition: all 0.3s ease-in-out;
    }

    .chart-container,
    .chart-canvas,
    #trendChart {
        transition: height 0.3s ease-in-out;
    }
}

/* Ensure layout updates quickly on orientation change */
@media only screen and (max-width: 767px) {
    /* Portrait orientation optimizations */
    @media (orientation: portrait) {
        .dashboard-grid {
            grid-template-columns: 1fr;
        }

        .metrics-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Landscape orientation optimizations */
    @media (orientation: landscape) {
        .metrics-grid {
            grid-template-columns: repeat(3, 1fr);
        }

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

/* Optimize tap highlighting */
* {
    -webkit-tap-highlight-color: rgba(66, 32, 237, 0.1);
    -moz-tap-highlight-color: rgba(66, 32, 237, 0.1);
}

/* Improve touch scrolling on iOS */
.dashboard-enhanced,
.widget-content,
.activity-feed-list {
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal overflow on mobile */
.dashboard-enhanced {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* Ensure all child elements respect container width */
.dashboard-enhanced * {
    max-width: 100%;
}

/* Prevent specific widgets from causing overflow */
.widget,
.metric-card,
.dashboard-header,
.metrics-grid,
.dashboard-grid,
.dashboard-column-left,
.dashboard-column-right {
    overflow-x: hidden;
}

/* Ensure tables and wide content wrap properly */
.widget-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent text overflow */
.activity-title,
.alert-property,
.property-address,
.largest-property {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Ensure touch targets are large enough for mobile accessibility (44px minimum) */
button:not(.toggle-switch),
a.metric-card,
a.property-card,
a.alert-item,
a.activity-item,
a.hearing-date-group,
a.largest-item,
select,
input[type="button"],
input[type="submit"],
.refresh-btn,
.alert-action,
.chart-retry-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Ensure adequate padding for touch targets on mobile */
@media only screen and (max-width: 767px) {
    .refresh-btn {
        padding: 12px 16px;
        min-height: 48px;
        /* Slightly larger on mobile */
    }

    .time-period-filter select {
        padding: 12px 16px;
        min-height: 48px;
    }

    .alert-action {
        padding: 10px 16px;
        min-height: 44px;
    }

    .metric-card {
        min-height: 140px;
        /* Ensure adequate touch area */
        padding: 20px;
    }

    .property-card,
    .alert-item,
    .hearing-date-group {
        padding: 16px;
        min-height: 60px;
    }

    .activity-item {
        padding: 14px 12px;
        min-height: 56px;
    }

    /* Ensure links within widgets have adequate touch targets */
    .dashboard-info-link {
        padding: 4px 8px;
        margin: -4px -8px;
        display: inline-block;
        min-height: 44px;
        line-height: 36px;
    }

    /* Ensure task stat cards have adequate touch area */
    .task-stat {
        min-height: 100px;
        padding: 16px;
    }

    /* Ensure financial stat cards have adequate touch area */
    .financial-total,
    .financial-stat {
        min-height: 110px;
        padding: 18px;
    }
}

/* Optimize font rendering on mobile */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   Browser Compatibility Enhancements
   ============================================ */

/* Smooth scrolling with vendor prefixes */
html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
}

/* Flexbox gap fallback for older browsers */
@supports not (gap: 1rem) {
    .dashboard-filters>*+* {
        margin-left: var(--dashboard-spacing-md);
    }

    .metrics-grid>* {
        margin-bottom: var(--dashboard-spacing-lg);
    }
}

/* ============================================
   Animations and Transitions
   ============================================ */

/* Fade in animation for data updates */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
    }

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

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }

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

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Pulse animation for loading states */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@-webkit-keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Chart skeleton loader overlay */
.chart-skeleton-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: var(--dashboard-border-radius-sm);
    z-index: 10;
    display: none;
}

.trend-chart-widget.loading .chart-skeleton-loader {
    display: block;
}

/* Chart error message */
.chart-error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: var(--dashboard-spacing-lg);
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dashboard-border-color);
    border-radius: var(--dashboard-border-radius-sm);
    box-shadow: var(--dashboard-shadow-md);
    z-index: 20;
    max-width: 90%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chart-error-message.visible {
    opacity: 1;
    visibility: visible;
}

.chart-error-message p {
    margin: 0 0 var(--dashboard-spacing-md) 0;
    color: var(--dashboard-color-critical);
    font-weight: 600;
    font-size: 14px;
}

.chart-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--dashboard-text-primary);
    color: white;
    border: none;
    border-radius: var(--dashboard-border-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--dashboard-transition);
}

.chart-retry-btn:hover {
    background-color: var(--dashboard-color-info);
    box-shadow: var(--dashboard-shadow-sm);
}

.chart-retry-btn:active {
    transform: translateY(0);
}

/* Smooth transitions for all interactive elements */
.metric-card,
.alert-item,
.property-card,
.hearing-date-group,
.activity-item,
.task-stat {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift effect */
.metric-card:hover,
.property-card:hover {
    transform: translateY(-4px);
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

.slide-in-right {
    animation: slideInRight 0.4s ease-out;
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* Stagger animation for list items */
.stagger-item {
    animation: fadeIn 0.4s ease-out backwards;
}

.stagger-item:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger-item:nth-child(2) {
    animation-delay: 0.1s;
}

.stagger-item:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger-item:nth-child(4) {
    animation-delay: 0.2s;
}

.stagger-item:nth-child(5) {
    animation-delay: 0.25s;
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

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

/* Focus visible styles for keyboard navigation */
.metric-card:focus-visible,
.alert-item:focus-visible,
.property-card:focus-visible,
.hearing-date-group:focus-visible,
.hearing-item:focus-visible,
.activity-item:focus-visible,
.task-status-item:focus-visible,
.hearing-date-item:focus-visible,
.largest-item:focus-visible,
.refresh-btn:focus-visible,
.period-filter:focus-visible,
.period-select:focus-visible,
.chart-retry-btn:focus-visible,
.dashboard-info-link:focus-visible,
.alert-action:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid var(--dashboard-color-info);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(66, 32, 237, 0.1);
}

/* Remove default focus outline for mouse users */
.metric-card:focus:not(:focus-visible),
.alert-item:focus:not(:focus-visible),
.property-card:focus:not(:focus-visible),
.hearing-date-group:focus:not(:focus-visible),
.hearing-item:focus:not(:focus-visible),
.activity-item:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure all interactive elements are keyboard accessible */
.metric-card,
.alert-item,
.property-card,
.hearing-date-item,
.activity-item,
.task-status-item,
.largest-item {
    position: relative;
}

/* Skip to content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-dark-main, #0B0D23);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 10000;
    font-weight: 600;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--dashboard-color-info);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific animations */
    .refresh-btn.loading svg,
    .loading-spinner,
    .chart-skeleton-loader,
    .skeleton {
        animation: none !important;
    }

    /* Disable transform transitions */
    .metric-card:hover,
    .property-card:hover,
    .alert-item:hover,
    .activity-item:hover,
    .hearing-item:hover {
        transform: none !important;
    }

    /* Keep opacity transitions but make them instant */
    .metric-value.updating,
    .metric-value.updated,
    .metric-change.updating,
    .metric-change.updated,
    .activity-time.updating,
    .activity-time.updated {
        transition: opacity 0.01ms !important;
    }

    /* Disable fade animations */
    .fade-in,
    .slide-in-right,
    .scale-in,
    .stagger-item {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .metric-card,
    .widget,
    .alert-item,
    .property-card {
        border-width: 2px;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {

    .dashboard-filters,
    .refresh-btn,
    .alert-action,
    .widget-empty {
        display: none;
    }

    .dashboard-enhanced {
        max-width: 100%;
    }

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

    .metric-card,
    .widget {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

.text-critical {
    color: var(--dashboard-color-critical);
}

.text-warning {
    color: var(--dashboard-color-warning);
}

.text-success {
    color: var(--dashboard-color-success);
}

.text-info {
    color: var(--dashboard-color-info);
}

.bg-critical {
    background-color: rgba(255, 46, 46, 0.1);
}

.bg-warning {
    background-color: rgba(238, 200, 68, 0.1);
}

.bg-success {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-info {
    background-color: rgba(66, 32, 237, 0.1);
}

/* ============================================
   Dashboard Info Banner
   ============================================ */

.dashboard-info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: var(--dashboard-border-radius-sm);
    margin-bottom: var(--dashboard-spacing-lg);
    color: #4338CA;
    font-size: 14px;
    line-height: 1.5;
}

.dashboard-info-banner svg {
    flex-shrink: 0;
    color: #6366F1;
}

.dashboard-info-banner strong {
    font-weight: 600;
}

.dashboard-info-link {
    color: #4338CA;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease;
}

.dashboard-info-link:hover {
    color: #3730A3;
}

/* ============================================
   Activity Timestamp Transitions
   ============================================ */

.activity-time {
    transition: opacity 150ms ease-in-out;
}

/* Smooth fade transition when timestamp updates */
.activity-time.updating {
    opacity: 0.5;
}

.activity-time.updated {
    opacity: 1;
}

/* Ensure timestamp doesn't flicker during updates */
.activity-meta {
    min-height: 20px;
}


/* ============================================
   Enhanced Recent Activity Widget
   ============================================ */

.recent-activity-widget .widget-content {
    padding: 0;
}

.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    padding: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-sm);
    align-items: flex-start;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

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

.activity-item:hover {
    background-color: #F9FAFB;
}

/* Activity severity indicators */
.activity-item.activity-severity-critical {
    border-left: 3px solid var(--dashboard-color-critical);
}

.activity-item.activity-severity-warning {
    border-left: 3px solid var(--dashboard-color-warning);
}

.activity-item.activity-severity-info {
    border-left: 3px solid var(--dashboard-color-info);
}

.activity-item.activity-severity-success {
    border-left: 3px solid var(--dashboard-color-success);
}

/* Activity icons */
.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.activity-type-dob_violation,
.activity-icon.activity-type-hm_violation,
.activity-icon.activity-type-dob_ecb_violation {
    background-color: rgba(255, 46, 46, 0.1);
    color: var(--dashboard-color-critical);
}

.activity-icon.activity-type-dob_complaint,
.activity-icon.activity-type-city_complaint {
    background-color: rgba(238, 200, 68, 0.1);
    color: var(--dashboard-color-warning);
}

.activity-icon.activity-type-oath_hearing {
    background-color: rgba(66, 32, 237, 0.1);
    color: var(--dashboard-color-info);
}

.activity-icon.activity-type-task_completed,
.activity-icon.activity-type-task_assigned {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--dashboard-color-success);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 4px;
}

.activity-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    flex: 1;
}

.activity-time {
    font-size: 11px;
    color: var(--color-grey, #595959);
    white-space: nowrap;
    flex-shrink: 0;
}

.activity-property {
    font-size: 13px;
    color: var(--color-grey, #595959);
    margin-bottom: 2px;
}

.activity-description {
    font-size: 13px;
    color: var(--color-grey, #595959);
    line-height: 1.4;
}

.activity-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
    margin-top: 8px;
}

.activity-item:hover .activity-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

/* ============================================
   Enhanced Priority Alerts Widget
   ============================================ */

.priority-alerts-widget .widget-content {
    padding: 0;
}

.alert-list {
    display: flex;
    flex-direction: column;
}

.alert-item {
    padding: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-sm);
    align-items: flex-start;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.alert-item:last-child {
    border-bottom: none;
}

.alert-item:hover {
    background-color: #F9FAFB;
}

/* Alert severity borders */
.alert-item.alert-severity-critical {
    border-left: 3px solid var(--dashboard-color-critical);
    background-color: rgba(255, 46, 46, 0.02);
}

.alert-item.alert-severity-warning {
    border-left: 3px solid var(--dashboard-color-warning);
    background-color: rgba(238, 200, 68, 0.02);
}

.alert-item.alert-severity-info {
    border-left: 3px solid var(--dashboard-color-info);
    background-color: rgba(66, 32, 237, 0.02);
}

/* Alert icons */
.alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon.alert-icon-critical {
    background-color: rgba(255, 46, 46, 0.1);
    color: var(--dashboard-color-critical);
}

.alert-icon.alert-icon-warning {
    background-color: rgba(238, 200, 68, 0.1);
    color: var(--dashboard-color-warning);
}

.alert-icon.alert-icon-info {
    background-color: rgba(66, 32, 237, 0.1);
    color: var(--dashboard-color-info);
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 6px;
}

.alert-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-item.alert-severity-critical .alert-type {
    color: var(--dashboard-color-critical);
}

.alert-item.alert-severity-warning .alert-type {
    color: var(--dashboard-color-warning);
}

.alert-item.alert-severity-info .alert-type {
    color: var(--dashboard-color-info);
}

.alert-date {
    font-size: 11px;
    color: var(--color-grey, #595959);
    white-space: nowrap;
}

.alert-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
    margin-bottom: 4px;
}

.alert-property {
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.alert-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
    margin-top: 8px;
}

.alert-item:hover .alert-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

/* ============================================
   Enhanced Upcoming Hearings Widget
   ============================================ */

.hearing-calendar-widget .widget-content {
    padding: 0;
}

.hearing-list {
    display: flex;
    flex-direction: column;
}

.hearing-item {
    padding: var(--dashboard-spacing-md);
    border-bottom: 1px solid var(--dashboard-border-color);
    display: flex;
    gap: var(--dashboard-spacing-md);
    align-items: center;
    transition: var(--dashboard-transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.hearing-item:last-child {
    border-bottom: none;
}

.hearing-item:hover {
    background-color: #F9FAFB;
}

/* Enhanced hover for customer view */
.dashboard-grid-customer .hearing-item:hover {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.05) 0%, #F9FAFB 100%);
    transform: translateX(2px);
}

/* Hearing urgency borders */
.hearing-item.hearing-urgency-critical {
    border-left: 3px solid var(--dashboard-color-critical);
    background-color: rgba(255, 46, 46, 0.02);
}

.hearing-item.hearing-urgency-warning {
    border-left: 3px solid var(--dashboard-color-warning);
    background-color: rgba(238, 200, 68, 0.02);
}

/* Hearing date badge */
.hearing-date-badge {
    width: 56px;
    height: 56px;
    border-radius: var(--dashboard-border-radius-sm);
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: var(--color-white, #FFF);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0px 2px 8px 0px rgba(99, 102, 241, 0.3);
}

.hearing-item.hearing-urgency-critical .hearing-date-badge {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0px 2px 8px 0px rgba(239, 68, 68, 0.3);
}

.hearing-item.hearing-urgency-warning .hearing-date-badge {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0px 2px 8px 0px rgba(245, 158, 11, 0.3);
}

.hearing-day {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.hearing-month {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.hearing-content {
    flex: 1;
    min-width: 0;
}

.hearing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
    margin-bottom: 4px;
}

.hearing-date-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-blue, #0E102B);
}

.urgency-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.urgency-badge.urgency-critical {
    background-color: rgba(255, 46, 46, 0.1);
    color: var(--dashboard-color-critical);
}

.urgency-badge.urgency-warning {
    background-color: rgba(238, 200, 68, 0.1);
    color: var(--dashboard-color-warning);
}

.hearing-count-label {
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.hearing-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey, #595959);
    transition: var(--dashboard-transition);
}

.hearing-item:hover .hearing-action {
    color: var(--dashboard-color-info);
    transform: translateX(4px);
}

/* ============================================
   Enhanced Task Summary Widget
   ============================================ */

.task-summary-widget .overdue-alert {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-xs);
    padding: var(--dashboard-spacing-sm) var(--dashboard-spacing-md);
    background-color: rgba(255, 46, 46, 0.05);
    border: 1px solid rgba(255, 46, 46, 0.2);
    border-radius: var(--dashboard-border-radius-sm);
    margin-bottom: var(--dashboard-spacing-md);
    color: var(--dashboard-color-critical);
    text-decoration: none;
    transition: var(--dashboard-transition);
}

.task-summary-widget .overdue-alert:hover {
    background-color: rgba(255, 46, 46, 0.1);
    border-color: var(--dashboard-color-critical);
}

.task-summary-widget .overdue-alert svg {
    flex-shrink: 0;
}

.task-progress-bar {
    display: flex;
    height: 8px;
    background-color: #F3F4F6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--dashboard-spacing-md);
}

.progress-segment {
    height: 100%;
    transition: width 0.5s ease;
}

.progress-segment.progress-pending {
    background-color: #9CA3AF;
}

.progress-segment.progress-in-progress {
    background-color: var(--dashboard-color-info);
}

.progress-segment.progress-resolved {
    background-color: var(--dashboard-color-success);
}

.progress-segment.progress-cancelled {
    background-color: #6B7280;
}

.task-status-list {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-spacing-xs);
}

.task-status-item {
    display: flex;
    align-items: center;
    gap: var(--dashboard-spacing-sm);
    padding: var(--dashboard-spacing-sm);
    border-radius: var(--dashboard-border-radius-sm);
    text-decoration: none;
    transition: var(--dashboard-transition);
}

.task-status-item:hover {
    background-color: #F9FAFB;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.status-pending {
    background-color: #9CA3AF;
}

.status-indicator.status-in-progress {
    background-color: var(--dashboard-color-info);
}

.status-indicator.status-resolved {
    background-color: var(--dashboard-color-success);
}

.status-indicator.status-cancelled {
    background-color: #6B7280;
}

.status-label {
    flex: 1;
    font-size: 13px;
    color: var(--color-grey, #595959);
}

.status-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

.task-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dashboard-spacing-md);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, #F9FAFB 100%);
    border-radius: var(--dashboard-border-radius-sm);
    margin-top: var(--dashboard-spacing-md);
    border-left: 3px solid rgba(59, 130, 246, 0.3);
    transition: var(--dashboard-transition);
}

.task-metric:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, #F3F4F6 100%);
    border-left-color: #3B82F6;
}

.metric-label {
    font-size: 13px;
    color: var(--color-grey, #595959);
    font-weight: 500;
}

.metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-blue, #0E102B);
}

/* ============================================
   Mobile Responsiveness for Enhanced Widgets
   ============================================ */

@media only screen and (max-width: 767px) {

    .activity-item,
    .alert-item,
    .hearing-item {
        padding: var(--dashboard-spacing-sm);
    }

    .activity-icon,
    .alert-icon {
        width: 32px;
        height: 32px;
    }

    .hearing-date-badge {
        width: 48px;
        height: 48px;
    }

    .hearing-day {
        font-size: 18px;
    }

    .activity-header,
    .alert-header,
    .hearing-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-time,
    .alert-date {
        margin-top: 2px;
    }
}
/* Dashboard Loading States and Animations */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Spinner Component */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner-dark {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: #4220ED;
}

/* Loading State for Refresh Button */
.refresh-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.refresh-btn .spinner {
  margin-right: 8px;
}

/* Loading State for Widgets */
.widget-loading {
  position: relative;
  pointer-events: none;
}

.widget-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  z-index: 10;
}

/* Loading State for Trend Chart */
.trend-chart-widget.loading {
  position: relative;
}

.trend-chart-widget.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(66, 32, 237, 0.1);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 100;
}

.trend-chart-widget.loading canvas {
  opacity: 0.3;
}

/* Skeleton Loaders */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #f8f8f8 50%,
    #f0f0f0 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: 4px;
}

.skeleton-metric-card {
  height: 120px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.skeleton-widget {
  height: 300px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.skeleton-chart {
  height: 400px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text.title {
  height: 24px;
  width: 60%;
  margin-bottom: 16px;
}

.skeleton-text.short {
  width: 40%;
}

.skeleton-text.medium {
  width: 60%;
}

.skeleton-text.long {
  width: 80%;
}

/* Metric Card Loading State */
.metric-card.loading {
  position: relative;
  overflow: hidden;
}

.metric-card.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

/* Smooth Transitions for Data Updates */
.metric-value,
.metric-change,
.activity-item,
.alert-item,
.property-card {
  transition: all 0.3s ease;
}

.metric-value.updating {
  opacity: 0.5;
  transform: scale(0.98);
}

.metric-value.updated {
  animation: fadeIn 0.3s ease;
}

/* Activity Feed Loading */
.activity-feed-list.loading {
  position: relative;
  min-height: 200px;
}

.activity-feed-list.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(66, 32, 237, 0.1);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.activity-feed-list.loading .activity-item {
  opacity: 0.3;
}

/* Dashboard Notification Styles */
.dashboard-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s ease;
  max-width: 400px;
}

.dashboard-notification.show {
  opacity: 1;
  transform: translateX(0);
}

.dashboard-notification-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.dashboard-notification-error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.dashboard-notification-info {
  background: #dbeafe;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}

/* Fade In Animation for Initial Load */
.dashboard-enhanced {
  animation: fadeIn 0.5s ease;
}

.metrics-grid {
  animation: slideUp 0.6s ease;
}

.dashboard-grid {
  animation: slideUp 0.7s ease;
}

/* Stagger Animation for Metric Cards */
.metric-card {
  animation: slideUp 0.5s ease;
  animation-fill-mode: both;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.15s; }
.metric-card:nth-child(3) { animation-delay: 0.2s; }
.metric-card:nth-child(4) { animation-delay: 0.25s; }
.metric-card:nth-child(5) { animation-delay: 0.3s; }
.metric-card:nth-child(6) { animation-delay: 0.35s; }

/* Widget Fade In */
.widget {
  animation: fadeIn 0.6s ease;
  animation-fill-mode: both;
}

/* Pulse Animation for Updated Elements */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.metric-value.pulse {
  animation: pulse 0.5s ease;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.loading-overlay .spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* Chart Error Message */
.chart-error-message {
  display: none;
  padding: 24px;
  text-align: center;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin: 20px;
  animation: fadeIn 0.3s ease;
}

.chart-error-message.visible {
  display: block;
}

.chart-error-message p {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 500;
}

.chart-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #dc2626;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-retry-btn:hover {
  background-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.chart-retry-btn:active {
  transform: translateY(0);
}

.chart-retry-btn svg {
  width: 16px;
  height: 16px;
}

/* Chart Skeleton Loader */
.chart-skeleton-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 8px;
  z-index: 10;
  display: none;
}

.trend-chart-widget.loading .chart-skeleton-loader {
  display: block;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Skeleton Loader Grid */
.skeleton-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.skeleton-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

/* Responsive Skeleton Loaders */
@media (max-width: 1024px) {
  .skeleton-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .skeleton-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .skeleton-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .dashboard-notification {
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .skeleton-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Smooth Height Transitions */
.collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Hover Effects with Smooth Transitions */
.metric-card,
.alert-item,
.activity-item,
.property-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover,
.alert-item:hover,
.activity-item:hover,
.property-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Loading State for Individual Widgets */
.widget-content.loading {
  position: relative;
  min-height: 100px;
}

.widget-content.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(66, 32, 237, 0.1);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
}

.widget-content.loading > * {
  opacity: 0.3;
}

/* Fade Out Animation */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

/* Scale In Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.3s ease;
}

/* Additional Widget Styles for Loading States */
.widget {
  position: relative;
  transition: opacity 0.3s ease;
}

.widget.loading {
  opacity: 0.6;
}

/* Chart Container Styles */
.chart-container {
  position: relative;
  min-height: 300px;
}

.chart-container canvas {
  transition: opacity 0.3s ease;
}

/* Empty State Styles */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  font-style: italic;
}

/* Activity Feed Transitions */
.activity-feed-list {
  transition: opacity 0.3s ease;
}

.activity-feed-list.fade-out {
  opacity: 0;
}

/* Metric Card Hover States */
.metric-card {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(66, 32, 237, 0.05),
    transparent
  );
  transition: left 0.5s ease;
}

.metric-card:hover::before {
  left: 100%;
}

/* Loading Spinner for Widgets */
.widget-loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(66, 32, 237, 0.2);
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Refresh Button States */
.refresh-btn {
  position: relative;
  transition: all 0.2s ease;
}

.refresh-btn:hover:not(.loading) {
  color: #FFFFFF !important;
  transform: scale(1.05);
}

.refresh-btn:active:not(.loading) {
  transform: scale(0.95);
}

.refresh-btn svg {
  transition: transform 0.3s ease;
}

.refresh-btn:hover:not(.loading) svg {
  transform: rotate(180deg);
}

.refresh-btn.loading svg {
  animation: spin 1s linear infinite;
}

/* Priority Alerts Loading */
.priority-alerts-widget.loading .alert-item {
  opacity: 0.5;
  pointer-events: none;
}

/* Property Performance Loading */
.property-performance-widget.loading .property-card {
  opacity: 0.5;
  pointer-events: none;
}

/* Task Summary Loading */
.task-summary-widget.loading .task-status-item {
  opacity: 0.5;
}

/* Hearing Calendar Loading */
.hearing-calendar-widget.loading .hearing-date {
  opacity: 0.5;
}

/* Financial Impact Loading */
.financial-impact-widget.loading .financial-item {
  opacity: 0.5;
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Focus Visible for Accessibility */
*:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ========================================
   Super Admin Companies - Visual Feedback & Interactions
   ======================================== */

/* ========================================
   10.1 Hover States
   ======================================== */

/* Table row hover effect */
.companies-table tbody tr {
  transition: background-color 0.2s ease;
}

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

/* Actions dropdown button hover */
.actions-dropdown-btn {
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.actions-dropdown-btn:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #1f2937;
}

.actions-dropdown-btn:active,
.actions-dropdown-btn.active {
  background-color: #dee2e6;
  border-color: #adb5bd;
}

.actions-dropdown-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Dropdown menu styling */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999999;
  min-width: 180px;
  display: none;
  overflow: hidden;
}

.dropdown-menu.show {
  display: block;
}

/* Dropdown item hover effects */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #1f2937;
  text-decoration: none;
}

.dropdown-item:focus {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

.dropdown-item.danger {
  color: #dc2626;
}

.dropdown-item.danger:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}

.dropdown-item.success {
  color: #16a34a;
}

.dropdown-item.success:hover {
  background-color: #f0fdf4;
  color: #15803d;
}

.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 4px 0;
}

/* Keep the + icon and label on one line in the header action button */
.add-company-button {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Link hover effects */
.search-results-info .clear-search {
  color: #4220ED;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.search-results-info .clear-search:hover {
  color: #3614c7;
  text-decoration: underline;
}

.empty-state-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4220ED;
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.empty-state-btn:hover {
  background-color: #3614c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #ffffff;
}

.empty-state-btn:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Checkbox label hover */
.companies-table .label {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.companies-table .label:hover {
  opacity: 0.8;
}

/* Company name link hover (if applicable) */
.company-info strong {
  transition: color 0.2s ease;
}

.companies-table tbody tr:hover .company-info strong {
  color: #4220ED;
}

/* ========================================
   10.2 Loading States
   ======================================== */

/* Loading overlay for table updates */
.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.table-loading-overlay.hidden {
  display: none;
}

/* Loading spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Button loading state */
.actions-dropdown-btn.loading,
.empty-state-btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
  cursor: not-allowed;
}

.actions-dropdown-btn.loading::after,
.empty-state-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid #f3f4f6;
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Disabled button state */
.actions-dropdown-btn:disabled,
.empty-state-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Table wrapper with loading state */
.dashboard-table-wrapper {
  position: relative;
}

/* Search input loading indicator */
.dashboard-search {
  position: relative;
}

.dashboard-search.loading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid #e5e7eb;
  border-top-color: #4220ED;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ========================================
   10.3 Focus States
   ======================================== */

/* Enhanced focus indicators for keyboard navigation */
.companies-table tbody tr:focus-within {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
}

/* Checkbox focus */
.companies-table input[type="checkbox"]:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Search input focus */
.dashboard-search input:focus {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
  border-color: #4220ED;
}

/* Dropdown button focus visible */
.actions-dropdown-btn:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Dropdown item focus visible */
.dropdown-item:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

/* Link focus visible */
a:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* Remove default focus outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Focus trap for dropdown menus */
.dropdown-menu.show {
  /* Ensure dropdown is keyboard accessible */
  outline: none;
}

/* Pagination link focus */
.pagination a:focus-visible {
  outline: 2px solid #4220ED;
  outline-offset: 2px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  .actions-dropdown-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .dropdown-menu {
    min-width: 160px;
  }
  
  .dropdown-item {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ========================================
   Accessibility - Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .companies-table tbody tr,
  .actions-dropdown-btn,
  .dropdown-item,
  .empty-state-btn,
  .loading-spinner {
    transition: none;
    animation: none;
  }
  
  .empty-state-btn:hover {
    transform: none;
  }
}

/* ========================================
   High Contrast Mode Support
   ======================================== */

@media (prefers-contrast: high) {
  .companies-table tbody tr:hover {
    background-color: #e5e7eb;
  }
  
  .actions-dropdown-btn {
    border-width: 2px;
  }
  
  .dropdown-item:hover {
    background-color: #e5e7eb;
  }
  
  .dropdown-menu {
    border-width: 2px;
  }
}
/* ========================================
   Alert Audit Logs - Styles
   ======================================== */

/* ----------------------------------------
   Stats Bar
   ---------------------------------------- */

.audit-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e9e9e9;
}

.stat-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: #f8f9fc;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  min-width: 110px;
}

.stat-chip-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-chip-value {
  font-size: 20px;
  font-weight: 700;
  color: #0e102b;
  line-height: 1.2;
}

.stat-chip-failure {
  border-color: #fca5a5;
  background: #fef2f2;
}

.stat-chip-failure .stat-chip-label {
  color: #dc2626;
}

.stat-chip-failure .stat-chip-value {
  color: #b91c1c;
}

/* ----------------------------------------
   Filter Form
   ---------------------------------------- */

.audit-filter-form {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fc;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}

.audit-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.audit-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.audit-filter-input,
.audit-filter-select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0e102b;
  background: #fff;
  transition: border-color 0.2s;
  min-width: 140px;
}

.audit-filter-input:focus,
.audit-filter-select:focus {
  outline: none;
  border-color: #4220ED;
}

.audit-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 0;
}

/* ----------------------------------------
   Status Badges
   ---------------------------------------- */

.audit-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.audit-status-sent {
  background: #d1fae5;
  color: #065f46;
}

.audit-status-failed {
  background: #fee2e2;
  color: #991b1b;
}

.audit-status-skipped {
  background: #f3f4f6;
  color: #4b5563;
}

.audit-status-pending {
  background: #fef3c7;
  color: #92400e;
}

/* ----------------------------------------
   Failure Reason Chip
   ---------------------------------------- */

.failure-reason-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  white-space: nowrap;
}

/* ----------------------------------------
   Service Status Badges (show page)
   ---------------------------------------- */

.service-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.service-status-ok {
  background: #d1fae5;
  color: #065f46;
}

.service-status-empty {
  background: #fef3c7;
  color: #92400e;
}

.service-status-error {
  background: #fee2e2;
  color: #991b1b;
}

/* ----------------------------------------
   Audit Logs Index Table
   ---------------------------------------- */

.audit-logs-table {
  table-layout: auto !important;
}

.audit-logs-table th,
.audit-logs-table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Reset global first-child / nth-child column width overrides */
.audit-logs-table th:first-child,
.audit-logs-table td:first-child {
  width: auto;
  padding-left: 8px;
}

.audit-logs-table th:nth-child(2),
.audit-logs-table td:nth-child(2) {
  width: auto;
}

.audit-logs-table th:last-child,
.audit-logs-table td:last-child {
  width: auto;
}

.audit-logs-table tbody tr {
  transition: background-color 0.15s ease;
}

.audit-log-row {
  cursor: pointer;
}

.audit-log-row:hover {
  background-color: #f9fafb;
}

.user-email-col {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------
   Muted text
   ---------------------------------------- */

.text-muted {
  color: #9ca3af;
}

/* ----------------------------------------
   Show page - detail sections
   ---------------------------------------- */

.audit-detail-company {
  font-size: 15px;
  color: #6b7280;
  margin: 4px 0 0 0;
}

.audit-detail-section {
  margin-bottom: 32px;
}

.audit-detail-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #0e102b;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.audit-detail-table {
  width: 100%;
  table-layout: auto !important;
}

.audit-detail-table th,
.audit-detail-table td {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Reset global column-width overrides for detail tables */
.audit-detail-table th:first-child,
.audit-detail-table td:first-child {
  width: 200px !important;
  padding-left: 12px !important;
}

.audit-detail-table th:nth-child(2),
.audit-detail-table td:nth-child(2) {
  width: auto !important;
}

.audit-detail-table th:last-child,
.audit-detail-table td:last-child {
  width: auto !important;
  padding-right: 12px;
}

.audit-detail-table th {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.audit-detail-table td {
  font-size: 13px;
  color: #111827;
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}

/* ----------------------------------------
   Show page - error section
   ---------------------------------------- */

.audit-error-section {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 20px;
}

.audit-error-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #dc2626;
  margin-bottom: 8px;
}

.audit-error-message {
  display: block;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 13px;
  color: #991b1b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

.audit-error-backtrace {
  display: block;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre;
}

/* ----------------------------------------
   Show page header badge alignment
   ---------------------------------------- */

.user-edit-header h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ----------------------------------------
   Wider layout for audit index (override user-edit-page 800px cap)
   ---------------------------------------- */

.audit-index-wrapper {
  width: 100%;
}
/* EZ_Design reference system. Shared by every application and authentication screen. */
@font-face{font-family:Inter;src:url(/assets/inter-latin-36bd85b5b0f6ef27b8aba400163b86326dbb411f763fd74e0fd04bce8ad3da57.woff2) format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ez-primary:#4f43cc;--ez-primary-hover:#4035b2;--ez-ink:#1d2430;--ez-muted:#737e95;--ez-border:#dfe3ee;--ez-canvas:#f6f7f9;--ez-soft:#efeffc;--ez-dark:#0f1520;--ez-red:#f04438;--ez-green:#008653;--ez-orange:#f79009;--ez-radius:12px}
body.ez-app,body.ez-auth{margin:0;background:var(--ez-canvas);color:var(--ez-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;line-height:1.5;min-width:320px;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.ez-app *,body.ez-auth *{box-sizing:border-box}
body.ez-app .dm-sans,body.ez-app .space-grotesk,body.ez-app input,body.ez-app button,body.ez-app select,body.ez-app textarea,body.ez-auth input,body.ez-auth button{font-family:inherit}
body.ez-app a,body.ez-auth a{color:var(--ez-primary);text-decoration:none}
body.ez-app button,body.ez-auth button{cursor:pointer}
body.ez-app svg,body.ez-auth svg{flex-shrink:0;vertical-align:middle}
body.ez-app :focus-visible,body.ez-auth :focus-visible{outline:3px solid #aaa3ff;outline-offset:3px}
body.ez-app [hidden],body.ez-auth [hidden]{display:none!important}
body.ez-app h1,body.ez-app h2,body.ez-app h3,body.ez-app h4{color:var(--ez-ink);line-height:1.35;letter-spacing:-.025em}
body.ez-app .ez-sidebar{position:fixed;inset:0 auto 0 0;width:256px;background:var(--ez-dark);color:#d3d7df;z-index:60;display:flex;flex-direction:column;padding:18px 12px 12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#303849 transparent}
.ez-brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:650;letter-spacing:.3px;line-height:32px}
.ez-brand-logo{display:block;width:150px;max-width:100%;height:auto}
@media(max-width:767px){.ez-brand-logo{width:clamp(80px,24vw,110px)}}
body .ez-sidebar .ez-brand,body .ez-auth-story .ez-brand{color:white}
.ez-brand-mark{width:32px;height:32px;border-radius:10px;background:var(--ez-primary);display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 9px;flex-shrink:0}
.ez-brand-mark i{display:block;background:#fff;height:3px;border-radius:3px;width:14px}
.ez-brand-mark i:nth-child(2){width:9px}
.ez-sidebar-brand{padding:0 8px 20px;display:flex;align-items:center;justify-content:space-between}
.ez-navigation{padding-bottom:24px}
.ez-nav-label{font-size:11px;font-weight:600;letter-spacing:.8px;color:#7e8798;margin:16px 12px 7px;display:flex;align-items:center;gap:6px}
.ez-nav-label:not(:first-child){margin-top:28px}
.ez-admin-label{color:#8e87ff}
body .ez-sidebar .ez-nav-item{height:38px;padding:0 12px;display:flex;align-items:center;gap:10px;color:#d3d7df;border-radius:8px;margin:2px 0;font-size:14px;font-weight:450;transition:background .15s}
.ez-nav-item .ez-icon{color:#9ca5b5}
body .ez-sidebar .ez-nav-item:hover{background:#202738}
body .ez-sidebar .ez-nav-item.active{background:var(--ez-primary);color:white}
.ez-nav-item.active .ez-icon{color:white}
.ez-sidebar-footer{margin-top:auto;border-top:1px solid #222a39;padding-top:12px}
body .ez-account{display:flex;align-items:center;gap:10px;background:#171f2e;padding:8px;border-radius:8px;color:#fff}
.ez-avatar{width:32px;height:32px;border:1px solid #dcdcff;background:#efefff;color:#4f43cc;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}
.ez-account-text{min-width:0;flex:1;display:flex;flex-direction:column;font-size:12px}
.ez-account-text strong,.ez-account-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ez-account-text small{color:#7e8798;font-size:11px;margin-top:2px}
.ez-workspace{margin-left:256px;min-height:100vh;min-width:0}
.ez-topbar{height:68px;position:relative;background:white;border-bottom:1px solid var(--ez-border);display:flex;align-items:center;gap:20px;padding:0 28px;z-index:40}
.ez-page-heading{margin-right:auto;min-width:0}
.ez-page-heading>span{color:#65718a;font-size:12px}
.ez-page-heading h1{font-size:20px;font-weight:650;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:580px}
body.ez-app .ez-topbar .global-search-container{width:280px;max-width:28vw;flex:none;position:relative;margin:0}
body.ez-app .ez-topbar .dashboard-search{margin:0;width:100%;max-width:none;position:relative;display:flex;align-items:center}
body.ez-app .ez-topbar .dashboard-search input{height:38px;padding:0 12px 0 35px;background:var(--ez-canvas);border:1px solid var(--ez-border);border-radius:8px;font-size:12px;width:100%}
body.ez-app .ez-topbar .dashboard-search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none}
body.ez-app .dashboard-top-btns{display:flex;gap:20px;align-items:center;margin:0}
body.ez-app .notification-bell{width:38px;height:38px;background:var(--ez-canvas);border:1px solid var(--ez-border);border-radius:8px;display:grid;place-items:center;position:relative;padding:0}
body.ez-app .notification-badge{min-width:8px;width:8px;height:8px;padding:0;background:var(--ez-red);font-size:0;top:5px;right:6px;border:1px solid white}
body.ez-app .user-menu-button{border:0;border-left:1px solid var(--ez-border);border-radius:0;background:transparent;padding:0 0 0 20px;width:auto;height:32px;display:flex;align-items:center;gap:10px}
body.ez-app .user-menu-button:after{content:'⌄';color:#737e95}
body.ez-app .user-avatar-circle{width:32px;height:32px;background:#efefff;color:var(--ez-primary);border:1px solid #ddddff;font-size:12px;font-weight:600}
body.ez-app .user-dropdown,body.ez-app .notification-dropdown,body.ez-app .global-search-dropdown{border:1px solid var(--ez-border);border-radius:10px;box-shadow:0 8px 32px #1820381a;z-index:100}
.ez-page{padding:24px 28px 48px;min-width:0}
.ez-admin-banner{height:32px;background:#202839;color:#d7dce8;display:flex;align-items:center;gap:8px;font-size:11px;padding:0 28px}
.ez-icon-button{border:0;background:transparent;padding:7px;color:var(--ez-muted);display:inline-flex;align-items:center;justify-content:center;border-radius:6px}
.ez-drawer-toggle,.ez-drawer-close,.ez-mobile-brand,.ez-drawer-scrim{display:none}
body.ez-app .dashboard-content{padding:0;margin:0;width:auto;max-width:none;min-height:0;background:transparent}
body.ez-app .ez-page .dashboard-top-bar{display:none}
body.ez-app .dashboard-box{margin:0 0 20px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
body.ez-app .dashboard-table-wrapper{border:0;background:transparent;padding:0;margin:0;min-width:0}
body.ez-app .dashboard-table-head{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:0;margin:0 0 20px;border:0;background:transparent;flex-wrap:wrap}
body.ez-app .dashboard-table-head>span,body.ez-app .task-title-section{display:none}
body.ez-app .dashboard-table-filters{display:flex;flex:1;gap:12px;align-items:center;max-width:none;flex-wrap:wrap}
body.ez-app .dashboard-search{max-width:380px;width:380px;flex:1;min-width:150px;margin:0;position:relative}
body.ez-app .dashboard-search input{width:100%;height:40px;border:1px solid #cbd2e4;border-radius:7px;background:white;padding:0 12px 0 36px;font-size:13px;line-height:normal;color:var(--ez-ink)}
body.ez-app .dashboard-search svg{left:12px;right:auto;width:16px;height:16px;top:12px;position:absolute}
body.ez-app input::placeholder,body.ez-app textarea::placeholder,body.ez-auth input::placeholder{color:#98a2b7;opacity:1}
body.ez-app :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=password],input[type=search],select,textarea),body.ez-auth :is(input[type=text],input[type=email],input[type=tel],input[type=password],textarea){border:1px solid #cbd2e4;border-radius:6px;background:#fff;color:var(--ez-ink);font-family:inherit;font-size:13px;padding:10px 12px;min-height:40px;max-width:100%;box-shadow:none}
body.ez-app textarea,body.ez-auth textarea{width:100%;min-height:94px;resize:vertical}
body.ez-app :is(input,select,textarea):focus,body.ez-auth input:focus{border-color:#8279e7;box-shadow:0 0 0 3px #4f43cc12}
body.ez-app :is(input[type=checkbox],input[type=radio]),body.ez-auth :is(input[type=checkbox],input[type=radio]){accent-color:var(--ez-primary);width:16px;height:16px;flex-shrink:0;cursor:pointer}
body.ez-app .custom-select{min-width:100px;width:auto;max-width:240px;position:relative;font-size:13px}
body.ez-app .custom-select summary{padding:9px 12px;min-height:40px;gap:15px;border:1px solid #cbd2e4;border-radius:6px;background:white;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:13px;color:#364055}
body.ez-app .custom-select ul{background:white;border:1px solid var(--ez-border);border-radius:8px;box-shadow:0 6px 20px #1d243014;padding:5px;max-height:300px;overflow:auto;z-index:45;min-width:180px}
body.ez-app .custom-select li{padding:8px 10px;cursor:pointer;border-radius:5px;list-style:none;font-size:12px}
body.ez-app .custom-select li:hover,body.ez-app .custom-select li.active{background:var(--ez-soft);color:var(--ez-primary)}
body.ez-app :is(.btn,.action-button,.action-btn,.add-new-btn,.plan-button,.admin-bulk-btn,.refresh-btn,.bulk-action-btn,.ez-button),body.ez-auth .ez-button{border:1px solid #cbd2e4;border-radius:6px;background:white;color:#364055;display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:36px;padding:8px 14px;font-size:12px;font-weight:550;line-height:1.4;white-space:nowrap;text-decoration:none;box-shadow:none;transition:background .15s;cursor:pointer;width:auto}
body.ez-app :is(.btn-primary,.primary-btn,.action-button.primary,.action-btn.primary,.add-new-btn,.plan-button.primary,.ez-primary,.bulk-modal-btn.primary),body.ez-auth .ez-primary{background:var(--ez-primary);border-color:var(--ez-primary);color:white}
body.ez-app :is(.btn-primary,.primary-btn,.action-button.primary,.add-new-btn,.ez-primary):hover,body.ez-auth .ez-primary:hover{background:var(--ez-primary-hover);border-color:var(--ez-primary-hover);color:white;transform:none;box-shadow:none}
body.ez-app :is(.btn-secondary,.action-button.secondary,.btn-outline){background:white;color:#3c465a;border:1px solid #cbd2e4}
body.ez-app :is(.action-button.danger,.ez-danger),body.ez-auth .ez-danger{background:#d92d20;color:white;border-color:#d92d20}
body.ez-app button:disabled,body.ez-app input:disabled,body.ez-auth button:disabled{opacity:.5;cursor:not-allowed}
body.ez-app table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;color:#515d73;margin:0;background:white;border-radius:10px;border:1px solid var(--ez-border);table-layout:auto;min-width:0}
body.ez-app table :is(th,td){border:0;border-bottom:1px solid #edf0f5;text-align:left;vertical-align:middle;padding:14px 16px;white-space:normal;line-height:1.5;min-width:0;font-size:12px}
body.ez-app table th{background:var(--ez-canvas);color:#6f7a90;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;padding:12px 16px}
body.ez-app table th:first-child{border-radius:10px 0 0 0}body.ez-app table th:last-child{border-radius:0 10px 0 0}
body.ez-app table tbody tr:last-child td{border-bottom:0}
body.ez-app table tbody tr{background:white;transition:background .1s}
body.ez-app table tbody tr:hover{background:#fafaff}
body.ez-app table tbody tr:has(input[type=checkbox]:checked){background:var(--ez-soft)}
body.ez-app .table-scroll-wrapper,body.ez-app .table-wrap,body.ez-app .billing-table-container{width:100%;overflow:auto;border:0;border-radius:10px 10px 0 0;margin:0;background:white}
body.ez-app table .checkbox-col{width:36px;padding-left:18px;padding-right:6px}
body.ez-app table .label{padding:0;margin:0;display:inline-flex;align-items:center;position:relative;width:18px;height:18px}
body.ez-app table .label input{position:static!important;opacity:1!important;appearance:auto;display:block!important;margin:0;width:17px;height:17px;pointer-events:auto!important}
body.ez-app table .label i{display:none}
body.ez-app table .address-col{min-width:150px;font-weight:600;color:var(--ez-ink)}
body.ez-app table .action-col{width:auto;white-space:nowrap}
body.ez-app table .description-col{min-width:180px;max-width:260px}
body.ez-app table .company-col{min-width:130px}
body.ez-app table a{color:inherit}
body.ez-app table :is(.task-link,.task-title,.property-address,.company-name){color:var(--ez-ink);font-weight:550;font-size:12px}
body.ez-app table small,body.ez-app .text-muted{color:var(--ez-muted);font-size:11px}
body.ez-app .table-action-button,body.ez-app .actions-dropdown-btn{display:inline-flex;align-items:center;justify-content:center;padding:5px 7px;background:transparent;color:var(--ez-muted);border:0;border-radius:5px;min-width:28px;min-height:28px;font-size:11px;gap:4px;box-shadow:none}
body.ez-app .table-action-button svg{width:16px;height:16px}
body.ez-app .table-action-btns{gap:3px;display:flex;justify-content:flex-end}
body.ez-app .pagination,body.ez-app .admin-pagination{border:1px solid var(--ez-border);border-top:0;background:white;border-radius:0 0 10px 10px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;margin:0;font-size:12px}
body.ez-app .pagination-indicator{font-size:12px;color:#65718a;margin:0}
body.ez-app .pagination-items,body.ez-app .pagination-btns,body.ez-app .pagy{display:flex;align-items:center;gap:4px}
body.ez-app :is(.pagination-item,.pagination-btn,.pagy a){border:1px solid var(--ez-border);border-radius:6px;min-width:32px;height:32px;font-size:12px;display:inline-flex;justify-content:center;align-items:center;padding:4px 9px;color:#525e75;background:white;margin:0}
body.ez-app :is(.pagination-item.active,.pagy a.current){background:var(--ez-soft);border-color:#c8c5ff;color:var(--ez-primary)}
body.ez-app :is(.status,.status-badge,.priority-badge,.task-badge,.badge,.subscription-badge,.audit-status-badge,.result-badge){display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:20px;font-size:10px;line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none;border:1px solid #e1e5ef;background:#f6f7fa;color:#6d7990;white-space:nowrap}
body.ez-app :is(.resolved,.status-resolved,.status-closed,.confirmed-badge,.monitoring,.audit-status-sent,.audit-status-success,.subscription-badge.active,.badge-success){color:#008653;background:#effcf6;border-color:#c7eedf}
body.ez-app :is(.pending,.status-pending,.reported,.priority-badge.medium,.subscription-badge.trialing){color:#b26d00;background:#fffaeb;border-color:#fde4a9}
body.ez-app :is(.in_progress,.status-in_progress,.court){color:#2786d9;background:#eef7ff;border-color:#c7e5ff}
body.ez-app :is(.overdue,.urgent,.priority-badge.high,.audit-status-failed,.badge-danger,.subscription-badge.past_due){color:#d92d20;background:#fff4f3;border-color:#ffd1cc}
body.ez-app :is(.admin-badge,.super-admin-badge,.user-badge){color:var(--ez-primary);background:var(--ez-soft);border-color:#dcd9ff}
.ez-count{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:16px;background:#f6f7fa;border:1px solid var(--ez-border);color:#59657b;font-size:12px;font-weight:400}
.ez-count:before{content:'';width:6px;height:6px;border-radius:50%;background:#98a2b7}
.ez-count.danger{color:#f04438;background:#fff5f4;border-color:#ffc7c1}.ez-count.danger:before{background:#f04438}
.ez-count.warning{color:#d78000;background:#fffaeb;border-color:#ffda85}.ez-count.warning:before{background:#f79009}
body.ez-app .trial-banner{background:var(--ez-soft);border:1px solid #c5c5ff;border-radius:9px;padding:14px 16px;color:var(--ez-primary);margin:0 0 20px;box-shadow:none}
.ez-trial{display:flex;align-items:flex-start;gap:14px}.ez-trial-copy{flex:1}.ez-trial-copy strong{font-size:13px;font-weight:600}.ez-trial-copy p{margin:2px 0 0;color:#5b6475;font-size:12px}.ez-trial>a{font-weight:600;white-space:nowrap}.ez-trial .ez-icon-button{margin:-4px -5px 0 0}
body.ez-app .bulk-actions-toolbar,body.ez-app .admin-bulk-actions{background:var(--ez-soft);border:1px solid #c5c5ff;border-radius:8px;padding:10px 14px;margin-bottom:20px;color:var(--ez-primary)}
body.ez-app .bulk-actions-content{display:flex;align-items:center;justify-content:flex-start;gap:24px}
body.ez-app .bulk-actions-buttons{gap:10px;display:flex;align-items:center}
body.ez-app .bulk-clear-btn{background:transparent;border:0;color:#566177;font-size:12px;padding:7px}
body.ez-app .monitoring-toggle{width:auto;justify-content:flex-start}
body.ez-app .monitoring-toggle .status-badge{background:none;border:0;padding:0;display:flex;flex-direction:row-reverse;gap:8px;font-size:12px}
body.ez-app .monitoring-toggle .status-text{font-size:12px;text-transform:none;letter-spacing:0;font-weight:400}
body.ez-app .toggle-switch{width:36px;height:20px;min-width:36px;padding:0;border:0;border-radius:20px;background:#cfd5e1;position:relative}
body.ez-app .toggle-switch.on{background:var(--ez-primary)}
body.ez-app .toggle-slider{width:16px;height:16px;background:white;position:absolute;left:2px;top:2px;border-radius:50%;transform:none;box-shadow:0 1px 2px #0001}
body.ez-app .toggle-switch.on .toggle-slider{transform:translateX(16px)}
body.ez-app .dropdown-menu{background:white;border:1px solid var(--ez-border);box-shadow:0 8px 24px #18203824;border-radius:8px;padding:5px;min-width:180px;z-index:45}
body.ez-app .dropdown-item{font-size:12px;padding:8px 10px;border:0;border-radius:4px;color:#465167;background:transparent;width:100%;text-align:left}
body.ez-app .dropdown-item:hover{background:var(--ez-soft)}
body.ez-app :is(.alerts-layout,.property-alerts-layout,.city-complaints-layout,.oath-hearings-layout){display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:start;background:transparent}
body.ez-app :is(.type-sidebar,.complaints-sidebar,.agency-sidebar){width:100%;min-width:0;max-width:none;position:static;background:transparent;border:0;padding:0;margin:0;box-shadow:none}
body.ez-app .sidebar-header{padding:0 10px 8px;margin:0;border:0;background:transparent}
body.ez-app .sidebar-title{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;color:#929bad}
body.ez-app :is(.type-filter-list,.agency-filter-list,.descriptor-filter-list){gap:2px;display:flex;flex-direction:column;background:none;padding:0}
body.ez-app :is(.type-filter-item,.agency-filter-item,.descriptor-filter-item){display:flex;align-items:center;justify-content:space-between;gap:6px;border:0!important;padding:7px 10px;border-radius:6px;margin:0;background:transparent;font-size:11px;color:#6e798f;min-height:32px}
body.ez-app :is(.type-filter-item,.agency-filter-item,.descriptor-filter-item).active{background:var(--ez-soft);color:var(--ez-primary)}
body.ez-app :is(.type-filter-label,.agency-filter-label,.descriptor-filter-label){color:inherit!important;font-size:11px;font-weight:500}
body.ez-app :is(.type-filter-item,.agency-filter-item).ez-colored-filter{color:var(--ez-filter-color);border-left:3px solid var(--ez-filter-color)!important}
body.ez-app :is(.type-filter-item,.agency-filter-item).ez-colored-filter:is(:hover,.active){background:var(--ez-filter-background);color:var(--ez-filter-color)}
body.ez-app :is(.type-filter-badge,.agency-filter-badge){display:flex;gap:6px;align-items:center}
body.ez-app .type-filter-badge svg{display:inline-block}
body.ez-app .city-complaints-layout .agency-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:600;letter-spacing:.5px;white-space:nowrap}
body.ez-app :is(.type-filter-count,.agency-filter-count,.descriptor-filter-count){background:transparent;color:inherit;font-size:10px;padding:0;min-width:16px}
body.ez-app :is(.alerts-content,.property-alerts-content,.city-complaints-content,.oath-hearings-content){min-width:0;padding:0}
body.ez-app :is(.city-complaints-content,.oath-hearings-content) .dashboard-table-filters{gap:8px}
body.ez-app .filter-group{display:flex;gap:6px;align-items:center;min-width:0}
body.ez-app .filter-group select{max-width:170px}
body.ez-app .filter-group input[type=date]{width:135px;font-size:11px}
body.ez-app .upcoming-checkbox-label{font-size:11px;color:#65718a}
body.ez-app :is(.empty-state,.task-empty-state,.admin-empty-state,.no-billing-history){text-align:center;background:white;padding:55px 25px;color:var(--ez-muted);border:1px solid var(--ez-border);border-radius:10px}
body.ez-app :is(.empty-state,.task-empty-state,.admin-empty-state) h3{font-size:17px;margin:14px 0 8px}
body.ez-app :is(.empty-state,.task-empty-state) p{font-size:12px;max-width:520px;margin:0 auto 20px}
body.ez-app .task-empty-icon svg{width:48px;height:48px;padding:10px;background:var(--ez-soft);border-radius:10px}
body.ez-app .task-empty-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:680px;margin:20px auto}
body.ez-app .task-empty-step{background:var(--ez-canvas);padding:16px;border-radius:8px;text-align:left;display:block}
body.ez-app .task-empty-step-number{background:var(--ez-primary);color:white;font-size:11px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;margin-bottom:10px}
body.ez-app .task-empty-step-title{font-size:12px;font-weight:600;color:var(--ez-ink)}
body.ez-app .task-empty-step-description{font-size:11px;margin-top:5px}
.ez-back-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;margin-bottom:20px;color:#6f7a90!important}
.ez-flash{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:8px;border:1px solid #c7eedf;background:#effcf6;color:#067647;margin-bottom:18px;font-size:13px}
.ez-flash-error{background:#fff4f3;color:#b42318;border-color:#ffd1cc}
.ez-flash-success{animation:ez-flash-fade-out .3s ease 5s forwards}
@keyframes ez-flash-fade-out{from{opacity:1}to{opacity:0}}
body.ez-app .ez-page> .ez-flash~div :is(.flash-message,.flash-auto-dismiss){display:none}
/* Dashboard and statistics */
body.ez-app .dashboard-enhanced{padding:0;max-width:none;margin:0;background:transparent;min-height:0}
body.ez-app .dashboard-header{margin:0 0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;flex-wrap:wrap}
body.ez-app .dashboard-title{display:none}
body.ez-app .dashboard-filters{gap:10px;display:flex;align-items:center;margin-left:auto}
body.ez-app .time-period-filter{display:flex;align-items:center;gap:8px}
body.ez-app .filter-label,body.ez-app .last-updated{font-size:11px;color:var(--ez-muted)}
body.ez-app .dashboard-info-banner{padding:0;margin:0;border:0;box-shadow:none;background:transparent;flex:1;max-width:650px}
body.ez-app .dashboard-info-banner-content{gap:8px;align-items:center}
body.ez-app .dashboard-info-banner-text{font-size:12px;color:var(--ez-muted)}
body.ez-app .metrics-grid,body.ez-app .metrics-grid-customer{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:0 0 20px}
body.ez-app .metric-card{background:white;border:1px solid var(--ez-border);border-radius:12px;padding:18px;min-height:140px;box-shadow:0 1px 2px #18203807;display:flex;flex-direction:column;color:var(--ez-ink);position:relative;overflow:hidden}
body.ez-app .metric-card:hover{transform:none;box-shadow:0 2px 8px #1820380d;border-color:#c5c1f5}
body.ez-app .metric-card:before,body.ez-app .metric-card:after{display:none}
body.ez-app .metric-card-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;gap:5px}
body.ez-app .metric-title{color:#566177;font-size:12px;font-weight:500;line-height:1.35}
body.ez-app .metric-value{font-size:28px;line-height:1.2;font-weight:600;color:var(--ez-ink);margin:0 0 12px}
.ez-metric-icon{width:30px;height:30px;background:var(--ez-soft);color:var(--ez-primary);display:grid;place-items:center;border-radius:8px;flex-shrink:0}
.metric-card-red .ez-metric-icon{background:#fff3f3;color:#f04438}.metric-card-yellow .ez-metric-icon{background:#fffaeb;color:#f79009}.metric-card-orange .ez-metric-icon{background:#fff3f3;color:#f04438}
body.ez-app .metric-footer{margin-top:auto;padding:0;border:0;display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--ez-muted)}
body.ez-app .metric-change{background:none;padding:0;font-size:11px;font-weight:600;color:var(--ez-green)}
body.ez-app .metric-card-red .metric-change.up{color:#d92d20}
body.ez-app .metric-comparison{font-size:10px}
body.ez-app .dashboard-grid,body.ez-app .dashboard-grid-customer{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
body.ez-app :is(.dashboard-column-left,.dashboard-column-right){display:flex;flex-direction:column;gap:20px;min-width:0}
body.ez-app .widget{border:1px solid var(--ez-border);border-radius:12px;background:white;box-shadow:0 1px 2px #18203807;padding:0;margin:0;overflow:hidden}
body.ez-app .widget-header{padding:16px 18px;border-bottom:1px solid var(--ez-border);margin:0;min-height:52px;background:white;display:flex;align-items:center;justify-content:space-between}
body.ez-app .widget-title{font-size:14px;font-weight:600;margin:0}
body.ez-app .widget-content{padding:0;margin:0}
body.ez-app .widget .empty-state{border:0;padding:36px 20px}
body.ez-app :is(.activity-list,.property-list,.alert-list,.hearing-list){margin:0;padding:0;list-style:none;max-height:none}
body.ez-app :is(.activity-item,.property-item,.alert-item,.hearing-item){display:flex;padding:15px 18px;gap:12px;border:0;border-bottom:1px solid #edf0f5;border-radius:0;background:white;margin:0;min-width:0;box-shadow:none}
body.ez-app :is(.activity-item,.property-item,.alert-item,.hearing-item):last-child{border-bottom:0}
body.ez-app .activity-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:grid;place-items:center}
body.ez-app :is(.activity-title,.property-address,.alert-title,.hearing-date-label){font-size:12px;font-weight:550;line-height:1.4;color:var(--ez-ink)}
body.ez-app :is(.activity-property,.activity-description,.alert-property,.hearing-count-label,.property-metric){font-size:11px;color:var(--ez-muted);margin-top:3px}
body.ez-app :is(.activity-time,.alert-date){font-size:10px;color:#929cb1;white-space:nowrap}
body.ez-app .activity-description{display:none}
body.ez-app .chart-container{padding:18px;height:285px!important;min-height:260px}
body.ez-app .task-summary-widget .widget-content,body.ez-app .financial-impact-widget .widget-content{padding:18px}
body.ez-app .financial-total{background:none;padding:0 0 18px;border:0;text-align:left}
body.ez-app .financial-amount{font-size:28px;font-weight:600;color:var(--ez-ink)}
body.ez-app .financial-label{font-size:12px;color:var(--ez-muted)}
body.ez-app .financial-breakdown{padding:12px 0;border-top:1px solid #edf0f5;margin:0;background:none}
body.ez-app .financial-breakdown .breakdown-item{padding:8px 0}
body.ez-app .hearing-date-badge{background:var(--ez-canvas);border:1px solid var(--ez-border);border-radius:8px;width:44px;min-width:44px;padding:4px}
body.ez-app .hearing-day{font-size:17px;font-weight:600;color:var(--ez-ink)}
body.ez-app .hearing-month{font-size:10px;color:var(--ez-muted)}
body.ez-app :is(.statistic,.stats-grid,.admin-stats-grid,.kpi-grid){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 20px;padding:0;background:transparent}
body.ez-app .admin-stats-grid,body.ez-app .kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
body.ez-app :is(.statistic-item,.stat-card,.admin-stat-card,.kpi-card){background:white!important;border:1px solid var(--ez-border);border-radius:10px;padding:18px;min-height:105px;box-shadow:none;display:flex;flex-direction:column;justify-content:center;gap:8px;color:var(--ez-ink)!important}
body.ez-app .statistic-item p,body.ez-app .stat-content h3,body.ez-app .kpi-title{font-size:12px;font-weight:500;color:#6c778c;margin:0}
body.ez-app .statistic-item>span,body.ez-app .stat-number,body.ez-app .stat-content p,body.ez-app .kpi-value{font-size:26px;font-weight:600;line-height:1.2;color:var(--ez-ink);margin:0}
body.ez-app .statistic-item.active{border-color:#9a93ed;background:var(--ez-soft)!important}
body.ez-app .stat-icon{display:none}
body.ez-app .stat-content{padding:0}
/* Forms and detail screens */
body.ez-app :is(.user-edit-page,.user-profile-page,.company-settings-container,.settings-content,.task-show-container,.admin-task-edit-page,.admin-task-show-page,.city-complaint-show-container,.oath-hearing-show-container,.super-admin-dashboard,.dash-wrap,.plans-page,.billing-payments){padding:0;margin:0;max-width:none;background:transparent;font-family:inherit}
body.ez-app :is(.user-edit-page,.company-settings-container,.admin-task-edit-page){max-width:840px}
body.ez-app .settings-content{max-width:940px}
body.ez-app :is(.settings-header,.user-edit-header,.super-admin-header,.page-title){margin:0 0 20px;padding:0;background:transparent}
body.ez-app :is(.settings-header,.user-edit-header,.super-admin-header)>h1,body.ez-app .page-title>div:first-child{display:none}
body.ez-app .user-edit-content,body.ez-app .form-container{background:white;border:1px solid var(--ez-border);border-radius:10px;padding:24px;box-shadow:none;margin:0}
body.ez-app :is(.form-section,.settings-section,.profile-section,.task-card,.detail-section,.billing-section,.billing-history-section,.analytics-card,.panel,.quick-actions,.recent-activity){background:white;border:1px solid var(--ez-border);border-radius:10px;padding:20px;box-shadow:0 1px 2px #18203805;margin:0 0 20px}
body.ez-app .form-section{border:0;border-radius:0;border-bottom:1px solid #edf0f5;padding:0 0 20px;margin:0 0 20px;box-shadow:none}
body.ez-app :is(.form-section h3,.settings-section-title,.profile-section h2,.task-card h3,.detail-section .section-title,.billing-section h2,.billing-history-section h2,.panel-title,.quick-actions h2,.recent-activity h2,.analytics-card h3){font-size:14px;font-weight:600;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #edf0f5;color:var(--ez-ink)}
body.ez-app :is(.form-row,.ez-form-row){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
body.ez-app :is(.form-group,.input-group,.form-field){display:flex;flex-direction:column;gap:6px;margin:0 0 16px;min-width:0;flex:1}
body.ez-app :is(.form-label,.form-group label,.form-field label,.input-group label){font-size:12px;font-weight:500;color:#4a556a;margin:0}
body.ez-app :is(.form-input,.form-control,.form-group select,.input-group input,.form-field input){width:100%}
body.ez-app .input-group .custom-select{width:100%;max-width:none}
body.ez-app :is(.field-help,.form-help,.settings-section-description,.notification-section-description){font-size:11px;color:var(--ez-muted);margin:3px 0 0;line-height:1.5}
body.ez-app :is(.form-actions,.ez-form-actions){display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 0 0;margin:0;border:0;flex-wrap:wrap}
body.ez-app .form-actions .secondary{order:-1}
body.ez-app .settings-section-header{margin:0 0 20px;padding:0;border:0}
body.ez-app .notification-global-section{margin:0;padding:18px 0;border-bottom:1px solid #edf0f5}
body.ez-app .notification-section-title{font-size:12px;margin:0 0 4px;font-weight:600}
body.ez-app :is(.notification-global-options,.notification-default-options){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
body.ez-app .notification-default-options{grid-template-columns:repeat(4,minmax(0,1fr))}
body.ez-app :is(.notification-global-option-content,.notification-default-option-content){padding:12px;border:1px solid var(--ez-border);border-radius:7px;min-height:58px;display:flex;align-items:center;gap:8px;background:white;box-shadow:none}
body.ez-app :is(.notification-global-option,.notification-default-option) input:checked+div{background:var(--ez-soft);border-color:#8d84da}
body.ez-app :is(.notification-global-text,.notification-default-text) h4{font-size:12px;margin:0 0 3px}
body.ez-app :is(.notification-global-text,.notification-default-text) p{font-size:10px;margin:0;color:var(--ez-muted)}
body.ez-app :is(.notification-global-icon,.notification-icon){width:26px;height:26px;min-width:26px;border-radius:6px}
body.ez-app .notification-info-card{background:var(--ez-soft);border:1px solid #d9d5ff;border-radius:8px;padding:12px;margin:20px 0 0}
body.ez-app .notification-info-content :is(h4,p){font-size:11px;margin:0 0 4px}
body.ez-app .user-profile-header{background:white;border:1px solid var(--ez-border);border-radius:10px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 20px}
body.ez-app .user-info{display:flex;align-items:center;gap:16px}
body.ez-app .user-avatar{width:56px;height:56px;background:var(--ez-soft);color:var(--ez-primary);font-size:19px;border:0}
body.ez-app .user-details h1{font-size:20px;margin:0 0 3px}
body.ez-app .user-profile-content,body.ez-app .billing-info-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
body.ez-app .details-grid{display:flex;flex-direction:column;gap:12px}
body.ez-app .detail-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:12px}
body.ez-app .detail-colon{display:none}
body.ez-app .detail-label{font-size:11px;color:var(--ez-muted);font-weight:400}
body.ez-app .detail-value{font-size:12px;color:var(--ez-ink);font-weight:500;word-break:break-word}
body.ez-app .detail-row .detail-value{text-align:right}
body.ez-app :is(.task-grid,.task-layout){display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:20px;margin:0}
body.ez-app :is(.task-header,.city-complaint-header,.oath-hearing-header){background:white;border:1px solid var(--ez-border);border-radius:10px;padding:20px;margin:0 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:none}
body.ez-app .task-title{font-size:21px;margin:0 0 10px}
body.ez-app .task-badges{gap:6px;display:flex;flex-wrap:wrap}
body.ez-app .task-details-list{padding:0;margin:0;list-style:none}
body.ez-app .task-details-list li{display:flex;justify-content:space-between;gap:12px;border:0;padding:9px 0;font-size:12px}
body.ez-app .task-details-list strong{font-size:11px;color:var(--ez-muted);font-weight:400}
body.ez-app .task-details-list span{text-align:right;overflow-wrap:anywhere;max-width:65%}
body.ez-app .task-activity-section{max-width:calc(66.666% - 7px)}
body.ez-app .note-item{padding:14px 0;margin:0;display:flex;gap:12px;border-bottom:1px solid #edf0f5;background:transparent}
body.ez-app .note-icon{width:26px;height:26px;min-width:26px;background:var(--ez-soft);color:var(--ez-primary);border-radius:50%;padding:6px}
body.ez-app .note-author{font-size:12px;font-weight:600}
body.ez-app .note-timestamp{font-size:10px;color:var(--ez-muted)}
body.ez-app .note-content{font-size:12px;color:#5f6a7e;margin-top:5px;overflow-wrap:anywhere}
body.ez-app .note-header{gap:10px;display:flex;flex-wrap:wrap}
body.ez-app .notes-feed{margin:0 0 16px;max-height:none}
body.ez-app .new-note-form-container h4{display:none}
body.ez-app .info-cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}
body.ez-app .info-card{background:white;border:1px solid var(--ez-border);border-radius:8px;padding:16px;box-shadow:none}
body.ez-app .info-card-label{font-size:11px;color:var(--ez-muted);margin-bottom:8px}
body.ez-app .info-card-value{font-size:16px;font-weight:600}
body.ez-app .detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
body.ez-app .detail-item{display:flex;flex-direction:column;gap:5px;border:0;padding:0;min-width:0}
body.ez-app .detail-full-width{grid-column:1/-1}
body.ez-app .header-title-section h1{font-size:21px;margin:0 0 8px}
body.ez-app .agency-badge-large{font-size:11px;padding:3px 8px;border-radius:5px;background:var(--ez-soft);color:var(--ez-primary)}
body.ez-app .critical-order-banner{padding:14px 18px;border-radius:8px;background:#fff4f3;border:1px solid #ffd1cc;color:#b42318;margin:0 0 20px;box-shadow:none}
body.ez-app .fdny-trigger-card{background:white;border:1px solid var(--ez-border);border-radius:10px;padding:14px 18px;margin:0 0 20px}
body.ez-app .fdny-modal-trigger-btn{background:none;border:0;display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:var(--ez-ink)}
body.ez-app .plans-page{padding:20px 0}
.ez-plans-heading{text-align:center;margin:0 0 30px}.ez-plans-heading h2{font-size:24px;margin:0 0 8px}.ez-plans-heading p{color:var(--ez-muted)}
body.ez-app .plans-container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 auto;max-width:1060px}
body.ez-app .plan-card{background:white;border:1px solid var(--ez-border);border-radius:12px;padding:28px 24px;box-shadow:none;transform:none;display:flex;flex-direction:column;position:relative;margin:0}
body.ez-app .plan-card.featured{border:2px solid var(--ez-primary);padding:27px 23px}
body.ez-app .plan-card:hover{transform:none}
body.ez-app .plan-badge{position:absolute;top:0;left:0;right:0;transform:none;background:var(--ez-primary);color:white;border-radius:9px 9px 0 0;padding:7px;text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:1px}
body.ez-app .plan-card.featured .plan-header{margin-top:16px}
body.ez-app .plan-header{text-align:left;padding:0;border:0;margin:0 0 20px}
body.ez-app .plan-header h3{font-size:18px;margin:0 0 12px}
body.ez-app .plan-price{justify-content:flex-start;gap:0;display:flex;align-items:baseline}
body.ez-app .plan-price .amount,body.ez-app .plan-price .currency{font-size:34px;font-weight:600;color:var(--ez-ink)}
body.ez-app .plan-price .period{color:var(--ez-muted);font-size:12px;margin-left:5px}
body.ez-app .feature-highlight{background:none;color:#647087;font-size:12px;padding:0 0 16px;border-bottom:1px solid #edf0f5;text-align:left}
body.ez-app .feature-list{padding:0;list-style:none;flex:1}
body.ez-app .feature-list li{font-size:12px;color:#68748a;margin:12px 0;padding-left:20px;position:relative}
body.ez-app .feature-list li:before{content:'✓';position:absolute;left:0;color:#42a882}
body.ez-app .plan-features{flex:1}
body.ez-app .plan-button{width:100%;margin-top:15px}
body.ez-app .plans-footer{text-align:center;font-size:11px;color:var(--ez-muted);margin-top:28px}
/* Operations, audit and notification pages */
body.ez-app .admin-filters-section{padding:0;margin:0 0 20px;background:transparent;border:0}
body.ez-app .admin-filters-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.ez-app .admin-search-box{flex:1;max-width:none;min-width:220px;position:relative}
body.ez-app .admin-search-box input{width:100%}
body.ez-app .admin-filter-group{max-width:180px;flex:1;min-width:110px}
body.ez-app .admin-filter-group select{width:100%;font-size:12px}
body.ez-app .admin-quick-filters{margin-top:14px;font-size:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.ez-app .admin-quick-filters a{font-size:11px;color:#59657b;padding:4px 9px;border-radius:20px;background:white;border:1px solid var(--ez-border)}
body.ez-app .admin-quick-filters a.active{background:var(--ez-primary);color:white;border-color:var(--ez-primary)}
body.ez-app .admin-tasks-table-section{padding:0;background:none;border:0;border-radius:10px;overflow:visible}
body.ez-app .admin-tasks-table{font-size:11px}
body.ez-app .admin-tasks-table :is(td,th){padding:12px 10px;font-size:11px}
body.ez-app .audit-filter-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:0;margin:0 0 20px;background:none;border:0}
body.ez-app .audit-filter-group{flex:1;min-width:100px}
body.ez-app .audit-filter-group :is(input,select){width:100%;font-size:12px}
body.ez-app .audit-filter-label{font-size:10px;color:var(--ez-muted);display:block;margin-bottom:5px}
body.ez-app .audit-stats-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px;background:none;border:0;padding:0}
body.ez-app .stat-chip{background:white;border:1px solid var(--ez-border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px}
body.ez-app .stat-chip-label{font-size:11px;color:var(--ez-muted)}
body.ez-app .stat-chip-value{font-size:25px;color:var(--ez-ink);font-weight:600}
body.ez-app .audit-detail-section{background:white;border:1px solid var(--ez-border);border-radius:10px;padding:20px;margin-bottom:20px;overflow:hidden}
body.ez-app .audit-detail-section-title{font-size:14px;margin:0 0 16px}
body.ez-app .audit-error-backtrace{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}
body.ez-app .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body.ez-app .analytics-section{display:grid;grid-template-columns:1fr 1fr;gap:20px}
body.ez-app .action-buttons{display:flex;gap:8px;flex-wrap:wrap}
body.ez-app .breakdown-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:12px;border-bottom:1px solid #edf0f5}
body.ez-app .notifications-page{padding:0;max-width:none;margin:0}
body.ez-app .notifications-page .page-header{background:none;border:0;padding:0 0 20px;display:flex;justify-content:space-between;align-items:center;gap:15px}
body.ez-app .notifications-page .header-title h1{display:none}
body.ez-app .notifications-container{background:white;border:1px solid var(--ez-border);border-radius:10px;overflow:hidden;padding:0}
body.ez-app .notification-card{padding:20px;border:0;border-bottom:1px solid #edf0f5;background:white;border-radius:0;margin:0;box-shadow:none;display:flex;gap:14px}
body.ez-app .notification-card.unread{background:#fafaff;border-left:3px solid var(--ez-primary);padding-left:17px}
body.ez-app .notification-message{font-size:12px;font-weight:500;color:var(--ez-ink)}
body.ez-app .notification-meta{font-size:11px;color:var(--ez-muted)}
/* Dialogs share the same desktop card / mobile sheet treatment. */
body.ez-app .popup-alerts{position:fixed;inset:0;z-index:1000;background:#0f152075;display:none;align-items:center;justify-content:center;padding:24px;overflow-y:auto;backdrop-filter:none}
body.ez-app .popup-alerts.active{display:flex}
body.ez-app :is(.popup-alerts-box,.bulk-modal-content,.fdny-modal-content){width:600px;max-width:100%;max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--ez-border);background:white;border-radius:12px;box-shadow:0 20px 50px #0f152033;padding:0;position:relative;margin:auto;transform:none}
body.ez-app :is(.popup-alerts-head,.bulk-modal-header,.fdny-modal-header){display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #edf0f5;font-size:16px;font-weight:600;background:white;position:sticky;top:0;z-index:2;margin:0}
body.ez-app .popup-alerts-close{width:30px;height:30px;display:grid;place-items:center;background:none;border:0;border-radius:6px;color:#8993a5;cursor:pointer}
body.ez-app :is(.alerts-additional-details,.property-details-modal,.oath-hearing-task-modal,.bulk-modal-body,.fdny-modal-body){padding:20px;min-width:0}
body.ez-app .alerts-details{display:grid;grid-template-columns:1fr;gap:0;padding:20px;margin:0}
body.ez-app .alerts-details-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;margin:0;padding:9px 0;font-size:12px;border:0}
body.ez-app .alerts-details-name{font-size:11px;color:var(--ez-muted);font-weight:400}
body.ez-app .alerts-details-value{font-size:12px;overflow-wrap:anywhere;font-weight:500}
body.ez-app .alerts-resolution-request{margin:0;padding:20px;background:var(--ez-canvas);border-top:1px solid var(--ez-border)}
body.ez-app .resolution-request-header{margin:0 0 10px}
body.ez-app .resolution-request-header h3{font-size:14px;margin:0 0 7px}
body.ez-app .resolution-request-header p{font-size:12px;color:var(--ez-muted)}
body.ez-app .bulk-modal{position:fixed;inset:0;z-index:1000;background:#0f152075;padding:24px;align-items:center;justify-content:center;overflow:auto}
body.ez-app .bulk-modal-content{max-width:480px}
body.ez-app .bulk-modal-footer{padding:16px 20px;border-top:1px solid #edf0f5;display:flex;gap:10px;justify-content:flex-end}
body.ez-app .trial-info-popup{margin:20px 20px 0;background:var(--ez-soft);border:1px solid #d9d5ff;border-radius:7px;padding:12px;font-size:12px;color:#5e568b}
/* Authentication */
body.ez-auth{background:white;display:grid;grid-template-columns:5fr 7fr;min-height:100dvh}
.ez-auth-story{background:radial-gradient(ellipse at 15% 10%,#5755c5 0,transparent 58%),radial-gradient(ellipse at 100% 72%,#38368b 0,transparent 53%),linear-gradient(165deg,#3b3296 0%,#252451 57%,#0f1520 100%);color:white;position:relative;min-height:100dvh;padding:56px;display:flex;flex-direction:column}
.ez-auth-copy{margin:auto 0;padding:70px 0}
.ez-auth-copy h1{font-size:34px;line-height:1.3;letter-spacing:-1px;font-weight:600;color:white;margin:0 0 24px}
.ez-auth-copy>p{font-size:14px;line-height:1.7;color:#c4c5e8;margin:0 0 32px}
.ez-auth-copy ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.ez-auth-copy li{display:flex;align-items:center;gap:12px;font-size:14px;color:#e2e3f9}
.ez-auth-copy li>span{width:24px;height:24px;border-radius:50%;background:#ffffff24;display:grid;place-items:center;flex-shrink:0}
.ez-auth-copyright{font-size:12px;color:#838cba;margin:0}
.ez-auth-main{display:flex;align-items:center;justify-content:center;padding:56px 40px;min-width:0}
.ez-auth-form{width:400px;max-width:100%}
.ez-auth-form h2{font-size:30px;font-weight:600;letter-spacing:-.7px;color:var(--ez-ink);margin:0 0 8px;line-height:1.3}
.ez-auth-intro{font-size:14px;line-height:1.5;color:var(--ez-muted);margin:0 0 26px}
.ez-form{display:flex;flex-direction:column;gap:18px}
.ez-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ez-field label{font-size:12px;font-weight:500;color:#364055}
body.ez-auth .ez-field input{height:42px;width:100%;font-size:13px}
.ez-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.ez-label-row a{font-weight:600}
.ez-password{position:relative}.ez-password input{padding-right:42px!important}.ez-password button{position:absolute;right:6px;top:5px;width:32px;height:32px;background:none;border:0;color:#98a2b7;border-radius:5px;display:grid;place-items:center}
body.ez-auth .ez-full{width:100%;height:44px;font-size:13px}
.ez-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#5a657b}
.ez-auth-switch{text-align:center;font-size:12px;color:var(--ez-muted);margin:22px 0 0}.ez-auth-switch a{font-weight:600}
.ez-auth-form .ez-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ez-auth-symbol{width:38px;height:38px;border-radius:8px;background:var(--ez-soft);color:var(--ez-primary);display:grid;place-items:center;margin-bottom:18px}
.ez-auth-form .ez-back-link{margin-bottom:28px;font-size:11px}
.ez-auth-mobile-brand{display:none}
.ez-account-danger{font-size:11px;color:var(--ez-muted);margin-top:24px}.ez-account-danger summary{cursor:pointer}
body .form-errors,body #error_explanation{border:1px solid #ffd1cc;background:#fff4f3;border-radius:8px;padding:14px;color:#b42318;font-size:12px;margin:0 0 18px}
body #error_explanation h2{font-size:14px;color:#b42318}
.ez-mobile-filter-button,.ez-filter-close,.ez-filter-apply{display:none}
/* Responsive layouts follow the supplied drawer, stacked-row and filter-sheet references. */
@media(min-width:1600px){.ez-page{max-width:1600px;margin:0 auto}}
@media(max-width:1200px){body.ez-app .ez-sidebar{width:224px}.ez-workspace{margin-left:224px}.ez-topbar{padding:0 22px}.ez-page{padding:22px}.ez-page-heading h1{max-width:350px}body.ez-app .metrics-grid,body.ez-app .metrics-grid-customer{grid-template-columns:repeat(3,minmax(0,1fr))}body.ez-app .admin-stats-grid,body.ez-app .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}body.ez-app .notification-default-options{grid-template-columns:repeat(2,minmax(0,1fr))}body.ez-app :is(.alerts-layout,.property-alerts-layout,.city-complaints-layout,.oath-hearings-layout){grid-template-columns:155px minmax(0,1fr);gap:14px}.ez-auth-story{padding:40px}.ez-auth-copy h1{font-size:30px}}
@media(max-width:1023px){body.ez-app .ez-sidebar{width:280px;transform:translateX(-100%);transition:transform .2s;z-index:1100}body.ez-app.ez-drawer-open .ez-sidebar{transform:translateX(0)}.ez-workspace{margin-left:0}.ez-drawer-toggle,.ez-drawer-close{display:inline-flex}.ez-drawer-scrim:not([hidden]){display:block;position:fixed;inset:0;background:#0f152077;border:0;z-index:1090}.ez-topbar{gap:12px}body.ez-app.ez-drawer-open{overflow:hidden}body.ez-app .ez-topbar .global-search-container{max-width:30vw}.ez-page-heading h1{max-width:350px}body.ez-app .plans-container{gap:14px}body.ez-app .plan-card{padding:25px 18px}.ez-auth-story{padding:32px}.ez-auth-copy h1{font-size:27px}.ez-auth-copy li{font-size:12px}}
@media(max-width:767px){body.ez-app{font-size:13px}.ez-topbar{height:64px;padding:0 16px;gap:12px;position:sticky;top:0;flex-wrap:nowrap}.ez-mobile-brand{display:block;margin-right:auto}.ez-mobile-brand .ez-brand{color:var(--ez-ink)}.ez-page-heading{position:absolute;left:0;top:64px;width:100%;padding:14px 16px;background:white;border-bottom:1px solid var(--ez-border);height:72px}.ez-page-heading>span{font-size:10px;text-transform:uppercase}.ez-page-heading h1{font-size:20px;max-width:100%;line-height:1.5}body.ez-app .ez-topbar .global-search-container{display:none}body.ez-app .dashboard-top-btns{gap:12px}body.ez-app .notification-bell{border:0;background:white;width:30px}body.ez-app .user-menu-button{padding:0;border:0}body.ez-app .user-menu-button:after{display:none}.ez-page{padding:88px 16px 32px}.ez-admin-banner{margin-top:72px;min-height:36px;height:auto;padding:8px 16px;font-size:10px}.ez-admin-banner+.ez-page{padding-top:16px}body.ez-app .notification-dropdown{position:fixed;left:12px;right:12px;top:60px;width:auto;max-width:none}body.ez-app .user-dropdown{position:fixed;right:12px;top:60px;max-width:calc(100vw - 24px)}body.ez-app .dashboard-table-head{gap:10px;margin-bottom:14px}body.ez-app .dashboard-table-filters{flex-direction:row;gap:8px;width:100%}body.ez-app .dashboard-search{width:auto!important;max-width:none!important;flex:1;min-width:0}body.ez-app .dashboard-search input{font-size:12px;height:42px}body.ez-app .dashboard-table-filters .add-new-btn{width:auto!important;min-width:0;font-size:12px}body.ez-app :is(.alerts-layout,.property-alerts-layout,.city-complaints-layout,.oath-hearings-layout){display:block}body.ez-app :is(.type-sidebar,.complaints-sidebar,.agency-sidebar){display:none}body.ez-app .dashboard-table-wrapper{width:100%}body.ez-app .table-scroll-wrapper{background:none;overflow:visible;border-radius:0}body.ez-app table.ez-responsive-table{display:block;background:none;border:0;border-radius:0;min-width:0;width:100%}body.ez-app .ez-responsive-table thead{display:none}body.ez-app .ez-responsive-table tbody{display:flex;flex-direction:column;gap:10px;width:100%}body.ez-app .ez-responsive-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:white;border:1px solid var(--ez-border);border-radius:12px;padding:14px;width:100%;position:relative;box-shadow:0 1px 2px #18203807}body.ez-app .ez-responsive-table td{display:block;border:0;padding:0;min-width:0;max-width:100%;width:auto;font-size:12px;flex:1 1 40%;overflow-wrap:anywhere}body.ez-app .ez-responsive-table td:before{content:attr(data-label);display:block;font-size:10px;color:var(--ez-muted);font-weight:400;margin-bottom:3px;text-transform:none}body.ez-app .ez-responsive-table td.checkbox-col{flex:0 0 18px;order:-2}body.ez-app .ez-responsive-table td.checkbox-col:before{display:none}body.ez-app .ez-responsive-table td.address-col{flex:1 1 calc(100% - 45px);order:-1;font-size:14px}body.ez-app .ez-responsive-table td.address-col:before{display:none}body.ez-app .ez-responsive-table td.description-col{flex:1 1 100%;order:-1;font-weight:550;font-size:13px;max-width:none}body.ez-app .ez-responsive-table td.description-col:before{display:none}body.ez-app .ez-responsive-table td.action-col{flex:1 1 100%;display:flex;justify-content:flex-end;padding-top:8px;border-top:1px solid #edf0f5}body.ez-app .ez-responsive-table td.action-col:before{display:none}body.ez-app .ez-responsive-table .table-action-btns{justify-content:flex-start}body.ez-app .properties-table td.bin-col{flex:1 1 100%;color:var(--ez-muted);font-size:11px}body.ez-app .properties-table td.bin-col:before{display:inline;content:'BIN ';font-size:11px}body.ez-app .properties-table td.company-col{display:none}body.ez-app .properties-table td.violations-col,body.ez-app .properties-table td.complaints-col{flex:0 1 auto}body.ez-app .properties-table td.violations-col:before,body.ez-app .properties-table td.complaints-col:before{display:none}body.ez-app .properties-table td.status-col{flex:1 1 100%;border-top:1px solid #edf0f5;margin-top:5px;padding-top:12px}body.ez-app .properties-table td.status-col:before{display:none}body.ez-app .properties-table .ez-count.danger:after{content:' violations'}body.ez-app .properties-table .ez-count.warning:after{content:' complaints'}body.ez-app .properties-table .action-col{position:absolute;right:10px;bottom:9px;border:0!important;width:auto!important;max-width:95px}body.ez-app .pagination,body.ez-app .admin-pagination{flex-wrap:wrap;border:0;background:none;padding:16px 0;justify-content:center;gap:10px}body.ez-app .pagination-indicator{font-size:11px;width:100%;text-align:center}body.ez-app .bulk-actions-content{flex-direction:column;gap:10px;align-items:flex-start}body.ez-app .bulk-actions-buttons{flex-wrap:wrap;gap:6px}body.ez-app .bulk-action-btn{font-size:11px;padding:7px 10px}body.ez-app :is(.metrics-grid,.metrics-grid-customer,.statistic,.stats-grid,.admin-stats-grid,.kpi-grid,.audit-stats-bar){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}body.ez-app .metric-card{min-height:104px;padding:12px;border-radius:10px}body.ez-app .metric-title{font-size:11px}body.ez-app .metric-card-header{margin-bottom:8px}.ez-metric-icon{width:24px;height:24px;border-radius:6px}.ez-metric-icon svg{width:15px;height:15px}body.ez-app .metric-value{font-size:24px;margin-bottom:6px}body.ez-app .metric-footer{font-size:10px}body.ez-app .metric-comparison{font-size:9px}body.ez-app .dashboard-grid,body.ez-app .dashboard-grid-customer{display:flex;flex-direction:column;gap:16px}body.ez-app .dashboard-column-left,body.ez-app .dashboard-column-right{display:contents}body.ez-app .widget{width:100%;border-radius:10px}body.ez-app .priority-alerts-widget{order:-4}body.ez-app .hearing-calendar-widget{order:-3}body.ez-app .recent-activity-widget{order:-2}body.ez-app .widget-header{padding:14px;font-size:13px}body.ez-app .widget-title{font-size:13px}body.ez-app .dashboard-header{display:block;margin-bottom:16px}body.ez-app .dashboard-filters{display:flex;width:100%;justify-content:space-between}body.ez-app .last-updated,body.ez-app .time-period-filter .filter-label{display:none}body.ez-app .dashboard-info-banner{display:none}body.ez-app .time-period-filter{flex:1}body.ez-app .period-select{width:100%}body.ez-app .trial-banner{padding:10px 12px;margin-bottom:16px}.ez-trial{gap:8px}.ez-trial-copy p{display:none}.ez-trial-copy strong{font-size:11px}.ez-trial>a{font-size:10px}.ez-trial>.ez-icon{width:15px}.ez-trial .ez-icon-button{display:none}body.ez-app :is(.task-grid,.task-layout,.user-profile-content,.billing-info-row,.detail-grid,.grid-3,.analytics-section,.plans-container){grid-template-columns:1fr;gap:16px}body.ez-app .task-activity-section{max-width:none}body.ez-app :is(.task-header,.city-complaint-header,.oath-hearing-header,.user-profile-header){padding:16px;flex-wrap:wrap;gap:12px;border-radius:10px}body.ez-app .task-title,body.ez-app .header-title-section h1{font-size:18px}body.ez-app .task-card{padding:16px}body.ez-app :is(.info-cards-grid,.notification-global-options,.notification-default-options){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body.ez-app .info-card{padding:12px}body.ez-app .info-card-value{font-size:14px}body.ez-app :is(.form-row,.ez-form-row){grid-template-columns:1fr;gap:0;margin:0}body.ez-app .user-edit-content,body.ez-app .form-container,body.ez-app .settings-section{padding:16px}body.ez-app .notification-default-option-content,body.ez-app .notification-global-option-content{padding:10px;gap:6px;min-height:64px}body.ez-app .notification-global-icon{display:none}body.ez-app .task-empty-steps{grid-template-columns:1fr}body.ez-app .task-empty-state{padding:30px 16px}body.ez-app .notification-card{padding:14px;gap:10px;flex-wrap:wrap}body.ez-app .notification-actions{margin-left:38px;display:flex;gap:8px}body.ez-app .notifications-page .page-header{flex-wrap:wrap}body.ez-app .plans-page{padding:0}body.ez-app .plans-container{max-width:460px}body.ez-app .plan-card.featured{margin-top:8px}body.ez-app .popup-alerts,body.ez-app .bulk-modal{padding:0;align-items:flex-end}body.ez-app :is(.popup-alerts-box,.bulk-modal-content,.fdny-modal-content){width:100%;max-width:none;max-height:90dvh;border-radius:16px 16px 0 0;margin:auto 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}body.ez-app .popup-alerts-head{padding:16px;border:0;font-size:15px}body.ez-app .popup-alerts-box:before,body.ez-app .bulk-modal-content:before{content:'';display:block;width:36px;height:4px;background:#d8dce5;border-radius:4px;margin:8px auto 0}body.ez-app .alerts-details{padding:12px 16px}body.ez-app .alerts-details-row{grid-template-columns:110px minmax(0,1fr);gap:10px;padding:7px 0}body.ez-app .alerts-resolution-request{padding:16px}body.ez-app .alerts-resolution-request .btn{width:100%}body.ez-app .admin-filters-row{gap:8px}body.ez-app .admin-filter-group{max-width:none;flex:1 1 40%}.ez-mobile-filter-button{display:inline-flex;align-items:center;gap:5px;border:1px solid #cbd2e4;border-radius:7px;background:white;color:#364055;min-height:40px;padding:8px 10px;font-size:12px}.ez-filter-sheet:not(.is-open){display:none!important}.ez-filter-sheet.is-open{display:flex!important;position:fixed!important;inset:auto 0 0!important;width:100%!important;max-width:none!important;background:white!important;z-index:1050!important;border-radius:16px 16px 0 0!important;box-shadow:0 0 0 100vmax #0f152066!important;padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important;max-height:85dvh;overflow-y:auto;flex-wrap:wrap;gap:12px!important;margin:0!important}.ez-filter-sheet.is-open .ez-filter-close{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;margin-bottom:12px}.ez-filter-sheet.is-open .ez-filter-apply{display:flex;flex:1 1 100%;justify-content:center;margin-top:12px}.ez-filter-sheet.is-open .dashboard-search{flex-basis:100%}.ez-filter-sheet.is-open .custom-select{flex:1 1 40%;max-width:none}.ez-filter-sheet.is-open :is(.type-filter-list,.agency-filter-list){width:100%}.ez-filter-sheet.is-open .ez-filter-close button{border:0;background:none}.ez-page:has(.task-activity-section) .new-note-form-container{position:sticky;bottom:0;background:white;padding:12px 0;z-index:15}body.ez-auth{display:block}.ez-auth-story{display:none}.ez-auth-main{min-height:100dvh;padding:40px 24px}.ez-auth-mobile-brand{display:block;margin:0 0 48px}.ez-auth-mobile-brand .ez-brand{color:var(--ez-ink)}.ez-auth-form h2{font-size:27px}.ez-auth-intro{font-size:13px}.ez-auth-main .ez-form-row{gap:10px}.ez-auth-main .ez-field input{font-size:16px}.ez-auth-form .ez-back-link{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){body.ez-app *,body.ez-auth *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.ez-filter-sheet{display:contents}.ez-mobile-toolbar{display:none}
@media(min-width:768px){body.ez-app .ez-filter-sheet>.ez-sheet-sidebar{display:none}}
@media(max-width:767px){.ez-mobile-toolbar{display:flex;gap:8px;width:100%;margin-bottom:14px}.ez-mobile-toolbar input{flex:1;min-width:0;width:100%}body.ez-app .ez-filter-sheet.is-open .ez-sheet-sidebar{display:block;width:100%;max-height:240px;overflow:auto}.ez-filter-sheet.is-open .dashboard-table-filters{display:flex;flex-wrap:wrap}.ez-filter-sheet.is-open .custom-select{max-width:none}.ez-filter-sheet.is-open .custom-select summary{width:100%}body.ez-app .ez-filter-sheet.is-open .dashboard-table-filters>.filter-group{flex:1 1 40%;max-width:100%}}
/* Reset legacy component rules that otherwise override the shared design. */
body.ez-app .ez-account{color:white}body.ez-app .ez-filter-apply,body.ez-app .ez-filter-close{display:none}
body.ez-app .metric-title{letter-spacing:0;text-transform:none;white-space:normal}body.ez-app .metric-card{min-height:140px!important}
body.ez-app .metric-card .metric-value{font-size:28px!important}
body.ez-app .statistic-item:before,body.ez-app .statistic-item:after{display:none}
body.ez-app .task-filters-section{padding:0;margin:0 0 20px}
body.ez-app .task-filters{display:flex;gap:10px;width:100%;align-items:center;justify-content:flex-start;margin:0;flex-wrap:wrap}
body.ez-app .task-filters .dashboard-search{max-width:none;flex:1}
body.ez-app .task-filters .btn{background:white!important;color:#566177!important;border:1px solid #cbd2e4!important;height:40px;min-height:40px;min-width:0;padding:8px 14px;font-size:12px}
body.ez-app .dashboard-filters{flex-direction:row}
body.ez-app .dashboard-info-banner-text{display:flex;align-items:center;gap:8px}
body.ez-app .activity-content{text-align:left;min-width:0;flex:1;padding:0}
body.ez-app .activity-header{display:flex;justify-content:space-between;gap:10px;align-items:start;text-align:left}
body.ez-app .activity-property{text-align:left}
body.ez-app .widget .activity-item:nth-child(n+6),body.ez-app .widget .hearing-item:nth-child(n+4){display:none}
body.ez-app .property-card{border:0;border-bottom:1px solid #edf0f5;border-radius:0;margin:0;padding:15px 18px;box-shadow:none;color:var(--ez-ink);background:white}
body.ez-app .property-severity-indicator{display:none}
body.ez-app .property-metrics{font-size:11px;color:var(--ez-muted)}
body.ez-app .task-summary-widget .task-metric,body.ez-app .financial-impact-widget .largest-outstanding,body.ez-app .financial-impact-widget .breakdown-by-type{display:none}
body.ez-app .hearing-calendar-widget .hearing-date-badge{background:var(--ez-canvas);color:var(--ez-ink);box-shadow:none;border-color:var(--ez-border)}
body.ez-app .hearing-calendar-widget .hearing-day{color:var(--ez-ink)}
body.ez-app .financial-impact-widget .financial-amount{color:var(--ez-ink);font-size:28px}
body.ez-app .task-status-list{gap:12px;padding:0;margin:12px 0}
body.ez-app .status-count{font-size:13px!important}
body.ez-app .financial-impact-widget .breakdown-value{font-size:13px!important}
body.ez-app .ez-page :is(.form-container,.user-edit-header)>h1{font-size:17px;margin:0 0 20px}
@media(max-width:767px){body.ez-app .ez-responsive-table,body.ez-app .ez-responsive-table tbody,body.ez-app .ez-responsive-table tr{min-width:0!important;width:100%!important;max-width:100%!important}body.ez-app .ez-responsive-table td{min-width:0!important;max-width:100%!important;white-space:normal!important}body.ez-app .ez-responsive-table td .status{white-space:normal}body.ez-app .ez-filter-sheet.is-open .ez-filter-close,body.ez-app .ez-filter-sheet.is-open .ez-filter-apply{display:flex}body.ez-app .metric-card{min-height:104px!important}body.ez-app .metric-card .metric-value{font-size:24px!important}body.ez-app .dashboard-filters .refresh-btn{min-width:0;width:auto}body.ez-app .task-filters{margin:0}.ez-filter-sheet .task-filters>.dashboard-search{flex-basis:100%}body.ez-app .task-filters-section .ez-mobile-toolbar{margin:0}}

/* Dense lists and settings match the desktop reference, with compact mobile cards. */
body.ez-app .ez-page .dashboard-search input{padding-left:36px!important}
body.ez-app .ez-page .dashboard-search>svg{top:12px!important;left:12px!important;transform:none!important}
body.ez-app .label input[type=checkbox]{z-index:auto!important;opacity:1!important;position:relative!important}
body.ez-app .properties-table .status-badge{width:auto!important;min-width:0!important;justify-content:flex-start!important;gap:8px!important}
body.ez-app .properties-table .status-col{width:130px!important;min-width:130px!important}
body.ez-app .ez-monitoring-filter{width:auto;min-width:140px!important}
body.ez-app .stat-content{display:flex;flex-direction:column;gap:8px}
body.ez-app .stat-content h3{font-size:26px!important;font-weight:600!important;color:var(--ez-ink)!important;line-height:1.2!important;margin:0!important}
body.ez-app .stat-content p{order:-1;font-size:11px!important;font-weight:400!important;color:var(--ez-muted)!important;line-height:1.4!important;margin:0!important}
body.ez-app .admin-tasks-page{padding:0}
body.ez-app .admin-tasks-table .company-info{border:0;background:none;padding:0;margin:0;border-radius:0}
body.ez-app .ez-cell-sub{display:block;color:var(--ez-muted);font-size:11px;line-height:1.5;margin-top:3px;font-weight:400}
body.ez-app .ez-alert-list{table-layout:fixed!important;min-width:0!important;width:100%!important}
body.ez-app .ez-alert-list th:first-child{width:90px}
body.ez-app .ez-alert-list th:nth-child(2){width:27%}
body.ez-app .ez-alert-list th:nth-child(3){width:25%}
body.ez-app .ez-alert-list th:last-child{width:70px}
body.ez-app .ez-alert-list td{white-space:normal!important;font-size:12px;vertical-align:middle;line-height:1.5;padding:14px 12px!important}
body.ez-app .ez-alert-list strong{font-weight:500;color:var(--ez-ink)}
body.ez-app .ez-alert-list .type-badge{font-size:9px;white-space:normal;line-height:1.4;display:inline-flex;max-width:100%;padding:3px 6px}
body.ez-app .ez-alert-list .table-action-button{font-size:11px;padding:5px;gap:4px;border:0;background:transparent}
body.ez-app .ez-alert-list .table-action-button>span{display:none}
body.ez-app .notification-global-section{border:0!important;border-bottom:1px solid var(--ez-border)!important;border-radius:0!important;background:none!important;padding:18px 0!important}
body.ez-app .notification-global-icon,body.ez-app .notification-default-icon{display:none!important}
body.ez-app :is(.notification-global-option,.notification-default-option) input:checked+div{background:var(--ez-soft)!important;border-color:#8d84da!important}
body.ez-app .notification-global-options,body.ez-app .notification-default-options{max-width:620px}
body.ez-app .dash-wrap .date-range-row{flex-wrap:wrap;gap:8px}
body.ez-app .dash-wrap .date-range-row input{width:145px!important;min-width:0!important}
body.ez-app .dash-wrap .filters .form-group{min-width:0;max-width:100%}
.ez-empty-state{text-align:center;padding:36px 16px;color:var(--ez-muted)}
.ez-empty-state h3{font-size:15px;color:var(--ez-ink);margin:12px 0 6px}
.ez-empty-state p{font-size:12px}
.ez-detail-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px;align-items:start}
.ez-detail-main,.ez-detail-aside{min-width:0;display:flex;flex-direction:column;gap:16px}
body.ez-app .ez-detail-columns .detail-section{margin:0;padding:20px}
body.ez-app .ez-detail-columns .detail-grid{grid-template-columns:1fr;gap:0}
body.ez-app .ez-detail-columns .detail-item{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:8px 0}
body.ez-app .ez-detail-columns .detail-label{font-size:12px;color:var(--ez-muted);font-weight:400}
body.ez-app .ez-detail-columns .detail-value{font-size:12px;text-align:left}
body.ez-app .ez-detail-aside .detail-item{grid-template-columns:110px minmax(0,1fr)}
body.ez-app .ez-detail-columns .section-title{font-size:14px;margin-bottom:12px}
.ez-card{background:white;border:1px solid var(--ez-border);border-radius:10px;padding:20px;margin-bottom:20px}
.ez-card h2{font-size:15px;font-weight:600;margin:0 0 18px}
.ez-data-list{margin:0;display:grid;grid-template-columns:160px 1fr;gap:14px;font-size:13px}
.ez-data-list dt{color:var(--ez-muted);font-weight:400}.ez-data-list dd{margin:0;overflow-wrap:anywhere}
.ez-page-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
@media(max-width:767px){
  body.ez-app .ez-responsive-table tr{height:auto!important;min-height:0!important}
  body.ez-app .ez-responsive-table td{height:auto!important;min-height:0!important;padding:0!important}
  body.ez-app .properties-table td.status-col{padding-top:10px!important;width:auto!important;min-width:0!important}
  body.ez-app .properties-table td.address-col{font-size:13px!important;font-weight:500}
  body.ez-app .properties-table .label{margin:0!important}
  body.ez-app .properties-table .actions-dropdown-btn{padding:4px 6px!important;min-height:28px!important;font-size:10px!important}
  body.ez-app .properties-table .action-col{bottom:12px!important;right:12px!important}
  body.ez-app .ez-alert-list td{padding:0!important}
  body.ez-app .ez-alert-list td:before{display:none}
  body.ez-app .ez-alert-list .ez-alert-type{flex:0 0 auto;order:-3}
  body.ez-app .ez-alert-list .ez-alert-status{flex:1;order:-2;text-align:right}
  body.ez-app .ez-alert-list .ez-alert-issue{flex:1 1 100%;order:-1}
  body.ez-app .ez-alert-list .ez-alert-property{flex:1 1 60%;font-size:11px;color:var(--ez-muted)}
  body.ez-app .ez-alert-list .ez-alert-property .ez-cell-sub{display:none}
  body.ez-app .ez-alert-list .ez-alert-date{flex:0 0 auto;font-size:10px;color:var(--ez-muted)}
  body.ez-app .ez-alert-list .ez-alert-action{flex:1 1 100%;text-align:right}
  body.ez-app .ez-alert-list .table-action-button{margin-left:auto}
  body.ez-app .ez-alert-list .table-action-button>span{display:inline}
  .ez-detail-columns{grid-template-columns:1fr;gap:16px}
  body.ez-app .ez-detail-columns .detail-section{padding:16px}
  body.ez-app .ez-detail-columns .detail-item{grid-template-columns:110px minmax(0,1fr);gap:12px}
  body.ez-app .dash-wrap .date-range-row{display:grid!important;grid-template-columns:1fr auto 1fr}
  body.ez-app .dash-wrap .date-range-row select{grid-column:1/-1;width:100%;min-width:0}
  body.ez-app .dash-wrap .date-range-row input{width:100%!important}
  .ez-data-list{grid-template-columns:110px 1fr;gap:12px}.ez-card{padding:16px}
}
body.ez-app .properties-table .ez-property-address{font-size:13px;color:var(--ez-ink);font-weight:550}
body.ez-app .properties-table .dropdown-container{display:flex;align-items:center;justify-content:center;gap:4px}
body.ez-app .properties-table .actions-dropdown-btn{border:0!important;box-shadow:none!important;background:transparent!important;padding:4px!important;min-width:22px!important;width:22px!important;color:var(--ez-muted)!important}
.ez-property-open{display:inline-flex;align-items:center;gap:4px;color:var(--ez-muted)}.ez-property-open>span{display:none}
.ez-mobile-add{display:none}
body.ez-app .pagination-item[aria-disabled=true]{color:#b2b9ca;background:#fafbfc}
body.ez-app .label input[type=checkbox]{appearance:none;width:18px!important;height:18px!important;border:1px solid #cdd4e5!important;border-radius:5px!important;background:white;cursor:pointer;margin:0!important;flex-shrink:0}
body.ez-app .label input[type=checkbox]:checked{background:#4f43cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E")!important;border-color:#4f43cc!important}
body.ez-app .label input[type=checkbox]:indeterminate{background:#4f43cc!important;border-color:#4f43cc!important;box-shadow:inset 4px 7px #4f43cc,inset -4px -7px #4f43cc,inset 0 0 0 10px white}
body.ez-app .properties-table tr:has(.property-checkbox:checked){background:var(--ez-soft)}
body.ez-app .ez-detail-columns .detail-label{text-transform:none;letter-spacing:0;line-height:1.5}
body.ez-app .ez-detail-columns .detail-value-text{font-size:13px;background:transparent;border:0;padding:0;line-height:1.7}
@media(max-width:767px){
 .ez-mobile-add{display:block;position:fixed;bottom:18px;right:16px;z-index:40;padding:13px 22px;border:0;border-radius:28px;background:var(--ez-primary);color:white;box-shadow:0 4px 16px #342b6633;font-size:13px;font-weight:500}
 body.ez-app:has(.ez-mobile-add) .ez-page{padding-bottom:90px}
 body.ez-app .dashboard-table-wrapper .table-scroll-wrapper{padding:0!important}
 body.ez-app .properties-table .ez-property-address{font-size:13px}
 body.ez-app .properties-table td.address-col .ez-cell-sub{display:none}
 body.ez-app .properties-table .ez-property-open>span{display:inline}
 body.ez-app .properties-table .ez-property-open>svg{display:none}
 body.ez-app .properties-table .ez-property-open{font-size:11px;border:1px solid var(--ez-border);background:white;border-radius:6px;padding:5px 8px}
 body.ez-app .properties-table td.status-col{padding:10px 0 0!important}
 body.ez-app .properties-table tr{padding:13px!important;gap:7px!important}
}
.ez-performance-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ez-performance-table th{padding:12px 18px;background:#f8f9fc;text-transform:uppercase;letter-spacing:.04em;font-size:10px;color:var(--ez-muted);font-weight:500;text-align:left}
.ez-performance-table td{border-top:1px solid #edf0f5;padding:15px 18px;font-size:13px;vertical-align:middle}
.ez-performance-table th:first-child{width:59%}.ez-performance-table th:nth-child(2){width:12%}.ez-performance-table th:last-child{width:29%}
.ez-performance-table td:first-child>a{font-weight:550;color:var(--ez-ink)}.ez-performance-table td:nth-child(2){text-align:right;font-weight:600}
.ez-risk{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ez-muted)}
.ez-progress{display:block;flex:1;height:6px;background:#eef0f5;border-radius:8px;overflow:hidden;min-width:0}
.ez-progress>span{display:block;height:100%;border-radius:8px}.ez-progress .high{background:#ef4f50}.ez-progress .medium{background:#f79009}.ez-progress .low{background:#20b486}.ez-progress .progress{background:#3699ff}
.ez-task-summary{padding:20px;display:flex;flex-direction:column;gap:18px}.ez-task-status>span:first-child{display:flex;justify-content:space-between;gap:10px;color:var(--ez-muted);font-size:12px;margin-bottom:8px}.ez-task-status strong{font-weight:600;color:var(--ez-ink)}
@media(max-width:767px){.ez-performance-table th,.ez-performance-table td{padding:12px 10px}.ez-performance-table th:first-child{width:52%}.ez-performance-table th:nth-child(2){width:15%}.ez-performance-table th:last-child{width:33%}.ez-risk{gap:6px;font-size:10px}.ez-performance-table td{font-size:11px}}
body.ez-app .notification-bell>svg{width:20px;height:20px}
body.ez-app .type-badge{border-radius:5px!important;font-size:10px!important;line-height:1.5!important}
body.ez-app .type-badge>.type-icon-svg{display:inline-block}
body.ez-app .type-badge-label{white-space:nowrap}
body.ez-app .note-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ez-soft);color:var(--ez-primary);padding:0;flex-shrink:0}
body.ez-app .note-content p{font-size:13px;line-height:1.7;margin:0}
.ez-alert-summary{padding:0 24px 18px;border-bottom:1px solid var(--ez-border)}
.ez-alert-summary>span{margin-right:6px}.ez-alert-summary h3{font-size:16px;line-height:1.5;color:var(--ez-ink);margin:12px 0 5px}.ez-alert-summary p{font-size:12px;color:var(--ez-muted);margin:0}
body.ez-app .popup-alerts-box .alerts-details{border:0;border-radius:0;background:white;box-shadow:none}
body.ez-app .popup-alerts-box .alerts-resolution-request{border-radius:0;border:0;border-top:1px solid var(--ez-border);background:white;box-shadow:none;text-align:left}
body.ez-app .resolution-request-header{text-align:left}
body.ez-app .resolution-request-header h3{font-size:14px}
body.ez-app .resolution-request-header p{font-size:12px}
@media(max-width:767px){.ez-alert-summary{padding:0 16px 16px}body.ez-app .ez-filter-sheet .add-new-btn{display:none!important}body.ez-app .popup-alerts-box .alerts-resolution-request{padding:16px}.ez-alert-summary h3{font-size:15px}}
/* Keep chart drawing dimensions inside the responsive card. */
body.ez-app .metric-card{gap:0}
body.ez-app .chart-container{height:280px!important;min-height:0;background:white;padding:18px}
body.ez-app .chart-container #trendChart{height:100%!important;max-height:100%!important;width:100%!important;margin:0!important}
body.ez-app .dashboard-filters .last-updated,body.ez-app .time-period-filter .filter-label{display:none}
body.ez-app .dashboard-header{border:0}
body.ez-app .priority-alerts-widget .alert-icon{display:none}
body.ez-app .priority-alerts-widget .alert-action{border:0;background:none;box-shadow:none;width:18px;height:18px;padding:0;margin:auto 0}
body.ez-app .priority-alerts-widget .alert-type{font-size:10px;text-transform:none;background:#fff4f3;border:1px solid #ffd8d4;border-radius:5px;padding:2px 5px;display:inline-flex;line-height:1.4}
body.ez-app .priority-alerts-widget .alert-item{padding:14px 18px;min-height:90px}
body.ez-app .priority-alerts-widget .alert-item:nth-child(n+5){display:none}
body.ez-app .priority-alerts-widget .alert-title{font-size:13px;margin:5px 0 0}
body.ez-app .priority-alerts-widget .alert-property{font-weight:400}
body.ez-app .widget-link{font-size:12px;font-weight:550;color:var(--ez-primary)}
@media(min-width:768px){
 body.ez-app .dashboard-column-left,body.ez-app .dashboard-column-right{display:contents}
 body.ez-app .recent-activity-widget{grid-column:1;grid-row:1}
 body.ez-app .priority-alerts-widget{grid-column:2;grid-row:1}
 body.ez-app .property-performance-widget{grid-column:1;grid-row:2}
 body.ez-app .task-summary-widget{grid-column:2;grid-row:2}
 body.ez-app .trend-chart-widget{grid-column:1;grid-row:3/5}
 body.ez-app .hearing-calendar-widget{grid-column:2;grid-row:3}
 body.ez-app .financial-impact-widget{grid-column:2;grid-row:4}
}
@media(min-width:768px) and (max-width:1279px){body.ez-app .dashboard-table-wrapper .table-scroll-wrapper{max-width:100%;overflow-x:auto!important}}
@media(max-width:767px){body.ez-app .dash-wrap .grid-3{grid-template-columns:minmax(0,1fr)}body.ez-app .dash-wrap .panel{min-width:0;max-width:100%}body.ez-app .dash-wrap .panel-title{flex-wrap:wrap;font-size:13px}body.ez-app .dash-wrap .panel-subtle{font-size:10px;white-space:normal}body.ez-app .chart-container{height:250px!important;padding:12px}}
body.ez-app:has(.popup-alerts.active),body.ez-app:has(.ez-filter-sheet.is-open){overflow:hidden}
body.ez-app .custom-select li:focus-visible{outline:2px solid var(--ez-primary);outline-offset:-2px;background:var(--ez-soft)}
@media(max-width:767px){body.ez-app .ez-filter-sheet.is-open .custom-select details[open]>ul{position:relative;width:100%;max-height:220px;overflow-y:auto}}
/* Forms and long values must retain usable widths on small screens. */
body.ez-app .dash-wrap .filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;height:auto;min-height:0;width:100%}
body.ez-app .dash-wrap .filters>.form-group{width:auto!important;min-width:0!important;margin:0;position:static;display:flex;flex-direction:column;gap:6px}
body.ez-app .dash-wrap .filters>.form-group:first-child{grid-column:1/-1}
body.ez-app .dash-wrap .filters label{position:static;font-size:11px;text-transform:none;letter-spacing:0;line-height:1.5}
body.ez-app .dash-wrap .filters :is(select,input){width:100%;min-width:0!important;max-width:100%;height:40px}
body.ez-app .dash-wrap .page-title h1{display:none}
body.ez-app .dash-wrap .page-title{justify-content:flex-end;margin-top:0}
body.ez-app .settings-content .notification-icon{display:none!important}
body.ez-app .notification-card .notification-content{padding:0;text-align:left;width:auto;max-width:none}
body.ez-app table td[colspan]{white-space:normal!important}
body.ez-app table td[colspan] .ez-empty-state{min-width:0;max-width:100%;white-space:normal}
body.ez-app table td[colspan] .ez-empty-state :is(h3,p){white-space:normal;overflow-wrap:anywhere}
@media(max-width:767px){
 body.ez-app .ez-responsive-table td[colspan]{flex:1 1 100%;width:100%!important;min-width:0!important}
 body.ez-app .ez-responsive-table td[colspan]:before{display:none}
 body.ez-app .dash-wrap .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.ez-app .dash-wrap .filters>.form-group:last-of-type{grid-column:1/-1}
 body.ez-app .dash-wrap .date-range-row select{grid-column:1/-1}
 body.ez-app .dash-wrap .kpi-chip{display:none}
 body.ez-app .dash-wrap .kpi-title{font-size:11px;text-transform:none;letter-spacing:0;line-height:1.5}
 body.ez-app .dash-wrap .kpi-card{padding:12px;min-height:130px;box-shadow:none}
 body.ez-app .dash-wrap .kpi-value{font-size:25px}
 body.ez-app .dash-wrap .kpi-sub{font-size:10px;line-height:1.5}
 body.ez-app .notification-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
 body.ez-app .notification-card .notification-icon{width:28px;height:28px;min-width:28px;grid-column:1}
 body.ez-app .notification-card .notification-content{grid-column:2;min-width:0;max-width:none}
 body.ez-app .notification-card .notification-actions{grid-column:2;margin:0;justify-content:flex-start;flex-wrap:wrap}
 body.ez-app .notification-card .notification-message{font-size:12px}
 body.ez-app .notification-card .notification-time{font-size:10px}
 body.ez-app .audit-detail-section{padding:14px}
 body.ez-app .audit-detail-table{table-layout:fixed!important}
 body.ez-app .audit-detail-table :is(th,td){font-size:11px!important;line-height:1.5;padding:10px 8px!important;overflow-wrap:anywhere}
 body.ez-app .audit-detail-table :is(th,td):first-child{width:40%!important;min-width:0!important}
 body.ez-app .audit-detail-table :is(th,td):last-child{width:60%!important;min-width:0!important}
 body.ez-app .notification-global-options,body.ez-app .notification-default-options{gap:8px}
}
@media(max-width:360px){
 body.ez-app .dash-wrap .date-range-row{grid-template-columns:minmax(0,1fr)}
 body.ez-app .dash-wrap .date-range-row>span{text-align:center;font-size:11px}
}
/*







 */