/*
 * Personal CRM shared UI styles.
 *
 * Consumed by both hosts as _content/PersonalCrm.UI/app.css.
 *
 * Rule: only CSS logical properties are used for anything directional
 * (margin-inline-start, padding-inline-end, inset-inline, border-inline-start, text-align: start).
 * Nothing here says left or right, so the whole layout mirrors correctly when MudRTLProvider
 * switches the document to rtl for Arabic or any other right-to-left language added later.
 */

:root {
    --pc-radius: 10px;
    --pc-gap: 12px;
}

/* Arabic renders with a Naskh capable family; the stack matches AppTheme.FontStack. */
html,
body {
    font-family: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ shell */

.pc-appbar-title {
    margin-inline-start: 8px;
    white-space: nowrap;
}

.pc-appbar-search {
    flex: 0 1 420px;
    margin-inline-start: 24px;
    max-width: 420px;
}

@media (max-width: 900px) {
    .pc-appbar-search {
        display: none;
    }

    .pc-appbar-title {
        font-size: 1rem;
    }
}

.pc-main {
    min-height: 100vh;
}

.pc-nav {
    padding-block-start: 8px;
}

.pc-grow {
    flex-grow: 1;
    min-width: 0;
}

/* ------------------------------------------------------- anonymous shell */

.pc-anonymous-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 16px;
}

.pc-anonymous-toolbar {
    align-self: flex-end;
    padding-inline-end: 8px;
}

.pc-login-card {
    inline-size: 100%;
    max-inline-size: 460px;
    margin-inline: auto;
    border-radius: var(--pc-radius);
}

/* ------------------------------------------------------------- utilities */

.pc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 32px;
}

.pc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 40px;
    padding-inline: 16px;
    opacity: 0.85;
}

.pc-not-found {
    display: flex;
    justify-content: center;
    padding-block-start: 48px;
}

.pc-scroll-area {
    max-block-size: 62vh;
    overflow-y: auto;
    padding-inline-end: 4px;
}

.pc-preserve-lines {
    white-space: pre-wrap;
}

/* ----------------------------------------------------------- data blocks */

.pc-stat-tile {
    padding: 16px;
    border-radius: var(--pc-radius);
    block-size: 100%;
}

.pc-stat-link {
    display: inline-block;
    margin-block-start: 8px;
}

.pc-contact-card {
    border-radius: var(--pc-radius);
}

.pc-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pc-detail-row {
    padding-block: 2px;
}

.pc-detail-label {
    min-inline-size: 140px;
    text-align: start;
}

.pc-color-dot {
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-inline-end: 4px;
    flex: none;
}

.pc-timeline {
    margin-block-start: 8px;
}

.pc-language-option {
    inline-size: 100%;
    text-align: start;
}

/* The timeline connector is drawn on the start side so it flips with the document direction. */
.pc-timeline .mud-timeline-item {
    padding-inline-start: 0;
}

/* ---------------------------------------------------------------------------
 * Bidirectional isolation for values that are always left to right.
 *
 * A phone number such as "00 90 539 416 0516" is several digit runs joined by
 * spaces. Spaces are bidi-neutral and digits are weak, so inside an RTL
 * paragraph the runs get ordered right to left and the number renders as
 * "0516 416 539 90 00". The stored value is fine - only the display is wrong.
 *
 * The markup uses <bdi dir="ltr"> (see LtrValue.razor), which already isolates.
 * These rules cover the same need for form fields, where the input element is
 * what has to be pinned, and they keep the value aligned with the surrounding
 * text flow rather than jumping to the other edge of the field.
 * --------------------------------------------------------------------------- */

.pc-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Inputs holding phone numbers, e-mail addresses or URLs: type and read them LTR,
   while the field itself stays where the page direction puts it. */
.pc-ltr-input input,
.pc-ltr-input textarea {
    direction: ltr;
    text-align: start;
}

/* Long unbroken tokens (URLs, ids) in conflict cards: wrap anywhere instead of
   overflowing the card. Mixed-direction ordering inside the value is left to the
   browser's first-strong detection, which is right for both Arabic text and URLs. */
.pc-wrap-any {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Wide tables scroll inside their own container instead of clipping columns at the dialog edge -
   in RTL the LAST column (the merge decision selector) was the one that vanished. */
.pc-table-scroll {
    overflow-x: auto;
}

.pc-merge-table {
    min-width: 560px;
}

/* The decision column is the whole point of the dialog; it must never collapse. */
.pc-keep-col {
    min-width: 150px;
}