/* =====================================================================================================================
   fundd-ui.css — PAGE-WIDE LOOK + MENU POSITION (round 3, 3 Nov 2026)
   Used by: C02 client Transactions, C03 admin Transactions, C04 Add payments, C05 Vouchers (any page can load it with
   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:1100px){ .main-header .fundd-ui-btn .fundd-ui-k{display:none} }
@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} }

/* admin header slot */
.main-header .navbar-custom-menu>.navbar-nav>li.fundd-ui-li{display:flex;align-items:center;height:50px;padding:0 8px 0 4px}
@media (max-width:767px){ .fundd-ui-menubtn{display:none!important} .main-header .navbar-custom-menu>.navbar-nav>li.fundd-ui-li{float:left;height:50px} }

.fundd-ui-m{display:none}
@media (max-width:767px){ .fundd-ui-m{display:flex;margin-top:10px} .main-header li.fundd-ui-li{display:none!important} }

/* C03 phones: the three import buttons wrap their words instead of spilling out (both looks) */
@media (max-width:640px){ #c03Actions .c03-btn{white-space:normal!important;height:auto!important;min-height:42px;line-height:1.2;padding:6px 8px!important;text-align:center;justify-content:center} }

/* ---------- CLASSIC look on the admin pages (C03/C04/C05): the first look, as at bd6d818 ---------- */
.fundd-theme-classic .c03-pm{display:none}
.fundd-theme-classic .ft-table th[data-k="more"]{font-size:0;width:44px;cursor:default}
.fundd-theme-classic .c03-amt-c{font-weight:700;white-space:nowrap}
.fundd-theme-classic .c03-amt-c.ft-in{color:#13804a}.fundd-theme-classic .c03-amt-c.ft-out{color:#c62828}
.fundd-theme-classic .c03-amt-c.ft-del{color:#8b9097;text-decoration:line-through}

/* ---------- CLEAN look (moved here from fundd-admin-transactions.css .c03-calm, now for every page incl. C02) ---------- */
.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 tbody tr.c03-new td{background:#fbfdf9}
.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 .c03-amt-c{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;white-space:nowrap}
.fundd-theme-clean .c03-amt-c.ft-del{color:#8b9097;text-decoration:line-through}
.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 .c03-acct b{font-size:14px;font-weight:600;color:var(--ink)}
.fundd-theme-clean .c03-acct span{font-size:13px;font-weight:400;color:var(--ink2)}
.fundd-theme-clean .c03-miss{color:#9a5b00;font-weight:500}
.fundd-theme-clean .ft-table th[data-k="more"]{font-size:0;width:44px;cursor:default}
.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 .c03-btn{border-width:1px;font-weight:500}
.fundd-theme-clean .c03-head h1{font-weight:600}
.fundd-theme-clean .ft.ft-mobile .ft-table tr.ft-row,.fundd-theme-clean .ft-cards2 .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-acct{font-weight:400}.fundd-theme-clean .ft-mc .mc-acct b{color:var(--ink);font-weight:600}
.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 .c03-btn:not(.c03-gold){border:1px solid #dfe2e6;color:var(--ink);background:#fff}
.fundd-theme-clean .c03-btn:not(.c03-gold):hover{background:#f7f7f8}
.fundd-theme-clean .c03-btn:not(.c03-gold) i{color:#6b7280}
.fundd-theme-clean .c03-entry{border:1px solid #eceef1;border-radius:10px;background:#fff;box-shadow:none}
.fundd-theme-clean .c03-entry-head{background:#fff;border-bottom:0}
.fundd-theme-clean .c03-fold{color:var(--ink)}
.fundd-theme-clean .c03-fold i{color:#c3912e}
.fundd-theme-clean .ft-table thead th{vertical-align:middle!important}
.fundd-theme-clean .c03-lab,.fundd-theme-clean .c03-gaf>span{color:#545b64!important;font-weight:600}
.fundd-theme-clean .c03-gabox{border:1px solid #eceef1!important;background:#fafafa!important;border-radius:10px}
.fundd-theme-clean .c03-sheet thead th{background:#fff!important;color:var(--cm-head)!important;border-bottom:1px solid #eceef1!important;border-top:1px solid #eceef1!important;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.fundd-theme-clean .c03-sheet td{border-top:1px solid #f0f1f3!important;background:#fff!important}
.fundd-theme-clean .c03-staged td{background:#fffdf8!important}
.fundd-theme-clean .c03-claims{border:1px solid #eceef1!important;border-radius:10px;box-shadow:none}
.fundd-theme-clean .c03-net{color:#1a7f45}
@media (max-width:640px){
  .fundd-theme-clean #c03Actions,.fundd-theme-clean #c05Actions{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .fundd-theme-clean #c03Actions .c03-btn{flex:1 1 30%;width:auto;min-width:0;height:40px;font-size:13.5px;padding:0 8px;margin:0}
  .fundd-theme-clean #c03Actions .c03-btn i{display:none}
}
/* C02 client page 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}

/* ---------- MENU ON TOP (768px and wider) ---------- */
.fundd-more{display:none}
@media (min-width:768px){
  /* admin layout (AdminLTE): the side panel becomes a bar under the fixed header */
  .fundd-menu-top .main-sidebar{position:fixed!important;top:var(--fundd-hdr,50px)!important;left:0!important;right:0!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;transform:none!important;z-index:1029;box-shadow:0 2px 6px rgba(0,0,0,.08)}
  .fundd-menu-top .main-sidebar .slimScrollDiv{height:auto!important;overflow:visible!important}
  .fundd-menu-top .main-sidebar .sidebar{height:auto!important;overflow:visible!important;padding:0!important}
  .fundd-menu-top .main-sidebar .user-panel,.fundd-menu-top .main-sidebar .sidebar-form,.fundd-menu-top .main-sidebar .slimScrollBar,.fundd-menu-top .main-sidebar .slimScrollRail,.fundd-menu-top .sidebar-menu>li.header{display:none!important}
  .fundd-menu-top .content-wrapper,.fundd-menu-top .main-footer{margin-left:0!important}
  .fundd-menu-top.fixed .content-wrapper,.fundd-menu-top .fixed .content-wrapper{padding-top:calc(var(--fundd-hdr,50px) + var(--fundd-bar,46px) + 4px)!important}
  .fundd-menu-top .main-header .sidebar-toggle{display:none!important}
  .fundd-menu-top .sidebar-menu{display:flex!important;flex-wrap:nowrap;align-items:stretch;margin:0;padding:0 8px;white-space:nowrap;overflow:visible}
  .fundd-menu-top .sidebar-menu>li{position:relative;flex:none;float:none}
  .fundd-menu-top .sidebar-menu>li>a{display:flex!important;align-items:center;gap:7px;padding:13px 12px!important;border-left:0!important;border-bottom:3px solid transparent;font-size:14px}
  .fundd-menu-top .sidebar-menu>li.active>a{border-bottom-color:#c3912e}
  .fundd-menu-top .sidebar-menu>li>a>i:first-child{width:auto!important;margin:0}
  .fundd-menu-top .sidebar-menu>li>a .pull-right-container,.fundd-menu-top .sidebar-menu>li>a>.fa-angle-left,.fundd-menu-top .sidebar-menu>li>a>.pull-right{position:static!important;margin:0 0 0 2px!important;transform:none!important;float:none!important}
  .fundd-menu-top .sidebar-menu>li>a .fa-angle-left{transform:rotate(-90deg)!important}
  .fundd-menu-top .sidebar-menu li>.treeview-menu{display:none!important}
  .fundd-menu-top .sidebar-menu>li.fundd-open>.treeview-menu,.fundd-menu-top .fundd-more.fundd-open>.fundd-more-menu{display:block!important;position:absolute;top:100%;left:0;min-width:240px;max-height:calc(100vh - var(--fundd-hdr,50px) - 60px);overflow:auto;z-index:1031;margin:0!important;padding:6px 0!important;border-radius:0 0 10px 10px;box-shadow:0 10px 24px rgba(0,0,0,.18);white-space:normal}
  .fundd-menu-top .main-sidebar .sidebar-menu>li.fundd-open>.treeview-menu,.fundd-menu-top .main-sidebar .fundd-more-menu{background:inherit;background-color:var(--fundd-bar-bg,#222d32)}
  .fundd-menu-top .fundd-more-menu .fundd-open>.treeview-menu{display:block!important;position:static;box-shadow:none;padding-left:14px!important}
  .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 .fundd-more-menu .pull-right-container{position:static!important;margin-left:auto!important}
  .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}

  /* 768-1199px: the admin header is not fixed there (it pushes the page down, C03c), so the bar sits in the flow under it */
  @media (max-width:1199px){
    html.fundd-menu-top body.admin-layout.fixed .main-sidebar{position:relative!important;top:0!important}
    html.fundd-menu-top body.admin-layout.fixed .content-wrapper{padding-top:0!important}
  }

  /* 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}
}