/* Sidebar directories share these tokens. Public pages and record/editing canvases
   are deliberately excluded by directory-ui.js before their markup is rendered. */
.directory-page {
    --directory-ink: #0d2829;
    --directory-muted: #68766f;
    --directory-line: #dce3df;
    --directory-divider: #e9eeeb;
    --directory-surface: #f7f9f8;
    --directory-control: 38px;
    --directory-search: 390px;
    --directory-radius: 8px;
    width: 100%; max-width: none; min-width: 0; margin: 0;
    padding: 28px 32px; background: #fff; color: var(--directory-ink);
    font: 400 13px/1.5 Inter, sans-serif;
}
.directory-page > .page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin: 0 0 24px; padding: 0;
}
.directory-page > .page-head h1 {
    margin: 0; padding: 0; font: 600 26px/34px Inter, sans-serif;
    letter-spacing: -.6px; color: var(--directory-ink);
}
.directory-page > .page-head p {
    margin: 6px 0 0; max-width: none; color: var(--directory-muted);
    font: 400 13px/20px Inter, sans-serif;
}
.directory-page > .page-head :is(.iw-actions,.cl-actions,.mp-actions,.es-list-actions,.document-row-actions) {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.directory-page > .page-head :is(button,a.button,a.iw-button,a.cl-button,a.wf-button),
.directory-page :is(.iw-search,.cl-filters,.pr-filters,.mp-filters,.list-controls) > button,
.directory-page :is(.module-card-side,.form-card-actions) button,
.directory-page .form-card-actions > a,
.directory-page .iw-card > .iw-button,
.directory-page :is(.iw-empty,.module-empty,.mp-empty) > button {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; gap: 7px; min-height: var(--directory-control); height: var(--directory-control);
    padding: 0 14px; border: 1px solid var(--directory-line); border-radius: 999px;
    background: #fff; color: var(--directory-ink); box-shadow: none;
    font: 500 13px/20px Inter, sans-serif; white-space: nowrap; text-decoration: none;
}
.directory-page > .page-head .primary {
    background: var(--directory-ink); border-color: var(--directory-ink); color: #fff;
}
.directory-page > .page-head :is(button,a.button,a.iw-button,a.cl-button,a.wf-button) svg,
.directory-page :is(.iw-search,.cl-filters,.pr-filters,.mp-filters) > button svg {
    width: 16px; height: 16px; flex: 0 0 16px;
}
.directory-page :is(button,a,input,select):focus-visible {
    outline: 2px solid #377859; outline-offset: 3px;
}

/* Summary order is kept in the source renderers, not rearranged after render. */
.directory-page > :is(.module-summary,.module-metrics,.mw-metrics,.cl-metrics,.pr-metrics,.mp-metrics) {
    gap: 14px; margin: 0 0 20px; padding: 0; min-width: 0;
}
#app .directory-page :is(.module-summary > div,.module-metrics > article,.mw-metric,.cl-metric,.pr-metric,.mp-metric) {
    box-sizing: border-box; min-width: 0; min-height: 90px; height: auto;
    padding: 16px 18px!important; gap: 14px; border: 1px solid var(--directory-line);
    border-radius: var(--directory-radius)!important; background: #fff; box-shadow: none;
    color: var(--directory-ink); text-align: left; text-decoration: none;
}
.directory-page :is(.module-metrics > article,.mw-metric,.cl-metric,.pr-metric,.mp-metric) {
    display: flex; align-items: center; justify-content: flex-start;
}
#app .directory-page .module-summary > div {
    display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 4px; align-content: center;
}
.directory-page .module-summary > div > .summary-icon { grid-column: 1; grid-row: 1/3; }
.directory-page .module-summary > div > strong { grid-column: 2; grid-row: 1; }
.directory-page .module-summary > div > span:not(.summary-icon) { grid-column: 2; grid-row: 2; margin: 0; }
.directory-page :is(.module-metrics > article > span,.summary-icon) {
    order: 0; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px;
    border: 0; border-radius: 0; background: transparent!important; color: #a5ada9!important;
}
.directory-page :is(.module-metrics > article > span,.summary-icon) svg,
.directory-page :is(.mw-metric,.cl-metric,.pr-metric,.mp-metric) > svg:first-child {
    width: 30px; height: 30px; flex: 0 0 30px; color: #a5ada9!important; stroke: currentColor;
}
.directory-page .mp-metric > svg:last-child:not(:first-child) {
    width: 14px; height: 14px; flex: 0 0 14px; margin-left: auto; color: #a5ada9;
}
.directory-page :is(.module-metrics > article > div,.mw-metric > span,.cl-metric > span,.pr-metric > span,.mp-metric > span) {
    display: flex; flex-direction: column; min-width: 0; gap: 4px;
}
.directory-page :is(.module-summary,.module-metrics,.mw-metrics,.cl-metrics,.pr-metrics,.mp-metrics) strong {
    font: 600 26px/30px Inter,sans-serif; letter-spacing: -.6px; font-variant-numeric: tabular-nums;
}
.directory-page :is(.module-metrics small,.module-summary > div > span:not(.summary-icon),.mw-metric > span > span,.cl-metric > span > span,.pr-metric > span > span,.mp-metric > span > span) {
    order: 0; color: var(--directory-muted); font: 400 13px/18px Inter,sans-serif;
    letter-spacing: 0; white-space: normal; margin: 0;
}
#app .directory-page :is(.module-summary > div,.module-metrics > article,.mw-metric,.cl-metric,.pr-metric,.mp-metric):is(.is-active,.is-selected) {
    background: #f0f6f2; border-color: #b5c8bd; box-shadow: inset 0 0 0 1px #b5c8bd30;
}

/* One search and filter treatment, with the selected filter value visible. */
.directory-page :is(.list-controls,.iw-search,.cl-filters,.pr-filters,.mp-filters) {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;
    gap: 10px; margin: 0 0 16px; padding: 0; min-width: 0;
}
.directory-page :is(.list-search,.iw-search-input,.cl-filters > label:has(input[type=search]),.mp-filters > label:has(input[type=search]),.mail-search) {
    box-sizing: border-box; display: flex; align-items: center; align-self: auto;
    flex: 0 1 var(--directory-search); width: var(--directory-search); max-width: 100%; min-width: 0;
    height: var(--directory-control); min-height: var(--directory-control); gap: 8px; margin: 0;
    padding: 0 11px; border: 1px solid var(--directory-line); border-radius: var(--directory-radius);
    background: #fff; color: var(--directory-muted); box-shadow: none;
}
.directory-page :is(.list-search,.iw-search-input,.cl-filters,.mp-filters,.mail-search) input[type=search] {
    flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; max-height: none;
    margin: 0; padding: 0!important; border: 0!important; border-radius: 0;
    background: transparent; box-shadow: none; color: var(--directory-ink);
    font: 400 13px/20px Inter,sans-serif;
}
.directory-page :is(.list-search,.iw-search-input,.cl-filters,.mp-filters,.mail-search) input::placeholder {
    color: #7c8982; font-weight: 400; opacity: 1;
}
.directory-page :is(.list-search,.iw-search-input,.cl-filters > label,.mp-filters > label,.mail-search) > svg {
    width: 16px; height: 16px; flex: 0 0 16px; color: #929e97;
}
.directory-page :is(.list-search,.iw-search-input,.cl-filters > label,.mp-filters > label,.mail-search):focus-within {
    outline: 2px solid #377859; outline-offset: 2px;
}
.directory-page :is(.list-search,.iw-search-input,.cl-filters,.mp-filters,.mail-search) input:focus { outline: none; }
.directory-page :is(.iw-search,.pr-filters) > label:not(.iw-search-input) {
    display: block; flex: 0 1 auto; width: auto; min-width: 0; max-width: 240px; margin: 0; font-size: 0;
}
.directory-page :is(.iw-search,.pr-filters) > label:not(.iw-search-input) > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.directory-page .list-filter {
    display: block; flex: 0 1 auto; width: auto; height: var(--directory-control);
    padding: 0; border: 0; background: none; border-radius: var(--directory-radius);
}
.directory-page .list-filter > :is(span,svg) { display: none; }
.directory-page :is(.list-filter,.iw-search,.cl-filters,.pr-filters,.mp-filters) select,
.directory-page .mail-assignment-filter {
    box-sizing: border-box; position: static; inset: auto; opacity: 1;
    min-width: 150px; width: auto; max-width: 240px; height: var(--directory-control);
    margin: 0; padding: 0 12px; border: 1px solid var(--directory-line);
    border-radius: var(--directory-radius); background: #fff; color: var(--directory-ink);
    font: 400 13px/20px Inter,sans-serif; cursor: pointer;
}

/* Section tabs retain native URLs and consistent underline geometry. */
.directory-page > :is(.iw-tabs,.workspace-library-tabs,.mp-tabs),
.directory-page .document-library-bar {
    display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap;
    gap: 24px; padding: 0; margin: 0 0 16px; min-width: 0;
    border: 0; border-bottom: 1px solid var(--directory-line); border-radius: 0;
    background: none; overflow-x: auto; scrollbar-width: thin;
}
.directory-page :is(.iw-tabs,.workspace-library-tabs,.mp-tabs,.document-list-tabs,.document-library-scope) > a {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; gap: 7px; height: 44px; min-height: 44px; padding: 0 0 1px;
    margin: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0!important;
    background: none; box-shadow: none; color: var(--directory-muted);
    font: 500 13px/20px Inter,sans-serif; white-space: nowrap; text-decoration: none;
}
.directory-page :is(.iw-tabs,.workspace-library-tabs,.mp-tabs,.document-list-tabs,.document-library-scope) > a:is(.active,.is-active,[aria-current=page]) {
    color: var(--directory-ink); border-bottom-color: var(--directory-ink); background: none;
}
.directory-page :is(.iw-tabs,.workspace-library-tabs,.mp-tabs,.document-list-tabs,.document-library-scope) > a svg {
    width: 16px; height: 16px; flex: 0 0 16px;
}
.directory-page .document-library-bar :is(.document-list-tabs,.document-library-scope) {
    gap: 24px; margin: 0; padding: 0; border: 0; background: none;
}

/* Real tables and CSS-grid registers get the same complete outer frame. */
.directory-page :is(.base-list,.cl-register,.pr-register,.mp-register,.mw-list,.mail-split) {
    border: 1px solid var(--directory-line); border-radius: var(--directory-radius);
    background: #fff; box-shadow: none; overflow: auto;
}
.directory-page :is(.base-list,.cl-register,.pr-register,.mp-register) :is(th,td) {
    border: 0; border-bottom: 1px solid var(--directory-divider); border-radius: 0!important;
    padding: 14px 18px; text-align: left; font: 400 13px/20px Inter,sans-serif;
    color: var(--directory-ink); box-shadow: none;
}
.directory-page :is(.cl-register,.pr-register,.mp-register) table {
    width: 100%; border-collapse: separate; border-spacing: 0;
}
.directory-page :is(.cl-register,.pr-register,.mp-register) th { position: relative; }
.directory-page :is(.cl-register,.pr-register,.mp-register) th,
.directory-page .base-list :is(.base-head,.esign-row.head,.document-row.head) {
    min-height: 44px; height: 44px; padding: 0 18px;
    border: 0; border-bottom: 1px solid var(--directory-line); background: var(--directory-surface);
    color: var(--directory-muted); font: 500 12px/18px Inter,sans-serif;
    text-transform: none; letter-spacing: 0; box-shadow: none;
}
.directory-page .base-list :is(.base-row,.esign-row,.document-row) {
    border-radius: 0!important; border-right: 0; border-left: 0;
}
/* The eSigning row reserves 44px for its separate lifecycle action. */
.directory-page.esign-list .esign-row.head { padding-right: 62px; }
.directory-page .base-list :is(.base-item,.esign-row:not(.head),.document-row:not(.head)) {
    min-height: 64px; padding: 12px 18px; border-bottom: 1px solid var(--directory-divider);
    font: 400 13px/20px Inter,sans-serif;
}
.directory-page .base-list .base-item { padding-top: 0; padding-bottom: 0; }
.directory-page .base-row-main { min-height: 63px; }
.directory-page .base-list :is(.base-head,.esign-row.head,.document-row.head) > span {
    font: inherit; color: inherit; border: 0;
}
.directory-page .base-list :is(.base-title strong,.esign-row strong,.document-row strong) {
    font-size: 13px; font-weight: 500;
}
.directory-page .base-list :is(.base-title small,.esign-row small,.document-row small),
.directory-page :is(.cl-register,.pr-register,.mp-register) td small {
    font: 400 12px/18px Inter,sans-serif; color: var(--directory-muted);
}
.directory-page :is(.cl-register,.pr-register,.mp-register) tbody tr:last-child td,
.directory-page .base-list > :is(.base-item,.esign-row,.document-row):last-child { border-bottom: 0; }
.directory-page :is(.base-list,.cl-register,.pr-register,.mp-register) :is(.empty,.list-empty,.module-empty,.iw-empty,.cl-empty,.mp-empty) {
    margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; padding: 48px 20px;
}
.directory-page :is(.iw-card,.module-card,.form-card) { border-color: var(--directory-line); border-radius: var(--directory-radius); box-shadow: none; }
.directory-page .automation-list :is(p,small,.module-card-side,.workflow-line) { font-size: 12px; line-height: 18px; }
.directory-page .automation-list .module-title h2 { font-size: 14px; line-height: 20px; }
.directory-page .form-card-actions { flex-wrap: wrap; gap: 8px; }
.directory-page .form-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr)); }
.directory-page .form-card-actions :is(button,a) { padding-right: 10px; padding-left: 10px; }

/* Keep the Inbox compact; do not add a second toolbar or interfere with panes. */
.directory-page.mail-page { padding: 28px 32px 20px; overflow: hidden; }
.directory-page.mail-page > .page-head { align-items: center; margin-bottom: 16px; }
.directory-page .mail-box-picker select { height: var(--directory-control); font-size: 13px; border-color: var(--directory-line); }
.directory-page .mail-toolbar { margin-bottom: 12px; gap: 16px; }
.directory-page .mail-list-controls { display: flex; gap: 10px; min-width: 0; flex: 0 1 auto; }
.directory-page .mail-assignment-filter { display: flex; align-items: center; gap: 7px; min-width: 180px; }
.directory-page .mail-assignment-filter select { border: 0; padding: 0; min-width: 0; flex: 1; height: 100%; font: 400 13px/20px Inter,sans-serif; }
.directory-page .mail-search { flex-basis: var(--directory-search); }
.directory-page .mail-search button { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; }
.directory-page .mail-folder { min-height: var(--directory-control); font-size: 13px; }
.directory-page .mail-split { overflow: hidden; }

@media (max-width: 1000px) {
    .directory-page > .page-head { flex-wrap: wrap; }
    .directory-page .mail-toolbar { flex-wrap: wrap; }
    .directory-page .mail-list-controls { flex: 1 1 100%; }
    .directory-page .mail-search { flex: 0 1 var(--directory-search); }
}
@media (max-width: 700px) {
    .directory-page,.directory-page.mail-page { padding: 20px 16px; }
    .directory-page > .page-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
    .directory-page > .page-head h1 { font-size: 23px; line-height: 30px; }
    .directory-page > .page-head :is(.iw-actions,.cl-actions,.mp-actions,.es-list-actions,.document-row-actions) { max-width: 100%; }
    .directory-page > :is(.module-summary,.module-metrics,.mw-metrics,.cl-metrics,.pr-metrics,.mp-metrics) {
        grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 16px;
    }
    #app .directory-page :is(.module-summary > div,.module-metrics > article,.mw-metric,.cl-metric,.pr-metric,.mp-metric) { padding: 14px 12px!important; gap: 10px; }
    #app .directory-page .module-summary > div { column-gap: 10px; row-gap: 4px; }
    .directory-page :is(.list-search,.iw-search-input,.cl-filters > label:has(input[type=search]),.mp-filters > label:has(input[type=search]),.mail-search) {
        width: 100%; max-width: 100%; min-width: 0; flex-basis: 100%;
    }
    .directory-page :is(.iw-search,.pr-filters) > label:not(.iw-search-input) { flex: 1 1 140px; max-width: 100%; }
    .directory-page :is(.list-filter,.iw-search,.cl-filters,.pr-filters,.mp-filters) select { min-width: 0; max-width: 100%; width: 100%; }
    .directory-page :is(.cl-filters,.mp-filters) > select { flex: 1 1 140px; width: auto; }
    .directory-page .list-filter { flex: 1 1 150px; }
    .directory-page .document-library-bar { flex-wrap: wrap; gap: 8px 20px; }
    .directory-page .document-library-bar :is(.document-list-tabs,.document-library-scope) { max-width: 100%; gap: 20px; }
    .directory-page .base-list > :is(.base-head,.base-item) { min-width: 740px; }
    .directory-page .base-list > :is(.esign-row,.esign-library-row) { min-width: 640px; }
    .directory-page.mail-page > .page-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
    .directory-page .mail-list-controls { flex-wrap: wrap; }
    .directory-page .mail-assignment-filter { flex: 1 1 100%; max-width: 100%; }
    .directory-page .mail-search { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .directory-page :is(button,a) { transition: none; }
}