/* =========================================
   ColorField styling (django-colorfield)
   ========================================= */

/* Ensure the Coloris wrapper behaves like a full block with Unfold max-width */
.clr-field {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 14rem !important;
    /* max-w-2xl, standard for Unfold inputs */
}

/* Coloris input field styled as Unfold text field */
input.colorfield_field.coloris {
    height: 2.25rem !important;
    /* h-9 */
    border-radius: 0.375rem !important;
    /* rounded-md */
    border-width: 1px !important;
    border-style: solid !important;
    padding-left: 0.75rem !important;
    padding-right: 1.5rem !important;
    /* space for the thin line swatch */
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background-color: transparent !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100% !important;
    /* Unfold inputs usually take full width */
}

/* Light mode for ColorField */
html:not(.dark) input.colorfield_field.coloris {
    border-color: #e5e7eb !important;
    /* border-gray-200 */
    color: #111827 !important;
    /* text-gray-900 */
}

html:not(.dark) input.colorfield_field.coloris:focus {
    border-color: #3b82f6 !important;
    /* blue-500 */
    box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* Dark mode for ColorField */
html.dark input.colorfield_field.coloris {
    border-color: #374151 !important;
    /* border-gray-700 */
    color: #f3f4f6 !important;
    /* text-gray-100 */
}

html.dark input.colorfield_field.coloris:focus {
    border-color: #3b82f6 !important;
    /* blue-500 */
    box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* Color swatch transformed into a sleek thin line indicator on the right edge */
.clr-field button {
    display: block !important;
    position: absolute !important;
    right: 1px !important;
    top: 1px !important;
    width: 8px !important;
    /* Тонкая линия */
    height: calc(100% - 2px) !important;
    border: none !important;
    border-radius: 0 0.375rem 0.375rem 0 !important;
    /* Закругляем только правую часть */
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

html.dark .clr-field button {
    /* No extra border needed */
}

/* Coloris Popup Dark Mode Overrides */
html.dark .clr-picker {
    background-color: #1f2937 !important;
    /* bg-gray-800 */
    border-color: #374151 !important;
    /* border-gray-700 */
    color: #f3f4f6 !important;
    /* text-gray-100 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .clr-picker input.clr-color {
    background-color: #374151 !important;
    /* bg-gray-700 */
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
    /* border-gray-600 */
}

html.dark .clr-picker input.clr-color:focus {
    border-color: #3b82f6 !important;
    /* blue-500 */
}

html.dark .clr-picker .clr-segmented {
    border-color: #4b5563 !important;
}

html.dark .clr-picker .clr-segmented label {
    color: #9ca3af !important;
    /* text-gray-400 */
}

html.dark .clr-picker .clr-segmented input:checked+label {
    color: #f3f4f6 !important;
    background-color: #4b5563 !important;
}

html.dark .clr-picker .clr-swatches button:after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important;
}


/* =========================================
   EmojiWidget styling
   ========================================= */

/* Emoji button styles */
button[id^="emoji_btn_"] {
    width: 2.25rem !important;
    /* h-9 equivalent */
    height: 2.25rem !important;
    border-radius: 0.375rem !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

button[id^="emoji_btn_"]:hover {
    background-color: #f9fafb !important;
    /* hover:bg-gray-50 */
}

button[id^="emoji_btn_"]:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 1px #2563eb !important;
}

/* Emoji button dark mode */
html.dark button[id^="emoji_btn_"] {
    background-color: #1f2937 !important;
    /* gray-800 */
    border-color: #374151 !important;
    /* border-gray-700 */
    color: #9ca3af !important;
    /* text-gray-400 */
}

html.dark button[id^="emoji_btn_"]:hover {
    background-color: #374151 !important;
    /* gray-700 */
}

html.dark button[id^="emoji_btn_"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* Emoji picker popup dark mode */
html.dark div[id^="emoji_picker_"] {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark div[id^="emoji_picker_"] .bg-white {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.dark div[id^="emoji_picker_"] .hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

html.dark div[id^="emoji_picker_"] .text-gray-700 {
    color: #d1d5db !important;
    /* gray-300 */
}

/* Customizing the emoji-picker web component dark mode colors */
html.dark emoji-picker,
emoji-picker.dark {
    --background: #1f2937 !important;
    /* bg-gray-800 */
    --border-color: #374151 !important;
    /* border-gray-700 */
    --input-border-color: #4b5563 !important;
    /* border-gray-600 */
    --input-font-color: #f3f4f6 !important;
    /* text-gray-100 */
    --indicator-color: #3b82f6 !important;
    /* blue-500 */
}


/* =========================================
   Global Fixes for Unfold
   ========================================= */

/* Emoji widget popup fix for Unfold admin */
/* Unfold's fieldset containers use overflow-hidden which clips popups. */
fieldset .overflow-hidden,
fieldset>div,
.form-row {
    overflow: visible !important;
}


/* Tabular Inlines: row_number (№) minimal width */
th.column-row_number,
td.field-row_number {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

th.column-row_number span {
    justify-content: center !important;
}

td.field-row_number > div {
    width: 35px !important;
    min-width: 0 !important;
    max-width: 35px !important;
    margin: 0 auto !important;
}

td.field-row_number input {
    width: 35px !important;
    min-width: 0 !important;
    max-width: 35px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
}

td.field-row_number input::-webkit-outer-spin-button,
td.field-row_number input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}