/*!
 * MENA Network — components.css
 * Buttons, cards, forms, badges, chips, tables, alerts, tabs, steps, pagination, accordion, switches.
 * By MrServer, LLC | HOSSAM ALZYOD | i@hossam.net
 */

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 18px; border-radius: var(--radius-btn); border: 1px solid transparent;
    font-weight: 600; font-size: .92rem; line-height: 1.2; white-space: nowrap; cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--sm { min-height: 34px; padding: 6px 12px; font-size: .84rem; }
.btn--lg { min-height: 48px; padding: 12px 24px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--accent { background: var(--c-accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.btn--accent:hover { background: var(--c-accent-dark); color: #fff; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-soft); color: #fff; }
.btn--outline { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
.btn--outline-accent { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.btn--outline-accent:hover { background: var(--c-accent); color: #fff; }
.btn--outline-light { background: transparent; border-color: color-mix(in srgb, var(--c-accent) 80%, #fff); color: #fff; }
.header-light .btn--outline-light { color: var(--c-accent-dark); }
.btn--outline-light:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn--light { background: rgba(255, 255, 255, .92); color: var(--c-primary); }
.btn--ghost { background: transparent; color: var(--c-muted); }
.btn--ghost:hover { background: var(--c-bg); color: var(--c-text); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--danger:hover { filter: brightness(.92); color: #fff; }
.btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

.link-accent { color: var(--c-accent); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 4px; }
.link-accent:hover { color: var(--c-accent-dark); }
.link-small { font-size: .82rem; color: var(--c-info); }
.link-muted { color: var(--c-muted); font-size: .88rem; }

/* ---------- cards ---------- */
.card { background: var(--c-surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); border: 1px solid transparent; }
.cards-border .card { box-shadow: none; border-color: var(--c-border); }
.card--soft { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); box-shadow: none; }
.card--note { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--c-muted); }
.card--danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-color: color-mix(in srgb, var(--c-danger) 30%, transparent); box-shadow: none; margin-top: 18px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__head .card__title { margin: 0; }
.card__title { display: flex; align-items: center; gap: 8px; font-size: 1.08rem; margin-bottom: 14px; }
.card__title .bi { color: var(--c-accent); }
.card__title small { color: var(--c-muted); font-weight: 500; }
.card__title--lg { font-size: 1.35rem; }
.sticky-card { position: sticky; top: calc(var(--header-h) + 16px); }

.section-title { font-size: 1.35rem; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.section-title--sm { font-size: 1.1rem; }
.section-title .bi { color: var(--c-accent); }
.section-subtitle { color: var(--c-muted); margin-top: -12px; margin-bottom: 18px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head .section-title { margin: 0; }
.section-head > div { min-width: 0; }
.section-head .section-subtitle { margin: 4px 0 0; }
.section-head__links { display: flex; align-items: center; gap: 14px; }
.page-title { margin-bottom: 4px; }
.page-title--xl { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.page-subtitle { color: var(--c-muted); }

/* ---------- forms ---------- */
/* Shared site and admin header dropdowns. */
.has-dropdown { position: relative; }
.dropdown {
    position: absolute; top: calc(100% + 4px); inset-inline-start: 0; min-width: 210px; z-index: 50;
    background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s var(--ease);
}
.dropdown--end { inset-inline-start: auto; inset-inline-end: 0; }
.has-dropdown.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a, .dropdown button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: .92rem; text-align: start; }
.dropdown a:hover, .dropdown button:hover, .dropdown a.is-active { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.dropdown__head { padding: 8px 12px 10px; border-bottom: 1px solid var(--c-border); margin-bottom: 4px; }
.dropdown__head strong, .dropdown__head small { display: block; }
.dropdown__head small { color: var(--c-muted); }

.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid > * { min-width: 0; }
.form-grid .field--full { grid-column: 1 / -1; }
.form-grid .field { margin: 0; }
@media (max-width: 900px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.field__label { font-weight: 600; font-size: .9rem; color: var(--c-primary); display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.field__label .bi { color: var(--c-accent); }
.field__error { color: var(--c-danger); font-size: .82rem; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=date], input[type=search], select, textarea {
    width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-surface); color: var(--c-text); transition: border-color .15s, box-shadow .15s; appearance: none;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7385' d='M1.6 4.6a.7.7 0 0 1 1 0L8 10l5.4-5.4a.7.7 0 1 1 1 1l-5.9 5.9a.7.7 0 0 1-1 0L1.6 5.6a.7.7 0 0 1 0-1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 14px center; padding-inline-start: 14px; padding-inline-end: 34px;
}
[dir=ltr] select { background-position: right 14px center; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
input::placeholder, textarea::placeholder { color: #a3aab8; }
input[type=color] { width: 44px; height: 44px; padding: 3px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--c-accent); }
input[type=file] { font-size: .85rem; max-width: 100%; }
.code-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

.input-icon { position: relative; display: block; }
.input-icon > .bi { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.input-icon > .bi + input { padding-inline-start: 40px; }
.input-icon__btn { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); padding: 4px; }
.input-icon > input[data-password] { padding-inline-end: 40px; }
input[type=email], input[type=password], input[type=url], input[data-password],
input[name=email], input[autocomplete=username] { direction: ltr; text-align: left; }
.input-icon:has(> input[type=email], > input[type=password], > input[type=url], > input[data-password],
    > input[name=email], > input[autocomplete=username]) { direction: ltr; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; padding: 4px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--c-accent); flex-shrink: 0; margin: 0; }
.check a { color: var(--c-info); text-decoration: underline; }
.check--danger { color: var(--c-danger); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 44px; height: 24px; border-radius: 999px; background: #d3d7df; position: relative; transition: .2s; flex-shrink: 0; }
.switch__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: .2s var(--ease); }
.switch input:checked + .switch__track { background: var(--c-accent); }
.switch input:checked + .switch__track::after { inset-inline-start: 23px; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.switch--row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--c-border); width: 100%; }
.switch--row.field { flex-direction: row; align-items: center; }
.switch--row > span:first-child { flex: 1; }
.switch--row strong, .switch--row small { display: block; }
.switch--row small { color: var(--c-muted); font-size: .82rem; }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--c-bg); border-radius: var(--radius-sm); padding: 4px; gap: 4px; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; text-align: center; padding: 8px; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; font-weight: 600; font-size: .9rem; border: 1px solid transparent; }
.segmented input:checked + span { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-dark); }

.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-flex; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--c-border); cursor: pointer; font-size: .88rem; background: var(--c-surface); }
.chip-check input:checked + span { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-dark); font-weight: 600; }
.chip-check input:focus-visible + span { outline: 2px solid var(--c-accent); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.form-actions--center { justify-content: center; }
.form-actions--sticky { position: sticky; bottom: 0; background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(6px); padding: 12px 0; z-index: 5; }
.form-section__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 4px; }
.form-section__title .bi { color: var(--c-accent); }

.num-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: .85rem; font-weight: 700; flex-shrink: 0; }

.file-input { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-wrap: wrap; }
.file-input input { position: absolute; opacity: 0; width: 1px; }
.file-input small { color: var(--c-muted); }
.dropzone { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 90px; border: 2px dashed var(--c-border); border-radius: var(--radius); color: var(--c-muted); cursor: pointer; position: relative; transition: .15s; font-weight: 600; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-dark); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .bi { font-size: 1.5rem; }
.dropzone:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.file-drop { min-width: 0; padding: 12px; overflow-wrap: anywhere; }
.file-drop__hint { display: block; color: var(--c-muted); text-align: center; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.file-drop__preview { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.translation-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.translation-tools [data-translate-profile] { max-width: 100%; white-space: normal; text-align: start; }
.translation-tools small { color: var(--c-muted); }
.photo-upload.is-dragover, .cover-edit__cover.is-dragover, .cover-edit__logo.is-dragover {
    outline: 3px dashed var(--c-accent); outline-offset: 3px;
}

/* International phone selector */
.iti { display: block; width: 100%; direction: ltr; text-align: left; }
.iti:focus-within { z-index: 130; }
.iti .iti__country-container { left: 0 !important; right: auto !important; }
.iti input.iti__tel-input, .iti input.iti__tel-input[type=tel], .iti input.iti__tel-input[type=text] {
    width: 100%; min-height: 44px; border-radius: var(--radius-sm); border-color: var(--c-border);
    background: var(--c-surface); color: var(--c-text); font: inherit; direction: ltr; text-align: left;
}
.iti input.iti__tel-input:focus, .iti input.iti__tel-input[type=tel]:focus, .iti input.iti__tel-input[type=text]:focus {
    border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.iti__dropdown-content { z-index: 120; max-width: min(360px, calc(100vw - 24px)); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 131; width: min(360px, calc(100vw - 48px)); max-width: calc(100vw - 48px); }
.iti__country-list { max-height: min(280px, 50vh); }

@media (max-width: 420px) {
    .app-dialog { padding: 18px; }
    .app-dialog__body { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
    .app-dialog__icon { width: 40px; height: 40px; font-size: 1.15rem; }
    .app-dialog__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- badges / chips / tags ---------- */
.blue-badge { display: inline-block; color: #1d9bf0; font-size: .8em; line-height: 1; vertical-align: baseline; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge--lg { padding: 5px 14px; font-size: .85rem; }
.badge--success { background: color-mix(in srgb, var(--c-success) 14%, #fff); color: var(--c-success); }
.badge--info { background: color-mix(in srgb, var(--c-info) 12%, #fff); color: var(--c-info); }
.badge--warning { background: color-mix(in srgb, var(--c-warning) 15%, #fff); color: #9a6a0c; }
.badge--danger { background: color-mix(in srgb, var(--c-danger) 12%, #fff); color: var(--c-danger); }
.badge--muted { background: var(--c-bg); color: var(--c-muted); }
.badge--accent { background: var(--c-accent-soft); color: var(--c-accent-dark); border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.chip--muted { background: var(--c-bg); color: var(--c-muted); border: 1px solid var(--c-border); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: var(--c-bg); color: var(--c-muted); font-size: .78rem; font-weight: 500; }
.tag--lg { padding: 5px 12px; font-size: .85rem; }
.tags--light .tag { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }

.dot-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--c-success); }
.dot-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 20%, transparent); }

/* ---------- flag dropdown (select[data-flag-select] enhanced by app.js) ---------- */
.fsel { position: relative; width: 100%; min-width: 0; }
.fsel__native { position: absolute !important; inset: auto 0 0 0; width: 100% !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.fsel__btn {
    width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-inline-end: 36px;
    border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text);
    text-align: start; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s;
}
.fsel__btn::after {
    content: "\F282"; font-family: bootstrap-icons; font-size: .75rem; color: var(--c-muted);
    position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); transition: transform .15s;
}
.fsel.is-open .fsel__btn::after { transform: translateY(-50%) rotate(180deg); }
.fsel__btn:focus-visible, .fsel.is-open .fsel__btn { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.fsel__btn:disabled { opacity: .6; cursor: not-allowed; }
.fsel__btn.is-placeholder .fsel__value { color: #a3aab8; }
.fsel.is-invalid .fsel__btn { border-color: var(--c-danger); }
.fsel__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel__panel {
    position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 60; min-width: 220px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px;
}
.fsel__search { min-height: 36px !important; margin-bottom: 6px; font-size: .88rem; }
.fsel__list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.fsel__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; font-size: .92rem; color: var(--c-text); }
.fsel__opt:hover, .fsel__opt:focus { outline: none; background: var(--c-bg); }
.fsel__opt.is-selected { background: var(--c-accent-soft); color: var(--c-accent-dark); font-weight: 600; }
.fsel__opt.is-selected::after { content: "\F26E"; font-family: bootstrap-icons; margin-inline-start: auto; color: var(--c-accent); }
.fsel__opt--placeholder { color: var(--c-muted); }
/* borderless variants inside compact filter bars */
.chip-select .fsel, .map-filters__select .fsel { width: auto; flex: 1; }
.chip-select .fsel__btn, .map-filters__select .fsel__btn { border: 0; box-shadow: none !important; min-height: 38px; padding-block: 6px; font-size: .86rem; background: transparent; }
.map-filters__select .fsel__btn { min-height: 44px; }

/* country flag (assets/img/flags/{iso}.svg, 4:3) */
.flag { display: inline-block; width: 1.3em; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; vertical-align: -0.18em; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12); flex-shrink: 0; }
.lang-switch > button { gap: 8px; white-space: nowrap; }
.lang-switch > button .flag { width: 22px; }
.lang-switch > button .small { font-size: .7em; opacity: .75; }
.lang-switch > .dropdown { min-width: 0; width: max-content; }
.lang-switch > .dropdown a { white-space: nowrap; }
.tags--light .flag, .breadcrumb--light .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
h1 .flag { width: .9em; }

.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-dark); font-weight: 700; overflow: hidden; flex-shrink: 0; font-size: .9rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; border: 3px solid #fff; box-shadow: var(--shadow); }

/* ---------- alerts ---------- */
.flash-wrap { padding-top: 16px; display: grid; gap: 8px; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .92rem; border: 1px solid transparent; }
.alert > .bi { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.alert > span { flex: 1; }
.alert p { margin: 2px 0 0; font-size: .88rem; }
.alert--success { background: color-mix(in srgb, var(--c-success) 10%, #fff); border-color: color-mix(in srgb, var(--c-success) 25%, transparent); color: var(--c-success); }
.alert--info { background: color-mix(in srgb, var(--c-info) 8%, #fff); border-color: color-mix(in srgb, var(--c-info) 20%, transparent); color: var(--c-info); }
.alert--error { background: color-mix(in srgb, var(--c-danger) 8%, #fff); border-color: color-mix(in srgb, var(--c-danger) 22%, transparent); color: var(--c-danger); }
.alert--warning { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); color: #7a5c22; }
.alert__close { margin-inline-start: auto; opacity: .6; }
.alert__close:hover { opacity: 1; }

/* Shared modal alerts and confirmations */
.app-dialog {
    width: min(500px, calc(100vw - 32px)); max-width: none; max-height: min(88dvh, 700px);
    margin: auto; padding: 22px; overflow: auto; color: var(--c-text); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.app-dialog::backdrop { background: rgba(12, 25, 38, .55); backdrop-filter: blur(3px); }
.app-dialog--wide { width: min(680px, calc(100vw - 32px)); }
.detail-modal { padding: 0; overflow: hidden; display: none; flex-direction: column; }
.detail-modal[open] { display: flex; animation: detail-in .22s var(--ease); }
@keyframes detail-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.detail-modal__head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-soft)); }
.detail-modal__avatar { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); color: #fff; font-weight: 800; font-size: 1.05rem; }
.detail-modal__who { flex: 1; min-width: 0; }
.detail-modal__who h2 { margin: 0; color: #fff; font-size: 1.15rem; overflow-wrap: anywhere; }
.detail-modal__who p { margin: 2px 0 0; color: rgba(255, 255, 255, .75); font-size: .88rem; overflow-wrap: anywhere; }
.detail-modal__who a { color: var(--c-accent); }
.detail-modal__x { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .15s; }
.detail-modal__x:hover { background: rgba(255, 255, 255, .24); }
.detail-modal__body { flex: 1; overflow: auto; padding: 20px 22px; display: grid; gap: 16px; background: var(--c-bg); }
.detail-modal__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-muted); font-size: .8rem; font-weight: 600; }
.detail-block { padding: 16px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.detail-block h3 { margin: 0 0 8px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.detail-block__text { line-height: 1.8; overflow-wrap: anywhere; }
.detail-block--reply { border-inline-start: 4px solid var(--c-accent); background: var(--c-accent-soft); }
.detail-file { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c-surface); border: 1px dashed var(--c-accent); border-radius: var(--radius-sm); color: var(--c-accent-dark); font-weight: 600; }
.detail-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-file:hover { background: var(--c-accent-soft); }
.detail-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: var(--c-surface); border-top: 1px solid var(--c-border); }
@media (max-width: 560px) { .detail-modal__foot { display: grid; grid-template-columns: 1fr 1fr; } }
.app-dialog__body { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 14px; }
.app-dialog__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-dark); font-size: 1.35rem; }
.app-dialog[data-tone=success] .app-dialog__icon { background: color-mix(in srgb, var(--c-success) 12%, #fff); color: var(--c-success); }
.app-dialog[data-tone=info] .app-dialog__icon { background: color-mix(in srgb, var(--c-info) 10%, #fff); color: var(--c-info); }
.app-dialog[data-tone=error] .app-dialog__icon { background: color-mix(in srgb, var(--c-danger) 10%, #fff); color: var(--c-danger); }
.app-dialog__content { min-width: 0; text-align: start; }
.app-dialog__content h2 { margin: 2px 0 6px; font-size: 1.15rem; }
.app-dialog__content p { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.app-dialog__actions .btn { min-width: 96px; }
.app-dialog__actions [hidden] { display: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-inline: -4px; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: start; font-weight: 600; color: var(--c-muted); font-size: .82rem; background: var(--c-bg); padding: 10px 12px; white-space: nowrap; }
.table th.text-end, .table td.text-end { text-align: end; position: sticky; inset-inline-end: 0; z-index: 1; background: var(--c-surface, #fff); box-shadow: inset 1px 0 0 var(--c-border); }
.table th.text-end { background: var(--c-bg); }
.table th:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.table th:last-child { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.table td { padding: 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--c-accent-soft) 50%, transparent); }
.table--compact td { padding: 9px 12px; }
.row--blocked td { background: color-mix(in srgb, var(--c-danger) 5%, #fff); }
.cell-media { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.cell-media > img { width: 64px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cell-media strong, .cell-media small { display: block; }
.thumb { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--c-bg); display: inline-grid; place-items: center; color: var(--c-muted); }
.thumb--lg { width: 120px; height: 84px; }
.thumb-preview { max-width: 160px; border-radius: 8px; margin-top: 6px; }

/* ---------- tabs ---------- */
.tabs { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.cards-border .tabs { box-shadow: none; border: 1px solid var(--c-border); }
.tabs__list { display: flex; overflow-x: auto; }
.tabs__tab { flex: 1; padding: 14px 18px; font-weight: 600; color: var(--c-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs__tab:hover { color: var(--c-text); }
.tabs__tab.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.sub-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 18px; overflow-x: auto; }
.sub-tabs a { padding: 10px 16px; color: var(--c-muted); font-weight: 600; border-bottom: 2px solid transparent; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.sub-tabs a.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ---------- steps ---------- */
.steps { display: flex; justify-content: center; margin: 24px auto; max-width: 640px; counter-reset: s; }
.steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.steps__item:not(:last-child)::after { content: ""; position: absolute; top: 17px; inset-inline-start: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: var(--c-border); }
.steps__item.is-done:not(:last-child)::after { background: var(--c-accent); }
.steps__dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--c-surface); border: 2px solid var(--c-border); color: var(--c-muted); position: relative; z-index: 1; }
.steps__item.is-current .steps__dot { background: var(--c-accent); border-color: var(--c-accent); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.steps__item.is-done .steps__dot { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.steps__label { font-size: .85rem; font-weight: 600; color: var(--c-muted); }
.steps__item.is-current .steps__label { color: var(--c-accent); }
.steps__item.is-done .steps__label { color: var(--c-text); }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.pagination a { min-width: 38px; height: 38px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); font-weight: 600; font-size: .9rem; }
.pagination a.is-current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pagination a.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- accordion ---------- */
.accordion { display: grid; gap: 10px; }
.accordion__item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.accordion__item[open] { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); }
.accordion__item summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; font-weight: 700; color: var(--c-primary); cursor: pointer; list-style: none; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__icon { transition: transform .2s; }
.accordion__item[open] .accordion__icon { transform: rotate(180deg); }
.accordion__body { padding: 0 18px 16px; color: var(--c-muted); }

/* ---------- info lists ---------- */
.info-list { margin: 0; display: grid; }
.info-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: .9rem; }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.info-list dt .bi { color: var(--c-accent); }
.info-list dd { margin: 0; font-weight: 600; text-align: end; }
.info-list--boxed { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 16px; margin: 16px 0; text-align: start; }

.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.kv-grid--3 { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.kv { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--c-border); border-inline-end: 1px solid var(--c-border); }
.kv > .bi { color: var(--c-accent); font-size: 1.15rem; }
.kv span { display: block; color: var(--c-muted); font-size: .82rem; }
.kv strong { display: block; color: var(--c-primary); }

.check-list { display: grid; gap: 10px; }
.check-list--2 { grid-template-columns: 1fr 1fr; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list .bi { color: var(--c-accent); margin-top: 3px; }

.icon-list { display: grid; gap: 14px; }
.icon-list li { display: flex; gap: 12px; font-size: .9rem; color: var(--c-muted); }
.icon-list .bi { color: var(--c-primary); font-size: 1.1rem; }

.numbered-list { counter-reset: n; display: grid; gap: 14px; }
.numbered-list li { counter-increment: n; display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; }
.numbered-list li::before { content: counter(n); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--c-bg); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.numbered-list small { color: var(--c-muted); }

.simple-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.simple-list li:last-child { border-bottom: 0; }

.progress { height: 8px; background: var(--c-bg); border-radius: 999px; overflow: hidden; margin: 10px 0 16px; }
.progress span { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; transition: width .4s var(--ease); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--c-muted); font-size: .88rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

.empty-state { text-align: center; padding: 36px 20px; color: var(--c-muted); }
.empty-state > .bi { font-size: 2.4rem; color: var(--c-border); display: block; margin-bottom: 8px; }
.empty-state .btn { margin-top: 12px; }

.promo-dark { background: var(--c-primary); color: #fff; border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.promo-dark--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 75%, transparent), var(--c-primary) 70%); }
.promo-dark > * { position: relative; }
.promo-dark h3 { color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.promo-dark h3 .bi { color: var(--c-accent); }
.promo-dark p { opacity: .8; font-size: .9rem; }
.promo-dark__icon { font-size: 1.7rem; color: var(--c-accent); display: block; margin-bottom: 6px; }
.promo-dark--list ul { display: grid; gap: 10px; }
.promo-dark--list li { display: flex; gap: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-sm); padding: 12px; }
.promo-dark--list li > .bi { color: var(--c-accent); font-size: 1.3rem; }
.promo-dark--list strong, .promo-dark--list small { display: block; }
.promo-dark--list small { opacity: .7; font-size: .82rem; }

.tip-box { display: flex; gap: 12px; background: color-mix(in srgb, var(--c-info) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c-info) 15%, transparent); border-radius: var(--radius); padding: 16px; font-size: .88rem; }
.tip-box > .bi { color: var(--c-accent); font-size: 1.3rem; }
.tip-box p { color: var(--c-muted); margin: 4px 0 0; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--c-muted); margin-bottom: 10px; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb__sep { font-size: .7rem; opacity: .6; }
.breadcrumb--light { color: rgba(255, 255, 255, .85); }
.breadcrumb--chip { display: inline-flex; background: var(--c-surface); padding: 6px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); }

@media (max-width: 700px) {
    .card { padding: 16px; }
    .kv-grid, .kv-grid--3, .check-list--2 { grid-template-columns: 1fr; }
    .steps__label { font-size: .75rem; }
    .card--danger-zone { flex-direction: column; align-items: stretch; }
}