/*
 * Project styles. Velzon's own CSS under public/build is treated as vendor and
 * is never edited — overrides belong here.
 */

/* Pin Help & Support to the foot of the sidebar, as in the mock-up.
   Typography and colours come from Velzon's own .navbar-nav .nav-link rules. */
.app-menu .sidebar-help {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-menu .sidebar-help .navbar-nav {
    padding-top: 0.5rem;
}

/* Leave room so the last menu item never sits under the pinned link. */
.app-menu #scrollbar .container-fluid {
    padding-bottom: 4rem;
}

.audience-page .card {
    border-color: #e7ebf4;
    box-shadow: 0 1px 2px rgba(15, 34, 58, 0.04);
}

.audience-hero {
    align-items: flex-start;
}

.audience-heading {
    max-width: 32rem;
    padding-top: 0.25rem;
}

.audience-heading h4 {
    color: #101a44;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.audience-heading p {
    max-width: 30.5rem;
    color: #29345f !important;
    font-size: 0.9rem;
    line-height: 1.55;
}

.audience-stat {
    min-width: 17rem;
}

.audience-stat .card-body,
.audience-action {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.audience-stat-icon {
    display: inline-flex;
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
}

.audience-create {
    min-width: 12rem;
    height: 2.75rem;
}

.audience-workspace > [class*="col-"] > .card {
    min-height: 39.25rem;
}

.audience-list-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.audience-list-card .card-header {
    padding: 1.25rem 1.25rem 0.75rem;
}

.audience-list-card .card-title {
    color: #101a44;
    font-size: 1rem;
    font-weight: 700;
}

.audience-list-card .card-body {
    flex: 0 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.audience-list-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: 1.85rem;
}

.audience-list-controls .form-control,
.audience-list-controls .form-select,
.audience-list-controls .btn {
    height: 2.65rem;
    border-color: #dbe1ee;
    color: #25345d;
    font-size: 0.78rem;
}

.audience-list-controls .form-control::placeholder {
    color: #7c87a3;
}

.audience-table th {
    color: #101a44;
    font-size: 0.72rem;
    font-weight: 700;
    padding-top: 0.82rem;
    padding-bottom: 0.82rem;
}

.audience-table td {
    color: #1f2b5c;
    font-size: 0.78rem;
    padding-top: 0.74rem;
    padding-bottom: 0.74rem;
}

.audience-list-table {
    table-layout: fixed;
}

.audience-list-table th,
.audience-list-table td {
    border-color: #edf1f7;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.audience-list-table tbody tr {
    height: 4rem;
}

.audience-list-table tbody tr.table-active > * {
    background: #f7f9ff;
}

.audience-list-table .audience-name-col {
    width: 32%;
}

.audience-list-table .audience-count-col {
    width: 11%;
}

.audience-list-table .audience-date-col {
    width: 15%;
}

.audience-list-table .audience-status-col {
    width: 15%;
}

.audience-list-table .audience-action-col {
    width: 12%;
}

/* Companies in the selected audience. Fixed columns so the long SIC
   descriptions wrap instead of widening the table into a scrollbar. */
.audience-business-table {
    table-layout: fixed;
}

.audience-business-table th,
.audience-business-table td {
    border-color: #edf1f7;
    white-space: normal;
    overflow-wrap: anywhere;
}

.audience-business-table .audience-select-col {
    width: 2.6rem;
}

.audience-business-table .audience-company-col {
    width: 23%;
}

.audience-business-table .audience-place-col {
    width: 17%;
}

.audience-business-table .audience-industry-col {
    width: auto;
}

.audience-business-table .audience-added-col {
    width: 6.5rem;
    white-space: nowrap;
}

.audience-business-table .audience-action-col {
    width: 5.5rem;
    white-space: nowrap;
}

.audience-list-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #101a44;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audience-list-subtitle {
    display: block;
    max-width: 100%;
    margin-top: 0.22rem;
    overflow: hidden;
    color: #7c87a3;
    font-size: 0.68rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audience-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.35rem;
    height: 1.4rem;
    padding: 0 0.65rem;
    color: #2f63f6;
    background: #e9efff;
    border-radius: 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.audience-icon-action {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    color: #24325f;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1rem;
}

.audience-icon-action:hover {
    color: #2f63f6;
    background: #f1f5ff;
}

.audience-readonly {
    min-height: 2.55rem;
    padding: 0.72rem 0.9rem;
    color: #1f2b5c;
    background: #f6f7fb;
    border-radius: 0.35rem;
}

.audience-tabs {
    border-bottom: 1px solid #e7ebf4;
}

.audience-tabs .nav-link {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.audience-actions {
    margin-top: 1rem;
}

.audience-action {
    min-height: 7rem;
    padding: 1.25rem;
    background: #fbfcff;
    border: 1px solid #e7ebf4;
    border-radius: 0.45rem;
}

.audience-action h6 {
    margin-bottom: 0.35rem;
    color: #101a44;
    font-weight: 700;
}

@media (max-width: 1399.98px) {
    .audience-stat {
        min-width: 14rem;
    }
}

@media (max-width: 767.98px) {
    .audience-list-controls {
        grid-template-columns: 1fr;
    }
}

/* Add to Audience dialog: a real zoom on open. Closing is left to
   SweetAlert's own animation, which it needs to remove the popup. */
@keyframes audience-swal-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.72);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.audience-swal-zoom-in {
    animation: audience-swal-zoom-in 0.3s cubic-bezier(0.25, 0.9, 0.3, 1.12);
}

@media (prefers-reduced-motion: reduce) {
    .audience-swal-zoom-in {
        animation: none;
    }
}

/* A rule under the dialog heading, and the buttons on the right.
   SweetAlert's stylesheet loads after this file, so its own classes are
   chained in here to win on specificity rather than on order. */
.swal2-popup .swal2-title.audience-swal-title {
    padding-bottom: 1rem;
    border-bottom: 1px solid #dbe1ee;
    font-size: 1.05rem;
}

/* SweetAlert centres this row with auto side margins and sizes it to its
   content, so justify-content alone does nothing until it spans the popup. */
.swal2-popup .swal2-actions.audience-swal-actions {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0 1.5rem;
}

.swal2-popup .swal2-actions.audience-remove-swal-actions {
    gap: 0.5rem;
    justify-content: center;
}

/* Both buttons are Bootstrap buttons, so padding, height and type size come
   from one place; only the width is pinned so the pair matches. */
.swal2-popup .audience-swal-btn {
    min-width: 7rem;
    margin: 0;
}

/* SweetAlert's own cancel red. */
.swal2-popup .audience-swal-cancel {
    background-color: #d33;
    color: #fff;
}

.swal2-popup .audience-swal-cancel:hover,
.swal2-popup .audience-swal-cancel:focus,
.swal2-popup .audience-swal-cancel:active {
    background-color: #c02c2c;
    color: #fff;
}

/* Flash toasts. Toastify paints a blue gradient by default; these use the
   theme's own success and danger colours so they match the rest of the app.
   Sized so a full sentence reads on one or two lines without crowding the
   close button, which flex pushes to the far edge. */
.toastify.console-toast {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 21rem;
    max-width: 28rem;
    min-height: 3.5rem;
    padding: 1rem 1.15rem;
    box-shadow: 0 0.5rem 1.5rem rgba(16, 26, 68, 0.22);
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
}

.toastify.console-toast .toast-close {
    margin-left: auto;
    padding: 0;
    opacity: 0.8;
    font-size: 1.15rem;
    line-height: 1;
}

.toastify.console-toast .toast-close:hover {
    opacity: 1;
}

.toastify.console-toast-success {
    background: var(--vz-success, #0ab39c);
}

.toastify.console-toast-error {
    background: var(--vz-danger, #f06548);
}

/* Summary tab. Tiles and panels borrow the stat-card look from the hero row so
   the pane reads as part of the same screen. */
.audience-summary-tile {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #edf1f7;
    border-radius: 0.5rem;
    background: #fbfcfe;
}

.audience-summary-tile .audience-stat-icon {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
}

.audience-summary-panel {
    height: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid #edf1f7;
    border-radius: 0.5rem;
}

.audience-summary-panel-title {
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #edf1f7;
    color: #101a44;
    font-size: 0.78rem;
    font-weight: 700;
}

.audience-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.8rem;
}

.audience-summary-row + .audience-summary-row {
    border-top: 1px solid #f4f6fb;
}

.audience-summary-row-label {
    color: #1f2b5c;
    overflow-wrap: anywhere;
}

/* Recent searches on the dashboard. */
.dashboard-recent-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    color: inherit;
    text-decoration: none;
}

.dashboard-recent-search + .dashboard-recent-search {
    border-top: 1px solid #edf1f7;
}

.dashboard-recent-search:hover .dashboard-recent-search-term {
    color: #2f63f6;
}

.dashboard-recent-search-term {
    color: #101a44;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* "Returning User": the last searches, beneath the main search box. */
.recent-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #edf1f7;
}

.recent-searches-label {
    color: #7c87a3;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.recent-search {
    padding: 0.3rem 0.7rem;
    border: 1px solid #dbe1ee;
    border-radius: 1rem;
    color: #25345d;
    background: #fbfcfe;
    font-size: 0.75rem;
    text-decoration: none;
}

.recent-search:hover {
    color: #2f63f6;
    border-color: #bfd0ff;
    background: #f1f5ff;
}

/* The recent search the results on screen came from. */
.recent-search-current {
    color: #fff;
    background: #2f63f6;
    border-color: #2f63f6;
    font-weight: 600;
}

.recent-search-current:hover {
    color: #fff;
    background: #2453d6;
    border-color: #2453d6;
}