/* =====================================================================================================================
   fundd-ui.css — PAGE-WIDE LOOK + MENU POSITION (round 3, 3 Nov 2026)
   public/js/fundd-ui.js). Load it AFTER fundd-table.css and the page's own CSS.
   Classes on <html> and <body> (set by fundd-ui.js before the page paints, from the user's saved choice):
     .fundd-theme-classic  the first look: soft zebra stripes, coloured gateway tags, gold toolbar buttons (DEFAULT)
     .fundd-theme-clean    the colleague's look: white rows, no stripes, thin dividers, plain gateway text, quiet buttons
     .fundd-menu-side      the usual side panel (DEFAULT)
     .fundd-menu-top       the same menu as a bar across the top (768px and wider; phones keep the Menu button)
   ===================================================================================================================== */

/* ---------- the two small switches (header) ---------- */
.fundd-ui{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.fundd-ui-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:9px;border:1px solid rgba(195,145,46,.55);background:#fff;color:#1f2328;font:600 13.5px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.fundd-ui-btn:hover{background:#fbf5e8}
.fundd-ui-btn:focus-visible{outline:2px solid #c3912e;outline-offset:2px}
.fundd-ui-btn svg{width:16px;height:16px;flex:none}
.fundd-ui-btn .fundd-ui-k{font-weight:600}
.fundd-ui-dark .fundd-ui-btn{background:rgba(0,0,0,.28);color:#fff;border-color:rgba(195,145,46,.9)}
.fundd-ui-dark .fundd-ui-btn:hover{background:rgba(0,0,0,.45)}
@media (max-width:767px){ .fundd-ui-btn{height:34px;padding:0 9px;font-size:13px} }
@media (max-width:480px){ .c02-ui .fundd-ui-k{display:none} }

@media (max-width:767px){ .fundd-ui-menubtn{display:none!important} }

.fundd-theme-clean{--line:#eceef1;--ink:#1f2328;--ink2:#545b64;--cm-head:#5d646d;--cm-div:#f0f1f3}
.fundd-theme-clean .ft-scroll{border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:none}
.fundd-theme-clean .ft-table{font-size:14px}
.fundd-theme-clean .ft-table thead th{background:#fff!important;border-bottom:1px solid var(--line);color:var(--cm-head);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:14px 12px;line-height:1.3}
.fundd-theme-clean .ft-table thead th:hover{background:#fafafa!important;color:var(--ink)}
.fundd-theme-clean .ft-table thead th.ft-asc,.fundd-theme-clean .ft-table thead th.ft-desc{color:var(--ink)}
.fundd-theme-clean .ft-th:not(.ft-asc):not(.ft-desc) .ft-arrow:after{opacity:0}
.fundd-theme-clean .ft-table thead th:hover .ft-arrow:after{opacity:.45}
.fundd-theme-clean .ft-table td{padding:17px 12px;border-top:1px solid var(--cm-div);color:var(--ink);font-weight:400;background:#fff}
.fundd-theme-clean .ft-table tbody tr.ft-row:nth-child(even) td,.fundd-theme-clean .ft-table tbody tr.ft-row td{background:#fff}
.fundd-theme-clean .ft-table tbody tr.ft-row:hover td{background:#fafafa}
.fundd-theme-clean .ft-table tbody tr.ft-row.ft-sel td{background:#fdf9f0}
.fundd-theme-clean .ft-table th:first-child,.fundd-theme-clean .ft-table td:first-child{padding-left:18px}
.fundd-theme-clean .ft-table th:last-child,.fundd-theme-clean .ft-table td:last-child{padding-right:14px}
.fundd-theme-clean .ft-table td b,.fundd-theme-clean .ft-table td.ft-c-amount,.fundd-theme-clean .ft-table td.ft-c-effective,.fundd-theme-clean .ft-table td.ft-c-fee{font-weight:500}
.fundd-theme-clean .ft-table td.ft-c-date{font-size:13.5px;color:var(--ink2)}
.fundd-theme-clean .ft-id{color:#6b7280;font-weight:400}
.fundd-theme-clean .ft-table td.ft-c-amount{text-align:left!important}
.fundd-theme-clean .ft-table th[data-k="amount"]{text-align:left!important}
.fundd-theme-clean .ft-table td.ft-c-effective b.ft-in,.fundd-theme-clean .ft-table td.ft-c-effective b.ft-out{color:var(--ink);font-weight:500}
.fundd-theme-clean .ft-fee{color:var(--ink2)}
.fundd-theme-clean .ft-gw,.fundd-theme-clean .ft-table tr:hover .ft-gw{background:none;border:0;padding:0;border-radius:0;font-size:14px;font-weight:400;color:var(--ink2);letter-spacing:0}
.fundd-theme-clean .ft-badge{font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:999px}
.fundd-theme-clean .ft-st-approved{background:#e7f6ec;color:#1a7f45}
.fundd-theme-clean .ft-st-pending{background:#fdf3dc;color:#8a5a00}
.fundd-theme-clean .ft-st-refunded{background:#eef2f7;color:#3d5a80}
.fundd-theme-clean .ft-st-rejected,.fundd-theme-clean .ft-st-deleted{background:#f4f4f5;color:#6b7280}
.fundd-theme-clean .ft-ga{font-size:13.5px;font-weight:500;color:var(--ink)}
.fundd-theme-clean .ft-ga i{font-size:12px}
.fundd-theme-clean .ft-name{font-weight:500}
.fundd-theme-clean .ft-desc{color:var(--ink2);font-size:13px}
.fundd-theme-clean .ft-table input[type=checkbox]{accent-color:#c3912e}
.fundd-theme-clean .ft-tot,.fundd-theme-clean .ft-tot.ft-pend{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:10px;box-shadow:none;background:#fff}
.fundd-theme-clean .ft-tot-l{font-size:12.5px;font-weight:600;color:var(--cm-head);text-transform:uppercase;letter-spacing:.06em}
.fundd-theme-clean .ft-tot-v{font-weight:600;color:var(--ink)!important}
.fundd-theme-clean .ft-tot-sub{color:var(--ink2);font-weight:400}
.fundd-theme-clean .ft-btn{border:1px solid #dfe2e6;color:var(--ink);background:#fff;font-weight:500;border-radius:10px}
.fundd-theme-clean .ft-btn i{color:#6b7280}
.fundd-theme-clean .ft-btn:hover{background:#f7f7f8}
.fundd-theme-clean .ft-btn-gold{background:#c3912e;border-color:#c3912e;color:#fff}.fundd-theme-clean .ft-btn-gold i{color:#fff}
.fundd-theme-clean .ft-search{border:1px solid #dfe2e6;border-radius:10px}
.fundd-theme-clean .ft-search i{color:#8b9097}
.fundd-theme-clean .ft-search input::placeholder{color:#7a8088}
.fundd-theme-clean .ft-seg{background:#f3f4f6;border:1px solid #e5e7eb;box-shadow:none;border-radius:10px}
.fundd-theme-clean .ft-seg-btn{color:#41474f;font-weight:500}
.fundd-theme-clean .ft-seg-btn.on,.fundd-theme-clean .ft-seg-btn.on:hover{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 -2px 0 #c3912e}
.fundd-theme-clean .ft-chip{background:#f7f7f8;border:1px solid #e5e7eb}
.fundd-theme-clean .ft.ft-mobile .ft-table tr.ft-row{border:1px solid var(--line);border-radius:10px;box-shadow:none;background:#fff}
.fundd-theme-clean .ft-mc .mc-name{font-weight:500}
.fundd-theme-clean .ft-mc .mc-amt{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end;font-weight:600;color:var(--ink)!important}
.fundd-theme-clean .ft-mc .mc-amt.del{color:#8b9097!important}
.fundd-theme-clean .ft-mc .mc-sub{font-weight:400;color:var(--ink2)}
.fundd-theme-clean .ft-mc .mc-sub .ft-gw{font-size:13.5px}
.fundd-theme-clean .ft-btn-gold[data-x]{background:#fff;border-color:#dfe2e6;color:var(--ink)}
.fundd-theme-clean .ft-btn-gold[data-x] i{color:#6b7280}
.fundd-theme-clean .ft-btn-gold[data-x]:hover{background:#f7f7f8}
.fundd-theme-clean .ft-table thead th{vertical-align:middle!important}
/* C02 totals boxes in the Clean look */
.fundd-theme-clean .ft-table tbody tr.ft-row:nth-child(even) td{background:#fff}
.fundd-theme-clean .ft-tot.ft-in .ft-tot-v{color:#13804a!important}.fundd-theme-clean .ft-tot.ft-out .ft-tot-v{color:#c62828!important}
.fundd-theme-clean .ft-tot.ft-bal .ft-tot-v{color:var(--ink)!important}

/* ---------- Both looks fit at 100% on laptops (Jacob 3 Nov 1:00 PM: "on clean view not all columns show up in width,
   only at 90%"). Width-only changes: slimmer cell padding, headers without the wide letter-spacing, gateway and dates may
   wrap onto a second line, Name / description keeps at least 108px. Measured on the preview: all 12 default columns visible,
   no sideways scroll, table at 100% at 1280/1366/1440/1536 px with the side menu and with the top menu.
   (If a real account has very large figures, Fit zoom still steps down a few % so nothing is cut off.) ---------- */
.fundd-theme-clean .ft-table thead th{font-size:11px;letter-spacing:0;padding:11px 4px;color:#4b525a}
.fundd-theme-clean .ft-table td{padding:15px 4px;font-size:13.5px}
.fundd-theme-clean .ft-table td.ft-num{font-size:13px}
.fundd-theme-clean .ft-table th:first-child,.fundd-theme-clean .ft-table td:first-child{padding-left:12px}
.fundd-theme-clean .ft-table th:last-child,.fundd-theme-clean .ft-table td:last-child{padding-right:10px}
.fundd-theme-clean .ft-table .ft-gw{font-size:13.5px}
.fundd-theme-clean .ft-table td.ft-c-date,.fundd-theme-clean .ft-table td.ft-c-settled{font-size:13px}
.fundd-theme-clean .ft-table .ft-badge{padding:3px 7px;font-size:12px}
.ft-table td.ft-c-gateway,.ft-table td.ft-c-gateway .ft-gw{white-space:normal}
.ft-table td.ft-c-date,.ft-table td.ft-c-settled{white-space:normal;min-width:62px}
.ft-table td.ft-c-name{min-width:108px}
.fundd-theme-classic .ft-table thead th{padding:10px 4px}
.fundd-theme-classic .ft-table td{padding:9px 4px}
.fundd-theme-classic .ft-table th:first-child,.fundd-theme-classic .ft-table td:first-child{padding-left:10px}
.fundd-theme-classic .ft-table th:last-child,.fundd-theme-classic .ft-table td:last-child{padding-right:10px}
@media (min-width:1400px){ .ft-table td.ft-c-date,.ft-table td.ft-c-settled,.ft-table td.ft-c-gateway,.ft-table td.ft-c-gateway .ft-gw{white-space:nowrap} }   /* room enough: dates and gateway stay on one line */
@media (min-width:1200px){ .fundd-menu-top .ft-table td.ft-c-date,.fundd-menu-top .ft-table td.ft-c-settled,.fundd-menu-top .ft-table td.ft-c-gateway,.fundd-menu-top .ft-table td.ft-c-gateway .ft-gw{white-space:nowrap} }

/* ---------- MENU ON TOP (768px and wider) ---------- */
.fundd-more{display:none}
@media (min-width:768px){
  .fundd-menu-top .fundd-more-menu{list-style:none;display:none}
  .fundd-menu-top .fundd-more-menu>li>a{display:flex!important;align-items:center;gap:8px;padding:10px 16px!important;white-space:nowrap}
  .fundd-menu-top li.fundd-more{display:block}
  .fundd-menu-top .fundd-more>.fundd-more-menu{right:0;left:auto!important}
  .fundd-menu-top .fundd-more-a{font-weight:600}

  /* client layout (C02 left-sidebar): the side panel becomes a bar above the page; the "Menu" button goes away */
  .fundd-menu-top .c02-page{display:block!important}
  .fundd-menu-top .c02-page .left-sidebar{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;transform:none!important;width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;overflow:visible!important;box-shadow:0 1px 0 #ece6d8!important;background:#fff!important;display:block!important;z-index:40;padding:0 10px!important;margin:0!important}
  .fundd-menu-top .c02-menu-btn,.fundd-menu-top .c02-menu-bg{display:none!important}
  .fundd-menu-top .c02-page .content-wrapper{max-width:100%!important;width:100%!important;margin-left:0!important}
  .fundd-menu-top .left-sidebar>ul{display:flex!important;flex-wrap:nowrap;align-items:stretch;margin:0!important;padding:0!important;white-space:nowrap;list-style:none}
  .fundd-menu-top .left-sidebar>ul>li{position:relative;flex:none;margin:0!important;border:0!important;width:auto!important}
  .fundd-menu-top .left-sidebar>ul>li>a{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;padding:12px 11px!important;margin:0!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;height:auto!important;width:auto!important;background:transparent!important}
  .fundd-menu-top .left-sidebar>ul>li>a,.fundd-menu-top .left-sidebar>ul>li>a:hover,.fundd-menu-top .left-sidebar>ul>li>a:focus,.fundd-menu-top .left-sidebar>ul>li>a .features--link-title{color:#1f2328!important}
  .fundd-menu-top .left-sidebar>ul>li>a:hover,.fundd-menu-top .left-sidebar>ul>li.fundd-open>a{background:#faf6ec!important}
  .fundd-menu-top .left-sidebar>ul>li>a .features--link-icon img,.fundd-menu-top .left-sidebar>ul>li>a:focus .features--link-icon img{filter:none!important;opacity:1!important}
  .fundd-menu-top .left-sidebar .fundd-more-menu .submenu{padding-left:18px!important;margin:0!important}
  .fundd-menu-top .left-sidebar>ul>li.fundd-open>.collapse .submenu{padding:0!important;margin:0!important;list-style:none}
  .fundd-menu-top .left-sidebar>ul>li.fundd-open>.collapse .submenu a{display:block;padding:9px 16px!important;color:#1f2328!important}
  .fundd-menu-top .left-sidebar>ul>li.fundd-open>.collapse .submenu a:hover{background:#faf6ec}
  .fundd-menu-top .left-sidebar>ul>li>a.active{border-bottom-color:#c3912e!important;background:#fbf5e8!important}
  .fundd-menu-top .left-sidebar>ul>li>a.active,.fundd-menu-top .left-sidebar>ul>li>a.active .features--link-title{color:#1f2328!important}
  .fundd-menu-top .left-sidebar>ul>li>a.active .features--link-icon img{filter:none!important}
  .fundd-menu-top .left-sidebar>ul>li>a::before{display:none!important}
  .fundd-menu-top .left-sidebar>ul>li>a::after{content:none!important}
  .fundd-menu-top .left-sidebar>ul>li>a[data-toggle]::after{content:"\25BE"!important;display:inline!important;position:static!important;transform:none!important;margin:0 0 0 1px!important;border:0!important;width:auto!important;height:auto!important;background:none!important;font-size:12px;color:#6b5a33}
  .fundd-menu-top .left-sidebar>ul>li>a .features--link-icon{width:22px!important;height:22px!important;min-width:22px;margin:0!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;box-shadow:none!important}
  .fundd-menu-top .left-sidebar>ul>li>a .features--link-icon img{max-width:20px!important;max-height:20px!important;width:auto!important;height:auto!important}
  .fundd-menu-top .left-sidebar>ul>li>a .features--link-title{font-size:14.5px!important;font-weight:600;margin:0!important;padding:0!important;white-space:nowrap}
  .fundd-menu-top .left-sidebar li>.collapse,.fundd-menu-top .left-sidebar li>.collapsing{display:none!important}
  .fundd-menu-top .left-sidebar>ul>li.fundd-open>.collapse,.fundd-menu-top .left-sidebar .fundd-more.fundd-open>.fundd-more-menu{display:block!important;position:absolute;top:100%;left:0;min-width:240px;max-height:70vh;overflow:auto;z-index:1031;background:#fff;border:1px solid #ece6d8;border-radius:0 0 10px 10px;box-shadow:0 10px 24px rgba(0,0,0,.14);padding:6px 0!important;white-space:normal;height:auto!important}
  .fundd-menu-top .left-sidebar .fundd-more.fundd-open>.fundd-more-menu{left:auto;right:0}
  .fundd-menu-top .left-sidebar .fundd-more-menu>li>a{padding:9px 14px!important;border-bottom:0!important}
  .fundd-menu-top .left-sidebar .fundd-more-menu li.fundd-open>.collapse{display:block!important;position:static;padding-left:12px}
}