/* CENTER CRM 0.12.16 — global UI compatibility/stability pass.
   This layer deliberately avoids taking ownership of page geometry.
   Page-specific CSS remains authoritative; this file only aligns visual language. */

.center-ui-audit {
    --ui-bg: #101010;
    --ui-surface: #171717;
    --ui-surface-2: #1b1b1b;
    --ui-surface-3: #202020;
    --ui-border: #30302e;
    --ui-border-hover: #45402f;
    --ui-text: #f4f4f4;
    --ui-muted: #8d8d8d;
    --ui-accent: #f6c543;
    --ui-accent-hover: #ffd45f;
    --ui-accent-soft: rgba(246,197,67,.10);
    --ui-danger: #ef7470;
    --ui-success: #67d18d;
    --ui-info: #73a9e7;
    --ui-radius-sm: 11px;
    --ui-radius: 15px;
    --ui-radius-lg: 19px;
    --ui-shadow-sm: 0 8px 24px rgba(0,0,0,.14);
    --ui-shadow: 0 18px 48px rgba(0,0,0,.20);
    --ui-shadow-float: 0 28px 80px rgba(0,0,0,.40);
    --ui-focus: 0 0 0 3px rgba(246,197,67,.085), 0 10px 26px rgba(0,0,0,.14);
    background:
        radial-gradient(circle at 18% -12%, rgba(246,197,67,.022), transparent 31rem),
        var(--ui-bg);
}

/* Never redefine the width/centering of page-content here. Several pages
   intentionally break out of the standard container (Telegram settings) and
   fixed drawers depend on having no transformed layout ancestor (Schedules). */
.center-ui-audit .page-content,
.center-ui-audit .page-content > * {
    min-width: 0;
}

.center-ui-audit h1,
.center-ui-audit h2,
.center-ui-audit h3,
.center-ui-audit h4 {
    letter-spacing: -.022em;
}

.center-ui-audit :where(.eyebrow, [class$="-kicker"], [class*="-kicker "]) {
    color: #d8b548;
}

.center-ui-audit :where(.muted, .small-muted, .field-help) {
    color: var(--ui-muted);
}

/* ---------- surfaces: paint only, never geometry ---------- */
.center-ui-audit :where(
    .panel,
    .settings-card,
    .status-card,
    .admin-metric-card,
    .client-editor-card,
    .client-profile-section,
    .client-profile-side-card,
    .delivery-detail-card,
    .delivery-work-card,
    .analytics-kpi-card,
    .analytics-rank-panel,
    .report-summary-card,
    .tg-health-card,
    .tg-editor-card,
    .daily-report-status-card,
    .notification-channel-card,
    .avito-inquiries-stat,
    .avito-blacklist-stat,
    .avito-quick-reply-stat,
    .avito-api-stat
) {
    border-color: var(--ui-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 10px 30px rgba(0,0,0,.10);
}

.center-ui-audit :where(
    .settings-card,
    .status-card,
    .admin-metric-card,
    .analytics-kpi-card,
    .report-summary-card,
    .tg-health-card,
    .notification-channel-card
) {
    transition: border-color .18s ease, box-shadow .20s ease, background-color .18s ease;
}

.center-ui-audit :where(
    .settings-card,
    .status-card,
    .admin-metric-card,
    .analytics-kpi-card,
    .report-summary-card,
    .tg-health-card,
    .notification-channel-card
):hover {
    border-color: #3d392f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 38px rgba(0,0,0,.14);
}

/* ---------- ordinary form controls ----------
   No width/min-height/padding overrides: compact controls and grid fields keep
   the dimensions chosen by their own page stylesheet. */
.center-ui-audit :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="search"]):not(.center-search__input):not(.center-select__native),
    textarea
) {
    border-color: #383838;
    border-radius: var(--ui-radius-sm);
    outline: 0;
    background-color: #181818;
    color: #f0f0f0;
    caret-color: var(--ui-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    transition: border-color .17s ease, background-color .17s ease, box-shadow .17s ease, color .17s ease;
}

.center-ui-audit :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="search"]):not(.center-search__input):not(.center-select__native),
    textarea
):hover:not(:disabled) {
    border-color: #484334;
}

.center-ui-audit :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="search"]):not(.center-search__input):not(.center-select__native),
    textarea
):focus,
.center-ui-audit :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="search"]):not(.center-search__input):not(.center-select__native),
    textarea
):focus-visible {
    border-color: rgba(246,197,67,.70) !important;
    outline: 0 !important;
    background-color: #1b1b1b;
    box-shadow: var(--ui-focus) !important;
}

.center-ui-audit :where(input, textarea)::placeholder {
    color: #6e6e6e;
    opacity: 1;
}

.center-ui-audit :where(input, textarea):disabled {
    border-color: #2c2c2c;
    background-color: #151515;
    color: #696969;
    opacity: .76;
}

.center-ui-audit :where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
    color-scheme: dark;
}

.center-ui-audit :where(input[type="file"])::file-selector-button {
    border: 1px solid #45402f;
    border-radius: 9px;
    background: #22201b;
    color: #e5c45d;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.center-ui-audit :where(input[type="file"])::file-selector-button:hover {
    border-color: #5a5030;
    background: #29251b;
    color: #f4d16a;
}

.center-ui-audit :where(.field-error, .field-errors) {
    color: #f0807d;
}

.center-ui-audit :where(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
    accent-color: var(--ui-accent);
}

/* ---------- buttons ----------
   Keep local dimensions and overflow. This is intentionally non-invasive so
   icon buttons, drawer controls and compact toolbars cannot be stretched. */
.center-ui-audit :where(.button, input[type="submit"], input[type="button"], input[type="reset"]) {
    border-radius: 11px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .18s ease, opacity .16s ease;
}

.center-ui-audit :where(.button-primary) {
    border-color: #e6b934;
    background: linear-gradient(180deg, #f8ce58, #edbd38);
    color: #121212;
    box-shadow: 0 8px 22px rgba(246,197,67,.10), inset 0 1px 0 rgba(255,255,255,.24);
}

.center-ui-audit :where(.button-primary):hover:not(:disabled) {
    border-color: #ffd96a;
    background: linear-gradient(180deg, #ffda6d, #f5c744);
    box-shadow: 0 10px 26px rgba(246,197,67,.14), inset 0 1px 0 rgba(255,255,255,.27);
}

.center-ui-audit :where(.button-secondary) {
    border-color: #3b3b3b;
    background-color: #1d1d1d;
    color: #e2e2e2;
}

.center-ui-audit :where(.button-secondary):hover:not(:disabled) {
    border-color: #504934;
    background-color: #211f1a;
    color: #f4cf61;
}

.center-ui-audit :where(.button-danger) {
    border-color: rgba(239,106,103,.35);
    color: #ef8581;
}

.center-ui-audit :where(.button-danger):hover:not(:disabled) {
    border-color: rgba(239,106,103,.55);
    background-color: rgba(239,106,103,.08);
}

.center-ui-audit :where(.button, input[type="submit"], input[type="button"], input[type="reset"]):focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus);
}

/* Existing specialised buttons retain their own geometry and semantic colour;
   only border/focus quality is harmonised. */
.center-ui-audit :where(
    .home-button,
    .operator-shift-button,
    .delivery-refresh-button,
    .delivery-apply-button,
    .delivery-icon-button,
    .delivery-claim-button,
    .delivery-delete-button,
    .client-db-data-action,
    .reports-v3-show-button,
    .settings-two-factor-action,
    .schedule-icon-button,
    .schedule-cell-button,
    .schedule-save-button,
    .avito-inquiries-action,
    .avito-inquiries-button,
    .avito-hotkey-record-button,
    .avito-hotkey-clear-button,
    .avito-quick-copy-button,
    .avito-blacklist-action,
    .avito-blacklist-button
) {
    border-radius: 11px;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .18s ease, opacity .16s ease;
}

/* ---------- custom filter controls ---------- */
.center-ui-audit :where(.filter-bar, [class$="-filters"], [class$="-filter-panel"], [class$="-toolbar"]) {
    min-width: 0;
}

.center-ui-audit :where(.delivery-filter-custom-select-button) {
    border-color: #3a3a3a;
    background-color: #181818;
    color: #e7e7e7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.center-ui-audit :where(.delivery-filter-custom-select-button):hover {
    border-color: #4b4431;
    background-color: #1c1b18;
}

.center-ui-audit :where(.delivery-filter-custom-select-menu) {
    border-color: #403a2d;
    border-radius: 14px;
    background: #181818;
    box-shadow: var(--ui-shadow-float);
}

.center-ui-audit :where(.delivery-filter-custom-select-option):hover,
.center-ui-audit :where(.delivery-filter-custom-select-option):focus-visible {
    background: rgba(246,197,67,.075);
    color: #f4cf61;
}

/* ---------- tables ----------
   Do not globally make headers sticky and do not replace cell spacing: both
   behaviours broke page-specific tables during the previous audit. */
.center-ui-audit :where(.table-wrap, .avito-inquiries-table-wrap, .avito-blacklist-table-wrap) {
    border-color: var(--ui-border);
    scrollbar-width: thin;
    scrollbar-color: #454031 transparent;
}

.center-ui-audit :where(table tbody tr) {
    transition: background-color .15s ease;
}

.center-ui-audit :where(table tbody tr:hover) {
    background-color: rgba(246,197,67,.022);
}

.center-ui-audit :where(.table-link):hover {
    color: #f0c64d;
}

/* ---------- badges / statuses ---------- */
.center-ui-audit :where(.status-pill, .chip, [class$="-badge"], [class$="-pill"]) {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.center-ui-audit :where(.status-ok, .is-ok, .is-good) { color: #77d99a; }
.center-ui-audit :where(.status-danger, .status-error, .is-danger) { color: #ef8581; }

/* ---------- details / accordions ----------
   CRITICAL: no universal ::after chevron here. Nearly every mature component
   already draws its own arrow/plus. Adding a second pseudo-element was the
   source of the duplicated arrows visible in the audit video. */
.center-ui-audit :where(details > summary) {
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.center-ui-audit :where(details > summary):focus-visible {
    outline: 2px solid rgba(246,197,67,.55);
    outline-offset: 3px;
}

.center-ui-audit :where(details > summary)::marker {
    color: #a88e3d;
}

/* ---------- empty states / notices ---------- */
.center-ui-audit :where(.empty-state) {
    border-color: #303030;
    background-color: #151515;
}

.center-ui-audit :where(.notice, .notice-box, [class$="-notice"], [class$="-warning-box"]) {
    border-color: #34322c;
}

.center-ui-audit :where(code) { color: #dfc46d; }
.center-ui-audit :where(pre) {
    border-color: #303030;
    background-color: #131313;
    color: #d9d9d9;
    scrollbar-width: thin;
    scrollbar-color: #454031 transparent;
}

/* ---------- navigation / pagination ---------- */
.center-ui-audit :where(.client-db-pagination a, .notification-pagination a, .avito-inquiries-pagination a, .avito-blacklist-pagination a) {
    border-color: #353535;
    border-radius: 10px;
    background-color: #181818;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.center-ui-audit :where(.client-db-pagination a, .notification-pagination a, .avito-inquiries-pagination a, .avito-blacklist-pagination a):hover {
    border-color: #514a36;
    background-color: #1e1d1a;
    color: #f0c750;
}

.center-ui-audit :where(.settings-section-nav, .admin-settings-nav, .tg-settings-nav, .delivery-scope-tabs, .ccrm-ui-scope-tabs) {
    border-color: #303030;
}

/* ---------- overlays ---------- */
.center-ui-audit :where(.account-menu-popover, .center-notification-popover, .schedule-drawer, .schedule-roster-modal, .delivery-filter-popover) {
    border-color: #3a372f;
    box-shadow: var(--ui-shadow-float);
}

/* Schedule stability: fixed overlays must stay viewport-relative and must not
   make the document wider than the viewport. */
.center-ui-audit .schedule-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.center-ui-audit .schedule-matrix-wrap {
    max-width: 100%;
}

.center-ui-audit :where(.schedule-drawer, .schedule-drawer-backdrop, .schedule-modal-backdrop) {
    box-sizing: border-box;
    max-width: 100vw;
}

.center-ui-audit .schedule-drawer {
    position: fixed;
}

.center-ui-audit .schedule-drawer-backdrop,
.center-ui-audit .schedule-modal-backdrop {
    position: fixed;
}

/* Telegram settings intentionally owns a viewport-wide breakout. Do not set a
   competing transform/width on this element from the global layer. */
.center-ui-audit .tg-settings-page {
    min-width: 0;
}

/* ---------- scrollbars ---------- */
.center-ui-audit * {
    scrollbar-width: thin;
    scrollbar-color: #454031 transparent;
}

.center-ui-audit *::-webkit-scrollbar { width: 9px; height: 9px; }
.center-ui-audit *::-webkit-scrollbar-track { background: transparent; }
.center-ui-audit *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #454031;
    background-clip: padding-box;
}
.center-ui-audit *::-webkit-scrollbar-thumb:hover {
    background: #5b5136;
    background-clip: padding-box;
}

/* ---------- safe entrance / interaction animation ----------
   There is intentionally no page-wide entrance animation. Even opacity-only
   gating can leave content invisible if a third-party script fails. More
   importantly, `transform` must never be animated on page-content children:
   fixed drawers and page-specific transforms depend on an untouched tree. */
.center-ui-audit .center-ui-highlight {
    animation: centerUiHighlight .42s ease-out;
}

@keyframes centerUiHighlight {
    0% { box-shadow: 0 0 0 0 rgba(246,197,67,.16); }
    100% { box-shadow: 0 0 0 9px rgba(246,197,67,0); }
}

/* ---------- responsive safety ---------- */
@media (max-width: 900px) {
    .center-ui-audit :where(.section-heading-row, .admin-page-header, .notification-page-header, .tg-page-heading, .delivery-page-heading) {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .center-ui-audit :where(.panel) {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .center-ui-audit *,
    .center-ui-audit *::before,
    .center-ui-audit *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

}