/* Unified editable names in the emerald header of deal/contact/company cards.
   Name fields remain as invisible system markers for legacy field settings.
   All body sections and relationships retain their original DOM/JS contracts. */
#dealDetailOverlay #dealTitleField,
#contactDetailOverlay #contactFullNameField,
#companyDetailOverlay #crmCompanyFieldsList [data-company-key="name"] {
    display:none !important;
}
#dealDetailOverlay .crm-card-header-name,
#contactDetailOverlay .crm-card-header-name,
#companyDetailOverlay .crm-card-header-name {
    display:flex;
    flex:1 1 0;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    max-width:100%;
    margin:0;
    gap:4px;
}
#dealDetailOverlay .crm-card-header-name-line,
#contactDetailOverlay .crm-card-header-name-line,
#companyDetailOverlay .crm-card-header-name-line {
    display:flex;
    align-items:center;
    min-width:0;
    gap:9px;
}
#dealDetailOverlay #dealDetailTitle,
#contactDetailOverlay #contactDetailName,
#companyDetailOverlay #companyDetailTitle {
    display:block;
    flex:0 1 auto;
    min-width:0;
    max-width:100%;
    width:auto;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#FFFFFF !important;
    font-size:clamp(13px,1.45vw,20px) !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-shadow:0 1px 2px rgba(0,55,45,.20);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
#dealDetailOverlay #dealDetailTitle[hidden],
#contactDetailOverlay #contactDetailName[hidden] { display:none !important; }
#dealDetailOverlay .crm-card-header-edit,
#contactDetailOverlay .crm-card-header-edit,
#companyDetailOverlay .crm-card-header-edit {
    display:inline-flex !important;
    flex:0 0 29px;
    width:29px;
    height:29px;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.58) !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.19) !important;
    color:#FFFFFF !important;
    font-size:17px !important;
    line-height:1;
    cursor:pointer;
    box-shadow:none !important;
}
/* Older contact styles also target deal-detail-edit-button; the explicit
   name-button IDs keep its white-on-emerald treatment identical to Deals. */
#dealDetailOverlay #dealTitleEditButton,
#contactDetailOverlay #contactNameEditButton,
#companyDetailOverlay #companyHeaderNameEdit {
    background:rgba(255,255,255,.19) !important;
    color:#FFFFFF !important;
    border:1px solid rgba(255,255,255,.58) !important;
    width:29px !important;
    height:29px !important;
    flex:0 0 29px !important;
    font-size:17px !important;
}
#dealDetailOverlay #dealTitleEditButton:hover,
#contactDetailOverlay #contactNameEditButton:hover,
#companyDetailOverlay #companyHeaderNameEdit:hover {
    background:rgba(255,255,255,.32) !important;
    border-color:#FFFFFF !important;
    color:#FFFFFF !important;
}
#dealDetailOverlay .crm-card-header-edit:hover,
#contactDetailOverlay .crm-card-header-edit:hover,
#companyDetailOverlay .crm-card-header-edit:hover {
    background:rgba(255,255,255,.32) !important;
    border-color:#FFFFFF !important;
}
#dealDetailOverlay .crm-card-header-edit[hidden],
#contactDetailOverlay .crm-card-header-edit[hidden],
#companyDetailOverlay .crm-card-header-edit[hidden] { display:none !important; }
#dealDetailOverlay .crm-card-header-editor,
#contactDetailOverlay .crm-card-header-editor,
#companyDetailOverlay .crm-card-header-editor {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    min-width:0;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
#dealDetailOverlay .crm-card-header-editor[hidden],
#contactDetailOverlay .crm-card-header-editor[hidden],
#companyDetailOverlay .crm-card-header-editor[hidden] {
    display:none !important;
}
#dealDetailOverlay .crm-card-header-name:has(.crm-card-header-editor:not([hidden])) .crm-card-header-name-line,
#contactDetailOverlay .crm-card-header-name:has(.crm-card-header-editor:not([hidden])) .crm-card-header-name-line,
#companyDetailOverlay .crm-card-header-name:has(.crm-card-header-editor:not([hidden])) .crm-card-header-name-line {
    display:none !important;
}
#dealDetailOverlay .crm-card-header-editor > input,
#contactDetailOverlay .crm-card-header-editor > input,
#companyDetailOverlay .crm-card-header-editor > input {
    flex:1 1 200px;
    min-width:100px;
    max-width:100%;
    height:34px !important;
    padding:6px 10px !important;
    margin:0 !important;
    border:1px solid #9BDFBD !important;
    border-radius:8px !important;
    background:#FFFFFF !important;
    color:#174F40 !important;
    font-size:13px !important;
}
#dealDetailOverlay .crm-card-header-editor-actions,
#contactDetailOverlay .crm-card-header-editor-actions,
#companyDetailOverlay .crm-card-header-editor-actions {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:6px;
    margin:0 !important;
}
#dealDetailOverlay .crm-card-header-editor-actions button,
#contactDetailOverlay .crm-card-header-editor-actions button,
#companyDetailOverlay .crm-card-header-editor-actions button {
    width:auto !important;
    min-width:0 !important;
    min-height:32px;
    padding:6px 10px !important;
    margin:0 !important;
    border-radius:8px !important;
    font-size:11px !important;
    font-weight:750 !important;
    cursor:pointer;
}
/* Contact/deal legacy editor rules are highly specific and use !important.
   The two IDs here keep the compact editor horizontal in the green header. */
#dealDetailOverlay #dealTitleEditor,
#contactDetailOverlay #contactNameEditor {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
}
#dealDetailOverlay #dealTitleEditor[hidden],
#contactDetailOverlay #contactNameEditor[hidden] {
    display:none !important;
}
#dealDetailOverlay #dealTitleEditor > input,
#contactDetailOverlay #contactNameEditor > input {
    box-sizing:border-box !important;
    width:auto !important;
    flex:1 1 160px !important;
    min-width:80px !important;
    max-width:100% !important;
    height:34px !important;
    min-height:34px !important;
    padding:5px 10px !important;
}
#dealDetailOverlay #dealTitleEditor .crm-card-header-editor-actions,
#contactDetailOverlay #contactNameEditor .crm-card-header-editor-actions {
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    flex-direction:row !important;
    gap:6px !important;
    margin:0 !important;
}
#dealDetailOverlay #dealTitleEditor .crm-card-header-editor-actions button,
#contactDetailOverlay #contactNameEditor .crm-card-header-editor-actions button {
    min-height:30px !important;
    width:auto !important;
    padding:5px 9px !important;
}
/* Preserve the header's close/delete/new-deal actions and ID badge. */
#dealDetailOverlay .deal-detail-header-actions,
#contactDetailOverlay .contact-detail-header-actions,
#companyDetailOverlay .company-detail-header-actions {
    flex:0 0 auto !important;
    margin-left:auto !important;
}
/* Keep the original header dimensions and emerald treatment: the only
   layout change is placing the small card-type caption BELOW the name. */
#dealDetailOverlay .crm-card-header-name,
#contactDetailOverlay .crm-card-header-name,
#companyDetailOverlay .crm-card-header-name {
    gap:3px;
    align-items:stretch;
}
#dealDetailOverlay .crm-card-header-name .crm-card-header-caption,
#contactDetailOverlay .crm-card-header-name .crm-card-header-caption,
#companyDetailOverlay .crm-card-header-name .crm-card-header-caption {
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    align-self:flex-start;
    gap:9px;
    max-width:100%;
    min-height:12px;
    padding:0 !important;
    margin:0 !important;
    color:#E6FFF4 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.9px !important;
    line-height:1.1 !important;
    white-space:nowrap;
}
/* Keep the existing mint dot/halo next to the caption. */
#dealDetailOverlay .crm-card-header-name .crm-card-header-caption::before,
#contactDetailOverlay .crm-card-header-name .crm-card-header-caption::before,
#companyDetailOverlay .crm-card-header-name .crm-card-header-caption::before {
    flex:0 0 8px;
    width:8px;
    height:8px;
    margin:0;
}
@media (max-width:600px) {
    #dealDetailOverlay .crm-card-header-name .crm-card-header-caption,
    #contactDetailOverlay .crm-card-header-name .crm-card-header-caption,
    #companyDetailOverlay .crm-card-header-name .crm-card-header-caption {
        gap:6px;
        font-size:9px !important;
        letter-spacing:.35px !important;
    }
}
@media (max-width:950px) {
    #dealDetailOverlay .deal-detail-header,
    #contactDetailOverlay .contact-detail-header,
    #companyDetailOverlay .company-detail-header {
        gap:9px !important;
        padding-left:11px !important;
        padding-right:11px !important;
    }
    #dealDetailOverlay #dealDetailTitle,
    #contactDetailOverlay #contactDetailName,
    #companyDetailOverlay #companyDetailTitle {
        font-size:13px !important;
    }
    #dealDetailOverlay .crm-card-header-name-line,
    #contactDetailOverlay .crm-card-header-name-line,
    #companyDetailOverlay .crm-card-header-name-line {gap:5px;}
}
@media (max-width:600px) {
    #dealDetailOverlay .crm-card-header-name,
    #contactDetailOverlay .crm-card-header-name,
    #companyDetailOverlay .crm-card-header-name {flex:1 1 auto;max-width:40vw;}
    #dealDetailOverlay .crm-card-header-edit,
    #contactDetailOverlay .crm-card-header-edit,
    #companyDetailOverlay .crm-card-header-edit {
        flex-basis:25px;width:25px;height:25px;font-size:14px !important;
    }
    #dealDetailOverlay .crm-card-header-editor > input,
    #contactDetailOverlay .crm-card-header-editor > input,
    #companyDetailOverlay .crm-card-header-editor > input {flex-basis:100%;height:29px !important;}
    #dealDetailOverlay .crm-card-header-editor-actions button,
    #contactDetailOverlay .crm-card-header-editor-actions button,
    #companyDetailOverlay .crm-card-header-editor-actions button {min-height:25px;padding:3px 6px !important;}
}