/**
* Template Name: NiceAdmin
* Updated: Mar 09 2023 with Bootstrap v5.2.3
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", sans-serif;
  background: #f6f9ff;
  color: #444444;
}

a {
  color: #4154f1;
  text-decoration: none;
}

a:hover {
  color: #717ff5;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: 60px;
  padding: 20px 30px;
  transition: all 0.3s;
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 10px;
}

.pagetitle h1 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 600;
  color: #012970;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #4154f1;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f6f9ff;
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

/* Light Backgrounds */
.bg-primary-light {
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}

.bg-secondary-light {
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

.bg-success-light {
  background-color: #d1e7dd;
  border-color: #d1e7dd;
}

.bg-danger-light {
  background-color: #f8d7da;
  border-color: #f8d7da;
}

.bg-warning-light {
  background-color: #fff3cd;
  border-color: #fff3cd;
}

.bg-info-light {
  background-color: #cff4fc;
  border-color: #cff4fc;
}

.bg-dark-light {
  background-color: #d3d3d4;
  border-color: #d3d3d4;
}

/* Card */
.card {
  margin-bottom: 30px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
  border-color: #ebeef4;
  background-color: #fff;
  color: #798eb3;
  padding: 15px;
}

.card-title {
  padding: 20px 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: #012970;
  font-family: "Poppins", sans-serif;
}

.card-title span {
  color: #899bbd;
  font-size: 14px;
  font-weight: 400;
}

.card-body {
  padding: 0 20px 20px 20px;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 25%;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

/* Accordion */
.accordion-item {
  border: 1px solid #ebeef4;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: #4154f1;
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  color: #899bbd;
  font-weight: 600;
}

.breadcrumb a {
  color: #899bbd;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
  color: #899bbd;
}

.breadcrumb .active {
  color: #51678f;
  font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
  background-color: #fff;
  color: #4154f1;
  border-bottom: 2px solid #4154f1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
  line-height: 1;
}

@media (min-width: 1200px) {
  .logo {
    width: 280px;
  }
}

.logo img {
  max-height: 26px;
  margin-right: 6px;
}

.logo span {
  font-size: 26px;
  font-weight: 700;
  color: #012970;
  font-family: "Nunito", sans-serif;
}

.header {
  transition: all 0.5s;
  z-index: 997;
  height: 60px;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
  padding-left: 20px;
  /* Toggle Sidebar Button */
  /* Search Bar */
}

.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: #012970;
}

.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  border: 0;
  font-size: 14px;
  color: #012970;
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: #012970;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav>ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: #012970;
  margin-right: 25px;
  position: relative;
}

.header-mobile-back {
  display: none;
}

.header-nav .nav-profile {
  color: #012970;
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: -2px -5px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 20px 0 10px;
  font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .notifications .notification-item:hover {
  background-color: #f6f9ff;
}
.header-nav .notifications {
  inset: 8px -15px auto auto !important;
  min-width: 360px;
  max-width: 420px;
}

/* Scrollable notification list */
#notif-list-container {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Empty state */
.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  color: #6c757d;
  font-size: 13px;
}
.notif-empty-state i {
  font-size: 28px;
}

/* Notification bell item */
.notif-bell-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 12px;
  gap: 12px;
  transition: background 0.2s;
  position: relative;
}
.notif-bell-item:hover {
  background-color: #f6f9ff;
}
.notif-bell-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.notif-bell-body {
  flex: 1;
  min-width: 0;
}
.notif-bell-type {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #444;
  margin-bottom: 3px;
}
.notif-bell-msg {
  font-size: 13px;
  color: #555;
  margin: 0 0 4px;
  line-height: 1.4;
  word-break: break-word;
}
.notif-bell-time {
  font-size: 11px;
  color: #9aa3b0;
}
.notif-mark-read-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: #9aa3b0;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
  align-self: center;
  line-height: 1;
}
.notif-mark-read-btn:hover {
  color: #4154f1;
  background: #eef0fd;
}
.notif-mark-read-btn i {
  font-size: 16px;
}
.notif-mark-all-btn {
  white-space: nowrap;
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444444;
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .messages .message-item:hover {
  background-color: #f6f9ff;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}

@media (max-width: 1199px) {
  .sidebar {
    left: -300px;
  }
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}

@media (min-width: 1200px) {

  #main,
  #footer {
    margin-left: 300px;
  }
}

@media (max-width: 1199px) {
  .toggle-sidebar .sidebar {
    left: 0;
  }
}

@media (min-width: 1200px) {

  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: 0;
  }

  .toggle-sidebar .sidebar {
    left: -300px;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #899bbd;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #4154f1;
  transition: 0.3;
  background: #f6f9ff;
  padding: 10px 15px;
  border-radius: 4px;
}

.sidebar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: #4154f1;
}

.sidebar-nav .nav-link.collapsed {
  color: #012970;
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
  color: #899bbd;
}

.sidebar-nav .nav-link:hover {
  color: #4154f1;
  background: #f6f9ff;
}

.sidebar-nav .nav-link:hover i {
  color: #4154f1;
}

.sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #012970;
  transition: 0.3;
  padding: 10px 0 10px 40px;
  transition: 0.3s;
}

.sidebar-nav .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: #4154f1;
}

.sidebar-nav .nav-content a.active i {
  background-color: #4154f1;
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: #4154f1;
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
  padding-bottom: 10px;
}

.dashboard .info-card h6 {
  font-size: 28px;
  color: #012970;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.dashboard .card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.dashboard .sales-card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

/* Activity */
.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item+.post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.dashboard .news h4 a:hover {
  color: #4154f1;
}

.dashboard .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
  font-size: 14px;
}

.dashboard .recent-sales .table thead {
  background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
  border: 0;
}

.dashboard .recent-sales .dataTable-top {
  padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
  padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding-top: 15px;
}

.iconslist .icon {
  background-color: #fff;
  border-radius: 0.25rem;
  text-align: center;
  color: #012970;
  padding: 15px 0;
}

.iconslist i {
  margin: 0.25rem;
  font-size: 2.5rem;
}

.iconslist .label {
  font-family: var(--bs-font-monospace);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c384e;
  margin: 10px 0 0 0;
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: #012970;
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: #012970;
}

.profile .profile-overview .label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 600;
  color: #4154f1;
}

.faq .basic p {
  color: #6980aa;
}

/*--------------------------------------------------------------
# Mobile / PWA Responsive Enhancements
--------------------------------------------------------------*/

/* ---- Safe area insets for notched phones ---- */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Remove 300ms tap delay on touch devices ---- */
a, button, .nav-link, .dropdown-item {
  touch-action: manipulation;
}

/* ---- Make tap targets large enough on mobile ---- */
@media (max-width: 768px) {
  .nav-link, .sidebar-nav .nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Larger text for readability on small screens */
  body {
    font-size: 15px;
  }

  /* Full-width cards on mobile */
  .card {
    border-radius: 12px;
    margin-bottom: 16px;
  }

  /* Main content padding adjustment for bottom nav */
  #main {
    padding: 12px 12px 80px 12px;
    margin-top: 60px;
  }

  /* Header adjustments */
  .header {
    padding-left: 10px;
  }

  .logo img {
    max-height: 40px;
  }

  /* DataTables scroll on mobile */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Form controls bigger on mobile */
  .form-control, .form-select {
    font-size: 16px; /* prevents iOS zoom on focus */
    min-height: 44px;
  }

  /* Buttons bigger on mobile */
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Sidebar needs to stack above bottom nav and overlay on mobile */
  .sidebar {
    z-index: 1050;
  }

  /* Page title smaller on mobile */
  .pagetitle h1 {
    font-size: 18px;
  }

  /* Breadcrumb hide on very small screens */
  .breadcrumb-item + .breadcrumb-item::before {
    font-size: 12px;
  }
}

/* ---- Bottom Navigation Bar (mobile only) ---- */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #e0e6f0;
    box-shadow: 0 -2px 12px rgba(1, 41, 112, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
    height: 60px;
  }

  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6980aa;
    font-size: 10px;
    text-decoration: none;
    padding: 6px 4px;
    gap: 2px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav a i {
    font-size: 20px;
    line-height: 1;
  }

  .bottom-nav a.active,
  .bottom-nav a:hover {
    color: #4154f1;
  }

  .bottom-nav a .bottom-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    border-radius: 10px;
    padding: 1px 5px;
    line-height: 1.4;
  }

  .bottom-nav a {
    position: relative;
  }
}

/* ---- Sidebar overlay (mobile) ---- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 1199px) {
  body.toggle-sidebar .sidebar-overlay {
    display: block;
  }
}

/* ---- Trial Banner ---- */
.trial-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  position: sticky;
  top: 60px;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.trial-banner.trial-warning {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  color: #333;
}

.trial-banner.trial-critical {
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
  color: #fff;
}

.trial-banner a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}

@media (max-width: 768px) {
  .trial-banner {
    font-size: 12px;
    padding: 6px 12px;
    top: 60px;
  }
}

/* ---- Subscription Required / Expired screen ---- */
.subscription-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f9ff;
  padding: 20px;
}

.subscription-gate .gate-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(1, 41, 112, 0.12);
  padding: 40px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.subscription-gate .gate-icon {
  font-size: 64px;
  color: #4154f1;
  margin-bottom: 20px;
}

.subscription-gate h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 12px;
}

.subscription-gate p {
  color: #6980aa;
  font-size: 15px;
  margin-bottom: 24px;
}

.subscription-gate .plan-card {
  border: 2px solid #e0e6f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.subscription-gate .plan-card:hover,
.subscription-gate .plan-card.selected {
  border-color: #4154f1;
  background: #f0f3ff;
}

.subscription-gate .plan-card .plan-name {
  font-weight: 700;
  color: #012970;
  font-size: 16px;
}

.subscription-gate .plan-card .plan-price {
  font-size: 22px;
  font-weight: 800;
  color: #4154f1;
}

.subscription-gate .plan-card .plan-period {
  font-size: 13px;
  color: #6980aa;
}

/* ---- Cases Mobile UX ---- */
.case-mobile-page .card {
  border-radius: 14px;
}

.case-mobile-page .card-title {
  padding-top: 16px;
}

.case-mobile-page .form-label {
  font-weight: 600;
  color: #324f7d;
}

.cases-mobile-list {
  display: none;
}

#mobileCasesShell .cases-mobile-list {
  display: block;
}

.case-mobile-card {
  border: 1px solid #dbe6fb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 58, 114, 0.1);
  padding: 12px 12px 10px;
  margin-bottom: 10px;
}

.case-mobile-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #123768;
  margin-bottom: 4px;
  line-height: 1.24;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-mobile-card-cnr {
  font-size: 12px;
  color: #6b7ea2;
  margin-bottom: 10px;
}

.case-mobile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.case-mobile-card-main {
  flex: 1 1 auto;
  min-width: 0;
}

.case-mobile-card-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mobile-icon-action {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c6d5f1;
  color: #3b5f98;
  background: #f8fbff;
}

.mobile-icon-action i {
  font-size: 14px;
  line-height: 1;
}

.mobile-icon-edit {
  background: linear-gradient(135deg, #3f6bff 0%, #2d54da 100%);
  color: #fff;
  border-color: transparent;
}

.case-mobile-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed #e4ecfa;
  padding-top: 6px;
  margin-top: 6px;
}

.case-mobile-meta-row > div {
  flex: 1 1 50%;
  min-width: 0;
}

.case-mobile-meta-key {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6e83a8;
}

.case-mobile-meta-val {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1d3761;
  line-height: 1.25;
}

#mobileCasesShell {
  background: #ffffff;
  border: 1px solid #dbe6fb;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(17, 52, 110, 0.08);
  padding: 12px;
}

#mobileCaseSearch {
  min-height: 40px;
  border-radius: 14px;
  border-color: #cfdaf2;
  font-size: 14px;
  padding-left: 42px;
  background: #fff;
}

.mobile-search-wrap {
  position: relative;
}

.mobile-search-wrap > i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #8aa0c7;
  font-size: 14px;
}

#mobileCasesInfo {
  font-weight: 600;
  color: #5c7198 !important;
}

.mobile-cases-footer {
  border-top: 1px solid #e6edfb;
  padding-top: 8px;
}

#mobileCasesPrev,
#mobileCasesNext {
  min-height: 36px;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 700;
}

.case-mobile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1f4d98;
}

.mobile-cases-top-actions .btn {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 800;
  border: none;
  background: linear-gradient(135deg, #3f6bff 0%, #2d54da 100%);
  box-shadow: 0 8px 18px rgba(53, 94, 221, 0.3);
}

#mobileCasesLoading {
  font-size: 12px;
  font-weight: 600;
  color: #6a7ea3 !important;
}

.case-mobile-empty {
  border: 1px dashed #c9d8f4;
  border-radius: 12px;
  text-align: center;
  padding: 20px;
  color: #6a7ea3;
  background: #f9fbff;
}

@media (max-width: 767.98px) {
  .cases-list-page #main {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .cases-list-page .pagetitle {
    display: none;
  }

  .cases-list-page .section > .row > .col-lg-12 > .card {
    background: transparent;
    box-shadow: none;
    border: none;
    margin-bottom: 8px;
  }

  .cases-list-page .section > .row > .col-lg-12 > .card > .card-body {
    padding: 0;
  }

  .cases-list-page #mobileCasesShell {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: -4px;
  }

  .cases-list-page #mobileCaseSearch {
    background: #fff;
  }

  .cases-list-page .case-mobile-card {
    box-shadow: 0 6px 16px rgba(18, 52, 106, 0.08);
    border-color: #dfe7f8;
  }

  .case-mobile-page #main {
    padding: 8px 12px calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .case-mobile-page .pagetitle {
    position: sticky;
    top: 58px;
    z-index: 20;
    background: linear-gradient(180deg, #f6f9ff 72%, rgba(246, 249, 255, 0.72) 100%);
    padding-bottom: 8px;
    margin-bottom: 6px;
  }

  .case-mobile-page .pagetitle h1 {
    font-size: 20px;
  }

  .case-mobile-page .breadcrumb {
    display: none;
  }

  .case-mobile-page .card {
    box-shadow: 0 8px 20px rgba(19, 56, 114, 0.1);
    margin-bottom: 14px;
  }

  .case-mobile-page .card-body {
    padding: 0 14px 14px;
  }

  .case-mobile-card-title {
    font-size: 14px;
  }

  .case-mobile-meta-val {
    font-size: 12px;
  }

  .case-mobile-page .form-control,
  .case-mobile-page .form-select,
  .case-mobile-page .btn {
    min-height: 46px;
    font-size: 15px;
  }

  .mobile-cases-footer {
    margin-top: 2px !important;
    padding-bottom: 2px;
  }

  #mobileCasesInfo {
    font-size: 12px;
  }

  .cases-fab-add {
    position: fixed;
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: var(--m-fab-size);
    height: var(--m-fab-size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    background: linear-gradient(135deg, #3f6bff 0%, #2d54da 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(45, 84, 218, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.8);
  }

  .cases-fab-add i {
    font-size: var(--m-fab-icon-size);
    line-height: 1;
  }

  .case-mobile-page .table-responsive {
    border: none;
    overflow: visible;
  }

  .case-mobile-page .mobile-card-mode #caseDataTable {
    display: none !important;
  }

  .case-mobile-page .mobile-card-mode .cases-mobile-list {
    display: block;
    margin-top: 8px;
  }

  .case-mobile-page .mobile-card-mode .dataTables_info {
    margin-top: 8px;
  }

  .case-mobile-page .mobile-card-mode .dataTables_paginate {
    margin-top: 8px;
  }


@media (min-width: 768px) {
  .cases-fab-add {
    display: none !important;
  }
}
  .case-mobile-page .mobile-card-mode .card-body.table-scrollable::after {
    content: none;
  }

  .case-mobile-page .dataTables_wrapper .dataTables_filter,
  .case-mobile-page .dataTables_wrapper .dataTables_length {
    float: none;
    text-align: left;
    margin-bottom: 8px;
  }

  .case-mobile-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(246, 249, 255, 0) 0%, #f6f9ff 35%);
    padding-top: 12px;
  }

  .case-mobile-sticky-actions .btn {
    width: 100%;
  }
}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 28px 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #4154f1;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
  background: #4154f1;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #5969f3;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
  padding: 30px;
}

.error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: #4154f1;
  margin-bottom: 0;
  line-height: 150px;
}

.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 30px;
}

.error-404 .btn {
  background: #51678f;
  color: #fff;
  padding: 8px 30px;
}

.error-404 .btn:hover {
  background: #3e4f6f;
}

@media (min-width: 992px) {
  .error-404 img {
    max-width: 50%;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 20px 0;
  font-size: 14px;
  transition: all 0.3s;
  border-top: 1px solid #cddfff;
}

.footer .copyright {
  text-align: center;
  color: #012970;
}

.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: #012970;
}
.mandatoryField{
  color: red;
  font-weight: unset;
}

.table .dt-center .form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}

#itemTable .form-control:read-only {
    background-color: #e9ecef;
    opacity: 1;
}

.errorMsg{
  color: red;
  font-weight: unset;
}

input:read-only{
  background-color: #e9ecef;
  opacity: 1;
}

/* -------------------------------------------------------------
   Backend Professional Refinement Layer
   ------------------------------------------------------------- */
:root {
  --app-bg: #f2f5fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8faff;
  --app-text: #1a2340;
  --app-muted: #5e6b8c;
  --app-border: #dfe6f3;
  --app-primary: #1f4ed8;
  --app-primary-soft: #eaf0ff;
  --app-sidebar-bg: #eef2f8;
  --app-sidebar-muted: #516385;
  --app-sidebar-active: #172a56;
  --app-shadow: 0 14px 34px rgba(14, 30, 70, 0.08);
  --app-radius-lg: 16px;
  --app-radius-md: 12px;
}

body {
  font-family: "Manrope", sans-serif;
  color: var(--app-text);
  background:
    radial-gradient(1100px 500px at 105% -10%, rgba(31, 78, 216, 0.12), transparent 62%),
    radial-gradient(950px 450px at -12% 14%, rgba(55, 114, 255, 0.08), transparent 58%),
    var(--app-bg);
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.pagetitle h1 {
  font-family: "Fraunces", serif;
  letter-spacing: 0.015em;
}

a {
  color: #1c56d6;
}

a:hover {
  color: #173fa0;
}

#main {
  padding: 24px 28px;
}

.pagetitle {
  margin-bottom: 18px;
}

.pagetitle h1 {
  font-size: 30px;
  line-height: 1.2;
  color: #0f2047;
}

.breadcrumb {
  margin-top: 8px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 7px 12px;
  width: fit-content;
}

/* Top bar */
.header {
  height: 64px;
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 6px 26px rgba(25, 42, 88, 0.08);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding-left: 8px;
  padding-right: 14px;
}

.header-brand {
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-brand .logo {
  margin-left: 0;
}

.header-brand .logo .logo-desktop {
  display: block;
  max-height: 42px !important;
  width: auto;
  margin-right: 0;
}

.header-brand .logo .logo-mobile {
  display: none;
  max-height: 38px !important;
  width: auto;
  margin-right: 0;
}

.header-page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 220px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-family: "Fraunces", serif;
  font-size: 20px;
  font-weight: 600;
  color: #122a58;
  line-height: 1.2;
  pointer-events: none;
}

/* Desktop: keep content page title, hide centered header title */
@media (min-width: 769px) {
  .header-page-title {
    display: none;
  }
}

.header-nav {
  margin-left: auto;
  position: relative;
  z-index: 2;
}

.header-nav > ul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.header-nav .nav-item {
  margin: 0;
  padding: 0;
}

.header-nav .nav-link.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}

.header-nav .nav-link.nav-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #012970;
  color: #012970;
  font-size: 18px;
  overflow: hidden;
}

.header-nav .nav-link.nav-profile .profile-img-desktop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.header-nav .nav-link.nav-profile i.bi-person-fill {
  display: none;
}

.header-nav .nav-profile {
  gap: 8px;
}

.header-nav .nav-profile img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.header-nav .nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-nav .nav-icon i {
  color: #1f3e8e;
}

/* Sidebar */
.sidebar {
  top: 64px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #f5f8fd 0%, #edf2fa 100%);
  box-shadow: 6px 0 20px rgba(38, 58, 96, 0.09);
  border-right: 1px solid #d9e1ee;
}

.sidebar-nav .nav-item {
  margin-bottom: 8px;
}

.sidebar-nav .nav-link {
  border-radius: 12px;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--app-sidebar-muted);
  background: transparent;
  border: 1px solid transparent;
  font-weight: 600;
}

.sidebar-nav .nav-link i {
  color: var(--app-sidebar-muted);
  font-size: 18px;
}

.sidebar-nav .nav-link:not(.collapsed) {
  color: var(--app-sidebar-active);
  background: #ffffff;
  border-color: #d5e0f1;
  box-shadow: 0 5px 14px rgba(50, 80, 140, 0.1);
}

.sidebar-nav .nav-link:not(.collapsed) i,
.sidebar-nav .nav-link:hover i {
  color: #173a88;
}

.sidebar-nav .nav-link:hover {
  color: #203869;
  background: #f9fbff;
  border-color: #dbe4f2;
}

.sidebar-nav .nav-content a {
  color: #5a6c90;
  border-radius: 10px;
  margin: 4px 6px;
  padding: 8px 10px;
}

.sidebar-nav .nav-content a i {
  color: #5a6c90;
}

.sidebar-nav .nav-content a.active,
.sidebar-nav .nav-content a:hover {
  color: #173a88;
  background: #eaf1ff;
}

/* Cards and sections */
.card {
  border-radius: var(--app-radius-lg);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

.card-header,
.card-footer {
  background: linear-gradient(180deg, #fbfcff 0%, #f5f8ff 100%);
  border-color: var(--app-border);
}

.card-title {
  font-size: 22px;
  color: #172a56;
}

.section {
  animation: appFadeUp 0.3s ease-out;
}

.pagetitle .page-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  min-width: 156px;
}

.pagetitle .page-action-placeholder {
  display: inline-block;
  width: 156px;
  height: 34px;
}

@keyframes appFadeUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tables */
.table {
  border-color: var(--app-border);
}

.table > :not(caption) > * > * {
  padding: 12px 14px;
  vertical-align: middle;
}

.table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #405077;
  background: #f3f7ff;
  border-bottom: 1px solid #d8e3f6;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #fbfdff;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  min-height: 38px;
}

.dataTables_wrapper .row:first-child {
  align-items: center;
  margin-bottom: 10px !important;
  padding-bottom: 10px;
}

.dataTables_wrapper .row:first-child .dataTables_length,
.dataTables_wrapper .row:first-child .dataTables_filter {
  margin-bottom: 10px;
  margin-top: 10px;
}

.dataTables_wrapper .row:first-child .col-sm-12.col-md-6:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dataTables_wrapper .row:first-child .col-sm-12.col-md-6:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
  color: #4a5d85;
  font-size: 14px;
  font-weight: 500;
}

.dataTables_wrapper table.dataTable thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.dataTables_wrapper table.dataTable tbody td {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #22314d;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 8px;
  padding: 8px 12px;
  min-width: 220px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.dataTables_wrapper .dataTables_filter {
  text-align: right;
}

.dataTables_wrapper .dataTables_length select {
  margin: 0 8px !important;
  min-width: 78px;
  padding: 6px 10px;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 10px !important;
}

.dataTables_wrapper .dataTables_paginate {
  margin-top: 8px;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  gap: 8px;
  align-items: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link {
  min-width: 44px;
  height: 36px;
  margin-left: 0 !important;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid #d7ddea;
  background: #fff;
  color: #3f4c69;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
}

.dataTables_wrapper .row:last-child .col-sm-12.col-md-5 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dataTables_wrapper .row:last-child .col-sm-12.col-md-7 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dataTables_wrapper .page-item.active .page-link {
  background: #1f4ed8;
  border-color: #1f4ed8 !important;
  color: #fff;
}

.dataTables_wrapper .page-item:not(.active):not(.disabled) .page-link:hover {
  background: #f2f6ff;
  border-color: #d7ddea !important;
  color: #213f74;
}

.dataTables_wrapper .page-item.disabled .page-link {
  color: #97a8ca;
  background: #f8faff;
  border-color: #e6edf9 !important;
}

/* Enforce page-level scrolling by disabling DataTables inner vertical scroll area. */
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody {
  overflow: visible !important;
}

.dataTables_wrapper .dataTables_scrollBody {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Keep desktop pagination consistent across all listing screens (same visual as hearings). */
@media (min-width: 769px) {
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    margin: 0 4px !important;
    border: 1px solid #d7ddea !important;
    border-radius: 8px;
    background: #ffffff !important;
    color: #3f4c69 !important;
    line-height: 1;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #1f4ed8 !important;
    border-color: #1f4ed8 !important;
    color: #fff !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f2f6ff !important;
    border-color: #d7ddea !important;
    color: #213f74 !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #97a8ca !important;
    background: #f8faff !important;
    border-color: #e6edf9 !important;
    opacity: 1;
    cursor: not-allowed;
  }
}

.action-btn-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
}

.action-icon-btn.btn,
.action-icon-btn.btn.btn-sm {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-icon-btn i {
  font-size: 14px;
  line-height: 1;
}

.action-icon-btn.btn-action-view {
  background: #eef4ff !important;
  border-color: #cfe0ff !important;
  color: #1f4ed8 !important;
}

.action-icon-btn.btn-action-view:hover {
  background: #dfeafe !important;
  border-color: #bdd5ff !important;
  color: #1b43bd !important;
}

.action-icon-btn.btn-action-edit {
  background: #fff6ea !important;
  border-color: #ffe1bd !important;
  color: #c9720d !important;
}

.action-icon-btn.btn-action-edit:hover {
  background: #ffedd8 !important;
  border-color: #ffd39c !important;
  color: #aa5f08 !important;
}

.action-icon-btn.btn-action-add {
  background: #ecfdf3 !important;
  border-color: #c6f6dd !important;
  color: #0f8f56 !important;
}

.action-icon-btn.btn-action-add:hover {
  background: #defbe9 !important;
  border-color: #a9eecb !important;
  color: #0d7547 !important;
}

.action-icon-btn.btn-action-history {
  background: #f3f0ff !important;
  border-color: #ddd3ff !important;
  color: #5a3eb2 !important;
}

.action-icon-btn.btn-action-history:hover {
  background: #eae4ff !important;
  border-color: #cfc2ff !important;
  color: #4d3598 !important;
}

.action-icon-btn.btn-action-delete {
  background: #fff0f1 !important;
  border-color: #ffd3d7 !important;
  color: #c2303e !important;
}

.action-icon-btn.btn-action-delete:hover {
  background: #ffe2e5 !important;
  border-color: #ffbcc3 !important;
  color: #a91f2d !important;
}

.action-icon-btn.btn-action-default {
  background: #eef2fb !important;
  border-color: #d9e2f4 !important;
  color: #3a4e7a !important;
}

.action-icon-btn.btn-action-default:hover {
  background: #e2e9f8 !important;
  border-color: #c8d4ee !important;
  color: #304266 !important;
}

/* Forms */
.form-label {
  color: #3d4d75;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-control,
.form-select,
.chosen-container-single .chosen-single {
  border: 1px solid #d6dfef;
  border-radius: 10px;
  min-height: 42px;
  background: #fff;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: #7ea1ff;
  box-shadow: 0 0 0 3px rgba(42, 100, 255, 0.14);
}

/* Buttons */
.btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: linear-gradient(135deg, #2f66f5 0%, #1f4ed8 100%);
  border-color: #1f4ed8;
  box-shadow: 0 8px 18px rgba(31, 78, 216, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #2b5de0 0%, #1b43bd 100%);
  border-color: #1b43bd;
}

.btn-outline-primary {
  border-color: #2a59db;
  color: #1f4ed8;
}

/* Modal */
.modal-content {
  border-radius: 14px;
  border: 1px solid var(--app-border);
  box-shadow: 0 20px 52px rgba(16, 35, 76, 0.24);
}

.modal-header {
  background: #f7f9ff;
  border-bottom: 1px solid var(--app-border);
}

.modal-title {
  color: #102550;
  font-family: "Fraunces", serif;
}

/* Notifications dropdown */
.header-nav .notifications {
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 18px 35px rgba(14, 30, 66, 0.2);
}

/* Footer */
.footer {
  background: transparent;
  border-top: 1px solid var(--app-border);
}

.footer .copyright {
  color: #415079;
  font-weight: 600;
}

/* Responsive polish */
@media (max-width: 1199px) {
  #main {
    padding: 16px 16px 82px 16px;
  }

  .sidebar {
    width: 280px;
  }

  .pagetitle h1 {
    font-size: 24px;
  }

  .breadcrumb {
    border-radius: 12px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  body {
    background: #f4f7fc;
    overflow-x: hidden;
  }

  /* Mobile native: hide in-page title and breadcrumb */
  .pagetitle h1,
  .pagetitle nav,
  .pagetitle .breadcrumb {
    display: none !important;
  }

  .pagetitle {
    margin-bottom: 0;
    min-height: 0;
  }

  .toggle-sidebar-btn {
    display: none !important;
  }

  #footer.footer {
    display: none;
  }

  .header {
    height: 60px;
    padding-left: 4px;
    padding-right: 8px;
  }

  .header-brand {
    margin-right: 6px;
    min-width: 56px;
  }

  .header-page-title {
    max-width: calc(100% - 150px);
    font-size: 16px;
  }

  .header-nav > ul {
    gap: 6px;
    margin: 0;
  }

  .header-nav .nav-item {
    margin: 0;
    padding: 0;
  }

  .header-nav .pe-3 {
    padding-right: 0 !important;
  }

  .header-nav .nav-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    margin-right: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 34px;
  }

  .header-nav .nav-link.nav-icon i {
    font-size: 16px;
    line-height: 1;
  }

  .header-nav .nav-icon .badge-number {
    top: -4px;
    right: -5px;
  }

  .sidebar {
    top: 60px;
  }

  .card-title {
    font-size: 19px;
  }

  .table > :not(caption) > * > * {
    padding: 10px 10px;
    font-size: 13px;
  }

  #main {
    margin-top: 60px;
    padding: 12px 12px 84px 12px;
  }

  .footer {
    padding-bottom: 84px;
  }

  .row {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
  }

  .card,
  .modal-content,
  .dropdown-menu {
    border-radius: 12px;
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* Keep list/table action buttons compact on mobile */
  .btn.btn-sm,

  .finance-page-titlebar {
    margin-bottom: 8px;
  }

  .finance-title-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .finance-page-subtitle {
    color: #617395;
    max-width: 760px;
  }

  .finance-dashboard-page {
    position: relative;
  }

  .finance-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid #d7e2f4;
    background:
      radial-gradient(750px 280px at 85% 8%, rgba(255, 205, 112, 0.22), transparent 58%),
      radial-gradient(680px 320px at 2% 4%, rgba(41, 101, 255, 0.18), transparent 60%),
      linear-gradient(135deg, #123572 0%, #173f82 40%, #1f5bb8 100%);
    box-shadow: 0 22px 54px rgba(19, 49, 108, 0.18);
    color: #fff;
  }

  .finance-hero-main,
  .finance-hero-aside {
    padding: 28px;
    height: 100%;
  }

  .finance-hero-main-copy h2 {
    font-size: 34px;
    line-height: 1.16;
    color: #fff;
    margin-bottom: 12px;
    max-width: 760px;
  }

  .finance-hero-main-copy p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.84);
    margin-bottom: 0;
  }

  .finance-hero-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .finance-hero-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }

  .finance-hero-signal-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(246, 249, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 18px;
    min-height: 132px;
  }

  .finance-hero-signal-card::after {
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .finance-hero-signal-card span,
  .finance-aside-label {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
  }

  .finance-hero-signal-card strong,
  .finance-aside-block strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 8px;
  }

  .finance-hero-signal-card small,
  .finance-aside-block p {
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
  }

  .finance-signal-warm {
    background: linear-gradient(135deg, rgba(255, 187, 76, 0.22), rgba(255, 138, 0, 0.18));
  }

  .finance-signal-calm {
    background: linear-gradient(135deg, rgba(56, 236, 206, 0.16), rgba(4, 180, 128, 0.14));
  }

  .finance-signal-risk {
    background: linear-gradient(135deg, rgba(255, 118, 118, 0.18), rgba(225, 29, 72, 0.16));
  }

  .finance-hero-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(7, 22, 54, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .finance-aside-block {
    border-radius: 20px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .finance-aside-block-alt {
    background: rgba(255, 185, 86, 0.12);
  }

  .finance-aside-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
  }

  .finance-aside-note i {
    font-size: 18px;
    margin-top: 2px;
  }

  .finance-dashboard-page .finance-panel-card {
    border: 1px solid #dde6f5;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(17, 35, 79, 0.08);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
  }

  .finance-panel-card .card-body {
    padding: 24px;
  }

  .finance-panel-emphasis {
    background: linear-gradient(180deg, rgba(244, 248, 255, 0.98), rgba(255, 255, 255, 0.96));
  }

  .finance-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .finance-panel-copy {
    color: #6a7897;
    margin: 0;
    max-width: 640px;
  }

  .finance-inline-metric {
    flex-shrink: 0;
    min-width: 146px;
    border-radius: 16px;
    padding: 12px 14px;
    background: #eef4ff;
    border: 1px solid #d7e4ff;
  }

  .finance-inline-metric span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #66789d;
    margin-bottom: 6px;
  }

  .finance-inline-metric strong {
    display: block;
    color: #163f8f;
    font-size: 22px;
    line-height: 1.1;
  }

  .finance-inline-metric-danger {
    background: #fff3f3;
    border-color: #ffd8dc;
  }

  .finance-inline-metric-danger strong {
    color: #b42318;
  }

  .finance-compare-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    align-items: center;
  }

  .finance-chart-wrap {
    position: relative;
    width: 100%;
  }

  .collections-chart-wrap {
    height: 260px;
  }

  .finance-tax-chart-wrap {
    height: 240px;
  }

  .finance-compare-legend {
    display: grid;
    gap: 12px;
  }

  .finance-compare-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid #e0e8f6;
    background: #f8fbff;
  }

  .finance-compare-pill span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
  }

  .finance-compare-pill label {
    color: #50607f;
    font-weight: 700;
  }

  .finance-compare-pill-revenue span {
    background: #1f4ed8;
  }

  .finance-compare-pill-pending span {
    background: #d97706;
  }

  .finance-top-client-list {
    display: grid;
    gap: 12px;
  }

  .finance-top-client-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e1e9f6;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff, #f4f8ff);
  }

  .finance-top-client-rank {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e6eeff;
    color: #1c4fd7;
    font-weight: 800;
  }

  .finance-top-client-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .finance-top-client-copy small {
    color: #6a7897;
  }

  .finance-stat-box {
    border: 1px solid #e2e8f4;
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(180deg, #fafdff, #f4f7fc);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .finance-stat-box.compact {
    padding: 14px;
  }

  .finance-glass-box {
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(241, 246, 255, 0.98));
  }

  .finance-stat-box span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7283a5;
  }

  .finance-stat-box strong {
    color: #102a63;
    font-size: 22px;
  }

  .finance-stat-box small {
    color: #7283a5;
  }

  .finance-empty-state {
    border: 1px dashed #cad7ec;
    border-radius: 16px;
    background: #f8fbff;
    color: #64748b;
    padding: 18px;
  }

  .finance-profitability-shell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
  }

  .finance-profitability-card {
    border: 1px solid #dfe7f5;
    border-radius: 18px;
    padding: 18px;
    background: #fbfdff;
  }

  .finance-profitability-head p {
    color: #6c7a98;
  }

  .finance-profit-pill {
    border-radius: 999px;
    padding: 12px 16px;
    background: #e9fff4;
    color: #0f7b53;
    font-weight: 800;
    text-align: center;
  }

  .finance-profit-pill.loss {
    background: #fff1f2;
    color: #b42318;
  }

  .finance-entry-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98));
  }

  .finance-inline-feedback {
    color: #516385;
    font-size: 13px;
  }

  .finance-table th {
    color: #6e7d9e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom-width: 1px;
  }

  .finance-table tbody tr:hover {
    background: #f9fbff;
  }

  @media (max-width: 1199px) {
    .finance-hero-aside {
      border-left: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .finance-compare-shell {
      grid-template-columns: 1fr;
    }

    .finance-compare-legend {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767px) {
    .finance-hero-main,
    .finance-hero-aside,
    .finance-panel-card .card-body {
      padding: 18px;
    }

    .finance-hero-main-copy h2 {
      font-size: 28px;
    }

    .finance-hero-signal-grid {
      grid-template-columns: 1fr;
    }

    .finance-compare-legend {
      grid-template-columns: 1fr;
    }

    .finance-inline-metric {
      width: 100%;
    }

    .collections-chart-wrap {
      height: 230px;
    }

    .finance-tax-chart-wrap {
      height: 220px;
    }
  }

  @media print {
    #header,
    #sidebar,
    .back-to-top,
    .btn,
    .header,
    .sidebar,
    .footer {
      display: none !important;
    }

    #main {
      margin: 0 !important;
      padding: 0 !important;
    }

    .finance-dashboard-page .card,
    .finance-hero-panel {
      box-shadow: none !important;
      break-inside: avoid;
    }
  }
  .pagetitle .btn,
  .card-title + .btn,
  .card .btn.btn-sm {
    min-height: 34px !important;
    height: 34px;
    padding: 6px 12px !important;
    font-size: 12px;
    line-height: 1.15;
    border-radius: 9px;
  }

  .btn.btn-sm i,
  .pagetitle .btn i {
    font-size: 13px;
    line-height: 1;
  }

  .pagetitle > .d-flex.align-items-center.justify-content-between {
    justify-content: flex-end !important;
    margin-bottom: 8px;
  }

  .header-nav .nav-profile img {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(24, 41, 84, 0.2);
    object-fit: cover;
  }

  .header-nav .nav-profile span {
    display: none !important;
  }

  .logo img {
    max-height: 40px !important;
    margin-right: 0;
  }

  .header-brand .logo .logo-desktop {
    display: none;
  }

  .header-brand .logo .logo-mobile {
    display: block;
    max-height: 34px !important;
  }

  .header-brand .logo {
    min-width: 0;
  }

  /* ── Mobile brand logo override ─────────────────────────────────── */
  .header-brand .logo .mob-logo-wrap {
    width: 80px !important;
    max-width: 80px !important;
    height: 44px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
  }

  .header-brand .logo .mob-logo-wrap .mob-logo-img {
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    border-radius: 0 !important;
  }

  .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .card-body .table,
  .card-body table.dataTable {
    min-width: 860px;
    width: max-content !important;
  }

  .card-body .table th,
  .card-body .table td,
  .card-body table.dataTable th,
  .card-body table.dataTable td {
    white-space: nowrap;
  }

  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
  }

  .dataTables_wrapper::-webkit-scrollbar,
  .card-body::-webkit-scrollbar {
    height: 8px;
  }

  .dataTables_wrapper::-webkit-scrollbar-thumb,
  .card-body::-webkit-scrollbar-thumb {
    background: #b7c5e3;
    border-radius: 8px;
  }

  table.dataTable {
    min-width: 860px;
    width: max-content !important;
  }

  .dataTables_wrapper .row {
    row-gap: 10px;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    width: 100%;
  }

  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
  }

  .pagetitle .page-actions {
    min-width: auto;
    width: 100%;
    justify-content: flex-start;
  }

  .pagetitle .page-action-placeholder {
    display: none;
  }

  .card-body.table-scrollable::after {
    content: none;
    position: sticky;
    left: 8px;
    bottom: 4px;
    display: inline-block;
    font-size: 11px;
    color: #4f6187;
    background: rgba(245, 248, 255, 0.92);
    border: 1px solid #d8e2f3;
    border-radius: 999px;
    padding: 4px 8px;
    pointer-events: none;
    z-index: 2;
  }
}

@media (max-width: 480px) {
  .pagetitle h1 {
    font-size: 20px;
  }

  .card-title {
    font-size: 17px;
  }

  .bottom-nav a span {
    font-size: 9px;
  }
}

/* Dashboard Redesign */
.dashboard-shell {
  --dash-border: #dbe6f7;
  --dash-navy: #153466;
  --dash-muted: #6a7f9f;
  --dash-surface: #ffffff;
  --dash-soft: #f4f8ff;
  --dash-success: #16a56d;
  --dash-accent: #2a63ea;
  position: relative;
}

.dashboard-shell::before {
  content: "";
  position: absolute;
  inset: -14px -12px auto;
  height: 240px;
  border-radius: 18px;
  background: radial-gradient(circle at 8% 8%, rgba(44, 110, 255, 0.11) 0%, rgba(44, 110, 255, 0) 44%),
    radial-gradient(circle at 92% 8%, rgba(25, 181, 128, 0.11) 0%, rgba(25, 181, 128, 0) 42%),
    linear-gradient(180deg, #f8fbff 0%, rgba(248, 251, 255, 0) 92%);
  pointer-events: none;
}

.dashboard-shell .card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15, 46, 92, 0.07);
}

.dashboard-shell .row.g-3 > [class*="col-"] > .card {
  height: 100%;
}

.dashboard-shell .dashboard-hero {
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(18, 48, 102, 0.08);
}

.dashboard-shell-admin .dashboard-hero {
  background: linear-gradient(120deg, #eef5ff 0%, #f8fbff 100%);
}

.dashboard-shell-user .dashboard-hero {
  background: linear-gradient(120deg, #f0f8ff 0%, #f7fcff 100%);
}

.dashboard-shell .dashboard-badge {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-shell .info-card .card-body {
  padding: 18px;
  min-height: 142px;
}

.dashboard-shell .info-card .card-icon {
  width: 56px;
  height: 56px;
  background: #eef3ff;
  box-shadow: inset 0 0 0 1px #d6e4ff;
}

.dashboard-shell .info-card.sales-card .card-icon {
  background: #eaf0ff;
  box-shadow: inset 0 0 0 1px #cfddff;
}

.dashboard-shell .info-card.revenue-card .card-icon {
  background: #e8fbf3;
  box-shadow: inset 0 0 0 1px #c9f0df;
}

.dashboard-shell .info-card.customers-card .card-icon {
  background: #fff2e8;
  box-shadow: inset 0 0 0 1px #ffe0ca;
}

.dashboard-shell .info-card .card-icon i,
.dashboard-shell .info-card .card-icon svg {
  font-size: 21px;
}

.dashboard-shell .card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dash-navy);
  margin-bottom: 12px;
}

.dashboard-shell .card-title span {
  color: var(--dash-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

.dashboard-shell h6 {
  color: #0f2f64;
  font-size: 38px;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.dashboard-shell .info-card .text-muted.small {
  font-size: 12px;
  color: #6f84a5 !important;
  font-weight: 600;
}

.dashboard-shell .activity {
  max-height: 370px;
  overflow-y: auto;
}

.dashboard-shell .activity .activity-item {
  padding: 10px 0;
  border-bottom: 1px solid #edf2fc;
}

.dashboard-shell .activity .activity-item:last-child {
  border-bottom: 0;
}

.dashboard-shell .table {
  border-collapse: separate;
  border-spacing: 0;
}

.dashboard-shell .table thead th {
  background: #f2f7ff;
  border-bottom: 1px solid #dfe9f9;
  color: #2f4d7a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-shell .table td {
  border-bottom-color: #edf3ff;
}

.dashboard-shell .dashboard-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.dashboard-shell .overview-tile {
  border: 1px solid #e0e9f8;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 12px;
  padding: 13px 14px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-shell .overview-tile strong {
  color: #14366a;
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.dashboard-shell .overview-label {
  color: #60779c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-shell .overview-tile-accent {
  background: linear-gradient(180deg, #edf4ff 0%, #e6f0ff 100%);
  border-color: #cfe1ff;
}

.dashboard-shell .queue-list {
  min-height: 185px;
}

.dashboard-shell .queue-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-shell .queue-list li {
  border-bottom: 1px solid #ecf2fd;
  padding: 8px 0;
}

.dashboard-shell .queue-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dashboard-shell .queue-list strong {
  display: block;
  color: #12315f;
  font-size: 13px;
  margin-bottom: 2px;
  font-weight: 700;
}

.dashboard-shell .queue-meta {
  display: block;
  color: #7385a5;
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-shell .empty-state {
  color: #6f83a5;
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}

.dashboard-shell .dashboard-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #2c61df;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-shell .dashboard-card-link:hover {
  color: #143ea4;
}

.dashboard-shell .dashboard-subtitle {
  margin: 2px 0 0;
  color: #6f83a3;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-shell #reportsChart,
.dashboard-shell #casesChart {
  border: 1px solid #e4ebf8;
  border-radius: 12px;
  background: #fdfefe;
  padding: 8px;
}

.dashboard-shell .activity .activite-label {
  min-width: 86px;
  color: #7a8eac;
  font-size: 11px;
  font-weight: 600;
}

.dashboard-shell .activity .activity-content {
  color: #24436f;
  font-size: 13px;
}

.dashboard-shell .echart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-filter-pill .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #d7e3f6;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 44, 91, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1;
}

.dashboard-filter-pill {
  position: static !important;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .dashboard-shell .card-title {
    font-size: 16px;
  }

  .dashboard-shell .dashboard-hero .card-body {
    padding: 12px;
  }

  .dashboard-shell .dashboard-hero p,
  .dashboard-shell .dashboard-subtitle {
    font-size: 12px;
  }

  .dashboard-shell .card-body,
  .dashboard-shell .info-card .card-body {
    padding: 12px;
    min-height: auto;
  }

  .dashboard-shell h6 {
    font-size: 30px;
  }

  .dashboard-shell .overview-tile strong {
    font-size: 24px;
  }
}

/* Dashboard Visual Boost */
.main {
  background: linear-gradient(180deg, #eef3fb 0%, #f5f8fe 55%, #eff4fd 100%) !important;
}

.dashboard-shell .card {
  border-radius: 16px !important;
  border: 1px solid #d3dff2 !important;
  box-shadow: 0 14px 34px rgba(18, 46, 96, 0.1) !important;
}

.dashboard-shell .dashboard-hero {
  border-radius: 14px !important;
  border: 1px solid #cdddf4 !important;
}

.dashboard-shell .dashboard-hero .card-body {
  padding: 16px 18px !important;
}

.dashboard-shell .dashboard-hero .card-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #122f63 !important;
  margin-bottom: 2px !important;
}

.dashboard-shell .dashboard-subtitle {
  font-size: 14px !important;
  color: #4f678d !important;
}

.dashboard-shell .info-card {
  border-width: 1px !important;
}

.dashboard-shell .info-card.sales-card {
  background: linear-gradient(140deg, #edf2ff 0%, #f8fbff 100%) !important;
}

.dashboard-shell .info-card.revenue-card {
  background: linear-gradient(140deg, #ecfbf2 0%, #f8fefb 100%) !important;
}

.dashboard-shell .info-card.customers-card {
  background: linear-gradient(140deg, #fff3ea 0%, #fffaf6 100%) !important;
}

.dashboard-shell .info-card .card-body {
  min-height: 154px !important;
  padding: 18px 18px 16px !important;
}

.dashboard-shell .info-card .card-icon {
  width: 60px !important;
  height: 60px !important;
}

.dashboard-shell .info-card h6 {
  font-size: 40px !important;
  line-height: 1 !important;
}

.dashboard-shell .dashboard-overview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.dashboard-shell .overview-tile {
  min-height: 78px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #f9fbff 0%, #f1f6ff 100%) !important;
}

.dashboard-shell .overview-tile strong {
  font-size: 34px !important;
  font-weight: 800 !important;
}

.dashboard-shell .overview-label {
  font-size: 10px !important;
}

.dashboard-shell .queue-list {
  min-height: 230px !important;
}

.dashboard-shell .queue-list li {
  padding: 10px 8px !important;
  border-radius: 8px;
  border-bottom: 1px solid #e6eefb !important;
}

.dashboard-shell .queue-list li:hover {
  background: #f3f8ff;
}

.dashboard-shell .queue-list strong {
  font-size: 13px !important;
  color: #103260 !important;
}

.dashboard-shell .queue-meta {
  font-size: 11px !important;
  color: #6880a6 !important;
}

.dashboard-shell #reportsChart,
.dashboard-shell #casesChart {
  border: 1px solid #dce7f8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

.dashboard-shell .table thead th {
  background: #eaf2ff !important;
  color: #244875 !important;
}

.dashboard-shell .activity {
  max-height: 390px !important;
}

.dashboard-shell .activity .activity-item {
  padding: 11px 0 !important;
}

@media (max-width: 1200px) {
  .dashboard-shell .dashboard-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .dashboard-shell .dashboard-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-shell .info-card .card-body {
    min-height: 132px !important;
  }

  .dashboard-shell .info-card h6 {
    font-size: 32px !important;
  }
}

/* ---- Header Profile Dropdown — Plan Widget ---- */
.hdr-plan-item {
  min-width: 220px;
}

.hdr-plan-badge {
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #edf4ff 0%, #f4f8ff 100%);
  border: 1px solid #d0e1f9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hdr-plan-badge.hdr-plan-expiring {
  background: linear-gradient(135deg, #fff8e6 0%, #fffbf0 100%);
  border-color: #f5d88a;
}

.hdr-plan-badge.hdr-plan-trial {
  background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%);
  border-color: #c8b8f0;
}

.hdr-plan-badge.hdr-plan-none {
  background: #f5f7fa;
  border-color: #e0e6ef;
}

.hdr-plan-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f2b57;
}

.hdr-plan-badge.hdr-plan-expiring .hdr-plan-title,
.hdr-plan-badge.hdr-plan-expiring .hdr-plan-meta {
  color: #7a5000;
}

.hdr-plan-badge.hdr-plan-none .hdr-plan-title {
  color: #8a9bbe;
}

.hdr-plan-title i {
  font-size: 0.95rem;
  color: #4d80c8;
}

.hdr-plan-badge.hdr-plan-expiring .hdr-plan-title i {
  color: #c8953d;
}

.hdr-plan-badge.hdr-plan-trial .hdr-plan-title i {
  color: #7c5cbf;
}

.hdr-plan-meta {
  font-size: 0.78rem;
  color: #35517a;
  padding-left: 2px;
}

.hdr-plan-warn {
  font-weight: 700;
  color: #c05000;
}

.hdr-plan-renew {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 7px;
  background: #0f2b57;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
}

.hdr-plan-renew:hover {
  background: #1a3e7a;
}
/* ---- End Header Plan Widget ---- *//* ===================================================================
   CHOSEN DROPDOWN FIX — Global z-index and overlap fix
   ===================================================================

   Core rules:
   1. Base .chosen-container has NO z-index so it doesn't pollute the
      Bootstrap stacking context (avoids the header user-menu going
      behind an idle chosen widget).
   2. Only when the dropdown is OPEN (.chosen-with-drop) do we raise
      the container to z-index: 9999 so the drop overlays everything.
   3. We do NOT force display/visibility on all .chosen-drop — chosen
      hides the closed drop via clip: rect(0,0,0,0), we must not break that.
   4. Any ancestor card/row needs overflow:visible so the absolute-
      positioned drop is not clipped. Bootstrap .card is visible by
      default; we add targeted helpers for common wrapper classes.
   =================================================================== */

/* 1. Base container — no artificial stacking context when closed */
.chosen-container {
  position: relative;
}

/* 2. Elevate the entire container when its dropdown is open */
.chosen-container.chosen-with-drop {
  z-index: 9999 !important;
}

/* 3. Open drop: correct position + clip reset */
.chosen-container.chosen-with-drop .chosen-drop {
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  position: absolute !important;
  clip: auto !important;
  z-index: 9999 !important;
  background: #fff;
  border: 1px solid #80bdff;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 4. Overflow fix: any direct card/row ancestor containing a chosen
      select must not clip the absolutely-positioned drop */
.card,
.card-body,
.selector-card,
.selector-card .card-body,
.search-card,
.search-card .card-body,
.onboarding-card,
.onboarding-card .card-body {
  overflow: visible !important;
}

/* 5. Suppress Bootstrap's own transition on form controls to avoid
      focus-ring animation conflicting with chosen */
.chosen-container-single .chosen-single:focus {
  transition: none !important;
  outline: none !important;
}

/* ===================================================================
   E-Court Case Status - Heading and Tab Alignment
   =================================================================== */
.ecourt-case-status-page .ecourt-page-title > .d-flex.align-items-center.justify-content-between {
  justify-content: flex-start !important;
  align-items: center;
  margin-bottom: 6px;
}

.ecourt-case-status-page .ecourt-page-title h1 {
  margin: 0;
  line-height: 1.25;
  font-size: clamp(1.28rem, 1.05rem + 0.8vw, 1.65rem);
  letter-spacing: 0.01em;
}

.ecourt-case-status-page .ecourt-page-title .breadcrumb {
  margin: 6px 0 0;
}

.ecourt-case-status-page .selector-title {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.ecourt-case-status-page .ecourt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #dce4f3;
}

.ecourt-case-status-page .ecourt-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  line-height: 1.2;
  padding: 7px 12px;
}

.ecourt-case-status-page .search-response-title {
  display: flex;
  align-items: center;
  margin: 8px 0 12px;
  padding-top: 10px;
  border-top: 1px solid #dce4f3;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bs-heading-color);
  text-align: left;
}

.ecourt-case-status-page .selector-card,
.ecourt-case-status-page .search-card {
  border: 1px solid #dbe4f5;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(22, 52, 108, 0.06);
}

.ecourt-case-status-page .ecourt-tabs .nav-link {
  border: 1px solid #d7e2f6;
  border-radius: 999px;
  background: #f8fbff;
  color: #305482;
  font-weight: 600;
}

.ecourt-case-status-page .ecourt-tabs .nav-link.active,
.ecourt-case-status-page .ecourt-tabs .nav-link:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #2f69ff 0%, #274fd5 100%);
  color: #fff;
}

@media (max-width: 768px) {
  .ecourt-case-status-page .section {
    padding-bottom: 84px;
  }

  .ecourt-case-status-page .ecourt-page-title h1 {
    font-size: 1.2rem;
  }

  .ecourt-case-status-page .ecourt-page-title .breadcrumb {
    display: none;
  }

  .ecourt-case-status-page .selector-card .card-body,
  .ecourt-case-status-page .search-card .card-body {
    padding: 14px 12px 12px;
  }

  .ecourt-case-status-page .search-card {
    margin-top: 10px;
  }

  .ecourt-case-status-page .selector-title {
    min-height: 0;
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  .ecourt-case-status-page .ecourt-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }

  .ecourt-case-status-page .ecourt-tabs::-webkit-scrollbar {
    display: none;
  }

  .ecourt-case-status-page .ecourt-tabs .nav-item,
  .ecourt-case-status-page .ecourt-tabs .nav-item.flex-fill {
    flex: 0 0 auto !important;
    display: flex;
    min-width: 0 !important;
    width: auto;
    scroll-snap-align: start;
  }

  .ecourt-case-status-page .ecourt-tabs .nav-link {
    font-size: 13px;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(30, 64, 146, 0.06);
  }

  .ecourt-case-status-page .ecourt-tabs .nav-link i {
    font-size: 12px;
  }

  .ecourt-case-status-page .search-form {
    row-gap: 8px;
  }

  .ecourt-case-status-page .search-form .form-label,
  .ecourt-case-status-page .search-form .mandatoryField {
    font-size: 12px;
  }

  .ecourt-case-status-page .search-form .col-md-2,
  .ecourt-case-status-page .search-form .col-md-3,
  .ecourt-case-status-page .search-form .col-md-4,
  .ecourt-case-status-page .search-form .col-sm-6,
  .ecourt-case-status-page .search-form [class*=" col-md-"],
  .ecourt-case-status-page .search-form [class^="col-md-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .ecourt-case-status-page .search-form .form-control,
  .ecourt-case-status-page .search-form .form-select,
  .ecourt-case-status-page .search-form .chosen-container-single .chosen-single {
    min-height: 42px;
    border-radius: 10px;
  }

  .ecourt-case-status-page .search-form .chosen-container-single .chosen-single {
    display: flex;
    align-items: center;
    border-radius: 10px;
  }

  .ecourt-case-status-page .search-form .chosen-container-single .chosen-single div {
    top: 50%;
    transform: translateY(-50%);
  }

  .ecourt-case-status-page .search-response-title {
    margin: 6px 0 10px;
    padding-top: 8px;
    font-size: 0.95rem;
  }

  .ecourt-case-status-page .appendApiResponse {
    border: 1px solid #e1e9f8;
    border-radius: 12px;
    padding: 8px;
    background: #fcfdff;
  }

  .ecourt-case-status-page .appendApiResponse {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ecourt-case-status-page .appendApiResponse table {
    min-width: 640px;
  }

  .ecourt-case-status-page .appendApiResponse img {
    max-width: 100%;
    height: auto;
  }
}

/* Case-status form tuning to match existing backend theme */
.ecourt-case-status-page .form-label,
.ecourt-case-status-page .search-form .form-label {
  margin-bottom: 6px;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.ecourt-case-status-page .search-form .mandatoryField {
  margin-left: 2px;
}

.ecourt-case-status-page .search-form .chosen-container {
  width: 100% !important;
}

.ecourt-case-status-page .search-form .mt-5 {
  margin-top: 0 !important;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
}

.ecourt-case-status-page .search-form .mt-5 .btn {
  min-width: 92px;
}

@media (max-width: 768px) {
  .ecourt-case-status-page .search-form .mt-5 {
    margin-top: 8px !important;
    align-self: auto;
    align-items: stretch;
  }

  .ecourt-case-status-page .search-form .mt-5 .btn {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .ecourt-case-status-page .ecourt-page-title h1 {
    font-size: 1.06rem;
    line-height: 1.3;
  }

  .ecourt-case-status-page .ecourt-tabs .nav-link {
    font-size: 12px;
    min-height: 34px;
    padding: 6px 10px;
    gap: 5px;
  }

  .ecourt-case-status-page .selector-card .card-body,
  .ecourt-case-status-page .search-card .card-body {
    padding: 12px 10px 10px;
  }

  .ecourt-case-status-page .search-form .form-label {
    font-size: 12px;
  }

  .ecourt-case-status-page .search-response-title {
    font-size: 0.9rem;
  }
}

/* Client CRM module */
.crm-modal-shell {
  border-radius: 14px;
  border: 1px solid #d7e2f1;
}

.crm-stat-card {
  background: linear-gradient(145deg, #f6f9ff 0%, #edf4ff 100%);
  border: 1px solid #dbe5f6;
  border-radius: 12px;
  padding: 12px;
}

.crm-stat-card small {
  display: block;
  color: #5d7399;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.crm-stat-card h4 {
  margin: 4px 0 0;
  color: #103365;
  font-weight: 700;
}

.crm-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f0ff;
  color: #1f4b8f;
  font-size: 12px;
  font-weight: 600;
}

.crm-timeline-wrap {
  min-height: 760px;
  max-height: 760px;
  overflow-y: auto;
  padding-right: 4px;
}

.crm-timeline-item {
  display: flex;
  gap: 12px;
  border-left: 2px solid #d6e1f6;
  margin-left: 6px;
  padding: 0 0 14px 14px;
  position: relative;
}

.crm-timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f69bf;
}

.crm-timeline-type {
  min-width: 98px;
  text-transform: uppercase;
  font-size: 11px;
  color: #5f76a0;
  font-weight: 700;
  margin-top: 1px;
}

.crm-timeline-title {
  font-weight: 700;
  color: #102e5e;
}

.crm-timeline-meta {
  color: #5f7396;
  font-size: 13px;
}

.crm-timeline-date {
  color: #7186aa;
  font-size: 12px;
}

.crm-event-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #fff;
}

.crm-badge-hearing {
  background: #1f6feb;
}

.crm-badge-payment {
  background: #1f9d55;
}

.crm-badge-overdue {
  background: #d92d20;
}

.crm-badge-followup {
  background: #ea7a16;
}

.crm-badge-document-pending {
  background: #f4c430;
  color: #3b2f00;
}

.crm-badge-default {
  background: #667085;
}

.crm-workspace-card {
  background: linear-gradient(150deg, #f8fbff 0%, #eef4ff 100%);
  border: 1px solid #dbe5f6;
  border-radius: 12px;
  padding: 12px;
}

.crm-workspace-card small {
  display: block;
  color: #5d7399;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.crm-workspace-card h4 {
  margin: 6px 0 0;
  color: #173f7a;
  font-weight: 700;
  font-size: 18px;
}

.crm-ops-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe5f6;
  background: linear-gradient(150deg, #f8fbff 0%, #eef4ff 100%);
  border-radius: 10px;
  padding: 8px 12px;
  color: #1f3558;
  font-size: 13px;
  font-weight: 600;
}

.crm-ops-strip strong {
  color: #173f7a;
}

.crm-ops-sep {
  color: #7590bc;
  font-weight: 700;
}

.crm-action-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-warning-card {
  border: 1px solid #ffd6a8;
  background: linear-gradient(140deg, #fffaf3 0%, #fff3e2 100%);
}

.crm-warning-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-warning-item {
  border: 1px solid #ffd2a1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: #8a3f00;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-warning-ok {
  border-color: #cfe8d4;
  color: #1d6b38;
}

.crm-warning-icon {
  color: #d96a00;
  font-weight: 700;
}

.crm-case-visibility-card {
  border: 1px solid #cedcf6;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
}

.crm-case-relationship-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-case-relationship-item {
  border: 1px solid #d7e4fb;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 12px;
}

.crm-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.crm-case-head h6 {
  margin: 0;
  color: #153d77;
  font-size: 14px;
  font-weight: 700;
}

.crm-case-task-badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.crm-case-task-badge.is-pending {
  background: #ffe2df;
  color: #9f1f16;
}

.crm-case-task-badge.is-clear {
  background: #dff5e5;
  color: #18683a;
}

.crm-case-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.crm-case-meta-grid small {
  display: block;
  color: #5c7298;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.crm-case-meta-grid strong {
  display: block;
  color: #1f3558;
  font-size: 13px;
  font-weight: 700;
}

.crm-action-item {
  border: 1px solid #e2e8f4;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crm-action-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f3558;
}

.crm-action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-action-content {
  min-width: 0;
}

.crm-action-meta {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.crm-action-risk {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
}

.crm-risk-court {
  background: #ffe2e0;
  color: #9b1b12;
}

.crm-risk-revenue {
  background: #fff2d8;
  color: #8a4b00;
}

.crm-risk-compliance {
  background: #fff7d4;
  color: #6e5800;
}

.crm-risk-service {
  background: #e8f1ff;
  color: #15407a;
}

.crm-risk-trust {
  background: #f2eaff;
  color: #4f2a87;
}

.crm-risk-stable {
  background: #e4f7ea;
  color: #0f6a3c;
}

.crm-action-due {
  font-size: 11px;
  color: #4f6286;
  font-weight: 600;
}

.crm-timeline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .crm-main-layout > .crm-main-left {
    flex: 0 0 35%;
    max-width: 35%;
  }

  .crm-main-layout > .crm-main-right {
    flex: 0 0 65%;
    max-width: 65%;
  }
}

.crm-action-danger {
  background: #fff4f4;
  border-color: #ffd5d5;
}

.crm-action-warning {
  background: #fff9f2;
  border-color: #ffe1bb;
}

.crm-action-success {
  background: #f2fcf5;
  border-color: #cdeed8;
}

.crm-finance-spotlight {
  border: 1px solid #ffd58f;
  background: linear-gradient(135deg, #fff9ef 0%, #fff3df 100%);
  box-shadow: 0 10px 24px rgba(122, 61, 0, 0.08);
}

.crm-finance-spotlight .card-title {
  color: #7a3d00;
}

.crm-finance-spotlight .card-body {
  padding: 14px;
}

.crm-finance-metric {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #ffd9a0;
  border-radius: 12px;
  padding: 12px;
  min-height: 88px;
}

.crm-finance-metric small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9a5c18;
  font-weight: 700;
}

.crm-finance-metric h5,
.crm-finance-metric h6 {
  margin: 6px 0 0;
  color: #7a3d00;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.crm-finance-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-finance-actions .btn {
  min-height: 32px;
  border-radius: 8px;
}

#crmFinanceSnapshotNote {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #6f4c1c;
}

.crm-profile-card {
  border: 1px solid #d7e4fb;
  background: linear-gradient(130deg, #f6faff 0%, #eef4ff 100%);
}

.crm-profile-item {
  border: 1px solid #dbe6fb;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.crm-profile-item small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: #5b6f95;
  font-weight: 700;
}

.crm-profile-item h6 {
  margin: 6px 0 0;
  color: #153d77;
  font-size: 15px;
  font-weight: 700;
}

.crm-quick-comm-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-next-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-next-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe5f6;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px 10px;
  margin: 0;
}

.crm-next-action-item span {
  color: #1f3558;
  font-size: 13px;
  font-weight: 600;
}

.crm-main-left .accordion-item {
  border: 1px solid #dce6f8;
  border-radius: 8px;
  overflow: hidden;
}

.crm-main-left .accordion-button {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #173d78;
}

.crm-main-left .accordion-button:not(.collapsed) {
  background: #eef4ff;
  color: #133565;
  box-shadow: none;
}

.crm-main-left .accordion-body {
  padding: 10px 12px;
}

.crm-main-left .form-label.small {
  margin-bottom: 3px;
}

.crm-main-left .mb-2 {
  margin-bottom: 0.45rem !important;
}

@media (min-width: 992px) {
  .crm-main-left {
    position: sticky;
    top: 72px;
    align-self: flex-start;
  }

  .crm-main-left .accordion {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

.crm-quick-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-client-selector + .chosen-container .chosen-single {
  height: 38px;
  line-height: 36px;
  border: 1px solid #d0dbef;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.crm-client-selector + .chosen-container .chosen-single div b {
  margin-top: 6px;
}

.crm-client-selector + .chosen-container .chosen-drop {
  border: 1px solid #d0dbef;
  border-radius: 8px;
}

.crm-selector-card,
.crm-selector-card .card-body {
  overflow: visible !important;
}

.crm-selector-card .chosen-container {
  z-index: 1100 !important;
  position: relative !important;
}

.crm-selector-card .chosen-container.chosen-with-drop .chosen-drop {
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1200 !important;
  position: absolute !important;
  display: block !important;
  clip: auto !important;
  visibility: visible !important;
}

#addClientModal,
#editClientModal {
  z-index: 1300;
}

#addClientModal .modal-content,
#editClientModal .modal-content {
  position: relative;
  z-index: 1301;
}

@media (max-width: 768px) {
  .crm-main-layout > .crm-main-left,
  .crm-main-layout > .crm-main-right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .crm-main-left {
    position: static;
  }

  .crm-main-left .accordion {
    max-height: none;
    overflow: visible;
  }

  .crm-finance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .crm-finance-grid > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .crm-case-meta-grid {
    grid-template-columns: 1fr;
  }

  .crm-ops-strip {
    gap: 6px;
    font-size: 12px;
    padding: 7px 10px;
  }

  .crm-timeline-wrap {
    min-height: 520px;
    max-height: 520px;
  }

  .crm-timeline-item {
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
  }

  .crm-timeline-type {
    min-width: 0;
  }

  .crm-timeline-wrap {
    max-height: 420px;
  }
}

/* Client CRM page-specific responsive refinements */
@media (max-width: 768px) {
  .client-crm-page .pagetitle .d-flex.align-items-center.gap-2 {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .client-crm-page .pagetitle .d-flex.align-items-center.gap-2 .btn {
    min-height: 38px;
  }

  .client-crm-page .crm-selector-card .row.g-2 > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .client-crm-page .crm-client-selector + .chosen-container {
    width: 100% !important;
  }

  .client-crm-page .crm-ops-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: flex-start;
  }

  .client-crm-page .crm-ops-strip .crm-ops-sep {
    display: none;
  }

  .client-crm-page .crm-action-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .client-crm-page .crm-action-buttons {
    width: 100%;
  }

  .client-crm-page .crm-action-buttons .btn {
    flex: 1 1 auto;
  }

  .client-crm-page .crm-case-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .client-crm-page .crm-finance-spotlight .card-body,
  .client-crm-page .crm-modal-shell .card-body {
    padding: 12px;
  }

  .client-crm-page .crm-timeline-wrap {
    min-height: 300px;
    max-height: 56vh;
    padding-right: 0;
  }
}

@media (max-width: 575px) {
  .client-crm-page .pagetitle .d-flex.align-items-center.gap-2 .btn {
    width: 100%;
  }

  .client-crm-page .crm-profile-item .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .client-crm-page .crm-profile-item .d-flex.align-items-center.gap-1 {
    width: 100%;
    margin-top: 8px;
  }

  .client-crm-page .crm-profile-item .d-flex.align-items-center.gap-1 .btn {
    flex: 1 1 auto;
  }

  .client-crm-page .crm-next-action-item {
    align-items: flex-start;
  }
}

/* ============================================================
   MOBILE RESPONSIVENESS — Comprehensive Enhancements
   ============================================================ */

/* --- Logo: swap desktop/mobile versions --- */
@media (max-width: 768px) {
  .header-brand .logo .logo-desktop {
    display: none !important;
  }
  .header-brand .logo .logo-mobile {
    display: block !important;
  }
}

/* --- DataTables controls: stack & full-width on mobile --- */
@media (max-width: 767px) {
  .dataTables_wrapper .row:first-child .col-sm-12.col-md-6:first-child,
  .dataTables_wrapper .row:first-child .col-sm-12.col-md-6:last-child {
    justify-content: flex-start;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter {
    text-align: left;
  }
  .dataTables_wrapper .dataTables_filter label {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .dataTables_wrapper .dataTables_filter input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  .dataTables_wrapper .dataTables_length label {
    gap: 6px;
  }
  /* Bottom row: info + pagination centered on mobile */
  .dataTables_wrapper .row:last-child .col-sm-12.col-md-5,
  .dataTables_wrapper .row:last-child .col-sm-12.col-md-7 {
    justify-content: center;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_paginate {
    text-align: center;
  }
  .dataTables_wrapper .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .dataTables_wrapper .dataTables_info {
    text-align: center;
  }
}

/* --- Chosen.js: force full width on mobile --- */
@media (max-width: 768px) {
  .chosen-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .chosen-container .chosen-drop {
    max-width: 100%;
  }
  .chosen-container-single .chosen-single {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
  }
  .chosen-container-single .chosen-single div {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- Modals: full width & comfortable on small screens --- */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-content {
    border-radius: 12px;
  }
  .modal-body {
    padding: 12px;
  }
  .modal-header,
  .modal-footer {
    padding: 12px;
  }
}

/* --- Pagetitle: stack title & action buttons on very small screens --- */
@media (max-width: 575px) {
  .pagetitle > div.d-flex.justify-content-between,
  .pagetitle > .d-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  .pagetitle .btn,
  .pagetitle .btn-group,
  .pagetitle > .d-flex > .d-flex {
    align-self: flex-start;
  }
}

/* --- Card body: tighter padding on mobile --- */
@media (max-width: 575px) {
  .card-body {
    padding: 0 10px 14px 10px;
  }
}

/* --- Section inner padding on very small screens --- */
@media (max-width: 575px) {
  .section .row {
    margin-left: 0;
    margin-right: 0;
  }
  .section .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- Nav tabs: wrap & equal-width items on mobile --- */
@media (max-width: 575px) {
  .nav-tabs-bordered,
  .nav-tabs {
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-tabs-bordered .nav-link,
  .nav-tabs .nav-link {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* --- Trial banner: compact on mobile --- */
@media (max-width: 768px) {
  .trial-banner {
    font-size: 12px;
    padding: 6px 12px;
    flex-wrap: wrap;
    gap: 4px;
    text-align: center;
    justify-content: center;
  }
}

/* --- Invoice / form summary: full width on mobile --- */
@media (max-width: 767px) {
  /* Bootstrap col-md-6 already goes full-width below md,
     but make the summary card span fully on tablet too */
  .invoice-summary-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* --- Hearing / Cases: action buttons in tight rows --- */
@media (max-width: 575px) {
  td .btn-sm,
  td .btn {
    font-size: 12px;
    padding: 4px 8px;
    min-height: 32px;
  }
  td .btn + .btn {
    margin-top: 4px;
  }
}

/* --- Form inline labels: full width on mobile --- */
@media (max-width: 575px) {
  .row.g-3 > [class^="col-"],
  .row.g-2 > [class^="col-"] {
    min-width: 0;
  }
  .form-label {
    font-size: 14px;
  }
}

/* --- Input groups: prevent overflow --- */
@media (max-width: 575px) {
  .input-group {
    flex-wrap: nowrap;
  }
  .input-group .btn {
    min-height: 44px;
    white-space: nowrap;
  }
}

/* --- Badge overflow in narrow cells --- */
@media (max-width: 768px) {
  .badge {
    font-size: 11px;
    white-space: normal;
    text-align: center;
  }
}

/* --- Notification / profile dropdowns: full width on mobile --- */
@media (max-width: 575px) {
  .header-nav .notifications,
  .header-nav .profile {
    inset: 60px 4px auto 4px !important;
    min-width: 0 !important;
    width: calc(100vw - 8px) !important;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* --- hdr-plan-badge: compact on mobile --- */
@media (max-width: 768px) {
  .hdr-plan-badge {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* --- Tables in card: no inner padding on mobile --- */
@media (max-width: 575px) {
  .card-body .table-responsive {
    margin: 0 -10px;
    width: calc(100% + 20px);
    border-radius: 0;
  }
}

/* --- Finance transactions tabs: scrollable on mobile --- */
@media (max-width: 768px) {
  .nav.nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav.nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav.nav-tabs .nav-item {
    flex-shrink: 0;
  }
}

/* --- Button groups: wrap on mobile --- */
@media (max-width: 575px) {
  .btn-group {
    flex-wrap: wrap;
    gap: 6px;
  }
  .btn-group > .btn {
    border-radius: 6px !important;
    flex: 1 1 auto;
    min-width: 80px;
  }
}

/* --- Breadcrumb: truncate long items on mobile --- */
@media (max-width: 575px) {
  .breadcrumb-item {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .breadcrumb-item.active {
    max-width: 100%;
  }
}

/* --- fix body safe-area for sidebar overlay --- */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

/* ============================================================
   MOBILE HEADER REFINEMENT
   ============================================================ */
@media (max-width: 768px) {
  .header {
    height: 56px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
  }

  .header-brand {
    min-width: 52px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .header-brand .logo {
    min-width: 0;
    max-width: 90px;
    overflow: visible;
    display: flex;
    align-items: center;
  }

  .header-brand .logo .logo-desktop {
    display: none !important;
  }

  .header-brand .logo .logo-mobile {
    display: none !important;
  }

  /* ── Mobile brand logo: dedicated element, no global rule conflicts ── */
  .header-brand .logo .mob-logo-wrap {
    width: 80px;
    height: 44px;
    overflow: visible;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .header-brand .logo .mob-logo-wrap .mob-logo-img {
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 44px !important;
    object-fit: contain;
    object-position: left center;
    display: block !important;
  }

  .header-page-title {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 164px);
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 600;
    font-family: "Nunito", sans-serif;
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-nav {
    overflow: visible;
  }

  .header-nav > ul {
    gap: 4px;
  }

  .header-nav .nav-link.nav-icon,
  .header-nav .nav-link.nav-profile {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .header-nav .nav-icon {
    width: 34px;
    height: 34px;
  }

  .header-nav .nav-icon i {
    font-size: 17px;
  }

  .header-nav .nav-profile img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .header-nav .badge-number {
    font-size: 10px;
    padding: 1px 5px;
    inset: -3px -4px auto auto;
  }

  .header-nav .notifications,
  .header-nav .profile,
  .header-nav .notifications[data-bs-popper],
  .header-nav .profile[data-bs-popper] {
    inset: 60px 8px auto auto !important;
    left: auto !important;
    right: 8px !important;
    transform: none !important;
    min-width: 0 !important;
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 72vh;
    overflow-y: auto;
  }

  .header-nav .dropdown-menu.dropdown-menu-end,
  .header-nav .dropdown-menu-end[data-bs-popper] {
    left: 8px !important;
    right: 8px !important;
    inset: 60px 8px auto 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    transform: none !important;
  }

  .header-nav .notifications .dropdown-header {
    padding: 10px 12px;
    text-align: left;
    line-height: 1.35;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .header-nav .notifications .dropdown-header .badge {
    margin-left: 6px !important;
    margin-top: 4px;
    display: inline-flex;
    vertical-align: middle;
  }

  .header-nav .dropdown-menu {
    border-radius: 12px;
  }

  .trial-banner {
    top: 58px;
  }
}

/* Final override: keep header dropdowns usable on mobile (prevent narrow/collapsed menu) */
@media (max-width: 768px) {
  #header .header-nav .dropdown-menu,
  #header .header-nav .dropdown-menu.dropdown-menu-end,
  #header .header-nav .dropdown-menu-end[data-bs-popper],
  #header .header-nav .notifications,
  #header .header-nav .profile,
  #header .header-nav .notifications[data-bs-popper],
  #header .header-nav .profile[data-bs-popper] {
    position: fixed !important;
    top: 62px !important;
    left: 8px !important;
    right: 8px !important;
    inset: auto 8px auto 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: calc(100vw - 16px) !important;
    transform: none !important;
    margin: 0 !important;
    max-height: 72vh;
    overflow-y: auto;
    z-index: 2000 !important;
  }

  #header .header-nav .notifications .dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  #header .header-nav .notifications .dropdown-header .badge {
    flex-shrink: 0;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  #header .header-nav .dropdown-menu,
  #header .header-nav .dropdown-menu.dropdown-menu-end,
  #header .header-nav .dropdown-menu-end[data-bs-popper],
  #header .header-nav .notifications,
  #header .header-nav .profile,
  #header .header-nav .notifications[data-bs-popper],
  #header .header-nav .profile[data-bs-popper] {
    top: 60px !important;
    left: 6px !important;
    right: 6px !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: calc(100vw - 12px) !important;
  }
}

@media (max-width: 420px) {
  .header-page-title {
    max-width: calc(100% - 154px);
    font-size: 13px;
    line-height: 1.1;
  }

  .header-nav .notifications,
  .header-nav .profile,
  .header-nav .notifications[data-bs-popper],
  .header-nav .profile[data-bs-popper] {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    right: 6px !important;
    inset: 60px 6px auto auto !important;
  }

  .header-nav .dropdown-menu.dropdown-menu-end,
  .header-nav .dropdown-menu-end[data-bs-popper] {
    left: 6px !important;
    right: 6px !important;
    inset: 60px 6px auto 6px !important;
    max-width: calc(100vw - 12px) !important;
  }
}

/* ============================================================
   GLOBAL DATATABLES ALIGNMENT (All Pages)
   ============================================================ */

.dataTables_wrapper {
  width: 100%;
}

.dataTables_wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  row-gap: 10px;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable tbody td {
  vertical-align: middle;
  line-height: 1.35;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin: 0;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #4a5d85;
  font-size: 13px;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  min-height: 36px;
}

.dataTables_wrapper .dataTables_length select {
  margin: 0 6px !important;
  min-width: 78px;
  padding: 6px 10px;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 6px !important;
  padding: 7px 10px;
  min-width: 220px;
}

.dataTables_wrapper .dataTables_filter {
  text-align: right;
}

.dataTables_wrapper .dataTables_info {
  color: #4a5d85;
  font-size: 13px;
  font-weight: 600;
  padding-top: 0.6rem;
}

.dataTables_wrapper .dataTables_paginate {
  margin-top: 8px;
  text-align: right;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.dataTables_wrapper .page-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dt-mobile-cards {
  display: none;
}

.dt-mobile-shell {
  display: none;
}

.dt-mobile-footer {
  border-top: 1px solid #e6edfb;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dt-mobile-search-wrap {
  position: relative;
}

.dt-mobile-search-wrap > i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #8aa0c7;
  font-size: 14px;
}

.dt-mobile-search-wrap .dt-mobile-search {
  min-height: 40px;
  border-radius: 14px;
  border-color: #cfdaf2;
  font-size: 14px;
  padding-left: 42px;
  background: #fff;
}

.dt-mobile-loading {
  font-size: 12px;
  font-weight: 600;
  color: #6a7ea3 !important;
}

@media (max-width: 767px) {
  .dt-mobile-shell {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .dt-mobile-shell .dt-mobile-cards {
    display: block;
    margin-top: 6px;
  }

  .dt-mobile-search-wrap {
    margin-bottom: 8px;
  }

  .dt-mobile-search-wrap .dt-mobile-search {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid #cfdaf2;
    font-size: 14px;
    padding-left: 42px;
    background: #f9fbff;
  }

  .dataTables_wrapper.dt-mobile-mode.dt-mobile-rendered table.dataTable {
    display: none !important;
  }

  .dataTables_wrapper.dt-mobile-mode.dt-mobile-rendered .dt-mobile-cards {
    display: block;
    margin-top: 8px;
  }

  .dataTables_wrapper.dt-mobile-mode.dt-mobile-rendered .dataTables_length,
  .dataTables_wrapper.dt-mobile-mode.dt-mobile-rendered .dataTables_paginate {
    display: none !important;
  }

  .dataTables_wrapper.dt-mobile-mode.dt-mobile-rendered .dataTables_filter {
    margin-bottom: 6px;
  }

  .dataTables_wrapper.dt-mobile-mode.dt-mobile-rendered .dataTables_info {
    margin-top: 8px;
    text-align: left !important;
  }

  .dt-mobile-card {
    border: 1px solid #dbe6fb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(19, 56, 114, 0.08);
    padding: 12px 12px 10px;
    margin-bottom: 8px;
  }

  .dt-mobile-card-compact {
    position: relative;
  }

  .dt-mobile-card-compact .dt-mobile-grid {
    border-top: 0;
    padding-top: 0;
    padding-right: 0;
  }

  .dt-mobile-card-top-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
  }

  .dt-mobile-card-top-actions .dt-mobile-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #c6d5f1;
    color: #3b5f98;
    background: #f8fbff;
  }

  .dt-mobile-card:last-child {
    margin-bottom: 0;
  }

  .dt-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .dt-mobile-head-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .dt-mobile-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .dt-mobile-head-actions .dt-mobile-icon-btn {
    border: 1px solid #c6d5f1;
    color: #3b5f98;
    background: #f8fbff;
  }

  .dt-mobile-head-actions .dt-mobile-icon-btn.btn-action-edit {
    background: linear-gradient(135deg, #3f6bff 0%, #2d54da 100%);
    color: #fff;
    border-color: transparent;
  }

  .dt-mobile-title {
    font-size: 15px;
    font-weight: 800;
    color: #123768;
    line-height: 1.26;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dt-mobile-subtitle {
    font-size: 12px;
    color: #6b7ea2;
    margin-top: 3px;
    line-height: 1.3;
  }

  .dt-mobile-kv {
    min-width: 0;
  }

  .dt-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    border-top: 1px dashed #e4ecfa;
    padding-top: 6px;
    align-items: start;
  }

  .dt-mobile-k {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6e83a8;
  }

  .dt-mobile-v {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1d3761;
    line-height: 1.25;
    word-break: break-word;
  }

  .dt-mobile-card-actions {
    display: none;
  }

  .dt-mobile-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
  }

  .dt-mobile-icon-btn i {
    font-size: 14px;
    margin: 0 !important;
  }

  .dt-mobile-empty {
    border: 1px dashed #c9d8f4;
    border-radius: 12px;
    text-align: center;
    padding: 14px;
    color: #6a7ea3;
    background: #f9fbff;
  }
}

@media (max-width: 767px) {
  .dataTables_wrapper .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_length {
    display: none !important;
  }

  .dataTables_wrapper .dataTables_filter {
    text-align: center !important;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    width: min(100%, 420px);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    text-align: left;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}