/* Bespoke page pieces for the management, hub partner and media portals (R4/R5).
   Built on tokens.css / components.css; matches design/final/admin-hub-partner-approved.html. */
.bfp-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px}
.bfp-cols>*{min-width:0}
@media(max-width:900px){.bfp-cols{grid-template-columns:1fr}.bf-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.bf-kpis{grid-template-columns:1fr}}
.bfp-stack{display:flex;flex-direction:column;gap:14px}

/* horizontal bars (sales by country) */
.bfp-bars{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.bfp-bar-row{display:grid;grid-template-columns:minmax(90px,150px) 1fr 72px;gap:10px;align-items:center;font-size:13px;font-weight:600}
.bfp-bar-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfp-bar-row em{font-style:normal;font-weight:800;text-align:right}
.bfp-bar{height:10px;background:#e6e9f5;border-radius:99px;overflow:hidden}
.bfp-bar i{display:block;height:100%;border-radius:99px}
.bfp-bar.thin{height:8px;width:120px;max-width:100%}

/* scheduled job rows */
.bfp-job{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bf-bg);margin-top:8px}
.bfp-job .ic{width:36px;height:36px;border-radius:12px;color:#fff;display:grid;place-items:center;flex:none}
.bfp-job .ic svg{width:18px;height:18px}
.bfp-job b{font-size:13.5px;display:block}
.bfp-job small{font-size:12px;color:var(--bf-mut);display:block}
.bfp-job .bf-badge{margin-left:auto;flex:none;white-space:nowrap}
.bfp-job>div{min-width:0}

/* person cell */
.bfp-who{display:flex;align-items:center;gap:10px;min-width:0}
.bfp-who .bf-av{width:30px;height:30px;font-size:11px}
.bfp-who a{color:inherit;font-weight:700}

/* approve / reject */
.bfp-act{display:flex;gap:6px;flex-wrap:wrap}
.bfp-act form{margin:0}
.bfp-act button{border:0;font:inherit;padding:5px 11px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;transition:transform .15s}
.bfp-act button:hover{transform:translateY(-2px)}
.bfp-act .y{background:var(--bf-ok-bg);color:var(--bf-ok)}
.bfp-act .n{background:var(--bf-bad-bg);color:var(--bf-bad)}
.bfp-act a{font-size:12px;font-weight:800;color:var(--bf-mut);padding:5px 4px}

/* 7-day column chart */
.bfp-chart{display:flex;align-items:flex-end;gap:10px;height:140px;margin-top:16px}
.bfp-chart i{flex:1;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#7c5cff,#ff4fa0);display:block;min-height:4px;opacity:.9}
.bfp-chart i:nth-child(even){background:linear-gradient(180deg,#2f6bff,#19c3b1)}
.bfp-days{display:flex;gap:10px;margin-top:8px;font-size:11px;color:var(--bf-mut);font-weight:600}
.bfp-days span{flex:1;text-align:center}

/* stock level */
.bfp-low{color:var(--bf-bad);font-weight:800}
.bfp-sku{font-size:12px;color:var(--bf-mut)}

/* media + simple lists */
.bfp-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.bfp-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:12px 14px;border-radius:14px;background:var(--bf-bg);color:inherit;transition:transform .2s}
.bfp-row:hover{transform:translateX(3px);color:inherit}
.bfp-row b{font-size:14px;display:block;overflow-wrap:anywhere}
.bfp-row small{color:var(--bf-mut);font-size:12px}
.bfp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.bfp-tiles{grid-template-columns:1fr}}
.bfp-tile{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff;border-radius:20px;padding:20px;min-height:110px;transition:transform .25s}
.bfp-tile:hover{transform:translateY(-4px);color:#fff}
html body a.bfp-tile,html body a.bfp-tile:hover,html body a.bfp-tile small,html body a.bfp-tile b,html body a.bfp-tile svg{color:#fff}
.bfp-tile small{display:block;font-weight:600;opacity:.92;font-size:13px}
.bfp-tile b{font-size:30px;font-weight:800;letter-spacing:-.02em}
.bfp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.bfp-gallery a{display:block;border-radius:14px;overflow:hidden;background:var(--bf-bg);aspect-ratio:1}
.bfp-gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media(prefers-reduced-motion:reduce){.bfp-row,.bfp-tile,.bfp-act button{transition:none}.bfp-row:hover,.bfp-tile:hover{transform:none}}

/* DataTables on narrow screens: scroll sideways instead of squeezing headers into vertical text */
.bf-main .dataTables_wrapper{max-width:100%;overflow-x:auto}
.bf-main table.dataTable thead th{white-space:nowrap}
.bf-main .table-responsive,.bf-main .dataTables_scroll{max-width:100%}
/* Legacy single-column grids must be allowed to shrink below their widest child (tables) */
.bf-main .d-grid{grid-template-columns:minmax(0,1fr)}
.bf-main .d-grid>*{min-width:0}
/* Link-styled buttons: `.bf-body a{color:inherit}` otherwise wins over `.bf-btn{color:#fff}` */
.bf-body a.bf-btn,.bf-body a.bf-btn:hover{color:#fff}
.bf-body a.bf-btn-ghost,.bf-body a.bf-btn-ghost:hover{color:var(--bf-ink)}
/* Legacy dashed stat cards carry a fixed min-width that pushes rows past the column */
.bf-main .card-dashed,.bf-main [class*="min-w-"]{min-width:0!important}
/* Legacy card headers/toolbars and badges must wrap on phones instead of widening the page */
.bf-main .card-header,.bf-main .card-toolbar,.bf-main .card-toolbar .d-flex{flex-wrap:wrap;max-width:100%}
.bf-main .badge{white-space:normal;max-width:100%}
/* Legacy tables: wrap at spaces, never mid-word; keep buttons and status badges on one line */
.bf-main table td,.bf-main table th{overflow-wrap:break-word;word-break:normal;hyphens:none}
.bf-main table .btn,.bf-main table .badge,.bf-main .dataTables_wrapper .btn{white-space:nowrap}
.bf-main table.dataTable td{vertical-align:middle}
/* DataTables fixes column widths at init; give every cell room for a whole short word */
.bf-main table.dataTable th,.bf-main table.dataTable td{min-width:13ch}
.bf-main table.dataTable th:first-child,.bf-main table.dataTable td:first-child{min-width:0}
.bf-main table.table th,.bf-main table.table td{min-width:13ch}
.bf-main table.table th:first-child,.bf-main table.table td:first-child{min-width:0}
/* Legacy stat numbers only get a size from lg up; give phones a readable one */
@media (max-width:991.98px){.bf-main .fs-lg-2tx{font-size:1.75rem;line-height:1.2}}
/* Row-number column must never wrap ("1 / 0" for 10) */
.bf-main table td:first-child,.bf-main table th:first-child{white-space:nowrap}

/* Legacy pages on phones: summary tiles two across, tables scroll sideways instead of wrapping word by word. */
@media (max-width:575.98px){
  .bf-main .row:has(> [class*="col-"] > .card-dashed) > [class*="col-"]{flex:0 0 50%;max-width:50%;padding-left:6px;padding-right:6px}
  .bf-main .card-dashed{min-width:0!important;padding:14px 10px!important}
  .bf-main .dataTables_wrapper,.bf-main .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bf-main table.dataTable th,.bf-main table.dataTable td,.bf-main .table-responsive table th,.bf-main .table-responsive table td{white-space:nowrap}
  .bf-main .table-responsive table{width:max-content;min-width:100%}
}

/* UI audit fixes: no clipped labels, no sideways page overflow, tables keep their own scroll area */
.bfp-bar-row > span:first-child{overflow-wrap:anywhere;line-height:1.25}
.bf-main .card-dashed{min-width:0!important}
.bf-main .fs-lg-2tx{max-width:100%;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (min-width:992px) and (max-width:1199.98px){.bf-main .fs-lg-2tx{font-size:1.5rem}}
.bf-main .select2-container .select2-selection__rendered{white-space:normal!important;line-height:1.3}
.bf-main .select2-container .select2-selection--single{height:auto;min-height:calc(1.5em + 1.55rem)}
/* DataTables: scroll sideways inside the card (not clipped), and hold their height while rows load */
.bf-main .dataTables_wrapper{overflow-x:auto;max-width:100%;min-height:360px;-webkit-overflow-scrolling:touch}
.bf-main .dataTables_wrapper table.dataTable{max-width:none}
@media (max-width:1024px){
  .bf-main .dataTables_wrapper::before{content:"Swipe sideways to see every column";display:block;font-size:12px;font-weight:600;color:#6b7194;margin:0 0 8px}
}
/* Phones: comfortable tap targets */
@media (max-width:575.98px){
  .bf-main table a{display:inline-block;padding:8px 2px}
  .bf-main .pagination .page-link{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .bf-main .breadcrumb a,.bf-main .breadcrumb-item a{display:inline-block;padding:9px 4px}
  .bf-main .form-check-input{width:1.6rem;height:1.6rem}
}

/* Long e-mail addresses and name rows wrap instead of widening the page on phones */
@media (max-width:575.98px){
  .bf-main .d-flex{min-width:0}
  .bf-main .d-flex > *{min-width:0}
  .bf-main .d-flex.align-items-center.gap-4{flex-wrap:wrap}
  .bf-main a[href^="mailto"],.bf-main .text-gray-600,.bf-main .text-gray-700,.bf-main .text-muted{overflow-wrap:anywhere}
}

/* Layout shift: hold the room an editor or a DataTable will fill so the page below does not jump */
.bf-main textarea[id^="kt_docs_tinymce"]{display:block;width:100%;min-height:580px}
.bf-main .card-body:has(table[id$="datatables"]){min-height:420px}
.bf-main .fs-lg-2tx,.bf-main .fs-2tx{min-height:1.2em}
/* Summary tiles keep fixed equal tracks while their numbers count up, so the tiles never reflow */
.bf-main .row:has(> .col > .card-dashed){display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-left:0;margin-right:0}
.bf-main .row:has(> .col > .card-dashed) > .col{flex:none;width:auto;max-width:none;padding-left:0;padding-right:0}
.bf-main .row:has(> .col > .card-dashed) .card-dashed{margin-top:0!important;margin-bottom:0!important;height:100%}
@media (max-width:575.98px){.bf-main .row:has(> .col > .card-dashed){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: every control gets at least a 32px hit area (a few more px of padding, same look) */
@media (max-width:575.98px){
  .bf-main input.form-check-input{min-width:32px!important;min-height:32px!important}
  .bf-main .btn,.bf-main button,.bf-main [role="button"]{min-height:34px}
  .bf-main .select2-search__field{min-height:34px}
  .bf-main .select2-selection__clear{display:inline-block;padding:10px 10px;line-height:1}
  .bf-main .breadcrumb a,.bf-main .breadcrumb-item a,.bf-top a.text-gray-600,.bf-main a.text-gray-600.text-hover-primary,a.text-gray-600.text-hover-primary{display:inline-block;padding:9px 4px;min-height:36px}
  .bf-main .position-absolute.top-50.end-0{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
  #pwa-banner button{min-width:40px;min-height:40px}
}