/* =============================================================================
   RealSign theme
   Loaded after the Adminto/Bootstrap stylesheets and overrides them with a
   calmer, flatter look: one accent colour, light surfaces, generous spacing.
   Everything is driven by the tokens below.
   ============================================================================= */

:root {
    --rs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --rs-bg: #f4f6f9;
    --rs-surface: #ffffff;
    --rs-surface-muted: #f9fafb;
    --rs-border: #e5e7eb;
    --rs-border-strong: #d1d5db;

    --rs-text: #1f2937;
    --rs-text-muted: #6b7280;
    --rs-text-faint: #9ca3af;

    --rs-accent: #f59300;
    --rs-accent-hover: #d97f00;
    --rs-accent-soft: #fff3e0;
    --rs-accent-ring: rgba(245, 147, 0, 0.22);

    --rs-success: #15803d;
    --rs-success-soft: #dcfce7;
    --rs-info: #1d4ed8;
    --rs-info-soft: #dbeafe;
    --rs-danger: #b91c1c;
    --rs-danger-soft: #fee2e2;
    --rs-warning: #b45309;
    --rs-warning-soft: #fef3c7;
    --rs-neutral: #374151;
    --rs-neutral-soft: #e5e7eb;

    --rs-radius-sm: 6px;
    --rs-radius: 10px;
    --rs-radius-lg: 14px;

    --rs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --rs-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
    --rs-shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, 0.25);

    --rs-topbar-height: 70px;
    --rs-sidebar-width: 240px;
}

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */
html {
    font-size: 14px;
}

body {
    font-family: var(--rs-font);
    background-color: var(--rs-bg);
    color: var(--rs-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--rs-font);
    color: var(--rs-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--rs-accent-hover);
}

    a:hover {
        color: var(--rs-accent);
        text-decoration: none;
    }

hr {
    border-top: 1px solid var(--rs-border);
}

::selection {
    background: var(--rs-accent-soft);
    color: var(--rs-text);
}

/* unobtrusive scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--rs-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: var(--rs-border-strong);
    border-radius: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* -----------------------------------------------------------------------------
   Top bar
   ----------------------------------------------------------------------------- */
body .navbar-custom,
body[data-topbar="dark"] .navbar-custom {
    background-color: var(--rs-surface);
    border-bottom: 1px solid var(--rs-border);
    box-shadow: none;
    height: var(--rs-topbar-height);
    padding: 0 20px 0 0;
}

.navbar-custom .logo-box {
    width: auto;
    min-width: var(--rs-sidebar-width);
    height: var(--rs-topbar-height);
    display: flex;
    align-items: center;
    padding-left: 22px;
    background: transparent;
}

.rs-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    text-decoration: none;
}

    .rs-logo:hover {
        text-decoration: none;
    }

.rs-logo-mark {
    height: 34px;
    width: auto;
}

.rs-logo-text {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rs-text);
}

    .rs-logo-text .rs-logo-accent {
        color: var(--rs-accent);
    }

#clientLogo img {
    height: 30px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--rs-border);
}

body .navbar-custom .topnav-menu .nav-link,
body[data-topbar="dark"] .navbar-custom .topnav-menu .nav-link {
    color: var(--rs-text-muted);
    font-weight: 500;
    font-size: 14px;
    line-height: var(--rs-topbar-height);
    max-height: var(--rs-topbar-height);
    padding: 0 12px;
    transition: color 0.15s ease;
}

    body .navbar-custom .topnav-menu .nav-link:hover,
    body .navbar-custom .topnav-menu .nav-link:focus,
    body[data-topbar="dark"] .navbar-custom .topnav-menu .nav-link:hover {
        color: var(--rs-text);
    }

    body .navbar-custom .topnav-menu .nav-link .noti-icon {
        font-size: 18px;
        vertical-align: -2px;
        margin-right: 4px;
        color: var(--rs-text-faint);
        transition: color 0.15s ease;
    }

    body .navbar-custom .topnav-menu .nav-link:hover .noti-icon {
        color: var(--rs-accent);
    }

body .navbar-custom .topnav-menu .nav-link.rs-topnav-active {
    color: var(--rs-text);
    box-shadow: inset 0 -2px 0 var(--rs-accent);
}

    body .navbar-custom .topnav-menu .nav-link.rs-topnav-active .noti-icon {
        color: var(--rs-accent);
    }

body .navbar-custom .dropdown.show .nav-link,
body[data-topbar="dark"] .navbar-custom .dropdown.show .nav-link,
body .navbar-custom .topnav-menu .nav-link:active {
    background: transparent !important;
    color: var(--rs-text);
}

/* no focus box on the bar's links after a click; keyboard users still get a ring */
body .navbar-custom .topnav-menu .nav-link:focus {
    outline: none;
    box-shadow: none;
}

    body .navbar-custom .topnav-menu .nav-link:focus-visible {
        box-shadow: inset 0 0 0 2px var(--rs-accent-ring);
        border-radius: var(--rs-radius-sm);
    }

/* the user menu hangs directly off the bar, wide enough for its longest entry */
body .navbar-custom .topnav-menu .dropdown-menu {
    top: calc(var(--rs-topbar-height) - 6px) !important;
    right: 0 !important; /* pinned to the bar's edge, not placed by Popper */
    left: auto !important;
    margin: 0;
    min-width: 220px;
    animation: none;
    transform: none !important;
}

body .navbar-custom .button-menu-mobile,
body[data-topbar="dark"] .navbar-custom .button-menu-mobile {
    color: var(--rs-text-muted);
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: var(--rs-topbar-height);
    width: 56px;
}

/* user menu: initials in a circle instead of a stock photo */
.rs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rs-accent-soft);
    color: var(--rs-accent-hover);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.nav-user .pro-user-name {
    font-weight: 500;
    color: var(--rs-text);
    margin-left: 8px !important;
}

.nav-user .pro-user-name .mdi-chevron-down {
    color: var(--rs-text-faint);
}

/* -----------------------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------------------- */
body .left-side-menu,
body[data-sidebar="dark"] .left-side-menu {
    background-color: var(--rs-surface);
    border-right: 1px solid var(--rs-border);
    box-shadow: none;
    width: var(--rs-sidebar-width);
    padding: 12px 0;
}

#sidebar-menu .menu-title {
    padding: 14px 24px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--rs-text-faint);
}

body #sidebar-menu > ul > li > a,
body[data-sidebar="dark"] #sidebar-menu > ul > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 12px;
    padding: 9px 12px;
    border-radius: var(--rs-radius-sm);
    color: var(--rs-text-muted);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    body #sidebar-menu > ul > li > a i,
    body[data-sidebar="dark"] #sidebar-menu > ul > li > a i {
        font-size: 19px;
        line-height: 1;
        width: 22px;
        text-align: center;
        color: var(--rs-text-faint);
        margin: 0;
        transition: color 0.15s ease;
    }

    body #sidebar-menu > ul > li > a:hover,
    body #sidebar-menu > ul > li > a:focus,
    body[data-sidebar="dark"] #sidebar-menu > ul > li > a:hover {
        background-color: var(--rs-surface-muted);
        color: var(--rs-text);
    }

        body #sidebar-menu > ul > li > a:hover i {
            color: var(--rs-text-muted);
        }

/* active item: soft accent block, no heavy fill */
body #side-menu li.mm-active,
body #side-menu li.mm-active > a,
body #side-menu a.active,
body[data-sidebar="dark"] #side-menu li.mm-active > a,
body[data-sidebar="dark"] #side-menu a.active {
    background-color: transparent;
}

    body #side-menu li.mm-active > a,
    body #side-menu a.active,
    body[data-sidebar="dark"] #side-menu li.mm-active > a,
    body[data-sidebar="dark"] #side-menu a.active {
        background-color: var(--rs-accent-soft) !important;
        color: var(--rs-accent-hover) !important;
        font-weight: 600;
    }

        body #side-menu li.mm-active > a i,
        body #side-menu a.active i,
        body[data-sidebar="dark"] #side-menu li.mm-active > a i,
        body[data-sidebar="dark"] #side-menu a.active i {
            color: var(--rs-accent) !important;
        }

/* -----------------------------------------------------------------------------
   Content area and footer
   ----------------------------------------------------------------------------- */
.content-page {
    margin-left: var(--rs-sidebar-width);
    padding: 0 16px 2px;
}

/* the template already pushes .content-page down by the top bar height */
.content-page > .content {
    padding: 24px 12px 32px;
}

body .footer {
    background-color: transparent;
    border-top: 1px solid var(--rs-border);
    color: var(--rs-text-faint);
    font-size: 13px;
    left: var(--rs-sidebar-width);
    padding: 16px 24px;
}

    body .footer a {
        color: var(--rs-text-muted);
    }

        body .footer a:hover {
            color: var(--rs-accent-hover);
        }

/* -----------------------------------------------------------------------------
   Page header (title row used by the list and detail pages)
   ----------------------------------------------------------------------------- */
.rs-page-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 20px;
}

.rs-page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.rs-page-subtitle {
    color: var(--rs-text-muted);
    font-size: 14px;
    margin: 4px 0 0;
}

.rs-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto; /* stays on the right, also when the header wraps onto two lines */
    justify-content: flex-end;
}

/* title with a status pill beside it, and a meta line of small facts underneath */
.rs-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.rs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--rs-text-muted);
}

    .rs-meta i {
        margin-right: 5px;
        color: var(--rs-text-faint);
        font-size: 15px;
        vertical-align: -1px;
    }

.rs-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rs-text-faint);
    margin-bottom: 4px;
}

/* -----------------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------------- */
.card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    box-shadow: var(--rs-shadow-sm);
    margin-bottom: 20px;
}

.card-header {
    background: var(--rs-surface);
    border-bottom: 1px solid var(--rs-border);
    padding: 14px 20px;
    border-radius: var(--rs-radius) var(--rs-radius) 0 0 !important;
}

    /* the old dark card headers become plain */
    .card-header.bg-dark {
        background-color: var(--rs-surface) !important;
        color: var(--rs-text) !important;
    }

        .card-header.bg-dark .text-white,
        .card-header .text-white {
            color: var(--rs-text) !important;
        }

    .card-header .header-title {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
        line-height: 1.4;
    }

        .card-header .header-title i {
            color: var(--rs-accent);
            margin-right: 6px;
            font-size: 17px;
            vertical-align: -1px;
        }

    .card-header .card-subtitle {
        font-size: 13px;
        color: var(--rs-text-faint) !important;
        margin: 0;
    }

        .card-header .card-subtitle i {
            font-size: 15px;
            vertical-align: -2px;
        }

/* title on the left, a hint or action on the right, both on the same centre line */
.rs-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

    .card-header .card-drop {
        color: var(--rs-text-muted);
        font-size: 13px !important;
        font-weight: 500;
    }

        .card-header .card-drop:hover {
            color: var(--rs-text);
        }

        .card-header .card-drop:focus {
            outline: none;
            box-shadow: none;
        }

.card-body {
    padding: 20px;
}

.header-title {
    font-weight: 600;
}

.sub-header {
    color: var(--rs-text-muted);
}

/* -----------------------------------------------------------------------------
   Definition rows (document information): label column muted, value column plain
   ----------------------------------------------------------------------------- */
.font-15 {
    font-size: 14px;
}

#esignLogCard .font-weight-bold,
.rs-definition-label {
    color: var(--rs-text-muted);
    font-weight: 500 !important;
    font-size: 13px;
    padding-top: 1px;
}

#esignLogCard .mb-2 {
    margin-bottom: 10px !important;
}

#esignLogCard .card-body .container-fluid {
    padding: 0;
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.btn {
    font-family: var(--rs-font);
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--rs-radius-sm);
    padding: 0.5rem 0.95rem;
    line-height: 1.4;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .btn:focus {
        box-shadow: 0 0 0 3px var(--rs-accent-ring) !important;
    }

.btn-sm, .btn-group-sm > .btn {
    font-size: 13px;
    padding: 0.4rem 0.75rem;
}

.btn-xs {
    font-size: 12px;
    padding: 0.3rem 0.6rem;
}

.btn-lg, .btn-group-lg > .btn {
    font-size: 15px;
    padding: 0.65rem 1.25rem;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--rs-accent);
    border-color: var(--rs-accent);
    color: #fff;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--rs-accent-hover);
        border-color: var(--rs-accent-hover);
        color: #fff;
    }

.btn-success,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--rs-success);
    border-color: var(--rs-success);
}

    .btn-success:hover, .btn-success:focus {
        background-color: #166534;
        border-color: #166534;
    }

.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: #dc2626;
    border-color: #dc2626;
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: var(--rs-danger);
        border-color: var(--rs-danger);
    }

/* neutral buttons: quiet outlines instead of solid grey and black blocks */
.btn-secondary,
.btn-dark,
.btn-light,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-success,
.btn-outline-danger,
.btn-bordered-info {
    background-color: var(--rs-surface);
    border: 1px solid var(--rs-border-strong);
    color: var(--rs-text) !important; /* the template paints .btn-dark text near-white */
}

    .btn-secondary:hover, .btn-secondary:focus,
    .btn-dark:hover, .btn-dark:focus,
    .btn-light:hover, .btn-light:focus,
    .btn-outline-secondary:hover, .btn-outline-secondary:focus,
    .btn-outline-dark:hover, .btn-outline-dark:focus,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-dark:not(:disabled):not(.disabled):active {
        background-color: var(--rs-surface-muted);
        border-color: var(--rs-border-strong);
        color: var(--rs-text) !important;
    }

.btn-outline-success {
    color: var(--rs-success);
}

    .btn-outline-success:hover, .btn-outline-success:focus {
        background-color: var(--rs-success-soft);
        border-color: var(--rs-success);
        color: var(--rs-success);
    }

.btn-outline-danger {
    color: var(--rs-danger);
}

    .btn-outline-danger:hover, .btn-outline-danger:focus {
        background-color: var(--rs-danger-soft);
        border-color: var(--rs-danger);
        color: var(--rs-danger);
    }

.btn-bordered-info {
    color: var(--rs-accent-hover);
    border-color: var(--rs-accent);
}

    .btn-bordered-info:hover, .btn-bordered-info:focus {
        background-color: var(--rs-accent-soft);
        color: var(--rs-accent-hover);
    }

.btn-link {
    color: var(--rs-text);
}

.btn .mdi, .btn .fa, .btn .fas, .btn .dx-icon {
    vertical-align: -1px;
}

/* square icon-only button (close, etc.) */
.rs-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* -----------------------------------------------------------------------------
   Badges: soft pills with a status dot
   ----------------------------------------------------------------------------- */
.badge {
    font-family: var(--rs-font);
    font-weight: 600;
    font-size: 12px !important;
    letter-spacing: 0.01em;
    padding: 0.35em 0.75em 0.35em 0.65em;
    border-radius: 999px;
    line-height: 1.4;
    vertical-align: middle;
}

    .badge::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        margin-right: 6px;
        vertical-align: 1px;
        opacity: 0.9;
    }

.badge-success {
    background: var(--rs-success-soft);
    color: var(--rs-success);
}

.badge-info {
    background: var(--rs-info-soft);
    color: var(--rs-info);
}

.badge-danger {
    background: var(--rs-danger-soft);
    color: var(--rs-danger);
}

.badge-warning {
    background: var(--rs-warning-soft);
    color: var(--rs-warning);
}

.badge-dark, .badge-secondary {
    background: var(--rs-neutral-soft);
    color: var(--rs-neutral);
}

.badge-primary {
    background: var(--rs-accent-soft);
    color: var(--rs-accent-hover);
}

.badge-pill {
    padding-left: 0.65em;
}

/* -----------------------------------------------------------------------------
   Tables (DataTables)
   ----------------------------------------------------------------------------- */
.rs-table-card {
    padding: 0;
    overflow: hidden;
}

    .rs-table-card .dataTables_wrapper {
        padding: 0;
    }

table.dataTable,
.rs-table-card table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--rs-surface-muted) !important;
    color: var(--rs-text-muted) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top: 0;
    border-bottom: 1px solid var(--rs-border) !important;
    padding: 12px 18px;
    white-space: nowrap;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    bottom: 11px;
    opacity: 0.25;
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 1;
    color: var(--rs-accent);
}

.table td,
table.dataTable tbody td {
    padding: 14px 18px;
    border-top: 1px solid var(--rs-border);
    vertical-align: middle;
    font-size: 14px;
    color: var(--rs-text);
}

table.dataTable tbody tr:first-child td {
    border-top: 0;
}

.table-striped tbody tr:nth-of-type(odd),
table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

table.dataTable tbody tr {
    background-color: var(--rs-surface);
    transition: background-color 0.12s ease;
}

    table.dataTable tbody tr:hover,
    table.dataTable.table-hover tbody tr:hover {
        background-color: var(--rs-surface-muted);
    }

    /* selected row: tinted, with an accent bar on the left, text stays readable */
    table.dataTable tbody tr.selected,
    table.dataTable tbody tr.selected td {
        background-color: var(--rs-accent-soft) !important;
        color: var(--rs-text) !important;
    }

        table.dataTable tbody tr.selected td:first-child {
            box-shadow: inset 3px 0 0 var(--rs-accent);
        }

table.dataTable.dt-responsive tbody td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    background-color: var(--rs-accent);
    border: 0;
    box-shadow: none;
}

.table-bordered td, .table-bordered th {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* a table card that keeps DataTables' own control rows (length/search above, info/pages below) */
.rs-table-card-plain .dataTables_wrapper > .row {
    margin: 0;
    padding: 14px 18px;
    align-items: center;
}

    .rs-table-card-plain .dataTables_wrapper > .row:first-child {
        border-bottom: 1px solid var(--rs-border);
    }

    .rs-table-card-plain .dataTables_wrapper > .row > [class*="col-"] {
        padding: 0;
    }

    .rs-table-card-plain .dataTables_wrapper > .row .dataTables_filter {
        text-align: right;
    }

    .rs-table-card-plain .dataTables_wrapper > .row .dataTables_info {
        padding-top: 0 !important;
    }

    .rs-table-card-plain .dataTables_wrapper > .row .pagination {
        justify-content: flex-end;
        margin: 0;
    }

    .rs-table-card-plain .dataTables_wrapper > .row .dt-buttons {
        margin-top: 0 !important;
    }

/* toolbar controls that the page relocates around the grid */
.dataTables_length label,
.dataTables_filter label {
    margin: 0;
    font-size: 13px;
    color: var(--rs-text-muted);
}

.dataTables_length select {
    min-width: 72px;
    border: 1px solid var(--rs-border-strong);
    border-radius: var(--rs-radius-sm);
    padding: 7px 28px 7px 10px;
    font-size: 13px;
    color: var(--rs-text);
    background: var(--rs-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.dataTables_filter input[type="search"],
.dataTables_filter input {
    width: 260px;
    max-width: 100%;
    border: 1px solid var(--rs-border-strong);
    border-radius: var(--rs-radius-sm);
    padding: 7px 12px 7px 34px;
    font-size: 13px;
    margin-left: 0 !important;
    background: var(--rs-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .dataTables_filter input:focus {
        outline: 0;
        border-color: var(--rs-accent);
        box-shadow: 0 0 0 3px var(--rs-accent-ring);
    }

.dt-buttons {
    margin: 0 !important;
    display: inline-flex;
    gap: 6px;
}

    .dt-buttons .btn,
    .dt-buttons .dt-button {
        background: var(--rs-surface) !important;
        border: 1px solid var(--rs-border-strong) !important;
        color: var(--rs-text-muted) !important;
        font-size: 13px;
        font-weight: 500;
        padding: 0.4rem 0.75rem;
        border-radius: var(--rs-radius-sm) !important;
        margin: 0 !important;
    }

        .dt-buttons .btn:hover,
        .dt-buttons .dt-button:hover {
            color: var(--rs-text) !important;
            background: var(--rs-surface-muted) !important;
        }

.dataTables_info {
    color: var(--rs-text-faint);
    font-size: 13px;
    padding-top: 18px !important;
}

/* inside a table card the info and paging row gets the same inset as the toolbar */
.rs-table-card .dataTables_info {
    padding: 16px 18px !important;
}

.rs-table-card .dataTables_paginate {
    padding: 12px 18px 14px !important;
}

    .rs-table-card .dataTables_paginate .pagination {
        margin: 0;
        justify-content: flex-end;
    }

/* keyboard navigation (KeyTable) highlights the row, never a single cell */
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

table.dataTable tbody tr:has(td.focus) td {
    background-color: var(--rs-surface-muted);
}

.dataTables_wrapper .dataTables_processing {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-sm);
    box-shadow: var(--rs-shadow);
    color: var(--rs-text-muted);
    padding: 8px;
}

/* pagination */
.pagination {
    gap: 4px;
    margin-top: 14px;
}

    .pagination .page-link {
        border: 1px solid transparent;
        border-radius: var(--rs-radius-sm) !important;
        color: var(--rs-text-muted);
        font-size: 13px;
        font-weight: 500;
        min-width: 34px;
        text-align: center;
        padding: 0.4rem 0.6rem;
        margin: 0;
        line-height: 1.4;
        background: transparent;
        box-shadow: none !important;
    }

        .pagination .page-link:hover {
            background: var(--rs-surface-muted);
            color: var(--rs-text);
            border-color: var(--rs-border);
        }

    .pagination .page-item.active .page-link {
        background: var(--rs-accent);
        border-color: var(--rs-accent);
        color: #fff;
    }

    .pagination .page-item.disabled .page-link {
        color: var(--rs-text-faint);
        background: transparent;
    }

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0 !important;
}

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */
label, .col-form-label {
    font-weight: 500;
    color: var(--rs-text);
    font-size: 14px;
}

.form-control,
.custom-select {
    font-family: var(--rs-font);
    font-size: 14px;
    color: var(--rs-text);
    border: 1px solid var(--rs-border-strong);
    border-radius: var(--rs-radius-sm);
    padding: 0.55rem 0.8rem;
    height: auto;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-control:focus,
    .custom-select:focus {
        border-color: var(--rs-accent);
        box-shadow: 0 0 0 3px var(--rs-accent-ring);
    }

    .form-control::placeholder {
        color: var(--rs-text-faint);
    }

.input-group-text {
    background: var(--rs-surface-muted);
    border: 1px solid var(--rs-border-strong);
    color: var(--rs-text-faint);
    border-radius: var(--rs-radius-sm);
}

.help-block, .help-block small {
    color: var(--rs-text-faint);
    font-size: 12.5px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--rs-accent);
    border-color: var(--rs-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--rs-accent-ring);
}

.custom-control-label::before {
    border: 1px solid var(--rs-border-strong);
    border-radius: 4px;
}

.text-danger {
    color: var(--rs-danger) !important;
}

/* -----------------------------------------------------------------------------
   Dropdowns, modals, alerts, tooltips
   ----------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    box-shadow: var(--rs-shadow);
    padding: 6px;
    font-size: 14px;
    animation: rs-fade-in 0.12s ease-out;
}

.dropdown-item,
button.dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    white-space: nowrap;
    border-radius: var(--rs-radius-sm);
    padding: 8px 10px;
    color: var(--rs-text);
    font-weight: 500;
    font-family: var(--rs-font);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .dropdown-item i, .dropdown-item span.mdi {
        color: var(--rs-text-faint);
        font-size: 16px;
    }

    .dropdown-item:hover, .dropdown-item:focus {
        background: var(--rs-surface-muted);
        color: var(--rs-text);
    }

.dropdown-divider {
    border-top-color: var(--rs-border);
    margin: 6px 0;
}

/* a neutral button that has its menu open stays neutral (the template paints it dark) */
.show > .btn-secondary.dropdown-toggle,
.show > .btn-dark.dropdown-toggle,
.show > .btn-light.dropdown-toggle,
.btn-secondary.dropdown-toggle:focus,
.btn-dark.dropdown-toggle:focus {
    background-color: var(--rs-surface-muted) !important;
    border-color: var(--rs-border-strong) !important;
    color: var(--rs-text) !important;
    box-shadow: none !important;
}

.rs-page-actions .dropdown-menu {
    margin-top: 4px;
}

/* the template forces every menu's top to 100%, which Popper's transform then adds to
   again: a menu Popper has placed is positioned by its transform alone */
.dropdown-menu[x-placement] {
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
}

.profile-dropdown .notify-item {
    padding: 8px 10px;
}

/* dialogs sit a little lower than Bootstrap's default so they read as centred on tall screens.
   Scrollable dialogs are excluded: their height is tied to the viewport and an extra top margin
   would push the footer off screen. */
.modal-dialog:not(.modal-dialog-centered):not(.modal-dialog-scrollable) {
    margin-top: 8vh;
}

.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

.modal-content {
    border: 0;
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--rs-border);
    padding: 16px 22px;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-header .close {
    color: var(--rs-text-faint);
    text-shadow: none;
    opacity: 1;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
}

    .modal-header .close:hover {
        color: var(--rs-text);
    }

.modal-body {
    padding: 20px 22px;
}

.modal-footer {
    border-top: 1px solid var(--rs-border);
    padding: 14px 22px;
    gap: 8px;
}

    .modal-footer > * {
        margin: 0;
    }

.modal-backdrop.show {
    opacity: 0.4;
}

.alert {
    border-radius: var(--rs-radius-sm);
    border: 1px solid transparent;
    font-size: 14px;
}

.alert-danger {
    background: var(--rs-danger-soft);
    border-color: #fecaca;
    color: var(--rs-danger);
}

.alert-success {
    background: var(--rs-success-soft);
    border-color: #bbf7d0;
    color: var(--rs-success);
}

.alert-info {
    background: var(--rs-info-soft);
    border-color: #bfdbfe;
    color: var(--rs-info);
}

.tooltip-inner {
    border-radius: var(--rs-radius-sm);
    font-size: 12px;
    padding: 5px 9px;
    background: var(--rs-text);
}

/* loader */
#loaderModal .modal-content {
    border-radius: var(--rs-radius-lg);
}

.text-custom, .spinner-border.text-custom {
    color: var(--rs-accent) !important;
}

#toast-container > div {
    border-radius: var(--rs-radius);
    box-shadow: var(--rs-shadow-lg);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Record page: signatory and document cards built by the page script
   ----------------------------------------------------------------------------- */
.signatoryCard,
#documentsDiv > .card,
#documentsDiv .card.card-body {
    border: 1px solid var(--rs-border) !important;
    border-radius: var(--rs-radius) !important;
    box-shadow: none;
    margin-bottom: 10px !important;
    padding: 10px 14px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .signatoryCard:hover,
    #documentsDiv > .card:hover {
        border-color: var(--rs-border-strong) !important;
        box-shadow: var(--rs-shadow-sm);
    }

    .signatoryCard .card-body,
    #documentsDiv > .card .card-body {
        padding: 0 !important;
    }

    .signatoryCard .header-title {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
        line-height: 1.4;
    }

        .signatoryCard .header-title > span {
            color: var(--rs-text-muted) !important;
            font-weight: 400;
        }

    .signatoryCard .sub-header {
        font-size: 13px;
        color: var(--rs-text-muted);
        margin: 2px 0 0;
    }

    .signatoryCard .col-form-label,
    #documentsDiv .col-form-label {
        padding: 0;
        font-weight: 500;
    }

/* name on the left, actions on the right, both vertically centred (the script floats the
   buttons; flex with reversed order keeps their previous visual order) */
.signatoryCard .row,
#documentsDiv > .card .row {
    align-items: center;
}

    #documentsDiv > .card .row > .col-md-4,
    .signatoryCard .row > .col-2 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        margin-top: 0 !important;
    }

        #documentsDiv > .card .row > .col-md-4 .btn,
        .signatoryCard .row > .col-2 .btn,
        .signatoryCard .row > .col-2 .rs-signed-mark {
            float: none !important;
            margin: 0 !important;
        }

#documentsDiv > .card .col-form-label,
#documentsDiv > .card .custom-control {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

#documentsDiv > .card .custom-control-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* a person row: avatar, name with role and type, contact details */
.rs-person {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.rs-avatar-sm {
    width: 38px;
    height: 38px;
    font-size: 13px;
    flex: 0 0 auto;
}

.rs-person-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rs-person-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rs-text);
    line-height: 1.3;
}

.rs-person-role {
    color: var(--rs-text-muted);
    font-weight: 400;
}

    .rs-person-role::before {
        content: "\00b7";
        margin-right: 8px;
        color: var(--rs-text-faint);
    }

.rs-person-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 13px;
    color: var(--rs-text-muted);
    font-weight: 400;
}

    .rs-person-contact i {
        margin-right: 5px;
        color: var(--rs-text-faint);
        font-size: 15px;
        vertical-align: -1px;
    }

.rs-person-check {
    padding-left: 30px;
    min-height: 0;
}

    .rs-person-check .custom-control-label {
        display: block;
        padding: 0;
    }

        .rs-person-check .custom-control-label::before,
        .rs-person-check .custom-control-label::after {
            top: 50%;
            transform: translateY(-50%);
            left: -30px;
        }

/* drag handle at the left of an editable signatory row */
.rs-signatory-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .rs-signatory-main > .custom-control,
    .rs-signatory-main > .col-form-label {
        flex: 1 1 auto;
        min-width: 0;
    }

.rs-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    margin-left: -6px;
    color: var(--rs-text-faint);
    font-size: 22px;
    cursor: grab;
    border-radius: var(--rs-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .signatoryCard:hover .rs-drag-handle {
        color: var(--rs-text-muted);
    }

    .rs-drag-handle:active {
        cursor: grabbing;
    }

.ui-sortable-helper.signatoryCard {
    box-shadow: var(--rs-shadow-lg) !important;
    border-color: var(--rs-accent) !important;
}

/* small uppercase tag for a classification (signatory, approver) */
.rs-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--rs-info-soft);
    color: var(--rs-info);
}

.rs-tag-dark {
    background: var(--rs-neutral-soft);
    color: var(--rs-neutral);
}

.rs-tag-warn {
    background: var(--rs-warning-soft);
    color: var(--rs-warning);
}

.rs-tag-ok {
    background: var(--rs-success-soft);
    color: var(--rs-success);
}

.rs-tag i {
    margin-right: 4px;
    font-size: 13px;
    vertical-align: -1px;
}

/* files section: room around the uploader and the selection toolbar, taller rows */
#filesCard .fileuploader-container {
    padding: 14px 16px;
    margin-bottom: 18px !important;
}

#filesCard .card-body > .container-fluid > .row > .col-md-12.mb-1 {
    margin-bottom: 14px !important;
}

#filesCard .btn-group,
#signatoriesCard .btn-group {
    display: flex;
    gap: 8px;
}

    #filesCard .btn-group > div,
    #signatoriesCard .btn-group > div {
        margin: 0 !important;
    }

#documentsDiv > .card {
    padding: 14px 18px !important;
}

.rs-file-icon {
    font-size: 22px;
    color: var(--rs-text-faint);
    margin-right: 10px;
    line-height: 1;
}

.rs-file-name {
    font-weight: 500;
    font-size: 14.5px;
    margin-right: 12px;
}

#documentsDiv > .card .custom-control-label::before,
#documentsDiv > .card .custom-control-label::after {
    top: 50%;
    transform: translateY(-50%);
}

/* send-for-signing row: the reason it is not yet possible sits beside the button */
.rs-send-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 4px;
}

.rs-send-row {
    align-items: flex-start;
}

/* readiness checklist: ticks fill in as the record is completed */
.rs-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--rs-text-muted);
    flex: 1 1 auto;
    min-width: 0;
}

    .rs-checklist li {
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.4;
        transition: color 0.2s ease;
    }

        .rs-checklist li i {
            font-size: 18px;
            line-height: 1;
            color: var(--rs-border-strong);
            transition: color 0.2s ease, transform 0.2s ease;
        }

    .rs-checklist .rs-check-done {
        color: var(--rs-text);
    }

        .rs-checklist .rs-check-done i {
            color: var(--rs-success);
        }

    .rs-checklist .rs-check-todo {
        color: var(--rs-text-muted);
    }

    .rs-checklist.rs-checklist-ready {
        color: var(--rs-success);
    }

        .rs-checklist.rs-checklist-ready li {
            color: var(--rs-success);
        }

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

.card-draggable {
    cursor: grab;
}

.rs-signed-mark {
    color: var(--rs-success);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.signatoryCard .btn-xs, #documentsDiv .btn-xs {
    margin-top: 2px;
}

.skeleton-card {
    border-color: var(--rs-border) !important;
    border-radius: var(--rs-radius) !important;
}

.fileuploader-container {
    border: 1px dashed var(--rs-border-strong) !important;
    border-radius: var(--rs-radius);
    background: var(--rs-surface-muted);
}

/* -----------------------------------------------------------------------------
   Document configuration dialog: tag menus (Signature / Initials / Date signed)
   ----------------------------------------------------------------------------- */
#docConfigNav .navigation-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

    #docConfigNav .navigation-menu > li {
        position: relative;
        float: none;
    }

        #docConfigNav .navigation-menu > li > a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px !important;
            border-radius: var(--rs-radius-sm);
            color: var(--rs-text-muted) !important;
            font-weight: 500;
            font-size: 14px;
            line-height: 1.3 !important;
            text-decoration: none;
            transition: background-color 0.15s ease, color 0.15s ease;
        }

            #docConfigNav .navigation-menu > li > a i {
                font-size: 18px;
                color: var(--rs-text-faint);
                margin: 0;
                transition: color 0.15s ease;
            }

        #docConfigNav .navigation-menu > li:hover > a,
        #docConfigNav .navigation-menu > li.active > a,
        #docConfigNav .navigation-menu > li > a:focus {
            background-color: var(--rs-accent-soft);
            color: var(--rs-accent-hover) !important;
        }

            #docConfigNav .navigation-menu > li:hover > a i {
                color: var(--rs-accent);
            }

        /* the template's css-triangle becomes a small chevron */
        #docConfigNav .navigation-menu .arrow-down {
            display: inline-block;
            width: 7px;
            height: 7px;
            margin: 0 0 3px 2px;
            border: 0;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg);
            opacity: 0.7;
        }

    #docConfigNav .navigation-menu .submenu {
        top: calc(100% + 4px);
        left: 0;
        min-width: 240px;
        margin: 0;
        padding: 6px !important;
        background: var(--rs-surface);
        border: 1px solid var(--rs-border) !important;
        border-radius: var(--rs-radius) !important;
        box-shadow: var(--rs-shadow);
        list-style: none;
    }

        #docConfigNav .navigation-menu .submenu > li {
            padding: 0;
        }

            #docConfigNav .navigation-menu .submenu > li > a {
                display: block;
                padding: 8px 10px !important;
                border-radius: var(--rs-radius-sm);
                color: var(--rs-text) !important;
                font-size: 14px;
                font-weight: 500;
                line-height: 1.4;
                cursor: pointer;
                text-decoration: none;
                transition: background-color 0.12s ease;
            }

                #docConfigNav .navigation-menu .submenu > li > a:hover,
                #docConfigNav .navigation-menu .submenu > li > a:focus {
                    background-color: var(--rs-surface-muted);
                    color: var(--rs-text) !important;
                }

/* signature, initials and date tags on the page */
.draggableSignDIV,
.draggableInitialsDIV,
.draggableDateDIV {
    cursor: grab;
}

    .draggableSignDIV.rs-carrying,
    .draggableInitialsDIV.rs-carrying,
    .draggableDateDIV.rs-carrying {
        pointer-events: none; /* while carried, the page beneath must receive the mouse */
        opacity: 0.9;
    }

.ui-draggable-dragging {
    cursor: grabbing !important;
}

.tagClosebtn {
    cursor: pointer;
}

#docConfigModal .modal-header {
    display: block;
    padding: 16px 22px 10px;
}

#docConfigModal .modal-header .container-fluid {
    padding: 0;
}

/* -----------------------------------------------------------------------------
   Contact page: offices on the left, call-back form on the right
   ----------------------------------------------------------------------------- */
.rs-contact {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: start;
}

    .rs-contact.rs-contact-single {
        grid-template-columns: minmax(0, 720px);
    }

.rs-contact-offices {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rs-office {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rs-office-city {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
}

    .rs-office-city i {
        color: var(--rs-accent);
        font-size: 18px;
    }

.rs-office-address {
    margin: 0;
    color: var(--rs-text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.rs-office-person {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rs-office-name {
    font-weight: 600;
}

.rs-office-role {
    color: var(--rs-text-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.rs-office-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
}

    .rs-office-links a {
        color: var(--rs-text);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .rs-office-links a i {
            color: var(--rs-text-faint);
            font-size: 15px;
        }

        .rs-office-links a:hover {
            color: var(--rs-accent-hover);
        }

.rs-contact-form {
    margin-bottom: 0;
}

.rs-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
}

    .rs-form-grid .form-group {
        margin-bottom: 14px;
    }

    .rs-form-grid .rs-form-full {
        grid-column: 1 / -1;
    }

.rs-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.rs-contact-done {
    max-width: 520px;
    margin: 48px auto;
    text-align: center;
}

.rs-contact-done-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--rs-success-soft);
    color: var(--rs-success);
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-contact-done-actions {
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .rs-contact {
        grid-template-columns: 1fr;
    }

    .rs-form-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------------
   Authentication pages
   ----------------------------------------------------------------------------- */
body.authentication-bg {
    background: radial-gradient(1200px 600px at 10% -10%, #fff1dc 0%, rgba(255, 241, 220, 0) 60%), radial-gradient(900px 500px at 100% 100%, #e8eef8 0%, rgba(232, 238, 248, 0) 60%), var(--rs-bg);
    min-height: 100vh;
    padding-bottom: 0;
}

/* the page is a column: the sign-in area takes the space left above the contact strip, so
   the strip stays on screen whenever the viewport is tall enough and the card is centred
   in whatever remains */
body.authentication-bg #wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: var(--rs-topbar-height);
}

.rs-auth {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.rs-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow);
    padding: 36px 36px 32px;
}

.rs-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

    .rs-auth-brand img {
        height: 44px;
    }

.rs-auth-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.rs-auth-subtitle {
    color: var(--rs-text-muted);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

.rs-auth-card .form-control {
    padding: 0.65rem 0.9rem;
}

.rs-auth-card .input-group-text {
    padding-left: 14px;
    padding-right: 14px;
}

.rs-auth-card .btn-block {
    padding: 0.7rem 1rem;
    font-size: 15px;
}

.rs-auth-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--rs-text-muted);
}

    .rs-auth-footer a {
        color: var(--rs-text-muted);
        font-weight: 500;
    }

        .rs-auth-footer a:hover {
            color: var(--rs-accent-hover);
        }

/* -----------------------------------------------------------------------------
   Landing page
   ----------------------------------------------------------------------------- */
.rs-landing {
    padding-top: 8px;
    padding-bottom: 24px;
}

.rs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 32px;
    align-items: start;
}

.rs-hero-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.rs-hero-lead {
    font-size: 16px;
    color: var(--rs-text-muted);
    max-width: 48ch;
    margin: 0 0 20px;
}

.rs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.rs-hero-media {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
}

.rs-how {
    margin-bottom: 0;
}

    .rs-how .card-body {
        display: flex;
        justify-content: center;
    }

    .rs-how img {
        max-width: 100%;
        height: auto;
    }

@media (max-width: 992px) {
    .rs-hero {
        grid-template-columns: 1fr;
    }

    .rs-hero-title {
        font-size: 28px;
    }
}

/* -----------------------------------------------------------------------------
   Get started page: numbered steps with option cards
   ----------------------------------------------------------------------------- */
.rs-intro {
    max-width: 720px;
    margin-bottom: 36px;
}

.rs-step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.rs-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rs-accent-soft);
    color: var(--rs-accent-hover);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-step-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 8px 0 4px;
}

.rs-step-lead {
    color: var(--rs-text-muted);
    margin: 0 0 18px;
    max-width: 64ch;
}

.rs-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.rs-option {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .rs-option:hover {
        border-color: var(--rs-border-strong);
        box-shadow: var(--rs-shadow-sm);
    }

    .rs-option .mdi {
        font-size: 24px;
        color: var(--rs-accent);
        line-height: 1;
    }

    .rs-option h3 {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
    }

    .rs-option p {
        color: var(--rs-text-muted);
        font-size: 13.5px;
        line-height: 1.6;
        margin: 0;
    }

    .rs-option .rs-option-tag {
        align-self: flex-start;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rs-accent-hover);
        background: var(--rs-accent-soft);
        border-radius: 999px;
        padding: 3px 9px;
    }

.rs-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: center;
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-lg);
    padding: 28px 32px;
}

    .rs-cta p {
        color: var(--rs-text-muted);
        margin: 0 0 12px;
    }

    .rs-cta img {
        width: 100%;
        max-width: 260px;
        height: auto;
        justify-self: center;
    }

@media (max-width: 768px) {
    .rs-step {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rs-cta {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------------
   Document signing page
   ----------------------------------------------------------------------------- */
.pageDIV {
    border: 1px solid var(--rs-border) !important;
    border-radius: 4px;
    box-shadow: var(--rs-shadow-sm);
    background: #fff;
}

/* -----------------------------------------------------------------------------
   Signing page (the signatory's view)
   ----------------------------------------------------------------------------- */
.rs-sign-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-bottom: 4px;
}

.rs-sign-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

    .rs-sign-card .card-body {
        flex: 1 1 auto;
    }

.rs-sign-files {
    max-height: 420px;
    overflow-y: auto;
}

    .rs-sign-files > .container {
        padding: 0;
        max-width: none;
    }

.rs-sign-file {
    border: 1px solid var(--rs-border) !important;
    border-radius: var(--rs-radius) !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    box-shadow: none;
}

    .rs-sign-file:hover {
        border-color: var(--rs-border-strong) !important;
        box-shadow: var(--rs-shadow-sm);
    }

.rs-sign-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rs-sign-file-name {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 14.5px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rs-sign-file-actions {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* tick that fills in once the file has been opened in the preview */
.rs-file-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    font-size: 20px;
    line-height: 1;
    color: var(--rs-border-strong);
    flex: 0 0 auto;
    transition: color 0.2s ease;
}

    .rs-file-check.rs-file-check-done {
        color: var(--rs-success);
    }

.rs-sign-progress {
    display: inline-block;
    margin-left: 6px;
    color: var(--rs-text-faint);
}

    .rs-sign-progress.rs-progress-done {
        color: var(--rs-success);
    }

    .rs-sign-progress:empty {
        display: none;
    }

.rs-sign-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
}

.rs-sign-hint {
    color: var(--rs-text-muted);
    font-size: 13.5px;
}

    .rs-sign-hint i {
        color: var(--rs-accent);
        font-size: 16px;
        vertical-align: -2px;
    }

.rs-sign-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .rs-sign-grid {
        grid-template-columns: 1fr;
    }

    .rs-sign-files {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .rs-sign-buttons {
        width: 100%;
    }

        .rs-sign-buttons .btn {
            flex: 1 1 auto;
        }

    /* the name wraps under the avatar on narrow rows; no separator dot needed then */
    .rs-person-role::before {
        content: none;
    }
}

/* preview dialog on the signing page: summary bar and on-page markers */
.rs-sign-summary-host {
    margin-top: 10px;
}

.rs-sign-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--rs-radius);
    background: var(--rs-accent-soft);
    color: var(--rs-text);
    font-size: 14px;
}

    .rs-sign-summary.rs-sign-summary-plain {
        background: var(--rs-surface-muted);
        color: var(--rs-text-muted);
    }

.rs-sign-summary-text {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .rs-sign-summary-text i {
        color: var(--rs-accent);
        font-size: 20px;
        flex: 0 0 auto;
    }

    .rs-sign-summary-plain .rs-sign-summary-text i {
        color: var(--rs-text-faint);
    }

.rs-sign-summary-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rs-sign-guide-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--rs-text-muted);
    min-width: 44px;
    text-align: center;
}

    .rs-sign-guide-count:empty {
        display: none;
    }

.rs-sign-summary-main {
    display: block;
    font-weight: 500;
}

.rs-sign-summary-note {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--rs-text-muted);
}

.rs-marker {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--rs-accent);
    border-radius: 6px;
    background: rgba(245, 147, 0, 0.12);
    pointer-events: none;
    z-index: 5;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.rs-marker-label {
    position: absolute;
    top: -11px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rs-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

    .rs-marker-label i {
        font-size: 13px;
    }

.rs-marker-initial {
    border-color: var(--rs-info);
    background: rgba(29, 78, 216, 0.1);
}

    .rs-marker-initial .rs-marker-label {
        background: var(--rs-info);
    }

.rs-marker-date {
    border-color: var(--rs-neutral);
    background: rgba(55, 65, 81, 0.08);
}

    .rs-marker-date .rs-marker-label {
        background: var(--rs-neutral);
    }

.rs-marker-active {
    box-shadow: 0 0 0 4px var(--rs-accent-ring);
    animation: rs-marker-pulse 1.2s ease-out 2;
}

@keyframes rs-marker-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 147, 0, 0.55);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(245, 147, 0, 0);
    }
}

/* consent dialog: the legal text is the checkbox's label, inside a panel that lights up when ticked */
.rs-modal-title-icon {
    color: var(--rs-accent);
    font-size: 20px;
    vertical-align: -2px;
    margin-right: 2px;
}

.rs-modal-title-icon-danger {
    color: var(--rs-danger);
}

/* the sign and reject dialogs are wide enough for a paragraph and a comfortable text area */
#signConfirmModalDialog.modal-lg,
#signRejectModalDialog.modal-lg {
    max-width: 640px;
}

/* a form wrapped around .modal-content is the flex item of a centred dialog and would
   otherwise shrink to its content */
.modal-dialog > form {
    width: 100%;
}

.rs-modal-lead {
    font-size: 14.5px;
    margin: 0 0 14px;
}

.rs-consent {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    background: var(--rs-surface-muted);
    cursor: pointer;
    font-weight: 400;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .rs-consent:hover {
        border-color: var(--rs-border-strong);
    }

    .rs-consent:has(.rs-consent-check:checked) {
        border-color: #86efac;
        background: #f0fdf4;
    }

    .rs-consent:has(.rs-consent-check:focus-visible) {
        box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2);
    }

.rs-consent-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--rs-success);
    cursor: pointer;
}

.rs-consent-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--rs-text);
}

    .rs-consent-text ul {
        margin: 8px 0 0;
        padding-left: 18px;
    }

    .rs-consent-text li {
        margin-bottom: 6px;
        color: var(--rs-text-muted);
    }

        .rs-consent-text li:last-child {
            margin-bottom: 0;
        }

.modal-footer .rs-footer-error {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    order: -1;
}

    .modal-footer .rs-footer-error:empty {
        display: none;
    }

/* preview dialog: zoom controls, phone layout */
.rs-preview-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .rs-preview-bar .modal-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rs-preview-bar .close {
        margin: 0;
        padding: 0 0 0 4px;
    }

.rs-zoom {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rs-border-strong);
    border-radius: var(--rs-radius-sm);
    overflow: hidden;
    background: var(--rs-surface);
}

    .rs-zoom button {
        border: 0;
        background: transparent;
        color: var(--rs-text-muted);
        padding: 5px 10px;
        font-size: 14px;
        line-height: 1.2;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
    }

        .rs-zoom button:hover {
            background: var(--rs-surface-muted);
            color: var(--rs-text);
        }

        .rs-zoom button + button {
            border-left: 1px solid var(--rs-border);
        }

    .rs-zoom #docZoomLevel {
        min-width: 50px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--rs-text);
        border-left: 1px solid var(--rs-border);
        border-right: 1px solid var(--rs-border);
        padding: 5px 4px;
    }

/* pages fade in once fitted; before that they are laid out but invisible */
#docConfigModal.rs-sign-preview #docContentDIV {
    transition: opacity 0.2s ease;
}

    #docConfigModal.rs-sign-preview #docContentDIV.rs-doc-pending {
        opacity: 0;
    }

#docConfigModal.rs-sign-preview #docConfigModalContent {
    touch-action: pan-x pan-y; /* one finger scrolls; two-finger pinch is handled by the page script */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    /* below desktop width the signing preview uses the whole width (its own max-width,
       set from the page size, still caps it) */
    #docConfigModal.rs-sign-preview .modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }
}

@media (max-width: 768px) {
    /* the preview takes the whole screen on a phone */
    #docConfigModal.rs-sign-preview .modal-dialog {
        max-width: 100% !important;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #docConfigModal.rs-sign-preview .modal-content {
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    #docConfigModal.rs-sign-preview .modal-header {
        padding: 12px 14px 8px;
    }

    #docConfigModal.rs-sign-preview #docConfigModalContent {
        padding: 12px;
    }

    .rs-zoom-fit-text {
        display: none;
    }

    .rs-sign-summary {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* outcome dialog after signing, approving or rejecting */
.rs-outcome {
    text-align: center;
    padding: 32px 28px 8px;
}

.rs-outcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--rs-success-soft);
    color: var(--rs-success);
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-outcome-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.rs-outcome-text {
    color: var(--rs-text-muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

.rs-outcome-footer {
    justify-content: center;
    border-top: 0;
    padding-bottom: 28px;
}

/* -----------------------------------------------------------------------------
   Utilities and motion
   ----------------------------------------------------------------------------- */
.rs-muted {
    color: var(--rs-text-muted);
}

.rs-divider {
    width: 1px;
    height: 22px;
    background: var(--rs-border);
    margin: 0 4px;
}

/* opacity only: dropdown menus are positioned with a transform, which an animated
   transform would override while it runs */
@keyframes rs-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* page header: the close button stays top-right on the title's line; any other
       actions flow below the title at full width */
    .rs-page-header {
        padding-right: 48px;
    }

        .rs-page-header .rs-page-actions {
            width: 100%;
            justify-content: flex-start;
            margin-left: 0;
        }

            .rs-page-header .rs-page-actions:empty,
            .rs-page-header .rs-page-actions:not(:has(:not(.rs-btn-icon))) {
                display: contents; /* only the close button: no empty row is left behind */
            }

            .rs-page-header .rs-page-actions .rs-btn-icon {
                position: absolute;
                top: 0;
                right: 0;
            }

    /* file and signatory rows: details on one line, actions on their own line below */
    #documentsDiv > .card .row > .col-md-8,
    .signatoryCard .row > .rs-signatory-main {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #documentsDiv > .card .row > .col-md-4,
    .signatoryCard .row > .col-2 {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: flex-end; /* with row-reverse this packs the buttons to the left, same order as on desktop */
        flex-wrap: wrap;
        margin-top: 10px !important;
        padding-left: 46px; /* lines up under the name, past the checkbox */
    }

    #documentsDiv > .card .row > .col-md-4 .btn,
    .signatoryCard .row > .col-2 .btn {
        padding: 0.4rem 0.7rem;
    }

    .rs-file-name {
        overflow-wrap: anywhere;
        margin-right: 0;
    }

    #documentsDiv > .card .custom-control-label,
    #documentsDiv > .card .col-form-label {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .signatoryCard .row > .col-2 .rs-signed-mark {
        margin-left: 0 !important;
    }

    /* top bar: logo and menu button on the left, icon-only links and the user menu on the right */
    body .navbar-custom {
        display: flex;
        align-items: center;
        padding: 0 8px 0 0;
    }

        body .navbar-custom .logo-box {
            order: 1;
            min-width: 0;
            padding-left: 12px;
            flex: 0 0 auto;
        }

        body .navbar-custom .topnav-menu-left {
            order: 2;
            flex: 1 1 auto;
        }

        body .navbar-custom .topnav-menu.float-right {
            order: 3;
            float: none !important;
            display: flex;
            align-items: center;
        }

        body .navbar-custom .topnav-menu .nav-link {
            padding: 0 8px;
        }

            body .navbar-custom .topnav-menu .nav-link .noti-icon {
                margin-right: 0;
                font-size: 20px;
            }

        body .navbar-custom .rs-nav-text,
        body .navbar-custom .pro-user-name {
            display: none;
        }

        /* signed-out links (Get Started, Contact Us, Login) stay on one line each */
        body .navbar-custom .topnav-menu .nav-item .nav-link {
            white-space: nowrap;
            font-size: 13px;
            padding: 0 7px;
        }

        body .navbar-custom .button-menu-mobile {
            width: 44px;
        }

    .rs-logo-text {
        font-size: 18px;
    }

    .content-page > .content {
        padding-left: 4px;
        padding-right: 4px;
    }

    .rs-page-header {
        align-items: flex-start;
    }

    .dataTables_filter input {
        width: 100%;
    }

    .rs-auth-card {
        padding: 28px 22px;
    }

}