/* ============================================================================
   VRYNO LEAD INLINE ACTIONS
   ============================================================================
   Lead Overview (crm/leads-module/leads-list.html): Notes, Edit, Create Task
   and Schedule Meeting used to open a shared offcanvas or modal and navigate
   nowhere near the row that triggered them. They now expand a panel directly
   underneath that row instead -- see assets/js/vryno-lead-inline.js.

   Geometry only lives here. Colours are the same theme variables every other
   part of this table already uses (--primary, --gray-600, --light, the
   per-status accents), so a panel reads as part of the row, not an import.
============================================================================ */

.lead-inline-panel-row > td {
    padding: 0;
    border-top: none;
}

.lead-inline-panel-cell {
    background: var(--light);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .04);
    padding: 12px 16px 16px;
    /* This is the actual root cause of the panel's content bleeding out of
       its own card and into the compose column next to it: style.css forces
       white-space:nowrap on every <td>/<th> in a .vryno-list-table /
       #leadsListTable ("#leadsListTable th, .vryno-list-table th,
       #leadsListTable td, .vryno-list-table td { white-space: nowrap; }"),
       and a second rule does the same for every plain table's body cells.
       This panel's own <td> (.lead-inline-panel-cell) is one of those cells,
       and white-space is inherited, so without resetting it here every piece
       of text inside the panel -- the note text, its meta line, the "View
       X" link -- inherited nowrap too and refused to wrap at all, forcing
       the whole card wide enough to fit on one line no matter how long the
       text was. word-break/overflow-wrap on the text elements further down
       cannot undo that on their own -- nowrap wins over both. Resetting it
       here, once, at the point where the panel's own markup starts, fixes
       every element inside it in one place instead of patching each one.

       !important because both of those rules beat a plain
       ".lead-inline-panel-cell { white-space: normal }" on specificity alone
       (".table:not(.vryno-data-table) tbody tr td" in particular is three
       type-selectors deep) -- there is no selector on this one <td> that
       can out-specify them honestly, so this is the one place in this
       stylesheet that reaches for !important, and only to cancel an
       inherited property back to its own default. */
    white-space: normal !important;
}

/* The panel itself reads as a floating card inset in the cell's wash
   background, rather than a flat strip flush with the table's own edges --
   hence its own background/border/shadow instead of inheriting the cell's. */
.lead-inline-panel {
    background: var(--white, #fff);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
    padding: 18px 22px 22px;
    animation: leadInlineOpen .15s ease-out;
}

@keyframes leadInlineOpen {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lead-inline-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.lead-inline-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--heading-color);
}

.lead-inline-panel-title i {
    font-size: 15px;
    color: var(--primary);
}

.lead-inline-panel-title-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-transparent);
    flex-shrink: 0;
}

.lead-inline-panel-title-icon i {
    font-size: 14px;
    color: var(--primary);
}

.lead-inline-panel-close {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gray-600);
    background: transparent;
    border: none;
    flex-shrink: 0;
}

.lead-inline-panel-close:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--heading-color);
}

/* .lead-inline-panel-body {
    max-width: 760px;
} */

/* Leads' multi-action panel only (buildMultiActionPanel): the Note/Email/
   Call/Task/Meeting/Quote tab row that sits between the panel head and
   whichever tab's body is currently showing. The pills reuse leads-details
   .html's .quick-log-pill markup verbatim, so nothing new is needed for
   their shape -- just the gap under the row. */
.lead-inline-tabrow {
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   STACKED LAYOUT -- Leads' multi-action panel only (buildRichListBody /
   buildRichTaskBody / buildRichMeetingBody in vryno-lead-inline.js). The
   composer sits full-width above whichever entries already exist, the same
   vertical arrangement leads-details.html's Activity panel uses, instead of
   the two-column "list left, compose pinned to the right" layout below
   (which every other module's single-kind panel still uses, untouched).
--------------------------------------------------------------------------- */
.lead-inline-panel-body.lead-inline-stacked {
    display: block;
    /* max-width: 640px; */
}

.lead-inline-composer {
    margin-bottom: 18px;
}

.lead-inline-composer-box {
    position: relative;
}

.lead-inline-composer-box textarea {
    padding-right: 40px;
    resize: vertical;
}

/* Decorative Voice Note affordance, pinned into the textarea's own corner --
   matches leads-details.html's #quickLogInput mic button exactly, including
   having no click behaviour (there is no backend here to record against). */
.lead-inline-composer-mic {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease;
}

.lead-inline-composer-mic:hover {
    background: rgba(0, 0, 0, .06);
}

.lead-inline-composer-mic img {
    width: 16px;
    height: 16px;
    opacity: .8;
}

.lead-inline-composer-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.lead-inline-composer-tools-left {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* The composer's own emoji-insert popover (distinct from the per-item
   reaction picker below, the same split leads-details.html makes between
   #composerEmojiPicker and each activity-item's .reaction-picker). */
.lead-inline-emoji-pop {
    position: absolute;
    bottom: 34px;
    left: 0;
    z-index: 20;
    background: var(--white, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
    padding: 4px 6px;
    display: flex;
    gap: 2px;
}

.lead-inline-emoji-pop button {
    border: none;
    background: transparent;
    font-size: 15px;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 999px;
    cursor: pointer;
}

.lead-inline-emoji-pop button:hover {
    background: rgba(0, 0, 0, .06);
    transform: scale(1.12);
}

.lead-inline-panel-body.lead-inline-stacked .lead-inline-list {
    margin-bottom: 0;
}

/* Once a third entry shows up the timeline scrolls internally instead of
   growing the panel without bound -- same cap the two-column layout's left
   column applies, just against the single stacked list here. */
.lead-inline-panel-body.lead-inline-stacked .lead-inline-list:has(.lead-inline-item:nth-child(4)) {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 6px;
    margin-right: -6px;
}

/* ---- per-entry reactions -- Leads' multi-action panel only ---------------
   Same shape as leads-details.html's Activity panel (.reaction-row /
   .reaction-picker / .reactions-display / .reaction-chip), scoped to
   .lead-inline-item instead of #section-activity .activity-item since that
   is this panel's own equivalent of an activity-item. */
.lead-inline-item .reaction-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 22px;
}

.lead-inline-item .reaction-picker {
    display: flex;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.lead-inline-item:hover .reaction-picker,
.lead-inline-item:focus-within .reaction-picker {
    opacity: 1;
    pointer-events: auto;
}

.lead-inline-item .reaction-picker button {
    border: none;
    background: transparent;
    font-size: 13px;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 999px;
    cursor: pointer;
}

.lead-inline-item .reaction-picker button:hover {
    background: rgba(0, 0, 0, .06);
    transform: scale(1.15);
}

.lead-inline-item .reactions-display {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.lead-inline-item .reaction-chip {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primary-transparent);
    color: var(--gray-600);
    border: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
    user-select: none;
}

.lead-inline-item .reaction-chip.active {
    color: var(--primary);
}

@media (max-width: 575.98px) {
    .lead-inline-composer-tools {
        flex-wrap: wrap;
    }
}

/* ---- two-column layout: existing items on the left, compose on the right -
   Left holds every note/task/meeting already on the record; right is always
   the add-form, and it always stays fully visible -- once the left column
   holds a third card it scrolls internally instead of growing the panel (and
   pushing the compose area down with it). */
.lead-inline-panel-body.lead-inline-two-col {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    max-width: none;
}

.lead-inline-col-left {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 400px;
}

.lead-inline-col-right {
    flex: 1 1 320px;
    min-width: 0;
}

@media (min-width: 576px) {
    .lead-inline-col-right {
        border-left: 1px solid rgba(0, 0, 0, .06);
        padding-left: 22px;
    }
}

/* Only once a third card shows up -- two fit without needing to scroll at
   all, which is the point of the cap. `:has()` keeps this a pure CSS rule
   instead of a height computed and re-applied from script every time an item
   is added, edited or removed. */
.lead-inline-col-left .lead-inline-list:has(.lead-inline-item:nth-child(3)) {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    margin-right: -6px;
}

@media (max-width: 575.98px) {
    .lead-inline-panel-body.lead-inline-two-col {
        flex-direction: column;
    }

    .lead-inline-col-left {
        max-width: none;
        width: 100%;
    }

    .lead-inline-col-right {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   CARD VARIANT (Grid / Kanban) -- see vryno-card-inline.js
--------------------------------------------------------------------------- */

/* The panel that expands directly under a Grid or Kanban card. In Grid it is
   given grid-column:1/-1 inline (so it spans every column and pushes later
   cards onto their own row below it, the same way a table's panel row pushes
   later rows down); in Kanban the column is already a plain vertical stack,
   so a normal sibling insert already pushes the cards below it down on its
   own. */
.lead-inline-panel-card {
    margin: 10px 0;
}

.lead-inline-panel-card .lead-inline-panel {
    animation: leadInlineOpen .15s ease-out;
}

/* A card mid-edit: its [data-field] rows and status-pill have become inputs
   in place, and a Save/Cancel bar sits at the bottom of the card for as long
   as that lasts. */
.lead-grid-card.lead-card-editing,
.k-card .group.lead-card-editing {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-transparent);
}

.lead-card-edit-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

/* [data-field] rows are compact icon+text lines -- the input replacing the
   text needs to stay just as compact, not stretch to the row's full width. */
[data-field] .lead-row-edit-input {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin-left: 4px;
    vertical-align: middle;
}

select.lead-row-edit-input {
    min-width: 120px;
}

/* ---- the "open the record" link every note/task/meeting card carries -----
   This has to be a block-level flex (not inline-flex): it is written right
   after the meta line's closing </span> with no space in between, so an
   inline-flex box would sit glued to "12:50 PM" on the very same line --
   exactly the run-on text ("12:50 PMView Deal") that overflowed its card
   and bled into the compose column next to it. display:flex here makes it
   start its own line unconditionally, the same way a <p> or <div> would,
   with no reliance on a space character that isn't actually there. */
.lead-inline-item-link {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-top: 4px;
}

.lead-inline-item-link:hover {
    text-decoration: underline;
}

.lead-inline-item-link i {
    font-size: 12px;
}

/* ---- generic inline form: label + control, wraps at narrow widths -------- */
.lead-inline-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}

.lead-inline-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.lead-inline-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.lead-inline-saved-flash {
    font-size: 12.5px;
    color: var(--success, #10b981);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}

/* ---- list-style panels: notes / tasks / meetings -------------------------- */
.lead-inline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.lead-inline-list:empty {
    display: none;
}

.lead-inline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    background: #fffbf2;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 10px;
    /* Right padding reserves room for the corner actions below so Edit/Delete
       never sit on top of the text, and the text column itself never has to
       fight the buttons for space. */
    padding: 10px 23px 10px 12px;
    transition: border-color .15s ease;
}

.lead-inline-item:hover {
    border-color: rgba(0, 0, 0, .1);
}

/* Clicking the line itself edits it now (theme-wide click-to-edit
   convention), so hint that the same way a table row / card does. Not
   while it's already the one being edited, and not over the Delete button
   or the "View Lead" link, which keep their own affordances. */
.lead-inline-item:not(.lead-inline-item-editing) {
    cursor: pointer;
}

.lead-inline-item-editing,
.lead-inline-item-actions,
.lead-inline-item-link,
.lead-inline-item .reaction-row {
    cursor: default;
}

.lead-inline-item:hover .lead-inline-item-actions {
    opacity: 1;
}

.lead-inline-item-editing {
    align-items: stretch;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-transparent);
}

/* Pinned to the card's own top-right corner rather than sitting in the flex
   row -- so it can never be pushed around by long text, and it never adds
   its own width to the row that the text has to shrink to make room for. */
.lead-inline-item-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s ease;
}

.lead-inline-item:focus-within .lead-inline-item-actions {
    opacity: 1;
}

.lead-inline-item-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--gray-600);
    background: transparent;
    border: none;
}

.lead-inline-item-btn:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--heading-color);
}

.lead-inline-item-btn.text-danger:hover {
    background: var(--danger-transparent);
    color: var(--danger);
}

.lead-inline-item-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--warning-transparent);
    color: var(--warning);
}

.lead-inline-item-ico.is-task {
    background: var(--info-transparent);
    color: var(--info);
}

.lead-inline-item-ico.is-meeting {
    background: var(--primary-transparent);
    color: var(--primary);
}

.lead-inline-item-ico.is-email {
    background: var(--indigo-transparent);
    color: var(--indigo);
}

.lead-inline-item-ico.is-call {
    background: var(--success-transparent);
    color: var(--success);
}

.lead-inline-item-main {
    flex: 1;
    min-width: 0;
}

.lead-inline-item-text {
    font-size: 13px;
    color: var(--heading-color);
    margin: 0 0 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.lead-inline-item-meta {
    display: block;
    font-size: 11.5px;
    color: var(--gray-600);
    overflow-wrap: anywhere;
}

.lead-inline-empty-state {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 12px;
}

/* ---- the icon whose panel is currently open, in the row above ------------ */
.lead-action-btn.is-active {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ---- inline row editing (Company/Phone/Email/Status click-to-edit) ------- */
/* Edit is no longer an Actions icon -- clicking the row itself starts this.
   See vryno-lead-inline.js. */
tr.lead-row.is-editing {
    background: var(--primary-transparent);
    cursor: default;
}

.lead-row-edit-input {
    min-width: 110px;
    max-width: 100%;
}

select.lead-row-edit-input {
    min-width: 130px;
}

/* ---- List View Settings: which action icons show in the row -------------- */
/* hide-action-{kind} is toggled on whichever table is on the page -- Leads'
   own hand-written settings script for #leadsListTable, and every other
   module's injected copy (see injectActionIconsSection in
   vryno-lead-inline.js) for its own table -- so this is a plain class
   selector, not scoped to one table id. The icons are tagged data-vr-kind by
   vryno-lead-inline.js as it claims them. */
.hide-action-note [data-vr-kind="note"] {
    display: none !important;
}

.hide-action-task [data-vr-kind="task"] {
    display: none !important;
}

.hide-action-meeting [data-vr-kind="meeting"] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .lead-inline-panel-cell {
        padding: 8px 8px 10px;
    }

    .lead-inline-panel {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .lead-inline-item-actions {
        opacity: 1; /* no hover on touch -- always show edit/delete */
    }
}

/* ---------------------------------------------------------------------------
   DARK
--------------------------------------------------------------------------- */
[data-bs-theme="dark"] .lead-inline-panel-cell {
    background: rgba(255, 255, 255, .03);
}

[data-bs-theme="dark"] .lead-inline-panel {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .lead-inline-item {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .lead-inline-item-editing {
    background: rgba(255, 255, 255, .04);
}

[data-bs-theme="dark"] .lead-inline-panel-close:hover {
    background: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .lead-inline-col-right {
    border-color: rgba(255, 255, 255, .08);
}
.form-switch {
    padding-left: 0 !important;
}

/* ============================================================================
   UNIFIED INLINE-EDIT VISUAL LANGUAGE
   ----------------------------------------------------------------------------
   One additive layer shared by every inline-edit surface in the product:
     - table rows      (vryno-lead-inline.js  -> tr.lead-row.is-editing)
     - grid/kanban cards (vryno-card-inline.js -> .lead-card-editing)
     - detail-page click-to-edit fields (detail-page.js / leads-details.html
       -> .inline-editable-field / .inline-edit-input)

   Nothing above this block is changed. This only adds:
     .vr-noneditable   -- data that IS visible but can't be edited right now,
                          applied to a row's/card's own non-edit-col content
                          the instant edit mode starts, removed the instant
                          it ends (save or cancel).
     .vr-is-saving     -- a brief busy state on the row/card while a Save is
                          "in flight" (simulated -- this prototype has no
                          real network round trip, existing save logic is
                          untouched, only its *visual* timing gets this state
                          wrapped around it).
     .vr-saved-flash   -- a soft, momentary confirmation once a save (row,
                          card, or a single detail-page field) actually
                          commits a changed value.
   ========================================================================= */

/* EDIT: the fields that stayed plain data (not part of this edit) recede --
   still fully visible and readable, just visually secondary, so "what can I
   change" vs "what can I only view" reads at a glance. */
.vr-noneditable {
    opacity: .55;
    transition: opacity .15s ease;
}

/* The active inputs/selects get an unmistakable focus ring -- on top of the
   sizing rules already defined above in this file. */
.lead-row-edit-input:focus,
.inline-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-transparent);
    border-color: var(--primary);
}

/* SAVING: everything in the row/card dims slightly and stops responding to
   clicks for the moment the (simulated) save is in flight. */
tr.lead-row.vr-is-saving,
.lead-grid-card.vr-is-saving,
.k-card .group.vr-is-saving {
    opacity: .72;
    pointer-events: none;
    transition: opacity .1s ease;
}

/* SAVED: a soft flash that fades back to normal on its own -- works the same
   way whether it lands on a <tr>, a card <div>, or a single detail-page
   <span>/<h4>/<p>. */
@keyframes vrSavedFlash {
    0% {
        background-color: var(--success-transparent, rgba(34, 197, 94, .16));
    }

    100% {
        background-color: transparent;
    }
}

.vr-saved-flash {
    animation: vrSavedFlash 900ms ease-out;
}

[data-bs-theme="dark"] .vr-noneditable {
    opacity: .5;
}


/* ==========================================================================
   THE PANEL IN A DIALOG  (card views only)
   ==========================================================================
   Grid and Kanban show this same panel in a dialog rather than under the
   card -- see the header of assets/js/vryno-card-inline.js for why. The
   panel is built by the same code either way, so the only thing needed here
   is to stop it drawing a second card inside the dialog's own: it already
   has a background, a border, a radius and a shadow for sitting in a table
   cell, and the .modal-content underneath now provides all four.

   List view is unaffected -- nothing below this comment applies outside
   .vr-card-panel-modal.
========================================================================== */

.vr-card-panel-modal .modal-content {
    border-radius: 15px;
    overflow: hidden;
}

.vr-card-panel-modal .lead-inline-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    animation: none;
}

/* The dialog is already as tall as the viewport allows and scrolls its own
   body, so the panel must not add a second scroller inside it. */
.vr-card-panel-modal .lead-inline-panel-body {
    max-height: none;
}

/* The panel's own close button is the dialog's close button here, so it sits
   where a dialog's does. */
.vr-card-panel-modal .lead-inline-panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white, #fff);
    margin: 0 0 18px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .06));
}

.vr-card-panel-modal .lead-inline-panel > :not(.lead-inline-panel-head) {
    padding-left: 22px;
    padding-right: 22px;
}

.vr-card-panel-modal .lead-inline-panel > :last-child {
    padding-bottom: 22px;
}