/* ── Click-to-call panel — the surface public/js/crm-dial.js builds ───────────
 *
 * Loaded by resources/views/partials/phone-assets.blade.php, the ONE include
 * that already carries the phone widget. Kept in its own file rather than
 * inlined so the deploy stamp (crm_asset) can cache it.
 *
 * The panel is a surface this app owns, so it paints every colour it needs —
 * background, text, border, and the border of each control. Inheriting from a
 * page whose theme it does not know is how a control ends up invisible on a
 * dark pane (the 17/08/2026 dark-control class). The dark arm keys off
 * [data-bs-theme="dark"], the selector the super-admin theme sets.
 */

.crm-phone[data-dial] {
    cursor: pointer;
}

/* The flag beside a number. intlTelInput.css sizes .iti__flag (width, height,
   sprite) but never sets display — inside the widget a flex parent shows it.
   As a bare inline <i> those dimensions are IGNORED and the flag renders as
   nothing at all, everywhere Phone::html() / <x-phone> put one (02/09/2026
   review finding — it had been invisible since the display door shipped). */
.crm-phone > .iti__flag {
    display: inline-block;
    vertical-align: -1px;
}

.crm-phone[data-dial]:hover,
.crm-phone[data-dial]:focus-visible {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* A number that dials on its own click is a real <a>, and Bootstrap underlines
   every anchor — a whole column of underlined numbers is the 19/08/2026
   underlined-name-cell class over again. It carries its own colour too: an
   unstyled anchor takes the link blue, which on the Tele Call queue would make
   the phone column read as a navigation link to somewhere rather than as the
   dial it is. Hover keeps the dotted hint the panel numbers get, so both kinds
   of number still say "this is clickable" the same way. */
a.crm-phone-direct {
    color: inherit;
    text-decoration: none;
}

a.crm-phone-direct:hover,
a.crm-phone-direct:focus-visible {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.crm-dial-pop {
    position: absolute;
    z-index: 1085;                 /* above a Bootstrap modal (1055) */
    min-width: 218px;
    max-width: 280px;
    padding: 10px 12px 9px;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    background: #ffffff;
    color: #2b2b40;
    box-shadow: 0 6px 22px rgba(17, 24, 39, .16);
    font-size: .82rem;
    line-height: 1.35;
}

.crm-dial-num {
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-dial-actions {
    display: flex;
    gap: 6px;
}

/* Scoped one level up so a module class stamped onto the Call anchor cannot
   restyle it: the Tele Call queue adds .tc-dial (its bar hook), whose page
   style declares underline-on-hover for number links. Specificity (0,2,0)
   beats the page's (0,1,0) without leaning on !important. */
.crm-dial-pop .crm-dial-act,
.crm-dial-pop .crm-dial-act:hover,
.crm-dial-pop .crm-dial-act:focus-visible {
    text-decoration: none;
}

.crm-dial-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.crm-dial-call {
    background: #16a34a;
    border-color: #15803d;
    color: #ffffff;
}

.crm-dial-call:hover,
.crm-dial-call:focus-visible {
    background: #15803d;
    color: #ffffff;
}

.crm-dial-copy {
    background: #f3f4f6;
    border-color: #cbd2dc;
    color: #374151;
}

.crm-dial-copy:hover,
.crm-dial-copy:focus-visible {
    background: #e5e7eb;
    color: #111827;
}

.crm-dial-hint {
    margin-top: 8px;
    font-size: .69rem;
    color: #6b7280;
}

/* ── Dark ─────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .crm-dial-pop {
    background: #1e1e2d;
    border-color: #3a3a4a;
    color: #d1d5db;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .crm-dial-copy {
    background: #2a2a3a;
    border-color: #3f3f52;
    color: #c4c4d4;
}

[data-bs-theme="dark"] .crm-dial-copy:hover,
[data-bs-theme="dark"] .crm-dial-copy:focus-visible {
    background: #343448;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .crm-dial-hint {
    color: #9096a8;
}