/* iResponse Pro — UX helpers (empty states, micro-interactions) */

/* ── Empty State ─────────────────────────────────────────────────── */
.ir-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}
.ir-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(79, 142, 247, 0.08);
    border: 1px solid rgba(79, 142, 247, 0.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.ir-empty-icon .fa {
    font-size: 28px;
    color: #4f8ef7;
    opacity: 0.85;
}
.ir-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.ir-empty-subtitle {
    font-size: 12.5px;
    color: #64748b;
    max-width: 360px;
    line-height: 1.55;
    margin-bottom: 18px;
}
.ir-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
}
table .ir-empty-row > td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
table .ir-empty-row .ir-empty {
    padding: 56px 24px;
}

/* ── Disabled button while loading ──────────────────────────────── */
.btn[disabled],
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}
.btn .fa-spinner {
    margin-right: 4px;
}

/* ── Skeleton shimmer ───────────────────────────────────────────── */
.ir-skel {
    background: linear-gradient(90deg, #161b27 0%, #1e2536 50%, #161b27 100%);
    background-size: 200% 100%;
    animation: ir-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
.ir-skel-line { height: 12px; margin: 6px 0; }
.ir-skel-line.short { width: 40%; }
.ir-skel-line.medium { width: 70%; }
.ir-skel-line.long { width: 100%; }
.ir-skel-block { height: 80px; }
.ir-skel-card { height: 120px; border-radius: 10px; margin-bottom: 14px; }
@keyframes ir-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Sidebar Search ────────────────────────────────────────── */
.ir-sidebar-search {
    position: relative;
    margin: 14px 16px 6px;
    z-index: 2;
}
.ir-sidebar-search-input {
    width: 100%;
    background: var(--bg-input, #191e2a);
    border: 1px solid var(--border-1, #1d2640);
    color: var(--text-0, #f1f5ff);
    border-radius: var(--radius-md, 8px);
    padding: 8px 30px 8px 32px;
    font-size: 12.5px;
    line-height: 1.4;
    outline: none;
    transition: border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ir-sidebar-search-input::placeholder {
    color: var(--text-2, #4f5e7a);
    font-weight: 400;
}
.ir-sidebar-search-input:focus {
    border-color: var(--accent, #4f8ef7);
    box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.18);
}
.ir-sidebar-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-2, #4f5e7a);
    pointer-events: none;
}
.ir-sidebar-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-2, #4f5e7a);
    font-size: 18px;
    line-height: 1;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    padding: 0;
    transition: color 120ms ease, background 120ms ease;
}
.ir-sidebar-search-clear:hover {
    color: var(--text-0, #f1f5ff);
    background: rgba(255,255,255,0.06);
}
.ir-sidebar-search.has-query .ir-sidebar-search-clear {
    display: block;
}
/* When the page sidebar is collapsed (icon-only), hide the search field */
.page-sidebar-closed .ir-sidebar-search { display: none; }

/* Filter helpers */
.page-sidebar-menu li.ir-menu-hide {
    display: none !important;
}
.page-sidebar-menu li.ir-menu-match-highlight > a {
    box-shadow: inset 3px 0 0 var(--accent, #4f8ef7);
}

/* ── Page fade-in (smoother first-paint after preloader) ─────────
   IMPORTANT: opacity-only — no transform. A persistent transform on
   .page-wrapper makes `position: fixed` modals/backdrops reference
   the wrapper instead of the viewport, which renders Bootstrap
   modals off-screen ("foggy" backdrop, no visible dialog). */
.page-wrapper {
    animation: ir-fade-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ir-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Pre-loader spinner fade-out — when page-wrapper becomes visible,
   the wrapper section is auto-hidden by Metronic; soften the moment. */
.wrapper {
    transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Sidebar transition smoothing ───────────────────────────────── */
.page-sidebar-wrapper,
.page-content-wrapper {
    transition: margin-left 220ms cubic-bezier(0.16, 1, 0.3, 1),
                width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────────────────────────
   MODAL CLICK-THROUGH FIX
   ─────────────────────────────────────────────────────────────────
   ir-override.css raises any .portlet that contains an .open / .show
   bootstrap-select to z-index:10040 + position:relative, so its
   dropdown menu can paint above neighboring cards. That's correct in
   normal flow.

   But if bootstrap-select leaves a stale .show class after a focus
   transition (a known race when a modal opens nearby), the portlet
   stays at z-index:10040 — which is ABOVE Bootstrap's modal (1050).
   The portlet then sits on top of the open modal, swallowing every
   click and making the whole page feel "disabled".

   Defensive fix: while ANY modal is open, force every portlet back
   down to a normal stacking level. Modals always win.
   ───────────────────────────────────────────────────────────── */
body.modal-open .portlet,
body.modal-open .portlet:has(.bootstrap-select.open),
body.modal-open .portlet:has(.bootstrap-select.show) {
    z-index: auto !important;
    position: static !important;
}

/* Same precaution for the dropdown menu z-index lift — never above
   the modal (1050). The select rarely needs to be visible while a
   modal is open, but this guarantees no overlay sits on the modal. */
body.modal-open .bootstrap-select.open,
body.modal-open .bootstrap-select.show,
body.modal-open .bootstrap-select .dropdown-menu.open,
body.modal-open .bootstrap-select .dropdown-menu.show,
body.modal-open .bootstrap-select.open > .dropdown-menu,
body.modal-open .bootstrap-select.show > .dropdown-menu {
    z-index: 1030 !important;
}

/* ── Toastr — offset below fixed header ─────────────────────── */
#toast-container.toast-top-right {
    top: 70px !important;
    right: 18px !important;
}
#toast-container > div {
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
    opacity: 0.97;
    backdrop-filter: blur(8px);
}

/* ── KPI / card hover lift (subtle, applied broadly) ────────── */
.portlet,
.ir-kpi,
.kpi-card,
.panel-card {
    transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Required field marker ──────────────────────────────────────── */
label[data-required="true"]::after,
.control-label[data-required="true"]::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}
/* When the label wraps an input with data-required, also mark */
.form-group:has(input[data-required="true"], textarea[data-required="true"], select[data-required="true"]) > label.control-label::after,
.form-group:has(input[data-required="true"], textarea[data-required="true"], select[data-required="true"]) > .control-label::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}