/* Tabler.io Inspired Theme - Clean & Professional Admin Styles */

:root {
    --primary-color: #206bc4; /* Tabler Blue */
    --primary-hover: #1a569d;
    --accent-color: #307fe2;
    --accent-hover: #1e62c0;
    --bg-color: #f6f8fb;
    --card-bg: #ffffff;
    --text-dark: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e6e8eb;
    --border-radius: 4px;
    --shadow-sm: rgba(35, 46, 60, 0.04) 0 2px 4px 0;
    --shadow-md: rgba(35, 46, 60, 0.08) 0 4px 8px 0;
    --shadow-lg: rgba(35, 46, 60, 0.12) 0 8px 16px 0;
}

html {
    position: relative;
    min-height: 100vh;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    font-size: 0.875rem;
    line-height: 1.4285714;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-bottom: 0 !important;
}

.main-content-wrapper {
    flex: 1 0 auto;
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tabler style Navbar */
.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(4, 32, 69, 0.07) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: none !important;
}

.navbar-brand {
    font-weight: 600;
}

.nav-link {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem !important;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* Title and typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.02em;
}

h1 { font-size: 1.75rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }

/* Flat clean buttons */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    padding: 0.4375rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* Form inputs styling */
.form-control, .form-select {
    border-radius: var(--border-radius);
    padding: 0.4375rem 0.75rem;
    border: 1px solid #d9dbde;
    background-color: #ffffff;
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: #90bbf0;
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
    background-color: #ffffff;
}

.form-control.border-bottom-only {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding-left: 0;
    background-color: transparent;
}

.form-control.border-bottom-only:focus {
    border-bottom-color: var(--primary-color);
    box-shadow: none;
    background-color: transparent;
}

/* Customizable checkboxes card selectables (Create Form) */
.form-check.custom-card-check {
    border: 1px solid #d9dbde;
    border-radius: var(--border-radius);
    padding: 0.75rem 0.75rem 0.75rem 2.75rem;
    margin-bottom: 0.75rem;
    background-color: #ffffff;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    position: relative;
    box-shadow: none;
}

.form-check.custom-card-check:hover {
    border-color: #b3b6ba;
    transform: none;
    box-shadow: none;
}

.form-check.custom-card-check:has(.form-check-input:checked) {
    background-color: #f1f7fe;
    border-color: var(--primary-color);
    box-shadow: none;
}

.form-check.custom-card-check .form-check-input {
    position: absolute;
    left: 1rem;
    top: 0.9rem;
    width: 1.15em;
    height: 1.15em;
    margin-top: 0;
}

/* Standard checkboxes styling */
.form-check-input {
    border: 1px solid #d9dbde;
    border-radius: 3px;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Flat Card Panels */
.card {
    border: 1px solid rgba(4, 32, 69, 0.1);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius) !important;
    background-color: #ffffff;
    transition: box-shadow 0.15s ease;
    margin-bottom: 1.25rem;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(4, 32, 69, 0.1);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
}

/* Tables styling */
.table {
    border-color: #e6e8eb;
    font-size: 0.875rem;
}

.table th {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.75rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e6e8eb;
}

.table td {
    padding: 0.75rem 0.75rem;
    vertical-align: middle;
}

/* Signature Drawing Canvas */
.signature-container {
    border: 1px dashed #cbd5e1 !important;
    border-radius: var(--border-radius);
    background-color: #f8fafc;
    transition: border-color 0.15s ease;
}

.signature-container:hover {
    border-color: var(--primary-color) !important;
}

#sigCanvas {
    background-color: #ffffff;
    display: block;
}

/* Badge highlights */
.bg-primary-light {
    background-color: rgba(32, 107, 196, 0.1) !important;
    color: var(--primary-color) !important;
}
.bg-warning-light {
    background-color: rgba(245, 150, 0, 0.1) !important;
    color: #f59600 !important;
}
.bg-success-light {
    background-color: rgba(47, 179, 72, 0.1) !important;
    color: #2fb348 !important;
}
.bg-danger-light {
    background-color: rgba(214, 57, 57, 0.1) !important;
    color: #d63939 !important;
}

.text-warning-dark {
    color: #d68200 !important;
}

/* Custom list-style margins */
.mb-3.5 {
    margin-bottom: 1rem !important;
}

/* Active navigation tab highlight */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--primary-color);
    color: white !important;
    box-shadow: none;
}

.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: all 0.15s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    color: var(--primary-color);
    background-color: rgba(32, 107, 196, 0.06);
}

/* Tabler style footer - push to bottom naturally without overlap */
.footer {
    position: static !important;
    margin-top: auto !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    padding: 1.5rem 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid var(--border-color) !important;
    font-size: 0.85rem;
}

/* ==========================================================================
   Centralized Login Page Layout Overrides (Tabler.io Sign-In style)
   ========================================================================== */
/* Hide the default h1 that appears outside the row */
body:has(form#account) h1:not(form h1) {
    display: none !important;
}

body:has(form#account) {
    background-color: var(--bg-color) !important;
}

.row:has(form#account) {
    max-width: 450px;
    margin: 4rem auto !important;
}



.row:has(form#account) > div:nth-child(2) {
    display: none !important; /* Hide external provider col */
}

.row:has(form#account) > div:first-child {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

form#account {
    background-color: #ffffff;
    padding: 2.25rem 2rem !important;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(4, 32, 69, 0.1);
    position: relative;
    overflow: hidden;
}

form#account::after {
    display: none !important; /* Remove decorative line */
}

form#account h2 {
    display: none !important; /* Hide standard subtitle */
}

/* Tabler style title inside the card */
form#account::before {
    content: "Login to your account";
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    margin-bottom: 1.5rem;
}

form#account .form-floating {
    margin-bottom: 1.25rem;
    position: relative;
}

form#account .form-floating input {
    border-radius: var(--border-radius);
    border: 1px solid #d9dbde;
    padding: 1.25rem 0.75rem 0.35rem 0.75rem;
    height: 50px;
    font-size: 0.875rem;
}

form#account .form-floating label {
    padding: 0.75rem;
    font-size: 0.875rem;
}

form#account #login-submit {
    width: 100% !important;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    padding: 0.55rem;
    font-weight: 500;
    border-radius: var(--border-radius);
    color: white;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.15s ease-in-out;
}

form#account #login-submit:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Format the helper links below form */
.row:has(form#account) p {
    text-align: center;
    margin-bottom: 0.5rem;
}

.row:has(form#account) p a {
    color: var(--primary-color);
    font-size: 0.825rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.row:has(form#account) p a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Hide register and resend confirmation links in login card */
.row:has(form#account) p:has(a[href*="Register"]),
.row:has(form#account) a[href*="Register"],
.row:has(form#account) p:has(a[href*="Resend"]),
.row:has(form#account) a[href*="Resend"] {
    display: none !important;
}

/* ==========================================================================
   Print Styles (Transform layouts exactly to physical paperwork)
   ========================================================================== */
.print-only {
    display: none;
}

@media print {
    body {
        background-color: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        font-family: "Times New Roman", Georgia, serif !important;
        font-size: 11pt !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .no-print, header, footer, .navbar, .btn, #clearBtn, .alert, .modal, .modal-backdrop {
        display: none !important;
    }
    
    .container, .printable-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .printable-form {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .print-header {
        margin-bottom: 20px !important;
    }
    
    .print-header h5 {
        font-family: "Times New Roman", Georgia, serif !important;
        font-size: 14pt !important;
        font-weight: bold !important;
        text-transform: uppercase;
        margin-bottom: 2px !important;
    }
    
    .print-table {
        border: 1px solid #000000 !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    .print-table th, .print-table td {
        border: 1px solid #000000 !important;
        padding: 6px 12px !important;
        font-size: 10pt !important;
    }
    
    .print-table th {
        background-color: #f2f2f2 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-checkbox {
        width: 16px !important;
        height: 16px !important;
        border: 1px solid #000000 !important;
        display: inline-block !important;
        margin-right: 10px !important;
        line-height: 13px !important;
        font-size: 12pt !important;
        font-weight: bold !important;
        text-align: center !important;
        background: transparent !important;
        flex-shrink: 0;
    }

    hr {
        border-top: 1px solid #000000 !important;
        margin: 15px 0 !important;
        opacity: 1 !important;
    }
    
    .font-sm {
        font-size: 10pt !important;
    }
    
    .font-xs {
        font-size: 9.5pt !important;
    }
    
    .text-muted {
        color: #555555 !important;
    }

    .border-bottom.border-dark {
        border-bottom: 1px solid #000000 !important;
        min-height: 24px !important;
        display: inline-block !important;
    }
    
    .signature-box {
        border-bottom: 1px solid #000000 !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .signature-box img {
        max-height: 50px !important;
    }
    
    .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .col-4 {
        width: 33.33% !important;
        float: left !important;
        box-sizing: border-box !important;
    }

    .print-only {
        display: block !important;
    }
    
    .print-hide {
        display: none !important;
    }
}

/* DocuSign Bracket Preview Styling */
.docusign-bracket-preview {
    position: relative;
    padding: 24px 16px 24px 28px;
    margin: 0;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ffffff;
    border-radius: 4px 4px 0 0;
}

/* Bracket lines */
.docusign-bracket-preview::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 12px;
    bottom: 15px;
    width: 110px;
    border-left: 2px solid #206bc4;
    border-bottom: 2px solid #206bc4;
    pointer-events: none;
}

/* Top bracket segments */
.docusign-bracket-preview::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 12px;
    width: 15px;
    border-top: 2px solid #206bc4;
    pointer-events: none;
}

.docusign-bracket-preview .bracket-top-right {
    position: absolute;
    top: 15px;
    left: 102px;
    width: 20px;
    border-top: 2px solid #206bc4;
    pointer-events: none;
}

/* Watermark Labels */
.docusign-bracket-preview .watermark-label-top {
    position: absolute;
    top: 9px;
    left: 30px;
    font-size: 8px;
    font-weight: 700;
    color: #64748b;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.docusign-bracket-preview .watermark-label-bottom {
    position: absolute;
    bottom: 6px;
    left: 12px;
    font-size: 8px;
    color: #64748b;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

/* DataTables Custom Styling for Tabler Theme */
div.dataTables_wrapper {
    padding: 1rem 0;
}

div.dataTables_wrapper .row:first-child {
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    align-items: center;
    border-bottom: 1px solid rgba(4, 32, 69, 0.05);
}

div.dataTables_wrapper .row:last-child {
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    align-items: center;
    border-top: 1px solid rgba(4, 32, 69, 0.05);
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-weight: 500;
    color: #495057;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0 !important;
    display: inline-block;
    width: auto;
    height: 38px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e293b;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d9dbde;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #90bbf0;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(32,107,196,.25);
}

div.dataTables_wrapper div.dataTables_length label {
    font-weight: 500;
    color: #495057;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

div.dataTables_wrapper div.dataTables_length select {
    display: inline-block;
    width: auto;
    height: 38px;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e293b;
    background-color: #fff;
    border: 1px solid #d9dbde;
    border-radius: 4px;
}

/* Pagination Overrides */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0;
    white-space: nowrap;
    justify-content: flex-end;
    gap: 4px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    border: 1px solid #e6e8eb;
    background-color: #fff;
    color: #495057;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    min-width: 36px;
    text-align: center;
    transition: all 0.15s ease-in-out;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:hover {
    background-color: #f1f5f9;
    color: #1e293b;
    border-color: #d9dbde;
}

div.dataTables_wrapper div.dataTables_info {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* Sorting indicators */
table.dataTable thead th.sorting, 
table.dataTable thead th.sorting_asc, 
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 26px !important;
}

table.dataTable thead th.sorting::after, 
table.dataTable thead th.sorting_asc::after, 
table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: 8px;
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    opacity: 0.3;
}

table.dataTable thead th.sorting::after {
    content: "\F124"; /* bi-arrow-down-up */
}

table.dataTable thead th.sorting_asc::after {
    content: "\F148"; /* bi-arrow-up */
    opacity: 0.8;
    color: var(--primary-color);
}

table.dataTable thead th.sorting_desc::after {
    content: "\F128"; /* bi-arrow-down */
    opacity: 0.8;
    color: var(--primary-color);
}

/* Custom Toolbar layout */
.table-filter-toolbar {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(4, 32, 69, 0.05);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.table-filter-toolbar .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-filter-toolbar .filter-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-filter-toolbar .filter-group select {
    height: 38px;
    min-width: 160px;
    border-radius: 4px;
    border: 1px solid #d9dbde;
    font-size: 0.875rem;
    color: #1e293b;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
}