/*
 * IPcom CRM Admin resource pages.
 *
 * Presentation only.
 * No resource-specific PHP or behaviour changes.
 */

/* Resource/list table shell */

.fi-ta {
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 14px;
    background: rgb(255 255 255);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.03),
        0 5px 18px rgb(15 23 42 / 0.035);
}

/* Search / filter / column toolbar */

/* Toolbar menus must escape short tables; scrolling belongs inside the menu. */
.fi-ta:has(.fi-ta-col-manager-dropdown, .fi-ta-filters-dropdown),
.fi-ta-ctn:has(.fi-ta-col-manager-dropdown, .fi-ta-filters-dropdown) {
    overflow: visible;
}

.fi-ta-col-manager-dropdown > .fi-dropdown-panel,
.fi-ta-filters-dropdown > .fi-dropdown-panel {
    max-height: min(24rem, 50dvh);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

.fi-ta-header {
    border-bottom: 1px solid rgb(226 232 240);
    background:
        linear-gradient(
            90deg,
            rgb(248 250 252) 0%,
            rgb(255 251 235) 100%
        );
}

/* Column heading layer */

.fi-ta-table thead,
.fi-ta-table thead tr {
    background: rgb(248 250 252);
}

.fi-ta-table thead th {
    border-bottom-color: rgb(203 213 225);
}

/* Easier row scanning */

.fi-ta-table tbody tr {
    transition:
        background-color 100ms ease;
}

.fi-ta-table tbody tr:hover {
    background: rgb(248 250 252 / 0.9);
}

/* Slightly clearer table headings */

.fi-ta-header-heading {
    color: rgb(15 23 42);
    font-weight: 700;
}

/* Resource page header */

.fi-page-header-main-ctn {
    gap: 1rem;
}

/* Secondary actions stay quieter than primary actions */

.fi-page-header-actions .fi-btn-color-gray {
    border-color: rgb(203 213 225);
    background: rgb(255 255 255);
}

/* Forms and sections */

/* Campaign workflow tabs */

.ipcom-campaign-tabs > .fi-tabs {
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid rgb(203 213 225);
    background: rgb(248 250 252);
}

.ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item {
    border: 1px solid rgb(203 213 225);
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item:hover {
    border-color: rgb(8 119 124 / 0.55);
    background: rgb(240 253 250);
}

.ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item.fi-active {
    border-color: rgb(8 119 124);
    background: rgb(204 251 241);
    box-shadow:
        0 0 0 1px rgb(8 119 124 / 0.15),
        0 2px 5px rgb(15 23 42 / 0.08);
}

.ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: rgb(15 86 91);
    font-weight: 700;
}

.fi-section {
    border-color: rgb(226 232 240);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.025),
        0 4px 14px rgb(15 23 42 / 0.025);
}

.fi-section-header {
    border-bottom-color: rgb(226 232 240);
}

/* Property inspection spreadsheet import */

.ipcom-inspection-import {
    display: grid;
    gap: 1.5rem;
}

.ipcom-inspection-import__upload {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1.4fr) auto;
    gap: 1.25rem;
    align-items: end;
}

.ipcom-inspection-import__field {
    display: grid;
    min-width: 0;
    gap: 0.4rem;
}

.ipcom-inspection-import__label {
    color: rgb(15 23 42);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.ipcom-inspection-import__hint,
.ipcom-inspection-import__muted {
    color: rgb(100 116 139);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.ipcom-inspection-import__control,
.ipcom-inspection-import__file {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.625rem;
    background-color: rgb(255 255 255);
    color: rgb(15 23 42);
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.ipcom-inspection-import__control {
    padding: 0.625rem 2.25rem 0.625rem 0.75rem;
}

.ipcom-inspection-import__file {
    padding: 0.35rem;
}

.ipcom-inspection-import__file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: rgb(241 245 249);
    color: rgb(15 23 42);
    font-weight: 600;
    cursor: pointer;
}

.ipcom-inspection-import__control:focus,
.ipcom-inspection-import__file:focus {
    border-color: rgb(8 119 124);
    outline: 2px solid rgb(8 119 124 / 0.18);
    outline-offset: 1px;
}

.ipcom-inspection-import__error,
.ipcom-inspection-import__row-error {
    color: rgb(185 28 28);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.ipcom-inspection-import__upload-action,
.ipcom-inspection-import__section-action {
    display: flex;
    align-items: center;
}

.ipcom-inspection-import__match-rule {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid rgb(153 246 228);
    border-radius: 0.75rem;
    background: rgb(240 253 250);
    color: rgb(17 94 89);
    font-size: 0.875rem;
    line-height: 1.35rem;
}

.ipcom-inspection-import__mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.ipcom-inspection-import__mapping-field {
    padding: 1rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    background: rgb(248 250 252);
}

.ipcom-inspection-import__mapping-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
}

.ipcom-inspection-import__requirement {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: rgb(204 251 241);
    color: rgb(17 94 89);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.ipcom-inspection-import__requirement--optional {
    background: rgb(241 245 249);
    color: rgb(71 85 105);
}

.ipcom-inspection-import__mapping-error {
    padding: 0.75rem 0.9rem;
    border: 1px solid rgb(254 202 202);
    border-radius: 0.65rem;
    background: rgb(254 242 242);
    color: rgb(185 28 28);
    font-size: 0.875rem;
    font-weight: 700;
}

.ipcom-inspection-import__profile {
    max-width: 40rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(226 232 240);
}

.ipcom-inspection-import__section-action {
    margin-top: 1.25rem;
}

.ipcom-inspection-import__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ipcom-inspection-import__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    background: rgb(248 250 252);
    color: rgb(71 85 105);
    font-size: 0.875rem;
}

.ipcom-inspection-import__stat strong {
    color: rgb(15 23 42);
    font-size: 1.375rem;
    line-height: 1;
}

.ipcom-inspection-import__stat--ready {
    border-color: rgb(187 247 208);
    background: rgb(240 253 244);
}

.ipcom-inspection-import__stat--review {
    border-color: rgb(254 215 170);
    background: rgb(255 247 237);
}

.ipcom-inspection-import__stat--imported {
    border-color: rgb(153 246 228);
    background: rgb(240 253 250);
}

.ipcom-inspection-import__notice {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border-left: 4px solid rgb(14 116 144);
    border-radius: 0.4rem;
    background: rgb(236 254 255);
    color: rgb(22 78 99);
    font-size: 0.875rem;
    line-height: 1.35rem;
}

.ipcom-inspection-import__table-wrap {
    max-height: 34rem;
    overflow: auto;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
}

.ipcom-inspection-import__table {
    width: 100%;
    border-collapse: collapse;
    color: rgb(51 65 85);
    font-size: 0.875rem;
    text-align: left;
}

.ipcom-inspection-import__table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgb(248 250 252);
}

.ipcom-inspection-import__table th,
.ipcom-inspection-import__table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgb(226 232 240);
    vertical-align: top;
}

.ipcom-inspection-import__table th {
    color: rgb(15 23 42);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.ipcom-inspection-import__table tbody tr:last-child td {
    border-bottom: 0;
}

.ipcom-inspection-import__table tbody tr:hover {
    background: rgb(248 250 252 / 0.75);
}

.ipcom-inspection-import__status {
    display: inline-flex;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgb(241 245 249);
    color: rgb(71 85 105);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ipcom-inspection-import__status--ready {
    background: rgb(220 252 231);
    color: rgb(22 101 52);
}

.ipcom-inspection-import__status--failed {
    background: rgb(254 226 226);
    color: rgb(153 27 27);
}

.ipcom-inspection-import__status--imported {
    background: rgb(204 251 241);
    color: rgb(17 94 89);
}

.ipcom-inspection-import__property-unit {
    display: block;
    margin-top: 0.15rem;
    color: rgb(100 116 139);
    font-size: 0.8125rem;
}

.ipcom-inspection-import__row-error {
    margin: 0 0 0.5rem;
}

.ipcom-inspection-import__source summary {
    color: rgb(8 119 124);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.ipcom-inspection-import__source dl {
    display: grid;
    gap: 0.45rem;
    min-width: 15rem;
    margin: 0.65rem 0 0;
}

.ipcom-inspection-import__source dl div {
    display: grid;
    grid-template-columns: minmax(6rem, 0.8fr) minmax(8rem, 1.2fr);
    gap: 0.6rem;
}

.ipcom-inspection-import__source dt {
    color: rgb(100 116 139);
    font-size: 0.75rem;
    font-weight: 700;
}

.ipcom-inspection-import__source dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: rgb(51 65 85);
    font-size: 0.8125rem;
}

.ipcom-inspection-import__correction {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 900px) {
    .ipcom-inspection-import__upload,
    .ipcom-inspection-import__mapping-grid {
        grid-template-columns: 1fr;
    }

    .ipcom-inspection-import__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ipcom-inspection-import__upload-action {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .ipcom-inspection-import__summary {
        grid-template-columns: 1fr;
    }

    .ipcom-inspection-import__table-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    .ipcom-inspection-import__table,
    .ipcom-inspection-import__table tbody,
    .ipcom-inspection-import__table tr,
    .ipcom-inspection-import__table td {
        display: block;
        width: 100%;
    }

    .ipcom-inspection-import__table thead {
        display: none;
    }

    .ipcom-inspection-import__table tr {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgb(226 232 240);
        border-radius: 0.75rem;
    }

    .ipcom-inspection-import__table td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.5rem 0;
        border: 0;
    }

    .ipcom-inspection-import__table td::before {
        content: attr(data-label);
        color: rgb(71 85 105);
        font-size: 0.75rem;
        font-weight: 700;
    }

    .ipcom-inspection-import__correction {
        grid-template-columns: 1fr;
    }
}

/* Dark mode */

.dark .fi-ta {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .fi-ta-header,
.dark .fi-ta-table thead,
.dark .fi-ta-table thead tr {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

.dark .fi-ta-table tbody tr:hover {
    background: rgb(255 255 255 / 0.035);
}

.dark .fi-ta-header-heading {
    color: rgb(241 245 249);
}

.dark .fi-section {
    border-color: rgb(55 65 81);
}

.dark .ipcom-inspection-import__label,
.dark .ipcom-inspection-import__stat strong,
.dark .ipcom-inspection-import__table th {
    color: rgb(241 245 249);
}

.dark .ipcom-inspection-import__hint,
.dark .ipcom-inspection-import__muted,
.dark .ipcom-inspection-import__property-unit {
    color: rgb(156 163 175);
}

.dark .ipcom-inspection-import__control,
.dark .ipcom-inspection-import__file {
    border-color: rgb(75 85 99);
    background-color: rgb(17 24 39);
    color: rgb(243 244 246);
}

.dark .ipcom-inspection-import__file::file-selector-button,
.dark .ipcom-inspection-import__mapping-field,
.dark .ipcom-inspection-import__stat,
.dark .ipcom-inspection-import__table thead {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}

.dark .ipcom-inspection-import__match-rule {
    border-color: rgb(19 78 74);
    background: rgb(4 47 46);
    color: rgb(153 246 228);
}

.dark .ipcom-inspection-import__requirement {
    background: rgb(19 78 74);
    color: rgb(153 246 228);
}

.dark .ipcom-inspection-import__requirement--optional {
    background: rgb(55 65 81);
    color: rgb(209 213 219);
}

.dark .ipcom-inspection-import__mapping-error {
    border-color: rgb(127 29 29);
    background: rgb(69 10 10 / 0.55);
    color: rgb(254 202 202);
}

.dark .ipcom-inspection-import__profile,
.dark .ipcom-inspection-import__table-wrap,
.dark .ipcom-inspection-import__table th,
.dark .ipcom-inspection-import__table td {
    border-color: rgb(55 65 81);
}

.dark .ipcom-inspection-import__table {
    color: rgb(209 213 219);
}

.dark .ipcom-inspection-import__table tbody tr:hover {
    background: rgb(255 255 255 / 0.035);
}

.dark .ipcom-inspection-import__notice {
    border-left-color: rgb(34 211 238);
    background: rgb(22 78 99 / 0.45);
    color: rgb(207 250 254);
}

.dark .ipcom-inspection-import__source summary {
    color: rgb(94 234 212);
}

.dark .ipcom-inspection-import__source dt {
    color: rgb(156 163 175);
}

.dark .ipcom-inspection-import__source dd {
    color: rgb(229 231 235);
}

.dark .ipcom-campaign-tabs > .fi-tabs {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item {
    border-color: rgb(75 85 99);
    background: rgb(31 41 55);
}

.dark .ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item:hover {
    border-color: rgb(45 212 191 / 0.7);
    background: rgb(19 78 74 / 0.45);
}

.dark .ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item.fi-active {
    border-color: rgb(45 212 191);
    background: rgb(19 78 74 / 0.7);
}

.dark .ipcom-campaign-tabs > .fi-tabs > .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: rgb(153 246 228);
}

/*
 * Unread conversation emphasis.
 * Keep the treatment subtle: the New badge remains the primary alert.
 */
.fi-ta-row.ipcom-unread-row > td,
tr.ipcom-unread-row > td {
    background-color: #eaf2fb;
}

.fi-ta-row.ipcom-unread-row:hover > td,
tr.ipcom-unread-row:hover > td {
    background-color: #dceafa;
}

.dark .fi-ta-row.ipcom-unread-row > td,
.dark tr.ipcom-unread-row > td {
    background-color: rgba(37, 99, 235, 0.16);
}

.dark .fi-ta-row.ipcom-unread-row:hover > td,
.dark tr.ipcom-unread-row:hover > td {
    background-color: rgba(37, 99, 235, 0.24);
}