/*Write your custom css in this file.*/

/* ==== LUMIQ_0263_LEAD_INFO_CSS =========================================
   Styling for the restyled Lead info panel and the matching custom fields
   panel. Scoped to .lumiq-info-grid so nothing else in the CRM is affected.
   The border colour matches the theme's existing card border (#f1f1f5).
   ====================================================================== */

.lumiq-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

/* One column in the narrow sidebar, or on small screens, so the labels and
   values never get squeezed. */
.details-view-right-section .lumiq-info-grid,
.lumiq-lead-info-card.lumiq-info-single .lumiq-info-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991px) {
    .lumiq-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A value that needs the full width of the card, such as a street address or
   a long custom field. */
.lumiq-info-item-wide {
    grid-column: 1 / -1;
}

.lumiq-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid #f1f1f5;
    min-width: 0;
}

/* No rule above the first item in each column. */
.lumiq-info-item:nth-child(1),
.lumiq-info-item:nth-child(2) {
    border-top: 0;
}

/* With a single column only the very first item loses its rule. */
.details-view-right-section .lumiq-info-item:nth-child(2),
.lumiq-lead-info-card.lumiq-info-single .lumiq-info-item:nth-child(2) {
    border-top: 1px solid #f1f1f5;
}

.details-view-right-section .lumiq-info-item:nth-child(1),
.lumiq-lead-info-card.lumiq-info-single .lumiq-info-item:nth-child(1) {
    border-top: 0;
}

@media (max-width: 991px) {
    .lumiq-info-item:nth-child(2) {
        border-top: 1px solid #f1f1f5;
    }
    .lumiq-info-item:nth-child(1) {
        border-top: 0;
    }
}

/* A wide item always starts a new row, so it always shows its rule. */
.lumiq-info-item-wide {
    border-top: 1px solid #f1f1f5;
}
.lumiq-info-item-wide:first-child {
    border-top: 0;
}

.lumiq-info-icon {
    flex: 0 0 auto;
    line-height: 1;
    padding-top: 2px;
    opacity: 0.45;
}

.lumiq-info-icon .icon-16 {
    width: 16px;
    height: 16px;
}

.lumiq-info-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    min-width: 0;
    flex: 1 1 auto;
}

/* The label the user asked for: it names what the icon means. */
.lumiq-info-label {
    font-weight: 600;
    white-space: nowrap;
}

.lumiq-info-label:after {
    content: ":";
}

.lumiq-info-value {
    min-width: 0;
    word-break: break-word;
}

/* Keep inline-edit anchors looking like plain text until hovered, which is how
   the stock panel behaved. */
.lumiq-info-value a {
    text-decoration: none;
}

.lumiq-info-value a:hover {
    text-decoration: underline;
}

/* The avatar shown beside Assigned to. */
.lumiq-info-value .avatar {
    vertical-align: middle;
}

/* Custom field output views sometimes wrap their value in a <p>. */
.lumiq-info-value p:last-child {
    margin-bottom: 0;
}
/* ==== end LUMIQ_0263_LEAD_INFO_CSS ==================================== */

/* LUMIQ_0265_LEAD_INFO_CSS
 *
 * Optional polish for the combined Lead info card, and nothing more.
 *
 * Everything structural - the two column layout, the colon after each label,
 * the row separators - is done with Bootstrap and RISE classes in the markup
 * itself. That is deliberate: assets/css/custom-style.css is served with a
 * "?v=<app_version>" cache buster that does not change when this file is
 * appended to, so a browser can legitimately keep serving an older cached
 * copy for a while. If every rule below is ignored the panel still reads
 * correctly, it is just very slightly less tidy.
 */

/* Let the label and its value sit on one line where there is room, and keep a
   long value from crowding the icon. */
.lumiq-lead-info-rows .flex-fill {
    min-width: 0;
    word-break: break-word;
}

/* If the card is ever placed back into the narrow right hand sidebar, two
   columns would be far too cramped, so force a single column there. This is
   polish rather than structure: the panel is installed into the wide main
   column, where the Bootstrap grid already does the right thing. */
.details-view-right-section .lumiq-lead-info-rows > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Drop the divider under the final row on each side of the grid, so the card
   does not end on a stray line. */
@media (min-width: 992px) {
    .lumiq-lead-info-rows > .col-lg-6:nth-last-child(1) > .d-flex,
    .lumiq-lead-info-rows > .col-lg-6:nth-last-child(2) > .d-flex {
        border-bottom: 0 !important;
    }
}

@media (max-width: 991px) {
    .lumiq-lead-info-rows > div:last-child > .d-flex {
        border-bottom: 0 !important;
    }
}

/* Keep the inline edit anchors looking like text until hovered, which is how
   the stock panel behaved. */
.lumiq-lead-info-rows a[data-act="lead-modifier"] {
    border-bottom: 1px dashed transparent;
}

.lumiq-lead-info-rows a[data-act="lead-modifier"]:hover {
    border-bottom-color: #c7ccd1;
}

/* LUMIQ_0266_LEAD_INFO_CSS
 *
 * Optional polish for the grouped Lead info card, and nothing more.
 *
 * Everything that matters now ships in a <style> block inside
 * app/Views/leads/lead_info.php itself. That is deliberate:
 * assets/css/custom-style.css is served with a "?v=<app_version>" cache buster
 * that does NOT change when this file is appended to, so a browser can
 * legitimately keep serving an older cached copy for a while. That is exactly
 * what made 0.0.263 and 0.0.264 render as an unstyled run of text. A style
 * block that travels with the markup cannot fall out of step with it.
 *
 * So if every rule in this file is ignored, the panel is still completely
 * correct. Nothing below is load bearing.
 *
 * The last-row "border-bottom: 0" rules that 0.0.265 added here have been
 * removed rather than left behind: no row carries a rule any more, so those
 * rules matched nothing and would only have confused the next person reading
 * this file.
 */

/* If the card is ever placed back into the narrow right hand sidebar, two
   columns would be far too cramped, so force a single column there. The panel
   is installed into the wide main column, where the Bootstrap grid already
   does the right thing, so this is insurance rather than layout. */
.details-view-right-section .lumiq-lead-info-rows > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Keep the inline edit anchors looking like text until hovered, which is how
   the stock panel behaved. */
.lumiq-lead-info-rows a[data-act="lead-modifier"] {
    border-bottom: 1px dashed transparent;
}

.lumiq-lead-info-rows a[data-act="lead-modifier"]:hover {
    border-bottom-color: #c7ccd1;
}