@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Poppins:wght@400;500;600&display=swap');

:root {
    --rizfin-cream:         #e9eeea;
    --rizfin-teal:          #0d3f3e;
    --rizfin-copper:        #b67d3e;
    --rizfin-gold:          #d29a49;
    --rizfin-sage:          #5a7d7b;
    --rizfin-white:         #ffffff;
    --rizfin-charcoal:      #2f3a3c;
    --rizfin-body:          #1a2a2a;
    --rizfin-hint:          #4a5a5a;
    --rizfin-soft:          #f5f7f6;
    --rizfin-danger:        #b91c1c;
    --rizfin-external:      #8e44ad;
    --rizfin-amber:         #92400e;
    --rizfin-warn:          #b5651d;
    --rizfin-amber-mid:     #f59e0b;
    --rizfin-amber-bg:      #fffbeb;
    --rizfin-danger-bg:     #fef2f2;
    --rizfin-danger-border: #fca5a5;
    --rizfin-teal-bg:       #f0fdfa;
    --rizfin-border:        #e2e8f0;
    --rizfin-stripe:        #f0f4f3;
    --rizfin-info-bg:       #f0f7ff;
    --rizfin-info-border:   #b3d4f5;
    --rizfin-info-text:     #1a3a5c;
    --rizfin-tracker-warm:  #d4892e;
    --rizfin-muted:         #888888;
    --rizfin-muted-mid:     #6b7280;
    --rizfin-muted-light:   #aaaaaa;
    --rizfin-success:       #3a7d30;
    --rizfin-success-border:#6aa84f;
    --rizfin-success-bg:    #f0faf0;
    --rizfin-border-input:  #ced4da;
    --rizfin-border-mid:    1.5px;
    --rizfin-font-heading:  'Montserrat', sans-serif;
    --rizfin-font-body:     'Poppins', sans-serif;
    --rizfin-radius:        8px;
    --rizfin-radius-sm:     6px;
    --rizfin-radius-xs:     4px;
    --rizfin-sp-1:          4px;
    --rizfin-sp-2:          8px;
    --rizfin-sp-3:          12px;
    --rizfin-sp-4:          16px;
    --rizfin-sp-5:          20px;
    --rizfin-sp-6:          24px;
    --rizfin-sp-8:          32px;
    --rizfin-sp-12:         48px;
    --rizfin-fs-heading:    32px;
    --rizfin-fs-widget:     13px;
    --rizfin-fs-base:       1rem;
    --rizfin-fs-sm:         0.75rem;
    --rizfin-ls-heading:    0.08em;
    --rizfin-ls-button:     0.06em;
    --rizfin-ls-nav:        0.05em;
    --rizfin-ls-tight:      0.04em;
    --rizfin-fs-compact:    12px;
    --rizfin-shadow-card:   0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(13,63,62,0.07);
    --rizfin-shadow-focus:  0 0 0 3px rgba(210,154,73,0.15);
    --rizfin-white-92:      rgba(255, 255, 255, 0.92);
    --rizfin-white-45:      rgba(255, 255, 255, 0.45);
    --rizfin-sidebar-w:       370px;
    --rizfin-brand-h:         72px;
    --rizfin-radius-lg:       10px;
    --rizfin-input-h:         38px;
    --rizfin-page-sm:         600px;
    --rizfin-logo-sm:       40px;
    --rizfin-fs-title:      18px;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
/* Matches client.css's root font-size -- without this, every rem-based token
   here (--rizfin-fs-sm etc.) computes against the browser's default 16px
   root instead of 14px, so the whole admin UI (Jazzmin/Bootstrap is rem-heavy
   too) renders ~14% larger than the client-facing pages it's meant to match. */
html { font-size: 14px; }
body {
    font-family: var(--rizfin-font-body) !important;
    font-size: var(--rizfin-fs-sm);
    color: var(--rizfin-charcoal);
    background-color: var(--rizfin-soft);
}

/* ── Headings ────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.content-header h1,
.card-title,
.module h2,
.nav-header {
    font-family: var(--rizfin-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--rizfin-ls-heading);
    font-weight: 800 !important;
    color: var(--rizfin-charcoal);
}

.nav-sidebar .nav-header,
.main-sidebar .nav-sidebar li.nav-header,
.sidebar-menu .nav-header {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    padding: var(--rizfin-sp-4) var(--rizfin-sp-4) var(--rizfin-sp-1) var(--rizfin-sp-4) !important;
    font-size: var(--rizfin-fs-sm) !important;
    display: block !important;
}

/* ── Admin page title ────────────────────────────────────────────────────────── */
#content > h3 {
    font-family: var(--rizfin-font-heading);
    font-weight: 800;
    font-size: var(--rizfin-fs-title);
    text-transform: uppercase;
    letter-spacing: var(--rizfin-ls-button);
    color: var(--rizfin-teal);
    margin-bottom: var(--rizfin-sp-4);
}

/* ── Top bar ─────────────────────────────────────────────────────────────────── */
.main-header,
.navbar {
    background-color: var(--rizfin-teal) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.main-sidebar,
.main-sidebar::before,
.sidebar,
.sidebar-dark-primary {
    width: var(--rizfin-sidebar-w) !important;
    background-color: var(--rizfin-teal) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Main content alignment ──────────────────────────────────────────────────── */
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
    margin-left: var(--rizfin-sidebar-w) !important;
}

/* ── Brand area ──────────────────────────────────────────────────────────────── */
.main-sidebar .brand-link {
    display: flex !important;
    align-items: center !important;
    height: var(--rizfin-brand-h) !important;
    min-height: var(--rizfin-brand-h) !important;
    padding: var(--rizfin-sp-3) var(--rizfin-sp-4) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.main-sidebar .brand-link .brand-image {
    max-height: var(--rizfin-logo-sm) !important;
    width: auto !important;
    margin-right: var(--rizfin-sp-3) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.main-sidebar .brand-link .brand-text {
    font-family: var(--rizfin-font-heading) !important;
    font-size: var(--rizfin-fs-title) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--rizfin-ls-heading);
    color: var(--rizfin-white) !important;
    line-height: 1 !important;
}

/* ── Sidebar text & nav ──────────────────────────────────────────────────────── */
.sidebar a,
.sidebar .nav-link,
.sidebar .nav-link p,
.sidebar .user-panel,
.nav-sidebar .nav-header {
    font-family: var(--rizfin-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--rizfin-ls-nav);
    color: var(--rizfin-white) !important;
}



.nav-sidebar .nav-link {
    padding: var(--rizfin-sp-2) var(--rizfin-sp-4) !important;
    margin: 2px var(--rizfin-sp-2) !important;
    border-radius: var(--rizfin-radius-sm) !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
}


.nav-sidebar .nav-link p,
.sidebar .nav-link p {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: var(--rizfin-cream) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-link.active {
    background-color: var(--rizfin-gold) !important;
    color: var(--rizfin-white) !important;
}

.nav-sidebar .nav-link:hover {
    background-color: rgba(210, 154, 73, 0.18) !important;
    color: var(--rizfin-white) !important;
}

/* ── Links ───────────────────────────────────────────────────────────────────── */
a {
    color: var(--rizfin-teal);
}

a:hover {
    color: var(--rizfin-gold);
}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
    border-radius: var(--rizfin-radius);
    border: 1px solid var(--rizfin-border);
    box-shadow: var(--rizfin-shadow-card);
}

.card-primary.card-outline {
    border-top-color: var(--rizfin-gold) !important;
}

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.input-upload { width: 100%; border: 1px dashed var(--rizfin-border-input); border-radius: var(--rizfin-radius-sm); padding: var(--rizfin-sp-2) var(--rizfin-sp-3); background: var(--rizfin-soft); font-size: var(--rizfin-fs-compact); }
.notice-info  { background: var(--rizfin-info-bg); border: 1px solid var(--rizfin-info-border); border-radius: var(--rizfin-radius); padding: var(--rizfin-sp-3) var(--rizfin-sp-4); font-size: var(--rizfin-fs-compact); color: var(--rizfin-info-text); margin-bottom: var(--rizfin-sp-4); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-primary,
.button,
input[type="submit"] {
    background-color: var(--rizfin-gold) !important;
    border-color: var(--rizfin-gold) !important;
    color: var(--rizfin-white) !important;
    text-transform: uppercase !important;
    font-family: var(--rizfin-font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: var(--rizfin-ls-tight);
}


.btn-success,
.object-tools .addlink,
a.addlink {
    background-color: var(--rizfin-gold) !important;
    border-color: var(--rizfin-gold) !important;
    color: var(--rizfin-white) !important;
}

/* Reverted 2026-07-20: tried to reskin Jazzmin's default toolbar button
   (<a class="btn btn-success float-end">, no .object-tools wrapper) via
   global CSS to fix leads.LeadFileMigration looking inconsistent. This is
   the exact mistake already documented from 2026-07-09 on ClientService --
   see reference_admin_app_standard.md: "don't try to reskin Jazzmin's
   default toolbar globally, every model gets its own change_list.html
   override, full stop." Fixed properly instead by adding
   leads/templates/admin/leads/leadfilemigration/change_list.html, same as
   every other model. Left this comment as a pointer so the next person who
   hits this doesn't waste a round trip on the CSS approach either. */


.btn-info,
.btn-secondary,
a.changelink {
    background-color: var(--rizfin-sage) !important;
    border-color: var(--rizfin-sage) !important;
    color: var(--rizfin-white) !important;
}


.btn-danger,
.deletelink,
input[type="submit"].deletelink,
a.deletelink {
    background-color: var(--rizfin-charcoal) !important;
    border-color: var(--rizfin-charcoal) !important;
    color: var(--rizfin-white) !important;
}


.btn-default,
.btn-outline-secondary,
.historylink {
    background-color: var(--rizfin-cream) !important;
    border-color: var(--rizfin-cream) !important;
    color: var(--rizfin-teal) !important;
}

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.nav-tabs .nav-link {
    color: var(--rizfin-teal) !important;
    font-family: var(--rizfin-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--rizfin-ls-nav);
}

.nav-tabs .nav-link.active {
    color: var(--rizfin-gold) !important;
    border-top: 3px solid var(--rizfin-gold) !important;
}

/* ── Form inputs — global size ───────────────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea,
.form-control {
    font-size: var(--rizfin-fs-sm) !important;
    font-family: var(--rizfin-font-body) !important;
    color: var(--rizfin-charcoal) !important;
}

/* ── Date/time/number inputs — consistent width with char inputs ─────────────── */
/* DecimalField/IntegerField inputs render as <input type="number"> with no
   CSS class at all (e.g. ClientCharge.amount, ServicePricing.fee_min/
   fee_max) -- confirmed against real rendered markup, not assumed. */
input.vDateField,
input.vTimeField,
input.vTextField,
input[type="number"] { width: 250px !important; }
.inline-related input.vDateField,
.inline-related input.vTimeField,
.inline-related input.vTextField,
/* DecimalField/IntegerField inputs render as <input type="number"> with no
   CSS class at all (e.g. ClientCharge.amount) -- confirmed against real
   rendered markup, not assumed. */
.inline-related input[type="number"] { width: 100% !important; max-width: 100% !important; }
.inline-related fieldset .form-row input.vDateField,
.inline-related fieldset .form-row input.vTimeField,
.inline-related fieldset .form-row input.vTextField { width: 100% !important; }

/* ── Full-width textareas ────────────────────────────────────────────────────── */
/* .form-row/.field-box/fieldset are old Django-admin template classes/
   elements -- Jazzmin's admin/includes/fieldset.html actually uses
   <div class="card">, not a real <fieldset>, so those 3 selectors never
   match anything here; kept for other templates that might still use them.
   The class-based textarea.vLargeTextField selector also only matches
   TextField's own widget -- a JSONField's default widget (e.g.
   CompanyAMLProfile.directors_list) renders a plain <textarea> with NO
   class at all, confirmed against real rendered markup, so it fell through
   every existing rule. Targeting our own actual container classes
   (.col-sm-9/.fieldBox) directly, regardless of the textarea's own class,
   closes that gap for any current or future classless textarea. */
.form-row textarea,
.field-box textarea,
fieldset textarea,
.form-group > .row > .col-sm-9 textarea,
.form-group > .row > .fieldBox textarea,
textarea.vLargeTextField { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

/* ── Select dropdowns — consistent default width ─────────────────────────────── */
/* Unlike vTextField/vDateField (fixed 250px everywhere), plain <select>
   elements had no width rule at all -- they inherited whatever width
   Bootstrap gave their column (full column width alone on a row, an
   ambiguous content-based width when paired), so a short Yes/No choice
   field could render far wider or narrower than the text input next to
   it. Previously only ClientProfileAdmin patched this per-field
   (_NARROW_FIELDS) with an inline style -- this makes a sane default the
   norm everywhere instead of a one-off admin.py hack.
   A ForeignKey select (wrapped in .related-widget-wrapper, with its own
   add/change/view icon buttons) is excluded -- its content (e.g. a
   business/lead name) genuinely needs more room than a short choice
   field, so it keeps growing up to a wider cap instead. */
select {
    width: auto !important;
    min-width: 160px !important;
    max-width: 250px !important;
}
.related-widget-wrapper select {
    width: auto !important;
    min-width: 220px !important;
    max-width: 400px !important;
}
.inline-related select,
#lines-group select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Groups' Permissions dual-listbox (filter_horizontal / SelectFilter2) --
   the general select { max-width:250px } rule above would squeeze its two
   "Available"/"Chosen" option lists down to that width regardless of the
   widened container, defeating the point. This widget manages its own
   width via inline styles set by Django's own JS (SelectFilter2.js), so
   just get out of its way instead of imposing our own cap. */
select.selectfilter {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ── Fieldset label column -- one fixed pixel value, shared, no % estimates ─── */
/* A percentage/minmax range computes differently depending on how many
   columns share the row (4 for a paired row, 2 for a single-field row) --
   that's an estimate that happens to land close, not a guarantee of a match.
   A single fixed px number, referenced everywhere below, is exact: every
   row's label column is the literal same measurement, not separate
   computations that happen to be similar. */
:root { --rizfin-field-label-w: 160px; }

/* ── Paired fieldset rows (2 fields on one line, e.g. name/role) ─────────────── */
/* Jazzmin's admin/includes/fieldset.html renders a 2-field line as 4 flex
   siblings inside .row: label(col-sm-3) fieldBox(col-auto) label(col-auto)
   fieldBox(col-auto). Bootstrap's col-auto sizes each box to its content's
   natural width, but with a fixed-width input inside (vTextField's 250px)
   that natural-width calculation combined with flex-wrap has been
   unreliable across viewport widths -- variously wrapping just the second
   input onto its own line while its label stays put, or the second input
   not appearing at all. Replacing with an explicit 4-column grid removes
   the ambiguity: each label+input pair always gets a real, bounded track
   instead of an auto-sized flex item. :has() detects a 2-field row by its
   3rd child (the 2nd label) -- a 1-field row only has 2 children (one
   label, one content div), so it falls to the single-field rule below
   instead. This is also the shared 4-column track every single-field rule
   below reuses, so all boundaries line up regardless of row shape. */
.form-group > .row:has(> label:nth-child(3)) {
    display: grid !important;
    grid-template-columns: var(--rizfin-field-label-w) minmax(160px, 1fr) var(--rizfin-field-label-w) minmax(160px, 1fr);
    column-gap: var(--rizfin-sp-3);
    row-gap: var(--rizfin-sp-2);
    align-items: start;
}
.form-group > .row:has(> label:nth-child(3)) > label,
.form-group > .row:has(> label:nth-child(3)) > .fieldBox {
    width: auto !important;
    max-width: 100% !important;
    flex: none !important;
}
.form-group > .row:has(> label:nth-child(3)) input.vTextField,
.form-group > .row:has(> label:nth-child(3)) input.vDateField,
.form-group > .row:has(> label:nth-child(3)) input.vTimeField,
.form-group > .row:has(> label:nth-child(3)) input.vURLField,
.form-group > .row:has(> label:nth-child(3)) input[type="number"],
.form-group > .row:has(> label:nth-child(3)) select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ── Single-field rows -- default to "narrow" (matches one paired track) ────── */
/* Every single-field row (label + one .col-sm-9 content div) uses the same
   4-column track as the paired rows above, with its content div placed in
   column 2 only -- i.e. narrow, matching "Client assigned name 1"'s width
   and position, which is the more common case (short text/date/select
   values). :not(:has(...)) excludes paired rows, which are already grid
   via the rule above and shouldn't be re-matched here. Fields that need
   the wider "full width" treatment instead (free text, FK selects,
   checkboxes, readonly displays -- see the exception list below) override
   this via higher specificity (.field-X selectors beat the plain .row
   descendant selector used here). */
.form-group > .row:not(:has(> label:nth-child(3))) {
    display: grid !important;
    grid-template-columns: var(--rizfin-field-label-w) minmax(160px, 1fr) var(--rizfin-field-label-w) minmax(160px, 1fr);
    column-gap: var(--rizfin-sp-3);
    align-items: start;
}
.form-group > .row:not(:has(> label:nth-child(3))) > label {
    width: auto !important;
    max-width: 100% !important;
    flex: none !important;
    grid-column: 1;
}
.form-group > .row:not(:has(> label:nth-child(3))) > .col-sm-9 {
    width: auto !important;
    max-width: 100% !important;
    flex: none !important;
    grid-column: 2;
}
/* Any single-field row whose content div contains a <textarea> -- a field
   that allows more than one line is a field we expect a long answer in, so
   default it to full width automatically instead of requiring every
   TextField to be manually added to the exceptions list by name below.
   Higher specificity than the plain grid-column:2 rule above (extra
   :has() clause), so this wins without needing !important. New TextField
   columns added in future get this for free -- no CSS change needed. */
.form-group > .row:not(:has(> label:nth-child(3))) > .col-sm-9:has(textarea) {
    grid-column: 2 / 5;
}
.form-group > .row:not(:has(> label:nth-child(3))) input.vTextField,
.form-group > .row:not(:has(> label:nth-child(3))) input.vDateField,
.form-group > .row:not(:has(> label:nth-child(3))) input.vTimeField,
.form-group > .row:not(:has(> label:nth-child(3))) input.vURLField,
.form-group > .row:not(:has(> label:nth-child(3))) input[type="number"],
.form-group > .row:not(:has(> label:nth-child(3))) select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ── Full-width exceptions ────────────────────────────────────────────────────── */
/* Free text (Notes, Business Name, Trading name), ForeignKey selects with
   potentially long values (Lead, Client type), the checkbox (Is active),
   and readonly displays (Initial Agreement, the read-only "Business name"
   display) all need the row's full remaining width, not the narrow single-
   track default above -- content div spans columns 2-4 instead of just 2. */
.form-group.field-notes > .row > .col-sm-9,
.form-group.field-business_name > .row > .col-sm-9,
.form-group.field-trading_name > .row > .col-sm-9,
.form-group.field-lead > .row > .col-sm-9,
/* Individual AML Review's "Individual" FK select -- own admin, no name
   collision with Business AML Review's "business" field. */
.form-group.field-individual > .row > .col-sm-9,
/* Business AML Review's "Business" FK select (Business AML Profile). */
.form-group.field-business > .row > .col-sm-9,
/* Client Intake Forms' "Staff member" (filled_by) FK select -- name also
   exists on service_delivery models, likely fine there too. */
.form-group.field-filled_by > .row > .col-sm-9,
/* Business website (Section 2) -- entity_website. */
.form-group.field-entity_website > .row > .col-sm-9,
/* Aml kyc changes details -- unpaired from aml_kyc_changes, own row. */
.form-group.field-aml_kyc_changes_details > .row > .col-sm-9,
/* Trading name (Section 2) -- entity_trading_name. */
.form-group.field-entity_trading_name > .row > .col-sm-9,
/* Change history -- readonly snapshot_history display. */
.form-group.field-snapshot_history > .row > .col-sm-9,
/* Handled by -- FK select with help text, shared _REVIEW_FIELDSETS block. */
.form-group.field-handled_by > .row > .col-sm-9,
/* Proposals' "Intake form" FK select -- name also exists on leads/
   service_delivery models, likely fine there too but noting per usual. */
.form-group.field-intake_form > .row > .col-sm-9,
/* Proposals -- AML link and Re-sync action readonly displays. */
.form-group.field-aml_link > .row > .col-sm-9,
/* Services -- Category (also exists on bookkeeping/leads, likely fine
   there too) and Parent Service FK selects. */
.form-group.field-category > .row > .col-sm-9,
.form-group.field-parent_service > .row > .col-sm-9,
.form-group.field-intake_field > .row > .col-sm-9,
.form-group.field-resync_action > .row > .col-sm-9,
/* Service Pricing -- "Service" FK select. Name also exists on leads/
   proposals/tracker models, likely fine there too but noting per usual. */
.form-group.field-service > .row > .col-sm-9,
/* AML Check Resources -- the 6 "Check here" URLFields + updated_at. Own
   admin, no fieldsets defined (single default unnamed fieldset, no card
   header) but the same .form-group > .row > .col-sm-9 structure applies. */
.form-group.field-sanctions_check_url > .row > .col-sm-9,
.form-group.field-insolvency_check_url > .row > .col-sm-9,
.form-group.field-pep_check_url > .row > .col-sm-9,
.form-group.field-adverse_media_check_url > .row > .col-sm-9,
.form-group.field-debt_judgement_check_url > .row > .col-sm-9,
.form-group.field-tax_compliance_check_url > .row > .col-sm-9,
.form-group.field-updated_at > .row > .col-sm-9,
/* All *_notes/*_comment/*_details/*_evidence/*_rationale TextField
   textareas across the shared _REVIEW_FIELDSETS block -- applies to both
   Individual and Business AML Review automatically. */
.form-group.field-frequency_comment > .row > .col-sm-9,
.form-group.field-purpose_of_relationship > .row > .col-sm-9,
.form-group.field-services_requested > .row > .col-sm-9,
.form-group.field-sanctions_notes > .row > .col-sm-9,
.form-group.field-bankruptcy_notes > .row > .col-sm-9,
.form-group.field-pep_notes > .row > .col-sm-9,
.form-group.field-adverse_media_notes > .row > .col-sm-9,
.form-group.field-debt_judgement_notes > .row > .col-sm-9,
.form-group.field-tax_compliance_notes > .row > .col-sm-9,
.form-group.field-service_risk_comment > .row > .col-sm-9,
.form-group.field-customer_profile_risk_comment > .row > .col-sm-9,
.form-group.field-geographic_exposure_risk_comment > .row > .col-sm-9,
.form-group.field-ownership_complexity_risk_comment > .row > .col-sm-9,
.form-group.field-delivery_channel_risk_comment > .row > .col-sm-9,
.form-group.field-pep_sanctions_media_risk_comment > .row > .col-sm-9,
.form-group.field-overall_risk_rating_comment > .row > .col-sm-9,
.form-group.field-changes_since_last_review > .row > .col-sm-9,
.form-group.field-red_flags_details > .row > .col-sm-9,
.form-group.field-resolution_steps > .row > .col-sm-9,
.form-group.field-key_mitigants > .row > .col-sm-9,
.form-group.field-decision_conditions > .row > .col-sm-9,
.form-group.field-edd_trigger_reason > .row > .col-sm-9,
.form-group.field-edd_additional_verification > .row > .col-sm-9,
.form-group.field-edd_enhanced_ownership_evidence > .row > .col-sm-9,
.form-group.field-edd_enhanced_rationale > .row > .col-sm-9,
.form-group.field-sow_sof_evidence > .row > .col-sm-9,
.form-group.field-what_checked > .row > .col-sm-9,
.form-group.field-action_taken > .row > .col-sm-9,
.form-group.field-reviewer_notes > .row > .col-sm-9,
.form-group.field-ubo_test_applied > .row > .col-sm-9,
/* Reviewed by / Signed off by -- FK staff-user selects, shared
   _REVIEW_FIELDSETS "Sign-off" block. */
.form-group.field-reviewed_by > .row > .col-sm-9,
.form-group.field-signed_off_by > .row > .col-sm-9,
.form-group.field-client_type > .row > .col-sm-9,
/* What do you need help with? -- FK select, same treatment as client_type
   right above it in the same Contact fieldset. */
.form-group.field-primary_service_interest > .row > .col-sm-9,
.form-group.field-is_active > .row > .col-sm-9,
.form-group.field-agreement_action > .row > .col-sm-9,
.form-group.field-intake_form_business_name > .row > .col-sm-9,
/* Individual AML Profile's "Link" fieldset (Reference, Client, Status,
   Client link, PDF, AML Reviews) -- reference/client_link/pdf_link/
   aml_reviews_link are shared field names also used on other AML admin
   pages (Company AML Profile, the Review admins), so this also makes
   those full-width -- they're plain links/buttons there, not bordered
   inputs, so low visual risk, but noting it since it's a global rule. */
.form-group.field-reference > .row > .col-sm-9,
.form-group.field-client > .row > .col-sm-9,
.form-group.field-status > .row > .col-sm-9,
.form-group.field-client_link > .row > .col-sm-9,
.form-group.field-pdf_link > .row > .col-sm-9,
.form-group.field-aml_reviews_link > .row > .col-sm-9,
/* Business AML Profile's "Link" fieldset -- Individual AML (persons_link)
   and its per-person tracking table (persons_detail). */
.form-group.field-persons_link > .row > .col-sm-9,
.form-group.field-persons_detail > .row > .col-sm-9,
/* Sole trader "Additional details" and Business Profile's "Nature of
   activity (NACE)" -- TextField textareas. */
.form-group.field-sole_trader_control_explanation > .row > .col-sm-9,
.form-group.field-nace_description > .row > .col-sm-9,
.form-group.field-high_risk_link_country_details > .row > .col-sm-9,
.form-group.field-high_risk_link_industry_details > .row > .col-sm-9,
.form-group.field-high_risk_link_individual_details > .row > .col-sm-9,
/* Ownership & Control -- JSONField widgets (raw [] textarea by default). */
.form-group.field-shareholding_structure > .row > .col-sm-9,
.form-group.field-ultimate_beneficial_owners > .row > .col-sm-9,
.form-group.field-control_without_ownership > .row > .col-sm-9,
.form-group.field-directors_list > .row > .col-sm-9,
/* Control other way / Source of funds / Source of wealth -- TextField
   textareas, same treatment as Notes. */
.form-group.field-control_other_way > .row > .col-sm-9,
.form-group.field-source_of_funds > .row > .col-sm-9,
.form-group.field-source_of_wealth > .row > .col-sm-9,
/* Regulatory & Risk -- all 10 "*_details" fields are TextField textareas,
   same treatment as Notes. */
.form-group.field-pep_details > .row > .col-sm-9,
.form-group.field-sanctions_details > .row > .col-sm-9,
.form-group.field-criminal_convictions_details > .row > .col-sm-9,
.form-group.field-bankruptcy_details > .row > .col-sm-9,
.form-group.field-insolvent_entities_details > .row > .col-sm-9,
.form-group.field-partnership_insolvency_details > .row > .col-sm-9,
.form-group.field-debt_judgement_details > .row > .col-sm-9,
.form-group.field-debt_resolution_details > .row > .col-sm-9,
.form-group.field-regulatory_actions_details > .row > .col-sm-9,
.form-group.field-tax_compliance_details > .row > .col-sm-9,
/* Outbound Leads -- Industry, Handled by (assigned_to), Stage, Lost reason,
   Referral out (referred_out_to). */
.form-group.field-industry > .row > .col-sm-9,
.form-group.field-assigned_to > .row > .col-sm-9,
.form-group.field-stage > .row > .col-sm-9,
.form-group.field-lost_reason > .row > .col-sm-9,
.form-group.field-referred_out_to > .row > .col-sm-9,
/* Source detail -- own row, full width. Name also exists on InboundLead
   (uses same field), likely fine there too but noting per usual. */
.form-group.field-source_detail > .row > .col-sm-9,
/* Additional detail -- lost_reason_detail, unpaired from proceeded, own row. */
.form-group.field-lost_reason_detail > .row > .col-sm-9,
/* Intake Form inline -- Change history readonly display, own row. */
.form-group.field-inline_snapshot_history > .row > .col-sm-9,
/* Inbound Leads -- Referral in (referred_by), FK select. */
.form-group.field-referred_by > .row > .col-sm-9,
/* Intake Form inline -- Client link (intake_link), Client portal PIN
   (portal_pin_section), Full form (admin_link) -- each contains a URL,
   button, or generated content that needs the row's full width. Not
   scoped by field name alone: intake_link/portal_pin_section/admin_link
   are unique to this inline so that's safe, but "submitted_at" also
   exists on IntakeFormAdmin's own full page (paired with created_at
   there) -- scoped to #intake_forms-group below instead so that pairing
   isn't broken. */
.form-group.field-intake_link > .row > .col-sm-9,
.form-group.field-portal_pin_section > .row > .col-sm-9,
.form-group.field-admin_link > .row > .col-sm-9,
/* Agreements -- Addenda for this client (addenda_tracker_display), a
   readonly table listing/deleting the client's addenda, plus the same
   per-addendum Service Lines/Signatories read-only summaries. */
.form-group.field-addenda_tracker_display > .row > .col-sm-9,
.form-group.field-addenda_service_lines_display > .row > .col-sm-9,
.form-group.field-addenda_signatories_display > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
#intake_forms-group .form-group.field-submitted_at > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* Client Types -- "Is active" is full width by the global .field-is_active
   exception above (a checkbox elsewhere with long help text), but on this
   page it's a plain Yes/No select with nothing to pair it with -- narrow it
   back down, scoped to this page only via the body's model-clienttype class
   so other is_active fields aren't affected. */
body.model-clienttype .form-group.field-is_active > .row > .col-sm-9 {
    grid-column: 2 !important;
}
/* Industries -- Name, full width. "name" is far too common a field name
   across the codebase to add to the global exceptions list, so scoped to
   this page only via the body's model-industry class. */
body.model-industry .form-group.field-name > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* Lost Reasons -- Name, full width. Same "name" collision reasoning as
   Industries above, scoped via model-lostreason. */
body.model-lostreason .form-group.field-name > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* Internal Processes (InternalProcessCategory) -- Department, FK select.
   Field name is unique to this model, safe as a global exception. */
.form-group.field-department > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* Internal Processes -- Name, full width. Same "name" collision reasoning
   as Industries/Lost Reasons above, scoped via model-internalprocesscategory. */
body.model-internalprocesscategory .form-group.field-name > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* Suppliers & Network -- Supplier & Network Collaboration section
   (Internal process category, Estimated time, Time Entry readonly
   displays). Field names unique to Supplier, safe as global exceptions.
   ("Handled by" / handled_by is already covered above.) */
.form-group.field-collaboration_category > .row > .col-sm-9,
.form-group.field-collab_estimated_time > .row > .col-sm-9,
.form-group.field-collab_record_button > .row > .col-sm-9,
/* Groups -- Permissions, Django's built-in dual-listbox (filter_horizontal)
   widget. Crammed into the narrow single-track default, its "Available
   permissions"/"Chosen permissions" labels and options wrap character by
   character. Needs the full row width to render as intended. */
.form-group.field-permissions > .row > .col-sm-9,
/* Clients -- Sub-processors, same dual-listbox widget (filter_horizontal). */
.form-group.field-sub_processors > .row > .col-sm-9,
/* Clients -- Assigned staff, same dual-listbox widget (filter_horizontal). */
.form-group.field-assigned_staff > .row > .col-sm-9,
/* Agreements -- Service provider, FK select. Name also exists on Invoices
   (FK select too) and a plain CharField on services.Service, likely fine
   full width in all three but noting per usual. */
.form-group.field-service_provider > .row > .col-sm-9,
/* Agreements -- Proposal, FK select. Name also exists on ProposalLine/
   ProposalResponse, likely fine full width there too but noting per usual. */
.form-group.field-proposal > .row > .col-sm-9,
/* Service Brief -- Director IT Registration inline's "Director form link"
   readonly display. Field name unique to this inline. */
.form-group.field-form_link > .row > .col-sm-9,
/* Registrations -- Registration type. Field name unique to this model. */
.form-group.field-registration_type > .row > .col-sm-9,
/* Limited Authority Letter -- Staff signatory, FK select. Field name
   unique to this model. */
.form-group.field-staff_signatory > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* Users -- Django's built-in change form (RizFinUserAdmin extends UserAdmin,
   no custom fieldsets). Password's algorithm/hash display, the Active/Staff
   status/Superuser status checkboxes' long help text, and the User
   permissions dual-listbox (same widget/issue as Groups' Permissions field
   above) all need full width. is_active/is_staff/is_superuser/password are
   far too common to add as global exceptions, so scoped to this page via
   the body's model-user class; groups/user_permissions field names are
   unique enough (user_permissions definitely; groups also used by
   Group.permissions's own page but that's a different field there). */
body.model-user .form-group.field-password > .row > .col-sm-9,
body.model-user .form-group.field-is_active > .row > .col-sm-9,
body.model-user .form-group.field-is_staff > .row > .col-sm-9,
body.model-user .form-group.field-is_superuser > .row > .col-sm-9,
.form-group.field-user_permissions > .row > .col-sm-9,
.form-group.field-groups > .row > .col-sm-9,
/* People Profile inline (on Users) -- Grade, FK select. Field name unique
   to UserProfile. */
.form-group.field-grade > .row > .col-sm-9,
/* Token -- readonly UUID identifier, same shape/purpose (long generated
   value, always full width) across every model that has one (AML, leads,
   proposals, service_delivery), so a single global exception covers all. */
.form-group.field-token > .row > .col-sm-9 {
    grid-column: 2 / 5 !important;
}
/* ── Help text / field hints ─────────────────────────────────────────────────── */
.help, p.help, .helptext, .help-block,
.field-box .help, div.help {
    font-size: var(--rizfin-fs-sm) !important;
    font-family: var(--rizfin-font-body) !important;
    color: var(--rizfin-muted-mid) !important;
}

/* ── Form focus & autocomplete ────────────────────────────────────────────────── */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--rizfin-gold) !important;
    box-shadow: var(--rizfin-shadow-focus) !important;
}


.select2-container--admin-autocomplete .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid var(--rizfin-border-input) !important;
    border-radius: var(--rizfin-radius-xs) !important;
    min-height: var(--rizfin-input-h) !important;
    padding: var(--rizfin-sp-1) var(--rizfin-sp-2) !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--admin-autocomplete .select2-selection:focus,
.select2-container--admin-autocomplete.select2-container--focus .select2-selection {
    border-color: var(--rizfin-gold) !important;
    box-shadow: var(--rizfin-shadow-focus) !important;
    outline: none !important;
}

/* ── Login page ──────────────────────────────────────────────────────────────── */
.login-page {
    background: url("/static/images/Full-Page Version of Cover Design.73493414d093.webp?v=3") no-repeat center center fixed !important;
    background-size: cover !important;
}


.login-logo,
.login-logo img {
    display: none !important;
}


.login-card-body,
.card.card-outline.card-primary {
    background: var(--rizfin-white-92) !important;
    border-radius: var(--rizfin-radius-lg) !important;
    border-top: 4px solid var(--rizfin-gold) !important;
    box-shadow: var(--rizfin-shadow-card) !important;
}


.login-box-msg {
    font-size: 0 !important;
}

.login-box-msg::before {
    content: "Welcome to RizFin Administration";
    display: block;
    font-family: var(--rizfin-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--rizfin-ls-button) !important;
    font-weight: 700 !important;
    color: var(--rizfin-teal) !important;
    font-size: var(--rizfin-fs-title) !important;
}


.login-card-body .btn-primary {
    background-color: var(--rizfin-gold) !important;
    border-color: var(--rizfin-gold) !important;
    font-family: var(--rizfin-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--rizfin-ls-nav) !important;
}


/* This div is Jazzmin's password-reset-link wrapper -- it only renders in the
   DOM at all when 'admin_password_reset' resolves as a URL. Before that URL
   existed, this slot was always empty, so it got reused to display a tagline
   instead via ::after. Now that the URL is wired up (so locked-out staff can
   self-recover), :empty scopes the tagline hack to only the case where the
   real reset link truly isn't there -- once it exists, this rule no longer
   matches and the real link (styled below) shows instead. */
.login-page .text-center:empty {
    font-size: 0 !important;
}

.login-page .text-center:empty::after {
    content: "RizFin Financial Management System";
    font-size: var(--rizfin-fs-compact) !important;
    font-family: var(--rizfin-font-body) !important;
    color: var(--rizfin-white) !important;
    letter-spacing: var(--rizfin-ls-tight);
}

.login-page .text-center a {
    font-size: var(--rizfin-fs-compact) !important;
    font-family: var(--rizfin-font-body) !important;
    color: var(--rizfin-teal) !important;
    text-decoration: underline;
}

.login-page input[readonly] {
    background: var(--rizfin-soft, #f4f6f6) !important;
    color: var(--rizfin-muted-mid, #6b7280) !important;
    cursor: not-allowed;
}

.login-page-copyright {
    display: block;
    width: fit-content;
    margin: var(--rizfin-sp-2) auto 0;
    padding: 6px 16px;
    border-radius: var(--rizfin-radius-sm, 4px);
    background: rgba(13, 63, 62, 0.65);
    text-align: center;
    font-family: var(--rizfin-font-body) !important;
    font-size: 11px !important;
    color: var(--rizfin-white-92) !important;
}

/* ── Collapsible sidebar ─────────────────────────────────────────────────────── */
#jazzy-navigation .nav-header:hover {
    color: var(--rizfin-gold) !important;
}

/* ── Inline field overrides (Lead, Supplier, People Profile) ─────────────────── */
.model-lead .field-mobile_country_code input {
    width: 90px !important;
    min-width: 90px !important;
}
.model-lead .field-phone input {
    width: 200px !important;
}

/* ── Individual AML Profile inlines (Roles, Charges, AML Documents) ──────────── */
/* Title (AMLDocument) has no minimum width -- with only a short header and a
   width:100% input, the browser's table column auto-sizing algorithm can
   collapse it far narrower than every other column in the same row when
   competing for space (e.g. against the wider "Choose file" button).
   min-width stops that regardless of what else is in the row. */
#aml_documents-group td.field-title { min-width: 150px; }

/* Date appointed/resigned (Roles) and Date registered (Charges): forcing
   the date input to width:100% of its table cell (the general
   .inline-related rule above) leaves no room for the "Today | calendar"
   shortcut link Django renders inline right after it, so they visually
   overlap into the next column. Scoped to just these 2 groups (not a
   change to the general .inline-related rule) since other tabular inlines
   elsewhere may already look fine with the 100% treatment and haven't been
   reviewed. */
#roles-group input.vDateField,
#charges-group input.vDateField {
    width: auto !important;
    max-width: 140px !important;
}

/* min-width on Title (above) can make this table's natural content width
   exceed the card -- contain it with horizontal scroll instead of letting
   it spill past the card's border, same pattern as .card.docs-inline
   elsewhere in this file. */
#roles-group,
#charges-group,
#aml_documents-group,
#responses-group,
#attachments-group {
    overflow-x: auto;
    max-width: 100%;
}

/* Role type / Verification method selects: the general .inline-related
   select rule sets width:100%, but a table with table-layout:auto (the
   browser default) recalculates each column's width based on its content
   on every render -- and a <select>'s "content width" depends on whichever
   option is currently chosen, so picking "Shareholder" vs "Secretary"
   visibly resizes the box and reflows the whole table. A genuinely fixed
   pixel width (not 100%, not auto) is immune to that, matching the same
   fixed-not-flexible principle used for vTextField elsewhere in this file. */
#roles-group select,
#charges-group select {
    width: 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    box-sizing: border-box;
}
/* Document type's options run up to ~52 characters (e.g. "Constitution /
   Memorandum & Articles of Association") -- 180px truncated them. This
   table already scrolls horizontally (#aml_documents-group overflow-x:auto
   above), so a wider fixed value is fine here rather than sharing Roles'
   180px. */
#aml_documents-group select {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
}

/* Name/Role type still shifted even with the select itself fixed -- because
   this table uses the browser default table-layout:auto, which
   recalculates EVERY column together, as one unit, whenever ANY cell's
   content width changes (not just the one being interacted with). A truly
   stable layout needs table-layout:fixed with explicit widths on every
   column, not just the ones that looked obviously wrong -- same pattern as
   #lines-group elsewhere in this file. Trying this on Roles only for now. */
#roles-group table { table-layout: fixed; width: 100%; }
#roles-group th.original,
#roles-group td.original { width: 4%; padding: 0 4px; }
#roles-group th.column-name        { width: 22%; }
#roles-group th.column-role_type   { width: 20%; }
#roles-group th.column-date_appointed { width: 22%; }
#roles-group th.column-date_resigned  { width: 22%; }
#roles-group th:last-child         { width: 10%; }
/* Charges' table is auto-layout (not given the fixed-column treatment
   above), and its content (Charge holder/Amount/Date) is sparse enough
   that the browser can render the table narrower than the full card --
   the add-row button floats correctly to ITS table's edge, but that edge
   falls short of the card's visual full width. Forcing width:100% (without
   needing the full table-layout:fixed column setup Roles has) stretches it
   to match. */
#charges-group table { width: 100%; }
#roles-group td { word-break: break-word; white-space: normal; overflow: visible; }
#roles-group td input { min-width: 0 !important; box-sizing: border-box; }

/* "Add another X" button (Jazzmin's own float-end styling, change_form.js)
   sits inside a <td colspan> spanning the whole table -- the cell's own
   default padding pulls the floated button in short of the table's true
   right edge. Removing it here lets the button reach the actual full-width
   boundary instead of stopping a few px short.
   NOTE: display:flex on this <td> was tried and reverted -- it breaks the
   browser's table layout model entirely (a flex <td> stops participating
   in the table's column grid), which visibly broke every row above it, not
   just the button. Do not retry that approach here. */
#roles-group tr.add-row td,
#charges-group tr.add-row td,
#aml_documents-group tr.add-row td {
    padding-right: 0 !important;
}


/* white-space:normal/word-break here used to control File-cell wrapping,
   but the newer #documents-group .table td { white-space: nowrap !important }
   rule further down now overrides it (nowrap also makes word-break moot) --
   only max-width still does anything, so that's all that's kept here. The
   nested a/span/p rule is NOT dead despite the same nowrap override: a
   child's own explicit style always wins over an inherited ancestor value,
   so its white-space:normal still applies regardless of the td's nowrap. */
body.model-supplier #documents-group td.field-file {
    max-width: 160px;
}
body.model-supplier #documents-group td.field-file a,
body.model-supplier #documents-group td.field-file span,
body.model-supplier #documents-group td.field-file p {
    word-break: break-all;
    white-space: normal;
    display: block;
}
body.model-supplier #documents-group td.field-label,
body.model-supplier #documents-group th.column-label {
    max-width: 220px;
}


#attachments-group td.field-file {
    max-width: 200px;
    word-break: break-all;
    white-space: normal;
}
#attachments-group td.field-file a,
#attachments-group td.field-file span,
#attachments-group td.field-file p {
    word-break: break-all;
    white-space: normal;
    display: block;
}
#attachments-group td.field-file_link {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#attachments-group td.field-file_link a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#service_interests-group td.field-notes textarea {
    width: 100%;
    height: var(--rizfin-input-h);
    min-height: unset;
    max-height: 100px;
    resize: vertical;
    box-sizing: border-box;
}
#service_interests-group td {
    vertical-align: top;
    overflow: hidden;
}
#service_interests-group .tabular {
    overflow: hidden;
}

/* ── Inline tabular tables — prevent cell overflow ───────────────────────────── */
.inline-related .tabular td { overflow: hidden; }
.inline-related .tabular td select { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Fixed layout with real pixel widths that add up past the card's width on
   purpose -- table-layout:auto let the browser shrink every column back down
   to fit the container instead of actually overflowing (no real scroll ever
   appeared, columns just got squeezed again, e.g. Service unreadably narrow).
   Fixed layout respects these widths exactly regardless of content, and
   width:auto on the table (not 100%) lets it size to the sum of columns,
   genuinely wider than the card -- #lines-group's overflow-x:auto then
   produces a real horizontal scrollbar instead of a no-op. */
#lines-group { display: block !important; overflow-x: auto !important; width: 100% !important; max-width: 100% !important; }
#lines-group table { table-layout: fixed !important; width: 1640px !important; }
#lines-group th.original { width: 0; padding: 0; }
#lines-group td.original { width: 0; padding: 0; overflow: hidden; }
#timeentry_set-group th.original { min-width: 60px; }
#timeentry_set-group td.original { min-width: 60px; overflow: visible; }
#lines-group th.column-ordering    { width: 70px !important; }
#lines-group th.column-service     { width: 410px !important; }
#lines-group th.column-_tier       { width: 260px !important; }
#lines-group th.column-description { width: 410px !important; }
#lines-group th.column-frequency   { width: 130px !important; }
#lines-group th.column-fee         { width: 130px !important; }
#lines-group th.column-status,
#lines-group th.column-status_display { width: 130px !important; }
#lines-group th:last-child         { width: 90px !important; }
#lines-group th,
#custom_fees-group th { white-space: nowrap; padding-right: 10px; box-sizing: border-box; }
/* Custom Quote Fees -- same overflow/fixed-layout mechanics as
   #lines-group (see the comment above), just a narrower fixed width and
   only the 4 columns this table actually has (service/description/
   frequency/fee) -- Ordering, Pricing Tier, and Status don't exist here,
   see ProposalCustomFeeInline for why. */
#custom_fees-group { display: block !important; overflow-x: auto !important; width: 100% !important; max-width: 100% !important; }
#custom_fees-group table { table-layout: fixed !important; width: 1080px !important; }
#custom_fees-group th.original { width: 0; padding: 0; }
#custom_fees-group td.original { width: 0; padding: 0; overflow: hidden; }
#custom_fees-group th.column-service     { width: 410px !important; }
#custom_fees-group th.column-description { width: 410px !important; }
#custom_fees-group th.column-frequency   { width: 130px !important; }
#custom_fees-group th.column-fee         { width: 130px !important; }
#custom_fees-group td { word-break: break-word; white-space: normal; vertical-align: top; }
#custom_fees-group td select, #custom_fees-group td input { width: 100%; min-width: 0; box-sizing: border-box; }
/* top-aligned so a row that grows taller than the others -- e.g. the
   Service cell wrapping to multiple lines under the "+ Add N related
   services" bundle prompt -- doesn't visually shift every other cell in
   that row down to stay vertically centered against it. */
#lines-group td { word-break: break-word; white-space: normal; vertical-align: top; }
#lines-group td select, #lines-group td input { width: 100%; min-width: 0; box-sizing: border-box; }
/* Frequency's genuine read-only text display, shown in place of the real
   <select> whenever it's catalog-derived (see setFrequencyLocked in
   proposal_admin.js) -- the real <select> stays in the DOM hidden (still
   submits with the form), this is purely the visible stand-in so it never
   reads as an editable dropdown that just happens to be blocked. */
#lines-group .proposal-line-frequency-readonly {
    display: block;
    padding: 6px 8px;
    background: #f0f0f0;
    color: #888;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 1.4;
}
/* !important -- an inline style.display='none' on the real <select> was
   found to not reliably stick (something else in this admin page re-shows
   it), so the hide is enforced here instead, where nothing without its
   own !important can override it. */
#lines-group select.proposal-line-frequency-hidden,
#lines-group span.proposal-line-frequency-hidden {
    display: none !important;
}
/* Fee's catalog-derived read-only state (see setFeeLocked in
   proposal_admin.js) -- unlike Frequency, Fee is a plain text <input>
   toggled `readOnly` directly, so this just needs to visually match the
   same "derived, not editable" look Frequency's read-only span already
   uses, not a hide/swap. */
#lines-group input.proposal-line-fee-readonly {
    background: #f0f0f0;
    color: #888;
    cursor: default;
}
/* "+ Add N related services" prompt (see showBundlePrompt in
   proposal_admin.js) -- sits under the Service select in its own cell,
   small and clearly secondary so it doesn't compete with the field itself. */
#lines-group .proposal-line-bundle-prompt { margin-top: 6px; }
#lines-group .proposal-line-bundle-prompt a {
    font-size: 11px;
    color: var(--rizfin-gold, #d29a49);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    display: inline-block;
}
#lines-group .proposal-line-bundle-prompt a:hover { text-decoration: underline; }
/* Delete column: existing rows show a checkbox, freshly-added extra rows
   show a "Remove" link instead (Django's own formset convention) -- align
   both the same way so the column doesn't jump between row types. The
   checkbox must be excluded from the generic td-input width:100% rule
   above, otherwise it stretches to fill the cell and margin:auto centering
   has no visible effect. */
#lines-group th:last-child { text-align: center; }
#lines-group td:last-child { text-align: center; vertical-align: top; padding-top: 8px; }
#lines-group td:last-child input[type="checkbox"] { width: auto !important; height: 16px; margin: 0 auto !important; display: block; }


/* Activity Log is a real <table> now (LeadActivityInline is a
   TabularInline, not Stacked). Same pattern as the AML Documents/Roles/
   Charges inlines above: let the browser's natural table-layout:auto
   column sizing do its job (based on content), and scroll horizontally
   instead of squeezing columns to fit the card -- table-layout:fixed +
   percentage widths was tried first and looked broken (see the AML
   Documents inline's overflow-x:auto comment above for why). The rules
   below just flatten Django's redundant nested fieldset.card wrapper and
   keep the SplitDateTimeField sub-widgets compact. */
#activities-group > fieldset.card {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
#activities-group > fieldset.card > .card-body {
    padding: 0;
}
#activities-group {
    overflow-x: auto;
    max-width: 100%;
}
#activities-group td.field-summary,
#activities-group td.field-notes {
    min-width: 220px;
}
#activities-group td.field-summary textarea,
#activities-group td.field-notes textarea {
    width: 100%;
    height: var(--rizfin-input-h);
    min-height: unset;
    max-height: 100px;
    resize: vertical;
    box-sizing: border-box;
}
#activities-group select {
    width: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    box-sizing: border-box;
}
#activities-group td.field-date {
    white-space: nowrap;
}
#activities-group td.field-date p.datetime {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rizfin-sp-1) var(--rizfin-sp-2);
    align-items: center;
    margin: 0;
}
#activities-group td.field-date p.datetime br { display: none; }
#activities-group td.field-date input.vDateField,
#activities-group td.field-date input.vTimeField {
    width: 90px !important;
    min-width: 90px !important;
    flex-shrink: 0;
}

/* ── Services list — column widths ─────────────────────────────────────────── */
.model-service #result_list th.column-code,
.model-service #result_list td.field-code,
.model-service #result_list th.column-client_type,
.model-service #result_list td.field-client_type,
.model-service #result_list th.column-category,
.model-service #result_list td.field-category {
    white-space: nowrap;
}

.model-service #result_list th.column-code,
.model-service #result_list td.field-code {
    min-width: 130px;
}

.model-service #result_list th.column-billable_badge,
.model-service #result_list td.field-billable_badge,
.model-service #result_list th.column-active_badge,
.model-service #result_list td.field-active_badge {
    white-space: nowrap;
    width: 90px;
    text-align: center;
}

/* ── Changelist controls ─────────────────────────────────────────────────────── */
#change-list-filters .d-flex {
    align-items: flex-start !important;
}


.object-tools .btn.btn-sm,
ul.object-tools li a {
    padding: var(--rizfin-sp-1) var(--rizfin-sp-3) !important;
    font-size: var(--rizfin-fs-sm) !important;
}


#changelist-form .btn,
#changelist-search .btn,
.change-list-actions .btn,
.date-hierarchy a,
.btn.btn-sm {
    font-size: var(--rizfin-fs-sm) !important;
    padding: var(--rizfin-sp-1) var(--rizfin-sp-2) !important;
    white-space: nowrap !important;
}


#changelist select,
#changelist input,
#changelist button,
#changelist a.btn,
#changelist-form select,
#changelist-form input,
#changelist-form button,
#changelist-form a.btn,
#changelist-search select,
#changelist-search input,
#changelist-search button,
#changelist-search a.btn,
.change-list-actions select,
.change-list-actions input,
.change-list-actions button,
.change-list-actions a.btn {
    font-size: var(--rizfin-fs-sm) !important;
    padding: var(--rizfin-sp-1) var(--rizfin-sp-2) !important;
    height: auto !important;
}


#change-list-filters summary,
#change-list-filters .form-group summary {
    font-size: var(--rizfin-fs-sm) !important;
    padding: var(--rizfin-sp-1) var(--rizfin-sp-2) !important;
}


#result_list td span,
#result_list td a,
#result_list td,
#result_list th span,
#result_list th a,
#result_list th {
    font-size: var(--rizfin-fs-sm) !important;
}



.model-userprofile .field-leave_policy .related-widget-wrapper,
.model-userprofile .field-leave_policy select {
    max-width: 320px !important;
    width: 320px !important;
}


.model-userprofile .field-weekly_hours input,
.model-userprofile .field-max_annual_hours input {
    width: 200px !important;
    border: 1px solid var(--rizfin-border-input) !important;
    border-radius: var(--rizfin-radius-xs) !important;
    padding: var(--rizfin-sp-1) var(--rizfin-sp-3) !important;
    font-size: var(--rizfin-fs-widget) !important;
    font-family: var(--rizfin-font-body) !important;
    color: var(--rizfin-charcoal) !important;
    background-color: var(--rizfin-white) !important;
}


.card.docs-inline {
    overflow: hidden !important;
    max-width: 100% !important;
}
.card.docs-inline .card-body {
    overflow-x: auto !important;
    padding: 0 !important;
}


/* overflow-x:auto on the group div itself (not just the .card-body) plus
   fixed-width cells/inputs under the browser's DEFAULT table-layout:auto --
   NOT table-layout:fixed + width:100%, which just shrinks columns to fit
   the card instead of scrolling. Same proven pattern as
   #aml_documents-group elsewhere in this file. */
body.model-supplier #documents-group {
    overflow-x: auto;
    max-width: 100%;
}
body.model-supplier #documents-group .table {
    font-size: var(--rizfin-fs-compact) !important;
}
body.model-supplier #documents-group .table th,
body.model-supplier #documents-group .table td {
    padding: 3px var(--rizfin-sp-2) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
/* Extra breathing room before No. of emails -- must come after the general
   padding rule above (equal specificity, so source order decides; this
   needs to win). */
body.model-supplier #documents-group td.field-label,
body.model-supplier #documents-group th.column-label {
    padding-right: var(--rizfin-sp-4) !important;
}
body.model-supplier #documents-group .table select { width: 140px !important; min-width: 140px !important; box-sizing: border-box; }
body.model-supplier #documents-group .table input[type="text"],
body.model-supplier #documents-group .table input.vTextField { width: 180px !important; min-width: 180px !important; box-sizing: border-box; }
body.model-supplier #documents-group .table input[type="number"] { width: 90px !important; min-width: 90px !important; box-sizing: border-box; }
body.model-supplier #documents-group .table input[type="file"] {
    width: 150px !important;
    min-width: 150px !important;
    overflow: hidden !important;
}
body.model-supplier #documents-group .table input[type="file"]::file-selector-button {
    font-size: var(--rizfin-fs-sm) !important;
    padding: 2px var(--rizfin-sp-1) !important;
}
body.model-supplier #documents-group td.field-file_link,
body.model-supplier #documents-group td.field-total_hours_display,
body.model-supplier #documents-group td.field-uploaded_at { min-width: 130px; }
/* Open (file_link) -- now just a plain "Open" link (filename moved to the
   Label/Description placeholder instead), so this column only needs to be
   as wide as that word. Django's tabular.html puts the field-X class on
   the <td> but a different column-X class on the header <th> -- under
   table-layout:auto the column's actual computed width is driven by BOTH
   cells, so the <th> needs the same constraint too. */
body.model-supplier #documents-group th.column-file_link,
body.model-supplier #documents-group td.field-file_link {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.model-supplier #documents-group td.field-file_link a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Changelist table — horizontal scroll + overflow cue ──────────────────── */
#result_list {
    width: 100%;
    min-width: max-content;
}


.card-body.table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(245,247,246,0.95));
    opacity: 0;
}
.card-body.table-responsive.is-overflowing::after {
    opacity: 1;
}


.content-wrapper .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


#changelist .card,
#changelist-form .card {
    overflow: visible !important;
}
#changelist .card-body,
#changelist-form .card-body {
    overflow-x: auto !important;
    position: relative;
}


#result_list thead th:nth-child(1),
#result_list tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rizfin-white);
    box-shadow: 2px 0 4px rgba(13,63,62,0.07);
}

/* ── Custom admin page — shared layout ───────────────────────────────────── */
.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rizfin-sp-4);
}
.page-header-row h2 { margin: 0; font-size: var(--rizfin-fs-heading); color: var(--rizfin-teal); }
.page-back-link { color: var(--rizfin-sage); font-size: var(--rizfin-fs-widget); }
.page-back-link:hover { color: var(--rizfin-gold); }

/* ── Summary pages (category_summary, registrations summary) ─────────────── */
.summary-title { font-size: var(--rizfin-fs-heading); }

.summary-nav {
    display: flex;
    gap: var(--rizfin-sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--rizfin-sp-4);
}

.summary-toolbar { margin-bottom: var(--rizfin-sp-3); }


.summary-card .card-body { padding: 0; }
.summary-card #result_list { width: 100%; min-width: max-content; margin: 0; }


.btn-nav {
    background: var(--rizfin-cream);
    color: var(--rizfin-muted-mid);
    padding: var(--rizfin-sp-1) var(--rizfin-sp-2);
    border-radius: var(--rizfin-radius-sm);
    text-decoration: none;
    font-size: var(--rizfin-fs-sm);
    white-space: nowrap;
}
.btn-nav.active {
    background: var(--rizfin-teal);
    color: var(--rizfin-white);
}


.btn-action {
    color: var(--rizfin-white);
    padding: var(--rizfin-sp-1) var(--rizfin-sp-2);
    border-radius: var(--rizfin-radius-sm);
    text-decoration: none;
    font-size: var(--rizfin-fs-sm);
    white-space: nowrap;
}

.btn-action-teal     { background: var(--rizfin-teal); }
.btn-action-gold     { background: var(--rizfin-gold); }
.btn-action-ext      { background: var(--rizfin-external); }
.btn-action-danger   { background: var(--rizfin-danger); }
.btn-action-sage     { background: var(--rizfin-sage); }
.btn-action-block    { flex:1; display:block; padding:var(--rizfin-sp-2) var(--rizfin-sp-3); text-align:center; font-size:inherit; }


.cl-search-input { width: auto; min-width: 250px; align-self: center; }
.cl-filter-bar   { align-items: flex-start; }


.sum-th-left { text-align: left; }
.sum-link     { color: var(--rizfin-teal); }
.fw-medium    { font-weight: 500; }
.sum-empty    { color: var(--rizfin-muted-light); }
.sum-empty-row { text-align: center; color: var(--rizfin-muted); padding: var(--rizfin-sp-6); }

/* ── Calendar page layout ────────────────────────────────────────────────── */
.cal-page-wrap   { width: 100%; }
.cal-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--rizfin-sp-4); }
.cal-page-title  { font-family: var(--rizfin-font-heading); color: var(--rizfin-teal); margin: 0; font-size: var(--rizfin-fs-heading); }

/* ── Calendar shared — period nav + type filters ───────────────────── */
#period-tabs     { display:flex; border-bottom:1px solid var(--rizfin-cream); }
.period-tab      { flex:1; text-align:center; padding:var(--rizfin-sp-3) var(--rizfin-sp-2); font-family:var(--rizfin-font-heading); font-size:var(--rizfin-fs-sm); text-transform:uppercase; letter-spacing:var(--rizfin-ls-heading); border:none; background:var(--rizfin-teal-bg); border-bottom:3px solid transparent; margin-bottom:-1px; color:var(--rizfin-muted-light); }
.period-tab.active { color:var(--rizfin-gold); border-bottom-color:var(--rizfin-gold); background:var(--rizfin-white); }
.type-toggle     { display:inline-flex; align-items:center; gap:var(--rizfin-sp-2); padding:var(--rizfin-sp-2) var(--rizfin-sp-4); border-radius:var(--rizfin-radius-pill); border:2px solid transparent; font-size:var(--rizfin-fs-compact); font-family:var(--rizfin-font-heading); text-transform:uppercase; letter-spacing:var(--rizfin-ls-tight); }
.type-toggle .dot { width:var(--rizfin-sp-3); height:var(--rizfin-sp-3); border-radius:var(--rizfin-radius-full); display:inline-block; }
.type-toggle--sage { background:var(--rizfin-teal-bg); border-color:var(--rizfin-sage); color:var(--rizfin-sage); }
.type-toggle--gold { background:var(--rizfin-amber-bg); border-color:var(--rizfin-gold); color:var(--rizfin-gold); }
.type-toggle--ext  { background:var(--rizfin-teal-bg); border-color:var(--rizfin-external); color:var(--rizfin-external); }
.cal-list-link   { color: var(--rizfin-sage); font-size: var(--rizfin-fs-widget); }
.filter-legend   { font-size: var(--rizfin-fs-sm); text-transform: uppercase; letter-spacing: var(--rizfin-ls-button); color: var(--rizfin-muted-light); margin-right: 2px; }
.filter-divider  { width: 1px; height: var(--rizfin-sp-6); background: var(--rizfin-border); display: inline-block; margin: 0 var(--rizfin-sp-1); vertical-align: middle; }
.filter-total    { font-size: var(--rizfin-fs-compact); color: var(--rizfin-teal); margin-left: var(--rizfin-sp-1); }
.dot-sage { background: var(--rizfin-sage); }
.dot-gold { background: var(--rizfin-gold); }
.dot-ext  { background: var(--rizfin-external); }

.page-wrap-sm { max-width: var(--rizfin-page-sm); }

/* ── Filter dropdown ────────────────────────────────────────────────────── */
.filter-wrap     { margin-bottom: var(--rizfin-sp-2); position: relative; }
.filter-summary  { display: flex; justify-content: space-between; align-items: center; padding: var(--rizfin-sp-1) var(--rizfin-sp-3); background: var(--rizfin-white); border: 1px solid var(--rizfin-border-input); border-radius: var(--rizfin-radius-xs); font-size: var(--rizfin-fs-widget); color: var(--rizfin-muted-mid); list-style: none; user-select: none; width: 180px; }
.filter-label    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chevron  { font-size: var(--rizfin-fs-sm); color: var(--rizfin-muted-light); margin-left: var(--rizfin-sp-1); flex-shrink: 0; }
.filter-list     { position: absolute; z-index: 1000; list-style: none; margin: 0; padding: var(--rizfin-sp-1) 0; border: 1px solid var(--rizfin-border-input); border-radius: var(--rizfin-radius-xs); background: var(--rizfin-white); max-height: 300px; overflow-y: auto; min-width: 180px; max-width: 520px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.filter-choice   { display: flex; align-items: center; gap: var(--rizfin-sp-2); padding: 5px var(--rizfin-sp-3); color: var(--rizfin-muted-mid); text-decoration: none; font-size: var(--rizfin-fs-widget); white-space: nowrap; }
.filter-choice.selected { background: var(--rizfin-amber-bg); }
.filter-tick     { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px; font-size: var(--rizfin-fs-sm); }
.filter-tick.selected   { background: var(--rizfin-gold); color: var(--rizfin-white); border: 1px solid var(--rizfin-gold); }
.filter-tick.unselected { background: var(--rizfin-white); color: transparent; border: 1px solid var(--rizfin-border-input); }

/* ── Value state colours ─────────────────────────────────────────────────── */
.val-over  { color: var(--rizfin-danger); }
.val-ok    { color: var(--rizfin-success); }
.val-muted { color: var(--rizfin-muted); }
.val-na    { color: var(--rizfin-muted-light); }
.fw-bold   { font-weight: 700; }

/* ── Shared admin list-view links (used across aml/leads/proposals/service_delivery admin.py) ──────── */
.rz-muted-note { color: var(--rizfin-muted-light); font-size: 11px; }
.rz-warn-note  { color: var(--rizfin-warn); font-size: 11px; }
.rz-table         { border-collapse: collapse; }
.rz-table-cell,
.rz-table-header   { text-align: left; padding: 3px 8px; }
.rz-muted-bold { color: var(--rizfin-muted); font-size: 11px; font-weight: 600; } /* e.g. "Not Proceeding" state label */
.rz-link-open  { font-size: 11px; color: var(--rizfin-teal); font-weight: 600; }
.rz-copy-btn   { font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--rizfin-border-input); border-radius: 3px; cursor: pointer; background: var(--rizfin-white); }
.rz-link-sage  { color: var(--rizfin-sage); font-weight: 600; }
.rz-link-gold  { color: var(--rizfin-gold); font-weight: 600; }
.rz-link-teal   { color: var(--rizfin-teal); font-weight: 600; }
.rz-link-danger-sm { color: var(--rizfin-danger); font-size: 11px; } /* e.g. "✕ Not Proceeding" action link */
.rz-link-purple { color: var(--rizfin-external); font-weight: 600; } /* "Queried" status accent -- not part of the teal/gold/sage palette, kept as-is */
.rz-btn-teal-solid { background: var(--rizfin-teal); color: var(--rizfin-white); padding: 3px 10px; border-radius: 4px; font-weight: 600; font-size: 10.5px; text-decoration: none; }

/* Agreements -- signatory Name/Role inputs, greyed out when Source isn't
   "Custom" (agreement_signatory_admin.js) since AgreementSignatory.save()
   overwrites them from the client/service-provider default anyway. */
.rz-readonly-signatory { background: var(--rizfin-bg-muted, #f2f2f2); color: var(--rizfin-muted, #777); cursor: not-allowed; }

/* ── Agreement change page inlines -- fixed-column layout ────────────────────
   Same table-layout:fixed + explicit % widths pattern as #lines-group/
   #roles-group: browser default table-layout:auto recalculates every column
   together whenever any cell's content changes, so "Display order" (an
   IntegerField -- renders <input type="number"> with no width-controlling
   class at all) ends up much wider than a 1-2 digit value needs, throwing
   off every other column's alignment. ClientSignatoryInline and
   ServiceProviderSignatoryInline both use the AgreementSignatory model, so
   Django auto-suffixes the second one's id (#signatories-group and
   #signatories-2-group) rather than colliding -- both are targeted
   everywhere below since they need identical column treatment.
   [id$="..."] (ends-with) rather than a plain #id selector: the CSA+DPA
   combined view (client_combined_view) namespaces every id with csa-/dpa-
   (e.g. #csa-signatories-group) so the two sides' identical inline names
   don't collide -- ends-with still matches those prefixed ids as well as
   the plain ones on each type's own single-object change page. */
[id$="exclusions-group"] table,
[id$="selected_blocks-group"] table,
[id$="signatories-group"] table,
[id$="signatories-2-group"] table,
[id$="agreement_sub_processors-group"] table {
    table-layout: fixed;
    width: 100%;
}

/* Service Lines: percentage columns can't guarantee the Service select
   (plus its 4 related-widget-wrapper icons) stays readable at every card
   width, so give columns fixed minimum widths and let the row scroll
   horizontally within the card instead of squeezing anything. */
[id$="service_lines-group"] .tabular.inline-related {
    overflow-x: auto;
}
[id$="service_lines-group"] table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}
[id$="exclusions-group"] th.original, [id$="exclusions-group"] td.original,
[id$="selected_blocks-group"] th.original, [id$="selected_blocks-group"] td.original,
[id$="signatories-group"] th.original, [id$="signatories-group"] td.original,
[id$="signatories-2-group"] th.original, [id$="signatories-2-group"] td.original,
[id$="agreement_sub_processors-group"] th.original, [id$="agreement_sub_processors-group"] td.original {
    width: 0;
    padding: 0;
    overflow: hidden;
}
/* table-layout:auto (see above) ignores width:0 on th/td.original since it
   still has content (the "+" new-row icon) to size around -- display:none
   removes it from layout entirely instead, same visual result as the
   fixed-layout tables get from width:0. */
[id$="service_lines-group"] th.original, [id$="service_lines-group"] td.original {
    display: none;
}

[id$="exclusions-group"] th.column-display_order { width: 8%; }
[id$="exclusions-group"] th.column-text          { width: 77%; }
[id$="exclusions-group"] th:last-child           { width: 15%; }

[id$="service_lines-group"] th.column-display_order    { width: 60px; }
[id$="service_lines-group"] th.column-service          { width: 220px; }
[id$="service_lines-group"] th.column-service_module   { width: 200px; }
[id$="service_lines-group"] th.column-period           { width: 160px; }
[id$="service_lines-group"] th.column-frequency_timing { width: 180px; }
[id$="service_lines-group"] th.column-fee_ex_vat       { width: 120px; }
[id$="service_lines-group"] th:last-child              { width: 70px; }

[id$="service_lines-group"] th, [id$="service_lines-group"] td {
    white-space: nowrap;
}

[id$="signatories-group"] th.column-display_order, [id$="signatories-2-group"] th.column-display_order { width: 8%; }
[id$="signatories-group"] th.column-source,        [id$="signatories-2-group"] th.column-source        { width: 18%; }
[id$="signatories-group"] th.column-name,          [id$="signatories-2-group"] th.column-name          { width: 24%; }
[id$="signatories-group"] th.column-role,          [id$="signatories-2-group"] th.column-role          { width: 24%; }
[id$="signatories-group"] th.column-include,       [id$="signatories-2-group"] th.column-include       { width: 10%; }
[id$="signatories-group"] th:last-child,           [id$="signatories-2-group"] th:last-child           { width: 16%; }

[id$="selected_blocks-group"] th.column-block   { width: 78%; }
[id$="selected_blocks-group"] th.column-include { width: 10%; }
[id$="selected_blocks-group"] th:last-child     { width: 12%; }

[id$="agreement_sub_processors-group"] th.column-display_order { width: 8%; }
[id$="agreement_sub_processors-group"] th.column-sub_processor { width: 62%; }
[id$="agreement_sub_processors-group"] th.column-include       { width: 10%; }
[id$="agreement_sub_processors-group"] th:last-child            { width: 20%; }

[id$="exclusions-group"] th, [id$="selected_blocks-group"] th, [id$="signatories-group"] th, [id$="signatories-2-group"] th, [id$="agreement_sub_processors-group"] th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
    box-sizing: border-box;
}
[id$="exclusions-group"] td, [id$="selected_blocks-group"] td, [id$="signatories-group"] td, [id$="signatories-2-group"] td, [id$="agreement_sub_processors-group"] td {
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
}
[id$="exclusions-group"] td select, [id$="exclusions-group"] td input,
[id$="selected_blocks-group"] td select,
[id$="signatories-group"] td select, [id$="signatories-group"] td input,
[id$="signatories-2-group"] td select, [id$="signatories-2-group"] td input,
[id$="agreement_sub_processors-group"] td select, [id$="agreement_sub_processors-group"] td input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
[id$="service_lines-group"] th {
    padding-right: 10px;
    box-sizing: border-box;
}
/* The Service column's <select> sits in a .related-widget-wrapper with
   4 icon buttons (edit/add/delete/view) alongside it -- unlike the plain
   text cells above, it must NOT be squeezed to width:100% of a narrow
   column or the dropdown becomes unreadable once a value is selected. */
[id$="service_lines-group"] td select,
[id$="service_lines-group"] td input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
[id$="service_lines-group"] td.field-service select {
    width: auto !important;
    min-width: 140px !important;
    max-width: 100% !important;
}
[id$="service_lines-group"] td.field-service {
    overflow: visible;
    white-space: nowrap;
}

/* Include/Delete checkbox columns -- centered, matching #lines-group. */
[id$="service_lines-group"] th:last-child,
[id$="selected_blocks-group"] th.column-include, [id$="selected_blocks-group"] th:last-child,
[id$="signatories-group"] th.column-include, [id$="signatories-group"] th:last-child,
[id$="signatories-2-group"] th.column-include, [id$="signatories-2-group"] th:last-child,
[id$="agreement_sub_processors-group"] th.column-include, [id$="agreement_sub_processors-group"] th:last-child {
    text-align: center;
}
[id$="service_lines-group"] td:last-child,
[id$="selected_blocks-group"] td.field-include, [id$="selected_blocks-group"] td:last-child,
[id$="signatories-group"] td.field-include, [id$="signatories-group"] td:last-child,
[id$="signatories-2-group"] td.field-include, [id$="signatories-2-group"] td:last-child,
[id$="agreement_sub_processors-group"] td.field-include, [id$="agreement_sub_processors-group"] td:last-child {
    text-align: center;
    vertical-align: middle;
}
[id$="service_lines-group"] td:last-child input[type="checkbox"],
[id$="selected_blocks-group"] td.field-include input[type="checkbox"], [id$="selected_blocks-group"] td:last-child input[type="checkbox"],
[id$="signatories-group"] td.field-include input[type="checkbox"], [id$="signatories-group"] td:last-child input[type="checkbox"],
[id$="signatories-2-group"] td.field-include input[type="checkbox"], [id$="signatories-2-group"] td:last-child input[type="checkbox"],
[id$="agreement_sub_processors-group"] td.field-include input[type="checkbox"], [id$="agreement_sub_processors-group"] td:last-child input[type="checkbox"] {
    width: auto !important;
    height: 16px;
    margin: 0 auto !important;
    display: block;
}

/* Read-only tabular inline rows (DPA's mirrored Client/Service Provider
   Signatories -- DpaMirroredSignatoryInline in agreements/admin.py renders
   every field read-only when the parent is a DPA) -- jazzmin's tabular.html
   wraps a read-only cell's value in a plain <td><p>, not the same ".readonly"
   div every other read-only field on the page uses (jazzmin/css/main.css) --
   matching that exact style here instead of inventing a different grey.
   Only read-only cells use <p> here (editable ones render the input/select
   directly), so this can't accidentally catch an editable row. */
[id$="signatories-group"] td p, [id$="signatories-2-group"] td p {
    padding: .375rem .75rem;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    color: var(--bs-secondary-color);
    margin: 0;
}

/* CSA/DPA/Addendum type banner grouping (rz-agtype-*) -- shared by the
   Agreement change_form.html (single object, one banner) and
   client_combined.html (CSA+DPA together, one banner per side). Was
   duplicated verbatim in both templates with hardcoded hex fallbacks
   (#0d3f3e/#fff) that never actually applied, since --rizfin-teal/
   --rizfin-white are always defined globally here -- kept as one rule,
   using the real variables directly. */
.rz-agtype-group {
    border: 2px solid var(--rizfin-teal);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 1rem;
}
.rz-agtype-group .card {
    box-shadow: none;
    margin-bottom: 10px;
}
.rz-agtype-group .card:last-child {
    margin-bottom: 0;
}
.rz-agtype-banner {
    background: var(--rizfin-teal);
    color: var(--rizfin-white);
    font-weight: 700;
    padding: .6rem 1rem;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* File Migration Checklist changelist -- one narrow ✓/✗ column per document
   type (2026-08-01, replaced the earlier Migrated/Skipped badge-list
   columns, whose width visibly depended on how many badges a row had).
   table-layout:fixed keeps every column's width independent of content.
   min-width:0 overrides the site-wide #result_list rule (min-width:
   max-content, line ~1432) -- that rule forces every changelist table to
   stay at least as wide as its natural content needs, which fights fixed
   layout's whole point of being able to shrink/pin column widths.

   Targeted by :nth-child position, NOT the usual Django column-<field>/
   field-<field> classes -- this changelist is rendered by DataTables
   (Jazzmin's JS-enhanced table), which regenerates <thead> at runtime
   with generic sorting/sorting_asc classes and doesn't carry Django's own
   classes through to the live DOM the browser actually shows. Confirmed
   via the real rendered HTML: the Lead <th> has no column-lead class at
   all. The existing sticky-checkbox-column rule just above already
   proved :nth-child survives DataTables' rendering, so this reuses that
   approach instead of the (non-functional here) class selectors tried
   first. Position: 1=checkbox, 2=Reference, 3=Lead, 4=Stage, 5=Migration
   Status, 6-11=the 6 doc-type icons (Email Correspondence, Intake,
   Proposal, Agreement, Business AML, Individual AML -- Invoice dropped,
   now a real Invoice record instead, see is_legacy),
   12=First Contacted, 13=Proceeded, 14=Created at -- matches
   list_display order. */
body.model-leadfilemigration #result_list {
    table-layout: fixed;
    min-width: 0 !important;
}
body.model-leadfilemigration #result_list thead th:nth-child(2),
body.model-leadfilemigration #result_list tbody td:nth-child(2) {
    width: 110px;
}
body.model-leadfilemigration #result_list thead th:nth-child(3),
body.model-leadfilemigration #result_list tbody td:nth-child(3) {
    width: 230px;
    padding-right: 20px;
}
body.model-leadfilemigration #result_list thead th:nth-child(4),
body.model-leadfilemigration #result_list tbody td:nth-child(4) {
    width: 150px;
}
body.model-leadfilemigration #result_list thead th:nth-child(5),
body.model-leadfilemigration #result_list tbody td:nth-child(5) {
    width: 150px;
}
body.model-leadfilemigration #result_list thead th:nth-child(n+6):nth-child(-n+11),
body.model-leadfilemigration #result_list tbody td:nth-child(n+6):nth-child(-n+11) {
    width: 115px;
    text-align: center !important;
}
body.model-leadfilemigration #result_list thead th:nth-child(n+6):nth-child(-n+11) {
    white-space: nowrap;
}
body.model-leadfilemigration .lfm-status-icon {
    font-weight: 900 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
body.model-leadfilemigration #result_list thead th:nth-child(1),
body.model-leadfilemigration #result_list tbody td:nth-child(1) {
    width: 40px;
}
body.model-leadfilemigration #result_list thead th:nth-child(12),
body.model-leadfilemigration #result_list tbody td:nth-child(12) {
    width: 150px;
}
body.model-leadfilemigration #result_list thead th:nth-child(13),
body.model-leadfilemigration #result_list tbody td:nth-child(13) {
    width: 110px;
}
body.model-leadfilemigration #result_list thead th:nth-child(14),
body.model-leadfilemigration #result_list tbody td:nth-child(14) {
    width: 150px;
}