*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --app-header-height: 52px;
    --bg: #f4f6f9;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --muted: #64748b;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --radius: 8px;
    --card-radius: 10px;
    --hover-bg: #f8fafc;
    --hover-bg-strong: #f1f5f9;
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

.app-header {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    height: var(--app-header-height);
    justify-content: space-between;
    padding: 0 1.5rem;
    position: relative;
    z-index: 300;
}

.tabs {
    display: flex;
    gap: 0.25rem;
}

.app-tabs-primary {
    flex: 1 1 auto;
}

.app-tabs-secondary {
    flex: 0 0 auto;
}

.mobile-menu-toggle {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.mobile-menu-toggle span {
    background: var(--text);
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 1.1rem;
}

.mobile-nav-backdrop {
    background: rgba(15, 23, 42, 0.38);
    inset: 0;
    position: fixed;
    z-index: 350;
}

.tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 1rem 1.25rem;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

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

.tab.active {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

main {
    padding: 2rem 1.5rem;
}

.panel {
    display: none;
}

.panel.active {
    display: block;
}

/* Fakturi — upload bar */
.fakturi-upload-bar {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    margin: 0 auto 1.25rem;
    max-width: 960px;
    padding: 1rem 1.15rem;
    transition: box-shadow var(--transition-fast);
}

.fakturi-upload-bar:hover {
    box-shadow: var(--shadow-md);
}

.location-group {
    flex: 0 1 200px;
    max-width: 240px;
    min-width: 160px;
}

.location-name-input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    outline: none;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.location-name-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.location-price-hint {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.location-price-hint.error {
    color: #dc2626;
    font-weight: 500;
}

.col-subscription-action {
    text-align: right;
    vertical-align: top;
    white-space: normal;
    width: 1%;
}

#subscriptions-table .subscription-proforma-btn {
    white-space: nowrap;
}

#subscriptions-table .editable-cell {
    padding-right: 1.75rem;
}

#subscriptions-table .editable-cell .cell-edit-btn {
    right: 0.2rem;
}

.subscription-action-cell {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: flex-end;
    min-width: 5.5rem;
}

.subscription-report-missing-badge {
    background: #ca8a04;
}

.subscription-name-wrap {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    max-width: 100%;
}

.subscription-name-text {
    min-width: 0;
}

.sum-wrap {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.proforma-duplicate-hint {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.subscription-missing-badge {
    align-items: center;
    background: #dc2626;
    border-radius: 50%;
    color: #fff;
    cursor: help;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    height: 1.1rem;
    justify-content: center;
    line-height: 1;
    position: relative;
    width: 1.1rem;
}

.subscription-missing-badge::after {
    background: #1e293b;
    border-radius: var(--radius);
    bottom: calc(100% + 0.4rem);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 0.8rem;
    font-weight: 500;
    left: 50%;
    opacity: 0;
    padding: 0.35rem 0.55rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 20;
}

.subscription-missing-badge:hover::after,
.subscription-missing-badge:focus-visible::after {
    opacity: 1;
}

#subscription-bank-select {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    width: 100%;
}

.upload-label {
    cursor: pointer;
    margin: 0;
    align-self: flex-end;
}

#clear-proforma-blocks,
.location-price-hint,
.upload-status {
    align-self: flex-end;
}

.upload-status {
    color: var(--muted);
    font-size: 0.85rem;
}

.upload-status.error {
    color: #dc2626;
}

.btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.55rem 1rem;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn-secondary:hover {
    background: var(--hover-bg-strong);
    border-color: #cbd5e1;
}

.proforma-block-row {
    position: relative;
    width: 100%;
}

.proforma-block-side {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translate(calc(-100% - 0.65rem), -50%);
    z-index: 1;
}

.proforma-block-side.hidden {
    display: none;
}

.proforma-block-side .match-badge {
    flex: none;
    max-width: 4.5rem;
    text-align: center;
}

.proforma-block-form-col {
    width: 100%;
}

.proforma-block-form-col .invoice-form {
    width: 100%;
}

#proforma-blocks-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 960px;
    overflow: visible;
}

/* Fakturi form — single centered card */
.invoice-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    max-width: none;
    padding: 1.5rem 1.75rem;
    width: 100%;
}

#proforma-blocks-container:empty+.hint,
#fakturi-panel .hint {
    margin-top: 1rem;
}

.invoice-toolbar,
.operation-options {
    align-items: flex-end;
    background: none;
    border: none;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.operation-options {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.selected-company-panel {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 1rem;
    text-align: left;
    width: 100%;
}

.collapsible-toggle {
    align-items: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.4rem;
    padding: 0;
    text-align: left;
    transition: color 0.12s;
    width: 100%;
}

.collapsible-toggle:hover {
    color: var(--accent);
}

.collapsible-toggle:hover .collapsible-arrow {
    color: var(--accent);
}

.collapsible-toggle-panel {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0;
}

.collapsible-toggle-panel .collapsible-meta {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 400;
    margin-left: auto;
    white-space: nowrap;
}

.collapsible-toggle-section {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.collapsible-toggle-section.is-collapsed {
    margin-bottom: 0;
}

.collapsible-arrow {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1;
    width: 0.9rem;
}

.collapsible-label {
    flex: 0 1 auto;
    min-width: 0;
}

.collapsible-meta {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
}

.collapsible-body.collapsed {
    display: none;
}

.selected-company-body:not(.collapsed) {
    padding-top: 1rem;
}

.selected-company-panel.hidden {
    display: none;
}

.selected-company-info {
    display: grid;
    gap: 0.65rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-bottom: 1.25rem;
}

.selected-company-info dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
}

.selected-company-info dd {
    font-size: 0.92rem;
    margin: 0;
    word-break: break-word;
}

.selected-company-docs h3 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.selected-company-loading,
.selected-company-error {
    color: var(--muted);
    font-size: 0.88rem;
    padding: 0.5rem 0;
}

.selected-company-error {
    color: #dc2626;
}

.op-group {
    flex: 0 1 150px;
    max-width: 170px;
    min-width: 130px;
}

.op-group-wide {
    flex: 0 1 220px;
    max-width: 280px;
    min-width: 180px;
}

.op-select,
.company-search,
.bul-search,
.company-email,
.fakturi-pipeline-select,
#table-filter,
.num-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    outline: none;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.op-select:focus,
.company-search:focus,
.bul-search:focus,
.company-email:focus,
.fakturi-pipeline-select:focus,
#table-filter:focus,
.num-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field-group label {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.search-wrap {
    flex: 0 1 220px;
    max-width: 240px;
    min-width: 180px;
    position: relative;
}

.company-field-group {
    flex: 0 1 260px;
    max-width: 300px;
    min-width: 200px;
}

.company-with-email .company-email,
.proforma-email-group .company-email {
    width: 100%;
}

.company-email.is-missing {
    border-color: #f59e0b;
}

.company-email.is-missing:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.proforma-pricing-fields {
    align-items: flex-end;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
}

.proforma-pricing-fields.is-inactive,
.proforma-pricing-multiply.is-inactive {
    opacity: 0.42;
}

.proforma-pricing-fields.is-inactive input {
    background: #f1f5f9;
    color: var(--muted);
    cursor: not-allowed;
}

.sum-group {
    flex: 0 1 auto;
    min-width: 110px;
}

.sum-wrap .num-total {
    min-width: 6.5rem;
    width: 6.5rem;
}

.sum-currency {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.company-input-row {
    align-items: stretch;
    display: flex;
    gap: 0.35rem;
    position: relative;
    width: 100%;
}

.company-input-row .company-search {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.match-badge {
    align-self: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #dc2626;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    padding: 0.28rem 0.35rem;
    white-space: nowrap;
}

.in-cash-badge {
    display: inline-block;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 4px;
    color: #c2410c;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.15;
    padding: 0.2rem 0.4rem;
    margin-left: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

.in-cash-toggle {
    border-left: 3px solid #f97316;
}

.bul-group {
    flex: 0 1 130px;
    max-width: 150px;
    min-width: 110px;
}

.company-search,
.bul-search,
.company-email,
.fakturi-pipeline-select,
#table-filter,
.num-input {
    font-size: 0.95rem;
    padding: 0.6rem 0.85rem;
}

.company-search:focus,
.bul-search:focus,
.company-email:focus,
.fakturi-pipeline-select:focus,
#table-filter:focus,
.num-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.num-input {
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
    width: 100px;
}

.num-group {
    flex: 0 0 100px;
}

.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.multiply {
    color: var(--muted);
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
    user-select: none;
}

.sum-display {
    background: #f0f4ff;
    border: 1px solid #c7d7fe;
    border-radius: var(--radius);
    color: var(--accent);
    flex: 0 0 120px;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    text-align: center;
}

.proforma-actions {
    align-items: flex-end;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    justify-content: center;
    width: 100%;
}

.proforma-email-group {
    flex: 0 1 280px;
    max-width: 340px;
    min-width: 220px;
}

.proforma-actions .btn-primary,
.proforma-actions .btn-secondary {
    flex: 0 0 auto;
    min-width: 160px;
}

.btn-primary {
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.65rem 1.25rem;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.hint {
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

.hint.error {
    color: #dc2626;
}

/* Autocomplete */
.autocomplete-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    left: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
}

.autocomplete-list li {
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.55rem 0.85rem;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
    background: #f0f4ff;
}

.autocomplete-list .sub {
    color: var(--muted);
    display: block;
    font-size: 0.78rem;
    margin-top: 2px;
}

.hidden {
    display: none !important;
}

/* List panels (companies, lands, subscriptions, templates) */
.app-list-panel {
    width: 100%;
}

.app-list-panel .table-toolbar,
.email-templates-layout .table-toolbar {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0;
    padding: 0.85rem 1rem;
}

.app-list-panel .table-wrap,
.email-templates-layout .email-templates-list {
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    margin-top: 0;
}

.app-list-panel .table-wrap {
    box-shadow: var(--shadow);
    max-height: calc(100vh - 11.5rem);
}

.email-templates-layout .email-templates-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    box-shadow: var(--shadow);
    padding: 0.85rem;
}

.app-search-input,
#table-filter,
#lands-filter,
#subscriptions-filter {
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    max-width: 320px;
    outline: none;
    padding: 0.5rem 0.75rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    width: 100%;
}

.app-search-input:focus,
#table-filter:focus,
#lands-filter:focus,
#subscriptions-filter:focus {
    background: var(--surface);
    border-color: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Companies table */
.table-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

#table-filter {
    max-width: 320px;
}

.company-count {
    color: var(--muted);
    flex: 1;
    font-size: 0.85rem;
}

.table-pagination {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.page-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.35rem 0.65rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.page-btn:hover:not(:disabled) {
    background: var(--hover-bg-strong);
    border-color: #cbd5e1;
}

.page-btn:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.5;
}

#companies-page-info,
#payments-page-info {
    color: var(--muted);
    font-size: 0.82rem;
    min-width: 7rem;
    text-align: center;
}

.columns-menu-wrap {
    position: relative;
}

.columns-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 320px;
    min-width: 160px;
    overflow-y: auto;
    padding: 0.5rem;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
}

.columns-menu-item {
    align-items: center;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font-size: 0.82rem;
    gap: 0.45rem;
    padding: 0.25rem 0.15rem;
    white-space: nowrap;
}

.columns-menu-item:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: auto;
    max-height: calc(100vh - 180px);
    transition: box-shadow var(--transition-fast);
}

.table-wrap:hover {
    box-shadow: var(--shadow-md);
}

table {
    border-collapse: collapse;
    font-size: 0.875rem;
    width: 100%;
}

thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

th {
    border-bottom: 2px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 1rem;
    vertical-align: top;
}

tbody tr {
    transition: background var(--transition-fast);
}

tbody tr:hover {
    background: var(--hover-bg);
}

tbody tr:last-child td {
    border-bottom: none;
}

th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    background: #eef2ff;
    color: var(--accent);
}

th.sort-asc::after {
    color: var(--accent);
    content: " ▲";
    font-size: 0.65rem;
}

th.sort-desc::after {
    color: var(--accent);
    content: " ▼";
    font-size: 0.65rem;
}

.col-docs {
    min-width: 4.5rem;
    text-align: center;
    white-space: nowrap;
}

.col-actions {
    display: none;
}

.doc-count-pf {
    color: #7c3aed;
    font-weight: 600;
}

.doc-count-inv {
    color: #2563eb;
    font-weight: 600;
}

.editable-cell {
    min-width: 6rem;
    padding-right: 1.25rem;
    position: relative;
}

.cell-display {
    display: block;
    word-break: break-word;
}

.cell-display.is-empty {
    color: #cbd5e1;
}

.cell-edit-btn,
.email-add-line-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0;
    padding: 0.1rem 0.25rem;
    position: absolute;
    right: 0;
    top: 0.1rem;
    transition: opacity 0.12s, color 0.12s;
}

.editable-cell:hover .cell-edit-btn,
.email-editor:focus-within+.email-add-line-btn {
    opacity: 1;
}

.cell-edit-btn:hover,
.email-add-line-btn:hover {
    color: var(--accent);
}

.cell-input {
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-size: 0.82rem;
    outline: none;
    padding: 0.2rem 0.35rem;
    width: 100%;
}

.email-editor {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.email-input {
    min-width: 9rem;
}

.emails-cell {
    min-width: 10rem;
}

td.col-readonly {
    color: var(--text);
}

.expand-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
}

.col-expand {
    padding-left: 0.75rem;
    padding-right: 0.25rem;
    width: 2rem;
}

.col-sync {
    padding: 0 0.75rem 0 0.5rem;
    text-align: center;
    vertical-align: middle;
    width: 2.5rem;
}

#companies-table .company-row .col-expand,
#companies-table .company-row .col-sync,
#companies-table .company-row .col-docs {
    vertical-align: middle;
}

.row-sync-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    height: 1.65rem;
    line-height: 1;
    padding: 0;
    vertical-align: middle;
    width: 1.65rem;
}

.row-sync-btn:hover:not(:disabled) {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: var(--text);
}

.row-sync-btn:disabled {
    cursor: wait;
    opacity: 0.6;
}

.company-row .col-expand {
    cursor: default;
}

.company-row.expanded {
    background: #eef2ff;
}

.company-detail-row td {
    background: #f8fafc;
    padding: 0;
}

.contragent-detail {
    padding: 1rem 1.25rem 1.25rem;
}

.contragent-detail-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.contragent-detail-header .sub {
    color: var(--muted);
    display: block;
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.contragent-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.35rem 1rem;
}

.doc-section {
    margin-bottom: 1rem;
}

.doc-section-body:not(.collapsed) {
    margin-top: 0.15rem;
}

.doc-summary {
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
}

.doc-show-more {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.82rem;
    margin-top: 0.35rem;
    padding: 0;
}

.doc-show-more:hover {
    text-decoration: underline;
}

.doc-table-wrap {
    max-height: 280px;
    overflow: auto;
}

.doc-row-hidden {
    display: none;
}

.doc-panels-root {
    contain: content;
}

.doc-table {
    border-collapse: collapse;
    font-size: 0.82rem;
    width: 100%;
}

.doc-table th,
.doc-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 0.65rem;
    text-align: left;
}

.doc-table th {
    background: #f1f5f9;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.doc-table tr.doc-pf-inv-matched td:not(.doc-actions) {
    color: #15803d;
    font-weight: 600;
}

.doc-table tr.doc-pf-inv-unmatched td:not(.doc-actions) {
    color: #ca8a04;
    font-weight: 600;
}

.doc-row-btn,
.doc-email-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
}

.doc-row-btn:hover {
    background: #eef2ff;
}

.doc-email-btn:hover {
    background: #eef2ff;
}

.doc-actions {
    text-align: right;
    white-space: nowrap;
}

.doc-actions > * + * {
    margin-left: 0.35rem;
}

.payments-layout,
.payments-content {
    width: 100%;
}

.payments-subtabs {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
}

.payments-subtab {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    padding: 0.4rem 0.7rem;
}

.payments-subtab:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.payments-subtab.active {
    background: #eef2ff;
    border-color: #bfdbfe;
    color: var(--accent);
    font-weight: 700;
}

.payments-table-wrap {
    max-height: calc(100vh - 11.5rem);
}

.payments-table {
    width: 100%;
}

.payments-unpaid-row td:not(.doc-actions) {
    color: #ca8a04;
    font-weight: 600;
}

.payments-paid-row td:not(.doc-actions) {
    color: #15803d;
    font-weight: 600;
}

.payments-doc-date {
    color: var(--muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 0.15rem;
}

.bulk-payments-filters {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bulk-payments-actions {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
}

.bulk-payments-list {
    margin-top: 0.75rem;
}

.bulk-payments-list .doc-table-wrap {
    max-height: 45vh;
}

.bulk-payments-summary {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.bulk-row-removed {
    opacity: 0.45;
    text-decoration: line-through;
}

.doc-actions-head {
    text-align: right;
}

.doc-actions .doc-icash-link {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
    text-decoration: none;
}

.doc-actions .doc-icash-link:hover {
    text-decoration: underline;
}

.doc-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.doc-empty,
.contragent-detail-loading,
.contragent-detail-error {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 1rem 1.25rem;
}

.contragent-detail-error {
    color: #dc2626;
}

.total-line {
    font-weight: 600;
    margin-top: 0.75rem;
}

/* Invoice modal */
.modal {
    align-items: center;
    animation: fadeIn 0.2s ease;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 400;
}

.modal-content {
    animation: modalPop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    max-height: 90vh;
    max-width: 700px;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    width: 100%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-close {
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.invoice-preview h2 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.invoice-preview .meta {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.invoice-preview .party {
    margin-bottom: 1.5rem;
}

.invoice-preview .party strong {
    display: block;
    margin-bottom: 0.35rem;
}

.invoice-table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.invoice-table th,
.invoice-table td {
    border: 1px solid var(--border);
    padding: 0.6rem 0.85rem;
    text-align: left;
}

.invoice-table .total-row td {
    font-weight: 600;
    text-align: right;
}

@media print {
    body>*:not(.modal) {
        display: none !important;
    }

    .modal {
        background: none;
        display: block !important;
        padding: 0;
        position: static;
    }

    .modal-content {
        box-shadow: none;
        max-height: none;
        max-width: none;
        padding: 0;
    }

    .modal-close,
    .modal-actions {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .invoice-toolbar {
        margin: 2rem auto;
        padding: 1rem;
    }

    .num-group {
        flex: 1 1 80px;
    }

    .num-input {
        width: 100%;
    }
}

.header-actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.sync-status {
    color: var(--muted);
    font-size: 0.8rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sync-status.error {
    color: #c0392b;
}

.user-bar {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.current-user {
    color: var(--muted);
    font-size: 0.875rem;
}

.profile-menu-wrap {
    position: relative;
}

.profile-menu-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    width: 2rem;
}

.profile-menu-btn:hover,
.profile-menu-btn[aria-expanded="true"] {
    background: transparent;
}

.profile-avatar-icon {
    align-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    width: 2rem;
}

.profile-menu-btn:hover .profile-avatar-icon,
.profile-menu-btn[aria-expanded="true"] .profile-avatar-icon {
    box-shadow: 0 0 0 2px #bfdbfe;
}

.profile-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 14rem;
    padding: 0.4rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 700;
}

.profile-menu-user {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.35rem;
    padding: 0.55rem 0.65rem 0.65rem;
}

.profile-menu .current-user {
    display: block;
    line-height: 1.35;
    white-space: normal;
}

.profile-menu .sync-status {
    display: block;
    margin: 0.35rem 0.65rem;
    max-width: none;
    white-space: normal;
}

.profile-menu-item {
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.55rem 0.65rem;
    text-align: left;
    width: 100%;
}

.profile-menu-item:hover {
    background: var(--hover-bg);
}

.btn-sm {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}

.login-page {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 400px;
    padding: 2rem;
    width: 100%;
}

.login-card h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.login-subtitle {
    color: var(--muted);
    margin-bottom: 1.5rem;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.login-form label {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.login-form input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
}

.login-form input:focus {
    border-color: var(--accent);
    outline: none;
}

.login-submit {
    margin-top: 0.25rem;
    width: 100%;
}

.login-resend {
    width: 100%;
}

.login-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin: 0;
}

.btn-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    min-width: 2.25rem;
    padding: 0.45rem 0.65rem;
}

.modal-form {
    max-width: 520px;
}

.modal-title {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
    padding-right: 2rem;
}

.modal-hint {
    color: var(--muted);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.contragent-form .form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.contragent-form .form-span-2 {
    grid-column: 1 / -1;
}

.contragent-form .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.autocomplete-wrap {
    position: relative;
}

.modal-form .autocomplete-wrap:focus-within {
    z-index: 20;
}

#add-pipeline-deal-modal .modal-content {
    overflow: visible;
}

.contragent-form label {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.contragent-form .req {
    color: #dc2626;
}

.contragent-form input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
}

.contragent-form textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    min-height: 5rem;
    padding: 0.55rem 0.75rem;
    resize: vertical;
    width: 100%;
}

.contragent-form input:focus {
    border-color: var(--accent);
    outline: none;
}

.contragent-form textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.contragent-form select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
}

.contragent-form select:focus {
    border-color: var(--accent);
    outline: none;
}

.contragent-form input[readonly] {
    background: #f8fafc;
    color: var(--text);
    cursor: default;
}

.form-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
}

@media (max-width: 540px) {
    .contragent-form .form-grid {
        grid-template-columns: 1fr;
    }

    .contragent-form .form-span-2 {
        grid-column: auto;
    }
}

/* Pipelines kanban */
.pipelines-layout {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: calc(100vh - 10rem);
}

.pipelines-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
    padding: 0.85rem;
    width: 250px;
}

.pipelines-sidebar-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pipelines-sidebar-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
}

.pipelines-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pipelines-list-item {
    border-left: 3px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.55rem 0.7rem;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.pipelines-list-item:hover {
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transform: translateX(2px);
}

.pipelines-list-item.active {
    background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
    border-left-color: #2563eb;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-weight: 600;
}

.pipelines-list-item .meta {
    color: var(--muted);
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: 0.15rem;
}

.pipelines-list-group {
    list-style: none;
    margin: 0.35rem 0;
    padding: 0;
}

.pipelines-list-group-title {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0.25rem 0 0.35rem;
    padding: 0 0.65rem;
    text-transform: uppercase;
}

.pipelines-list-sub {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.35rem;
}

.pipelines-list-sub-item {
    font-size: 0.86rem;
}

.pipelines-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.pipelines-board-area {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.pipelines-board {
    background: transparent;
    display: flex;
    flex: 1;
    gap: 1rem;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
}

.pipelines-sub-bar {
    align-items: center;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
    margin-top: 0;
    min-height: 3rem;
    padding: 0.35rem 0.85rem;
}

.pipelines-sub-bar.hidden {
    display: none;
}

.pipelines-sub-tabs {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 0.15rem;
    min-width: 0;
    overflow-x: auto;
}

.pipelines-sub-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #64748b;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.86rem;
    max-width: 12rem;
    overflow: hidden;
    padding: 0.55rem 0.9rem;
    text-overflow: ellipsis;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
    white-space: nowrap;
}

.pipelines-sub-tab:hover {
    background: #f8fafc;
    color: #334155;
    transform: translateY(-1px);
}

.pipelines-sub-tab.active {
    background: #f0fdf4;
    border-bottom-color: #16a34a;
    color: #15803d;
    font-weight: 600;
}

.pipelines-sub-add-btn {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: 2.1rem;
    justify-content: center;
    line-height: 1;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
    width: 2.1rem;
}

.pipelines-sub-add-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
    transform: scale(1.05);
}

.pipelines-board-toolbar {
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0.85rem 1rem;
}

.pipelines-board-search-wrap input {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.86rem;
    padding: 0.5rem 0.7rem;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    width: 100%;
}

.pipelines-board-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.pipelines-board-actions.hidden {
    display: none;
}

.pipelines-board-search-wrap {
    min-width: 220px;
}

.pipelines-board-search-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.pipelines-filter-wrap {
    position: relative;
}

.pipelines-filter-btn.is-active {
    background: #eff6ff;
    border-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.pipelines-filter-btn,
#add-pipeline-deal-btn {
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.pipelines-filter-btn:hover,
#add-pipeline-deal-btn:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.pipelines-filter-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    margin-top: 0.35rem;
    min-width: 320px;
    padding: 0.85rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 120;
}

.pipelines-filter-panel.hidden {
    display: none;
}

.pipelines-filter-section+.pipelines-filter-section {
    margin-top: 0.85rem;
}

.pipelines-filter-label {
    color: var(--muted);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.pipelines-filter-input {
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.84rem;
    padding: 0.4rem 0.55rem;
    width: 100%;
}

.pipelines-filter-range {
    align-items: center;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 1fr auto 1fr;
}

.pipelines-filter-range-sep {
    color: var(--muted);
    text-align: center;
}

.pipelines-filter-companies {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 0.35rem;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.35rem;
}

.pipelines-filter-company-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.84rem;
    gap: 0.45rem;
    padding: 0.3rem 0.2rem;
}

.pipelines-filter-company-item:hover {
    background: #f8fafc;
}

.pipelines-filter-empty {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0;
    padding: 0.5rem;
    text-align: center;
}

.pipelines-filter-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

.pipelines-board-title-wrap {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    min-width: 0;
}

.pipelines-board-title-wrap .pipelines-board-title {
    margin: 0;
}

.pipelines-list-item-row {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: space-between;
}

.pipelines-list-item-label {
    flex: 1;
    min-width: 0;
}

.pipelines-item-menu-wrap,
.pipelines-sub-tab-menu,
#pipelines-group-menu-wrap {
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    position: relative;
    transition: opacity 0.15s ease;
}

.pipelines-list-item:hover .pipelines-item-menu-wrap,
.pipelines-list-item:focus-within .pipelines-item-menu-wrap,
.pipelines-board-title-wrap:hover #pipelines-group-menu-wrap,
.pipelines-board-title-wrap:focus-within #pipelines-group-menu-wrap,
.pipelines-sub-tab-item:hover .pipelines-sub-tab-menu,
.pipelines-sub-tab-item:focus-within .pipelines-sub-tab-menu,
.pipelines-item-menu-wrap:has(.pipeline-menu:not(.hidden)),
.pipelines-sub-tab-menu:has(.pipeline-menu:not(.hidden)),
#pipelines-group-menu-wrap:has(.pipeline-menu:not(.hidden)),
.pipelines-item-menu-wrap.is-menu-open,
.pipelines-sub-tab-menu.is-menu-open,
#pipelines-group-menu-wrap.is-menu-open {
    opacity: 1;
    pointer-events: auto;
}

.pipelines-item-menu-wrap .pipeline-menu,
.pipelines-sub-tab-menu .pipeline-menu,
#pipelines-group-menu-wrap .pipeline-menu {
    top: calc(100% + 0.35rem);
}

.pipelines-sub-tab-item {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.1rem;
    max-width: 14rem;
}

.pipelines-sub-tab-item .pipelines-sub-tab {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipelines-board-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.pipelines-board-title-combined {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.pipelines-board-title-group {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pipelines-board-title-sep {
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 400;
}

.pipelines-board-title-sub {
    color: #2563eb;
    font-size: 1.05rem;
    font-weight: 600;
}

.pipeline-stage-column {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    border-top: 4px solid #94a3b8;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 14rem);
    min-width: 290px;
    overflow: hidden;
    position: relative;
    top: 0;
    transition:
        box-shadow 0.2s ease,
        top 0.2s ease;
    width: 290px;
}

.pipeline-stage-column:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    top: -3px;
}

.pipeline-stage-column.accent-blue {
    border-top-color: #3b82f6;
}

.pipeline-stage-column.accent-sky {
    border-top-color: #0ea5e9;
}

.pipeline-stage-column.accent-indigo {
    border-top-color: #6366f1;
}

.pipeline-stage-column.accent-violet {
    border-top-color: #8b5cf6;
}

.pipeline-stage-column.accent-teal {
    border-top-color: #14b8a6;
}

.pipeline-stage-column.accent-success {
    border-top-color: #22c55e;
}

.pipeline-stage-column.accent-warning {
    border-top-color: #f59e0b;
}

.pipeline-stage-column.accent-danger {
    border-top-color: #ef4444;
}

.pipeline-stage-column.drag-over {
    box-shadow: 0 0 0 2px #93c5fd, 0 12px 28px rgba(37, 99, 235, 0.15);
    top: -2px;
}

.pipeline-stage-column.drag-over .pipeline-stage-body {
    background: #eff6ff;
}

.pipeline-stage-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 0.9rem 0.7rem;
}

.pipeline-stage-header-top {
    align-items: flex-start;
    display: flex;
    gap: 0.35rem;
    justify-content: space-between;
}

.pipeline-stage-menu-wrap {
    flex-shrink: 0;
    position: relative;
}

.pipeline-stage-menu-btn {
    color: var(--muted);
    opacity: 0;
    padding: 0.1rem 0.25rem;
    transition: opacity 0.15s ease;
}

.pipeline-stage-column:hover .pipeline-stage-menu-btn,
.pipeline-stage-column:focus-within .pipeline-stage-menu-btn,
.pipeline-stage-menu-btn:focus-visible {
    opacity: 1;
}

.pipeline-stage-title {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.pipeline-stage-stats {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.pipeline-stage-amount {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
}

.pipeline-stage-count-badge {
    background: #f1f5f9;
    border-radius: 999px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
}

.pipeline-stage-column.accent-success .pipeline-stage-count-badge {
    background: #dcfce7;
    color: #15803d;
}

.pipeline-stage-column.accent-danger .pipeline-stage-count-badge {
    background: #fee2e2;
    color: #b91c1c;
}

.pipeline-stage-body {
    background: #f8fafc;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 120px;
    overflow: hidden;
}

.pipeline-stage-description {
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.45;
    margin: 0.6rem 0.65rem 0;
    min-height: 2.35rem;
    padding: 0.55rem 0.7rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    white-space: pre-wrap;
}

.pipeline-stage-description:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.pipeline-stage-description.is-empty {
    background: #f0fdf4;
    border-color: #bbf7d0;
    border-style: dashed;
    color: #6b7280;
    font-size: 0.8rem;
}

.pipeline-stage-description.has-text {
    background: #fff;
    border-style: solid;
    border-color: #dbeafe;
}

.pipeline-stage-deals {
    flex: 1;
    margin-top: 0.45rem;
    min-height: 80px;
    overflow-y: auto;
    padding: 0.55rem;
}

.pipeline-stage-footer {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    opacity: 0;
    padding: 0.55rem 0.65rem;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.pipeline-stage-column:hover .pipeline-stage-footer,
.pipeline-stage-column:focus-within .pipeline-stage-footer {
    opacity: 1;
    pointer-events: auto;
}

.pipeline-stage-add-deal {
    align-items: center;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #2563eb;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
    width: 100%;
}

.pipeline-stage-add-deal:hover {
    background: #eff6ff;
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.pipeline-stage-empty {
    color: #94a3b8;
    font-size: 0.82rem;
    font-style: italic;
    padding: 1.75rem 0.75rem;
    text-align: center;
}

.pipeline-deal-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    cursor: grab;
    margin-bottom: 0.55rem;
    padding: 0.7rem 0.8rem;
    position: relative;
    top: 0;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        top 0.16s ease;
}

.pipeline-deal-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    top: -2px;
}

.pipeline-deal-card:active {
    cursor: grabbing;
}

.pipeline-deal-card.dragging {
    opacity: 0.45;
}

.pipeline-deal-card .deal-title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
}

.pipeline-deal-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.35rem;
    justify-content: space-between;
}

.pipeline-deal-card-title-row {
    align-items: baseline;
    display: flex;
    flex: 1;
    gap: 0.5rem;
    min-width: 0;
}

.pipeline-deal-card-header .deal-title {
    flex: 1;
    min-width: 0;
}

.deal-closing-date-inline {
    color: var(--muted);
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0;
    white-space: nowrap;
}

.pipeline-deal-card-menu {
    flex-shrink: 0;
    position: relative;
}

.pipeline-deal-card .deal-company {
    color: var(--muted);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.pipeline-deal-card .deal-amount {
    font-size: 0.85rem;
    font-weight: 600;
}

.pipeline-deal-card-footer {
    align-items: flex-end;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-top: 0.35rem;
}

.pipeline-deal-assignees {
    display: inline-flex;
    flex-shrink: 0;
}

.pipeline-deal-team-wrap {
    margin-top: 0.25rem;
}

.pipeline-deal-doc-btns {
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
    margin-left: auto;
}

.pipeline-deal-doc-btn {
    background: var(--surface-2, #f3f4f6);
    border: 1px solid var(--border, #d8dee6);
    border-radius: 4px;
    color: var(--text, #1f2937);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    min-width: 2rem;
    padding: 0.28rem 0.4rem;
}

.pipeline-deal-doc-btn:hover {
    background: var(--primary-soft, #e8f0ff);
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}

.attach-pipeline-document-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.75rem 0;
    max-height: 360px;
    overflow: auto;
}

.attach-pipeline-document-item {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d8dee6);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    text-align: left;
}

.attach-pipeline-document-item:hover {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.attach-pipeline-document-item-title {
    font-weight: 600;
}

.attach-pipeline-document-item-meta {
    color: var(--muted);
    font-size: 0.85rem;
}

.fakturi-pipeline-group {
    flex: 0 1 220px;
    max-width: 280px;
    min-width: 200px;
}

.pipeline-stage-input-row.is-locked .pipeline-stage-name {
    background: var(--surface-2, #f8fafc);
    color: var(--muted);
}

.pipeline-deal-card .deal-closing-date {
    color: var(--muted);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

.deal-card-menu-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
}

.deal-card-menu-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

.deal-card-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-md);
    min-width: 9rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
}

.deal-card-menu-item {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
    width: 100%;
}

.deal-card-menu-item:hover {
    background: var(--hover-bg-strong);
}

.deal-card-menu-item-danger {
    color: #dc2626;
}

.deal-card-menu-item-danger:hover {
    background: #fef2f2;
}

.deal-row-menu-wrap {
    overflow: visible;
    position: relative;
    text-align: right;
}

.deal-actions-cell {
    overflow: visible;
    padding-right: 0.5rem !important;
    position: relative;
    text-align: right;
    width: 2.5rem;
}

.deal-actions-head {
    width: 2.5rem;
}

/* Closing date urgency (past due or within 5 days) */
.pipeline-deal-card.deal-closing-red-overdue,
.company-deals-table tr.deal-closing-red-overdue {
    background: #fef2f2;
}

.pipeline-deal-card.deal-closing-red-overdue {
    border-color: #f87171;
    box-shadow: inset 3px 0 0 #dc2626;
}

.pipeline-deal-card.deal-closing-red-soon,
.company-deals-table tr.deal-closing-red-soon {
    background: #fff7f7;
}

.pipeline-deal-card.deal-closing-red-soon {
    border-color: #fecaca;
    box-shadow: inset 3px 0 0 #fca5a5;
}

.pipeline-deal-card.deal-closing-yellow-overdue,
.company-deals-table tr.deal-closing-yellow-overdue {
    background: #fffbeb;
}

.pipeline-deal-card.deal-closing-yellow-overdue {
    border-color: #fcd34d;
    box-shadow: inset 3px 0 0 #f59e0b;
}

.pipeline-deal-card.deal-closing-yellow-soon,
.company-deals-table tr.deal-closing-yellow-soon {
    background: #fffef5;
}

.pipeline-deal-card.deal-closing-yellow-soon {
    border-color: #fde68a;
    box-shadow: inset 3px 0 0 #fcd34d;
}

.pipeline-deal-card.deal-closing-red-overdue .deal-closing-date,
.pipeline-deal-card.deal-closing-red-overdue .deal-closing-date-inline,
.company-deals-table tr.deal-closing-red-overdue .closing-date-cell {
    color: #dc2626;
    font-weight: 600;
}

.pipeline-deal-card.deal-closing-red-soon .deal-closing-date,
.pipeline-deal-card.deal-closing-red-soon .deal-closing-date-inline,
.company-deals-table tr.deal-closing-red-soon .closing-date-cell {
    color: #ef4444;
    font-weight: 500;
}

.pipeline-deal-card.deal-closing-yellow-overdue .deal-closing-date,
.pipeline-deal-card.deal-closing-yellow-overdue .deal-closing-date-inline,
.company-deals-table tr.deal-closing-yellow-overdue .closing-date-cell {
    color: #d97706;
    font-weight: 600;
}

.pipeline-deal-card.deal-closing-yellow-soon .deal-closing-date,
.pipeline-deal-card.deal-closing-yellow-soon .deal-closing-date-inline,
.company-deals-table tr.deal-closing-yellow-soon .closing-date-cell {
    color: #f59e0b;
    font-weight: 500;
}

.pipeline-stages-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pipeline-stage-input-row {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.pipeline-stage-position {
    color: var(--muted);
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

.pipeline-stage-move-btns {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.1rem;
}

.pipeline-stage-move-btns .btn-stage-move {
    font-size: 0.7rem;
    line-height: 1;
    min-height: 0;
    padding: 0.1rem 0.35rem;
}

.pipeline-stage-input-row input {
    flex: 1;
}

.pipeline-stage-input-row .btn-remove-stage {
    color: var(--muted);
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.45rem;
}

@media (max-width: 900px) {
    .pipelines-layout {
        flex-direction: column;
    }

    .pipelines-sidebar {
        width: 100%;
    }

    .pipelines-board {
        flex-direction: column;
    }

    .pipeline-stage-column {
        max-height: none;
        width: 100%;
    }
}

/* Company detail (CRM) */
.land-row-clickable {
    cursor: pointer;
}

.land-row-clickable:hover td {
    background: var(--row-hover, rgba(37, 99, 235, 0.06));
}

.pipeline-entity-type-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.crm-linked-entities-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crm-linked-toolbar {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.crm-linked-search-wrap {
    flex: 1;
    min-width: min(100%, 280px);
}

.crm-linked-search-wrap:focus-within {
    z-index: 30;
}

.crm-linked-search-input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
    width: 100%;
}

.crm-linked-search-input:focus {
    border-color: var(--accent);
    outline: none;
}

.crm-linked-item {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.crm-linked-item-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.crm-linked-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--link, #2563eb);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.company-detail-view {
    background: var(--bg);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: var(--app-header-height);
    z-index: 200;
}

.company-detail-view.hidden {
    display: none;
}

.company-detail-topbar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
}

.company-detail-top-title {
    color: var(--muted);
    font-size: 0.9rem;
}

.company-detail-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.company-detail-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    overflow-y: auto;
    padding: 1.25rem;
    width: 300px;
}

.company-detail-avatar {
    align-items: center;
    background: #e0e7ff;
    border-radius: 50%;
    color: var(--accent);
    display: flex;
    font-size: 1.25rem;
    font-weight: 700;
    height: 56px;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 56px;
}

.company-detail-name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.company-detail-contact {
    display: none;
}

.company-detail-section h3 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    color: var(--muted);
}

.company-detail-fields {
    display: grid;
    gap: 0.35rem 0.5rem;
    font-size: 0.85rem;
    grid-template-columns: auto 1fr;
}

.company-detail-fields dt {
    color: var(--muted);
}

.company-detail-fields dd {
    margin: 0;
    word-break: break-word;
}

.company-detail-field-value {
    min-width: 0;
    position: relative;
}

.company-detail-field-value .editable-cell {
    min-width: 0;
    padding-right: 1.25rem;
}

.company-detail-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.company-detail-tabs {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 1rem;
}

.company-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
}

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

.company-tab.active {
    border-bottom-color: #22c55e;
    color: #0f172a;
    font-weight: 600;
}

.company-tab-panel {
    background: #f4f6f8;
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.company-tab-panel.hidden {
    display: none;
}

.company-name-link {
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    margin: -0.15rem -0.35rem;
    padding: 0.15rem 0.35rem;
    text-align: left;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.company-name-link:hover {
    background: var(--hover-bg-strong);
    color: #0f172a;
}

.company-name-cell {
    min-width: 0;
}

.crm-empty-hint {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 1rem 0;
}

.crm-section-heading {
    color: #334155;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* ——— Timeline (Bigin-style) ——— */
.crm-timeline {
    max-width: 820px;
}

.crm-timeline-header {
    margin-bottom: 0.5rem;
}

.crm-timeline-heading {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.crm-timeline-day-head {
    align-items: center;
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 4.5rem 1.25rem 1fr;
    margin: 1.75rem 0 1rem;
}

.crm-timeline-day:first-child .crm-timeline-day-head {
    margin-top: 0.5rem;
}

.crm-timeline-day-dot {
    background: #22c55e;
    border-radius: 50%;
    grid-column: 2;
    height: 10px;
    justify-self: center;
    width: 10px;
}

.crm-timeline-day-label {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    grid-column: 3;
    letter-spacing: 0.05em;
}

.crm-timeline-day-events {
    position: relative;
}

.crm-timeline-day-events::before {
    background: #e2e8f0;
    bottom: 0.5rem;
    content: "";
    left: calc(4.5rem + 0.5rem);
    position: absolute;
    top: 0;
    width: 2px;
}

.crm-timeline-event {
    align-items: start;
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 4.5rem 1.25rem 1fr;
    margin-bottom: 1.25rem;
    position: relative;
}

.crm-timeline-time {
    color: #64748b;
    font-size: 0.78rem;
    padding-top: 0.45rem;
    text-align: right;
}

.crm-timeline-node {
    background: #f4f6f8;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    height: 10px;
    justify-self: center;
    margin-top: 0.5rem;
    position: relative;
    width: 10px;
    z-index: 1;
}

.crm-timeline-card {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    gap: 0.75rem;
    margin: -0.25rem -0.35rem;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    transition: background var(--transition-fast);
}

.crm-timeline-card:hover {
    background: var(--hover-bg);
}

.crm-timeline-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.crm-timeline-text {
    min-width: 0;
    padding-top: 0.15rem;
}

.crm-timeline-title {
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.crm-timeline-title-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.crm-timeline-meta {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.35rem;
    margin-left: auto;
}

.crm-timeline-assignees {
    display: inline-flex;
}

.crm-timeline-detail-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    justify-content: space-between;
    margin-top: 0.2rem;
}

.crm-timeline-detail {
    color: #64748b;
    flex: 1 1 auto;
    font-size: 0.85rem;
    line-height: 1.45;
    min-width: 0;
    white-space: pre-wrap;
}

.crm-timeline-by {
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: nowrap;
}

/* ——— Notes (Bigin-style) ——— */
.crm-notes-panel {
    max-width: 680px;
}

.crm-notes-toolbar {
    margin-bottom: 0.75rem;
}

.crm-notes-filter {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 500;
}

.crm-notes-compose {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
}

.crm-notes-compose textarea {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    min-height: 2.5rem;
    outline: none;
    resize: vertical;
    width: 100%;
}

.crm-notes-compose textarea::placeholder {
    color: #94a3b8;
}

.crm-notes-compose-actions {
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.crm-notes-list {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 1rem;
}

.crm-notes-list .crm-empty-hint {
    padding: 1.5rem 0;
}

.crm-note-item {
    border-bottom: 1px solid #eef2f6;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0;
}

.crm-note-item:last-child {
    border-bottom: none;
}

.crm-note-avatar {
    align-items: center;
    background: #e2e8f0;
    border-radius: 50%;
    color: #475569;
    display: flex;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.crm-note-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.crm-note-author {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
}

.crm-note-sep,
.crm-note-time {
    color: #94a3b8;
    font-size: 0.8rem;
}

.crm-note-body {
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ——— Emails (clean compose) ——— */
.crm-emails-panel {
    max-width: 720px;
}

.crm-email-compose {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.crm-email-compose-header {
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.crm-email-field {
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
}

.crm-email-label {
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 500;
    width: 3rem;
}

.crm-email-input {
    background: transparent;
    border: none;
    color: #0f172a;
    flex: 1;
    font-family: inherit;
    font-size: 0.9rem;
    min-width: 0;
    outline: none;
    padding: 0.25rem 0;
}

.crm-email-body-wrap {
    padding: 0.75rem 1rem 0.5rem;
}

.crm-email-body {
    background: transparent;
    border: none;
    color: #334155;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.55;
    min-height: 5rem;
    outline: none;
    resize: vertical;
    width: 100%;
}

.crm-email-body::placeholder {
    color: #94a3b8;
}

.crm-email-attachments {
    border-top: 1px solid #eef2f6;
    padding: 0.75rem 1rem;
}

.crm-email-attachments-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.crm-email-attach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.crm-email-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.5rem;
}

.crm-email-attachment-empty {
    font-size: 0.82rem;
    padding: 0;
}

.crm-email-attachment-chip {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.8rem;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
}

.crm-email-attachment-remove {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.1rem;
}

.crm-email-attachment-remove:hover {
    color: #dc2626;
}

.crm-email-company-files {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 0.5rem;
    max-height: 220px;
    overflow: auto;
    padding: 0.65rem 0.75rem;
}

.crm-email-company-files-title {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.crm-email-company-files-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.crm-email-company-file-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.85rem;
    gap: 0.5rem;
}

.crm-email-company-file-size {
    color: var(--muted);
    font-size: 0.78rem;
    margin-left: auto;
}

.crm-email-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem 0.85rem;
}

.crm-email-list {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 1rem;
}

.crm-email-list .crm-empty-hint {
    padding: 1.5rem 0;
}

.crm-email-item {
    border-bottom: 1px solid #eef2f6;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0;
}

.crm-email-item:last-child {
    border-bottom: none;
}

.crm-email-item-icon {
    align-items: center;
    background: #f3e8ff;
    border-radius: 8px;
    color: #7c3aed;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.crm-email-item-content {
    min-width: 0;
}

.crm-email-item-header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}

.crm-email-item-subject {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
}

.crm-email-item-time {
    color: #94a3b8;
    font-size: 0.78rem;
    white-space: nowrap;
}

.crm-email-item-meta {
    color: #64748b;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.crm-email-item-body {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* Legacy list styles (files panel) */
.timeline-list,
.crm-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 720px;
}

.timeline-item,
.crm-list-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.timeline-item .meta,
.crm-list-item .meta {
    color: var(--muted);
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.timeline-item .title,
.crm-list-item .title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.timeline-item .body,
.crm-list-item .body {
    font-size: 0.9rem;
    white-space: pre-wrap;
}

.files-upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    max-width: 720px;
    padding: 2rem;
    text-align: center;
}

.files-upload-zone input[type="file"] {
    display: none;
}

.files-upload-zone.drag-over {
    background: #f0fdf4;
    border-color: #16a34a;
}

.crm-files-panel {
    max-width: 720px;
}

.crm-files-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.crm-files-header .files-breadcrumbs {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

.crm-files-add-wrap {
    position: relative;
}

.files-add-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 11rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
}

.files-add-menu-item {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 0.88rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    width: 100%;
}

.files-add-menu-item:hover {
    background: #f1f5f9;
}

.files-add-menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.files-add-menu-item:last-child {
    border-radius: 0 0 8px 8px;
}

.files-add-folder-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

.crm-files-status {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

.crm-files-list {
    margin-top: 0.25rem;
}

.drive-shell {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    padding: 1rem;
}

.entity-files-drive {
    box-shadow: none;
    max-width: 100%;
}

.drive-tabs {
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 0.4rem;
    margin: -0.25rem -0.25rem 1rem;
    padding: 0 0.25rem 0.75rem;
}

.drive-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.55rem 0.9rem;
}

.drive-tab.active,
.drive-tab:hover {
    background: #eef4ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.drive-root {
    min-height: 22rem;
}

.drive-toolbar {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem) minmax(0, 1fr);
    margin-bottom: 0.85rem;
}

.drive-toolbar-leading,
.drive-toolbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

.drive-toolbar-actions {
    justify-content: flex-end;
}

.drive-search-wrap {
    width: 100%;
}

.drive-search-input,
.drive-link-search-input {
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font: inherit;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    width: 100%;
}

.drive-search-input:focus,
.drive-link-search-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.drive-list {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: visible;
}

.drive-list-head,
.drive-row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    min-height: 3.2rem;
    padding: 0 0.85rem;
}

.drive-list-head {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.8fr) minmax(6rem, auto);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.drive-row {
    background: #fff;
    border: 0;
    border-top: 1px solid #e2e8f0;
    color: var(--text);
    font: inherit;
    grid-template-columns: auto minmax(12rem, 1fr) minmax(9rem, 0.8fr) minmax(6rem, auto);
    position: relative;
    text-align: left;
    width: 100%;
}

.drive-row:has(.drive-select-btn) {
    grid-template-columns: auto auto minmax(12rem, 1fr) minmax(9rem, 0.8fr) minmax(6rem, auto);
}

.drive-row:hover {
    background: #f8fbff;
}

.drive-row:has(.drive-select-btn.selected) {
    background: #f0f7ff;
}

.drive-select-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    height: 1.35rem;
    justify-content: center;
    width: 1.35rem;
}

.drive-select-btn.selected {
    background: #2563eb;
    border-color: #2563eb;
}

.drive-select-btn.selected::after {
    color: #fff;
    content: "✓";
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
}

.drive-batch-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.drive-batch-actions span {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 700;
}

.drive-batch-actions .danger {
    color: #b91c1c;
}

.drive-row-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.drive-row-actions-inline {
    align-items: center;
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
}

.onlyoffice-overlay {
    background: #f8fafc;
    display: grid;
    grid-template-rows: auto 1fr;
    inset: 0;
    position: fixed;
    z-index: 5000;
}

.onlyoffice-topbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #dbe4ef;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0.65rem 1rem;
}

.onlyoffice-topbar-actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.onlyoffice-status {
    color: #64748b;
    font-size: 0.9rem;
}

.onlyoffice-editor-host {
    min-height: 0;
    width: 100%;
}

.drive-name {
    align-items: center;
    color: #0f172a;
    display: flex;
    font-weight: 700;
    gap: 0.55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.drive-link-button {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.drive-kind-icon {
    align-items: center;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 2rem;
    font-size: 0.62rem;
    font-weight: 900;
    height: 2rem;
    justify-content: center;
    letter-spacing: 0;
    position: relative;
    width: 2rem;
}

.drive-kind-folder {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.drive-folder-glyph {
    background: #f7c948;
    border: 1px solid #d69e2e;
    border-radius: 3px;
    box-shadow: inset 0 -5px 0 rgba(214, 158, 46, 0.18);
    display: block;
    height: 1.45rem;
    margin-top: 0.25rem;
    position: relative;
    width: 1.85rem;
}

.drive-folder-glyph::before {
    background: #f6d365;
    border: 1px solid #d69e2e;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    content: "";
    height: 0.38rem;
    left: 0.12rem;
    position: absolute;
    top: -0.4rem;
    width: 0.85rem;
}

.drive-kind-pdf {
    background: #dc2626;
}

.drive-kind-excel {
    background: #15803d;
}

.drive-kind-word {
    background: #2563eb;
}

.drive-kind-image {
    background: #7c3aed;
}

.drive-kind-file {
    background: #64748b;
}

.drive-file-glyph {
    background: #fff;
    border-radius: 2px;
    display: block;
    height: 1.25rem;
    position: relative;
    width: 0.95rem;
}

.drive-file-glyph::after {
    border-bottom: 0.32rem solid #cbd5e1;
    border-left: 0.32rem solid transparent;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
}

.drive-meta {
    color: #64748b;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.drive-row-action {
    color: #2563eb;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.drive-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    position: relative;
}

.drive-more-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    font-weight: 900;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.drive-file-menu {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 12rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 30;
}

.drive-file-menu button,
.drive-file-menu a {
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 0.65rem 0.8rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.drive-file-menu button:hover,
.drive-file-menu a:hover {
    background: #f1f5f9;
}

.drive-folder-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.drive-folder-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 0.15rem 0.75rem;
    grid-template-columns: auto 1fr;
    min-height: 4.5rem;
    padding: 0.85rem;
    text-align: left;
}

.drive-folder-card:hover {
    background: #f8fbff;
    border-color: #93c5fd;
}

.drive-folder-card small {
    color: #64748b;
    grid-column: 2;
    overflow-wrap: anywhere;
}

.drive-pagination {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 0.88rem;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 0.85rem;
}

.drive-pagination-single {
    justify-content: flex-end;
}

.drive-pagination-actions {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.drive-pagination-actions .btn-secondary[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
}

.drive-link-panel {
    background: #f8fafc;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    margin-bottom: 0.85rem;
    padding: 0.75rem;
}

.drive-action-panel {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    margin-bottom: 0.85rem;
    padding: 0.85rem;
}

.drive-action-panel-title {
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.drive-action-panel p {
    color: #475569;
    margin: 0 0 0.75rem;
}

.drive-action-panel-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.drive-download-local {
    display: inline-flex;
    text-decoration: none;
}

.drive-permissions-list {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 0.25rem;
    margin: 0.65rem 0;
    max-height: 15rem;
    overflow: auto;
    padding: 0.45rem;
}

.drive-permission-user {
    align-items: center;
    border-radius: 6px;
    display: flex;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
}

.drive-permission-user:hover {
    background: #f8fafc;
}

.drive-link-form {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(14rem, 1fr) minmax(7rem, auto) minmax(6rem, auto) auto;
}

.drive-link-form label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    grid-column: 1 / -1;
    text-transform: uppercase;
}

.drive-link-search-wrap {
    min-width: 0;
}

.files-breadcrumbs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    max-width: 720px;
}

.files-crumb-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

.files-crumb-link:hover {
    color: var(--accent-hover);
}

.files-crumb-current {
    color: var(--text);
    font-weight: 600;
}

.files-crumb-sep {
    color: var(--muted);
    margin: 0 0.15rem;
}

.files-toolbar {
    margin-bottom: 0.75rem;
    max-width: 720px;
}

.company-folder-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.company-folder-form input {
    flex: 1;
    min-width: 180px;
}

.files-folder-item {
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.files-folder-item:hover {
    border-color: var(--accent);
}

.company-pfinv-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    max-width: 960px;
}

.company-pfinv-detail {
    max-width: 960px;
}

.company-pfinv-detail .doc-panels-root {
    margin-top: 0.5rem;
}

/* Popup date picker */
.date-picker-wrap {
    position: relative;
}

.date-picker-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 280px;
    padding: 0.75rem;
    position: fixed;
    z-index: 1600;
}

.date-picker-wrap .calendar-edit-input {
    padding-right: 3rem;
}

.date-picker-trigger {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    bottom: 0.45rem;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 2.2rem;
    justify-content: center;
    position: absolute;
    right: 0.45rem;
    width: 2.2rem;
}

.date-picker-trigger:hover {
    background: #eef2ff;
    border-color: #bfdbfe;
}

.date-picker-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.date-picker-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.date-picker-nav {
    display: flex;
    gap: 0.15rem;
}

.date-picker-nav button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
}

.date-picker-nav button:hover {
    background: var(--bg);
}

.date-picker-weekdays,
.date-picker-grid {
    display: grid;
    gap: 0.15rem;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.date-picker-weekdays span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0;
}

.date-picker-day {
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
    height: 2rem;
    width: 2rem;
}

.date-picker-day:hover {
    background: #e0f2fe;
}

.date-picker-day.other-month {
    color: var(--muted);
}

.date-picker-day.selected {
    background: #16a34a;
    color: #fff;
}

.date-picker-day.today {
    box-shadow: inset 0 0 0 2px #16a34a;
}

/* Company deals (Bigin-style) */
.company-deals-wrap {
    max-width: 960px;
    overflow: visible;
}

.company-pipeline-group-tabs {
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.company-pipeline-group-tab {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
}

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

.company-pipeline-group-tab.active {
    background: #fff;
    border-color: #cbd5e1;
    color: var(--text);
    font-weight: 600;
}

.company-pipeline-tabs {
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.company-pipeline-tab {
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.88rem;
    margin-bottom: -1px;
    padding: 0.55rem 0.85rem;
}

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

.company-pipeline-tab.active {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    font-weight: 600;
}

.company-deals-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: visible;
}

.company-deals-table-footer {
    border-top: 1px solid var(--border);
}

.company-deals-add-btn {
    background: var(--surface);
    border: none;
    color: var(--accent);
    cursor: pointer;
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.85rem 1rem;
    text-align: center;
    transition: background 0.15s;
    width: 100%;
}

.company-deals-add-btn:hover {
    background: #f0f9ff;
}

.company-deals-table {
    border-collapse: collapse;
    width: 100%;
}

.company-deals-table th,
.company-deals-table td {
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    text-align: left;
}

.company-deals-table th {
    background: #f8fafc;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.company-deals-table tr:last-child td {
    border-bottom: none;
}

.company-deals-table .deal-stage-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

.company-deals-empty {
    color: var(--muted);
    padding: 2rem 1rem;
    text-align: center;
}

.deal-pipeline-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .company-detail-layout {
        flex-direction: column;
    }

    .company-detail-sidebar {
        border-bottom: 1px solid var(--border);
        border-right: none;
        width: 100%;
    }
}

/* Email templates */
.email-templates-layout {
    width: 100%;
}

.email-templates-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.email-template-card {
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.email-template-card:hover {
    background: var(--hover-bg);
    border-color: #cbd5e1;
    box-shadow: var(--shadow);
}

.email-template-card-name {
    font-size: 1rem;
    margin: 0 0 0.35rem;
}

.email-template-system-badge {
    background: #e0f2fe;
    border-radius: 999px;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    vertical-align: middle;
}

.email-template-card-subject {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.email-template-card-preview {
    color: var(--muted);
    font-family: inherit;
    font-size: 0.82rem;
    margin: 0;
    white-space: pre-wrap;
}

.email-template-card-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.modal-form-wide {
    max-width: 720px;
}

#payments-bulk-modal .modal-form-wide {
    max-width: 980px;
}

.email-template-placeholders {
    margin-top: 0.5rem;
}

.email-template-placeholders-title {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.email-template-placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.email-template-placeholder-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #334155;
    cursor: pointer;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
}

.email-template-placeholder-chip:hover {
    background: #e2e8f0;
}

#email-template-form textarea {
    font-family: inherit;
    min-height: 8rem;
    resize: vertical;
    width: 100%;
}

/* Calendar */
.calendar-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
}

.calendar-assigned-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 7rem);
    min-height: 24rem;
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.calendar-assigned-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.calendar-assigned-summary {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    list-style: none;
    margin: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calendar-assigned-summary::-webkit-details-marker {
    display: none;
}

.calendar-assigned-summary::after {
    color: var(--muted);
    content: "▾";
    flex: 0 0 auto;
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.calendar-assigned-details[open] .calendar-assigned-summary {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: var(--accent);
}

.calendar-assigned-details:not([open]) .calendar-assigned-summary {
    background: #f8fafc;
    color: var(--text);
}

.calendar-assigned-details:not([open]) .calendar-assigned-summary::after {
    color: var(--muted);
}

.calendar-assigned-details:not([open]) .calendar-assigned-summary::after {
    transform: rotate(-90deg);
}

.calendar-assigned-header {
    border-bottom: 1px solid var(--border);
    padding: 1rem 1rem 0.85rem;
}

.calendar-assigned-heading {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.calendar-assigned-hint {
    color: var(--muted);
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
}

.calendar-view-toggle {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 1fr 1fr;
    padding: 0.75rem 0.75rem 0;
}

.calendar-view-toggle-btn {
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: #334155;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.5rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.calendar-view-toggle-btn:hover {
    background: #e2e8f0;
}

.calendar-view-toggle-btn.active {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.calendar-team-filters {
    display: none;
}

.calendar-filter-dropdown {
    position: relative;
}

.calendar-toolbar-end {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.calendar-toolbar-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: 0;
}

.calendar-filter-toggle {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.calendar-filter-toggle.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.calendar-only-my-tasks-btn.is-active {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.calendar-filter-toggle-icon {
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.75;
}

.calendar-filter-chevron {
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.65;
    transition: transform 0.15s ease;
}

.calendar-filter-toggle[aria-expanded="true"] .calendar-filter-chevron {
    transform: rotate(180deg);
}

.calendar-filter-count {
    background: #2563eb;
    border-radius: 999px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.1rem;
    padding: 0.15rem 0.35rem;
    text-align: center;
}

.calendar-filter-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    width: min(20rem, calc(100vw - 2rem));
    z-index: 40;
}

.calendar-filter-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
}

.calendar-filter-panel-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

.calendar-filter-reset-btn {
    background: none;
    border: 0;
    color: #2563eb;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.25rem;
}

.calendar-filter-reset-btn:hover {
    text-decoration: underline;
}

.calendar-filter-panel-body {
    max-height: min(52vh, 24rem);
    overflow-y: auto;
    padding: 0.35rem 0;
}

.calendar-filter-section {
    border-bottom: 1px solid #f1f5f9;
}

.calendar-filter-section:last-child {
    border-bottom: 0;
}

.calendar-filter-section-summary {
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    list-style: none;
    padding: 0.55rem 0.85rem;
    text-transform: uppercase;
    color: var(--muted);
}

.calendar-filter-section-summary::-webkit-details-marker {
    display: none;
}

.calendar-filter-section-summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform 0.15s ease;
}

.calendar-filter-section[open]>.calendar-filter-section-summary::before {
    transform: rotate(90deg);
}

.calendar-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.55rem 0.65rem;
}

.calendar-filter-option {
    align-items: center;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    font-size: 0.84rem;
    gap: 0.5rem;
    padding: 0.4rem 0.45rem;
    transition: background 0.12s ease;
}

.calendar-filter-option:hover {
    background: #f8fafc;
}

.calendar-filter-option input {
    accent-color: #2563eb;
    flex-shrink: 0;
    height: 0.95rem;
    width: 0.95rem;
}

.calendar-team-filters-title {
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.calendar-team-filter-group {
    margin-bottom: 0.65rem;
}

.calendar-team-filter-group:last-child {
    margin-bottom: 0;
}

.calendar-team-filter-label {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.calendar-team-filter-checks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-team-filter-checks label {
    align-items: center;
    display: flex;
    font-size: 0.8rem;
    gap: 0.4rem;
}

.calendar-team-grid-wrap {
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.calendar-team-grid-scroll {
    max-height: calc(100vh - 11rem);
    overflow: auto;
}

.calendar-team-grid {
    border-collapse: collapse;
    font-size: 0.78rem;
    min-width: 100%;
    table-layout: fixed;
    width: max-content;
}

.calendar-team-grid th,
.calendar-team-grid td {
    border: 1px solid #94a3b8;
    padding: 0.35rem 0.45rem;
    text-align: left;
    vertical-align: top;
}

.calendar-team-grid thead th {
    background: #bbf7d0;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
}

.calendar-team-grid .calendar-team-date-col {
    background: #f8fafc;
    font-weight: 600;
    left: 0;
    min-width: 5.5rem;
    position: sticky;
    white-space: nowrap;
    z-index: 1;
}

.calendar-team-grid thead .calendar-team-date-col {
    z-index: 3;
}

.calendar-team-grid tr.is-weekend td {
    background: #fef9c3;
}

.calendar-team-grid tr.is-weekend .calendar-team-date-col {
    color: #dc2626;
}

.calendar-team-cell {
    min-width: 9rem;
    position: relative;
    white-space: normal;
}

.calendar-team-cell .calendar-day-actions {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    z-index: 2;
}

.calendar-team-cell:hover .calendar-day-actions,
.calendar-team-cell .calendar-day-actions.is-open {
    opacity: 1;
    pointer-events: auto;
}

.calendar-team-cell-entries {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.calendar-team-cell-entry {
    align-items: center;
    background: transparent;
    border: 0;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.3rem;
    line-height: 1.35;
    max-width: 100%;
    padding: 0;
    text-align: left;
    width: 100%;
}

.calendar-team-entry-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-team-cell-entry .calendar-task-urgency-badge {
    flex-shrink: 0;
}

.calendar-team-cell-entry:hover {
    text-decoration: underline;
}

.calendar-team-cell-entry.is-completed {
    opacity: 0.55;
    text-decoration: line-through;
}

.calendar-assigned-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    padding: 0.65rem;
}

.calendar-assigned-empty {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0.5rem 0;
    padding: 0 0.25rem;
}

.calendar-assigned-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #3b82f6;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.calendar-assigned-item.kind-task {
    border-left-color: #f59e0b;
}

.calendar-assigned-item.is-completed {
    opacity: 0.72;
}

.calendar-assigned-item.is-completed .calendar-assigned-title {
    text-decoration: line-through;
}

.calendar-assigned-item.is-overdue:not(.is-completed) {
    border-left-color: #ef4444;
}

.calendar-assigned-item.is-active,
.calendar-assigned-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.calendar-assigned-item.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
}

.calendar-assigned-date {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.calendar-assigned-title {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.calendar-assigned-meta {
    color: #64748b;
    font-size: 0.76rem;
}

.calendar-main {
    min-width: 0;
}

.calendar-page {
    margin: 0;
    max-width: none;
    padding: 0;
}

.calendar-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.calendar-nav {
    display: flex;
    gap: 0.35rem;
}

.calendar-month-label {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.calendar-weekdays,
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    text-align: center;
    text-transform: uppercase;
}

.calendar-month-grid {
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    gap: 1px;
    overflow: hidden;
}

.calendar-day-cell {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-height: 7.5rem;
    padding: 0.35rem;
    position: relative;
}

.calendar-day-cell.other-month {
    background: #f8fafc;
    opacity: 0.55;
}

.calendar-day-cell.today .calendar-day-num {
    background: #16a34a;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 1.6rem;
    justify-content: center;
    min-width: 1.6rem;
    padding: 0 0.25rem;
}

.calendar-day-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    min-height: 1.5rem;
}

.calendar-day-num {
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6rem;
}

.calendar-day-actions {
    opacity: 0;
    pointer-events: none;
    position: relative;
    transition: opacity var(--transition-fast);
}

.calendar-day-cell:hover .calendar-day-actions,
.calendar-day-actions.is-open {
    opacity: 1;
    pointer-events: auto;
}

.calendar-day-add-btn {
    align-items: center;
    background: #2563eb;
    border: none;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 1.5rem;
    justify-content: center;
    line-height: 1;
    width: 1.5rem;
}

.calendar-day-add-btn:hover {
    background: #1d4ed8;
}

.calendar-day-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    list-style: none;
    margin: 0;
    min-width: 10.5rem;
    padding: 0.35rem 0;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
}

.calendar-day-menu button {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    display: block;
    font-size: 0.875rem;
    padding: 0.45rem 0.85rem;
    text-align: left;
    width: 100%;
}

.calendar-day-menu button:hover {
    background: #f0f4ff;
}

.calendar-day-items {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    overflow: visible;
    position: relative;
}

.calendar-day-chip {
    align-items: center;
    background: #f1f5f9;
    border: none;
    border-radius: 4px;
    color: #111827;
    cursor: pointer;
    display: flex;
    font-size: 0.72rem;
    gap: 0.3rem;
    line-height: 1.25;
    overflow: hidden;
    padding: 0.2rem 0.35rem;
    position: relative;
    text-align: left;
    width: 100%;
}

.calendar-day-chip-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-task-urgency-badge {
    align-items: center;
    background: #ef4444;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    width: 1rem;
}

.calendar-assigned-row-top {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
}

.calendar-assigned-item .calendar-task-urgency-badge {
    height: 1.05rem;
    width: 1.05rem;
}

.calendar-day-chip.is-completed {
    opacity: 0.55;
    text-decoration: line-through;
}

.calendar-day-chip.is-internal {
    border-left: 2px solid #7c3aed;
}

.calendar-chip-hover-popup {
    align-items: center;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    max-width: 300px;
    min-width: 220px;
    padding: 0.7rem 0.75rem;
    pointer-events: auto;
    position: fixed;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    z-index: 2000;
}

.calendar-chip-hover-popup::before {
    bottom: 0;
    content: "";
    position: absolute;
    top: 0;
    width: 12px;
}

.calendar-chip-hover-popup:not(.is-left)::before {
    left: -12px;
}

.calendar-chip-hover-popup.is-left::before {
    right: -12px;
}

.calendar-chip-hover-popup:hover {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 4px 10px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.calendar-hover-icon-wrap {
    flex-shrink: 0;
}

.calendar-hover-icon {
    align-items: center;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 0.95rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.calendar-hover-icon.kind-task {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    color: #c2410c;
}

.calendar-hover-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.calendar-hover-text strong {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-hover-text span {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.3;
}

.calendar-hover-subtasks-row {
    align-items: center;
    color: #b45309;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 600;
    gap: 0.3rem;
    line-height: 1.3;
    margin-top: 0.1rem;
}

.calendar-hover-subtasks-badge {
    height: 0.95rem;
    width: 0.95rem;
}

.calendar-hover-avatars {
    margin-top: 0.2rem;
}

.calendar-avatar-group {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
}

.calendar-avatar-circle {
    align-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    letter-spacing: -0.02em;
    line-height: 1;
    width: 2rem;
}

.calendar-avatar-group .calendar-avatar-circle+.calendar-avatar-circle {
    margin-left: -0.5rem;
}

.calendar-avatar-circle--sm {
    font-size: 0.66rem;
    height: 1.75rem;
    width: 1.75rem;
}

.calendar-avatar-circle--md {
    font-size: 0.72rem;
    height: 2rem;
    width: 2rem;
}

.calendar-avatar-circle--lg {
    font-size: 0.78rem;
    height: 2.25rem;
    width: 2.25rem;
}

.calendar-avatar-circle--extra {
    background: #334155 !important;
    color: #fff !important;
    font-size: 0.64rem;
}

.calendar-info-value .calendar-avatar-group {
    justify-content: flex-end;
}

.calendar-sidebar-note-meta .calendar-avatar-circle {
    border-color: #f8fafc;
}

.calendar-hover-menu-btn {
    align-items: center;
    background: #f1f5f9;
    border-radius: 50%;
    color: #475569;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    width: 1.75rem;
}

.calendar-detail-backdrop {
    backdrop-filter: blur(1px);
    background: rgba(15, 23, 42, 0.22);
    inset: 0;
    position: fixed;
    z-index: 1300;
}

.calendar-detail-sidebar {
    background: #f8fafc;
    border-left: 1px solid #e2e8f0;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.14);
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: min(480px, 94vw);
    z-index: 1310;
}

.calendar-detail-sidebar.is-open {
    transform: translateX(0);
}

.calendar-sidebar-header {
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem 1rem;
}

.calendar-sidebar-header-top {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.calendar-sidebar-title-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.calendar-sidebar-title {
    color: #2563eb;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
    word-break: break-word;
}

.calendar-sidebar-owner {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

.calendar-sidebar-owner-avatar {
    display: none;
}

.calendar-sidebar-assignee {
    display: none;
}

.calendar-sidebar-header-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.15rem;
}

.calendar-sidebar-icon-btn {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.25rem;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    width: 2rem;
}

.calendar-sidebar-icon-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.calendar-sidebar-complete-btn {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    width: 100%;
}

.calendar-sidebar-complete-btn:hover {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}

.calendar-sidebar-complete-btn.is-completed {
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    color: #475569;
}

.calendar-sidebar-tabs {
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    gap: 0;
    padding: 0 1.15rem;
}

.calendar-sidebar-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: -1px;
    padding: 0.8rem 0.9rem;
}

.calendar-sidebar-tab:hover {
    color: #334155;
}

.calendar-sidebar-tab.active {
    border-bottom-color: #16a34a;
    color: #0f172a;
    font-weight: 600;
}

.calendar-sidebar-panels {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.15rem 1.5rem;
}

.calendar-sidebar-panel {
    display: none;
}

.calendar-sidebar-panel.active {
    display: block;
}

.calendar-info-card {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.calendar-info-row {
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.8rem 1rem;
}

.calendar-info-row:last-child {
    border-bottom: none;
}

.calendar-info-label {
    color: #64748b;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 500;
}

.calendar-info-value {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.calendar-sidebar-color-section {
    border-top: 1px solid #f1f5f9;
    padding: 0.85rem 1rem 1rem;
}

.calendar-sidebar-color-section .calendar-sidebar-section-label {
    margin: 0 0 0.35rem;
}

.calendar-color-hint {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0 0 0.65rem;
}

.calendar-color-palette-block {
    margin-bottom: 0.55rem;
}

.calendar-color-palette-label {
    color: #64748b;
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.calendar-color-palette {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.calendar-color-palette-standard {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.calendar-color-swatch {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    cursor: pointer;
    min-height: 1.15rem;
    padding: 0;
    position: relative;
    width: 100%;
}

.calendar-color-swatch.is-default {
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1px),
            #ef4444 calc(50% - 1px),
            #ef4444 calc(50% + 1px),
            transparent calc(50% + 1px)),
        #fff;
}

.calendar-color-swatch.is-selected {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2563eb;
    z-index: 1;
}

.calendar-color-palette.is-readonly .calendar-color-swatch {
    cursor: default;
    opacity: 0.75;
}

.calendar-color-picker-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.calendar-color-custom-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}

.calendar-color-input {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    height: 2rem;
    padding: 0.1rem;
    width: 2.5rem;
}

.calendar-color-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.calendar-color-preview {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    min-width: 4.5rem;
    padding: 0.2rem 0.45rem;
    text-align: center;
}

.calendar-color-reset-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0;
    text-decoration: underline;
}

.calendar-color-reset-btn:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.55;
    text-decoration: none;
}

.calendar-color-reset-btn:not(:disabled):hover {
    color: #1d4ed8;
}

.calendar-color-error {
    margin: 0.45rem 0 0;
}

.calendar-info-value .status-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
}

.calendar-info-value .status-pill.in-progress {
    background: #fef3c7;
    color: #b45309;
}

.calendar-info-value .status-pill.completed {
    background: #dcfce7;
    color: #15803d;
}

.calendar-info-value .status-pill.planned {
    background: #dbeafe;
    color: #1d4ed8;
}

.calendar-sidebar-section-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
}

.calendar-sidebar-description {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.85rem 1rem;
    white-space: pre-wrap;
}

.calendar-sidebar-description-wrap {
    margin-top: 1rem;
}

.calendar-sidebar-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.calendar-sidebar-note {
    background: #fff;
    border: 1px solid #e8edf3;
    border-left: 3px solid #3b82f6;
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
}

.calendar-sidebar-note-meta {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 0.75rem;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.calendar-sidebar-note-delete {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.calendar-sidebar-note-delete:hover {
    color: #ef4444;
}

.calendar-sidebar-note-body {
    color: #1e293b;
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0;
    white-space: pre-wrap;
}

.calendar-sidebar-note-form {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem;
}

.calendar-sidebar-note-form textarea {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font: inherit;
    padding: 0.65rem 0.75rem;
    resize: vertical;
    width: 100%;
}

.calendar-sidebar-note-form textarea:focus {
    border-color: #3b82f6;
    outline: none;
}

.calendar-sidebar-subtasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.calendar-sidebar-subtask {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
}

.calendar-sidebar-subtask-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.calendar-sidebar-subtask-check {
    align-items: center;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    color: transparent;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.05rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    width: 1.35rem;
}

.calendar-sidebar-subtask.is-in-progress .calendar-sidebar-subtask-check {
    background: #facc15;
    border-color: #eab308;
    color: #713f12;
}

.calendar-sidebar-subtask.is-completed .calendar-sidebar-subtask-check {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.calendar-sidebar-subtask-comment {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    min-height: 3rem;
    padding: 0.45rem 0.55rem;
    resize: vertical;
    width: 100%;
}

.calendar-sidebar-subtask-comment:focus {
    border-color: #3b82f6;
    outline: none;
}

.calendar-sidebar-subtask-comment-readonly {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0;
}

.calendar-sidebar-subtask-title {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.35;
}

.calendar-sidebar-subtask.is-completed .calendar-sidebar-subtask-title {
    color: #94a3b8;
    text-decoration: line-through;
}

.calendar-sidebar-subtask-delete {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0;
    padding: 0.15rem;
}

.calendar-sidebar-subtask:hover .calendar-sidebar-subtask-delete {
    opacity: 1;
}

.calendar-sidebar-subtask-form {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem;
}

.calendar-sidebar-subtask-form input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 1;
    font: inherit;
    padding: 0.55rem 0.7rem;
}

.calendar-sidebar-subtask-form input:focus {
    border-color: #3b82f6;
    outline: none;
}

.calendar-empty-hint {
    background: #fff;
    border: 1px dashed #dbe3ee;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
    padding: 1rem;
    text-align: center;
}

.btn-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.btn-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.crm-events-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crm-events-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
}

.crm-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.crm-event-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0.85rem 1rem;
    transition: box-shadow 0.15s ease;
}

.crm-event-card:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.crm-event-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.crm-event-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.crm-event-card-meta {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.crm-event-card-desc {
    color: var(--text);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

.crm-event-kind-badge {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    text-transform: uppercase;
}

.crm-event-kind-badge.kind-event {
    background: #dbeafe;
    color: #1d4ed8;
}

.crm-event-kind-badge.kind-task {
    background: #ffedd5;
    color: #c2410c;
}

.calendar-user-role {
    color: var(--muted);
    font-size: 0.8rem;
}

.calendar-team-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.calendar-team-label {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.calendar-assignee-mode {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.calendar-assignee-option {
    align-items: center;
    color: var(--text);
    display: flex;
    font-size: 0.875rem;
    gap: 0.45rem;
}

.calendar-user-picks {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 10rem;
    overflow-y: auto;
    padding: 0.5rem 0.65rem;
}

.calendar-user-picks label {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    gap: 0.45rem;
}

.calendar-sidebar-view-mode,
.calendar-sidebar-edit-mode {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.calendar-sidebar-edit-mode.hidden {
    display: none;
}

.calendar-sidebar-view-mode.hidden {
    display: none;
}

.calendar-edit-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    overflow: auto;
    padding: 1rem 1.15rem 1.5rem;
}

.calendar-edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.calendar-edit-field label,
.calendar-edit-section-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

.calendar-edit-input {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.calendar-edit-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    outline: none;
}

.calendar-edit-input[readonly] {
    background: #f8fafc;
    color: #475569;
}

.calendar-edit-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.calendar-assignee-mode-pills {
    display: flex;
    gap: 0.5rem;
}

.calendar-mode-pill {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
}

.calendar-mode-pill.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    font-weight: 600;
}

.calendar-user-avatar-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.25rem 0;
}

.calendar-user-avatar-pick {
    align-items: center;
    border: 3px solid transparent;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    width: 2.25rem;
}

.calendar-user-avatar-pick:hover {
    transform: translateY(-1px);
}

.calendar-user-avatar-pick.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
}

.calendar-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.calendar-edit-delete-btn {
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    width: 100%;
}

.calendar-edit-delete-btn:hover {
    background: #fef2f2;
}

/* Team (admin) */
.team-layout {
    margin: 0 auto;
    max-width: 1100px;
}

.team-toolbar {
    margin-bottom: 1rem;
}

.team-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.team-subtab {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
}

.team-subtab.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.team-view-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.team-users-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    border-collapse: collapse;
    box-shadow: var(--shadow);
    width: 100%;
}

.team-users-table th,
.team-users-table td {
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    padding: 0.7rem 0.85rem;
    text-align: left;
}

.team-users-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.team-users-actions-col {
    text-align: right;
    width: 11rem;
}

.team-users-table tr:last-child td {
    border-bottom: none;
}

.team-user-row {
    cursor: pointer;
}

.team-user-row:hover td {
    background: var(--hover-bg);
}

.team-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.team-action-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.35rem;
    line-height: 1;
    padding: 0.42rem 0.65rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
}

.team-action-btn svg {
    flex-shrink: 0;
}

.team-action-btn--edit:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.team-action-btn--delete {
    border-color: #fecdd3;
    color: #be123c;
}

.team-action-btn--delete:hover {
    background: #fff1f2;
    border-color: #fb7185;
    box-shadow: 0 2px 6px rgba(190, 18, 60, 0.08);
    color: #9f1239;
}

.team-user-modal-actions {
    align-items: center;
    justify-content: space-between;
}

.team-user-modal-actions .modal-actions-right {
    display: flex;
    gap: 0.5rem;
}

.team-user-modal-actions #delete-team-user {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
}

.team-status-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
}

.team-status-pill.is-active {
    background: #dcfce7;
    color: #15803d;
}

.team-status-pill.is-inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.team-role-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
}

.team-roles-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.team-role-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.team-role-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.team-role-card-key {
    color: var(--muted);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
}

.team-role-card-desc {
    color: var(--text);
    font-size: 0.875rem;
    margin: 0;
}

.team-permission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.team-permission-tag {
    background: #f1f5f9;
    border-radius: 999px;
    color: #334155;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
}

.team-permission-tag.is-all {
    background: #dbeafe;
    color: #1d4ed8;
}

.team-soon-badge {
    background: #fef3c7;
    border-radius: 999px;
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    text-transform: uppercase;
}

.team-permissions-grid {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
}

.team-permissions-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.team-permissions-grid label {
    align-items: center;
    display: flex;
    font-size: 0.875rem;
    gap: 0.45rem;
}

.team-permissions-grouped {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.team-permissions-group {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.75rem;
}

.team-permissions-group-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
    color: var(--muted);
}

.team-role-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.team-role-card-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
}

.team-proforma-defaults-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr;
    margin-bottom: 0.65rem;
}

.team-section-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.doc-table.doc-hide-sums th:nth-child(4),
.doc-table.doc-hide-sums td:nth-child(4) {
    display: none;
}

.admin-only-tab.hidden {
    display: none;
}


.modal.modal-right-drawer {
    justify-content: flex-end;
    padding: 0;
}

.modal.modal-right-drawer .modal-content {
    animation: drawerSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    border-left: 1px solid var(--border);
    height: 100vh;
    max-height: 100vh;
    max-width: min(480px, 94vw);
    width: 100%;
}

@keyframes drawerSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}


.crm-events-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 1024px) {
    .crm-events-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.crm-events-list .crm-event-card {
    margin-bottom: 0;
}

@media (max-width: 760px) {
    :root {
        --app-header-height: 56px;
    }

    body {
        overflow-x: hidden;
    }

    body.mobile-nav-open {
        overflow: hidden;
    }

    .app-header {
        gap: 0.75rem;
        padding: 0 0.75rem;
        position: sticky;
        top: 0;
        z-index: 500;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .app-tabs-primary,
    .app-tabs-secondary {
        background: var(--surface);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        left: 0;
        max-width: 320px;
        padding: 0 0.85rem;
        position: fixed;
        transform: translateX(-105%);
        transition: transform var(--transition-smooth);
        width: min(84vw, 320px);
        z-index: 550;
    }

    .app-tabs-primary {
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        bottom: 0;
        overflow-y: auto;
        padding-top: 0.85rem;
        top: 0;
    }

    .app-tabs-secondary {
        border-top: 1px solid var(--border);
        padding-bottom: 0.85rem;
        padding-top: 0.55rem;
        top: 20rem;
    }

    body.mobile-nav-open .app-tabs-primary,
    body.mobile-nav-open .app-tabs-secondary {
        transform: translateX(0);
    }

    .tab {
        border-bottom: 0;
        border-radius: var(--radius);
        padding: 0.85rem 1rem;
        text-align: left;
        width: 100%;
    }

    .tab.active {
        background: #eef2ff;
        color: var(--accent);
    }

    .mobile-nav-backdrop {
        z-index: 450;
    }

    .header-actions {
        flex: 1;
        gap: 0.4rem;
        justify-content: flex-end;
        min-width: 0;
    }

    .profile-menu {
        max-width: calc(100vw - 1.5rem);
        right: 0;
        width: 17rem;
    }

    main {
        padding: 0.75rem;
    }

    .app-content-panel,
    .app-list-panel {
        width: 100%;
    }

    .fakturi-upload-bar,
    .invoice-toolbar,
    .operation-options,
    .table-toolbar,
    .panel-toolbar,
    .crm-linked-toolbar,
    .calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .fakturi-upload-bar {
        justify-content: flex-start;
        max-width: none;
        padding: 0.85rem;
        gap: 0.75rem;
    }

    .field-group,
    .location-group,
    .fakturi-pipeline-group,
    #table-filter,
    #lands-filter,
    #subscriptions-filter,
    .app-search-input {
        max-width: none;
        width: 100%;
    }

    .fakturi-upload-bar .field-group,
    .fakturi-upload-bar .location-group,
    .fakturi-upload-bar .fakturi-pipeline-group,
    .invoice-form .field-group,
    .invoice-form .search-wrap,
    .invoice-form .company-field-group,
    .invoice-toolbar .field-group,
    .operation-options .field-group {
        flex: 0 0 auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .upload-label,
    #clear-proforma-blocks,
    .location-price-hint,
    .upload-status {
        align-self: stretch;
        text-align: center;
    }

    #proforma-blocks-container {
        gap: 0.75rem;
        max-width: none;
    }

    .invoice-form {
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .invoice-toolbar,
    .operation-options {
        gap: 0.6rem;
    }

    .proforma-pricing-fields {
        align-items: end;
        display: grid;
        gap: 0.45rem;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        width: 100%;
    }

    .proforma-pricing-fields .num-group {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }

    .proforma-pricing-fields .num-input {
        min-width: 0;
        width: 100%;
    }

    .proforma-pricing-fields .multiply {
        align-self: end;
        margin: 0 0 0.65rem;
    }

    .sum-group {
        width: 100%;
    }

    .sum-wrap .num-total {
        min-width: 0;
        width: 8rem;
    }

    .table-toolbar {
        gap: 0.6rem;
    }

    .table-toolbar .btn-primary,
    .table-toolbar .btn-secondary,
    .table-toolbar .page-btn,
    .columns-menu-wrap,
    .columns-menu-wrap button {
        width: 100%;
    }

    .company-count,
    .table-pagination {
        margin-left: 0;
        width: 100%;
    }

    .table-pagination {
        justify-content: space-between;
    }

    .table-wrap {
        max-height: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.82rem;
        min-width: 520px;
    }

    th,
    td {
        padding: 0.55rem 0.6rem;
    }

    #companies-table {
        min-width: 100%;
    }

    #companies-table th[data-col],
    #companies-table td[data-col] {
        display: none;
    }

    #companies-table th[data-col="expand"],
    #companies-table th[data-col="ContragentID"],
    #companies-table th[data-col="NAME"],
    #companies-table th[data-col="BUL"],
    #companies-table td[data-col="expand"],
    #companies-table td[data-col="ContragentID"],
    #companies-table td[data-col="NAME"],
    #companies-table td[data-col="BUL"] {
        display: table-cell;
    }

    #companies-table .company-detail-row td {
        display: table-cell;
    }

    #companies-table .company-detail-row {
        display: table-row;
    }

    .company-detail-view {
        bottom: auto;
        height: calc(100vh - var(--app-header-height));
        overflow-y: auto;
        top: var(--app-header-height);
        -webkit-overflow-scrolling: touch;
    }

    .company-detail-topbar {
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: space-between;
        padding: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .company-detail-top-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .company-detail-layout {
        flex-direction: column;
        min-height: auto;
        overflow: visible;
    }

    .company-detail-sidebar {
        border-bottom: 1px solid var(--border);
        border-right: 0;
        display: grid;
        gap: 0.55rem 0.75rem;
        grid-template-columns: auto minmax(0, 1fr);
        max-height: none;
        overflow: visible;
        padding: 1rem;
        width: 100%;
    }

    .company-detail-avatar {
        grid-column: 1;
        grid-row: 1;
        height: 44px;
        margin-bottom: 0;
        width: 44px;
    }

    .company-detail-name {
        align-self: center;
        font-size: 1rem;
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        min-width: 0;
    }

    .company-detail-section {
        grid-column: 1 / -1;
    }

    .company-detail-section h3 {
        margin: 0.2rem 0 0.35rem;
    }

    .company-detail-fields {
        border-top: 1px solid var(--border);
        display: grid;
        gap: 0;
        grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    }

    .company-detail-fields dt,
    .company-detail-fields dd {
        border-bottom: 1px solid #eef2f7;
        min-height: 2rem;
        padding: 0.38rem 0;
    }

    .company-detail-fields dt {
        align-self: stretch;
        font-size: 0.76rem;
        font-weight: 600;
        padding-right: 0.75rem;
    }

    .company-detail-fields dd {
        color: var(--text);
        text-align: right;
    }

    .company-detail-field-value .editable-cell {
        display: inline-block;
        max-width: 100%;
        min-width: 0;
        padding-right: 1rem;
        text-align: right;
    }

    .company-detail-main {
        min-height: auto;
        overflow: visible;
    }

    .company-detail-tabs {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        gap: 0.25rem;
        overflow-x: auto;
        padding: 0.5rem 0.75rem;
        position: sticky;
        top: 3.55rem;
        z-index: 4;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .company-tab {
        background: #f8fafc;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        flex: 0 0 auto;
        padding: 0.5rem 0.75rem;
    }

    .company-tab.active {
        background: #dcfce7;
        border-color: #86efac;
        color: #166534;
    }

    .company-tab-panel {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
        padding: 0.75rem;
    }

    .doc-table-wrap,
    .company-deals-table-wrap,
    .crm-files-panel,
    .crm-linked-entities-panel,
    .crm-linked-list,
    .crm-list {
        max-height: none;
        overflow-y: visible;
    }

    .doc-table-wrap,
    .company-deals-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .crm-timeline {
        max-width: none;
    }

    .crm-timeline-day-head {
        gap: 0 0.5rem;
        grid-template-columns: 3.6rem 1rem 1fr;
    }

    .crm-files-panel {
        max-width: none;
    }

    .drive-shell {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-left: calc(-1 * 0.75rem);
        margin-right: calc(-1 * 0.75rem);
        padding: 0.75rem;
    }

    .drive-tabs {
        overflow-x: auto;
        padding-bottom: 0.55rem;
    }

    .drive-tab {
        flex: 1 0 auto;
        min-width: 7rem;
    }

    .drive-toolbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .drive-toolbar-actions {
        justify-content: flex-start;
    }

    .drive-search-wrap {
        width: 100%;
    }

    .drive-list {
        border: 0;
    }

    .drive-list-head {
        display: none;
    }

    .drive-row {
        border: 1px solid #dbe4f0;
        border-radius: 8px;
        gap: 0.35rem 0.65rem;
        grid-template-columns: auto minmax(0, 1fr);
        margin-bottom: 0.55rem;
        min-height: 0;
        padding: 0.75rem;
    }

    .drive-row .drive-kind-icon {
        grid-row: span 2;
    }

    .drive-meta,
    .drive-actions,
    .drive-row-action {
        grid-column: 2;
    }

    .drive-actions {
        justify-content: space-between;
    }

    .drive-folder-grid {
        grid-template-columns: 1fr;
    }

    .drive-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .drive-pagination-actions {
        justify-content: space-between;
    }

    .drive-link-form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .drive-action-panel-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .drive-action-panel-actions .btn-primary,
    .drive-action-panel-actions .btn-secondary,
    .drive-download-local {
        justify-content: center;
        width: 100%;
    }

    .crm-files-header,
    .crm-linked-item,
    .crm-events-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .crm-files-add-wrap,
    .crm-files-add-wrap .btn-secondary,
    .crm-linked-item .btn-secondary,
    .crm-events-toolbar .btn-secondary {
        width: 100%;
    }

    .calendar-layout {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-left: calc(-1 * 0.75rem);
        margin-right: calc(-1 * 0.75rem);
        max-width: none;
        padding: 0;
        width: calc(100% + 1.5rem);
    }

    .calendar-assigned-sidebar {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        max-height: none;
        min-height: 0;
        overflow: visible;
        position: static;
        width: 100%;
    }

    .calendar-view-toggle {
        padding: 0.75rem 0.75rem 0.15rem;
    }

    .calendar-assigned-summary {
        margin: 0.65rem 0.75rem 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    .calendar-assigned-list {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
        padding: 0.55rem;
    }

    .calendar-assigned-item {
        border-radius: var(--radius);
        padding: 0.55rem 0.65rem;
    }

    .calendar-main,
    .calendar-page {
        width: 100%;
    }

    .calendar-main {
        overflow: visible;
        padding: 0 0.75rem;
    }

    .calendar-page {
        overflow: visible;
    }

    .calendar-toolbar {
        gap: 0.55rem;
        margin-bottom: 0.65rem;
    }

    .calendar-toolbar #calendar-today-btn {
        width: 100%;
    }

    .calendar-nav,
    .calendar-toolbar-end,
    .calendar-toolbar-actions {
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
    }

    .calendar-nav .btn-secondary,
    .calendar-toolbar-actions .btn-secondary,
    .calendar-filter-toggle {
        flex: 1 1 0;
    }

    .calendar-toolbar-actions .calendar-only-my-tasks-btn {
        flex: 1 1 100%;
    }

    .calendar-month-label {
        font-size: 1.25rem;
        line-height: 1.2;
        width: 100%;
    }

    .calendar-weekdays,
    .calendar-month-grid {
        min-width: 0;
        width: 100%;
    }

    .calendar-weekdays {
        font-size: 0.72rem;
        gap: 1px;
        margin-bottom: 0.25rem;
    }

    .calendar-month-grid {
        border-radius: var(--radius);
    }

    .calendar-day-cell {
        min-height: 5.4rem;
        min-width: 0;
        overflow: hidden;
        padding: 0.24rem;
    }

    .calendar-day-top {
        margin-bottom: 0.12rem;
        min-height: 1.15rem;
    }

    .calendar-day-num {
        font-size: 0.8rem;
        line-height: 1.35rem;
    }

    .calendar-day-cell.today .calendar-day-num {
        height: 1.35rem;
        min-width: 1.35rem;
    }

    .calendar-day-actions {
        display: none;
    }

    .calendar-day-items {
        gap: 0.12rem;
        min-width: 0;
        overflow: hidden;
    }

    .calendar-day-chip {
        border-radius: 3px;
        font-size: 0.64rem;
        gap: 0.16rem;
        line-height: 1.2;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        padding: 0.14rem 0.18rem;
    }

    .calendar-day-chip-label {
        min-width: 0;
    }

    .calendar-task-urgency-badge {
        font-size: 0.55rem;
        height: 0.9rem;
        width: 0.9rem;
    }

    .calendar-chip-hover-popup {
        display: none !important;
    }

    .calendar-team-grid-wrap,
    .calendar-team-grid-scroll {
        border: 0;
        max-height: none;
        overflow: visible;
        width: 100%;
    }

    .calendar-team-grid {
        border-collapse: separate;
        border-spacing: 0;
        display: block;
        font-size: 0.66rem;
        min-width: 0;
        width: 100%;
    }

    .calendar-team-grid thead {
        display: none;
    }

    .calendar-team-grid tbody,
    .calendar-team-grid tr,
    .calendar-team-grid th,
    .calendar-team-grid td {
        display: block;
        width: 100%;
    }

    .calendar-team-grid tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 0.45rem;
        overflow: hidden;
    }

    .calendar-team-grid tr.is-empty-day {
        display: none;
    }

    .calendar-team-grid .calendar-team-date-col {
        background: #f8fafc;
        border: 0;
        border-bottom: 1px solid var(--border);
        color: #334155;
        font-size: 0.76rem;
        left: auto;
        min-width: 0;
        padding: 0.4rem 0.55rem;
        position: static;
        white-space: normal;
        z-index: auto;
    }

    .calendar-team-cell {
        border: 0;
        border-bottom: 1px solid #e2e8f0;
        min-width: 0;
        padding: 0.45rem 0.55rem;
    }

    .calendar-team-cell.is-empty {
        display: none;
    }

    .calendar-team-cell::before {
        color: var(--muted);
        content: attr(data-user-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        margin-bottom: 0.22rem;
        text-transform: uppercase;
    }

    .calendar-team-cell:last-child {
        border-bottom: 0;
    }

    .calendar-team-entry-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-filter-panel {
        border-radius: var(--radius);
        box-shadow: none;
        left: auto;
        margin-top: 0.45rem;
        max-width: 100%;
        position: static;
        right: auto;
        top: auto;
        width: 100%;
    }

    .calendar-filter-dropdown {
        position: static;
        width: 100%;
    }

    .calendar-filter-panel-body {
        max-height: none;
        overflow: visible;
    }

    .calendar-filter-section-summary {
        padding: 0.5rem 0.65rem;
    }

    .calendar-filter-options {
        padding: 0 0.55rem 0.55rem;
    }

    .modal-content,
    .modal.modal-right-drawer .modal-content {
        max-width: 100vw;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .current-user,
    .sync-status {
        display: none;
    }

    .profile-menu .current-user {
        display: block;
    }

    .btn-sm {
        padding: 0.4rem 0.55rem;
    }

    #companies-table th[data-col="ContragentID"],
    #companies-table td[data-col="ContragentID"] {
        width: 4.5rem;
    }

    #companies-table th[data-col="BUL"],
    #companies-table td[data-col="BUL"] {
        width: 7rem;
    }

}