/* ──────────────────────────────────────────────────────────
   Namespace: ol- (Offices List V2)
   Source:    HR101BL/Pages/Lookups/OfficesListV2.razor
              HR101BL/Pages/Lookups/OfficeDetailsV2.razor
   Mockup:    Claude documentation/projects/app-redesign/office-list/OfficesList.html
   Pattern:   REGISTRY v3 — simplest registry so far. Form has only 2 fields
              (Name + ShiftPlanOfficeEditors). No inline list, no sub-confirm.
              Popup is 600px wide (vs 720px for ContractType / Department).
   Scope:     Applied to .ol-screen only — V1 /officelist remains untouched.
   ────────────────────────────────────────────────────────── */

.ol-screen { background: var(--is-bg-app); padding: 22px 28px 40px; border-radius: 10px; max-width: 1680px; margin: 0 auto; font-family: var(--is-font-sans); color: var(--is-fg-1); }
.ol-screen *, .ol-pop *, .ol-pop-scrim * { box-sizing: border-box; }

/* ── Page header ──────────────────────────────────────────── */
.ol-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ol-pagehead__crumb { display: flex; gap: 6px; align-items: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-bottom: 4px; }
.ol-pagehead__crumb i { font-size: 9px; }
.ol-pagehead__crumb a { color: inherit; text-decoration: none; }
.ol-pagehead__crumb a:hover { color: var(--is-fg-1); }
.ol-pagehead h1 { font: 700 26px/1.15 var(--is-font-sans); letter-spacing: -.01em; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ol-count { font: 600 13px var(--is-font-sans); color: var(--is-fg-3); background: var(--is-bg-surface-3); padding: 2px 10px; border-radius: 999px; }
.ol-vchip--new { font: 700 9.5px var(--is-font-sans); color: #fff; background: var(--is-success); padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; text-transform: uppercase; }
.ol-loadchip { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); background: var(--is-bg-surface-3); padding: 3px 8px; border-radius: 999px; font-style: italic; }
.ol-loadchip b { color: var(--is-fg-1); font-weight: 700; font-family: var(--is-font-mono); }
.ol-loadchip__sep { opacity: .5; }
.ol-pagehead__sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ol-pagehead__sub-text { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); }
.ol-pagehead__sub-text b { color: var(--is-fg-1); font-weight: 700; }
.ol-vlink { background: transparent; border: 0; padding: 0; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ol-vlink:hover { color: var(--is-fg-1); }
.ol-pagehead__actions { display: flex; gap: 8px; align-items: center; }

/* ── Buttons ──────────────────────────────────────────────── */
.ol-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.ol-btn i { font-size: 12px; }
.ol-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.ol-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.ol-btn--ghost { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.ol-btn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ol-btn--danger { background: var(--is-danger); color: #fff; border-color: var(--is-danger); }
.ol-btn--danger:hover { background: #b51e1e; border-color: #b51e1e; }
.ol-btn--lg { height: 40px; padding: 0 18px; font-size: 13.5px; }
.ol-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Filter bar ───────────────────────────────────────────── */
.ol-filterbar { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); padding: 10px 12px; margin-bottom: 10px; }
.ol-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ol-search { position: relative; flex: 1 1 360px; min-width: 240px; }
.ol-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 13px; }
.ol-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 400 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.ol-search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.ol-pill { position: relative; 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 12.5px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; white-space: nowrap; }
.ol-pill:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ol-pill.is-active { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border-color: #b9dcef; }
.ol-pill__chev { font-size: 9px; color: var(--is-fg-3); }
.ol-pill__count { font: 700 10px var(--is-font-sans); background: var(--is-brand-blue); color: #fff; padding: 1px 6px; border-radius: 999px; }
.ol-pill .e-input-group, .ol-pill .e-ddl { position: absolute !important; inset: 0 !important; opacity: 0 !important; cursor: pointer; }

.ol-actionrow { display: inline-flex; gap: 4px; align-items: center; }
.ol-iconbtn--brand { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); width: 36px; height: 36px; border-radius: var(--is-radius-sm); border: 1px solid; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ol-iconbtn--brand:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.ol-iconbtn--ghost { background: #fff; color: var(--is-fg-2); border: 1px solid var(--is-border-3); width: 36px; height: 36px; border-radius: var(--is-radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ol-iconbtn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }

/* Chipstrip — active-filter pills under the filter bar */
.ol-chipstrip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--is-border-1); }
.ol-chipstrip__label { font: 600 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.ol-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid #b9dcef; font: 600 11.5px var(--is-font-sans); }
.ol-chip__lead { font-size: 10px; opacity: .8; }
.ol-chip__close { width: 18px; height: 18px; border-radius: 999px; background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.ol-chip__close:hover { background: rgba(4,148,218,.20); }
.ol-chipstrip__clear { background: transparent; border: 0; font: 600 11.5px var(--is-font-sans); color: var(--is-fg-3); cursor: pointer; padding: 3px 6px; border-radius: var(--is-radius-sm); }
.ol-chipstrip__clear:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }

/* ── Table card ───────────────────────────────────────────── */
.ol-tablecard { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); overflow: clip; }
.ol-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--is-border-1); font: 500 12px var(--is-font-sans); color: var(--is-fg-3); gap: 16px; flex-wrap: wrap; }
.ol-toolbar b { color: var(--is-fg-1); font-weight: 700; }
.ol-toolbar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ol-toolbar__right { display: flex; align-items: center; gap: 10px; }
.ol-toolbar__sep { color: var(--is-border-2); }
.ol-pagesize { display: inline-flex; align-items: center; gap: 6px; }
.ol-pagesize select { height: 28px; padding: 0 24px 0 8px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-1); appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; cursor: pointer; }

table.ol-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ol-table thead th { background: var(--is-bg-surface-3); font: 600 10.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--is-border-1); white-space: nowrap; }
.ol-table thead th .ol-th { display: inline-flex; align-items: center; gap: 5px; user-select: none; }
.ol-table thead th .ol-th--sortable { cursor: pointer; }
.ol-table thead th .ol-th i { font-size: 9px; opacity: .3; color: var(--is-fg-3); }
.ol-table thead th .ol-th--sortable:hover i { opacity: .5; }
.ol-table thead th .ol-th.is-sorted i { opacity: 1; color: var(--is-action-blue); }
.ol-table tbody tr { transition: background .12s; }
.ol-table tbody tr:hover { background: rgba(0,123,255,.04); }
.ol-table tbody tr + tr td { border-top: 1px solid var(--is-border-1); }
.ol-table tbody td { padding: 12px 12px; vertical-align: middle; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; }
.ol-table tbody td > * { min-width: 0; max-width: 100%; }
.ol-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: block; }

/* Office name cell */
.ol-name { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.ol-name__icon { width: 34px; height: 34px; border-radius: 8px; background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ol-name__icon--brand   { background: var(--is-brand-blue-100); color: var(--is-brand-blue); }
.ol-name__icon--success { background: rgba(38,176,80,.10); color: var(--is-success); }
.ol-name__icon--warning { background: rgba(230,167,0,.16); color: #b08000; }
.ol-name__icon--danger  { background: rgba(217,44,44,.10); color: var(--is-danger); }
.ol-name__icon--purple  { background: rgba(111,62,176,.12); color: #6f3eb0; }
.ol-name__icon--neutral { background: rgba(143,150,160,.18); color: var(--is-fg-2); }
.ol-name__title { font: 600 13.5px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Employee count cell */
.ol-cellcount { display: inline-flex; align-items: center; gap: 6px; }
.ol-cellcount__num { font-variant-numeric: tabular-nums; font-family: var(--is-font-mono); font-weight: 700; font-size: 13px; color: var(--is-fg-1); }
.ol-cellcount__unit { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); }
.ol-cellcount.is-zero .ol-cellcount__num { color: var(--is-fg-3); font-weight: 500; }
.ol-cellcount.is-zero .ol-cellcount__unit { color: var(--is-fg-3); }

/* Editors stack */
.ol-editors { display: inline-flex; align-items: center; gap: 8px; }
.ol-editors__stack { display: inline-flex; }
.ol-editors__a { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 10px var(--is-font-sans); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--is-border-1); }
.ol-editors__a + .ol-editors__a { margin-left: -8px; }
.ol-editors__more { width: 24px; height: 24px; border-radius: 999px; background: var(--is-bg-surface-3); color: var(--is-fg-2); display: inline-flex; align-items: center; justify-content: center; font: 700 9.5px var(--is-font-sans); margin-left: -8px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--is-border-1); }
.ol-editors__count { font: 600 12px var(--is-font-sans); color: var(--is-fg-2); }
.ol-editors.is-empty { color: var(--is-fg-3); font: 500 12px var(--is-font-sans); display: inline-flex; align-items: center; gap: 6px; }
.ol-editors.is-empty i { font-size: 10px; }

/* Date cell */
.ol-date { font: 500 12.5px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Row actions */
.ol-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.ol-rowbtn { width: 30px; height: 30px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; 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; }
.ol-rowbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); }
.ol-rowbtn.is-edit:hover   { background: rgba(4,148,218,.10); color: var(--is-brand-blue); border-color: rgba(4,148,218,.25); }
.ol-rowbtn.is-danger:hover { background: rgba(217,44,44,.08); color: var(--is-danger); border-color: rgba(217,44,44,.20); }

/* Pager */
.ol-pager { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-top: 1px solid var(--is-border-1); gap: 16px; flex-wrap: wrap; }
.ol-pager__info { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.ol-pager__info b { color: var(--is-fg-1); font-weight: 700; }
.ol-pager__pages { display: inline-flex; gap: 4px; align-items: center; }
.ol-pager__pages--mini button { height: 28px; min-width: 28px; }
.ol-pager button { height: 30px; min-width: 30px; padding: 0 9px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-2); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ol-pager button:hover:not(:disabled):not(.is-active) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ol-pager button.is-active { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.ol-pager button:disabled { opacity: .35; cursor: not-allowed; }
.ol-pager__ellipsis { color: var(--is-fg-3); padding: 0 4px; font-weight: 600; }

/* Empty state */
.ol-empty { text-align: center; padding: 56px 24px; }
.ol-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; }
.ol-empty h3 { font: 700 16px var(--is-font-sans); margin: 0 0 6px; color: var(--is-fg-1); }
.ol-empty p { font: 500 13px var(--is-font-sans); color: var(--is-fg-3); margin: 0 0 16px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Mobile card stack (< 1200px) */
.ol-cards-wrap { display: none; }
.ol-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ol-card { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ol-card__head { display: flex; align-items: center; gap: 10px; }
.ol-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ol-card__field { display: flex; flex-direction: column; gap: 2px; }
.ol-card__field-label { font: 600 10px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; }
.ol-card__field-value { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.ol-card__foot { display: flex; justify-content: flex-end; gap: 4px; }

@media (max-width: 1199px) {
  .ol-table-wrap { display: none; }
  .ol-cards-wrap { display: block; }
}

/* ── Popup chrome ─────────────────────────────────────────── */
.ol-pop-scrim { position: fixed; inset: 0; background: rgba(20,28,50,.50); backdrop-filter: blur(2px); z-index: 1099; }
.ol-pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: var(--is-radius-lg); box-shadow: 0 20px 60px rgba(8,12,36,.30); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; max-width: 95vw; z-index: 1100; font-family: var(--is-font-sans); color: var(--is-fg-1); }
.ol-pop--md { width: 600px; }   /* Office form is small — narrower than ContractType / Department */
.ol-pop--sm { width: 480px; }
.ol-pop__head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--is-border-1); background: var(--is-bg-surface); flex-shrink: 0; }
.ol-pop__head-icon { width: 36px; height: 36px; border-radius: var(--is-radius-sm); background: var(--is-brand-blue-100); color: var(--is-brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.ol-pop__head-icon--danger { background: var(--is-danger-bg); color: var(--is-danger); }
.ol-pop__head-title { flex: 1; min-width: 0; }
.ol-pop__head-title h2 { font: 700 17px var(--is-font-sans); margin: 0; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-pop__head-title p { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-pop__head-title p b { color: var(--is-fg-1); font-weight: 700; }
.ol-pop__head-close { width: 32px; height: 32px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background .12s, color .12s; flex-shrink: 0; }
.ol-pop__head-close:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.ol-pop__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.ol-pop__body--tight { padding: 18px 22px; }
.ol-pop__foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); flex-shrink: 0; }
.ol-pop__foot-left { flex: 1; min-width: 0; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); display: flex; align-items: center; gap: 6px; }
.ol-pop__foot-left b { color: var(--is-fg-1); font-weight: 700; }
.ol-pop__foot-right { display: flex; gap: 10px; flex-shrink: 0; }

/* ── Form atoms ───────────────────────────────────────────── */
.ol-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ol-field + .ol-field { margin-top: 14px; }
.ol-field__label { font: 600 11.5px var(--is-font-sans); color: var(--is-fg-2); display: flex; align-items: center; gap: 4px; }
.ol-field__label .req { color: var(--is-danger); }
.ol-field__label i.help { font-size: 11px; color: var(--is-fg-3); margin-left: 2px; cursor: help; }
.ol-field__hint { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.ol-field__hint b { color: var(--is-fg-1); font-weight: 700; }
.ol-field__hint i { font-size: 10px; }
.ol-field__hint--err { color: var(--is-danger); }

.ol-input { height: 36px; padding: 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 13.5px var(--is-font-sans); color: var(--is-fg-1); width: 100%; }
.ol-input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.ol-input--err { border-color: var(--is-danger); }
.ol-input--err:focus { border-color: var(--is-danger); box-shadow: 0 0 0 3px rgba(217,44,44,.15); }

/* Multiselect (shift plan editors) */
.ol-multiselect-wrap { position: relative; }
.ol-multiselect { padding: 6px 8px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; display: flex; flex-wrap: wrap; gap: 5px; min-height: 38px; align-items: center; }
.ol-multiselect:focus-within { border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.ol-empchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid #b9dcef; font: 600 11.5px var(--is-font-sans); }
.ol-empchip__x { width: 16px; height: 16px; border-radius: 999px; background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.ol-empchip__x:hover { background: rgba(4,148,218,.20); }
.ol-multiselect__input { flex: 1; min-width: 140px; border: 0; padding: 4px 6px; background: transparent; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); outline: none; }
.ol-multiselect__suggestions { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm); box-shadow: 0 8px 24px rgba(8,12,36,.12); z-index: 10; max-height: 240px; overflow-y: auto; }
.ol-multiselect__suggestion { display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent; text-align: left; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); cursor: pointer; }
.ol-multiselect__suggestion:hover { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }

/* Inline info banner */
.ol-banner { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--is-radius-sm); margin-top: 10px; font: 500 12.5px/1.5 var(--is-font-sans); }
.ol-banner i { margin-top: 1px; flex-shrink: 0; font-size: 13px; }
.ol-banner b { font-weight: 700; }
.ol-banner--info { background: var(--is-info-bg); border: 1px solid #c2def0; color: #0a5e8a; }
.ol-banner--info i { color: var(--is-info); }
.ol-banner--warn { background: rgba(230,167,0,.10); border: 1px solid rgba(230,167,0,.30); color: #7a5800; }
.ol-banner--warn i { color: var(--is-warning); }

/* Delete confirm body */
.ol-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 14px 6px; }
.ol-confirm p { font: 500 13px/1.5 var(--is-font-sans); color: var(--is-fg-2); margin: 0; max-width: 400px; }
.ol-confirm p b { color: var(--is-fg-1); font-weight: 700; }
.ol-confirm .ol-banner { width: 100%; text-align: left; margin-top: 16px; }
.ol-confirm__cascade { margin-top: 6px; display: block; }