/*
 * Services library (Khadamat) admin: A1 list and A2 item editor.
 * The page shell, filter card and table wrapper are the finance playbook classes the admin lists already
 * use (finance-table-wrap--scroll, fin-ord-*). This file adds only what those do not have: the status
 * badge, type chips, the portaled row menu, empty states, the editor's form vocabulary, and the search field
 * and reset button of the filter bar (the shared rules for those are keyed to other pages' data-model-id).
 * Values follow the approved mockup, which measured them from aq-tokens.css and the settings pages.
 * It also holds the look every Khadamat admin page shares: the purple band at the top with the crumbs, title,
 * main action and status counts; the white cards below it, one gap (--kh-band-gap) away; the table head; the status colours
 * (active or approved green, waiting amber, needs changes red, in review purple, the rest grey); the
 * section cards with their icon; and the empty states.
 * typography.css sets every <p> to 16px, weight 400 and line height 1.625 with !important (qa-63 3), so the size,
 * weight and line height of a class that styles a <p> here carry !important too, and win by their class.
 */

.kh-lib {
    /* The space between the band and the first block under it, the same on every Khadamat page. */
    --kh-band-gap: 1.25rem;
    --kh-primary: var(--Primary-500, #6A5D8B);
    --kh-primary-50: var(--Primary-50, #F3F2F6);
    --kh-primary-600: var(--Primary-600, #5A4D7B);
    --kh-primary-full: var(--Primary-Full, #583286);
    --kh-primary-100: #E7E3F0;
    --kh-grey: #475467;
    --kh-grey-bg: #F2F4F7;
    --kh-ink: #372A58;
    --kh-ink-2: #3A3650;
    --kh-muted: #667085;
    --kh-muted-2: #6B6580;
    --kh-line: #E1DFE8;
    --kh-line-2: #ECE9F3;
    --kh-line-3: #F0EDF5;
    --kh-ok: #027A48;
    --kh-ok-bg: #ECFDF3;
    --kh-warn: #B54708;
    --kh-warn-bg: #FFFAEB;
    --kh-bad: #B42318;
    --kh-bad-bg: #FEF3F2;
    --kh-err: #DB3A34;
}

.kh-lib [hidden] { display: none !important; }

/* One focus ring on every control of the Khadamat admin pages: solid brand purple, 5.9:1 on white. The purple
   band and toolbar outrank it with white; fields and chips edge themselves in the same purple. */
.kh-lib a:focus-visible,
.kh-lib button:focus-visible,
.kh-lib summary:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }

/* A focused control scrolls clear of the sticky save bar at the bottom of an editor. */
.kh-lib form :is(input, select, textarea, button, summary, a) { scroll-margin-bottom: 6.5rem; }

/* The admin layout loads no Bootstrap, so its .visually-hidden (on the filter legends) is defined here. */
.kh-lib .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- the band: every Khadamat admin page opens with it ---------- */
/* The brand purple of the public partner page's hero, lower; white text passes AA on every stop. */
/* Clip, not only hide: the top circle reaches 70 px past the end, and a hidden overflow still scrolls when a focus
   inside asks (qa-100 D33). */
.kh-lib .kh-band {
    position: relative;
    overflow: hidden;
    overflow: clip;
    margin: 0 0 var(--kh-band-gap);
    padding: 1rem 1.5rem 1.25rem;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--Primary-Full, #583286) 0%, var(--Primary-600, #5A4D7B) 55%, var(--Primary-500, #6A5D8B) 100%);
    box-shadow: 0 14px 32px rgba(90, 77, 123, .22);
}

.kh-lib .kh-band::before,
.kh-lib .kh-band::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.kh-lib .kh-band::before { width: 280px; height: 280px; top: -150px; inset-inline-end: -70px; }
.kh-lib .kh-band::after { width: 180px; height: 180px; bottom: -110px; inset-inline-end: 22%; }
.kh-lib .kh-band > * { position: relative; }

.kh-lib .kh-band .aq-finance-breadcrumb { flex-wrap: wrap; row-gap: .35rem; margin: 0 0 .9rem; color: rgba(255, 255, 255, .88); }
.kh-lib .kh-band .aq-finance-breadcrumb__link { color: #fff; white-space: nowrap; }
.kh-lib .kh-band .aq-finance-breadcrumb__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kh-lib .kh-band .aq-finance-breadcrumb__sep { color: rgba(255, 255, 255, .6); }
.kh-lib .kh-band .aq-finance-breadcrumb__current { color: rgba(255, 255, 255, .88); font-weight: 600; }
/* The crumbs end at the page above: the title under them names this page. */
.kh-lib .kh-band .aq-finance-breadcrumb__current,
.kh-lib .kh-band .aq-finance-breadcrumb__sep:has(+ .aq-finance-breadcrumb__current) { display: none; }

.kh-lib .kh-band__row { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.kh-lib .kh-band__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
}

.kh-lib .kh-band__txt { flex: 1 1 auto; min-width: 0; }
/* The title and, beside it, the one status chip (outside the h1, so the heading is only the name). */
.kh-lib .kh-band__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.kh-lib .kh-band__head .kh-badge { font-size: max(12px, .8rem); padding: .3rem .75rem; }
.kh-lib .kh-band__head .kh-badge:empty,
.kh-lib .kh-band__head > span:empty { display: none; }
.kh-lib .kh-band__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.65rem) !important;
    font-weight: 800;
    line-height: 1.35 !important;
    color: #fff;
    overflow-wrap: anywhere;
}

.kh-lib .kh-band__sub { margin: .3rem 0 0; font-size: .95rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .9); }
.kh-lib .kh-band__sub:empty { display: none; }
.kh-lib .kh-band__acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .6rem; }

/* On the band the main action is white with purple text. */
.kh-lib .kh-band .kh-add { height: 44px; padding: 0 1.15rem; background: #fff; color: var(--kh-primary-full); font-weight: 700; box-shadow: 0 6px 16px rgba(30, 20, 60, .18); }
.kh-lib .kh-band .kh-add:hover,
.kh-lib .kh-band .kh-add:focus-visible { background: var(--kh-primary-50); color: var(--kh-primary-full); }

/* Status counts: small glass chips, each with its status colour as a dot. */
.kh-lib .kh-band__stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.kh-lib .kh-stat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 34px;
    padding: 0 .85rem;
    border-radius: 999px;
    background: rgba(20, 12, 45, .22);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: max(12px, .85rem);
    color: #fff;
}

.kh-lib .kh-stat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #D0D5DD; }
.kh-lib .kh-stat--active::before,
.kh-lib .kh-stat--approved::before { background: #75E0A7; }
.kh-lib .kh-stat--pending::before { background: #FEC84B; }
.kh-lib .kh-stat--needsChanges::before { background: #FDA29B; }
.kh-lib .kh-stat--inReview::before { background: #D9D2F0; }
.kh-lib .kh-stat__n { font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
/* Until the counts arrive the row keeps its place, so the band does not grow under the reader. */
.kh-lib .kh-band__stats.is-loading { visibility: hidden; }

.kh-lib .kh-band a:focus-visible,
.kh-lib .kh-band button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* The page's content starts below the band: the filter card on a list, the first section on a form. */
.kh-lib .kh-band ~ .finance-platform-settings__grid { position: relative; z-index: 1; margin-inline: 1rem; }
.kh-lib .kh-band ~ .finance-platform-settings__grid > fieldset.finance-platform-settings-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.kh-lib .kh-band ~ .finance-platform-settings__grid .finance-platform-settings-card__body { padding: 0; }

.kh-lib .fin-dash-filter-card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--kh-line-2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(55, 42, 88, .1);
}

.kh-lib .kh-table-panel {
    margin-top: 1rem;
    padding: .35rem;
    border: 1px solid var(--kh-line-2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(55, 42, 88, .06);
}

/* Tables: a light purple head, a tint on the row under the pointer, and room to read each row. */
.kh-lib .kh-table-panel thead th {
    background: var(--kh-primary-50);
    color: var(--kh-ink);
    font-weight: 700;
    font-size: max(12px, .82rem);
    padding-block: .8rem;
    border-bottom: 1px solid var(--kh-primary-100);
}

.kh-lib .kh-table-panel table.fin-ord-table thead th.fin-ord-col--actions.kh-col-act { background: var(--kh-primary-50); }
.kh-lib .kh-table-panel thead th:first-child { border-start-start-radius: 12px; }
.kh-lib .kh-table-panel thead th:last-child { border-start-end-radius: 12px; }
.kh-lib .kh-table-panel tbody td { padding-block: .9rem; border-bottom: 1px solid var(--kh-line-3); }
.kh-lib .kh-table-panel tbody tr:last-child td { border-bottom: 0; }

/* Filter bar: the search icon sits inside the field, as on the other admin lists. */
.kh-lib .kh-filters.fin-ord-filters--dash {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.75rem;
    width: 100%;
}

.kh-lib .kh-filters .fin-ord-filter-group--search.fin-ord-filter-grow {
    flex: 1 1 18rem;
    min-width: 14rem;
    max-width: none;
}

/* finance-admin.css comes again with the crumbs, after this sheet, and sizes the order pages' selects with rules
   of three classes; these carry four, so the Khadamat widths hold whatever the order (qa-48 S5). */
.kh-lib .kh-filters.fin-ord-filters--dash .fin-ord-filter-group--status {
    flex: 0 1 11.5rem;
    min-width: 10.5rem;
    max-width: 14rem;
}

.kh-lib .kh-filters .fin-ord-filter-group--status .fin-ord-filter-select { width: 100%; }
/* The filter selects take the search box's solid edge instead of the order pages' 12% halo. */
.kh-lib .fin-ord-filter-select:focus { border-color: #6A5D8B; box-shadow: 0 0 0 1px #6A5D8B; }

.kh-lib .fin-ord-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    border: 1px solid #E1DFE8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(55, 42, 88, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.kh-lib .fin-ord-search-field:focus-within {
    border-color: #6A5D8B;
    box-shadow: 0 0 0 1px #6A5D8B;
}

.kh-lib .fin-ord-search-field__submit {
    position: absolute;
    inset-inline-start: 0.28rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    pointer-events: none;
}

.kh-lib .fin-ord-search-field__icon {
    width: 1.05rem;
    height: 1.05rem;
    opacity: 0.72;
}

.kh-lib .fin-ord-search-field__input {
    width: 100%;
    height: 100%;
    padding-inline-start: 2.35rem;
    padding-inline-end: 0.75rem;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0;
    box-sizing: border-box;
}

.kh-lib .fin-ord-search-field__input:focus {
    outline: none;
    border: none !important;
    box-shadow: none !important;
}

/* Reset: the secondary filter button of the other admin lists (News, FAQ, Users). */
.kh-lib .kh-filters__reset {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
}

.kh-lib .fin-ord-clear-filters.kh-filter-reset {
    min-height: 42px;
    height: 42px;
    padding: 0 1rem;
    border: 1px solid #6a5d8b;
    border-radius: 10px;
    background: #fff;
    color: #6a5d8b;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.kh-lib .kh-filter-reset:hover:not(:disabled) {
    background: #f3f2f6;
}

.kh-lib .kh-filter-reset:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.kh-lib .kh-sub {
    margin: 0 0 .85rem;
    color: var(--kh-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.kh-lib .kh-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    margin: 0 0 .9rem;
    background: #EEF2FB;
    color: #33477A;
}

.kh-lib .kh-alert--error { background: var(--kh-bad-bg); color: var(--kh-bad); }

/* A page that could not load: a card with an icon, what went wrong, and the way back to its list. */
.kh-lib .kh-load-error {
    padding: 2.5rem 1.25rem;
    border: 1px solid var(--kh-line-2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(55, 42, 88, .1);
    text-align: center;
}
.kh-lib .kh-load-error .kh-empty__icon { background: var(--kh-bad-bg); box-shadow: 0 0 0 8px rgba(254, 243, 242, .6); color: var(--kh-bad); }
.kh-lib .kh-load-error__text { margin: 0 auto 1.1rem; max-width: 32rem; font-size: .95rem !important; font-weight: 600 !important; color: var(--kh-ink); line-height: 1.6 !important; }

/* ---------- A1 toolbar ---------- */
.kh-lib .kh-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 42px;
    padding: 0 1rem;
    border: 0;
    border-radius: 11px;
    background: var(--kh-primary);
    color: #fff;
    font-size: max(12px, .84rem);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.kh-lib .kh-add:hover,
.kh-lib .kh-add:focus-visible { background: #5A4F7A; color: #fff; }

/* ---------- A1 table cells ---------- */
.kh-lib .kh-row { cursor: pointer; }
.kh-lib .kh-row:hover td { background: #F7F5FB; }
.kh-lib .kh-row td { white-space: nowrap; vertical-align: middle; }

.kh-lib .kh-nm { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; line-height: 1.35; }
.kh-lib .kh-nm__main { font-weight: 600; color: #101828; text-decoration: none; }
.kh-lib .kh-nm__main:hover { color: var(--kh-primary); text-decoration: underline; }
.kh-lib .kh-nm__alt { font-size: max(12px, .78rem); color: var(--kh-muted); unicode-bidi: isolate; }
.kh-lib .kh-nm__none { font-size: max(12px, .76rem); color: var(--kh-muted); }
.kh-lib .kh-dim { color: var(--kh-muted); font-size: max(12px, .8rem); }

.kh-lib .kh-tchips { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; }
.kh-lib .kh-tchip {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: #F6F4F9;
    border: 1px solid #ECE7F2;
    color: var(--kh-ink-2);
    font-size: max(12px, .75rem);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.kh-lib .kh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .22rem .62rem;
    border-radius: 999px;
    font-size: max(12px, .72rem);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    border: 1px solid transparent;
}

.kh-lib .kh-badge--active { background: var(--kh-ok-bg); color: var(--kh-ok); border-color: rgba(2, 122, 72, .14); }
.kh-lib .kh-badge--paused { background: var(--kh-grey-bg); color: var(--kh-grey); border-color: rgba(71, 84, 103, .14); }
.kh-lib .kh-badge::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-inline-end: .4rem; border-radius: 50%; background: currentColor; }

.kh-lib .kh-col-act { position: sticky; inset-inline-end: 0; z-index: 2; }

/* Brief 1265 (qa-1264: 36 px): a row's «المزيد من الخيارات» is 40 px, the least a finger needs. */
.kh-lib .kh-act-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.kh-lib .kh-act-trigger:hover,
.kh-lib .kh-act-trigger[aria-expanded="true"] {
    background: #F2F4F7;
    border-color: rgba(106, 93, 139, .18);
}

.kh-lib .kh-status-line {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--kh-muted);
    font-size: .9rem;
}

.kh-lib .kh-empty { padding: 2.75rem 1rem 3rem; text-align: center; color: var(--kh-muted); }
.kh-lib .kh-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 0 .9rem;
    border-radius: 50%;
    background: var(--kh-primary-50);
    box-shadow: 0 0 0 8px rgba(243, 242, 246, .5);
    color: var(--kh-primary);
}
.kh-lib .kh-empty__title { margin: 0 0 .3rem; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--kh-ink); }
/* typography.css sets every h3 to 24px !important; an empty state's title stays below the page's H2 (qa-58 2). */
.kh-lib .kh-empty h3.kh-empty__title { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.35 !important; }
.kh-lib .kh-empty__text { margin: 0 auto 1.1rem; max-width: 30rem; font-size: .9rem !important; line-height: 1.6 !important; }

/* Portaled row menu: appended to <body>, so it is not under .kh-lib. */
.kh-menu {
    position: fixed;
    z-index: 1060;
    min-width: 13.5rem;
    max-width: 18rem;
    padding: .4rem;
    background: #fff;
    border: 1px solid rgba(106, 93, 139, .14);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(18, 28, 45, .14);
}

.kh-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.55rem;
    margin: 0;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #372A58;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
    white-space: nowrap;
}

.kh-menu__item:hover,
.kh-menu__item:focus-visible { background: #F2F4F7; color: #6A5D8B; }
.kh-menu__item:focus-visible { outline: 2px solid #6A5D8B; outline-offset: -2px; }
.kh-menu__item--ok { color: #027A48; }
.kh-menu__item--ok:hover,
.kh-menu__item--ok:focus-visible { background: #ECFDF3; color: #027A48; }
/* Pausing can be undone, so it is amber; only deleting is red. */
.kh-menu__item--warn { color: #B54708; }
.kh-menu__item--warn:hover,
.kh-menu__item--warn:focus-visible { background: #FFFAEB; color: #93370D; }
.kh-menu__item--danger { color: #A33C3C; }
.kh-menu__item--danger:hover,
.kh-menu__item--danger:focus-visible { background: #FFF0F0; color: #872D2D; }
.kh-menu__sep { height: 1px; margin: .3rem .45rem; background: rgba(106, 93, 139, .12); border: 0; }

/* ---------- A2 editor ---------- */
.kh-lib .kh-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.kh-lib .kh-title .kh-badge { font-size: max(12px, .8rem); padding: .3rem .75rem; }

/* Section cards: white, a purple accent on the start edge, the heading led by its icon in a tinted circle. */
.kh-lib .kh-sec {
    margin: 0 0 1.15rem;
    border: 1px solid var(--kh-line-2);
    border-inline-start: 4px solid var(--kh-primary);
    border-radius: 16px;
    padding: 1.1rem 1.25rem 1.25rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(55, 42, 88, .06);
    min-width: 0;
}

/* The legend floats so it sits inside the card like a heading, not on its border. */
.kh-lib .kh-sec > legend {
    float: left;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: 0;
    margin: 0 0 .15rem;
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--kh-ink);
    line-height: 1.35;
}

.kh-lib .kh-sec > legend + * { clear: both; }

.kh-lib .kh-sec__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--kh-primary-50);
    color: var(--kh-primary);
}

.kh-lib .kh-sec__hint { margin: .35rem 0 1rem; font-size: max(12px, .8125rem) !important; font-weight: 500 !important; color: var(--kh-muted-2); line-height: 1.55 !important; }

.kh-lib .kh-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1.1rem; margin-bottom: 1.05rem; }
.kh-lib .kh-fld { display: flex; flex-direction: column; min-width: 0; }
.kh-lib .kh-fld__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; min-height: 1.95rem; }
.kh-lib .kh-fld__label { font-size: .875rem !important; font-weight: 600 !important; color: var(--kh-ink-2); line-height: 1.4 !important; margin: 0; }
.kh-lib .kh-req { color: var(--kh-bad); margin-inline-start: .15rem; }

.kh-lib .kh-inp {
    width: 100%;
    min-height: 2.65rem;
    padding: .55rem .75rem;
    border: 1px solid #D5DBE7;
    border-radius: 10px;
    font-size: .9rem;
    color: #2D2A3E;
    background: #fff;
    line-height: 1.5;
}

.kh-lib .kh-inp::placeholder { color: #A7A3B5; }
.kh-lib .kh-inp:focus { outline: none; border-color: var(--kh-primary); box-shadow: 0 0 0 1px var(--kh-primary); }
.kh-lib .kh-inp:disabled { background: #F6F5F9; color: #6B6780; cursor: not-allowed; }
/* Descriptions grow with their text (item-editor.js), so nothing hides behind an inner scrollbar. */
.kh-lib textarea.kh-inp { resize: vertical; min-height: 5.4rem; overflow-y: hidden; }
.kh-lib .kh-inp[dir="ltr"] { text-align: left; }
.kh-lib .kh-fld.is-invalid .kh-inp { border-color: var(--kh-err); box-shadow: 0 0 0 3px rgba(219, 58, 52, .10); }
.kh-lib .kh-fld.is-invalid .kh-inp:focus { box-shadow: 0 0 0 1px var(--kh-err); }

.kh-lib .kh-ferr { margin-top: .4rem; font-size: max(12px, .8rem); font-weight: 500; color: var(--kh-err); line-height: 1.45; }
/* The same box saying something is under way («جارٍ الترجمة…»): a note, not an error. */
.kh-lib .kh-ferr.kh-ferr--note { color: #5A4D7B; }
.kh-lib .kh-fnote { margin-top: .4rem; font-size: max(12px, .78rem) !important; color: #5A4D7B; line-height: 1.45 !important; }
.kh-lib .kh-fnote--err { color: var(--kh-err); }
.kh-lib .kh-count { display: block; margin-top: .3rem; text-align: end; font-size: max(12px, .72rem); color: var(--kh-muted); direction: ltr; unicode-bidi: isolate; }

.kh-lib .kh-translate {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.95rem;
    padding: .2rem .75rem;
    border: 1px solid #D8D3E6;
    border-radius: 999px;
    background: #fff;
    color: var(--kh-primary);
    font-size: max(12px, .76rem);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.kh-lib .kh-translate:hover { background: #F3F1F8; border-color: #C9C1DC; }
.kh-lib .kh-translate[aria-busy="true"] { opacity: .75; cursor: progress; }
.kh-lib .kh-translate__icon { flex: none; }

.kh-lib .kh-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }

.kh-lib .kh-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.8rem;
    margin: 0;
    padding: 0 .8rem;
    border: 1px solid var(--kh-line-2);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    color: #2D2A3E;
    line-height: 1.35;
}

.kh-lib .kh-chip:hover { background: #FAF9FC; }
.kh-lib .kh-chip input { width: 1.05rem; height: 1.05rem; margin: 0; flex: 0 0 auto; accent-color: var(--kh-primary); cursor: pointer; }
.kh-lib .kh-chip label { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; margin: 0; padding: .55rem 0; cursor: pointer; font: inherit; color: inherit; }
.kh-lib .kh-chip:focus-within { border-color: var(--kh-primary); box-shadow: 0 0 0 1px var(--kh-primary); }
.kh-lib .kh-chip.is-on { border-color: #C9C1DC; background: #F7F5FB; }
/* A ticked chip shows the focus edge too, and its checkbox the brand ring instead of the browser's orange one. */
.kh-lib .kh-chip.is-on:focus-within { border-color: var(--kh-primary); box-shadow: 0 0 0 1px var(--kh-primary); }
.kh-lib .kh-chip input:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-lib .kh-grp.is-invalid .kh-chip { border-color: #F1C7C5; }

.kh-lib .kh-actions {
    position: sticky;
    /* The shell's scroller (.clients .content) keeps 24px at its bottom, 48px on touch; the bar reaches past it. */
    bottom: calc(-24px - env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin: .5rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid var(--kh-line-2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 -4px 18px rgba(55, 42, 88, .08);
}

.kh-lib .kh-actions__state { display: inline-flex; align-items: center; gap: .45rem; font-size: max(12px, .8rem); font-weight: 600; color: var(--kh-warn); min-height: 1.5rem; }
.kh-lib .kh-actions__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F79009; }
.kh-lib .kh-actions__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-inline-start: auto; }

.kh-lib .kh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.35rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .94rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.2;
}

.kh-lib .kh-btn--primary { background: var(--kh-primary); color: #fff; }
.kh-lib .kh-btn--primary:hover { background: #5A4F78; color: #fff; }
.kh-lib .kh-btn--ghost { background: #fff; color: var(--kh-primary); border-color: var(--kh-primary); }
.kh-lib .kh-btn--ghost:hover { background: var(--kh-primary-50); }
.kh-lib .kh-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Brief 1208: the service's simple description scrolls inside its box past four lines; its image sits whole in a square frame. */
.kh-lib .kh-about__text { min-height: 6.5rem; overflow-y: auto; }
.kh-lib .kh-libimg { margin-bottom: .25rem; }
.kh-lib .kh-libimg__frame { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 12rem; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--kh-line); border-radius: 12px; background: var(--kh-primary-50); }
.kh-lib .kh-libimg__frame.is-empty { background: linear-gradient(135deg, var(--kh-primary-50), #fff); border-style: dashed; }
.kh-lib .kh-libimg__frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.kh-lib .kh-libimg__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 .25rem; }
.kh-lib .kh-libimg__busy { font-size: max(12px, .875rem); color: var(--kh-muted); }

@media (max-width: 1024px), (pointer: coarse) {
    .kh-lib .kh-actions { bottom: calc(-48px - env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 860px) {
    .kh-lib .kh-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .kh-lib { --kh-band-gap: 1rem; }
    .kh-lib .kh-band { padding: .75rem 1rem 1rem; border-radius: 16px; }
    .kh-lib .kh-band .aq-finance-breadcrumb { margin-bottom: .5rem; }
    .kh-lib .kh-band__row { flex-wrap: wrap; gap: .75rem; }
    .kh-lib .kh-band__icon { width: 44px; height: 44px; border-radius: 14px; }
    .kh-lib .kh-band__txt { flex: 1 1 0; }
    .kh-lib .kh-band__sub { font-size: .875rem !important; }
    .kh-lib .kh-band__acts { flex: 1 1 100%; }
    .kh-lib .kh-band__stats { gap: .4rem; margin-top: .6rem; }
    .kh-lib .kh-stat { min-height: 30px; padding: 0 .7rem; font-size: max(12px, .8rem); }
    .kh-lib .kh-band ~ .finance-platform-settings__grid { margin-inline: 0; }
    .kh-lib .fin-dash-filter-card { padding: .85rem; }
    .kh-lib .kh-add { flex: 1 1 100%; }
    /* S5: the first rows show on the first screen. The two selects share a row, the search is named by its
       placeholder, and reset shows once there is a filter to clear. */
    .kh-lib .fin-dash-filter-card { padding: .75rem; }
    .kh-lib .kh-filters.fin-ord-filters--dash { gap: .5rem; }
    .kh-lib .kh-filters.fin-ord-filters--dash .fin-ord-filter-group--status { flex: 1 1 calc(50% - .25rem); min-width: 0; max-width: none; }
    .kh-lib .kh-filters__reset { flex: 1 1 100%; max-width: none; }
    .kh-lib .kh-filters__reset:has(.kh-filter-reset:disabled) { display: none; }
    .kh-lib .kh-filters .fin-ord-filter-group--search .fin-ord-filter-label,
    .kh-lib .kh-filters__reset .fin-ord-filter-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .kh-lib .kh-filter-reset { width: 100%; }
    .kh-lib .kh-sec { padding: .75rem .85rem 1rem; }
    .kh-lib .kh-sec > legend { font-size: 1.0625rem; margin-inline-start: .35rem; }
    .kh-lib .kh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-lib .kh-actions__btns { width: 100%; margin-inline-start: 0; }
    .kh-lib .kh-actions__btns .kh-btn { flex: 1 1 0; padding: 0 .75rem; }
    /* Brief 1280 (qa-1274: «ترجمة» 29 px on a phone): 40 px at least, as the page's other buttons; the computer's as before. */
    .kh-lib .kh-translate { min-height: 40px; }

    /* The lists: each row is a card, each cell beside its column's name (data-label, set by the page script),
       so no column hides off-screen and the table no longer scrolls sideways under the shell's arrows. */
    .kh-lib .kh-table-panel { margin-top: .75rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .kh-lib .kh-table-panel .finance-table-wrap { overflow: visible; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .kh-lib .kh-table-panel table.fin-ord-table,
    .kh-lib .kh-table-panel table.fin-ord-table > tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
    .kh-lib .kh-table-panel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .kh-lib .kh-table-panel tr.kh-row {
        display: block;
        margin: 0 0 .75rem;
        padding: .5rem 1rem;
        border: 1px solid var(--kh-line-2);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 4px 16px rgba(55, 42, 88, .06);
    }
    .kh-lib .kh-table-panel tr.kh-row:hover td { background: transparent; }
    .kh-lib .kh-table-panel tr.kh-row > td {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        width: auto;
        min-width: 0;
        padding: .55rem 0;
        border: 0;
        border-bottom: 1px solid var(--kh-line-3);
        background: transparent;
        white-space: normal;
        text-align: start;
    }
    .kh-lib .kh-table-panel tr.kh-row > td:last-child { border-bottom: 0; }
    /* A value never pushes the card wider than the screen: it wraps beside its label instead. */
    .kh-lib .kh-table-panel tr.kh-row { max-width: 100%; }
    .kh-lib .kh-table-panel tr.kh-row > td { flex-wrap: wrap; overflow-wrap: anywhere; }
    .kh-lib .kh-table-panel tr.kh-row > td > * { min-width: 0; max-width: 100%; white-space: normal; }
    .kh-lib .kh-table-panel tr.kh-row > td { min-width: 0 !important; }
    /* No text on a card under 12 px: the cell text, its muted notes and its chips. */
    .kh-lib .kh-table-panel tr.kh-row > td { font-size: max(12px, .85rem); }
    .kh-lib .kh-table-panel .kh-dim { font-size: max(12px, .8rem); }
    .kh-lib .kh-table-panel .kh-tchip { font-size: max(12px, .75rem); }
    .kh-lib .kh-table-panel td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: max(12px, .78rem);
        font-weight: 600;
        color: var(--kh-muted);
    }
    /* The first cell is the row's name: it leads the card on its own. */
    .kh-lib .kh-table-panel tr.kh-row > td:first-child { justify-content: flex-start; }
    .kh-lib .kh-table-panel tr.kh-row > td:first-child::before { content: none; }
    .kh-lib .kh-table-panel .kh-nm,
    .kh-lib .kh-table-panel .kh-tchips { align-items: flex-start; }
    .kh-lib .kh-table-panel .kh-tchips { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
}