/* Geist fonts (self-hosted, copied from the original build) */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-ff2310f5.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-875ccdd4.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-52306abf.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-001175b1.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-98bbbccb.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --font-geist-sans: 'Geist'; }

/* ==== App styles extracted from the original compiled build ==== */
:root {
    --bg: #f7f8fa;
    --surface: #fff;
    --surface-subtle: #f9fafb;
    --text: #101828;
    --secondary: #667085;
    --tertiary: #98a2b3;
    --border: #e4e7ec;
    --border-strong: #d0d5dd;
    --brand: #39358f;
    --brand-hover: #302d78;
    --brand-subtle: #f2f1fa;
    --success: #067647;
    --success-bg: #ecfdf3;
    --warning: #b54708;
    --warning-bg: #fffaeb;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 2px 6px rgba(16, 24, 40, .08);
    --shadow-md: 0 12px 40px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .06);
    --shadow-lg: 0 20px 60px rgba(16, 24, 40, .3)
}

* {
    box-sizing: border-box
}

html {
    background: var(--bg)
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-geist-sans), Arial, sans-serif;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit
}

button,
a {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

.app-frame {
    min-height: 100vh
}

.app-nav {
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 20;
    flex-direction: column;
    width: 224px;
    padding: 20px 16px;
    display: flex;
    position: fixed;
    inset: 0 auto 0 0
}

.logo {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 8px 18px;
    display: flex
}

.logo img {
    object-fit: contain;
    width: 34px;
    height: 34px
}

.logo b,
.logo small {
    display: block
}

.logo b {
    font-size: 0.875rem;
    font-weight: 650
}

.logo small {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.nav-section {
    color: var(--tertiary);
    margin: 20px 10px 8px;
    font-size: 0.75rem;
    font-weight: 600
}

.app-nav nav {
    gap: 2px;
    display: grid
}

.app-nav nav a {
    color: #475467;
    border-left: 2px solid #0000;
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 11px;
    font-size: 0.875rem;
    display: flex
}

.app-nav nav a>span:empty {
    display: none
}

.app-nav nav a:hover {
    background: var(--surface-subtle);
    color: var(--text)
}

.app-nav nav a.active {
    background: var(--brand-subtle);
    border-left-color: var(--brand);
    color: var(--brand);
    font-weight: 600
}

.app-nav nav a em {
    background: var(--brand);
    color: #fff;
    text-align: center;
    border-radius: var(--radius-lg);
    min-width: 20px;
    margin-left: auto;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-style: normal
}

.user-card {
    border-top: 1px solid var(--border);
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 16px 6px 0;
    display: flex
}

.user-avatar {
    background: var(--brand-subtle);
    width: 34px;
    height: 34px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 650;
    display: grid;
    position: relative
}

.user-avatar i {
    background: #12b76a;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 0;
    right: 0
}

.user-card b,
.user-card small {
    display: block
}

.user-card b {
    font-size: 0.8125rem;
    font-weight: 600
}

.user-card small {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.user-card button {
    color: var(--tertiary);
    background: 0 0;
    border: 0;
    margin-left: auto
}

.app-main {
    width: calc(100% - 224px);
    min-height: 100vh;
    margin-left: 224px;
    padding: 28px 32px 56px
}

.topbar {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto 28px;
    padding-bottom: 20px;
    display: flex
}

.crumb {
    color: var(--secondary);
    font-size: 0.75rem;
    display: block
}

.topbar h1 {
    letter-spacing: -.02em;
    margin: 4px 0;
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 32px
}

.topbar p {
    color: var(--secondary);
    margin: 0;
    font-size: 0.8125rem
}

.top-actions {
    align-items: center;
    gap: 8px;
    display: flex
}

.top-actions a {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    display: flex
}

.top-actions .search-button {
    min-width: 130px;
    color: var(--secondary)
}

.top-actions .round-button {
    width: auto;
    position: relative
}

.round-button i {
    display: none
}

.top-actions .create-button,
.primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

.top-actions .create-button:hover,
.primary:hover {
    background: var(--brand-hover)
}

.page-stack,
.new-layout,
.flex-request,
.settings-layout {
    max-width: 1440px;
    margin: 0 auto
}

.page-stack {
    gap: 24px;
    display: grid
}

.overview-intro {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.overview-intro h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600
}

.overview-intro p {
    color: var(--secondary);
    margin: 4px 0 0;
    font-size: 0.8125rem
}

.primary {
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    font-weight: 550;
    display: inline-flex
}

.secondary {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    min-height: 40px;
    padding: 0 16px;
    font-weight: 500
}

.metric-grid {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;
    overflow: hidden
}

.metric {
    border-right: 1px solid var(--border);
    min-height: 112px;
    padding: 20px
}

.metric:last-child {
    border-right: 0
}

.metric small {
    color: var(--secondary);
    font-size: 0.8125rem;
    display: block
}

.metric b {
    letter-spacing: -.02em;
    margin: 8px 0 2px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 30px;
    display: block
}

.metric p {
    color: var(--tertiary);
    margin: 0;
    font-size: 0.75rem
}

.panel {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden
}

.panel-head {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 14px 20px;
    display: flex
}

.panel-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600
}

.panel-head p {
    color: var(--secondary);
    margin: 2px 0 0;
    font-size: 0.75rem
}

.panel-head a,
.panel-head button {
    color: var(--brand);
    background: 0 0;
    border: 0;
    font-size: 0.8125rem;
    font-weight: 550
}

.simple-table {
    overflow-x: auto
}

.simple-tr {
    border-bottom: 1px solid var(--border);
    grid-template-columns: minmax(230px, 1.7fr) 120px 140px 135px 120px 105px 14px;
    align-items: center;
    gap: 16px;
    min-width: 900px;
    min-height: 62px;
    padding: 0 20px;
    font-size: 0.8125rem;
    display: grid
}

.simple-tr:last-child {
    border-bottom: 0
}

.simple-tr:not(.head):hover {
    background: var(--surface-subtle)
}

.simple-tr.head {
    background: var(--surface-subtle);
    min-height: 40px;
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 500
}

.simple-tr b,
.simple-tr small {
    display: block
}

.simple-tr b {
    font-size: 0.8125rem;
    font-weight: 550
}

.simple-tr small {
    color: var(--tertiary);
    margin-top: 3px;
    font-size: 0.75rem
}

.overview-columns {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    display: grid
}

.category-row,
.next-actions>a {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    font-size: 0.8125rem;
    display: flex
}

.category-row:last-child,
.next-actions>a:last-child {
    border-bottom: 0
}

.category-row b {
    font-weight: 600
}

.next-actions>a:hover {
    background: var(--surface-subtle);
    color: var(--brand)
}

.status {
    white-space: nowrap;
    border-radius: var(--radius-xl);
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    display: inline-flex
}

.status i {
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.status-pending {
    background: var(--warning-bg);
    color: var(--warning)
}

.status-pending i {
    background: #f79009
}

.status-approved {
    background: var(--success-bg);
    color: var(--success)
}

.status-approved i {
    background: #12b76a
}

.status-rejected {
    background: var(--danger-bg);
    color: var(--danger)
}

.status-rejected i {
    background: #f04438
}

.status-revision {
    background: var(--brand-subtle);
    color: var(--brand)
}

.status-revision i {
    background: var(--brand)
}

.badge {
    color: #475467;
    background: #f2f4f7;
    border-radius: 4px;
    margin-right: 6px;
    padding: 3px 7px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block
}

.badge.urgent {
    background: var(--danger-bg);
    color: var(--danger)
}

.filter-bar {
    align-items: center;
    gap: 8px;
    display: flex
}

.filter-bar>* {
    min-height: 40px
}

.big-search {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    width: min(430px, 100%);
    color: var(--secondary);
    background: #fff;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    display: flex
}

.big-search input {
    border: 0;
    outline: 0;
    width: 100%;
    font-size: 0.8125rem
}

.filter-bar select,
.filter-bar button,
.filter-bar .export {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    align-items: center;
    padding: 0 12px;
    font-size: 0.8125rem;
    display: inline-flex
}

.filter-bar .export {
    margin-left: auto
}

.table-head {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    min-height: 64px;
    padding: 0 20px;
    display: flex
}

.table-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600
}

.table-head p {
    color: var(--secondary);
    margin: 2px 0 0;
    font-size: 0.75rem
}

.view-toggle {
    display: none
}

.request-table {
    overflow-x: auto
}

.tr {
    border-bottom: 1px solid var(--border);
    grid-template-columns: minmax(250px, 1.7fr) 140px 140px 130px 100px 16px;
    align-items: center;
    gap: 16px;
    min-width: 900px;
    min-height: 64px;
    padding: 0 20px;
    display: grid
}

.tr.th {
    background: var(--surface-subtle);
    min-height: 40px;
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 500
}

.tr:not(.th):hover {
    background: var(--surface-subtle)
}

.tr>span>b,
.tr>span>small {
    display: block
}

.tr>span>b {
    font-size: 0.8125rem;
    font-weight: 550
}

.tr>span>small {
    color: var(--tertiary);
    margin-top: 3px;
    font-size: 0.75rem
}

.request-cell {
    align-items: center;
    gap: 12px;
    display: flex
}

.request-glyph {
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    width: 32px;
    height: 32px;
    color: var(--secondary);
    border-radius: var(--radius-sm);
    flex: 0 0 32px;
    place-items: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    display: grid
}

.arrow {
    color: var(--tertiary)
}

.approval-summary {
    justify-content: space-between;
    align-items: end;
    padding: 0 0 4px;
    display: flex
}

.approval-summary .eyebrow {
    display: none
}

.approval-summary h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600
}

.approval-summary p {
    color: var(--secondary);
    margin: 5px 0 0;
    font-size: 0.8125rem
}

.summary-ring {
    display: none
}

.approval-row {
    border-bottom: 1px solid var(--border);
    grid-template-columns: 32px minmax(0, 1fr) 160px;
    gap: 16px;
    min-height: 112px;
    padding: 20px;
    display: grid
}

.approval-row:last-child {
    border-bottom: 0
}

.approval-row:hover {
    background: var(--surface-subtle)
}

.approval-row h3 {
    margin: 8px 0 4px;
    font-size: 0.9375rem;
    font-weight: 600
}

.approval-row p {
    max-width: 760px;
    color: var(--secondary);
    margin: 0 0 8px;
    font-size: 0.8125rem
}

.approval-row div>small {
    color: var(--tertiary);
    font-size: 0.75rem
}

.approval-value {
    text-align: right
}

.approval-value b,
.approval-value span,
.approval-value em {
    display: block
}

.approval-value b {
    font-weight: 600
}

.approval-value span {
    color: var(--secondary);
    margin: 7px 0 14px;
    font-size: 0.75rem
}

.approval-value em {
    color: var(--brand);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 550
}

.record-toolbar {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.record-toolbar>a {
    color: var(--brand);
    font-size: 0.8125rem
}

.record-toolbar button {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.75rem
}

.record-hero {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius);
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 20px;
    display: grid
}

.record-title h2 {
    margin: 8px 0 3px;
    font-size: 1.25rem;
    font-weight: 600
}

.record-title p {
    color: var(--secondary);
    margin: 0;
    font-size: 0.75rem
}

.record-amount {
    border-left: 1px solid var(--border);
    text-align: right;
    min-width: 170px;
    padding-left: 24px
}

.record-amount small,
.record-amount b,
.record-amount span {
    display: block
}

.record-amount small,
.record-amount span {
    color: var(--secondary);
    font-size: 0.75rem
}

.record-amount b {
    margin: 5px 0 2px;
    font-size: 1.125rem;
    font-weight: 600
}

.record-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
    display: grid
}

.record-content,
.record-route {
    padding: 22px
}

.record-content h3,
.record-route h3 {
    margin: 0 0 12px;
    font-size: 0.9375rem;
    font-weight: 600
}

.record-content h3:not(:first-child) {
    margin-top: 28px
}

.business-copy {
    color: #475467;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65
}

.detail-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    grid-template-columns: 1fr 1fr;
    display: grid;
    overflow: hidden
}

.detail-list>div {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-height: 64px;
    padding: 12px
}

.detail-list>div:nth-child(2n) {
    border-right: 0
}

.detail-list span,
.detail-list b {
    display: block
}

.detail-list span {
    color: var(--secondary);
    text-transform: capitalize;
    font-size: 0.75rem
}

.detail-list b {
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 550
}

.record-items {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto
}

.record-item {
    border-bottom: 1px solid var(--border);
    grid-template-columns: 1.2fr .8fr .6fr 1fr 1.4fr;
    align-items: center;
    gap: 12px;
    min-width: 760px;
    min-height: 48px;
    padding: 8px 12px;
    font-size: 0.75rem;
    display: grid
}

.record-item:last-child {
    border-bottom: 0
}

.record-item.head {
    background: var(--surface-subtle);
    min-height: 38px;
    color: var(--secondary);
    font-weight: 500
}

.record-item b {
    font-weight: 550
}

.documents-empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    min-height: 60px;
    color: var(--secondary);
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    font-size: 0.8125rem;
    display: flex
}

.documents-empty button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.75rem
}

.journey-step {
    gap: 10px;
    min-height: 60px;
    display: flex;
    position: relative
}

.journey-step:not(:last-child):before {
    content: "";
    border-left: 1px solid var(--border);
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 10px
}

.journey-step>span {
    border: 1px solid var(--border-strong);
    color: #fff;
    z-index: 1;
    background: #fff;
    border-radius: 50%;
    flex: 0 0 21px;
    place-items: center;
    width: 21px;
    height: 21px;
    font-size: 0.6875rem;
    display: grid
}

.journey-step.done>span {
    border-color: var(--success);
    background: var(--success)
}

.journey-step.active>span {
    border-color: var(--brand);
    background: var(--brand)
}

.journey-step b,
.journey-step small {
    display: block
}

.journey-step b {
    font-size: 0.8125rem;
    font-weight: 550
}

.journey-step small {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.audit-title {
    border-top: 1px solid var(--border);
    padding-top: 18px
}

.mini-activity {
    border-bottom: 1px solid var(--border);
    grid-template-columns: 1fr auto;
    padding: 9px 0;
    display: grid
}

.mini-activity b {
    font-size: 0.75rem
}

.mini-activity span,
.mini-activity small {
    color: var(--secondary);
    font-size: 0.75rem
}

.sticky-decision {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius);
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    display: flex;
    position: sticky;
    bottom: 16px
}

.sticky-decision>div {
    margin-right: auto
}

.sticky-decision b,
.sticky-decision span {
    display: block
}

.sticky-decision b {
    font-size: 0.8125rem
}

.sticky-decision span {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.sticky-decision button {
    border-radius: var(--radius);
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.8125rem;
    font-weight: 500
}

.sticky-decision .reject {
    color: var(--danger);
    background: #fff;
    border: 1px solid #fda29b
}

.sticky-decision .revise {
    border: 1px solid var(--border-strong);
    background: #fff
}

.sticky-decision .approve {
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff
}

.flex-request {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 24px;
    display: grid
}

.form-panel {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius)
}

.clean-form {
    padding: 28px
}

.form-section-heading {
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.form-section-heading>span {
    background: var(--brand-subtle);
    width: 24px;
    height: 24px;
    color: var(--brand);
    border-radius: 50%;
    flex: 0 0 24px;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    display: grid
}

.form-section-heading h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600
}

.form-section-heading p {
    color: var(--secondary);
    margin: 3px 0 0;
    font-size: 0.8125rem
}

.template-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 18px 0 0 36px;
    display: grid
}

.template-list label {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    display: flex
}

.template-list label:last-child {
    border-bottom: 0
}

.template-list label.selected {
    background: var(--brand-subtle)
}

.template-list input {
    accent-color: var(--brand)
}

.template-list label>span {
    flex: 1
}

.template-list b,
.template-list small {
    display: block
}

.template-list b {
    font-size: 0.8125rem;
    font-weight: 550
}

.template-list small {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.template-list i {
    background: 0 0;
    border-radius: 50%;
    width: 8px;
    height: 8px
}

.template-list label.selected i {
    background: var(--brand)
}

.section-divider {
    background: var(--border);
    height: 1px;
    margin: 28px 0
}

.form-fields {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px 0 0 36px;
    display: grid
}

.form-fields label {
    color: #344054;
    font-size: 0.8125rem;
    font-weight: 500
}

.form-fields .wide {
    grid-column: 1/-1
}

.form-fields input,
.form-fields select,
.form-fields textarea {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    outline: 0;
    width: 100%;
    min-height: 40px;
    margin-top: 6px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    font-weight: 400
}

.form-fields textarea {
    resize: vertical;
    min-height: 92px
}

.form-fields input:focus,
.form-fields select:focus,
.form-fields textarea:focus,
.repeat-row input:focus,
.repeat-row select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px #39358f1f
}

.quick-add {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 18px 0 10px 36px;
    display: flex
}

.quick-add>span {
    color: var(--secondary);
    margin-right: 4px;
    font-size: 0.75rem
}

.quick-add button,
.add-row {
    border: 1px solid var(--border-strong);
    color: #475467;
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.75rem
}

.quick-add button:hover,
.add-row:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.repeat-table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 14px 0 0 36px;
    overflow-x: auto
}

.repeat-head,
.repeat-row {
    align-items: center;
    gap: 8px;
    min-width: 880px;
    display: grid
}

.product-lines .repeat-head,
.product-lines .repeat-row {
    grid-template-columns: 1.2fr .7fr 60px 1fr 1.4fr 60px
}

.cost-lines .repeat-head,
.cost-lines .repeat-row {
    grid-template-columns: 1fr 1.8fr 65px 80px 1.1fr 110px 60px;
    min-width: 1080px
}

.repeat-head {
    background: var(--surface-subtle);
    min-height: 38px;
    color: var(--secondary);
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: 500
}

.repeat-row {
    border-top: 1px solid var(--border);
    min-height: 54px;
    padding: 7px 10px
}

.repeat-row input,
.repeat-row select {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    outline: 0;
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.75rem
}

.repeat-row button {
    color: var(--danger);
    background: 0 0;
    border: 0;
    font-size: 0.75rem
}

.add-row {
    margin: 10px 0 0 36px
}

.form-total {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    margin: 22px 0 0 36px;
    padding: 14px 0;
    display: flex
}

.form-total span {
    color: var(--secondary)
}

.form-total b {
    text-align: right;
    min-width: 150px;
    font-size: 1.125rem;
    font-weight: 600
}

.form-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    display: flex
}

.form-actions>a {
    color: var(--secondary);
    margin-right: auto;
    font-size: 0.8125rem
}

.route-summary {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    position: sticky;
    top: 24px
}

.route-summary h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600
}

.route-summary>p {
    color: var(--secondary);
    margin: 4px 0 18px;
    font-size: 0.75rem
}

.route-summary ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.route-summary li {
    gap: 10px;
    min-height: 60px;
    display: flex;
    position: relative
}

.route-summary li:not(:last-child):before {
    content: "";
    border-left: 1px solid var(--border);
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 11px
}

.route-summary li>span {
    border: 1px solid var(--border-strong);
    width: 24px;
    height: 24px;
    color: var(--secondary);
    z-index: 1;
    background: #fff;
    border-radius: 50%;
    flex: 0 0 24px;
    place-items: center;
    font-size: 0.6875rem;
    display: grid
}

.route-summary li b,
.route-summary li small {
    display: block
}

.route-summary li b {
    font-size: 0.8125rem;
    font-weight: 550
}

.route-summary li small {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.route-total {
    border-top: 1px solid var(--border);
    justify-content: space-between;
    padding-top: 14px;
    display: flex
}

.route-total span {
    color: var(--secondary);
    font-size: 0.75rem
}

.route-total b {
    font-size: 0.875rem;
    font-weight: 600
}

.workflow-banner {
    justify-content: space-between;
    align-items: end;
    padding: 0 0 4px;
    display: flex
}

.workflow-banner h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600
}

.workflow-banner p {
    max-width: 720px;
    color: var(--secondary);
    margin: 4px 0 0;
    font-size: 0.8125rem
}

.workflow-banner button {
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem
}

.workflow-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;   /* an open editor grows its own card, not its row neighbor */
    display: grid
}

.workflow-cards article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 18px;
    position: relative
}

.workflow-head {
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.workflow-head h3 {
    margin: 1px 0 3px;
    font-size: 0.9375rem;
    font-weight: 600
}

.workflow-head p {
    color: var(--secondary);
    margin: 0;
    font-size: 0.75rem
}

.switch {
    margin-left: auto
}

.switch input {
    display: none
}

.switch i {
    background: var(--border-strong);
    border-radius: var(--radius-lg);
    width: 32px;
    height: 18px;
    display: block;
    position: relative
}

.switch i:before {
    content: "";
    background: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    transition: all .15s;
    position: absolute;
    top: 2px;
    left: 2px
}

.switch input:checked+i {
    background: var(--brand)
}

.switch input:checked+i:before {
    left: 16px
}

.flow-steps {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    justify-content: space-between;
    align-items: center;
    margin: 18px 0;
    padding: 12px;
    display: flex
}

.flow-steps div {
    align-items: center;
    gap: 5px;
    display: flex
}

.flow-steps span {
    background: var(--brand-subtle);
    width: 20px;
    height: 20px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    font-size: 0.6875rem;
    display: grid
}

.flow-steps b {
    font-size: 0.75rem;
    font-weight: 550
}

.flow-steps i {
    color: var(--tertiary);
    font-style: normal
}

.workflow-meta {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    grid-template-columns: 1fr 1fr;
    display: grid
}

.workflow-meta span {
    padding: 11px 0
}

.workflow-meta span+span {
    border-left: 1px solid var(--border);
    padding-left: 14px
}

.workflow-meta small,
.workflow-meta b {
    display: block
}

.workflow-meta small {
    color: var(--secondary);
    font-size: 0.75rem
}

.workflow-meta b {
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 550
}

.edit-flow {
    color: var(--brand);
    background: 0 0;
    border: 0;
    padding: 12px 0 0;
    font-size: 0.75rem;
    font-weight: 550
}

.inline-editor {
    border: 1px solid var(--border-strong);
    background: var(--surface-subtle);
    border-radius: var(--radius);
    margin-top: 14px;
    padding: 14px;
    display: flow-root
}

.inline-editor label {
    margin-bottom: 10px;
    font-size: 0.75rem;
    display: block
}

.inline-editor input,
.inline-editor select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    width: 100%;
    min-height: 36px;
    margin-top: 4px;
    padding: 6px
}

.inline-editor button {
    float: right;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.75rem
}

.authority-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    display: grid;
    overflow-x: auto
}

.authority-grid>* {
    border-bottom: 1px solid var(--border);
    min-width: 130px;
    padding: 12px 20px;
    font-size: 0.75rem
}

.authority-grid>b {
    background: var(--surface-subtle);
    color: var(--secondary);
    font-weight: 500
}

.authority-grid i {
    color: var(--secondary);
    font-style: normal
}

.authority-grid i.yes {
    color: var(--success);
    font-weight: 600
}

.activity-tools {
    justify-content: space-between;
    display: flex
}

.activity-tools button {
    border: 1px solid var(--border-strong);
    background: #fff;
    min-height: 38px;
    padding: 0 11px;
    font-size: 0.75rem
}

.activity-date {
    align-items: center;
    display: flex
}

.activity-date b {
    padding: 0 12px;
    font-size: 0.8125rem
}

.activity-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    display: grid
}

.timeline {
    padding: 20px
}

.timeline-day {
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    display: flex
}

.timeline-day span {
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 500
}

.timeline-day i {
    background: var(--border);
    flex: 1;
    height: 1px
}

.activity-event {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 13px 4px;
    display: grid;
    position: relative
}

.activity-event:not(:last-child):before {
    content: "";
    border-left: 1px solid var(--border);
    position: absolute;
    top: 45px;
    bottom: -4px;
    left: 19px
}

.event-dot {
    background: var(--brand-subtle);
    width: 32px;
    height: 32px;
    color: var(--brand);
    z-index: 1;
    border-radius: 50%;
    place-items: center;
    font-size: 0.75rem;
    display: grid
}

.activity-event p {
    margin: 0;
    font-size: 0.8125rem
}

.activity-event strong {
    margin: 4px 0 2px;
    font-size: 0.8125rem;
    font-weight: 550;
    display: block
}

.activity-event small,
.activity-event time {
    color: var(--secondary);
    font-size: 0.75rem
}

.activity-insight {
    align-content: start;
    gap: 16px;
    display: grid
}

.insight-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 18px
}

.insight-card.dark {
    color: var(--text);
    background: #fff
}

.insight-card>span {
    color: var(--secondary);
    font-size: 0.75rem
}

.insight-card>b {
    margin-top: 6px;
    font-size: 1.5rem;
    font-weight: 600;
    display: block
}

.insight-card>p {
    color: var(--secondary);
    margin: 0 0 12px;
    font-size: 0.75rem
}

.insight-card.dark>div {
    background: var(--border);
    border-radius: 3px;
    height: 4px
}

.insight-card.dark>div i {
    background: var(--brand);
    height: 100%;
    display: block
}

.insight-card.dark>small {
    color: var(--secondary);
    margin-top: 7px;
    font-size: 0.75rem;
    display: block
}

.insight-card.dark>small strong {
    float: right;
    color: var(--text)
}

.person-row {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    display: flex
}

.person-row>i {
    background: var(--brand-subtle);
    width: 30px;
    height: 30px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    font-size: 0.6875rem;
    font-style: normal;
    display: grid
}

.person-row b,
.person-row small {
    display: block
}

.person-row b {
    font-size: 0.8125rem;
    font-weight: 550
}

.person-row small {
    color: var(--secondary);
    font-size: 0.75rem
}

.settings-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 28px;
    display: grid
}

.settings-layout>aside {
    align-content: start;
    gap: 2px;
    display: grid
}

.settings-layout>aside button {
    color: #475467;
    text-align: left;
    background: 0 0;
    border: 0;
    border-left: 2px solid #0000;
    border-radius: var(--radius-sm);
    min-height: 40px;
    padding: 0 11px;
    font-size: 0.8125rem
}

.settings-layout>aside button.active {
    border-left-color: var(--brand);
    background: var(--brand-subtle);
    color: var(--brand);
    font-weight: 600
}

.settings-title {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    display: flex
}

.settings-title h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600
}

.settings-title p {
    color: var(--secondary);
    margin: 3px 0 0;
    font-size: 0.8125rem
}

.settings-title button,
.people-top button {
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.75rem
}

.people {
    padding: 0 20px
}

.people-top {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    min-height: 64px;
    display: flex
}

.people-top label {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    align-items: center;
    width: 260px;
    min-height: 38px;
    padding: 0 10px;
    display: flex
}

.people-top input {
    border: 0;
    outline: 0;
    width: 100%;
    margin-left: 6px;
    font-size: 0.75rem
}

.person-line {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 11px;
    min-height: 64px;
    display: flex
}

.person-line>span {
    background: var(--brand-subtle);
    width: 32px;
    height: 32px;
    color: var(--brand);
    border-radius: 50%;
    place-items: center;
    font-size: 0.6875rem;
    display: grid
}

.person-line b,
.person-line small {
    display: block
}

.person-line b {
    font-size: 0.8125rem;
    font-weight: 550
}

.person-line small {
    color: var(--secondary);
    font-size: 0.75rem
}

.person-line em {
    background: var(--success-bg);
    color: var(--success);
    border-radius: var(--radius-lg);
    margin-left: auto;
    padding: 3px 7px;
    font-size: 0.6875rem;
    font-style: normal
}

.person-line em.away {
    background: var(--warning-bg);
    color: var(--warning)
}

.person-line button {
    background: 0 0;
    border: 0
}

.setting-form {
    max-width: 700px;
    padding: 22px
}

.setting-form h3 {
    margin: 0;
    font-size: 1rem
}

.setting-form>p {
    color: var(--secondary);
    font-size: 0.8125rem
}

.setting-form>label:not(.check) {
    margin: 14px 0;
    font-size: 0.8125rem;
    font-weight: 500;
    display: block
}

.setting-form input,
.setting-form select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    width: 100%;
    min-height: 40px;
    margin-top: 5px;
    padding: 8px
}

.check {
    border-top: 1px solid var(--border);
    align-items: flex-start;
    gap: 9px;
    padding: 12px 0;
    display: flex
}

.check input {
    width: auto;
    min-height: auto;
    accent-color: var(--brand);
    margin: 3px 0
}

.check b,
.check small {
    display: block
}

.check b {
    font-size: 0.8125rem
}

.check small {
    color: var(--secondary);
    margin-top: 2px;
    font-size: 0.75rem
}

.toast {
    z-index: 80;
    border-radius: var(--radius);
    color: #fff;
    background: #101828;
    padding: 11px 14px;
    font-size: 0.8125rem;
    position: fixed;
    bottom: 24px;
    right: 24px;
    box-shadow: var(--shadow-md)
}

.empty {
    text-align: center;
    padding: 56px 20px
}

.empty>span {
    background: var(--success-bg);
    width: 36px;
    height: 36px;
    color: var(--success);
    border-radius: 50%;
    place-items: center;
    margin: auto;
    display: grid
}

.empty h3 {
    margin: 12px 0 3px;
    font-size: 1rem
}

.empty p {
    color: var(--secondary);
    margin: 0;
    font-size: 0.8125rem
}

.empty a {
    color: var(--brand);
    margin-top: 10px;
    font-size: 0.8125rem;
    display: inline-block
}

.loading {
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 320px;
    display: flex
}

.loading i {
    background: var(--brand);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    animation: .8s infinite alternate pulse
}

.loading i:nth-child(2) {
    animation-delay: .2s
}

.loading i:nth-child(3) {
    animation-delay: .4s
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@media (width<=1100px) {
    .metric-grid {
        grid-template-columns: 1fr 1fr
    }

    .metric:nth-child(2) {
        border-right: 0
    }

    .metric:nth-child(-n+2) {
        border-bottom: 1px solid var(--border)
    }

    .record-grid,
    .flex-request {
        grid-template-columns: 1fr
    }

    .route-summary {
        position: static
    }

    .workflow-cards {
        grid-template-columns: 1fr
    }
}

@media (width<=760px) {
    .app-nav {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        width: 100%;
        padding: 12px;
        position: static
    }

    .logo {
        padding-bottom: 12px
    }

    .app-nav .nav-section,
    .app-nav nav,
    .user-card {
        display: none
    }

    .app-main {
        width: 100%;
        margin-left: 0;
        padding: 18px 14px 40px
    }

    .topbar {
        align-items: flex-start
    }

    .top-actions .search-button,
    .top-actions .round-button {
        display: none
    }

    .topbar h1 {
        font-size: 1.3125rem
    }

    .topbar p {
        max-width: 240px
    }

    .metric-grid,
    .overview-columns,
    .form-fields,
    .settings-layout {
        grid-template-columns: 1fr
    }

    .metric {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }

    .metric:last-child {
        border-bottom: 0
    }

    .overview-intro {
        align-items: flex-start;
        gap: 14px
    }

    .filter-bar {
        flex-wrap: wrap
    }

    .big-search {
        width: 100%;
        max-width: none
    }

    .filter-bar .export {
        margin-left: 0
    }

    .approval-row {
        grid-template-columns: 32px 1fr
    }

    .approval-value {
        text-align: left;
        grid-column: 2
    }

    .record-hero {
        grid-template-columns: 32px 1fr
    }

    .record-amount {
        border-top: 1px solid var(--border);
        text-align: left;
        border-left: 0;
        grid-column: 1/-1;
        padding: 12px 0 0
    }

    .detail-list {
        grid-template-columns: 1fr
    }

    .detail-list>div {
        border-right: 0
    }

    .sticky-decision {
        flex-wrap: wrap;
        position: static
    }

    .sticky-decision>div {
        width: 100%
    }

    .clean-form {
        padding: 20px 14px
    }

    .template-list,
    .form-fields,
    .quick-add,
    .repeat-table,
    .add-row,
    .form-total {
        margin-left: 0
    }

    .form-fields .wide {
        grid-column: auto
    }

    .activity-layout {
        grid-template-columns: 1fr
    }

    .activity-insight {
        display: none
    }

    .settings-layout>aside {
        display: flex;
        overflow-x: auto
    }

    .settings-layout>aside button {
        white-space: nowrap
    }

}

/* ==== Rebuild additions: wired actions, signatures, document uploads ==== */

a.metric { display: block }
a.metric:hover { border-color: var(--border-strong) }

.category-row { text-decoration: none }
a.category-row:hover span { color: var(--brand) }

.panel-link {
    color: var(--brand);
    font-size: 0.8125rem;
    font-weight: 600
}

.type-chips {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--secondary);
    display: flex
}

.type-chips button {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 999px;
    min-height: 30px;
    padding: 0 12px;
    font-size: 0.75rem
}

.type-chips button.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.activity-tools a.export-log {
    border: 1px solid var(--border-strong);
    background: #fff;
    align-items: center;
    min-height: 38px;
    padding: 0 11px;
    font-size: 0.75rem;
    display: inline-flex
}

/* Documents */
.documents-block { display: grid; gap: 10px }

.doc-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    display: flex
}

.doc-icon {
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: var(--radius);
    flex: none;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    font-size: 0.9375rem;
    display: flex
}

.doc-meta { min-width: 0; flex: 1 }
.doc-meta b { font-size: 0.8125rem; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.doc-meta small { color: var(--secondary); font-size: 0.75rem }

.doc-actions { align-items: center; gap: 6px; display: flex }

.doc-actions a,
.doc-actions button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    font-size: 0.75rem;
    display: inline-flex
}

.doc-actions button { color: var(--danger) }
.doc-actions a:hover, .doc-actions button:hover { border-color: var(--tertiary) }

.doc-upload {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    padding: 16px 12px;
    display: block
}

.doc-upload:hover { border-color: var(--brand); background: var(--brand-subtle) }
.doc-upload span { color: var(--brand); font-size: 0.8125rem; font-weight: 600; display: block }
.doc-upload small { color: var(--secondary); margin-top: 3px; font-size: 0.75rem; display: block }

.attach-list { display: grid; gap: 8px; margin-top: 10px }
.form-attach { margin-left: 46px }

/* Signatures */
.signature-block { margin-left: 46px; display: grid; gap: 10px }
.record-content .signature-block, .modal-panel .signature-block, .setting-form .signature-block { margin-left: 0 }

.sig-pad-frame {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    position: relative;
    overflow: hidden
}

.sig-pad-frame canvas {
    touch-action: none;
    cursor: crosshair;
    width: 100%;
    height: 180px;
    display: block
}

.sig-line {
    border-top: 1px dashed var(--border-strong);
    pointer-events: none;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 38px
}

.sig-hint {
    color: var(--tertiary);
    pointer-events: none;
    font-size: 0.8125rem;
    position: absolute;
    left: 50%;
    bottom: 44px;
    transform: translateX(-50%)
}

.sig-tools { align-items: center; flex-wrap: wrap; gap: 10px; display: flex }

.sig-tools button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.75rem
}

.sig-tools button:disabled { color: var(--tertiary); cursor: default }
.sig-tools button.primary-btn { background: var(--brand); border-color: var(--brand); color: #fff }
.sig-tools button.primary-btn:hover { background: var(--brand-hover) }
.sig-tools button.danger-btn { color: var(--danger); border-color: #fda29b }

.sig-save-check { margin: 0 }
.sig-save-check b { font-size: 0.75rem; font-weight: 500 }
.sig-caption { color: var(--secondary); font-size: 0.75rem }

.signature-strip { flex-wrap: wrap; gap: 12px; display: flex }

.signature-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    margin: 0;
    padding: 10px;
    width: 220px
}

.signature-card img {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    object-fit: contain;
    width: 100%;
    height: 74px;
    display: block
}

.signature-card figcaption { margin-top: 8px }
.signature-card b { font-size: 0.8125rem; display: block }
.signature-card small { color: var(--secondary); font-size: 0.71875rem }

.template-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    margin-bottom: 14px;
    padding: 12px;
    max-width: 340px
}

.template-preview span { color: var(--tertiary); font-size: 0.6875rem; font-weight: 600; letter-spacing: .04em; display: block }
.template-preview img { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); object-fit: contain; width: 100%; height: 90px; margin-top: 8px; display: block }
.template-preview small { color: var(--secondary); margin-top: 6px; font-size: 0.75rem; display: block }

/* Sign & decide modal */
.modal-overlay {
    z-index: 60;
    background: rgba(16, 24, 40, .45);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: flex;
    position: fixed;
    inset: 0
}

.modal-panel {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    padding: 20px;
    display: grid;
    gap: 14px;
    overflow-y: auto
}

.modal-head { justify-content: space-between; align-items: flex-start; gap: 12px; display: flex }
.modal-head h3 { margin: 0; font-size: 1rem }
.modal-head p { color: var(--secondary); margin: 3px 0 0; font-size: 0.78125rem }

.modal-head button {
    border: none;
    background: none;
    color: var(--secondary);
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px 6px
}

.modal-note { font-size: 0.78125rem; font-weight: 600; color: var(--secondary); display: grid; gap: 6px }

.modal-note textarea {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    resize: vertical;
    min-height: 64px;
    padding: 9px 10px;
    font-size: 0.8125rem;
    font-weight: 400
}

.modal-actions { justify-content: flex-end; gap: 10px; display: flex }

.modal-actions button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius);
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 600
}

.modal-actions .confirm { border: none; color: #fff }
.modal-actions .confirm.approve { background: var(--success) }
.modal-actions .confirm.reject { background: var(--danger) }
.modal-actions .confirm.revise { background: var(--brand) }
.modal-actions .confirm:disabled { opacity: .45; cursor: default }

@media (max-width: 760px) {
    .form-attach, .signature-block { margin-left: 0 }
    .signature-card { width: 100% }
}

/* ==== Loan details, custom fields, section notes ==== */

.loan-row {
    background: var(--brand-subtle);
    border-top: 1px dashed var(--border-strong);
    grid-template-columns: auto 1fr 1fr 1fr;
    align-items: end;
    gap: 12px;
    padding: 10px 12px 12px;
    display: grid;
    min-width: 1080px
}

.loan-tag {
    color: var(--brand);
    align-self: center;
    white-space: nowrap;
    padding-top: 14px;
    font-size: 0.75rem;
    font-weight: 600
}

.loan-row label {
    color: var(--secondary);
    font-size: 0.71875rem;
    font-weight: 600;
    display: grid;
    gap: 4px
}

.loan-row label em {
    color: var(--danger);
    font-style: normal;
    font-weight: 500
}

.loan-row input,
.loan-row select {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.8125rem;
    font-weight: 400
}

.loan-row input:disabled { background: var(--surface-subtle); color: var(--tertiary) }

.section-notes { margin-top: 14px }
.section-notes textarea { min-height: 70px }

.custom-fields {
    margin-left: 46px;
    display: grid;
    gap: 8px
}

.custom-field-row {
    grid-template-columns: 1fr 1.4fr auto;
    gap: 8px;
    display: grid
}

.custom-field-row input {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.8125rem
}

.custom-field-row button {
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-size: 0.75rem
}

.custom-fields .add-row { margin: 4px 0 0 }

.record-item.loan-note {
    grid-template-columns: 1fr;
    background: var(--brand-subtle);
    color: var(--brand);
    font-size: 0.75rem;
    padding-top: 7px;
    padding-bottom: 7px
}

.record-item.loan-note b { font-weight: 700 }

.item-notes {
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    margin-top: 12px;
    padding: 10px 14px
}

.item-notes span { color: var(--tertiary); font-size: 0.6875rem; font-weight: 600; letter-spacing: .04em; display: block }
.item-notes p { color: var(--text); white-space: pre-wrap; margin: 6px 0 0; font-size: 0.8125rem }

.detail-list .custom span { color: var(--brand) }

/* ==== Archive + calendar dropdown ==== */

.archive-toolbar {
    align-items: center;
    gap: 12px;
    display: flex
}

.archive-toolbar .big-search { flex: 1 }

.archive-count { color: var(--secondary); white-space: nowrap; font-size: 0.78125rem }

.cal-wrap { position: relative }

.cal-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 550;
    display: inline-flex;
    transition: border-color .15s, box-shadow .15s
}

.cal-btn:hover { border-color: var(--tertiary) }
.cal-btn.active { border-color: var(--brand); color: var(--brand); background: var(--brand-subtle) }
.cal-btn svg { color: var(--secondary) }
.cal-btn.active svg { color: var(--brand) }
.cal-caret { color: var(--tertiary); font-size: 0.6875rem; margin-top: -3px }

.cal-pop {
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: 296px;
    padding: 14px;
    animation: cal-in .14s ease-out;
    position: absolute;
    top: calc(100% + 8px);
    left: 0
}

@keyframes cal-in {
    from { opacity: 0; transform: translateY(-5px) scale(.985) }
    to { opacity: 1; transform: none }
}

.cal-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    display: flex
}

.cal-head b { font-size: 0.84375rem; font-weight: 650 }

.cal-head button {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    width: 30px;
    height: 30px;
    font-size: 0.9375rem;
    line-height: 1
}

.cal-head button:hover { background: var(--surface-subtle); border-color: var(--border-strong) }

.cal-week {
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
    display: grid
}

.cal-week span {
    color: var(--tertiary);
    text-align: center;
    padding: 4px 0;
    font-size: 0.65625rem;
    font-weight: 650;
    letter-spacing: .03em
}

.cal-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    display: grid
}

.cal-day {
    border: none;
    background: none;
    border-radius: var(--radius-lg);
    aspect-ratio: 1;
    color: var(--text);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 0.78125rem;
    display: flex;
    position: relative
}

.cal-day:hover { background: var(--surface-subtle) }
.cal-day.muted { color: var(--tertiary) }

.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--border-strong) }

.cal-day.has-docs i {
    background: var(--brand);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    bottom: 4px
}

.cal-day.selected {
    background: var(--brand);
    color: #fff;
    font-weight: 650
}

.cal-day.selected.has-docs i { background: #fff }

.cal-foot {
    border-top: 1px solid var(--border);
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    display: flex
}

.cal-foot button {
    border: none;
    background: none;
    color: var(--brand);
    font-size: 0.78125rem;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: var(--radius-sm)
}

.cal-foot button:hover { background: var(--brand-subtle) }

.archive-group { padding: 0; overflow: hidden }

.archive-group-head {
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    display: flex
}

.archive-group-head:hover b { color: var(--brand) }
.archive-group-head > div { flex: 1; min-width: 0 }
.archive-group-head b { font-size: 0.875rem; display: block }
.archive-group-head small { color: var(--secondary); font-size: 0.75rem }

.verified-badge {
    background: var(--success-bg);
    color: var(--success);
    white-space: nowrap
}

.archive-group .doc-row {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface)
}

.archive-group .doc-row:last-child { border-bottom: none }

.empty-clear {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius);
    margin-top: 14px;
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 600
}

/* ==== Verify page ==== */

.record-toolbar .verify-link {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    color: var(--brand);
    align-items: center;
    min-height: 34px;
    margin-right: 8px;
    padding: 0 12px;
    font-size: 0.78125rem;
    font-weight: 600;
    display: inline-flex
}

.verify-intro {
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    display: flex
}

.verify-intro h3 { margin: 0 0 6px; font-size: 0.9375rem }
.verify-intro p { color: var(--secondary); max-width: 520px; margin: 0; font-size: 0.8125rem }

.verify-input-row { gap: 10px; display: flex }

.verify-input-row input {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    min-height: 44px;
    width: 230px;
    padding: 0 13px;
    font-size: 0.84375rem
}

.verify-input-row input:focus { border-color: var(--brand); outline: 2px solid var(--brand-subtle) }

.verify-btn {
    border: none;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius);
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.84375rem;
    font-weight: 600;
    white-space: nowrap
}

.verify-btn:hover { background: var(--brand-hover) }
.verify-btn:disabled { opacity: .55 }

.verify-hint { color: var(--secondary); font-size: 0.8125rem }
.verify-hint a { color: var(--brand); font-weight: 600 }

.verify-result {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: 20px;
    display: grid;
    gap: 16px
}

.verdict-banner {
    border-radius: var(--radius-lg);
    align-items: center;
    gap: 14px;
    padding: 16px;
    display: flex
}

.verify-result.ok .verdict-banner { background: var(--success-bg); color: var(--success) }
.verify-result.warn .verdict-banner { background: var(--warning-bg); color: var(--warning) }
.verify-result.bad .verdict-banner { background: var(--danger-bg); color: var(--danger) }

.verdict-mark {
    background: #fff;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    box-shadow: var(--shadow-sm)
}

.verdict-banner b { letter-spacing: .03em; font-size: 0.9375rem; display: block }
.verdict-banner p { color: inherit; opacity: .85; margin: 3px 0 0; font-size: 0.78125rem }

.verify-record b { font-size: 0.875rem }
.verify-record a:hover b { color: var(--brand) }
.verify-record small { color: var(--secondary); font-size: 0.78125rem; display: block; margin-top: 2px }

.verify-checks {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden
}

.verify-check {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    display: flex
}

.verify-check:last-child { border-bottom: none }

.verify-check > span {
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex
}

.verify-check.pass > span { background: var(--success-bg); color: var(--success) }
.verify-check.fail > span { background: var(--danger-bg); color: var(--danger) }
.verify-check.fail b { color: var(--danger) }

.verify-check b { font-size: 0.8125rem; display: block }
.verify-check small { color: var(--secondary); font-size: 0.75rem }

.verify-seal {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    padding: 10px 14px
}

.verify-seal span { color: var(--tertiary); font-size: 0.65625rem; font-weight: 650; letter-spacing: .05em; display: block }
.verify-seal code { color: var(--secondary); font-family: var(--font-mono); word-break: break-all; margin-top: 5px; font-size: 0.6875rem; display: block }

@media (max-width: 900px) {
    .verify-intro { flex-direction: column; align-items: stretch }
    .verify-input-row input { flex: 1; width: auto }
    .archive-toolbar { flex-wrap: wrap }
    .custom-fields, .section-notes { margin-left: 0 }
    .loan-row { grid-template-columns: 1fr; min-width: 0 }
}

/* ==== Editable form option lists (Settings → Form options) ==== */

.form-section-heading .manage-lists {
    color: var(--brand);
    white-space: nowrap;
    align-self: center;
    margin-left: auto;
    font-size: 0.78125rem;
    font-weight: 600
}

.form-section-heading .manage-lists:hover { text-decoration: underline }

.option-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
    margin-bottom: 14px;
    padding: 14px
}

.option-list-head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    display: flex
}

.option-list-head b { font-size: 0.84375rem; display: block }
.option-list-head small { color: var(--secondary); font-size: 0.75rem }

.option-reset {
    border: none;
    background: none;
    color: var(--brand);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 4px
}

.option-reset:hover { text-decoration: underline }

.option-chips {
    flex-wrap: wrap;
    gap: 6px;
    display: flex
}

.option-chip {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 5px 6px 5px 12px;
    font-size: 0.78125rem;
    font-weight: 500;
    display: inline-flex
}

.option-chip button {
    border: none;
    background: var(--surface-subtle);
    color: var(--secondary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.8125rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.option-chip button:hover { background: var(--danger-bg); color: var(--danger) }

.option-add {
    gap: 8px;
    margin-top: 10px;
    display: flex
}

.option-add input {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    flex: 1;
    max-width: 320px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.8125rem
}

.option-add button {
    border: 1px solid var(--brand);
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: var(--radius-sm);
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.78125rem;
    font-weight: 600
}

.option-add button:hover { background: var(--brand); color: #fff }

/* ==== Notifications bell ==== */

.notif-wrap { position: relative; display: inline-flex }

.notif-btn { position: relative }

.notif-count {
    background: var(--danger);
    color: #fff;
    border-radius: 999px;
    font-style: normal;
    justify-content: center;
    align-items: center;
    min-width: 17px;
    height: 17px;
    margin-left: 6px;
    padding: 0 4px;
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex
}

.notif-pop {
    z-index: 45;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: 360px;
    animation: cal-in .14s ease-out;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    overflow: hidden
}

.notif-head {
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    display: flex
}

.notif-head b { font-size: 0.84375rem }

.notif-head button {
    border: none;
    background: none;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 600
}

.notif-list { max-height: 380px; overflow-y: auto }

.notif-item {
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    display: flex
}

.notif-item:hover { background: var(--surface-subtle) }
.notif-item:last-child { border-bottom: none }

.notif-dot {
    background: var(--border-strong);
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 5px
}

.notif-item.unread .notif-dot { background: var(--brand) }
.notif-item.unread p b { color: var(--brand) }

.notif-item > div { flex: 1; min-width: 0 }
.notif-item p { margin: 0; font-size: 0.78125rem }
.notif-item small { color: var(--secondary); font-size: 0.71875rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.notif-item time { color: var(--tertiary); white-space: nowrap; font-size: 0.6875rem; margin-top: 2px }

.notif-empty { color: var(--secondary); text-align: center; padding: 24px; font-size: 0.78125rem }

.notif-foot {
    border-top: 1px solid var(--border);
    background: var(--surface-subtle);
    color: var(--brand);
    text-align: center;
    padding: 10px;
    font-size: 0.78125rem;
    font-weight: 600;
    display: block
}

/* ==== Drafts bar + edit banner ==== */

.drafts-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 0.78125rem;
    color: var(--secondary);
    display: flex
}

.draft-chip {
    border: 1px solid var(--border-strong);
    background: var(--surface-subtle);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    display: inline-flex
}

.draft-chip.active { border-color: var(--brand); background: var(--brand-subtle) }

.draft-chip > button:first-child {
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.78125rem;
    font-weight: 600;
    padding: 0
}

.draft-chip > button:first-child:hover { color: var(--brand) }
.draft-chip small { color: var(--tertiary); font-size: 0.6875rem }

.draft-chip .draft-x {
    border: none;
    background: #fff;
    color: var(--secondary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.8125rem;
    line-height: 1
}

.draft-chip .draft-x:hover { background: var(--danger-bg); color: var(--danger) }

.edit-banner {
    border: 1px solid #f0c274;
    border-radius: var(--radius);
    background: var(--warning-bg);
    color: var(--warning);
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    display: flex
}

.edit-banner b { white-space: nowrap }
.edit-banner span { flex: 1; opacity: .85 }
.edit-banner a { color: var(--warning); font-weight: 650; text-decoration: underline; white-space: nowrap }

/* ==== Revision banner on the record ==== */

.revision-banner {
    border: 1px solid #f0c274;
    border-radius: var(--radius-lg);
    background: var(--warning-bg);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    display: flex
}

.revision-banner b { color: var(--warning); font-size: 0.84375rem; display: block }
.revision-banner span { color: var(--warning); opacity: .85; font-size: 0.78125rem }

.resubmit-btn {
    background: var(--warning);
    color: #fff;
    border-radius: var(--radius);
    white-space: nowrap;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex
}

.resubmit-btn:hover { filter: brightness(1.08) }

.record-toolbar .pdf-link {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    align-items: center;
    min-height: 34px;
    margin-right: 8px;
    padding: 0 12px;
    font-size: 0.78125rem;
    font-weight: 600;
    display: inline-flex
}

/* ==== Activity filter selects ==== */

.activity-select {
    border: 1px solid var(--border-strong);
    background: #fff;
    min-height: 38px;
    margin-right: 6px;
    padding: 0 8px;
    font-size: 0.75rem
}

/* ==== Workflow creator + custom rules ==== */

.workflow-creator {
    border: 1.5px dashed var(--brand) !important;
    background: var(--brand-subtle) !important;
    display: grid;
    gap: 10px
}

.workflow-creator h3 { margin: 0; font-size: 0.875rem }

.workflow-creator label {
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 600;
    display: grid;
    gap: 4px
}

.workflow-creator label small { color: var(--tertiary); font-weight: 400 }

.workflow-creator input {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.8125rem;
    font-weight: 400
}

.creator-actions { justify-content: flex-end; gap: 8px; display: flex }

.creator-actions button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.78125rem;
    font-weight: 600
}

.creator-actions .primary-btn { border: none; background: var(--brand); color: #fff }

.edit-flow.delete { color: var(--danger) }

.authority-grid .custom-rule {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.authority-grid .custom-rule button {
    border: none;
    background: var(--surface-subtle);
    color: var(--secondary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    line-height: 1
}

.authority-grid .custom-rule button:hover { background: var(--danger-bg); color: var(--danger) }

.rule-editor {
    border-top: 1px solid var(--border);
    grid-template-columns: 1.4fr 1fr 1fr 1fr auto auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    display: grid
}

.rule-editor input,
.rule-editor select {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 36px;
    padding: 0 9px;
    font-size: 0.78125rem
}

.rule-editor button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 36px;
    padding: 0 13px;
    font-size: 0.78125rem;
    font-weight: 600
}

.rule-editor .primary-btn { border: none; background: var(--brand); color: #fff }

/* ==== Fulfilment & asset tracking ==== */

.ff-list { display: grid; gap: 8px }

.ff-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    display: flex
}

.ff-main { flex: 1; min-width: 0 }
.ff-main b { font-size: 0.8125rem; margin-right: 8px }

.ff-main code {
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    padding: 2px 7px;
    font-size: 0.71875rem
}

.ff-main small { color: var(--secondary); font-size: 0.71875rem; display: block; margin-top: 3px }

.ff-chip {
    border-radius: 999px;
    white-space: nowrap;
    padding: 4px 10px;
    font-size: 0.71875rem;
    font-weight: 650
}

.ff-chip.returned { background: var(--success-bg); color: var(--success) }
.ff-chip.onloan { background: var(--warning-bg); color: var(--warning) }
.ff-chip.overdue { background: var(--danger-bg); color: var(--danger) }
.ff-chip.issued { background: var(--brand-subtle); color: var(--brand) }

.ff-actions { align-items: center; gap: 6px; display: flex }

.ff-actions button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.75rem
}

.ff-actions .ff-x { color: var(--secondary); width: 30px; padding: 0 }
.ff-actions .ff-x:hover { color: var(--danger); border-color: #fda29b }

.ff-add {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    grid-template-columns: 1.4fr 1fr .9fr 1.2fr auto;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    display: grid
}

.ff-add input,
.ff-add select {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 36px;
    padding: 0 9px;
    font-size: 0.78125rem
}

.ff-add button {
    border: none;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-sm);
    min-height: 36px;
    white-space: nowrap;
    padding: 0 13px;
    font-size: 0.78125rem;
    font-weight: 600
}

.ff-add button:hover { background: var(--brand-hover) }

@media (max-width: 900px) {
    .ff-add { grid-template-columns: 1fr 1fr }
    .ff-row { flex-wrap: wrap }
}

/* ==== Workflow signing-chain editor ==== */

.step-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    grid-column: 1 / -1;
    padding: 10px;
    display: grid;
    gap: 6px
}

.step-editor > small {
    color: var(--tertiary);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: .04em
}

.step-row {
    grid-template-columns: 20px 1.1fr 1fr 26px;
    align-items: center;
    gap: 6px;
    display: grid
}

.step-row > span {
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 0.65625rem;
    font-weight: 700;
    display: flex
}

.step-row input {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.75rem
}

.step-row button {
    border: none;
    background: var(--surface-subtle);
    color: var(--secondary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.8125rem;
    line-height: 1
}

.step-row button:hover { background: var(--danger-bg); color: var(--danger) }

.step-editor .add-signer {
    border: 1px dashed var(--border-strong);
    background: none;
    color: var(--brand);
    border-radius: var(--radius-sm);
    min-height: 32px;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 600
}

.step-editor .add-signer:hover { border-color: var(--brand); background: var(--brand-subtle) }

.route-summary p a { color: var(--brand); font-weight: 600 }

/* IDR money inputs */
input.money { text-align: right; font-variant-numeric: tabular-nums }

/* ==== Calendar v2 — modern date-picker polish ==== */

.cal-btn {
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .12s ease-out
}

.cal-btn:hover { box-shadow: var(--shadow-sm) }
.cal-btn:active { transform: scale(.98) }

.cal-pop {
    width: 316px;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: var(--radius-xl);
    padding: 0;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .02), 0 4px 10px rgba(16, 24, 40, .06), 0 20px 48px rgba(16, 24, 40, .18);
    animation: cal-in-v2 .18s cubic-bezier(.16, 1, .3, 1);
    transform-origin: top left;
    overflow: hidden
}

@keyframes cal-in-v2 {
    from { opacity: 0; transform: translateY(-6px) scale(.96) }
    to { opacity: 1; transform: none }
}

.cal-top {
    background: linear-gradient(135deg, var(--brand) 0%, #4f46b8 100%);
    color: #fff;
    padding: 14px 18px 12px
}

.cal-top small {
    opacity: .75;
    letter-spacing: .09em;
    font-size: 0.59375rem;
    font-weight: 700;
    display: block
}

.cal-top b { margin-top: 2px; font-size: 0.96875rem; font-weight: 650; display: block }

.cal-head {
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 12px 12px 6px 18px;
    display: flex
}

.cal-head b { font-size: 0.84375rem; font-weight: 700; letter-spacing: -.01em }
.cal-head b span { color: var(--tertiary); font-weight: 550 }

.cal-nav { gap: 4px; display: flex }

.cal-nav button {
    border: none;
    background: none;
    color: var(--secondary);
    border-radius: var(--radius-lg);
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    display: flex;
    transition: background .15s ease-out, color .15s ease-out, transform .12s ease-out
}

.cal-nav button:hover { background: var(--surface-subtle); color: var(--text) }
.cal-nav button:active { transform: scale(.9) }
.cal-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px }

.cal-week { padding: 0 12px; margin: 4px 0 2px }

.cal-week span {
    color: var(--tertiary);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: .06em;
    padding: 4px 0
}

.cal-grid { gap: 2px; padding: 0 12px }

.cal-grid.slide-left { animation: cal-slide-l .18s ease-out }
.cal-grid.slide-right { animation: cal-slide-r .18s ease-out }

@keyframes cal-slide-l { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } }
@keyframes cal-slide-r { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }

.cal-day {
    aspect-ratio: auto;
    height: 36px;
    border-radius: var(--radius-lg);
    font-size: 0.78125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    position: relative;
    transition: background .13s ease-out, color .13s ease-out, transform .12s ease-out, box-shadow .13s ease-out
}

.cal-day span { position: relative; z-index: 1 }

.cal-day:hover { background: var(--brand-subtle); color: var(--brand); transform: scale(1.06) }
.cal-day:active { transform: scale(.92) }
.cal-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px }

.cal-day.muted { color: var(--tertiary); opacity: .45; font-weight: 400 }
.cal-day.muted:hover { opacity: .8 }

.cal-day.today {
    box-shadow: none;
    color: var(--brand);
    font-weight: 750
}

.cal-day.today:after {
    content: '';
    border: 1.5px solid var(--brand);
    opacity: .35;
    border-radius: var(--radius-lg);
    position: absolute;
    inset: 0
}

.cal-day.has-docs i {
    background: var(--brand);
    bottom: 5px;
    width: 4.5px;
    height: 4.5px;
    box-shadow: 0 0 0 1.5px #fff
}

.cal-day.selected {
    background: linear-gradient(135deg, var(--brand) 0%, #4f46b8 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(57, 53, 143, .35);
    transform: scale(1.04)
}

.cal-day.selected:after { display: none }
.cal-day.selected.has-docs i { background: #fff; box-shadow: none }

.cal-legend {
    color: var(--tertiary);
    align-items: center;
    gap: 6px;
    padding: 8px 18px 0;
    font-size: 0.65625rem;
    display: flex
}

.cal-legend i {
    background: var(--brand);
    border-radius: 50%;
    width: 4.5px;
    height: 4.5px;
    display: inline-block
}

.cal-foot {
    border-top: 1px solid var(--border);
    background: var(--surface-subtle);
    margin: 10px 0 0;
    padding: 10px 12px
}

.cal-foot button {
    border-radius: var(--radius);
    min-height: 30px;
    padding: 0 12px;
    transition: background .15s ease-out, color .15s ease-out
}

.cal-foot .cal-clear-btn:disabled { color: var(--tertiary); cursor: default; background: none }

/* Reduced motion is app-wide: every animation and transition collapses to an
   instant state change (opacity/color feedback survives, movement does not). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* combo inputs (type freely or pick a suggestion) */
.repeat-row input.combo {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2398a2b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px
}

/* ==== Line-item cards (no horizontal scrolling) ==== */

.line-cards {
    margin: 14px 0 0 46px;
    display: grid;
    gap: 10px
}

.line-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 12px 14px;
    display: grid;
    gap: 10px;
    transition: border-color .15s ease-out, box-shadow .15s ease-out
}

.line-card:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle) }

.line-card-head {
    grid-template-columns: 22px minmax(150px, .9fr) 2fr 28px;
    align-items: end;
    gap: 10px;
    display: grid
}

.product-lines .line-card-head { grid-template-columns: 22px 1.6fr 1fr 28px }

/* barcode + name + serial in one row needs room; below this the name takes its
   own row so the serial field stops being squeezed to a few characters */
@media (max-width: 1180px) {
    .line-card-head { grid-template-columns: 22px minmax(120px, 1fr) minmax(120px, 1fr) 28px }
    .line-card-head label.grow { grid-column: 2 / -1; order: -1 }
}

.line-no {
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    margin-bottom: 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex
}

.line-card label {
    color: var(--secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    display: grid;
    gap: 4px;
    min-width: 0
}

.line-card label.grow { min-width: 0 }

.line-card input,
.line-card select {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius);
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.8125rem;
    font-weight: 400
}

.line-card input:focus,
.line-card select:focus { border-color: var(--brand); outline: 2px solid var(--brand-subtle) }

.lc-remove {
    border: none;
    background: var(--surface-subtle);
    color: var(--secondary);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    font-size: 0.9375rem;
    line-height: 1;
    transition: background .15s, color .15s
}

.lc-remove:hover { background: var(--danger-bg); color: var(--danger) }

.line-card-fields {
    grid-template-columns: 84px 104px 1.2fr 1.1fr auto;
    align-items: end;
    gap: 10px;
    display: grid
}

.line-card-fields.products { grid-template-columns: 84px 1fr 1.6fr }

.lc-subtotal {
    text-align: right;
    align-self: end;
    min-width: 110px;
    padding-bottom: 8px
}

.lc-subtotal small {
    color: var(--tertiary);
    letter-spacing: .05em;
    font-size: 0.59375rem;
    font-weight: 700;
    display: block
}

.lc-subtotal b { font-size: 0.84375rem; font-variant-numeric: tabular-nums }

.line-card .loan-row {
    border: none;
    border-top: 1px dashed var(--border-strong);
    border-radius: 0 0 8px 8px;
    min-width: 0;
    margin: 2px -14px -12px;
    padding: 10px 14px 12px
}

@media (max-width: 900px) {
    .line-cards { margin-left: 0 }
    .line-card-head { grid-template-columns: 22px 1fr 28px }
    .line-card-head label.grow { grid-column: 1 / -1 }
    .line-card-fields { grid-template-columns: 1fr 1fr }
    .lc-subtotal { text-align: left }
}

/* ==== Bell icon + reminder toggle ==== */

.bell-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--secondary);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    display: inline-flex;
    position: relative;
    transition: border-color .15s ease-out, color .15s ease-out, transform .12s ease-out
}

.bell-btn:hover { border-color: var(--tertiary); color: var(--text) }
.bell-btn:active { transform: scale(.94) }

.bell-btn .notif-count {
    position: absolute;
    top: -4px;
    right: -4px;
    margin: 0;
    box-shadow: 0 0 0 2px var(--bg)
}

.notif-reminder {
    border-bottom: 1px solid var(--border);
    background: var(--brand-subtle);
    cursor: pointer;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    display: flex
}

.notif-reminder input {
    accent-color: var(--brand);
    width: 15px;
    height: 15px;
    margin-top: 2px;
    flex: none
}

.notif-reminder b { font-size: 0.78125rem; display: block }
.notif-reminder small { color: var(--secondary); font-size: 0.71875rem; display: block; margin-top: 1px }
.notif-reminder input:disabled + span { opacity: .6 }

/* ==== Auth screens ==== */

.auth-wrap {
    background: var(--bg);
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 24px;
    display: flex
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 400px;
    padding: 28px;
    animation: cal-in-v2 .2s cubic-bezier(.16, 1, .3, 1)
}

.auth-brand {
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    display: flex
}

.auth-brand img { width: 36px; height: 36px; object-fit: contain }
.auth-brand b { font-size: 0.9375rem; display: block }
.auth-brand small { color: var(--secondary); font-size: 0.75rem }

.auth-card h3 { margin: 0 0 4px; font-size: 1.0625rem }
.auth-sub { color: var(--secondary); margin: 0 0 16px; font-size: 0.8125rem }

.auth-field {
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: grid;
    gap: 5px
}

.auth-field input,
.auth-field select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    min-height: 42px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 400
}

.auth-field input:focus, .auth-field select:focus { border-color: var(--brand); outline: 2px solid var(--brand-subtle) }

.auth-two { grid-template-columns: 1fr 1fr; gap: 10px; display: grid }

.auth-primary {
    border: none;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius);
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 650;
    transition: background .15s
}

.auth-primary:hover { background: var(--brand-hover) }
.auth-primary:disabled { opacity: .6 }

/* SSO: a secondary path, so it reads quieter than the primary sign-in button */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--secondary); font-size: 0.75rem }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border) }
.auth-sso {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; width: 100%;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    color: var(--text); font-size: 0.875rem; font-weight: 650; text-decoration: none;
    transition: background .15s, border-color .15s
}
.auth-sso:hover { background: var(--surface-subtle); border-color: var(--secondary) }
.auth-sso img { width: 18px; height: 18px; object-fit: contain }
.auth-sub.sso-note { text-align: center; margin-top: 8px; font-size: 0.75rem }

.auth-alt { color: var(--secondary); text-align: center; margin-top: 14px; font-size: 0.78125rem }
.auth-alt button { border: none; background: none; color: var(--brand); font-size: 0.78125rem; font-weight: 650; padding: 0 }
.auth-alt button:hover { text-decoration: underline }

.auth-done { text-align: center; padding: 8px 0 }
.auth-done span { font-size: 2.125rem; display: block; margin-bottom: 8px }
.auth-done h3 { margin-bottom: 6px }
.auth-done p { color: var(--secondary); font-size: 0.8125rem; margin: 0 0 16px }
.auth-done button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius);
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 600
}

.auth-foot { color: var(--tertiary); font-size: 0.71875rem }

/* sign-out button in the sidebar */
.user-card button {
    border: none;
    background: none;
    color: var(--tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    padding: 4px 7px
}

.user-card button:hover { background: var(--danger-bg); color: var(--danger) }

/* ==== People management (Settings) ==== */

.pending-panel { border: 1px solid #f0c274; background: var(--warning-bg) }
.pending-panel .panel-head h3 { color: var(--warning) }

.person-line.manage {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.person-line.manage .pl-main { flex: 1 1 220px; min-width: 0 }
.person-line.manage .pl-main b { font-size: 0.84375rem }
.person-line.manage .pl-main small { display: block; color: var(--secondary); font-size: 0.71875rem }

.reset-flag {
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: 999px;
    font-style: normal;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 0.625rem;
    font-weight: 700
}

.person-line.manage input,
.person-line.manage select {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.75rem
}

.pl-title { width: 130px }
.pl-division { width: 110px }
.pl-level { width: 190px }

.person-line.manage button {
    border: 1px solid var(--border-strong);
    background: #fff;
    border-radius: var(--radius-sm);
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: 600
}

.pl-approve { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important }
.pl-reject:hover, .pl-disable:hover { color: var(--danger); border-color: #fda29b }
.pl-reset.urgent { border-color: var(--danger); color: var(--danger) }
.person-line.disabled .pl-main { opacity: .5 }

.tab-dot {
    background: var(--danger);
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-left: 4px
}

/* ==== Hierarchy (Roles & permissions) ==== */

.tier {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden
}

.tier-head {
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 13px;
    display: flex
}

.tier-head b { font-size: 0.78125rem; color: var(--brand) }
.tier-head small { color: var(--text); font-size: 0.75rem; font-weight: 650 }
.tier-desc { color: var(--tertiary); font-size: 0.6875rem; margin-left: auto }

.tier-people { flex-wrap: wrap; gap: 8px; padding: 10px 13px; display: flex }

.tier-chip {
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 5px;
    font-size: 0.78125rem;
    font-weight: 600;
    display: inline-flex
}

.tier-chip i {
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
    font-weight: 700;
    font-style: normal;
    display: flex
}

.tier-chip small { color: var(--secondary); font-weight: 500 }
.tier-empty { color: var(--tertiary); font-size: 0.75rem; font-style: italic }

.appoint-row { gap: 8px; display: flex; flex-wrap: wrap }

.appoint-row select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.8125rem
}

.appoint-row .primary-btn { border: none; background: var(--brand); color: #fff; border-radius: var(--radius); min-height: 38px; padding: 0 16px; font-size: 0.8125rem; font-weight: 600 }

.primary-btn.tall, .danger-btn.tall {
    border-radius: var(--radius);
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    background: #fff
}

.primary-btn.tall { border: none; background: var(--brand); color: #fff }
.danger-btn.tall { color: var(--danger); border-color: #fda29b }

input.locked { background: var(--surface-subtle); color: var(--secondary); cursor: not-allowed }

.sticky-decision.waiting { opacity: .85 }
.sticky-decision.waiting b { color: var(--warning) }

/* ==== Roles editor (permission chips, like the reference) ==== */

.roles-head { justify-content: space-between; align-items: flex-start; gap: 12px; display: flex; margin-bottom: 12px }
.roles-head h3 { margin: 0 }
.roles-head p { margin: 4px 0 0 }
.roles-head .primary-btn { border: none; background: var(--brand); color: #fff; border-radius: var(--radius); min-height: 38px; padding: 0 14px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap }

.role-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-subtle);
    margin-bottom: 12px;
    padding: 14px
}

.role-card-head { align-items: center; gap: 10px; margin-bottom: 4px; display: flex }

.role-name {
    border: 1px solid transparent;
    background: none;
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.90625rem;
    font-weight: 700;
    width: 200px
}

.role-name:not([readonly]):hover, .role-name:not([readonly]):focus { border-color: var(--border-strong); background: #fff }
.role-card-head small { color: var(--tertiary); font-size: 0.71875rem }
.role-lock { color: var(--tertiary); font-size: 0.6875rem; font-style: italic; margin-left: auto }

.role-delete {
    border: none;
    background: none;
    color: var(--tertiary);
    margin-left: auto;
    font-size: 0.71875rem;
    font-weight: 600
}
.role-delete:hover { color: var(--danger) }

.perm-group-label {
    color: var(--tertiary);
    letter-spacing: .08em;
    font-size: 0.59375rem;
    font-weight: 750;
    margin: 10px 0 6px;
    display: block
}

.perm-chips { flex-wrap: wrap; gap: 7px; display: flex }

.perm-chip {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--tertiary);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 13px;
    font-size: 0.78125rem;
    font-weight: 550;
    display: inline-flex;
    transition: all .13s ease-out
}

.perm-chip i {
    font-style: normal;
    font-size: 0.6875rem;
    width: 11px;
    display: inline-block
}

.perm-chip:hover:not(:disabled) { border-color: var(--brand); transform: scale(1.03) }
.perm-chip:active:not(:disabled) { transform: scale(.96) }

.perm-chip.on {
    background: var(--brand-subtle);
    border-color: var(--brand);
    color: var(--brand)
}

.perm-chip.locked { opacity: .75; cursor: default }

.privacy-toggle { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-subtle); padding: 12px }
.privacy-toggle input { accent-color: var(--brand); width: 16px; height: 16px }

.pl-role { width: 130px }

/* labeled fields in people rows */
.pl-f {
    color: var(--tertiary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: grid;
    gap: 3px
}
.pl-f input, .pl-f select { font-weight: 400; letter-spacing: normal; text-transform: none }
.person-line.manage button { align-self: end }
.pl-f input, .pl-f select { color: var(--text) }
.perm-note { color: var(--tertiary); font-size: 0.75rem; font-style: italic; padding: 4px 0 }

/* ==== Typed documents: parent events, KOL deals, stock lines ==== */

.parent-banner {
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand-subtle);
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    display: flex;
    flex-wrap: wrap
}

.parent-banner b { white-space: nowrap }
.parent-banner span { flex: 1; color: var(--secondary); min-width: 200px }
.parent-banner a { color: var(--brand); font-weight: 650; text-decoration: underline; white-space: nowrap }

.parent-chip {
    border: 1px solid var(--border-strong);
    background: var(--brand-subtle);
    color: var(--brand);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 650;
    display: inline-flex;
    width: fit-content
}

.parent-chip:hover { text-decoration: underline }

.budget-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    margin: 4px 0 12px;
    padding: 14px 16px
}

.budget-figures { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 10px }
.budget-figures span { display: grid; gap: 2px }
.budget-figures small { color: var(--tertiary); font-size: 0.65625rem; font-weight: 650; letter-spacing: .04em }
.budget-figures b { font-size: 0.9375rem }
.budget-figures b.over-budget { color: var(--danger) }

.budget-bar {
    background: var(--border);
    border-radius: 999px;
    height: 8px;
    overflow: hidden
}

.budget-bar i {
    background: var(--brand);
    border-radius: 999px;
    height: 100%;
    display: block;
    transition: width .3s
}

.child-list { display: grid; gap: 8px; margin-bottom: 12px }

.child-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    display: flex;
    color: var(--text)
}

.child-row:hover { border-color: var(--brand); background: var(--brand-subtle) }
.child-main { flex: 1; display: grid; gap: 2px; min-width: 0 }
.child-main b { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.child-main small { color: var(--tertiary); font-size: 0.71875rem }
.child-amount { font-size: 0.8125rem; white-space: nowrap }
.child-add { text-decoration: none; display: block; text-align: center }

.arrangement-list { margin-bottom: 14px }

.ctype-grid { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px }

.ctype {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.78125rem;
    font-weight: 550;
    cursor: pointer;
    display: inline-flex;
    user-select: none
}

.ctype:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand) }
.ctype input { accent-color: var(--brand); margin: 0 }

.ktp-attach { margin-top: 4px }

/* ==== Custody: receipt (serah terima), liability, GA returns ==== */

.custody-banner {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    padding: 13px 16px;
    font-size: 0.8125rem;
    display: flex;
    flex-wrap: wrap
}

.custody-banner.waiting { background: var(--warning-bg); border-color: #f0c274 }
.custody-banner.received { background: var(--success-bg); border-color: #9fd6b4 }
.custody-banner b { white-space: nowrap }
.custody-banner > span { flex: 1; color: var(--secondary); min-width: 220px }

.receipt-btn {
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    min-height: 36px;
    padding: 0 16px;
    font-size: 0.78125rem;
    font-weight: 650;
    white-space: nowrap
}

.receipt-btn:hover { background: var(--brand-hover) }

.receipt-photo-block { margin-bottom: 12px }
.receipt-photo-name { color: var(--secondary); font-size: 0.78125rem; padding: 6px 2px 0 }

.liability-check {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-subtle);
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 2px;
    padding: 12px 14px;
    font-size: 0.78125rem;
    line-height: 1.5;
    display: flex;
    cursor: pointer
}

.liability-check input { accent-color: var(--brand); margin-top: 2px; flex: 0 0 auto }
.liability-check span { color: var(--secondary) }
.liability-check b { color: var(--text) }

.condition-list { display: grid; gap: 8px; margin-bottom: 12px }

.condition {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    display: flex;
    cursor: pointer
}

.condition.selected { border-color: var(--brand); background: var(--brand-subtle) }
.condition input { accent-color: var(--brand) }
.condition span { display: grid; gap: 1px }
.condition b { font-size: 0.8125rem }
.condition small { color: var(--tertiary); font-size: 0.71875rem }

/* ==== Person typeahead (Borrowing from — name) ==== */

.typeahead-wrap { position: relative }

.ta-list {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 30;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0
}

.ta-item {
    border: 0;
    background: none;
    border-radius: var(--radius);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    display: flex;
    cursor: pointer
}

.ta-item:hover { background: var(--brand-subtle) }

.ta-avatar {
    background: var(--brand);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    display: grid
}

.ta-main { flex: 1; display: grid; gap: 1px; min-width: 0 }
.ta-main b { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* long titles/divisions ("SALES B2B & B2G, TRADITIONAL MARKET, …") must clip,
   not wrap the row into a paragraph */
.ta-main small {
    color: var(--tertiary);
    font-size: 0.71875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.ta-role {
    color: var(--secondary);
    font-size: 0.71875rem;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis
}

.ta-empty { color: var(--tertiary); font-size: 0.78125rem; padding: 10px 12px }

/* per-format KOL content counters (3× Reel, 2× Story, …) */
.ctype-grid.counts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px }

.ctype-count {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 4px;
    font-size: 0.78125rem;
    font-weight: 550;
    display: inline-flex
}

.ctype-count.has { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand) }

.ctype-count input {
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    border-radius: 999px;
    width: 44px;
    min-height: 26px;
    padding: 0;
    text-align: center;
    font-size: 0.78125rem;
    font-weight: 650
}

.ctype-count.has input { border-color: var(--brand); background: #fff; color: var(--brand) }

/* ==== Division ladders (Settings) ==== */
.ladder-block { border-top: 1px solid var(--border); padding: 14px 0 6px; margin-top: 6px }
.ladder-block h4 { margin: 0 0 10px; font-size: 0.84375rem; font-weight: 650 }
.ladder-block .add-row { margin-top: 4px }
.ladder-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--secondary);
    border-radius: var(--radius-sm);
    width: 30px;
    min-height: 34px;
    font-size: 0.8125rem
}
.ladder-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand) }
.ladder-btn:disabled { opacity: .35 }
.ladder-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg) }
.ladder-actions { margin-top: 14px }

/* ==== Employee roster (Settings) ==== */
.roster-panel .big-search { margin: 12px 0 10px }
.roster-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); max-height: 480px; overflow-y: auto }
.roster-table { width: 100%; border-collapse: collapse; font-size: 0.78125rem; min-width: 760px }
.roster-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-subtle);
    text-align: left; font-weight: 650; font-size: 0.71875rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--secondary);
    padding: 9px 12px; border-bottom: 1px solid var(--border)
}
.roster-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap }
.roster-table tbody tr:last-child td { border-bottom: 0 }
.roster-table td:first-child { font-variant-numeric: tabular-nums; color: var(--secondary) }
.roster-import { margin-top: 14px }
.roster-import summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--secondary) }
.roster-import p { font-size: 0.78125rem; color: var(--secondary); margin: 10px 0 8px }
.roster-import textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 0.75rem }

/* ==== First sign-in password gate ==== */
.pw-gate {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(16, 24, 40, .55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px
}
.pw-gate-card {
    background: var(--surface); border-radius: var(--radius-xl); padding: 26px 28px;
    max-width: 420px; width: 100%; box-shadow: var(--shadow-lg)
}
.pw-gate-card h3 { margin: 0 0 8px }
.pw-gate-card p { font-size: 0.8125rem; color: var(--secondary); margin: 0 0 16px }
.pw-gate-card label { display: block; font-size: 0.78125rem; font-weight: 600; margin-bottom: 12px }
.pw-gate-card input { width: 100%; margin-top: 5px }
.pw-gate-card .primary-btn { width: 100%; margin-top: 4px }
.roster-head-actions { display: flex; gap: 8px; flex-wrap: wrap }

/* ==== Catalog picker (Brand → Product → Variant) on borrow lines ==== */
.line-pick {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px 2px;
}
.line-pick select { min-width: 0 }
.line-pick label { font-size: 0.71875rem; font-weight: 600; color: var(--secondary) }
.line-pick select { width: 100%; margin-top: 4px }
.line-pick select:disabled { opacity: .55 }
.line-pick.steps-3 { grid-template-columns: 150px 140px minmax(0, 1fr) }
.line-pick.steps-4 { grid-template-columns: 150px 140px minmax(0, 1fr) 150px }
.line-pick.steps-5 { grid-template-columns: 140px 130px minmax(0, 1fr) 140px 130px }
.line-pick.solo { grid-template-columns: 1fr }
/* phones: one field per row — must come last and match the .steps-N
   specificity, or those multi-column grids overflow the screen */
@media (max-width: 900px) {
    .line-pick.steps-3,
    .line-pick.steps-4,
    .line-pick.steps-5,
    .line-pick.solo,
    .line-pick { grid-template-columns: 1fr }
}
.custody-pick { font-size: 0.71875rem; font-weight: 600; color: var(--secondary) }
.custody-pick select { width: 100%; margin-top: 4px }
.brand-synced { margin: 4px 0 18px }
.option-chip.synced { background: var(--surface-subtle); color: var(--secondary); padding-right: 10px }
.brand-sync-note { font-size: 0.71875rem; color: var(--secondary); margin: 8px 0 0 }
.muted-note { font-size: 0.78125rem; color: var(--secondary) }
.ta-more { color: var(--tertiary); font-size: 0.71875rem; padding: 8px 12px; border-top: 1px solid var(--border) }
.line-pick .typeahead-wrap { position: relative }
.line-pick .ta-list { left: 0; right: 0; min-width: 280px }
.line-pick input[data-prodsearch] { width: 100%; margin-top: 4px }
.erp-block { margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--border) }
.erp-block textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 0.75rem }

/* ==== Page transitions: quick symmetric cross-fade on route changes ==== */
::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .18s;
    animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important }
}

/* ==== Sign / receipt / return modals: enter like the dialogs, exit the same path ==== */
.modal-overlay { animation: overlay-in .16s ease-out; transition: opacity .14s ease }
.modal-overlay > * { animation: dialog-in .18s ease-out; transition: opacity .14s ease, transform .14s ease }
.modal-overlay.overlay-closing { opacity: 0 }
.modal-overlay.overlay-closing > * { opacity: 0; transform: translateY(6px) scale(.98) }
@keyframes overlay-in { from { opacity: 0 } to { opacity: 1 } }

/* ==== Async actions show their in-flight state on the button itself ==== */
[data-action].is-busy { opacity: .55; pointer-events: none }

/* ==== Workflow step editor typeaheads ==== */
.step-row .typeahead-wrap { position: relative; min-width: 0; display: block }
.step-row .typeahead-wrap input { width: 100% }
.step-row .ta-list { left: 0; right: 0; top: 100%; min-width: 260px }
/* the editor's generic button rules (22px circle ×-button, floated inline-editor
   buttons) must not reach the suggestion items — restore normal list rows */
.wf-ta .ta-item {
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: var(--radius);
    background: none;
    color: inherit;
    padding: 8px 10px;
    font-size: 0.75rem;
    text-align: left;
}
.wf-ta .ta-item:hover { background: var(--brand-subtle); color: inherit }
.wf-ta .ta-main b { font-size: 0.75rem }
.wf-ta .ta-main small { font-size: 0.65625rem }

/* ==== KOL tracker ==== */
.kol-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding: 10px 14px;
    background: var(--brand-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.kol-total b { font-size: 0.8125rem }
.kol-total span { font-size: 0.75rem; font-weight: 600; color: var(--brand) }
.kol-arr { font-size: 0.625rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--brand-subtle); color: var(--brand); white-space: nowrap }
.kol-products { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.kol-products span { font-size: 0.71875rem; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px }
.kol-units { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 6px }
.kol-units .loc-unit { margin-top: 0 }
.kol-units .loc-await { color: var(--warning); font-size: 0.6875rem }
.loc-field.kol-ta { min-width: 190px }
.loc-field.kol-ta .ta-list { left: 0; right: 0; top: 100% }
/* every control in the cascade shares one height so the labels line up */
.locate-controls .loc-field input, .locate-controls .loc-field select { min-height: 38px }
.kol-card .locate-head { padding: 10px 14px }
.kol-card .locate-req { padding: 10px 14px 12px }

/* ==== Events page — same 32px card rhythm; the page-stack grid gap is the
   single source of sibling spacing (no per-card margins) ==== */
.event-card { padding: 32px }
.event-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px }
.event-head h3 { margin: 0 }
.event-head small { color: var(--secondary); font-size: 0.71875rem }
.event-actions { display: flex; gap: 14px; align-items: center; margin-top: 12px; flex-wrap: wrap }
.event-actions button { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; color: var(--text) }
.event-actions a { font-size: 0.75rem; font-weight: 600; color: var(--brand); text-decoration: none }
.event-card .child-list { margin-top: 12px }

/* ==== Tracker controls card: 32px padding, 16px title→desc, 28px desc→form,
   8px label→input, form ends at the card's own 32px bottom padding ==== */
/* overflow:visible ONLY here (base .panel clips) so the KOL autocomplete can
   escape the card; the positioned stacking context lifts it over the results */
.locate-panel { padding: 32px; overflow: visible; position: relative; z-index: 2 }
.locate-panel h3 { margin: 0 0 16px }
.locate-panel > p { color: var(--secondary); font-size: 0.8125rem; margin: 0 0 28px }
.locate-controls { display: flex; gap: 10px; align-items: flex-end }
.locate-controls .loc-field { display: block; font-size: 0.71875rem; font-weight: 600; color: var(--secondary) }
.locate-controls .loc-field select, .locate-controls .loc-field input { display: block; margin-top: 8px; width: 100% }
.locate-controls .loc-field { min-width: 150px }
.locate-controls .loc-field.grow { flex: 1 }
@media (max-width: 700px) {
    .locate-controls { flex-direction: column; align-items: stretch }
    .locate-controls .loc-field { min-width: 0 }
}
.locate-req { padding: 10px 14px; border-top: 1px solid var(--border) }
.loc-req-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 2px }
.loc-req-head a { font-weight: 700; font-size: 0.75rem; color: var(--brand); text-decoration: none }
.loc-req-head small { color: var(--tertiary); font-size: 0.6875rem }
.loc-status { font-size: 0.625rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em }
.loc-status.approved { background: var(--success-bg); color: var(--success) }
.loc-status.pending { background: var(--warning-bg); color: var(--warning) }
.loc-status.rejected, .loc-status.revision { background: var(--danger-bg); color: var(--danger) }
.locate-req > b { font-size: 0.78125rem; display: block }
.loc-sigs { display: block; color: var(--secondary); font-size: 0.6875rem; margin-top: 2px }
.loc-unit { font-size: 0.71875rem; color: var(--text); margin-top: 4px; display: flex; gap: 6px; align-items: baseline }
.loc-unit i { font-style: normal; color: var(--warning) }
.loc-unit.back { color: var(--secondary) }
.loc-unit.back i { color: var(--success) }
.loc-unit.none { color: var(--tertiary) }
.loc-await { display: block; color: var(--warning); font-size: 0.6875rem; margin-top: 3px }
.locate-hint { color: var(--tertiary); font-size: 0.8125rem; padding: 18px 2px }
.locate-card { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: 12px; overflow: hidden; background: var(--surface) }
/* results sit OUTSIDE the controls panel: full page width. Sibling spacing
   comes from the page-stack grid gap alone — no margin doubling here. */
.locate-results { margin-top: 0 }
.locate-results > :first-child { margin-top: 0 }
.locate-results .locate-hint { padding: 0 2px }
.locate-results .kol-total { margin-top: 12px }
.locate-head { padding: 12px 14px; background: var(--surface-subtle) }
.locate-head b { display: block; font-size: 0.8125rem }
.locate-head small { color: var(--secondary); font-size: 0.71875rem }
.locate-holding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--border); text-decoration: none; color: inherit }
a.locate-holding:hover { background: var(--brand-subtle) }
.locate-holding b { font-size: 0.78125rem; display: block }
.locate-holding small { color: var(--secondary); font-size: 0.6875rem }
.loc-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none }
.loc-dot.out { background: var(--warning) }
.loc-dot.in { background: var(--success) }

/* ==== Stock-out route: what happens after the approvals ==== */
.route-post { color: var(--tertiary); font-size: 0.71875rem; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border) }

/* ==== User phone chip + issuance proof input ==== */
.user-card .user-phone {
    display: block; background: none; border: none; padding: 0; cursor: pointer;
    font-size: 0.6875rem; color: var(--tertiary); text-align: left;
}
.user-card .user-phone:hover { color: var(--brand) }
.ff-add .ff-proof { font-size: 0.71875rem; font-weight: 600; color: var(--secondary) }
.ff-add .ff-proof input { display: block; margin-top: 4px; font-size: 0.75rem }
.activity-event.no-link { cursor: default }

/* ==== VP sign-off threshold (Workflows page) ==== */
.vp-banner .vp-limit-edit { display: flex; gap: 8px; align-items: center; font-weight: 600; white-space: nowrap }
.vp-banner input { width: 130px; text-align: right }

/* ==== Press feedback: respond on pointer-down, on every button ==== */
button:not(:disabled) { transition: transform .1s ease-out }
button:active:not(:disabled) { transform: scale(.97) }

/* ==== Keyboard focus: one brand ring everywhere the forms don't already provide one ==== */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ==== Toast motion: enter from below, exit back the same way ==== */
.toast {
    animation: toast-in .18s ease-out;
    transition: opacity .14s ease-in, transform .14s ease-in;
}
.toast.toast-out { opacity: 0; transform: translateY(8px) }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px) }
    to { opacity: 1; transform: none }
}

/* ==== In-app dialogs (appDialog/appConfirm) — exit mirrors entry ==== */
.dialog-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(16, 24, 40, .55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    transition: opacity .14s ease;
}
.dialog-card {
    background: var(--surface); border-radius: var(--radius-xl); padding: 22px 24px;
    max-width: 440px; width: 100%;
    box-shadow: var(--shadow-lg);
    animation: dialog-in .16s ease-out;
    transition: opacity .14s ease, transform .14s ease;
}
@keyframes dialog-in {
    from { opacity: 0; transform: translateY(6px) scale(.98) }
    to { opacity: 1; transform: none }
}
.dialog-scrim.dialog-closing { opacity: 0 }
.dialog-scrim.dialog-closing .dialog-card { opacity: 0; transform: translateY(6px) scale(.98) }
.dialog-card h3 { margin: 0 0 8px; font-size: 0.9375rem }
.dialog-body {
    font-size: 0.8125rem; color: var(--secondary); margin: 0 0 16px;
    white-space: pre-wrap; overflow-wrap: break-word;
    max-height: 50vh; overflow-y: auto;
}
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end }
.dialog-actions button {
    min-height: 36px; padding: 0 14px; border-radius: var(--radius);
    font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.dialog-actions .primary-btn { border: none; background: var(--brand); color: #fff }
.dialog-actions .primary-btn:hover { background: var(--brand-hover) }
.dialog-actions .danger-btn { border: none; background: var(--danger); color: #fff }
.dialog-actions .plain-btn { background: var(--surface); border: 1px solid var(--border); color: var(--secondary) }