@import url('material-icons/css/MaterialIcons.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    /* Background colors */
    --color-bg-white: white;
    --color-bg-white-hover: rgb(245, 245, 245);

    --color-bg-secondary: rgb(240, 240, 240);
    --color-bg-secondary-hover: rgb(228, 228, 228);

    --color-bg-dark: rgb(87, 83, 77);
    --color-bg-dark-hover: rgb(117, 113, 107);

    --color-bg-dark-secondary: rgb(46, 46, 46);
    --color-bg-dark-secondary-hover: rgb(63, 63, 63);

    --color-bg-transparent: transparent;

    /* Border colors */
    --color-border: rgb(225, 225, 225);

    /* Text colors */
    --color-text: rgb(10, 10, 10);
    --color-text-secondary: rgb(117, 113, 107);
    --color-text-muted: rgb(172, 172, 172);
    --color-text-muted2: rgba(172, 172, 172, 0.5);
    --color-text-white: rgb(240, 240, 240);

    /* Status colors */
    --color-success: #26b050;
    --color-error: #e50000;
    /* Late date in the Notion looks picked by a vote (/my-projects), softer than error red. */
    --color-late: #eb5757;
    --color-warning: #b32121;
    --color-amber: #f0ad4e;
    --color-amber-text: #c48b00;

    /* Semantic state backgrounds */
    --color-info-bg: #e7f3ff;
    --color-info-text: #0066cc;
    --color-info-border: #b3d9ff;
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-success-border: #c3e6cb;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-error-border: #f5c6cb;
    --color-warning-bg: #fff3cd;
    --color-attention-row-bg: #fffdf0; /* pastel highlight for rows awaiting action */
    --color-warning-text: #856404;
    --color-warning-border: #ffc107;
    --color-mention-bg: rgba(0, 0, 0, 0.08); /* @name in a grey bubble */
    --color-mention-bg-on-dark: rgba(255, 255, 255, 0.2); /* @name in the own dark bubble */

    /* Shadows */
    --shadow-dropdown: 0 0px 20px rgba(0, 0, 0, 0.05);

    /* Chart palette (teal/terra are the status-badge colors) */
    --color-teal: #3d6b64;
    --color-teal-pale: #d9e7e4;
    --color-terra: #b2552d;
    --chart-fill: rgba(87, 83, 77, 0.1); /* line fill = --color-bg-dark with alpha */
}

body {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 400;
    color: var(--color-text);
    margin: 0px;
}

/* text */

div,
span,
p,
a,
label {
    font-size: 14px;
}

h3 {
    font-weight: 500;
}

.text-secondary {
    color: var(--color-text-muted);
}

.text-muted {
    color: var(--color-text-muted);
}

/* StatCard row for page summary headers; the page sets the margins around it */
.stat-cards-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

textarea {
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

textarea:focus {
    border: 1px solid var(--color-text-muted);
    outline: none;
}

.input:focus {
    border: 1px solid var(--color-text-muted);
    outline: none;
}

.note {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.note-box {
    background: var(--color-bg-white-hover);
    border: 1px solid var(--color-border);
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.warning-box {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    padding: 12px 16px;
    border-radius: 4px;
    color: var(--color-warning-text);
}

.sync-success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); padding: 8px 12px; border-radius: 4px; }
.sync-error { background-color: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); padding: 8px 12px; border-radius: 4px; }


/* scroll */
*::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-bg-secondary);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-bg-secondary-hover);
}



/* Page */

.page {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}


/* Page Layout */

.sub-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: var(--color-bg-white);
}

.sub-bar a {
    text-decoration: none;
    color: inherit;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.toolbar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.9em;
}

.toolbar .button .material-icons {
    font-size: 16px;
    font-weight: 400;
}

.input.toolbar-search {
    width: 220px;
    flex-grow: 0;
    height: 28px;
    padding: 0 8px;
}

.toolbar .search-select-container input.input {
    height: 28px;
}

.toolbar .date-input .date-input-trigger {
    height: 28px;
}

.page-content {
    padding: 20px;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* States */

.loading {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
}


/* Status Badge */

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-text-white);
}

.status-badge-teal   { background: var(--color-teal); }
/* Pale teal is the intermediate "partially done" state, between stone and teal. */
.status-badge-teal-pale { background: var(--color-teal-pale); color: var(--color-teal); }
/* Partially paid phase: paid share is teal-pale, the rest is stone. --paid-share is set inline. */
.status-badge-partial {
    background: linear-gradient(90deg, var(--color-teal-pale) var(--paid-share), var(--color-bg-secondary) var(--paid-share));
    color: var(--color-teal);
}
.status-badge-stone  { background: var(--color-bg-secondary); color: var(--color-text-muted); }
.status-badge-stone-strong { background: var(--color-bg-secondary); color: var(--color-text); }
.status-badge-gold   { background: #d4a056; }
.status-badge-terra  { background: var(--color-terra); }
.status-badge-slate  { background: #5a6d7a; }
.status-badge-plum   { background: #7b5e7b; }
.status-badge-umber  { background: #7a5c42; }
.status-badge-indigo { background: #4e5d8c; }
.status-badge-indigo-pale { background: #d6e2f5; color: #4e5d8c; }
.status-badge-graphite { background: #4a4a4a; }
.status-badge-rose  { background: #b25670; }
/* A colour from /statuses (--status-color set inline), washed out as task statuses of ProjectTaskList.
   /statuses holds light colours: light text on the full colour would not read.
   The second color wins where relative colour syntax works; the first is the fallback. */
.status-badge-tint {
    padding: 0 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--status-color) 18%, white);
    color: color-mix(in oklab, var(--status-color) 65%, black);
    color: oklch(from var(--status-color) 0.52 calc(c * 1.6) h);
    font-size: 13px;
    line-height: 22px;
}

/* Payment balance */
.balance-due  { color: var(--color-error); }
.balance-zero { color: var(--color-text-muted2); }

/* Green Google Sheets source chip, set apart from the warm 1C chips.
   Kept global so every GSheets chip (invoices, contracts) shares one color. */
.gsheets-source-chip {
    background-color: #e6f4ea;
    color: #137333;
    cursor: pointer;
    white-space: nowrap;
}

.gsheets-source-chip:hover {
    background-color: #ceead6;
}

@media (max-width: 768px) {
    .sub-bar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .toolbar {
        flex-wrap: wrap;
    }

    .input.toolbar-search {
        width: auto;
        min-width: 100px;
        flex: 1;
    }

    .page-content {
        padding: 10px;
    }

    /* The class is doubled in the selector on purpose: .button later in the file
       sets display: inline-flex at the same specificity and would otherwise win. */
    .hide-mobile.hide-mobile {
        display: none;
    }
}


/* Button */

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
    font-size: 14px;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.button:hover {
    background-color: var(--color-bg-secondary);
}

.button:disabled {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: default;
}

.button:disabled:hover {
    background: none;
    color: var(--color-text-muted);
}

.button-black {
    border: none;
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
}

.button-black:hover {
    background-color: var(--color-bg-dark-secondary);
}

.button-white {
    border: none;
}

.danger-button:hover {
    background-color: #dc3545;
    color: white;
}

.button-small {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 22px;
}

.button-small.active {
    background: var(--color-bg-dark);
    color: var(--color-text-white);
    border-color: var(--color-bg-dark);
}

.button-small2 {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 22px;
}

/* Extra small button (24x24) - for table rows, compact UI */
.button-xs {
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-white);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-xs:hover:not(:disabled) {
    background: var(--color-bg-secondary);
}

/* A link styled as .button-xs (download on a page without a circuit) keeps the button look */
a.button-xs {
    color: inherit;
    text-decoration: none;
}

.button-xs:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Borderless variant of .button-xs — same 24px, no border or background.
   For dense tables and rows. Hover still comes from .button-xs. */
.button-xs-plain {
    border-color: transparent;
    background: none;
}

/* Muted icon inside a field (chat paperclip, note cell history): a dark icon is louder than the text.
   Square like the send arrow it mirrors. */
.button-xs-muted {
    color: var(--color-text-muted);
    border-radius: 0;
}

.button-xs-muted:hover {
    color: var(--color-text);
}

/* Responsive button - icon + text on desktop, icon only on mobile.
   Height is inherited from .button (32px). */
.button-responsive {
    gap: 6px;
}

.button-responsive .material-icons {
    font-size: 20px;
}

.button-text {
    display: inline;
}

@media (max-width: 768px) {
    .button-text {
        display: none;
    }

    .button-responsive {
        padding: 0;
        width: 32px;
    }
}

/* Toolbar badge — count indicator inside toolbar buttons (e.g. active filter count) */
.toolbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--color-text);
    color: var(--color-bg-white);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
}

/* Active responsive button — indicates active filter/grouping */
.button-responsive.active {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    border-color: var(--color-bg-dark);
}

.button-responsive.active:hover {
    background-color: var(--color-bg-dark-secondary);
}

.button-responsive.active .toolbar-badge {
    background: rgba(255, 255, 255, 0.2);
}

/* On mobile, badge hidden — dark button alone signals active state */
@media (max-width: 768px) {
    .button-responsive .toolbar-badge {
        display: none;
    }
}

/* Unread badge — dark round counter of unread messages. Used by the messenger
   (ConversationList), the comments cell (EntityChatCell) and the chat feed
   (InvoiceChatFeedPanel). */
.unread-badge {
    margin-left: auto;
    flex-shrink: 0;
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    font-size: 0.75em;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-item.active .unread-badge {
    background-color: var(--color-bg-white);
    color: var(--color-bg-dark);
}

/* Unread mention — the «@» badge stands right before the counter while the message that called me is unread. */
.mention-badge + .unread-badge {
    margin-left: 0;
}

/* Suggestions under or above a text field (TextSuggestInput, the @ list of ChatComposer):
   the field decides where the list opens, the look is one. */
.suggest-list {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-dropdown);
}





.tabs-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tabs */
.tabs {
    display: flex;
    width: fit-content;
    background-color: var(--color-bg-secondary);
    padding: 5px;
}

.tab-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: none;
    background-color: var(--color-bg-transparent);
    cursor: pointer;
    font-size: 0.9em;
    margin-right: 5px;
    white-space: nowrap;
}

.tab-button-small {
    height: 28px;
    font-size: 20px;
    justify-content: center;
    padding: 0 10px;
}

.tab-button:last-child {
    margin-right: 0;
}

/* Counter inside a page tab: quiet muted number, not a badge */
.tab-button .tab-count {
    margin-left: 4px;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.tab-button:hover {
    background-color: var(--color-bg-secondary);
}

.tab-button.active {
    background-color: var(--color-bg-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Segmented Control */
.segmented-control {
    display: inline-flex;
    gap: 2px;
}

.segmented-control-item {
    padding: 6px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
}

.segmented-control-item:hover {
    color: var(--color-text);
}

.segmented-control-item.active {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
}

.segmented-control.disabled {
    opacity: 0.5;
    pointer-events: none;
}



/* Input */

/* deprecated: use .form-field instead */
.input-area {
    display: flex;
}

/* Input with action button — field (input / SearchSelect / SelectInput) plus a square
   button. Field height is cut to the standard .button 32px so the pair reads as one
   compact control. */
.input-with-action {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.input-with-action > :first-child {
    flex: 1;
    min-width: 0;
}

.input-with-action .input {
    height: 32px;
    padding: 0 10px;
}

.input-with-action > .button {
    width: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
}

.input-with-action > .button .material-icons {
    font-size: 20px;
}

/* Joined variant — field and button as one piece: no gap, shared border */
.input-with-action.joined {
    gap: 0;
}

.input-with-action.joined > .button {
    border-left: none;
}

/* Labeled variant — wider button carrying text, e.g. «+ Создать» */
.input-with-action.labeled > .button {
    width: auto;
    padding: 0 12px;
    white-space: nowrap;
}

/* Inset variant — button inside the field on the right, like the chat input + send */
.input-with-action.inset {
    position: relative;
    gap: 0;
}

.input-with-action.inset .input {
    padding-right: 40px;
}

.input-with-action.inset > .button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
}

.input-with-action.inset > .button .material-icons,
.input-with-action.inset > .button.material-icons {
    font-size: 16px;
}

.input {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid var(--color-border);
}

/* Placeholder is paler than plain text so it is never read as a value. */
.input::placeholder {
    color: var(--color-text-muted2);
}

/* Flush field: no border or background at rest, border on hover and focus.
   For table cells and props-tables — NumberInput (BorderOnHover="true") and plain
   .input with this class. DateInput/MonthYearInput have their own analog on the
   div trigger in scoped CSS. */
.input.border-on-hover {
    border-color: transparent;
    background: transparent;
}

.input.border-on-hover:hover,
.input.border-on-hover:focus {
    border-color: var(--color-border);
    background: var(--color-bg-white);
}

.input:disabled {
    background: repeating-linear-gradient(
        -45deg,
        transparent 0 6px,
        rgba(117, 113, 107, 0.1) 6px 7px
    );
    border-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

/* input date / month */

input[type="date"].input,
input[type="month"].input {
    font-family: inherit;
}

input[type="date"].input::-webkit-datetime-edit,
input[type="date"].input::-webkit-datetime-edit-fields-wrapper,
input[type="date"].input::-webkit-datetime-edit-text,
input[type="date"].input::-webkit-datetime-edit-month-field,
input[type="date"].input::-webkit-datetime-edit-day-field,
input[type="date"].input::-webkit-datetime-edit-year-field,
input[type="month"].input::-webkit-datetime-edit,
input[type="month"].input::-webkit-datetime-edit-fields-wrapper,
input[type="month"].input::-webkit-datetime-edit-text,
input[type="month"].input::-webkit-datetime-edit-month-field,
input[type="month"].input::-webkit-datetime-edit-year-field {
    font-family: inherit;
}


/* input number */
input[type="number"].input {
    font-family: inherit;
}

/* textarea height follows its rows, not the control height scale */
textarea.input {
    font-family: inherit;
    height: auto;
    min-height: 32px;
    padding: 6px 10px;
}



/* select */

.setting-section .input {
    width: calc(100% - 22px);
    margin-right: 0;
}

.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-container::after {
    content: '▼';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-muted);
    font-size: 0.7em;
    font-family: inherit;
}

.select {
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    color: inherit;
    appearance: none;
}

.select:hover {
    background-color: var(--color-bg-white-hover);
}

.select:focus {
    outline: none;
}


/* Checkbox */
input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-white);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

input[type="checkbox"]:checked {
    background: var(--color-bg-dark-hover);
    border-color: var(--color-bg-dark-hover);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 2px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:hover {
    border-color: var(--color-text-muted);
}


/* ModalView */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
}

.form-container p {
    margin-top: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Two-column field row in dialog forms */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 360px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

.input-label {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Hint under a form field; the -error variant is for errors */
.form-hint {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.form-hint-error {
    color: var(--color-error);
}

/* Requisite rows inside a note-box (supplier invoice parsed from PDF).
   Shared by SupplierInvoiceFromPdfDialog and SupplierInvoiceCreateDialog. */
.pdf-requisites-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.pdf-requisites-row {
    display: flex;
    gap: 8px;
}

.pdf-requisites-label {
    color: var(--color-text-muted);
    min-width: 60px;
}

.pdf-requisites-value {
    word-break: break-word;
}

.input {
    margin-right: 0px;
}

/* Field with a "where it came from" hint inside a disabled input.
   The hint is not overlapped by the value only because .input keeps padding-right. */
.field-with-disabled-hint {
    position: relative;
}

.field-with-disabled-hint > .input {
    padding-right: 52px;
}

.field-disabled-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--color-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

.button-group {
    display: flex;
    gap: 8px;
}



/* Dashboard grid — cards keep a fixed ~400px width and wrap onto the next line
   instead of stretching. Direct children are the cards; each card paints its own
   frame and padding. */

.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.dashboard-grid > * {
    flex: 0 1 400px;
}

/* Dashboard card frame, shared by every widget of the grid */
.dashboard-card {
    border: 1px solid var(--color-border);
    padding: 16px;
    background: var(--color-bg-white);
}

/* Section heading (h3) of a dashboard */
.section-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
    color: var(--color-text);
}

/* Month switch of a dashboard widget: ‹ label ›, arrows are button-xs button-xs-plain */
.month-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.month-nav-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    min-width: 120px;
    text-align: center;
}


/* List */

.list {
    display: flex;
    flex-direction: column;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
}

.list-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.list-item-name {
    font-size: 1em;
    margin-bottom: 2px;
}

.list-item-detail {
    font-size: 0.85em;
    color: var(--color-text-secondary);
}

.list-item:hover {
    background-color: var(--color-bg-white-hover);
}

.list-item.active {
    background-color: var(--color-bg-dark);
}

.list-item.active .list-item-name {
    color: var(--color-text-white);
}

.list-item.active .list-item-detail {
    color: var(--color-text-muted);
}

.list-item.active .avatar {
    background-color: var(--color-bg-dark-secondary);
}

/* List row drag-and-drop: /statuses, /drag-drop-demo */
.list-item.dragging {
    opacity: 0.5;
}

.list-item.drop-target {
    background: var(--color-bg-white-hover);
    box-shadow: inset 0 2px 0 var(--color-text-muted);
}

.drag-handle {
    color: var(--color-text-muted);
    font-size: 20px;
    cursor: grab;
}

.list-item.active:hover {
    background-color: var(--color-bg-dark-hover);
}



/* Avatar */

.avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    margin-right: 7px;
}


 .avatar-average {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted2);
    margin-right: 7px;
}

img.avatar-average {
    object-fit: cover;
    display: block;
}

.avatar-element {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 5px;
    background-color: var(--color-bg-secondary);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted2);
    margin-right: 7px;
}

.avatar-upload-container {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-upload {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-upload-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--color-text-muted2);
}

.avatar-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: white;
    font-size: 24px;
}

.avatar-upload-container:hover .avatar-upload-overlay {
    opacity: 1;
}


/* Chat */

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}

.message-bubble {
    padding: 8px 12px;
    margin-bottom: 6px;
    max-width: 80%;
    min-width: 50px;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
}

/* Outgoing — from the user */
.outgoing {
    background-color: var(--color-bg-dark);
    align-self: flex-end;
    margin-left: auto;
    color: var(--color-text-white);
}

/* Incoming — from the bot */
.incoming {
    background-color: var(--color-bg-secondary);
    align-self: flex-start;
    margin-right: auto;
    text-align: left;
}



.message-bubble .message-from {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.message-bubble .message-text {
    font-size: 1em;
    max-width: 470px;
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

.message-bubble .message-time {
    font-size: 0.8em;
    color: var(--color-text-muted);
    align-self: flex-end;
}

/* Deleted message text. Global because both the bubble (MessageBubble) and the
   reply quote of a deleted message (Quote slot in MessageArea) use it. */
.deleted-text {
    font-style: italic;
    color: var(--color-text-muted);
}

/* Message attachment images are drawn by ChatAttachments (Components/Shared/Chat). */

.json-editor {
    margin: 0;
    padding: 10px;
    min-height: 150px;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre;
    overflow-wrap: break-word;
    word-break: break-all;
}


/* Dropdown */

.dropdown {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-dropdown);
    min-width: 140px;
    z-index: 1000;
    display: none;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

    .dropdown-item .material-icons {
        font-size: 18px;
        margin-right: 8px;
    }

.dropdown-item:hover {
    background-color: var(--color-bg-secondary);
}

/* Selected menu item (filter, grouping). It is is-selected and not active on purpose:
   active is taken by the toolbar trigger button state. See DESIGN.md. */
.dropdown-item.is-selected {
    font-weight: 600;
}

.dropdown-divider {
    height: 1px;
    margin: 4px 0;
    border: none;
    background-color: var(--color-border);
}

.dropdown-item.danger-button:hover {
    background-color: #dc3545;
    color: white;
}

/* Checkbox item of a dropdown menu (filters, column toggles) */
.dropdown-item.column-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.dropdown-item.column-toggle input[type="checkbox"],
.dropdown-item.column-toggle input[type="radio"] {
    width: auto;
    cursor: pointer;
}

/* Filter item with a bar indicator instead of a checkmark.
   The selected value is a dark bar, no rounding. */
.dropdown-item.filter-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.dropdown-item.filter-toggle input[type="checkbox"],
.dropdown-item.filter-toggle input[type="radio"] {
    appearance: none;
    width: 6px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.dropdown-item.filter-toggle input:checked {
    background: var(--color-bg-dark);
}

/* Many values (checkbox) — unselected bars stay light grey so the whole set is visible.
   One of N (radio) — no grey bars, the dark one moves to the selected item. */
.dropdown-item.filter-toggle input[type="checkbox"]:not(:checked) {
    background: var(--color-border);
}

.dropdown-item.filter-toggle:hover input[type="checkbox"]:not(:checked) {
    background: var(--color-text-muted);
}

/* No checkmark inside the bar — the state is read from its color */
.dropdown-item.filter-toggle input[type="checkbox"]:checked::after {
    content: none;
}

/* "Checkbox + label" row outside dropdown menus (forms, popovers) —
   one shared class instead of local copies in .razor.css */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    cursor: pointer;
}

/* Section title inside a filter dropdown */
.dropdown-section-title {
    padding: 8px 12px 4px;
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grouping level tabs inside the «Группировка» dropdown (/client-invoices, /bonus-export-check) */
.group-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 12px 8px;
}

.group-tab {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, color 0.15s;
}

.group-tab:hover {
    color: var(--color-text);
}

.group-tab.active {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
}

.group-tab-remove {
    font-size: 15px;
    opacity: 0.6;
    margin-right: -4px;
}

.group-tab-remove:hover {
    opacity: 1;
}

.group-tab-add {
    padding: 0 8px;
}

.group-tab-add .material-icons {
    font-size: 18px;
}

.group-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.group-field-check {
    font-size: 16px;
    color: var(--color-text-muted);
}

.dropdown-section-divider {
    border-top: 1px solid var(--color-border);
    margin: 4px 0;
}

/* Search field on top of a picker list inside DropdownMenu */
.dropdown-search {
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border);
}

/* «Сбросить всё» item at the bottom of a filter menu */
.dropdown-reset {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

/* Desktop-table / mobile-list view pair (GroupTable + GroupedList).
   See DESIGN.md, section Mobile. */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }
}

/* Compact row density for directory tables — wrapper around GroupTable.
   The class is doubled on purpose: the scoped bundle (web.styles.css) is linked after
   app.css, so GroupTable's .group-table-cell[b-...] { padding: 6px 8px } would win at
   equal specificity. Doubling gives (0,3,0) and brings the compact padding back. */
.table-compact .group-table-cell.group-table-cell {
    padding: 2px 8px;
}

/* An editable field in a compact row: the standard 32px input would grow the row. */
.table-compact .edit-cell .input {
    height: 24px;
}

/* The ⋮ button (.button-xs) in a compact row: its default 24px grows the row,
   so it is squeezed down to the text line height. */
.table-compact .group-table-cell .button-xs {
    height: 20px;
    width: 24px;
    padding: 0;
    border: none;
    font-size: 18px;
}

/* Opacity on the cells, not the row: a translucent row lets the next row cover its open menu
   and take its clicks. The cell with an open menu or popover stays opaque. */
.group-table-row.row-dimmed > .group-table-cell:not(:has(.dropdown-container.open, .hover-container:hover)) {
    opacity: 0.55;
}

/* Row actions cell (⋮ / buttons), pinned right. Shared by every directory and table;
   page .razor.css files override only the differences (for example
   justify-content: center in line-item editors). */
.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}



/* Misc */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-warning);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-text-white);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border);
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}


/* Clickable Cards */

.card-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-link {
    display: block;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;

    max-width: 320px;
}

.card-link:hover {
    background: var(--color-bg-white-hover);
}

.card-link-title {
    font-size: 1.0em;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--color-text);
}

.card-link-description {
    color: var(--color-text-muted);
    font-weight: 300;
}

.card-link-placeholder {
    max-width: 320px;
    padding: 15px;
    background: var(--color-bg-white-hover);
    font-style: italic;
    text-align: center;
}


/* Hover popover box — padded column inside HoverDropdown <Content>; every hover
   popover (chip hovers, PhasePaymentBadge, BonusDiffCell) wraps its rows in it. */

.hover-popover-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
}


/* Chip hover popover props (ChipHover components) — vertical "label above value"
   pair for the narrow chip hover popovers. Not the card props-table, where the label
   sits left of the value. */

.chip-hover-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chip-hover-label {
    font-size: 0.8em;
    color: var(--color-text-secondary);
}

.chip-hover-value {
    font-size: 1em;
}

/* Several chips in one directory cell wrap onto the next line instead of being clipped */
.chip-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    white-space: normal;
}


/* Card sections template (pattern D from /ui-template-card-panel) */

.tpl-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

/* Inside .edit-card the parent gap (14px) plus the header's own margin makes a double
   indent, so the margin is dropped. This rule used to be copied into the scoped css of
   every card. */
.edit-card .tpl-section-header {
    margin: 0;
}

.tpl-section-header::before,
.tpl-section-header::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--color-border);
}

.tpl-section-title {
    font-size: 0.8em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tpl-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpl-tile {
    position: relative;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
}

/* Room on the right for the cross, so text does not slide under the absolute button. */
.tpl-tile.has-delete {
    padding-right: 30px;
}

.tpl-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tpl-tile-name {
    font-weight: 500;
    font-size: 0.9em;
}

.tpl-tile-detail {
    font-size: 0.8em;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Tile pair: two linked ItemTiles merge into one — outer border shared, dashed divider
   inside. Each half stays separately clickable (own OnClick and cross), and the hover
   background lights up only that half. */
.tpl-tile-pair {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.tpl-tile-pair > .tpl-tile {
    border: none;
}

.tpl-tile-pair > .tpl-tile + .tpl-tile {
    border-top: 1px dashed var(--color-border);
}

.tpl-tile-add {
    padding: 8px;
    border: 1px dashed var(--color-border);
    cursor: pointer;
    background: none;
    font: inherit;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.tpl-tile-add:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.tpl-tile-add .material-icons {
    font-size: 16px;
}

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

.tpl-tag-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    font-size: 0.8em;
    white-space: nowrap;
}

.tpl-tag-chip-brand {
    background: #f0f4ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

/* Card content modifiers, shared between cards inside CardPanel (ProcurementExpenseCard,
   ClientInvoiceCard, ...). Used for finance grids, locked values, link tiles, history
   timeline. Card-specific styles (status flow, reject notice, ...) stay in *.razor.css. */

.card-bold {
    font-weight: 600;
}

.card-payment-amount {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.card-income {
    color: var(--color-success);
}

.card-expense {
    color: var(--color-error);
}

/* Money color by sign: green plus / red minus. Single source for every finance page —
   the class itself comes from the Web.Components.Shared.AmountCssClass helper. */
.amount-income {
    color: var(--color-success);
}

.amount-expense {
    color: var(--color-error);
}

.card-nowrap {
    white-space: nowrap;
}

/* Reference card (DemoEditCard): quiet fields look like plain text at rest, the border
   shows on hover and focus. Layout is label left, field right. Used by the client
   invoice and supplier invoice cards. */
.edit-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.edit-card-rows {
    display: flex;
    flex-direction: column;
}

/* Divider between card blocks. It sits inside the parent gap (14px above and below). */
.edit-card-divider {
    border-top: 1px solid var(--color-border);
}

/* Property row: label left, value right */
.edit-card-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    min-height: 36px;
    min-width: 0;
}

/* List row: label pinned to the top, value is a vertical column */
.edit-card-row-list {
    align-items: start;
    min-height: 0;
    padding: 8px 0;
}

.edit-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* The add field is invisible at rest but still takes space, so the layout below does
   not jump. It shows on row hover or focus inside. */
.edit-card-add {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.edit-card-row-list:hover .edit-card-add,
.edit-card-row-list:focus-within .edit-card-add {
    visibility: visible;
    opacity: 1;
}

.edit-card-label {
    font-size: 0.8em;
    color: var(--color-text-secondary);
}

/* Read-only value (computed sums) is aligned with the input text. */
.edit-card-static {
    padding: 0 10px;
    font-size: 14px;
    min-width: 0;
}

/* At rest the fields carry no border, so the value reads as plain text. */
.edit-card-row .input,
.edit-card-row .select-input-trigger {
    border-color: transparent;
    background: transparent;
}

/* Row hover is the hint that the field is editable. */
.edit-card-row:hover .input,
.edit-card-row:hover .select-input-trigger {
    border-color: var(--color-border);
    background: var(--color-bg-white);
}

.edit-card-row .input:focus {
    border-color: var(--color-text-muted);
}

/* The dropdown arrow stays barely visible until the row is hovered. */
.edit-card-row .select-input-arrow {
    color: var(--color-text-muted2);
}

.edit-card-row:hover .select-input-arrow {
    color: var(--color-text-muted);
}

/* Props table — framed requisites with live editors. A "label | value" table in a frame
   (like the invoice lines in ExpensePackageViewDialog), but the values are live editors
   (SearchSelect, DateInput, input, SelectInput) sitting flush with the cell — the shared
   contract with .edit-cell below. Rows are the same .edit-card-row.
   No overflow: hidden here — it would clip the editors' dropdowns. */
.props-table {
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

/* Row: label | value with dividers between rows. align-items: stretch keeps the cells
   full row height, so the label's vertical border runs unbroken. */
.props-table .edit-card-row {
    grid-template-columns: 130px 1fr;
    align-items: stretch;
    min-height: 36px;
    border-top: 1px solid var(--color-border);
}

.props-table .edit-card-row:first-child {
    border-top: none;
}

/* Label on the left with a vertical border before the value; text centered vertically. */
.props-table .edit-card-label {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-right: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.85em;
}

/* Text values (edit-card-static) are centered in the cell height, since the row is
   stretched by align-items: stretch. */
.props-table .edit-card-static {
    display: flex;
    align-items: center;
}

/* Shared "flush editor" contract for .props-table and .edit-cell. In .props-table the
   cell border is drawn by the props-table itself (cards); in .edit-cell it is drawn by
   the table grid (GroupTable / SimpleTable), where every editable cell is wrapped in
   <div class="edit-cell"> (GroupTable also needs @onclick:stopPropagation so a click on
   the field does not bubble up as a row click). Editors carry no border or background at
   rest and on hover — cell borders are already visible, and a border per field turns the
   table into a sieve, so never set BorderOnHover inside these wrappers. The border comes
   back only while editing: focus for input, an open list for select and date.
   !important is required to beat both the .edit-card-row:hover .input rule above in this
   file (specificity 0,3,0 against our 0,2,0) and BorderOnHover inside DateInput and
   MonthYearInput. IMPORTANT — the editor list is a hidden contract: a new editor type
   inside the wrapper will show its own border until its trigger class is added here.
   Demos: /ui-template-editable-table (edit-cell), /ui-inputs (props-table). */
.props-table .input,
.props-table .select-input-trigger,
.props-table .date-input-trigger,
.props-table .month-input-trigger,
.edit-cell .input,
.edit-cell .select-input-trigger,
.edit-cell .date-input-trigger,
.edit-cell .month-input-trigger {
    border-color: transparent !important;
    background: transparent !important;
}

/* Late due date. In an editable cell only the value turns red: the open calendar sits inside .edit-cell. */
span.date-late,
.edit-cell.date-late .date-input-value {
    color: var(--color-late);
}

/* A number in an editable table cell is right-aligned, like the column it sits in. */
.edit-cell.num-cell .input {
    text-align: right;
}

/* Exception: a focused editor gets its border back — the "editing now" affordance, like
   an active Excel cell. For input that is :focus; for a SelectInput trigger it is the
   open list (.open; the trigger is a div, the container holds focus). For DateInput and
   MonthYearInput the open state is read from .dropdown-container.open and NOT via :has()
   on the popover content: with Portal="true" (required here — cards and scrollable
   tables) the popover moves into <body>, :has() never matches and the border never
   returned. */
.props-table .input:focus,
.props-table .select-input-trigger.open,
.props-table .dropdown-container.open .date-input-trigger,
.props-table .dropdown-container.open .month-input-trigger,
.edit-cell .input:focus,
.edit-cell .select-input-trigger.open,
.edit-cell .dropdown-container.open .date-input-trigger,
.edit-cell .dropdown-container.open .month-input-trigger {
    border-color: var(--color-border) !important;
    background: var(--color-bg-white) !important;
}

/* A custom picker in a cell is a DropdownMenu with Fill="true". Its flat button stretches
   over the whole menu trigger and carries the cell inset itself, so the inset opens the
   menu too. Outside .edit-cell the inset is 0 and the same picker sits flush. */
.edit-cell {
    --cell-inset: 8px;
}

.cell-picker-trigger {
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 var(--cell-inset, 0);
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cell-picker-trigger:disabled {
    cursor: default;
}

/* Split cell (pattern /ui-template-split-row): a vertical stack of parts, one per phase.
   Parts line up across columns only because .split-part keeps a fixed height: every split
   column of a row holds the same number of parts, the stacks end up the same height, the
   row grid centers them and the part borders meet across all columns. Kept global rather
   than in scoped CSS because the parts are drawn by different components of one row
   (PhaseCurrentPicker, page cells) and all of them must share one part height. */
.split-cell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* 24px + the dashed divider: a part of a two-phase stack takes the same 28px a compact
   row takes on its own, so the phases read as ordinary rows. */
.split-part {
    height: 24px;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The divider between parts is dashed so it differs from the row borders */
.split-part + .split-part {
    border-top: 1px dashed var(--color-border);
}

/* A single part is the common case: 24px would lift a compact row to 30px (24 + cell 2 + row 4),
   so alone it shrinks to the text line. Stacks of two or more keep 24px per part. */
.split-part:only-child {
    height: 22px;
}

.split-phase-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* List of items inside a props-table cell (an M:N link, e.g. the 1C orders of a client
   invoice). Thin rows with dividers read as a continuation of the table; the whole row is
   clickable (opens the card) and the delete cross appears on hover. A permanent add field
   sits at the bottom (SearchSelect ClearOnSelect, wrapped in .input-with-action when
   needed). Demo: /ui-inputs, section «Список элементов в строке props-table». */
.multi-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* An item row keeps the full height of a normal props-table row (36px). */
.multi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9em;
    cursor: pointer;
}

.multi-row:hover {
    background: var(--color-bg-white-hover);
}

/* Last item with no add field below (read-only, or a filled 1:1 link): its bottom border
   would double up with the border of the next props-table row, so it is dropped. */
.multi-row:last-child {
    border-bottom: none;
}

/* The name wins: the grey detail on the right (flex-basis: 0) is truncated first, and
   only a name wider than the cell gets an ellipsis of its own. */
.multi-row-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multi-row-detail {
    flex: 1;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* margin-left: auto keeps the cross at the right edge even in rows without the grey
   detail — otherwise only flex: 1 on .multi-row-detail pushes it there. */
.multi-row-remove {
    border: none;
    background: transparent;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
}

.multi-row:hover .multi-row-remove {
    opacity: 1;
}

.multi-row-remove:hover {
    color: var(--color-text);
}

/* The add row is secondary: shorter than an item row, smaller font and button. */
.multi-rows .input,
.multi-rows .input-with-action .input {
    height: 26px;
    font-size: 0.85em;
}

.multi-rows .input-with-action > .button {
    width: 26px;
    height: 26px;
}

.multi-rows .input-with-action > .button .material-icons {
    font-size: 16px;
}

/* Single 1:1 link (modifier .single-link): while there is no item, the SearchSelect is
   not a secondary add field but the cell's main editor, so it gets the normal sizes of a
   bare props-table editor. The cell markup is drawn by SingleLinkRow. Demo: /ui-inputs,
   section «Привязка сущности с переходом (SingleLinkRow)». */
.multi-rows.single-link .input {
    height: 32px;
    font-size: inherit;
}

/* In .single-link the "create new" button next to the field is a main cell element too,
   so it gets the normal .input-with-action sizes (lists shrink it to 26px). */
.multi-rows.single-link .input-with-action > .button {
    width: 32px;
    height: 32px;
}

.multi-rows.single-link .input-with-action > .button .material-icons {
    font-size: 20px;
}

/* File list in a props-table row: the whole file row is a download link (like ItemTile
   Href) and the add field is a compact FileUpload dropzone instead of a SearchSelect.
   Demo: /ui-inputs, section «Файлы в строке props-table». */
a.multi-row {
    color: inherit;
    text-decoration: none;
}

/* The "uploading" row is the same list row, but muted and not clickable: an upload takes
   seconds and the list has to show it. */
.multi-row.uploading {
    cursor: default;
    color: var(--color-text-muted);
}

.multi-row.uploading:hover {
    background: transparent;
}

.multi-row-icon {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--color-text-muted);
}

/* The dropzone is a secondary add field, like the SearchSelect in a list: thinner border,
   smaller text. The selector is longer than FileUpload's scoped style on purpose —
   web.styles.css is linked after app.css and would otherwise win. */
.props-table .multi-rows .file-upload-area.compact {
    border-width: 1px;
    padding: 3px 8px;
}

.props-table .multi-rows .file-upload-area.compact .file-upload-text {
    font-size: 0.85em;
}

/* Two-column finance grid */
.card-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
}

.card-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.card-col:nth-child(odd) {
    padding-right: 16px;
    border-right: 1px dashed var(--color-border);
}

.card-col-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    padding: 0 10px;
}

.card-col-value {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 14px;
    word-break: break-word;
    box-sizing: border-box;
}

.card-col-value.card-col-readonly {
    font-weight: 600;
}

.card-col.card-col-full {
    grid-column: 1 / -1;
    padding-right: 0;
    border-right: none;
}

/* Locked 1C-derived value: diagonal hatch + right-side hint "из 1С" */
.card-locked-value {
    position: relative;
    min-height: 32px;
    padding: 0 56px 0 10px;
    background: repeating-linear-gradient(
        -45deg,
        transparent 0 6px,
        rgba(117, 113, 107, 0.05) 6px 7px
    );
    border: 1px solid transparent;
    box-sizing: border-box;
    font-weight: 600;
    display: flex;
    align-items: center;
    cursor: default;
    word-break: break-word;
}

.card-lock-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    font-weight: 400;
    color: var(--color-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

/* Clickable surface (tile, data row) */
.card-clickable {
    cursor: pointer;
}

/* Link tile (ItemTile with Href): the root is an <a>, but it must look like an ordinary
   tile and not a blue link — inherit the text color, no underline. */
a.tpl-tile,
a.tpl-tile:hover {
    color: inherit;
    text-decoration: none;
}

.card-clickable:hover {
    background: var(--color-bg-secondary);
}

/* Archived state banner (top of card) */
.card-archived-banner {
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-size: 0.85em;
    text-align: center;
}

/* Link tiles: full-width tile with name (ellipsis) + delete crossbutton */
.card-link-tile .tpl-tile-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-link-tile .tpl-tile-detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-link-delete {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 120ms;
}

.card-link-tile:hover .card-link-delete {
    opacity: 1;
}

.card-link-delete:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.card-link-delete:focus-visible {
    outline: none;
    opacity: 1;
    border-color: var(--color-text-muted);
}

.card-link-delete .material-icons {
    font-size: 12px;
}

/* Delete cross of an ItemTile — a flat borderless 24px square button
   (button-xs button-xs-plain) that appears on tile hover. Tiles only: every other cross
   in the app stays round (.card-link-delete). */
.tpl-tile-delete {
    /* Absolute so that centering it at the right edge does not affect the row height. */
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    opacity: 0.5;
    transition: opacity 120ms;
}

.card-link-tile:hover .tpl-tile-delete {
    opacity: 1;
}

.tpl-tile-delete:hover {
    color: var(--color-text);
}

.tpl-tile-delete:focus-visible {
    outline: none;
    opacity: 1;
}

/* File tile: full-height icon on the left, two lines (name + size) and a cross on the
   right. One look shared by FileUpload and the document package block. */
.file-tile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-tile .file-tile-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--color-text-muted);
}

.file-tile .file-tile-info {
    flex: 1;
    min-width: 0;
}

.file-tile .tpl-tile-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The name of an uploaded file is a download link, but it keeps the muted tile look and
   underlines only on hover. */
.file-tile a.tpl-tile-name {
    color: inherit;
    text-decoration: none;
}

.file-tile a.tpl-tile-name:hover {
    text-decoration: underline;
}

/* Inline form to add link (replaces tpl-tile-add when expanded) */
.card-add-link-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.card-add-link-error {
    font-size: 0.85em;
    color: var(--color-error);
}

.card-add-link-actions {
    display: flex;
    justify-content: flex-end;
}

/* History timeline (changelog + comments as messenger bubbles) */
/* Toggle strip above the feed: muted icon buttons, the active one dark */
.card-history-filter {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 2px 0;
}

.card-history-filter .button-xs {
    color: var(--color-text-muted);
}

.card-history-filter .button-xs.active {
    color: var(--color-text);
}

.card-history-box {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 0;
    box-sizing: border-box;
}

/* .message-text sits inside the child MessageBubble; app.css is global, so no ::deep. */
.card-history-box .message-text {
    max-width: 100%;
    word-break: break-word;
}

.card-history-load-more {
    width: 100%;
    padding: 6px 0;
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-align: center;
}

.card-history-load-more:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.card-history-hint {
    padding: 8px 4px;
    font-size: 0.85em;
    color: var(--color-text-muted);
    text-align: center;
}

.card-timeline-messages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-tl-icon-flag {
    color: var(--color-error);
    font-size: inherit;
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* System message (ChangeLog event) — small grey centered text without bubble */
.card-timeline-system {
    align-self: center;
    max-width: 100%;
    margin: 0;
    padding: 2px 8px;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-muted);
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.card-timeline-system-time {
    color: inherit;
    font-size: inherit;
    white-space: nowrap;
}

/* The change author in the feed is context, not the point: muted the same way as the
   editor name in ExpenseEditAlertBanner. The feed is read for "what changed". */
.card-timeline-system-actor {
    /* The global `div, span, p, a, label { font-size: 14px }` hits this span harder than
       inheritance from the row — without inherit the author name grows to 14px. */
    font-size: inherit;
    opacity: 0.7;
}

/* The bubble's own position: relative is set by MessageBubble, not here. */

/* Mobile (CardPanel ~ 320px → content ~ 280px): collapse two-column grid */
@media (max-width: 360px) {
    .card-grid-2 {
        grid-template-columns: 1fr;
    }

    .card-col:nth-child(odd) {
        padding-right: 0;
        border-right: none;
    }
}

/* Uploaded files list — shared between FileUpload (modal) and cards */
.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--color-bg-white-hover);
    border: 1px solid var(--color-border);
}

.uploaded-file-item .file-icon {
    color: var(--color-text-muted);
    font-size: 24px;
}

.uploaded-file-item .file-info {
    flex-grow: 1;
}

.uploaded-file-item .file-name {
    font-weight: 400;
}

.uploaded-file-item .file-size {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.uploaded-file-item-existing .uploaded-file-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.uploaded-file-item-existing .uploaded-file-link:hover .file-name {
    text-decoration: underline;
}

.uploaded-file-item.uploaded-file-link {
    color: inherit;
    text-decoration: none;
}

.uploaded-file-item.uploaded-file-link:hover .file-name {
    text-decoration: underline;
}

/* Print: hide navigation, show only content */
@media print {
    .sidebar,
    .sidebar-overlay,
    .top-bar {
        display: none !important;
    }

    .top-bar-content {
        margin-top: 0 !important;
    }
}
/* Finance reconciliation detail panel with nested tables. Layout shared by
   /object-finance-monthly and /monthly-finance: two columns of section cards, each
   holding a nested GroupTable. */
.fin-detail-columns {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

@media (max-width: 1100px) {
    .fin-detail-columns {
        flex-direction: column;
    }
}

.fin-detail-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* A section is a card on the tinted panel so the nested table stays readable.
   Columns and sections size to their content, so resizing a column of a nested table
   widens only its own section and never moves the neighbour. */
.fin-detail-section {
    background: var(--color-bg-white);
    padding: 8px 12px;
    width: fit-content;
}

/* Gap between the full-width «Приход» section and the columns below it */
.fin-detail-section + .fin-detail-columns {
    margin-top: 16px;
}

/* Stack of finance sections: /object-finance and the «Расхождения» tab of /object-finance-monthly. */
.fin-sections {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 20px;
}

/* .fin-sections already spaces its children; the «section + columns» margin above would double the gap. */
.fin-sections > .fin-detail-section + .fin-detail-columns {
    margin-top: 0;
}

/* Why a client invoice is not worked: /object-finance and /monthly-finance-v2. GroupTable cells do not wrap; a reason may be long. */
.unworked-reason {
    white-space: normal;
}

.fin-detail-section-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
}

.fin-detail-section-title {
    font-weight: 600;
    font-size: 13px;
}

.fin-detail-section-meta {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Shared SVG chart primitives. The tooltip and hover zones are identical in every chart
   (AreaChart, LineChart, RadarChart, StackedBarChart, PlanFactChart) and live here
   globally because scoped CSS cannot be reused between components. Tooltip positioning
   (transform/top) and series marker colors differ, so they stay in each chart's
   .razor.css. */
.chart-tooltip {
    position: absolute;
    background: white;
    border: 1px solid #e8e8e8;
    box-shadow: var(--shadow-dropdown);
    padding: 12px 16px;
    min-width: 120px;
    z-index: 100;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.tooltip-title {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-bg-secondary);
    padding-bottom: 6px;
}

.tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.tooltip-marker {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.tooltip-label {
    font-size: 13px;
    color: #666;
    flex-grow: 1;
}

.tooltip-value {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

.chart-hover-zone {
    fill: transparent;
    cursor: pointer;
}

.chart-hover-line {
    stroke: #e0e0e0;
    stroke-width: 1;
}