/* ============================================================================
   Modals - Bootstrap 3 .modal* skinned to look like BS5 dialogs
   ============================================================================ */

body.theme-new .modal-backdrop {
    background: #000;
}

body.theme-new .modal-backdrop.in {
    opacity: 0.6;
}

/* custom.css line 86 paints `.modal { background-color: rgba(0,0,0,0.5) }`
   on every modal element. BS3 already renders a separate `.modal-backdrop`
   for dimming — having a translucent dim on the modal element on top of
   that backdrop creates a doubled overlay that some BS3 themes animate
   to/from "in" state, producing a visible flicker when AJAX activity
   (like polling) causes a parent reflow. Restore BS3 default (transparent)
   so the backdrop alone handles dimming. */
body.theme-new .modal {
    background-color: transparent !important;
}

body.theme-new .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elev);
    color: var(--text-main);
}

body.theme-new .modal-header {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    padding: 16px 20px;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

body.theme-new .modal-title {
    color: var(--text-heading);
    font-weight: 600;
}

body.theme-new .modal-body {
    padding: 20px;
    color: var(--text-main);
}

body.theme-new .modal-footer {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-soft);
    padding: 14px 20px;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Close button - BS3 ships a giant × with opacity. Tame it to look like BS5 .btn-close */
body.theme-new .modal-header .close,
body.theme-new .modal-header button.close {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0.7;
    font-size: 22px;
    line-height: 1;
    text-shadow: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity var(--transition-speed) var(--ease-standard),
        background var(--transition-speed) var(--ease-standard),
        border-color var(--transition-speed) var(--ease-standard),
        color var(--transition-speed) var(--ease-standard);
    position: absolute;
    top: 12px;
    right: 14px;
}

body.theme-new .modal-header .close:hover,
body.theme-new .modal-header .close:focus {
    opacity: 1;
    background: var(--primary-tint);
    border-color: var(--border-color);
    color: var(--text-heading);
}

body.theme-new .modal-header .close > span {
    pointer-events: none;
}

/* Make sure title doesn't run into the absolutely-positioned close button */
body.theme-new .modal-header {
    position: relative;
    padding-right: 56px;
}

/* Large variants */
body.theme-new .modal-lg,
body.theme-new .modal-xl,
body.theme-new .modal-xxl {
    max-width: 92vw;
}

/* ============================================================================
   Task modal overrides — custom.css ships a stack of hard-coded `#303030`
   surfaces specifically for `.task-modal-single` (modal-body, the right
   column, horizontal tabs, even `.tw-bg-white !important` which forces a
   Tailwind white pill to render dark grey). They render as a black box
   on both themes regardless of `--bg-card`. Re-anchor every painted
   surface inside the task modal to our card token so it tracks the
   active theme. Specificity 0,3,0 beats the legacy 0,2,0 rules and the
   `!important` mirrors the legacy `!important` it has to override.
   ============================================================================ */
body.theme-new .task-modal-single .modal-content,
body.theme-new .task-modal-single .modal-body,
body.theme-new .task-modal-single .task-single-col-left,
body.theme-new .task-modal-single .task-single-col-right,
body.theme-new .task-modal-single .horizontal-scrollable-tabs {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* custom.css line 1250 forces every `.input-group-addon` to #303030
   (those are the calendar / clock / icon trailing buttons on the date
   pickers). Re-anchor to elevated surface so they sit naturally on
   light or dark form rows. */
body.theme-new .input-group-addon {
    background-color: var(--bg-elevated) !important;
    color: var(--text-main) !important;
    border-color: var(--input-border) !important;
}

/* style.css line 2663 hard-codes `.task-info h5 { color:#ffffff }` on
   every row in the task right column (Status, Date, Priority, Value,
   Tag, etc.). Combined with the `.tw-text-neutral-800` trigger pills
   that custom.css forces white too, every value in those rows renders
   invisible on the light card surface. Force the rows back to readable
   theme colors and make the inline-edit + popover triggers explicit. */
body.theme-new .task-modal-single .task-info h5,
body.theme-new .task-modal-single .task-info-heading,
body.theme-new .task-modal-single .task-info-created,
body.theme-new .task-modal-single .task-info-created span {
    color: var(--text-main) !important;
}

body.theme-new .task-modal-single .task-info .task-info-icon {
    color: var(--text-muted) !important;
}

body.theme-new .task-modal-single .text-has-action,
body.theme-new .task-modal-single .trigger,
body.theme-new .task-modal-single .manual-popover {
    background: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 1px dashed var(--border-color);
}

/* The priority trigger ships an inline `style="color:#ff..."` to
   carry the categorical color. Inline wins over our class rule —
   intended — but we need to make sure no background sneaks under it. */
body.theme-new .task-modal-single .task-info-priority .trigger,
body.theme-new .task-modal-single .task-info-priority .text-has-action {
    background: transparent !important;
}

/* The three-dots menu icon row above "Informações da Tarefa".
   `<a class="trigger manual-popover"><i class="fa-regular fa-circle">` ×3
   - default link color forced #fff sitewide; bring it back so the dots
   are visible on the white card. */
body.theme-new .task-modal-single .task-single-menu > a.trigger,
body.theme-new .task-modal-single .task-single-menu > a.trigger i {
    color: var(--text-muted) !important;
}
body.theme-new .task-modal-single .task-single-menu > a.trigger:hover,
body.theme-new .task-modal-single .task-single-menu > a.trigger:hover i {
    color: var(--primary-color) !important;
}

/* Inline date pickers inside the task-info rows
   (#task-single-startdate / #task-single-duedate). custom.css line 1233
   forces `color:#000` on them which is fine in light mode but tanks
   them in dark; also reset the background so the input doesn't leak
   the legacy `#f8fafc` slate. */
body.theme-new .task-modal-single .task-info-inline-input-edit,
body.theme-new .task-modal-single #task-single-startdate,
body.theme-new .task-modal-single #task-single-duedate {
    background: transparent !important;
    color: var(--text-main) !important;
    border-bottom: 1px dashed var(--border-color) !important;
}

body.theme-new .task-modal-single .modal-content .list-group .list-group-item {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-soft) !important;
}

/* custom.css line 1247 forces `.tw-bg-white { background-color: #303030 !important }`
   site-wide. That breaks every Tailwind white pill across the admin,
   not just the task modal — flatten it back to the card surface so the
   token does its job again. */
body.theme-new .tw-bg-white {
    background-color: var(--bg-card) !important;
}

/* custom.css line 590 forces every label inside any .modal-content to
   white. That makes labels invisible in light mode (white on white).
   Re-anchor to text-main so labels stay readable in both themes. */
body.theme-new .modal-content label,
body.theme-new .modal-content .control-label {
    color: var(--text-main) !important;
}

/* custom.css line 581 forces every .modal-content background to
   `var(--accent)` (#303030) with white text — kills light mode for
   every modal, not just the task modal. Override globally for
   theme-new so modals respect --bg-card. */
body.theme-new .modal-content {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

body.theme-new .modal-content .modal-header,
body.theme-new .modal-content .modal-header h4,
body.theme-new .modal-content .modal-header button span {
    color: var(--text-heading) !important;
}

/* Bootstrap-confirmation, sweetalert / custom dialog generic catch */
body.theme-new .sweet-alert,
body.theme-new .swal2-popup,
body.theme-new .swal-modal {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-color) !important;
}

body.theme-new .swal2-title,
body.theme-new .swal-title {
    color: var(--text-heading) !important;
}

body.theme-new .swal2-content,
body.theme-new .swal-text {
    color: var(--text-main) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-new .modal-header .close {
        transition: none !important;
    }
}