.signing-pdf-file-list {
    display: grid;
    gap: .5rem;
    margin: .75rem 0;
}

.information-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
    color: #526b84;
    font-size: .9rem;
}

.admin-dashboard { padding: 1.5rem; background: #f4f7fb; min-height: calc(100vh - 4rem); color: #17243a; }
.admin-dashboard-header, .admin-card-heading, .admin-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-dashboard-header h1 { margin: 0; font-weight: 750; }
.admin-dashboard-header p { margin: .25rem 0 0; color: #66758b; }
.admin-user-actions { white-space: nowrap; text-align: right; }
.admin-action-icon { border: 0; background: transparent; border-radius: .4rem; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: .35rem; }
.admin-action-icon:hover:not(:disabled) { background: #e8eef8; }
.admin-action-icon:disabled { cursor: not-allowed; opacity: .35; }
.admin-action-icon.activate { color: #087f5b; }
.admin-action-icon.lock { color: #b45309; }
.admin-action-icon.unlock { color: #2563eb; }
.admin-action-icon span { font-size: .9rem; margin-left: .25rem; }
.admin-account-actions h3 { font-size: 1rem; margin-bottom: .5rem; }
.admin-detail-action-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.admin-detail-action-row .admin-action-icon { border: 1px solid #d8e1ee; padding: .5rem .65rem; }
.admin-status.locked { background: #fff4d6; color: #9a6700; }
.admin-dashboard-eyebrow { color: #1264d8 !important; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0; }
.admin-stat-card, .admin-user-list-card, .admin-user-detail-card { background: #fff; border: 1px solid #e4eaf2; border-radius: .65rem; box-shadow: 0 3px 14px rgba(25, 53, 88, .06); }
.admin-stat-card { display: flex; align-items: center; gap: .8rem; padding: 1rem; }
.admin-stat-card strong { display: block; font-size: 1.5rem; }.admin-stat-card small { color: #748198; }
.admin-stat-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; }.admin-stat-icon.blue { background: #e5f0ff; color: #1672e8; }.admin-stat-icon.green { background: #e1f9ec; color: #10944b; }.admin-stat-icon.orange { background: #fff0dc; color: #e98513; }.admin-stat-icon.purple { background: #eee8ff; color: #7350c7; }
.admin-dashboard-body { display: grid; grid-template-columns: minmax(0, 1fr) 10px minmax(300px, var(--admin-detail-panel-width, 420px)); gap: 1rem; align-items: stretch; }.admin-user-list-card, .admin-user-detail-card { min-width: 0; overflow: hidden; }.admin-detail-panel-resizer { width: 10px; min-width: 10px; margin: 0 -0.5rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; cursor: col-resize !important; touch-action: none; }.admin-detail-panel-resizer:hover, .admin-detail-panel-resizer:focus-visible, body.admin-detail-panel-resizing .admin-detail-panel-resizer { background: #c5d9f2; outline: none; cursor: col-resize !important; } body.admin-detail-panel-resizing, body.admin-detail-panel-resizing * { cursor: col-resize !important; user-select: none !important; }.admin-card-heading { padding: 1rem; border-bottom: 1px solid #edf0f5; }.admin-card-heading h2, .admin-detail-heading h2 { margin: 0; font-size: 1.05rem; }.admin-card-heading span, .admin-detail-heading span { color: #78869a; font-size: .82rem; }.admin-user-search { max-width: 280px; }
.admin-user-table { margin: 0; }.admin-user-table tr { cursor: pointer; transition: background .15s, box-shadow .15s; }.admin-user-table tbody tr:hover td { background: #f3f8ff !important; }.admin-user-table tbody tr.admin-user-row-selected td, .admin-user-table tbody tr.admin-user-row-selected:hover td { background: #cfe6ff !important; color: #073d82 !important; font-weight: 600; box-shadow: inset 0 3px 0 #1476e8, inset 0 -3px 0 #1476e8; }.admin-user-table tbody tr.admin-user-row-selected td:first-child { box-shadow: inset 4px 3px 0 #1476e8, inset 0 -3px 0 #1476e8; }.admin-user-table tbody tr.admin-user-row-selected td:last-child { box-shadow: inset 0 3px 0 #1476e8, inset -4px -3px 0 #1476e8; }.admin-user-table td { vertical-align: middle; }.admin-user-table td strong, .admin-user-table td small { display: block; }.admin-user-table td small { color: #77849a; }.admin-user-table tr.selected td small { color: #38628d; }.admin-status { padding: .25rem .55rem; border-radius: 2rem; font-size: .75rem; white-space: nowrap; }.admin-status.active { color: #087b3e; background: #dcf8e8; }.admin-status.inactive { color: #a45b00; background: #fff0d7; }.admin-empty, .admin-loading { padding: 2rem; text-align: center; color: #738096; }
.admin-pagination-notice { margin-bottom: 1rem; font-size: .8rem; }.admin-quota-summary, .admin-detail-quota { display: grid; gap: .45rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #dce7f1; border-radius: .65rem; background: #fff; }.admin-quota-summary > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }.admin-quota-summary small, .admin-detail-quota small { color: #748198; }.admin-quota-progress { height: .5rem; overflow: hidden; border-radius: 1rem; background: #e8eef5; }.admin-quota-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1687e8, #16ae73); }.admin-quota-warning { color: #a45b00; font-size: .8rem; }.admin-pagination { display: flex; justify-content: center; align-items: center; gap: .8rem; padding: .8rem; border-top: 1px solid #edf0f5; color: #748198; font-size: .8rem; }.admin-quota-unavailable { margin-top: 1rem; padding: .7rem; color: #86600c; background: #fff8df; border: 1px solid #f2df9a; border-radius: .45rem; font-size: .78rem; }
.admin-user-quota { min-width: 130px; display: grid; gap: .2rem; font-size: .72rem; }.admin-user-quota strong { white-space: nowrap; }.admin-user-quota small, .admin-quota-loading { color: #748198; font-size: .68rem; }.admin-user-quota .admin-quota-progress { height: .35rem; }
.admin-user-filters { display: flex; align-items: center; gap: .5rem; }.admin-user-status-filter { width: 170px; font-size: .82rem; }.admin-activate-button { white-space: nowrap; font-size: .7rem; }
.admin-user-detail-card { padding: 1rem; }.admin-avatar { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #1672e8; font-weight: 700; }.admin-detail-tabs { display: flex; gap: .2rem; margin: 1rem -1rem; padding: 0 .5rem; border-bottom: 1px solid #e5eaf1; }.admin-detail-tabs button { border: 0; background: transparent; padding: .65rem .45rem; color: #69778b; font-size: .8rem; }.admin-detail-tabs button.active { color: #1264d8; border-bottom: 2px solid #1264d8; }.admin-detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; font-size: .84rem; }.admin-detail-list dt { color: #7b8799; }.admin-detail-list dd { margin: 0; font-weight: 600; text-align: right; }.admin-permissions { display: grid; gap: .55rem; }.admin-permissions label { font-size: .85rem; }
.admin-permission-legend { display: flex; flex-wrap: wrap; gap: .8rem; color: #66758b; font-size: .75rem; }.admin-permission-legend span { display: inline-flex; align-items: center; gap: .3rem; }.admin-menu-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }.admin-menu-dot.full { background: #9aaabd; }.admin-menu-dot.granted { background: #16864a; }.admin-menu-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; min-width: 0; }.admin-menu-panel { min-width: 0; border: 1px solid #dce5ef; border-radius: .45rem; overflow: hidden; background: #f8fafc; }.admin-menu-panel.selected-menu { border-color: #8dd5aa; background: #f4fcf7; }.admin-menu-panel-heading { display: flex; justify-content: space-between; gap: .4rem; padding: .55rem .65rem; background: #edf3f9; color: #27405e; font-size: .78rem; }.selected-menu .admin-menu-panel-heading { background: #def6e7; color: #126338; }.admin-menu-panel-heading small { color: #738096; }.admin-menu-tree { max-height: 310px; overflow: auto; padding: .4rem; }.admin-menu-node { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: .25rem; padding: .34rem .35rem; margin: .12rem 0; border-radius: .28rem; font-size: .75rem; }.admin-menu-node.full { color: #53657b; }.admin-menu-node.granted { color: #126338; background: #e5f8eb; border-left: 3px solid #25a45b; }.admin-menu-node.admin-menu-parent .admin-menu-node-name { font-weight: 800; color: #203b5b; }.admin-menu-node.admin-menu-parent { background: #eaf1f8; border-top: 1px solid #d9e3ee; }.admin-menu-node.admin-menu-child { margin-left: 1rem; border-left: 2px solid #cbd8e5; padding-left: .65rem; }.admin-menu-node.granted.admin-menu-parent { color: #075a31; background: #d4f2df; }.admin-menu-node.actionable { cursor: pointer; }.admin-menu-node.actionable:hover { outline: 2px solid #75b8f4; outline-offset: -2px; }.admin-menu-node.disabled { opacity: .55; cursor: not-allowed; }.admin-menu-node-icon { color: #8293a7; }.admin-menu-node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-menu-node-code { color: #93a0b0; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; }.admin-menu-tree > .admin-menu-tree { padding-left: .9rem; }.admin-menu-empty { padding: 1rem .5rem; color: #748198; font-size: .78rem; text-align: center; }
@media (max-width: 900px) { .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }.admin-dashboard-body { grid-template-columns: 1fr; }.admin-detail-panel-resizer { display: none; } }
@media (max-width: 560px) { .admin-dashboard { padding: .75rem; }.admin-stat-grid { grid-template-columns: 1fr; }.admin-dashboard-header, .admin-card-heading { align-items: stretch; flex-direction: column; }.admin-user-search { max-width: none; } }

.admin-menu-node.admin-menu-parent.depth-0 .admin-menu-node-name { font-weight: 800; color: #203b5b; }
.admin-menu-node.admin-menu-parent.depth-0 { background: #eaf1f8; border-top: 1px solid #d9e3ee; }
.admin-menu-node.granted.admin-menu-parent.depth-0 { color: #075a31; background: #d4f2df; }

.signing-pdf-file-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .35rem;
}

.signing-pdf-file-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-pdf-stage {
    min-height: 0;
    overflow: auto;
    padding: .75rem;
    background: #eef2f7;
}

.signing-pdf-pages {
    display: grid;
    justify-items: center;
    gap: .5rem;
    min-width: min-content;
}

.signing-pdf-page {
    position: relative;
    width: min(100%, 900px);
    min-width: 320px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .18);
}

.signing-pdf-page.active {
    outline: 2px solid rgba(13, 110, 253, .35);
    outline-offset: 2px;
}

.signing-pdf-canvas {
    display: block;
    width: 100%;
}

.signing-page-overlay {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.signing-location-overlay {
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.signing-location-overlay:active {
    cursor: grabbing;
}

.signing-location-list {
    overflow-y: auto;
}

.signing-location-item[draggable="true"] {
    cursor: grab;
}

.signing-location-item[draggable="true"]:active {
    cursor: grabbing;
}

.floating-chat-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100dvh - 4.5rem);
    min-width: 0;
    min-height: 0;
    background: #f3f7fb;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    display: grid;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-user-picker {
    display: grid;
    gap: .35rem;
    max-height: 18rem;
    overflow-y: auto;
    margin-top: .35rem;
    padding: .35rem;
    border: 1px solid #dce5ee;
    border-radius: .5rem;
    background: #fbfdff;
}

.admin-user-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .45rem .5rem;
    border-radius: .4rem;
    cursor: pointer;
}

.admin-user-option:hover {
    background: #eef6ff;
}

.admin-user-avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    color: #fff;
    background: #2d6da3;
    font-size: .72rem;
    font-weight: 700;
}

.admin-user-copy {
    display: grid;
    min-width: 0;
}

.admin-user-copy strong,
.admin-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-copy strong {
    color: #304963;
}

.admin-user-copy small {
    color: #718198;
    font-size: .76rem;
}

.admin-selected-users {
    display: grid;
    gap: .3rem;
    margin-top: .35rem;
    color: #526b84;
    font-size: .78rem;
}

.admin-selected-user-list {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-height: 5rem;
    overflow-y: auto;
    padding-right: .2rem;
}

.admin-selected-user {
    padding: .22rem .5rem;
    border: 1px solid #c9ddec;
    border-radius: 999px;
    color: #24577e;
    background: #eef6ff;
}

@media (max-width: 700px) {
    .floating-chat-shell {
        height: calc(100dvh - 3.5rem);
        min-height: 0;
        border-radius: 0;
    }

    .floating-chat-shell .chat-header {
        min-height: 62px;
        padding: .7rem .8rem;
    }

    .floating-chat-shell .message-area {
        padding: .75rem;
    }
}

.floating-chat-shell .conversation-sidebar,
.floating-chat-shell .details-panel,
.floating-chat-shell .messenger-status {
    display: none;
}

.floating-chat-shell .chat-panel {
    display: flex;
    width: 100%;
    min-width: 0;
    border: 0;
}

.floating-chat-shell .chat-header {
    min-height: 62px;
    padding: .7rem .8rem;
}

.floating-chat-shell .mobile-back-button,
.floating-chat-shell .chat-actions button[title="Gọi thoại"],
.floating-chat-shell .chat-actions button[title="Gọi video"] {
    display: none;
}

.floating-chat-shell .chat-actions button[title="Bật chế độ PiP"] {
    display: inline-flex;
}

.floating-chat-shell .message-area {
    padding: .75rem;
}

.floating-chat-shell .message-content {
    max-width: 86%;
}

.floating-chat-shell .composer-zone {
    padding-bottom: env(safe-area-inset-bottom);
}

.floating-chat-shell .conversation-sidebar,
.floating-chat-shell .details-panel,
.floating-chat-shell .conversation-sidebar-resizer,
.floating-chat-shell + .group-invitation-banner {
    display: none !important;
}

.floating-chat-shell .chat-actions button[title="Mở chat trong cửa sổ nổi"] {
    display: none;
}

.upload-target-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.my-desk-page {
    max-width: 72rem;
    padding: 1.5rem 0 2rem;
}

.my-desk-header {
    margin-bottom: 1rem;
}

.my-desk-header h1 {
    margin: 0;
    color: #173b5d;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.my-desk-header p:last-child {
    margin: .35rem 0 0;
    color: #60758a;
}

.my-desk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dce7f1;
}

.my-desk-tab {
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    color: #526b84;
    font-weight: 600;
    text-decoration: none;
}

.my-desk-tab:hover,
.my-desk-tab.active {
    border-bottom-color: #1472bd;
    color: #1472bd;
}

.my-desk-panel {
    padding: 1.25rem;
    border: 1px solid #dce7f1;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 .35rem 1rem rgba(23, 59, 93, .08);
}

.my-desk-panel h2 {
    margin: 0 0 1rem;
    color: #173b5d;
    font-size: 1.15rem;
    text-transform: capitalize;
}

.dashboard-demo-page {
    max-width: 100%;
    padding: 1.5rem 0 2rem;
}

.dashboard-demo-header {
    margin-bottom: 1rem;
}

.dashboard-demo-header h1 {
    margin: 0;
    color: #173b5d;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.dashboard-demo-header p:last-child {
    margin: .35rem 0 0;
    color: #60758a;
}

.dashboard-demo-card {
    overflow: auto;
    padding: .75rem;
    border: 1px solid #dce7f1;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 .35rem 1rem rgba(23, 59, 93, .08);
}

.dashboard-demo-image {
    display: block;
    width: 100%;
    height: auto;
    min-width: 42rem;
    border-radius: .4rem;
}

.information-inline-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.information-inline-image {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce7f1;
    border-radius: .65rem;
    background: #fff;
}

.information-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgb(15 31 52 / 68%);
}

.information-preview-dialog {
    display: flex;
    flex-direction: column;
    width: min(94vw, 1100px);
    max-height: 92vh;
    overflow: hidden;
    border: 1px solid #d5e0eb;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 28%);
}

.information-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e1e9f1;
    color: #17243a;
}

.information-preview-body {
    overflow: auto;
    padding: 1rem;
    background: #f7fafd;
}

.information-preview-body .admin-file-preview-frame {
    min-height: min(76vh, 48rem);
}

.information-preview-image {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    margin: 0 auto;
    object-fit: contain;
}

.information-preview-download {
    padding: 3rem 1rem;
    text-align: center;
}

.information-inline-image-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #f8fbfe;
    cursor: pointer;
}

.information-inline-image-button img {
    display: block;
    width: 100%;
    max-height: 24rem;
    object-fit: contain;
}

.information-inline-image figcaption {
    overflow: hidden;
    padding: .45rem .6rem;
    color: #526b84;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-upload-progress {
    display: grid;
    min-width: min(26rem, 100%);
    gap: .25rem;
    margin-right: auto;
    color: #304963;
    font-size: .85rem;
}

.signing-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.admin-upload-progress progress {
    width: 100%;
    height: .6rem;
    accent-color: #1769aa;
}

.information-file-search {
    max-width: 42rem;
    margin-bottom: 1rem;
}

.information-file-search label {
    display: block;
    margin-bottom: .35rem;
    color: #526b84;
    font-size: .85rem;
    font-weight: 600;
}

.information-activity-files {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.admin-selected-files {
    display: grid;
    gap: .4rem;
    margin-top: .55rem;
    padding: .65rem .75rem;
    border: 1px solid #dce7f1;
    border-radius: .5rem;
    background: #f8fbfe;
}

.admin-selected-file {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .35rem;
    border-top: 1px solid #e6eef5;
    color: #304963;
    font-size: .85rem;
}

.admin-selected-file small {
    color: #718198;
    white-space: nowrap;
}

.admin-file-preview-frame {
    display: block;
    width: 100%;
    min-height: 34rem;
    border: 1px solid #dce7f1;
    border-radius: .5rem;
    background: #fff;
}

.information-activity-image {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce7f1;
    border-radius: .65rem;
    background: #fff;
}

.information-activity-image img {
    display: block;
    width: 100%;
    max-height: 42rem;
    object-fit: contain;
    background: #f8fbfe;
}

.information-activity-image figcaption {
    padding: .55rem .75rem;
    border-top: 1px solid #dce7f1;
    color: #526b84;
    font-size: .85rem;
}

.information-attachment-list {
    display: grid;
}

.information-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #dce7f1;
    border-radius: .45rem;
    background: #fff;
}

.information-attachment-meta {
    margin-left: auto;
    color: #718198;
    font-size: .8rem;
}

.home-dashboard,
.public-documents-page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
}

.home-dashboard-header,
.public-documents-header {
    margin-bottom: 1.25rem;
}

.home-dashboard-header {
    position: relative;
}

.home-dashboard-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: -2.75rem;
    margin-bottom: 1.25rem;
}

.home-dashboard-eyebrow {
    margin: 0;
    color: #1472bd;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.home-dashboard h1,
.public-documents-page h1 {
    margin: .2rem 0 .35rem;
    color: #1f3b57;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.home-dashboard-subtitle,
.public-documents-header p:last-child {
    margin: 0;
    color: #718198;
}

.home-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .35rem;
    border: 1px solid #dce7f1;
    border-radius: .75rem;
    background: #f5f9fd;
}

.home-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.6rem;
    padding: .55rem .8rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    background: transparent;
    color: #526b84;
    font-weight: 600;
}

.home-tab img,
.home-empty-state img,
.home-information-state img,
.public-documents-empty img {
    width: 1.25rem;
    height: 1.25rem;
}

.home-tab.active {
    border-color: #c8dff1;
    background: #fff;
    color: #1265a8;
    box-shadow: 0 2px 5px rgba(31, 59, 87, .08);
}

.home-tab-panel {
    min-height: 18rem;
    margin-top: 1rem;
    padding: 2rem 1rem;
    border: 1px solid #e0e8f0;
    border-radius: .85rem;
    background: #fff;
}

.information-content-list {
    display: grid;
    gap: 1rem;
}

.information-content-card {
    padding: 1rem 1.1rem;
    border: 1px solid #e0e8f0;
    border-radius: .75rem;
    background: #fbfdff;
}

.information-content-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.information-content-card h2 {
    margin: 0 0 .35rem;
    color: #304963;
    font-size: 1.05rem;
}

.information-content-card time {
    flex: 0 0 auto;
    color: #718198;
    font-size: .8rem;
}

.information-content-body {
    margin: .85rem 0 0;
    color: #526b84;
    white-space: pre-line;
}

.information-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .85rem;
}

.information-file-list a {
    color: #1265a8;
    text-decoration: none;
}

.information-file-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1265a8;
    text-align: left;
    text-decoration: none;
}

.information-file-link:hover {
    text-decoration: underline;
}

.information-schedule-files {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.information-schedule-file {
    overflow: hidden;
    border: 1px solid #dce7f1;
    border-radius: .65rem;
    background: #fff;
}

.information-schedule-file > img,
.information-schedule-file > iframe {
    display: block;
    width: 100%;
    height: min(70vh, 48rem);
    border: 0;
    object-fit: contain;
    background: #f8fbfe;
}

.information-schedule-file-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .8rem;
    border-top: 1px solid #dce7f1;
}

.information-file-modal-backdrop {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 1rem 1rem;
    background: rgba(15, 35, 55, .58);
}

.information-file-modal {
    display: flex;
    flex-direction: column;
    width: min(92vw, 72rem);
    height: min(90vh, 52rem);
    overflow: hidden;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
}

.information-file-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid #e0e8f0;
}

.information-file-modal-header h2 {
    margin: 0;
    overflow: hidden;
    color: #304963;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.information-file-modal-close {
    border: 0;
    background: transparent;
    color: #526b84;
    font-size: 1.7rem;
    line-height: 1;
}

.information-file-modal-body {
    display: grid;
    flex: 1;
    place-items: center;
    min-height: 0;
    padding: 1rem;
    text-align: center;
}

.information-file-modal-body img,
.information-file-modal-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.admin-announcement-page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
}

.admin-announcement-header {
    margin-bottom: 1.25rem;
}

.admin-announcement-header h1 {
    margin: .2rem 0 .35rem;
    color: #1f3b57;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.admin-announcement-header p:last-child {
    margin: 0;
    color: #718198;
}

.admin-announcement-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .85fr);
    gap: 1rem;
}

.admin-announcement-card {
    padding: 1.25rem;
    border: 1px solid #e0e8f0;
    border-radius: .85rem;
    background: #fff;
}

.admin-announcement-card h2 {
    margin: 0 0 1rem;
    color: #304963;
    font-size: 1.1rem;
}

.admin-announcement-field {
    display: grid;
    gap: .35rem;
    margin-bottom: .9rem;
}

.admin-announcement-field label,
.admin-announcement-selected-units span {
    color: #526b84;
    font-size: .82rem;
    font-weight: 700;
}

.admin-announcement-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.admin-announcement-api-note {
    margin: 0 0 1rem;
    color: #718198;
    font-size: .82rem;
    line-height: 1.5;
}

.admin-announcement-unit-placeholder {
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding: 2rem 1rem;
    border: 1px dashed #b9cfe2;
    border-radius: .7rem;
    background: #f7fbff;
    color: #526b84;
    text-align: center;
}

.admin-announcement-unit-placeholder img {
    width: 2rem;
    height: 2rem;
}

.admin-announcement-unit-placeholder span {
    color: #718198;
    font-size: .78rem;
}

.admin-announcement-selected-units {
    display: grid;
    gap: .2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #edf1f5;
}

.admin-announcement-selected-units strong {
    color: #8a98a8;
    font-size: .85rem;
}

.admin-announcement-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

@media (max-width: 720px) {
    .information-attachment-row,
    .admin-selected-file {
        align-items: flex-start;
        flex-direction: column;
    }

    .information-attachment-meta,
    .admin-selected-file small {
        margin-left: 0;
        white-space: normal;
    }

    .information-content-card-header {
        flex-direction: column;
        gap: .35rem;
    }

    .admin-announcement-grid,
    .admin-announcement-fields-row {
        grid-template-columns: 1fr;
    }

    .admin-announcement-actions {
        flex-direction: column-reverse;
    }

    .admin-announcement-actions .btn {
        width: 100%;
    }
}

.home-empty-state,
.home-information-state,
.public-documents-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 13rem;
    gap: .5rem;
    text-align: center;
}

.home-empty-state h2,
.home-information-state h2,
.public-documents-empty h2 {
    margin: .35rem 0 0;
    color: #304963;
    font-size: 1.15rem;
}

.home-empty-state p,
.home-information-state p,
.public-documents-empty p {
    margin: 0 0 .5rem;
    color: #718198;
}

.public-documents-empty {
    min-height: 20rem;
    padding: 2rem;
    border: 1px solid #e0e8f0;
    border-radius: .85rem;
    background: #fff;
}

@media (max-width: 720px) {
    .report-type-create { grid-template-columns: 1fr; }
    .report-type-create .btn { width: 100%; }
    .report-template-fields { grid-template-columns: 1fr; }
    .report-template-submit, .report-template-version { align-items: stretch; flex-direction: column; }
    .report-template-version-actions .btn { flex: 1; }
}

.report-admin-card { margin-top: 1rem; padding: 1rem clamp(1rem, 2vw, 1.5rem); border: 1px solid #e3eaf2; border-radius: .9rem; background: #fff; }
.report-admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.report-admin-eyebrow { color: #7488a0; font-size: .65rem; font-weight: 800; letter-spacing: .11em; }
.report-admin-heading h2 { margin: .2rem 0; color: #304963; font-size: .98rem; font-weight: 700; }
.report-admin-heading p, .report-admin-hint { margin: 0; color: #72849a; font-size: .78rem; }
.report-admin-toggle { flex: 0 0 auto; padding: .45rem .75rem; border: 1px solid #cddded; border-radius: .55rem; background: #f7fbff; color: #265b87; font-size: .78rem; font-weight: 700; }
.report-admin-body { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #edf1f5; }
.report-type-create { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(14rem, 1.3fr) auto; align-items: end; gap: .75rem; padding: .85rem; border: 1px solid #e7edf4; border-radius: .7rem; background: #fbfcfe; }
.report-type-create .btn { min-height: 2.5rem; white-space: nowrap; }
.report-template-manager { display: grid; gap: .85rem; margin-top: 1rem; }
.report-template-manager > .report-field { max-width: 28rem; }
.report-review-queue { display: grid; gap: .75rem; padding: 1rem; border: 1px solid #dce6f0; border-radius: .8rem; background: linear-gradient(180deg, #f8fbff 0%, #fff 100%); }
.report-review-queue-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.report-review-queue-heading h3 { display: flex; align-items: center; gap: .5rem; margin: 0; color: #233e59; font-size: .95rem; font-weight: 750; }
.report-review-queue-heading p, .report-review-hint { margin: .2rem 0 0; color: #718198; font-size: .75rem; line-height: 1.45; }
.report-review-count { display: inline-flex; min-width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: 999px; background: #e7f0fa; color: #245c8d; font-size: .7rem; }
.report-review-list { display: grid; gap: .5rem; }
.report-review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid #e3eaf2; border-radius: .65rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.report-review-item:hover { border-color: #b7cde2; box-shadow: 0 3px 12px rgba(34, 69, 102, .07); }
.report-review-file { display: grid; min-width: 0; gap: .15rem; }
.report-review-file strong { overflow: hidden; color: #304963; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.report-review-file > span { color: #718198; font-size: .72rem; }
.report-review-meta { display: flex; align-items: center; gap: .5rem; color: #526b84; font-size: .73rem; white-space: nowrap; }
.report-review-hint { margin-top: 0; }
.report-review-empty { display: grid; gap: .15rem; padding: 1rem; border: 1px dashed #cbd9e7; border-radius: .65rem; background: #fff; text-align: center; }
.report-review-empty strong { color: #405a76; font-size: .8rem; }
.report-review-empty span { color: #8190a2; font-size: .73rem; }
.report-template-form { display: grid; gap: .8rem; padding: .85rem; border: 1px solid #e7edf4; border-radius: .7rem; }
.report-admin-policy-note { padding: .65rem .75rem; border-radius: .55rem; background: #f2f7fc; color: #526b84; font-size: .76rem; line-height: 1.5; }
.report-template-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.report-grant-list { display: grid; gap: .6rem; }
.report-grant-row { display: grid; gap: .6rem; padding: .7rem; border: 1px solid #e7edf4; border-radius: .6rem; background: #fbfcfe; }
.report-grant-row-heading { display: flex; align-items: center; justify-content: space-between; color: #405a76; font-size: .77rem; }
.report-grant-remove, .report-grant-add { justify-self: start; padding: .3rem .55rem; border: 1px solid #d8e2ec; border-radius: .45rem; background: #fff; color: #47627e; font-size: .72rem; }
.report-grant-remove { color: #9a3d3d; }
.report-grant-add { border-color: #ccdeee; color: #1c659c; font-weight: 700; }
.report-template-fields input[type="file"] { display: block; width: 100%; color: #53677d; font-size: .77rem; }
.report-edit-grant { display: flex; align-items: center; gap: .45rem; align-self: end; min-height: 2.5rem; color: #425975; font-size: .8rem; }
.report-edit-grant input { width: 1rem; height: 1rem; accent-color: #1265a8; }
.report-template-submit { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #718198; font-size: .76rem; }
.report-template-versions { display: grid; gap: .5rem; }
.report-template-versions-header { display: flex; align-items: center; justify-content: space-between; color: #304963; font-size: .84rem; }
.report-no-versions { margin: 0; color: #78899c; font-size: .78rem; }
.report-template-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .75rem 1rem; padding: .75rem; border: 1px solid #e6ecf2; border-radius: .65rem; background: #fff; }
.report-template-version.is-review-target { border-color: #3982bd; background: #f3f9ff; box-shadow: 0 0 0 3px rgba(57, 130, 189, .13); }
.report-template-version { scroll-margin-block: 1.5rem; }
.report-template-versions-refresh { display: flex; align-items: center; gap: .75rem; color: #8190a2; font-size: .7rem; font-weight: 400; }
.report-template-version-info { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: .2rem .55rem; min-width: 0; }
.report-template-version-info > strong { color: #2c435e; font-size: .82rem; }
.report-template-state { padding: .18rem .45rem; border-radius: 999px; background: #eef4fa; color: #526d89; font-size: .68rem; font-weight: 700; }
.report-template-version-info small { grid-column: 1 / -1; overflow: hidden; max-width: 55rem; color: #718198; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.report-acceptance-flags { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: .3rem; margin-top: .2rem; }
.report-acceptance-flags span { padding: .13rem .38rem; border-radius: .35rem; font-size: .62rem; font-weight: 700; }
.report-acceptance-flags .passed { background: #e9f7ef; color: #287148; }
.report-acceptance-flags .pending { background: #fff6e7; color: #8c6426; }
.report-template-version-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .4rem; }
.report-template-version-actions .btn { font-size: .72rem; }
.report-acceptance-result { grid-column: 1 / -1; display: grid; gap: .45rem; min-width: 0; padding: .7rem .8rem; border: 1px solid #dbe7f2; border-radius: .55rem; background: #f8fbfe; color: #304963; font-size: .76rem; line-height: 1.45; }
.report-acceptance-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .8rem; padding-bottom: .35rem; border-bottom: 1px solid #e4edf5; }
.report-acceptance-summary strong { color: #183d67; }
.report-acceptance-summary small { color: #718198; }
.report-acceptance-backend-note { color: #8c6426 !important; }
.report-acceptance-check { display: grid; gap: .12rem; padding: .35rem .5rem; border-left: 3px solid #d7e3ee; overflow-wrap: anywhere; }
.report-acceptance-check-title { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.report-acceptance-status { padding: .08rem .35rem; border-radius: .3rem; font-size: .66rem; font-weight: 700; text-transform: lowercase; }
.report-acceptance-status.passed { background: #e9f7ef; color: #287148; }
.report-acceptance-status.pending { background: #fff6e7; color: #8c6426; }
.report-acceptance-status.not-passed, .report-acceptance-status.failed { background: #fff0f0; color: #a33737; }
.report-acceptance-cause { color: #8c6426; }
.report-acceptance-target, .report-acceptance-evidence { color: #718198; overflow-wrap: anywhere; }
.report-acceptance-evidence { padding: .18rem .35rem; border-radius: .25rem; background: #f1f6fa; font-size: .7rem; }
.report-callback-status { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .6rem 0; padding: .55rem .7rem; border: 1px solid #dbe7f2; border-radius: .45rem; font-size: .76rem; }
.report-callback-status.passed { border-color: #c5e7d2; background: #f3fbf6; color: #276742; }
.report-callback-status.pending { border-color: #f0dfb9; background: #fffaf0; color: #8c6426; }
.report-admin-feedback { position: relative; display: flex; align-items: flex-start; gap: .6rem; margin-top: .7rem; padding: .65rem 2rem .65rem .75rem; border: 1px solid; border-radius: .6rem; font-size: .78rem; }
.report-admin-feedback.success { border-color: #c5e7d2; background: #f3fbf6; color: #276742; }
.report-admin-feedback.error { border-color: #f1caca; background: #fff7f7; color: #912e2e; }
.report-admin-feedback > span { font-weight: 800; }
.report-admin-feedback > div { overflow-wrap: anywhere; }
.report-admin-feedback > button { position: absolute; top: .25rem; right: .45rem; border: 0; background: transparent; color: inherit; font-size: 1.1rem; }

@media (max-width: 700px) {
    .report-review-queue-heading { align-items: stretch; flex-direction: column; }
    .report-review-item { grid-template-columns: minmax(0, 1fr) auto; }
    .report-review-meta { grid-column: 1; grid-row: 2; }
    .report-review-item > .btn { grid-column: 2; grid-row: 1 / span 2; }
    .report-template-versions-header, .report-template-versions-refresh { align-items: flex-start; flex-direction: column; }
}

.create-folder-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: max(5rem, 8vh) 1rem 1rem;
    background: rgba(15, 23, 42, .45);
}

.create-folder-dialog {
    width: min(100%, 27rem);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid #dbe3ec;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .24);
}

.create-folder-dialog h2 {
    margin: 0;
    color: #172033;
    font-size: 1.15rem;
}

.create-folder-dialog input {
    min-height: 2.6rem;
}

.create-folder-error {
    margin: 0;
    color: #dc2626;
    font-size: .875rem;
}

.create-folder-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .25rem;
}

.upload-target-picker-button {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.document-folder-picker-tree {
    height: 22rem;
    max-height: calc(100vh - 13rem);
    overflow: auto;
}

.document-folder-picker-dialog {
    width: 34rem;
    max-width: calc(100vw - 2rem);
}

.document-folder-picker-dialog .modal-content {
    height: min(30rem, calc(100vh - 2rem));
}

.document-folder-picker-dialog .modal-body {
    min-height: 0;
    overflow: hidden;
}

.document-folder-picker-header {
    flex: 0 0 auto;
    cursor: move;
    user-select: none;
    touch-action: none;
}

@media (max-width: 575.98px) {
    .document-folder-picker-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        margin: .5rem auto;
    }

    .document-folder-picker-dialog .modal-content {
        height: calc(100vh - 1rem);
    }

    .document-folder-picker-tree {
        height: auto;
        max-height: none;
    }
}

.document-folder-picker-node,
.document-folder-picker-item {
    width: 100%;
}

.document-folder-picker-row {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.document-folder-picker-toggle,
.document-folder-picker-select,
.document-folder-picker-item {
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.document-folder-picker-toggle {
    width: 1.75rem;
    height: 2rem;
    padding: 0;
}

.document-folder-picker-toggle.empty {
    visibility: hidden;
}

.document-folder-picker-select,
.document-folder-picker-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
    padding: .25rem .5rem;
    border-radius: .375rem;
}

.document-folder-picker-select {
    flex: 1;
}

.document-folder-picker-select:hover,
.document-folder-picker-item:hover,
.document-folder-picker-select.selected,
.document-folder-picker-item.selected {
    background: #eaf2ff;
    color: #174a8b;
}

.document-folder-picker-children {
    margin-left: 1rem;
    padding-left: .5rem;
    border-left: 1px solid #dee2e6;
}

html, body {
    font-family: "Segoe UI", "Noto Sans", "Noto Sans Vietnamese", "Roboto", Arial, sans-serif;
}

.report-center-page {
    --report-ink: #172b4d;
    --report-muted: #64748b;
    --report-line: #e3eaf2;
    --report-blue: #1265a8;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 1.5rem clamp(.75rem, 2vw, 1.75rem) 3rem;
    color: var(--report-ink);
}

.report-center-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 10rem;
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border: 1px solid #d8e7f6;
    border-radius: 1.15rem;
    background: linear-gradient(115deg, #f4f9ff 0%, #eaf4ff 56%, #f6fbff 100%);
}

.report-center-heading { position: relative; z-index: 1; max-width: 46rem; }
.report-center-eyebrow { color: #3972a8; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.report-center-heading h1 { margin: .5rem 0 .45rem; color: #12345b; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 750; letter-spacing: -.035em; }
.report-center-heading p { margin: 0; color: #536b86; font-size: .98rem; }
.report-help-link { display: inline-block; margin-top: .65rem; color: #1265a8; font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.report-center-mark { display: none; }
.report-center-mark img { width: 3.5rem; height: 3.5rem; }
.report-workflow-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.report-workflow-tab { display: grid; gap: .25rem; min-height: 5.25rem; padding: .8rem 1rem; border: 1px solid #dce6f0; border-radius: .75rem; background: #fff; color: #304963; text-align: left; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.report-workflow-tab:hover { border-color: #9dc3e5; background: #f7fbff; }
.report-workflow-tab:focus-visible { outline: 3px solid rgba(18, 101, 168, .25); outline-offset: 2px; }
.report-workflow-tab.active { border-color: #1265a8; background: #edf6ff; box-shadow: inset 0 0 0 1px #1265a8; }
.report-workflow-tab-number { color: #3972a8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.report-workflow-tab strong { color: #203957; font-size: .95rem; }
.report-workflow-tab small { color: var(--report-muted); font-size: .78rem; }
.report-workflow-panel[hidden] { display: none !important; }
.report-workflow-feedback { margin: .75rem 0 0; }
.report-simple-workflow { display: grid; gap: 1rem; margin-top: 1.15rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--report-line); border-radius: 1rem; background: #fff; box-shadow: 0 5px 18px rgba(28, 52, 84, .045); }
.report-simple-header h2 { margin: .35rem 0 .2rem; color: #203957; font-size: 1.25rem; }
.report-simple-header p { margin: 0; color: var(--report-muted); font-size: .87rem; }
.report-simple-file { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--report-line); color: var(--report-muted); font-size: .82rem; }
.report-simple-mappings, .report-simple-period { display: grid; gap: .75rem; }
.report-simple-section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem .75rem; }
.report-simple-section-title strong { color: #304963; font-size: .92rem; }
.report-simple-section-title span { color: var(--report-muted); font-size: .78rem; }
.report-simple-mapping { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(16rem, 1.3fr) auto; align-items: start; gap: .65rem; padding: .8rem; border: 1px solid #e1e8f0; border-radius: .7rem; background: #fbfdff; }
.report-simple-mapping-title { display: grid; gap: .2rem; min-width: 0; padding-top: .55rem; }
.report-simple-mapping-title strong { overflow-wrap: anywhere; color: #263f5e; }
.report-simple-mapping-title span { color: var(--report-muted); font-size: .73rem; }
.report-owner-picker { position: relative; min-width: 0; }
.report-owner-picker input { min-height: 2.65rem; border-color: #dbe4ee; border-radius: .55rem; }
.report-owner-results { position: absolute; z-index: 5; top: calc(100% + .25rem); right: 0; left: 0; display: grid; max-height: 15rem; overflow-y: auto; padding: .25rem; border: 1px solid #cbd9e7; border-radius: .55rem; background: #fff; box-shadow: 0 10px 24px rgba(28, 52, 84, .14); }
.report-owner-option { display: block; padding: .55rem .65rem; border: 0; border-radius: .35rem; background: transparent; color: #304963; font-size: .85rem; text-align: left; }
.report-owner-option:hover, .report-owner-option.selected { background: #eaf4ff; color: #1265a8; }
.report-owner-empty { padding: .65rem; color: var(--report-muted); font-size: .82rem; }
.report-simple-mapping-actions { display: grid; justify-items: start; gap: .3rem; padding-top: .3rem; }
.report-simple-mapping-actions small { color: #3972a8; font-size: .73rem; white-space: nowrap; }
.report-collaborator-picker { display: grid; gap: .85rem; padding: 1rem; border: 1px solid #cbddec; border-radius: .75rem; background: #f7fbff; }
.report-collaborator-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.report-collaborator-heading strong { color: #263f5e; }
.report-collaborator-heading p { margin: .25rem 0 0; color: var(--report-muted); font-size: .8rem; }
.report-collaborator-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .45rem; max-height: 16rem; overflow-y: auto; padding: .2rem; }
.report-collaborator-options label { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem .65rem; border: 1px solid #e0e8f0; border-radius: .45rem; background: #fff; color: #304963; font-size: .84rem; }
.report-collaborator-options label:hover { border-color: #a7c7e4; background: #f2f8ff; }
.report-collaborator-options label span { overflow-wrap: anywhere; }
.report-selection-card, .report-session-card { margin-top: 1.15rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--report-line); border-radius: 1rem; background: #fff; box-shadow: 0 5px 18px rgba(28, 52, 84, .045); }
.report-selection-title, .report-session-title { display: flex; align-items: center; gap: .85rem; }
.report-step-number { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: #eef4fa; color: #59738e; font-size: .78rem; font-weight: 800; }
.report-step-active { background: #e4f2ff; color: #1265a8; }
.report-selection-title h2, .report-session-title h2 { margin: 0; color: #203957; font-size: 1.05rem; font-weight: 700; }
.report-selection-title p, .report-session-title p { margin: .2rem 0 0; color: var(--report-muted); font-size: .87rem; }
.report-form-grid { display: grid; grid-template-columns: minmax(14rem, 1.55fr) repeat(3, minmax(8rem, .8fr)) auto; align-items: end; gap: .85rem; margin-top: 1.35rem; }
.report-field { display: grid; min-width: 0; gap: .4rem; color: #425975; font-size: .81rem; font-weight: 650; }
.report-field .form-select { min-height: 2.8rem; border-color: #dbe4ee; border-radius: .6rem; color: #263e5d; font-size: .91rem; }
.report-open-button, .report-merge-button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: .55rem; padding: .65rem 1rem; border: 1px solid #0e5b99; border-radius: .65rem; background: #1265a8; color: #fff; font-size: .87rem; font-weight: 700; white-space: nowrap; transition: background .16s ease, box-shadow .16s ease; }
.report-open-button:hover:not(:disabled), .report-merge-button:hover:not(:disabled) { background: #0d558e; box-shadow: 0 5px 14px rgba(18, 101, 168, .18); }
.report-open-button:disabled, .report-merge-button:disabled { cursor: not-allowed; opacity: .55; }
.report-open-button img, .report-merge-button img { width: 1rem; height: 1rem; filter: brightness(0) invert(1); }
.report-loading { display: flex; align-items: center; gap: .55rem; margin-top: 1.1rem; color: var(--report-muted); font-size: .9rem; }
.report-empty-catalog { display: grid; gap: .2rem; margin-top: 1.1rem; padding: 1rem; border: 1px dashed #cdd9e6; border-radius: .75rem; background: #f8fafc; color: #52677f; font-size: .88rem; }
.report-empty-catalog strong { color: #304963; }
.report-feedback { position: relative; display: flex; align-items: flex-start; gap: .75rem; margin-top: 1rem; padding: .9rem 2.5rem .9rem .95rem; border: 1px solid; border-radius: .75rem; }
.report-feedback-error { border-color: #f2caca; background: #fff7f7; color: #8d2525; }
.report-feedback-success { border-color: #bde5ce; background: #f3fbf6; color: #23633e; }
.report-feedback-icon { display: grid; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(171, 44, 44, .1); font-weight: 800; }
.report-feedback-success .report-feedback-icon { background: #d9f2e2; }
.report-feedback > div { display: grid; gap: .2rem; font-size: .88rem; }
.report-feedback > div strong { font-weight: 750; }
.report-feedback > div small { overflow-wrap: anywhere; opacity: .8; }
.report-feedback-close { position: absolute; top: .4rem; right: .55rem; border: 0; background: transparent; color: inherit; font-size: 1.25rem; }
.report-session-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.report-session-kicker { margin-bottom: .18rem; color: #6b829b; font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.report-session-state { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .7rem; border: 1px solid #d5eee1; border-radius: 999px; background: #f2fbf6; color: #2b7650; font-size: .77rem; font-weight: 700; white-space: nowrap; }
.report-assigned-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.report-request-participant { display: inline-flex; align-items: center; gap: .25rem; margin: .2rem .8rem .2rem 0; padding: .35rem .55rem; border: 1px solid #dbe7f2; border-radius: .45rem; background: #f8fbfe; color: #526b84; font-size: .78rem; }
.report-request-participant strong { color: #263f5e; }
.report-view-only-panel { display: grid; gap: .2rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #cfe0ef; border-radius: .75rem; background: #f3f8fd; color: #42617d; }
.report-view-only-panel strong { color: #24577f; font-size: .88rem; }
.report-view-only-panel span { font-size: .77rem; }
.report-session-state > span, .report-editor-indicator { width: .5rem; height: .5rem; border-radius: 50%; background: #2eaa70; box-shadow: 0 0 0 3px rgba(46, 170, 112, .12); }
.report-session-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.15rem 0 .85rem; border: 1px solid #e8edf3; border-radius: .75rem; background: #fbfcfe; }
.report-session-metrics > div { display: grid; gap: .25rem; padding: .75rem 1rem; }
.report-session-metrics > div + div { border-left: 1px solid #e8edf3; }
.report-session-metrics span { color: var(--report-muted); font-size: .73rem; }
.report-session-metrics strong { color: #263f5e; font-size: .95rem; font-weight: 750; }
.report-session-notice { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-radius: .65rem; background: #f1f7fd; color: #436380; font-size: .8rem; }
.report-session-notice img { width: 1rem; height: 1rem; flex: 0 0 auto; }
.report-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.05rem; padding: .85rem 0; }
.report-editor-toolbar > div:first-child { display: grid; grid-template-columns: .6rem auto; align-items: center; gap: .15rem .55rem; }
.report-editor-toolbar strong { color: #2c435e; font-size: .91rem; }
.report-editor-toolbar small { grid-column: 2; color: var(--report-muted); font-size: .75rem; }
.report-editor-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.report-editor-actions .btn { display: inline-flex; min-height: 2.35rem; align-items: center; gap: .4rem; font-size: .79rem; }
.report-editor-actions img { width: .95rem; height: .95rem; }
.report-editor-frame { position: relative; height: clamp(42rem, calc(100vh - 13rem), 68rem); min-height: 42rem; overflow: hidden; border: 1px solid #dce4ed; border-radius: .8rem; background: #f8fafc; }
.report-editor-host { width: 100%; height: 100%; min-height: 0; }
.report-editor-host iframe { display: block; width: 100% !important; height: 100% !important; min-height: 0; border: 0; }
.report-editor-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: center; gap: .55rem; padding-top: 1rem; background: rgba(248, 250, 252, .93); color: #52677f; font-size: .85rem; pointer-events: none; }
.report-editor-closed { display: grid; gap: .2rem; min-height: 6rem; align-content: center; justify-items: center; border: 1px dashed #cbd7e4; border-radius: .75rem; background: #fafcff; color: #50677f; font-size: .86rem; text-align: center; }
.report-editor-closed span + span { max-width: 40rem; color: var(--report-muted); font-size: .76rem; }
.report-merge-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #dce7f1; border-radius: .75rem; background: #f7faff; }
.report-merge-panel > div { display: grid; gap: .2rem; }
.report-merge-panel strong { color: #263f5e; font-size: .87rem; }
.report-merge-panel span { color: #62768c; font-size: .77rem; }
.report-merge-button { min-width: 11rem; }
.report-session-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; color: #748499; font-size: .73rem; }
.report-release-button { flex: 0 0 auto; padding: .4rem .65rem; border: 1px solid #d8e0e8; border-radius: .5rem; background: #fff; color: #586b80; font-size: .77rem; }
.report-release-button:hover:not(:disabled) { border-color: #c98282; color: #9b3030; }
.report-start-guide { display: flex; align-items: center; gap: .85rem; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid #e7ecf2; border-radius: .8rem; background: #fff; }
.report-guide-icon { display: grid; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: #f1f5f9; }
.report-guide-icon img { width: 1.35rem; height: 1.35rem; }
.report-start-guide > div:nth-child(2) { display: grid; gap: .15rem; }
.report-start-guide strong { color: #304963; font-size: .86rem; }
.report-start-guide span { color: var(--report-muted); font-size: .76rem; }
.report-guide-step { margin-left: auto; color: #8191a3 !important; font-size: .66rem !important; font-weight: 750; letter-spacing: .05em; white-space: nowrap; }
.report-guide-step b { margin: 0 .25rem; color: #4581b1; }

@media (max-width: 1000px) {
    .report-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-type-field { grid-column: 1 / -1; }
    .report-open-button { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .report-center-page { padding-top: .8rem; }
    .report-workflow-tabs { grid-template-columns: 1fr; gap: .5rem; }
    .report-workflow-tab { min-height: 0; }
    .report-center-hero { min-height: 8rem; padding: 1.1rem; border-radius: .85rem; }
    .report-center-heading p { max-width: 22rem; font-size: .83rem; }
    .report-center-mark { width: 3.5rem; height: 3.5rem; margin-right: .1rem; border-radius: 1rem; }
    .report-center-mark img { width: 2rem; height: 2rem; }
    .report-form-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .report-type-field, .report-open-button { grid-column: 1 / -1; }
    .report-session-header, .report-editor-toolbar, .report-merge-panel { align-items: flex-start; flex-direction: column; }
    .report-session-state { margin-left: 3.2rem; }
    .report-assigned-actions { align-items: flex-start; justify-content: flex-start; }
    .report-session-metrics > div { padding: .65rem .55rem; }
    .report-session-metrics span { font-size: .66rem; }
    .report-session-metrics strong { font-size: .83rem; }
    .report-editor-actions { width: 100%; }
    .report-editor-actions .btn { flex: 1; justify-content: center; }
    .report-editor-frame { height: 32rem; min-height: 32rem; }
    .report-merge-button { width: 100%; }
    .report-simple-mapping { grid-template-columns: 1fr; }
    .report-simple-mapping-title { padding-top: 0; }
    .report-simple-mapping-actions { grid-auto-flow: column; align-items: center; justify-content: space-between; }
    .report-simple-file { align-items: stretch; flex-direction: column; }
    .report-collaborator-heading { flex-direction: column; }
    .report-session-footer { align-items: flex-start; flex-direction: column; }
    .report-guide-step { display: none !important; }
}

.notification-item {
    border-left: 4px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.notification-item.notification-unread {
    background-color: #eef6ff;
    border-left-color: #0d6efd;
}

.notification-item.notification-unread .notification-title {
    color: #084298;
}

.notification-item.notification-unread .notification-message {
    color: #315d87;
}

.notification-item.notification-read {
    background-color: #ffffff;
    border-left-color: #dee2e6;
}

.notification-item.notification-read .notification-title,
.notification-item.notification-read .notification-message {
    color: #6c757d;
    font-weight: 400;
}

.notification-item.notification-unread::after {
    content: "Chưa đọc";
    margin-left: auto;
    color: #0d6efd;
    font-size: 0.75rem;
    font-weight: 600;
}

.approved-documents-page {
    display: flex;
    min-height: calc(100vh - 7rem);
    flex-direction: column;
    gap: 1rem;
}

.approved-documents-header,
.approved-documents-filters {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.approved-documents-header {
    justify-content: space-between;
}

.approved-documents-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.approved-online-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: #42e463;
    vertical-align: middle;
}

.approved-documents-filters {
    flex-wrap: wrap;
}

.approved-search-box {
    display: flex;
    min-width: min(34rem, 100%);
    flex: 1 1 20rem;
    align-items: center;
    gap: .5rem;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    padding: .3rem .65rem;
    background: #f8f9fa;
}

.approved-search-box > span {
    color: #0d6efd;
    font-size: 1.5rem;
}

.approved-search-box input {
    border: 0;
    background: transparent;
}

.approved-search-box input:focus {
    box-shadow: none;
}

.approved-documents-filters > input {
    width: 8rem;
}

.approved-documents-table-wrap {
    overflow-x: auto;
    border: 1px solid #e1e5e9;
    border-radius: .75rem;
    background: #fff;
}

.approved-documents-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: separate;
    border-spacing: 0 .65rem;
    padding: 0 .5rem;
}

.approved-documents-table th {
    padding: .85rem .75rem;
    background: #f8f9fa;
    color: #25282d;
    font-weight: 600;
    white-space: nowrap;
}

.approved-documents-table td {
    padding: .8rem .75rem;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    white-space: nowrap;
}

.approved-documents-table td:first-child {
    border-left: 1px solid #e5e7eb;
    border-radius: .65rem 0 0 .65rem;
}

.approved-documents-table td:last-child {
    border-right: 1px solid #e5e7eb;
    border-radius: 0 .65rem .65rem 0;
}

.approved-document-index {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: .35rem;
    background: #1677c8;
    color: #fff;
    font-weight: 600;
}

.approved-documents-table td:nth-child(2) strong,
.approved-documents-table td:nth-child(2) small {
    display: block;
}

.approved-documents-table td:nth-child(2) small {
    margin-top: .2rem;
    color: #198754;
}

.approved-status {
    color: #198754;
    font-weight: 600;
}

.approved-document-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.approved-action-button,
.approved-action-disabled {
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
}

.approved-action-button.view {
    color: #4996df;
}

.approved-action-button.download {
    color: #16a23a;
}

.approved-action-disabled {
    color: #adb5bd;
}

.approved-documents-empty {
    padding: 3rem 1rem;
    color: #6c757d;
    text-align: center;
}

.approved-preview-modal {
    display: flex;
    width: min(92vw, 70rem);
    height: min(90vh, 55rem);
    flex-direction: column;
    border-radius: .75rem;
    background: #fff;
}

.approved-preview-modal header,
.approved-preview-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
}

.approved-preview-modal header button {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
}

.approved-preview-frame {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    background: #f1f3f5;
}

.signing-preview-canvas-viewer {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    overflow: auto;
    padding: .75rem;
    background: #525659;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.signing-preview-pages {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}

.signing-preview-page {
    display: block;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 .25rem .75rem rgb(0 0 0 / 30%);
}

.signing-preview-loading {
    display: grid;
    min-height: 12rem;
    flex: 1 1 auto;
    place-items: center;
    padding: 1rem;
    color: #475569;
    text-align: center;
}

.signing-preview-error {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 700px) {
    .approved-documents-filters > input,
    .approved-documents-filters > button {
        flex: 1 1 8rem;
    }

@media (max-width: 600px) {
    .signing-preview-modal {
        width: 100%;
        max-height: calc(100dvh - 1rem);
        border-radius: .7rem;
    }

    .signing-preview-canvas-viewer {
        min-height: 10rem;
        padding: .4rem;
    }

    .signing-preview-page {
        width: 100%;
    }

    .signing-preview-modal footer button {
        min-height: 2.75rem;
    }
}
}

@media (min-width: 769px) and (max-width: 1180px) {
    .quick-info-panel {
        display: none;
    }

    .document-content-header {
        align-items: stretch;
        flex-direction: column;
        gap: .5rem;
    }

    .document-search {
        width: 100%;
        min-width: 0;
        margin-bottom: 0;
    }

    .document-card-body strong {
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

/* Large in-app PDF preview. The browser PDF toolbar is disabled through the
   iframe URL fragment; the document remains scrollable inside the dialog. */
.signing-preview-modal {
    display: flex;
    width: min(96vw, 110rem);
    height: min(94vh, 70rem);
    max-width: none;
    max-height: none;
    flex-direction: column;
}

.signing-preview-modal header {
    flex: 0 0 auto;
    min-height: 3rem;
}

.signing-preview-frame {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    border: 0;
    background: #525659;
}

.signing-preview-modal footer {
    flex: 0 0 auto;
}

.signing-note-modal {
    display: flex;
    width: min(100%, 42rem);
    max-height: calc(100dvh - 2rem);
    flex-direction: column;
    gap: .5rem;
    overflow-y: auto;
    border-radius: .8rem;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
}

.signing-note-modal header,
.signing-note-modal footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex: 0 0 auto;
}

.signing-note-modal header h3 {
    margin: 0;
}

.signing-note-modal header button {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
}

.signing-note-tabs {
    display: flex;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 0 .75rem;
}

.signing-note-tabs button {
    width: min(40%, 18rem);
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #fff;
    padding: .55rem 1rem;
}

.signing-note-tabs button.active {
    border-color: #0d6efd;
    background: #eaf3ff;
    color: #0d6efd;
    font-weight: 600;
}

.signing-note-textarea {
    min-height: min(15rem, 35dvh);
    max-height: 45dvh;
    resize: vertical;
}

.signing-note-drawing-wrap {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .75rem;
}

.signing-note-canvas {
    display: block;
    width: 100%;
    min-height: min(15rem, 35dvh);
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    touch-action: none;
}

.signing-note-error {
    margin: .75rem 0 0;
}

@media (max-width: 600px) {
    .signing-note-modal {
        width: 100%;
        max-height: calc(100dvh - 1rem);
        gap: .4rem;
        padding: .85rem;
    }

    .signing-modal-backdrop:has(.signing-note-modal) {
        align-items: center;
        padding: .5rem;
    }

    .signing-note-textarea {
        min-height: 32dvh;
        max-height: 48dvh;
        resize: none;
    }

    .signing-note-drawing-wrap {
        min-height: 32dvh;
    }

    .signing-note-canvas {
        min-height: 32dvh;
    }

    .signing-note-tabs button {
        width: 50%;
        min-height: 2.75rem;
    }

    .signing-note-modal footer {
        position: sticky;
        bottom: 0;
        padding-top: .5rem;
        background: #fff;
    }
}

@media (max-width: 600px) {
    .signing-preview-modal {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

.signing-checker-menu-link {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.signing-unread-badge {
    display: inline-flex;
    min-width: 1.2rem;
    height: 1.2rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.checker-filter-bar {
    display: flex;
    gap: .5rem;
    border-bottom: 1px solid #dee2e6;
}

.checker-filter {
    border: 0;
    background: transparent;
    color: #6c757d;
    padding: .5rem .75rem;
}

.checker-filter.active {
    color: #0d6efd;
    border-bottom: 2px solid #0d6efd;
}

.checker-request-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

.checker-request-card.completed {
    opacity: .78;
    background: #f8f9fa;
}

.signing-submit-progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .65rem;
    border-bottom: 1px solid #d9dee3;
    background: #fff;
    color: #495057;
    font-size: .875rem;
}

.signing-submit-progress .progress {
    width: min(16rem, 35%);
    height: .5rem;
}

.signing-submit-success-modal {
    width: min(30rem, 92vw);
    border-radius: .75rem;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 20%);
    text-align: center;
}

.signing-submit-success-modal h2 {
    margin-bottom: .75rem;
    color: #198754;
    font-size: 1.35rem;
}

.signing-submit-success-modal p {
    margin-bottom: 1.25rem;
}

.checker-request-main {
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 1rem;
}

.checker-request-main:not(:disabled):hover {
    background: #f1f7ff;
}

.checker-request-status {
    align-self: center;
    margin-right: 1rem;
    white-space: nowrap;
    font-weight: 600;
}

.checker-request-status.done {
    color: #198754;
}

.checker-request-status.waiting {
    color: #fd7e14;
}

.checker-download-actions {
    display: flex;
    justify-content: flex-end;
    margin: .5rem 0 1rem;
}

.checker-readonly-note {
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .75rem;
}

.checker-note-history-item {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid #dee2e6;
    white-space: pre-wrap;
}

.checker-note-history-meta {
    color: #6c757d;
    font-size: .875rem;
    margin-bottom: .25rem;
}

.checker-content-modal {
    display: flex;
    width: min(56rem, 96vw);
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    background: #fff;
}

.checker-content-header,
.checker-content-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.checker-content-header h3 {
    margin: 0;
}

.checker-content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
    color: #6c757d;
    font-size: .875rem;
}

.checker-content-tags span {
    border-radius: 999px;
    padding: .3rem .65rem;
    background: #f1f3f5;
}

.checker-content-history {
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 0 .85rem;
}

.checker-content-message {
    padding: .85rem 0;
    border-bottom: 1px solid #dee2e6;
    white-space: pre-wrap;
}

.checker-content-message:last-child {
    border-bottom: 0;
}

.checker-content-footer {
    justify-content: flex-end;
    margin-top: 1rem;
}

.checker-page {
    display: flex;
    min-height: calc(100vh - 7rem);
    flex-direction: column;
    gap: 1rem;
}

.checker-page-header,
.checker-review-header,
.checker-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.checker-page-header h1 {
    margin: 0;
}

.checker-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.checker-request-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    border: 1px solid #e0e4ea;
    border-radius: .8rem;
    padding: .85rem 1rem;
    background: #fff;
    color: #25282d;
    text-align: left;
}

.checker-request-card:hover {
    border-color: #2864e8;
    background: #f4f7ff;
}

.checker-request-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    text-align: left;
}

.checker-request-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checker-request-detail {
    display: block;
    width: 100%;
    margin-top: .3rem;
    overflow: hidden;
    color: #70757d;
    font-size: .9rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checker-request-detail strong {
    color: #454a51;
}

.checker-request-content {
    margin-left: .35rem;
}

.checker-request-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: .45rem;
}

.checker-request-footer time {
    color: #70757d;
    font-size: .85rem;
    white-space: nowrap;
}

.checker-request-footer .checker-request-status {
    margin: 0;
}

.checker-request-excerpt,
.checker-request-meta {
    color: #70757d;
    font-size: .9rem;
}

.checker-request-meta strong {
    color: #454a51;
}

.checker-request-card.completed .checker-request-meta {
    color: #198754;
}

.checker-request-card.completed .checker-request-detail {
    color: #198754;
}

@media (max-width: 576px) {
    .checker-request-card {
        padding: .7rem .75rem;
    }

    .checker-request-title {
        gap: .4rem;
    }

    .checker-request-title strong {
        font-size: .95rem;
    }

    .checker-request-detail {
        white-space: normal;
        line-height: 1.35;
    }
}

.checker-review-modal {
    display: flex;
    width: min(66rem, 100%);
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    overflow-y: auto;
    border-radius: 1rem;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
}

.checker-review-header {
    flex: 0 0 auto;
    align-items: flex-start;
}

.checker-review-header h2 {
    margin: 0;
    font-size: 1.35rem;
}

.checker-review-header p {
    margin: .25rem 0 .5rem;
    color: #737780;
}

.checker-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.checker-review-tags span {
    border: 1px solid #dde2e8;
    border-radius: 1rem;
    padding: .2rem .55rem;
    color: #626872;
    font-size: .8rem;
}

.checker-close-button {
    border: 0;
    background: transparent;
    font-size: 1.7rem;
}

.checker-document-preview {
    width: 100%;
    height: min(52vh, 34rem);
    min-height: 16rem;
    flex: 0 0 auto;
    border: 1px solid #e2e5e9;
    border-radius: .65rem;
    margin: .85rem 0;
}

.checker-pdf-canvas-viewer {
    overflow: auto;
    background: #2b2b2b;
    padding: .75rem;
}

.checker-pdf-canvas-viewer .signing-preview-pages {
    width: 100%;
}

.checker-preview-loading {
    display: grid;
    min-height: 20rem;
    place-items: center;
    color: #777;
}

.checker-comment-label {
    flex: 0 0 auto;
    margin-bottom: .35rem;
    font-weight: 600;
}

.checker-comment {
    min-height: 7rem;
    flex: 0 0 auto;
    resize: vertical;
}

.checker-review-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-top: .75rem;
}

.checker-empty {
    padding: 3rem 1rem;
    color: #777;
    text-align: center;
}

.signing-approval-card {
    min-height: 10rem;
    padding: .65rem .8rem;
}

.signing-approval-details {
    gap: .1rem;
    margin-top: .25rem;
    font-size: .78rem;
}

.signing-approval-content {
    min-height: 4rem;
}

.signing-checker-modal {
    width: min(42rem, 100%);
    height: min(90vh, 54rem);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: column;
}

.signing-checker-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.signing-checker-modal h3 {
    margin: 0;
    color: #111;
}

.signing-checker-modal header button {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
}

.signing-checker-options {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .35rem;
    overflow-y: auto;
    margin: 1rem 0;
}

.signing-checker-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    border: 1px solid #e2e5ea;
    border-radius: .8rem;
    padding: .75rem .9rem;
    background: #fff;
    color: #222;
    text-align: left;
}

.signing-checker-option:hover,
.signing-checker-option.selected {
    border-color: #2864e8;
    background: #edf3ff;
}

.signing-checker-option span {
    color: #777;
    font-size: .85rem;
}

.signing-checker-empty {
    padding: 2rem 1rem;
    color: #777;
    text-align: center;
}

.signing-checker-selected {
    margin: .75rem 0;
    border-radius: .5rem;
    padding: .6rem .75rem;
    background: #edf3ff;
    color: #245bc8;
}

.signing-checker-modal footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}

@media (min-width: 701px) and (max-width: 1050px) {
    html {
        font-size: 17px;
    }
}

@media (max-width: 700px) {
    html {
        font-size: 14.5px;
    }
}

.message-bubble {
    position: relative;
}

.message-quote,
.reply-preview {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    width: 100%;
    border: 0;
    border-left: 3px solid #1677ff;
    border-radius: .25rem;
    background: #eef1f6;
    color: #344054;
    padding: .45rem .65rem;
    text-align: left;
}

.signing-location-item > span:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .35rem;
}

.signing-location-index {
    flex: 0 0 auto;
    color: #75607d;
    font-weight: 700;
}

.message-quote {
    flex-direction: column;
    margin-bottom: .45rem;
    font-size: .82rem;
}

.signing-location-number {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    color: #60421f;
    font-size: .72rem;
    font-weight: 700;
}

.signing-location-resize-handle {
    position: absolute;
    right: -.35rem;
    bottom: -.35rem;
    width: .85rem;
    height: .85rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #198754;
    cursor: nwse-resize;
}

.message-quote span,
.reply-preview span {
    overflow: hidden;
    max-width: 100%;
    color: #667085;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-preview {
    justify-content: space-between;
    margin-bottom: .5rem;
}

.reply-preview > div {
    display: grid;
    min-width: 0;
}

.reply-preview button,
.forward-dialog-header button {
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 1.35rem;
}

.message-actions {
    display: flex;
    gap: .25rem;
    justify-content: flex-end;
    margin-top: .2rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.message-row:hover .message-actions,
.message-row:focus-within .message-actions {
    opacity: 1;
}

.message-actions button {
    border: 0;
    border-radius: .35rem;
    background: #f2f4f7;
    color: #475467;
    font-size: .72rem;
    padding: .2rem .45rem;
}

.message-highlight .message-bubble {
    box-shadow: 0 0 0 3px #b2d4ff;
}

.forward-dialog {
    width: min(630px, calc(100vw - 2rem));
    max-height: min(760px, calc(100vh - 2rem));
    overflow: hidden;
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 1rem 3rem #10182844;
}

.forward-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaecf0;
    padding: .8rem 1rem;
}

.forward-dialog-header h2 {
    margin: 0;
    color: #1d2939;
    font-size: 1.1rem;
}

.forward-search {
    width: calc(100% - 2rem);
    margin: 1rem;
    border: 1px solid #1677ff;
    border-radius: .35rem;
    padding: .7rem 1rem;
}

.forward-targets {
    max-height: 390px;
    overflow-y: auto;
    padding: 0 1rem;
}

.forward-target {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: .2rem;
    border-radius: .35rem;
    padding: .55rem .65rem;
}

.forward-target.selected {
    background: #f2f4f7;
}

.forward-target input {
    width: 1.2rem;
    height: 1.2rem;
}

.forward-target > span:last-child {
    display: grid;
}

.forward-target small {
    color: #98a2b3;
}

.forward-message-preview {
    display: grid;
    gap: .25rem;
    margin: 1rem;
    border-radius: .35rem;
    background: #f2f4f7;
    padding: .7rem;
}

.forward-message-preview span {
    overflow: hidden;
    color: #475467;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#composer-file-input {
    display: none !important;
}

.messenger-shell .conversation-avatar {
    display: inline-flex;
    align-items: center;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.messenger-shell .conversation-avatar.large {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}

.messenger-shell .conversation-avatar.xlarge {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
    font-size: 1.1rem;
}

.messenger-shell .conversation-avatar.group-avatar {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.messenger-shell .conversation-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 50%;
    object-fit: cover;
}

/* The avatar is rendered by RenderFragment, so these rules must remain global. */
.create-group-target .conversation-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.create-group-target .conversation-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.messenger-shell .conversation-avatar.group-avatar-composite {
    position: relative;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.messenger-shell .group-avatar-members {
    position: absolute;
    inset: 0;
}

.messenger-shell .group-avatar-member {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62%;
    height: 62%;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
}

.messenger-shell .group-avatar-member:nth-child(1) { top: 0; left: 0; }
.messenger-shell .group-avatar-member:nth-child(2) { top: 0; right: 0; }
.messenger-shell .group-avatar-member:nth-child(3) { bottom: 0; left: 19%; }

.messenger-shell .group-avatar-member img {
    width: 100%;
    height: 100%;
}

.messenger-shell .group-avatar-member.group-avatar-placeholder {
    background: #dbe3ee;
    color: #728198;
    font-size: .45rem;
    letter-spacing: -.08em;
}

.messenger-shell .group-avatar-count {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #e9eef5;
    color: #26364a;
    font-size: .62rem;
    font-weight: 700;
}

.messenger-shell .conversation-avatar.large .group-avatar-count {
    min-width: 20px;
    height: 20px;
}

.messenger-shell .conversation-avatar.xlarge .group-avatar-member {
    border-width: 3px;
    font-size: .8rem;
}

.messenger-shell .conversation-avatar.xlarge .group-avatar-count {
    min-width: 26px;
    height: 26px;
    font-size: .75rem;
}

.messenger-shell .document-avatar {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.messenger-shell .document-avatar-folder {
    position: absolute;
    left: 20%;
    bottom: 22%;
    width: 60%;
    height: 45%;
    border-radius: 8% 8% 18% 18%;
    background: #bfdbfe;
}

.messenger-shell .document-avatar-folder::before {
    position: absolute;
    top: -18%;
    left: 8%;
    width: 42%;
    height: 25%;
    border-radius: 12% 35% 0 0;
    background: #bfdbfe;
    content: "";
}

.messenger-shell .document-avatar-paper {
    position: absolute;
    top: 19%;
    left: 28%;
    width: 42%;
    height: 48%;
    border-radius: 8%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(30, 64, 175, .25);
    transform: rotate(-8deg);
}

.messenger-shell .document-avatar-paper::after {
    position: absolute;
    right: 18%;
    bottom: 22%;
    left: 18%;
    height: 12%;
    border-top: 2px solid #93c5fd;
    border-bottom: 2px solid #93c5fd;
    content: "";
}

.messenger-shell .document-avatar.large .document-avatar-folder,
.messenger-shell .document-avatar.large .document-avatar-paper,
.messenger-shell .document-avatar.xlarge .document-avatar-folder,
.messenger-shell .document-avatar.xlarge .document-avatar-paper {
    transform: scale(1.05) rotate(-8deg);
}

.office-persistent-editors {
    display: flex;
    width: 100%;
    height: calc(100vh - 7rem);
    min-height: 32rem;
    margin-top: .35rem;
    pointer-events: none;
}

.office-persistent-editors .office-editor-shell {
    height: 100%;
    min-height: 0;
    pointer-events: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-light);
}

.office-persistent-editors .office-editor-host {
    height: 100%;
}

.office-editor-host-wrapper {
    position: relative;
    height: 100%;
    min-height: 0;
}

.office-workplace-overlay {
    position: absolute;
    z-index: 10;
    top: .10rem;
    left: .6rem;
    width: 7rem;
    height: 2rem;
    padding: .15rem .35rem;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .96);
    pointer-events: auto;
    user-select: none;
    cursor: default;
}

.office-workplace-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .office-persistent-editors {
        height: calc(100vh - 9rem);
        min-height: 26rem;
    }
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #123f68;
    background-color: #dceeff;
    border-color: #a9cfee;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: #1769a8;
    border-color: #125889;
}

.btn-create-document {
    color: #123f68;
    border: 1px solid #9fc7e5;
    background-color: #dceeff;
}

.btn-create-document:hover,
.btn-create-document:focus,
.btn-create-document:active,
.btn-create-document.active {
    color: #fff;
    border-color: #125889;
    background-color: #1769a8;
}

.btn-outline-primary,
.btn-outline-secondary,
.office-documents-button,
.office-tabs-scroll-button {
    color: #185681;
    border-color: #9fc7e5;
    background-color: #eef7ff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.office-documents-button:hover,
.office-documents-button:focus,
.office-documents-button:active,
.office-documents-button.active,
.office-tabs-scroll-button:hover,
.office-tabs-scroll-button:focus,
.office-tabs-scroll-button:active,
.office-tabs-scroll-button.active {
    color: #fff;
    border-color: #155b91;
    background-color: #1d6fae;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

.folder-tree {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .5rem;
    min-height: 18rem;
}

.document-browser {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1rem;
    min-height: 32rem;
}

.document-browser-three-columns {
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) minmax(220px, 300px);
}

@media (min-width: 769px) and (max-width: 1180px) {
    .document-browser-three-columns {
        grid-template-columns: minmax(175px, 24vw) minmax(0, 1fr);
    }

    .document-browser-three-columns .document-content {
        width: 100%;
        min-width: 0;
    }
}

.folder-sidebar {
    border-right: 1px solid var(--bs-border-color);
    padding-right: 1rem;
}

.folder-sidebar-title,
.document-content-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.folder-tree-root {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.25rem;
    border: 0;
    background: #eef7ff;
    border-radius: .25rem;
    padding: .4rem .5rem;
    text-align: left;
    color: #185681;
    gap: .5rem;
}

.folder-tree-root.selected,
.folder-tree-row.selected,
.create-folder-option.selected {
    background-color: #1d6fae;
    color: #fff;
}

.folder-tree-root:hover,
.folder-tree-root:focus-visible,
.folder-tree-row:hover,
.create-folder-option:hover,
.create-folder-option:focus-visible {
    background-color: #cfe8fb;
    color: #123f68;
}

.folder-tree-caret {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-right: 2px solid var(--bs-secondary-color);
    border-bottom: 2px solid var(--bs-secondary-color);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.folder-tree-caret.expanded {
    transform: rotate(45deg) translate(-.1rem, -.1rem);
}

.folder-tree-caret.empty {
    visibility: hidden;
}

.folder-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 1rem;
    width: 1rem;
    height: .7rem;
    margin-right: .05rem;
    border-radius: .08rem;
    background: #d59b18;
    color: transparent;
}

.folder-icon::before {
    position: absolute;
    top: -.18rem;
    left: .08rem;
    width: .42rem;
    height: .22rem;
    border-radius: .08rem .08rem 0 0;
    background: #d59b18;
    content: "";
}

.document-content {
    min-width: 0;
}

.document-content-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.document-content-header > div:first-child {
    min-width: 0;
}

.document-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 22rem;
    min-width: 12rem;
    margin-bottom: .65rem;
}

.document-search-input {
    width: 100%;
    min-height: 2.25rem;
    padding: .4rem 2.25rem .4rem 2.2rem;
    border: 1px solid #9fc7e5;
    border-radius: 1.25rem;
    background: #fff;
    color: var(--bs-body-color);
    font-size: .9rem;
    outline: none;
}

.document-search-input:focus {
    border-color: #6ea8d5;
    box-shadow: 0 0 0 .15rem rgba(20, 114, 189, .12);
}

.document-search-icon {
    position: absolute;
    left: .8rem;
    z-index: 1;
    width: .85rem;
    height: .85rem;
    border: 1.5px solid #64748b;
    border-radius: 50%;
    pointer-events: none;
}

.document-search-icon::after {
    position: absolute;
    right: -.35rem;
    bottom: -.2rem;
    width: .4rem;
    border-top: 1.5px solid #64748b;
    content: "";
    transform: rotate(45deg);
}

.document-search-clear {
    position: absolute;
    right: .55rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 1.15rem;
    line-height: 1;
}

.document-search-clear:hover {
    background: #eef2f6;
    color: #334155;
}

.document-search-result-count {
    display: block;
    margin-top: -.55rem;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

.quick-info-panel {
    border-left: 1px solid var(--bs-border-color);
    padding-left: 1rem;
}

.quick-info-panel h2 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.quick-info-panel h3 {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.quick-info-panel dt {
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.quick-info-panel dd {
    margin-bottom: .75rem;
    overflow-wrap: anywhere;
}

.quick-info-share-permissions {
    margin-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
}

.quick-info-share-permissions h3 {
    margin-bottom: .5rem;
    font-size: .95rem;
    font-weight: 700;
}

.quick-info-share-recipient {
    display: grid;
    gap: .45rem;
    margin-bottom: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .45rem;
    padding: .65rem;
}

.quick-info-share-recipient label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
}

.document-content-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.create-document-panel {
    border-color: #86b7fe;
    background-color: #f7fbff;
}

.create-document-panel .btn-close {
    flex: 0 0 auto;
}

.create-document-folder-picker {
    display: flex;
    height: 18rem;
    min-height: 0;
    flex-direction: column;
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
}

.create-document-folder-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: .25rem;
}

.create-document-folder-footer {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color);
    background: #f7fbff;
}

.create-document-folder-label {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.create-document-folder-path {
    min-width: 0;
    overflow: hidden;
    color: #185681;
    font-size: .85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.create-folder-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.25rem;
    border: 0;
    border-radius: .25rem;
    padding: .4rem .5rem;
    background: transparent;
    color: #185681;
    gap: .5rem;
    justify-content: flex-start;
    margin-bottom: .15rem;
    text-align: left;
}

.create-folder-children {
    margin-left: 1.5rem;
}

@media (max-width: 768px) {
    .document-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .create-document-panel .row > div {
        width: 100%;
    }
}

.document-cards {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.document-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4.75rem;
    border: 1px solid #e1e5ea;
    border-radius: .75rem;
    padding: .65rem .75rem;
    box-shadow: 0 .1rem .25rem rgba(0, 0, 0, .04);
    cursor: pointer;
    position: relative;
}

.document-card.selected {
    border-color: #86b7fe;
    background-color: #f7fbff;
}

.document-type-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 3.25rem;
    flex: 0 0 2.75rem;
    border: 0;
    border-radius: .25rem;
    color: white;
    cursor: pointer;
    position: relative;
    box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15);
    transition: transform .15s ease, filter .15s ease;
}

.document-type-icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: .7rem solid rgba(255, 255, 255, .8);
    border-left: .7rem solid transparent;
}

.document-type-icon:hover,
.document-type-icon:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.document-type-icon-symbol {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.document-type-icon-label {
    font-size: .52rem;
    font-weight: 700;
    line-height: 1;
    margin-top: .2rem;
}

.document-icon-word {
    background: #185abd;
}

.document-icon-excel {
    background: #107c41;
}

.document-icon-powerpoint {
    background: #c43e1c;
}

.document-icon-pdf {
    background: #d93025;
}

.document-icon-other {
    background: #6c757d;
}

.document-card-menu-container {
    position: relative;
    align-self: center;
}

.document-menu-button {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: white;
    font-size: 1.5rem;
    line-height: 1;
}

.document-menu-button:hover,
.document-menu-button:focus {
    background: var(--bs-tertiary-bg);
}

.document-action-menu {
    position: absolute;
    z-index: 20;
    top: 3.25rem;
    right: 0;
    display: flex;
    width: 14rem;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: white;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: .4rem;
}

.document-action-menu-item {
    border: 0;
    border-radius: .25rem;
    background: transparent;
    padding: .6rem .75rem;
    text-align: left;
}

.document-action-menu-item:hover,
.document-action-menu-item:focus {
    background: var(--bs-primary-bg-subtle);
}

.document-share-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .45);
}

.document-share-dialog {
    display: flex;
    width: min(100%, 550px);
    height: min(92vh, 820px);
    max-height: calc(100dvh - 2rem);
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid #dbe3ec;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .2);
}

.document-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.document-share-header h2 {
    margin: 0 0 .65rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 700;
}

.document-share-header button {
    width: 2rem;
    height: 2rem;
    margin-bottom: .5rem;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.25rem;
}

.document-share-search {
    width: 100%;
    min-height: 2.75rem;
    padding: .6rem .8rem;
    border: 1px solid #2563eb;
    border-radius: .4rem;
}

.document-share-targets {
    min-height: 10rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #64748b #e2e8f0;
}

.document-share-targets > p {
    padding: .75rem;
}

.document-share-target {
    display: flex;
    min-height: 3.55rem;
    align-items: center;
    gap: .75rem;
    padding: .4rem .5rem;
    border-radius: .4rem;
    cursor: pointer;
}

.document-share-users-dialog {
    height: min(92vh, 760px);
}

.document-share-user-results {
    min-height: 8rem;
    max-height: 15rem;
    flex: 0 1 auto;
}

.document-share-user-name {
    display: grid;
    min-width: 0;
}

.document-share-user-name small {
    overflow-wrap: anywhere;
    color: #64748b;
}

.document-share-permissions {
    max-height: 15rem;
    overflow-y: auto;
    border-top: 1px solid #e2e8f0;
    padding-top: .75rem;
}

.document-share-permissions h3 {
    font-size: .9rem;
    font-weight: 700;
}

.document-share-permission-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid #eef2f7;
}

.document-share-permission-row > strong {
    flex: 1 1 100%;
}

.document-share-permission-row label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
}

.document-share-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #e2e8f0;
}

.document-share-target:hover,
.document-share-target.selected {
    background: #f1f5f9;
}

.document-share-target input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin: 0 .15rem;
}

.document-share-avatar {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.document-share-avatar.group {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.document-share-avatar img,
.document-share-avatar-member img {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.document-share-avatar.group-composite {
    position: relative;
    display: block;
    flex: 0 0 2.5rem;
    aspect-ratio: 1;
    overflow: visible;
    background: transparent;
}

.document-share-avatar-members {
    position: absolute;
    inset: 0;
}

.document-share-avatar-member {
    position: absolute;
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    aspect-ratio: 1;
    flex: 0 0 1.55rem;
    place-items: center;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
}

@media (max-height: 650px) {
    .document-share-dialog {
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: .75rem 1rem;
        gap: .5rem;
    }

    .document-share-targets {
        min-height: 6rem;
    }
}

.document-share-avatar-member:nth-child(1) {
    top: 0;
    left: 0;
}

.document-share-avatar-member:nth-child(2) {
    top: 0;
    right: 0;
}

.document-share-avatar-member:nth-child(3) {
    bottom: 0;
    left: .45rem;
}

.document-share-avatar-count {
    position: absolute;
    right: -.2rem;
    bottom: -.1rem;
    display: grid;
    min-width: 1rem;
    height: 1rem;
    place-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: .58rem;
    line-height: 1;
}

.document-share-target-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: .1rem;
}

.document-share-target-copy strong,
.document-share-target-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-share-target-copy strong {
    color: #172033;
    font-size: .9rem;
}

.document-share-target-copy small {
    color: #64748b;
    font-size: .78rem;
}

.document-share-message-label {
    padding: .7rem .65rem;
    border-radius: .35rem .35rem 0 0;
    background: #f1f5f9;
    color: #172033;
    font-size: .85rem;
    font-weight: 700;
}

.document-share-file {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .5rem;
    margin-top: -.75rem;
    padding: .55rem .65rem .25rem;
    background: #f1f5f9;
    color: #334155;
    font-size: .8rem;
}

.document-share-file strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-share-email-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0;
    color: #334155;
    font-size: .9rem;
}

.document-share-email-option input {
    flex: 0 0 auto;
}

.document-share-message {
    min-height: 4rem;
    margin-top: -.75rem;
    padding: .5rem .65rem;
    resize: vertical;
    border: 0;
    border-radius: 0 0 .35rem .35rem;
    background: #f1f5f9;
    color: #475569;
    font: inherit;
}

.document-share-error {
    color: #b42318;
    font-size: .85rem;
}

.document-share-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .15rem;
}

.document-share-footer > span {
    margin-right: auto;
    font-size: .8rem;
}

.document-share-footer button {
    min-height: 2.35rem;
    padding: .45rem .85rem;
    border: 0;
    border-radius: .4rem;
    background: #f1f5f9;
    color: #172033;
}

.document-share-footer button.primary {
    background: #2563eb;
    color: #fff;
}

.document-share-footer button:disabled,
.document-share-header button:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.document-card-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: .35rem;
}

.document-card-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-card-meta {
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.document-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.folder-tree-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    border-radius: .25rem;
    padding: 0 .25rem;
    gap: .25rem;
}

.folder-action-menu {
    position: absolute;
    z-index: 20;
    top: 2.25rem;
    right: 0;
    display: flex;
    width: 10rem;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: white;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: .4rem;
}

.folder-action-menu-item {
    border: 0;
    border-radius: .25rem;
    background: transparent;
    padding: .6rem .75rem;
    text-align: left;
}

.folder-action-menu-item:hover,
.folder-action-menu-item:focus {
    background: var(--bs-primary-bg-subtle);
}

@media (max-width: 768px) {
    .document-browser {
        grid-template-columns: 1fr;
    }

    .quick-info-panel {
        border-top: 1px solid var(--bs-border-color);
        border-left: 0;
        padding: 1rem 0 0;
    }

    .folder-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
        padding: 0 0 1rem;
    }

    .document-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .document-card-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 4.25rem;
    }
}

.folder-tree-row.selected {
    background-color: var(--bs-primary-bg-subtle);
}

.folder-tree-toggle,
.folder-tree-select {
    border: 0;
    background: transparent;
    color: inherit;
}

.folder-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 2rem;
    padding: 0;
}

.folder-tree-select {
    flex: 1;
    min-width: 0;
    padding: .375rem .25rem;
    text-align: left;
}

.folder-tree-children {
    margin-left: .65rem;
    border-left: 1px solid var(--bs-border-color);
    padding-left: .65rem;
}

.folder-tree-document,
.folder-tree-empty {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .25rem .5rem;
}

.folder-tree-empty {
    color: var(--bs-secondary-color);
    font-style: italic;
}

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

.office-workspace {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: .15rem;
}

.office-document-tabs {
    display: flex;
    min-width: 0;
    gap: .2rem;
    border-bottom: 1px solid var(--bs-border-color);
    align-items: center;
    padding: .1rem 0;
}

.office-documents-button {
    flex: 0 0 auto;
    margin-right: .25rem;
    padding: .25rem .6rem;
    white-space: nowrap;
}

.office-signing-button {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .25rem .6rem;
    white-space: nowrap;
}

.office-document-tabs-scroll {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    gap: .2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.office-document-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.office-tabs-scroll-button {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: #eef7ff;
    color: #185681;
    font-size: 1.35rem;
    line-height: 1;
}

.office-tabs-scroll-button:hover,
.office-tabs-scroll-button:focus {
    border-color: #155b91;
    background: #1d6fae;
    color: #fff;
}

.office-document-tab {
    display: flex;
    width: 14rem;
    min-width: 14rem;
    max-width: 14rem;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem .5rem 0 0;
    background: var(--bs-tertiary-bg);
}

.office-document-tab.active {
    border-color: #155b91;
    border-bottom-color: #155b91;
    background: #1d6fae;
    color: #fff;
}

.office-document-tab-select,
.office-document-tab-close {
    border: 0;
    background: transparent;
    color: inherit;
}

.office-document-tab:not(.active):hover {
    border-color: #7eb5dc;
    background: #eef7ff;
}

.office-document-tab-select {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: .3rem .55rem;
    text-align: left;
}

.office-document-tab-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-document-tab-close {
    flex: 0 0 2rem;
    width: 2rem;
    padding: .2rem .45rem;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
}

.office-document-tab-close:hover,
.office-document-tab-close:focus {
    color: var(--bs-danger);
}

.office-editor-shell {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.office-document-details {
    flex: 0 0 auto;
    margin-bottom: .5rem;
}

.office-editor-host {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.office-editor-host,
.office-editor-host > div,
.office-editor-host iframe {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border: 0;
}

.office-editor-host > div {
    position: relative;
}

.office-document-area h2 {
    font-size: 1.25rem;
}

.office-document-details {
    max-width: 36rem;
}

.signing-create-page {
    display: flex;
    height: calc(100vh - 5.5rem);
    min-height: 0;
    flex-direction: column;
    gap: 1rem;
    overflow: auto;
}

.signing-create-header,
.signing-create-footer,
.signing-document-toolbar,
.signing-panel-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.signing-create-header {
    justify-content: space-between;
}

.signing-create-header h1 {
    margin: 0;
    font-size: 1.4rem;
}

.signing-workspace {
    display: grid;
    height: 0;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 18rem minmax(0, 1fr) 18rem;
    overflow: hidden;
    border: 1px solid #d9dee3;
    background: #fff;
}

.signing-sidebar {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem;
    background: #fff;
}

.signing-sidebar-left {
    border-right: 1px solid #d9dee3;
}

.signing-sidebar-right {
    border-left: 1px solid #d9dee3;
}

.signing-approval-page {
    display: flex;
    min-height: calc(100vh - 7rem);
    flex-direction: column;
    gap: 1rem;
}

.signing-approval-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.signing-approval-header h1 {
    margin: 0;
    font-size: 2.25rem;
}

.signing-approval-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.signing-approval-card {
    position: relative;
    min-height: 0;
    border: 1px solid #e0e4ea;
    border-radius: .8rem;
    padding: .65rem .75rem;
    background: #fff;
    color: #5d5961;
}

.signing-approval-card-checked {
    border-color: #198754;
    background: #f0faf4;
    box-shadow: inset 4px 0 0 #198754, 0 3px 12px rgb(25 135 84 / 10%);
}

.signing-review-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 auto 0 .25rem;
    padding: .5rem .75rem;
    border: 1px solid #cbd5df;
    border-radius: .55rem;
    background: #fff;
    color: #46576a;
    font-weight: 600;
    cursor: pointer;
}

.signing-review-check.is-checked {
    border-color: #198754;
    background: #e8f6ee;
    color: #146c43;
}

.signing-review-check .form-check-input {
    float: none;
    margin: 0;
    accent-color: #198754;
}

.signing-approval-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.signing-approval-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.signing-approval-title h2 {
    margin: 0;
    overflow: hidden;
    color: #1684e5;
    max-width: min(52vw, 42rem);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-priority-badge {
    flex: 0 0 auto;
    border-radius: .6rem;
    padding: .25rem .55rem;
    background: #1684e5;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.signing-priority-badge.priority-3 {
    background: #ee3b3b;
}

.signing-priority-badge.priority-2 {
    background: #f59b23;
}

.signing-checker-notification-action {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.signing-checker-notification-badge {
    position: absolute;
    top: -.45rem;
    right: -.45rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    pointer-events: none;
}

.signing-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .1rem;
    font-size: .8rem;
    white-space: nowrap;
}

.signing-status-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #198754;
}

.signing-status-dot.pending {
    background: #198754;
}

.signing-status-dot.timeout {
    background: #f0ad00;
}

.signing-approval-details {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .3rem;
    font-size: .85rem;
}

.signing-progress-label {
    font-weight: 600;
}

.signing-participants {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    padding-left: .25rem;
}

.signing-participant {
    color: #212529;
    font-weight: 500;
}

.signing-participant::before {
    content: "•";
    margin-right: .25rem;
}

.signing-participant.signed {
    color: #198754;
    font-weight: 700;
}

.signing-approval-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.2rem;
}

.signing-approval-note {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
}

.signing-checker-button {
    align-self: flex-start;
    border: 0;
    border-radius: .65rem;
    padding: .4rem .8rem;
    background: #f4d216;
    color: #181818;
}

.signing-approval-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.approval-icon-button {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 0;
    border-radius: .45rem;
    background: #c8c8ca;
    color: #25252a;
    font-size: 1.15rem;
    text-decoration: none;
}

.approval-icon-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.approval-sign-button {
    background: #0761a9;
    color: #fff;
}

.approval-reject-button {
    background: #bf1717;
    color: #fff;
    font-size: 1.55rem;
}

.signing-approval-card .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0;
    border: 2px solid #6c757d;
    cursor: pointer;
}

.signing-approval-card .form-check-input:checked {
    border-color: #0d6efd;
    background-color: #0d6efd;
    box-shadow: 0 0 0 .15rem rgb(13 110 253 / 18%);
}

.signing-comment-panel {
    display: none;
}

.signing-comment-panel textarea {
    max-width: 28rem;
}

.signing-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem .85rem;
    border-radius: .75rem;
    background: #f3eef5;
}

.signing-bulk-toolbar .form-check {
    margin: 0;
}

.signing-checker-panel {
    display: grid;
    max-width: 38rem;
    grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto;
    gap: .5rem;
    margin-top: .75rem;
}

.signing-modal-backdrop {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / 55%);
}

.signing-preview-modal,
.signing-reject-modal {
    width: min(72rem, 100%);
    overflow: hidden;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
}

.signing-preview-modal {
    display: flex;
    max-height: calc(100dvh - 2rem);
    flex-direction: column;
}

.signing-preview-modal header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: #e8e1ec;
}

.signing-preview-modal header button {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
}

.signing-preview-comment {
    flex: 0 0 auto;
    display: grid;
    gap: .4rem;
    padding: .65rem 1rem;
    border-top: 1px solid #e2e8f0;
}

.signing-preview-comment textarea {
    min-height: 3rem;
    max-height: 7rem;
    resize: vertical;
}

.signing-preview-note-options {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}

.signing-preview-note-option {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.signing-preview-note-option span {
    display: block;
    max-width: min(100%, 28rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-preview-modal footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: .5rem;
    padding: .65rem 1rem;
    border-top: 1px solid #e2e8f0;
}

@media (max-height: 600px) {
    .signing-preview-modal {
        max-height: calc(100dvh - 1rem);
    }

    .signing-preview-comment {
        gap: .25rem;
        padding: .4rem .75rem;
    }

    .signing-preview-comment textarea {
        min-height: 2.5rem;
        max-height: 4rem;
    }

    .signing-preview-modal footer {
        padding: .4rem .75rem;
    }
}

.chat-file-preview-backdrop,
.chat-file-save-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgb(15 23 42 / 58%);
}

.chat-file-preview-modal,
.chat-file-save-dialog {
    width: min(960px, 100%);
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #f1f3f5;
    box-shadow: 0 20px 60px rgb(15 23 42 / 28%);
}

.chat-file-preview-modal header,
.chat-file-preview-modal footer,
.chat-file-save-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: #fff;
}

.chat-file-preview-modal header strong {
    flex: 1;
    overflow: hidden;
    color: #173b67;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-file-preview-close {
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 1.6rem;
}

.chat-file-preview-body {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 280px;
    max-height: calc(90vh - 130px);
    padding: 1rem;
    overflow: auto;
}

.chat-file-preview-body img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 180px);
    object-fit: contain;
}

.chat-file-preview-pdf {
    width: 100%;
    height: calc(90vh - 180px);
    min-height: 480px;
    align-items: flex-start;
}

.chat-file-preview-pdf .signing-preview-pages {
    width: 100%;
}

.chat-file-preview-modal footer {
    justify-content: flex-end;
}

.chat-file-save-dialog {
    width: min(520px, 100%);
    padding: 1.25rem;
}

.chat-file-save-dialog h3 {
    margin: 0;
    color: #173b67;
}

.chat-file-save-dialog p {
    color: #52657a;
    line-height: 1.5;
}

.chat-file-save-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: .75rem 0 0;
}

.details-attachments-content {
    max-height: min(42vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.signing-preview-modal footer,
.signing-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
}

.signing-preview-modal footer > .btn-secondary {
    margin-right: auto;
}

.signing-reject-modal {
    width: min(32rem, 100%);
    padding: 1rem;
}

.signing-reject-modal h3 {
    margin-top: 0;
}

.signing-reject-modal textarea {
    min-height: 8rem;
    margin: .75rem 0;
}

.signing-reject-modal small {
    display: block;
    color: #9a4c00;
}

@media (max-width: 700px) {
    .signing-approval-card-header,
    .signing-approval-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .signing-status {
        margin-top: 0;
    }

    .signing-approval-title h2 {
        max-width: calc(100vw - 9rem);
        white-space: normal;
    }

    .signing-approval-card {
        padding: .65rem;
    }

    .signing-approval-card-header {
        gap: .45rem;
    }

    .signing-approval-actions {
        gap: .3rem;
    }

    .approval-icon-button {
        width: 2rem;
        height: 2rem;
    }

    .signing-approval-actions {
        align-self: stretch;
        justify-content: flex-start;
    }

    .signing-bulk-toolbar,
    .signing-checker-panel {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .signing-checker-modal {
        padding: 1rem;
    }
}

.signing-panel-heading {
    justify-content: space-between;
    margin-bottom: .75rem;
    justify-content: space-between;
}

.signing-page-heading,
.signing-page-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.signing-page-heading {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}

.signing-page-heading span {
    color: #766c7b;
    font-size: .78rem;
}

.signing-image-button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: #28212d;
    font-size: 1.6rem;
    line-height: 1;
}

.signing-image-button:hover:not(:disabled),
.signing-image-button:focus-visible {
    background: #e9ecef;
    color: #212529;
}

.signing-image-button:disabled {
    color: #c8c0ca;
    cursor: not-allowed;
}

.signing-priority {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
    font-size: .8rem;
}

.signing-priority label {
    white-space: nowrap;
}

.signing-sidebar textarea {
    min-height: 4rem;
    margin-top: .5rem;
    resize: vertical;
}

.signing-location-list {
    display: flex;
    min-height: 8rem;
    flex-direction: column;
    gap: .35rem;
    margin-top: .75rem;
}

.signing-location-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1px solid transparent;
    border-left: 3px solid #adb5bd;
    border-radius: 0;
    padding: .55rem;
    background: transparent;
    color: #4c4651;
    text-align: left;
    cursor: pointer;
}

.signing-location-item.active {
    border-color: #adb5bd;
    background: #f1f3f5;
}

.signing-location-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-location-color {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #6c757d;
}

.signing-location-index {
    flex: 0 0 1rem;
    color: #766c7b;
    font-size: .78rem;
}

.signing-location-label {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .12rem;
}

.signing-location-label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-location-label small {
    color: #766c7b;
    font-size: .72rem;
}

.signing-location-remove {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 1.4rem;
    line-height: 1;
}

.signing-location-remove:hover,
.signing-location-remove:focus-visible {
    color: #212529;
}

.signing-empty-locations,
.signing-empty-editor {
    padding: 2rem .5rem;
    color: #adb5bd;
    text-align: center;
}

.signing-document-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: #f1f5f9;
}

.signing-document-toolbar {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    gap: .45rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .45rem .65rem;
    border-bottom: 1px solid #d9dee3;
    background: #f8f9fa;
    white-space: nowrap;
}

.signing-document-toolbar > * {
    flex: 0 0 auto;
}

.signing-completion-email-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
    font-size: .82rem;
}

.signing-page-input {
    width: 3.5rem;
}

.signing-document-toolbar input[type="file"] {
    display: none;
}

.signing-pdf-stage {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem;
    overscroll-behavior: contain;
}

.signing-pdf-pages {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.signing-pdf-page {
    position: relative;
    width: min(100%, 62rem);
    min-width: 0;
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .18);
}

.signing-pdf-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    background: #fff;
}

.signing-page-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.signing-location-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 4rem;
    min-height: 2rem;
    border: 2px dashed #c47d20;
    padding: .25rem .35rem;
    background: rgba(236, 191, 132, .75);
    color: #60421f;
    cursor: move;
    font-size: .8rem;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
    z-index: 3;
}

.signing-location-overlay.selected {
    border-color: #198754;
    box-shadow: 0 0 0 .15rem rgba(25, 135, 84, .2);
}

.signing-location-overlay span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-location-overlay button {
    border: 0;
    background: transparent;
    color: #5a3511;
    font-size: 1.2rem;
    line-height: 1;
}

.signing-location-editor {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d9dee3;
}

.signing-completion-email-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d9dee3;
}

.signing-completion-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .55rem 0 .45rem;
}

.signing-completion-selection-count {
    color: #526477;
    font-size: .78rem;
}

.signing-completion-picker-toolbar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.signing-completion-user-picker {
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid #d7e1eb;
    border-radius: .4rem;
    background: #fff;
}

.signing-completion-user-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem;
    cursor: pointer;
}

.signing-completion-user-option:hover {
    background: #f1f6fb;
}

.signing-completion-user-avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2875ad;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.signing-completion-user-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
}

.signing-completion-user-copy strong,
.signing-completion-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signing-completion-selected {
    margin-top: .5rem;
    color: #526477;
    font-size: .78rem;
}

.signing-no-document {
    display: flex;
    height: 100%;
    min-height: 30rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #5f6f82;
    cursor: pointer;
}

.signing-add-file-button {
    display: grid;
    place-items: center;
    cursor: pointer;
}

.signing-add-file-button input[type="file"] {
    display: none;
}

.signing-no-document input[type="file"] {
    display: none;
}

.signing-add-icon {
    display: grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    border: 5px solid #8ea6c2;
    border-radius: 50%;
    font-size: 4rem;
    line-height: 1;
}

.signing-upload-hint {
    margin-top: .65rem;
    color: #718096;
    font-size: .9rem;
}

.signing-create-footer {
    justify-content: space-between;
}

.signing-selected-person,
.signing-selected-certificate {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .65rem;
    padding: .55rem .65rem;
    border: 1px solid #e7dfeb;
    background: #fff;
}

.signing-selected-person span,
.signing-selected-certificate span {
    color: #766c7b;
    font-size: .78rem;
}

.signing-selected-person strong,
.signing-selected-certificate strong,
.signing-selected-person small,
.signing-selected-certificate small {
    overflow-wrap: anywhere;
}

.signing-selected-person small,
.signing-selected-certificate small {
    color: #575158;
    font-size: .82rem;
    line-height: 1.35;
}

.signing-picker-backdrop {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(31, 25, 34, .45);
}

.signing-picker-dialog {
    display: flex;
    width: min(100%, 62rem);
    max-height: min(90vh, 48rem);
    flex-direction: column;
    gap: .8rem;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid #e2dbe5;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
}

.signing-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.signing-picker-header h2 {
    margin: 0;
    color: #171717;
    font-size: 1.5rem;
}

.signing-picker-header p {
    margin: .25rem 0 0;
    color: #a19ba3;
}

.signing-picker-content {
    display: grid;
    min-height: 20rem;
    height: min(58vh, 34rem);
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid #e9e5e9;
}

.signing-picker-signers,
.signing-picker-certificates {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.signing-picker-signers {
    border-right: 1px solid #e9e5e9;
}

.signing-picker-signer,
.signing-picker-certificate {
    display: flex;
    min-height: 3.1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    border: 0;
    border-bottom: 1px solid #f0edf0;
    padding: .65rem .75rem;
    background: #fff;
    color: #202020;
    text-align: left;
}

.signing-picker-signer:hover,
.signing-picker-signer.active {
    background: #cfe5f9;
}

.signing-picker-certificate:hover {
    background: #f2f8ff;
}

.signing-picker-signer small,
.signing-picker-certificate span,
.signing-picker-certificate small {
    color: #575158;
    font-size: .82rem;
}

.signing-picker-empty {
    padding: 3rem 1rem;
    color: #aaa3aa;
    text-align: center;
}

@media (max-width: 900px) {
    .office-signing-button {
        padding-inline: .45rem;
    }

    .document-content-header {
        align-items: stretch;
        flex-direction: column;
        gap: .25rem;
    }

    .document-search {
        flex-basis: auto;
        width: 100%;
        margin-bottom: .5rem;
    }

    .signing-workspace {
        grid-template-columns: 15rem minmax(0, 1fr);
    }

    .signing-sidebar-right {
        grid-column: 1 / -1;
        border-top: 1px solid #e7dfeb;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .signing-create-header h1 {
        font-size: 1.15rem;
    }

    .signing-workspace {
        display: flex;
        height: 0;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .signing-sidebar-left,
    .signing-sidebar-right {
        border: 0;
        border-bottom: 1px solid #e7dfeb;
    }

    .signing-document-panel {
        min-height: 0;
        flex: 1 1 auto;
        order: 2;
    }

    .signing-sidebar-right {
        order: 3;
    }

    .signing-pdf-frame {
        min-height: 26rem;
    }

    .signing-pdf-page {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .signing-picker-content {
        height: min(58vh, 34rem);
        grid-template-columns: 1fr;
    }

    .signing-picker-signers {
        min-height: 0;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid #e9e5e9;
    }

    .signing-picker-certificates {
        min-height: 0;
    }

    .signing-location-resize-handle {
        width: 1rem;
        height: 1rem;
    }

    .signing-add-signer-button {
        min-height: 2.75rem;
    }
}

@media (max-width: 600px) {
    .office-document-tabs {
        flex-wrap: wrap;
    }

    .office-signing-button {
        margin-left: auto;
        font-size: .875rem;
    }

    .office-document-tabs-scroll {
        order: 3;
        flex-basis: calc(100% - 4rem);
    }
}