/* ==========================================================================
   Primitives  —  spec: docs/features/62-ui-ux-design-system.md §4.1, §4.2, §4.3
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast),
                color var(--motion-fast), box-shadow var(--motion-fast);
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--action-primary);
    color: var(--text-inverse);
}
.btn--primary:hover:not(:disabled) { background: var(--action-primary-hover); }

.btn--secondary {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.btn--secondary:hover:not(:disabled) { background: var(--bg-subtle); }

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn--ghost:hover:not(:disabled) {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.btn--danger {
    background: var(--tag-danger-dot);
    color: var(--text-inverse);
}
.btn--danger:hover:not(:disabled) { background: var(--tag-danger-fg); }

/* AI pill — violet, reserved for AI affordances only (§2.2) */
.btn--ai {
    background: var(--accent-ai-bg);
    border-color: var(--accent-ai-border);
    color: var(--accent-ai);
    border-radius: var(--radius-full);
    height: var(--control-height-md);
    padding: 0 var(--space-3);
}
.btn--ai:hover:not(:disabled) { background: #EDE9FE; }

.btn--sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--t-label-size); }
.btn--md { height: var(--control-height-md); padding: 0 var(--space-3); }
.btn--block { width: 100%; }

.btn__icon { display: inline-flex; flex-shrink: 0; }

/* Icon-only button */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height-md);
    height: var(--control-height-md);
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--motion-fast), color var(--motion-fast);
}
.icon-btn:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text-primary); }
.icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn--sm { width: var(--control-height-sm); height: var(--control-height-sm); }
.icon-btn--bordered { border-color: var(--border-strong); background: var(--bg-surface); }

/* Notification dot on an icon button */
.icon-btn { position: relative; }
.icon-btn__dot {
    position: absolute;
    top: 6px; right: 7px;
    width: 6px; height: 6px;
    border-radius: var(--radius-full);
    background: var(--tag-danger-dot);
    border: 1.5px solid var(--bg-surface);
}

/* Stacked icon-over-label action row (§4.2) */
.action-row { display: flex; gap: var(--space-1); }
.action-row__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 48px;
    padding: var(--space-2) var(--space-1);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--t-meta-size);
    cursor: pointer;
    transition: background-color var(--motion-fast);
}
.action-row__item:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Field — label + control + helper
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--t-label-size);
    font-weight: var(--t-label-weight);
    line-height: var(--t-label-lh);
    color: var(--text-primary);
}
.field__required { color: var(--tag-danger-dot); }

.field__helper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--text-secondary);
}
.field__error {
    font-size: var(--t-meta-size);
    line-height: var(--t-meta-lh);
    color: var(--tag-danger-fg);
}

/* --------------------------------------------------------------------------
   Input frame — shared by text, select, date, currency
   -------------------------------------------------------------------------- */

.input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.input:focus-within {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.input--invalid { border-color: var(--tag-danger-dot); }
.input--invalid:focus-within { box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }

.input--disabled {
    background: var(--bg-muted);
    cursor: not-allowed;
}

.input__control {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--t-body-size);
    color: var(--text-primary);
}
.input__control::placeholder { color: var(--text-tertiary); }
.input__control:disabled { cursor: not-allowed; }

.input__affix {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-tertiary);
}
.input__affix--text { color: var(--text-secondary); font-size: var(--t-body-size); }

/* Button-like select trigger */
.input--trigger { cursor: pointer; user-select: none; }
.input--trigger .input__value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.input__placeholder { color: var(--text-tertiary); }

/* Currency split control (§4.1) */
.currency { display: flex; align-items: stretch; gap: var(--space-2); }
.currency__code {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: var(--t-body-size);
    cursor: pointer;
    white-space: nowrap;
}
.currency__amount { flex: 1; }

/* Textarea */
.textarea {
    min-height: 88px;
    padding: var(--space-3);
    align-items: flex-start;
}
.textarea .input__control { height: auto; resize: vertical; line-height: var(--t-body-lh); }

/* Checkbox */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--t-body-size);
    color: var(--text-primary);
}
.checkbox__box {
    appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    transition: background-color var(--motion-fast), border-color var(--motion-fast);
    position: relative;
}
.checkbox__box:checked {
    background: var(--action-primary);
    border-color: var(--action-primary);
}
.checkbox__box:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid var(--text-inverse);
    border-width: 0 1.75px 1.75px 0;
    transform: rotate(45deg);
}
.checkbox__box:indeterminate {
    background: var(--action-primary);
    border-color: var(--action-primary);
}
.checkbox__box:indeterminate::after {
    content: "";
    position: absolute;
    left: 3px; top: 6.5px;
    width: 8px; height: 0;
    border-top: 1.75px solid var(--text-inverse);
    transform: none;
}

/* Search field — used in headers (§3.2) */
.search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height-md);
    padding: 0 var(--space-3);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-fast), background-color var(--motion-fast);
}
.search:focus-within {
    background: var(--bg-surface);
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.search__control {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--t-body-size);
    color: var(--text-primary);
}
.search__control::placeholder { color: var(--text-tertiary); }
.search__kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--bg-surface);
}

/* --------------------------------------------------------------------------
   Tag
   -------------------------------------------------------------------------- */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--t-meta-size);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.tag--neutral { color: var(--tag-neutral-fg); background: var(--tag-neutral-bg); }
.tag--info    { color: var(--tag-info-fg);    background: var(--tag-info-bg); }
.tag--success { color: var(--tag-success-fg); background: var(--tag-success-bg); }
.tag--warning { color: var(--tag-warning-fg); background: var(--tag-warning-bg); }
.tag--danger  { color: var(--tag-danger-fg);  background: var(--tag-danger-bg); }
.tag--rose    { color: var(--tag-rose-fg);    background: var(--tag-rose-bg); }
.tag--violet  { color: var(--tag-violet-fg);  background: var(--tag-violet-bg); }

.tag__icon { display: inline-flex; flex-shrink: 0; }

/* Dot indicator — compact alternative to a tag (§2.3) */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
}
.dot--neutral { background: var(--tag-neutral-dot); }
.dot--info    { background: var(--tag-info-dot); }
.dot--success { background: var(--tag-success-dot); }
.dot--warning { background: var(--tag-warning-dot); }
.dot--danger  { background: var(--tag-danger-dot); }
.dot--rose    { background: var(--tag-rose-dot); }
.dot--violet  { background: var(--tag-violet-dot); }

.dot-label { display: inline-flex; align-items: center; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--xs { width: 20px; height: 20px; font-size: 10px; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.avatar--md { width: 32px; height: 32px; font-size: 13px; }
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.avatar--xl { width: 64px; height: 64px; font-size: 22px; }

.avatar-group { display: inline-flex; }
.avatar-group .avatar + .avatar { margin-left: -8px; border: 2px solid var(--bg-surface); }

/* --------------------------------------------------------------------------
   Card / section
   -------------------------------------------------------------------------- */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.card__title {
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    line-height: var(--t-section-lh);
}
.card__subtitle {
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}
.card__body { padding: var(--space-4); }

/* Collapsible section (record detail) */
.section { border-bottom: 1px solid var(--border); }
.section__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) 0;
    background: none;
    border: none;
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}
.section__chevron { transition: transform var(--motion-base); color: var(--text-secondary); }
.section__chevron--open { transform: rotate(180deg); }
.section__body { padding-bottom: var(--space-4); }

/* Label / value row */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); padding: var(--space-2) 0; }
.kv__key { font-size: var(--t-body-size); color: var(--text-secondary); }
.kv__value { font-size: var(--t-body-size); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Stat tile (§4.3)
   -------------------------------------------------------------------------- */

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.stat__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}
.stat__row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.stat__value {
    font-size: var(--t-stat-size);
    font-weight: var(--t-stat-weight);
    line-height: var(--t-stat-lh);
}
.stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--t-meta-size);
    font-weight: 500;
}
.stat__delta--up { color: var(--tag-success-fg); }
.stat__delta--down { color: var(--tag-danger-fg); }
.stat__previous { font-size: var(--t-meta-size); color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   Note card / timeline (§4.3)
   -------------------------------------------------------------------------- */

.note-card {
    padding: var(--space-3);
    background: var(--tag-warning-bg);
    border-left: 3px solid var(--tag-warning-dot);
    border-radius: var(--radius-lg);
}
.note-card__title { font-size: var(--t-body-size); font-weight: 500; }
.note-card__body { font-size: var(--t-body-size); color: var(--text-secondary); }

.timeline { display: flex; flex-direction: column; }
.timeline__item { display: flex; gap: var(--space-3); padding-bottom: var(--space-5); position: relative; }
.timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px; top: 30px; bottom: 0;
    width: 1px;
    background: var(--border);
}
.timeline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    color: var(--text-secondary);
    z-index: 1;
}
.timeline__content { flex: 1; min-width: 0; }
.timeline__title { font-size: var(--t-body-size); }
.timeline__meta { font-size: var(--t-meta-size); color: var(--text-secondary); }
.timeline__detail {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Empty state / skeleton (§4.3)
   -------------------------------------------------------------------------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    text-align: center;
}
.empty-state__icon { color: var(--text-tertiary); }
.empty-state__title { font-size: var(--t-body-size); font-weight: 500; }
.empty-state__body { font-size: var(--t-label-size); color: var(--text-secondary); max-width: 380px; }

.skeleton {
    background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.progress {
    height: 4px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress__fill {
    height: 100%;
    background: var(--action-primary);
    border-radius: var(--radius-full);
    transition: width var(--motion-base);
}

/* --------------------------------------------------------------------------
   Callout — an inline message attached to the thing it is about
   Distinct from a toast, which is transient and global. A callout stays on screen because what it
   says stays true: a customer is still inactive, a name is still a possible duplicate.
   -------------------------------------------------------------------------- */

.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: var(--t-body-size);
    line-height: 1.5;
}

.callout > svg { flex-shrink: 0; margin-top: 2px; }

.callout--warning {
    background: var(--tag-warning-bg);
    border-color: var(--tag-warning-dot);
    color: var(--tag-warning-fg);
}

.callout--danger {
    background: var(--tag-danger-bg);
    border-color: var(--tag-danger-dot);
    color: var(--tag-danger-fg);
}

/* ---- Document editor (invoices, and the sales documents that follow) ------ */

.editor { display: flex; flex-direction: column; gap: var(--space-4); }

.editor__panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.editor__title {
    font-size: var(--t-panel-title-size);
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

/* auto-fit rather than a fixed count: the same grid serves a two-field row and a four-field one,
   and collapses to one column on a narrow screen without a breakpoint of its own. */
.editor__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.lines { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }

.lines th {
    text-align: left;
    font-size: var(--t-meta-size);
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0 var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--border);
}

.lines td { padding: var(--space-2); vertical-align: top; border-bottom: 1px solid var(--border); }

.lines__num { text-align: right; }
.lines__num .input__control { text-align: right; }

/* The money block reads as a column of figures, so it is right-aligned and capped —
   totals spread across a wide screen stop lining up with each other. */
.totals { margin: var(--space-5) 0 0 auto; max-width: 340px; }

.totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    font-size: var(--t-body-size);
}

.totals__row dt { color: var(--text-secondary); margin: 0; }
.totals__row dd { margin: 0; font-variant-numeric: tabular-nums; }

.totals__row--grand {
    border-top: 1px solid var(--text-primary);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    font-weight: 600;
}

.totals__row--grand dt { color: var(--text-primary); }

/* ---- Record page (sales documents) --------------------------------------- */

.record { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); }

@media (max-width: 1100px) {
    .record { grid-template-columns: minmax(0, 1fr); }
}

.record__main, .record__side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.record__headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.record__title {
    font-size: var(--t-record-title-size);
    font-weight: var(--t-record-title-weight);
    line-height: var(--t-record-title-lh);
    margin: var(--space-2) 0 0;
}

.record__amount { text-align: right; display: flex; flex-direction: column; gap: var(--space-1); }

.record__amount-value {
    font-size: var(--t-stat-size);
    font-weight: var(--t-stat-weight);
    line-height: var(--t-stat-lh);
    font-variant-numeric: tabular-nums;
}

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.timeline__entry { display: flex; flex-direction: column; gap: 2px; }

.timeline__what { font-size: var(--t-body-size); }

/* ---- Public document page ------------------------------------------------ */

.public-doc { display: flex; justify-content: center; padding: var(--space-8) var(--space-4); }

.public-doc__card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
    width: 100%;
    max-width: 820px;
}

.public-doc__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.public-doc__meta { margin: 0 0 var(--space-6); }