/*
  Brand panel redesign.
  This file is loaded after page-level styles and restyles the full client and admin shells.
*/

:root{
  --br-ink:#111827;
  --br-muted:#64748b;
  --br-line:#dbe3ec;
  --br-soft:#f5f8fb;
  --br-surface:#ffffff;
  --br-surface-2:#eef4f8;
  --br-teal:#0f766e;
  --br-teal-2:#14b8a6;
  --br-blue:#2563eb;
  --br-sky:#0284c7;
  --br-amber:#f59e0b;
  --br-rose:#e11d48;
  --br-shadow:0 14px 34px rgba(15,23,42,.08);
  --br-shadow-soft:0 8px 22px rgba(15,23,42,.06);
}

*{
  letter-spacing:0;
}

/* =========================
   Client panel
========================= */
html[data-theme="light"] body{
  background:
    linear-gradient(180deg,#eef4f8 0%,#f8fafc 36%,#edf4f7 100%) !important;
  color:var(--br-ink);
}

html[data-theme="dark"] body{
  background:
    linear-gradient(180deg,#07111d 0%,#0c1724 48%,#07111d 100%) !important;
  color:#e5edf4;
}

.app{
  background:
    linear-gradient(90deg,rgba(15,118,110,.08),transparent 28%,rgba(245,158,11,.08) 78%,transparent),
    repeating-linear-gradient(0deg,rgba(148,163,184,.08) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(90deg,rgba(148,163,184,.06) 0 1px,transparent 1px 36px);
}

.app-sidebar{
  width:288px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8fb 100%) !important;
  border-right:1px solid var(--br-line) !important;
  box-shadow:8px 0 28px rgba(15,23,42,.08) !important;
  color:var(--br-ink) !important;
}

.app-sidebar:before{
  content:"";
  height:4px;
  flex:0 0 4px;
  background:linear-gradient(90deg,var(--br-teal),var(--br-blue),var(--br-amber),var(--br-rose));
}

[data-theme="dark"] .app-sidebar{
  background:linear-gradient(180deg,#101b2a 0%,#0a1320 100%) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#e5edf4 !important;
}

.brand{
  min-height:84px;
  padding:14px 18px !important;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.76)) !important;
}

[data-theme="dark"] .brand{
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(17,24,39,.74)) !important;
}

.brand-logo-box{
  width:46px !important;
  height:46px !important;
  border-radius:8px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:var(--br-shadow-soft) !important;
}

.brand-copy strong{
  color:var(--br-ink) !important;
  font-size:.82rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.brand-copy span{
  color:var(--br-muted) !important;
  font-size:.76rem !important;
}

[data-theme="dark"] .brand-copy strong{color:#f8fafc !important;}
[data-theme="dark"] .brand-copy span{color:#a8bfce !important;}

.wallet-mini{
  margin:14px 14px 8px !important;
  padding:12px !important;
  border-radius:8px !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
  border:0 !important;
  color:#ecfeff !important;
  box-shadow:0 14px 26px rgba(15,118,110,.22) !important;
}

.wallet-mini .amt{
  color:#fff !important;
  font-size:1rem !important;
}

.side-scroll{
  padding:10px 12px 18px !important;
}

.group-title{
  margin:16px 8px 7px !important;
  color:#64748b !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

[data-theme="dark"] .group-title{
  color:#8fa7ba !important;
}

.nav-link.side{
  min-height:44px;
  border-radius:8px !important;
  border:1px solid transparent !important;
  padding:9px 10px !important;
  color:#243244 !important;
  background:transparent !important;
  font-weight:760 !important;
  gap:10px !important;
}

.nav-link.side i{
  width:30px !important;
  height:30px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#0f766e !important;
  background:#e6f7f4 !important;
  border:1px solid rgba(20,184,166,.18) !important;
  box-shadow:none !important;
}

.nav-link.side:hover{
  color:#0f766e !important;
  background:#eef7f6 !important;
  border-color:rgba(20,184,166,.24) !important;
  transform:none !important;
}

.nav-link.side.active{
  color:#fff !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
  border-color:transparent !important;
  box-shadow:0 12px 24px rgba(37,99,235,.16) !important;
}

.nav-link.side.active i{
  color:#fff !important;
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.22) !important;
}

.nav-link.side .badge-soft{
  border-radius:999px !important;
  background:#fff !important;
  color:#0f766e !important;
  box-shadow:none !important;
}

[data-theme="dark"] .nav-link.side{
  color:#dbe7ef !important;
}

[data-theme="dark"] .nav-link.side i{
  color:#6ee7d8 !important;
  background:rgba(20,184,166,.12) !important;
  border-color:rgba(45,212,191,.20) !important;
}

[data-theme="dark"] .nav-link.side:hover{
  color:#99f6e4 !important;
  background:rgba(20,184,166,.10) !important;
}

.divider{
  height:1px !important;
  margin:18px 8px !important;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.45),transparent) !important;
}

.app-main{
  background:transparent !important;
}

.topbar{
  min-height:74px !important;
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid rgba(148,163,184,.24) !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.04) !important;
}

[data-theme="dark"] .topbar{
  background:rgba(9,16,27,.88) !important;
  border-color:rgba(148,163,184,.20) !important;
}

.topbar h5{
  color:#172033 !important;
  font-weight:850 !important;
}

[data-theme="dark"] .topbar h5{
  color:#eef7ff !important;
}

.topbar-logo-box{
  width:46px !important;
  height:46px !important;
  border-radius:8px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:#fff !important;
}

.search-wrap input,
.form-control,
.form-select{
  border-radius:8px !important;
  border-color:#d6e0ea !important;
  background:#fff !important;
  color:#172033 !important;
  box-shadow:none !important;
}

.search-wrap input:focus,
.form-control:focus,
.form-select:focus{
  border-color:rgba(20,184,166,.70) !important;
  box-shadow:0 0 0 3px rgba(20,184,166,.18) !important;
}

[data-theme="dark"] .search-wrap input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
  background:#0e1a28 !important;
  border-color:rgba(148,163,184,.26) !important;
  color:#e5edf4 !important;
}

.btn-ghost,
.user-pill{
  border-radius:8px !important;
  border:1px solid #dbe3ec !important;
  background:#fff !important;
  color:#243244 !important;
  box-shadow:var(--br-shadow-soft) !important;
}

.btn-ghost:hover,
.user-pill:hover{
  color:#0f766e !important;
  border-color:rgba(20,184,166,.36) !important;
  background:#effaf8 !important;
}

[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .user-pill{
  background:#0e1a28 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#dbe7ef !important;
}

.avatar{
  border-radius:8px !important;
  box-shadow:none !important;
}

.content{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:24px !important;
}

.impersonation-banner,
.client-announcement{
  max-width:1480px;
  margin:16px auto 0 !important;
}

.cp-page{
  gap:22px !important;
}

.cp-hero{
  border-radius:8px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:
    linear-gradient(135deg,#082f35 0%,#0f766e 44%,#1d4ed8 78%,#8a2c15 100%) !important;
  color:#ecfeff !important;
  box-shadow:0 18px 38px rgba(15,23,42,.16) !important;
}

.cp-hero:before{
  opacity:.18 !important;
}

.cp-hero:after{
  left:0 !important;
  right:0 !important;
  height:4px !important;
  background:linear-gradient(90deg,var(--br-teal-2),var(--br-blue),var(--br-amber),var(--br-rose)) !important;
}

.cp-eyebrow{
  color:#b7f7ee !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
}

.cp-title{
  color:#fff !important;
  font-weight:900 !important;
}

.cp-subtitle{
  color:#d7f5f1 !important;
}

.cp-card,
.cp-stat,
.cp-row,
.cp-option,
.cp-choice,
.plan-card,
.catalog-category-card{
  border-radius:8px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:var(--br-shadow-soft) !important;
}

.cp-card{
  overflow:hidden;
}

.cp-card-head{
  min-height:62px;
  border-bottom:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(180deg,#ffffff,#f6f9fb) !important;
}

.cp-card-title{
  color:#172033 !important;
  font-size:1rem !important;
  font-weight:900 !important;
}

.cp-card-note,
.cp-row-meta,
.cp-stat-note,
.cp-kv-key,
.cp-empty{
  color:#64748b !important;
}

.cp-stat{
  min-height:122px;
  padding:18px !important;
  position:relative;
}

.cp-stat:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--br-teal);
}

.cp-stat:nth-child(2):before{background:var(--br-blue);}
.cp-stat:nth-child(3):before{background:var(--br-amber);}
.cp-stat:nth-child(4):before{background:var(--br-rose);}

.cp-stat-label{
  color:#64748b !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.10em !important;
}

.cp-stat-value{
  color:#111827 !important;
  font-weight:950 !important;
}

.cp-row{
  padding:13px 14px !important;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

a.cp-row:hover,
.cp-row:hover{
  border-color:rgba(20,184,166,.44) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.08) !important;
  transform:translateY(-1px);
}

.cp-row-title,
.cp-kv-value{
  color:#111827 !important;
  font-weight:850 !important;
}

.cp-btn{
  border-radius:8px !important;
  min-height:38px;
  font-weight:850 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}

.cp-btn-primary,
.btn-primary{
  border-color:transparent !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
  color:#fff !important;
}

.cp-btn-ghost,
.btn-outline-primary,
.btn-light{
  border-color:#d7e1ea !important;
  background:#fff !important;
  color:#1e3a4a !important;
}

.cp-btn-ghost:hover,
.btn-outline-primary:hover,
.btn-light:hover{
  border-color:rgba(20,184,166,.42) !important;
  background:#eefaf8 !important;
  color:#0f766e !important;
}

.cp-badge,
.badge-soft,
.status-pill{
  border-radius:999px !important;
  font-weight:900 !important;
}

.cp-badge{
  border:1px solid rgba(148,163,184,.24) !important;
  background:#f1f5f9 !important;
  color:#334155 !important;
}

.cp-badge-active,
.cp-badge-approved,
.cp-badge-paid,
.cp-badge-open,
.cp-badge-success{
  background:#ecfdf5 !important;
  color:#047857 !important;
  border-color:#a7f3d0 !important;
}

.cp-badge-unpaid,
.cp-badge-overdue,
.cp-badge-pending,
.cp-badge-awaiting_payment,
.cp-badge-provisioning{
  background:#fff7ed !important;
  color:#c2410c !important;
  border-color:#fed7aa !important;
}

.cp-badge-suspended,
.cp-badge-cancelled,
.cp-badge-failed,
.cp-badge-danger{
  background:#fff1f2 !important;
  color:#be123c !important;
  border-color:#fecdd3 !important;
}

.cp-table,
.table{
  --bs-table-bg:transparent;
  border-color:rgba(148,163,184,.24) !important;
}

.cp-table thead th,
.table thead th{
  color:#64748b !important;
  background:#f4f8fb !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}

.cp-table tbody tr:hover,
.table tbody tr:hover{
  background:#f5fbfa !important;
}

.cp-progress{
  height:9px !important;
  border-radius:999px !important;
  background:#e6edf3 !important;
}

.cp-progress span,
.progress-bar{
  background:linear-gradient(90deg,#0f766e,#2563eb,#f59e0b) !important;
}

.dash-visual{
  border-radius:8px !important;
  background:linear-gradient(135deg,#061927,#0f766e 54%,#1d4ed8 100%) !important;
}

.dash-orbit-core,
.config-summary-mark,
.service-pick-mark,
.config-visual{
  border-radius:8px !important;
}

[data-theme="dark"] .cp-card,
[data-theme="dark"] .cp-stat,
[data-theme="dark"] .cp-row,
[data-theme="dark"] .cp-option,
[data-theme="dark"] .cp-choice,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .catalog-category-card{
  background:rgba(13,24,37,.96) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#e5edf4 !important;
}

[data-theme="dark"] .cp-card-head{
  background:linear-gradient(180deg,#111f31,#0d1825) !important;
  border-color:rgba(148,163,184,.18) !important;
}

[data-theme="dark"] .cp-card-title,
[data-theme="dark"] .cp-row-title,
[data-theme="dark"] .cp-kv-value,
[data-theme="dark"] .cp-stat-value{
  color:#f8fafc !important;
}

[data-theme="dark"] .cp-card-note,
[data-theme="dark"] .cp-row-meta,
[data-theme="dark"] .cp-stat-note,
[data-theme="dark"] .cp-kv-key,
[data-theme="dark"] .cp-empty{
  color:#9fb2c3 !important;
}

[data-theme="dark"] .cp-btn-ghost,
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-light{
  background:#0e1a28 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#dbe7ef !important;
}

[data-theme="dark"] .cp-table thead th,
[data-theme="dark"] .table thead th{
  background:#111f31 !important;
  color:#9fb2c3 !important;
}

/* =========================
   Admin panel
========================= */
html[data-bs-theme="light"] body{
  background:#eef4f8 !important;
  color:var(--br-ink) !important;
}

html[data-bs-theme="dark"] body{
  background:#07111d !important;
  color:#e5edf4 !important;
}

.layout{
  gap:0 !important;
  padding:0 !important;
  background:
    linear-gradient(90deg,rgba(15,118,110,.07),transparent 30%,rgba(245,158,11,.08) 82%,transparent),
    repeating-linear-gradient(0deg,rgba(148,163,184,.07) 0 1px,transparent 1px 36px),
    #eef4f8 !important;
}

[data-bs-theme="dark"] .layout{
  background:
    repeating-linear-gradient(0deg,rgba(148,163,184,.07) 0 1px,transparent 1px 36px),
    #07111d !important;
}

.layout:before,
.layout:after,
.shell:before,
.shell:after{
  display:none !important;
}

.sidebar{
  width:292px !important;
  flex-basis:292px !important;
  height:100vh !important;
  top:0 !important;
  border-radius:0 !important;
  border:0 !important;
  border-right:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(180deg,#0b1726 0%,#07111d 100%) !important;
  color:#e8f3fb !important;
  box-shadow:10px 0 30px rgba(15,23,42,.18) !important;
}

.sidebar:before{
  content:"";
  height:4px;
  flex:0 0 4px;
  background:linear-gradient(90deg,#14b8a6,#2563eb,#f59e0b,#e11d48);
}

.sidebar .brand{
  height:84px !important;
  min-height:84px !important;
  background:transparent !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
  padding:15px 18px !important;
}

.sidebar .brand:after{
  display:none !important;
}

.sidebar .logo{
  width:46px !important;
  height:46px !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 12px 24px rgba(20,184,166,.20) !important;
}

.sidebar .logo:before{
  display:none !important;
}

.brand-text{
  color:#fff !important;
  font-size:.82rem !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.brand-sub{
  color:#a9bdca !important;
}

.sidebar .section{
  padding:17px 12px 7px !important;
  color:#8ea6b8 !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
}

.sidebar .nav-link{
  min-height:44px;
  border-radius:8px !important;
  background:transparent !important;
  color:#d9e7ef !important;
  border:1px solid transparent !important;
  padding:9px 10px !important;
  font-weight:760 !important;
}

.sidebar .nav-link i{
  width:30px !important;
  height:30px !important;
  border-radius:8px !important;
  color:#77e7dc !important;
  background:rgba(20,184,166,.12) !important;
  border:1px solid rgba(45,212,191,.16) !important;
  box-shadow:none !important;
}

.sidebar .nav-link:hover{
  transform:none !important;
  color:#fff !important;
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(148,163,184,.16) !important;
}

.sidebar .nav-link.active{
  color:#fff !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 28px rgba(37,99,235,.20) !important;
}

.sidebar .nav-link.active:before{
  display:none !important;
}

.sidebar .nav-link.active i{
  color:#fff !important;
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.22) !important;
}

.sidebar .soft-divider{
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.34),transparent) !important;
}

.sidebar .btn.soft-card,
#themeBtn{
  border-radius:8px !important;
  border-color:rgba(148,163,184,.20) !important;
  background:rgba(255,255,255,.08) !important;
  color:#e8f3fb !important;
  box-shadow:none !important;
}

.shell{
  min-height:100vh !important;
  border-radius:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.shell .topbar{
  min-height:76px !important;
  border-radius:0 !important;
  border-bottom:1px solid rgba(148,163,184,.24) !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.05) !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
}

[data-bs-theme="dark"] .shell .topbar{
  background:rgba(9,16,27,.90) !important;
  border-color:rgba(148,163,184,.20) !important;
}

.top-title{
  color:#172033 !important;
  font-weight:900 !important;
}

[data-bs-theme="dark"] .top-title{
  color:#eef7ff !important;
}

.top-pill{
  border-radius:999px !important;
  border:1px solid rgba(20,184,166,.20) !important;
  background:#e8f8f5 !important;
  color:#0f766e !important;
  padding:.28rem .55rem !important;
  font-size:.76rem !important;
}

.search-soft,
.shell .form-control,
.shell .form-select{
  border-radius:8px !important;
  border:1px solid #d6e0ea !important;
  background:#fff !important;
  color:#172033 !important;
  box-shadow:none !important;
}

.search-soft:focus,
.shell .form-control:focus,
.shell .form-select:focus{
  border-color:rgba(20,184,166,.70) !important;
  box-shadow:0 0 0 3px rgba(20,184,166,.18) !important;
}

[data-bs-theme="dark"] .search-soft,
[data-bs-theme="dark"] .shell .form-control,
[data-bs-theme="dark"] .shell .form-select{
  background:#0e1a28 !important;
  border-color:rgba(148,163,184,.26) !important;
  color:#e5edf4 !important;
}

.shell main{
  max-width:1540px;
  margin:0 auto;
  padding:24px !important;
}

.soft-card,
.admin-card,
.approval,
.risk-card,
.configuration-item,
.mini-row,
.action-link,
.modal-content{
  border-radius:8px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:var(--br-shadow-soft) !important;
}

.soft-card:hover,
.admin-card:hover,
.action-link:hover{
  border-color:rgba(20,184,166,.34) !important;
}

.admin-overview{
  color:#172033 !important;
}

.admin-hero{
  border-radius:8px !important;
  border:0 !important;
  background:linear-gradient(135deg,#071b2a 0%,#0f766e 48%,#1d4ed8 80%,#8a2c15 100%) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.18) !important;
}

.admin-hero h1{
  color:#fff !important;
  font-weight:950 !important;
}

.admin-hero p{
  color:#d7f5f1 !important;
}

.safe-badge{
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#ecfeff !important;
}

.admin-hero-visual,
.admin-signal{
  border-radius:8px !important;
}

.kpi-icon,
.risk-icon,
.action-link i,
.stat-icon{
  border-radius:8px !important;
}

.kpi-label,
.card-head h2,
.configuration-title,
.mini-title,
.action-title{
  letter-spacing:0 !important;
}

.kpi-label{
  font-weight:900 !important;
}

.kpi-value,
.risk-card strong{
  color:#111827 !important;
  font-weight:950 !important;
}

.card-head{
  background:linear-gradient(180deg,#ffffff,#f6f9fb) !important;
}

.order-table th,
.shell main table:not([class*="table"]) thead th,
.table thead th{
  background:#f4f8fb !important;
  color:#64748b !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}

.shell main table:not([class*="table"]) td,
.table td{
  color:#172033 !important;
}

.status-good{background:#ecfdf5 !important;color:#047857 !important;}
.status-warn{background:#fff7ed !important;color:#c2410c !important;}
.status-bad{background:#fff1f2 !important;color:#be123c !important;}
.status-neutral{background:#f1f5f9 !important;color:#334155 !important;}

.btn,
.dropdown-menu,
.offcanvas,
.alert{
  border-radius:8px !important;
}

.dropdown-menu,
.offcanvas{
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 20px 48px rgba(15,23,42,.14) !important;
}

[data-bs-theme="dark"] .soft-card,
[data-bs-theme="dark"] .admin-card,
[data-bs-theme="dark"] .approval,
[data-bs-theme="dark"] .risk-card,
[data-bs-theme="dark"] .configuration-item,
[data-bs-theme="dark"] .mini-row,
[data-bs-theme="dark"] .action-link,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .offcanvas{
  background:rgba(13,24,37,.96) !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#e5edf4 !important;
}

[data-bs-theme="dark"] .admin-overview{
  color:#e5edf4 !important;
}

[data-bs-theme="dark"] .card-head{
  background:linear-gradient(180deg,#111f31,#0d1825) !important;
  border-color:rgba(148,163,184,.18) !important;
}

[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .risk-card strong,
[data-bs-theme="dark"] .shell main table:not([class*="table"]) td,
[data-bs-theme="dark"] .table td{
  color:#f8fafc !important;
}

[data-bs-theme="dark"] .order-table th,
[data-bs-theme="dark"] .shell main table:not([class*="table"]) thead th,
[data-bs-theme="dark"] .table thead th{
  background:#111f31 !important;
  color:#9fb2c3 !important;
}

@media (max-width:991.98px){
  .content,
  .shell main{
    padding:16px !important;
  }

  .topbar,
  .shell .topbar{
    min-height:66px !important;
  }

  .app-sidebar{
    width:min(86vw,312px) !important;
  }

  .layout{
    padding:12px !important;
    gap:12px !important;
  }

  .shell{
    border-radius:8px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.62) !important;
  }
}

@media (max-width:640px){
  .content,
  .shell main{
    padding:14px !important;
  }

  .cp-hero,
  .admin-hero{
    padding:18px !important;
  }

  .cp-card-head,
  .card-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
}

/* =========================
   Admin complete redesign layer
   Catches older custom admin page classes so all admin pages share one system.
========================= */
.layout .shell main{
  --ad-ink:#172033;
  --ad-muted:#64748b;
  --ad-line:#d9e3ec;
  --ad-panel:#ffffff;
  --ad-panel-2:#f5f8fb;
  --ad-teal:#0f766e;
  --ad-blue:#2563eb;
  --ad-sky:#0284c7;
  --ad-amber:#d97706;
  --ad-rose:#be123c;
  --ad-shadow:0 12px 28px rgba(15,23,42,.07);
  --ad-shadow-hover:0 18px 40px rgba(15,23,42,.11);
}

[data-bs-theme="dark"] .layout .shell main{
  --ad-ink:#edf6fb;
  --ad-muted:#9fb2c3;
  --ad-line:rgba(148,163,184,.22);
  --ad-panel:#0d1825;
  --ad-panel-2:#111f31;
  --ad-shadow:0 14px 32px rgba(0,0,0,.26);
  --ad-shadow-hover:0 20px 48px rgba(0,0,0,.36);
}

.layout .shell main > .container,
.layout .shell main > .container-fluid,
.layout .shell main > div[class$="-page"],
.layout .shell main > div[class*="-page "],
.layout .shell main > div[class$="-wrap"],
.layout .shell main > div[class*="-wrap "],
.layout .shell main > .admin-overview{
  max-width:1540px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  color:var(--ad-ink) !important;
}

.layout .shell main h1,
.layout .shell main h2,
.layout .shell main h3,
.layout .shell main h4,
.layout .shell main h5,
.layout .shell main h6{
  color:var(--ad-ink);
  font-weight:880;
  letter-spacing:0;
}

.layout .shell main p,
.layout .shell main .text-muted,
.layout .shell main .small,
.layout .shell main [class$="-sub"],
.layout .shell main [class*="-sub "],
.layout .shell main [class$="-note"],
.layout .shell main [class*="-note "],
.layout .shell main [class$="-subtitle"],
.layout .shell main [class*="-subtitle "]{
  color:var(--ad-muted) !important;
}

.layout .shell main [class$="-hero"],
.layout .shell main [class*="-hero "],
.layout .shell main [class$="-header-card"],
.layout .shell main [class*="-header-card "],
.layout .shell main .vm-hero,
.layout .shell main .users-header-wrap{
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(135deg,#071b2a 0%,#0f766e 42%,#1d4ed8 76%,#7c2d12 100%) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.18) !important;
  color:#f8fafc !important;
}

.layout .shell main [class$="-hero"] *,
.layout .shell main [class*="-hero "] *,
.layout .shell main [class$="-header-card"] *,
.layout .shell main [class*="-header-card "] *,
.layout .shell main .vm-hero *,
.layout .shell main .users-header-wrap *{
  color:inherit;
}

.layout .shell main [class$="-hero"] h1,
.layout .shell main [class$="-hero"] h2,
.layout .shell main [class*="-hero "] h1,
.layout .shell main [class*="-hero "] h2,
.layout .shell main [class$="-header-card"] h1,
.layout .shell main [class$="-header-card"] h2,
.layout .shell main [class*="-header-card "] h1,
.layout .shell main [class*="-header-card "] h2,
.layout .shell main .vm-hero h1,
.layout .shell main .vm-hero h2,
.layout .shell main .users-header-wrap h1{
  color:#fff !important;
  font-weight:950 !important;
}

.layout .shell main [class$="-hero"]::before,
.layout .shell main [class*="-hero "]::before,
.layout .shell main [class$="-header-card"]::before,
.layout .shell main [class*="-header-card "]::before{
  opacity:.22 !important;
}

.layout .shell main [class$="-pill"],
.layout .shell main [class*="-pill "],
.layout .shell main [class$="-chip"],
.layout .shell main [class*="-chip "],
.layout .shell main .badge,
.layout .shell main .badge-soft{
  border-radius:999px !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
}

.layout .shell main .card,
.layout .shell main .soft-card,
.layout .shell main [class$="-card"],
.layout .shell main [class*="-card "],
.layout .shell main [class$="-section-box"],
.layout .shell main [class*="-section-box "],
.layout .shell main [class$="-filters"],
.layout .shell main [class*="-filters "],
.layout .shell main [class$="-filters-card"],
.layout .shell main [class*="-filters-card "],
.layout .shell main [class$="-table-card"],
.layout .shell main [class*="-table-card "]{
  border-radius:8px !important;
  border:1px solid var(--ad-line) !important;
  background:var(--ad-panel) !important;
  box-shadow:var(--ad-shadow) !important;
  color:var(--ad-ink) !important;
}

.layout .shell main .card:hover,
.layout .shell main .soft-card:hover,
.layout .shell main [class$="-card"]:hover,
.layout .shell main [class*="-card "]:hover{
  border-color:rgba(20,184,166,.34) !important;
}

.layout .shell main .card-header,
.layout .shell main .soft-card-header,
.layout .shell main [class$="-card-header"],
.layout .shell main [class*="-card-header "],
.layout .shell main [class$="-table-header"],
.layout .shell main [class*="-table-header "],
.layout .shell main .card-head{
  border-radius:8px 8px 0 0 !important;
  border-bottom:1px solid var(--ad-line) !important;
  background:linear-gradient(180deg,#ffffff,#f5f8fb) !important;
  color:var(--ad-ink) !important;
}

[data-bs-theme="dark"] .layout .shell main .card-header,
[data-bs-theme="dark"] .layout .shell main .soft-card-header,
[data-bs-theme="dark"] .layout .shell main [class$="-card-header"],
[data-bs-theme="dark"] .layout .shell main [class*="-card-header "],
[data-bs-theme="dark"] .layout .shell main [class$="-table-header"],
[data-bs-theme="dark"] .layout .shell main [class*="-table-header "],
[data-bs-theme="dark"] .layout .shell main .card-head{
  background:linear-gradient(180deg,#111f31,#0d1825) !important;
}

.layout .shell main .card-body,
.layout .shell main .soft-card-body,
.layout .shell main .card-bodyx,
.layout .shell main [class$="-card-body"],
.layout .shell main [class*="-card-body "],
.layout .shell main [class$="-body"],
.layout .shell main [class*="-body "]{
  color:var(--ad-ink) !important;
}

.layout .shell main .table-responsive,
.layout .shell main [class$="-table-wrap"],
.layout .shell main [class*="-table-wrap "]{
  border-radius:8px !important;
}

.layout .shell main .table{
  margin-bottom:0 !important;
  color:var(--ad-ink) !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

.layout .shell main .table thead th{
  background:#f1f6f9 !important;
  color:#5b7083 !important;
  border-bottom:1px solid var(--ad-line) !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  white-space:nowrap;
}

.layout .shell main .table tbody td,
.layout .shell main .table tbody th{
  border-color:rgba(148,163,184,.18) !important;
  color:var(--ad-ink) !important;
  vertical-align:middle !important;
}

.layout .shell main .table-hover tbody tr:hover,
.layout .shell main .table tbody tr:hover{
  background:#f3fbfa !important;
}

[data-bs-theme="dark"] .layout .shell main .table thead th{
  background:#111f31 !important;
  color:#9fb2c3 !important;
}

[data-bs-theme="dark"] .layout .shell main .table-hover tbody tr:hover,
[data-bs-theme="dark"] .layout .shell main .table tbody tr:hover{
  background:rgba(20,184,166,.08) !important;
}

.layout .shell main .form-label,
.layout .shell main label:not(.form-check-label){
  color:#46596b !important;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:0;
}

[data-bs-theme="dark"] .layout .shell main .form-label,
[data-bs-theme="dark"] .layout .shell main label:not(.form-check-label){
  color:#b8c7d4 !important;
}

.layout .shell main .form-control,
.layout .shell main .form-select,
.layout .shell main textarea,
.layout .shell main input[type="text"],
.layout .shell main input[type="email"],
.layout .shell main input[type="number"],
.layout .shell main input[type="password"],
.layout .shell main input[type="url"],
.layout .shell main input[type="search"]{
  min-height:40px;
  border-radius:8px !important;
  border:1px solid #d6e0ea !important;
  background:#fff !important;
  color:#172033 !important;
  box-shadow:none !important;
}

.layout .shell main textarea{
  min-height:92px;
}

.layout .shell main .form-control:focus,
.layout .shell main .form-select:focus,
.layout .shell main textarea:focus,
.layout .shell main input:focus{
  border-color:rgba(20,184,166,.72) !important;
  box-shadow:0 0 0 3px rgba(20,184,166,.18) !important;
}

[data-bs-theme="dark"] .layout .shell main .form-control,
[data-bs-theme="dark"] .layout .shell main .form-select,
[data-bs-theme="dark"] .layout .shell main textarea,
[data-bs-theme="dark"] .layout .shell main input[type="text"],
[data-bs-theme="dark"] .layout .shell main input[type="email"],
[data-bs-theme="dark"] .layout .shell main input[type="number"],
[data-bs-theme="dark"] .layout .shell main input[type="password"],
[data-bs-theme="dark"] .layout .shell main input[type="url"],
[data-bs-theme="dark"] .layout .shell main input[type="search"]{
  background:#0e1a28 !important;
  border-color:rgba(148,163,184,.26) !important;
  color:#e5edf4 !important;
}

.layout .shell main .input-group-text{
  border-radius:8px !important;
  border-color:#d6e0ea !important;
  background:#f1f6f9 !important;
  color:#52687a !important;
  font-weight:800;
}

.layout .shell main .form-check-input{
  border-radius:6px;
  border-color:#bfd0de;
}

.layout .shell main .form-check-input:checked{
  background-color:#0f766e;
  border-color:#0f766e;
}

.layout .shell main .btn{
  border-radius:8px !important;
  font-weight:820 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}

.layout .shell main .btn-primary,
.layout .shell main .btn-gradient,
.layout .shell main .pkg-btn-primary,
.layout .shell main .cat-btn-primary,
.layout .shell main .app-btn-primary,
.layout .shell main [class$="-btn-primary"],
.layout .shell main [class*="-btn-primary "]{
  border-color:transparent !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(37,99,235,.16) !important;
}

.layout .shell main .btn-outline-primary,
.layout .shell main .btn-light,
.layout .shell main .btn-secondary,
.layout .shell main [class$="-action-btn"],
.layout .shell main [class*="-action-btn "]{
  border-color:#d7e1ea !important;
  background:#fff !important;
  color:#1e3a4a !important;
}

.layout .shell main .btn-outline-primary:hover,
.layout .shell main .btn-light:hover,
.layout .shell main .btn-secondary:hover,
.layout .shell main [class$="-action-btn"]:hover,
.layout .shell main [class*="-action-btn "]:hover{
  border-color:rgba(20,184,166,.42) !important;
  background:#eefaf8 !important;
  color:#0f766e !important;
}

[data-bs-theme="dark"] .layout .shell main .btn-outline-primary,
[data-bs-theme="dark"] .layout .shell main .btn-light,
[data-bs-theme="dark"] .layout .shell main .btn-secondary,
[data-bs-theme="dark"] .layout .shell main [class$="-action-btn"],
[data-bs-theme="dark"] .layout .shell main [class*="-action-btn "]{
  background:#0e1a28 !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#dbe7ef !important;
}

.layout .shell main .btn-danger{
  background:#be123c !important;
  border-color:#be123c !important;
  color:#fff !important;
}

.layout .shell main .btn-warning{
  background:#d97706 !important;
  border-color:#d97706 !important;
  color:#fff !important;
}

.layout .shell main .btn-success{
  background:#047857 !important;
  border-color:#047857 !important;
  color:#fff !important;
}

.layout .shell main .nav-tabs,
.layout .shell main .nav-pills{
  gap:8px;
  border:0 !important;
}

.layout .shell main .nav-tabs .nav-link,
.layout .shell main .nav-pills .nav-link{
  border-radius:8px !important;
  border:1px solid var(--ad-line) !important;
  color:#46596b !important;
  background:var(--ad-panel) !important;
  font-weight:820;
}

.layout .shell main .nav-tabs .nav-link.active,
.layout .shell main .nav-pills .nav-link.active{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
}

.layout .shell main .list-group-item{
  background:transparent !important;
  border-color:rgba(148,163,184,.20) !important;
  color:var(--ad-ink) !important;
}

.layout .shell main .alert{
  border-radius:8px !important;
  border:1px solid var(--ad-line) !important;
  box-shadow:var(--ad-shadow) !important;
}

.layout .shell main .pagination{
  gap:6px;
}

.layout .shell main .page-link{
  border-radius:8px !important;
  border-color:#d7e1ea !important;
  color:#1e3a4a !important;
  font-weight:800;
}

.layout .shell main .active > .page-link,
.layout .shell main .page-link.active{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
}

.layout .shell main .dropdown-menu{
  border-radius:8px !important;
  border:1px solid var(--ad-line) !important;
  background:var(--ad-panel) !important;
  box-shadow:0 20px 48px rgba(15,23,42,.14) !important;
}

.layout .shell main .dropdown-item{
  border-radius:7px;
  font-weight:700;
}

.layout .shell main .dropdown-item:hover{
  background:#eefaf8 !important;
  color:#0f766e !important;
}

.layout .shell main .progress,
.layout .shell main .progress-track{
  border-radius:999px !important;
  background:#e6edf3 !important;
}

.layout .shell main .progress-bar,
.layout .shell main .progress-fill{
  background:linear-gradient(90deg,#0f766e,#2563eb,#d97706) !important;
}

.layout .shell main .user-avatar,
.layout .shell main [class$="-avatar"],
.layout .shell main [class*="-avatar "],
.layout .shell main .logo-preview,
.layout .shell main [class$="-iconpill"],
.layout .shell main [class*="-iconpill "]{
  border-radius:8px !important;
}

.layout .shell main .menu-sheet{
  border-radius:8px !important;
  border:1px solid var(--ad-line) !important;
  background:var(--ad-panel) !important;
  box-shadow:0 20px 48px rgba(15,23,42,.16) !important;
}

.layout .shell main .menu-section{
  background:var(--ad-panel-2) !important;
  color:var(--ad-muted) !important;
  letter-spacing:.08em !important;
}

.layout .shell main .menu-item:hover:not(:disabled){
  background:#eefaf8 !important;
  color:#0f766e !important;
}

.layout .shell main .invoice-shell,
.layout .shell main .invoice-paper,
.layout .shell main .print-shell{
  border-radius:8px !important;
  background:var(--ad-panel) !important;
  border:1px solid var(--ad-line) !important;
  box-shadow:var(--ad-shadow) !important;
}

.layout .shell main .settings-section,
.layout .shell main .setup-step,
.layout .shell main .gateway-card,
.layout .shell main .provider-card,
.layout .shell main .ticket-card,
.layout .shell main .user-detail-card{
  border-radius:8px !important;
  border:1px solid var(--ad-line) !important;
  background:var(--ad-panel) !important;
  box-shadow:var(--ad-shadow) !important;
}

.layout .shell main .pkg-table tbody tr,
.layout .shell main .app-table tbody tr,
.layout .shell main .cat-table tbody tr,
.layout .shell main .loc-table tbody tr,
.layout .shell main .os-table tbody tr{
  background:transparent !important;
}

.layout .shell main .pkg-table tbody tr:hover,
.layout .shell main .app-table tbody tr:hover,
.layout .shell main .cat-table tbody tr:hover,
.layout .shell main .loc-table tbody tr:hover,
.layout .shell main .os-table tbody tr:hover{
  transform:none !important;
}

.layout .shell main .empty-state,
.layout .shell main [class$="-empty"],
.layout .shell main [class*="-empty "]{
  border-radius:8px !important;
  border:1px dashed rgba(148,163,184,.42) !important;
  background:linear-gradient(180deg,#fff,#f6f9fb) !important;
  color:var(--ad-muted) !important;
}

[data-bs-theme="dark"] .layout .shell main .empty-state,
[data-bs-theme="dark"] .layout .shell main [class$="-empty"],
[data-bs-theme="dark"] .layout .shell main [class*="-empty "]{
  background:linear-gradient(180deg,#111f31,#0d1825) !important;
}

@media (max-width:768px){
  .layout .shell main [class$="-hero"],
  .layout .shell main [class*="-hero "],
  .layout .shell main [class$="-header-card"],
  .layout .shell main [class*="-header-card "]{
    padding:18px !important;
  }

  .layout .shell main .table thead{
    font-size:.72rem;
  }
}

/* Admin fluidity repair: keep pages full-width and responsive. */
.layout,
.layout .shell{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.layout .shell main{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  padding:clamp(14px,1.25vw,24px) !important;
}

.layout .shell main > .container,
.layout .shell main > .container-sm,
.layout .shell main > .container-md,
.layout .shell main > .container-lg,
.layout .shell main > .container-xl,
.layout .shell main > .container-xxl,
.layout .shell main > .container-fluid,
.layout .shell main > .admin-overview,
.layout .shell main > div[class$="-page"],
.layout .shell main > div[class*="-page "],
.layout .shell main > div[class$="-wrap"],
.layout .shell main > div[class*="-wrap "]{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.layout .shell main .vm-wrap,
.layout .shell main .prov-wrap,
.layout .shell main .inv-wrap,
.layout .shell main .invshow-wrap,
.layout .shell main .ordd-wrap,
.layout .shell main .invoice-form-wrap,
.layout .shell main .invoice-edit-wrap,
.layout .shell main .invoice-create-wrap,
.layout .shell main .print-wrap,
.layout .shell main .admin-overview{
  width:100% !important;
  max-width:none !important;
}

.layout .shell main .row{
  min-width:0;
}

.layout .shell main [class^="col"],
.layout .shell main [class*=" col"]{
  min-width:0;
}

.layout .shell main .card,
.layout .shell main .soft-card,
.layout .shell main [class$="-card"],
.layout .shell main [class*="-card "]{
  max-width:none !important;
}

.layout .shell main .table-responsive,
.layout .shell main [class$="-table-wrap"],
.layout .shell main [class*="-table-wrap "]{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

.layout .shell main .table{
  width:100% !important;
}

.layout .shell main .table th,
.layout .shell main .table td{
  overflow-wrap:anywhere;
}

.layout .shell main .table th,
.layout .shell main .table td.text-nowrap,
.layout .shell main .table .text-nowrap,
.layout .shell main .table [class$="-mono"],
.layout .shell main .table [class*="-mono "]{
  overflow-wrap:normal;
  white-space:nowrap;
}

.layout .shell main .form-control,
.layout .shell main .form-select,
.layout .shell main textarea,
.layout .shell main input{
  max-width:100% !important;
}

.layout .shell main .d-flex,
.layout .shell main .admin-hero,
.layout .shell main [class$="-hero-inner"],
.layout .shell main [class*="-hero-inner "],
.layout .shell main [class$="-actions"],
.layout .shell main [class*="-actions "]{
  min-width:0;
}

@media (min-width:992px){
  .layout .shell main{
    padding:24px !important;
  }
}

@media (max-width:991.98px){
  .layout{
    padding:0 !important;
  }

  .layout .shell{
    border-radius:0 !important;
  }
}

@media (max-width:575.98px){
  .layout .shell main{
    padding:12px !important;
  }

  .layout .shell main .btn{
    white-space:normal;
  }
}

/* =========================
   Premium polish layer
   Shared micro-interactions and stronger visual hierarchy.
========================= */
.content,
.layout .shell main{
  animation:panelPageIn .34s ease both;
}

.cp-card,
.admin-card,
.soft-card,
.layout .shell main .card,
.layout .shell main [class$="-card"],
.layout .shell main [class*="-card "]{
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.cp-card::before,
.admin-card::before,
.soft-card::before,
.layout .shell main .card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(90deg,var(--br-teal-2),var(--br-blue),var(--br-amber));
  opacity:.78;
  pointer-events:none;
}

.cp-card:hover,
.admin-card:hover,
.soft-card:hover,
.layout .shell main .card:hover{
  transform:translateY(-2px);
  box-shadow:var(--br-shadow) !important;
  border-color:rgba(20,184,166,.36) !important;
}

.cp-stat,
.risk-card,
.kpi,
.catalog-health-box,
.approval,
.revenue-pill{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cp-stat:hover,
.risk-card:hover,
.kpi:hover,
.catalog-health-box:hover,
.approval:hover,
.revenue-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(15,23,42,.09) !important;
  border-color:rgba(37,99,235,.24) !important;
}

.cp-card-head,
.card-head{
  position:relative;
}

.cp-card-head::after,
.card-head::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,rgba(20,184,166,.42),rgba(37,99,235,.28),transparent);
  pointer-events:none;
}

.cp-btn,
.btn,
.action-link,
.nav-link.side,
.sidebar .nav-link{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.cp-btn:hover,
.btn:hover{
  transform:translateY(-1px);
}

.cp-btn-primary:hover,
.btn-primary:hover{
  box-shadow:0 14px 28px rgba(37,99,235,.18) !important;
}

.form-control,
.form-select,
.search-soft,
.search-wrap input,
.layout .shell main textarea,
.layout .shell main input{
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.form-control:hover,
.form-select:hover,
.search-soft:hover,
.search-wrap input:hover,
.layout .shell main textarea:hover,
.layout .shell main input:hover{
  border-color:rgba(37,99,235,.30) !important;
}

.form-control:focus,
.form-select:focus,
.search-soft:focus,
.search-wrap input:focus,
.layout .shell main textarea:focus,
.layout .shell main input:focus{
  transform:translateY(-1px);
}

.cp-table,
.table{
  border-collapse:separate !important;
  border-spacing:0;
}

.cp-table thead th:first-child,
.table thead th:first-child{
  border-top-left-radius:8px;
}

.cp-table thead th:last-child,
.table thead th:last-child{
  border-top-right-radius:8px;
}

.table-responsive{
  border-radius:8px;
}

.cp-table tbody tr,
.table tbody tr{
  transition:background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.cp-table tbody tr:hover,
.table tbody tr:hover{
  box-shadow:inset 3px 0 0 rgba(20,184,166,.72);
}

.cp-empty,
.empty-state,
.layout .shell main [class$="-empty"],
.layout .shell main [class*="-empty "]{
  position:relative;
  overflow:hidden;
  min-height:88px;
}

.cp-empty::before,
.empty-state::before,
.layout .shell main [class$="-empty"]::before,
.layout .shell main [class*="-empty "]::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--br-teal-2),var(--br-blue));
  opacity:.7;
}

.cp-badge,
.status-pill,
.badge,
.badge-soft{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.dropdown-menu{
  padding:8px !important;
}

.dropdown-item{
  border-radius:7px !important;
  font-weight:760;
  transition:background .14s ease, color .14s ease, transform .14s ease;
}

.dropdown-item:hover{
  background:#eefaf8 !important;
  color:#0f766e !important;
  transform:translateX(1px);
}

.topbar,
.shell .topbar{
  position:sticky;
  top:0;
}

.app-sidebar,
.sidebar{
  scrollbar-gutter:stable;
}

.side-scroll,
.sidebar .overflow-auto{
  scroll-behavior:smooth;
}

.side-scroll::-webkit-scrollbar-thumb,
.sidebar .overflow-auto::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--br-teal-2),var(--br-blue)) !important;
}

.progress-fill,
.analytics-fill,
.dash-chart-fill,
.dash-resource-track span,
.cp-progress span{
  animation:panelGrowWidth .7s ease both;
}

.kpi-spark .spark-line,
.dash-spark .line{
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:panelDrawLine .9s ease forwards;
}

[data-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:hover{
  background:rgba(20,184,166,.14) !important;
  color:#99f6e4 !important;
}

[data-theme="dark"] .cp-card:hover,
[data-theme="dark"] .soft-card:hover,
[data-theme="dark"] .layout .shell main .card:hover,
[data-bs-theme="dark"] .admin-card:hover,
[data-bs-theme="dark"] .soft-card:hover,
[data-bs-theme="dark"] .layout .shell main .card:hover{
  box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
}

@keyframes panelPageIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
}

@keyframes panelGrowWidth{
  from{width:0}
}

@keyframes panelDrawLine{
  to{stroke-dashoffset:0}
}

/* =========================
   UI/UX refinement layer
   Broad polish for customer and admin workspaces.
========================= */
:root{
  --ux-ring:0 0 0 3px rgba(20,184,166,.18);
  --ux-ring-blue:0 0 0 3px rgba(37,99,235,.18);
  --ux-elevated:0 18px 46px rgba(15,23,42,.11);
  --ux-elevated-strong:0 24px 64px rgba(15,23,42,.16);
}

.cp-page{
  width:100%;
  max-width:none !important;
}

.cp-grid{
  gap:clamp(14px,1.2vw,22px) !important;
}

.cp-hero,
.admin-hero,
.layout .shell main [class$="-hero"],
.layout .shell main [class*="-hero "]{
  isolation:isolate;
}

.cp-hero > *,
.admin-hero > *,
.layout .shell main [class$="-hero"] > *,
.layout .shell main [class*="-hero "] > *{
  min-width:0;
}

.cp-hero .cp-actions,
.admin-hero .cp-actions,
.layout .shell main [class$="-actions"],
.layout .shell main [class*="-actions "]{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.cp-card,
.cp-stat,
.plan-card,
.catalog-category-card,
.layout .shell main .card,
.layout .shell main [class$="-card"],
.layout .shell main [class*="-card "]{
  overflow:hidden;
}

.cp-card:hover,
.plan-card:hover,
.catalog-category-card:hover,
.layout .shell main [class$="-card"]:hover,
.layout .shell main [class*="-card "]:hover{
  box-shadow:var(--ux-elevated) !important;
}

.cp-stat{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}

.cp-stat-value,
.kpi-value,
.plan-price{
  overflow-wrap:anywhere;
}

.cp-card-head,
.card-head,
.plan-head{
  gap:12px;
}

.cp-card-head > *,
.card-head > *,
.plan-head > *{
  min-width:0;
}

.cp-card-title,
.plan-name,
.action-title,
.mini-title,
.dash-action-title{
  text-wrap:balance;
}

.cp-card-note,
.cp-row-meta,
.plan-desc,
.dash-action-note,
.mini-note,
.action-sub{
  text-wrap:pretty;
}

.cp-row,
.mini-row,
.action-link,
.dash-action-card{
  min-width:0;
}

.cp-row > *,
.mini-row > *,
.action-link > *,
.dash-action-card > *{
  min-width:0;
}

.cp-row-title,
.cp-row-meta,
.mini-title,
.mini-note,
.action-title,
.action-sub{
  overflow-wrap:anywhere;
}

.cp-choice-grid,
.plan-grid,
.dash-action-grid{
  align-items:stretch;
}

.cp-choice,
.catalog-config .config-selectable{
  cursor:pointer;
  isolation:isolate;
}

.btn-check:checked + .cp-choice,
.catalog-config .btn-check:checked + .config-selectable,
.catalog-config .config-selectable.is-active{
  border-color:rgba(15,118,110,.72) !important;
  box-shadow:var(--ux-ring), 0 16px 36px rgba(15,118,110,.12) !important;
  transform:translateY(-1px);
}

.btn-check:checked + .cp-choice::before,
.catalog-config .btn-check:checked + .config-selectable::before,
.catalog-config .config-selectable.is-active::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,var(--br-teal-2),var(--br-blue));
  opacity:.95;
  z-index:0;
}

.catalog-config .config-choice-main,
.catalog-config .config-selection-state,
.cp-choice > *{
  position:relative;
  z-index:1;
}

.catalog-config .config-selection-state{
  margin-top:auto;
}

.catalog-config .config-visual,
.config-summary-mark,
.service-pick-mark,
.plan-spec i,
.dash-action-icon,
.dash-timeline-icon,
.dash-resource-label i{
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}

.config-summary-chip{
  min-width:0;
}

.config-summary-text{
  overflow-wrap:anywhere;
}

.plan-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.plan-card:hover{
  transform:translateY(-3px);
  border-color:rgba(20,184,166,.38) !important;
}

.plan-card:hover .plan-actions .cp-btn{
  box-shadow:0 14px 30px rgba(37,99,235,.18) !important;
}

.plan-badge,
.plan-location-pill,
.plan-region-pill{
  max-width:100%;
}

.plan-location-pill,
.plan-region-pill{
  min-height:34px;
}

.plan-location-flag,
.config-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.4em;
  height:1.4em;
}

.plan-region-pill.active{
  box-shadow:var(--ux-ring);
}

.plan-spec{
  min-width:0;
}

.plan-spec strong,
.plan-spec span{
  overflow-wrap:anywhere;
}

.dash-hero-side{
  min-width:min(410px,100%) !important;
}

.dash-visual{
  min-height:176px;
  transform:translateZ(0);
}

.dash-kpi-mini{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dash-chart-layout,
.dash-resource-grid{
  min-width:0;
}

.dash-ring{
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 12px 26px rgba(15,23,42,.08);
}

.dash-chart-row{
  min-width:0;
}

.dash-chart-row > span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dash-action-card,
.action-link,
.mini-row{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.dash-action-card:hover,
.action-link:hover,
.mini-row:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(15,23,42,.09) !important;
  border-color:rgba(37,99,235,.28) !important;
}

.cp-table-wrap,
.table-responsive{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.cp-table th,
.cp-table td,
.table th,
.table td{
  vertical-align:middle;
}

.cp-table td,
.table td{
  max-width:320px;
}

.cp-table td:not(.text-nowrap),
.table td:not(.text-nowrap){
  overflow-wrap:anywhere;
}

.cp-btn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-width:0;
}

.cp-btn i,
.btn i{
  flex:0 0 auto;
}

.cp-btn:disabled,
.btn:disabled,
.cp-btn.disabled,
.btn.disabled{
  opacity:.62 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}

.form-text,
.invalid-feedback,
.valid-feedback{
  overflow-wrap:anywhere;
}

.input-group{
  min-width:0;
}

.input-group > .form-control,
.input-group > .form-select{
  min-width:0;
}

.topbar,
.shell .topbar{
  gap:12px;
}

.top-actions,
.shell .topbar > .d-flex{
  min-width:0;
}

.search-wrap,
.search-soft{
  min-width:0;
}

.dropdown-menu{
  max-width:min(92vw,420px);
}

.dropdown-item{
  white-space:normal;
}

.client-announcement{
  overflow:hidden;
}

.client-announcement-main{
  min-width:0;
}

.client-announcement-action{
  flex:0 0 auto;
}

.sidebar .overflow-auto,
.side-scroll{
  padding-bottom:24px !important;
}

.sidebar .nav-link .link-text,
.nav-link.side .label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar .btn.soft-card,
#themeBtn{
  min-height:42px;
}

.layout .shell main .dataTables_wrapper,
.layout .shell main .table-responsive{
  min-width:0;
}

.layout .shell main img,
.content img{
  max-width:100%;
}

[data-theme="dark"] .btn-check:checked + .cp-choice,
[data-theme="dark"] .catalog-config .btn-check:checked + .config-selectable,
[data-theme="dark"] .catalog-config .config-selectable.is-active{
  box-shadow:0 0 0 3px rgba(45,212,191,.20), 0 16px 36px rgba(0,0,0,.24) !important;
}

[data-bs-theme="dark"] .dash-action-card:hover,
[data-bs-theme="dark"] .action-link:hover,
[data-bs-theme="dark"] .mini-row:hover,
[data-theme="dark"] .dash-action-card:hover,
[data-theme="dark"] .action-link:hover,
[data-theme="dark"] .mini-row:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
}

@media (max-width:1199.98px){
  .dash-chart-layout{
    grid-template-columns:1fr !important;
    justify-items:start;
  }

  .dash-ring{
    width:116px !important;
    height:116px !important;
  }

  .dash-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:991.98px){
  .cp-hero,
  .dashboard-hero,
  .admin-hero{
    align-items:stretch !important;
  }

  .dash-hero-side{
    justify-items:stretch !important;
  }

  .dash-actions,
  .cp-actions{
    justify-content:flex-start !important;
  }

  .dash-visual{
    width:100% !important;
  }

  .client-announcement{
    max-width:none;
  }
}

@media (max-width:767.98px){
  .cp-grid,
  .plan-summary-grid,
  .dash-action-grid,
  .dash-resource-grid{
    grid-template-columns:1fr !important;
  }

  .cp-card-head,
  .card-head,
  .plan-head{
    align-items:stretch !important;
  }

  .cp-card-head .cp-btn,
  .card-head .btn,
  .plan-actions .cp-btn{
    width:100%;
  }

  .cp-row{
    align-items:flex-start !important;
  }

  .cp-row > .d-flex{
    width:100%;
    justify-content:flex-start;
  }

  .catalog-config .config-choice-main{
    gap:10px;
  }

  .catalog-config .config-visual{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  .plan-region-filter{
    align-items:stretch !important;
  }

  .plan-region-filter-title{
    width:100%;
  }

  .plan-region-pill{
    flex:1 1 auto;
    justify-content:center;
  }
}

@media (max-width:575.98px){
  .content,
  .shell main{
    padding:12px !important;
  }

  .cp-hero,
  .dashboard-hero,
  .admin-hero{
    padding:16px !important;
  }

  .cp-title,
  .admin-hero h1{
    font-size:clamp(1.35rem,8vw,2rem) !important;
    line-height:1.12 !important;
  }

  .cp-subtitle,
  .admin-hero p{
    font-size:.92rem !important;
  }

  .cp-btn,
  .btn{
    min-height:40px;
  }

  .dash-visual-grid{
    grid-template-columns:1fr !important;
  }

  .dash-orbit{
    display:none !important;
  }

  .dash-kpi-strip{
    grid-template-columns:1fr !important;
    position:static !important;
    margin-top:10px;
  }

  .dash-visual{
    min-height:0;
  }

  .user-pill{
    padding:.35rem !important;
  }

  .client-announcement-icon{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }

  .sidebar .nav-link .link-text,
  .nav-link.side .label{
    white-space:normal;
  }
}

@media (prefers-reduced-motion: reduce){
  .dash-action-card,
  .mini-row,
  .plan-card,
  .catalog-category-card{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .content,
  .layout .shell main,
  .cp-card,
  .admin-card,
  .soft-card,
  .layout .shell main .card,
  .cp-stat,
  .risk-card,
  .kpi,
  .catalog-health-box,
  .approval,
  .revenue-pill,
  .cp-btn,
  .btn,
  .action-link,
  .nav-link.side,
  .sidebar .nav-link,
  .dropdown-item,
  .progress-fill,
  .analytics-fill,
  .dash-chart-fill,
  .dash-resource-track span,
  .cp-progress span,
  .kpi-spark .spark-line,
  .dash-spark .line{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}