/* ==========================================================================
   CaseDesk — data grids (Tabler "tables" pattern)
   --------------------------------------------------------------------------
   The list pages (Cases, Clients, Attorneys, Courts, Firms, Marshals, Users,
   Roles, Staff, all Master/* and ManageForms/* grids, reports…) share one
   markup shape:

       <div class="p-4 main-body">
           <nav><ol class="breadcrumb">…</ol></nav>
           <div class="container p-4 rounded shadow-sm">        (the card)
               <div class="heading"><h5 class="head">Manage X</h5>
                   <div class="searchbox"><input class="form-input"/>
                        <button class="search-btn"/></div>
                   <button class="btn btn-primary add-btn">Add New</button>
               </div>
               <table class="table">…<td class="sticky">actions</td></table>
               <small>Showing 1 to 10 of 42 entries</small>
               <ul class="pagination">…</ul>
           </div>
       </div>

   Each of those pages used to carry its own copy of a navy (#1F365D) theme
   in an inline <style>. This sheet restyles that shared shape once, in the
   Tabler idiom used by the shell, dashboard and auth pages:

     - flat white card with a hairline border and small shadow
     - table head: small caps, muted, on a light surface; hover rows
     - inputs / buttons at Tabler size (2.375rem), 4px radius
     - pagination without borders, primary fill on the active page
     - action icons as quiet ghost buttons

   Scope: everything is prefixed with `.main-content` (MainLayout's scroll
   container) so the auth pages and the landing page are untouched. The
   extra ancestor also lets these rules win over any legacy inline <style>
   left on a page, which sits later in the DOM but has lower specificity.

   Colours come from casedesk-tokens.css; Tabler's own --tblr-* variables
   are used for the values Tabler already defines (border, surfaces).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.main-content .main-body,
.main-content > .p-4 {
    background-color: var(--cd-bg);
    font-family: var(--cd-font-sans);
    color: var(--cd-text);
    min-height: 100%;
}

/* Bootstrap's `.p-4` is 1.5rem; the shell gutter is 32px / 16px on phones. */
.main-content > .main-body,
.main-content > .p-4 {
    padding: var(--cd-space-5) var(--cd-space-6) var(--cd-space-7) !important;
}

@media (max-width: 767.98px) {
    .main-content > .main-body,
    .main-content > .p-4 {
        padding: var(--cd-space-4) var(--cd-space-4) var(--cd-space-6) !important;
    }
}

/* Legacy pages set `h5, p, small { color: #1F365D }`. */
.main-content .main-body h5,
.main-content .main-body p,
.main-content .main-body small {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.main-content .breadcrumb {
    margin: 0 0 var(--cd-space-3);
    padding: 0;
    font-size: .8125rem;
    background: none;
}

.main-content .breadcrumb-item,
.main-content .breadcrumb-item a,
.main-content .breadcrumb .case-bread {
    color: var(--cd-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.main-content .breadcrumb-item a:hover,
.main-content .breadcrumb a.case-bread:hover {
    color: var(--cd-primary-700);
    text-decoration: underline;
}

.main-content .breadcrumb-item:last-child,
.main-content .breadcrumb-item:last-child .case-bread {
    color: var(--cd-text);
}

.main-content .breadcrumb-item + .breadcrumb-item::before {
    color: var(--cd-placeholder);
}

/* --------------------------------------------------------------------------
   The grid card
   Pages call it `.container.p-4.rounded.shadow-sm` (master grids) or
   `.case-container` (Cases). Both get Tabler's card surface.
   -------------------------------------------------------------------------- */

.main-content .main-body > .container,
.main-content .main-body .container.shadow-sm,
.main-content .case-container {
    max-width: 100%;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-md) !important;
    box-shadow: var(--cd-shadow-card) !important;
}

.main-content .main-body > .container.p-4 {
    padding: var(--cd-space-5) !important;
}

@media (max-width: 767.98px) {
    .main-content .main-body > .container.p-4 {
        padding: var(--cd-space-4) !important;
    }
}

/* Card title row ("Manage Clients" + search + Add New) */
.main-content .heading {
    gap: var(--cd-space-3);
}

.main-content .heading .head,
.main-content .head,
.main-content .page-title {
    font-family: var(--cd-font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cd-text-heading);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Controls — Tabler size & shape
   app.css gives every .btn a 45px min-height and a 12px radius and every
   .form-input an 18px font with a 12px radius. Inside the app body those
   become Tabler's 2.375rem controls.
   -------------------------------------------------------------------------- */

.main-content .btn {
    min-height: 0;
    border-radius: var(--tblr-border-radius, 4px) !important;
    font-family: var(--cd-font-sans);
    font-weight: 500;
    box-shadow: var(--cd-shadow-sm);
}

.main-content .btn-sm {
    font-size: .75rem;
}

.main-content .btn > .ti:first-child,
.main-content .btn > .fa:first-child,
.main-content .btn > .fas:first-child,
.main-content .btn > .fa-solid:first-child,
.main-content .btn > .fa-regular:first-child,
.main-content .btn > .bi:first-child {
    font-size: 1.1em;
    line-height: 1;
    margin-right: .375rem;
}

.main-content .btn-icon > .ti,
.main-content .btn-icon > .fa,
.main-content .btn-icon > .fas,
.main-content .btn-icon > .fa-solid,
.main-content .btn-icon > .fa-regular,
.main-content .btn-icon > .bi {
    margin-right: 0;
}

.main-content .btn-primary,
.main-content .btn-primary:disabled,
.main-content .btn-primary.disabled {
    background-color: var(--cd-primary-700) !important;
    border-color: var(--cd-primary-700) !important;
    color: var(--cd-text-inverse);
}

.main-content .btn-primary:hover,
.main-content .btn-primary:focus-visible {
    background-color: var(--cd-primary-800) !important;
    border-color: var(--cd-primary-800) !important;
}

.main-content .btn-primary:active {
    background-color: var(--cd-primary-900) !important;
    border-color: var(--cd-primary-900) !important;
}

.main-content .btn-outline-secondary {
    color: var(--cd-text);
    border-color: var(--cd-border);
    background: var(--cd-surface);
}

.main-content .btn-outline-secondary:hover {
    background: var(--cd-surface-alt);
    border-color: var(--cd-border-hover);
    color: var(--cd-text-heading);
}

/* Legacy "Add New" / "Create Case" buttons carried inline width & padding. */
.main-content .add-btn,
.main-content .create-btn {
    width: auto !important;
    padding: .4375rem 1rem !important;
    font-size: .875rem !important;
    white-space: nowrap;
}

/* Grid / table view toggle (two joined buttons). */
.main-content .view-toggle {
    width: auto;
}

.main-content .btn-group > .btn-grid {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.main-content .btn-group > .btn-table {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Inputs & selects */
.main-content .form-input,
.main-content .form-control,
.main-content .form-select,
.main-content .search-box {
    display: block;
    width: 100%;
    min-height: 2.375rem;
    height: auto;
    padding: .4375rem .75rem;
    font-family: var(--cd-font-sans);
    font-size: .875rem;
    line-height: 1.4285714;
    color: var(--cd-text);
    background-color: var(--cd-surface);
    border: 1px solid var(--tblr-border-color, var(--cd-border)) !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    box-shadow: none !important;
    transition: border-color var(--cd-transition), box-shadow var(--cd-transition);
}

.main-content select.form-input {
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 16px 12px;
    background-position: right .75rem center;
    background-repeat: no-repeat;
}

.main-content .form-input::placeholder,
.main-content .form-control::placeholder,
.main-content .search-box::placeholder {
    color: var(--cd-placeholder);
}

.main-content .form-input:focus,
.main-content .form-control:focus,
.main-content .form-select:focus,
.main-content .search-box:focus {
    border-color: var(--cd-primary-700) !important;
    box-shadow: var(--cd-focus-ring) !important;
    outline: 0;
    background-color: var(--cd-surface);
}

.main-content .form-input:disabled,
.main-content .form-control:disabled {
    background-color: var(--cd-surface-alt);
    color: var(--cd-text-muted);
}

/* Search box: the input carries the icon on the right. */
.main-content .searchbox {
    width: auto;
    min-width: 16rem;
    flex: 0 1 20rem;
}

.main-content .searchbox .form-input,
.main-content .search-box,
.main-content .input-box {
    padding-right: 2.25rem;
}

.main-content .search-btn,
.main-content .search-loading {
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 0;
    color: var(--cd-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.main-content .search-btn:hover {
    color: var(--cd-primary-700);
}

.main-content .search-loading {
    right: .625rem;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.main-content .table-responsive {
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    white-space: nowrap;
}

/* Master grids wrap the table in an inline-styled scroll box instead. */
.main-content .main-body table.table {
    --tblr-table-bg: transparent;
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--cd-text);
    border-color: var(--cd-border);
}

.main-content table.table thead th,
.main-content table.table > :not(caption) > thead > tr > th {
    background: var(--tblr-bg-surface-secondary, #f6f8fb) !important;
    color: var(--cd-text-muted) !important;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--cd-border);
    border-top: 0;
    vertical-align: middle;
}

.main-content table.table > :not(caption) > * > * {
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--cd-border);
    border-left: 0;
    border-right: 0;
    vertical-align: middle;
    box-shadow: none;
}

.main-content table.table tbody tr:last-child > * {
    border-bottom: 0;
}

.main-content table.table.table-bordered {
    border: 0;
}

.main-content table.table.table-hover > tbody > tr:hover > *,
.main-content .main-body table.table > tbody > tr:hover > * {
    background-color: var(--cd-primary-050);
    color: inherit;
}

.main-content table.table .table-data {
    font-size: .875rem;
}

/* Sticky action column */
.main-content th.sticky,
.main-content td.sticky {
    position: sticky;
    right: 0;
    z-index: 2;
    text-align: center;
    background: var(--cd-surface);
    box-shadow: -1px 0 0 var(--cd-border);
}

.main-content th.sticky {
    z-index: 3;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.main-content table.table tbody tr:hover td.sticky {
    background: var(--cd-primary-050);
}

/* Row actions: the pages use bare <i> icons with @onclick. Give them a
   ghost-button footprint and Tabler colours. */
.main-content table.table td .text-navy,
.main-content table.table td .text-danger,
.main-content table.table td .text-success,
.main-content table.table td .text-primary,
.main-content .case-actions > i,
.main-content .row-actions > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 !important;
    border-radius: var(--tblr-border-radius, 4px);
    font-size: 1rem;
    line-height: 1;
    color: var(--cd-text-muted);
    cursor: pointer;
    transition: background-color var(--cd-transition), color var(--cd-transition);
}

.main-content table.table td .text-navy:hover,
.main-content table.table td .text-primary:hover,
.main-content .case-actions > i:hover,
.main-content .row-actions > i:hover {
    background: var(--cd-primary-100);
    color: var(--cd-primary-700);
}

.main-content table.table td .text-danger {
    color: var(--cd-danger);
}

.main-content table.table td .text-danger:hover {
    background: var(--cd-danger-bg);
    color: var(--cd-danger);
}

.main-content table.table td .text-success {
    color: var(--cd-success);
}

.main-content table.table td .text-success:hover {
    background: var(--cd-success-bg);
}

/* Empty rows */
.main-content table.table td.text-muted {
    color: var(--cd-text-muted) !important;
    padding: 2rem 1rem;
}

/* Status badges — Tabler's soft ("-lt") variants */
.main-content .badge {
    font-family: var(--cd-font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .25em .5em;
    border-radius: var(--cd-radius-sm);
    line-height: 1.4;
}

.main-content .badge.bg-success {
    background: var(--cd-success-bg) !important;
    color: #1f7a2e !important;
}

.main-content .badge.bg-warning {
    background: var(--cd-warning-bg) !important;
    color: var(--cd-accent-text) !important;
}

.main-content .badge.bg-danger {
    background: var(--cd-danger-bg) !important;
    color: var(--cd-danger) !important;
}

.main-content .badge.bg-secondary {
    background: var(--cd-surface-alt) !important;
    color: var(--cd-text-muted) !important;
    border: 1px solid var(--cd-border);
}

.main-content .badge.bg-info,
.main-content .badge.badge-type {
    background: var(--cd-primary-100) !important;
    color: var(--cd-primary-800) !important;
}

/* --------------------------------------------------------------------------
   Footer: "Showing 1 to 10 of 42 entries" + pagination
   -------------------------------------------------------------------------- */

.main-content .main-body > .container > .d-flex.justify-content-between.mt-3,
.main-content .case-container > .d-flex.justify-content-between {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cd-space-3);
    padding-top: var(--cd-space-4);
}

.main-content .main-body small {
    font-size: .875rem;
    color: var(--cd-text-muted);
}

.main-content .pagination {
    gap: 2px;
    font-size: .875rem;
}

.main-content .page-link {
    min-width: 2rem;
    padding: .25rem .5rem;
    border: 0;
    border-radius: var(--tblr-border-radius, 4px);
    color: var(--cd-text-muted);
    background: transparent;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    box-shadow: none;
}

.main-content .page-link:hover {
    color: var(--cd-primary-700);
    background: var(--cd-primary-050);
}

.main-content .page-link:focus {
    box-shadow: var(--cd-focus-ring);
}

.main-content .page-item.active .page-link,
.main-content .page-link.active {
    background: var(--cd-primary-700) !important;
    border-color: var(--cd-primary-700) !important;
    color: var(--cd-text-inverse) !important;
}

.main-content .page-item.disabled .page-link {
    color: var(--cd-placeholder);
    background: transparent;
    opacity: .6;
}

/* --------------------------------------------------------------------------
   Card view (Cases, Attorneys, Clients "grid" mode)
   -------------------------------------------------------------------------- */

.main-content .case-card {
    border: 1px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-sm);
    background: var(--cd-surface);
    padding: 0;
    transition: box-shadow var(--cd-transition), border-color var(--cd-transition), transform var(--cd-transition);
}

.main-content .case-card:hover {
    transform: none;
    border-color: var(--cd-border-hover) !important;
    box-shadow: var(--cd-shadow-card);
}

.main-content .case-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md) var(--cd-radius-md) 0 0;
    background: var(--cd-surface);
    color: var(--cd-text-heading);
    font-size: .9375rem;
    font-weight: 600;
}

.main-content .case-header .headd {
    font-size: .9375rem !important;
    font-weight: 600 !important;
}

.main-content .case-body {
    padding: .75rem 1rem;
    font-size: .875rem;
}

.main-content .case-body .title,
.main-content .label-1 {
    font: 500 .8125rem var(--cd-font-sans);
    color: var(--cd-text-muted);
}

.main-content .case-body .value,
.main-content .value-1 {
    font: 500 .875rem var(--cd-font-sans);
    color: var(--cd-text);
}

.main-content .case-card hr {
    margin: 0;
    border-color: var(--cd-border);
    opacity: 1;
}

.main-content .date-created {
    padding: .625rem 1rem !important;
}

/* --------------------------------------------------------------------------
   Tabs (Cases / Draft)
   -------------------------------------------------------------------------- */

.main-content .tab-bar {
    border-bottom: 1px solid var(--cd-border);
    gap: var(--cd-space-2);
}

.main-content .tab {
    padding: .625rem .875rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--cd-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.main-content .tab:hover {
    color: var(--cd-text-heading);
}

.main-content .tab-active,
.main-content .tab.tab-active {
    color: var(--cd-primary-700);
    border-bottom-color: var(--cd-primary-700);
}

.main-content .tab-active .tab-badge {
    background: var(--cd-primary-700);
}

.main-content .tab-active .draft-icon {
    color: var(--cd-accent);
}

/* --------------------------------------------------------------------------
   Modals raised by the grids (Create/Edit/Delete popups)
   -------------------------------------------------------------------------- */

.main-content .modal-content {
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-lg);
    font-family: var(--cd-font-sans);
}

.main-content .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cd-border);
}

.main-content .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cd-text-heading);
}

.main-content .modal-footer {
    padding: .75rem 1.5rem;
    border-top: 1px solid var(--cd-border);
    background: var(--cd-surface-alt);
}

.main-content .form-label,
.main-content label.fw-bold,
.main-content .lbl {
    font-size: .875rem;
    font-weight: 500;
    color: var(--cd-text);
    margin-bottom: .375rem;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .main-content .searchbox {
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
    }

    .main-content .heading .head,
    .main-content .page-title {
        font-size: 1rem;
    }

    .main-content .pagination .page-link {
        min-width: 1.75rem;
        padding: .125rem .375rem;
        font-size: .8125rem;
    }

    .main-content td.sticky,
    .main-content th.sticky {
        position: static;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   "Advanced" filter toggle (Clients, Attorneys, Firms…)
   -------------------------------------------------------------------------- */

.main-content .adv-btn {
    color: var(--cd-text);
    background: var(--cd-surface);
    border-color: var(--cd-border);
}

.main-content .adv-btn:hover {
    color: var(--cd-text-heading);
    background: var(--cd-surface-alt);
    border-color: var(--cd-border-hover);
}

.main-content .adv-btn.active-adv-btn {
    color: var(--cd-text-inverse) !important;
    background: var(--cd-primary-700) !important;
    border-color: var(--cd-primary-700) !important;
}

/* Bare row-action icons on pages that don't use .text-navy (some grids use
   plain <i class="ti ti-edit"> with @onclick). */
.main-content table.table td > i.ti[title],
.main-content table.table td > i.fa-solid[title],
.main-content table.table td > i.ti[style*="cursor"],
.main-content table.table td > i.fa-solid[style*="cursor"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--tblr-border-radius, 4px);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.main-content table.table td > i.ti[title]:hover,
.main-content table.table td > i.fa-solid[title]:hover {
    background: var(--cd-primary-100);
    color: var(--cd-primary-700);
}

/* --------------------------------------------------------------------------
   Card view on Users / Roles / Attorneys / Clients / Firms (.role-card)
   Same treatment as .case-card: flat bordered card, light header.
   -------------------------------------------------------------------------- */

.main-content .role-card {
    border: 1px solid var(--cd-border) !important;
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-sm);
    background: var(--cd-surface);
    transition: box-shadow var(--cd-transition), border-color var(--cd-transition);
}

.main-content .role-card:hover {
    transform: none;
    border-color: var(--cd-border-hover) !important;
    box-shadow: var(--cd-shadow-card);
}

.main-content .role-header {
    background: var(--cd-surface-alt) !important;
    color: var(--cd-text-heading) !important;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md) var(--cd-radius-md) 0 0;
    font-size: .9375rem;
    font-weight: 600;
}

.main-content .role-header .text-navy,
.main-content .role-header i[title] {
    color: var(--cd-text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.main-content .role-header .text-navy:hover,
.main-content .role-header i[title]:hover {
    color: var(--cd-primary-700);
}

.main-content .role-body {
    padding: .75rem 1rem;
    font-size: .875rem;
}

.main-content .role-body .title,
.main-content .data-name .name {
    font: 500 .8125rem var(--cd-font-sans);
    color: var(--cd-text-muted);
}

.main-content .role-body .value {
    font: 500 .875rem var(--cd-font-sans);
    color: var(--cd-text);
}

.main-content .role-card hr {
    margin: 0;
    border-color: var(--cd-border);
    opacity: 1;
}

/* Tables: span the card, Tabler size, left-aligned cells (legacy markup
   centred everything; only the action column stays centred). */
.main-content .main-body table.table,
.main-content .case-container table.table {
    width: 100%;
    font-size: .875rem !important;
    /* Chrome drops the bottom border of position:sticky cells in a
       border-collapse table; separate borders paint reliably. */
    border-collapse: separate;
    border-spacing: 0;
}

.main-content table.table.text-center > :not(caption) > * > *:not(.sticky) {
    text-align: left;
}

.main-content table.table .text-center {
    text-align: center;
}