/*
 * DP Standard Icon UI
 * Canonical specification: ../STANDARD_ICON_UI.md
 * These rules are intentionally opt-in and affect only dp-icon-* classes.
 */

.dp-icon-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    vertical-align: middle;
}

/* Case Note/SOAP label actions stay beside their label as one compact group. */
.dp-note-form label,
.dp-note-form .dp-icon-actions {
    white-space: nowrap;
}

.dp-note-form .dp-icon-actions {
    flex-wrap: nowrap;
}

/* Reusable circular shape, currently scoped by the Patient note-form owner. */
.dp-icon-round .dp-icon-btn {
    border-radius: 50% !important;
}

/* Compact Case Note/SOAP field-header variant; normal Standard Icons stay 30px. */
.dp-note-form .dp-note-field.dp-icon-round-compact .dp-icon-btn {
    width: 26px !important;
    min-width: 26px;
    height: 26px !important;
    min-height: 26px;
}

/* Normalize the active Add Treatment Item Remove glyph without an optical offset. */
.dp-icon-btn.dp-treatment-item-remove > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center;
}

.dp-icon-btn.dp-treatment-item-remove > i::before {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Keeps an established field and its standalone action on the same row. */
.dp-field-icon-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
}

.dp-field-icon-actions > input,
.dp-field-icon-actions > select {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
}

.dp-field-icon-actions > .dp-icon-btn {
    flex: 0 0 30px;
}

/* Compact, non-wrapping action group used only by Treatment Item rows. */
.dp-treatment-item-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

.dp-treatment-item-actions .dp-icon-treatment,
.dp-treatment-item-actions .dp-icon-medicine,
.dp-treatment-item-actions .dp-icon-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    min-width: 30px;
    height: 30px !important;
    min-height: 30px;
    border-radius: 6px !important;
}

/* Add Treatment Item row Remove action only; the click handler remains on its table cell. */
.dp-treatment-item-remove-cell {
    vertical-align: middle;
    padding-top: calc(0.5625rem + 4px);
}

.dp-treatment-item-remove-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    color: #c62828;
    background-color: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 50%;
    line-height: 1;
    vertical-align: middle;
}

.dp-treatment-item-remove-circle > i {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1;
}

/* Compatibility spacing for legacy fragments whose handlers cannot safely be reparented. */
.dp-icon-btn + .dp-icon-btn {
    margin-inline-start: 8px !important;
}

/* A canonical flex group already supplies the exact gap; do not double it. */
.dp-icon-actions > .dp-icon-btn + .dp-icon-btn,
.dp-treatment-item-actions > .dp-icon-btn + .dp-icon-btn {
    margin-inline-start: 0 !important;
}

.dp-icon-btn {
    --dp-icon-color: #008cba;
    --dp-icon-hover-color: #007095;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px !important;
    min-width: 30px;
    height: 30px !important;
    min-height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    vertical-align: middle;
    color: var(--dp-icon-color) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--dp-icon-color) !important;
    border-radius: 4px !important;
    /* Existing DP controls may retain translated text as their accessible name. */
    font-size: 0;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease,
        color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.dp-icon-btn > i,
.dp-icon-btn > svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    pointer-events: none;
}

.dp-icon-btn.searchbtn > i {
    display: block;
    margin: 0 !important;
}

/* Legacy DP fragments sometimes attach the existing handler to the icon itself. */
.dp-icon-btn.fa,
.dp-icon-btn.fas,
.dp-icon-btn.far {
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.dp-icon-btn.fa::before,
.dp-icon-btn.fas::before,
.dp-icon-btn.far::before {
    display: block;
    line-height: 1;
}

.dp-icon-btn:hover {
    color: #ffffff !important;
    background-color: var(--dp-icon-hover-color) !important;
    border-color: var(--dp-icon-hover-color) !important;
    text-decoration: none;
}

.dp-icon-btn:focus {
    color: var(--dp-icon-color) !important;
    background-color: #ffffff !important;
    border-color: var(--dp-icon-color) !important;
    outline: 2px solid #222222;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 140, 186, 0.25);
}

.dp-icon-btn:focus:hover {
    color: #ffffff !important;
    background-color: var(--dp-icon-hover-color) !important;
    border-color: var(--dp-icon-hover-color) !important;
}

.dp-icon-btn:active {
    color: #ffffff !important;
    background-color: var(--dp-icon-hover-color) !important;
    border-color: var(--dp-icon-hover-color) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
    transform: translateY(1px);
}

.dp-icon-btn[disabled],
.dp-icon-btn[aria-disabled="true"],
.dp-icon-btn.dp-icon-disabled {
    color: #767676 !important;
    background-color: #f2f2f2 !important;
    border-color: #bdbdbd !important;
    box-shadow: none;
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.dp-icon-save {
    --dp-icon-color: #43ac6a;
    --dp-icon-hover-color: #368a3e;
}

.dp-icon-select,
.dp-icon-edit {
    --dp-icon-color: #008cba;
    --dp-icon-hover-color: #007095;
}

.dp-icon-cancel,
.dp-icon-delete,
.dp-icon-remove {
    --dp-icon-color: #f04124;
    --dp-icon-hover-color: #cf2a0e;
}

.dp-icon-print,
.dp-icon-pdf {
    --dp-icon-color: #f08a24;
    --dp-icon-hover-color: #de770f;
}

/* Reusable actions first standardised by the Patient module. */
.dp-icon-search {
    --dp-icon-color: #00b4cc;
    --dp-icon-hover-color: #008fa3;
}

.dp-icon-add,
.dp-icon-upload,
.dp-icon-attach {
    --dp-icon-color: #03a9f4;
    --dp-icon-hover-color: #0288d1;
}

.dp-icon-view,
.dp-icon-copy {
    --dp-icon-color: #1565c0;
    --dp-icon-hover-color: #0d47a1;
}

.dp-icon-voice {
    --dp-icon-color: #1565c0;
    --dp-icon-hover-color: #0d47a1;
}

.dp-icon-calculate {
    --dp-icon-color: #008cba;
    --dp-icon-hover-color: #007095;
}

.dp-icon-payment {
    --dp-icon-color: #00796b;
    --dp-icon-hover-color: #00695c;
}

.dp-icon-whatsapp {
    --dp-icon-color: #388e3c;
    --dp-icon-hover-color: #2e7d32;
}

.dp-icon-hide {
    --dp-icon-color: #ef5350;
    --dp-icon-hover-color: #d32f2f;
}

.dp-icon-history,
.dp-icon-detail {
    --dp-icon-color: #5e35b1;
    --dp-icon-hover-color: #4527a0;
}

.dp-icon-undo,
.dp-icon-reset {
    --dp-icon-color: #ef6c00;
    --dp-icon-hover-color: #e65100;
}

.dp-icon-checkin {
    --dp-icon-color: #f57f17;
    --dp-icon-hover-color: #e65100;
}

.dp-icon-treatment {
    --dp-icon-color: #2e7d32;
    --dp-icon-hover-color: #1b5e20;
}

.dp-icon-medicine {
    --dp-icon-color: #ff6f00;
    --dp-icon-hover-color: #e65100;
}

.dp-icon-product {
    --dp-icon-color: #3f51b5;
    --dp-icon-hover-color: #283593;
}

.dp-icon-package {
    --dp-icon-color: #26a69a;
    --dp-icon-hover-color: #00796b;
}

.dp-icon-sales-order {
    --dp-icon-color: #fb8c00;
    --dp-icon-hover-color: #ef6c00;
}

.dp-icon-sign,
.dp-icon-mobile-sign {
    --dp-icon-color: #33691e;
    --dp-icon-hover-color: #1b5e20;
}

.dp-icon-credit,
.dp-icon-deposit {
    --dp-icon-color: #00796b;
    --dp-icon-hover-color: #004d40;
}

.dp-icon-refresh,
.dp-icon-security {
    --dp-icon-color: #33691e;
    --dp-icon-hover-color: #1b5e20;
}

.dp-icon-expand,
.dp-icon-info {
    --dp-icon-color: #f9a825;
    --dp-icon-hover-color: #f57f17;
}

.dp-icon-navigation {
    --dp-icon-color: #ff6f00;
    --dp-icon-hover-color: #e65100;
}

@media (prefers-reduced-motion: reduce) {
    .dp-icon-btn {
        transition: none;
    }
}

/*
 * Patient rollback adapter.
 *
 * Patient actions outside the approved Treatment / Medicine / Product group
 * retain their legacy inline icon presentation. The one-em gap reproduces the
 * former pair of en-space separators in grouped legacy actions.
 */
.dp-patient-legacy-actions {
    display: inline-flex;
    align-items: baseline;
    gap: 1em;
    vertical-align: baseline;
}