/*
    Category picker (Components/Popups/Shared/CategoryPicker.razor): the mobile Transaction tab category field
    (TransactionPopup.xaml, sfComboBoxCategory) on the shared field box. The Syncfusion combo box drops its own border,
    focus ring and background (the field box draws them, and turns PrimaryColor on focus), shows a muted chevron, and
    its list, which Syncfusion appends to <body> with the combo's CssClass (txc-combo), uses the popup tokens.

    Mobile values: field Padding 12,0,4,0; tag glyph 13 PrimaryColor; combo 44 tall, SemiBold 15 BaseTextColor,
    BaseLightTextColor placeholder; dropdown button 20x20 with a 12 DashboardMutedTextColor chevron; list 260 wide,
    BasePageColor background, EntryAndEditorsBorderColor stroke, 38 per item; item Padding 8,4, a 24 column with the 14
    glyph in an 18 box, then the label (Regular 13) 8 further.

    Prefix: txc-. Colors: the --tx-* tokens of transaction-popups.css (light on :root, dark on [data-bs-theme="dark"]).
    Load this file after the Syncfusion theme and after transaction-popups.css.
*/

:root {
    --txc-popup-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}

[data-bs-theme="dark"] {
    --txc-popup-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ The field */

.tx-field-box.txc-field {
    padding: 0 4px 0 12px;
}

.txc-tag {
    font-size: 13px;
    color: var(--tx-primary);
}

.txc-combo-host {
    flex: 1 1 auto;
    min-width: 0;
}

/* The combo box: borderless and transparent inside the field box. !important beats the theme's focus and hover rules. */
.txc-field .e-input-group.e-control-wrapper.txc-combo {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-text);
}

.txc-field .e-input-group.e-control-wrapper.txc-combo::before,
.txc-field .e-input-group.e-control-wrapper.txc-combo::after {
    display: none;
}

.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input {
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    text-indent: 0;
    border: 0;
    background: transparent;
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-text);
}

.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input::placeholder {
    color: var(--tx-light-text);
    opacity: 1;
}

/* The field box's border shows the focus (the mobile field turns PrimaryColor), so the input draws no ring of its own. */
.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input:focus,
.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input:focus-visible {
    outline: none;
}

/* The dropdown button: a muted 12px Font Awesome chevron in a 20px box (DropDownButtonSettings). */
.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon,
.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon:hover,
.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon:active {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    color: var(--tx-muted);
}

.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon::before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
}

/* Disabled: dimmed like the other disabled popup fields, still readable. */
.txc-field.txc-disabled .e-input-group.e-control-wrapper.txc-combo {
    opacity: .8;
}

.txc-field.txc-disabled .e-input-group.e-control-wrapper.txc-combo input.e-input {
    color: var(--tx-text);
    -webkit-text-fill-color: var(--tx-text);
    cursor: default;
}

/* ------------------------------------------------------------------ The list (appended to <body>) */

.e-ddl.e-popup.txc-combo {
    max-width: calc(100vw - 32px);
    overflow: hidden;
    border: 1px solid var(--tx-entry-border);
    border-radius: 12px;
    background: var(--tx-page);
    box-shadow: var(--txc-popup-shadow);
}

.e-ddl.e-popup.txc-combo .e-content,
.e-ddl.e-popup.txc-combo .e-list-parent {
    background: transparent;
}

.e-ddl.e-popup.txc-combo .e-list-item {
    display: flex;
    align-items: center;
    height: 38px;
    min-height: 38px;
    padding: 0;
    text-indent: 0;
    line-height: normal;
    background: transparent;
    color: var(--tx-text);
    font-family: var(--tx-font);
    font-size: 13px;
}

.e-ddl.e-popup.txc-combo .e-list-item.e-hover,
.e-ddl.e-popup.txc-combo .e-list-item.e-item-focus {
    background: var(--tx-surface);
    color: var(--tx-text);
}

.e-ddl.e-popup.txc-combo .e-list-item.e-active,
.e-ddl.e-popup.txc-combo .e-list-item.e-active.e-hover,
.e-ddl.e-popup.txc-combo .e-list-item.e-active.e-item-focus {
    background: var(--tx-calendar-selection);
    color: var(--tx-calendar-selection-text);
}

.e-ddl.e-popup.txc-combo .e-dropdownbase.e-nodata {
    color: var(--tx-muted);
    font-family: var(--tx-font);
    font-size: 13px;
}

/* One row: Grid Padding="8,4" ColumnDefinitions="24,*", the glyph (14) in an 18 box, the label 8 further. */
.txc-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 4px 8px;
}

.txc-item-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 18px;
    height: 18px;
    font-size: 14px;
    color: inherit;
}

.txc-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tx-font);
    font-weight: 400;
    font-size: 13px;
    color: inherit;
}