/* Sentro-owned styles. Loaded last (after SSTMS common.css + apppage.css) so these rules win.
   Later tasks append their rules at the end of this file. */

/* ---- app shell: FontAwesome icons in the SSTMS sidebar instead of base64 PNGs ---- */
.main-menu .lidetail .fas { color: #ffffff; }
.main-menu li.current .lidetail .fas { color: #fd8e19; }
.dropdown-content form { margin: 0; }
.contentArea { padding-bottom: 40px; }

/* ---- login ---- */
.loginError {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(220, 53, 69, 0.25);
    background: rgba(220, 53, 69, 0.08);
    color: #b02a37;
    font-size: 13px;
    font-weight: 500;
}

/* ---- public customer form shell (layouts/public) ---- */
.publicBody { background: #f7f7f9; min-height: 100vh; }
.publicHeader .headerMenu { height: auto; min-height: 55px; padding: 8px 16px; }
.publicHeader .mainLogo { height: 42px; }
.publicMain { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }

@media (max-width: 767.98px) {
    /* a 42px-high logo is ~350px wide: on narrow screens shrink it so the title pill still fits beside it */
    .publicHeader .mainLogo { height: auto; max-height: 42px; max-width: 60%; }
}

@media (max-width: 575.98px) {
    /* staff header: drop the "Client Due Diligence System" pill so logo + user pill fit; the public header keeps its title */
    .headerBg:not(.publicHeader) .portalName { display: none; }
    /* "Client Due Diligence Form" beside the logo: a slightly smaller logo and pill keep it to two lines */
    .publicHeader .mainLogo { max-width: 50%; }
    .publicHeader .portalName { font-size: 11px; padding: 4px 10px; line-height: 1.25; }
    .publicMain { padding: 16px 12px 40px; }
}

/* ---- customer detail page (customers/show) ---- */
.customer-show .card { border: 1px solid #ededef; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.customer-show .card-header { background: #fff; font-weight: 600; border-bottom: 1px solid #ededef; }
.customer-show .card-header:first-child { border-radius: 16px 16px 0 0; }
.customer-show .nav-tabs .nav-link { color: #1d1d1f; }
.customer-show .nav-tabs .nav-link.active { color: #fd8e19; font-weight: 600; }
/* One button language on the client page: orange = main action (filled) or secondary action (outline), grey = neutral,
   red = undo / reset. Bootstrap's blue outline-primary is re-coloured to the brand orange. */
.customer-show .btn-outline-primary { color: #eb5f00; border-color: #fd8e19; }
.customer-show .btn-outline-primary:hover, .customer-show .btn-outline-primary:focus { color: #fff; background: #fd8e19; border-color: #fd8e19; }
.customer-show .btn-outline-primary:not(:disabled):not(.disabled):active { color: #fff; background: #eb5f00; border-color: #eb5f00; }
.customer-show .card-footer:last-child { border-radius: 0 0 16px 16px; border-top: 1px solid #ededef; }
/* Submission fields: label over value, 2-3 per row (customers/partials/_copy-rows) */
/* Client page: answers as label | value rows (stacked on phones); copy buttons show on hover. */
.kv { margin: 0; }
.kv-row { display: flex; gap: 16px; padding: 7px 0; border-bottom: 1px solid #f3f3f5; }
.kv-row:last-child { border-bottom: 0; }
.kv dt { flex: 0 0 40%; max-width: 230px; font-weight: 400; font-size: 13px; color: #86868b; padding-top: 1px; }
.kv dd { flex: 1; min-width: 0; margin: 0; word-break: break-word; }
.kv [data-copy] { opacity: 0; transition: opacity .15s; }
.kv-row:hover [data-copy], .kv [data-copy]:focus { opacity: 1; }
@media (max-width: 575.98px) { .kv-row { display: block; } .kv [data-copy] { opacity: 1; } }
.customer-show .group-title { font-size: 12px; font-weight: 600; color: #1d1d1f; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px; border-bottom: 2px solid #f3f3f5; margin-bottom: 2px; }
.customer-show .role-badge { background: #fff3e6; color: #b34700; font-weight: 500; }
.customer-show .page-tabs .nav-link { font-weight: 500; padding: 10px 18px; }
.customer-show .page-tabs .count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #ececee; color: #1d1d1f; font-size: 11px; text-align: center; }
.customer-show .section-title { font-size: 13px; font-weight: 600; color: #eb5f00; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 4px; }
.customer-show .file-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ededef; border-radius: 999px; padding: 3px 12px; margin: 0 6px 6px 0; font-size: 13px; color: #1d1d1f; background: #fafafa; }
.customer-show .file-chip:hover { border-color: #fd8e19; color: #eb5f00; text-decoration: none; }
.customer-show .copyable { white-space: pre-line; }
.customer-show [data-copy] { color: #fd8e19; }
.customer-show .pep-block { background: #fff8f0; border-color: #fdd9b5 !important; }

/* ---- flag emoji (🇲🇾) in the customer form's country code dropdown ----
   Windows has no flag glyphs (Chrome/Edge would show "MY"), so this font supplies them. unicode-range limits it to
   flag characters, and browsers fetch it only when a flag is on screen. Font: "Twemoji Country Flags" from
   country-flag-emoji-polyfill 0.1.10 (MIT); flag art by Twemoji (https://github.com/twitter/twemoji), CC-BY 4.0,
   see ../fonts/TwemojiCountryFlags-LICENSE.md. */
@font-face {
    font-family: "Twemoji Country Flags";
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    src: url('../fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
}
.flag-text { font-family: "Twemoji Country Flags", Inter, apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Fira Sans", Roboto, Oxygen, Ubuntu, "Droid Sans", Arial, sans-serif; }
/* the closed country code field shows only "🇲🇾 +60" (cdd-form.js), so it needs just enough width for the longest of those
   ("🇺🇸🇨🇦 +1"); the number box beside it takes the rest of the row */
select.flag-text { width: 100px; padding-left: 8px; padding-right: 8px; }
/* Clients list (customers/index): status tabs with counts, one search box, two-line client cell */
.client-list .card { border: 1px solid #ededef; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); overflow: hidden; }
.client-list .card-header { background: #fff; border-bottom: 1px solid #ededef; gap: 8px; }
.client-list .status-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.client-list .status-tab { border: 1px solid #ededef; background: #fafafa; color: #1d1d1f; border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.client-list .status-tab .count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #ececee; font-size: 11px; text-align: center; }
.client-list .status-tab:hover { border-color: #fd8e19; }
.client-list .status-tab.active { background: #fd8e19; border-color: #fd8e19; color: #fff; }
.client-list .status-tab.active .count { background: rgba(255, 255, 255, .25); }
.client-list .search-box { position: relative; min-width: 240px; }
.client-list .search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #86868b; font-size: 12px; }
.client-list .search-box input { padding-left: 32px; border-radius: 999px; }
.client-list table.dataTable { margin: 0 !important; }
.client-list table.dataTable tbody tr { cursor: pointer; }
.client-list table.dataTable tbody td { padding: 12px 16px; vertical-align: middle; }
.client-list table.dataTable thead th { padding: 10px 16px; }
.client-list .client-name { font-weight: 600; color: #1d1d1f; }
.client-list .client-sub { font-size: 12px; color: #86868b; margin-top: 2px; }
.client-list .dataTables_info, .client-list .dataTables_paginate { padding: 10px 16px !important; }
.client-list .dataTables_wrapper { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.client-list .status-tabs { flex-grow: 1; }

/* Status pills (client list and client page): soft tint, coloured text, a dot in front */
.badge.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; }
.badge.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.status-pill.badge-secondary { background: #f0f0f2; color: #6e6e73; }
.badge.status-pill.badge-info      { background: #e6f4fb; color: #0b7aa8; }
.badge.status-pill.badge-primary   { background: #e8f0fe; color: #1a5fd0; }
.badge.status-pill.badge-warning   { background: #fff3e0; color: #c25e00; }
.badge.status-pill.badge-success   { background: #e7f6ec; color: #1e7f3c; }
.badge.status-pill.badge-danger    { background: #fdecec; color: #c62828; }
.badge.status-pill.badge-dark      { background: #ececee; color: #3a3a3c; }

/* Case timeline (customers/partials/_timeline): a line down the left, a dot per event coloured by its kind */
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: #ececee; border-radius: 2px; }
.timeline-item { position: relative; padding: 0 0 18px 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #c7c7cc; box-shadow: 0 0 0 3px #fff; }
.timeline-item.tone-brand::before { border-color: #fd8e19; }
.timeline-item.tone-ok::before    { border-color: #34a853; }
.timeline-item.tone-bad::before   { border-color: #d93025; }
.timeline-item.tone-warn::before  { border-color: #f9ab00; }
.timeline-title { font-weight: 600; color: #1d1d1f; line-height: 1.3; }
.timeline-meta { font-size: 12px; color: #86868b; margin-top: 2px; }
.timeline-note { margin-top: 6px; padding: 8px 12px; background: #f7f7f9; border-radius: 10px; font-size: 13px; color: #3a3a3c; white-space: pre-line; word-break: break-word; }