/* ─── Dropdown (CustomDropdown) ─── */
.crm-dropdown { position: relative; display: inline-block; width: 100%; }
.crm-dropdown-toggle-wrap { position: relative; }
.crm-dropdown-toggle {
    width: 100%; text-align: left; cursor: pointer; background-color: #fff;
    padding-right: 30px; text-overflow: ellipsis;
}
.crm-dropdown-toggle:disabled { cursor: not-allowed; opacity: .65; }
.crm-dropdown-toggle[readonly] { cursor: pointer; }
.crm-dropdown-chevron {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: #6c757d; pointer-events: none;
}
.crm-dropdown-backdrop { position: fixed; inset: 0; z-index: var(--z-dropdown); background: transparent; }
.crm-dropdown-panel {
    z-index: calc(var(--z-dropdown) + 1); min-width: 180px; max-height: 280px; overflow-y: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
    border: 1px solid #f0eeeb; padding: 6px; flex-direction: column; gap: 2px;
}
.crm-dropdown-item {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: 7px 10px; border-radius: 7px; font-size: 14px; color: #212529; cursor: pointer;
}
.crm-dropdown-item:hover { background: var(--accent-subtle); }
.crm-dropdown-item.active { background: var(--accent-subtle); color: var(--accent-dark); font-weight: 500; }
.crm-dropdown-item.highlighted { outline: 2px solid var(--accent-dark); outline-offset: -2px; }
.crm-dropdown-empty { padding: 8px 10px; font-size: 13px; color: #6c757d; }

/* ─── Modal (create/edit popups) ───
   The backdrop/box shell used to live here too, but every modal now goes through
   CrmModal/ChronoDialog/ChronoSheet (top layer, no z-index needed) — these header/body/footer
   classes are what CrmModal's own template still reuses. */
.crm-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 16px; border-bottom: 1px solid #f0eeeb; flex-shrink: 0;
}
.crm-modal-title { font-size: 15px; font-weight: 600; color: #111; }
.crm-modal-close {
    width: 30px; height: 30px; border-radius: 8px; background: #f3f4f6;
    border: none; cursor: pointer; color: #6c757d; font-size: 15px;
    display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.crm-modal-close:hover { background: #e9ecef; color: #111; }
.crm-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.crm-modal-footer { padding: 14px 20px; border-top: 1px solid #f0eeeb; display: flex; gap: 8px; flex-shrink: 0; }
.crm-label { display: block; font-size: 12px; color: #6c757d; margin-bottom: 5px; }
.crm-btn-ghost {
    background: none; border: 1px solid #e5e7eb; border-radius: 999px;
    padding: 8px 18px; font-size: 13px; color: #6c757d; cursor: pointer; transition: background .12s;
}
.crm-btn-ghost:hover { background: #f9f9f8; color: #343a40; }

/* ─── Filter bar (search + selects above a list) ─── */
.crm-filter-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.crm-filter-bar .crm-filter-select {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 10px; font-size: 13px;
    background: #fff; color: #343a40; min-width: 140px;
}

/* Back button — EntityHeader (Компанія/Філія/Співробітник/Послуга detail pages) */
.entity-back-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #f5f4f1;
    color: #495057;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
    text-decoration: none;
}
.entity-back-btn:hover { background: #ececea; color: #495057; text-decoration: none; }
/* Entity detail page avatar (EntityHeader Leading slot) — desktop size by default,
   shrinks on mobile since the header bar itself is a lot tighter there. */
.entity-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}
@media (max-width: 767.98px) {
    .entity-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* Same 34px circle as .entity-avatar/.btn-header-icon on mobile — back button, avatar,
   and the header action buttons all read as one consistent row of round controls. */
.entity-back-btn-sm {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 16px;
}

/* Avatar */
.crm-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
}

.crm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-avatar-editable {
    cursor: pointer;
}

/* ChronoImagePicker renders its clickable <div> as a flex item that shrinks to fit its
   icon/img content by default — stretch it to the full circle so the whole avatar is
   clickable, not just the icon. */
.crm-avatar-editable > div:first-child {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-gallery-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.crm-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-gallery-add {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px dashed var(--bs-border-color, #ccc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    flex-shrink: 0;
}

/* Same fix as .crm-avatar-editable — stretch ChronoImagePicker's clickable <div> to fill
   the whole dashed square instead of just wrapping the plus icon. */
.crm-gallery-add > div:first-child {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-gallery-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card */
.crm-card {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid #f0eeeb;
    padding: 14px 16px;
}
.crm-card-hover {
    cursor: pointer;
    transition: border-color 0.15s;
}
.crm-card-hover:hover { border-color: #d0d0d0; }

/* Hint bar */
.crm-hint {
    background: var(--accent-subtle);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--accent-dark);
    margin-bottom: 14px;
}

/* Price input (compact) — shared by Branch/EmployeeDetailPage service pricing rows */
.price-input-sm {
    width: 84px;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    text-align: right;
    background: #fafafa;
}
.price-input-sm:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
}
.price-input-sm:disabled { opacity: 0.4; background: #f5f5f5; }

/* Service check row — shared by Branch/EmployeeDetailPage service assignment lists */
.svc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f5f3;
}
.svc-row:last-child { border-bottom: none; }
.svc-row label {
    flex: 1;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
.svc-row .base-price {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Role icon badge — EmployeeDetailPage Roles tab (assigned-role cards + company-roles directory) */
.role-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.role-icon-sm {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 7px;
    font-size: 13px;
}

/* Permission chip — EmployeeDetailPage Roles tab */
.perm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f7f7f5;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11px;
    color: #495057;
}

/* Stat tile — EmployeeDetailPage Profile "Коротко" card */
.stat-tile {
    border: 1px solid #f0eeeb;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.stat-tile-value {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
}
.stat-tile-label {
    font-size: 12px;
    color: #6c757d;
}

/* Field label — the compact muted caption above inputs on entity detail forms */
.crm-field-label {
    display: block;
    font-size: 11.5px;
    color: #6c757d;
    margin-bottom: 5px;
}

/* Photo row — PhotoManager Inline layout (avatar · change button + hint · gallery) */
.photo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f5f4f1;
}
.photo-row-hint {
    font-size: 11px;
    color: #9ca3af;
}
.crm-gallery-thumb-sm,
.crm-gallery-add-sm {
    width: 52px;
    height: 52px;
    border-radius: 9px;
}
.crm-gallery-add-sm { border-color: #d9d6cf; }

/* Social chips — EmployeeDetailPage Profile. Click a chip to edit that one link inline. */
.social-chip,
.social-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #f0eeeb;
    background: #faf9f7;
    color: #9ca3af;
}
.social-chip { cursor: pointer; }
.social-chip:hover { border-color: #d9d6cf; }
.social-chip-on {
    background: var(--accent-subtle);
    border-color: #bde9da;
    color: var(--accent-dark);
}
.social-edit {
    background: #fff;
    border-color: var(--accent);
    color: var(--accent-dark);
    padding: 4px 12px;
}
.social-edit-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    min-width: 190px;
    color: #212529;
}

/* Public page link box — EmployeeDetailPage Profile */
.public-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #faf9f7;
    border: 1px solid #f0eeeb;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 12px;
    color: #495057;
    overflow: hidden;
}

/* Notice bar — white card with an accent left edge (design's info/warning strip).
   Distinct from .crm-hint, which is the filled tinted variant. */
.crm-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #f0eeeb;
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 12.5px;
    color: #495057;
    margin-bottom: 14px;
}
.crm-notice > i {
    color: var(--accent);
    font-size: 17px;
    flex-shrink: 0;
}
.crm-notice-warn { border-left-color: #EF9F27; }
.crm-notice-warn > i { color: #EF9F27; }

/* ── Employee services tab: one card per service ── */
.esvc-head,
.esvc-row {
    display: grid;
    grid-template-columns: 24px 1fr 110px 130px;
    gap: 12px;
    align-items: center;
}
.esvc-head {
    padding: 0 16px 8px;
    font-size: 11.5px;
    color: #9ca3af;
}
.esvc-row {
    background: #fff;
    border: 1px solid #f0eeeb;
    border-radius: 12px;
    padding: 12px 16px;
}
.esvc-check {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 5px;
    border: 1.5px solid #cfccc4;
    background: #fff;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.esvc-check-on {
    border-color: var(--accent);
    background: var(--accent);
}
.esvc-name { min-width: 0; }
.esvc-title {
    font-size: 14px;
    font-weight: 600;
}
.esvc-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 8px;
}
.esvc-base {
    text-align: right;
    font-size: 13px;
    color: #6c757d;
}
.esvc-price {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    background: #faf9f7;
    border-radius: 8px;
    height: 34px;
    padding: 0 11px;
}
.esvc-price-on {
    background: #fff;
}
/* CustomInputDecimalNull always wraps its <input> in its own <div class="mb-1"> —
   that wrapper, not the input, is the actual flex item here, so it needs the flex/min-width,
   and the input needs an explicit 100% width to fill it instead of the browser's default size. */
.esvc-price > div {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.esvc-price-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12.5px;
    color: #c4c2bb;
}
.esvc-price-on .esvc-price-input { color: #212529; }
/* Same fix as .field-unit-input: keep the Bootstrap focus ring on the padded wrapper,
   not hugging the zero-padding input itself. */
.esvc-price-input:focus { box-shadow: none; }
.esvc-price:focus-within { border-color: var(--accent); }
.esvc-currency {
    font-size: 11px;
    color: #c4c2bb;
}

@media (max-width: 767.98px) {
    .esvc-row {
        grid-template-columns: 20px 1fr 84px;
        gap: 10px;
        padding: 11px 13px;
    }
    .esvc-title { font-size: 12.5px; }
    .esvc-meta {
        display: block;
        margin-left: 0;
        font-size: 10.5px;
    }
    .esvc-price { height: 32px; }
}

/* Role summary line under a role name — Roles tab */
.role-summary {
    font-size: 11.5px;
    color: #9ca3af;
    margin-top: 3px;
    line-height: 1.45;
}

/* ── Bonuses tab ── */
.btn-bonus {
    border: 1px solid #cfe6d8;
    color: #0F6E56;
    background: #fff;
}
.btn-bonus:hover { background: #f3faf6; color: #0F6E56; }
.btn-penalty {
    border: 1px solid #f2d5d3;
    color: #c1524d;
    background: #fff;
}
.btn-penalty:hover { background: #fdf5f4; color: #c1524d; }

.entry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #f0eeeb;
    border-radius: 10px;
    padding: 11px 14px;
}
.entry-amount {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.entry-amount-plus { color: #0F6E56; }
.entry-amount-minus { color: #c1524d; }
.entry-reason {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #343a40;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entry-date {
    font-size: 11.5px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Automatic bonus/penalty rules — BonusRulesPanel */
.rule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #f0eeeb;
    border-radius: 10px;
    padding: 11px 14px;
    background: #fff;
}
.rule-kind {
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.rule-kind-bonus {
    background: #EAF3DE;
    color: #173404;
}
.rule-kind-penalty {
    background: #FCEBEB;
    color: #A32D2D;
}
.rule-summary {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #212529;
}
.rule-source {
    background: #EEEDFE;
    color: #3C3489;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    flex-shrink: 0;
}
.rule-action {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #f0eeeb;
    border-radius: 8px;
    background: #fff;
    color: #6c757d;
    font-size: 14px;
    flex-shrink: 0;
}
.rule-action:hover { border-color: #d9d6cf; }
.rule-action-danger { color: #d97570; }
.rule-action-danger:hover { border-color: #f6e2e1; }

/* Section label above a form group — shared by edit forms split into sections */
.crm-edit-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

/* Static legal/info pages under PublicLayout (pricing, terms, payment & refund) */
.lg-wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px 60px; }
.lg-h1 { font-weight: 300; font-size: 28px; margin-bottom: 8px; }
.lg-lead { color: #6b7280; margin-bottom: 24px; }
.lg-note { color: #9ca3af; font-size: 12.5px; }
.lg-wrap h3 { font-weight: 600; font-size: 15px; margin-top: 28px; margin-bottom: 8px; }
.lg-wrap p { color: #374151; line-height: 1.6; }
.lg-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.lg-table th, .lg-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: top; }
.lg-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; font-weight: 600; }
.lg-example { background: #f9f9f8; border-radius: 10px; padding: 16px 18px; margin-top: 20px; }
.lg-example h3 { margin-top: 0; }

/* ─── OTP code cells (OtpCodeInput) ─── */
.otp-cells {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.otp-cell {
    width: 52px;
    height: 60px;
    border: 1.5px solid #e5e3df;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    caret-color: var(--accent);
    transition: border-color .15s, box-shadow .15s;
}
.otp-cell:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.otp-cell--error { border-color: #E24B4A; }
.otp-cell--error:focus { box-shadow: 0 0 0 3px rgba(226, 75, 74, .18); }

@media (max-width: 380px) {
    .otp-cells { gap: 8px; }
    .otp-cell { width: 46px; height: 54px; font-size: 21px; }
}

/* ─── Terms consent shown under the OTP field ─── */
.otp-consent {
    background: #faf9f7;
    border: 1px solid #f0eeeb;
    border-radius: 10px;
    padding: 12px 12px 8px;
    margin-bottom: 14px;
}
.otp-consent .form-check { margin-bottom: 6px; }
.otp-consent .form-check:last-child { margin-bottom: 0; }

/* ─── DashboardPage (Company) Info-view card ─── */
.info-field {
    padding: 12px 14px;
    background: #faf9f7;
    border: 1px solid #f0eeeb;
    border-radius: 10px;
}
.info-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
}
.info-field-value {
    font-size: 13.5px;
    font-weight: 500;
    color: #212529;
}

.info-hint-box {
    display: flex;
    gap: 9px;
    background: #faf9f7;
    border: 1px solid #f0eeeb;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 11.5px;
    color: #5e5c55;
    line-height: 1.5;
}
.info-hint-box > i { color: #8c7c4b; font-size: 16px; margin-top: 1px; }

/* Stat tile as a link (Філії/Команда tiles that navigate elsewhere) — same look as .stat-tile */
.stat-tile-link {
    display: block;
    border: 1px solid #f0eeeb;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.stat-tile-link:hover { border-color: #d9d6cf; color: inherit; }
.stat-tile-link .stat-tile-value,
.stat-tile-link .stat-tile-label { color: inherit; }

/* Profile completeness — ProfileCompletenessCard (Company/Branch/Employee Info tab) */
.completeness-bar {
    height: 6px;
    background: #f0eeeb;
    border-radius: 999px;
    overflow: hidden;
}
.completeness-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}
.completeness-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}
.completeness-item-done { color: #6c757d; }
.completeness-item-done i { color: var(--accent); }
.completeness-item-todo { color: #8a6d00; }
.completeness-item-todo i { color: #EF9F27; }

/* Unit-suffixed field box (ServiceEditPage: duration "хв", price "₴") — same fix as .esvc-price:
   CustomInputInt/CustomInputDecimalNull wrap their <input> in their own <div>, which is the real
   flex item here, not the input itself. */
.field-unit-box {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 9px;
    height: 38px;
    padding: 0 12px;
}
.field-unit-box > div {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.field-unit-box .field-unit-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: #212529;
}
/* Bootstrap's .form-control:focus box-shadow would otherwise hug the input itself, which has
   zero padding here — the visible padding lives on .field-unit-box instead, so the focus ring
   belongs on that wrapper, not the bare input. */
.field-unit-box .field-unit-input:focus { box-shadow: none; }
.field-unit-box:focus-within { border-color: var(--accent); }
.field-unit-suffix {
    font-size: 11.5px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Duration quick-pick chips — ServiceEditPage */
.duration-preset {
    border: 1px solid #e5e3de;
    background: #fff;
    color: #6c757d;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 11px;
    cursor: pointer;
}
.duration-preset:hover { border-color: #d9d6cf; }
.duration-preset-on {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-dark);
}