/* Barbix Global Admin UI · PHP 8.3 · 2026 */
:root{--bp-primary:#4f46e5;--bp-accent:#0d9488;--bp-sidebar:#0f172a;--bp-page:#f4f6fb;--bp-card:#fff;--bp-text:#172033;--bp-radius:16px;--bp-muted:#64748b;--bp-border:#e6e9f1;--bp-shadow:0 6px 24px rgba(28,42,65,.055)}
*,*::before,*::after{box-sizing:border-box}html{min-width:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:var(--bp-page)!important;color:var(--bp-text)!important;overflow-x:hidden}main.d-flex{min-height:100dvh!important;align-items:stretch;overflow:visible}main.d-flex>.d-block.w-100{min-width:0;flex:1;display:flex!important;flex-direction:column}main .content-scroll{height:auto!important;overflow:visible!important;flex:1;min-height:calc(100dvh - 76px);padding-bottom:3rem}.content-scroll>.container-fluid{max-width:1800px;padding:24px clamp(14px,2.7vw,40px)!important}.card{border-color:var(--bp-border)!important;border-radius:var(--bp-radius)!important;background:var(--bp-card)!important;box-shadow:var(--bp-shadow)!important}.card .card-header{border-bottom:1px solid var(--bp-border);background:transparent}.btn{border-radius:11px;transition:transform .16s ease,background .16s ease,box-shadow .16s ease;cursor:pointer}.btn:active{transform:translateY(1px)}.btn-primary,.bg-primary{background:var(--bp-primary)!important;border-color:var(--bp-primary)!important}.text-primary{color:var(--bp-primary)!important}.btn-outline-primary{color:var(--bp-primary);border-color:var(--bp-primary)}.btn-outline-primary:hover{background:var(--bp-primary);border-color:var(--bp-primary)}.form-control,.form-select{border-radius:11px!important;border-color:var(--bp-border)!important;min-height:42px}.form-control:focus,.form-select:focus{border-color:var(--bp-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bp-primary) 15%,transparent)!important}.table{--bs-table-bg:transparent}.table th{font-size:11px;font-weight:700;letter-spacing:.075em;color:var(--bp-muted);text-transform:uppercase}.table>tbody>tr>td{padding-block:14px;vertical-align:middle;border-color:var(--bp-border)}.table>tbody>tr:hover{background:#f9faff}.table-responsive{border-radius:12px}.modal-content{border-radius:18px!important;border:1px solid var(--bp-border)}.badge{font-weight:600}.page-head{padding:4px 0 20px;margin:0 0 12px}.page-title{font-size:clamp(1.35rem,2vw,1.8rem)!important;font-weight:800!important;color:var(--bp-text)!important}.page-breadcrumb a{color:var(--bp-primary)}.breadcrumb{--bs-breadcrumb-divider:"/"}.pagination .page-link{border-radius:9px!important;margin-right:5px;color:var(--bp-primary)}.pagination .active .page-link{background:var(--bp-primary);border-color:var(--bp-primary)}
/* Sidebar */
#sidebar{flex-shrink:0;max-width:268px;align-self:stretch;overflow:visible!important;background:var(--bp-sidebar)}#sidebar:not(.show):not(.collapsing){display:none}#sidebar .bp-sidebar{width:268px;max-width:268px;min-height:100dvh;position:sticky;top:0;max-height:100dvh;background:var(--bp-sidebar);color:#e5e9f5;overflow:auto;scrollbar-width:thin;scrollbar-color:#475569 transparent;padding:25px 15px 16px}.bp-logo{display:flex;align-items:center;gap:12px;padding:3px 14px 22px;color:white!important;text-decoration:none!important}.bp-logo-mark{height:43px;width:43px;display:grid;place-items:center;background:var(--bp-primary);color:#fff;font-size:21px;border-radius:14px;flex-shrink:0}.bp-logo strong{display:block;font-size:24px;letter-spacing:-1.2px;line-height:1.06;font-weight:800}.bp-logo-dot{color:#79ded1}.bp-logo small{display:block;margin-top:5px;font-size:9px;letter-spacing:2.1px;color:#94a3b8;font-weight:700}.bp-profile-mini{margin:4px 7px 16px;padding:12px 10px;border:1px solid #334155;border-radius:14px;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.045)}.bp-profile-avatar{height:38px;width:38px;display:grid;place-items:center;border-radius:11px;background:#334155;font-size:20px}.bp-profile-mini strong{display:block;font-size:12px;color:#f8fafc}.bp-profile-mini small{display:block;font-size:10px;color:#aab9ce;margin-top:3px}.bp-online-dot{display:inline-block;background:#34d399;width:6px;height:6px;border-radius:100%;margin-right:5px}.bp-nav{display:flex;flex-direction:column;gap:2px;padding-bottom:22px}.bp-nav-label{font-size:10px;letter-spacing:.13em;font-weight:800;color:#7e91ac;padding:17px 13px 7px}.bp-nav-link{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;text-decoration:none!important;background:transparent;border-radius:11px;padding:11px 13px;color:#c4d0e1!important;font-weight:550;font-size:13px;line-height:1.35;transition:background .15s ease,color .15s ease;cursor:pointer}.bp-nav-link>i:first-child{font-size:18px;display:inline-flex;width:22px;justify-content:center}.bp-nav-link:hover{background:rgba(255,255,255,.08);color:#fff!important}.bp-nav-link.is-active{background:var(--bp-primary);color:white!important;box-shadow:0 8px 21px rgba(0,0,0,.13)}.bp-nav-link.bp-nav-toggle>.bp-nav-caret{margin-left:auto;font-size:12px;transition:transform .2s}.bp-nav-link.bp-nav-toggle[aria-expanded=true]>.bp-nav-caret{transform:rotate(180deg)}.bp-nav-sub{padding:4px 0 2px 21px}.bp-nav-sub .bp-nav-link{font-size:12px;padding:9px 10px}.bp-nav-sub .bp-nav-link>i:first-child{font-size:15px}.bp-sidebar-footer{margin-top:auto;padding:18px 12px 8px;border-top:1px solid #334155;color:#8190a9;font-size:11px}.bp-sidebar-footer-line{display:flex;gap:8px;align-items:center}
/* Header */
.bp-header.navbar{min-height:75px;border:0!important;border-bottom:1px solid var(--bp-border)!important;background:rgba(255,255,255,.97)!important;box-shadow:none!important;z-index:1020;display:flex;justify-content:space-between;gap:12px}.bp-menu-btn{width:41px;height:41px;display:grid;place-items:center;color:var(--bp-text)!important;background:#f1f4f9;border:1px solid var(--bp-border)}.bp-menu-btn:hover{background:#e6e9f1}.bp-header-trail{display:flex;gap:11px;align-items:center;font-size:13px;min-width:0}.bp-header-brand{font-weight:800;font-size:16px}.bp-header-sep{color:#cbd5e1}.bp-header-current{font-size:12px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bp-header-caption{background:#edfdf9;border:1px solid #d4f5eb;color:#0f766e;font-size:11px;padding:9px 12px;border-radius:12px;font-weight:650}.bp-account-button{display:flex;gap:8px;align-items:center;border:1px solid var(--bp-border);background:#fff;color:var(--bp-text);font-size:12px;font-weight:700;padding:9px 12px}.bp-dropdown{border:1px solid var(--bp-border);border-radius:13px!important;padding:8px}.bp-dropdown .dropdown-item{border-radius:9px;padding:10px 12px;font-size:13px}
/* Inner pages */
.bp-page-heading{display:flex;align-items:center;gap:15px;margin:8px 0 25px}.bp-page-heading-icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--bp-primary) 12%,#fff);color:var(--bp-primary);font-size:22px;flex-shrink:0}.bp-page-heading-copy h1{margin:0 0 4px;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.04em}.bp-page-heading-copy p{margin:0;color:var(--bp-muted);font-size:13px}.bp-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.bp-stat-card{background:var(--bp-card);border:1px solid var(--bp-border);border-radius:var(--bp-radius);padding:21px;box-shadow:var(--bp-shadow);min-width:0}.bp-stat-card .bp-stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.bp-stat-label{font-size:12px;color:var(--bp-muted);font-weight:650}.bp-stat-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--bp-primary);background:color-mix(in srgb,var(--bp-primary) 11%,white);font-size:19px}.bp-stat-value{display:block;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.055em;margin-top:5px;line-height:1.25}.bp-stat-desc{display:block;font-size:11px;color:var(--bp-muted);margin-top:7px}.bp-panel-card{background:var(--bp-card);border:1px solid var(--bp-border);border-radius:var(--bp-radius);box-shadow:var(--bp-shadow);padding:22px;min-width:0;margin-bottom:20px}.bp-panel-card h2{font-size:16px;font-weight:800;letter-spacing:-.02em;margin:0}.bp-panel-subtitle{font-size:12px;color:var(--bp-muted);margin:4px 0 0}.bp-panel-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}.bp-status{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;font-size:11px;font-weight:700;border-radius:20px;background:#eff6ff;color:#2563eb}.bp-status.is-green{background:#ecfdf5;color:#047857}.bp-status.is-red{background:#fff1f2;color:#be123c}.bp-status.is-grey{background:#f1f5f9;color:#475569}.bp-muted{color:var(--bp-muted)}.bp-blank{padding:45px 20px;text-align:center;color:var(--bp-muted)}.bp-blank i{font-size:36px;display:block;margin-bottom:9px;color:#94a3b8}.bp-blank strong{display:block;color:var(--bp-text);margin-bottom:4px}.bp-filter-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.bp-filter-form .form-control,.bp-filter-form .form-select{max-width:320px}.bp-table-user{display:flex;align-items:center;gap:10px}.bp-table-avatar{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:12px;background:color-mix(in srgb,var(--bp-primary) 10%,white);color:var(--bp-primary);font-size:14px;font-weight:800}.bp-table-user strong{font-size:13px;display:block;color:var(--bp-text)}.bp-table-user small{color:var(--bp-muted);display:block;font-size:11px;margin-top:2px}.bp-score{color:#d97706;font-weight:800}.bp-score-stars{letter-spacing:2px;color:#e5a329;font-size:16px;white-space:nowrap}.bp-grid-2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px}.bp-chart-row{display:grid;grid-template-columns:95px minmax(0,1fr) 50px;gap:11px;align-items:center;font-size:12px;margin:12px 0}.bp-chart-track{height:12px;background:#eef1f7;border-radius:20px;overflow:hidden}.bp-chart-fill{height:100%;background:linear-gradient(90deg,var(--bp-primary),#9188f7);border-radius:20px}.bp-swatch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.bp-swatch{display:flex;align-items:center;gap:12px;border:1px solid var(--bp-border);background:white;border-radius:13px;padding:13px}.bp-swatch input[type=color]{width:55px;height:45px;padding:3px;border:1px solid #dbe0e9;border-radius:8px;background:white;flex-shrink:0;cursor:pointer}.bp-swatch strong{font-size:12px;display:block}.bp-swatch small{font-size:11px;color:var(--bp-muted)}.bp-theme-preview{padding:17px;border-radius:15px;background:var(--bp-page);border:1px solid var(--bp-border);display:flex;gap:12px;align-items:center}.bp-theme-preview-side{width:42px;height:70px;border-radius:10px;background:var(--bp-sidebar)}.bp-theme-preview-inner{flex:1}.bp-theme-preview-button{border-radius:9px;background:var(--bp-primary);color:white;padding:10px 12px;font-size:12px;display:inline-block}.bp-theme-preview-accent{height:8px;width:65px;border-radius:8px;background:var(--bp-accent);margin-top:9px}.bp-panel-note{border-left:3px solid var(--bp-primary);background:#f6f6ff;color:#433f73;padding:12px 15px;border-radius:0 10px 10px 0;font-size:12px}
/* Mobile/tablet */
@media(max-width:1150px){.bp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1199.98px){#sidebar{position:fixed!important;left:0;top:0;bottom:0;z-index:1050;max-width:268px;box-shadow:15px 0 45px rgba(12,20,34,.24)}#sidebar .bp-sidebar{height:100dvh;max-height:100dvh}.bp-header{z-index:1029}.bp-sidebar-overlay{position:fixed;inset:0;background:rgba(10,18,31,.48);z-index:1049;opacity:0;pointer-events:none;transition:opacity .2s}.bp-sidebar-overlay.is-visible{opacity:1;pointer-events:auto}}
@media(min-width:1200px){.bp-sidebar-overlay{display:none!important}}
@media(max-width:850px){.bp-grid-2{grid-template-columns:1fr}}
@media(max-width:650px){.bp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bp-stat-card{padding:14px}.bp-stat-icon{width:32px;height:32px;font-size:15px}.bp-stat-value{font-size:23px}.bp-panel-card{padding:15px}.bp-swatch-grid{grid-template-columns:1fr}.bp-chart-row{grid-template-columns:65px minmax(0,1fr) 35px;gap:7px;font-size:11px}.bp-filter-form{align-items:stretch}.bp-filter-form .form-control,.bp-filter-form .form-select{max-width:none}.bp-filter-form>.btn{width:100%}.content-scroll>.container-fluid{padding:17px 12px!important}.bp-header-current{max-width:130px}.bp-page-heading{margin-bottom:19px}.bp-page-heading-icon{height:44px;width:44px}.bp-panel-header{align-items:flex-start}}
@media(max-width:350px){.bp-stat-grid{grid-template-columns:1fr}.bp-header-trail{gap:5px}.bp-logo{padding-left:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Login uses the same design tokens */
.admin-login{background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--bp-primary) 10%,white),transparent 35%),var(--bp-page)}.login-card{background:var(--bp-card);border:1px solid var(--bp-border);box-shadow:0 24px 64px rgba(27,39,59,.12);border-radius:24px!important}.login-icon{background:color-mix(in srgb,var(--bp-primary) 13%,white)!important;color:var(--bp-primary)!important}.login-link{color:var(--bp-primary)!important}


/* --------------------------------------------------------------------------
   2026-10-12: panel viewport, legacy page headings and package dialog repairs
   -------------------------------------------------------------------------- */
html {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto;
}
body:not(.admin-login) {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}
/* Bootstrap must retain its scroll lock while a modal is open. */
body.modal-open,
body.bp-mobile-nav-open {
  overflow: hidden !important;
}
body:not(.admin-login) > main.d-flex {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: visible !important;
  align-items: stretch !important;
}
body:not(.admin-login) > main.d-flex > .d-block.w-100 {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
}
body:not(.admin-login) > main.d-flex .content-scroll {
  height: auto !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* The legacy header styles have 14px padding while the global font is 28px.
   Keep the title and breadcrumbs within the same rounded white container. */
.content-scroll .page-head {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center !important;
  column-gap: 22px;
  row-gap: 10px;
  min-height: 76px;
  margin: 0 0 20px !important;
  padding: 18px 24px !important;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius) !important;
  background: var(--bp-card);
  box-shadow: var(--bp-shadow);
}
.content-scroll .page-head-title {
  flex: 1 1 240px;
  min-width: 0;
}
.content-scroll .page-head .page-title {
  display: block;
  height: auto !important;
  min-height: 0;
  line-height: 1.3 !important;
  font-size: clamp(19px, 2vw, 26px) !important;
  letter-spacing: -0.025em;
  margin: 0 !important;
  padding: 0 !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.content-scroll .page-head .page-title-count {
  font-size: .78em;
  line-height: inherit;
  white-space: nowrap;
  margin-left: 8px;
  color: var(--bp-muted);
}
.content-scroll .page-head .page-breadcrumb {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.content-scroll .page-head .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin: 0;
  padding: 0;
}
.content-scroll .page-head .breadcrumb-item {
  font-size: 12px;
  line-height: 1.6;
}
/* Package modal: one scroll area and an always-reachable Save button. */
#packageEditModal {
  --bs-modal-width: min(1050px, calc(100vw - 32px));
}
#packageEditModal .modal-dialog {
  width: min(1050px, calc(100vw - 32px));
  max-width: none;
  margin-inline: auto;
}
#packageEditModal .modal-content {
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px !important;
}
#packageEditModal .bp-package-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}
#packageEditModal .modal-header,
#packageEditModal .modal-footer {
  flex: 0 0 auto;
  padding: 16px 22px;
  background: #fff;
  border-color: var(--bp-border);
}
#packageEditModal .modal-header .modal-title {
  font-size: 19px;
  line-height: 1.4;
}
#packageEditModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 22px;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
#packageEditModal .bp-package-features {
  padding-top: 10px;
  margin-top: 24px;
  border-top: 1px solid var(--bp-border);
}
#packageEditModal .bp-package-features-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
}
#packageEditModal .package-feature-item {
  border: 1px solid var(--bp-border) !important;
  border-radius: 13px !important;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
#packageEditModal .package-feature-item:hover,
#packageEditModal .package-feature-item:focus-within {
  background: #f8faff;
  border-color: var(--bp-primary) !important;
}
#packageEditModal .package-feature-item > div:last-child { min-width: 0; overflow-wrap: anywhere; }
#packageEditModal .modal-footer { gap: 9px; }
@media (max-width: 650px) {
  .content-scroll .page-head {
    min-height: 0;
    padding: 16px !important;
    gap: 8px;
    align-items: flex-start !important;
  }
  .content-scroll .page-head-title { flex-basis: 100%; }
  .content-scroll .page-head .page-title { font-size: 21px !important; }
  .content-scroll .page-head .page-breadcrumb { flex-basis: 100%; margin-left: 0; }
  .content-scroll .page-head .breadcrumb { justify-content: flex-start; }
  #packageEditModal .modal-dialog {
    width: calc(100vw - 16px);
    margin: 8px auto;
  }
  #packageEditModal .modal-content { max-height: calc(100dvh - 16px); }
  #packageEditModal .modal-header,
  #packageEditModal .modal-footer { padding: 14px 16px; }
  #packageEditModal .modal-body { padding: 16px; }
  #packageEditModal .modal-footer .btn { flex: 1 1 auto; }
  /* Search controls should wrap instead of overflowing 320px phones. */
  .bp-packages-toolbar { align-items: stretch !important; flex-wrap: wrap; }
  .bp-packages-toolbar form { width: 100%; flex-wrap: wrap; }
  .bp-packages-toolbar input[name="arama"] { width: 100%; min-width: 0 !important; flex-basis: 100%; }
  .bp-packages-toolbar > .packageModalBtn { width: 100%; }
}