/* ============================================================
 * AdminApprovalsScreen V2 — page-specific overrides
 * ------------------------------------------------------------
 * Base `.ap-*` shell + KPI + filter pills + table + status pills
 * + pager all live in redesign-approvals.css. This file owns only
 * what's specific to the admin/HR overview screen:
 *   - "Više filtera" trigger button + badge
 *   - Slide-in right drawer
 *   - Bulk-action selection bar
 *   - Compact row icon buttons (Approve/Reject inline)
 *   - Selected-row tint
 *   - SfMultiSelect / SfDatePicker chrome overrides
 *   - Active filter chip strip
 * ============================================================ */

/* ── "Više filtera" trigger ─────────────────────────────────── */
.ap-screen .ap-morebtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; font: 600 13px var(--is-font-sans); color: var(--is-fg-1); cursor: pointer; transition: background .12s, border-color .12s; }
.ap-screen .ap-morebtn:hover { background: var(--is-bg-surface-3); border-color: var(--is-border-2); }
.ap-screen .ap-morebtn.is-active { border-color: var(--is-brand-blue); color: var(--is-brand-blue-700); background: var(--is-brand-blue-100); }
.ap-screen .ap-morebtn__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue); color: #fff; font: 700 10px var(--is-font-sans); margin-left: 2px; }

/* ── Slide-in right drawer ──────────────────────────────────── */
.ap-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 90; animation: ap-fade .15s ease-out; }
.ap-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: #fff; box-shadow: -8px 0 24px rgba(15,23,42,.12); z-index: 91; display: flex; flex-direction: column; animation: ap-slide-in .22s cubic-bezier(.2,.7,.2,1); }
.ap-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--is-border-1); }
.ap-drawer__head h2 { margin: 0; font: 700 16px var(--is-font-sans); color: var(--is-fg-1); }
.ap-drawer__close { width: 32px; height: 32px; border-radius: var(--is-radius-sm); border: 0; background: transparent; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ap-drawer__close:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ap-drawer__body { flex: 1; overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.ap-drawer__field { display: flex; flex-direction: column; gap: 4px; }
.ap-drawer__field > label { font: 600 12px var(--is-font-sans); color: var(--is-fg-2); }
.ap-drawer__foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface-2, #fafbfc); }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Bulk-action selection bar ──────────────────────────────── */
.ap-selectionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--is-brand-blue-100); border: 1px solid var(--is-brand-blue-200); border-radius: var(--is-radius-md); flex-wrap: wrap; }
.ap-selectionbar__left { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--is-font-sans); color: var(--is-brand-blue-700); }
.ap-selectionbar__left i { font-size: 14px; }
.ap-selectionbar__left b { color: var(--is-brand-blue-700); font-weight: 700; }
.ap-selectionbar__clear { background: transparent; border: 0; color: var(--is-brand-blue-700); cursor: pointer; padding: 4px 6px; border-radius: 4px; font-size: 12px; }
.ap-selectionbar__clear:hover { background: rgba(0,123,255,.12); }
.ap-selectionbar__right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-selectionbar__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-3); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ap-selectionbar__btn i { font-size: 11px; }
.ap-selectionbar__btn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ap-selectionbar__btn.is-approve { color: #1a7a39; border-color: rgba(38,176,80,.45); }
.ap-selectionbar__btn.is-approve:hover { background: #26b050; border-color: #26b050; color: #fff; }
.ap-selectionbar__btn.is-reject { color: #a01e1e; border-color: rgba(217,44,44,.45); }
.ap-selectionbar__btn.is-reject:hover { background: #d92c2c; border-color: #d92c2c; color: #fff; }
.ap-selectionbar__btn.is-danger { color: #a01e1e; border-color: rgba(217,44,44,.45); }
.ap-selectionbar__btn.is-danger:hover { background: #d92c2c; border-color: #d92c2c; color: #fff; }

/* ── Selection bar (count + cross-page Select All toggle) ──── */
.ap-selectbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--is-brand-blue-100); border: 1px solid var(--is-brand-blue-200); border-radius: var(--is-radius-md); margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.ap-selectbar__left { display: flex; align-items: center; gap: 10px; font: 600 13px var(--is-font-sans); color: var(--is-brand-blue-700); }
.ap-selectbar__left input { accent-color: var(--is-brand-blue); width: 16px; height: 16px; }
.ap-selectbar__of { color: var(--is-fg-3); font-weight: 500; }
.ap-selectbar__link { background: transparent; border: 0; color: var(--is-brand-blue-700); cursor: pointer; font: 600 12px var(--is-font-sans); text-decoration: underline; padding: 0; }

/* ── Mass-action dropdown (header) ──────────────────────────── */
.ap-massbtn-wrap { position: relative; display: inline-flex; align-items: center; }
.ap-massbtn-wrap .ap-mass-count { position: absolute; top: -6px; right: -6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue); color: #fff; font: 700 10px var(--is-font-sans); pointer-events: none; }
.ap-btn--mass { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.ap-btn--mass:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ap-btn--mass:disabled,
.ap-btn--mass.is-disabled { opacity: .55; cursor: not-allowed; }
/* Active state — Syncfusion adds .e-active and aria-expanded="true" when popup
   is open. Override label/icon color to white but leave Syncfusion to colour
   the background (matches the theme). Specificity 0,0,4,0 to beat hover above. */
.ap-btn.ap-btn--mass.e-active:not(:disabled),
.ap-btn.ap-btn--mass.e-active:not(:disabled):hover,
.ap-btn.ap-btn--mass[aria-expanded="true"]:not(:disabled),
.ap-btn.ap-btn--mass[aria-expanded="true"]:not(:disabled):hover {
    color: #ffffff !important;
}
.ap-btn.ap-btn--mass.e-active:not(:disabled) *,
.ap-btn.ap-btn--mass.e-active:not(:disabled):hover *,
.ap-btn.ap-btn--mass[aria-expanded="true"]:not(:disabled) *,
.ap-btn.ap-btn--mass[aria-expanded="true"]:not(:disabled):hover * {
    color: #ffffff !important;
}
/* Syncfusion's popup div inherits the same .ap-btn classes; strip the button
   chrome from the popup itself (otherwise it paints a ghost button shape
   behind the actual menu). Mirrors the EmployeesListV2 fix. */
.e-dropdown-popup.ap-btn,
.e-dropdown-popup.ap-btn--mass,
body > .e-popup.e-popup-open.e-dropdown-popup.ap-btn,
body > .e-popup.e-popup-open.e-dropdown-popup.ap-btn--mass {
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ── Row icon buttons (Approve/Reject/Edit/More inline) ────── */
.aa-iconbtn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--is-border-2); background: #fff; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: background .12s, color .12s, border-color .12s; }
.aa-iconbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-3); }
.aa-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.aa-iconbtn--approve { color: #1a7a39; border-color: rgba(38,176,80,.35); }
.aa-iconbtn--approve:hover { background: #26b050 !important; border-color: #26b050 !important; color: #fff !important; }
.aa-iconbtn--reject { color: #a01e1e; border-color: rgba(217,44,44,.35); }
.aa-iconbtn--reject:hover { background: #d92c2c !important; border-color: #d92c2c !important; color: #fff !important; }
.aa-iconbtn--danger:hover { background: #d92c2c !important; border-color: #d92c2c !important; color: #fff !important; }

/* ── Selected-row tint (multi-select admin grid) ───────────── */
.ap-table tbody tr.is-checked > td { background: rgba(4,148,218,.08); }
.ap-table tbody tr.is-checked:hover > td { background: rgba(4,148,218,.12); }
.ap-table tbody tr.is-pending.is-checked > td { background: rgba(206,134,0,.10); }

/* ── Active filter chip strip ──────────────────────────────── */
.ap-chipstrip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--is-border-1); }
.ap-chipstrip__label { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.ap-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 12px var(--is-font-sans); color: var(--is-fg-1); }
.ap-chip__label { color: var(--is-fg-3); font-weight: 500; }
.ap-chip__close { width: 18px; height: 18px; border-radius: 999px; background: transparent; border: 0; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.ap-chip__close:hover { background: var(--is-border-2); color: var(--is-fg-1); }
.ap-chipstrip__clear { margin-left: auto; background: transparent; border: 0; font: 600 12px var(--is-font-sans); color: var(--is-action-blue); cursor: pointer; padding: 4px 6px; }
.ap-chipstrip__clear:hover { text-decoration: underline; }

/* ── SfMultiSelect / SfDropDownList inside .ap-sfmulti ─────── */
.ap-screen .ap-sfmulti .e-multi-select-wrapper,
.ap-screen .ap-sfmulti .e-input-group,
.ap-screen .ap-sfdrop  .e-input-group {
    height: 36px !important; min-height: 36px !important;
    border: 1px solid var(--is-border-3) !important;
    border-radius: var(--is-radius-sm) !important;
    background: #fff !important;
    box-shadow: none !important;
}
.ap-screen .ap-sfmulti.e-input-focus .e-multi-select-wrapper,
.ap-screen .ap-sfdrop.e-input-focus  .e-input-group {
    border-color: var(--is-brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,123,255,.15) !important;
}
.ap-screen .ap-sfmulti .e-chips { background: rgba(0,123,255,.08) !important; color: var(--is-brand-blue-700) !important; border-radius: 4px !important; padding: 1px 6px !important; font: 600 11px var(--is-font-sans) !important; }
.ap-screen .ap-sfmulti input.e-input-text,
.ap-screen .ap-sfdrop  input.e-input { padding: 0 8px !important; font: 500 13px var(--is-font-sans) !important; color: var(--is-fg-1) !important; }
.ap-screen .ap-sfmulti .e-ddl-icon,
.ap-screen .ap-sfdrop  .e-ddl-icon { color: var(--is-fg-3) !important; }

/* ── SfDatePicker inside drawer ────────────────────────────── */
.ap-screen .ap-sfdate .e-input-group {
    height: 36px !important; min-height: 36px !important;
    border: 1px solid var(--is-border-3) !important;
    border-radius: var(--is-radius-sm) !important;
    background: #fff !important;
    box-shadow: none !important;
}
.ap-screen .ap-sfdate input.e-input { padding: 0 8px !important; font: 500 13px var(--is-font-sans) !important; color: var(--is-fg-1) !important; }
.ap-screen .ap-daterange { display: flex; gap: 8px; align-items: center; }
.ap-screen .ap-daterange > * { flex: 1; min-width: 0; }
.ap-screen .ap-daterange__sep { color: var(--is-fg-3); font-size: 12px; flex: 0 0 auto; }

/* ── Card layout (≤1023px — tablet portrait + phone) ────── */
.ap-table-wrap { display: block; }
.ap-cards-wrap { display: none; }
@media (max-width: 1023px) {
    .ap-table-wrap { display: none; }
    .ap-cards-wrap { display: block; }
}
.ap-cards { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ap-card { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); display: flex; flex-direction: column; overflow: hidden; }
.ap-card:hover { border-color: var(--is-border-2); box-shadow: var(--is-shadow-1); }
.ap-card.is-pending { border-left: 3px solid #ce8600; background: rgba(206,134,0,.025); }
.ap-card.is-checked { background: rgba(4,148,218,.06); border-color: var(--is-brand-blue-200); }
.ap-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ap-card__check { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; accent-color: var(--is-brand-blue); }
.ap-card__head .ap-emp { flex: 1; min-width: 0; }
.ap-card__status { flex-shrink: 0; }
.ap-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; padding: 8px 12px 10px; border-top: 1px dashed var(--is-border-1); }
@media (max-width: 480px) { .ap-card__meta { grid-template-columns: 1fr; } }
.ap-card__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-card__field-label { font: 500 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.ap-card__field-value { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-card__foot { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px; border-top: 1px dashed var(--is-border-1); background: var(--is-bg-surface); gap: 6px; flex-wrap: wrap; }