/* ============================================================
   BTBC — Business Time Center · Enterprise Dashboard Theme
   Loaded automatically after the admin theme CSS (custom.css).
   UI-only restyle: no markup behaviour changes.
   ============================================================ */

:root {
  --btc-navy:        #0d1726;
  --btc-navy-soft:   #14213a;
  --btc-navy-border: rgba(255, 255, 255, 0.07);
  --btc-bg:          #f6f7f9;
  --btc-card:        #ffffff;
  --btc-border:      #e4e7ee;
  --btc-border-soft: #eceef3;
  --btc-text:        #172033;
  --btc-muted:       #64748b;
  --btc-faint:       #94a3b8;
  --btc-accent:      #2563eb;
  --btc-accent-dark: #1d4ed8;
  --btc-accent-soft: #eff4ff;
  --btc-green:       #16a34a;
  --btc-green-soft:  #ecfdf3;
  --btc-orange:      #d97706;
  --btc-orange-soft: #fffaeb;
  --btc-blue:        #2563eb;
  --btc-blue-soft:   #eff6ff;
  --btc-red:         #dc2626;
  --btc-red-soft:    #fef2f2;
  --btc-gray-soft:   #f4f5f7;
  --btc-shadow:      0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --btc-radius:      10px;
  --btc-radius-sm:   8px;
  --btc-font-serif:  "Georgia", "Times New Roman", "Iowan Old Style", serif;
}

/* ---------- Base ---------- */

body {
  background-color: var(--btc-bg);
  color: var(--btc-text);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

#wrapper {
  background-color: var(--btc-bg);
}

.content {
  padding: 26px 30px 40px;
}

a {
  color: var(--btc-accent);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--btc-text);
}

/* ---------- Sidebar — dark navy ---------- */

.sidebar {
  background: var(--btc-navy) !important;
  border-right: 1px solid var(--btc-navy-border) !important;
  padding: 0 12px 24px !important;
  width: 230px !important;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 57px;
  bottom: 0;
  left: 0;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

/* Brand */

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px 16px;
  border-bottom: 1px solid var(--btc-navy-border);
  margin-bottom: 6px;
}

.sidebar-brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: #18243c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.btc-pin-root {
  position: absolute;
  top: 12px;
  right: 12px;
}

.sidebar-brand-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sidebar-brand-monogram {
  font-family: var(--btc-font-serif);
  font-size: 14px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.02em;
  line-height: 1;
}

.sidebar-brand-name {
  font-family: var(--btc-font-serif);
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1.35;
  color: #f1f5f9;
  text-transform: uppercase;
  font-weight: 700;
}

.sidebar-brand-name span {
  display: block;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.34em;
  font-size: 11px;
}

/* Section titles */

.sidebar .menu-section-title {
  padding: 18px 10px 6px;
  list-style: none;
}

.sidebar .menu-section-title span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #64748b;
  text-transform: uppercase;
}

/* Sidebar nav icons — consistent accent blue */
.sidebar ul.nav li a i.menu-icon {
  color: #6c86d3;
}

.sidebar>ul.nav>li.menu-section-title {
  border-left: 0 !important;
}

.sidebar>ul.nav>li.menu-section-title:hover a:first-child {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sidebar .menu-section-title + li.menu-section-title {
  padding-top: 8px;
}

/* Nav items */

.sidebar>ul.nav>li {
  border-left: 2px solid transparent;
  margin: 1px 0;
}

.sidebar ul.nav li a {
  color: #d4dae6;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: 7px;
  margin-top: 0;
  border: 1px solid transparent;
}

.sidebar ul.nav li a i.menu-icon {
  color: #6c86d3;
  font-size: 15px;
  width: 20px;
  margin-right: 11px;
}

.sidebar>ul.nav>li:hover a:first-child,
.sidebar>ul.nav>li.active a:first-child {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  border-radius: 7px;
}

.sidebar ul.nav li.active>a,
.sidebar ul.nav>li>a:hover,
.sidebar ul.nav>li>a:focus {
  color: #ffffff;
}



/* Active state — restrained blue highlight */

.sidebar>ul.nav>li.active>a:first-child {
  background: rgba(37, 99, 235, 0.18) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.sidebar>ul.nav>li.active>a:first-child .menu-icon {
  color: #9db8ef !important;
}

/* Second level (submenu)
   NOTE: the base theme (assets/css/style.css) ships light-theme submenu rules
   (#374151 text, #111827 on hover, transparent !important background) that leak
   into the navy sidebar — dark text on dark background makes items invisible on
   hover. These selectors mirror the theme's exact specificity; custom.css loads
   after style.css, so they win and re-assert the navy palette. */

.sidebar ul.nav li .nav-second-level {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  margin: 2px 4px 6px;
  padding: 4px 0;
}

.sidebar ul.nav li .nav-second-level li a,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a,
.sidebar ul.nav li .nav-second-level li a:hover,
.sidebar ul.nav li .nav-second-level li a:focus,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:hover,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:focus {
  color: #aab4c6 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  font-size: 13px;
  padding: 6px 14px 6px 40px;
  font-weight: 400;
  border-radius: 0;
}

.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:hover,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:focus {
  color: #ffffff !important;
  background: rgba(37, 99, 235, 0.16) !important;
  border-radius: 6px;
}

.sidebar ul.nav li .nav-second-level li.active a {
  color: #ffffff !important;
  background: rgba(37, 99, 235, 0.2) !important;
  border-radius: 6px;
  font-weight: 500;
}

.sidebar ul.nav li .nav-second-level a .menu-icon,
.sidebar ul.nav li .nav-second-level a:hover .menu-icon,
.sidebar ul.nav li .nav-second-level a:focus .menu-icon {
  color: #6c86d3 !important;
  font-size: 13px;
}

.sidebar .arrow,
.sidebar .fa.arrow {
  color: #64748b;
}

/* Badges inside sidebar */

.sidebar ul.nav li a .badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 20px;
  background: rgba(37, 99, 235, 0.85);
  color: #fff;
}

/* ---------- Header — clean white ---------- */

#header {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 1px rgba(16, 24, 40, 0.03);
  border-bottom: 1px solid var(--btc-border);
  height: 57px;
}

.navbar-nav>li>a {
  color: #5b6676;
  height: 57px;
  padding-top: 18px;
}

.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
  color: #0f172a;
}

.navbar-nav>li>a:hover .menu-icon,
.navbar-nav>li>a:focus .menu-icon {
  color: #6c86d3;
}

#header #top_search input {
  height: 34px;
  background: var(--btc-gray-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 13px;
}

#header #top_search input:focus {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}

/* ⌘K badge */

#header .btc-kbd {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #d8dce3;
  border-radius: 5px;
  padding: 1px 6px;
  line-height: 16px;
  pointer-events: none;
}

/* Header profile chip */

.btc-header-profile .dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 10px !important;
  border-radius: 8px;
  border: 1px solid transparent;
}

.btc-header-profile .dropdown-toggle:hover {
  background: var(--btc-gray-soft) !important;
  border-color: var(--btc-border) !important;
}

.btc-header-profile .btc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.btc-header-profile .btc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.btc-header-profile .btc-profile-meta {
  line-height: 1.2;
  text-align: left;
}

.btc-header-profile .btc-profile-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #172033;
  white-space: nowrap;
}

.btc-header-profile .btc-profile-role {
  font-size: 10.5px;
  color: #8a94a6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Header date */

.btc-header-date {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5b6676;
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 14px;
  border-left: 1px solid var(--btc-border-soft);
  margin-left: 6px;
  white-space: nowrap;
}

.btc-header-date i {
  color: #94a3b8;
  font-size: 13px;
}

/* Notifications bell badge stays red */

.notifications-wrapper .icon-total-indicator,
.navbar-nav .icon-total-indicator {
  background: var(--btc-red) !important;
  border-radius: 20px;
  font-size: 10px;
  min-width: 16px;
  min-height: 16px;
  line-height: 16px;
}

/* ---------- Dashboard page header ---------- */

.btc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 22px;
  flex-wrap: wrap;
}

.btc-page-head .btc-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--btc-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.btc-page-head h1 {
  font-family: var(--btc-font-serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #101828;
  margin: 0 0 4px;
  line-height: 1.25;
}

.btc-page-head .btc-page-sub {
  font-size: 13.5px;
  color: var(--btc-muted);
  margin: 0;
}

.btc-page-head .btc-today {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475467;
  background: #ffffff;
  border: 1px solid var(--btc-border);
  border-radius: var(--btc-radius-sm);
  padding: 8px 14px;
  box-shadow: var(--btc-shadow);
  white-space: nowrap;
}

.btc-page-head .btc-today i {
  color: var(--btc-faint);
}

/* ---------- Cards ---------- */

.panel_s,
.btc-card {
  background: var(--btc-card);
  border: 1px solid var(--btc-border) !important;
  border-radius: var(--btc-radius) !important;
  box-shadow: var(--btc-shadow) !important;
}

.panel-body {
  padding: 20px 22px;
}

.btc-card {
  padding: 20px 22px;
}

.btc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.btc-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  color: #1c2536;
  margin: 0;
}

.btc-card-title .btc-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--btc-accent-soft);
  color: var(--btc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.btc-card-title .btc-card-icon.ic-green {
  background: var(--btc-green-soft);
  color: var(--btc-green);
}

.btc-card-title .btc-card-icon.ic-orange {
  background: var(--btc-orange-soft);
  color: var(--btc-orange);
}

.btc-card-title .btc-card-icon.ic-gray {
  background: var(--btc-gray-soft);
  color: #64748b;
}

.btc-card-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--btc-accent);
  white-space: nowrap;
}

.btc-card-link:hover {
  color: var(--btc-accent-dark);
  text-decoration: none;
}

/* Widget drag handle (keeps Perfex dashboard customizer working) */

.widget-dragger {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 5;
  width: 18px;
  height: 14px;
  cursor: move;
  opacity: 0;
  transition: opacity 0.15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%2394a3b8'/%3E%3Ccircle cx='7' cy='2' r='1.3' fill='%2394a3b8'/%3E%3Ccircle cx='12' cy='2' r='1.3' fill='%2394a3b8'/%3E%3Ccircle cx='2' cy='6' r='1.3' fill='%2394a3b8'/%3E%3Ccircle cx='7' cy='6' r='1.3' fill='%2394a3b8'/%3E%3Ccircle cx='12' cy='6' r='1.3' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.widget:hover .widget-dragger {
  opacity: 0.7;
}

.placeholder-dashboard-widgets {
  border: 1px dashed #b6c2d4;
  border-radius: var(--btc-radius);
  background: rgba(37, 99, 235, 0.03);
  min-height: 80px;
  margin-bottom: 20px;
}

/* ---------- KPI row ---------- */

.btc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.btc-kpi {
  background: var(--btc-card);
  border: 1px solid var(--btc-border);
  border-radius: var(--btc-radius);
  box-shadow: var(--btc-shadow);
  padding: 16px 18px 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.btc-kpi .btc-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.btc-kpi .btc-kpi-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--btc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btc-kpi .btc-kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--btc-accent-soft);
  color: var(--btc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.btc-kpi .btc-kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #101828;
  line-height: 1.1;
}

.btc-kpi .btc-kpi-sub {
  font-size: 11.5px;
  color: var(--btc-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 16px;
}

.btc-kpi .btc-trend-up {
  color: var(--btc-green);
  font-weight: 600;
}

.btc-kpi .btc-trend-down {
  color: var(--btc-red);
  font-weight: 600;
}

.btc-kpi .btc-trend-flat {
  color: var(--btc-faint);
  font-weight: 500;
}

.btc-kpi .btc-kpi-bar {
  height: 3px;
  border-radius: 3px;
  background: #eef0f4;
  margin-top: 10px;
  overflow: hidden;
}

.btc-kpi .btc-kpi-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--btc-accent);
}

/* ---------- Revenue overview ---------- */

.btc-rev-total {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #101828;
  line-height: 1.2;
}

.btc-rev-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 650;
  color: var(--btc-green);
  background: var(--btc-green-soft);
  border-radius: 20px;
  padding: 3px 9px;
}

.btc-rev-delta.down {
  color: var(--btc-red);
  background: var(--btc-red-soft);
}

.btc-rev-meta {
  font-size: 12px;
  color: var(--btc-muted);
  margin-top: 3px;
}

.btc-rev-canvas {
  position: relative;
  height: 190px;
  margin-top: 18px;
}

.btc-period-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 9px;
  line-height: 18px;
}

.btc-period-btn:hover {
  color: #1c2536;
  background: var(--btc-gray-soft);
}

.btc-period-btn.active {
  color: #ffffff;
  background: #1c2536;
  border-color: #1c2536;
}

/* ---------- Today's priorities ---------- */

.btc-priority-list {
  display: flex;
  flex-direction: column;
}

.btc-priority {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--btc-border-soft);
  text-decoration: none !important;
}

.btc-priority:last-child {
  border-bottom: 0;
}

.btc-priority:hover .btc-priority-text {
  color: var(--btc-accent);
}

.btc-priority .btc-priority-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.btc-priority .btc-priority-badge.pb-red {
  background: var(--btc-red-soft);
  color: var(--btc-red);
}

.btc-priority .btc-priority-badge.pb-orange {
  background: var(--btc-orange-soft);
  color: var(--btc-orange);
}

.btc-priority .btc-priority-badge.pb-green {
  background: var(--btc-green-soft);
  color: var(--btc-green);
}

.btc-priority .btc-priority-badge.pb-blue {
  background: var(--btc-blue-soft);
  color: var(--btc-blue);
}

.btc-priority .btc-priority-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 550;
  color: #2a3448;
  transition: color 0.12s ease;
}

.btc-priority .btc-priority-arrow {
  color: #b6c0cf;
  font-size: 11px;
}

/* ---------- Quick actions ---------- */

.btc-qa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btc-qa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: var(--btc-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--btc-border);
  background: #ffffff;
  color: #2a3448;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.btc-qa-btn:hover {
  border-color: #c9d2e0;
  background: var(--btc-gray-soft);
  color: #172033;
  text-decoration: none;
  box-shadow: var(--btc-shadow);
}

.btc-qa-btn.primary {
  background: var(--btc-accent);
  border-color: var(--btc-accent);
  color: #ffffff;
}

.btc-qa-btn.primary:hover {
  background: var(--btc-accent-dark);
  border-color: var(--btc-accent-dark);
  color: #ffffff;
}

.btc-qa-btn i {
  font-size: 11px;
  opacity: 0.85;
}

/* ---------- Status badges ---------- */

.btc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.btc-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.btc-badge.b-green { color: var(--btc-green); background: var(--btc-green-soft); }
.btc-badge.b-orange { color: var(--btc-orange); background: var(--btc-orange-soft); }
.btc-badge.b-blue { color: var(--btc-blue); background: var(--btc-blue-soft); }
.btc-badge.b-red { color: var(--btc-red); background: var(--btc-red-soft); }
.btc-badge.b-gray { color: #64748b; background: var(--btc-gray-soft); }

/* ---------- Enterprise table ---------- */

.btc-table-card {
  padding: 0;
  overflow: hidden;
}

.btc-table-card .btc-card-head {
  padding: 18px 22px 0;
  margin-bottom: 8px;
}

.btc-table-card .table-responsive {
  border: 0;
}

.btc-table-card .dataTables_wrapper {
  padding: 0 22px 18px;
}

.btc-table-card table.table.btc-table {
  margin: 0;
}

.btc-table-card table.btc-table thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a94a6;
  border-bottom: 1px solid var(--btc-border);
  padding: 11px 12px;
  background: #fafbfc;
  white-space: nowrap;
}

.btc-table-card table.btc-table tbody td {
  font-size: 13px;
  color: #33415c;
  padding: 11px 12px;
  border-bottom: 1px solid var(--btc-border-soft);
  vertical-align: middle;
}

.btc-table-card table.btc-table tbody tr:last-child td {
  border-bottom: 0;
}

.btc-table-card table.btc-table tbody tr:hover td {
  background: #fafbfd;
}

.btc-table-card .btc-po-num {
  font-weight: 650;
  color: #1c2536;
}

.btc-table-card .btc-money {
  font-weight: 600;
  color: #1c2536;
  font-variant-numeric: tabular-nums;
}

.btc-table-card .btc-actions {
  display: inline-flex;
  gap: 4px;
}

.btc-table-card .btc-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--btc-border);
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.btc-table-card .btc-action-btn:hover {
  color: var(--btc-accent);
  border-color: #c9d2e0;
  text-decoration: none;
}

/* DataTables chrome inside the card */

.btc-table-card .dataTables_filter {
  margin-bottom: 10px;
}

.btc-table-card .dataTables_filter label {
  position: relative;
  display: block;
}

.btc-table-card .dataTables_filter input {
  height: 32px;
  font-size: 12.5px;
  border: 1px solid var(--btc-border);
  border-radius: 7px;
  padding: 4px 10px 4px 30px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
}

.btc-table-card .dataTables_length select,
.btc-table-card .dataTables_info,
.btc-table-card .dataTables_paginate .paginate_button {
  font-size: 12px !important;
  color: #5b6676 !important;
}

.btc-table-card .dataTables_paginate .paginate_button.current {
  background: var(--btc-accent) !important;
  border-color: var(--btc-accent) !important;
  color: #fff !important;
  border-radius: 6px;
}

.btc-table-card .dataTables_paginate .paginate_button:hover {
  border-radius: 6px;
}

/* ---------- Bottom grid cards (VAT / Projects / Activity) ---------- */

.btc-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--btc-border-soft);
}

.btc-row-item:last-child {
  border-bottom: 0;
}

.btc-row-item .btc-row-main {
  flex: 1;
  min-width: 0;
}

.btc-row-item .btc-row-label {
  font-size: 13px;
  font-weight: 600;
  color: #2a3448;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btc-row-item .btc-row-sub {
  font-size: 11.5px;
  color: var(--btc-muted);
  margin-top: 1px;
}

.btc-row-item .btc-row-arrow {
  color: #b6c0cf;
  font-size: 11px;
}

.btc-row-item a:hover .btc-row-label {
  color: var(--btc-accent);
}

/* VAT progress */

.btc-vat-progress {
  height: 4px;
  border-radius: 4px;
  background: #eef0f4;
  margin: 10px 0 6px;
  overflow: hidden;
}

.btc-vat-progress > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--btc-accent);
}

.btc-vat-due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--btc-muted);
  margin-top: 4px;
}

.btc-vat-due strong {
  color: #2a3448;
  font-weight: 650;
}

/* Activity */

.btc-act-item {
  display: flex;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--btc-border-soft);
  align-items: flex-start;
}

.btc-act-item:last-child {
  border-bottom: 0;
}

.btc-act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--btc-accent);
  margin-top: 6px;
  flex-shrink: 0;
}

.btc-act-item:nth-child(2n) .btc-act-dot {
  background: var(--btc-green);
}

.btc-act-item:nth-child(3n) .btc-act-dot {
  background: var(--btc-orange);
}

.btc-act-text {
  font-size: 12.5px;
  color: #33415c;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}

.btc-act-time {
  font-size: 11px;
  color: var(--btc-faint);
  white-space: nowrap;
  margin-top: 1px;
}

/* Empty states */

.btc-empty {
  text-align: center;
  padding: 26px 10px;
  color: var(--btc-muted);
  font-size: 12.5px;
}

.btc-empty i {
  display: block;
  font-size: 20px;
  color: #c3cbda;
  margin-bottom: 8px;
}

/* ---------- Primary buttons (Quick Actions + generic) ---------- */

.btn-primary {
  background: var(--btc-accent) !important;
  border-color: var(--btc-accent) !important;
}

.btn-primary:hover {
  background: var(--btc-accent-dark) !important;
  border-color: var(--btc-accent-dark) !important;
}

.btn-default {
  border-color: var(--btc-border);
  color: #33415c;
}

/* ---------- Responsive ---------- */

@media (max-width: 1399px) {
  .btc-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .content {
    padding: 20px 16px 32px;
  }

  .btc-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-container="btc-side"] {
    flex-direction: column;
  }

  .btc-page-head {
    align-items: flex-start;
  }

  .btc-header-profile .btc-profile-meta,
  .btc-header-date {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .btc-kpi-grid {
    grid-template-columns: 1fr;
  }

  .btc-page-head h1 {
    font-size: 22px;
  }

  .btc-table-card .table-responsive {
    overflow-x: auto;
  }
}
/* Search ⌘K badge fallback (header markup uses Tailwind responsive classes) */
@media (max-width: 639px) {
  .btc-kbd {
    display: none !important;
  }
}

.btc-sidebar-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #6c86d3;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btc-sidebar-pin:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

.btc-sidebar-pin.is-pinned {
  background: rgba(108, 132, 208, 0.2);
  border-color: rgba(108, 132, 208, 0.4);
  color: #ffffff;
}

.btc-sidebar-pin.i-have-fee {
  top: 8px;
  right: auto;
  left: 12px;
  bottom: 8px;
}

/* Hover area around the pin so it's easy to hit on touch devices */
.btc-pin-root:hover .btc-sidebar-pin,
.btc-pin-root:focus-within .btc-sidebar-pin {
  opacity: 1;
}

/* Pin toggle behaviour — pinned forces the sidebar to stay visible */
body.btc-sidebar-pinned:not(.mobile) #menu.sidebar {
  margin-left: 0 !important;
}

body.btc-sidebar-pinned:not(.mobile) #wrapper {
  margin-left: 230px !important;
}

body.btc-sidebar-pinned:not(.mobile) .btn-bottom-toolbar {
  margin-left: 230px;
  width: calc(100% - 230px);
}

/* Always show sidebar in preview / when page-small is set by the theme */
body.page-small #menu {
  margin-left: 0 !important;
}

body.page-small #wrapper {
  margin-left: 230px !important;
}

body.page-small #header {
  margin-left: 0 !important;
}

body.page-small #header #logo {
  display: none !important;
}

/* Header logo only shown when the sidebar is hidden (Perfex behaviour preserved) */
@media (min-width: 769px) {
  body:not(.hide-sidebar):not(.page-small) #header #logo {
    display: none !important;
  }
}