/* ==========================================================================
   PHARMAPLUS MAIL V3.2.2
   COMPOSE RECIPIENT INPUT CORRECTION
   ========================================================================== */

/*
 * Roundcube does NOT use the original To/Cc/Bcc field directly after the
 * recipient widget is initialized.
 *
 * Its JavaScript creates:
 *
 *   <ul class="form-control recipient-input ...">
 *       <li class="input"><input type="text"></li>
 *       ...
 *   </ul>
 *
 * and visually hides the original field.
 *
 * Pharmaplus V3/V3.1 global input:focus rules were therefore also styling
 * that internal generated <input>, producing a second green focus rectangle
 * INSIDE the real recipient field.
 *
 * The fix:
 *   1. the generated inner editable input stays visually borderless;
 *   2. the Roundcube recipient-input container owns the ONE focus ring;
 *   3. native recipient chips, autocomplete, Contacts, To/Cc/Bcc/Reply-To
 *      and drag/sort behavior remain untouched.
 */

/* --------------------------------------------------------------------------
   01. Inner generated editor — never render as a second form-control
   -------------------------------------------------------------------------- */

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.input > input,
body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.input > input:hover,
body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.input > input:focus,
body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.input > input:active {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;

    color: inherit !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   02. The actual Roundcube recipient widget is the visible field
   -------------------------------------------------------------------------- */

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input {
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 12px 4px !important;

    color: #1C2520 !important;
    background: #FFFFFF !important;

    border: 1px solid #D5DCD7 !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;

    cursor: text !important;
}

/* Roundcube adds .focus to the UL when the inner editor receives focus. */
body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input.focus {
    border-color: rgba(50,178,74,.82) !important;
    box-shadow: 0 0 0 3px rgba(50,178,74,.10) !important;
    outline: 0 !important;
    z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   03. Native recipient chips
   -------------------------------------------------------------------------- */

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.recipient {
    color: #1C2520 !important;
    background: #EFF8F1 !important;
    border-color: #CFE6D4 !important;
    border-radius: 6px !important;
}

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.recipient a.button.icon {
    color: #506057 !important;
}

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.recipient a.button.icon:hover,
body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.recipient a.button.icon:focus {
    color: #B01020 !important;
}

/* --------------------------------------------------------------------------
   04. Keep native Contacts / Add-header / Delete controls visually joined
   -------------------------------------------------------------------------- */

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.input-group-append {
    margin-left: 0 !important;
}

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.input-group-text {
    min-height: 42px !important;
    color: #5F6962 !important;
    background: #F7FAF8 !important;
    border-color: #D5DCD7 !important;
    box-shadow: none !important;
}

body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.input-group-text:hover,
body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.input-group-text:focus {
    color: #0F5C22 !important;
    background: #EFF8F1 !important;
    border-color: #BFDCC5 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   05. Dark mode
   -------------------------------------------------------------------------- */

html.dark-mode body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input {
    color: #F1F5F2 !important;
    background: #202A23 !important;
    border-color: #3A473E !important;
}

html.dark-mode body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input.focus {
    border-color: #67C979 !important;
    box-shadow: 0 0 0 3px rgba(103,201,121,.13) !important;
}

html.dark-mode body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.recipient {
    color: #F1F5F2 !important;
    background: #26352A !important;
    border-color: #496052 !important;
}

html.dark-mode body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.recipient-input > li.input > input {
    color: #F1F5F2 !important;
}

html.dark-mode body.task-mail.action-compose #compose-headers
:is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
.input-group-text {
    color: #C5D0C8 !important;
    background: #202A23 !important;
    border-color: #3A473E !important;
}

/* --------------------------------------------------------------------------
   06. Phone layout — preserve native wrapping and usable tap targets
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
    body.task-mail.action-compose #compose-headers
    :is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
    .recipient-input {
        min-height: 46px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.task-mail.action-compose #compose-headers
    :is(#compose_to, #compose_cc, #compose_bcc, #compose_replyto, #compose_followupto)
    .input-group-text {
        min-height: 46px !important;
        min-width: 42px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.task-mail.action-compose #compose-headers .recipient-input,
    body.task-mail.action-compose #compose-headers .recipient-input > li.input > input {
        transition: none !important;
    }
}