body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #646B72;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* .sidebar {
  height: 100vh;
  background-color: #e17710 !important;
  transition: width 0.3s ease;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  z-index: 1000;
} */

.sidebar.collapsed {
  width: 70px;
}

.sidebar-logo {
  padding: 20px;
  text-align: center;
}

.sidebar .menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.sidebar .menu li {
  margin-bottom: 8px;
}

.sidebar .menu li a {
  display: flex;
  align-items: center;
  color: white;
  padding: 12px 20px;
  gap: 10px;
  text-decoration: none;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  transition: background-color 0.3s ease, padding 0.3s ease;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background-color: rgb(93, 42, 3);
  color: white;
}

.sidebar .menu li span {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .menu li span {
  opacity: 0;
  width: 0;
  overflow: hidden;
}



.sidebar .menu li a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.sidebar .menu li a.active {
  background-color: #4c2703;
  border-radius: 4px;
}

.sidebar .menu li a:hover {
  background-color: #4c2703;
}

/* Inventory toggle */
.sidebar .menu li div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.sidebar .menu li div:hover {
  background-color: #4c2703;
  border-radius: 4px;
  padding: 12px 20px;
}

/* Submenu styles */
.sidebar .submenu {
  list-style: none;
  padding-left: 15px;
  margin-top: 0px;
  transition: all 0.3s ease;
}

.sidebar .submenu li {
  padding: 8px 0;
}

.sidebar .submenu li a {
  color: #dddddd;
  font-size: 14px;
  text-decoration: none;
  display: block;
}

.sidebar .submenu li a.active {
  font-weight: bold;
  color: #ffffff;
  background-color: #4c2703;
  border-radius: 4px;
  padding-left: 10px;
}

.sidebar .submenu li a:hover {
  color: white;
}


/* login css */

.login-box {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  /* width: 320px; */
  text-align: center;
  animation: fadeIn 1.2s ease;
  position: relative;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-box h2 {
  color: white;
  margin-bottom: 10px;
}

#face {
  font-size: 3rem;
  margin-bottom: 20px;
  transition: 0.3s ease;
}

.input-box {
  position: relative;
  margin-bottom: 30px;
}

.input-box input {
  width: 100%;
  padding: 10px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
  outline: none;
  color: white;
  font-size: 1rem;
}

.input-box label {
  position: absolute;
  left: 10px;
  top: 10px;
  color: white;
  pointer-events: none;
  transition: 0.3s ease;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: -12px;
  left: 5px;
  font-size: 0.8rem;
  color: #00ffe5;
}

button {
  width: 100%;
  padding: 12px;
  border: none;
  outline: none;
  background: #00ffe5;
  color: black;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  position: relative;
}

button:disabled {
  background: #888;
  cursor: not-allowed;
}

button.enabled {
  background: #00ffe5;
  box-shadow: 0 0 10px #00ffe5, 0 0 40px #00ffe5;
}

.cardDesign {
    align-items: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 2px 0 1px 0 #ccc;
    cursor: pointer;
    display: flex
;
    font-size: 20px;
    height: 600px;
    justify-content: center;
    margin-left: 180px;
    opacity: .8;
    position: relative;
    top: 30px;
    width: 76%;
}

.box {
  position: relative;
  width: 380px;
  height: 420px;
  background: #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
}
.box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  /* width: 380px;
  height: 420px; */
  background: linear-gradient(0deg, transparent, #9b1fe8, #9b1fe8);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
}
.box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 380px;
  height: 420px;
  background: linear-gradient(0deg, transparent, #9b1fe8, #9b1fe8);
  transform-origin: bottom right;
  animation: animate 6s linear infinite;
  animation-delay: -3s;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.form {
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  background: #28292d;
  z-index: 10;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
}
.form h2 {
  color: #9b1fe8;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
}

/* Task modal header gradient + better contrast */
.task-modal .task-modal__header {
  background: linear-gradient(135deg, #0d6efd, #6f42c1);
  color: #fff;
  border-top-left-radius: .6rem;
  border-top-right-radius: .6rem;
}

/* Skeleton shimmer for loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #e9ecef;
  border-radius: .5rem;
}
.skeleton::after {
  content: "";
  position: absolute;
  top: 0; left: -150px; height: 100%; width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.2s infinite;
}
.skeleton-bar { height: 16px; }
.skeleton-card { height: 80px; border-radius: .75rem; }
@keyframes shimmer { 100% { transform: translateX(300%); } }

/* Vertical timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
  width: 2px; background: #e9ecef;
}
.timeline-item { position: relative; margin-bottom: 14px; }
.timeline-dot {
  position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  background: #adb5bd; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e9ecef;
}
.timeline-dot.done { background: #198754; }
.timeline-content { padding-left: 8px; }


/* e.g. in your global stylesheet */
.table thead th { position: sticky; top: 0; z-index: 1; }
.table td, .table th { vertical-align: middle; }
/* ===== Compact finance queue tweaks ===== */

/* XS buttons (Bootstrap doesn't ship .btn-xs) */
.btn-xs {
  --bs-btn-padding-y: .15rem;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .75rem;
  --bs-btn-border-radius: .25rem;
}
.badge-xs { font-size: .65rem; padding: .25rem .35rem; }

/* Slim input groups */
.input-group.input-group-xxs > .input-group-text,
.input-group.input-group-xxs > .form-control,
.input-group.input-group-xxs > .form-select,
.input-group.input-group-xxs > .btn {
  padding: .25rem .4rem;
  font-size: .8rem;
  height: 30px;
}

/* Toolbar spacing */
.fq-toolbar { gap: .4rem !important; }
.fq-toolbar .btn-group > .btn { margin-right: .2rem; }

/* Table: keep head sticky and rows tight */
.table thead th { position: sticky; top: 0; z-index: 1; }
.table-sm td, .table-sm th { padding-top: .35rem; padding-bottom: .35rem; }

/* Actions column: inline, no wrap jitter */
.fq-actions { display: flex; gap: .35rem; flex-wrap: nowrap; }

/* Pills in tabs look lighter */
.badge-soft {
  background: rgba(108,117,125,.12);
  color: #6c757d;
}
/* ===== Compact finance queue tweaks ===== */

/* Extra small buttons (Bootstrap doesn't ship these) */
.btn-xs {
  --bs-btn-padding-y: .15rem;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .75rem;
  --bs-btn-border-radius: .25rem;
}
.badge-xs { font-size: .65rem; padding: .22rem .3rem; }

/* Slim input groups */
.input-group.input-group-xxs > .input-group-text,
.input-group.input-group-xxs > .form-control,
.input-group.input-group-xxs > .form-select,
.input-group.input-group-xxs > .btn {
  padding: .25rem .4rem;
  font-size: .8rem;
  height: 30px;
}

/* Toolbar spacing */
.fq-toolbar { gap: .4rem !important; flex-wrap: wrap; }
.fq-toolbar .btn-group > .btn { margin-right: .2rem; }

/* Sticky head / tighter table */
.table thead th { position: sticky; top: 0; z-index: 1; }
.table-sm td, .table-sm th { padding-top: .35rem; padding-bottom: .35rem; }

/* Actions in one line */
.fq-actions { display: flex; gap: .35rem; flex-wrap: nowrap; }

/* Soft badge */
.badge-soft { background: rgba(108,117,125,.12); color: #6c757d; }

/* Subtle row hover */
.table-hover > tbody > tr:hover > * { background-color: rgba(0,0,0,.02); }

/* Make modal content compact */
.modal .form-label { margin-bottom: .25rem; font-size: .85rem; }
/* Finance Queue — compact look */

.fq-card {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(33,37,41,.04);
}

.fq-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem;
  align-items: center;
}
@media (max-width: 992px) {
  .fq-toolbar { grid-template-columns: 1fr; }
}

.fq-pills {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.fq-pill {
  border: 1px solid #dee2e6;
  background: #fff;
  padding: .25rem .6rem;
  line-height: 1;
  font-size: .8rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.fq-pill.active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
.fq-pill .count {
  background: rgba(0,0,0,.07);
  color: inherit;
  padding: .1rem .35rem;
  border-radius: 999px;
  margin-left: .35rem;
  font-weight: 600;
}

.fq-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fq-controls .input-group > * { height: 34px; }
.fq-ghost { background: #fff; border: 1px dashed #ced4da; }
.fq-ghost:hover { border-style: solid; }

/* Table */
.fq-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f8f9fa;
}
.fq-table.table-sm td, .fq-table.table-sm th { padding: .45rem .6rem; }
.fq-actions { display: flex; gap: .4rem; white-space: nowrap; }

/* Badges */
.badge-soft { background: rgba(108,117,125,.12); color: #6c757d; }
.badge-dot { position: relative; padding-left: 1rem; }
.badge-dot::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  position: absolute; left: .35rem; top: 50%; transform: translateY(-50%);
  background: currentColor;
}

/* Modal compact */
.modal .form-label { margin-bottom: .25rem; font-size: .85rem; }
.table-sm td, .table-sm th { padding-top: .4rem; padding-bottom: .4rem; }
.btn-group-sm .btn { padding: .2rem .5rem; }


.css-ozv5qp {padding-top:80px !important;
  padding-bottom:0px !important;
  padding-left:0px !important;
  padding-right:0px !important;}




  .acct-reportslist-theme {
  --acct-primary: #005baa;
  --acct-primary-dark: #004784;
  --acct-primary-light: #eaf4ff;

  --acct-text: #172033;
  --acct-muted: #6b7280;
  --acct-border: #e6eaf0;
  --acct-page-bg: #f6f8fb;
  --acct-card-bg: #ffffff;

  --acct-blue: #2563eb;
  --acct-blue-soft: #eff6ff;

  --acct-purple: #7c3aed;
  --acct-purple-soft: #f5f3ff;

  --acct-orange: #ea580c;
  --acct-orange-soft: #fff7ed;

  --acct-cyan: #0891b2;
  --acct-cyan-soft: #ecfeff;

  --acct-green: #16a34a;
  --acct-green-soft: #f0fdf4;

  --acct-red: #dc2626;
  --acct-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  background: var(--acct-page-bg);
  color: var(--acct-text);
}

/* =========================================================
   TOP HEADING BOX
   ========================================================= */

.acct-reportslist-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f7fbff 100%
  );
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.acct-reportslist-heading-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--acct-primary);
}

.acct-reportslist-heading-box::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.acct-reportslist-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.acct-reportslist-heading-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #ffffff;
  font-size: 22px;
  background: linear-gradient(
    135deg,
    var(--acct-primary),
    #1675c8
  );
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
}

.unit-page-label {
  margin-bottom: 3px;
  color: var(--acct-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.acct-reportslist-heading-box h2 {
  margin: 0 0 5px;
  color: #172033;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.acct-reportslist-heading-box p {
  margin: 0;
  color: var(--acct-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.unit-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.unit-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.unit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.unit-btn-light {
  color: #374151;
  background: #ffffff;
  border-color: #dfe4ea;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.unit-btn-light:hover:not(:disabled) {
  color: var(--acct-primary);
  background: #f8fbff;
  border-color: #b8d5ef;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.unit-btn-primary {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--acct-primary),
    #1675c8
  );
  border-color: var(--acct-primary);
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.unit-btn-primary:hover {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--acct-primary-dark),
    var(--acct-primary)
  );
  border-color: var(--acct-primary-dark);
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.unit-btn i {
  font-size: 13px;
}

/* =========================================================
   ERROR ALERT
   ========================================================= */

.acct-reportslist-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(220, 38, 38, 0.08);
}

/* =========================================================
   STAT CARDS
   ========================================================= */

.unit-stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 18px 18px 17px;
  overflow: hidden;
  background: var(--acct-card-bg);
  border: 1px solid var(--acct-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.unit-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: currentColor;
  opacity: 0.95;
}

.unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.acct-stat-card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acct-stat-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.unit-stat-card strong {
  display: block;
  max-width: 100%;
  color: #172033;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.acct-stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 19px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.unit-stat-card:hover .acct-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

/* Blue */
.acct-stat-blue {
  color: var(--acct-blue);
  border-color: #dbeafe;
}

.acct-stat-blue .acct-stat-icon {
  color: var(--acct-blue);
  background: var(--acct-blue-soft);
}

/* Purple */
.acct-stat-purple {
  color: var(--acct-purple);
  border-color: #e9d5ff;
}

.acct-stat-purple .acct-stat-icon {
  color: var(--acct-purple);
  background: var(--acct-purple-soft);
}

/* Orange */
.acct-stat-orange {
  color: var(--acct-orange);
  border-color: #fed7aa;
}

.acct-stat-orange .acct-stat-icon {
  color: var(--acct-orange);
  background: var(--acct-orange-soft);
}

/* Cyan */
.acct-stat-cyan {
  color: var(--acct-cyan);
  border-color: #bae6fd;
}

.acct-stat-cyan .acct-stat-icon {
  color: var(--acct-cyan);
  background: var(--acct-cyan-soft);
}

/* Green */
.acct-stat-green {
  color: var(--acct-green);
  border-color: #bbf7d0;
}

.acct-stat-green .acct-stat-icon {
  color: var(--acct-green);
  background: var(--acct-green-soft);
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--acct-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  border-bottom: 1px solid #edf0f4;
  background: linear-gradient(
    180deg,
    #ffffff,
    #fbfcfe
  );
}

.acct-reportslist-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.acct-reportslist-section-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--acct-primary);
  background: var(--acct-primary-light);
  font-size: 16px;
}

.unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
  line-height: 1.4;
}

.unit-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

/* =========================================================
   SEARCH + SELECTS
   ========================================================= */

.unit-search {
  width: min(320px, 100%);
}

.unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

.unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.unit-search .form-control:focus {
  border-color: #a9cae8;
}

.unit-search:focus-within .input-group-text,
.unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.unit-search:focus-within .input-group-text {
  color: var(--acct-primary);
}

.unit-clear-btn {
  width: 38px;
  min-height: 40px;
  border: 1px solid #dfe4ea;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  color: #9ca3af;
  background: #ffffff;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.unit-clear-btn:hover {
  color: var(--acct-red);
  background: #fff7f7;
}

.unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  border-color: #dfe4ea;
  border-radius: 10px;
  color: #374151;
  background-color: #ffffff;
  box-shadow: none !important;
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.unit-page-size:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08) !important;
}

/* =========================================================
   TABLE
   ========================================================= */

.unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.unit-table {
  width: 100%;
  margin: 0;
  min-width: 850px;
  vertical-align: middle;
}

.unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  white-space: nowrap;
}

.unit-table tbody td {
  padding: 15px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  transition:
    background-color 0.2s ease;
}

.unit-table tbody tr {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.unit-table tbody tr:hover td {
  background: #fbfdff;
}

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

.unit-id {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
}

.unit-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--acct-primary);
  background: var(--acct-primary-light);
  border: 1px solid #d7eaff;
  font-size: 14px;
  font-weight: 900;
}

.unit-name-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.unit-name-copy strong {
  max-width: 290px;
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-name-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8a94a3;
  font-size: 11px;
}

.unit-name-copy small i {
  font-size: 10px;
}

.unit-amount {
  color: #1f2937;
  font-weight: 800;
  white-space: nowrap;
}

.unit-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #667085;
  white-space: nowrap;
}

.unit-date i {
  color: #98a2b3;
}

/* =========================================================
   STATUS PILLS
   ========================================================= */

.unit-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15px;
  text-transform: uppercase;
  white-space: nowrap;
}

.acct-reportslist-status-neutral {
  color: #667085;
  background: #f2f4f7;
  border-color: #eaecf0;
}

.acct-reportslist-status-info {
  color: #175cd3;
  background: #eff8ff;
  border-color: #b2ddff;
}

.acct-reportslist-status-pending {
  color: #b54708;
  background: #fffaeb;
  border-color: #fedf89;
}

.acct-reportslist-status-danger {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.acct-reportslist-status-success {
  color: #027a48;
  background: #ecfdf3;
  border-color: #abefc6;
}

/* =========================================================
   TABLE ACTIONS
   ========================================================= */

.unit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.unit-open-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

/* =========================================================
   LOADING + EMPTY
   ========================================================= */

.unit-loader {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #667085;
}

.unit-loader .spinner-border {
  width: 2rem;
  height: 2rem;
  color: var(--acct-primary);
}

.unit-loader p {
  margin: 0;
  font-size: 13px;
}

.unit-empty {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.unit-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  border-radius: 18px;
  color: var(--acct-primary);
  background: var(--acct-primary-light);
  font-size: 25px;
}

.unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.unit-empty p {
  max-width: 390px;
  margin: 0 0 17px;
  color: #7b8493;
  font-size: 13px;
}

/* =========================================================
   FOOTER + PAGINATION
   ========================================================= */

.unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  border-top: 1px solid #edf0f4;
  background: #fcfdff;
}

.unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.unit-count-text strong {
  color: #344054;
}

.unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.unit-pagination .page-item {
  margin: 0;
}

.unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  color: #475467;
  background: #ffffff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.unit-pagination .page-link:hover {
  z-index: 1;
  color: var(--acct-primary);
  background: var(--acct-primary-light);
  border-color: #bdd9f2;
  transform: translateY(-1px);
}

.unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--acct-primary);
  border-color: var(--acct-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

.unit-pagination .page-item.disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
  border-color: #edf0f4;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1400px) {
  .unit-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .acct-reportslist-theme {
    padding: 18px;
  }

  .acct-reportslist-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .unit-search {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .acct-reportslist-theme {
    padding: 14px;
  }

  .acct-reportslist-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .acct-reportslist-heading-content {
    align-items: flex-start;
  }

  .acct-reportslist-heading-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 13px;
    font-size: 19px;
  }

  .acct-reportslist-heading-box h2 {
    font-size: 22px;
  }

  .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .unit-stat-card {
    padding: 15px;
  }

  .unit-stat-card strong {
    font-size: 19px;
  }

  .acct-stat-icon {
    width: 41px;
    height: 41px;
    flex-basis: 41px;
    font-size: 17px;
  }

  .unit-toolbar {
    padding: 16px;
  }

  .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit-search {
    grid-column: 1 / -1;
    width: 100%;
  }

  .unit-page-size {
    width: 100%;
    min-width: 0;
  }

  .unit-toolbar-actions .unit-btn {
    width: 100%;
  }

  .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .unit-header-actions .unit-btn {
    width: 100%;
  }

  .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .unit-search {
    grid-column: auto;
  }

  .acct-reportslist-section-title {
    align-items: flex-start;
  }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .acct-reportslist-theme *,
  .acct-reportslist-theme *::before,
  .acct-reportslist-theme *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}




.acct-managerqueue-theme {
  --mq-primary: #005baa;
  --mq-primary-dark: #00467f;
  --mq-primary-soft: #eaf4ff;
  --mq-text: #172033;
  --mq-muted: #6b7280;
  --mq-border: #e5eaf0;
  --mq-bg: #f6f8fb;

  --mq-blue: #2563eb;
  --mq-blue-soft: #eff6ff;
  --mq-purple: #7c3aed;
  --mq-purple-soft: #f5f3ff;
  --mq-orange: #ea580c;
  --mq-orange-soft: #fff7ed;
  --mq-green: #16a34a;
  --mq-green-dark: #15803d;
  --mq-green-soft: #f0fdf4;
  --mq-amber: #d97706;
  --mq-amber-soft: #fffbeb;
  --mq-red: #dc2626;
  --mq-red-dark: #b91c1c;
  --mq-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--mq-text);
  background: var(--mq-bg);
}

/* Heading */
.acct-mq-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  margin-bottom: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(17,24,39,.07),
              0 2px 8px rgba(17,24,39,.04);
}

.acct-mq-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--mq-primary);
}

.acct-mq-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0,91,170,.045);
}

.acct-mq-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.acct-mq-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--mq-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,91,170,.24);
  font-size: 22px;
}

.unit-page-label {
  margin-bottom: 3px;
  color: var(--mq-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.acct-mq-heading-box h2 {
  margin: 0 0 5px;
  font-size: 27px;
  font-weight: 800;
}

.acct-mq-heading-box p {
  margin: 0;
  color: var(--mq-muted);
  font-size: 14px;
}

/* Buttons */
.unit-header-actions,
.unit-toolbar-actions,
.unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.unit-header-actions,
.unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  transition: transform .22s ease, box-shadow .22s ease,
              background-color .22s ease, border-color .22s ease,
              color .22s ease;
}

.unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15,23,42,.04);
}

.unit-btn-light:hover:not(:disabled) {
  color: var(--mq-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15,23,42,.08);
}

.unit-btn-approve {
  color: #fff !important;
  background: linear-gradient(135deg, var(--mq-green), #22c55e) !important;
  border-color: var(--mq-green) !important;
  box-shadow: 0 5px 12px rgba(22,163,74,.19);
}

.unit-btn-approve:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--mq-green-dark), var(--mq-green)) !important;
  box-shadow: 0 8px 17px rgba(22,163,74,.25);
}

.unit-btn-changes {
  color: #a16207 !important;
  background: var(--mq-amber-soft) !important;
  border-color: #fcd34d !important;
}

.unit-btn-changes:hover:not(:disabled) {
  color: #92400e !important;
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}

.unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--mq-red), #ef4444) !important;
  border-color: var(--mq-red) !important;
  box-shadow: 0 5px 12px rgba(220,38,38,.17);
}

.unit-btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--mq-red-dark), var(--mq-red)) !important;
  box-shadow: 0 8px 17px rgba(220,38,38,.24);
}

/* Stats */
.unit-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.unit-stat-card {
  position: relative;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mq-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15,23,42,.055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

.acct-mq-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acct-mq-stat-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.unit-stat-card strong {
  color: var(--mq-text);
  font-size: 23px;
  font-weight: 800;
}

.acct-mq-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform .25s ease;
}

.unit-stat-card:hover .acct-mq-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.acct-mq-stat-orange { color: var(--mq-orange); border-color: #fed7aa; }
.acct-mq-stat-orange .acct-mq-stat-icon { background: var(--mq-orange-soft); }

.acct-mq-stat-purple { color: var(--mq-purple); border-color: #e9d5ff; }
.acct-mq-stat-purple .acct-mq-stat-icon { background: var(--mq-purple-soft); }

.acct-mq-stat-blue { color: var(--mq-blue); border-color: #dbeafe; }
.acct-mq-stat-blue .acct-mq-stat-icon { background: var(--mq-blue-soft); }

.acct-mq-stat-green { color: var(--mq-green); border-color: #bbf7d0; }
.acct-mq-stat-green .acct-mq-stat-icon { background: var(--mq-green-soft); }

/* Main card */
.unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mq-border);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.065),
              0 2px 7px rgba(15,23,42,.035);
}

.unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  border-bottom: 1px solid #edf0f4;
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

.acct-mq-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acct-mq-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mq-primary);
  background: var(--mq-primary-soft);
  border-radius: 12px;
}

.unit-toolbar h5 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 800;
}

.unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* Search */
.unit-search { width: min(360px, 100%); }

.unit-search .input-group-text {
  min-width: 42px;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.unit-clear-btn {
  width: 40px;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.unit-page-size {
  width: auto;
  min-width: 115px;
  min-height: 40px;
  border-color: #dfe4ea;
  border-radius: 10px;
  font-size: 13px;
}

/* Comment panel */
.acct-mq-comment-panel {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid #edf0f4;
}

.acct-mq-comment-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mq-purple);
  background: var(--mq-purple-soft);
  border-radius: 12px;
}

.acct-mq-comment-group { width: 100%; }

.acct-mq-comment-group .form-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
}

.acct-mq-comment-group .form-control {
  min-height: 42px;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}

.acct-mq-comment-group small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #8a94a3;
  font-size: 11px;
}

/* Table */
.unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.unit-table {
  min-width: 1000px;
  margin: 0;
  vertical-align: middle;
}

.unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.unit-table tbody td {
  padding: 15px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
}

.unit-table tbody tr:hover td {
  background: #fbfdff;
}

.unit-id {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 235px;
}

.unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mq-primary);
  background: var(--mq-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-weight: 900;
}

.unit-name-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.unit-name-copy strong {
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
}

.unit-name-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8a94a3;
  font-size: 11px;
}

.acct-mq-requester,
.unit-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.unit-amount {
  color: #1f2937;
  font-weight: 800;
  white-space: nowrap;
}

.unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.unit-actions .unit-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

/* Loader / Empty */
.unit-loader,
.unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.unit-loader { gap: 14px; color: #667085; }

.unit-loader .spinner-border { color: var(--mq-primary); }

.unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--mq-green);
  background: var(--mq-green-soft);
  border-radius: 18px;
  font-size: 24px;
}

.unit-empty h5 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 13px;
}

/* Footer */
.unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--mq-primary);
  border-color: var(--mq-primary);
}

/* Modal */
.acct-mq-action-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
}

.acct-mq-action-modal .modal-header {
  padding: 18px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid #edf0f4;
}

.acct-mq-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acct-mq-modal-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 18px;
}

.acct-mq-modal-heading small {
  display: block;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.acct-mq-modal-heading .modal-title {
  font-size: 17px;
  font-weight: 800;
}

.acct-mq-modal-approve .acct-mq-modal-icon {
  color: var(--mq-green);
  background: var(--mq-green-soft);
}

.acct-mq-modal-request .acct-mq-modal-icon {
  color: var(--mq-amber);
  background: var(--mq-amber-soft);
}

.acct-mq-modal-reject .acct-mq-modal-icon {
  color: var(--mq-red);
  background: var(--mq-red-soft);
}

.acct-mq-action-modal .modal-body { padding: 20px; }

.unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
}

.acct-mq-action-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

/* Responsive */
@media (max-width: 1200px) {
  .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .acct-managerqueue-theme { padding: 18px; }

  .acct-mq-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .unit-search { width: 100%; }
}

@media (max-width: 768px) {
  .acct-managerqueue-theme { padding: 14px; }

  .acct-mq-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .unit-search { grid-column: 1 / -1; }

  .unit-page-size,
  .unit-toolbar-actions .unit-btn {
    width: 100%;
  }

  .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .unit-header-actions .unit-btn { width: 100%; }

  .unit-toolbar-actions { grid-template-columns: 1fr; }
  .unit-search { grid-column: auto; }

  .acct-mq-comment-panel {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-managerqueue-theme *,
  .acct-managerqueue-theme *::before,
  .acct-managerqueue-theme *::after {
    transition: none !important;
    animation-duration: .001ms !important;
  }
}





/* =========================================================
   FinanceQueue.css
   Scoped styles for FinanceQueue.jsx
   ========================================================= */

.acct-financequeue-theme {
  --fq-primary: #005baa;
  --fq-primary-dark: #00467f;
  --fq-primary-soft: #eaf4ff;

  --fq-text: #172033;
  --fq-muted: #6b7280;
  --fq-border: #e5eaf0;
  --fq-bg: #f6f8fb;

  --fq-blue: #2563eb;
  --fq-blue-soft: #eff6ff;

  --fq-orange: #ea580c;
  --fq-orange-soft: #fff7ed;

  --fq-purple: #7c3aed;
  --fq-purple-soft: #f5f3ff;

  --fq-green: #16a34a;
  --fq-green-dark: #15803d;
  --fq-green-soft: #f0fdf4;

  --fq-cyan: #0891b2;
  --fq-cyan-soft: #ecfeff;

  --fq-amber: #d97706;
  --fq-amber-soft: #fffbeb;

  --fq-red: #dc2626;
  --fq-red-dark: #b91c1c;
  --fq-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--fq-text);
  background: var(--fq-bg);
}

/* =========================================================
   TOP HEADING
   ========================================================= */

.acct-fq-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.acct-fq-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--fq-primary);
}

.acct-fq-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.acct-fq-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.acct-fq-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--fq-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.unit-page-label {
  margin-bottom: 3px;
  color: var(--fq-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.acct-fq-heading-box h2 {
  margin: 0 0 5px;
  color: var(--fq-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.acct-fq-heading-box p {
  margin: 0;
  color: var(--fq-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   ALERT
   ========================================================= */

.acct-fq-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(220, 38, 38, 0.08);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.unit-header-actions,
.unit-toolbar-actions,
.unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.unit-header-actions,
.unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.unit-btn-light:hover:not(:disabled) {
  color: var(--fq-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.unit-btn-approve {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--fq-green), #22c55e) !important;
  border-color: var(--fq-green) !important;
  box-shadow: 0 5px 12px rgba(22, 163, 74, 0.19);
}

.unit-btn-approve:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--fq-green-dark),
    var(--fq-green)
  ) !important;
  box-shadow: 0 8px 17px rgba(22, 163, 74, 0.25);
}

.unit-btn-paid {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0891b2, #06b6d4) !important;
  border-color: #0891b2 !important;
  box-shadow: 0 5px 12px rgba(8, 145, 178, 0.2);
}

.unit-btn-paid:hover:not(:disabled) {
  background: linear-gradient(135deg, #0e7490, #0891b2) !important;
  box-shadow: 0 8px 17px rgba(8, 145, 178, 0.26);
}

.unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--fq-red), #ef4444) !important;
  border-color: var(--fq-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

.unit-btn-danger:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--fq-red-dark),
    var(--fq-red)
  ) !important;
  box-shadow: 0 8px 17px rgba(220, 38, 38, 0.24);
}

.unit-btn i {
  font-size: 12px;
}

/* =========================================================
   STAT CARDS
   ========================================================= */

.unit-stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--fq-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.acct-fq-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acct-fq-stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.unit-stat-card strong {
  display: block;
  max-width: 100%;
  color: var(--fq-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.acct-fq-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.unit-stat-card:hover .acct-fq-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.acct-fq-stat-blue {
  color: var(--fq-blue);
  border-color: #dbeafe;
}

.acct-fq-stat-blue .acct-fq-stat-icon {
  background: var(--fq-blue-soft);
}

.acct-fq-stat-orange {
  color: var(--fq-orange);
  border-color: #fed7aa;
}

.acct-fq-stat-orange .acct-fq-stat-icon {
  background: var(--fq-orange-soft);
}

.acct-fq-stat-purple {
  color: var(--fq-purple);
  border-color: #e9d5ff;
}

.acct-fq-stat-purple .acct-fq-stat-icon {
  background: var(--fq-purple-soft);
}

.acct-fq-stat-green {
  color: var(--fq-green);
  border-color: #bbf7d0;
}

.acct-fq-stat-green .acct-fq-stat-icon {
  background: var(--fq-green-soft);
}

.acct-fq-stat-cyan {
  color: var(--fq-cyan);
  border-color: #bae6fd;
}

.acct-fq-stat-cyan .acct-fq-stat-icon {
  background: var(--fq-cyan-soft);
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--fq-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  border-bottom: 1px solid #edf0f4;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

.acct-fq-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.acct-fq-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fq-primary);
  background: var(--fq-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================
   TABS
   ========================================================= */

.acct-fq-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acct-fq-tab-btn {
  min-height: 39px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 8px 11px !important;
  color: #475467 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition:
    transform 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.acct-fq-tab-btn:hover {
  color: var(--fq-primary) !important;
  border-color: #b8d5ef !important;
  background: #f8fbff !important;
  transform: translateY(-1px);
}

.acct-fq-tab-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--fq-primary), #1675c8) !important;
  border-color: var(--fq-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.18);
}

.acct-fq-tab-count {
  min-width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  color: #667085;
  background: #f2f4f7;
  font-size: 10px;
  font-weight: 800;
}

.acct-fq-tab-btn.active .acct-fq-tab-count {
  color: var(--fq-primary);
  background: #ffffff;
}

/* =========================================================
   FILTER PANEL
   ========================================================= */

.acct-fq-filter-panel {
  padding: 17px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid #edf0f4;
}

.acct-fq-filter-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.acct-fq-filter-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fq-purple);
  background: var(--fq-purple-soft);
  border-radius: 10px;
}

.acct-fq-filter-heading strong {
  display: block;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.acct-fq-filter-heading small {
  display: block;
  margin-top: 1px;
  color: #8a94a3;
  font-size: 11px;
}

.acct-fq-filter-controls {
  justify-content: flex-start;
}

/* Search */
.unit-search {
  width: min(320px, 100%);
}

.unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.unit-search:focus-within .input-group-text,
.unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.unit-search:focus-within .input-group-text {
  color: var(--fq-primary);
}

.unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.unit-clear-btn:hover {
  color: var(--fq-red) !important;
  background: #fff7f7 !important;
}

.unit-page-size {
  width: auto;
  min-width: 112px;
  min-height: 40px;
  border-color: #dfe4ea;
  border-radius: 10px;
  color: #374151;
  background-color: #ffffff;
  box-shadow: none !important;
  font-size: 13px;
}

.unit-page-size:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08) !important;
}

.acct-fq-mode-btn {
  color: #6b7280 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
}

.acct-fq-mode-btn.active {
  color: #ffffff !important;
  background: var(--fq-purple) !important;
  border-color: var(--fq-purple) !important;
}

.acct-fq-input-wrap {
  position: relative;
}

.acct-fq-input-wrap > i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 11px;
}

.acct-fq-number-input {
  width: 105px;
  padding-left: 29px !important;
}

.acct-fq-date-input {
  min-width: 145px;
}

/* =========================================================
   STATUS FILTER PANEL
   ========================================================= */

.acct-fq-status-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 1px solid #edf0f4;
}

.acct-fq-status-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #344054;
  font-size: 12px;
}

.acct-fq-status-title i {
  color: var(--fq-primary);
}

.acct-fq-status-checks {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.acct-fq-status-checks .form-check {
  margin: 0;
}

.acct-fq-status-checks .form-check-input {
  cursor: pointer;
}

.acct-fq-status-checks .form-check-input:checked {
  background-color: var(--fq-primary);
  border-color: var(--fq-primary);
}

.acct-fq-status-checks .form-check-label {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.acct-fq-status-actions {
  display: flex;
  gap: 7px;
}

.acct-fq-status-actions .unit-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

/* =========================================================
   BULK BAR
   ========================================================= */

.acct-fq-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  background: linear-gradient(90deg, #f0fdf4, #f7fff9);
  border-bottom: 1px solid #bbf7d0;
}

.acct-fq-bulk-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #166534;
  font-size: 13px;
}

.acct-fq-bulk-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fq-green);
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}

.acct-fq-bulk-info strong {
  font-weight: 900;
}

/* =========================================================
   TABLE
   ========================================================= */

.unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.unit-table {
  width: 100%;
  min-width: 1040px;
  margin: 0;
  vertical-align: middle;
}

.unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  white-space: nowrap;
}

.unit-table tbody td {
  padding: 15px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.unit-table tbody tr:hover td {
  background: #fbfdff;
}

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

.acct-fq-row-selected td {
  background: #f0f9ff !important;
}

.unit-table .form-check-input {
  cursor: pointer;
}

.unit-table .form-check-input:checked {
  background-color: var(--fq-primary);
  border-color: var(--fq-primary);
}

.unit-id {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 235px;
}

.unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fq-primary);
  background: var(--fq-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.unit-name-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.unit-name-copy strong {
  display: block;
  max-width: 290px;
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.unit-name-copy a:hover strong {
  color: var(--fq-primary);
}

.unit-name-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8a94a3;
  font-size: 11px;
}

.unit-name-copy small i {
  font-size: 10px;
}

.unit-amount {
  color: #1f2937;
  font-weight: 800;
  white-space: nowrap;
}

.unit-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #667085;
  white-space: nowrap;
}

.unit-date i {
  color: #98a2b3;
}

/* =========================================================
   STATUS BADGES
   ========================================================= */

.unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px;
  text-transform: uppercase;
  white-space: nowrap;
}

.acct-financequeue-status-neutral {
  color: #667085 !important;
  background: #f2f4f7 !important;
  border-color: #eaecf0 !important;
}

.acct-financequeue-status-info {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border-color: #b2ddff !important;
}

.acct-financequeue-status-pending {
  color: #b54708 !important;
  background: #fffaeb !important;
  border-color: #fedf89 !important;
}

.acct-financequeue-status-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border-color: #abefc6 !important;
}

.acct-financequeue-status-paid {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border-color: #a5f3fc !important;
}

/* =========================================================
   TABLE ACTIONS
   ========================================================= */

.unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.acct-fq-approve-icon {
  color: var(--fq-green) !important;
  background: var(--fq-green-soft) !important;
  border: 1px solid #bbf7d0 !important;
}

.acct-fq-approve-icon:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--fq-green) !important;
  box-shadow: 0 5px 12px rgba(22, 163, 74, 0.18);
}

.acct-fq-reject-icon {
  color: var(--fq-red) !important;
  background: var(--fq-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.acct-fq-reject-icon:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--fq-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

.acct-fq-paid-icon {
  color: var(--fq-cyan) !important;
  background: var(--fq-cyan-soft) !important;
  border: 1px solid #a5f3fc !important;
}

.acct-fq-paid-icon:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--fq-cyan) !important;
  box-shadow: 0 5px 12px rgba(8, 145, 178, 0.18);
}

.unit-view-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

/* =========================================================
   LOADER / EMPTY
   ========================================================= */

.unit-loader,
.unit-empty {
  min-height: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.unit-loader {
  gap: 14px;
  color: #667085;
}

.unit-loader .spinner-border {
  color: var(--fq-primary);
}

.unit-loader p {
  margin: 0;
  font-size: 13px;
}

.unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--fq-primary);
  background: var(--fq-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 13px;
}

/* =========================================================
   FOOTER / PAGINATION
   ========================================================= */

.unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.unit-count-text strong {
  color: #344054;
}

.unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.unit-pagination .page-link:hover {
  color: var(--fq-primary);
  background: var(--fq-primary-soft);
  border-color: #bdd9f2;
  transform: translateY(-1px);
}

.unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--fq-primary);
  border-color: var(--fq-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

.unit-pagination .page-item.disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
  border-color: #edf0f4;
  cursor: not-allowed;
}

/* =========================================================
   MODALS
   ========================================================= */

.acct-fq-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.acct-fq-modal .modal-header {
  padding: 18px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid #edf0f4;
}

.acct-fq-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acct-fq-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 18px;
}

.acct-fq-pay-modal .acct-fq-modal-icon {
  color: var(--fq-cyan);
  background: var(--fq-cyan-soft);
}

.acct-fq-reject-modal .acct-fq-modal-icon {
  color: var(--fq-red);
  background: var(--fq-red-soft);
}

.acct-fq-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.acct-fq-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.acct-fq-modal .modal-body {
  padding: 20px;
}

.acct-fq-modal-report {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 14px 15px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 12px;
}

.acct-fq-modal-report > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acct-fq-modal-report span {
  color: #8a94a3;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.acct-fq-modal-report strong {
  color: #344054;
  font-size: 13px;
}

.acct-fq-reject-report {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 17px;
  padding: 13px 14px;
  color: #991b1b;
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-radius: 11px;
}

.acct-fq-reject-report > i {
  font-size: 20px;
}

.acct-fq-reject-report span {
  display: block;
  color: #9f6b6b;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.acct-fq-reject-report strong {
  display: block;
  color: #7f1d1d;
  font-size: 13px;
}

.acct-fq-modal .form-label {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.acct-fq-modal .form-control,
.acct-fq-modal .form-select {
  min-height: 40px;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}

.acct-fq-modal .form-control:focus,
.acct-fq-modal .form-select:focus {
  border-color: #b8cfe5;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.07);
}

.acct-fq-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1450px) {
  .unit-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acct-fq-top-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1200px) {
  .acct-fq-filter-controls {
    justify-content: flex-start;
  }

  .unit-search {
    flex: 1 1 320px;
  }
}

@media (max-width: 992px) {
  .acct-financequeue-theme {
    padding: 18px;
  }

  .acct-fq-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .acct-financequeue-theme {
    padding: 14px;
  }

  .acct-fq-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .acct-fq-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .acct-fq-heading-box h2 {
    font-size: 22px;
  }

  .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .acct-fq-tabs {
    width: 100%;
  }

  .acct-fq-tab-btn {
    flex: 1 1 calc(50% - 8px);
  }

  .acct-fq-filter-panel {
    padding: 15px;
  }

  .acct-fq-filter-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit-search {
    grid-column: 1 / -1;
    width: 100%;
  }

  .unit-page-size,
  .acct-fq-input-wrap,
  .acct-fq-number-input,
  .acct-fq-date-input,
  .acct-fq-filter-controls .unit-btn {
    width: 100%;
  }

  .acct-fq-status-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .acct-fq-bulk-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-pagination {
    flex-wrap: wrap;
  }

  .acct-fq-modal-report {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .unit-header-actions .unit-btn {
    width: 100%;
  }

  .acct-fq-filter-controls {
    grid-template-columns: 1fr;
  }

  .unit-search {
    grid-column: auto;
  }

  .acct-fq-tab-btn {
    flex: 1 1 100%;
  }

  .acct-fq-status-actions {
    width: 100%;
  }

  .acct-fq-status-actions .unit-btn {
    flex: 1;
  }

  .acct-fq-bulk-bar .unit-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .acct-fq-bulk-bar .unit-btn {
    flex: 1;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .acct-financequeue-theme *,
  .acct-financequeue-theme *::before,
  .acct-financequeue-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}






/* =========================================================
   InvoiceGenerated.css
   Professional UI for AccountInvoicePage
   ========================================================= */

.invoice-gen-theme {
  --inv-primary: #005baa;
  --inv-primary-dark: #00467f;
  --inv-primary-soft: #eaf4ff;
  --inv-text: #172033;
  --inv-muted: #6b7280;
  --inv-border: #e5eaf0;
  --inv-bg: #f6f8fb;

  --inv-blue: #2563eb;
  --inv-blue-soft: #eff6ff;
  --inv-purple: #7c3aed;
  --inv-purple-soft: #f5f3ff;
  --inv-cyan: #0891b2;
  --inv-cyan-soft: #ecfeff;
  --inv-orange: #ea580c;
  --inv-orange-soft: #fff7ed;
  --inv-green: #16a34a;
  --inv-green-dark: #15803d;
  --inv-green-soft: #f0fdf4;
  --inv-red: #dc2626;
  --inv-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--inv-text);
  background: var(--inv-bg);
}

/* ===================== TOP HEADING ===================== */

.invoice-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.invoice-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--inv-primary);
}

.invoice-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.invoice-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.invoice-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--inv-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.invoice-gen-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--inv-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.invoice-heading-box h2 {
  margin: 0 0 5px;
  color: var(--inv-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.invoice-heading-box p {
  margin: 0;
  color: var(--inv-muted);
  font-size: 14px;
}

/* ===================== BUTTONS ===================== */

.invoice-gen-theme .unit-header-actions,
.invoice-gen-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.invoice-gen-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.invoice-gen-theme .unit-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.invoice-gen-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.invoice-gen-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.invoice-gen-theme .unit-btn-light {
  color: #374151;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.invoice-gen-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--inv-primary);
  background: #f8fbff;
  border-color: #b8d5ef;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.invoice-gen-theme .unit-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--inv-primary), #1675c8);
  border: 1px solid var(--inv-primary);
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.invoice-gen-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(135deg, var(--inv-primary-dark), var(--inv-primary));
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.invoice-gen-theme .unit-btn i {
  font-size: 12px;
}

/* ===================== KPI CARDS ===================== */

.invoice-one-line-cards {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.invoice-one-line-cards .unit-stat-card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--inv-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.invoice-one-line-cards .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.invoice-one-line-cards .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.invoice-stat-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 18px;
  transition: transform 0.25s ease;
}

.unit-stat-card:hover .invoice-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.invoice-one-line-cards .unit-stat-card > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.invoice-one-line-cards .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.invoice-one-line-cards .unit-stat-card strong {
  display: block;
  max-width: 100%;
  color: var(--inv-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.invoice-stat-code {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.invoice-stat-blue {
  color: var(--inv-blue);
  border-color: #dbeafe !important;
}
.invoice-stat-blue .invoice-stat-icon {
  background: var(--inv-blue-soft);
}

.invoice-stat-purple {
  color: var(--inv-purple);
  border-color: #e9d5ff !important;
}
.invoice-stat-purple .invoice-stat-icon {
  background: var(--inv-purple-soft);
}

.invoice-stat-cyan {
  color: var(--inv-cyan);
  border-color: #bae6fd !important;
}
.invoice-stat-cyan .invoice-stat-icon {
  background: var(--inv-cyan-soft);
}

.invoice-stat-orange {
  color: var(--inv-orange);
  border-color: #fed7aa !important;
}
.invoice-stat-orange .invoice-stat-icon {
  background: var(--inv-orange-soft);
}

.invoice-stat-green {
  color: var(--inv-green);
  border-color: #bbf7d0 !important;
}
.invoice-stat-green .invoice-stat-icon {
  color: var(--inv-green);
  background: var(--inv-green-soft);
}

/* ===================== MAIN CARDS ===================== */

.invoice-gen-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--inv-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.invoice-gen-theme .row.g-4 > [class*="col-"] > .unit-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.085),
    0 3px 8px rgba(15, 23, 42, 0.04);
}

.invoice-gen-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #edf0f4;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}

.invoice-gen-theme .unit-toolbar h5 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.invoice-gen-theme .unit-toolbar h5 > i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border-radius: 10px;
  font-size: 14px;
}

.invoice-gen-theme .unit-toolbar p {
  margin: 0;
  padding-left: 43px;
  color: #7b8493;
  font-size: 12px;
}

/* ===================== FORM CONTROLS ===================== */

.invoice-gen-theme .form-label {
  margin-bottom: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.invoice-gen-theme .form-control,
.invoice-gen-theme .form-select {
  min-height: 42px;
  color: #344054;
  background-color: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.invoice-gen-theme textarea.form-control {
  min-height: auto;
}

.invoice-gen-theme .form-control:focus,
.invoice-gen-theme .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.invoice-gen-theme .form-control::placeholder {
  color: #a1a9b5;
}

.invoice-gen-theme input[type="file"].form-control {
  padding: 8px 10px;
  background: #fbfcfe;
}

.invoice-gen-theme .form-control-color {
  width: 100%;
  min-height: 44px;
  padding: 5px;
  cursor: pointer;
}

.invoice-gen-theme h6 {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.invoice-gen-theme h6.mt-2.mb-0 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
}

.invoice-gen-theme h6.mt-2.mb-0::before {
  content: "\f19c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--inv-primary);
}

/* Upload previews */
.invoice-upload-preview {
  max-width: 180px;
  object-fit: contain;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e5eaf0;
  border-radius: 9px;
}

/* ===================== EMAIL OPTION ===================== */

.invoice-email-option-card {
  border: 1px solid #dbeafe !important;
  background: linear-gradient(135deg, #fbfdff, #f4f9ff) !important;
  box-shadow: none !important;
}

.invoice-email-option-card .p-3 {
  padding: 16px !important;
}

.invoice-email-option-card h6 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-email-option-card h6::before {
  content: "\f0e0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--inv-primary);
}

.invoice-email-option-card label {
  color: #475467;
  font-size: 13px;
  font-weight: 600;
}

.invoice-email-option-card input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--inv-primary);
}

/* ===================== ITEMS TABLE ===================== */

.invoice-gen-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.invoice-gen-theme .unit-table {
  width: 100%;
  min-width: 760px;
  margin: 0;
  vertical-align: middle;
}

.invoice-gen-theme .unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  white-space: nowrap;
}

.invoice-gen-theme .unit-table tbody td {
  padding: 13px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.invoice-gen-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.invoice-gen-theme .unit-table tbody tr:last-child td {
  border-bottom: 0;
}

.invoice-item-desc {
  min-width: 260px;
}

.invoice-gen-theme .unit-table .form-control[readonly] {
  color: #344054;
  background: #f8fafc;
  font-weight: 700;
}

.invoice-gen-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.invoice-gen-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.invoice-gen-theme .unit-delete {
  color: var(--inv-red);
  background: var(--inv-red-soft);
  border: 1px solid #fecaca;
}

.invoice-gen-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff;
  background: var(--inv-red);
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

/* ===================== TOTAL STRIP ===================== */

.invoice-total-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  align-items: stretch;
  gap: 10px;
}

.invoice-total-strip > div {
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e5eaf0;
  border-radius: 11px;
}

.invoice-total-strip > div:nth-child(2) {
  background: var(--inv-orange-soft);
  border-color: #fed7aa;
}

.invoice-total-strip > div:nth-child(3) {
  background: var(--inv-green-soft);
  border-color: #bbf7d0;
}

.invoice-total-strip span {
  margin-bottom: 3px;
  color: #7b8493;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.invoice-total-strip strong {
  color: #1f2937;
  font-size: 16px;
  font-weight: 900;
}

.invoice-total-strip > div:nth-child(3) strong {
  color: var(--inv-green-dark);
}

.invoice-total-strip .unit-btn {
  min-width: 150px;
}

/* ===================== GENERATED INVOICES ===================== */

.invoice-gen-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 240px;
}

.invoice-gen-theme .unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.invoice-gen-theme .unit-name-box strong {
  display: block;
  max-width: 420px;
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.invoice-gen-theme .unit-name-box a:hover strong {
  color: var(--inv-primary);
}

.invoice-gen-theme .unit-name-box small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 11px;
}

.invoice-gen-theme .unit-id {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

/* ===================== EMPTY STATE ===================== */

.invoice-gen-theme .unit-empty {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
}

.invoice-gen-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.invoice-gen-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.invoice-gen-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 13px;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 1400px) {
  .invoice-one-line-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .invoice-gen-theme {
    padding: 18px;
  }

  .invoice-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .invoice-gen-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .invoice-one-line-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-total-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .invoice-total-strip .unit-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .invoice-gen-theme {
    padding: 14px;
  }

  .invoice-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .invoice-heading-content {
    align-items: flex-start;
  }

  .invoice-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .invoice-heading-box h2 {
    font-size: 22px;
  }

  .invoice-one-line-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .invoice-gen-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .invoice-gen-theme .unit-toolbar p {
    padding-left: 0;
  }

  .invoice-total-strip {
    grid-template-columns: 1fr;
  }

  .invoice-total-strip .unit-btn {
    grid-column: auto;
    width: 100%;
  }

  .invoice-gen-theme .unit-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .invoice-gen-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .invoice-gen-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .invoice-heading-content {
    gap: 12px;
  }

  .invoice-gen-theme .unit-toolbar {
    padding: 16px;
  }
}

/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {
  .invoice-gen-theme *,
  .invoice-gen-theme *::before,
  .invoice-gen-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}




/* =========================================================
   ReportForm.css
   Professional UI for Create Expense Report
   ========================================================= */

.report-form-theme {
  --rf-primary: #005baa;
  --rf-primary-dark: #00467f;
  --rf-primary-soft: #eaf4ff;

  --rf-text: #172033;
  --rf-muted: #6b7280;
  --rf-border: #e5eaf0;
  --rf-bg: #f6f8fb;

  --rf-blue: #2563eb;
  --rf-blue-soft: #eff6ff;

  --rf-purple: #7c3aed;
  --rf-purple-soft: #f5f3ff;

  --rf-orange: #ea580c;
  --rf-orange-soft: #fff7ed;

  --rf-green: #16a34a;
  --rf-green-soft: #f0fdf4;

  min-height: 100%;
  padding: 24px;
  color: var(--rf-text);
  background: var(--rf-bg);
}

/* =========================================================
   TOP HEADING BOX
   ========================================================= */

.report-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.report-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--rf-primary);
}

.report-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.report-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.report-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--rf-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.report-form-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--rf-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.report-heading-box h2 {
  margin: 0 0 5px;
  color: var(--rf-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.report-heading-box p {
  margin: 0;
  color: var(--rf-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.report-form-theme .unit-header-actions,
.report-form-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.report-form-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.report-form-theme .unit-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.report-form-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.report-form-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.report-form-theme .unit-btn-light {
  color: #374151;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.report-form-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--rf-primary);
  background: #f8fbff;
  border-color: #b8d5ef;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.report-form-theme .unit-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--rf-primary), #1675c8);
  border: 1px solid var(--rf-primary);
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.report-form-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--rf-primary-dark),
    var(--rf-primary)
  );
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.report-form-theme .unit-btn i {
  font-size: 12px;
}

/* =========================================================
   SUMMARY CARDS
   ========================================================= */

.report-form-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.report-form-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--rf-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.report-form-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.report-form-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.report-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.report-stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-form-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.report-form-theme .unit-stat-card strong {
  display: block;
  max-width: 100%;
  color: var(--rf-text);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.report-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.report-form-theme .unit-stat-card:hover .report-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.report-stat-blue {
  color: var(--rf-blue);
  border-color: #dbeafe !important;
}

.report-stat-blue .report-stat-icon {
  background: var(--rf-blue-soft);
}

.report-stat-purple {
  color: var(--rf-purple);
  border-color: #e9d5ff !important;
}

.report-stat-purple .report-stat-icon {
  background: var(--rf-purple-soft);
}

.report-stat-orange {
  color: var(--rf-orange);
  border-color: #fed7aa !important;
}

.report-stat-orange .report-stat-icon {
  background: var(--rf-orange-soft);
}

.report-stat-green {
  color: var(--rf-green);
  border-color: #bbf7d0 !important;
}

.report-stat-green .report-stat-icon {
  background: var(--rf-green-soft);
}

.report-stat-daterange {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.report-status-chip {
  width: fit-content;
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.report-status-draft {
  color: #475467 !important;
  background: #f2f4f7;
  border: 1px solid #e4e7ec;
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.report-form-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--rf-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.report-form-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.report-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-primary);
  background: var(--rf-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.report-form-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.report-form-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
  line-height: 1.4;
}

.report-form-body {
  padding: 20px;
}

/* =========================================================
   FIELD CARDS
   ========================================================= */

.report-field-card {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px;
  background: #fbfcfe;
  border: 1px solid #edf0f4;
  border-radius: 13px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.report-field-card:hover {
  transform: translateY(-1px);
  border-color: #dce7f1;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.045);
}

.report-field-card-primary {
  background: linear-gradient(135deg, #fbfdff, #f7fbff);
  border-color: #dbeafe;
}

.report-field-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-primary);
  background: var(--rf-primary-soft);
  border-radius: 11px;
  font-size: 14px;
}

.report-field-icon-date {
  color: var(--rf-orange);
  background: var(--rf-orange-soft);
}

.report-field-icon-notes {
  color: var(--rf-purple);
  background: var(--rf-purple-soft);
}

.report-field-content {
  width: 100%;
  min-width: 0;
}

.report-form-theme .form-label {
  margin-bottom: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.report-form-theme .form-control {
  min-height: 42px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.report-form-theme textarea.form-control {
  min-height: auto;
  resize: vertical;
}

.report-form-theme .form-control:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.report-form-theme .form-control::placeholder {
  color: #a1a9b5;
}

.report-field-content small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #8a94a3;
  font-size: 11px;
}

.report-field-content small i {
  color: var(--rf-primary);
}

/* =========================================================
   FOOTER
   ========================================================= */

.report-form-theme .unit-footer {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.report-footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-footer-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-primary);
  background: var(--rf-primary-soft);
  border-radius: 10px;
  font-size: 12px;
}

.report-form-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
  line-height: 1.5;
}

.report-form-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .report-form-theme .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .report-form-theme {
    padding: 18px;
  }

  .report-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-form-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .report-form-theme {
    padding: 14px;
  }

  .report-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .report-heading-content {
    align-items: flex-start;
  }

  .report-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .report-heading-box h2 {
    font-size: 22px;
  }

  .report-form-theme .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .report-form-body {
    padding: 15px;
  }

  .report-form-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-form-theme .unit-actions {
    width: 100%;
  }

  .report-form-theme .unit-actions .unit-btn {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .report-form-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .report-form-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .report-field-card {
    align-items: stretch;
    flex-direction: column;
  }

  .report-field-icon {
    width: 36px;
    height: 36px;
  }

  .report-form-theme .unit-actions {
    flex-direction: column;
  }

  .report-form-theme .unit-actions .unit-btn {
    width: 100%;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .report-form-theme *,
  .report-form-theme *::before,
  .report-form-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}




/* =========================================================
   InventoryProductList.css
   Professional Inventory Product UI
   ========================================================= */

.inventory-product-theme {
  --inv-primary: #005baa;
  --inv-primary-dark: #00467f;
  --inv-primary-soft: #eaf4ff;

  --inv-text: #172033;
  --inv-muted: #6b7280;
  --inv-border: #e5eaf0;
  --inv-bg: #f6f8fb;

  --inv-blue: #2563eb;
  --inv-blue-soft: #eff6ff;

  --inv-green: #16a34a;
  --inv-green-dark: #15803d;
  --inv-green-soft: #f0fdf4;

  --inv-red: #dc2626;
  --inv-red-soft: #fef2f2;

  --inv-orange: #ea580c;
  --inv-orange-soft: #fff7ed;

  --inv-purple: #7c3aed;
  --inv-purple-soft: #f5f3ff;

  --inv-cyan: #0891b2;
  --inv-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--inv-text);
  background: var(--inv-bg);
}

/* =========================================================
   TOP HEADING
   ========================================================= */

.inventory-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.inventory-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--inv-primary);
}

.inventory-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.inventory-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.inventory-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--inv-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.inventory-product-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--inv-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.inventory-heading-box h2 {
  margin: 0 0 5px;
  color: var(--inv-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.inventory-heading-box p {
  max-width: 720px;
  margin: 0;
  color: var(--inv-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.inventory-product-theme .unit-header-actions,
.inventory-product-theme .unit-toolbar-actions,
.inventory-product-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.inventory-product-theme .unit-header-actions,
.inventory-product-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.inventory-product-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.inventory-product-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.inventory-product-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.inventory-product-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.inventory-product-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--inv-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.inventory-product-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--inv-primary), #1675c8) !important;
  border: 1px solid var(--inv-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.inventory-product-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--inv-primary-dark),
    var(--inv-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

/* =========================================================
   KPI CARDS
   ========================================================= */

.inventory-product-theme .unit-top-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.inventory-product-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--inv-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.inventory-product-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.inventory-product-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.inventory-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inventory-stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inventory-product-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.inventory-product-theme .unit-stat-card strong {
  display: block;
  max-width: 100%;
  color: var(--inv-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.inventory-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.inventory-product-theme .unit-stat-card:hover .inventory-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.inventory-stat-blue {
  color: var(--inv-blue);
  border-color: #dbeafe !important;
}

.inventory-stat-blue .inventory-stat-icon {
  background: var(--inv-blue-soft);
}

.inventory-stat-green {
  color: var(--inv-green);
  border-color: #bbf7d0 !important;
}

.inventory-stat-green .inventory-stat-icon {
  background: var(--inv-green-soft);
}

.inventory-stat-red {
  color: var(--inv-red);
  border-color: #fecaca !important;
}

.inventory-stat-red .inventory-stat-icon {
  background: var(--inv-red-soft);
}

.inventory-stat-orange {
  color: var(--inv-orange);
  border-color: #fed7aa !important;
}

.inventory-stat-orange .inventory-stat-icon {
  background: var(--inv-orange-soft);
}

.inventory-stat-purple {
  color: var(--inv-purple);
  border-color: #e9d5ff !important;
}

.inventory-stat-purple .inventory-stat-icon {
  background: var(--inv-purple-soft);
}

/* =========================================================
   MAIN CARD / TOOLBAR
   ========================================================= */

.inventory-product-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--inv-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.inventory-product-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.inventory-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
}

.inventory-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.inventory-product-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.inventory-product-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================
   SEARCH + FILTERS
   ========================================================= */

.inventory-product-theme .unit-search {
  width: min(340px, 100%);
}

.inventory-product-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.inventory-product-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.inventory-product-theme .unit-search:focus-within .input-group-text,
.inventory-product-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.inventory-product-theme .unit-search:focus-within .input-group-text {
  color: var(--inv-primary);
}

.inventory-product-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.inventory-product-theme .unit-clear-btn:hover {
  color: var(--inv-red) !important;
  background: #fff7f7 !important;
}

.inventory-product-theme .unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

.inventory-product-theme .unit-page-size:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08) !important;
}

/* =========================================================
   TABLE
   ========================================================= */

.inventory-product-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.inventory-product-theme .product-inventory-table {
  width: 100%;
  min-width: 1750px;
  margin: 0;
  vertical-align: middle;
}

.inventory-product-theme .unit-table thead th {
  padding: 12px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-product-theme .unit-table tbody td {
  padding: 13px 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 12px;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.inventory-product-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.inventory-product-theme .unit-table tbody tr:last-child td {
  border-bottom: 0;
}

.inventory-product-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.inventory-product-theme .unit-letter {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.inventory-product-theme .product-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inventory-product-theme .product-text strong {
  max-width: 205px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-product-theme .product-text small {
  max-width: 205px;
  overflow: hidden;
  color: #8a94a3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-product-theme .unit-id {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 7px;
  color: #475467;
  background: #f2f4f7;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.inventory-product-theme .col-price {
  color: #1f2937;
  font-weight: 800;
  white-space: nowrap;
}

.inventory-product-theme .col-spec {
  min-width: 235px;
}

.inventory-product-theme .col-serial,
.inventory-product-theme .col-model {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   STATUS + WARRANTY BADGES
   ========================================================= */

.inventory-product-theme .unit-status,
.inventory-product-theme .unit-warranty {
  min-height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-product-theme .unit-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border-color: #abefc6 !important;
}

.inventory-product-theme .unit-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border-color: #fecdca !important;
}

.inventory-product-theme .unit-warranty-active {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border-color: #b2ddff !important;
}

.inventory-product-theme .unit-warranty-expired {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border-color: #fecdca !important;
}

.inventory-product-theme .unit-warranty-none {
  color: #667085 !important;
  background: #f2f4f7 !important;
  border-color: #eaecf0 !important;
}

/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.inventory-product-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.inventory-product-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.inventory-product-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.inventory-product-theme .unit-edit {
  color: var(--inv-primary) !important;
  background: var(--inv-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.inventory-product-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--inv-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.inventory-product-theme .unit-delete {
  color: var(--inv-red) !important;
  background: var(--inv-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.inventory-product-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--inv-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

.inventory-product-theme .product-history .unit-btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

/* =========================================================
   LOADER / EMPTY
   ========================================================= */

.inventory-product-theme .unit-loader,
.inventory-product-theme .unit-empty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inventory-product-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.inventory-product-theme .unit-loader .spinner-border {
  color: var(--inv-primary);
}

.inventory-product-theme .unit-loader p {
  margin: 0;
  font-size: 13px;
}

.inventory-product-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.inventory-product-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.inventory-product-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.inventory-product-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* =========================================================
   FOOTER / PAGINATION
   ========================================================= */

.inventory-product-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.inventory-product-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.inventory-product-theme .unit-count-text strong {
  color: #344054;
}

.inventory-product-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.inventory-product-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.inventory-product-theme .unit-pagination .page-link:hover {
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border-color: #bdd9f2;
  transform: translateY(-1px);
}

.inventory-product-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--inv-primary);
  border-color: var(--inv-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* =========================================================
   MODAL
   ========================================================= */

.admin-teal-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.admin-teal-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.admin-teal-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
}

.admin-teal-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 800;
}

.admin-teal-modal .modal-title::before {
  content: "\f466";
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--inv-primary);
  background: var(--inv-primary-soft);
  border-radius: 11px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.admin-teal-modal .modal-body {
  padding: 20px;
  background: #ffffff;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-teal-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.admin-teal-modal .form-control,
.admin-teal-modal .form-select {
  min-height: 40px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.admin-teal-modal textarea.form-control {
  min-height: auto;
}

.admin-teal-modal .form-control:focus,
.admin-teal-modal .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.admin-teal-modal .unit-selected-box {
  margin-bottom: 15px;
  padding: 12px 14px;
  color: #344054;
  background: linear-gradient(135deg, #f7fbff, #fbfdff);
  border: 1px solid #dbeafe;
  border-radius: 11px;
  font-size: 12px;
}

.admin-teal-modal .unit-sku-note {
  margin-top: 3px;
  color: #7b8493;
  font-size: 11px;
}

.admin-teal-modal .unit-serial-count {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-left: 6px;
  padding: 2px 7px;
  color: var(--inv-purple);
  background: var(--inv-purple-soft);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.admin-teal-modal .unit-accessory-wrap {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 11px;
}

.admin-teal-modal .unit-accessory-wrap .form-check {
  margin: 0;
}

.admin-teal-modal .unit-accessory-wrap .form-check-input:checked {
  background-color: var(--inv-primary);
  border-color: var(--inv-primary);
}

.admin-teal-modal .unit-accessory-wrap .form-check-label {
  color: #475467;
  font-size: 11px;
  font-weight: 600;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1500px) {
  .inventory-product-theme .unit-top-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-product-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-product-theme .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .inventory-product-theme {
    padding: 18px;
  }

  .inventory-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-product-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .inventory-product-theme .unit-search {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .inventory-product-theme {
    padding: 14px;
  }

  .inventory-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .inventory-heading-content {
    align-items: flex-start;
  }

  .inventory-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .inventory-heading-box h2 {
    font-size: 22px;
  }

  .inventory-product-theme .unit-top-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .inventory-product-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-product-theme .unit-search {
    grid-column: 1 / -1;
  }

  .inventory-product-theme .unit-page-size,
  .inventory-product-theme .unit-toolbar-actions .unit-btn {
    width: 100%;
  }

  .inventory-product-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .inventory-product-theme .unit-top-stats {
    grid-template-columns: 1fr;
  }

  .inventory-product-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .inventory-product-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .inventory-product-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .inventory-product-theme .unit-search {
    grid-column: auto;
  }

  .inventory-section-title {
    align-items: flex-start;
  }

  .admin-teal-modal .unit-accessory-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .inventory-product-theme *,
  .inventory-product-theme *::before,
  .inventory-product-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}



/* =========================================================
   AllocationPage.css
   Professional Inventory Allocation UI
   ========================================================= */

.inventory-allocation-theme {
  --al-primary: #005baa;
  --al-primary-dark: #00467f;
  --al-primary-soft: #eaf4ff;

  --al-text: #172033;
  --al-muted: #6b7280;
  --al-border: #e5eaf0;
  --al-bg: #f6f8fb;

  --al-blue: #2563eb;
  --al-blue-soft: #eff6ff;

  --al-purple: #7c3aed;
  --al-purple-soft: #f5f3ff;

  --al-orange: #ea580c;
  --al-orange-soft: #fff7ed;

  --al-green: #16a34a;
  --al-green-dark: #15803d;
  --al-green-soft: #f0fdf4;

  --al-red: #dc2626;
  --al-red-dark: #b91c1c;
  --al-red-soft: #fef2f2;

  --al-cyan: #0891b2;
  --al-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--al-text);
  background: var(--al-bg);
}

/* =========================================================
   TOP HEADING
   ========================================================= */

.allocation-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.allocation-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--al-primary);
}

.allocation-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.allocation-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.allocation-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--al-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.inventory-allocation-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--al-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.allocation-heading-box h2 {
  margin: 0 0 5px;
  color: var(--al-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.allocation-heading-box p {
  margin: 0;
  color: var(--al-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.inventory-allocation-theme .unit-header-actions,
.inventory-allocation-theme .unit-toolbar-actions,
.inventory-allocation-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.inventory-allocation-theme .unit-header-actions,
.inventory-allocation-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.inventory-allocation-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.inventory-allocation-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.inventory-allocation-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.inventory-allocation-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.inventory-allocation-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--al-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.inventory-allocation-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--al-primary), #1675c8) !important;
  border: 1px solid var(--al-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.inventory-allocation-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--al-primary-dark),
    var(--al-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

/* =========================================================
   KPI CARDS
   ========================================================= */

.inventory-allocation-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.inventory-allocation-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--al-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.inventory-allocation-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.inventory-allocation-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.allocation-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.allocation-stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inventory-allocation-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.inventory-allocation-theme .unit-stat-card strong {
  color: var(--al-text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.allocation-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.inventory-allocation-theme .unit-stat-card:hover .allocation-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.allocation-stat-blue {
  color: var(--al-blue);
  border-color: #dbeafe !important;
}

.allocation-stat-blue .allocation-stat-icon {
  background: var(--al-blue-soft);
}

.allocation-stat-purple {
  color: var(--al-purple);
  border-color: #e9d5ff !important;
}

.allocation-stat-purple .allocation-stat-icon {
  background: var(--al-purple-soft);
}

.allocation-stat-orange {
  color: var(--al-orange);
  border-color: #fed7aa !important;
}

.allocation-stat-orange .allocation-stat-icon {
  background: var(--al-orange-soft);
}

.allocation-stat-green {
  color: var(--al-green);
  border-color: #bbf7d0 !important;
}

.allocation-stat-green .allocation-stat-icon {
  background: var(--al-green-soft);
}

.allocation-stat-red {
  color: var(--al-red);
  border-color: #fecaca !important;
}

.allocation-stat-red .allocation-stat-icon {
  background: var(--al-red-soft);
}

/* =========================================================
   MAIN CARD / TOOLBAR
   ========================================================= */

.inventory-allocation-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--al-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.inventory-allocation-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.allocation-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.allocation-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.inventory-allocation-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.inventory-allocation-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* =========================================================
   SEARCH / FILTERS
   ========================================================= */

.inventory-allocation-theme .unit-search {
  width: min(340px, 100%);
}

.inventory-allocation-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.inventory-allocation-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.inventory-allocation-theme .unit-search:focus-within .input-group-text,
.inventory-allocation-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.inventory-allocation-theme .unit-search:focus-within .input-group-text {
  color: var(--al-primary);
}

.inventory-allocation-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.inventory-allocation-theme .unit-clear-btn:hover {
  color: var(--al-red) !important;
  background: #fff7f7 !important;
}

.inventory-allocation-theme .unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

.inventory-allocation-theme .unit-page-size:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08) !important;
}

/* =========================================================
   TABLE
   ========================================================= */

.inventory-allocation-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.inventory-allocation-theme .unit-table {
  width: 100%;
  min-width: 1380px;
  margin: 0;
  vertical-align: middle;
}

.inventory-allocation-theme .unit-table thead th {
  padding: 12px 13px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-allocation-theme .unit-table tbody td {
  padding: 13px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 12px;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.inventory-allocation-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.inventory-allocation-theme .unit-table tbody tr:last-child td {
  border-bottom: 0;
}

.inventory-allocation-theme .unit-id {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 7px;
  color: #475467;
  background: #f2f4f7;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.inventory-allocation-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 270px;
}

.inventory-allocation-theme .unit-letter {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.inventory-allocation-theme .unit-name-box strong {
  display: block;
  max-width: 320px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-allocation-theme .unit-name-box small {
  display: block;
  max-width: 360px;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 10px;
  line-height: 1.4;
}

/* =========================================================
   BADGES
   ========================================================= */

.inventory-allocation-theme .unit-status {
  min-height: 26px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.alloc-status-allocated {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border-color: #b2ddff !important;
}

.alloc-status-returned {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border-color: #abefc6 !important;
}

.alloc-status-cancelled {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border-color: #fecdca !important;
}

.allocation-unit-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border-color: #d9d6fe !important;
}

.allocation-user-badge {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border-color: #a5f3fc !important;
}

/* =========================================================
   ACTION ICONS
   ========================================================= */

.inventory-allocation-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.inventory-allocation-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.inventory-allocation-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.inventory-allocation-theme .unit-edit {
  color: var(--al-primary) !important;
  background: var(--al-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.inventory-allocation-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--al-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.inventory-allocation-theme .unit-delete {
  color: var(--al-red) !important;
  background: var(--al-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.inventory-allocation-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--al-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.inventory-allocation-theme .unit-loader,
.inventory-allocation-theme .unit-empty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inventory-allocation-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.inventory-allocation-theme .unit-loader .spinner-border {
  color: var(--al-primary);
}

.inventory-allocation-theme .unit-loader p {
  margin: 0;
  font-size: 13px;
}

.inventory-allocation-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.inventory-allocation-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.inventory-allocation-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.inventory-allocation-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* =========================================================
   FOOTER / PAGINATION
   ========================================================= */

.inventory-allocation-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.inventory-allocation-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.inventory-allocation-theme .unit-count-text strong {
  color: #344054;
}

.inventory-allocation-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.inventory-allocation-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.inventory-allocation-theme .unit-pagination .page-link:hover {
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border-color: #bdd9f2;
  transform: translateY(-1px);
}

.inventory-allocation-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--al-primary);
  border-color: var(--al-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* =========================================================
   MODALS
   ========================================================= */

.admin-teal-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.admin-teal-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.admin-teal-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
}

.allocation-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.allocation-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--al-primary);
  background: var(--al-primary-soft);
  border-radius: 13px;
  font-size: 17px;
}

.allocation-modal-icon-edit {
  color: var(--al-purple);
  background: var(--al-purple-soft);
}

.allocation-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.allocation-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-teal-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.admin-teal-modal .form-control,
.admin-teal-modal .form-select {
  min-height: 40px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.admin-teal-modal .form-control:focus,
.admin-teal-modal .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.admin-teal-modal small.text-muted {
  padding: 8px 10px;
  color: #667085 !important;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1450px) {
  .inventory-allocation-theme .unit-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-allocation-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-allocation-theme .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 1050px) {
  .inventory-allocation-theme {
    padding: 18px;
  }

  .allocation-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-allocation-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .inventory-allocation-theme .unit-search {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .inventory-allocation-theme {
    padding: 14px;
  }

  .allocation-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .allocation-heading-content {
    align-items: flex-start;
  }

  .allocation-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .allocation-heading-box h2 {
    font-size: 22px;
  }

  .inventory-allocation-theme .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .inventory-allocation-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-allocation-theme .unit-search {
    grid-column: 1 / -1;
  }

  .inventory-allocation-theme .unit-page-size,
  .inventory-allocation-theme .unit-toolbar-actions .unit-btn {
    width: 100%;
  }

  .inventory-allocation-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .inventory-allocation-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .inventory-allocation-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .inventory-allocation-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .inventory-allocation-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .inventory-allocation-theme .unit-search {
    grid-column: auto;
  }

  .allocation-section-title {
    align-items: flex-start;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .inventory-allocation-theme *,
  .inventory-allocation-theme *::before,
  .inventory-allocation-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}





/* =========================================================
   Category.css
   Professional Category Management UI
   ========================================================= */

.category-mgmt-theme {
  --cat-primary: #005baa;
  --cat-primary-dark: #00467f;
  --cat-primary-soft: #eaf4ff;

  --cat-text: #172033;
  --cat-muted: #6b7280;
  --cat-border: #e5eaf0;
  --cat-bg: #f6f8fb;

  --cat-blue: #2563eb;
  --cat-blue-soft: #eff6ff;

  --cat-purple: #7c3aed;
  --cat-purple-soft: #f5f3ff;

  --cat-green: #16a34a;
  --cat-green-soft: #f0fdf4;

  --cat-red: #dc2626;
  --cat-red-dark: #b91c1c;
  --cat-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--cat-text);
  background: var(--cat-bg);
}

/* ====================== TOP HEADING ====================== */

.category-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.category-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--cat-primary);
}

.category-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.category-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cat-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.category-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--cat-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.category-heading-box h2 {
  margin: 0 0 5px;
  color: var(--cat-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.category-heading-box p {
  margin: 0;
  color: var(--cat-muted);
  font-size: 14px;
}

/* ====================== BUTTONS ====================== */

.category-mgmt-theme .unit-header-actions,
.category-mgmt-theme .unit-toolbar-actions,
.category-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.category-mgmt-theme .unit-header-actions,
.category-mgmt-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.category-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.category-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.category-mgmt-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.category-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.category-mgmt-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--cat-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.category-mgmt-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cat-primary), #1675c8) !important;
  border: 1px solid var(--cat-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.category-mgmt-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--cat-primary-dark),
    var(--cat-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.category-mgmt-theme .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cat-red), #ef4444) !important;
  border-color: var(--cat-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

.category-mgmt-theme .unit-btn-danger:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--cat-red-dark),
    var(--cat-red)
  ) !important;
  box-shadow: 0 8px 17px rgba(220, 38, 38, 0.24);
}

/* ====================== STATS ====================== */

.category-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.category-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--cat-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.category-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.category-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.category-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.category-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.category-mgmt-theme .unit-stat-card strong {
  color: var(--cat-text);
  font-size: 22px;
  font-weight: 800;
}

.category-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.category-mgmt-theme .unit-stat-card:hover .category-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.category-stat-blue {
  color: var(--cat-blue);
  border-color: #dbeafe !important;
}

.category-stat-blue .category-stat-icon {
  background: var(--cat-blue-soft);
}

.category-stat-purple {
  color: var(--cat-purple);
  border-color: #e9d5ff !important;
}

.category-stat-purple .category-stat-icon {
  background: var(--cat-purple-soft);
}

.category-stat-green {
  color: var(--cat-green);
  border-color: #bbf7d0 !important;
}

.category-stat-green .category-stat-icon {
  background: var(--cat-green-soft);
}

/* ====================== MAIN CARD ====================== */

.category-mgmt-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--cat-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.category-mgmt-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.category-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
}

.category-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-primary);
  background: var(--cat-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.category-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.category-mgmt-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== SEARCH / FILTERS ====================== */

.category-mgmt-theme .unit-search {
  width: min(340px, 100%);
}

.category-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.category-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.category-mgmt-theme .unit-search:focus-within .input-group-text,
.category-mgmt-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.category-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.category-mgmt-theme .unit-clear-btn:hover {
  color: var(--cat-red) !important;
  background: #fff7f7 !important;
}

.category-mgmt-theme .unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

.category-unit-filter {
  min-width: 165px !important;
}

/* ====================== TABLE ====================== */

.category-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.category-mgmt-theme .unit-table {
  width: 100%;
  min-width: 820px;
  margin: 0;
  vertical-align: middle;
}

.category-mgmt-theme .unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-mgmt-theme .unit-table tbody td {
  padding: 15px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.category-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.category-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.category-mgmt-theme .sortable:hover {
  color: var(--cat-primary);
  background: #f2f8fd;
}

.category-mgmt-theme .unit-id {
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.category-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
}

.category-mgmt-theme .unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-primary);
  background: var(--cat-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.category-mgmt-theme .unit-name-box strong {
  display: block;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
}

.category-mgmt-theme .unit-name-box small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 11px;
}

.category-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.category-unit-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

/* ====================== ACTIONS ====================== */

.category-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.category-mgmt-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.category-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.category-mgmt-theme .unit-edit {
  color: var(--cat-primary) !important;
  background: var(--cat-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.category-mgmt-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--cat-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.category-mgmt-theme .unit-delete {
  color: var(--cat-red) !important;
  background: var(--cat-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.category-mgmt-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--cat-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

/* ====================== EMPTY / LOADER ====================== */

.category-mgmt-theme .unit-loader,
.category-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.category-mgmt-theme .unit-loader .spinner-border {
  color: var(--cat-primary);
}

.category-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.category-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--cat-primary);
  background: var(--cat-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.category-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.category-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.category-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.category-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.category-mgmt-theme .unit-count-text strong {
  color: #344054;
}

.category-mgmt-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.category-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.category-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--cat-primary);
  border-color: var(--cat-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* ====================== MODALS ====================== */

.admin-teal-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.admin-teal-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.admin-teal-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
}

.category-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-primary);
  background: var(--cat-primary-soft);
  border-radius: 13px;
  font-size: 17px;
}

.category-modal-icon-danger {
  color: var(--cat-red);
  background: var(--cat-red-soft);
}

.category-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.category-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-teal-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.admin-teal-modal .form-control,
.admin-teal-modal .form-select {
  min-height: 40px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.admin-teal-modal textarea.form-control {
  min-height: auto;
}

.admin-teal-modal .form-control:focus,
.admin-teal-modal .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.admin-teal-modal-danger .modal-content {
  border-top: 4px solid var(--cat-red);
}

.unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1200px) {
  .category-mgmt-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .category-mgmt-theme .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .category-mgmt-theme {
    padding: 18px;
  }

  .category-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .category-mgmt-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .category-mgmt-theme .unit-search {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .category-mgmt-theme {
    padding: 14px;
  }

  .category-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .category-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .category-heading-box h2 {
    font-size: 22px;
  }

  .category-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .category-mgmt-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-mgmt-theme .unit-search {
    grid-column: 1 / -1;
  }

  .category-mgmt-theme .unit-page-size,
  .category-mgmt-theme .unit-toolbar-actions .unit-btn {
    width: 100%;
  }

  .category-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .category-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .category-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .category-mgmt-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .category-mgmt-theme .unit-search {
    grid-column: auto;
  }

  .category-section-title {
    align-items: flex-start;
  }
}

/* ====================== REDUCED MOTION ====================== */

@media (prefers-reduced-motion: reduce) {
  .category-mgmt-theme *,
  .category-mgmt-theme *::before,
  .category-mgmt-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}



/* =========================================================
   SubCategory.css
   Professional SubCategory Management UI
   ========================================================= */

.subcategory-mgmt-theme {
  --sub-primary: #005baa;
  --sub-primary-dark: #00467f;
  --sub-primary-soft: #eaf4ff;

  --sub-text: #172033;
  --sub-muted: #6b7280;
  --sub-border: #e5eaf0;
  --sub-bg: #f6f8fb;

  --sub-blue: #2563eb;
  --sub-blue-soft: #eff6ff;

  --sub-purple: #7c3aed;
  --sub-purple-soft: #f5f3ff;

  --sub-green: #16a34a;
  --sub-green-soft: #f0fdf4;

  --sub-orange: #ea580c;
  --sub-orange-soft: #fff7ed;

  --sub-cyan: #0891b2;
  --sub-cyan-soft: #ecfeff;

  --sub-red: #dc2626;
  --sub-red-dark: #b91c1c;
  --sub-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--sub-text);
  background: var(--sub-bg);
}

/* ====================== TOP HEADING ====================== */

.subcategory-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.subcategory-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--sub-primary);
}

.subcategory-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.subcategory-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.subcategory-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--sub-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.subcategory-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--sub-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.subcategory-heading-box h2 {
  margin: 0 0 5px;
  color: var(--sub-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.subcategory-heading-box p {
  max-width: 720px;
  margin: 0;
  color: var(--sub-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.subcategory-mgmt-theme .unit-header-actions,
.subcategory-mgmt-theme .unit-toolbar-actions,
.subcategory-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.subcategory-mgmt-theme .unit-header-actions,
.subcategory-mgmt-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.subcategory-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.subcategory-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.subcategory-mgmt-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.subcategory-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.subcategory-mgmt-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--sub-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.subcategory-mgmt-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--sub-primary), #1675c8) !important;
  border: 1px solid var(--sub-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.subcategory-mgmt-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--sub-primary-dark),
    var(--sub-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.subcategory-mgmt-theme .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--sub-red), #ef4444) !important;
  border-color: var(--sub-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

.subcategory-mgmt-theme .unit-btn-danger:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--sub-red-dark),
    var(--sub-red)
  ) !important;
  box-shadow: 0 8px 17px rgba(220, 38, 38, 0.24);
}

/* ====================== STATS ====================== */

.subcategory-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.subcategory-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--sub-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.subcategory-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.subcategory-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.subcategory-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subcategory-stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subcategory-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.subcategory-mgmt-theme .unit-stat-card strong {
  color: var(--sub-text);
  font-size: 22px;
  font-weight: 800;
}

.subcategory-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.subcategory-mgmt-theme .unit-stat-card:hover .subcategory-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.subcategory-stat-blue {
  color: var(--sub-blue);
  border-color: #dbeafe !important;
}
.subcategory-stat-blue .subcategory-stat-icon {
  background: var(--sub-blue-soft);
}

.subcategory-stat-purple {
  color: var(--sub-purple);
  border-color: #e9d5ff !important;
}
.subcategory-stat-purple .subcategory-stat-icon {
  background: var(--sub-purple-soft);
}

.subcategory-stat-green {
  color: var(--sub-green);
  border-color: #bbf7d0 !important;
}
.subcategory-stat-green .subcategory-stat-icon {
  background: var(--sub-green-soft);
}

/* ====================== MAIN CARD ====================== */

.subcategory-mgmt-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--sub-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.subcategory-mgmt-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.subcategory-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.subcategory-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-primary);
  background: var(--sub-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.subcategory-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.subcategory-mgmt-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FILTERS ====================== */

.subcategory-mgmt-theme .unit-search {
  width: min(320px, 100%);
}

.subcategory-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.subcategory-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.subcategory-mgmt-theme .unit-search:focus-within .input-group-text,
.subcategory-mgmt-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.subcategory-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.subcategory-mgmt-theme .unit-clear-btn:hover {
  color: var(--sub-red) !important;
  background: #fff7f7 !important;
}

.subcategory-mgmt-theme .unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

.subcategory-unit-filter,
.subcategory-category-filter {
  min-width: 155px !important;
}

/* ====================== TABLE ====================== */

.subcategory-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.subcategory-mgmt-theme .unit-table {
  width: 100%;
  min-width: 980px;
  margin: 0;
  vertical-align: middle;
}

.subcategory-mgmt-theme .unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.subcategory-mgmt-theme .unit-table tbody td {
  padding: 15px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.subcategory-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.subcategory-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.subcategory-mgmt-theme .sortable:hover {
  color: var(--sub-primary);
  background: #f2f8fd;
}

.subcategory-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
}

.subcategory-mgmt-theme .unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-primary);
  background: var(--sub-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.subcategory-mgmt-theme .unit-name-box strong {
  display: block;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
}

.subcategory-mgmt-theme .unit-name-box small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 11px;
}

.subcategory-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.subcategory-category-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.subcategory-staff-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 280px;
}

.subcategory-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  color: #0e7490;
  background: var(--sub-cyan-soft);
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.subcategory-tat-chip {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89;
}

/* ====================== ACTIONS ====================== */

.subcategory-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.subcategory-mgmt-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.subcategory-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.subcategory-mgmt-theme .unit-edit {
  color: var(--sub-primary) !important;
  background: var(--sub-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.subcategory-mgmt-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--sub-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.subcategory-mgmt-theme .unit-delete {
  color: var(--sub-red) !important;
  background: var(--sub-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.subcategory-mgmt-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--sub-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

/* ====================== LOADER / EMPTY ====================== */

.subcategory-mgmt-theme .unit-loader,
.subcategory-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.subcategory-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.subcategory-mgmt-theme .unit-loader .spinner-border {
  color: var(--sub-primary);
}

.subcategory-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.subcategory-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--sub-primary);
  background: var(--sub-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.subcategory-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.subcategory-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.subcategory-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.subcategory-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.subcategory-mgmt-theme .unit-count-text strong {
  color: #344054;
}

.subcategory-mgmt-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.subcategory-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.subcategory-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--sub-primary);
  border-color: var(--sub-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* ====================== MODALS ====================== */

.admin-teal-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.admin-teal-modal .modal-content {
  overflow: visible;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.admin-teal-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
  border-radius: 18px 18px 0 0;
}

.subcategory-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subcategory-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sub-primary);
  background: var(--sub-primary-soft);
  border-radius: 13px;
  font-size: 17px;
}

.subcategory-modal-icon-danger {
  color: var(--sub-red);
  background: var(--sub-red-soft);
}

.subcategory-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.subcategory-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
  border-radius: 0 0 18px 18px;
}

.admin-teal-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.admin-teal-modal .form-control,
.admin-teal-modal .form-select {
  min-height: 40px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.admin-teal-modal textarea.form-control {
  min-height: auto;
}

.admin-teal-modal .form-control:focus,
.admin-teal-modal .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

/* React Select */
.admin-teal-modal .subcategory-react-select {
  font-size: 12px;
}

.admin-teal-modal .subcategory-select__control {
  min-height: 42px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-teal-modal .subcategory-select__control:hover {
  border-color: #b8cfe5;
}

.admin-teal-modal .subcategory-select__control--is-focused {
  border-color: #a9cae8 !important;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08) !important;
}

.admin-teal-modal .subcategory-select__multi-value {
  background: var(--sub-primary-soft);
  border-radius: 7px;
}

.admin-teal-modal .subcategory-select__multi-value__label {
  color: var(--sub-primary-dark);
  font-size: 10px;
  font-weight: 700;
}

.admin-teal-modal .subcategory-select__multi-value__remove {
  color: var(--sub-primary);
  border-radius: 0 7px 7px 0;
}

.admin-teal-modal .subcategory-select__multi-value__remove:hover {
  color: #ffffff;
  background: var(--sub-red);
}

.admin-teal-modal .subcategory-select__menu {
  z-index: 20;
  overflow: hidden;
  border: 1px solid #e5eaf0;
  border-radius: 10px;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.12);
}

.admin-teal-modal .subcategory-select__option {
  padding: 9px 11px;
  font-size: 11px;
}

.admin-teal-modal .subcategory-select__option--is-focused {
  background: #f3f8fd;
}

.admin-teal-modal .subcategory-select__option--is-selected {
  color: #ffffff;
  background: var(--sub-primary);
}

.admin-teal-modal-danger .modal-content {
  border-top: 4px solid var(--sub-red);
}

.unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1280px) {
  .subcategory-mgmt-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .subcategory-mgmt-theme .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .subcategory-mgmt-theme {
    padding: 18px;
  }

  .subcategory-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .subcategory-mgmt-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .subcategory-mgmt-theme .unit-search {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .subcategory-mgmt-theme {
    padding: 14px;
  }

  .subcategory-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .subcategory-heading-content {
    align-items: flex-start;
  }

  .subcategory-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .subcategory-heading-box h2 {
    font-size: 22px;
  }

  .subcategory-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .subcategory-mgmt-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subcategory-mgmt-theme .unit-search {
    grid-column: 1 / -1;
  }

  .subcategory-mgmt-theme .unit-page-size,
  .subcategory-mgmt-theme .unit-toolbar-actions .unit-btn {
    width: 100%;
  }

  .subcategory-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .subcategory-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .subcategory-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .subcategory-mgmt-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .subcategory-mgmt-theme .unit-search {
    grid-column: auto;
  }

  .subcategory-section-title {
    align-items: flex-start;
  }
}

/* ====================== REDUCED MOTION ====================== */

@media (prefers-reduced-motion: reduce) {
  .subcategory-mgmt-theme *,
  .subcategory-mgmt-theme *::before,
  .subcategory-mgmt-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}





/* =========================================================
   AdminUnitPage.css
   Professional Unit Management UI
   ========================================================= */

.unit-mgmt-theme {
  --um-primary: #005baa;
  --um-primary-dark: #00467f;
  --um-primary-soft: #eaf4ff;

  --um-text: #172033;
  --um-muted: #6b7280;
  --um-border: #e5eaf0;
  --um-bg: #f6f8fb;

  --um-blue: #2563eb;
  --um-blue-soft: #eff6ff;

  --um-purple: #7c3aed;
  --um-purple-soft: #f5f3ff;

  --um-green: #16a34a;
  --um-green-soft: #f0fdf4;

  --um-red: #dc2626;
  --um-red-dark: #b91c1c;
  --um-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--um-text);
  background: var(--um-bg);
}

/* ====================== TOP HEADING ====================== */

.admin-unit-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.admin-unit-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--um-primary);
}

.admin-unit-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.admin-unit-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-unit-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--um-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.unit-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--um-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.admin-unit-heading-box h2 {
  margin: 0 0 5px;
  color: var(--um-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.admin-unit-heading-box p {
  margin: 0;
  color: var(--um-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== ALERT ====================== */

.unit-mgmt-theme .unit-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.055);
  font-size: 13px;
  font-weight: 700;
}

/* ====================== BUTTONS ====================== */

.unit-mgmt-theme .unit-header-actions,
.unit-mgmt-theme .unit-toolbar-actions,
.unit-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.unit-mgmt-theme .unit-header-actions,
.unit-mgmt-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.unit-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.unit-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.unit-mgmt-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.unit-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.unit-mgmt-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--um-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.unit-mgmt-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--um-primary), #1675c8) !important;
  border: 1px solid var(--um-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.unit-mgmt-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--um-primary-dark),
    var(--um-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.unit-mgmt-theme .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--um-red), #ef4444) !important;
  border-color: var(--um-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

/* ====================== KPI CARDS ====================== */

.unit-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.unit-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--um-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.unit-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.unit-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.admin-unit-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.unit-mgmt-theme .unit-stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unit-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.unit-mgmt-theme .unit-stat-card strong {
  color: var(--um-text);
  font-size: 22px;
  font-weight: 800;
}

.unit-mgmt-theme .unit-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.unit-mgmt-theme .unit-stat-card:hover .unit-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.admin-unit-stat-blue {
  color: var(--um-blue);
  border-color: #dbeafe !important;
}
.admin-unit-stat-blue .unit-stat-icon {
  background: var(--um-blue-soft);
}

.admin-unit-stat-purple {
  color: var(--um-purple);
  border-color: #e9d5ff !important;
}
.admin-unit-stat-purple .unit-stat-icon {
  background: var(--um-purple-soft);
}

.admin-unit-stat-green {
  color: var(--um-green);
  border-color: #bbf7d0 !important;
}
.admin-unit-stat-green .unit-stat-icon {
  background: var(--um-green-soft);
}

/* ====================== MAIN CARD ====================== */

.unit-mgmt-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--um-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.unit-mgmt-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.admin-unit-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.admin-unit-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--um-primary);
  background: var(--um-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.unit-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.unit-mgmt-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== SEARCH ====================== */

.unit-mgmt-theme .unit-search {
  width: min(340px, 100%);
}

.unit-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.unit-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.unit-mgmt-theme .unit-search:focus-within .input-group-text,
.unit-mgmt-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.unit-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.unit-mgmt-theme .unit-clear-btn:hover {
  color: var(--um-red) !important;
  background: #fff7f7 !important;
}

.unit-mgmt-theme .unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

/* ====================== TABLE ====================== */

.unit-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.unit-mgmt-theme .unit-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  vertical-align: middle;
}

.unit-mgmt-theme .unit-table thead th {
  padding: 13px 16px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.unit-mgmt-theme .unit-table tbody td {
  padding: 15px 16px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.unit-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.unit-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.unit-mgmt-theme .sortable:hover {
  color: var(--um-primary);
  background: #f2f8fd;
}

.unit-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
}

.unit-mgmt-theme .unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--um-primary);
  background: var(--um-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.unit-mgmt-theme .unit-name-box strong {
  display: block;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
}

.unit-mgmt-theme .unit-name-box small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 11px;
}

.unit-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.admin-unit-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* ====================== ACTIONS ====================== */

.unit-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.unit-mgmt-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.unit-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.unit-mgmt-theme .unit-edit {
  color: var(--um-primary) !important;
  background: var(--um-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.unit-mgmt-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--um-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.unit-mgmt-theme .unit-delete {
  color: var(--um-red) !important;
  background: var(--um-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.unit-mgmt-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--um-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

/* ====================== LOADER / EMPTY ====================== */

.unit-mgmt-theme .unit-loader,
.unit-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.unit-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.unit-mgmt-theme .unit-loader .spinner-border {
  color: var(--um-primary);
}

.unit-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.unit-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--um-primary);
  background: var(--um-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.unit-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.unit-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.unit-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.unit-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.unit-mgmt-theme .unit-count-text strong {
  color: #344054;
}

.unit-mgmt-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.unit-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.unit-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--um-primary);
  border-color: var(--um-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* ====================== UNIQUE MODALS ====================== */

.admin-unit-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.admin-unit-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.admin-unit-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
}

.admin-unit-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-unit-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.admin-unit-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.admin-unit-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.admin-unit-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.admin-unit-modal .modal-body {
  padding: 20px;
}

.admin-unit-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-unit-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.admin-unit-modal .form-control {
  min-height: 42px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.admin-unit-modal .form-control:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.admin-unit-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.admin-modal-danger-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 24px;
}

.unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 992px) {
  .unit-mgmt-theme {
    padding: 18px;
  }

  .admin-unit-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-mgmt-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .unit-mgmt-theme {
    padding: 14px;
  }

  .admin-unit-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .admin-unit-heading-content {
    align-items: flex-start;
  }

  .admin-unit-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .admin-unit-heading-box h2 {
    font-size: 22px;
  }

  .unit-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .unit-mgmt-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-mgmt-theme .unit-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 130px;
  }

  .unit-mgmt-theme .unit-search {
    width: 100%;
  }

  .unit-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .unit-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .unit-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .unit-mgmt-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .unit-mgmt-theme .unit-page-size {
    width: 100%;
  }

  .admin-unit-section-title {
    align-items: flex-start;
  }
}

/* ====================== REDUCED MOTION ====================== */

@media (prefers-reduced-motion: reduce) {
  .unit-mgmt-theme *,
  .unit-mgmt-theme *::before,
  .unit-mgmt-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}



.unit-mgmt-theme .table-responsive {
  margin-bottom: 0;
}

.unit-mgmt-theme button:focus-visible,
.unit-mgmt-theme input:focus-visible,
.unit-mgmt-theme select:focus-visible {
  outline: 2px solid rgba(0, 91, 170, 0.28);
  outline-offset: 2px;
}





/* =========================================================
   AdminCompanyPage.css
   Professional Company Management UI
   ========================================================= */

.company-mgmt-theme {
  --cmp-primary: #005baa;
  --cmp-primary-dark: #00467f;
  --cmp-primary-soft: #eaf4ff;

  --cmp-text: #172033;
  --cmp-muted: #6b7280;
  --cmp-border: #e5eaf0;
  --cmp-bg: #f6f8fb;

  --cmp-blue: #2563eb;
  --cmp-blue-soft: #eff6ff;

  --cmp-purple: #7c3aed;
  --cmp-purple-soft: #f5f3ff;

  --cmp-green: #16a34a;
  --cmp-green-soft: #f0fdf4;

  --cmp-red: #dc2626;
  --cmp-red-dark: #b91c1c;
  --cmp-red-soft: #fef2f2;

  --cmp-cyan: #0891b2;
  --cmp-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--cmp-text);
  background: var(--cmp-bg);
}

/* ====================== TOP HEADING ====================== */

.company-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.company-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--cmp-primary);
}

.company-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.company-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.company-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cmp-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.company-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--cmp-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.company-heading-box h2 {
  margin: 0 0 5px;
  color: var(--cmp-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.company-heading-box p {
  margin: 0;
  color: var(--cmp-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== ALERT ====================== */

.company-mgmt-theme .unit-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.055);
  font-size: 13px;
  font-weight: 700;
}

/* ====================== BUTTONS ====================== */

.company-mgmt-theme .unit-header-actions,
.company-mgmt-theme .unit-toolbar-actions,
.company-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-mgmt-theme .unit-header-actions,
.company-mgmt-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.company-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.company-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.company-mgmt-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.company-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.company-mgmt-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--cmp-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.company-mgmt-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cmp-primary), #1675c8) !important;
  border: 1px solid var(--cmp-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.company-mgmt-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--cmp-primary-dark),
    var(--cmp-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.company-mgmt-theme .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cmp-red), #ef4444) !important;
  border-color: var(--cmp-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

/* ====================== KPI CARDS ====================== */

.company-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.company-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--cmp-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.company-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.company-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.company-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.company-stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.company-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.company-mgmt-theme .unit-stat-card strong {
  color: var(--cmp-text);
  font-size: 22px;
  font-weight: 800;
}

.company-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.company-mgmt-theme .unit-stat-card:hover .company-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.company-stat-blue {
  color: var(--cmp-blue);
  border-color: #dbeafe !important;
}
.company-stat-blue .company-stat-icon {
  background: var(--cmp-blue-soft);
}

.company-stat-purple {
  color: var(--cmp-purple);
  border-color: #e9d5ff !important;
}
.company-stat-purple .company-stat-icon {
  background: var(--cmp-purple-soft);
}

.company-stat-green {
  color: var(--cmp-green);
  border-color: #bbf7d0 !important;
}
.company-stat-green .company-stat-icon {
  background: var(--cmp-green-soft);
}

/* ====================== MAIN CARD ====================== */

.company-mgmt-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--cmp-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.company-mgmt-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.company-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
}

.company-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cmp-primary);
  background: var(--cmp-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.company-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.company-mgmt-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== SEARCH ====================== */

.company-mgmt-theme .unit-search {
  width: min(340px, 100%);
}

.company-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.company-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.company-mgmt-theme .unit-search:focus-within .input-group-text,
.company-mgmt-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.company-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.company-mgmt-theme .unit-clear-btn:hover {
  color: var(--cmp-red) !important;
  background: #fff7f7 !important;
}

.company-mgmt-theme .unit-page-size {
  width: auto;
  min-width: 120px;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

/* ====================== TABLE ====================== */

.company-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.company-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1050px;
  margin: 0;
  vertical-align: middle;
}

.company-mgmt-theme .unit-table thead th {
  padding: 13px 15px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.company-mgmt-theme .unit-table tbody td {
  padding: 15px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 12px;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.company-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.company-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.company-mgmt-theme .sortable:hover {
  color: var(--cmp-primary);
  background: #f2f8fd;
}

.company-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 210px;
}

.company-mgmt-theme .unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cmp-primary);
  background: var(--cmp-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.company-mgmt-theme .unit-name-box strong {
  display: block;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
}

.company-mgmt-theme .unit-name-box small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 11px;
}

.company-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.company-contact-phone {
  color: #0e7490;
  background: #ecfeff;
}

.company-contact-email {
  color: #6941c6;
  background: #f4f3ff;
}

.company-address {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 280px;
  color: #475467;
}

.company-address i {
  margin-top: 2px;
  color: #ea580c;
}

.company-address span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.45;
}

.company-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.company-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* ====================== ACTIONS ====================== */

.company-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.company-mgmt-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.company-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.company-mgmt-theme .unit-edit {
  color: var(--cmp-primary) !important;
  background: var(--cmp-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.company-mgmt-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--cmp-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.company-mgmt-theme .unit-delete {
  color: var(--cmp-red) !important;
  background: var(--cmp-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.company-mgmt-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--cmp-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

/* ====================== LOADER / EMPTY ====================== */

.company-mgmt-theme .unit-loader,
.company-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.company-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.company-mgmt-theme .unit-loader .spinner-border {
  color: var(--cmp-primary);
}

.company-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.company-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--cmp-primary);
  background: var(--cmp-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.company-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.company-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.company-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.company-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.company-mgmt-theme .unit-count-text strong {
  color: #344054;
}

.company-mgmt-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.company-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.company-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--cmp-primary);
  border-color: var(--cmp-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* ====================== UNIQUE MODALS ====================== */

.company-admin-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.company-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.company-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
}

.company-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.company-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.company-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.company-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.company-admin-modal .modal-body {
  padding: 20px;
}

.company-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.company-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.company-modal-field {
  position: relative;
}

.company-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.company-modal-field .form-control {
  min-height: 42px;
  padding-left: 37px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.company-modal-field-textarea > i {
  top: 15px;
  transform: none;
}

.company-modal-field-textarea .form-control {
  min-height: auto;
  resize: vertical;
}

.company-modal-field .form-control:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.company-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.company-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}


/* Modal buttons are outside .company-mgmt-theme because React-Bootstrap
   renders modals through a portal. Keep these styles uniquely scoped. */
.company-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.company-admin-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.company-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
}

.company-admin-modal .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.company-admin-modal .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

.company-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1100px) {
  .company-mgmt-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-mgmt-theme .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .company-mgmt-theme {
    padding: 18px;
  }

  .company-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-mgmt-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .company-mgmt-theme {
    padding: 14px;
  }

  .company-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .company-heading-content {
    align-items: flex-start;
  }

  .company-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .company-heading-box h2 {
    font-size: 22px;
  }

  .company-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .company-mgmt-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 130px;
  }

  .company-mgmt-theme .unit-search {
    width: 100%;
  }

  .company-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .company-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .company-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .company-mgmt-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .company-mgmt-theme .unit-page-size {
    width: 100%;
  }

  .company-section-title {
    align-items: flex-start;
  }
}

/* ====================== REDUCED MOTION ====================== */

@media (prefers-reduced-motion: reduce) {
  .company-mgmt-theme *,
  .company-mgmt-theme *::before,
  .company-mgmt-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}




/* =========================================================
   DepartmentManagementPage.css
   Professional Department Management UI
   ========================================================= */

.dept-mgmt-theme {
  --dept-primary: #005baa;
  --dept-primary-dark: #00467f;
  --dept-primary-soft: #eaf4ff;

  --dept-text: #172033;
  --dept-muted: #6b7280;
  --dept-border: #e5eaf0;
  --dept-bg: #f6f8fb;

  --dept-blue: #2563eb;
  --dept-blue-soft: #eff6ff;

  --dept-purple: #7c3aed;
  --dept-purple-soft: #f5f3ff;

  --dept-green: #16a34a;
  --dept-green-soft: #f0fdf4;

  --dept-orange: #ea580c;
  --dept-orange-soft: #fff7ed;

  --dept-cyan: #0891b2;
  --dept-cyan-soft: #ecfeff;

  --dept-red: #dc2626;
  --dept-red-dark: #b91c1c;
  --dept-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--dept-text);
  background: var(--dept-bg);
}

/* ====================== TOP HEADING ====================== */

.department-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.department-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--dept-primary);
}

.department-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.department-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.department-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--dept-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.dept-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--dept-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.department-heading-box h2 {
  margin: 0 0 5px;
  color: var(--dept-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.department-heading-box p {
  margin: 0;
  color: var(--dept-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.dept-mgmt-theme .unit-header-actions,
.dept-mgmt-theme .unit-toolbar-actions,
.dept-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dept-mgmt-theme .unit-header-actions,
.dept-mgmt-theme .unit-toolbar-actions {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dept-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.dept-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.dept-mgmt-theme .unit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.dept-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.dept-mgmt-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--dept-primary) !important;
  background: #f8fbff !important;
  border-color: #b8d5ef !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.dept-mgmt-theme .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--dept-primary), #1675c8) !important;
  border: 1px solid var(--dept-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.dept-mgmt-theme .unit-btn-primary:hover:not(:disabled) {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--dept-primary-dark),
    var(--dept-primary)
  ) !important;
  box-shadow: 0 9px 20px rgba(0, 91, 170, 0.26);
}

.dept-mgmt-theme .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--dept-red), #ef4444) !important;
  border-color: var(--dept-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

/* ====================== KPI CARDS ====================== */

.dept-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.dept-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--dept-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.dept-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.dept-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.department-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dept-stat-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dept-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.dept-mgmt-theme .unit-stat-card strong {
  color: var(--dept-text);
  font-size: 22px;
  font-weight: 800;
}

.dept-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform 0.25s ease;
}

.dept-mgmt-theme .unit-stat-card:hover .dept-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.department-stat-blue {
  color: var(--dept-blue);
  border-color: #dbeafe !important;
}
.department-stat-blue .dept-stat-icon {
  background: var(--dept-blue-soft);
}

.department-stat-purple {
  color: var(--dept-purple);
  border-color: #e9d5ff !important;
}
.department-stat-purple .dept-stat-icon {
  background: var(--dept-purple-soft);
}

.department-stat-green {
  color: var(--dept-green);
  border-color: #bbf7d0 !important;
}
.department-stat-green .dept-stat-icon {
  background: var(--dept-green-soft);
}

/* ====================== MAIN CARD ====================== */

.dept-mgmt-theme .unit-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--dept-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.065),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.dept-mgmt-theme .unit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.department-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 270px;
}

.department-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dept-primary);
  background: var(--dept-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.dept-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.dept-mgmt-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FILTERS ====================== */

.dept-mgmt-theme .unit-search {
  width: min(285px, 100%);
}

.dept-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #ffffff;
  border-color: #dfe4ea;
  border-right: 0;
}

.dept-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 13px;
}

.dept-mgmt-theme .unit-search:focus-within .input-group-text,
.dept-mgmt-theme .unit-search:focus-within .form-control {
  border-color: #a9cae8;
}

.dept-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.dept-mgmt-theme .unit-clear-btn:hover {
  color: var(--dept-red) !important;
  background: #fff7f7 !important;
}

.dept-mgmt-theme .unit-page-size {
  width: auto;
  min-height: 40px;
  color: #374151;
  background-color: #ffffff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13px;
}

.department-filter-unit {
  min-width: 165px !important;
}
.department-filter-status {
  min-width: 140px !important;
}
.department-filter-page {
  min-width: 115px !important;
}

/* ====================== TABLE ====================== */

.dept-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.dept-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1220px;
  margin: 0;
  vertical-align: middle;
}

.dept-mgmt-theme .unit-table thead th {
  padding: 13px 14px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dept-mgmt-theme .unit-table tbody td {
  padding: 14px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 12px;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.dept-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.dept-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.dept-mgmt-theme .sortable:hover {
  color: var(--dept-primary);
  background: #f2f8fd;
}

.dept-col-name {
  min-width: 220px;
}

.dept-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 11px;
}

.dept-mgmt-theme .unit-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dept-primary);
  background: var(--dept-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 900;
}

.department-name-copy {
  min-width: 0;
}

.department-name-copy strong {
  display: block;
  max-width: 250px;
  overflow: hidden;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.department-name-copy small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 10px;
}

.department-code-chip,
.department-parent-chip,
.department-manager-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.department-code-chip {
  color: #175cd3;
  background: #eff8ff;
}

.department-parent-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.department-manager-chip {
  color: #0e7490;
  background: var(--dept-cyan-soft);
}

.dept-muted {
  color: #98a2b3;
  font-size: 11px;
}

.dept-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.department-unit-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.department-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.department-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

/* ====================== ACTIONS ====================== */

.dept-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.dept-mgmt-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.dept-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.dept-mgmt-theme .unit-edit {
  color: var(--dept-primary) !important;
  background: var(--dept-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.dept-mgmt-theme .unit-edit:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--dept-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, 0.2);
}

.dept-mgmt-theme .unit-delete {
  color: var(--dept-red) !important;
  background: var(--dept-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.dept-mgmt-theme .unit-delete:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--dept-red) !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18);
}

.dept-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.dept-toggle-off:hover {
  color: #ffffff !important;
  background: var(--dept-orange) !important;
}

.dept-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.dept-toggle-on:hover {
  color: #ffffff !important;
  background: var(--dept-green) !important;
}

/* ====================== LOADER / EMPTY ====================== */

.dept-mgmt-theme .unit-loader,
.dept-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dept-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.dept-mgmt-theme .unit-loader .spinner-border {
  color: var(--dept-primary);
}

.dept-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.dept-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--dept-primary);
  background: var(--dept-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.dept-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.dept-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 13px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.dept-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.dept-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.dept-mgmt-theme .unit-count-text strong {
  color: #344054;
}

.dept-mgmt-theme .unit-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.dept-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #ffffff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.dept-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--dept-primary);
  border-color: var(--dept-primary);
  box-shadow: 0 4px 10px rgba(0, 91, 170, 0.18);
}

/* ====================== UNIQUE MODALS ====================== */
/* React-Bootstrap renders Modal outside the page root, so modal styling
   intentionally uses unique global classes instead of .dept-mgmt-theme. */

.department-admin-backdrop {
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.department-admin-modal .modal-dialog {
  max-width: 760px;
}

.department-admin-modal-sm .modal-dialog {
  max-width: 450px;
}

.department-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.department-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  border-bottom: 1px solid #e6edf5;
}

.department-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.department-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.department-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.department-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.department-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.department-admin-modal .modal-body {
  padding: 20px;
}

.department-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.department-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.department-admin-modal .form-control,
.department-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.department-admin-modal textarea.form-control {
  min-height: auto;
  resize: vertical;
}

.department-admin-modal .form-control:focus,
.department-admin-modal .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.08);
}

.department-modal-field {
  position: relative;
}

.department-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.department-modal-field .form-control {
  padding-left: 37px;
}

.department-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.department-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.department-admin-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.department-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #ffffff !important;
  border: 1px solid #dfe4ea !important;
}

.department-admin-modal .unit-btn-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.2);
}

.department-admin-modal .unit-btn-danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.17);
}

.department-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.department-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.department-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1300px) {
  .dept-mgmt-theme .unit-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dept-mgmt-theme .unit-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .dept-mgmt-theme {
    padding: 18px;
  }

  .department-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .dept-mgmt-theme .unit-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .dept-mgmt-theme {
    padding: 14px;
  }

  .department-heading-box {
    padding: 20px;
    border-radius: 15px;
  }

  .department-heading-content {
    align-items: flex-start;
  }

  .department-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 19px;
  }

  .department-heading-box h2 {
    font-size: 22px;
  }

  .dept-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dept-mgmt-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dept-mgmt-theme .unit-search {
    width: 100%;
    grid-column: 1 / -1;
  }

  .dept-mgmt-theme .unit-page-size {
    width: 100%;
  }

  .dept-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .dept-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dept-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .dept-mgmt-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .dept-mgmt-theme .unit-search {
    grid-column: auto;
  }

  .department-section-title {
    align-items: flex-start;
  }
}

/* ====================== REDUCED MOTION ====================== */

@media (prefers-reduced-motion: reduce) {
  .dept-mgmt-theme *,
  .dept-mgmt-theme *::before,
  .dept-mgmt-theme *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}



signationManagementPage-updated.css


/* =========================================================
   DesignationManagementPage.css — UPDATED
   CSS-only refinement based on current screenshot.
   No JSX / API / sorting / filtering / permission logic changes.
   ========================================================= */

.desig-mgmt-theme {
  --desig-primary: #005baa;
  --desig-primary-dark: #064b86;
  --desig-primary-soft: #eaf4ff;

  --desig-text: #101828;
  --desig-muted: #667085;
  --desig-border: #e3e9f0;
  --desig-bg: #f6f8fb;

  --desig-blue: #2563eb;
  --desig-blue-soft: #eff6ff;
  --desig-purple: #7c3aed;
  --desig-purple-soft: #f5f3ff;
  --desig-green: #16a34a;
  --desig-green-soft: #ecfdf3;
  --desig-orange: #ea580c;
  --desig-orange-soft: #fff7ed;
  --desig-red: #dc2626;
  --desig-red-soft: #fef2f2;

  min-height: 100%;
  padding: 22px;

  color: var(--desig-text);
  background: var(--desig-bg);
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.desig-mgmt-theme .designation-heading-box {
  position: relative;

  min-height: 128px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 22px;
  padding: 24px 26px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 92% 16%,
      rgba(0, 91, 170, .07) 0,
      rgba(0, 91, 170, 0) 31%
    ),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);

  border: 1px solid #d9e7f4;
  border-left: 6px solid var(--desig-primary);
  border-radius: 18px;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, .06),
    0 2px 7px rgba(15, 23, 42, .035);
}

.desig-mgmt-theme .designation-heading-content {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 16px;
}

.desig-mgmt-theme .designation-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(
    135deg,
    var(--desig-primary),
    #1976c8
  );

  border-radius: 15px;

  box-shadow: 0 9px 18px rgba(0, 91, 170, .22);

  font-size: 20px;
}

.desig-mgmt-theme .unit-page-label {
  margin-bottom: 3px;

  color: var(--desig-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.desig-mgmt-theme .designation-heading-box h2 {
  margin: 0 0 6px;

  color: var(--desig-text);

  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.desig-mgmt-theme .designation-heading-box p {
  max-width: 760px;
  margin: 0;

  color: var(--desig-muted);

  font-size: 13px;
  line-height: 1.5;
}

.desig-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.desig-mgmt-theme .unit-btn,
.designation-admin-modal .unit-btn {
  min-height: 40px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 14px;

  border-radius: 10px !important;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.desig-mgmt-theme .unit-btn:hover:not(:disabled),
.designation-admin-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.desig-mgmt-theme .unit-btn-light,
.designation-admin-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;

  border: 1px solid #d7e0e8 !important;
}

.desig-mgmt-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--desig-primary) !important;
  background: #f7fbff !important;

  border-color: #b8d9f3 !important;
}

.desig-mgmt-theme .unit-btn-primary,
.designation-admin-modal .unit-btn-primary {
  color: #fff !important;

  background: linear-gradient(
    135deg,
    var(--desig-primary),
    #1875c5
  ) !important;

  border: 1px solid var(--desig-primary) !important;

  box-shadow: 0 5px 12px rgba(0, 91, 170, .17);
}

.designation-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: #dc2626 !important;

  border: 1px solid #dc2626 !important;
}

/* =========================================================
   KPI CARDS
   Fix: keep all 3 in one row on desktop.
   ========================================================= */

.desig-mgmt-theme .unit-stats-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 16px;

  margin-bottom: 22px;
}

.desig-mgmt-theme .unit-stat-card {
  min-width: 0;
  min-height: 92px;

  padding: 0;

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--desig-border);
  border-radius: 16px;

  box-shadow: 0 5px 14px rgba(15, 23, 42, .045);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.desig-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 22px rgba(15, 23, 42, .07);
}

.desig-mgmt-theme .designation-stat-content {
  min-height: 92px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 17px 18px;
}

.desig-mgmt-theme .desig-stat-text {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.desig-mgmt-theme .desig-stat-text span {
  color: #667085;

  font-size: 10.5px;
  font-weight: 700;
}

.desig-mgmt-theme .desig-stat-text strong {
  color: #101828;

  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}

.desig-mgmt-theme .desig-stat-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 16px;
}

.desig-mgmt-theme .designation-stat-blue {
  border-left: 4px solid #3b82f6;
}

.desig-mgmt-theme .designation-stat-blue .desig-stat-icon {
  color: #2563eb;
  background: #eff6ff;
}

.desig-mgmt-theme .designation-stat-purple {
  border-left: 4px solid #8b5cf6;
}

.desig-mgmt-theme .designation-stat-purple .desig-stat-icon {
  color: #7c3aed;
  background: #f5f3ff;
}

.desig-mgmt-theme .designation-stat-green {
  border-left: 4px solid #22c55e;
}

.desig-mgmt-theme .designation-stat-green .desig-stat-icon {
  color: #16a34a;
  background: #ecfdf3;
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.desig-mgmt-theme > .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #dfe6ee;
  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055),
    0 2px 6px rgba(15, 23, 42, .03);
}

/* =========================================================
   DESIGNATION LIST TOOLBAR
   Fix: heading row + filter row.
   ========================================================= */

.desig-mgmt-theme .unit-toolbar {
  display: block !important;

  padding: 0 !important;

  background: #fff;

  border-bottom: 1px solid #e7ecf2;
}

.desig-mgmt-theme .designation-section-title {
  position: relative;

  min-height: 76px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 16px 20px;

  background: linear-gradient(
    180deg,
    #ffffff,
    #fbfdff
  );

  border-bottom: 1px solid #edf1f5;
}

.desig-mgmt-theme .designation-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--desig-primary);
  background: var(--desig-primary-soft);

  border-radius: 12px;

  font-size: 14px;
}

.desig-mgmt-theme .designation-section-title h5 {
  margin: 0 0 3px;

  color: #101828;

  font-size: 15px;
  font-weight: 800;
}

.desig-mgmt-theme .designation-section-title p {
  max-width: 720px;
  margin: 0;

  color: #7a8494;

  font-size: 11px;
  line-height: 1.45;
}

/* =========================================================
   FILTER ROW
   ========================================================= */

.desig-mgmt-theme .desig-filters-row {
  display: grid !important;

  grid-template-columns:
    minmax(300px, 1.5fr)
    minmax(170px, .9fr)
    minmax(180px, 1fr)
    minmax(160px, .9fr)
    112px;

  gap: 9px !important;
  align-items: center !important;

  width: 100%;

  padding: 13px 20px 15px;
}

/* SEARCH */

.desig-mgmt-theme .desig-search {
  width: 100% !important;
  min-width: 0 !important;
}

.desig-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #667085;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-right: 0;

  border-radius: 10px 0 0 10px;
}

.desig-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  min-width: 0;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-left: 0;

  box-shadow: none !important;

  font-size: 10.5px;
}

.desig-mgmt-theme .unit-search .form-control::placeholder {
  color: #98a2b3;
}

.desig-mgmt-theme .unit-search .form-control:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .07) !important;
}

.desig-mgmt-theme .unit-search .unit-clear-btn {
  width: 38px;
  min-width: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #667085 !important;
  background: #f8fafc !important;

  border: 1px solid #d7e0e8 !important;
  border-left: 0 !important;

  border-radius: 0 10px 10px 0 !important;

  font-size: 9px;
}

/* FILTER SELECTS */

.desig-mgmt-theme .desig-select-wrap {
  position: relative;

  min-width: 0;
}

.desig-mgmt-theme .desig-select-icon {
  position: absolute;
  z-index: 2;

  left: 12px;
  top: 50%;

  transform: translateY(-50%);

  color: #667085;

  font-size: 9px;

  pointer-events: none;
}

.desig-mgmt-theme .desig-filter-select {
  width: 100%;
  min-height: 40px;

  padding-left: 31px;

  color: #344054;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 9.5px;
  font-weight: 600;
}

.desig-mgmt-theme .desig-filter-select:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .07) !important;
}

/* ROWS SELECT */

.desig-mgmt-theme .unit-page-size {
  width: 112px !important;
  min-width: 112px;
  min-height: 40px;

  color: #344054;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 9.5px;
  font-weight: 700;
}

/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.desig-mgmt-theme .unit-table-wrapper {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-color: #bdc8d5 #eef2f6;
  scrollbar-width: thin;
}

.desig-mgmt-theme .unit-table-wrapper::-webkit-scrollbar {
  height: 9px;
}

.desig-mgmt-theme .unit-table-wrapper::-webkit-scrollbar-track {
  background: #eef2f6;
}

.desig-mgmt-theme .unit-table-wrapper::-webkit-scrollbar-thumb {
  background: #bdc8d5;

  border-radius: 999px;
}

/* =========================================================
   TABLE
   Fix: lighter header, better spacing.
   ========================================================= */

.desig-mgmt-theme .unit-table {
  width: 100%;
  min-width: 980px;

  margin: 0;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: auto;
  vertical-align: middle;
}

.desig-mgmt-theme .unit-table thead th {
  padding: 12px 11px;

  color: #475467;
  background: #f7f9fc;

  border-top: 0;
  border-bottom: 1px solid #dfe5ec;

  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;

  line-height: 1.35;
  white-space: nowrap;
}

.desig-mgmt-theme .unit-table tbody td {
  padding: 12px 11px;

  color: #344054;
  background: #fff;

  border-bottom: 1px solid #edf0f4;

  font-size: 10px;
  line-height: 1.45;
  vertical-align: middle;

  white-space: nowrap;
}

.desig-mgmt-theme .unit-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.desig-mgmt-theme .unit-table tbody tr:hover td {
  background: #f5faff;
}

/* column sizing */

.desig-mgmt-theme .unit-table th:nth-child(1),
.desig-mgmt-theme .unit-table td:nth-child(1) {
  width: 64px;
  min-width: 64px;

  text-align: center;
}

.desig-mgmt-theme .unit-table th:nth-child(2),
.desig-mgmt-theme .unit-table td:nth-child(2) {
  min-width: 190px;
}

.desig-mgmt-theme .unit-table th:nth-child(3),
.desig-mgmt-theme .unit-table td:nth-child(3) {
  min-width: 110px;
}

.desig-mgmt-theme .unit-table th:nth-child(4),
.desig-mgmt-theme .unit-table td:nth-child(4) {
  min-width: 155px;
}

.desig-mgmt-theme .unit-table th:nth-child(5),
.desig-mgmt-theme .unit-table td:nth-child(5) {
  min-width: 100px;
}

.desig-mgmt-theme .unit-table th:nth-child(6),
.desig-mgmt-theme .unit-table td:nth-child(6) {
  min-width: 120px;
}

.desig-mgmt-theme .unit-table th:nth-child(7),
.desig-mgmt-theme .unit-table td:nth-child(7) {
  min-width: 105px;
}

/* sortable headers */

.desig-mgmt-theme .unit-table th.sortable {
  cursor: pointer;
  user-select: none;

  transition:
    color .15s ease,
    background-color .15s ease;
}

.desig-mgmt-theme .unit-table th.sortable:hover {
  color: var(--desig-primary);
  background: #edf7ff;
}

/* =========================================================
   DESIGNATION NAME
   ========================================================= */

.desig-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
}

.desig-mgmt-theme .unit-letter {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #175cd3;
  background: #eef7ff;

  border: 1px solid #c8e5fa;
  border-radius: 9px;

  font-size: 11px;
  font-weight: 900;
}

.desig-mgmt-theme .designation-name-copy {
  min-width: 0;
}

.desig-mgmt-theme .designation-name-copy strong {
  display: block;

  max-width: 190px;

  color: #101828;

  font-size: 10.5px;
  font-weight: 800;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desig-mgmt-theme .designation-name-copy small {
  display: block;

  margin-top: 1px;

  color: #98a2b3;

  font-size: 8px;
  font-weight: 600;
}

/* =========================================================
   CHIPS / BADGES
   ========================================================= */

.desig-mgmt-theme .designation-code-chip,
.desig-mgmt-theme .designation-level-chip,
.desig-mgmt-theme .designation-nonmanagerial-chip,
.desig-mgmt-theme .unit-status {
  min-height: 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 7.5px;
  font-weight: 800;
}

.desig-mgmt-theme .designation-code-chip {
  color: #175cd3;
  background: #eff8ff;

  border: 1px solid #b2ddff;
}

.desig-mgmt-theme .designation-department-badge {
  color: #027a48 !important;
  background: #ecfdf3 !important;

  border: 1px solid #abefc6 !important;
}

.desig-mgmt-theme .designation-level-chip {
  color: #b54708;
  background: #fffaeb;

  border: 1px solid #fedf89;
}

.desig-mgmt-theme .designation-managerial-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;

  border: 1px solid #d9d6fe !important;
}

.desig-mgmt-theme .designation-nonmanagerial-chip {
  color: #475467;
  background: #f2f4f7;

  border: 1px solid #d0d5dd;
}

.desig-mgmt-theme .designation-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;

  border: 1px solid #abefc6 !important;
}

.desig-mgmt-theme .designation-status-inactive {
  color: #475467 !important;
  background: #f2f4f7 !important;

  border: 1px solid #d0d5dd !important;
}

.desig-mgmt-theme .desig-muted {
  color: #98a2b3;

  font-size: 9px;
}

/* =========================================================
   STICKY ACTIONS
   ========================================================= */

.desig-mgmt-theme .unit-table th:last-child,
.desig-mgmt-theme .unit-table td:last-child {
  position: sticky;
  right: 0;

  width: 124px;
  min-width: 124px;
  max-width: 124px;
}

.desig-mgmt-theme .unit-table th:last-child {
  z-index: 6;

  color: #fff;
  background: var(--desig-primary);

  text-align: center !important;
}

.desig-mgmt-theme .unit-table td:last-child {
  z-index: 4;

  background: #fff;

  box-shadow:
    -7px 0 12px rgba(15, 23, 42, .045);
}

.desig-mgmt-theme .unit-table tbody tr:nth-child(even) td:last-child {
  background: #fbfdff;
}

.desig-mgmt-theme .unit-table tbody tr:hover td:last-child {
  background: #f5faff;
}

.desig-mgmt-theme .unit-actions {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;

  flex-wrap: nowrap;
}

.desig-mgmt-theme .unit-icon-btn {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  flex: 0 0 30px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 8px !important;

  font-size: 10px !important;

  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.desig-mgmt-theme .unit-icon-btn i {
  margin: 0 !important;

  font-size: 10px !important;
}

.desig-mgmt-theme .unit-edit {
  color: #175cd3 !important;
  background: #eff8ff !important;

  border: 1px solid #b2ddff !important;
}

.desig-mgmt-theme .designation-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;

  border: 1px solid #fedf89 !important;
}

.desig-mgmt-theme .designation-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;

  border: 1px solid #abefc6 !important;
}

.desig-mgmt-theme .unit-delete {
  color: #b42318 !important;
  background: #fef3f2 !important;

  border: 1px solid #fecdca !important;
}

.desig-mgmt-theme .unit-icon-btn:hover {
  color: #fff !important;
  background: var(--desig-primary) !important;

  border-color: var(--desig-primary) !important;

  transform: translateY(-1px);
}

/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.desig-mgmt-theme .unit-loader {
  min-height: 270px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.desig-mgmt-theme .unit-loader .spinner-border {
  color: var(--desig-primary);
}

.desig-mgmt-theme .unit-loader p {
  margin: 0;

  color: #7a8494;

  font-size: 11px;
}

.desig-mgmt-theme .unit-empty {
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  text-align: center;
}

.desig-mgmt-theme .unit-empty-icon {
  width: 58px;
  height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  color: var(--desig-primary);
  background: var(--desig-primary-soft);

  border-radius: 16px;

  font-size: 20px;
}

.desig-mgmt-theme .unit-empty h5 {
  margin: 0 0 5px;

  color: #101828;

  font-size: 15px;
  font-weight: 800;
}

.desig-mgmt-theme .unit-empty p {
  margin: 0 0 14px;

  color: #7a8494;

  font-size: 11px;
}

/* =========================================================
   FOOTER / PAGINATION
   ========================================================= */

.desig-mgmt-theme .unit-footer {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 12px 18px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.desig-mgmt-theme .unit-count-text {
  color: #667085;

  font-size: 10px;
}

.desig-mgmt-theme .unit-count-text strong {
  color: #101828;

  font-weight: 800;
}

.desig-mgmt-theme .unit-pagination {
  margin: 0;
}

.desig-mgmt-theme .unit-pagination .page-link {
  min-width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 4px;

  color: #475467;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 8px !important;

  box-shadow: none !important;

  font-size: 9px;
  font-weight: 800;
}

.desig-mgmt-theme .unit-pagination .active .page-link {
  color: #fff;
  background: var(--desig-primary);

  border-color: var(--desig-primary);
}

.desig-mgmt-theme .unit-pagination .disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
}

/* =========================================================
   MODALS
   ========================================================= */

.designation-admin-backdrop {
  background: rgba(15, 23, 42, .56) !important;

  backdrop-filter: blur(2px);
}

.modal-dialog.designation-admin-modal {
  width: calc(100% - 28px);
}

.modal-dialog.designation-admin-modal-lg {
  max-width: 820px;
}

.modal-dialog.designation-admin-modal-sm {
  max-width: 470px;
}

.designation-admin-modal .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, .22);
}

.designation-admin-modal .modal-header {
  padding: 17px 20px;

  background: linear-gradient(
    135deg,
    #f7fbff,
    #fff
  );

  border-bottom: 1px solid #e6edf5;
}

.designation-admin-modal .designation-modal-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.designation-admin-modal .designation-modal-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--desig-primary);
  background: var(--desig-primary-soft);

  border-radius: 11px;

  font-size: 14px;
}

.designation-admin-modal .designation-modal-icon-danger {
  color: #b42318;
  background: #fef3f2;
}

.designation-admin-modal .designation-modal-heading small {
  display: block;

  margin-bottom: 2px;

  color: #98a2b3;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.designation-admin-modal .modal-title {
  color: #101828;

  font-size: 16px;
  font-weight: 800;
}

.designation-admin-modal .modal-body {
  padding: 20px;
}

.designation-admin-modal .modal-footer {
  padding: 14px 20px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.designation-admin-modal .form-label {
  margin-bottom: 5px;

  color: #344054;

  font-size: 10px;
  font-weight: 800;
}

.designation-admin-modal .form-control,
.designation-admin-modal .form-select {
  min-height: 42px;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 11px;
}

.designation-admin-modal .form-control:focus,
.designation-admin-modal .form-select:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .07) !important;
}

/* Icon fields */

.designation-admin-modal .designation-modal-field {
  position: relative;
}

.designation-admin-modal .designation-modal-field > i {
  position: absolute;
  z-index: 2;

  left: 12px;
  top: 50%;

  transform: translateY(-50%);

  color: #98a2b3;

  font-size: 10px;

  pointer-events: none;
}

.designation-admin-modal .designation-modal-field .form-control {
  padding-left: 32px;
}

.designation-admin-modal .designation-modal-field-textarea > i {
  top: 15px;

  transform: none;
}

.designation-admin-modal textarea.form-control {
  min-height: 82px;

  resize: vertical;
}

/* Managerial checkbox */

.designation-admin-modal .designation-managerial-check {
  min-height: 44px;

  display: flex;
  align-items: center;

  padding: 10px 12px 10px 38px;

  background: #f8fafc;

  border: 1px solid #e3e8ee;
  border-radius: 10px;
}

.designation-admin-modal .designation-managerial-check .form-check-input {
  box-shadow: none !important;
}

.designation-admin-modal .designation-managerial-check .form-check-label {
  color: #475467;

  font-size: 9.5px;
  font-weight: 700;
}

/* Delete visual */

.designation-admin-modal-danger .modal-header {
  background: linear-gradient(
    135deg,
    #fff7f6,
    #fff
  );
}

.designation-modal-danger-visual {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 2px auto 13px;

  color: #b42318;
  background: #fef3f2;

  border: 1px solid #fecdca;
  border-radius: 18px;

  font-size: 25px;
}

.designation-admin-modal .unit-delete-text {
  max-width: 390px;

  margin: 0 auto;

  color: #667085;

  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  .desig-mgmt-theme .desig-filters-row {
    grid-template-columns:
      minmax(280px, 1fr)
      repeat(3, minmax(150px, 1fr))
      110px;
  }
}

@media (max-width: 980px) {
  .desig-mgmt-theme .desig-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desig-mgmt-theme .desig-search {
    grid-column: 1 / -1;
  }

  .desig-mgmt-theme .unit-page-size {
    width: 100% !important;
  }
}

@media (max-width: 820px) {
  .desig-mgmt-theme {
    padding: 16px;
  }

  .desig-mgmt-theme .designation-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .desig-mgmt-theme .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .desig-mgmt-theme {
    padding: 14px;
  }

  .desig-mgmt-theme .designation-heading-content {
    align-items: flex-start;
  }

  .desig-mgmt-theme .designation-heading-box h2 {
    font-size: 22px;
  }

  .desig-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr !important;
  }

  .desig-mgmt-theme .desig-filters-row {
    grid-template-columns: 1fr;
  }

  .desig-mgmt-theme .desig-search {
    grid-column: auto;
  }

  .desig-mgmt-theme .unit-header-actions {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
  }

  .desig-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .desig-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desig-mgmt-theme *,
  .desig-mgmt-theme *::before,
  .desig-mgmt-theme *::after {
    transition: none !important;
  }
}





/* =========================================================
   ProjectManagementPage.css
   Professional Project Management UI
   ========================================================= */

.proj-mgmt-theme {
  --proj-primary: #005baa;
  --proj-primary-dark: #00467f;
  --proj-primary-soft: #eaf4ff;

  --proj-text: #172033;
  --proj-muted: #6b7280;
  --proj-border: #e5eaf0;
  --proj-bg: #f6f8fb;

  --proj-blue: #2563eb;
  --proj-blue-soft: #eff6ff;
  --proj-purple: #7c3aed;
  --proj-purple-soft: #f5f3ff;
  --proj-green: #16a34a;
  --proj-green-soft: #f0fdf4;
  --proj-orange: #ea580c;
  --proj-orange-soft: #fff7ed;
  --proj-cyan: #0891b2;
  --proj-cyan-soft: #ecfeff;
  --proj-red: #dc2626;
  --proj-red-dark: #b91c1c;
  --proj-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--proj-text);
  background: var(--proj-bg);
}

/* ====================== TOP HEADING ====================== */

.project-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.project-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--proj-primary);
}

.project-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.project-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--proj-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.proj-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--proj-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.project-heading-box h2 {
  margin: 0 0 5px;
  color: var(--proj-text);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.project-heading-box p {
  max-width: 760px;
  margin: 0;
  color: var(--proj-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.proj-mgmt-theme .unit-header-actions,
.proj-mgmt-theme .unit-toolbar-actions,
.proj-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.proj-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.proj-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.proj-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.proj-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .04);
}

.proj-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--proj-primary), #1675c8) !important;
  border: 1px solid var(--proj-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.proj-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--proj-red), #ef4444) !important;
  border-color: var(--proj-red) !important;
}

/* ====================== KPI CARDS ====================== */

.proj-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.proj-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--proj-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.proj-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.proj-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.project-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.proj-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.proj-mgmt-theme .unit-stat-card strong {
  color: var(--proj-text);
  font-size: 22px;
  font-weight: 800;
}

.proj-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
  transition: transform .25s ease;
}

.proj-mgmt-theme .unit-stat-card:hover .proj-stat-icon {
  transform: scale(1.08) rotate(-3deg);
}

.project-stat-blue {
  color: var(--proj-blue);
  border-color: #dbeafe !important;
}
.project-stat-blue .proj-stat-icon { background: var(--proj-blue-soft); }

.project-stat-purple {
  color: var(--proj-purple);
  border-color: #e9d5ff !important;
}
.project-stat-purple .proj-stat-icon { background: var(--proj-purple-soft); }

.project-stat-green {
  color: var(--proj-green);
  border-color: #bbf7d0 !important;
}
.project-stat-green .proj-stat-icon { background: var(--proj-green-soft); }

/* ====================== MAIN CARD / TWO-ROW TOOLBAR ====================== */

.proj-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--proj-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.proj-mgmt-theme .project-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #fff;
}

.project-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.project-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--proj-primary);
  background: var(--proj-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.project-section-copy {
  flex: 1;
  min-width: 0;
}

.project-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.project-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
  line-height: 1.45;
}

/* 7 filter controls => desktop grid. Never squeeze the title. */
.proj-mgmt-theme .proj-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(230px, 1.35fr)
    minmax(155px, .9fr)
    minmax(145px, .8fr)
    minmax(165px, 1fr)
    minmax(145px, .85fr)
    minmax(165px, 1fr)
    minmax(105px, .55fr);
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
}

.proj-mgmt-theme .proj-filters-row > * {
  min-width: 0 !important;
  max-width: none !important;
}

/* ====================== FILTERS ====================== */

.proj-mgmt-theme .unit-search {
  width: 100%;
}

.proj-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.proj-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.proj-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.proj-mgmt-theme .unit-clear-btn:hover {
  color: var(--proj-red) !important;
  background: #fff7f7 !important;
}

.proj-select-wrap {
  position: relative;
  width: 100%;
}

.proj-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.proj-filter-select {
  width: 100%;
  min-height: 40px;
  padding-left: 31px !important;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.proj-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

/* ====================== TABLE ====================== */

.proj-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.proj-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1500px;
  margin: 0;
  vertical-align: middle;
}

.proj-mgmt-theme .unit-table thead th {
  padding: 13px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.proj-mgmt-theme .unit-table tbody td {
  padding: 14px 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
  transition: background-color .2s ease;
}

.proj-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.proj-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.proj-mgmt-theme .sortable:hover {
  color: var(--proj-primary);
  background: #f2f8fd;
}

.project-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 215px;
}

.project-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--proj-primary);
  background: var(--proj-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.project-name-copy {
  min-width: 0;
}

.proj-name-link {
  color: #1f2937 !important;
  text-decoration: none !important;
}

.proj-name-link strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.proj-name-link:hover {
  color: var(--proj-primary) !important;
}

.project-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.project-code-chip,
.project-owner-chip,
.project-department-chip,
.project-unit-chip,
.project-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.project-code-chip {
  color: #175cd3;
  background: #eff8ff;
}

.project-owner-chip {
  color: #0e7490;
  background: #ecfeff;
}

.project-department-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.project-unit-chip {
  color: #b54708;
  background: #fffaeb;
}

.project-count-chip {
  color: #027a48;
  background: #ecfdf3;
}

.project-count-modules {
  color: #175cd3;
  background: #eff8ff;
}

.proj-muted {
  color: #98a2b3;
  font-size: 10px;
}

.project-lifecycle-status {
  min-height: 26px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

.project-active-badge {
  min-height: 26px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.project-active-badge-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.project-active-badge-off {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #eaecf0 !important;
}

/* ====================== ACTIONS ====================== */

.proj-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.proj-mgmt-theme .unit-icon-btn {
  width: 33px;
  height: 33px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    background-color .2s ease;
}

.proj-mgmt-theme .unit-icon-btn:hover {
  transform: translateY(-2px);
}

.project-view {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

.project-view:hover {
  color: #fff !important;
  background: var(--proj-cyan) !important;
}

.proj-mgmt-theme .unit-edit {
  color: var(--proj-primary) !important;
  background: var(--proj-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.proj-mgmt-theme .unit-edit:hover {
  color: #fff !important;
  background: var(--proj-primary) !important;
}

.project-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.project-toggle-off:hover {
  color: #fff !important;
  background: var(--proj-orange) !important;
}

.project-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.project-toggle-on:hover {
  color: #fff !important;
  background: var(--proj-green) !important;
}

.proj-archive {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.proj-archive:hover {
  color: #fff !important;
  background: var(--proj-purple) !important;
}

.proj-mgmt-theme .unit-delete {
  color: var(--proj-red) !important;
  background: var(--proj-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.proj-mgmt-theme .unit-delete:hover {
  color: #fff !important;
  background: var(--proj-red) !important;
}

/* ====================== EMPTY / LOADER ====================== */

.proj-mgmt-theme .unit-loader,
.proj-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.proj-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.proj-mgmt-theme .unit-loader .spinner-border {
  color: var(--proj-primary);
}

.proj-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.proj-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--proj-primary);
  background: var(--proj-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.proj-mgmt-theme .unit-empty-error .unit-empty-icon {
  color: var(--proj-red);
  background: var(--proj-red-soft);
}

.proj-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.proj-mgmt-theme .unit-empty p {
  max-width: 600px;
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.proj-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.proj-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.proj-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.proj-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
  box-shadow: none;
}

.proj-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--proj-primary);
  border-color: var(--proj-primary);
}

/* ====================== UNIQUE MODALS ====================== */

.project-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.project-admin-modal .modal-dialog {
  max-width: 860px;
}

.project-admin-modal-sm .modal-dialog {
  max-width: 460px;
}

.project-admin-modal .modal-content {
  overflow: visible;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.project-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
  border-radius: 18px 18px 0 0;
}

.project-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.project-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.project-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.project-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.project-admin-modal .modal-body {
  padding: 20px;
}

.project-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
  border-radius: 0 0 18px 18px;
}

.project-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.project-admin-modal .form-control,
.project-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.project-admin-modal textarea.form-control {
  min-height: auto;
  resize: vertical;
}

.project-admin-modal .form-control:focus,
.project-admin-modal .form-select:focus {
  border-color: #a9cae8;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .08);
}

.project-modal-field {
  position: relative;
}

.project-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.project-modal-field .form-control {
  padding-left: 37px;
}

.project-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.project-owner-picker-wrap {
  position: relative;
  z-index: 10;
}

.project-admin-modal .form-text {
  font-size: 10px;
  line-height: 1.45;
}

.project-date-input {
  cursor: pointer;
}

.project-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.project-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.project-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.project-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.project-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.project-modal-danger-visual,
.project-modal-archive-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  border-radius: 18px;
  font-size: 25px;
}

.project-modal-danger-visual {
  color: #dc2626;
  background: #fef2f2;
}

.project-modal-archive-visual {
  color: #6941c6;
  background: #f4f3ff;
}

.project-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ConfirmModal / archive dialog refinements */
.project-archive-modal .modal-content {
  border-top: 4px solid #7c3aed;
}

.project-archive-modal .modal-title {
  font-weight: 800;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1450px) {
  .proj-mgmt-theme .proj-filters-row {
    grid-template-columns:
      minmax(235px, 1.4fr)
      minmax(160px, 1fr)
      minmax(145px, .85fr)
      minmax(175px, 1fr);
  }
}

@media (max-width: 1050px) {
  .proj-mgmt-theme {
    padding: 18px;
  }

  .project-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .proj-mgmt-theme .unit-header-actions {
    width: 100%;
  }

  .proj-mgmt-theme .proj-filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proj-mgmt-theme .proj-search {
    grid-column: span 2;
  }
}

@media (max-width: 800px) {
  .proj-mgmt-theme {
    padding: 14px;
  }

  .project-heading-box {
    padding: 20px;
  }

  .project-heading-content {
    align-items: flex-start;
  }

  .project-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .project-heading-box h2 {
    font-size: 22px;
  }

  .proj-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .proj-mgmt-theme .proj-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 16px 16px;
  }

  .proj-mgmt-theme .proj-search {
    grid-column: 1 / -1;
  }

  .proj-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .proj-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .proj-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .project-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .proj-mgmt-theme .proj-filters-row {
    grid-template-columns: 1fr;
  }

  .proj-mgmt-theme .proj-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proj-mgmt-theme *,
  .proj-mgmt-theme *::before,
  .proj-mgmt-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   TaskTypeManagementPage.css
   Professional Task Type Management UI
   ========================================================= */

.tasktype-mgmt-theme {
  --tt-primary: #005baa;
  --tt-primary-dark: #00467f;
  --tt-primary-soft: #eaf4ff;

  --tt-text: #172033;
  --tt-muted: #6b7280;
  --tt-border: #e5eaf0;
  --tt-bg: #f6f8fb;

  --tt-blue: #2563eb;
  --tt-blue-soft: #eff6ff;
  --tt-purple: #7c3aed;
  --tt-purple-soft: #f5f3ff;
  --tt-green: #16a34a;
  --tt-green-soft: #f0fdf4;
  --tt-orange: #ea580c;
  --tt-orange-soft: #fff7ed;
  --tt-red: #dc2626;
  --tt-red-soft: #fef2f2;
  --tt-cyan: #0891b2;
  --tt-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--tt-text);
  background: var(--tt-bg);
}

/* ====================== HEADING ====================== */

.tasktype-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.tasktype-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--tt-primary);
}

.tasktype-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.tasktype-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tasktype-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tt-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.tasktype-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--tt-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.tasktype-heading-box h2 {
  margin: 0 0 5px;
  color: var(--tt-text);
  font-size: 27px;
  font-weight: 800;
}

.tasktype-heading-box p {
  max-width: 760px;
  margin: 0;
  color: var(--tt-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.tasktype-mgmt-theme .unit-header-actions,
.tasktype-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tasktype-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.tasktype-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.tasktype-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.tasktype-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.tasktype-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tt-primary), #1675c8) !important;
  border: 1px solid var(--tt-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.tasktype-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tt-red), #ef4444) !important;
  border-color: var(--tt-red) !important;
}

/* ====================== KPI CARDS ====================== */

.tasktype-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.tasktype-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.tasktype-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.tasktype-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.tasktype-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tasktype-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tasktype-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.tasktype-mgmt-theme .unit-stat-card strong {
  color: var(--tt-text);
  font-size: 22px;
  font-weight: 800;
}

.tasktype-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.tasktype-stat-blue { color: var(--tt-blue); border-color: #dbeafe !important; }
.tasktype-stat-blue .tasktype-stat-icon { background: var(--tt-blue-soft); }

.tasktype-stat-purple { color: var(--tt-purple); border-color: #e9d5ff !important; }
.tasktype-stat-purple .tasktype-stat-icon { background: var(--tt-purple-soft); }

.tasktype-stat-green { color: var(--tt-green); border-color: #bbf7d0 !important; }
.tasktype-stat-green .tasktype-stat-icon { background: var(--tt-green-soft); }

/* ====================== CARD / TOOLBAR ====================== */

.tasktype-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.tasktype-mgmt-theme .tasktype-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.tasktype-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.tasktype-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-primary);
  background: var(--tt-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.tasktype-section-copy {
  flex: 1;
  min-width: 0;
}

.tasktype-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.tasktype-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.tasktype-mgmt-theme .tasktype-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(250px, 1.4fr)
    minmax(165px, .85fr)
    minmax(180px, .95fr)
    minmax(110px, .55fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.tasktype-mgmt-theme .unit-search {
  width: 100%;
}

.tasktype-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.tasktype-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.tasktype-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.tasktype-select-wrap {
  position: relative;
  width: 100%;
}

.tasktype-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.tasktype-filter-select,
.tasktype-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.tasktype-filter-select {
  padding-left: 31px !important;
}

/* ====================== TABLE ====================== */

.tasktype-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.tasktype-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1080px;
  margin: 0;
  vertical-align: middle;
}

.tasktype-mgmt-theme .unit-table thead th {
  padding: 13px 14px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tasktype-mgmt-theme .unit-table tbody td {
  padding: 14px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.tasktype-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.tasktype-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.tasktype-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.tasktype-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-primary);
  background: var(--tt-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.tasktype-name-copy strong {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasktype-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.tasktype-code-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.tasktype-code-chip,
.tasktype-custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}

.tasktype-code-chip {
  color: #175cd3;
  background: #eff8ff;
}

.tasktype-protected-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b54708;
  font-size: 8px;
  font-weight: 700;
}

.tasktype-flags-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 440px;
}

.tasktype-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 7px;
  color: #475467;
  background: #f2f4f7;
  border: 1px solid #eaecf0;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.tasktype-flag-chip i {
  color: var(--tt-green);
}

.tasktype-custom-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.tasktype-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.tasktype-system-badge {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.tasktype-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.tasktype-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.tasktype-muted {
  color: #98a2b3;
  font-size: 10px;
}

/* ====================== ACTIONS ====================== */

.tasktype-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.tasktype-mgmt-theme .unit-icon-btn {
  width: 33px;
  height: 33px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition: transform .2s ease;
}

.tasktype-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.tasktype-mgmt-theme .unit-edit {
  color: var(--tt-primary) !important;
  background: var(--tt-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.tasktype-mgmt-theme .unit-delete {
  color: var(--tt-red) !important;
  background: var(--tt-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.tasktype-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.tasktype-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.tasktype-mgmt-theme .unit-icon-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

/* ====================== EMPTY / FOOTER ====================== */

.tasktype-mgmt-theme .unit-loader,
.tasktype-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tasktype-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.tasktype-mgmt-theme .unit-loader .spinner-border {
  color: var(--tt-primary);
}

.tasktype-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.tasktype-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--tt-primary);
  background: var(--tt-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.tasktype-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.tasktype-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.tasktype-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.tasktype-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.tasktype-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.tasktype-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.tasktype-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--tt-primary);
  border-color: var(--tt-primary);
}

/* ====================== UNIQUE MODALS ====================== */

.tasktype-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.tasktype-admin-modal .modal-dialog {
  max-width: 820px;
}

.tasktype-admin-modal-sm .modal-dialog {
  max-width: 460px;
}

.tasktype-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.tasktype-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.tasktype-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tasktype-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.tasktype-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.tasktype-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.tasktype-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.tasktype-admin-modal .modal-body {
  padding: 20px;
}

.tasktype-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.tasktype-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.tasktype-admin-modal .form-control,
.tasktype-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.tasktype-admin-modal textarea.form-control {
  min-height: auto;
}

.tasktype-modal-field {
  position: relative;
}

.tasktype-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.tasktype-modal-field .form-control {
  padding-left: 37px;
}

.tasktype-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.tasktype-system-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #b42318 !important;
  font-size: 9px;
  font-weight: 700;
}

.tasktype-flags-heading {
  margin-bottom: 10px;
}

.tasktype-flags-heading small {
  color: #7b8493;
  font-size: 10px;
}

.tasktype-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.tasktype-config-check {
  padding: 10px 12px 10px 36px;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 10px;
}

.tasktype-config-check .form-check-input {
  margin-left: -22px;
}

.tasktype-config-check .form-check-label {
  color: #475467;
  font-size: 10px;
  font-weight: 700;
}

.tasktype-admin-modal .form-text {
  font-size: 9px;
  line-height: 1.45;
}

.tasktype-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.tasktype-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.tasktype-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.tasktype-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.tasktype-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.tasktype-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.tasktype-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .tasktype-mgmt-theme {
    padding: 18px;
  }

  .tasktype-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .tasktype-mgmt-theme .tasktype-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasktype-mgmt-theme .tasktype-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .tasktype-mgmt-theme {
    padding: 14px;
  }

  .tasktype-heading-box {
    padding: 20px;
  }

  .tasktype-heading-content {
    align-items: flex-start;
  }

  .tasktype-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .tasktype-heading-box h2 {
    font-size: 22px;
  }

  .tasktype-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .tasktype-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .tasktype-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .tasktype-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .tasktype-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .tasktype-mgmt-theme .tasktype-filters-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .tasktype-mgmt-theme .tasktype-search {
    grid-column: auto;
  }

  .tasktype-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tasktype-mgmt-theme *,
  .tasktype-mgmt-theme *::before,
  .tasktype-mgmt-theme *::after {
    transition: none !important;
  }
}   



/* =========================================================
   TaskStatusManagementPage.css
   Professional Task Status Management UI
   ========================================================= */

.taskstatus-mgmt-theme {
  --ts-primary: #005baa;
  --ts-primary-dark: #00467f;
  --ts-primary-soft: #eaf4ff;

  --ts-text: #172033;
  --ts-muted: #6b7280;
  --ts-border: #e5eaf0;
  --ts-bg: #f6f8fb;

  --ts-blue: #2563eb;
  --ts-blue-soft: #eff6ff;
  --ts-purple: #7c3aed;
  --ts-purple-soft: #f5f3ff;
  --ts-green: #16a34a;
  --ts-green-soft: #f0fdf4;
  --ts-orange: #ea580c;
  --ts-orange-soft: #fff7ed;
  --ts-red: #dc2626;
  --ts-red-soft: #fef2f2;
  --ts-cyan: #0891b2;
  --ts-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--ts-text);
  background: var(--ts-bg);
}

/* ====================== HEADING ====================== */

.taskstatus-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.taskstatus-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ts-primary);
}

.taskstatus-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.taskstatus-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.taskstatus-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ts-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.taskstatus-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--ts-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.taskstatus-heading-box h2 {
  margin: 0 0 5px;
  color: var(--ts-text);
  font-size: 27px;
  font-weight: 800;
}

.taskstatus-heading-box p {
  max-width: 780px;
  margin: 0;
  color: var(--ts-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.taskstatus-mgmt-theme .unit-header-actions,
.taskstatus-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.taskstatus-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.taskstatus-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.taskstatus-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.taskstatus-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.taskstatus-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ts-primary), #1675c8) !important;
  border: 1px solid var(--ts-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.taskstatus-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ts-red), #ef4444) !important;
  border-color: var(--ts-red) !important;
}

/* ====================== KPI CARDS ====================== */

.taskstatus-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.taskstatus-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.taskstatus-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.taskstatus-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.taskstatus-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.taskstatus-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.taskstatus-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.taskstatus-mgmt-theme .unit-stat-card strong {
  color: var(--ts-text);
  font-size: 22px;
  font-weight: 800;
}

.taskstatus-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.taskstatus-stat-blue { color: var(--ts-blue); border-color: #dbeafe !important; }
.taskstatus-stat-blue .taskstatus-stat-icon { background: var(--ts-blue-soft); }

.taskstatus-stat-purple { color: var(--ts-purple); border-color: #e9d5ff !important; }
.taskstatus-stat-purple .taskstatus-stat-icon { background: var(--ts-purple-soft); }

.taskstatus-stat-green { color: var(--ts-green); border-color: #bbf7d0 !important; }
.taskstatus-stat-green .taskstatus-stat-icon { background: var(--ts-green-soft); }

/* ====================== CARD / TWO-ROW TOOLBAR ====================== */

.taskstatus-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.taskstatus-mgmt-theme .taskstatus-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.taskstatus-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.taskstatus-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-primary);
  background: var(--ts-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.taskstatus-section-copy {
  flex: 1;
  min-width: 0;
}

.taskstatus-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.taskstatus-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.taskstatus-mgmt-theme .taskstatus-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(250px, 1.35fr)
    minmax(165px, .9fr)
    minmax(145px, .75fr)
    minmax(175px, .95fr)
    minmax(110px, .55fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.taskstatus-mgmt-theme .unit-search {
  width: 100%;
}

.taskstatus-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.taskstatus-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.taskstatus-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.taskstatus-select-wrap {
  position: relative;
  width: 100%;
}

.taskstatus-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.taskstatus-filter-select,
.taskstatus-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.taskstatus-filter-select {
  padding-left: 31px !important;
}

/* ====================== TABLE ====================== */

.taskstatus-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.taskstatus-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1180px;
  margin: 0;
  vertical-align: middle;
}

.taskstatus-mgmt-theme .unit-table thead th {
  padding: 13px 14px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.taskstatus-mgmt-theme .unit-table tbody td {
  padding: 14px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.taskstatus-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.taskstatus-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.taskstatus-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.taskstatus-color-avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--ts-primary);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  font-size: 12px;
}

.taskstatus-name-copy strong {
  display: block;
  max-width: 230px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taskstatus-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.taskstatus-code-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.taskstatus-code-chip,
.taskstatus-category-chip,
.taskstatus-custom-chip,
.taskstatus-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.taskstatus-code-chip {
  color: #175cd3;
  background: #eff8ff;
}

.taskstatus-protected-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b54708;
  font-size: 8px;
  font-weight: 700;
}

.taskstatus-category-chip {
  color: #475467;
  background: #f2f4f7;
}

.taskstatus-category-open { color: #175cd3; background: #eff8ff; }
.taskstatus-category-in_progress { color: #0e7490; background: #ecfeff; }
.taskstatus-category-waiting { color: #b54708; background: #fffaeb; }
.taskstatus-category-completed { color: #027a48; background: #ecfdf3; }
.taskstatus-category-approval { color: #6941c6; background: #f4f3ff; }
.taskstatus-category-closed { color: #344054; background: #f2f4f7; }
.taskstatus-category-cancelled { color: #b42318; background: #fef3f2; }

.taskstatus-flags-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 280px;
}

.taskstatus-flag-initial {
  color: #0e7490;
  background: #ecfeff;
}

.taskstatus-flag-terminal {
  color: #6941c6;
  background: #f4f3ff;
}

.taskstatus-flag-closed {
  color: #344054;
  background: #f2f4f7;
}

.taskstatus-custom-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.taskstatus-mgmt-theme .unit-status,
.taskstatus-status-pill {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.taskstatus-system-badge {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.taskstatus-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.taskstatus-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.taskstatus-muted {
  color: #98a2b3;
  font-size: 10px;
}

/* ====================== ACTIONS ====================== */

.taskstatus-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.taskstatus-mgmt-theme .unit-icon-btn {
  width: 33px;
  height: 33px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition: transform .2s ease;
}

.taskstatus-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.taskstatus-mgmt-theme .unit-edit {
  color: var(--ts-primary) !important;
  background: var(--ts-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.taskstatus-mgmt-theme .unit-delete {
  color: var(--ts-red) !important;
  background: var(--ts-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.taskstatus-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.taskstatus-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.taskstatus-mgmt-theme .unit-icon-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

/* ====================== EMPTY / FOOTER ====================== */

.taskstatus-mgmt-theme .unit-loader,
.taskstatus-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.taskstatus-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.taskstatus-mgmt-theme .unit-loader .spinner-border {
  color: var(--ts-primary);
}

.taskstatus-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.taskstatus-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--ts-primary);
  background: var(--ts-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.taskstatus-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.taskstatus-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.taskstatus-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.taskstatus-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.taskstatus-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.taskstatus-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.taskstatus-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--ts-primary);
  border-color: var(--ts-primary);
}

/* ====================== UNIQUE MODALS ====================== */

.taskstatus-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.taskstatus-admin-modal .modal-dialog {
  max-width: 820px;
}

.taskstatus-admin-modal-sm .modal-dialog {
  max-width: 460px;
}

.taskstatus-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.taskstatus-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.taskstatus-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.taskstatus-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.taskstatus-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.taskstatus-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.taskstatus-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.taskstatus-admin-modal .modal-body {
  padding: 20px;
}

.taskstatus-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.taskstatus-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.taskstatus-admin-modal .form-control,
.taskstatus-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.taskstatus-admin-modal textarea.form-control {
  min-height: auto;
}

.taskstatus-modal-field {
  position: relative;
}

.taskstatus-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.taskstatus-modal-field .form-control {
  padding-left: 37px;
}

.taskstatus-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.taskstatus-system-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #b42318 !important;
  font-size: 9px;
  font-weight: 700;
}

.taskstatus-color-field {
  position: relative;
}

.taskstatus-color-preview {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  background: #d0d5dd;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  pointer-events: none;
}

.taskstatus-color-field .form-control {
  padding-left: 37px;
}

.taskstatus-flags-heading {
  margin-bottom: 10px;
}

.taskstatus-flags-heading small {
  color: #7b8493;
  font-size: 10px;
}

.taskstatus-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.taskstatus-config-check {
  padding: 10px 12px 10px 36px;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 10px;
}

.taskstatus-config-check .form-check-input {
  margin-left: -22px;
}

.taskstatus-config-check .form-check-label {
  color: #475467;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.taskstatus-admin-modal .form-text {
  font-size: 9px;
  line-height: 1.45;
}

.taskstatus-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.taskstatus-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.taskstatus-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.taskstatus-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.taskstatus-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.taskstatus-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.taskstatus-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1150px) {
  .taskstatus-mgmt-theme {
    padding: 18px;
  }

  .taskstatus-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .taskstatus-mgmt-theme .taskstatus-filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .taskstatus-mgmt-theme .taskstatus-search {
    grid-column: span 2;
  }
}

@media (max-width: 800px) {
  .taskstatus-mgmt-theme {
    padding: 14px;
  }

  .taskstatus-heading-box {
    padding: 20px;
  }

  .taskstatus-heading-content {
    align-items: flex-start;
  }

  .taskstatus-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .taskstatus-heading-box h2 {
    font-size: 22px;
  }

  .taskstatus-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .taskstatus-mgmt-theme .taskstatus-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .taskstatus-mgmt-theme .taskstatus-search {
    grid-column: 1 / -1;
  }

  .taskstatus-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .taskstatus-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .taskstatus-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .taskstatus-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .taskstatus-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .taskstatus-mgmt-theme .taskstatus-filters-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .taskstatus-mgmt-theme .taskstatus-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .taskstatus-mgmt-theme *,
  .taskstatus-mgmt-theme *::before,
  .taskstatus-mgmt-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   TaskWorkflowManagementPage.css
   Professional Task Workflow Management UI
   ========================================================= */

.workflow-mgmt-theme {
  --wf-primary: #005baa;
  --wf-primary-dark: #00467f;
  --wf-primary-soft: #eaf4ff;

  --wf-text: #172033;
  --wf-muted: #6b7280;
  --wf-border: #e5eaf0;
  --wf-bg: #f6f8fb;

  --wf-blue: #2563eb;
  --wf-blue-soft: #eff6ff;
  --wf-purple: #7c3aed;
  --wf-purple-soft: #f5f3ff;
  --wf-green: #16a34a;
  --wf-green-soft: #f0fdf4;
  --wf-orange: #ea580c;
  --wf-orange-soft: #fff7ed;
  --wf-red: #dc2626;
  --wf-red-soft: #fef2f2;
  --wf-cyan: #0891b2;
  --wf-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--wf-text);
  background: var(--wf-bg);
}

/* ====================== HEADING ====================== */

.workflow-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.workflow-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--wf-primary);
}

.workflow-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.workflow-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.workflow-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--wf-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.workflow-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--wf-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.workflow-heading-box h2 {
  margin: 0 0 5px;
  color: var(--wf-text);
  font-size: 27px;
  font-weight: 800;
}

.workflow-heading-box p {
  max-width: 780px;
  margin: 0;
  color: var(--wf-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.workflow-mgmt-theme .unit-header-actions,
.workflow-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.workflow-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.workflow-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.workflow-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.workflow-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.workflow-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--wf-primary), #1675c8) !important;
  border: 1px solid var(--wf-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.workflow-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--wf-red), #ef4444) !important;
  border-color: var(--wf-red) !important;
}

/* ====================== KPI CARDS ====================== */

.workflow-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.workflow-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wf-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.workflow-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.workflow-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.workflow-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workflow-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.workflow-mgmt-theme .unit-stat-card strong {
  color: var(--wf-text);
  font-size: 22px;
  font-weight: 800;
}

.workflow-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.workflow-stat-blue { color: var(--wf-blue); border-color: #dbeafe !important; }
.workflow-stat-blue .workflow-stat-icon { background: var(--wf-blue-soft); }

.workflow-stat-purple { color: var(--wf-purple); border-color: #e9d5ff !important; }
.workflow-stat-purple .workflow-stat-icon { background: var(--wf-purple-soft); }

.workflow-stat-green { color: var(--wf-green); border-color: #bbf7d0 !important; }
.workflow-stat-green .workflow-stat-icon { background: var(--wf-green-soft); }

/* ====================== CARD / TOOLBAR ====================== */

.workflow-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wf-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.workflow-mgmt-theme .workflow-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.workflow-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.workflow-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-primary);
  background: var(--wf-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.workflow-section-copy {
  flex: 1;
  min-width: 0;
}

.workflow-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.workflow-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.workflow-mgmt-theme .workflow-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(260px, 1.45fr)
    minmax(190px, 1fr)
    minmax(160px, .8fr)
    minmax(110px, .55fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.workflow-mgmt-theme .unit-search {
  width: 100%;
}

.workflow-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.workflow-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.workflow-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.workflow-select-wrap {
  position: relative;
  width: 100%;
}

.workflow-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.workflow-filter-select,
.workflow-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.workflow-filter-select {
  padding-left: 31px !important;
}

/* ====================== TABLE ====================== */

.workflow-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.workflow-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1160px;
  margin: 0;
  vertical-align: middle;
}

.workflow-mgmt-theme .unit-table thead th {
  padding: 13px 14px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.workflow-mgmt-theme .unit-table tbody td {
  padding: 14px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.workflow-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.workflow-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.workflow-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.workflow-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-primary);
  background: var(--wf-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.workflow-name-copy strong {
  display: block;
  max-width: 230px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.workflow-code-chip,
.workflow-scope-chip,
.workflow-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.workflow-code-chip {
  color: #175cd3;
  background: #eff8ff;
}

.workflow-scope-chip {
  color: #475467;
  background: #f2f4f7;
}

.workflow-scope-global { color: #6941c6; background: #f4f3ff; }
.workflow-scope-task_type { color: #175cd3; background: #eff8ff; }
.workflow-scope-department { color: #0e7490; background: #ecfeff; }
.workflow-scope-project { color: #b54708; background: #fffaeb; }
.workflow-scope-project_module { color: #027a48; background: #ecfdf3; }
.workflow-scope-task { color: #b42318; background: #fef3f2; }

.workflow-target-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.workflow-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.workflow-default-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.workflow-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.workflow-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.workflow-muted {
  color: #98a2b3;
  font-size: 10px;
}

/* ====================== ACTIONS ====================== */

.workflow-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.workflow-mgmt-theme .unit-icon-btn {
  width: 33px;
  height: 33px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    background-color .2s ease;
}

.workflow-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.workflow-open-editor {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.workflow-open-editor:hover {
  color: #fff !important;
  background: var(--wf-purple) !important;
}

.workflow-mgmt-theme .unit-edit {
  color: var(--wf-primary) !important;
  background: var(--wf-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.workflow-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.workflow-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.workflow-mgmt-theme .unit-delete {
  color: var(--wf-red) !important;
  background: var(--wf-red-soft) !important;
  border: 1px solid #fecaca !important;
}

/* ====================== EMPTY / FOOTER ====================== */

.workflow-mgmt-theme .unit-loader,
.workflow-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.workflow-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.workflow-mgmt-theme .unit-loader .spinner-border {
  color: var(--wf-primary);
}

.workflow-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.workflow-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--wf-primary);
  background: var(--wf-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.workflow-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.workflow-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.workflow-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.workflow-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.workflow-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.workflow-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.workflow-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--wf-primary);
  border-color: var(--wf-primary);
}

/* ====================== UNIQUE MODALS ====================== */

.workflow-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.workflow-admin-modal .modal-dialog {
  max-width: 860px;
}

.workflow-admin-modal-sm .modal-dialog {
  max-width: 460px;
}

.workflow-admin-modal .modal-content {
  overflow: visible;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.workflow-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
  border-radius: 18px 18px 0 0;
}

.workflow-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workflow-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.workflow-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.workflow-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.workflow-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.workflow-admin-modal .modal-body {
  padding: 20px;
}

.workflow-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
  border-radius: 0 0 18px 18px;
}

.workflow-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.workflow-admin-modal .form-control,
.workflow-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.workflow-admin-modal textarea.form-control {
  min-height: auto;
}

.workflow-modal-field {
  position: relative;
}

.workflow-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.workflow-modal-field .form-control {
  padding-left: 37px;
}

.workflow-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.workflow-scope-block {
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 12px;
}

.workflow-admin-modal .form-text {
  font-size: 9px;
  line-height: 1.45;
}

.workflow-default-check {
  padding: 12px 14px 12px 38px;
  background: #f4f3ff;
  border: 1px solid #d9d6fe;
  border-radius: 11px;
}

.workflow-default-check .form-check-input {
  margin-left: -22px;
}

.workflow-default-check .form-check-label {
  color: #6941c6;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.workflow-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.workflow-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.workflow-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.workflow-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.workflow-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.workflow-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.workflow-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .workflow-mgmt-theme {
    padding: 18px;
  }

  .workflow-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .workflow-mgmt-theme .workflow-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-mgmt-theme .workflow-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .workflow-mgmt-theme {
    padding: 14px;
  }

  .workflow-heading-box {
    padding: 20px;
  }

  .workflow-heading-content {
    align-items: flex-start;
  }

  .workflow-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .workflow-heading-box h2 {
    font-size: 22px;
  }

  .workflow-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .workflow-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .workflow-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .workflow-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .workflow-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .workflow-mgmt-theme .workflow-filters-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .workflow-mgmt-theme .workflow-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-mgmt-theme *,
  .workflow-mgmt-theme *::before,
  .workflow-mgmt-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   TatRuleManagementPage.css
   Professional TAT Rule Management UI
   ========================================================= */

.tatrule-mgmt-theme {
  --tat-primary: #005baa;
  --tat-primary-dark: #00467f;
  --tat-primary-soft: #eaf4ff;

  --tat-text: #172033;
  --tat-muted: #6b7280;
  --tat-border: #e5eaf0;
  --tat-bg: #f6f8fb;

  --tat-blue: #2563eb;
  --tat-blue-soft: #eff6ff;
  --tat-purple: #7c3aed;
  --tat-purple-soft: #f5f3ff;
  --tat-green: #16a34a;
  --tat-green-soft: #f0fdf4;
  --tat-orange: #ea580c;
  --tat-orange-soft: #fff7ed;
  --tat-red: #dc2626;
  --tat-red-soft: #fef2f2;
  --tat-cyan: #0891b2;
  --tat-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--tat-text);
  background: var(--tat-bg);
}

/* ====================== HEADING ====================== */

.tatrule-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.tatrule-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--tat-primary);
}

.tatrule-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.tatrule-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tatrule-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--tat-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.tatrule-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--tat-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.tatrule-heading-box h2 {
  margin: 0 0 5px;
  color: var(--tat-text);
  font-size: 27px;
  font-weight: 800;
}

.tatrule-heading-box p {
  max-width: 790px;
  margin: 0;
  color: var(--tat-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.tatrule-mgmt-theme .unit-header-actions,
.tatrule-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tatrule-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.tatrule-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.tatrule-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.tatrule-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.tatrule-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tat-primary), #1675c8) !important;
  border: 1px solid var(--tat-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.tatrule-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tat-red), #ef4444) !important;
  border-color: var(--tat-red) !important;
}

/* ====================== KPI CARDS ====================== */

.tatrule-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.tatrule-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tat-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.tatrule-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.tatrule-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.tatrule-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tatrule-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tatrule-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.tatrule-mgmt-theme .unit-stat-card strong {
  color: var(--tat-text);
  font-size: 22px;
  font-weight: 800;
}

.tatrule-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.tatrule-stat-blue { color: var(--tat-blue); border-color: #dbeafe !important; }
.tatrule-stat-blue .tatrule-stat-icon { background: var(--tat-blue-soft); }

.tatrule-stat-purple { color: var(--tat-purple); border-color: #e9d5ff !important; }
.tatrule-stat-purple .tatrule-stat-icon { background: var(--tat-purple-soft); }

.tatrule-stat-green { color: var(--tat-green); border-color: #bbf7d0 !important; }
.tatrule-stat-green .tatrule-stat-icon { background: var(--tat-green-soft); }

/* ====================== MAIN CARD / TWO-ROW TOOLBAR ====================== */

.tatrule-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tat-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.tatrule-mgmt-theme .tatrule-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.tatrule-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.tatrule-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tat-primary);
  background: var(--tat-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.tatrule-section-copy {
  flex: 1;
  min-width: 0;
}

.tatrule-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.tatrule-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.tatrule-mgmt-theme .tatrule-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(260px, 1.45fr)
    minmax(210px, 1fr)
    minmax(160px, .75fr)
    minmax(110px, .55fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.tatrule-mgmt-theme .unit-search {
  width: 100%;
}

.tatrule-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.tatrule-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.tatrule-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.tatrule-select-wrap {
  position: relative;
  width: 100%;
}

.tatrule-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.tatrule-filter-select,
.tatrule-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.tatrule-filter-select {
  padding-left: 31px !important;
}

/* ====================== TABLE ====================== */

.tatrule-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.tatrule-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1320px;
  margin: 0;
  vertical-align: middle;
}

.tatrule-mgmt-theme .unit-table thead th {
  padding: 13px 14px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tatrule-mgmt-theme .unit-table tbody td {
  padding: 14px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.tatrule-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.tatrule-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.tatrule-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 215px;
}

.tatrule-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tat-primary);
  background: var(--tat-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.tatrule-name-copy strong {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tatrule-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.tatrule-scope-chip,
.tatrule-target-chip,
.tatrule-time-chip,
.tatrule-policy-chip,
.tatrule-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.tatrule-scope-chip { color: #475467; background: #f2f4f7; }
.tatrule-scope-global { color: #6941c6; background: #f4f3ff; }
.tatrule-scope-department { color: #0e7490; background: #ecfeff; }
.tatrule-scope-project { color: #b54708; background: #fffaeb; }
.tatrule-scope-project_module { color: #027a48; background: #ecfdf3; }
.tatrule-scope-task_type_priority { color: #175cd3; background: #eff8ff; }

.tatrule-target-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.tatrule-time-chip {
  color: #175cd3;
  background: #eff8ff;
  font-weight: 800;
}

.tatrule-policy-chip {
  max-width: 250px;
  color: #6941c6;
  background: #f4f3ff;
  white-space: normal;
  line-height: 1.3;
}

.tatrule-flags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 260px;
}

.tatrule-flag-approval {
  color: #b54708;
  background: #fffaeb;
}

.tatrule-flag-override {
  color: #0e7490;
  background: #ecfeff;
}

.tatrule-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.tatrule-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.tatrule-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.tatrule-muted {
  color: #98a2b3;
  font-size: 10px;
}

/* ====================== ACTIONS ====================== */

.tatrule-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.tatrule-mgmt-theme .unit-icon-btn {
  width: 33px;
  height: 33px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform .2s ease,
    color .2s ease,
    background-color .2s ease;
}

.tatrule-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.tatrule-mgmt-theme .unit-edit {
  color: var(--tat-primary) !important;
  background: var(--tat-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.tatrule-mgmt-theme .unit-delete {
  color: var(--tat-red) !important;
  background: var(--tat-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.tatrule-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.tatrule-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* ====================== EMPTY / LOADER / FOOTER ====================== */

.tatrule-mgmt-theme .unit-loader,
.tatrule-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tatrule-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.tatrule-mgmt-theme .unit-loader .spinner-border {
  color: var(--tat-primary);
}

.tatrule-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.tatrule-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--tat-primary);
  background: var(--tat-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.tatrule-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.tatrule-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.tatrule-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.tatrule-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.tatrule-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.tatrule-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.tatrule-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--tat-primary);
  border-color: var(--tat-primary);
}

/* ====================== RESOLUTION PREVIEW ====================== */

.tatrule-preview-card {
  overflow: hidden;
}

.tatrule-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  border-bottom: 1px solid #edf0f4;
}

.tatrule-preview-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tatrule-preview-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tat-purple);
  background: var(--tat-purple-soft);
  border-radius: 12px;
  font-size: 17px;
}

.tatrule-preview-title h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.tatrule-preview-title p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.tatrule-preview-readonly {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  color: #6941c6;
  background: #f4f3ff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.tatrule-preview-form {
  padding: 16px 20px 20px;
}

.tatrule-preview-form .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.tatrule-preview-form .form-select {
  min-height: 40px;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 11px;
}

.tatrule-preview-result {
  padding: 0 20px 20px;
}

.tatrule-resolution-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.55;
}

.tatrule-resolution-alert-icon {
  margin-top: 2px;
  font-size: 16px;
}

.tatrule-explanation-card {
  padding: 13px 14px;
  background: #f8fafc;
  border: 1px solid #eaecf0;
  border-radius: 12px;
}

.tatrule-explanation-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: #344054;
  font-size: 11px;
}

.tatrule-explanation-card ul {
  padding-left: 18px;
  color: #667085;
}

/* ====================== UNIQUE MODALS ====================== */

.tatrule-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.tatrule-admin-modal .modal-dialog {
  max-width: 900px;
}

.tatrule-admin-modal-sm .modal-dialog {
  max-width: 470px;
}

.tatrule-admin-modal .modal-content {
  overflow: visible;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.tatrule-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
  border-radius: 18px 18px 0 0;
}

.tatrule-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tatrule-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.tatrule-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.tatrule-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.tatrule-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.tatrule-admin-modal .modal-body {
  padding: 20px;
}

.tatrule-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
  border-radius: 0 0 18px 18px;
}

.tatrule-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.tatrule-admin-modal .form-control,
.tatrule-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 11px;
}

.tatrule-admin-modal textarea.form-control {
  min-height: auto;
}

.tatrule-modal-field {
  position: relative;
}

.tatrule-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.tatrule-modal-field .form-control {
  padding-left: 37px;
}

.tatrule-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.tatrule-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tatrule-config-check {
  padding: 11px 12px 11px 38px;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 11px;
}

.tatrule-config-check-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.tatrule-config-check .form-check-input {
  margin-left: -23px;
}

.tatrule-config-check .form-check-label {
  color: #475467;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.tatrule-override-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 9px 11px;
  color: #b42318 !important;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.tatrule-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.tatrule-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.tatrule-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.tatrule-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.tatrule-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.tatrule-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.tatrule-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1100px) {
  .tatrule-mgmt-theme {
    padding: 18px;
  }

  .tatrule-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .tatrule-mgmt-theme .tatrule-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tatrule-mgmt-theme .tatrule-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .tatrule-mgmt-theme {
    padding: 14px;
  }

  .tatrule-heading-box {
    padding: 20px;
  }

  .tatrule-heading-content {
    align-items: flex-start;
  }

  .tatrule-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .tatrule-heading-box h2 {
    font-size: 22px;
  }

  .tatrule-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .tatrule-preview-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .tatrule-config-grid {
    grid-template-columns: 1fr;
  }

  .tatrule-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .tatrule-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .tatrule-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .tatrule-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .tatrule-mgmt-theme .tatrule-filters-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .tatrule-mgmt-theme .tatrule-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tatrule-mgmt-theme *,
  .tatrule-mgmt-theme *::before,
  .tatrule-mgmt-theme *::after {
    transition: none !important;
  }
}


/* =========================================================
   FormTypeManagementPage.css
   Professional Form Type Management UI
   ========================================================= */

.formtype-mgmt-theme {
  --ft-primary: #005baa;
  --ft-primary-dark: #00467f;
  --ft-primary-soft: #eaf4ff;

  --ft-text: #172033;
  --ft-muted: #6b7280;
  --ft-border: #e5eaf0;
  --ft-bg: #f6f8fb;

  --ft-blue: #2563eb;
  --ft-blue-soft: #eff6ff;
  --ft-purple: #7c3aed;
  --ft-purple-soft: #f5f3ff;
  --ft-green: #16a34a;
  --ft-green-soft: #f0fdf4;
  --ft-orange: #ea580c;
  --ft-orange-soft: #fff7ed;
  --ft-red: #dc2626;
  --ft-red-soft: #fef2f2;
  --ft-cyan: #0891b2;
  --ft-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--ft-text);
  background: var(--ft-bg);
}

/* ====================== HEADING ====================== */

.formtype-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.formtype-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ft-primary);
}

.formtype-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.formtype-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.formtype-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ft-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.formtype-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--ft-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.formtype-heading-box h2 {
  margin: 0 0 5px;
  color: var(--ft-text);
  font-size: 27px;
  font-weight: 800;
}

.formtype-heading-box p {
  max-width: 820px;
  margin: 0;
  color: var(--ft-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.formtype-mgmt-theme .unit-header-actions,
.formtype-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.formtype-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.formtype-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.formtype-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.formtype-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.formtype-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ft-primary), #1675c8) !important;
  border: 1px solid var(--ft-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.formtype-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ft-red), #ef4444) !important;
  border-color: var(--ft-red) !important;
}

/* ====================== KPI CARDS ====================== */

.formtype-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.formtype-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ft-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.formtype-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.formtype-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.formtype-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.formtype-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formtype-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.formtype-mgmt-theme .unit-stat-card strong {
  color: var(--ft-text);
  font-size: 22px;
  font-weight: 800;
}

.formtype-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.formtype-stat-blue { color: var(--ft-blue); border-color: #dbeafe !important; }
.formtype-stat-blue .formtype-stat-icon { background: var(--ft-blue-soft); }

.formtype-stat-purple { color: var(--ft-purple); border-color: #e9d5ff !important; }
.formtype-stat-purple .formtype-stat-icon { background: var(--ft-purple-soft); }

.formtype-stat-green { color: var(--ft-green); border-color: #bbf7d0 !important; }
.formtype-stat-green .formtype-stat-icon { background: var(--ft-green-soft); }

/* ====================== CARD / TWO-ROW TOOLBAR ====================== */

.formtype-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ft-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.formtype-mgmt-theme .formtype-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.formtype-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.formtype-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ft-primary);
  background: var(--ft-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.formtype-section-copy {
  flex: 1;
  min-width: 0;
}

.formtype-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formtype-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.formtype-mgmt-theme .formtype-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(250px, 1.35fr)
    minmax(160px, .8fr)
    minmax(175px, .9fr)
    minmax(200px, 1.05fr)
    minmax(110px, .55fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.formtype-mgmt-theme .unit-search {
  width: 100%;
}

.formtype-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.formtype-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.formtype-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.formtype-select-wrap {
  position: relative;
  width: 100%;
}

.formtype-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.formtype-filter-select,
.formtype-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.formtype-filter-select {
  padding-left: 31px !important;
}

/* ====================== TABLE ====================== */

.formtype-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.formtype-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1020px;
  margin: 0;
  vertical-align: middle;
}

.formtype-mgmt-theme .unit-table thead th {
  padding: 13px 14px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.formtype-mgmt-theme .unit-table tbody td {
  padding: 14px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.formtype-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.formtype-mgmt-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.formtype-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}

.formtype-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ft-primary);
  background: var(--ft-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.formtype-name-copy {
  min-width: 0;
}

.formtype-name-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.formtype-name-line strong {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formtype-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.formtype-uat-badge {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.formtype-code-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.formtype-code-chip,
.formtype-performance-chip,
.formtype-custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.formtype-code-chip {
  color: #175cd3;
  background: #eff8ff;
}

.formtype-protected-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b54708;
  font-size: 8px;
  font-weight: 700;
}

.formtype-performance-on {
  color: #b54708;
  background: #fffaeb;
}

.formtype-performance-off {
  color: #475467;
  background: #f2f4f7;
}

.formtype-custom-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.formtype-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.formtype-system-badge {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.formtype-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.formtype-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

/* ====================== ACTIONS ====================== */

.formtype-mgmt-theme .unit-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.formtype-mgmt-theme .unit-icon-btn {
  width: 33px;
  height: 33px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  transition:
    transform .2s ease,
    color .2s ease,
    background-color .2s ease;
}

.formtype-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.formtype-mgmt-theme .unit-edit {
  color: var(--ft-primary) !important;
  background: var(--ft-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.formtype-mgmt-theme .unit-delete {
  color: var(--ft-red) !important;
  background: var(--ft-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.formtype-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.formtype-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.formtype-mgmt-theme .unit-icon-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

/* ====================== EMPTY / LOADER / FOOTER ====================== */

.formtype-mgmt-theme .unit-loader,
.formtype-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.formtype-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.formtype-mgmt-theme .unit-loader .spinner-border {
  color: var(--ft-primary);
}

.formtype-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.formtype-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--ft-primary);
  background: var(--ft-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.formtype-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formtype-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.formtype-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.formtype-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.formtype-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.formtype-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.formtype-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--ft-primary);
  border-color: var(--ft-primary);
}

/* ====================== UNIQUE MODALS ====================== */

.formtype-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.formtype-admin-modal .modal-dialog {
  max-width: 820px;
}

.formtype-admin-modal-sm .modal-dialog {
  max-width: 460px;
}

.formtype-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.formtype-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.formtype-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.formtype-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.formtype-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.formtype-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.formtype-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.formtype-admin-modal .modal-body {
  padding: 20px;
}

.formtype-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.formtype-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.formtype-admin-modal .form-control {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}

.formtype-admin-modal textarea.form-control {
  min-height: auto;
}

.formtype-modal-field {
  position: relative;
}

.formtype-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.formtype-modal-field .form-control {
  padding-left: 37px;
}

.formtype-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.formtype-system-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #b42318 !important;
  font-size: 9px;
  font-weight: 700;
}

.formtype-performance-panel {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 12px;
}

.formtype-performance-panel-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b54708;
  background: #fffaeb;
  border-radius: 10px;
  font-size: 14px;
}

.formtype-performance-panel-copy {
  min-width: 0;
}

.formtype-performance-check .form-check-label {
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.formtype-performance-panel .form-text {
  display: block;
  margin-top: 4px;
  color: #7b8493;
  font-size: 9px;
  line-height: 1.45;
}

.formtype-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.formtype-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.formtype-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.formtype-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.formtype-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.formtype-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.formtype-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1200px) {
  .formtype-mgmt-theme {
    padding: 18px;
  }

  .formtype-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .formtype-mgmt-theme .formtype-filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .formtype-mgmt-theme .formtype-search {
    grid-column: span 2;
  }
}

@media (max-width: 800px) {
  .formtype-mgmt-theme {
    padding: 14px;
  }

  .formtype-heading-box {
    padding: 20px;
  }

  .formtype-heading-content {
    align-items: flex-start;
  }

  .formtype-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .formtype-heading-box h2 {
    font-size: 22px;
  }

  .formtype-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .formtype-mgmt-theme .formtype-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formtype-mgmt-theme .formtype-search {
    grid-column: 1 / -1;
  }

  .formtype-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .formtype-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .formtype-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .formtype-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .formtype-mgmt-theme .formtype-filters-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .formtype-mgmt-theme .formtype-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formtype-mgmt-theme *,
  .formtype-mgmt-theme *::before,
  .formtype-mgmt-theme *::after {
    transition: none !important;
  }
}


/* =========================================================
   FormManagementPage.css
   Professional Form Management UI
   ========================================================= */

.form-mgmt-theme {
  --fm-primary: #005baa;
  --fm-primary-dark: #00467f;
  --fm-primary-soft: #eaf4ff;

  --fm-text: #172033;
  --fm-muted: #6b7280;
  --fm-border: #e5eaf0;
  --fm-bg: #f6f8fb;

  --fm-blue: #2563eb;
  --fm-blue-soft: #eff6ff;
  --fm-purple: #7c3aed;
  --fm-purple-soft: #f5f3ff;
  --fm-green: #16a34a;
  --fm-green-soft: #f0fdf4;
  --fm-orange: #ea580c;
  --fm-orange-soft: #fff7ed;
  --fm-red: #dc2626;
  --fm-red-soft: #fef2f2;
  --fm-cyan: #0891b2;
  --fm-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--fm-text);
  background: var(--fm-bg);
}

/* ====================== HEADING ====================== */

.form-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.form-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--fm-primary);
}

.form-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.form-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fm-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.form-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--fm-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.form-heading-box h2 {
  margin: 0 0 5px;
  color: var(--fm-text);
  font-size: 27px;
  font-weight: 800;
}

.form-heading-box p {
  max-width: 760px;
  margin: 0;
  color: var(--fm-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================== BUTTONS ====================== */

.form-mgmt-theme .unit-header-actions,
.form-mgmt-theme .unit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.form-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.form-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.form-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.form-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--fm-primary), #1675c8) !important;
  border: 1px solid var(--fm-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

.form-mgmt-theme .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--fm-red), #ef4444) !important;
  border-color: var(--fm-red) !important;
}

/* ====================== KPI CARDS ====================== */

.form-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.form-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fm-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.form-mgmt-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.form-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.form-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-mgmt-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.form-mgmt-theme .unit-stat-card strong {
  color: var(--fm-text);
  font-size: 22px;
  font-weight: 800;
}

.form-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.form-stat-blue { color: var(--fm-blue); border-color: #dbeafe !important; }
.form-stat-blue .form-stat-icon { background: var(--fm-blue-soft); }

.form-stat-purple { color: var(--fm-purple); border-color: #e9d5ff !important; }
.form-stat-purple .form-stat-icon { background: var(--fm-purple-soft); }

.form-stat-green { color: var(--fm-green); border-color: #bbf7d0 !important; }
.form-stat-green .form-stat-icon { background: var(--fm-green-soft); }

/* ====================== CARD / TWO-ROW TOOLBAR ====================== */

.form-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fm-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.form-mgmt-theme .form-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.form-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.form-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fm-primary);
  background: var(--fm-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.form-section-copy {
  flex: 1;
  min-width: 0;
}

.form-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.form-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.form-mgmt-theme .form-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(250px, 1.35fr)
    minmax(190px, 1fr)
    minmax(180px, .95fr)
    minmax(155px, .75fr)
    minmax(110px, .55fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.form-mgmt-theme .unit-search {
  width: 100%;
}

.form-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.form-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.form-mgmt-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.form-select-wrap {
  position: relative;
  width: 100%;
}

.form-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.form-filter-select,
.form-mgmt-theme .unit-page-size {
  width: 100%;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border-color: #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.form-filter-select {
  padding-left: 31px !important;
}

/* ====================== TABLE ====================== */

.form-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.form-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1250px;
  margin: 0;
  vertical-align: middle;
}

.form-mgmt-theme .unit-table thead th {
  padding: 13px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.form-mgmt-theme .unit-table tbody td {
  padding: 14px 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.form-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.form-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
}

.form-letter {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fm-primary);
  background: var(--fm-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.form-name-copy strong {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 9px;
}

.form-type-wrap,
.form-link-wrap,
.form-version-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.form-type-chip,
.form-link-chip,
.form-version-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.form-type-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.form-uat-badge {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.form-link-wrap {
  max-width: 230px;
}

.form-link-project {
  color: #175cd3;
  background: #eff8ff;
}

.form-link-module {
  color: #027a48;
  background: #ecfdf3;
}

.form-link-department {
  color: #0e7490;
  background: #ecfeff;
}

.form-version-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.form-version-published {
  color: #027a48;
  background: #ecfdf3;
}

.form-version-draft {
  color: #6941c6;
  background: #f4f3ff;
}

.form-version-wrap small {
  color: #8a94a3;
  font-size: 9px;
}

.form-mgmt-theme .unit-status {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.form-status-active {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.form-status-inactive {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.form-muted {
  color: #98a2b3;
  font-size: 9px;
}

/* ====================== ACTIONS ====================== */

.form-actions-header {
  min-width: 310px;
  width: 310px;
}

.form-actions-cell {
  min-width: 310px;
  width: 310px;
  text-align: right;
}

.form-mgmt-theme .form-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.form-mgmt-theme .unit-icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 12px;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.form-mgmt-theme .unit-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.form-action-builder {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.form-action-builder:hover {
  color: #fff !important;
  background: var(--fm-purple) !important;
}

.form-action-preview {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

.form-action-preview:hover {
  color: #fff !important;
  background: var(--fm-cyan) !important;
}

.form-mgmt-theme .unit-edit {
  color: var(--fm-primary) !important;
  background: var(--fm-primary-soft) !important;
  border: 1px solid #bdd9f2 !important;
}

.form-mgmt-theme .unit-edit:hover {
  color: #fff !important;
  background: var(--fm-primary) !important;
}

.form-action-publish {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.form-action-publish:hover {
  color: #fff !important;
  background: var(--fm-green) !important;
}

.form-action-archive {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.form-action-archive:hover {
  color: #fff !important;
  background: var(--fm-orange) !important;
}

.form-action-version {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.form-action-version:hover {
  color: #fff !important;
  background: var(--fm-blue) !important;
}

.form-toggle-off {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.form-toggle-off:hover {
  color: #fff !important;
  background: var(--fm-orange) !important;
}

.form-toggle-on {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.form-toggle-on:hover {
  color: #fff !important;
  background: var(--fm-green) !important;
}

.form-mgmt-theme .unit-delete {
  color: var(--fm-red) !important;
  background: var(--fm-red-soft) !important;
  border: 1px solid #fecaca !important;
}

.form-mgmt-theme .unit-delete:hover {
  color: #fff !important;
  background: var(--fm-red) !important;
}

.form-mgmt-theme .unit-icon-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none !important;
}

/* Every form action stays inside the Action column. */
.form-mgmt-theme .unit-table th:last-child,
.form-mgmt-theme .unit-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -8px 0 14px rgba(15, 23, 42, .04);
}

.form-mgmt-theme .unit-table th:last-child {
  z-index: 3;
  background: #0e4b5a;
  color: #fff;
}

.form-mgmt-theme .unit-table td:last-child {
  background: #fff;
}

.form-mgmt-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

/* ====================== LOADER / EMPTY / FOOTER ====================== */

.form-mgmt-theme .unit-loader,
.form-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.form-mgmt-theme .unit-loader .spinner-border {
  color: var(--fm-primary);
}

.form-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.form-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--fm-primary);
  background: var(--fm-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.form-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.form-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.form-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.form-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.form-mgmt-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.form-mgmt-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 11px;
  font-weight: 700;
}

.form-mgmt-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--fm-primary);
  border-color: var(--fm-primary);
}

/* ====================== UNIQUE MODALS ====================== */

.form-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.form-admin-modal .modal-dialog {
  max-width: 900px;
}

.form-admin-modal-sm .modal-dialog {
  max-width: 470px;
}

.form-admin-modal .modal-content {
  overflow: visible;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.form-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
  border-radius: 18px 18px 0 0;
}

.form-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.form-modal-icon-danger {
  color: #dc2626;
  background: #fef2f2;
}

.form-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.form-modal-heading .modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.form-admin-modal .modal-body {
  padding: 20px;
}

.form-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
  border-radius: 0 0 18px 18px;
}

.form-admin-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.form-admin-modal .form-control,
.form-admin-modal .form-select {
  min-height: 42px;
  color: #344054;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 11px;
}

.form-admin-modal textarea.form-control {
  min-height: auto;
}

.form-modal-field {
  position: relative;
}

.form-modal-field > i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 12px;
  pointer-events: none;
}

.form-modal-field .form-control {
  padding-left: 37px;
}

.form-modal-field-textarea > i {
  top: 14px;
  transform: none;
}

.form-scope-field .form-select {
  background-color: #f8fbff;
  border-color: #dce9f5;
}

.form-config-check {
  min-height: 100%;
  padding: 12px 12px 12px 38px;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 11px;
}

.form-config-check-approval {
  background: #fffbeb;
  border-color: #fde68a;
}

.form-config-check .form-check-input {
  margin-left: -23px;
}

.form-config-check .form-check-label {
  color: #475467;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.form-performance-override {
  padding: 12px;
  background: #f4f3ff;
  border: 1px solid #d9d6fe;
  border-radius: 11px;
}

.form-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.form-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.form-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

.form-admin-modal .unit-btn-danger {
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 1px solid #dc2626 !important;
}

.form-admin-modal-danger .modal-content {
  border-top: 4px solid #dc2626;
}

.form-archive-modal .modal-content {
  border-top: 4px solid #ea580c;
}

.form-modal-danger-visual {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 18px;
  font-size: 25px;
}

.form-admin-modal .unit-delete-text {
  margin: 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1200px) {
  .form-mgmt-theme {
    padding: 18px;
  }

  .form-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-mgmt-theme .form-filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-mgmt-theme .form-search {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  .form-mgmt-theme {
    padding: 14px;
  }

  .form-heading-box {
    padding: 20px;
  }

  .form-heading-content {
    align-items: flex-start;
  }

  .form-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .form-heading-box h2 {
    font-size: 22px;
  }

  .form-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .form-mgmt-theme .form-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-mgmt-theme .form-search {
    grid-column: 1 / -1;
  }

  .form-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .form-mgmt-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .form-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .form-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .form-mgmt-theme .form-filters-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .form-mgmt-theme .form-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-mgmt-theme *,
  .form-mgmt-theme *::before,
  .form-mgmt-theme *::after {
    transition: none !important;
  }
}


/* FORM ACTION COLUMN RESPONSIVE FIX */
@media (max-width: 900px) {
  .form-actions-header,
  .form-actions-cell {
    min-width: 290px;
    width: 290px;
  }

  .form-mgmt-theme .form-actions {
    gap: 5px;
  }

  .form-mgmt-theme .unit-icon-btn {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}


/* =========================================================
   FINAL COMPACT ACTION COLUMN OVERRIDE
   All row actions remain icon-only and inside Actions column.
   ========================================================= */

.form-mgmt-theme .form-actions-header,
.form-mgmt-theme .form-actions-cell {
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
}

.form-mgmt-theme .form-actions-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
  overflow: hidden !important;
}

.form-mgmt-theme .form-actions {
  width: 100% !important;
  max-width: 248px !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: hidden !important;
}

.form-mgmt-theme .form-actions .unit-icon-btn {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.form-mgmt-theme .form-actions .unit-icon-btn i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.form-mgmt-theme .form-actions .spinner-border {
  width: 11px !important;
  height: 11px !important;
  border-width: 1.5px !important;
}

/* Never allow Bootstrap/global button rules to stretch row actions. */
.form-mgmt-theme .form-actions .btn,
.form-mgmt-theme .form-actions button {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* Sticky Actions column */
.form-mgmt-theme .unit-table th.form-actions-header,
.form-mgmt-theme .unit-table td.form-actions-cell {
  position: sticky !important;
  right: 0 !important;
}

.form-mgmt-theme .unit-table th.form-actions-header {
  z-index: 6 !important;
  text-align: center !important;
  background: #0e4b5a !important;
  color: #ffffff !important;
}

.form-mgmt-theme .unit-table td.form-actions-cell {
  z-index: 5 !important;
  background: #ffffff !important;
  box-shadow: -7px 0 12px rgba(15, 23, 42, 0.06) !important;
}

.form-mgmt-theme .unit-table tbody tr:hover td.form-actions-cell {
  background: #fbfdff !important;
}

/* Remove any legacy wide text-action styling if old global CSS is still loaded. */
.form-mgmt-theme .form-text-btn,
.form-mgmt-theme .form-publish-btn,
.form-mgmt-theme .form-archive-btn,
.form-mgmt-theme .form-version-btn {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

/* Compact table row */
.form-mgmt-theme .unit-table tbody td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Actions stay horizontal; table scrolls instead of buttons escaping the cell. */
.form-mgmt-theme .unit-table {
  min-width: 1180px !important;
}

@media (max-width: 900px) {
  .form-mgmt-theme .form-actions-header,
  .form-mgmt-theme .form-actions-cell {
    width: 244px !important;
    min-width: 244px !important;
    max-width: 244px !important;
  }

  .form-mgmt-theme .form-actions {
    max-width: 228px !important;
    gap: 3px !important;
  }

  .form-mgmt-theme .form-actions .unit-icon-btn,
  .form-mgmt-theme .form-actions .btn,
  .form-mgmt-theme .form-actions button {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    flex-basis: 26px !important;
  }
}



/* =========================================================
   AdminFormAssignmentsPage.css
   Professional Form Assignment Management UI
   ========================================================= */

.formassign-mgmt-theme {
  --fa-primary: #005baa;
  --fa-primary-dark: #00467f;
  --fa-primary-soft: #eaf4ff;

  --fa-text: #172033;
  --fa-muted: #6b7280;
  --fa-border: #e5eaf0;
  --fa-bg: #f6f8fb;

  --fa-blue: #2563eb;
  --fa-blue-soft: #eff6ff;
  --fa-purple: #7c3aed;
  --fa-purple-soft: #f5f3ff;
  --fa-green: #16a34a;
  --fa-green-soft: #f0fdf4;
  --fa-orange: #ea580c;
  --fa-orange-soft: #fff7ed;
  --fa-red: #dc2626;
  --fa-red-soft: #fef2f2;
  --fa-cyan: #0891b2;
  --fa-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--fa-text);
  background: var(--fa-bg);
}

/* ====================== HEADING ====================== */

.formassign-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.formassign-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--fa-primary);
}

.formassign-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.formassign-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.formassign-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fa-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.formassign-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--fa-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.formassign-heading-box h2 {
  margin: 0 0 5px;
  color: var(--fa-text);
  font-size: 27px;
  font-weight: 800;
}

.formassign-heading-box p {
  margin: 0;
  color: var(--fa-muted);
  font-size: 14px;
  line-height: 1.5;
}

.formassign-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.formassign-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.formassign-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.formassign-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.formassign-mgmt-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--fa-primary), #1675c8) !important;
  border: 1px solid var(--fa-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .2);
}

/* ====================== SUMMARY CARDS ====================== */

.formassign-summary-wrap {
  margin-bottom: 22px;
}

/* Works with the existing shared summary component if it uses unit-stat classes. */
.formassign-summary-wrap .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.formassign-summary-wrap .unit-stat-card {
  border-radius: 16px;
  border: 1px solid var(--fa-border);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .22s ease, box-shadow .22s ease;
}

.formassign-summary-wrap .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

/* ====================== MAIN CARD / TWO-ROW TOOLBAR ====================== */

.formassign-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fa-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.formassign-mgmt-theme .formassign-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.formassign-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.formassign-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fa-primary);
  background: var(--fa-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.formassign-section-copy {
  flex: 1;
  min-width: 0;
}

.formassign-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formassign-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
  line-height: 1.45;
}

/* ====================== FILTERS ====================== */

.admin-assignments-filter-row {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.5fr)
    minmax(180px, .8fr)
    minmax(220px, 1fr);
  gap: 12px;
  padding: 14px 20px 16px;
  background: #fff;
}

.formassign-filter-group {
  min-width: 0;
}

.formassign-filter-group .form-label {
  margin: 0 0 6px !important;
  color: #667085;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.formassign-search {
  width: 100%;
}

.formassign-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.formassign-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.formassign-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.formassign-clear-btn:hover {
  color: var(--fa-red) !important;
  background: #fff7f7 !important;
}

.formassign-select-wrap {
  position: relative;
}

.formassign-select-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.formassign-select-wrap .form-select {
  min-height: 40px;
  padding-left: 32px;
  color: #374151;
  background-color: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

/* ====================== TABLE ====================== */

.formassign-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.formassign-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1180px;
  margin: 0;
  vertical-align: middle;
}

.formassign-mgmt-theme .unit-table thead th {
  padding: 13px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.formassign-mgmt-theme .unit-table tbody td {
  padding: 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 11px;
  vertical-align: middle;
}

.formassign-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.formassign-id-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 26px;
  padding: 4px 7px;
  color: #475467;
  background: #f2f4f7;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
}

.formassign-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.formassign-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fa-primary);
  background: var(--fa-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.formassign-name-copy {
  min-width: 0;
}

.formassign-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.formassign-title-line strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formassign-name-copy small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 9px;
}

.formassign-mandatory-badge {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.formassign-scope-wrap,
.formassign-recipient-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.formassign-scope-chip,
.formassign-module-chip,
.formassign-due-chip,
.formassign-recipient-count,
.formassign-submitted-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.formassign-scope-chip {
  color: #175cd3;
  background: #eff8ff;
}

.formassign-module-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.formassign-due-chip {
  color: #b54708;
  background: #fffaeb;
}

.formassign-recipient-count {
  color: #0e7490;
  background: #ecfeff;
}

.formassign-submitted-count {
  color: #027a48;
  background: #ecfdf3;
}

.formassign-muted {
  color: #98a2b3;
  font-size: 9px;
}

.formassign-status-badge {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-transform: capitalize;
}

/* ====================== COMPACT MANAGE COLUMN ====================== */

.formassign-actions-header,
.formassign-actions-cell {
  width: 170px;
  min-width: 170px;
  max-width: 170px;
}

.formassign-actions-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.formassign-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 5px;
}

.formassign-action-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.formassign-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.formassign-action-btn i {
  margin: 0 !important;
  font-size: 10px;
}

.formassign-action-btn .spinner-border {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

.formassign-action-recipients {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.formassign-action-recipients:hover {
  color: #fff !important;
  background: var(--fa-blue) !important;
}

.formassign-action-activate {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.formassign-action-activate:hover {
  color: #fff !important;
  background: var(--fa-green) !important;
}

.formassign-action-close {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

.formassign-action-close:hover {
  color: #fff !important;
  background: #475467 !important;
}

.formassign-action-cancel {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.formassign-action-cancel:hover {
  color: #fff !important;
  background: var(--fa-red) !important;
}

.formassign-action-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none !important;
}

/* Manage remains visible while data columns scroll. */
.formassign-mgmt-theme .unit-table th.formassign-actions-header,
.formassign-mgmt-theme .unit-table td.formassign-actions-cell {
  position: sticky;
  right: 0;
}

.formassign-mgmt-theme .unit-table th.formassign-actions-header {
  z-index: 5;
  text-align: center !important;
  background: #0e4b5a;
  color: #fff;
}

.formassign-mgmt-theme .unit-table td.formassign-actions-cell {
  z-index: 4;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .045);
}

.formassign-mgmt-theme .unit-table tbody tr:hover td.formassign-actions-cell {
  background: #fbfdff;
}

/* ====================== LOADER / EMPTY ====================== */

.formassign-mgmt-theme .unit-loader,
.formassign-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.formassign-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.formassign-mgmt-theme .unit-loader .spinner-border {
  color: var(--fa-primary);
}

.formassign-page-loader {
  min-height: 60vh !important;
}

.formassign-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.formassign-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--fa-primary);
  background: var(--fa-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.formassign-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formassign-mgmt-theme .unit-empty p {
  max-width: 520px;
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

.formassign-access-denied {
  min-height: 60vh !important;
}

/* ====================== FOOTER / PAGINATION ====================== */

.formassign-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.formassign-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.formassign-pagination {
  display: flex;
  align-items: center;
  gap: 7px;
}

.formassign-page-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: #475467 !important;
  background: #fff !important;
  border: 1px solid #e0e5eb !important;
  border-radius: 8px !important;
  font-size: 10px;
}

.formassign-page-btn:hover:not(:disabled) {
  color: #fff !important;
  background: var(--fa-primary) !important;
  border-color: var(--fa-primary) !important;
}

.formassign-page-btn:disabled {
  opacity: .45;
}

.formassign-page-number {
  min-width: 60px;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1150px) {
  .formassign-mgmt-theme {
    padding: 18px;
  }

  .formassign-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .formassign-summary-wrap .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-assignments-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formassign-search-group {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .formassign-mgmt-theme {
    padding: 14px;
  }

  .formassign-heading-box {
    padding: 20px;
  }

  .formassign-heading-content {
    align-items: flex-start;
  }

  .formassign-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .formassign-heading-box h2 {
    font-size: 22px;
  }

  .formassign-summary-wrap .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .formassign-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .formassign-mgmt-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .formassign-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .formassign-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .admin-assignments-filter-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .formassign-search-group {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formassign-mgmt-theme *,
  .formassign-mgmt-theme *::before,
  .formassign-mgmt-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   FormsAssignedByMePage.css
   Professional "Forms Assigned By Me" UI
   ========================================================= */

.formsbyme-theme {
  --fbm-primary: #005baa;
  --fbm-primary-dark: #00467f;
  --fbm-primary-soft: #eaf4ff;

  --fbm-text: #172033;
  --fbm-muted: #6b7280;
  --fbm-border: #e5eaf0;
  --fbm-bg: #f6f8fb;

  --fbm-blue: #2563eb;
  --fbm-blue-soft: #eff6ff;
  --fbm-purple: #7c3aed;
  --fbm-purple-soft: #f5f3ff;
  --fbm-green: #16a34a;
  --fbm-green-soft: #f0fdf4;
  --fbm-orange: #ea580c;
  --fbm-orange-soft: #fff7ed;
  --fbm-red: #dc2626;
  --fbm-red-soft: #fef2f2;
  --fbm-cyan: #0891b2;
  --fbm-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--fbm-text);
  background: var(--fbm-bg);
}

/* ====================== HEADING ====================== */

.formsbyme-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.formsbyme-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--fbm-primary);
}

.formsbyme-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.formsbyme-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.formsbyme-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fbm-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.formsbyme-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--fbm-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.formsbyme-heading-box h2 {
  margin: 0 0 5px;
  color: var(--fbm-text);
  font-size: 27px;
  font-weight: 800;
}

.formsbyme-heading-box p {
  margin: 0;
  color: var(--fbm-muted);
  font-size: 14px;
  line-height: 1.5;
}

.formsbyme-theme .unit-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Header scope selector */
.formsbyme-scope-wrap {
  position: relative;
  width: 190px;
}

.formsbyme-scope-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  transform: translateY(-50%);
  color: #7b8493;
  font-size: 11px;
  pointer-events: none;
}

.formsbyme-scope-select {
  min-height: 40px;
  padding-left: 34px !important;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

/* ====================== BUTTONS ====================== */

.formsbyme-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.formsbyme-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

/* ====================== KPI CARDS ====================== */

.formsbyme-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.formsbyme-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fbm-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.formsbyme-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.formsbyme-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.formsbyme-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.formsbyme-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formsbyme-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.formsbyme-theme .unit-stat-card strong {
  color: var(--fbm-text);
  font-size: 22px;
  font-weight: 800;
}

.formsbyme-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.formsbyme-stat-blue { color: var(--fbm-blue); border-color: #dbeafe !important; }
.formsbyme-stat-blue .formsbyme-stat-icon { background: var(--fbm-blue-soft); }

.formsbyme-stat-purple { color: var(--fbm-purple); border-color: #e9d5ff !important; }
.formsbyme-stat-purple .formsbyme-stat-icon { background: var(--fbm-purple-soft); }

.formsbyme-stat-green { color: var(--fbm-green); border-color: #bbf7d0 !important; }
.formsbyme-stat-green .formsbyme-stat-icon { background: var(--fbm-green-soft); }

/* ====================== MAIN CARD / TOOLBAR ====================== */

.formsbyme-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fbm-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.formsbyme-theme .formsbyme-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.formsbyme-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.formsbyme-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fbm-primary);
  background: var(--fbm-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.formsbyme-section-copy {
  flex: 1;
  min-width: 0;
}

.formsbyme-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formsbyme-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.formsbyme-theme .formsbyme-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(280px, 1.5fr) minmax(190px, .75fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.formsbyme-search {
  width: 100%;
}

.formsbyme-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.formsbyme-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.formsbyme-theme .unit-clear-btn {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.formsbyme-select-wrap {
  position: relative;
  width: 100%;
}

.formsbyme-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.formsbyme-filter-select {
  width: 100%;
  min-height: 40px;
  padding-left: 31px !important;
  color: #374151;
  background-color: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

/* ====================== TABLE ====================== */

.formsbyme-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.formsbyme-theme .unit-table {
  width: 100%;
  min-width: 1720px;
  margin: 0;
  vertical-align: middle;
}

.formsbyme-theme .unit-table thead th {
  padding: 13px 11px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.formsbyme-theme .unit-table tbody td {
  padding: 11px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 10px;
  vertical-align: middle;
}

.formsbyme-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.formsbyme-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 220px;
}

.formsbyme-letter {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fbm-primary);
  background: var(--fbm-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.formsbyme-name-copy strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formsbyme-name-copy small {
  display: block;
  margin-top: 2px;
  color: #8a94a3;
  font-size: 8px;
}

.formsbyme-scope-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 220px;
}

.formsbyme-project-chip,
.formsbyme-module-chip,
.formsbyme-type-chip,
.formsbyme-count-chip,
.formsbyme-overdue-chip,
.formsbyme-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.formsbyme-project-chip {
  color: #175cd3;
  background: #eff8ff;
}

.formsbyme-module-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.formsbyme-form-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 5px 8px;
  color: #344054;
  background: #f8fafc;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.formsbyme-form-chip span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.formsbyme-form-chip small {
  color: #98a2b3;
  font-size: 7px;
}

.formsbyme-type-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.formsbyme-count-chip {
  justify-content: center;
  min-width: 38px;
}

.formsbyme-count-assigned { color: #175cd3; background: #eff8ff; }
.formsbyme-count-pending { color: #b54708; background: #fffaeb; }
.formsbyme-count-progress { color: #0e7490; background: #ecfeff; }
.formsbyme-count-submitted { color: #6941c6; background: #f4f3ff; }
.formsbyme-count-completed { color: #027a48; background: #ecfdf3; }
.formsbyme-count-zero { color: #667085; background: #f2f4f7; }

.formsbyme-overdue-chip {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
}

.formsbyme-date-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.formsbyme-due-chip {
  color: #b54708;
  background: #fffaeb;
  border-color: #fedf89;
}

.formsbyme-status-badge {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7px !important;
  font-weight: 800 !important;
}

.formsbyme-muted {
  color: #98a2b3;
  font-size: 8px;
}

/* ====================== SMALL ACTION COLUMN ====================== */

.formsbyme-actions-header,
.formsbyme-actions-cell {
  width: 84px;
  min-width: 84px;
  max-width: 84px;
}

.formsbyme-actions-cell {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

.formsbyme-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 4px;
}

.formsbyme-action-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.formsbyme-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.formsbyme-action-btn i {
  margin: 0 !important;
  font-size: 10px;
}

.formsbyme-action-btn .spinner-border {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

.formsbyme-action-users {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.formsbyme-action-users:hover {
  color: #fff !important;
  background: var(--fbm-blue) !important;
}

.formsbyme-action-close {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

.formsbyme-action-close:hover {
  color: #fff !important;
  background: #475467 !important;
}

.formsbyme-action-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

/* Keep Actions visible while the many progress columns scroll. */
.formsbyme-theme .unit-table th.formsbyme-actions-header,
.formsbyme-theme .unit-table td.formsbyme-actions-cell {
  position: sticky;
  right: 0;
}

.formsbyme-theme .unit-table th.formsbyme-actions-header {
  z-index: 5;
  background: #0e4b5a;
  color: #fff;
  text-align: center !important;
}

.formsbyme-theme .unit-table td.formsbyme-actions-cell {
  z-index: 4;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.formsbyme-theme .unit-table tbody tr:hover td.formsbyme-actions-cell {
  background: #fbfdff;
}

/* ====================== EMPTY / LOADER / FOOTER ====================== */

.formsbyme-theme .unit-loader,
.formsbyme-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.formsbyme-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.formsbyme-theme .unit-loader .spinner-border {
  color: var(--fbm-primary);
}

.formsbyme-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.formsbyme-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--fbm-primary);
  background: var(--fbm-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.formsbyme-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formsbyme-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.formsbyme-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.formsbyme-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.formsbyme-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.formsbyme-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.formsbyme-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--fbm-primary);
  border-color: var(--fbm-primary);
}

/* ====================== USERS MODAL ====================== */

.formsbyme-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.formsbyme-admin-modal .modal-dialog {
  max-width: 760px;
}

.formsbyme-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.formsbyme-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.formsbyme-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.formsbyme-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fbm-primary);
  background: var(--fbm-primary-soft);
  border-radius: 13px;
  font-size: 17px;
}

.formsbyme-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.formsbyme-modal-heading .modal-title {
  max-width: 560px;
  overflow: hidden;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formsbyme-admin-modal .modal-body {
  padding: 18px;
}

.formsbyme-admin-modal .modal-footer {
  padding: 13px 18px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.formsbyme-user-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding: 12px 14px !important;
  border-color: #edf0f4 !important;
}

.formsbyme-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.formsbyme-user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fbm-primary);
  background: var(--fbm-primary-soft);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 900;
}

.formsbyme-user-info strong {
  display: block;
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
}

.formsbyme-user-info small {
  display: block;
  margin-top: 1px;
  color: #98a2b3;
  font-size: 8px;
}

.formsbyme-user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.formsbyme-user-status {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border-radius: 999px !important;
  font-size: 7px !important;
}

.formsbyme-user-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #667085;
  font-size: 8px;
}

.formsbyme-user-cancel {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: var(--fbm-red) !important;
  background: var(--fbm-red-soft) !important;
  border: 1px solid #fecaca !important;
  border-radius: 8px !important;
}

.formsbyme-user-cancel:hover {
  color: #fff !important;
  background: var(--fbm-red) !important;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .formsbyme-theme {
    padding: 18px;
  }

  .formsbyme-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .formsbyme-theme .unit-header-actions {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .formsbyme-theme {
    padding: 14px;
  }

  .formsbyme-heading-box {
    padding: 20px;
  }

  .formsbyme-heading-content {
    align-items: flex-start;
  }

  .formsbyme-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .formsbyme-heading-box h2 {
    font-size: 22px;
  }

  .formsbyme-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .formsbyme-theme .formsbyme-filters-row {
    grid-template-columns: 1fr;
  }

  .formsbyme-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .formsbyme-theme .unit-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .formsbyme-scope-wrap {
    width: 100%;
  }

  .formsbyme-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .formsbyme-theme .formsbyme-filters-row {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formsbyme-theme *,
  .formsbyme-theme *::before,
  .formsbyme-theme *::after {
    transition: none !important;
  }
}





/* =========================================================
   AdminReviewFormsPage.css
   Professional Review Forms UI
   ========================================================= */

.reviewforms-mgmt-theme {
  --rf-primary: #005baa;
  --rf-primary-dark: #00467f;
  --rf-primary-soft: #eaf4ff;

  --rf-text: #172033;
  --rf-muted: #6b7280;
  --rf-border: #e5eaf0;
  --rf-bg: #f6f8fb;

  --rf-blue: #2563eb;
  --rf-blue-soft: #eff6ff;
  --rf-purple: #7c3aed;
  --rf-purple-soft: #f5f3ff;
  --rf-green: #16a34a;
  --rf-green-soft: #f0fdf4;
  --rf-orange: #ea580c;
  --rf-orange-soft: #fff7ed;
  --rf-red: #dc2626;
  --rf-red-soft: #fef2f2;
  --rf-cyan: #0891b2;
  --rf-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--rf-text);
  background: var(--rf-bg);
}

/* ====================== HEADING ====================== */

.reviewforms-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.reviewforms-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--rf-primary);
}

.reviewforms-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.reviewforms-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviewforms-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--rf-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.reviewforms-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--rf-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.reviewforms-heading-box h2 {
  margin: 0 0 5px;
  color: var(--rf-text);
  font-size: 27px;
  font-weight: 800;
}

.reviewforms-heading-box p {
  margin: 0;
  color: var(--rf-muted);
  font-size: 14px;
  line-height: 1.5;
}

.reviewforms-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 1;
}

/* ====================== BUTTONS ====================== */

.reviewforms-mgmt-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.reviewforms-mgmt-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.reviewforms-mgmt-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

/* ====================== SUMMARY CARDS ====================== */

.reviewforms-summary-wrap {
  margin-bottom: 22px;
}

.reviewforms-summary-wrap .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.reviewforms-summary-wrap .unit-stat-card {
  border-radius: 16px;
  border: 1px solid var(--rf-border);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .22s ease, box-shadow .22s ease;
}

.reviewforms-summary-wrap .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

/* ====================== MAIN CARD / TOOLBAR ====================== */

.reviewforms-mgmt-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.reviewforms-mgmt-theme .reviewforms-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.reviewforms-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.reviewforms-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-primary);
  background: var(--rf-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.reviewforms-section-copy {
  flex: 1;
  min-width: 0;
}

.reviewforms-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.reviewforms-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FILTERS ====================== */

.reviewforms-filters-row {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.4fr)
    minmax(150px, .7fr)
    minmax(180px, .85fr)
    minmax(190px, .9fr)
    auto;
  gap: 10px;
  align-items: end;
  padding: 14px 20px 16px;
  background: #fff;
}

.reviewforms-filter-group {
  min-width: 0;
}

.reviewforms-filter-group .form-label {
  margin: 0 0 6px !important;
  color: #667085;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.reviewforms-search {
  width: 100%;
}

.reviewforms-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.reviewforms-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.reviewforms-clear-search {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.reviewforms-select-wrap {
  position: relative;
}

.reviewforms-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.reviewforms-select-wrap .form-select {
  min-height: 40px;
  padding-left: 31px;
  color: #374151;
  background-color: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.reviewforms-clear-filters-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px !important;
  color: #475467 !important;
  background: #f8fafc !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

/* ====================== TABLE ====================== */

.reviewforms-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.reviewforms-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1040px;
  margin: 0;
  vertical-align: middle;
}

.reviewforms-mgmt-theme .unit-table thead th {
  padding: 13px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.reviewforms-mgmt-theme .unit-table tbody td {
  padding: 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 10px;
  vertical-align: middle;
}

.reviewforms-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.reviewforms-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 290px;
}

.reviewforms-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-primary);
  background: var(--rf-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.reviewforms-name-copy {
  min-width: 0;
}

.reviewforms-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.reviewforms-title-line strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewforms-name-copy small {
  display: block;
  margin-top: 3px;
  color: #8a94a3;
  font-size: 9px;
}

.reviewforms-mandatory-badge {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
  border-radius: 999px !important;
  font-size: 7px !important;
  font-weight: 800 !important;
}

.reviewforms-person-chip,
.reviewforms-project-chip,
.reviewforms-module-chip,
.reviewforms-due-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.reviewforms-person-chip {
  color: #0e7490;
  background: #ecfeff;
}

.reviewforms-scope-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.reviewforms-project-chip {
  color: #175cd3;
  background: #eff8ff;
}

.reviewforms-module-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.reviewforms-due-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.reviewforms-due-overdue {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.reviewforms-status-badge {
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.reviewforms-muted {
  color: #98a2b3;
  font-size: 9px;
}

/* ====================== COMPACT ACTION COLUMN ====================== */

.reviewforms-actions-header,
.reviewforms-actions-cell {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

.reviewforms-actions-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.reviewforms-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 5px;
}

.reviewforms-action-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.reviewforms-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.reviewforms-action-btn i {
  margin: 0 !important;
  font-size: 10px;
}

.reviewforms-action-btn .spinner-border {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

.reviewforms-action-start {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.reviewforms-action-start:hover {
  color: #fff !important;
  background: var(--rf-green) !important;
}

.reviewforms-action-continue {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.reviewforms-action-continue:hover {
  color: #fff !important;
  background: var(--rf-orange) !important;
}

.reviewforms-action-view {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.reviewforms-action-view:hover {
  color: #fff !important;
  background: var(--rf-blue) !important;
}

.reviewforms-action-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

/* Action column stays visible while data scrolls horizontally. */
.reviewforms-mgmt-theme .unit-table th.reviewforms-actions-header,
.reviewforms-mgmt-theme .unit-table td.reviewforms-actions-cell {
  position: sticky;
  right: 0;
}

.reviewforms-mgmt-theme .unit-table th.reviewforms-actions-header {
  z-index: 5;
  background: #0e4b5a;
  color: #fff;
  text-align: center !important;
}

.reviewforms-mgmt-theme .unit-table td.reviewforms-actions-cell {
  z-index: 4;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.reviewforms-mgmt-theme .unit-table tbody tr:hover td.reviewforms-actions-cell {
  background: #fbfdff;
}

/* ====================== LOADER / EMPTY ====================== */

.reviewforms-mgmt-theme .unit-loader,
.reviewforms-mgmt-theme .unit-empty {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reviewforms-mgmt-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.reviewforms-mgmt-theme .unit-loader .spinner-border {
  color: var(--rf-primary);
}

.reviewforms-mgmt-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.reviewforms-mgmt-theme .unit-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  color: var(--rf-primary);
  background: var(--rf-primary-soft);
  border-radius: 18px;
  font-size: 24px;
}

.reviewforms-mgmt-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.reviewforms-mgmt-theme .unit-empty p {
  margin: 0 0 16px;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.reviewforms-mgmt-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.reviewforms-mgmt-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.reviewforms-pagination {
  display: flex;
  align-items: center;
  gap: 7px;
}

.reviewforms-page-btn {
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: #475467 !important;
  background: #fff !important;
  border: 1px solid #e0e5eb !important;
  border-radius: 8px !important;
  font-size: 10px;
}

.reviewforms-page-btn:hover:not(:disabled) {
  color: #fff !important;
  background: var(--rf-primary) !important;
  border-color: var(--rf-primary) !important;
}

.reviewforms-page-btn:disabled {
  opacity: .45;
}

.reviewforms-page-number {
  min-width: 60px;
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1200px) {
  .reviewforms-mgmt-theme {
    padding: 18px;
  }

  .reviewforms-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewforms-summary-wrap .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviewforms-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviewforms-search-group {
    grid-column: 1 / -1;
  }

  .reviewforms-clear-filters-btn {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .reviewforms-mgmt-theme {
    padding: 14px;
  }

  .reviewforms-heading-box {
    padding: 20px;
  }

  .reviewforms-heading-content {
    align-items: flex-start;
  }

  .reviewforms-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .reviewforms-heading-box h2 {
    font-size: 22px;
  }

  .reviewforms-summary-wrap .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .reviewforms-filters-row {
    grid-template-columns: 1fr;
  }

  .reviewforms-search-group {
    grid-column: auto;
  }

  .reviewforms-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .reviewforms-heading-box .unit-header-actions {
    width: 100%;
  }

  .reviewforms-heading-box .unit-header-actions .unit-btn {
    width: 100%;
  }

  .reviewforms-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .reviewforms-filters-row {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviewforms-mgmt-theme *,
  .reviewforms-mgmt-theme *::before,
  .reviewforms-mgmt-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   FormReviewQueuePage.css
   Professional Form Review Queue UI
   ========================================================= */

.reviewqueue-theme {
  --rq-primary: #005baa;
  --rq-primary-soft: #eaf4ff;
  --rq-text: #172033;
  --rq-muted: #6b7280;
  --rq-border: #e5eaf0;
  --rq-bg: #f6f8fb;

  --rq-blue: #2563eb;
  --rq-blue-soft: #eff6ff;
  --rq-purple: #7c3aed;
  --rq-purple-soft: #f5f3ff;
  --rq-green: #16a34a;
  --rq-green-soft: #f0fdf4;
  --rq-orange: #ea580c;
  --rq-orange-soft: #fff7ed;
  --rq-red: #dc2626;
  --rq-red-soft: #fef2f2;
  --rq-cyan: #0891b2;
  --rq-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--rq-text);
  background: var(--rq-bg);
}

/* ====================== HEADING ====================== */

.reviewqueue-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.reviewqueue-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--rq-primary);
}

.reviewqueue-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.reviewqueue-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviewqueue-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--rq-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.reviewqueue-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--rq-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.reviewqueue-heading-box h2 {
  margin: 0 0 5px;
  color: var(--rq-text);
  font-size: 27px;
  font-weight: 800;
}

.reviewqueue-heading-box p {
  max-width: 820px;
  margin: 0;
  color: var(--rq-muted);
  font-size: 14px;
  line-height: 1.5;
}

.reviewqueue-theme .unit-header-actions {
  position: relative;
  z-index: 1;
}

/* ====================== BUTTONS ====================== */

.reviewqueue-theme .unit-btn,
.reviewqueue-admin-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.reviewqueue-theme .unit-btn-light,
.reviewqueue-admin-modal .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.reviewqueue-theme .unit-btn-primary,
.reviewqueue-admin-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #005baa, #1675c8) !important;
  border: 1px solid #005baa !important;
}

/* ====================== KPI CARDS ====================== */

.reviewqueue-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.reviewqueue-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rq-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.reviewqueue-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.reviewqueue-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.reviewqueue-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reviewqueue-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reviewqueue-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.reviewqueue-theme .unit-stat-card strong {
  color: var(--rq-text);
  font-size: 22px;
  font-weight: 800;
}

.reviewqueue-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.reviewqueue-stat-blue { color: var(--rq-blue); border-color: #dbeafe !important; }
.reviewqueue-stat-blue .reviewqueue-stat-icon { background: var(--rq-blue-soft); }

.reviewqueue-stat-purple { color: var(--rq-purple); border-color: #e9d5ff !important; }
.reviewqueue-stat-purple .reviewqueue-stat-icon { background: var(--rq-purple-soft); }

.reviewqueue-stat-green { color: var(--rq-green); border-color: #bbf7d0 !important; }
.reviewqueue-stat-green .reviewqueue-stat-icon { background: var(--rq-green-soft); }

/* ====================== MAIN CARD / TOOLBAR ====================== */

.reviewqueue-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rq-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.reviewqueue-theme .reviewqueue-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.reviewqueue-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.reviewqueue-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reviewqueue-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rq-primary);
  background: var(--rq-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.reviewqueue-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.reviewqueue-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.reviewqueue-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.reviewqueue-tab {
  min-height: 34px;
  padding: 6px 10px !important;
  color: #475467 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 9px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.reviewqueue-tab-active {
  color: #fff !important;
  background: var(--rq-primary) !important;
  border-color: var(--rq-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, .16);
}

.reviewqueue-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(280px, 1.5fr)
    minmax(190px, .9fr)
    minmax(190px, .9fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.reviewqueue-search {
  width: 100%;
}

.reviewqueue-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.reviewqueue-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.reviewqueue-clear-search {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.reviewqueue-select-wrap {
  position: relative;
}

.reviewqueue-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.reviewqueue-filter-select {
  min-height: 40px;
  padding-left: 31px !important;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

/* ====================== TABLE ====================== */

.reviewqueue-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.reviewqueue-theme .unit-table {
  width: 100%;
  min-width: 1160px;
  margin: 0;
  vertical-align: middle;
}

.reviewqueue-theme .unit-table thead th {
  padding: 13px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.reviewqueue-theme .unit-table tbody td {
  padding: 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 10px;
  vertical-align: middle;
}

.reviewqueue-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.reviewqueue-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}

.reviewqueue-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rq-primary);
  background: var(--rq-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.reviewqueue-name-copy {
  min-width: 0;
}

.reviewqueue-form-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reviewqueue-form-line strong {
  display: block;
  max-width: 210px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewqueue-version-chip,
.reviewqueue-type-chip,
.reviewqueue-person-chip,
.reviewqueue-project-chip,
.reviewqueue-module-chip,
.reviewqueue-date-chip,
.reviewqueue-stage-chip,
.reviewqueue-percentage-chip,
.reviewqueue-grade-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.reviewqueue-version-chip {
  color: #475467;
  background: #f2f4f7;
}

.reviewqueue-type-chip {
  margin-top: 4px;
  color: #6941c6;
  background: #f4f3ff;
}

.reviewqueue-person-chip {
  color: #0e7490;
  background: #ecfeff;
}

.reviewqueue-scope-wrap,
.reviewqueue-result-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.reviewqueue-project-chip {
  color: #175cd3;
  background: #eff8ff;
}

.reviewqueue-module-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.reviewqueue-date-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.reviewqueue-stage-chip {
  color: #b54708;
  background: #fffaeb;
}

.reviewqueue-percentage-chip {
  color: #027a48;
  background: #ecfdf3;
  font-weight: 800;
}

.reviewqueue-grade-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.reviewqueue-muted {
  color: #98a2b3;
  font-size: 9px;
}

/* ====================== SMALL ACTION COLUMN ====================== */

.reviewqueue-actions-header,
.reviewqueue-actions-cell {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

.reviewqueue-actions-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.reviewqueue-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.reviewqueue-action-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.reviewqueue-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.reviewqueue-action-open {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.reviewqueue-action-open:hover {
  color: #fff !important;
  background: var(--rq-blue) !important;
}

.reviewqueue-theme .unit-table th.reviewqueue-actions-header,
.reviewqueue-theme .unit-table td.reviewqueue-actions-cell {
  position: sticky;
  right: 0;
}

.reviewqueue-theme .unit-table th.reviewqueue-actions-header {
  z-index: 5;
  background: #0e4b5a;
  color: #fff;
  text-align: center !important;
}

.reviewqueue-theme .unit-table td.reviewqueue-actions-cell {
  z-index: 4;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.reviewqueue-theme .unit-table tbody tr:hover td.reviewqueue-actions-cell {
  background: #fbfdff;
}

/* ====================== LOADER / EMPTY / FOOTER ====================== */

.reviewqueue-theme .unit-loader,
.reviewqueue-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reviewqueue-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.reviewqueue-theme .unit-loader .spinner-border {
  color: var(--rq-primary);
}

.reviewqueue-theme .unit-empty {
  padding: 28px 20px;
  text-align: center;
}

.reviewqueue-theme .unit-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--rq-primary);
  background: var(--rq-primary-soft);
  border-radius: 18px;
  font-size: 23px;
}

.reviewqueue-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.reviewqueue-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.reviewqueue-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.reviewqueue-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.reviewqueue-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.reviewqueue-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.reviewqueue-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--rq-primary);
  border-color: var(--rq-primary);
}

/* ====================== REVIEW DETAIL MODAL ====================== */

.reviewqueue-admin-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.reviewqueue-admin-modal .modal-dialog {
  max-width: 1180px;
}

.reviewqueue-admin-modal-sm .modal-dialog {
  max-width: 500px;
}

.reviewqueue-admin-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.reviewqueue-admin-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.reviewqueue-modal-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reviewqueue-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 13px;
  font-size: 17px;
}

.reviewqueue-modal-icon-question {
  color: #6941c6;
  background: #f4f3ff;
}

.reviewqueue-modal-heading small {
  display: block;
  margin-bottom: 2px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.reviewqueue-modal-heading .modal-title {
  max-width: 900px;
  overflow: hidden;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewqueue-admin-modal .modal-body {
  padding: 20px;
  background: #f8fafc;
}

.reviewqueue-admin-modal .modal-footer {
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid #edf0f4;
}

.reviewqueue-admin-modal .rq-modal-card {
  overflow: hidden;
  border: 1px solid #e5eaf0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.reviewqueue-admin-modal .rq-modal-card .card-body {
  padding: 16px;
}

.reviewqueue-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #344054;
  font-size: 11px;
}

.reviewqueue-card-title i {
  color: var(--rq-primary);
}

.reviewqueue-card-title-spaced {
  margin-top: 18px;
}

.reviewqueue-decision-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.reviewqueue-request-btn {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.reviewqueue-reject-btn {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.reviewqueue-approve-btn {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* ====================== CONFIRM MODAL ====================== */

.reviewqueue-confirm-modal .modal-body {
  background: #fff;
}

.reviewqueue-confirm-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 11px 12px;
  color: #b54708;
  background: #fffaeb;
  border: 1px solid #fedf89;
  border-radius: 10px;
}

.reviewqueue-confirm-message i {
  margin-top: 2px;
}

.reviewqueue-confirm-message p {
  margin: 0;
  color: #7a2e0e;
  font-size: 11px;
  line-height: 1.5;
}

.reviewqueue-confirm-modal .form-label {
  margin-bottom: 6px;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
}

.reviewqueue-confirm-modal .form-control {
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 11px;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .reviewqueue-theme {
    padding: 18px;
  }

  .reviewqueue-heading-box,
  .reviewqueue-section-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewqueue-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviewqueue-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .reviewqueue-theme {
    padding: 14px;
  }

  .reviewqueue-heading-box {
    padding: 20px;
  }

  .reviewqueue-heading-content {
    align-items: flex-start;
  }

  .reviewqueue-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .reviewqueue-heading-box h2 {
    font-size: 22px;
  }

  .reviewqueue-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .reviewqueue-filters-row {
    grid-template-columns: 1fr;
  }

  .reviewqueue-search {
    grid-column: auto;
  }

  .reviewqueue-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewqueue-modal-heading .modal-title {
    max-width: 520px;
  }
}

@media (max-width: 540px) {
  .reviewqueue-heading-box .unit-header-actions {
    width: 100%;
  }

  .reviewqueue-heading-box .unit-header-actions .unit-btn {
    width: 100%;
  }

  .reviewqueue-section-top {
    padding: 16px;
  }

  .reviewqueue-filters-row {
    padding: 12px 16px 16px;
  }

  .reviewqueue-tabs {
    width: 100%;
  }

  .reviewqueue-tab {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviewqueue-theme *,
  .reviewqueue-theme *::before,
  .reviewqueue-theme *::after {
    transition: none !important;
  }
}



/* =========================================================
   MyFormResultsPage.css
   Professional My Form Results UI
   ========================================================= */

.myformresults-theme {
  --mr-primary: #005baa;
  --mr-primary-soft: #eaf4ff;
  --mr-text: #172033;
  --mr-muted: #6b7280;
  --mr-border: #e5eaf0;
  --mr-bg: #f6f8fb;

  --mr-blue: #2563eb;
  --mr-blue-soft: #eff6ff;
  --mr-purple: #7c3aed;
  --mr-purple-soft: #f5f3ff;
  --mr-green: #16a34a;
  --mr-green-soft: #f0fdf4;
  --mr-orange: #ea580c;
  --mr-orange-soft: #fff7ed;
  --mr-red: #dc2626;
  --mr-red-soft: #fef2f2;
  --mr-cyan: #0891b2;
  --mr-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--mr-text);
  background: var(--mr-bg);
}

/* ====================== HEADING ====================== */

.myresults-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.myresults-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--mr-primary);
}

.myresults-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.myresults-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.myresults-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--mr-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.myformresults-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--mr-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.myresults-heading-box h2 {
  margin: 0 0 5px;
  color: var(--mr-text);
  font-size: 27px;
  font-weight: 800;
}

.myresults-heading-box p {
  margin: 0;
  color: var(--mr-muted);
  font-size: 14px;
  line-height: 1.5;
}

.myformresults-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.myformresults-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

/* ====================== KPI CARDS ====================== */

.myformresults-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.myformresults-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition: transform .25s ease, box-shadow .25s ease;
}

.myformresults-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.myformresults-theme .unit-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.myresults-stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.myresults-stat-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.myformresults-theme .unit-stat-card span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.myformresults-theme .unit-stat-card strong {
  color: var(--mr-text);
  font-size: 22px;
  font-weight: 800;
}

.myresults-stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 19px;
}

.myresults-stat-blue { color: var(--mr-blue); border-color: #dbeafe !important; }
.myresults-stat-blue .myresults-stat-icon { background: var(--mr-blue-soft); }

.myresults-stat-purple { color: var(--mr-purple); border-color: #e9d5ff !important; }
.myresults-stat-purple .myresults-stat-icon { background: var(--mr-purple-soft); }

.myresults-stat-green { color: var(--mr-green); border-color: #bbf7d0 !important; }
.myresults-stat-green .myresults-stat-icon { background: var(--mr-green-soft); }

/* ====================== CARD / TOOLBAR ====================== */

.myformresults-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mr-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.myformresults-theme .myresults-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.myresults-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.myresults-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mr-primary);
  background: var(--mr-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.myresults-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.myresults-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.myresults-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(280px, 1.5fr)
    minmax(190px, .85fr)
    minmax(190px, .85fr);
  gap: 10px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.myresults-search {
  width: 100%;
}

.myresults-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.myresults-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 12px;
}

.myresults-clear-search {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #9ca3af !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.myresults-select-wrap {
  position: relative;
}

.myresults-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.myresults-filter-select {
  min-height: 40px;
  padding-left: 31px !important;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

/* ====================== TABLE ====================== */

.myformresults-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.myformresults-theme .unit-table {
  width: 100%;
  min-width: 1080px;
  margin: 0;
  vertical-align: middle;
}

.myformresults-theme .unit-table thead th {
  padding: 13px 12px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.myformresults-theme .unit-table tbody td {
  padding: 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 10px;
  vertical-align: middle;
}

.myformresults-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.myresults-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 245px;
}

.myresults-letter {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mr-primary);
  background: var(--mr-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.myresults-name-copy {
  min-width: 0;
}

.myresults-name-copy strong {
  display: block;
  max-width: 225px;
  overflow: hidden;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.myresults-type-chip,
.myresults-project-chip,
.myresults-module-chip,
.myresults-date-chip,
.myresults-score-chip,
.myresults-grade-chip,
.myresults-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.myresults-type-chip {
  margin-top: 4px;
  color: #6941c6;
  background: #f4f3ff;
}

.myresults-scope-wrap,
.myresults-score-wrap,
.myresults-status-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.myresults-project-chip {
  color: #175cd3;
  background: #eff8ff;
}

.myresults-module-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.myresults-date-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.myresults-score-chip {
  color: #027a48;
  background: #ecfdf3;
  font-weight: 800;
}

.myresults-grade-chip {
  color: #6941c6;
  background: #f4f3ff;
  font-weight: 800;
}

.myresults-result-chip {
  color: #b54708;
  background: #fffaeb;
}

.myresults-status-badge {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7px !important;
  font-weight: 800 !important;
}

.myresults-muted {
  color: #98a2b3;
  font-size: 9px;
}

/* ====================== COMPACT ACTION COLUMN ====================== */

.myresults-actions-header,
.myresults-actions-cell {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

.myresults-actions-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.myresults-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.myresults-action-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.myresults-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.myresults-action-view {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.myresults-action-view:hover {
  color: #fff !important;
  background: var(--mr-blue) !important;
}

.myresults-action-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

.myformresults-theme .unit-table th.myresults-actions-header,
.myformresults-theme .unit-table td.myresults-actions-cell {
  position: sticky;
  right: 0;
}

.myformresults-theme .unit-table th.myresults-actions-header {
  z-index: 5;
  background: #0e4b5a;
  color: #fff;
  text-align: center !important;
}

.myformresults-theme .unit-table td.myresults-actions-cell {
  z-index: 4;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.myformresults-theme .unit-table tbody tr:hover td.myresults-actions-cell {
  background: #fbfdff;
}

/* ====================== EMPTY / LOADER / FOOTER ====================== */

.myformresults-theme .unit-loader,
.myformresults-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.myformresults-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.myformresults-theme .unit-loader .spinner-border {
  color: var(--mr-primary);
}

.myformresults-theme .unit-empty {
  padding: 28px 20px;
  text-align: center;
}

.myformresults-theme .unit-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--mr-primary);
  background: var(--mr-primary-soft);
  border-radius: 18px;
  font-size: 23px;
}

.myformresults-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.myformresults-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.myformresults-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.myformresults-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.myformresults-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.myformresults-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.myformresults-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--mr-primary);
  border-color: var(--mr-primary);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .myformresults-theme {
    padding: 18px;
  }

  .myresults-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .myresults-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .myresults-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .myformresults-theme {
    padding: 14px;
  }

  .myresults-heading-box {
    padding: 20px;
  }

  .myresults-heading-content {
    align-items: flex-start;
  }

  .myresults-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .myresults-heading-box h2 {
    font-size: 22px;
  }

  .myformresults-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .myresults-filters-row {
    grid-template-columns: 1fr;
  }

  .myresults-search {
    grid-column: auto;
  }

  .myformresults-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .myresults-heading-box .unit-header-actions {
    width: 100%;
  }

  .myresults-heading-box .unit-header-actions .unit-btn {
    width: 100%;
  }

  .myresults-section-title {
    align-items: flex-start;
    padding: 16px;
  }

  .myresults-filters-row {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .myformresults-theme *,
  .myformresults-theme *::before,
  .myformresults-theme *::after {
    transition: none !important;
  }
}



/* =========================================================
   FormExecutionReportsPage.css
   Professional Form Execution Reports UI
   ========================================================= */

.formexecreports-theme {
  --fer-primary: #005baa;
  --fer-primary-soft: #eaf4ff;
  --fer-text: #172033;
  --fer-muted: #6b7280;
  --fer-border: #e5eaf0;
  --fer-bg: #f6f8fb;

  --fer-blue: #2563eb;
  --fer-blue-soft: #eff6ff;
  --fer-purple: #7c3aed;
  --fer-purple-soft: #f5f3ff;
  --fer-green: #16a34a;
  --fer-green-soft: #f0fdf4;
  --fer-orange: #ea580c;
  --fer-orange-soft: #fff7ed;
  --fer-red: #dc2626;
  --fer-red-soft: #fef2f2;
  --fer-cyan: #0891b2;
  --fer-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--fer-text);
  background: var(--fer-bg);
}

/* ====================== HEADER ====================== */

.exec-report-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.exec-report-heading-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--fer-primary);
}

.exec-report-heading-box::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -65px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(0, 91, 170, 0.045);
  pointer-events: none;
}

.exec-report-heading-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.exec-report-heading-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fer-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);
  font-size: 22px;
}

.formexecreports-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--fer-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.exec-report-heading-box h2 {
  margin: 0 0 5px;
  color: var(--fer-text);
  font-size: 27px;
  font-weight: 800;
}

.exec-report-heading-box p {
  max-width: 820px;
  margin: 0;
  color: var(--fer-muted);
  font-size: 14px;
  line-height: 1.5;
}

.formexecreports-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 700;
}

.formexecreports-theme .unit-btn-light {
  color: #374151 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

/* ====================== SUMMARY ====================== */

.exec-summary-card {
  border: 1px solid var(--fer-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

.exec-summary-card .card-body {
  padding: 16px;
}

.exec-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.exec-summary-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 12px;
}

.exec-summary-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 12px;
}

.exec-summary-item span {
  display: block;
  color: #7b8493;
  font-size: 8px;
  font-weight: 700;
}

.exec-summary-item strong {
  display: block;
  margin-top: 2px;
  color: #1f2937;
  font-size: 15px;
  font-weight: 900;
}

.exec-summary-blue .exec-summary-icon { color: #175cd3; background: #eff8ff; }
.exec-summary-slate .exec-summary-icon { color: #475467; background: #f2f4f7; }
.exec-summary-green .exec-summary-icon { color: #027a48; background: #ecfdf3; }
.exec-summary-red .exec-summary-icon { color: #b42318; background: #fef3f2; }
.exec-summary-orange .exec-summary-icon { color: #b54708; background: #fffaeb; }
.exec-summary-gray .exec-summary-icon { color: #667085; background: #f2f4f7; }
.exec-summary-cyan .exec-summary-icon { color: #0e7490; background: #ecfeff; }
.exec-summary-purple .exec-summary-icon { color: #6941c6; background: #f4f3ff; }
.exec-summary-dark .exec-summary-icon { color: #344054; background: #eaecf0; }
.exec-summary-amber .exec-summary-icon { color: #b54708; background: #fff7ed; }

/* ====================== CARD / TOOLBAR ====================== */

.formexecreports-theme .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fer-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.formexecreports-theme .exec-report-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.exec-report-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.exec-report-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fer-primary);
  background: var(--fer-primary-soft);
  border-radius: 12px;
  font-size: 16px;
}

.exec-report-section-copy h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.exec-report-section-copy p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.exec-report-filters-row {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(240px, 1.25fr)
    minmax(170px, .8fr)
    minmax(170px, .8fr)
    minmax(170px, .8fr)
    minmax(190px, .9fr)
    minmax(165px, .75fr);
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== FILTERS ====================== */

.exec-report-search {
  width: 100%;
}

.exec-report-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.exec-report-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.exec-report-clear-search {
  width: 40px;
  min-height: 40px;
  padding: 0 !important;
  color: #98a2b3 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
}

.exec-report-select-wrap {
  position: relative;
}

.exec-report-select-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 2;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 10px;
  pointer-events: none;
}

.exec-report-select-wrap .form-select {
  min-height: 40px;
  padding-left: 31px;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

.exec-report-toggle-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 11px !important;
  color: #475467 !important;
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.exec-report-toggle-active {
  color: #fff !important;
  background: var(--fer-primary) !important;
  border-color: var(--fer-primary) !important;
}

/* ====================== MAIN TABLE ====================== */

.formexecreports-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.formexecreports-theme .unit-table {
  width: 100%;
  min-width: 1450px;
  margin: 0;
  vertical-align: middle;
}

.formexecreports-theme .unit-table thead th {
  padding: 13px 10px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.formexecreports-theme .unit-table tbody td {
  padding: 11px 10px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9px;
  vertical-align: middle;
}

.formexecreports-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.exec-report-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 220px;
}

.exec-report-letter {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fer-primary);
  background: var(--fer-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.exec-report-form-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exec-report-form-line strong {
  max-width: 180px;
  overflow: hidden;
  color: #1f2937;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exec-report-version-chip,
.exec-report-type-chip,
.exec-report-person-chip,
.exec-report-project-chip,
.exec-report-module-chip,
.exec-report-date-chip,
.exec-report-review-chip,
.exec-report-rate-chip,
.exec-report-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 7.5px;
  font-weight: 700;
  white-space: nowrap;
}

.exec-report-version-chip {
  color: #475467;
  background: #f2f4f7;
}

.exec-report-type-chip {
  margin-top: 4px;
  color: #6941c6;
  background: #f4f3ff;
}

.exec-report-person-chip {
  color: #0e7490;
  background: #ecfeff;
}

.exec-report-scope-wrap,
.exec-report-task-wrap,
.exec-report-case-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.exec-report-project-chip {
  color: #175cd3;
  background: #eff8ff;
}

.exec-report-module-chip {
  color: #6941c6;
  background: #f4f3ff;
}

.exec-report-date-chip {
  color: #475467;
  background: #f8fafc;
  border: 1px solid #eaecf0;
}

.exec-report-review-chip {
  color: #475467;
  background: #f2f4f7;
}

.exec-report-review-approved {
  color: #027a48;
  background: #ecfdf3;
}

.exec-report-review-rejected,
.exec-report-review-changes_requested {
  color: #b42318;
  background: #fef3f2;
}

.exec-report-review-pending {
  color: #b54708;
  background: #fffaeb;
}

.exec-report-case-chip {
  min-width: 26px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 900;
}

.exec-report-case-pass { color: #027a48; background: #ecfdf3; }
.exec-report-case-fail { color: #b42318; background: #fef3f2; }
.exec-report-case-blocked { color: #b54708; background: #fffaeb; }
.exec-report-case-na { color: #667085; background: #f2f4f7; }

.exec-report-pass-rate {
  color: #027a48;
  background: #ecfdf3;
}

.exec-report-completion-rate {
  color: #175cd3;
  background: #eff8ff;
}

.exec-report-task-active {
  color: #b54708;
  background: #fffaeb;
}

.exec-report-task-total {
  color: #475467;
  background: #f2f4f7;
}

.exec-report-muted {
  color: #98a2b3;
  font-size: 8px;
}

/* ====================== ACTION COLUMN ====================== */

.exec-report-actions-header,
.exec-report-actions-cell {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
}

.exec-report-actions-cell {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

.exec-report-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.exec-report-action-btn {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.exec-report-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.exec-report-action-view {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.exec-report-action-view:hover {
  color: #fff !important;
  background: var(--fer-blue) !important;
}

.formexecreports-theme .unit-table th.exec-report-actions-header,
.formexecreports-theme .unit-table td.exec-report-actions-cell {
  position: sticky;
  right: 0;
}

.formexecreports-theme .unit-table th.exec-report-actions-header {
  z-index: 5;
  color: #fff;
  background: #0e4b5a;
  text-align: center !important;
}

.formexecreports-theme .unit-table td.exec-report-actions-cell {
  z-index: 4;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.formexecreports-theme .unit-table tbody tr:hover td.exec-report-actions-cell {
  background: #fbfdff;
}

/* ====================== FAILED CASES ====================== */

.exec-failed-card {
  overflow: hidden;
  border: 1px solid #f0d7d2 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

.exec-failed-card .card-body {
  padding: 0;
}

.exec-failed-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff7f5, #fff);
  border-bottom: 1px solid #f3e0dc;
}

.exec-failed-card-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b42318;
  background: #fef3f2;
  border-radius: 10px;
  font-size: 14px;
}

.exec-failed-card-title strong {
  display: block;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
}

.exec-failed-card-title span {
  display: block;
  margin-top: 2px;
  color: #98a2b3;
  font-size: 8px;
}

.exec-failed-card .spinner-border {
  margin: 18px;
  color: var(--fer-primary);
}

.fer-cases-table {
  min-width: 1200px !important;
}

.exec-failed-result-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 900;
}

.exec-failed-result-fail {
  color: #b42318;
  background: #fef3f2;
}

.exec-failed-result-blocked {
  color: #b54708;
  background: #fffaeb;
}

.exec-failed-actions-header,
.exec-failed-actions-cell {
  width: 62px;
  min-width: 62px;
  text-align: center;
}

/* ====================== LOADER / EMPTY / FOOTER ====================== */

.formexecreports-theme .unit-loader,
.formexecreports-theme .unit-empty {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.formexecreports-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.formexecreports-theme .unit-loader .spinner-border {
  color: var(--fer-primary);
}

.formexecreports-theme .unit-empty {
  padding: 28px 20px;
  text-align: center;
}

.formexecreports-theme .unit-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--fer-primary);
  background: var(--fer-primary-soft);
  border-radius: 18px;
  font-size: 23px;
}

.formexecreports-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.formexecreports-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.formexecreports-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.formexecreports-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.formexecreports-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.formexecreports-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.formexecreports-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--fer-primary);
  border-color: var(--fer-primary);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1300px) {
  .exec-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .exec-report-filters-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .exec-report-search {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .formexecreports-theme {
    padding: 18px;
  }

  .exec-report-heading-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .exec-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exec-report-filters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exec-report-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .formexecreports-theme {
    padding: 14px;
  }

  .exec-report-heading-box {
    padding: 20px;
  }

  .exec-report-heading-content {
    align-items: flex-start;
  }

  .exec-report-heading-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .exec-report-heading-box h2 {
    font-size: 22px;
  }

  .exec-summary-grid,
  .exec-report-filters-row {
    grid-template-columns: 1fr;
  }

  .exec-report-search {
    grid-column: auto;
  }

  .formexecreports-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .exec-report-heading-box .unit-header-actions,
  .exec-report-heading-box .unit-header-actions .unit-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formexecreports-theme *,
  .formexecreports-theme *::before,
  .formexecreports-theme *::after {
    transition: none !important;
  }
}




/* AdminTasksPage.css
   UI-only redesign. AdminTasksPage.jsx remains byte-for-byte unchanged.
*/

.admintasks-theme {
  --at-primary: #005baa;
  --at-primary-soft: #eaf4ff;
  --at-text: #172033;
  --at-muted: #667085;
  --at-border: #e5eaf0;
  --at-bg: #f6f8fb;
  --at-blue: #2563eb;
  --at-purple: #7c3aed;
  --at-green: #16a34a;
  --at-orange: #ea580c;
  --at-red: #dc2626;
  --at-cyan: #0891b2;
  min-height: 100%;
  padding: 24px;
  color: var(--at-text);
  background: var(--at-bg);
}

/* ================= HEADER ================= */

.admintasks-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(17,24,39,.07), 0 2px 8px rgba(17,24,39,.04);
}

.admintasks-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--at-primary);
}

.admintasks-theme > .unit-header::before {
  content: "\f03a";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #005baa, #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,91,170,.24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.admintasks-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--at-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.admintasks-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: #172033;
  font-size: 27px;
  font-weight: 800;
}

.admintasks-theme > .unit-header p {
  margin: 0;
  color: var(--at-muted);
  font-size: 14px;
}

.admintasks-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ================= BUTTONS ================= */

.admintasks-theme .unit-btn,
.admin-teal-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}

.admintasks-theme .unit-btn:hover:not(:disabled),
.admin-teal-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.admintasks-theme .unit-btn-light,
.admin-teal-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.admintasks-theme .unit-btn-primary,
.admin-teal-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg,#005baa,#1675c8) !important;
  border: 1px solid #005baa !important;
  box-shadow: 0 6px 14px rgba(0,91,170,.18);
}

.admintasks-theme .alert-danger {
  border: 0;
  border-left: 4px solid var(--at-red);
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(15,23,42,.05);
  font-size: 12px;
}

/* ================= KPI CARDS ================= */

.admintasks-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.admintasks-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--at-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15,23,42,.055);
  transition: transform .22s ease, box-shadow .22s ease;
}

.admintasks-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.admintasks-theme .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15,23,42,.09);
}

.admintasks-stat-icon {
  order: 2;
  margin-left: auto;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 17px;
}

.admintasks-stat-text {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admintasks-stat-text span {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.admintasks-stat-text strong {
  color: #1f2937;
  font-size: 22px;
  font-weight: 900;
}

.admintasks-theme .unit-stat-card:first-child { color: var(--at-blue); border-color: #dbeafe; }
.admintasks-stat-icon-primary { color: var(--at-blue); background: #eff6ff; }
.admintasks-stat-icon-warning { color: var(--at-orange); background: #fff7ed; }
.admintasks-stat-icon-accent { color: var(--at-purple); background: #f5f3ff; }
.admintasks-stat-icon-success { color: var(--at-green); background: #ecfdf3; }

.admintasks-theme .unit-stat-card:has(.admintasks-stat-icon-warning) { color: var(--at-orange); border-color: #fed7aa; }
.admintasks-theme .unit-stat-card:has(.admintasks-stat-icon-accent) { color: var(--at-purple); border-color: #e9d5ff; }
.admintasks-theme .unit-stat-card:has(.admintasks-stat-icon-success) { color: var(--at-green); border-color: #bbf7d0; }

/* ================= MAIN CARD / TOOLBAR ================= */

.admintasks-theme > .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--at-border);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.065), 0 2px 7px rgba(15,23,42,.035);
}

.admintasks-theme > .unit-card > .unit-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

.admintasks-theme > .unit-card > .unit-toolbar > div:first-child {
  position: relative;
  min-height: 78px;
  padding: 18px 20px 18px 74px;
  background: linear-gradient(180deg,#fff,#fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.admintasks-theme > .unit-card > .unit-toolbar > div:first-child::before {
  content: "\f03a";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--at-primary);
  background: var(--at-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.admintasks-theme > .unit-card > .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.admintasks-theme > .unit-card > .unit-toolbar .admintasks-list-icon {
  display: none;
}

.admintasks-theme > .unit-card > .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.admintasks-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(300px,1.45fr)
    minmax(145px,.72fr)
    minmax(145px,.72fr)
    minmax(165px,.82fr)
    minmax(110px,.52fr)
    auto;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
}

/* ================= SEARCH / FILTERS ================= */

.admintasks-theme .unit-search {
  width: 100%;
  max-width: none !important;
}

.admintasks-theme .unit-search .input-group-text {
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.admintasks-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.admintasks-theme .unit-clear-btn {
  min-height: 40px;
  padding: 0 9px !important;
  color: #667085 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.admintasks-theme .unit-page-size {
  width: 100%;
  max-width: none !important;
  min-height: 40px;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

/* ================= TABLE ================= */

.admintasks-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admintasks-theme .unit-table {
  width: 100%;
  min-width: 1320px;
  margin: 0;
  vertical-align: middle;
}

.admintasks-theme .unit-table thead th {
  padding: 13px 10px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.admintasks-theme .unit-table tbody td {
  padding: 11px 10px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.admintasks-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.admintasks-theme .sortable {
  cursor: pointer;
  user-select: none;
}

.admintasks-theme .unit-id {
  display: inline-flex;
  min-width: 38px;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #f2f4f7;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 800;
}

.admintasks-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 185px;
}

.admintasks-theme .unit-letter {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--at-primary);
  background: var(--at-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.admintasks-theme .unit-name-box strong {
  display: block;
  max-width: 190px;
  overflow: hidden;
  color: #1f2937;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admintasks-theme .unit-name-box small {
  display: block;
  max-width: 215px;
  margin-top: 2px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admintasks-type-badge {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
  border-radius: 8px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.admintasks-attachment-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 6px;
  color: #475467 !important;
  background: #f2f4f7;
  border-radius: 7px;
  font-size: 7px !important;
}

/* Status presentation only */
.admintasks-theme .unit-status {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.admintasks-status-pending {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.admintasks-status-in_progress {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.admintasks-status-completed {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.admintasks-status-closed,
.admintasks-status-cancelled {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* ================= ACTION COLUMN ================= */

.admintasks-theme .unit-table th:last-child,
.admintasks-theme .unit-table td:last-child {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  position: sticky;
  right: 0;
}

.admintasks-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: #0e4b5a;
  text-align: center !important;
}

.admintasks-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15,23,42,.05);
}

.admintasks-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.admintasks-theme .unit-table td:last-child .unit-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 4px;
}

.admintasks-theme .unit-table td:last-child .unit-icon-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  transition: transform .18s ease, color .18s ease, background-color .18s ease;
}

.admintasks-theme .unit-table td:last-child .unit-icon-btn:first-child {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

.admintasks-theme .unit-table td:last-child .unit-icon-btn:last-child {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.admintasks-theme .unit-table td:last-child .unit-icon-btn:hover {
  color: #fff !important;
  background: var(--at-primary) !important;
  transform: translateY(-2px);
}

/* ================= EMPTY / LOADER / FOOTER ================= */

.admintasks-theme .unit-loader,
.admintasks-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admintasks-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.admintasks-theme .unit-loader .spinner-border {
  color: var(--at-primary);
}

.admintasks-theme .unit-empty {
  padding: 28px 20px;
  text-align: center;
}

.admintasks-theme .unit-empty-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--at-primary);
  background: var(--at-primary-soft);
  border-radius: 18px;
  font-size: 23px;
}

.admintasks-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.admintasks-theme .unit-empty p {
  margin: 0 0 15px;
  color: #7b8493;
  font-size: 12px;
}

.admintasks-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.admintasks-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.admintasks-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.admintasks-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.admintasks-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--at-primary);
  border-color: var(--at-primary);
}

/* ================= MODALS ================= */

.admin-teal-backdrop {
  background-color: rgba(15,23,42,.55) !important;
  backdrop-filter: blur(2px);
}

.admin-teal-modal .modal-dialog {
  max-width: 650px;
}

.admin-teal-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
}

.admin-teal-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg,#f7fbff,#fff);
  border-bottom: 1px solid #e6edf5;
}

.admin-teal-modal .modal-header > .d-flex {
  gap: 11px;
}

.admin-teal-modal .modal-header-icon {
  width: 42px !important;
  height: 42px !important;
  padding: 10px;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 12px;
}

.admin-teal-modal .modal-title {
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-teal-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.admin-teal-modal .form-control,
.admin-teal-modal .form-select {
  min-height: 42px;
  color: #344054;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none;
  font-size: 11px;
}

.admin-teal-modal textarea.form-control {
  min-height: auto;
}

.admin-teal-modal .unit-card {
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 12px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
  .admintasks-theme { padding: 18px; }

  .admintasks-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admintasks-theme .unit-stats-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .admintasks-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .admintasks-theme .unit-search {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .admintasks-theme { padding: 14px; }

  .admintasks-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .admintasks-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .admintasks-theme > .unit-header h2 {
    font-size: 22px;
  }

  .admintasks-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .admintasks-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .admintasks-theme .unit-search {
    grid-column: 1 / -1;
  }

  .admintasks-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .admintasks-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .admintasks-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .admintasks-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .admintasks-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .admintasks-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .admintasks-theme .unit-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admintasks-theme *,
  .admintasks-theme *::before,
  .admintasks-theme *::after {
    transition: none !important;
  }
}






.mywork-theme{
  --p:#005baa;--ps:#eaf4ff;--t:#172033;--m:#667085;--b:#e5eaf0;--bg:#f6f8fb;
  --blue:#2563eb;--purple:#7c3aed;--green:#16a34a;--orange:#ea580c;--red:#dc2626;
  min-height:100%;padding:24px;color:var(--t);background:var(--bg)
}

/* Header */
.mywork-theme>.unit-header{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-bottom:22px;padding:24px 26px 24px 92px;overflow:hidden;
  background:linear-gradient(135deg,#fff 0%,#f7fbff 100%);
  border:1px solid #dce9f5;border-radius:18px;
  box-shadow:0 10px 30px rgba(17,24,39,.07),0 2px 8px rgba(17,24,39,.04)
}
.mywork-theme>.unit-header:after{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--p)
}
.mywork-theme>.unit-header:before{
  content:"\f0ae";position:absolute;left:25px;top:50%;width:54px;height:54px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--p),#1675c8);border-radius:16px;
  box-shadow:0 8px 18px rgba(0,91,170,.24);
  font-family:"Font Awesome 6 Free";font-size:20px;font-weight:900
}
.mywork-theme .unit-page-label{margin-bottom:3px;color:var(--p);font-size:11px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
.mywork-theme>.unit-header h2{margin:0 0 5px;color:var(--t);font-size:27px;font-weight:800}
.mywork-theme>.unit-header p{max-width:820px;margin:0;color:var(--m);font-size:14px;line-height:1.5}
.mywork-theme .unit-header-actions{position:relative;z-index:2;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* Buttons */
.mywork-theme .unit-btn{
  min-height:40px;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px;border-radius:10px!important;font-size:12px;font-weight:700;
  transition:transform .18s ease,box-shadow .18s ease
}
.mywork-theme .unit-btn:hover:not(:disabled){transform:translateY(-2px)}
.mywork-theme .unit-btn-light{color:#344054!important;background:#fff!important;border:1px solid #dfe4ea!important}

/* Main card */
.mywork-theme>.unit-card{
  overflow:hidden;background:#fff;border:1px solid var(--b);border-radius:18px;
  box-shadow:0 10px 28px rgba(15,23,42,.065),0 2px 7px rgba(15,23,42,.035)
}

/* Two-row toolbar */
.mywork-theme>.unit-card>.unit-toolbar{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:0!important
}
.mywork-theme>.unit-card>.unit-toolbar>.unit-tabs{
  width:100%;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:18px 20px;background:linear-gradient(180deg,#fff,#fbfcfe);border-bottom:1px solid #edf0f4
}
.mywork-theme>.unit-card>.unit-toolbar>.unit-tabs:before{
  content:"Work Views";margin-right:7px;color:#1f2937;font-size:12px;font-weight:800
}
.mywork-theme>.unit-card>.unit-toolbar>.unit-toolbar-actions{
  width:100%;display:grid!important;
  grid-template-columns:minmax(230px,1.25fr) minmax(145px,.68fr) minmax(145px,.68fr) minmax(165px,.78fr)
                        minmax(165px,.78fr) minmax(165px,.78fr) minmax(145px,.65fr) minmax(145px,.65fr);
  align-items:center;gap:9px;padding:14px 20px 16px;background:#fff
}

/* Tabs */
.mywork-theme .unit-tab{
  min-height:34px;display:inline-flex!important;align-items:center;justify-content:center;padding:7px 11px!important;
  color:#475467!important;background:#fff!important;border:1px solid #dfe4ea!important;border-radius:9px!important;
  font-size:9px!important;font-weight:800!important;box-shadow:none!important
}
.mywork-theme .unit-tab:hover{color:var(--p)!important;border-color:#b2ddff!important}
.mywork-theme .unit-tab-active{
  color:#fff!important;background:linear-gradient(135deg,var(--p),#1675c8)!important;
  border-color:var(--p)!important;box-shadow:0 5px 12px rgba(0,91,170,.16)!important
}

/* Filters */
.mywork-theme .unit-search{width:100%;max-width:none!important}
.mywork-theme .unit-search .input-group-text{
  min-width:42px;display:flex;align-items:center;justify-content:center;color:#7b8493;background:#fff;
  border-color:#dfe4ea;border-right:0
}
.mywork-theme .unit-search .form-control{
  min-height:40px;border-color:#dfe4ea;border-left:0;box-shadow:none!important;font-size:11px
}
.mywork-theme .unit-toolbar-actions .form-select,
.mywork-theme .unit-toolbar-actions>.form-control{
  width:100%;max-width:none!important;min-height:40px;color:#374151;background:#fff;
  border:1px solid #dfe4ea;border-radius:10px;box-shadow:none!important;font-size:10px
}
.mywork-theme .unit-toolbar-actions .form-select:disabled{color:#98a2b3;background:#f8fafc;cursor:not-allowed}

/* Table */
.mywork-theme .unit-table-wrapper{width:100%;overflow-x:auto}
.mywork-theme .unit-table{width:100%;min-width:980px;margin:0;vertical-align:middle}
.mywork-theme .unit-table thead th{
  padding:13px 11px;color:#667085;background:#f8fafc;border-top:0;border-bottom:1px solid #e9edf2;
  font-size:8.5px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;white-space:nowrap
}
.mywork-theme .unit-table tbody td{
  padding:12px 11px;color:#344054;border-bottom:1px solid #eef1f4;font-size:9.5px;vertical-align:middle
}
.mywork-theme .unit-table tbody tr:hover td{background:#fbfdff}
.mywork-theme .unit-table tbody td:first-child{
  min-width:240px;color:#1f2937;font-size:10.5px;font-weight:800
}

/* Badges */
.mywork-badge,.mywork-status-badge{
  min-height:25px;display:inline-flex!important;align-items:center;justify-content:center;
  padding:4px 8px!important;border-radius:999px!important;font-size:7.5px!important;font-weight:800!important;
  text-transform:capitalize
}
.mywork-badge{color:#475467!important;background:#f2f4f7!important;border:1px solid #d0d5dd!important}
.mywork-status-pending{color:#b54708!important;background:#fffaeb!important;border:1px solid #fedf89!important}
.mywork-status-in-progress,.mywork-status-in_progress{color:#6941c6!important;background:#f4f3ff!important;border:1px solid #d9d6fe!important}
.mywork-status-completed,.mywork-status-active,.mywork-status-accepted{color:#027a48!important;background:#ecfdf3!important;border:1px solid #abefc6!important}
.mywork-status-rejected,.mywork-status-cancelled,.mywork-status-revoked{color:#b42318!important;background:#fef3f2!important;border:1px solid #fecdca!important}
.mywork-status-default{color:#475467!important;background:#f2f4f7!important;border:1px solid #d0d5dd!important}

/* Compact sticky Action column */
.mywork-theme .unit-table th:last-child,
.mywork-theme .unit-table td:last-child{
  width:68px!important;min-width:68px!important;max-width:68px!important;position:sticky;right:0
}
.mywork-theme .unit-table th:last-child{
  z-index:5;color:#fff;background:#0e4b5a;text-align:center!important
}
.mywork-theme .unit-table td:last-child{
  z-index:4;padding-left:7px!important;padding-right:7px!important;background:#fff;text-align:center!important;
  box-shadow:-7px 0 12px rgba(15,23,42,.05)
}
.mywork-theme .unit-table tbody tr:hover td:last-child{background:#fbfdff}

/* Keep original button/handler; visually icon-only */
.mywork-theme .mywork-view-btn{
  width:29px!important;min-width:29px!important;max-width:29px!important;
  height:29px!important;min-height:29px!important;max-height:29px!important;
  display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;margin:0!important;
  overflow:hidden;color:#175cd3!important;background:#eff8ff!important;border:1px solid #b2ddff!important;
  border-radius:8px!important;font-size:0!important;line-height:1!important
}
.mywork-theme .mywork-view-btn i{margin:0!important;font-size:10px!important;line-height:1!important}
.mywork-theme .mywork-view-btn:hover{color:#fff!important;background:var(--blue)!important;transform:translateY(-2px)}

/* Empty / loader */
.mywork-theme .unit-loader,.mywork-theme .unit-empty{
  min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center
}
.mywork-theme .unit-loader{gap:14px;color:#667085}
.mywork-theme .unit-loader .spinner-border{color:var(--p)}
.mywork-theme .unit-empty{padding:28px 20px;text-align:center}
.mywork-theme .unit-empty-icon{
  width:62px;height:62px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  color:var(--p);background:var(--ps);border-radius:18px;font-size:23px
}
.mywork-theme .unit-empty h5{margin:0 0 6px;color:#1f2937;font-size:16px;font-weight:800}
.mywork-theme .unit-empty p{margin:0;color:#7b8493;font-size:12px}

/* Footer / pagination */
.mywork-theme .unit-footer{
  min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 20px;background:#fcfdff;border-top:1px solid #edf0f4
}
.mywork-theme .unit-count-text{color:#7b8493;font-size:12px}
.mywork-theme .unit-pagination{display:flex;gap:5px;margin:0}
.mywork-theme .unit-pagination .page-link{
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#475467;background:#fff;
  border:1px solid #e0e5eb;border-radius:8px!important;font-size:10px;font-weight:700
}
.mywork-theme .unit-pagination .page-item.active .page-link{
  color:#fff;background:var(--p);border-color:var(--p)
}

/* Responsive */
@media(max-width:1350px){
  .mywork-theme>.unit-card>.unit-toolbar>.unit-toolbar-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mywork-theme .unit-search{grid-column:span 2}
}
@media(max-width:1000px){
  .mywork-theme{padding:18px}
  .mywork-theme>.unit-header{align-items:flex-start;flex-direction:column}
  .mywork-theme>.unit-card>.unit-toolbar>.unit-toolbar-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mywork-theme .unit-search{grid-column:1/-1}
}
@media(max-width:760px){
  .mywork-theme{padding:14px}
  .mywork-theme>.unit-header{padding:20px 20px 20px 78px}
  .mywork-theme>.unit-header:before{left:18px;width:46px;height:46px}
  .mywork-theme>.unit-header h2{font-size:22px}
  .mywork-theme>.unit-card>.unit-toolbar>.unit-toolbar-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mywork-theme .unit-footer{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .mywork-theme>.unit-header{padding:82px 18px 18px}
  .mywork-theme>.unit-header:before{top:18px;left:18px;transform:none}
  .mywork-theme .unit-header-actions,.mywork-theme .unit-header-actions .unit-btn{width:100%}
  .mywork-theme>.unit-card>.unit-toolbar>.unit-tabs{align-items:stretch;padding:14px 16px}
  .mywork-theme>.unit-card>.unit-toolbar>.unit-tabs:before{flex:0 0 100%}
  .mywork-theme .unit-tab{flex:1 1 calc(50% - 4px)}
  .mywork-theme>.unit-card>.unit-toolbar>.unit-toolbar-actions{grid-template-columns:1fr;padding:12px 16px 16px}
  .mywork-theme .unit-search{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .mywork-theme *,.mywork-theme *:before,.mywork-theme *:after{transition:none!important}
}


/* =========================================================
   MyTaskApprovalQueuePage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.taskapprovalqueue-theme {
  --ta-primary: #005baa;
  --ta-primary-soft: #eaf4ff;
  --ta-text: #172033;
  --ta-muted: #667085;
  --ta-border: #e5eaf0;
  --ta-bg: #f6f8fb;
  --ta-blue: #2563eb;
  --ta-purple: #7c3aed;
  --ta-green: #16a34a;
  --ta-orange: #ea580c;
  --ta-red: #dc2626;
  --ta-cyan: #0891b2;

  min-height: 100%;
  padding: 24px;
  color: var(--ta-text);
  background: var(--ta-bg);
}

/* ====================== HEADER ====================== */

.taskapprovalqueue-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.taskapprovalqueue-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ta-primary);
}

.taskapprovalqueue-theme > .unit-header::before {
  content: "\f0e3";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ta-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.taskapprovalqueue-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--ta-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.taskapprovalqueue-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: var(--ta-text);
  font-size: 27px;
  font-weight: 800;
}

.taskapprovalqueue-theme > .unit-header p {
  max-width: 820px;
  margin: 0;
  color: var(--ta-muted);
  font-size: 14px;
  line-height: 1.5;
}

.taskapprovalqueue-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.taskapprovalqueue-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.taskapprovalqueue-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.taskapprovalqueue-theme .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

/* ====================== MAIN CARD / TWO-ROW TOOLBAR ====================== */

.taskapprovalqueue-theme > .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ta-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.taskapprovalqueue-theme > .unit-card > .unit-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* First row: tabs */
.taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-tabs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-tabs::before {
  content: "Approval Views";
  margin-right: 8px;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
}

/* Second row: filters */
.taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(240px, 1.25fr)
    minmax(155px, .72fr)
    minmax(155px, .72fr)
    minmax(175px, .82fr)
    minmax(175px, .82fr)
    minmax(145px, .65fr)
    minmax(145px, .65fr);
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* When status select is conditionally present, it naturally joins grid */

/* ====================== TABS ====================== */

.taskapprovalqueue-theme .unit-tab {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 7px 11px !important;
  color: #475467 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 9px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.taskapprovalqueue-theme .unit-tab:hover {
  color: var(--ta-primary) !important;
  border-color: #b2ddff !important;
  transform: translateY(-1px);
}

.taskapprovalqueue-theme .unit-tab-active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ta-primary), #1675c8) !important;
  border-color: var(--ta-primary) !important;
  box-shadow: 0 5px 12px rgba(0, 91, 170, .16) !important;
}

/* ====================== SEARCH / FILTERS ====================== */

.taskapprovalqueue-theme .unit-search {
  width: 100%;
  max-width: none !important;
}

.taskapprovalqueue-theme .unit-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.taskapprovalqueue-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.taskapprovalqueue-theme .unit-toolbar-actions .form-select,
.taskapprovalqueue-theme .unit-toolbar-actions > .form-control {
  width: 100%;
  max-width: none !important;
  min-height: 40px;
  color: #374151;
  background-color: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

.taskapprovalqueue-theme .unit-toolbar-actions > .form-control[type="date"] {
  padding-left: 10px;
  padding-right: 8px;
}

/* ====================== TABLE ====================== */

.taskapprovalqueue-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.taskapprovalqueue-theme .unit-table {
  width: 100%;
  min-width: 980px;
  margin: 0;
  vertical-align: middle;
}

.taskapprovalqueue-theme .unit-table thead th {
  padding: 13px 11px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.taskapprovalqueue-theme .unit-table tbody td {
  padding: 12px 11px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.taskapprovalqueue-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.taskapprovalqueue-theme .unit-table tbody td:first-child {
  min-width: 250px;
  color: #1f2937;
  font-size: 10.5px;
  font-weight: 800;
}

/* ====================== BADGES ====================== */

.taskapprovalqueue-theme .unit-table .badge {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  text-transform: capitalize;
}

/* Neutral/light badges */
.taskapprovalqueue-theme .badge.bg-light {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* Status colors */
.taskapprovalqueue-theme .badge.bg-warning {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.taskapprovalqueue-theme .badge.bg-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.taskapprovalqueue-theme .badge.bg-danger {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.taskapprovalqueue-theme .badge.bg-info {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

.taskapprovalqueue-theme .badge.bg-secondary {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* ====================== COMPACT ACTION COLUMN ====================== */

.taskapprovalqueue-theme .unit-table th:last-child,
.taskapprovalqueue-theme .unit-table td:last-child {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  position: sticky;
  right: 0;
}

.taskapprovalqueue-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: #0e4b5a;
  text-align: center !important;
}

.taskapprovalqueue-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.taskapprovalqueue-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.taskapprovalqueue-theme .unit-table td:last-child > .d-flex {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

/* Original buttons/handlers stay exactly the same.
   Text is visually hidden by font-size:0, icons remain. */
.taskapprovalqueue-theme .taskq-action-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.taskapprovalqueue-theme .taskq-action-btn i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* Open Task */
.taskapprovalqueue-theme .taskq-action-btn:first-child {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

/* Decide */
.taskapprovalqueue-theme .taskq-action-btn:last-child:not(:first-child) {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.taskapprovalqueue-theme .taskq-action-btn:hover {
  color: #fff !important;
  background: var(--ta-primary) !important;
  transform: translateY(-2px);
}

/* ====================== LOADER / EMPTY ====================== */

.taskapprovalqueue-theme .unit-loader,
.taskapprovalqueue-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.taskapprovalqueue-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.taskapprovalqueue-theme .unit-loader .spinner-border {
  color: var(--ta-primary);
}

.taskapprovalqueue-theme .unit-empty {
  padding: 28px 20px;
  text-align: center;
}

.taskapprovalqueue-theme .unit-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--ta-primary);
  background: var(--ta-primary-soft);
  border-radius: 18px;
  font-size: 23px;
}

.taskapprovalqueue-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.taskapprovalqueue-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.taskapprovalqueue-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.taskapprovalqueue-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.taskapprovalqueue-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.taskapprovalqueue-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.taskapprovalqueue-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--ta-primary);
  border-color: var(--ta-primary);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1250px) {
  .taskapprovalqueue-theme {
    padding: 18px;
  }

  .taskapprovalqueue-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .taskapprovalqueue-theme .unit-search {
    grid-column: span 2;
  }
}

@media (max-width: 850px) {
  .taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .taskapprovalqueue-theme .unit-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .taskapprovalqueue-theme {
    padding: 14px;
  }

  .taskapprovalqueue-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .taskapprovalqueue-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .taskapprovalqueue-theme > .unit-header h2 {
    font-size: 22px;
  }

  .taskapprovalqueue-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .taskapprovalqueue-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .taskapprovalqueue-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .taskapprovalqueue-theme .unit-header-actions,
  .taskapprovalqueue-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-tabs {
    align-items: stretch;
    padding: 14px 16px;
  }

  .taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-tabs::before {
    flex: 0 0 100%;
  }

  .taskapprovalqueue-theme .unit-tab {
    flex: 1 1 100%;
  }

  .taskapprovalqueue-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .taskapprovalqueue-theme .unit-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .taskapprovalqueue-theme *,
  .taskapprovalqueue-theme *::before,
  .taskapprovalqueue-theme *::after {
    transition: none !important;
  }
}



/* =========================================================
   AdminAssingtask.css
   UI-only redesign. AdminAssingtask.jsx remains byte-for-byte unchanged.
   ========================================================= */

.assigntask-theme {
  --as-primary: #005baa;
  --as-primary-soft: #eaf4ff;
  --as-text: #172033;
  --as-muted: #667085;
  --as-border: #e5eaf0;
  --as-bg: #f6f8fb;

  --as-blue: #2563eb;
  --as-blue-soft: #eff6ff;
  --as-purple: #7c3aed;
  --as-purple-soft: #f5f3ff;
  --as-green: #16a34a;
  --as-green-soft: #ecfdf3;
  --as-orange: #ea580c;
  --as-orange-soft: #fff7ed;
  --as-red: #dc2626;
  --as-red-soft: #fef2f2;
  --as-cyan: #0891b2;
  --as-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--as-text);
  background: var(--as-bg);
}

/* ====================== HEADER ====================== */

.assigntask-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.assigntask-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--as-primary);
}

.assigntask-theme > .unit-header::before {
  content: "\f0ae";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--as-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.assigntask-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--as-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.assigntask-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: var(--as-text);
  font-size: 27px;
  font-weight: 800;
}

.assigntask-theme > .unit-header p {
  margin: 0;
  color: var(--as-muted);
  font-size: 14px;
  line-height: 1.5;
}

.assigntask-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.assigntask-theme .unit-btn,
.unit-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.assigntask-theme .unit-btn:hover:not(:disabled),
.unit-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.assigntask-theme .unit-btn-light,
.unit-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.assigntask-theme .unit-btn-primary,
.unit-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--as-primary), #1675c8) !important;
  border: 1px solid var(--as-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

/* ====================== KPI CARDS ====================== */

.assigntask-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.assigntask-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--as-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.assigntask-theme .unit-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: currentColor;
}

.assigntask-theme .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.assigntask-stat-icon {
  order: 2;
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 16px;
}

.assigntask-stat-text {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assigntask-stat-text span {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.assigntask-stat-text strong {
  color: #1f2937;
  font-size: 21px;
  font-weight: 900;
}

.assigntask-theme .unit-stat-card:first-child {
  color: var(--as-blue);
  border-color: #dbeafe;
}

.assigntask-stat-icon-primary {
  color: var(--as-blue);
  background: var(--as-blue-soft);
}

.assigntask-theme .unit-stat-card:has(.assigntask-stat-icon-danger) {
  color: var(--as-red);
  border-color: #fecaca;
}

.assigntask-stat-icon-danger {
  color: var(--as-red);
  background: var(--as-red-soft);
}

.assigntask-theme .unit-stat-card:has(.assigntask-stat-icon-warning) {
  color: var(--as-orange);
  border-color: #fed7aa;
}

.assigntask-stat-icon-warning {
  color: var(--as-orange);
  background: var(--as-orange-soft);
}

.assigntask-theme .unit-stat-card:has(.assigntask-stat-icon-accent) {
  color: var(--as-purple);
  border-color: #e9d5ff;
}

.assigntask-stat-icon-accent {
  color: var(--as-purple);
  background: var(--as-purple-soft);
}

.assigntask-theme .unit-stat-card:has(.assigntask-stat-icon-success) {
  color: var(--as-green);
  border-color: #bbf7d0;
}

.assigntask-stat-icon-success {
  color: var(--as-green);
  background: var(--as-green-soft);
}

/* ====================== MAIN CARD / TWO ROW TOOLBAR ====================== */

.assigntask-theme > .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--as-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.assigntask-theme > .unit-card > .unit-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* First row */
.assigntask-theme > .unit-card > .unit-toolbar > div:first-child {
  position: relative;
  width: 100%;
  min-height: 78px;
  padding: 18px 20px 18px 74px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.assigntask-theme > .unit-card > .unit-toolbar > div:first-child::before {
  content: "\f508";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--as-primary);
  background: var(--as-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.assigntask-theme > .unit-card > .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.assigntask-theme > .unit-card > .unit-toolbar h5 .assigntask-list-icon {
  display: none;
}

.assigntask-theme > .unit-card > .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* Filter row */
.assigntask-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(300px, 1.5fr)
    minmax(170px, .8fr)
    minmax(170px, .8fr)
    minmax(120px, .58fr)
    auto;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== SEARCH / FILTERS ====================== */

.assigntask-theme .unit-search {
  width: 100%;
  max-width: none !important;
}

.assigntask-theme .unit-search .input-group-text,
.unit-modal .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.assigntask-theme .unit-search .form-control,
.unit-modal .input-group .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.assigntask-theme .unit-clear-btn,
.unit-modal .unit-clear-btn {
  min-height: 40px;
  padding: 0 9px !important;
  color: #667085 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.assigntask-theme .unit-page-size {
  width: 100%;
  max-width: none !important;
  min-height: 40px;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

/* ====================== TABLE ====================== */

.assigntask-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.assigntask-theme .unit-table {
  width: 100%;
  min-width: 1150px;
  margin: 0;
  vertical-align: middle;
}

.assigntask-theme .unit-table thead th {
  padding: 13px 10px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.assigntask-theme .unit-table tbody td {
  padding: 11px 10px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.assigntask-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.assigntask-theme .unit-id {
  display: inline-flex;
  min-width: 38px;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #f2f4f7;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 800;
}

.assigntask-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 185px;
}

.assigntask-theme .unit-letter {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--as-primary);
  background: var(--as-primary-soft);
  border: 1px solid #d7eaff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.assigntask-theme .unit-name-box strong {
  display: block;
  max-width: 185px;
  overflow: hidden;
  color: #1f2937;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assigntask-theme .unit-name-box small {
  display: block;
  margin-top: 2px;
  color: #98a2b3;
  font-size: 7.5px;
}

/* Category cell */
.assigntask-theme .unit-table tbody td:nth-child(4) {
  color: #6941c6;
  font-weight: 700;
}

/* ====================== STATUS BADGES ====================== */

.assigntask-theme .unit-status,
.unit-modal .unit-status {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.assigntask-status-unassigned {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.assigntask-status-pending {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.assigntask-status-in-progress {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.assigntask-status-completed {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* ====================== COMPACT ACTION COLUMN ====================== */

.assigntask-theme .unit-table th:last-child,
.assigntask-theme .unit-table td:last-child {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  position: sticky;
  right: 0;
}

.assigntask-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: #0e4b5a;
  text-align: center !important;
}

.assigntask-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  text-align: center !important;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.assigntask-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.assigntask-theme .unit-table td:last-child .unit-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap !important;
}

/* Original assign/reassign button and handler stay untouched.
   CSS makes it a small icon-only button. */
.assigntask-theme .unit-table td:last-child .unit-btn {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.assigntask-theme .unit-table td:last-child .unit-btn i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.assigntask-theme .unit-table td:last-child .unit-btn:hover {
  transform: translateY(-2px);
}

/* ====================== LOADER / EMPTY ====================== */

.assigntask-theme .unit-loader,
.assigntask-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.assigntask-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.assigntask-theme .unit-loader .spinner-border {
  color: var(--as-primary);
}

.assigntask-theme .unit-empty {
  padding: 28px 20px;
  text-align: center;
}

.assigntask-theme .unit-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--as-primary);
  background: var(--as-primary-soft);
  border-radius: 18px;
  font-size: 23px;
}

.assigntask-theme .unit-empty h5 {
  margin: 0 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.assigntask-theme .unit-empty p {
  margin: 0 0 15px;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.assigntask-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.assigntask-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.assigntask-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.assigntask-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.assigntask-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--as-primary);
  border-color: var(--as-primary);
}

/* ====================== MODALS ====================== */

.unit-modal .modal-dialog {
  max-width: 650px;
}

.unit-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.unit-modal .modal-header {
  position: relative;
  padding: 18px 20px 18px 72px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.unit-modal .modal-header::before {
  content: "\f0ae";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.unit-modal .modal-title {
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.unit-modal .modal-body {
  padding: 20px;
}

.unit-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.unit-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.unit-modal .form-control,
.unit-modal .form-select {
  min-height: 42px;
  color: #344054;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.unit-modal textarea.form-control {
  min-height: auto;
}

.unit-modal .unit-card {
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 12px;
}

.unit-modal .unit-card h6 {
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
}

.unit-modal .unit-card p {
  font-size: 10px;
}

/* Make the wider Create Task form breathe */
.unit-modal .row.g-3 {
  --bs-gutter-x: 12px;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1180px) {
  .assigntask-theme {
    padding: 18px;
  }

  .assigntask-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .assigntask-theme .unit-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .assigntask-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .assigntask-theme .unit-search {
    grid-column: span 2;
  }
}

@media (max-width: 800px) {
  .assigntask-theme .unit-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assigntask-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assigntask-theme .unit-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .assigntask-theme {
    padding: 14px;
  }

  .assigntask-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .assigntask-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .assigntask-theme > .unit-header h2 {
    font-size: 22px;
  }

  .assigntask-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .assigntask-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .assigntask-theme .unit-search {
    grid-column: auto;
  }

  .assigntask-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .assigntask-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .assigntask-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .assigntask-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .assigntask-theme .unit-header-actions .unit-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assigntask-theme *,
  .assigntask-theme *::before,
  .assigntask-theme *::after {
    transition: none !important;
  }
}



/* =========================================================
   CreateTaskPage.css
   UI-only styling for CreateTaskPage.
   Business logic remains in CreateTaskPage.jsx / TaskCreateForm.
   ========================================================= */

.createtask-page-theme {
  --ct-primary: #005baa;
  --ct-primary-dark: #00467f;
  --ct-primary-soft: #eaf4ff;

  --ct-text: #172033;
  --ct-muted: #667085;
  --ct-border: #e5eaf0;
  --ct-bg: #f6f8fb;

  --ct-blue: #2563eb;
  --ct-green: #16a34a;
  --ct-purple: #7c3aed;
  --ct-orange: #ea580c;
  --ct-red: #dc2626;

  min-height: 100%;
  padding: 24px;
  color: var(--ct-text);
  background: var(--ct-bg);
}

/* ====================== PAGE HEADER ====================== */

.createtask-page-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 116px;
  margin-bottom: 22px;
  padding: 24px 28px 24px 96px;
  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.createtask-page-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ct-primary);
}

.createtask-page-theme > .unit-header::before {
  content: "\f044";
  position: absolute;
  left: 26px;
  top: 50%;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  color: #ffffff;
  background: linear-gradient(135deg, var(--ct-primary), #1675c8);
  border-radius: 16px;

  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.createtask-page-theme > .unit-header > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.createtask-page-theme .unit-page-label {
  margin-bottom: 4px;

  color: var(--ct-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.createtask-page-theme > .unit-header h2 {
  margin: 0 0 6px;

  color: var(--ct-text);

  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.createtask-page-theme > .unit-header p {
  max-width: 900px;
  margin: 0;

  color: var(--ct-muted);

  font-size: 14px;
  line-height: 1.55;
}

/* subtle decorative accent */
.createtask-page-theme > .unit-header > div::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -180px;

  width: 280px;
  height: 280px;

  border-radius: 50%;
  background: rgba(0, 91, 170, 0.035);

  pointer-events: none;
}

/* ====================== TASK FORM CONTAINER ====================== */

/*
  These are intentionally scoped page-level overrides.
  TaskCreateForm's logic/markup does not need to change.
*/

.createtask-page-theme .unit-card,
.createtask-page-theme .task-create-card,
.createtask-page-theme .task-form-card {
  background: #ffffff;
  border: 1px solid var(--ct-border);
  border-radius: 18px;

  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.06),
    0 2px 7px rgba(15, 23, 42, 0.035);
}

.createtask-page-theme .unit-card .card-body,
.createtask-page-theme .task-create-card .card-body,
.createtask-page-theme .task-form-card .card-body {
  padding: 22px;
}

/* ====================== SECTION HEADINGS ====================== */

.createtask-page-theme .unit-card h4,
.createtask-page-theme .unit-card h5,
.createtask-page-theme .unit-card h6,
.createtask-page-theme .task-create-card h4,
.createtask-page-theme .task-create-card h5,
.createtask-page-theme .task-create-card h6 {
  color: #1f2937;
  font-weight: 800;
}

.createtask-page-theme .unit-card h5,
.createtask-page-theme .task-create-card h5 {
  font-size: 16px;
}

.createtask-page-theme hr {
  margin: 20px 0;
  border-color: #edf0f4;
  opacity: 1;
}

/* ====================== FORM CONTROLS ====================== */

.createtask-page-theme .form-label {
  margin-bottom: 6px;

  color: #344054;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15px;
}

.createtask-page-theme .form-control,
.createtask-page-theme .form-select {
  min-height: 43px;

  color: #344054;
  background-color: #ffffff;

  border: 1px solid #dfe4ea;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 11px;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.createtask-page-theme .form-control:focus,
.createtask-page-theme .form-select:focus {
  border-color: #84c5ff;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.09) !important;
}

.createtask-page-theme textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

.createtask-page-theme .form-control::placeholder {
  color: #98a2b3;
}

.createtask-page-theme .form-select:disabled,
.createtask-page-theme .form-control:disabled {
  color: #98a2b3;
  background: #f8fafc;
  cursor: not-allowed;
}

.createtask-page-theme .form-text,
.createtask-page-theme small.text-muted {
  color: #8a94a3 !important;
  font-size: 9px;
}

/* ====================== INPUT GROUPS ====================== */

.createtask-page-theme .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #7b8493;
  background: #ffffff;

  border-color: #dfe4ea;
}

.createtask-page-theme .input-group > .input-group-text:first-child {
  border-right: 0;
}

.createtask-page-theme .input-group > .input-group-text:first-child + .form-control {
  border-left: 0;
}

/* ====================== BUTTONS ====================== */

.createtask-page-theme .unit-btn,
.createtask-page-theme .btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  border-radius: 10px;

  font-size: 11px;
  font-weight: 700;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.createtask-page-theme .unit-btn:hover:not(:disabled),
.createtask-page-theme .btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.createtask-page-theme .unit-btn-primary,
.createtask-page-theme .btn-primary {
  color: #ffffff !important;

  background: linear-gradient(135deg, var(--ct-primary), #1675c8) !important;
  border-color: var(--ct-primary) !important;

  box-shadow: 0 6px 14px rgba(0, 91, 170, 0.18);
}

.createtask-page-theme .unit-btn-light,
.createtask-page-theme .btn-light,
.createtask-page-theme .btn-outline-secondary {
  color: #344054 !important;

  background: #ffffff !important;
  border-color: #dfe4ea !important;
}

.createtask-page-theme .btn-danger,
.createtask-page-theme .btn-outline-danger {
  border-radius: 10px;
}

/* ====================== BADGES / STATUS ====================== */

.createtask-page-theme .badge,
.createtask-page-theme .unit-status {
  min-height: 25px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 4px 8px !important;

  border-radius: 999px !important;

  font-size: 7.5px !important;
  font-weight: 800 !important;
}

/* ====================== SELECT / REACT-SELECT SUPPORT ====================== */

.createtask-page-theme .react-select__control {
  min-height: 43px;

  border: 1px solid #dfe4ea !important;
  border-radius: 10px !important;

  box-shadow: none !important;
}

.createtask-page-theme .react-select__control--is-focused {
  border-color: #84c5ff !important;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.09) !important;
}

.createtask-page-theme .react-select__placeholder,
.createtask-page-theme .react-select__single-value,
.createtask-page-theme .react-select__input-container {
  font-size: 11px !important;
}

/* ====================== ALERTS / VALIDATION ====================== */

.createtask-page-theme .alert {
  border: 0;
  border-radius: 11px;

  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045);

  font-size: 11px;
}

.createtask-page-theme .alert-danger {
  border-left: 4px solid var(--ct-red);
}

.createtask-page-theme .alert-warning {
  border-left: 4px solid var(--ct-orange);
}

.createtask-page-theme .alert-success {
  border-left: 4px solid var(--ct-green);
}

.createtask-page-theme .text-danger {
  color: #d92d20 !important;
}

/* ====================== FORM FOOTER / ACTION AREA ====================== */

.createtask-page-theme .unit-footer,
.createtask-page-theme .task-form-actions,
.createtask-page-theme .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  padding-top: 16px;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 900px) {
  .createtask-page-theme {
    padding: 18px;
  }

  .createtask-page-theme > .unit-header {
    padding-right: 22px;
  }
}

@media (max-width: 760px) {
  .createtask-page-theme {
    padding: 14px;
  }

  .createtask-page-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .createtask-page-theme > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .createtask-page-theme > .unit-header h2 {
    font-size: 22px;
  }

  .createtask-page-theme > .unit-header p {
    font-size: 12px;
  }

  .createtask-page-theme .unit-card .card-body,
  .createtask-page-theme .task-create-card .card-body,
  .createtask-page-theme .task-form-card .card-body {
    padding: 18px;
  }
}

@media (max-width: 520px) {
  .createtask-page-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .createtask-page-theme > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .createtask-page-theme .unit-footer,
  .createtask-page-theme .task-form-actions,
  .createtask-page-theme .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .createtask-page-theme .unit-footer .btn,
  .createtask-page-theme .task-form-actions .btn,
  .createtask-page-theme .form-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .createtask-page-theme *,
  .createtask-page-theme *::before,
  .createtask-page-theme *::after {
    transition: none !important;
  }
}


/* =========================================================
   TaskApprovalPolicyManagementPage.css
   UI-only redesign. JSX/business logic remains byte-for-byte unchanged.
   ========================================================= */

.approvalpolicy-theme {
  --ap-primary: #005baa;
  --ap-primary-soft: #eaf4ff;
  --ap-text: #172033;
  --ap-muted: #667085;
  --ap-border: #e5eaf0;
  --ap-bg: #f6f8fb;

  --ap-blue: #2563eb;
  --ap-blue-soft: #eff6ff;
  --ap-purple: #7c3aed;
  --ap-purple-soft: #f5f3ff;
  --ap-green: #16a34a;
  --ap-green-soft: #ecfdf3;
  --ap-orange: #ea580c;
  --ap-orange-soft: #fff7ed;
  --ap-red: #dc2626;
  --ap-red-soft: #fef2f2;
  --ap-cyan: #0891b2;
  --ap-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--ap-text);
  background: var(--ap-bg);
}

/* ====================== HEADER ====================== */

.approvalpolicy-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.approvalpolicy-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ap-primary);
}

.approvalpolicy-theme > .unit-header::before {
  content: "\f3ed";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ap-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.approvalpolicy-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--ap-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.approvalpolicy-theme > .unit-header h2 {
  margin: 0 66px 5px;
  color: var(--ap-text);
  font-size: 27px;
  font-weight: 800;
}

.approvalpolicy-theme > .unit-header p {
  max-width: 880px;
  margin: 0;
  color: var(--ap-muted);
  font-size: 14px;
  line-height: 1.5;
}

.approvalpolicy-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.approvalpolicy-theme .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.approvalpolicy-theme .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.approvalpolicy-theme .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.approvalpolicy-theme .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ap-primary), #1675c8) !important;
  border: 1px solid var(--ap-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

/* ====================== POLICY PREVIEW AREA ====================== */

/* These overrides only style whatever preview card markup already renders. */
.approvalpolicy-theme > .card,
.approvalpolicy-theme .policy-preview-card,
.approvalpolicy-theme .task-approval-policy-preview,
.approvalpolicy-theme .approval-policy-preview {
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.approvalpolicy-theme > .card .card-body,
.approvalpolicy-theme .policy-preview-card .card-body,
.approvalpolicy-theme .task-approval-policy-preview .card-body,
.approvalpolicy-theme .approval-policy-preview .card-body {
  padding: 18px;
}

/* ====================== MAIN CARD / TWO-ROW TOOLBAR ====================== */

.approvalpolicy-theme > .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.approvalpolicy-theme > .unit-card > .unit-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* First row */
.approvalpolicy-theme > .unit-card > .unit-toolbar > div:first-child {
  position: relative;
  width: 100%;
  min-height: 78px;
  padding: 18px 20px 18px 74px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.approvalpolicy-theme > .unit-card > .unit-toolbar > div:first-child::before {
  content: "\f3ed";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ap-primary);
  background: var(--ap-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.approvalpolicy-theme > .unit-card > .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.approvalpolicy-theme > .unit-card > .unit-toolbar h5 .policy-list-icon {
  display: none;
}

.approvalpolicy-theme > .unit-card > .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* Second row */
.approvalpolicy-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
  width: 100%;
  display: grid !important;
  grid-template-columns:
    minmax(240px, 1.25fr)
    minmax(165px, .78fr)
    minmax(165px, .78fr)
    minmax(165px, .78fr)
    minmax(175px, .82fr)
    minmax(140px, .62fr)
    auto;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
}

/* ====================== SEARCH / FILTERS ====================== */

.approvalpolicy-theme .unit-search {
  width: 100%;
  max-width: none !important;
}

.approvalpolicy-theme .unit-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.approvalpolicy-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.approvalpolicy-theme .unit-toolbar-actions .form-select {
  width: 100%;
  max-width: none !important;
  min-height: 40px;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

.approvalpolicy-theme .unit-clear-filters-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  color: #475467 !important;
  background: #f8fafc !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

/* ====================== TABLE ====================== */

.approvalpolicy-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.approvalpolicy-theme .unit-table {
  width: 100%;
  min-width: 1050px;
  margin: 0;
  vertical-align: middle;
}

.approvalpolicy-theme .unit-table thead th {
  padding: 13px 11px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.approvalpolicy-theme .unit-table tbody td {
  padding: 12px 11px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.approvalpolicy-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

/* Code column */
.approvalpolicy-theme .unit-table tbody td:first-child {
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8.5px;
  font-weight: 700;
}

/* Policy name */
.approvalpolicy-theme .unit-table tbody td:nth-child(2) {
  min-width: 180px;
  color: #1f2937;
  font-size: 10.5px;
  font-weight: 800;
}

/* Scope */
.approvalpolicy-theme .unit-table tbody td:nth-child(3) {
  min-width: 220px;
  color: #667085 !important;
}

/* Trigger badge */
.approvalpolicy-theme .unit-table .badge.bg-light {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

/* Stage count */
.approvalpolicy-theme .unit-table tbody td:nth-child(5) {
  font-weight: 800;
  color: #175cd3;
}

/* ====================== STATUS ====================== */

.approvalpolicy-theme .unit-status {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.approvalpolicy-theme .unit-status-inactive {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* ====================== COMPACT STICKY ACTIONS ====================== */

.approvalpolicy-theme .unit-table th:last-child,
.approvalpolicy-theme .unit-table td:last-child {
  width: 122px !important;
  min-width: 122px !important;
  max-width: 122px !important;
  position: sticky;
  right: 0;
}

.approvalpolicy-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: #0e4b5a;
  text-align: center !important;
}

.approvalpolicy-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.approvalpolicy-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.approvalpolicy-theme .unit-table td:last-child .unit-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 4px;
}

/* Existing buttons/handlers unchanged; only visual sizing */
.approvalpolicy-theme .unit-table td:last-child .unit-icon-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  transition:
    transform .18s ease,
    color .18s ease,
    background-color .18s ease;
}

.approvalpolicy-theme .unit-table td:last-child .unit-icon-btn i {
  margin: 0 !important;
  font-size: 10px !important;
}

/* Edit */
.approvalpolicy-theme .unit-table td:last-child .unit-edit {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

/* Activate / deactivate */
.approvalpolicy-theme .unit-table td:last-child .policy-toggle {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

/* Delete */
.approvalpolicy-theme .unit-table td:last-child .unit-delete {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.approvalpolicy-theme .unit-table td:last-child .unit-icon-btn:hover {
  color: #fff !important;
  background: var(--ap-primary) !important;
  transform: translateY(-2px);
}

/* ====================== LOADER / EMPTY ====================== */

.approvalpolicy-theme .unit-loader,
.approvalpolicy-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.approvalpolicy-theme .unit-loader {
  gap: 14px;
  color: #667085;
}

.approvalpolicy-theme .unit-loader .spinner-border {
  color: var(--ap-primary);
}

/* Generic EmptyState styling through page scope */
.approvalpolicy-theme .empty-state,
.approvalpolicy-theme .unit-empty {
  padding: 30px 20px;
  text-align: center;
}

.approvalpolicy-theme .empty-state h5,
.approvalpolicy-theme .empty-state h4,
.approvalpolicy-theme .unit-empty h5 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.approvalpolicy-theme .empty-state p,
.approvalpolicy-theme .unit-empty p {
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.approvalpolicy-theme .unit-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  background: #fcfdff;
  border-top: 1px solid #edf0f4;
}

.approvalpolicy-theme .unit-count-text {
  color: #7b8493;
  font-size: 12px;
}

.approvalpolicy-theme .unit-pagination {
  display: flex;
  gap: 5px;
  margin: 0;
}

.approvalpolicy-theme .unit-pagination .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  background: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px !important;
  font-size: 10px;
  font-weight: 700;
}

.approvalpolicy-theme .unit-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--ap-primary);
  border-color: var(--ap-primary);
}

/* ====================== EDITOR / CONFIRM MODAL SUPPORT ====================== */

/* Editor/Confirm modal classes already supplied by child components.
   These styles do not modify their logic. */
.admin-teal-backdrop {
  background-color: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(2px);
}

.admin-teal-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.admin-teal-modal .modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.admin-teal-modal .modal-title {
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-teal-modal-sm .modal-dialog {
  max-width: 500px;
}

.admin-teal-modal-danger .modal-header {
  background: linear-gradient(135deg, #fff7f5, #fff);
}

.admin-modal-danger-icon {
  color: #b42318 !important;
  background: #fef3f2 !important;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1250px) {
  .approvalpolicy-theme {
    padding: 18px;
  }

  .approvalpolicy-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .approvalpolicy-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .approvalpolicy-theme .unit-search {
    grid-column: span 2;
  }
}

@media (max-width: 850px) {
  .approvalpolicy-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approvalpolicy-theme .unit-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .approvalpolicy-theme {
    padding: 14px;
  }

  .approvalpolicy-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .approvalpolicy-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .approvalpolicy-theme > .unit-header h2 {
    font-size: 22px;
  }

  .approvalpolicy-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .approvalpolicy-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .approvalpolicy-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .approvalpolicy-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .approvalpolicy-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .approvalpolicy-theme > .unit-card > .unit-toolbar > .unit-toolbar-actions {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .approvalpolicy-theme .unit-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approvalpolicy-theme *,
  .approvalpolicy-theme *::before,
  .approvalpolicy-theme *::after {
    transition: none !important;
  }
}



/* =========================================================
   MyPerformanceDashboardPage.css
   Professional performance dashboard styling.
   Business logic remains unchanged.
   ========================================================= */

.mpd-page {
  --mpd-primary: #005baa;
  --mpd-primary-soft: #eaf4ff;

  --mpd-text: #172033;
  --mpd-muted: #667085;
  --mpd-border: #e5eaf0;
  --mpd-bg: #f6f8fb;

  --mpd-blue: #2563eb;
  --mpd-blue-soft: #eff6ff;
  --mpd-purple: #7c3aed;
  --mpd-purple-soft: #f5f3ff;
  --mpd-green: #16a34a;
  --mpd-green-soft: #ecfdf3;
  --mpd-orange: #ea580c;
  --mpd-orange-soft: #fff7ed;
  --mpd-red: #dc2626;
  --mpd-cyan: #0891b2;
  --mpd-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;

  color: var(--mpd-text);
  background: var(--mpd-bg);
}

/* ====================== PAGE HEADER ====================== */

.mpd-page > .unit-header {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 118px;
  margin-bottom: 22px;
  padding: 24px 28px 24px 96px;

  overflow: hidden;

  background:
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);

  border: 1px solid #dce9f5;
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.mpd-page > .unit-header::after {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 6px;

  background: var(--mpd-primary);
}

.mpd-page > .unit-header::before {
  content: "\f080";

  position: absolute;
  left: 26px;
  top: 50%;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  color: #ffffff;

  background:
    linear-gradient(135deg, var(--mpd-primary), #1675c8);

  border-radius: 16px;

  box-shadow:
    0 8px 18px rgba(0, 91, 170, 0.24);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.mpd-page .unit-page-label {
  margin-bottom: 4px;

  color: var(--mpd-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.mpd-page > .unit-header h2 {
     margin: 0 0 6px 64px;

  color: var(--mpd-text);

  font-size: 27px;
  font-weight: 800;
}

.mpd-page > .unit-header p {
  max-width: 850px;
  margin: 0;

  color: var(--mpd-muted);

  font-size: 14px;
  line-height: 1.55;
}

/* ====================== FILTER BAR ====================== */

/*
  DashboardFilterBar is shared.
  These styles are intentionally scoped to this page only.
*/

.mpd-page .dashboard-filter-bar,
.mpd-page .perf-filter-bar,
.mpd-page .filter-bar,
.mpd-page > form,
.mpd-page > .card:first-of-type {
  margin-bottom: 22px;
}

.mpd-page .dashboard-filter-bar,
.mpd-page .perf-filter-bar {
  padding: 16px 18px;

  background: #ffffff;

  border: 1px solid var(--mpd-border);
  border-radius: 16px;

  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.05);
}

.mpd-page .dashboard-filter-bar .form-label,
.mpd-page .perf-filter-bar .form-label {
  margin-bottom: 5px;

  color: #475467;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.mpd-page .dashboard-filter-bar .form-control,
.mpd-page .dashboard-filter-bar .form-select,
.mpd-page .perf-filter-bar .form-control,
.mpd-page .perf-filter-bar .form-select {
  min-height: 40px;

  border: 1px solid #dfe4ea;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 10px;
}

.mpd-page .dashboard-filter-bar .form-control:focus,
.mpd-page .dashboard-filter-bar .form-select:focus,
.mpd-page .perf-filter-bar .form-control:focus,
.mpd-page .perf-filter-bar .form-select:focus {
  border-color: #84c5ff;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, 0.08) !important;
}

/* ====================== DATA QUALITY NOTICE ====================== */

.mpd-page .alert,
.mpd-page .data-quality-notice {
  margin-bottom: 18px;

  border: 0;
  border-left: 4px solid var(--mpd-orange);
  border-radius: 12px;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.045);

  font-size: 11px;
}

/* ====================== SECTION CARDS ====================== */

.mpd-page .perf-section-card {
  margin-bottom: 18px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--mpd-border);
  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.055);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.mpd-page .perf-section-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08);
}

.mpd-page .perf-section-card > .card-body {
  padding: 20px;
}

/* ====================== SECTION TITLES ====================== */

.mpd-page .perf-section-title {
  position: relative;

  min-height: 42px;

  display: flex;
  align-items: center;
  gap: 10px;

  margin: -2px 0 18px;
  padding: 0 0 12px;

  color: #1f2937;

  border-bottom: 1px solid #edf0f4;

  font-size: 13px;
  font-weight: 800;
}

.mpd-page .perf-section-title i {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--mpd-primary);
  background: var(--mpd-primary-soft);

  border-radius: 10px;

  font-size: 12px;
}

/* ====================== METRIC CARD SUPPORT ====================== */

/*
  MetricCard is shared, so only page-scoped presentation is overridden.
*/

.mpd-page .metric-card,
.mpd-page .perf-metric-card,
.mpd-page .dashboard-metric-card {
  height: 100%;

  background: #ffffff;

  border: 1px solid #e8edf3;
  border-radius: 14px;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.045);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.mpd-page .metric-card:hover,
.mpd-page .perf-metric-card:hover,
.mpd-page .dashboard-metric-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.075);
}

/* common metric card typography */
.mpd-page .metric-card .card-body,
.mpd-page .perf-metric-card .card-body,
.mpd-page .dashboard-metric-card .card-body {
  padding: 15px;
}

.mpd-page .metric-card small,
.mpd-page .metric-card .text-muted,
.mpd-page .perf-metric-card small,
.mpd-page .perf-metric-card .text-muted {
  color: #7b8493 !important;

  font-size: 9px;
  font-weight: 700;
}

.mpd-page .metric-card h3,
.mpd-page .metric-card h4,
.mpd-page .metric-card strong,
.mpd-page .perf-metric-card h3,
.mpd-page .perf-metric-card h4,
.mpd-page .perf-metric-card strong {
  color: #1f2937;

  font-weight: 900;
}

/* ====================== SUMMARY COMPONENT SUPPORT ====================== */

.mpd-page .workload-summary,
.mpd-page .tat-compliance-summary,
.mpd-page .form-performance-summary,
.mpd-page .uat-summary,
.mpd-page .performance-score-breakdown {
  width: 100%;
}

/* internal cards from shared summaries */
.mpd-page .perf-section-card .card {
  border: 1px solid #e8edf3;
  border-radius: 14px;

  box-shadow: none;
}

.mpd-page .perf-section-card .card .card-body {
  padding: 14px;
}

/* tables inside dashboard components */
.mpd-page .perf-section-card .table-responsive {
  border: 1px solid #edf0f4;
  border-radius: 12px;
}

.mpd-page .perf-section-card table {
  margin-bottom: 0;
}

.mpd-page .perf-section-card table thead th {
  padding: 10px;

  color: #667085;
  background: #f8fafc;

  border-bottom: 1px solid #e9edf2;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.mpd-page .perf-section-card table tbody td {
  padding: 10px;

  color: #344054;

  border-bottom: 1px solid #eef1f4;

  font-size: 9px;
  vertical-align: middle;
}

/* ====================== BADGES ====================== */

.mpd-page .badge {
  min-height: 24px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 4px 8px !important;

  border-radius: 999px !important;

  font-size: 7.5px !important;
  font-weight: 800 !important;
}

/* ====================== COMPOSITE SCORE ====================== */

.mpd-page .perf-section-card:last-child .perf-section-title i.fa-trophy {
  color: #b54708;
  background: #fffaeb;
}

.mpd-page .performance-score-breakdown,
.mpd-page .score-breakdown {
  overflow: hidden;

  border-radius: 14px;
}

/* ====================== SKELETON ====================== */

.mpd-page .perf-skeleton-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 22px;
}

.mpd-page .perf-skeleton-card {
  position: relative;

  min-height: 118px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      #eef2f6 25%,
      #f8fafc 37%,
      #eef2f6 63%
    );

  background-size: 400% 100%;

  border: 1px solid #e7ebf0;
  border-radius: 16px;

  animation: mpd-shimmer 1.35s ease infinite;
}

@keyframes mpd-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .mpd-page {
    padding: 18px;
  }

  .mpd-page .perf-skeleton-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .mpd-page {
    padding: 14px;
  }

  .mpd-page > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .mpd-page > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .mpd-page > .unit-header h2 {
    font-size: 22px;
  }

  .mpd-page > .unit-header p {
    font-size: 12px;
  }

  .mpd-page .perf-section-card > .card-body {
    padding: 16px;
  }

  .mpd-page .perf-section-title {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .mpd-page > .unit-header {
    padding: 82px 18px 18px;
  }

  .mpd-page > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .mpd-page .perf-skeleton-row {
    grid-template-columns: 1fr;
  }

  .mpd-page .perf-section-card {
    border-radius: 14px;
  }

  .mpd-page .perf-section-card > .card-body {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpd-page *,
  .mpd-page *::before,
  .mpd-page *::after {
    transition: none !important;
    animation: none !important;
  }
}




/* =========================================================
   TeamPerformanceDashboardPage.css
   Professional Team Performance Dashboard UI
   Business logic remains unchanged.
   ========================================================= */

.team-perf-theme {
  --tp-primary: #005baa;
  --tp-primary-soft: #eaf4ff;

  --tp-text: #172033;
  --tp-muted: #667085;
  --tp-border: #e5eaf0;
  --tp-bg: #f6f8fb;

  --tp-blue: #2563eb;
  --tp-blue-soft: #eff6ff;
  --tp-purple: #7c3aed;
  --tp-purple-soft: #f5f3ff;
  --tp-green: #16a34a;
  --tp-green-soft: #ecfdf3;
  --tp-orange: #ea580c;
  --tp-orange-soft: #fff7ed;
  --tp-red: #dc2626;
  --tp-red-soft: #fef2f2;
  --tp-cyan: #0891b2;
  --tp-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--tp-text);
  background: var(--tp-bg);
}

/* ====================== HEADER ====================== */

.team-perf-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 118px;
  margin-bottom: 22px;
  padding: 24px 28px 24px 96px;
  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.team-perf-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--tp-primary);
}

.team-perf-theme > .unit-header::before {
  content: "\f0c0";
  position: absolute;
  left: 26px;
  top: 50%;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  color: #fff;
  background: linear-gradient(135deg, var(--tp-primary), #1675c8);
  border-radius: 16px;

  box-shadow: 0 8px 18px rgba(0, 91, 170, 0.24);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.team-perf-theme .unit-page-label {
  margin-bottom: 4px;
  color: var(--tp-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.team-perf-theme > .unit-header h2 {
  margin: 0 0 6px 64px;
  color: var(--tp-text);
  font-size: 27px;
  font-weight: 800;
}

.team-perf-theme > .unit-header p {
  max-width: 900px;
  margin: 0;
  color: var(--tp-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ====================== FILTER BAR ====================== */

.team-perf-theme .dashboard-filter-bar,
.team-perf-theme .perf-filter-bar,
.team-perf-theme .filter-bar {
  margin-bottom: 20px;
  padding: 16px 18px;

  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: 16px;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.team-perf-theme .dashboard-filter-bar .form-label,
.team-perf-theme .perf-filter-bar .form-label {
  margin-bottom: 5px;
  color: #475467;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.team-perf-theme .dashboard-filter-bar .form-control,
.team-perf-theme .dashboard-filter-bar .form-select,
.team-perf-theme .perf-filter-bar .form-control,
.team-perf-theme .perf-filter-bar .form-select {
  min-height: 40px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

/* ====================== DATA QUALITY ====================== */

.team-perf-theme .alert,
.team-perf-theme .data-quality-notice {
  margin-bottom: 18px;
  border: 0;
  border-left: 4px solid var(--tp-orange);
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .045);
  font-size: 11px;
}

/* ====================== TEAM SIZE ====================== */

.team-perf-theme .perf-team-size-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 42px;
  margin-bottom: 18px;
  padding: 9px 14px;

  color: #175cd3;
  background: #eff8ff;
  border: 1px solid #b2ddff;
  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);

  font-size: 11px;
  font-weight: 700;
}

.team-perf-theme .perf-team-size-chip i {
  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #175cd3;
  background: #dbeeff;

  border-radius: 8px;

  font-size: 11px;
}

.team-perf-theme .perf-team-size-chip strong {
  color: #1f2937;
  font-size: 15px;
  font-weight: 900;
}

/* ====================== SECTION CARDS ====================== */

.team-perf-theme .perf-section-card {
  margin-bottom: 18px;

  overflow: hidden;

  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: 18px;

  box-shadow: 0 8px 24px rgba(15, 23, 42, .055);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.team-perf-theme .perf-section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.team-perf-theme .perf-section-card > .card-body {
  padding: 20px;
}

/* ====================== SECTION TITLE ====================== */

.team-perf-theme .perf-section-title {
  min-height: 42px;

  display: flex;
  align-items: center;
  gap: 10px;

  margin: -2px 0 18px;
  padding-bottom: 12px;

  color: #1f2937;
  border-bottom: 1px solid #edf0f4;

  font-size: 13px;
  font-weight: 800;
}

.team-perf-theme .perf-section-title i {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--tp-primary);
  background: var(--tp-primary-soft);

  border-radius: 10px;

  font-size: 12px;
}

/* color accents for each section */
.team-perf-theme .perf-section-card:nth-of-type(1) .perf-section-title i {
  color: #175cd3;
  background: #eff8ff;
}

.team-perf-theme .perf-section-card:nth-of-type(2) .perf-section-title i {
  color: #6941c6;
  background: #f4f3ff;
}

.team-perf-theme .perf-section-card:nth-of-type(3) .perf-section-title i {
  color: #027a48;
  background: #ecfdf3;
}

/* ====================== METRIC BREAKDOWN TABLE ====================== */

/*
  MetricBreakdownTable is shared.
  Everything below is scoped to Team Dashboard only.
*/

.team-perf-theme .perf-section-card .table-responsive,
.team-perf-theme .metric-breakdown-table,
.team-perf-theme .metric-breakdown-wrapper {
  width: 100%;
  overflow-x: auto;

  border: 1px solid #edf0f4;
  border-radius: 13px;
}

.team-perf-theme .perf-section-card table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  vertical-align: middle;
}

.team-perf-theme .perf-section-card table thead th {
  padding: 11px 12px;

  color: #667085;
  background: #f8fafc;

  border-top: 0;
  border-bottom: 1px solid #e9edf2;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-perf-theme .perf-section-card table tbody td {
  padding: 11px 12px;

  color: #344054;

  border-bottom: 1px solid #eef1f4;

  font-size: 9.5px;
  vertical-align: middle;
}

.team-perf-theme .perf-section-card table tbody tr:last-child td {
  border-bottom: 0;
}

.team-perf-theme .perf-section-card table tbody tr:hover td {
  background: #fbfdff;
}

/* User ID column */
.team-perf-theme .perf-section-card table tbody td:first-child {
  color: #175cd3;
  font-weight: 800;
}

/* numerical cells */
.team-perf-theme .perf-section-card table tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* Overdue visual emphasis in first table where applicable */
.team-perf-theme .perf-section-card:first-of-type table tbody td:nth-child(5) {
  color: #b42318;
  font-weight: 800;
}

/* On-time visual emphasis */
.team-perf-theme .perf-section-card:first-of-type table tbody td:nth-child(6),
.team-perf-theme .perf-section-card:last-of-type table tbody td:nth-child(4) {
  color: #027a48;
  font-weight: 800;
}

/* ====================== BADGES ====================== */

.team-perf-theme .badge {
  min-height: 24px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 4px 8px !important;

  border-radius: 999px !important;

  font-size: 7.5px !important;
  font-weight: 800 !important;
}

/* ====================== ACCESS DENIED ====================== */

.team-perf-theme > .unit-empty {
  min-height: 460px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 32px;

  background: #fff;
  border: 1px solid #f0d5d2;
  border-radius: 18px;

  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);

  text-align: center;
}

.team-perf-theme > .unit-empty .unit-empty-icon {
  width: 66px;
  height: 66px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;

  color: #b42318;
  background: #fef3f2;

  border-radius: 18px;

  font-size: 23px;
}

.team-perf-theme > .unit-empty h5 {
  margin: 0 0 6px;

  color: #1f2937;

  font-size: 17px;
  font-weight: 800;
}

.team-perf-theme > .unit-empty p {
  max-width: 420px;
  margin: 0;

  color: #7b8493;

  font-size: 12px;
}

/* ====================== LOADING SKELETON ====================== */

.team-perf-theme .perf-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team-perf-theme .perf-skeleton-block {
  min-height: 180px;

  background:
    linear-gradient(
      90deg,
      #eef2f6 25%,
      #f8fafc 37%,
      #eef2f6 63%
    );

  background-size: 400% 100%;

  border: 1px solid #e7ebf0;
  border-radius: 18px;

  animation: team-perf-shimmer 1.35s ease infinite;
}

@keyframes team-perf-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .team-perf-theme {
    padding: 18px;
  }
}

@media (max-width: 760px) {
  .team-perf-theme {
    padding: 14px;
  }

  .team-perf-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .team-perf-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .team-perf-theme > .unit-header h2 {
    font-size: 22px;
  }

  .team-perf-theme > .unit-header p {
    font-size: 12px;
  }

  .team-perf-theme .perf-section-card > .card-body {
    padding: 16px;
  }

  .team-perf-theme .perf-section-title {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .team-perf-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .team-perf-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .team-perf-theme .perf-team-size-chip {
    width: 100%;
    justify-content: center;
  }

  .team-perf-theme .perf-section-card {
    border-radius: 14px;
  }

  .team-perf-theme .perf-section-card > .card-body {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-perf-theme *,
  .team-perf-theme *::before,
  .team-perf-theme *::after {
    transition: none !important;
    animation: none !important;
  }
}



/* =========================================================
   ProjectPerformanceDashboardPage.css
   Professional Project Performance Dashboard UI
   ========================================================= */

.project-perf-theme {
  --pp-primary: #005baa;
  --pp-primary-soft: #eaf4ff;
  --pp-text: #172033;
  --pp-muted: #667085;
  --pp-border: #e5eaf0;
  --pp-bg: #f6f8fb;
  --pp-blue: #2563eb;
  --pp-green: #16a34a;
  --pp-purple: #7c3aed;
  --pp-orange: #ea580c;
  --pp-red: #dc2626;

  min-height: 100%;
  padding: 24px;
  color: var(--pp-text);
  background: var(--pp-bg);
}

/* Header */
.project-perf-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 118px;
  margin-bottom: 22px;
  padding: 24px 28px 24px 96px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, .07),
    0 2px 8px rgba(17, 24, 39, .04);
}

.project-perf-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--pp-primary);
}

.project-perf-theme > .unit-header::before {
  content: "\f542";
  position: absolute;
  left: 26px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,91,170,.24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.project-perf-theme .unit-page-label {
  margin-bottom: 4px;
  color: var(--pp-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.project-perf-theme > .unit-header h2 {
 margin: 0 0 6px 60px;
  color: var(--pp-text);
  font-size: 27px;
  font-weight: 800;
}

.project-perf-theme > .unit-header p {
  margin: 0;
  color: var(--pp-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Project ID filter */
.project-perf-theme .perf-filter-bar {
  margin-bottom: 20px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.project-perf-theme .perf-filter-bar-compact {
  max-width: 600px;
}

.project-perf-theme .perf-filter-label {
  margin-bottom: 6px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.project-perf-theme .perf-project-id-group {
  max-width: 460px;
}

.project-perf-theme .perf-filter-input {
  min-height: 42px;
  border: 1px solid #dfe4ea;
  border-right: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.project-perf-theme .perf-project-id-group .btn {
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #005baa;
  background: #eff8ff;
  border-color: #b2ddff;
  font-size: 10px;
  font-weight: 800;
}

.project-perf-theme .perf-project-id-group .btn:hover:not(:disabled) {
  color: #fff;
  background: var(--pp-primary);
  border-color: var(--pp-primary);
}

/* Error */
.project-perf-theme .perf-error-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 13px 15px;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

/* Cards */
.project-perf-theme .perf-section-card {
  margin-bottom: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15,23,42,.055);
}

.project-perf-theme .perf-section-card > .card-body {
  padding: 20px;
}

.project-perf-theme .perf-section-title {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 18px;
  padding-bottom: 12px;
  color: #1f2937;
  border-bottom: 1px solid #edf0f4;
  font-size: 13px;
  font-weight: 800;
}

.project-perf-theme .perf-section-title i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-primary);
  background: var(--pp-primary-soft);
  border-radius: 10px;
  font-size: 12px;
}

/* Breakdown tables */
.project-perf-theme .perf-section-card .table-responsive,
.project-perf-theme .metric-breakdown-table,
.project-perf-theme .metric-breakdown-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #edf0f4;
  border-radius: 13px;
}

.project-perf-theme .perf-section-card table {
  width: 100%;
  min-width: 680px;
  margin: 0;
}

.project-perf-theme .perf-section-card table thead th {
  padding: 11px 12px;
  color: #667085;
  background: #f8fafc;
  border-bottom: 1px solid #e9edf2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-perf-theme .perf-section-card table tbody td {
  padding: 11px 12px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.project-perf-theme .perf-section-card table tbody tr:hover td {
  background: #fbfdff;
}

/* Empty */
.project-perf-theme .perf-empty-state-standalone {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  background: #fff;
  border: 1px dashed #cfd8e3;
  border-radius: 18px;
  text-align: center;
}

.project-perf-theme .perf-empty-state-standalone i {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-primary);
  background: var(--pp-primary-soft);
  border-radius: 18px;
  font-size: 22px;
}

.project-perf-theme .perf-empty-state-standalone p {
  margin: 0;
  color: #667085;
  font-size: 12px;
}

/* Skeleton */
.project-perf-theme .perf-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-perf-theme .perf-skeleton-block {
  min-height: 180px;
  background:
    linear-gradient(
      90deg,
      #eef2f6 25%,
      #f8fafc 37%,
      #eef2f6 63%
    );
  background-size: 400% 100%;
  border: 1px solid #e7ebf0;
  border-radius: 18px;
  animation: pp-shimmer 1.35s ease infinite;
}

@keyframes pp-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 760px) {
  .project-perf-theme {
    padding: 14px;
  }

  .project-perf-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .project-perf-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .project-perf-theme > .unit-header h2 {
    font-size: 22px;
  }

  .project-perf-theme .perf-section-card > .card-body {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .project-perf-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .project-perf-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .project-perf-theme .perf-project-id-group {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-perf-theme *,
  .project-perf-theme *::before,
  .project-perf-theme *::after {
    animation: none !important;
    transition: none !important;
  }
}



.organization-perf-theme{
  --org-primary:#005baa;--org-primary-soft:#eaf4ff;--org-text:#172033;--org-muted:#667085;--org-border:#e5eaf0;--org-bg:#f6f8fb;
  min-height:100%;padding:24px;color:var(--org-text);background:var(--org-bg)
}
.organization-perf-theme>.unit-header{
  position:relative;display:flex;align-items:center;min-height:118px;margin-bottom:22px;padding:24px 28px 24px 96px;
  overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f7fbff 100%);border:1px solid #dce9f5;border-radius:18px;
  box-shadow:0 10px 30px rgba(17,24,39,.07),0 2px 8px rgba(17,24,39,.04)
}
.organization-perf-theme>.unit-header:after{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--org-primary)}
.organization-perf-theme>.unit-header:before{
  content:"\f1ad";position:absolute;left:26px;top:50%;width:54px;height:54px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--org-primary),#1675c8);
  border-radius:16px;box-shadow:0 8px 18px rgba(0,91,170,.24);font-family:"Font Awesome 6 Free";font-size:20px;font-weight:900
}
.organization-perf-theme .unit-page-label{margin-bottom:4px;color:var(--org-primary);font-size:11px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
.organization-perf-theme>.unit-header h2{margin:0 0 6px;color:var(--org-text);font-size:27px;font-weight:800}
.organization-perf-theme>.unit-header p{margin:0;color:var(--org-muted);font-size:14px;line-height:1.55}

.organization-perf-theme .dashboard-filter-bar,.organization-perf-theme .perf-filter-bar,.organization-perf-theme .filter-bar{
  margin-bottom:20px;padding:16px 18px;background:#fff;border:1px solid var(--org-border);border-radius:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.05)
}
.organization-perf-theme .dashboard-filter-bar .form-label,.organization-perf-theme .perf-filter-bar .form-label{
  margin-bottom:5px;color:#475467;font-size:9px;font-weight:800;text-transform:uppercase
}
.organization-perf-theme .dashboard-filter-bar .form-control,.organization-perf-theme .dashboard-filter-bar .form-select,
.organization-perf-theme .perf-filter-bar .form-control,.organization-perf-theme .perf-filter-bar .form-select{
  min-height:40px;border:1px solid #dfe4ea;border-radius:10px;box-shadow:none!important;font-size:10px
}

.organization-perf-theme .alert,.organization-perf-theme .data-quality-notice{
  margin-bottom:18px;border:0;border-left:4px solid #ea580c;border-radius:12px;box-shadow:0 5px 14px rgba(15,23,42,.045);font-size:11px
}

.organization-perf-theme .perf-section-card{
  margin-bottom:18px;overflow:hidden;background:#fff;border:1px solid var(--org-border);border-radius:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.055);transition:transform .2s ease,box-shadow .2s ease
}
.organization-perf-theme .perf-section-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.organization-perf-theme .perf-section-card>.card-body{padding:20px}
.organization-perf-theme .perf-section-title{
  min-height:42px;display:flex;align-items:center;gap:10px;margin:-2px 0 18px;padding-bottom:12px;
  color:#1f2937;border-bottom:1px solid #edf0f4;font-size:13px;font-weight:800
}
.organization-perf-theme .perf-section-title i{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--org-primary);
  background:var(--org-primary-soft);border-radius:10px;font-size:12px
}

.organization-perf-theme .metric-card,.organization-perf-theme .perf-metric-card,.organization-perf-theme .dashboard-metric-card{
  height:100%;background:#fff;border:1px solid #e8edf3;border-radius:14px;box-shadow:0 5px 14px rgba(15,23,42,.045);
  transition:transform .18s ease,box-shadow .18s ease
}
.organization-perf-theme .metric-card:hover,.organization-perf-theme .perf-metric-card:hover,.organization-perf-theme .dashboard-metric-card:hover{
  transform:translateY(-3px);box-shadow:0 10px 22px rgba(15,23,42,.075)
}
.organization-perf-theme .metric-card .card-body,.organization-perf-theme .perf-metric-card .card-body,.organization-perf-theme .dashboard-metric-card .card-body{padding:15px}
.organization-perf-theme .metric-card small,.organization-perf-theme .metric-card .text-muted,.organization-perf-theme .perf-metric-card small,.organization-perf-theme .perf-metric-card .text-muted{
  color:#7b8493!important;font-size:9px;font-weight:700
}

.organization-perf-theme>.unit-empty{
  min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;
  background:#fff;border:1px solid #f0d5d2;border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.06);text-align:center
}
.organization-perf-theme>.unit-empty .unit-empty-icon{
  width:66px;height:66px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:#b42318;background:#fef3f2;border-radius:18px;font-size:23px
}
.organization-perf-theme>.unit-empty h5{margin:0 0 6px;color:#1f2937;font-size:17px;font-weight:800}
.organization-perf-theme>.unit-empty p{max-width:440px;margin:0;color:#7b8493;font-size:12px}

.organization-perf-theme .perf-skeleton-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.organization-perf-theme .perf-skeleton-card{
  min-height:118px;background:linear-gradient(90deg,#eef2f6 25%,#f8fafc 37%,#eef2f6 63%);background-size:400% 100%;
  border:1px solid #e7ebf0;border-radius:16px;animation:organization-shimmer 1.35s ease infinite
}
@keyframes organization-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

@media(max-width:1050px){
  .organization-perf-theme{padding:18px}
  .organization-perf-theme .perf-skeleton-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .organization-perf-theme{padding:14px}
  .organization-perf-theme>.unit-header{padding:20px 20px 20px 78px}
  .organization-perf-theme>.unit-header:before{left:18px;width:46px;height:46px}
  .organization-perf-theme>.unit-header h2{font-size:22px}
  .organization-perf-theme>.unit-header p{font-size:12px}
  .organization-perf-theme .perf-section-card>.card-body{padding:16px}
}
@media(max-width:520px){
  .organization-perf-theme>.unit-header{padding:82px 18px 18px}
  .organization-perf-theme>.unit-header:before{top:18px;left:18px;transform:none}
  .organization-perf-theme .perf-skeleton-row{grid-template-columns:1fr}
  .organization-perf-theme .perf-section-card{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .organization-perf-theme *,.organization-perf-theme *:before,.organization-perf-theme *:after{animation:none!important;transition:none!important}
}



/* =========================================================
   PerformancePeriodManagementPage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.perfperiod-theme {
  --pp-primary: #005baa;
  --pp-primary-soft: #eaf4ff;
  --pp-text: #172033;
  --pp-muted: #667085;
  --pp-border: #e5eaf0;
  --pp-bg: #f6f8fb;

  --pp-blue: #2563eb;
  --pp-blue-soft: #eff6ff;
  --pp-purple: #7c3aed;
  --pp-purple-soft: #f5f3ff;
  --pp-green: #16a34a;
  --pp-green-soft: #ecfdf3;
  --pp-orange: #ea580c;
  --pp-orange-soft: #fff7ed;
  --pp-red: #dc2626;
  --pp-red-soft: #fef2f2;
  --pp-slate: #475467;
  --pp-slate-soft: #f2f4f7;

  min-height: 100%;
  padding: 24px;
  color: var(--pp-text);
  background: var(--pp-bg);
}

/* ====================== HEADER ====================== */

.perfperiod-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.04);
}

.perfperiod-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--pp-primary);
}

.perfperiod-theme > .unit-header::before {
  content: "\f073";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pp-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.perfperiod-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--pp-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.perfperiod-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: var(--pp-text);
  font-size: 27px;
  font-weight: 800;
}

.perfperiod-theme > .unit-header p {
  max-width: 860px;
  margin: 0;
  color: var(--pp-muted);
  font-size: 14px;
  line-height: 1.5;
}

.perfperiod-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== COMMON BUTTONS ====================== */

.perfperiod-theme .unit-btn,
.unit-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.perfperiod-theme .unit-btn:hover:not(:disabled),
.unit-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.perfperiod-theme .unit-btn-light,
.unit-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.perfperiod-theme .unit-btn-primary,
.unit-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pp-primary), #1675c8) !important;
  border: 1px solid var(--pp-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

/* ====================== KPI CARDS ====================== */

.perfperiod-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.perfperiod-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.perfperiod-theme .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.perfperiod-stat-icon {
  order: 2;
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 16px;
}

.perfperiod-stat-text {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perfperiod-stat-text span {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.perfperiod-stat-text strong {
  color: #1f2937;
  font-size: 21px;
  font-weight: 900;
}

.perfperiod-stat-icon-primary {
  color: var(--pp-blue);
  background: var(--pp-blue-soft);
}

.perfperiod-stat-icon-success {
  color: var(--pp-green);
  background: var(--pp-green-soft);
}

.perfperiod-stat-icon-accent {
  color: var(--pp-purple);
  background: var(--pp-purple-soft);
}

.perfperiod-theme .unit-stat-card:first-child {
  border-color: #dbeafe;
}

.perfperiod-theme .unit-stat-card:has(.perfperiod-stat-icon-success) {
  border-color: #bbf7d0;
}

.perfperiod-theme .unit-stat-card:has(.perfperiod-stat-icon-accent) {
  border-color: #e9d5ff;
}

/* ====================== MAIN CARD ====================== */

.perfperiod-theme > .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

/* ====================== LIST HEADER ====================== */

.perfperiod-theme .perfperiod-list-header {
  position: relative;
  min-height: 78px;
  padding: 18px 20px 18px 74px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.perfperiod-theme .perfperiod-list-header::before {
  content: "\f073";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-primary);
  background: var(--pp-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.perfperiod-theme .perfperiod-list-header h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfperiod-theme .perfperiod-list-header .perfperiod-list-icon {
  display: none;
}

.perfperiod-theme .perfperiod-list-header p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FILTER ROW ====================== */

.perfperiod-theme .unit-filter-row {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 220px) auto;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
}

.perfperiod-theme .unit-search {
  width: 100% !important;
  max-width: none !important;
}

.perfperiod-theme .unit-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.perfperiod-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.perfperiod-theme .unit-filter-row > .form-select {
  width: 100%;
  max-width: none !important;
  min-height: 40px;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

.perfperiod-theme .unit-clear-filters-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  color: #475467 !important;
  background: #f8fafc !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

/* ====================== TABLE ====================== */

.perfperiod-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.perfperiod-theme .unit-table {
  width: 100%;
  min-width: 1040px;
  margin: 0;
  vertical-align: middle;
}

.perfperiod-theme .unit-table thead th {
  padding: 13px 11px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.perfperiod-theme .unit-table tbody td {
  padding: 12px 11px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.perfperiod-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

/* Code */
.perfperiod-theme .unit-table tbody td:first-child {
  color: #175cd3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8.5px;
  font-weight: 800;
}

/* Name */
.perfperiod-theme .unit-table tbody td:nth-child(2) {
  min-width: 180px;
  color: #1f2937;
  font-size: 10.5px;
  font-weight: 800;
}

/* Type */
.perfperiod-theme .unit-table tbody td:nth-child(3) {
  color: #6941c6;
  font-weight: 700;
}

/* Fiscal Year */
.perfperiod-theme .unit-table tbody td:nth-child(4) {
  color: #475467;
  font-weight: 700;
}

/* Dates */
.perfperiod-theme .unit-table tbody td:nth-child(5) {
  min-width: 190px;
  color: #667085;
  font-variant-numeric: tabular-nums;
}

/* ====================== STATUS BADGES ====================== */

.perfperiod-theme .perfperiod-status {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.perfperiod-theme .perfperiod-status.bg-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.perfperiod-theme .perfperiod-status.bg-secondary {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

.perfperiod-theme .perfperiod-status.bg-dark {
  color: #344054 !important;
  background: #eaecf0 !important;
  border: 1px solid #cfd4dc !important;
}

.perfperiod-theme .perfperiod-status.bg-light {
  color: #475467 !important;
  background: #f8fafc !important;
  border: 1px solid #d0d5dd !important;
}

/* ====================== COMPACT STICKY ACTIONS ====================== */

.perfperiod-theme .unit-table th:last-child,
.perfperiod-theme .unit-table td:last-child {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  position: sticky;
  right: 0;
}

.perfperiod-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: var(--pp-primary);
  text-align: center !important;
}

.perfperiod-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.perfperiod-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.perfperiod-theme .unit-table td:last-child .unit-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 4px;
}

/* Existing Edit/Delete buttons */
.perfperiod-theme .unit-table td:last-child .unit-icon-btn {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

/* Existing Open/Close/Archive buttons — text is visually hidden only. */
.perfperiod-theme .unit-table td:last-child .btn-sm {
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.perfperiod-theme .unit-table td:last-child .btn-sm i,
.perfperiod-theme .unit-table td:last-child .unit-icon-btn i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* Edit */
.perfperiod-theme .unit-table td:last-child .unit-edit {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

/* Open */
.perfperiod-theme .unit-table td:last-child .btn-outline-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* Close */
.perfperiod-theme .unit-table td:last-child .btn-outline-secondary {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

/* Archive */
.perfperiod-theme .unit-table td:last-child .btn-outline-dark {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* Delete */
.perfperiod-theme .unit-table td:last-child .unit-delete {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.perfperiod-theme .unit-table td:last-child .unit-icon-btn:hover,
.perfperiod-theme .unit-table td:last-child .btn-sm:hover {
  color: #fff !important;
  background: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
  transform: translateY(-2px);
}

/* ====================== LOADER / EMPTY ====================== */

.perfperiod-theme .unit-loader {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfperiod-theme .unit-loader .spinner-border {
  color: var(--pp-primary);
}

.perfperiod-theme .empty-state,
.perfperiod-theme .unit-empty {
  padding: 32px 20px;
  text-align: center;
}

.perfperiod-theme .empty-state h5,
.perfperiod-theme .empty-state h4,
.perfperiod-theme .unit-empty h5 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfperiod-theme .empty-state p,
.perfperiod-theme .unit-empty p {
  color: #7b8493;
  font-size: 12px;
}

/* ====================== MODAL ====================== */

.unit-modal .modal-dialog {
  max-width: 700px;
}

.unit-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.unit-modal .modal-header {
  position: relative;
  padding: 18px 20px 18px 72px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.unit-modal .modal-header::before {
  content: "\f073";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.unit-modal .modal-title {
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.unit-modal .modal-body {
  padding: 20px;
}

.unit-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.unit-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.unit-modal .form-control,
.unit-modal .form-select {
  min-height: 42px;
  color: #344054;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.unit-modal .form-control:focus,
.unit-modal .form-select:focus {
  border-color: #84c5ff;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .08) !important;
}

.unit-modal .form-control:disabled {
  color: #667085;
  background: #f8fafc;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .perfperiod-theme {
    padding: 18px;
  }

  .perfperiod-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .perfperiod-theme .unit-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .perfperiod-theme {
    padding: 14px;
  }

  .perfperiod-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .perfperiod-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .perfperiod-theme > .unit-header h2 {
    font-size: 22px;
  }

  .perfperiod-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .perfperiod-theme .unit-filter-row {
    grid-template-columns: 1fr 1fr;
  }

  .perfperiod-theme .unit-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .perfperiod-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .perfperiod-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .perfperiod-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .perfperiod-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .perfperiod-theme .unit-filter-row {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .perfperiod-theme .unit-search {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perfperiod-theme *,
  .perfperiod-theme *::before,
  .perfperiod-theme *::after {
    transition: none !important;
  }
}



/* UI-only redesign. JSX/business logic unchanged. */
.perfmetric-theme{
  --pm-primary:#005baa;--pm-primary-soft:#eaf4ff;--pm-text:#172033;--pm-muted:#667085;--pm-border:#e5eaf0;--pm-bg:#f6f8fb;
  min-height:100%;padding:24px;color:var(--pm-text);background:var(--pm-bg)
}
.perfmetric-theme>.unit-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;padding:24px 26px 24px 92px;overflow:hidden;background:linear-gradient(135deg,#fff,#f7fbff);border:1px solid #dce9f5;border-radius:18px;box-shadow:0 10px 30px rgba(17,24,39,.07),0 2px 8px rgba(17,24,39,.04)}
.perfmetric-theme>.unit-header:after{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--pm-primary)}
.perfmetric-theme>.unit-header:before{content:"\f201";position:absolute;left:25px;top:50%;width:54px;height:54px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--pm-primary),#1675c8);border-radius:16px;box-shadow:0 8px 18px rgba(0,91,170,.24);font-family:"Font Awesome 6 Free";font-size:20px;font-weight:900}
.perfmetric-theme .unit-page-label{margin-bottom:3px;color:var(--pm-primary);font-size:11px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
.perfmetric-theme>.unit-header h2{margin:0 0 5px;font-size:27px;font-weight:800}.perfmetric-theme>.unit-header p{max-width:880px;margin:0;color:var(--pm-muted);font-size:14px;line-height:1.5}
.perfmetric-theme .unit-header-actions{position:relative;z-index:2;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.perfmetric-theme .unit-btn,.unit-modal .unit-btn{min-height:40px;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:10px!important;font-size:12px;font-weight:700}
.perfmetric-theme .unit-btn-light,.unit-modal .unit-btn-light{color:#344054!important;background:#fff!important;border:1px solid #dfe4ea!important}
.perfmetric-theme .unit-btn-primary,.unit-modal .unit-btn-primary{color:#fff!important;background:linear-gradient(135deg,var(--pm-primary),#1675c8)!important;border:1px solid var(--pm-primary)!important}
.perfmetric-theme .unit-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}.perfmetric-theme .unit-stat-card{display:flex;align-items:center;gap:12px;padding:17px;background:#fff;border:1px solid var(--pm-border);border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,.055)}
.perfmetric-stat-icon{order:2;margin-left:auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;font-size:16px}.perfmetric-stat-text{display:flex;flex-direction:column;gap:6px}.perfmetric-stat-text span{color:#667085;font-size:10px;font-weight:700}.perfmetric-stat-text strong{font-size:21px;font-weight:900}
.perfmetric-stat-icon-primary{color:#2563eb;background:#eff6ff}.perfmetric-stat-icon-success{color:#16a34a;background:#ecfdf3}.perfmetric-stat-icon-accent{color:#7c3aed;background:#f5f3ff}
.perfmetric-theme>.unit-card{overflow:hidden;background:#fff;border:1px solid var(--pm-border);border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.065)}
.perfmetric-theme .unit-filter-row{display:grid!important;grid-template-columns:minmax(300px,1fr) minmax(220px,280px) auto;align-items:center;gap:9px;padding:16px 20px;background:linear-gradient(180deg,#fff,#fbfcfe);border-bottom:1px solid #edf0f4}.perfmetric-theme .unit-search{width:100%!important;max-width:none!important}.perfmetric-theme .unit-search .input-group-text{min-width:42px;display:flex;align-items:center;justify-content:center;color:#7b8493;background:#fff;border-color:#dfe4ea;border-right:0}.perfmetric-theme .unit-search .form-control{min-height:40px;border-color:#dfe4ea;border-left:0;box-shadow:none!important;font-size:11px}.perfmetric-theme .unit-filter-row>.form-select{width:100%;max-width:none!important;min-height:40px;border:1px solid #dfe4ea;border-radius:10px;box-shadow:none!important;font-size:10px}.perfmetric-theme .unit-clear-filters-btn{min-height:40px;padding:8px 12px!important;color:#475467!important;background:#f8fafc!important;border:1px solid #d0d5dd!important;border-radius:10px!important;font-size:9px!important;font-weight:800!important}
.perfmetric-theme .unit-table-wrapper{width:100%;overflow-x:auto}.perfmetric-theme .unit-table{width:100%;min-width:1080px;margin:0}.perfmetric-theme .unit-table thead th{padding:13px 11px;color:#667085;background:#f8fafc;border-bottom:1px solid #e9edf2;font-size:8.5px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;white-space:nowrap}.perfmetric-theme .unit-table tbody td{padding:12px 11px;color:#344054;border-bottom:1px solid #eef1f4;font-size:9.5px;vertical-align:middle}.perfmetric-theme .unit-table tbody tr:hover td{background:#fbfdff}
.perfmetric-theme .perfmetric-code{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;color:#175cd3;background:#eff8ff;border:1px solid #b2ddff;border-radius:7px;font-size:8px;font-weight:800}.perfmetric-theme .unit-table tbody td:nth-child(2){min-width:200px}.perfmetric-theme .unit-table tbody td:nth-child(2) strong{color:#1f2937;font-size:10.5px;font-weight:800}
.perfmetric-theme .unit-table .badge{min-height:25px;display:inline-flex!important;align-items:center;padding:4px 8px!important;border-radius:999px!important;font-size:7.5px!important;font-weight:800!important}.perfmetric-theme .unit-table td:nth-child(3) .badge.bg-light{color:#6941c6!important;background:#f4f3ff!important;border:1px solid #d9d6fe!important}.perfmetric-theme .unit-table .badge.bg-success{color:#027a48!important;background:#ecfdf3!important;border:1px solid #abefc6!important}.perfmetric-theme .unit-table .badge.bg-danger{color:#b42318!important;background:#fef3f2!important;border:1px solid #fecdca!important}.perfmetric-theme .unit-table .badge.bg-secondary{color:#475467!important;background:#f2f4f7!important;border:1px solid #d0d5dd!important}
.perfmetric-theme .unit-status{color:#027a48!important;background:#ecfdf3!important;border:1px solid #abefc6!important}.perfmetric-theme .unit-status-inactive{color:#475467!important;background:#f2f4f7!important;border-color:#d0d5dd!important}
.perfmetric-theme .unit-table th:last-child,.perfmetric-theme .unit-table td:last-child{width:74px!important;min-width:74px!important;max-width:74px!important;position:sticky;right:0}.perfmetric-theme .unit-table th:last-child{z-index:5;color:#fff;background:var(--pm-primary);text-align:center!important}.perfmetric-theme .unit-table td:last-child{z-index:4;background:#fff;box-shadow:-7px 0 12px rgba(15,23,42,.05)}.perfmetric-theme .unit-table td:last-child .unit-actions{display:flex;align-items:center;justify-content:center!important;flex-wrap:nowrap!important}
.perfmetric-theme .perfmetric-toggle-btn{width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;max-height:30px!important;display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;margin:0!important;overflow:hidden;border-radius:8px!important;font-size:0!important}.perfmetric-theme .perfmetric-toggle-btn i{font-size:10px!important;margin:0!important}.perfmetric-theme .perfmetric-toggle-btn.btn-outline-secondary{color:#b54708!important;background:#fffaeb!important;border:1px solid #fedf89!important}.perfmetric-theme .perfmetric-toggle-btn.btn-outline-success{color:#027a48!important;background:#ecfdf3!important;border:1px solid #abefc6!important}.perfmetric-theme .perfmetric-toggle-btn:hover{color:#fff!important;background:var(--pm-primary)!important;border-color:var(--pm-primary)!important}
.perfmetric-theme .unit-loader{min-height:250px;display:flex;align-items:center;justify-content:center}.perfmetric-theme .unit-loader .spinner-border{color:var(--pm-primary)}.perfmetric-theme .empty-state,.perfmetric-theme .unit-empty{padding:32px 20px;text-align:center}
.unit-modal .modal-content{overflow:hidden;border:0;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.22)}.unit-modal .modal-header{position:relative;padding:18px 20px 18px 72px;background:linear-gradient(135deg,#f7fbff,#fff);border-bottom:1px solid #e6edf5}.unit-modal .modal-header:before{content:"\f201";position:absolute;left:20px;top:50%;width:40px;height:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:#005baa;background:#eaf4ff;border-radius:12px;font-family:"Font Awesome 6 Free";font-size:15px;font-weight:900}.unit-modal .modal-title{font-size:17px;font-weight:800}.unit-modal .modal-body{padding:20px}.unit-modal .modal-footer{padding:14px 20px;background:#fbfcfe;border-top:1px solid #edf0f4}.unit-modal .form-label{margin-bottom:5px;color:#344054;font-size:10px;font-weight:800}.unit-modal .form-control,.unit-modal .form-select{min-height:42px;border:1px solid #dfe4ea;border-radius:10px;box-shadow:none!important;font-size:11px}.unit-modal textarea.form-control{min-height:auto}.unit-modal .form-check{min-height:42px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#f8fafc;border:1px solid #e6e9ee;border-radius:10px}.unit-modal .text-muted.small{margin-top:12px!important;padding:10px 12px;background:#f8fafc;border-left:3px solid #84c5ff;border-radius:8px;font-size:9px!important;line-height:1.5}
@media(max-width:1050px){.perfmetric-theme{padding:18px}.perfmetric-theme>.unit-header{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.perfmetric-theme{padding:14px}.perfmetric-theme>.unit-header{padding:20px 20px 20px 78px}.perfmetric-theme>.unit-header:before{left:18px;width:46px;height:46px}.perfmetric-theme>.unit-header h2{font-size:22px}.perfmetric-theme .unit-stats-row{grid-template-columns:1fr}.perfmetric-theme .unit-filter-row{grid-template-columns:1fr 1fr}.perfmetric-theme .unit-search{grid-column:1/-1}}
@media(max-width:520px){.perfmetric-theme>.unit-header{padding:82px 18px 18px}.perfmetric-theme>.unit-header:before{top:18px;left:18px;transform:none}.perfmetric-theme .unit-header-actions{width:100%;display:grid;grid-template-columns:1fr}.perfmetric-theme .unit-header-actions .unit-btn{width:100%}.perfmetric-theme .unit-filter-row{grid-template-columns:1fr;padding:12px 16px 16px}.perfmetric-theme .unit-search{grid-column:auto}}





/* =========================================================
   PerformanceProfileManagementPage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.perfprofile-theme {
  --pf-primary: #005baa;
  --pf-primary-soft: #eaf4ff;
  --pf-text: #172033;
  --pf-muted: #667085;
  --pf-border: #e5eaf0;
  --pf-bg: #f6f8fb;

  --pf-blue: #2563eb;
  --pf-blue-soft: #eff6ff;
  --pf-purple: #7c3aed;
  --pf-purple-soft: #f5f3ff;
  --pf-green: #16a34a;
  --pf-green-soft: #ecfdf3;
  --pf-orange: #ea580c;
  --pf-orange-soft: #fff7ed;
  --pf-red: #dc2626;
  --pf-red-soft: #fef2f2;
  --pf-cyan: #0891b2;
  --pf-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--pf-text);
  background: var(--pf-bg);
}

/* ====================== HEADER ====================== */

.perfprofile-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, .07),
    0 2px 8px rgba(17, 24, 39, .04);
}

.perfprofile-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--pf-primary);
}

.perfprofile-theme > .unit-header::before {
  content: "\f4fe";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--pf-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.perfprofile-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--pf-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.perfprofile-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: var(--pf-text);
  font-size: 27px;
  font-weight: 800;
}

.perfprofile-theme > .unit-header p {
  max-width: 870px;
  margin: 0;
  color: var(--pf-muted);
  font-size: 14px;
  line-height: 1.5;
}

.perfprofile-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.perfprofile-theme .unit-btn,
.unit-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.perfprofile-theme .unit-btn:hover:not(:disabled),
.unit-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.perfprofile-theme .unit-btn-light,
.unit-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.perfprofile-theme .unit-btn-primary,
.unit-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pf-primary), #1675c8) !important;
  border: 1px solid var(--pf-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

/* ====================== PREVIEW CARD ====================== */

.perfprofile-theme .perfprofile-preview-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 18px;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055),
    0 2px 6px rgba(15, 23, 42, .03);
}

.perfprofile-theme .perfprofile-preview-card .unit-toolbar {
  padding: 0 !important;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.perfprofile-theme .perfprofile-preview-card .unit-toolbar > div {
  position: relative;
  padding: 18px 20px 18px 74px;
}

.perfprofile-theme .perfprofile-preview-card .unit-toolbar > div::before {
  content: "\f5eb";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-primary);
  background: var(--pf-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.perfprofile-theme .perfprofile-preview-card h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfprofile-theme .perfprofile-preview-card .perfprofile-list-icon {
  display: none;
}

.perfprofile-theme .perfprofile-preview-card p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.perfprofile-theme .perfprofile-preview-card .row {
  padding: 16px 18px !important;
}

.perfprofile-theme .perfprofile-preview-card .form-control {
  min-height: 40px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

.perfprofile-theme .perfprofile-preview-card .btn-outline-primary {
  min-height: 40px;
  width: 100%;
  border-radius: 10px;
  color: var(--pf-primary);
  background: #eff8ff;
  border-color: #b2ddff;
  font-size: 10px;
  font-weight: 800;
}

.perfprofile-theme .perfprofile-preview-card .btn-outline-primary:hover {
  color: #fff;
  background: var(--pf-primary);
  border-color: var(--pf-primary);
}

.perfprofile-theme .perfprofile-preview-result {
  margin: 0 18px 16px;
  padding: 12px 14px !important;
  color: #344054;
  background: #f8fbff;
  border: 1px solid #dce9f5;
  border-radius: 11px;
  font-size: 10px !important;
}

.perfprofile-theme .perfprofile-preview-result .badge.bg-info {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

/* ====================== KPI CARDS ====================== */

.perfprofile-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.perfprofile-theme .unit-stat-card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.perfprofile-theme .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.perfprofile-stat-icon {
  order: 2;
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-size: 16px;
}

.perfprofile-stat-text {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perfprofile-stat-text span {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.perfprofile-stat-text strong {
  color: #1f2937;
  font-size: 21px;
  font-weight: 900;
}

.perfprofile-stat-icon-primary {
  color: var(--pf-blue);
  background: var(--pf-blue-soft);
}

.perfprofile-stat-icon-success {
  color: var(--pf-green);
  background: var(--pf-green-soft);
}

.perfprofile-stat-icon-accent {
  color: var(--pf-purple);
  background: var(--pf-purple-soft);
}

/* ====================== MAIN CARD ====================== */

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) > .unit-toolbar {
  padding: 0 !important;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) > .unit-toolbar > div {
  position: relative;
  padding: 18px 20px 18px 74px;
}

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) > .unit-toolbar > div::before {
  content: "\f3fd";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-primary);
  background: var(--pf-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) .perfprofile-list-icon {
  display: none;
}

.perfprofile-theme > .unit-card:not(.perfprofile-preview-card) .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== FILTER ROW ====================== */

.perfprofile-theme .unit-filter-row {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 16px;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
}

.perfprofile-theme .unit-search {
  width: 100% !important;
  max-width: none !important;
}

.perfprofile-theme .unit-search .input-group-text {
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7b8493;
  background: #fff;
  border-color: #dfe4ea;
  border-right: 0;
}

.perfprofile-theme .unit-search .form-control {
  min-height: 40px;
  border-color: #dfe4ea;
  border-left: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.perfprofile-theme .unit-clear-filters-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  color: #475467 !important;
  background: #f8fafc !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

/* ====================== TABLE ====================== */

.perfprofile-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.perfprofile-theme .unit-table {
  width: 100%;
  min-width: 1020px;
  margin: 0;
  vertical-align: middle;
}

.perfprofile-theme .unit-table thead th {
  padding: 13px 11px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.perfprofile-theme .unit-table tbody td {
  padding: 12px 11px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.perfprofile-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

/* code */
.perfprofile-theme .unit-table tbody td:first-child {
  color: #175cd3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8.5px;
  font-weight: 800;
}

/* name */
.perfprofile-theme .unit-table tbody td:nth-child(2) {
  min-width: 180px;
  color: #1f2937;
  font-size: 10.5px;
  font-weight: 800;
}

/* target */
.perfprofile-theme .perfprofile-col-target {
  min-width: 220px;
  color: #667085 !important;
}

/* ranking */
.perfprofile-theme .unit-table td:nth-child(4) .badge {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.perfprofile-theme .unit-table td:nth-child(4) .badge.bg-warning {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.perfprofile-theme .unit-table td:nth-child(4) .badge.bg-light {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* status */
.perfprofile-theme .perfprofile-status-badge {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.perfprofile-theme .perfprofile-status-badge.bg-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.perfprofile-theme .perfprofile-status-badge.bg-secondary {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

/* ====================== STICKY COMPACT ACTIONS ====================== */

.perfprofile-theme .unit-table th:last-child,
.perfprofile-theme .unit-table td:last-child {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  position: sticky;
  right: 0;
}

.perfprofile-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: var(--pf-primary);
  text-align: center !important;
}

.perfprofile-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.perfprofile-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.perfprofile-theme .unit-table td:last-child .unit-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 4px;
}

/* Original Metrics/Close and Activate/Deactivate buttons stay untouched.
   Text is hidden visually only. */
.perfprofile-theme .unit-table td:last-child .btn-sm {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 30px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.perfprofile-theme .unit-table td:last-child .btn-sm i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.perfprofile-theme .unit-table td:last-child .btn-outline-primary {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.perfprofile-theme .unit-table td:last-child .btn-outline-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.perfprofile-theme .unit-table td:last-child .btn-outline-secondary {
  color: #b54708 !important;
  background: #fffaeb !important;
  border: 1px solid #fedf89 !important;
}

.perfprofile-theme .unit-table td:last-child .btn-sm:hover {
  color: #fff !important;
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  transform: translateY(-2px);
}

/* ====================== INLINE EDITOR ====================== */

.perfprofile-theme .perfprofile-inline-editor {
  padding: 18px !important;
  background: #fbfcfe;
  border-top: 1px solid #e6ebf1 !important;
}

.perfprofile-theme .perfprofile-inline-editor > * {
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}

/* ====================== LOADER / EMPTY ====================== */

.perfprofile-theme .unit-loader {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfprofile-theme .unit-loader .spinner-border {
  color: var(--pf-primary);
}

.perfprofile-theme .empty-state,
.perfprofile-theme .unit-empty {
  padding: 32px 20px;
  text-align: center;
}

.perfprofile-theme .empty-state h5,
.perfprofile-theme .empty-state h4,
.perfprofile-theme .unit-empty h5 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfprofile-theme .empty-state p,
.perfprofile-theme .unit-empty p {
  color: #7b8493;
  font-size: 12px;
}

/* ====================== MODAL ====================== */

.unit-modal .modal-dialog {
  max-width: 850px;
}

.unit-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.unit-modal .modal-header {
  position: relative;
  padding: 18px 20px 18px 72px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.unit-modal .modal-header::before {
  content: "\f4fe";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #005baa;
  background: #eaf4ff;
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.unit-modal .modal-title {
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.unit-modal .modal-body {
  padding: 20px;
}

.unit-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.unit-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.unit-modal .form-control,
.unit-modal .form-select {
  min-height: 42px;
  color: #344054;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.unit-modal textarea.form-control {
  min-height: auto;
}

.unit-modal .form-control:focus,
.unit-modal .form-select:focus {
  border-color: #84c5ff;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .08) !important;
}

.unit-modal .form-check {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 13px;
  background: #f8fafc;
  border: 1px solid #e5e9ef;
  border-radius: 10px;
}

.unit-modal .form-check-input {
  margin: 0;
  box-shadow: none !important;
}

.unit-modal .form-check-label {
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1100px) {
  .perfprofile-theme {
    padding: 18px;
  }

  .perfprofile-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 850px) {
  .perfprofile-theme .perfprofile-preview-card .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 760px) {
  .perfprofile-theme {
    padding: 14px;
  }

  .perfprofile-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .perfprofile-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .perfprofile-theme > .unit-header h2 {
    font-size: 22px;
  }

  .perfprofile-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .perfprofile-theme .unit-filter-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .perfprofile-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .perfprofile-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .perfprofile-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .perfprofile-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .perfprofile-theme .perfprofile-preview-card .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .perfprofile-theme .unit-filter-row {
    padding: 12px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perfprofile-theme *,
  .perfprofile-theme *::before,
  .perfprofile-theme *::after {
    transition: none !important;
  }
}





/* =========================================================
   PerformanceScorecardPage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.perfscorecard-theme {
  --ps-primary: #005baa;
  --ps-primary-soft: #eaf4ff;
  --ps-text: #172033;
  --ps-muted: #667085;
  --ps-border: #e5eaf0;
  --ps-bg: #f6f8fb;

  --ps-blue: #2563eb;
  --ps-blue-soft: #eff6ff;
  --ps-purple: #7c3aed;
  --ps-purple-soft: #f5f3ff;
  --ps-green: #16a34a;
  --ps-green-soft: #ecfdf3;
  --ps-orange: #ea580c;
  --ps-orange-soft: #fff7ed;
  --ps-red: #dc2626;
  --ps-red-soft: #fef2f2;
  --ps-cyan: #0891b2;
  --ps-cyan-soft: #ecfeff;

  min-height: 100%;
  padding: 24px;
  color: var(--ps-text);
  background: var(--ps-bg);
}

/* ====================== HEADER ====================== */

.perfscorecard-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(17, 24, 39, .07),
    0 2px 8px rgba(17, 24, 39, .04);
}

.perfscorecard-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ps-primary);
}

.perfscorecard-theme > .unit-header::before {
  content: "\f201";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ps-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.perfscorecard-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--ps-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.perfscorecard-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: var(--ps-text);
  font-size: 27px;
  font-weight: 800;
}

.perfscorecard-theme > .unit-header p {
  max-width: 840px;
  margin: 0;
  color: var(--ps-muted);
  font-size: 14px;
  line-height: 1.5;
}

.perfscorecard-theme .unit-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== HEADER FILTER / BUTTON ====================== */

.perfscorecard-theme .perfscorecard-status-filter {
  width: 180px !important;
  max-width: 180px !important;
  min-height: 40px;
  color: #374151;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 10px;
}

.perfscorecard-theme .unit-btn,
.perfscorecard-modal .unit-btn {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 700;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.perfscorecard-theme .unit-btn:hover:not(:disabled),
.perfscorecard-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.perfscorecard-theme .unit-btn-primary,
.perfscorecard-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ps-primary), #1675c8) !important;
  border: 1px solid var(--ps-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

.perfscorecard-theme .unit-btn-light,
.perfscorecard-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

/* ====================== MAIN CARD ====================== */

.perfscorecard-theme > .unit-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 18px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

.perfscorecard-theme > .unit-card > .unit-toolbar {
  padding: 0 !important;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border-bottom: 1px solid #edf0f4;
}

.perfscorecard-theme > .unit-card > .unit-toolbar > div {
  position: relative;
  padding: 18px 20px 18px 74px;
}

.perfscorecard-theme > .unit-card > .unit-toolbar > div::before {
  content: "\f201";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ps-primary);
  background: var(--ps-primary-soft);
  border-radius: 12px;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.perfscorecard-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfscorecard-theme .unit-toolbar .perfscorecard-list-icon {
  display: none;
}

.perfscorecard-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== TABLE ====================== */

.perfscorecard-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.perfscorecard-theme .unit-table {
  width: 100%;
  min-width: 1050px;
  margin: 0;
  vertical-align: middle;
}

.perfscorecard-theme .unit-table thead th {
  padding: 13px 11px;
  color: #667085;
  background: #f8fafc;
  border-top: 0;
  border-bottom: 1px solid #e9edf2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.perfscorecard-theme .unit-table tbody td {
  padding: 12px 11px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9.5px;
  vertical-align: middle;
}

.perfscorecard-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.perfscorecard-theme .unit-table tbody td:first-child {
  min-width: 165px;
  color: #1f2937;
  font-weight: 800;
}

.perfscorecard-theme .unit-table tbody td:nth-child(2),
.perfscorecard-theme .unit-table tbody td:nth-child(3) {
  min-width: 150px;
  color: #475467;
}

.perfscorecard-theme .perfscorecard-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 30px;
  padding: 4px 9px;
  color: #175cd3;
  background: #eff8ff;
  border: 1px solid #b2ddff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.perfscorecard-theme .perfscorecard-muted {
  color: #98a2b3;
  font-size: 9px;
  font-weight: 700;
}

/* ====================== STATUS BADGES ====================== */

.perfscorecard-theme .perfscorecard-status {
  min-height: 25px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
}

.perfscorecard-theme .perfscorecard-status.bg-secondary {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #d0d5dd !important;
}

.perfscorecard-theme .perfscorecard-status.bg-info {
  color: #0e7490 !important;
  background: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
}

.perfscorecard-theme .perfscorecard-status.bg-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

.perfscorecard-theme .perfscorecard-status.bg-danger {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

/* ====================== STICKY COMPACT ACTIONS ====================== */

.perfscorecard-theme .unit-table th:last-child,
.perfscorecard-theme .unit-table td:last-child {
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
  position: sticky;
  right: 0;
}

.perfscorecard-theme .unit-table th:last-child {
  z-index: 5;
  color: #fff;
  background: var(--ps-primary);
  text-align: center !important;
}

.perfscorecard-theme .unit-table td:last-child {
  z-index: 4;
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: #fff;
  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.perfscorecard-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.perfscorecard-theme .perfscorecard-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 4px;
}

/* Original handlers/conditions stay intact; text is hidden visually only. */
.perfscorecard-theme .perfscorecard-action-btn {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 30px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.perfscorecard-theme .perfscorecard-action-btn i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* View */
.perfscorecard-theme .perfscorecard-action-btn.btn-outline-primary {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

/* Recalculate */
.perfscorecard-theme .perfscorecard-action-btn.btn-outline-secondary {
  color: #6941c6 !important;
  background: #f4f3ff !important;
  border: 1px solid #d9d6fe !important;
}

/* Finalize */
.perfscorecard-theme .perfscorecard-action-btn.btn-outline-success {
  color: #027a48 !important;
  background: #ecfdf3 !important;
  border: 1px solid #abefc6 !important;
}

/* Invalidate */
.perfscorecard-theme .perfscorecard-action-btn.btn-outline-danger {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.perfscorecard-theme .perfscorecard-action-btn:hover {
  color: #fff !important;
  background: var(--ps-primary) !important;
  border-color: var(--ps-primary) !important;
  transform: translateY(-2px);
}

/* ====================== LOADER / EMPTY ====================== */

.perfscorecard-theme .unit-loader {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfscorecard-theme .unit-loader .spinner-border {
  color: var(--ps-primary);
}

.perfscorecard-theme .unit-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
}

.perfscorecard-theme .unit-empty-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--ps-primary);
  background: var(--ps-primary-soft);
  border-radius: 16px;
  font-size: 20px;
}

.perfscorecard-theme .unit-empty h5 {
  margin: 0 0 5px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfscorecard-theme .unit-empty p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

/* ====================== MODALS ====================== */

.admin-teal-backdrop {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(2px);
}

.modal-dialog.admin-teal-modal,
.modal-dialog.admin-teal-modal-lg,
.modal-dialog.admin-teal-modal-xl {
  width: calc(100% - 28px);
}

.modal-dialog.admin-teal-modal {
  max-width: 610px;
}

.modal-dialog.admin-teal-modal-lg {
  max-width: 820px;
}

.modal-dialog.admin-teal-modal-xl {
  max-width: 1180px;
}

.perfscorecard-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.perfscorecard-modal .modal-header {
  padding: 17px 20px;
  background: linear-gradient(135deg, #f7fbff, #fff);
  border-bottom: 1px solid #e6edf5;
}

.perfscorecard-modal .modal-header > div {
  min-width: 0;
}

.perfscorecard-modal .modal-header-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: var(--ps-primary);
  background: var(--ps-primary-soft);
  border-radius: 11px;
  font-size: 14px;
}

.perfscorecard-modal .modal-title {
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.perfscorecard-modal .modal-body {
  padding: 20px;
}

.perfscorecard-modal .modal-footer {
  padding: 14px 20px;
  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.perfscorecard-modal .form-label {
  margin-bottom: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

.perfscorecard-modal .form-control,
.perfscorecard-modal .form-select {
  min-height: 42px;
  color: #344054;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 11px;
}

.perfscorecard-modal textarea.form-control {
  min-height: 92px;
}

.perfscorecard-modal .form-control:focus,
.perfscorecard-modal .form-select:focus {
  border-color: #84c5ff;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .08) !important;
}

.perfscorecard-modal .text-muted.small {
  margin-top: 12px !important;
  padding: 10px 12px;
  color: #667085 !important;
  background: #f8fafc;
  border-left: 3px solid #84c5ff;
  border-radius: 8px;
  font-size: 9px !important;
  line-height: 1.5;
}

/* Score breakdown child component */
.perfscorecard-modal .performance-score-breakdown,
.perfscorecard-modal .score-breakdown {
  width: 100%;
}

.perfscorecard-modal .table-responsive {
  border: 1px solid #edf0f4;
  border-radius: 12px;
}

.perfscorecard-modal table {
  margin-bottom: 0;
}

.perfscorecard-modal table thead th {
  padding: 10px;
  color: #667085;
  background: #f8fafc;
  border-bottom: 1px solid #e9edf2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.perfscorecard-modal table tbody td {
  padding: 10px;
  color: #344054;
  border-bottom: 1px solid #eef1f4;
  font-size: 9px;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .perfscorecard-theme {
    padding: 18px;
  }

  .perfscorecard-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .perfscorecard-theme {
    padding: 14px;
  }

  .perfscorecard-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .perfscorecard-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .perfscorecard-theme > .unit-header h2 {
    font-size: 22px;
  }
}

@media (max-width: 520px) {
  .perfscorecard-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .perfscorecard-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .perfscorecard-theme .unit-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .perfscorecard-theme .perfscorecard-status-filter {
    width: 100% !important;
    max-width: none !important;
  }

  .perfscorecard-theme .unit-header-actions .unit-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perfscorecard-theme *,
  .perfscorecard-theme *::before,
  .perfscorecard-theme *::after {
    transition: none !important;
  }
}






/* =========================================================
   ReportsPage.css
   Professional Reports UI — business logic unchanged.
   ========================================================= */

.reportspage-theme {
  --rp-primary: #005baa;
  --rp-primary-soft: #eaf4ff;
  --rp-text: #172033;
  --rp-muted: #667085;
  --rp-border: #e5eaf0;
  --rp-bg: #f6f8fb;

  --rp-green: #16a34a;
  --rp-orange: #ea580c;
  --rp-red: #dc2626;
  --rp-purple: #7c3aed;

  min-height: 100%;
  padding: 24px;
  color: var(--rp-text);
  background: var(--rp-bg);
}

/* ====================== HEADER ====================== */

.reportspage-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(17, 24, 39, .07),
    0 2px 8px rgba(17, 24, 39, .04);
}

.reportspage-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--rp-primary);
}

.reportspage-theme > .unit-header::before {
  content: "\f080";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--rp-primary), #1675c8);
  border-radius: 16px;

  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.reportspage-theme .unit-page-label {
  margin-bottom: 3px;

  color: var(--rp-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.reportspage-theme > .unit-header h2 {
  margin: 0 0 5px;

  color: var(--rp-text);

  font-size: 27px;
  font-weight: 800;
}

.reportspage-theme > .unit-header p {
  max-width: 850px;
  margin: 0;

  color: var(--rp-muted);

  font-size: 14px;
  line-height: 1.5;
}

.reportspage-theme .unit-header-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 9px;
}

/* ====================== BUTTONS ====================== */

.reportspage-theme .unit-btn {
  min-height: 40px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 14px;

  border-radius: 10px !important;

  font-size: 11px;
  font-weight: 800;
}

.reportspage-theme .unit-btn-primary {
  color: #fff !important;

  background: linear-gradient(
    135deg,
    var(--rp-primary),
    #1675c8
  ) !important;

  border: 1px solid var(--rp-primary) !important;

  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

.reportspage-theme .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;

  border: 1px solid #dfe4ea !important;
}

/* ====================== EXPORT DROPDOWN ====================== */

.reportspage-theme .reports-export-toggle::after {
  margin-left: 3px;
}

.reportspage-theme .dropdown-menu {
  min-width: 145px;
  padding: 6px;

  border: 1px solid #e2e8f0;
  border-radius: 11px;

  box-shadow: 0 14px 35px rgba(15, 23, 42, .14);
}

.reportspage-theme .dropdown-item {
  padding: 8px 10px;

  color: #344054;

  border-radius: 7px;

  font-size: 10px;
  font-weight: 700;
}

.reportspage-theme .dropdown-item:hover {
  color: #175cd3;
  background: #eff8ff;
}

/* ====================== CATEGORY TABS ====================== */

.reportspage-theme .reports-tabs {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 18px;
  padding: 8px;

  overflow-x: auto;

  background: #fff;

  border: 1px solid var(--rp-border);
  border-radius: 14px;

  box-shadow: 0 5px 16px rgba(15, 23, 42, .045);

  scrollbar-width: thin;
}

.reportspage-theme .reports-tabs .unit-tab {
  min-height: 34px;

  flex: 0 0 auto;

  padding: 7px 11px !important;

  color: #667085 !important;
  background: #fff !important;

  border: 1px solid transparent !important;
  border-radius: 9px !important;

  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.reportspage-theme .reports-tabs .unit-tab:hover {
  color: #175cd3 !important;
  background: #f4faff !important;
}

.reportspage-theme .reports-tabs .unit-tab-active {
  color: #fff !important;
  background: var(--rp-primary) !important;
  border-color: var(--rp-primary) !important;

  box-shadow: 0 5px 12px rgba(0, 91, 170, .18);
}

/* ====================== MAIN CARD ====================== */

.reportspage-theme > .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid var(--rp-border);
  border-radius: 18px;

  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

/* ====================== FILTER TOOLBAR ====================== */

.reportspage-theme .reports-filter-toolbar {
  position: relative;

  padding: 16px 20px !important;

  background: linear-gradient(180deg, #fff, #fbfcfe);

  border-bottom: 1px solid #edf0f4;
}

.reportspage-theme .reports-filter-toolbar .row {
  align-items: center;
}

.reportspage-theme .reports-filter-toolbar .form-control {
  min-height: 40px;

  color: #344054;

  background: #fff;

  border: 1px solid #dfe4ea;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 10px;
}

.reportspage-theme .reports-filter-toolbar .form-control:focus {
  border-color: #84c5ff;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .08) !important;
}

.reportspage-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #7b8493;
  background: #fff;

  border: 1px solid #dfe4ea;
  border-right: 0;
}

.reportspage-theme .unit-search .form-control {
  border-left: 0;
}

.reportspage-theme .reports-apply-btn {
  width: 100%;

  color: #175cd3 !important;
  background: #eff8ff !important;

  border-color: #b2ddff !important;
}

.reportspage-theme .reports-apply-btn:hover {
  color: #fff !important;
  background: var(--rp-primary) !important;

  border-color: var(--rp-primary) !important;
}

/* ====================== TABLE ====================== */

.reportspage-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.reportspage-theme .unit-table {
  width: 100%;
  min-width: 980px;
  margin: 0;

  vertical-align: middle;
}

.reportspage-theme .unit-table thead th {
  padding: 12px 11px;

  color: #667085;
  background: #f8fafc;

  border-top: 0;
  border-bottom: 1px solid #e9edf2;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;

  white-space: nowrap;
}

.reportspage-theme .unit-table tbody td {
  max-width: 300px;

  padding: 11px;

  color: #344054;

  border-bottom: 1px solid #eef1f4;

  font-size: 9px;
  line-height: 1.45;
  vertical-align: middle;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reportspage-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

/* id-ish first column */
.reportspage-theme .unit-table tbody td:first-child {
  color: #175cd3;

  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ====================== LOADER ====================== */

.reportspage-theme .unit-loader {
  min-height: 280px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.reportspage-theme .unit-loader .spinner-border {
  width: 2rem;
  height: 2rem;

  color: var(--rp-primary);
}

.reportspage-theme .unit-loader p {
  margin: 0;

  color: #7b8493;

  font-size: 11px;
  font-weight: 600;
}

/* ====================== EMPTY / ERROR ====================== */

.reportspage-theme .unit-empty {
  min-height: 280px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 28px 20px;

  text-align: center;
}

.reportspage-theme .unit-empty-icon {
  width: 60px;
  height: 60px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  color: var(--rp-primary);
  background: var(--rp-primary-soft);

  border-radius: 17px;

  font-size: 21px;
}

.reportspage-theme .unit-empty h5 {
  margin: 0 0 5px;

  color: #1f2937;

  font-size: 15px;
  font-weight: 800;
}

.reportspage-theme .unit-empty p {
  margin: 0;

  color: #7b8493;

  font-size: 11px;
}

.reportspage-theme .reports-empty-error {
  background: #fffafa;
}

.reportspage-theme .reports-empty-icon-error {
  color: #b42318;
  background: #fef3f2;
}

/* ====================== FOOTER / PAGINATION ====================== */

.reportspage-theme .unit-footer {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 12px 18px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.reportspage-theme .unit-count-text {
  color: #667085;

  font-size: 10px;
}

.reportspage-theme .unit-count-text strong {
  color: #1f2937;
  font-weight: 800;
}

.reportspage-theme .unit-pagination {
  margin: 0;
}

.reportspage-theme .unit-pagination .page-link {
  min-width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 4px;

  color: #475467;
  background: #fff;

  border: 1px solid #dfe4ea;
  border-radius: 8px !important;

  box-shadow: none !important;

  font-size: 9px;
  font-weight: 800;
}

.reportspage-theme .unit-pagination .active .page-link {
  color: #fff;
  background: var(--rp-primary);

  border-color: var(--rp-primary);
}

.reportspage-theme .unit-pagination .disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .reportspage-theme {
    padding: 18px;
  }

  .reportspage-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .reportspage-theme {
    padding: 14px;
  }

  .reportspage-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .reportspage-theme > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .reportspage-theme > .unit-header h2 {
    font-size: 22px;
  }

  .reportspage-theme .reports-filter-toolbar .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .reportspage-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .reportspage-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .reportspage-theme > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .reportspage-theme .unit-header-actions,
  .reportspage-theme .unit-header-actions .dropdown,
  .reportspage-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .reportspage-theme .reports-filter-toolbar .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reportspage-theme *,
  .reportspage-theme *::before,
  .reportspage-theme *::after {
    transition: none !important;
  }
}





/* =========================================================
   AdminRolesPage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.roles-mgmt-theme {
  --roles-primary: #005baa;
  --roles-primary-soft: #eaf4ff;
  --roles-text: #172033;
  --roles-muted: #667085;
  --roles-border: #e5eaf0;
  --roles-bg: #f6f8fb;

  --roles-blue: #2563eb;
  --roles-blue-soft: #eff6ff;
  --roles-purple: #7c3aed;
  --roles-purple-soft: #f5f3ff;
  --roles-green: #16a34a;
  --roles-green-soft: #ecfdf3;
  --roles-orange: #ea580c;
  --roles-orange-soft: #fff7ed;
  --roles-red: #dc2626;
  --roles-red-soft: #fef2f2;

  min-height: 100%;
  padding: 24px;
  color: var(--roles-text);
  background: var(--roles-bg);
}

/* ====================== HEADER ====================== */

.roles-mgmt-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 26px 24px 92px;
  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dce9f5;
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(17, 24, 39, .07),
    0 2px 8px rgba(17, 24, 39, .04);
}

.roles-mgmt-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--roles-primary);
}

.roles-mgmt-theme > .unit-header::before {
  content: "\f3ed";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--roles-primary), #1675c8);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 91, 170, .24);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.roles-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--roles-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.roles-mgmt-theme > .unit-header h2 {
  margin: 0 0 5px;
  color: var(--roles-text);
  font-size: 27px;
  font-weight: 800;
}

.roles-mgmt-theme > .unit-header p {
  max-width: 820px;
  margin: 0;
  color: var(--roles-muted);
  font-size: 14px;
  line-height: 1.5;
}

.roles-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.roles-mgmt-theme .unit-btn,
.unit-modal .unit-btn {
  min-height: 40px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 14px;

  border-radius: 10px !important;

  font-size: 11px;
  font-weight: 800;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.roles-mgmt-theme .unit-btn:hover:not(:disabled),
.unit-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.roles-mgmt-theme .unit-btn-light,
.unit-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;
  border: 1px solid #dfe4ea !important;
}

.roles-mgmt-theme .unit-btn-primary,
.unit-modal .unit-btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--roles-primary), #1675c8) !important;
  border: 1px solid var(--roles-primary) !important;
  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);
}

.unit-modal .unit-btn-danger {
  color: #fff !important;
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
}

/* ====================== KPI CARDS ====================== */

.roles-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.roles-mgmt-theme .unit-stat-card {
  position: relative;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 17px;

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--roles-border);
  border-radius: 16px;

  box-shadow: 0 6px 18px rgba(15, 23, 42, .055);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.roles-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.roles-stat-icon {
  order: 2;
  margin-left: auto;

  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  font-size: 16px;
}

.roles-stat-text {
  order: 1;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roles-stat-text span {
  color: #667085;

  font-size: 10px;
  font-weight: 700;
}

.roles-stat-text strong {
  color: #1f2937;

  font-size: 21px;
  font-weight: 900;
}

.roles-stat-icon-primary {
  color: var(--roles-blue);
  background: var(--roles-blue-soft);
}

.roles-stat-icon-accent {
  color: var(--roles-purple);
  background: var(--roles-purple-soft);
}

.roles-stat-icon-success {
  color: var(--roles-green);
  background: var(--roles-green-soft);
}

/* ====================== MAIN CARD ====================== */

.roles-mgmt-theme > .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid var(--roles-border);
  border-radius: 18px;

  box-shadow:
    0 10px 28px rgba(15, 23, 42, .065),
    0 2px 7px rgba(15, 23, 42, .035);
}

/* ====================== TOOLBAR ====================== */

.roles-mgmt-theme .unit-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;

  padding: 16px 20px !important;

  background: linear-gradient(180deg, #fff, #fbfcfe);

  border-bottom: 1px solid #edf0f4;
}

.roles-mgmt-theme .unit-toolbar > div:first-child {
  position: relative;
  min-height: 46px;
  padding-left: 54px;
}

.roles-mgmt-theme .unit-toolbar > div:first-child::before {
  content: "\f505";
  position: absolute;
  left: 0;
  top: 0;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--roles-primary);
  background: var(--roles-primary-soft);

  border-radius: 12px;

  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.roles-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.roles-mgmt-theme .roles-list-icon {
  display: none;
}

.roles-mgmt-theme .unit-toolbar p {
  margin: 0;
  color: #7b8493;
  font-size: 12px;
}

.roles-mgmt-theme .unit-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* ====================== SEARCH / PAGE SIZE ====================== */

.roles-mgmt-theme .unit-search {
  width: 300px;
}

.roles-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #7b8493;
  background: #fff;

  border: 1px solid #dfe4ea;
  border-right: 0;
}

.roles-mgmt-theme .unit-search .form-control {
  min-height: 40px;

  border-color: #dfe4ea;
  border-left: 0;

  box-shadow: none !important;

  font-size: 10px;
}

.roles-mgmt-theme .unit-search .unit-clear-btn {
  min-width: 54px;

  color: #667085 !important;
  background: #f8fafc !important;

  border: 1px solid #dfe4ea !important;
  border-left: 0 !important;

  font-size: 8px !important;
  font-weight: 800 !important;
}

.roles-mgmt-theme .unit-page-size {
  width: 112px;
  min-height: 40px;

  color: #374151;
  background: #fff;

  border: 1px solid #dfe4ea;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 9px;
}

/* ====================== TABLE ====================== */

.roles-mgmt-theme .unit-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.roles-mgmt-theme .unit-table {
  width: 100%;
  min-width: 760px;
  margin: 0;

  vertical-align: middle;
}

.roles-mgmt-theme .unit-table thead th {
  padding: 13px 11px;

  color: #667085;
  background: #f8fafc;

  border-top: 0;
  border-bottom: 1px solid #e9edf2;

  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;

  white-space: nowrap;
}

.roles-mgmt-theme .unit-table tbody td {
  padding: 12px 11px;

  color: #344054;

  border-bottom: 1px solid #eef1f4;

  font-size: 9.5px;
  vertical-align: middle;
}

.roles-mgmt-theme .unit-table tbody tr:hover td {
  background: #fbfdff;
}

.roles-mgmt-theme .unit-table tbody td:first-child {
  color: #667085;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ====================== ROLE NAME ====================== */

.roles-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roles-mgmt-theme .unit-letter {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #175cd3;
  background: #eff8ff;

  border: 1px solid #b2ddff;
  border-radius: 10px;

  font-size: 11px;
  font-weight: 900;
}

.roles-mgmt-theme .unit-name-box strong {
  display: block;

  color: #1f2937;

  font-size: 10.5px;
  font-weight: 800;
}

.roles-mgmt-theme .unit-name-box small {
  display: block;

  margin-top: 2px;

  color: #98a2b3;

  font-size: 8px;
  font-weight: 600;
}

/* ====================== STATUS ====================== */

.roles-mgmt-theme .unit-status {
  min-height: 25px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 4px 8px !important;

  color: #027a48 !important;
  background: #ecfdf3 !important;

  border: 1px solid #abefc6 !important;
  border-radius: 999px !important;

  font-size: 7.5px !important;
  font-weight: 800 !important;
}

/* ====================== STICKY ACTIONS ====================== */

.roles-mgmt-theme .unit-table th:last-child,
.roles-mgmt-theme .unit-table td:last-child {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;

  position: sticky;
  right: 0;
}

.roles-mgmt-theme .unit-table th:last-child {
  z-index: 5;

  color: #fff;
  background: var(--roles-primary);

  text-align: center !important;
}

.roles-mgmt-theme .unit-table td:last-child {
  z-index: 4;

  padding-left: 7px !important;
  padding-right: 7px !important;

  background: #fff;

  box-shadow: -7px 0 12px rgba(15, 23, 42, .05);
}

.roles-mgmt-theme .unit-table tbody tr:hover td:last-child {
  background: #fbfdff;
}

.roles-mgmt-theme .unit-actions {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  flex-wrap: nowrap !important;
}

.roles-mgmt-theme .unit-icon-btn {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 30px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 8px !important;

  font-size: 10px !important;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.roles-mgmt-theme .unit-icon-btn i {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.roles-mgmt-theme .unit-edit {
  color: #175cd3 !important;
  background: #eff8ff !important;
  border: 1px solid #b2ddff !important;
}

.roles-mgmt-theme .unit-delete {
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
}

.roles-mgmt-theme .unit-icon-btn:hover {
  color: #fff !important;
  background: var(--roles-primary) !important;
  border-color: var(--roles-primary) !important;
  transform: translateY(-2px);
}

/* ====================== LOADER / EMPTY ====================== */

.roles-mgmt-theme .unit-loader {
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.roles-mgmt-theme .unit-loader .spinner-border {
  color: var(--roles-primary);
}

.roles-mgmt-theme .unit-loader p {
  margin: 0;
  color: #7b8493;
  font-size: 11px;
}

.roles-mgmt-theme .unit-empty {
  min-height: 270px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  text-align: center;
}

.roles-mgmt-theme .unit-empty-icon {
  width: 60px;
  height: 60px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  color: var(--roles-primary);
  background: var(--roles-primary-soft);

  border-radius: 17px;

  font-size: 21px;
}

.roles-mgmt-theme .unit-empty h5 {
  margin: 0 0 5px;

  color: #1f2937;

  font-size: 15px;
  font-weight: 800;
}

.roles-mgmt-theme .unit-empty p {
  margin: 0 0 14px;

  color: #7b8493;

  font-size: 11px;
}

/* ====================== FOOTER / PAGINATION ====================== */

.roles-mgmt-theme .unit-footer {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 12px 18px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.roles-mgmt-theme .unit-count-text {
  color: #667085;
  font-size: 10px;
}

.roles-mgmt-theme .unit-count-text strong {
  color: #1f2937;
  font-weight: 800;
}

.roles-mgmt-theme .unit-pagination {
  margin: 0;
}

.roles-mgmt-theme .unit-pagination .page-link {
  min-width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 4px;

  color: #475467;
  background: #fff;

  border: 1px solid #dfe4ea;
  border-radius: 8px !important;

  box-shadow: none !important;

  font-size: 9px;
  font-weight: 800;
}

.roles-mgmt-theme .unit-pagination .active .page-link {
  color: #fff;
  background: var(--roles-primary);

  border-color: var(--roles-primary);
}

.roles-mgmt-theme .unit-pagination .disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
}

/* ====================== MODALS ====================== */

.admin-teal-backdrop {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(2px);
}

.modal-dialog.admin-teal-modal {
  width: calc(100% - 28px);
  max-width: 600px;
}

.modal-dialog.admin-teal-modal.admin-teal-modal-sm {
  max-width: 470px;
}

.unit-modal .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.unit-modal .modal-header {
  padding: 17px 20px;

  background: linear-gradient(135deg, #f7fbff, #fff);

  border-bottom: 1px solid #e6edf5;
}

.unit-modal .modal-header > div {
  min-width: 0;
}

.unit-modal .modal-header-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: 10px;

  color: #005baa;
  background: #eaf4ff;

  border-radius: 11px;

  font-size: 18px !important;
}

.unit-modal .modal-title {
  color: #1f2937;

  font-size: 16px;
  font-weight: 800;
}

.unit-modal .modal-body {
  padding: 20px;
}

.unit-modal .modal-footer {
  padding: 14px 20px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.unit-modal .form-label {
  margin-bottom: 5px;

  color: #344054;

  font-size: 10px;
  font-weight: 800;
}

.unit-modal .form-control {
  min-height: 42px;

  color: #344054;

  border: 1px solid #dfe4ea;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 11px;
}

.unit-modal .form-control:focus {
  border-color: #84c5ff;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .08) !important;
}

/* Delete modal */

.admin-teal-modal-danger .modal-header {
  background: linear-gradient(135deg, #fff7f6, #fff);
}

.admin-modal-danger-icon {
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 2px auto 13px;

  color: #b42318;
  background: #fef3f2;

  border: 1px solid #fecdca;
  border-radius: 18px;

  font-size: 31px;
}

.unit-delete-text {
  max-width: 360px;

  margin: 0 auto;

  color: #667085;

  font-size: 11px;
  line-height: 1.6;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1050px) {
  .roles-mgmt-theme {
    padding: 18px;
  }

  .roles-mgmt-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .roles-mgmt-theme .unit-toolbar {
    grid-template-columns: 1fr;
  }

  .roles-mgmt-theme .unit-toolbar-actions {
    justify-content: space-between;
  }

  .roles-mgmt-theme .unit-search {
    width: min(100%, 420px);
  }
}

@media (max-width: 760px) {
  .roles-mgmt-theme {
    padding: 14px;
  }

  .roles-mgmt-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .roles-mgmt-theme > .unit-header::before {
    left: 18px;
    width: 46px;
    height: 46px;
  }

  .roles-mgmt-theme > .unit-header h2 {
    font-size: 22px;
  }

  .roles-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .roles-mgmt-theme .unit-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .roles-mgmt-theme .unit-search,
  .roles-mgmt-theme .unit-page-size {
    width: 100%;
  }

  .roles-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .roles-mgmt-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .roles-mgmt-theme > .unit-header::before {
    top: 18px;
    left: 18px;
    transform: none;
  }

  .roles-mgmt-theme .unit-header-actions {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
  }

  .roles-mgmt-theme .unit-header-actions .unit-btn {
    width: 100%;
  }

  .roles-mgmt-theme .unit-toolbar {
    padding: 14px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roles-mgmt-theme *,
  .roles-mgmt-theme *::before,
  .roles-mgmt-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   AdminStaffPage.css — Updated UI
   CSS-only update. No JSX / API / business logic changes.
   ========================================================= */

.admin-tasks-theme {
  --staff-primary: #005baa;
  --staff-primary-dark: #064b86;
  --staff-primary-soft: #eaf4ff;
  --staff-text: #172033;
  --staff-muted: #667085;
  --staff-border: #e3e9f0;
  --staff-bg: #f6f8fb;

  --staff-blue: #2563eb;
  --staff-blue-soft: #eff6ff;
  --staff-purple: #7c3aed;
  --staff-purple-soft: #f5f3ff;
  --staff-green: #16a34a;
  --staff-green-soft: #ecfdf3;
  --staff-red: #dc2626;
  --staff-red-soft: #fef2f2;

  min-height: 100%;
  padding: 22px;
  color: var(--staff-text);
  background: var(--staff-bg);
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.admin-tasks-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-height: 128px;
  margin-bottom: 20px;
  padding: 24px 26px 24px 92px;

  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #d9e7f4;
  border-radius: 18px;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, .06),
    0 2px 7px rgba(15, 23, 42, .035);
}

.admin-tasks-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--staff-primary);
}

.admin-tasks-theme > .unit-header::before {
  content: "\f0c0";
  position: absolute;
  left: 24px;
  top: 50%;

  width: 54px;
  height: 54px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--staff-primary), #1976c8);
  border-radius: 15px;

  box-shadow: 0 9px 18px rgba(0, 91, 170, .22);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.admin-tasks-theme .unit-page-label {
  margin-bottom: 3px;

  color: var(--staff-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.admin-tasks-theme > .unit-header h2 {
  margin: 0 0 6px;

  color: #101828;

  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.admin-tasks-theme > .unit-header p {
  max-width: 760px;
  margin: 0;

  color: #667085;

  font-size: 13px;
  line-height: 1.5;
}

.admin-tasks-theme .unit-header-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.admin-tasks-theme .unit-btn,
.admin-tasks-theme .unit-header-actions button,
.admin-tasks-theme .unit-modal .unit-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 14px;

  border-radius: 10px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.admin-tasks-theme .unit-btn:hover:not(:disabled),
.admin-tasks-theme .unit-header-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.admin-tasks-theme .unit-btn-light {
  color: #344054;
  background: #fff;
  border: 1px solid #d7e0e8;
}

.admin-tasks-theme .unit-btn-light:hover {
  color: var(--staff-primary);
  background: #f7fbff;
  border-color: #b8d9f3;
}

.admin-tasks-theme .unit-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--staff-primary), #1875c5);
  border: 1px solid var(--staff-primary);

  box-shadow: 0 5px 12px rgba(0, 91, 170, .17);
}

/* =========================================================
   KPI CARDS
   ========================================================= */

.admin-tasks-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;

  margin-bottom: 22px;
}

.admin-tasks-theme .unit-stat-card {
  min-height: 86px;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 17px 16px;

  background: #fff;

  border: 1px solid var(--staff-border);
  border-radius: 15px;

  box-shadow: 0 5px 14px rgba(15, 23, 42, .045);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.admin-tasks-theme .unit-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
}

.staff-stat-icon {
  order: 2;
  margin-left: auto;

  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 16px;
}

.staff-stat-text {
  order: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.staff-stat-text span {
  color: #667085;

  font-size: 10.5px;
  font-weight: 700;
}

.staff-stat-text strong {
  color: #101828;

  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.staff-stat-icon-primary {
  color: #08799b;
  background: #e8f7fb;
}

.staff-stat-icon-accent {
  color: #6366f1;
  background: #eef0ff;
}

.staff-stat-icon-success {
  color: #0f9f72;
  background: #e8f8f1;
}

/* =========================================================
   MAIN STAFF CARD
   ========================================================= */

.admin-tasks-theme > .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #dfe6ee;
  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055),
    0 2px 6px rgba(15, 23, 42, .03);
}

/* =========================================================
   STAFF LIST TOOLBAR
   Important fix:
   title in first row, controls in second row
   ========================================================= */

.admin-tasks-theme .unit-toolbar {
  display: block !important;

  padding: 0 !important;

  background: #fff;
  border-bottom: 1px solid #e7ecf2;
}

.admin-tasks-theme .unit-toolbar > div:first-child {
  position: relative;

  min-height: 74px;

  padding: 17px 20px 15px 74px;

  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-bottom: 1px solid #edf1f5;
}

.admin-tasks-theme .unit-toolbar > div:first-child::before {
  content: "\f2c2";
  position: absolute;
  left: 20px;
  top: 16px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--staff-primary);
  background: var(--staff-primary-soft);

  border-radius: 12px;

  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.admin-tasks-theme .unit-toolbar h5 {
  margin: 0 0 3px;

  color: #101828;

  font-size: 15px;
  font-weight: 800;
}

.admin-tasks-theme .staff-list-icon {
  display: none;
}

.admin-tasks-theme .unit-toolbar p {
  max-width: 720px;
  margin: 0;

  color: #7a8494;

  font-size: 11px;
  line-height: 1.45;
}

/* Controls row */
.admin-tasks-theme .unit-toolbar-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  width: 100%;

  padding: 13px 20px 15px;
}

/* =========================================================
   SEARCH + FILTERS
   ========================================================= */

.admin-tasks-theme .unit-search {
  flex: 2 1 340px;

  width: auto;
  min-width: 300px;
  max-width: 520px;
}

.admin-tasks-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #667085;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-right: 0;

  border-radius: 10px 0 0 10px;
}

.admin-tasks-theme .unit-search .form-control {
  min-height: 40px;
  min-width: 0;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-left: 0;

  box-shadow: none;

  font-size: 11px;
}

.admin-tasks-theme .unit-search .form-control::placeholder {
  color: #98a2b3;
}

.admin-tasks-theme .unit-search .form-control:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07);
}

.admin-tasks-theme .unit-search .unit-clear-btn {
  min-width: 54px;

  color: #667085;
  background: #f8fafc;

  border: 1px solid #d7e0e8;
  border-left: 0;

  border-radius: 0 10px 10px 0;

  font-size: 8.5px;
  font-weight: 800;
}

.admin-tasks-theme .unit-toolbar-actions .unit-page-size,
.admin-tasks-theme .unit-toolbar-actions .form-select {
  flex: 1 1 140px;

  width: auto;
  min-width: 125px;
  max-width: 175px;
  min-height: 40px;

  color: #344054;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none;

  font-size: 10px;
  font-weight: 600;
}

.admin-tasks-theme .unit-toolbar-actions .form-select:focus {
  border-color: #8fc8f5;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07);
}

/* Clear filters */
.admin-tasks-theme .unit-toolbar-actions > .unit-btn-light {
  flex: 0 0 auto;

  min-width: 102px;

  color: #475467;
  background: #f8fafc;

  border-color: #d7e0e8;

  white-space: nowrap;
}

/* rows-per-page select is intentionally compact */
.admin-tasks-theme .unit-toolbar-actions .unit-page-size:last-child {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
}

/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.admin-tasks-theme .unit-table-wrapper {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-color: #bdc8d5 #eef2f6;
  scrollbar-width: thin;
}

.admin-tasks-theme .unit-table-wrapper::-webkit-scrollbar {
  height: 9px;
}

.admin-tasks-theme .unit-table-wrapper::-webkit-scrollbar-track {
  background: #eef2f6;
}

.admin-tasks-theme .unit-table-wrapper::-webkit-scrollbar-thumb {
  background: #bdc8d5;
  border-radius: 999px;
}

/* =========================================================
   TABLE
   ========================================================= */

.admin-tasks-theme .unit-table {
  width: 100%;
  min-width: 1500px;

  margin: 0;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: auto;
  vertical-align: middle;
}

.admin-tasks-theme .unit-table thead th {
  position: relative;

  padding: 12px 10px;

  color: #344054;
  background: #f7f9fc;

  border-top: 0;
  border-bottom: 1px solid #dfe5ec;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;

  line-height: 1.35;
  white-space: nowrap;
}

.admin-tasks-theme .unit-table tbody td {
  padding: 11px 10px;

  color: #344054;
  background: #fff;

  border-bottom: 1px solid #edf0f4;

  font-size: 10px;
  line-height: 1.45;
  vertical-align: middle;

  white-space: nowrap;
}

.admin-tasks-theme .unit-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.admin-tasks-theme .unit-table tbody tr:hover td {
  background: #f5faff;
}

/* Column sizing */
.admin-tasks-theme .unit-table th:nth-child(1),
.admin-tasks-theme .unit-table td:nth-child(1) {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
}

.admin-tasks-theme .unit-table th:nth-child(2),
.admin-tasks-theme .unit-table td:nth-child(2) {
  min-width: 180px;
}

.admin-tasks-theme .unit-table th:nth-child(3),
.admin-tasks-theme .unit-table td:nth-child(3) {
  min-width: 120px;
}

.admin-tasks-theme .unit-table th:nth-child(4),
.admin-tasks-theme .unit-table td:nth-child(4) {
  min-width: 205px;
  max-width: 235px;
}

.admin-tasks-theme .unit-table th:nth-child(5),
.admin-tasks-theme .unit-table td:nth-child(5) {
  min-width: 100px;
}

.admin-tasks-theme .unit-table th:nth-child(6),
.admin-tasks-theme .unit-table td:nth-child(6) {
  min-width: 112px;
}

.admin-tasks-theme .unit-table th:nth-child(7),
.admin-tasks-theme .unit-table td:nth-child(7) {
  min-width: 150px;
}

.admin-tasks-theme .unit-table th:nth-child(8),
.admin-tasks-theme .unit-table td:nth-child(8) {
  min-width: 125px;
}

.admin-tasks-theme .unit-table th:nth-child(9),
.admin-tasks-theme .unit-table td:nth-child(9) {
  min-width: 145px;
}

.admin-tasks-theme .unit-table th:nth-child(10),
.admin-tasks-theme .unit-table td:nth-child(10) {
  min-width: 95px;
}

.admin-tasks-theme .unit-table th:nth-child(11),
.admin-tasks-theme .unit-table td:nth-child(11) {
  min-width: 115px;
}

.admin-tasks-theme .unit-table th:nth-child(12),
.admin-tasks-theme .unit-table td:nth-child(12) {
  min-width: 155px;
  max-width: 190px;
}

.admin-tasks-theme .unit-table th:nth-child(13),
.admin-tasks-theme .unit-table td:nth-child(13) {
  min-width: 90px;
}

/* Ellipsis only where it helps */
.admin-tasks-theme .unit-table td:nth-child(4),
.admin-tasks-theme .unit-table td:nth-child(12) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   STICKY FIRST COLUMNS
   Fixes the "left side disappears after horizontal scroll" issue
   ========================================================= */

.admin-tasks-theme .unit-table th:nth-child(1),
.admin-tasks-theme .unit-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
}

.admin-tasks-theme .unit-table th:nth-child(2),
.admin-tasks-theme .unit-table td:nth-child(2) {
  position: sticky;
  left: 58px;
  z-index: 3;

  box-shadow: 6px 0 12px rgba(15, 23, 42, .035);
}

.admin-tasks-theme .unit-table thead th:nth-child(1),
.admin-tasks-theme .unit-table thead th:nth-child(2) {
  z-index: 7;
  background: #f7f9fc;
}

.admin-tasks-theme .unit-table tbody tr:nth-child(odd) td:nth-child(1),
.admin-tasks-theme .unit-table tbody tr:nth-child(odd) td:nth-child(2) {
  background: #fff;
}

.admin-tasks-theme .unit-table tbody tr:nth-child(even) td:nth-child(1),
.admin-tasks-theme .unit-table tbody tr:nth-child(even) td:nth-child(2) {
  background: #fbfdff;
}

.admin-tasks-theme .unit-table tbody tr:hover td:nth-child(1),
.admin-tasks-theme .unit-table tbody tr:hover td:nth-child(2) {
  background: #f5faff;
}

/* =========================================================
   SORTABLE HEADERS
   ========================================================= */

.admin-tasks-theme .unit-table th.sortable {
  cursor: pointer;
  user-select: none;

  color: #344054;

  transition:
    color .15s ease,
    background-color .15s ease;
}

.admin-tasks-theme .unit-table th.sortable:hover {
  color: var(--staff-primary);
  background: #edf7ff;
}

/* =========================================================
   STAFF NAME BLOCK
   ========================================================= */

.admin-tasks-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-tasks-theme .unit-letter {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #175cd3;
  background: #eef7ff;

  border: 1px solid #c8e5fa;
  border-radius: 9px;

  font-size: 11px;
  font-weight: 900;
}

.admin-tasks-theme .unit-name-box strong {
  display: block;

  color: #101828;

  font-size: 10.5px;
  font-weight: 800;
}

.admin-tasks-theme .unit-name-box small {
  display: block;

  margin-top: 1px;

  color: #98a2b3;

  font-size: 8px;
  font-weight: 600;
}

/* =========================================================
   ROLE + STATUS CHIPS
   ========================================================= */

.admin-tasks-theme .unit-status {
  min-height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;

  color: #175cd3;
  background: #eff8ff;

  border: 1px solid #b2ddff;
  border-radius: 999px;

  font-size: 7.5px;
  font-weight: 800;
}

.admin-tasks-theme .unit-status-dot {
  position: relative;

  padding-left: 18px;

  color: #027a48;
  background: #ecfdf3;
  border-color: #abefc6;
}

.admin-tasks-theme .unit-status-dot::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;

  width: 6px;
  height: 6px;

  transform: translateY(-50%);

  background: #12b76a;
  border-radius: 50%;
}

.admin-tasks-theme .unit-status-inactive {
  color: #475467;
  background: #f2f4f7;
  border-color: #d0d5dd;
}

.admin-tasks-theme .unit-status-inactive::before {
  background: #98a2b3;
}

/* Legacy / unmapped */
.admin-tasks-theme .unit-table .text-muted {
  color: #98a2b3 !important;
}

.admin-tasks-theme .unit-table small.text-muted {
  display: inline-block;
  margin-top: 2px;

  font-size: 7.5px;
}

/* =========================================================
   STICKY ACTIONS
   ========================================================= */

.admin-tasks-theme .unit-table th:last-child,
.admin-tasks-theme .unit-table td:last-child {
  position: sticky;
  right: 0;

  width: 82px;
  min-width: 82px;
  max-width: 82px;
}

.admin-tasks-theme .unit-table th:last-child {
  z-index: 8;

  color: #fff;
  background: var(--staff-primary);

  text-align: center !important;
}

.admin-tasks-theme .unit-table td:last-child {
  z-index: 5;

  background: #fff;

  box-shadow: -7px 0 12px rgba(15, 23, 42, .045);
}

.admin-tasks-theme .unit-table tbody tr:nth-child(even) td:last-child {
  background: #fbfdff;
}

.admin-tasks-theme .unit-table tbody tr:hover td:last-child {
  background: #f5faff;
}

.admin-tasks-theme .unit-actions {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  flex-wrap: nowrap;
}

.admin-tasks-theme .unit-icon-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border-radius: 8px;

  font-size: 10px;

  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.admin-tasks-theme .unit-icon-btn i {
  margin: 0;
  font-size: 10px;
}

.admin-tasks-theme .unit-edit {
  color: #175cd3;
  background: #eff8ff;
  border: 1px solid #b2ddff;
}

.admin-tasks-theme .unit-delete {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
}

.admin-tasks-theme .unit-icon-btn:hover {
  color: #fff;
  background: var(--staff-primary);
  border-color: var(--staff-primary);

  transform: translateY(-1px);
}

/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.admin-tasks-theme .unit-loader {
  min-height: 280px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.admin-tasks-theme .unit-loader .spinner-border {
  color: var(--staff-primary);
}

.admin-tasks-theme .unit-loader p {
  margin: 0;

  color: #7b8493;

  font-size: 11px;
}

.admin-tasks-theme .unit-empty {
  min-height: 280px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  text-align: center;
}

.admin-tasks-theme .unit-empty-icon {
  width: 60px;
  height: 60px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  color: var(--staff-primary);
  background: var(--staff-primary-soft);

  border-radius: 16px;

  font-size: 20px;
}

.admin-tasks-theme .unit-empty h5 {
  margin: 0 0 5px;

  color: #101828;

  font-size: 15px;
  font-weight: 800;
}

.admin-tasks-theme .unit-empty p {
  margin: 0 0 14px;

  color: #7b8493;

  font-size: 11px;
}

/* =========================================================
   FOOTER + PAGINATION
   ========================================================= */

.admin-tasks-theme .unit-footer {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 12px 18px;

  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.admin-tasks-theme .unit-count-text {
  color: #667085;

  font-size: 10px;
}

.admin-tasks-theme .unit-count-text strong {
  color: #101828;
  font-weight: 800;
}

.admin-tasks-theme .unit-pagination {
  display: flex;
  gap: 4px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.admin-tasks-theme .unit-pagination .page-link {
  min-width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 9px;

  color: #475467;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 8px;

  box-shadow: none;

  font-size: 9px;
  font-weight: 800;
}

.admin-tasks-theme .unit-pagination .active .page-link {
  color: #fff;
  background: var(--staff-primary);
  border-color: var(--staff-primary);
}

.admin-tasks-theme .unit-pagination .disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
}

/* =========================================================
   ADD / EDIT STAFF MODAL
   ========================================================= */

.admin-tasks-theme .unit-modal {
  overflow-y: auto;
}

.admin-tasks-theme .unit-modal .modal-dialog,
.admin-tasks-theme .admin-teal-modal {
  width: calc(100% - 28px);
  max-width: 960px;

  margin-left: auto;
  margin-right: auto;
}

.admin-tasks-theme .unit-modal .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.admin-tasks-theme .unit-modal .modal-header {
  padding: 17px 20px;

  background: linear-gradient(135deg, #f7fbff, #fff);

  border-bottom: 1px solid #e6edf5;
}

.admin-tasks-theme .unit-modal .modal-title {
  color: #101828;

  font-size: 16px;
  font-weight: 800;
}

.admin-tasks-theme .unit-modal .modal-header-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: 10px;

  color: var(--staff-primary);
  background: var(--staff-primary-soft);

  border-radius: 11px;

  font-size: 18px !important;
}

.admin-tasks-theme .unit-modal .modal-body {
  padding: 20px;
}

.admin-tasks-theme .unit-modal .modal-footer {
  padding: 14px 20px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.admin-tasks-theme .unit-modal .form-label {
  margin-bottom: 5px;

  color: #344054;

  font-size: 10px;
  font-weight: 800;
}

.admin-tasks-theme .unit-modal .form-label small {
  font-size: 7.5px;
  font-weight: 600;
}

.admin-tasks-theme .unit-modal .form-control,
.admin-tasks-theme .unit-modal .form-select {
  min-height: 42px;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none;

  font-size: 11px;
}

.admin-tasks-theme .unit-modal .form-control:focus,
.admin-tasks-theme .unit-modal .form-select:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07);
}

/* =========================================================
   CONFIRM MODAL SUPPORT
   ========================================================= */

.admin-teal-backdrop {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(2px);
}

.modal-dialog.admin-teal-modal {
  width: calc(100% - 28px);
}

.modal-dialog.admin-teal-modal.admin-teal-modal-sm {
  max-width: 470px;
}

.modal-dialog.admin-teal-modal.admin-teal-modal-lg {
  max-width: 960px;
}

.admin-teal-modal-danger .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.admin-teal-modal-danger .modal-header {
  background: linear-gradient(135deg, #fff7f6, #fff);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1300px) {
  .admin-tasks-theme .unit-search {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 1050px) {
  .admin-tasks-theme {
    padding: 18px;
  }

  .admin-tasks-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-tasks-theme .unit-toolbar-actions .unit-page-size,
  .admin-tasks-theme .unit-toolbar-actions .form-select {
    flex: 1 1 155px;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .admin-tasks-theme {
    padding: 14px;
  }

  .admin-tasks-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .admin-tasks-theme > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .admin-tasks-theme > .unit-header h2 {
    font-size: 22px;
  }

  .admin-tasks-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .admin-tasks-theme .unit-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-tasks-theme .unit-search,
  .admin-tasks-theme .unit-toolbar-actions .unit-page-size,
  .admin-tasks-theme .unit-toolbar-actions .form-select,
  .admin-tasks-theme .unit-toolbar-actions > .unit-btn-light {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .admin-tasks-theme .unit-toolbar-actions .unit-page-size:last-child {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .admin-tasks-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .admin-tasks-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .admin-tasks-theme > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .admin-tasks-theme .unit-header-actions {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-tasks-theme .unit-header-actions .unit-btn,
  .admin-tasks-theme .unit-header-actions button {
    width: 100%;
  }

  .admin-tasks-theme .unit-toolbar > div:first-child {
    padding: 70px 16px 14px;
  }

  .admin-tasks-theme .unit-toolbar > div:first-child::before {
    left: 16px;
    top: 15px;
  }

  .admin-tasks-theme .unit-toolbar-actions {
    padding: 12px 16px 15px;
  }

  .admin-tasks-theme .unit-modal .modal-dialog,
  .admin-tasks-theme .admin-teal-modal {
    width: calc(100% - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-tasks-theme *,
  .admin-tasks-theme *::before,
  .admin-tasks-theme *::after {
    transition: none !important;
  }
}




/* =========================================================
   AdminSidebarPage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.sidebar-mgmt-theme {
  --sb-primary: #005baa;
  --sb-primary-dark: #064b86;
  --sb-primary-soft: #eaf4ff;
  --sb-text: #172033;
  --sb-muted: #667085;
  --sb-border: #e3e9f0;
  --sb-bg: #f6f8fb;

  --sb-blue: #2563eb;
  --sb-blue-soft: #eff6ff;
  --sb-purple: #7c3aed;
  --sb-purple-soft: #f5f3ff;
  --sb-green: #16a34a;
  --sb-green-soft: #ecfdf3;
  --sb-orange: #ea580c;
  --sb-orange-soft: #fff7ed;
  --sb-red: #dc2626;
  --sb-red-soft: #fef2f2;

  min-height: 100%;
  padding: 22px;
  color: var(--sb-text);
  background: var(--sb-bg);
}

/* ====================== HEADER ====================== */

.sidebar-mgmt-theme > .unit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-height: 128px;
  margin-bottom: 20px;
  padding: 24px 26px 24px 92px;

  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #d9e7f4;
  border-radius: 18px;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, .06),
    0 2px 7px rgba(15, 23, 42, .035);
}

.sidebar-mgmt-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--sb-primary);
}

.sidebar-mgmt-theme > .unit-header::before {
  content: "\f03a";
  position: absolute;
  left: 24px;
  top: 50%;

  width: 54px;
  height: 54px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--sb-primary), #1976c8);
  border-radius: 15px;

  box-shadow: 0 9px 18px rgba(0, 91, 170, .22);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.sidebar-mgmt-theme .unit-page-label {
  margin-bottom: 3px;
  color: var(--sb-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.sidebar-mgmt-theme > .unit-header h2 {
  margin: 0 0 6px;
  color: #101828;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.sidebar-mgmt-theme > .unit-header p {
  max-width: 780px;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.sidebar-mgmt-theme .unit-header-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ====================== BUTTONS ====================== */

.sidebar-mgmt-theme .unit-btn,
.sidebar-mgmt-theme .unit-header-actions button,
.sidebar-mgmt-theme .unit-modal .unit-btn {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 14px;

  border-radius: 10px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.sidebar-mgmt-theme .unit-btn:hover:not(:disabled),
.sidebar-mgmt-theme .unit-header-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.sidebar-mgmt-theme .unit-btn-light {
  color: #344054;
  background: #fff;
  border: 1px solid #d7e0e8;
}

.sidebar-mgmt-theme .unit-btn-light:hover {
  color: var(--sb-primary);
  background: #f7fbff;
  border-color: #b8d9f3;
}

.sidebar-mgmt-theme .unit-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--sb-primary), #1875c5);
  border: 1px solid var(--sb-primary);
  box-shadow: 0 5px 12px rgba(0, 91, 170, .17);
}

/* ====================== KPI CARDS ====================== */

.sidebar-mgmt-theme .unit-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.sidebar-mgmt-theme .unit-stat-card {
  min-height: 86px;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 17px 16px;

  background: #fff;

  border: 1px solid var(--sb-border);
  border-radius: 15px;

  box-shadow: 0 5px 14px rgba(15, 23, 42, .045);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.sidebar-mgmt-theme .unit-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
}

.sidebar-stat-icon {
  order: 2;
  margin-left: auto;

  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  font-size: 16px;
}

.sidebar-stat-text {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-stat-text span {
  color: #667085;
  font-size: 10.5px;
  font-weight: 700;
}

.sidebar-stat-text strong {
  color: #101828;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.sidebar-stat-icon-primary {
  color: #08799b;
  background: #e8f7fb;
}

.sidebar-stat-icon-accent {
  color: #6366f1;
  background: #eef0ff;
}

.sidebar-stat-icon-success {
  color: #0f9f72;
  background: #e8f8f1;
}

/* ====================== CARD ====================== */

.sidebar-mgmt-theme > .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #dfe6ee;
  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055),
    0 2px 6px rgba(15, 23, 42, .03);
}

/* ====================== TOOLBAR ====================== */

.sidebar-mgmt-theme .unit-toolbar {
  display: block !important;
  padding: 0 !important;
  background: #fff;
  border-bottom: 1px solid #e7ecf2;
}

.sidebar-mgmt-theme .unit-toolbar > div:first-child {
  position: relative;
  min-height: 74px;
  padding: 17px 20px 15px 74px;

  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-bottom: 1px solid #edf1f5;
}

.sidebar-mgmt-theme .unit-toolbar > div:first-child::before {
  content: "\f03a";
  position: absolute;
  left: 20px;
  top: 16px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--sb-primary);
  background: var(--sb-primary-soft);

  border-radius: 12px;

  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

.sidebar-mgmt-theme .unit-card.mt-4 .unit-toolbar > div:first-child::before {
  content: "\f06e";
}

.sidebar-mgmt-theme .unit-toolbar h5 {
  margin: 0 0 3px;
  color: #101828;
  font-size: 15px;
  font-weight: 800;
}

.sidebar-mgmt-theme .sidebar-list-icon {
  display: none;
}

.sidebar-mgmt-theme .unit-toolbar p {
  max-width: 760px;
  margin: 0;
  color: #7a8494;
  font-size: 11px;
  line-height: 1.45;
}

.sidebar-mgmt-theme .unit-toolbar-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  width: 100%;

  padding: 13px 20px 15px;
}

/* ====================== SEARCH + FILTERS ====================== */

.sidebar-mgmt-theme .unit-search {
  flex: 2 1 360px;
  width: auto;
  min-width: 280px;
  max-width: 520px;
}

.sidebar-mgmt-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #667085;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-right: 0;

  border-radius: 10px 0 0 10px;
}

.sidebar-mgmt-theme .unit-search .form-control {
  min-height: 40px;
  min-width: 0;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-left: 0;

  box-shadow: none;

  font-size: 11px;
}

.sidebar-mgmt-theme .unit-search .form-control:focus {
  border-color: #8fc8f5;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07);
}

.sidebar-mgmt-theme .unit-search .unit-clear-btn {
  min-width: 54px;

  color: #667085;
  background: #f8fafc;

  border: 1px solid #d7e0e8;
  border-left: 0;

  border-radius: 0 10px 10px 0;

  font-size: 8.5px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-toolbar-actions .unit-page-size,
.sidebar-mgmt-theme .unit-toolbar-actions .form-select {
  flex: 1 1 145px;

  width: auto;
  min-width: 130px;
  max-width: 190px;
  min-height: 40px;

  color: #344054;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none;

  font-size: 10px;
  font-weight: 600;
}

.sidebar-mgmt-theme .unit-toolbar-actions .form-select:focus {
  border-color: #8fc8f5;
  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07);
}

.sidebar-mgmt-theme .unit-toolbar-actions > .unit-btn-light {
  flex: 0 0 auto;
  min-width: 86px;
  white-space: nowrap;
}

/* ====================== TABLE WRAPPER ====================== */

.sidebar-mgmt-theme .unit-table-wrapper {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-color: #bdc8d5 #eef2f6;
  scrollbar-width: thin;
}

.sidebar-mgmt-theme .unit-table-wrapper::-webkit-scrollbar {
  height: 9px;
}

.sidebar-mgmt-theme .unit-table-wrapper::-webkit-scrollbar-track {
  background: #eef2f6;
}

.sidebar-mgmt-theme .unit-table-wrapper::-webkit-scrollbar-thumb {
  background: #bdc8d5;
  border-radius: 999px;
}

/* ====================== TABLE ====================== */

.sidebar-mgmt-theme .unit-table {
  width: 100%;
  min-width: 1180px;

  margin: 0;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: auto;
  vertical-align: middle;
}

.sidebar-mgmt-theme .unit-table thead th {
  position: relative;

  padding: 12px 10px;

  color: #344054;
  background: #f7f9fc;

  border-top: 0;
  border-bottom: 1px solid #dfe5ec;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;

  line-height: 1.35;
  white-space: nowrap;
}

.sidebar-mgmt-theme .unit-table tbody td {
  padding: 11px 10px;

  color: #344054;
  background: #fff;

  border-bottom: 1px solid #edf0f4;

  font-size: 10px;
  line-height: 1.45;
  vertical-align: middle;

  white-space: nowrap;
}

.sidebar-mgmt-theme .unit-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.sidebar-mgmt-theme .unit-table tbody tr:hover td {
  background: #f5faff;
}

/* Main list column widths */
.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(1),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(1) {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(2),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(2) {
  min-width: 180px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(3),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(3) {
  min-width: 150px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(4),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(4) {
  min-width: 220px;
  max-width: 300px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(5),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(5) {
  min-width: 190px;
  max-width: 260px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(6),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(6) {
  min-width: 120px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(7),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(7) {
  min-width: 125px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(8),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(8) {
  min-width: 90px;
}

/* truncate only long tech text */
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(4),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====================== DRAG ORDER ====================== */

.sidebar-mgmt-theme .unit-id {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: #475467;

  font-size: 9px;
  font-weight: 800;
}

.sidebar-mgmt-theme .sidebar-drag-grip {
  color: #98a2b3;
  cursor: grab;
  font-size: 11px;
}

.sidebar-mgmt-theme .sidebar-drag-table tbody tr:active .sidebar-drag-grip {
  cursor: grabbing;
  color: var(--sb-primary);
}

/* ====================== MENU NAME ====================== */

.sidebar-mgmt-theme .unit-name-box {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sidebar-mgmt-theme .unit-letter {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #175cd3;
  background: #eef7ff;

  border: 1px solid #c8e5fa;
  border-radius: 9px;

  font-size: 11px;
  font-weight: 900;
}

.sidebar-mgmt-theme .unit-name-box strong {
  display: block;
  color: #101828;
  font-size: 10.5px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-name-box small {
  display: block;
  margin-top: 1px;
  color: #98a2b3;
  font-size: 8px;
  font-weight: 600;
}

/* ====================== ROLE / STATUS ====================== */

.sidebar-mgmt-theme .unit-status {
  min-height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;

  color: #175cd3;
  background: #eff8ff;

  border: 1px solid #b2ddff;
  border-radius: 999px;

  font-size: 7.5px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-status-active {
  color: #027a48;
  background: #ecfdf3;
  border-color: #abefc6;
}

.sidebar-mgmt-theme .unit-status-inactive {
  color: #475467;
  background: #f2f4f7;
  border-color: #d0d5dd;
}

.sidebar-mgmt-theme .text-muted {
  color: #98a2b3 !important;
}

/* ====================== STICKY MENU + ACTIONS ====================== */

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(1),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
}

.sidebar-mgmt-theme .sidebar-drag-table th:nth-child(2),
.sidebar-mgmt-theme .sidebar-drag-table td:nth-child(2) {
  position: sticky;
  left: 88px;
  z-index: 3;
  box-shadow: 6px 0 12px rgba(15, 23, 42, .035);
}

.sidebar-mgmt-theme .sidebar-drag-table thead th:nth-child(1),
.sidebar-mgmt-theme .sidebar-drag-table thead th:nth-child(2) {
  z-index: 7;
  background: #f7f9fc;
}

.sidebar-mgmt-theme .sidebar-drag-table tbody tr:nth-child(odd) td:nth-child(1),
.sidebar-mgmt-theme .sidebar-drag-table tbody tr:nth-child(odd) td:nth-child(2) {
  background: #fff;
}

.sidebar-mgmt-theme .sidebar-drag-table tbody tr:nth-child(even) td:nth-child(1),
.sidebar-mgmt-theme .sidebar-drag-table tbody tr:nth-child(even) td:nth-child(2) {
  background: #fbfdff;
}

.sidebar-mgmt-theme .sidebar-drag-table tbody tr:hover td:nth-child(1),
.sidebar-mgmt-theme .sidebar-drag-table tbody tr:hover td:nth-child(2) {
  background: #f5faff;
}

.sidebar-mgmt-theme .sidebar-drag-table th:last-child,
.sidebar-mgmt-theme .sidebar-drag-table td:last-child {
  position: sticky;
  right: 0;

  width: 84px;
  min-width: 84px;
  max-width: 84px;
}

.sidebar-mgmt-theme .sidebar-drag-table th:last-child {
  z-index: 8;

  color: #fff;
  background: var(--sb-primary);

  text-align: center !important;
}

.sidebar-mgmt-theme .sidebar-drag-table td:last-child {
  z-index: 5;

  background: #fff;

  box-shadow: -7px 0 12px rgba(15, 23, 42, .045);
}

.sidebar-mgmt-theme .sidebar-drag-table tbody tr:nth-child(even) td:last-child {
  background: #fbfdff;
}

.sidebar-mgmt-theme .sidebar-drag-table tbody tr:hover td:last-child {
  background: #f5faff;
}

/* ====================== ACTION BUTTONS ====================== */

.sidebar-mgmt-theme .unit-actions {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  flex-wrap: nowrap;
}

.sidebar-mgmt-theme .unit-icon-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  flex: 0 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border-radius: 8px;

  font-size: 10px;

  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.sidebar-mgmt-theme .unit-icon-btn i {
  margin: 0;
  font-size: 10px;
}

.sidebar-mgmt-theme .unit-edit {
  color: #175cd3;
  background: #eff8ff;
  border: 1px solid #b2ddff;
}

.sidebar-mgmt-theme .unit-delete {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
}

.sidebar-mgmt-theme .unit-icon-btn:hover {
  color: #fff;
  background: var(--sb-primary);
  border-color: var(--sb-primary);

  transform: translateY(-1px);
}

/* ====================== LOADER / EMPTY ====================== */

.sidebar-mgmt-theme .unit-loader {
  min-height: 280px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.sidebar-mgmt-theme .unit-loader .spinner-border {
  color: var(--sb-primary);
}

.sidebar-mgmt-theme .unit-loader p {
  margin: 0;
  color: #7b8493;
  font-size: 11px;
}

.sidebar-mgmt-theme .unit-empty {
  min-height: 250px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  text-align: center;
}

.sidebar-mgmt-theme .unit-empty-icon {
  width: 60px;
  height: 60px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  color: var(--sb-primary);
  background: var(--sb-primary-soft);

  border-radius: 16px;

  font-size: 20px;
}

.sidebar-mgmt-theme .unit-empty h5 {
  margin: 0 0 5px;

  color: #101828;

  font-size: 15px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-empty p {
  margin: 0 0 14px;

  color: #7b8493;

  font-size: 11px;
}

/* ====================== FOOTER + PAGINATION ====================== */

.sidebar-mgmt-theme .unit-footer {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 12px 18px;

  background: #fbfcfe;
  border-top: 1px solid #edf0f4;
}

.sidebar-mgmt-theme .unit-count-text {
  color: #667085;
  font-size: 10px;
}

.sidebar-mgmt-theme .unit-count-text strong {
  color: #101828;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-pagination {
  display: flex;
  gap: 4px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.sidebar-mgmt-theme .unit-pagination .page-link {
  min-width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 9px;

  color: #475467;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 8px;

  box-shadow: none;

  font-size: 9px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-pagination .active .page-link {
  color: #fff;
  background: var(--sb-primary);
  border-color: var(--sb-primary);
}

.sidebar-mgmt-theme .unit-pagination .disabled .page-link {
  color: #b0b7c3;
  background: #f8fafc;
}

/* ====================== PREVIEW TABLE ====================== */

.sidebar-mgmt-theme .sidebar-preview-table {
  min-width: 760px;
}

.sidebar-mgmt-theme .sidebar-preview-table th:first-child,
.sidebar-mgmt-theme .sidebar-preview-table td:first-child {
  min-width: 220px;
}

.sidebar-mgmt-theme .sidebar-preview-table th:nth-child(2),
.sidebar-mgmt-theme .sidebar-preview-table td:nth-child(2) {
  min-width: 280px;
}

.sidebar-mgmt-theme .sidebar-preview-table th:nth-child(3),
.sidebar-mgmt-theme .sidebar-preview-table td:nth-child(3),
.sidebar-mgmt-theme .sidebar-preview-table th:nth-child(4),
.sidebar-mgmt-theme .sidebar-preview-table td:nth-child(4) {
  min-width: 140px;
}

/* ====================== ADD / EDIT MODAL ====================== */

.sidebar-mgmt-theme .unit-modal {
  overflow-y: auto;
}

.sidebar-mgmt-theme .unit-modal .modal-dialog {
  width: calc(100% - 28px);
  max-width: 900px;

  margin-left: auto;
  margin-right: auto;
}

.sidebar-mgmt-theme .unit-modal .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.sidebar-mgmt-theme .unit-modal .modal-header {
  position: relative;

  padding: 18px 20px 18px 70px;

  background: linear-gradient(135deg, #f7fbff, #fff);

  border-bottom: 1px solid #e6edf5;
}

.sidebar-mgmt-theme .unit-modal .modal-header::before {
  content: "\f03a";
  position: absolute;
  left: 20px;
  top: 50%;

  width: 38px;
  height: 38px;

  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--sb-primary);
  background: var(--sb-primary-soft);

  border-radius: 11px;

  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}

.sidebar-mgmt-theme .unit-modal .modal-title {
  color: #101828;

  font-size: 16px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-modal .modal-body {
  padding: 20px;
}

.sidebar-mgmt-theme .unit-modal .modal-footer {
  padding: 14px 20px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.sidebar-mgmt-theme .unit-modal .form-label {
  margin-bottom: 5px;

  color: #344054;

  font-size: 10px;
  font-weight: 800;
}

.sidebar-mgmt-theme .unit-modal .form-control,
.sidebar-mgmt-theme .unit-modal .form-select {
  min-height: 42px;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none;

  font-size: 11px;
}

.sidebar-mgmt-theme .unit-modal .form-control:focus,
.sidebar-mgmt-theme .unit-modal .form-select:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07);
}

.sidebar-mgmt-theme .unit-modal small.text-muted {
  color: #7a8494 !important;
  font-size: 8.5px;
  line-height: 1.5;
}

.sidebar-mgmt-theme .unit-modal hr {
  border-color: #e8edf2;
}

/* Active switch */
.sidebar-mgmt-theme .unit-modal .form-switch {
  min-height: 42px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px 8px 42px;

  background: #f8fafc;

  border: 1px solid #e3e8ee;
  border-radius: 10px;
}

.sidebar-mgmt-theme .unit-modal .form-check-input {
  box-shadow: none !important;
}

.sidebar-mgmt-theme .unit-modal .form-check-label {
  color: #475467;

  font-size: 9px;
  font-weight: 700;
}

/* ====================== REACT-SELECT PERMISSION PICKERS ====================== */

.sidebar-mgmt-theme .sidebar-permission-select__control {
  min-height: 42px !important;

  border: 1px solid #d7e0e8 !important;
  border-radius: 10px !important;

  box-shadow: none !important;

  font-size: 10px;
}

.sidebar-mgmt-theme .sidebar-permission-select__control:hover,
.sidebar-mgmt-theme .sidebar-permission-select__control--is-focused {
  border-color: #8fc8f5 !important;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07) !important;
}

.sidebar-mgmt-theme .sidebar-permission-select__value-container {
  padding: 2px 10px !important;
}

.sidebar-mgmt-theme .sidebar-permission-select__single-value {
  color: #344054 !important;
}

.sidebar-mgmt-theme .sidebar-permission-select__placeholder {
  color: #98a2b3 !important;
}

.sidebar-mgmt-theme .sidebar-permission-select__menu {
  z-index: 30 !important;

  overflow: hidden;

  border: 1px solid #e1e7ed;
  border-radius: 10px !important;

  box-shadow: 0 14px 30px rgba(15, 23, 42, .12) !important;

  font-size: 10px;
}

.sidebar-mgmt-theme .sidebar-permission-select__option {
  padding: 9px 10px !important;
}

.sidebar-mgmt-theme .sidebar-permission-select__option--is-focused {
  color: #175cd3 !important;
  background: #eff8ff !important;
}

.sidebar-mgmt-theme .sidebar-permission-select__option--is-selected {
  color: #fff !important;
  background: var(--sb-primary) !important;
}

/* ====================== DELETE CONFIRM MODAL ====================== */

.admin-teal-backdrop {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(2px);
}

.modal-dialog.admin-teal-modal {
  width: calc(100% - 28px);
}

.modal-dialog.admin-teal-modal.admin-teal-modal-sm {
  max-width: 470px;
}

.admin-teal-modal-danger .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 1200px) {
  .sidebar-mgmt-theme .unit-search {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 1050px) {
  .sidebar-mgmt-theme {
    padding: 18px;
  }

  .sidebar-mgmt-theme > .unit-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sidebar-mgmt-theme .unit-toolbar-actions .unit-page-size,
  .sidebar-mgmt-theme .unit-toolbar-actions .form-select {
    flex: 1 1 160px;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .sidebar-mgmt-theme {
    padding: 14px;
  }

  .sidebar-mgmt-theme > .unit-header {
    padding: 20px 20px 20px 78px;
  }

  .sidebar-mgmt-theme > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .sidebar-mgmt-theme > .unit-header h2 {
    font-size: 22px;
  }

  .sidebar-mgmt-theme .unit-stats-row {
    grid-template-columns: 1fr;
  }

  .sidebar-mgmt-theme .unit-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sidebar-mgmt-theme .unit-search,
  .sidebar-mgmt-theme .unit-toolbar-actions .unit-page-size,
  .sidebar-mgmt-theme .unit-toolbar-actions .form-select,
  .sidebar-mgmt-theme .unit-toolbar-actions > .unit-btn-light {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .sidebar-mgmt-theme .unit-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .sidebar-mgmt-theme > .unit-header {
    padding: 82px 18px 18px;
  }

  .sidebar-mgmt-theme > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .sidebar-mgmt-theme .unit-header-actions {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
  }

  .sidebar-mgmt-theme .unit-header-actions .unit-btn,
  .sidebar-mgmt-theme .unit-header-actions button {
    width: 100%;
  }

  .sidebar-mgmt-theme .unit-toolbar > div:first-child {
    padding: 70px 16px 14px;
  }

  .sidebar-mgmt-theme .unit-toolbar > div:first-child::before {
    left: 16px;
    top: 15px;
  }

  .sidebar-mgmt-theme .unit-toolbar-actions {
    padding: 12px 16px 15px;
  }

  .sidebar-mgmt-theme .unit-modal .modal-dialog {
    width: calc(100% - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-mgmt-theme *,
  .sidebar-mgmt-theme *::before,
  .sidebar-mgmt-theme *::after {
    transition: none !important;
  }
}


/* =========================================================
   AccessManagementRolesPage.css
   UI-only redesign. JSX/business logic remains unchanged.
   ========================================================= */

.access-roles-theme {
  --admin-primary: #005baa;
  --admin-primary-soft: #eaf4ff;
  --admin-warning: #d97706;
  --admin-warning-soft: #fff7ed;

  --am-primary: #005baa;
  --am-primary-dark: #064b86;
  --am-primary-soft: #eaf4ff;
  --am-text: #172033;
  --am-muted: #667085;
  --am-border: #e3e9f0;
  --am-bg: #f6f8fb;

  --am-green: #16a34a;
  --am-green-soft: #ecfdf3;
  --am-orange: #ea580c;
  --am-orange-soft: #fff7ed;
  --am-red: #dc2626;
  --am-red-soft: #fef2f2;
  --am-purple: #7c3aed;
  --am-purple-soft: #f5f3ff;

  min-height: 100%;
  color: var(--am-text);
  background: var(--am-bg);
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.access-roles-theme > .unit-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;

  min-height: 126px;
  margin: 22px 24px 0 !important;
  padding: 24px 28px 24px 94px !important;

  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #d9e7f4;
  border-radius: 18px;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, .06),
    0 2px 7px rgba(15, 23, 42, .035);
}

.access-roles-theme > .unit-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;

  width: 6px;

  background: var(--am-primary);
}

.access-roles-theme > .unit-header::before {
  content: "\f3ed";
  position: absolute;
  left: 25px;
  top: 50%;

  width: 54px;
  height: 54px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--am-primary), #1976c8);
  border-radius: 15px;

  box-shadow: 0 9px 18px rgba(0, 91, 170, .22);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.access-roles-theme .unit-page-label {
  margin-bottom: 3px;

  color: var(--am-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.access-roles-theme > .unit-header h2 {
  margin: 0 0 6px;

  color: #101828;

  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.access-roles-theme > .unit-header p {
  margin: 0;

  color: #667085;

  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   PAGE BODY + CARD
   ========================================================= */

.access-roles-theme .access-roles-body {
  padding: 18px 24px 24px !important;
}

.access-roles-theme .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #dfe6ee;
  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055),
    0 2px 6px rgba(15, 23, 42, .03);
}

/* =========================================================
   TOP TOOLBAR
   ========================================================= */

.access-roles-theme .unit-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 16px !important;

  padding: 16px 18px !important;

  background: linear-gradient(180deg, #fff, #fbfdff);

  border-bottom: 1px solid #e7ecf2;
}

.access-roles-theme .am-filters-group {
  display: grid !important;
  grid-template-columns:
    minmax(210px, 260px)
    minmax(250px, 1fr)
    minmax(170px, 210px);

  gap: 9px !important;
  align-items: center !important;

  min-width: 0;
}

.access-roles-theme .am-role-select,
.access-roles-theme .am-status-select,
.access-roles-theme .unit-search {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* =========================================================
   FILTER CONTROLS
   ========================================================= */

.access-roles-theme .am-role-select,
.access-roles-theme .am-status-select {
  min-height: 40px;

  color: #344054;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 10px;
  font-weight: 600;
}

.access-roles-theme .am-role-select:focus,
.access-roles-theme .am-status-select:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07) !important;
}

.access-roles-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #667085;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-right: 0;

  border-radius: 10px 0 0 10px;
}

.access-roles-theme .unit-search .form-control {
  min-height: 40px;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-left: 0;

  box-shadow: none !important;

  font-size: 10.5px;
}

.access-roles-theme .unit-search .form-control::placeholder {
  color: #98a2b3;
}

.access-roles-theme .unit-search .form-control:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07) !important;
}

/* =========================================================
   TOOLBAR BUTTONS
   ========================================================= */

.access-roles-theme .unit-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.access-roles-theme .unit-btn,
.admin-teal-modal .unit-btn {
  min-height: 40px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 12px;

  border-radius: 10px !important;

  font-size: 10px;
  font-weight: 800;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.access-roles-theme .unit-btn:hover:not(:disabled),
.admin-teal-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.access-roles-theme .unit-btn-light,
.admin-teal-modal .unit-btn-light {
  color: #344054 !important;
  background: #fff !important;

  border: 1px solid #d7e0e8 !important;
}

.access-roles-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--am-primary) !important;
  background: #f7fbff !important;

  border-color: #b8d9f3 !important;
}

.access-roles-theme .unit-btn-primary,
.admin-teal-modal .unit-btn-primary {
  color: #fff !important;

  background: linear-gradient(
    135deg,
    var(--am-primary),
    #1875c5
  ) !important;

  border: 1px solid var(--am-primary) !important;

  box-shadow: 0 5px 12px rgba(0, 91, 170, .17);
}

.access-roles-theme .unit-btn:disabled {
  opacity: .52;
  cursor: not-allowed;
}

/* =========================================================
   UNSAVED CHANGES BANNER
   Overrides the inline style block in the JSX.
   ========================================================= */

.access-roles-theme .am-unsaved-banner {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;

  padding: 10px 18px !important;

  color: #b54708 !important;
  background: #fffaeb !important;

  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #fedf89 !important;
  border-left: 4px solid #f79009 !important;

  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.access-roles-theme .am-unsaved-banner > i {
  color: #f79009;
}

.access-roles-theme .am-scope-warning {
  color: #b42318 !important;
  font-weight: 800;
}

.access-roles-theme .am-unsaved-banner .btn-link {
  margin-left: auto;

  color: #175cd3;

  text-decoration: none;

  font-size: 9px;
  font-weight: 800;
}

.access-roles-theme .am-unsaved-banner .btn-link:hover {
  text-decoration: underline;
}

/* =========================================================
   EMPTY / ERROR / LOADING
   ========================================================= */

.access-roles-theme .am-empty {
  min-height: 270px;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  padding: 38px 20px !important;

  color: #667085 !important;

  background: #fff;

  text-align: center;

  font-size: 12px !important;
}

.access-roles-theme .am-empty::before {
  content: "\f023";

  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--am-primary);
  background: var(--am-primary-soft);

  border-radius: 15px;

  font-family: "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;
}

.access-roles-theme .am-error {
  color: #b42318 !important;
  background: #fffafa;
}

.access-roles-theme .am-error::before {
  content: "\f071";

  color: #b42318;
  background: #fef3f2;
}

.access-roles-theme .am-empty .spinner-border {
  color: var(--am-primary);
}

/* =========================================================
   MATRIX WRAPPER
   ========================================================= */

.access-roles-theme .am-matrix-wrapper {
  position: relative;

  max-height: 68vh !important;

  overflow: auto !important;

  scrollbar-color: #bdc8d5 #eef2f6;
  scrollbar-width: thin;
}

.access-roles-theme .am-matrix-wrapper::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.access-roles-theme .am-matrix-wrapper::-webkit-scrollbar-track {
  background: #eef2f6;
}

.access-roles-theme .am-matrix-wrapper::-webkit-scrollbar-thumb {
  background: #bdc8d5;
  border-radius: 999px;
}

/* =========================================================
   MATRIX TABLE
   ========================================================= */

.access-roles-theme table.am-matrix {
  width: 100%;
  min-width: 1260px !important;

  margin: 0;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: auto;

  vertical-align: middle;
}

.access-roles-theme table.am-matrix thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;

  min-width: 108px;

  padding: 11px 9px !important;

  color: #fff !important;
  background: var(--am-primary) !important;

  border-top: 0 !important;
  border-bottom: 1px solid #0a4e89 !important;

  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .35px;
  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;
}

.access-roles-theme table.am-matrix thead th:nth-child(1) {
  min-width: 235px;
}

.access-roles-theme table.am-matrix thead th:nth-child(2) {
  min-width: 200px;
  text-align: left;
}

.access-roles-theme table.am-matrix tbody td {
  min-height: 64px;

  padding: 10px 9px !important;

  color: #344054;
  background: #fff;

  border-bottom: 1px solid #edf0f4 !important;

  font-size: 9.5px;
  line-height: 1.4;
  vertical-align: middle;
}

.access-roles-theme table.am-matrix tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.access-roles-theme table.am-matrix tbody tr:hover td {
  background: #f5faff;
}

/* Route column */
.access-roles-theme table.am-matrix tbody td:nth-child(2) {
  min-width: 200px;
}

.access-roles-theme table.am-matrix code {
  display: inline-flex;
  align-items: center;

  max-width: 240px;

  padding: 4px 7px;

  color: #475467;
  background: #f2f4f7;

  border: 1px solid #e4e7ec;
  border-radius: 7px;

  font-size: 8px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   STICKY MODULE COLUMN
   ========================================================= */

.access-roles-theme table.am-matrix .am-sticky-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;

  min-width: 235px !important;
  width: 235px;

  background: #fff !important;

  text-align: left !important;

  box-shadow: 6px 0 12px rgba(15, 23, 42, .035);
}

.access-roles-theme table.am-matrix thead .am-sticky-col {
  z-index: 8 !important;

  color: #fff !important;
  background: var(--am-primary) !important;
}

.access-roles-theme table.am-matrix tbody tr:nth-child(even) .am-sticky-col {
  background: #fbfdff !important;
}

.access-roles-theme table.am-matrix tbody tr:hover .am-sticky-col {
  background: #f5faff !important;
}

/* =========================================================
   MODULE CELL
   ========================================================= */

.access-roles-theme .am-expand-btn {
  width: 100%;

  display: flex !important;
  align-items: center !important;
  gap: 7px !important;

  padding: 0 !important;

  color: #101828 !important;
  background: transparent !important;

  border: 0 !important;

  cursor: pointer;

  text-align: left;

  font-size: 10px;
  font-weight: 800 !important;
}

.access-roles-theme .am-expand-btn svg {
  flex: 0 0 auto;

  color: var(--am-primary);

  font-size: 10px;
}

.access-roles-theme .am-module-actions {
  display: flex !important;
  align-items: center;
  gap: 3px !important;

  margin-top: 5px !important;
}

.access-roles-theme .am-module-actions .btn-link {
  padding: 2px 4px !important;

  color: #667085;

  text-decoration: none;

  font-size: 7.5px;
  font-weight: 800;
}

.access-roles-theme .am-module-actions .btn-link:first-child {
  color: #027a48;
}

.access-roles-theme .am-module-actions .btn-link:last-child {
  color: #b42318;
}

.access-roles-theme .am-module-actions .btn-link:hover {
  text-decoration: underline;
}

/* =========================================================
   PERMISSION CELLS
   ========================================================= */

.access-roles-theme .am-perm-cell {
  min-width: 112px !important;

  text-align: center;
}

.access-roles-theme .am-disabled-cell {
  min-width: 108px;

  color: #cbd5e1 !important;
  background: #f8fafc !important;

  text-align: center !important;

  font-size: 10px;
}

.access-roles-theme .am-muted {
  color: #98a2b3 !important;
}

/* Checkbox */
.access-roles-theme .am-perm-cell .form-check {
  min-height: 22px;

  display: flex;
  justify-content: center;

  margin: 0;
  padding-left: 0;
}

.access-roles-theme .am-perm-cell .form-check-input {
  width: 17px;
  height: 17px;

  margin: 0;

  cursor: pointer;

  border: 1px solid #b8c2ce;

  box-shadow: none !important;
}

.access-roles-theme .am-perm-cell .form-check-input:checked {
  background-color: var(--am-primary);
  border-color: var(--am-primary);
}

.access-roles-theme .am-changed {
  outline: 3px solid rgba(0, 91, 170, .18) !important;
  outline-offset: 2px;

  border-radius: 4px !important;
}

/* Scope selector */
.access-roles-theme .am-scope-select {
  width: 96px;
  height: 29px !important;

  margin: 5px auto 0 !important;
  padding: 2px 22px 2px 6px !important;

  color: #475467;

  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 7px;

  box-shadow: none !important;

  font-size: 8px !important;
  font-weight: 700;
}

.access-roles-theme .am-scope-select:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 2px rgba(0, 91, 170, .06) !important;
}

.access-roles-theme .am-scope-missing {
  border-color: #f04438 !important;
  background: #fff8f7 !important;

  box-shadow: 0 0 0 2px rgba(240, 68, 56, .08) !important;
}

/* =========================================================
   INFO TOOLTIP ICON
   ========================================================= */

.access-roles-theme .am-info {
  margin-left: 5px !important;

  color: #98a2b3 !important;

  cursor: help;

  font-size: 12px;
  vertical-align: middle;
}

/* =========================================================
   CONFIRM MODAL
   ========================================================= */

.modal-dialog.admin-teal-modal {
  width: calc(100% - 28px);
  max-width: 560px;
}

.admin-teal-modal .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.admin-teal-modal .modal-header {
  position: relative;

  padding: 18px 20px 18px 70px;

  background: linear-gradient(135deg, #f7fbff, #fff);

  border-bottom: 1px solid #e6edf5;
}

.admin-teal-modal .modal-header::before {
  content: "\f3ed";
  position: absolute;
  left: 20px;
  top: 50%;

  width: 38px;
  height: 38px;

  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--am-primary);
  background: var(--am-primary-soft);

  border-radius: 11px;

  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}

.admin-teal-modal .modal-title {
  color: #101828;

  font-size: 16px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;

  color: #475467;

  font-size: 11px;
  line-height: 1.6;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.admin-teal-modal .am-modal-scope-select {
  min-height: 42px;

  margin-top: 13px !important;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 10px;
}

.admin-teal-modal .am-modal-scope-select:focus {
  border-color: #8fc8f5;

  box-shadow: 0 0 0 3px rgba(0, 91, 170, .07) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
  .access-roles-theme .unit-toolbar {
    grid-template-columns: 1fr;
  }

  .access-roles-theme .unit-toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .access-roles-theme .am-filters-group {
    grid-template-columns: 1fr 1fr;
  }

  .access-roles-theme .unit-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .access-roles-theme > .unit-header {
    margin: 14px 14px 0 !important;
    padding: 20px 20px 20px 78px !important;
  }

  .access-roles-theme > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .access-roles-theme > .unit-header h2 {
    font-size: 22px;
  }

  .access-roles-theme .access-roles-body {
    padding: 14px !important;
  }

  .access-roles-theme .am-filters-group {
    grid-template-columns: 1fr;
  }

  .access-roles-theme .unit-search {
    grid-column: auto;
  }

  .access-roles-theme .unit-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .access-roles-theme .unit-toolbar-actions .unit-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .access-roles-theme > .unit-header {
    padding: 82px 18px 18px !important;
  }

  .access-roles-theme > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .access-roles-theme .unit-toolbar {
    padding: 14px !important;
  }

  .access-roles-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-roles-theme *,
  .access-roles-theme *::before,
  .access-roles-theme *::after {
    transition: none !important;
  }
}


/* =========================================================
   AccessManagementRolesPage.css — UPDATED
   CSS-only refinement based on current UI screenshot.
   No JSX / API / permission logic changes.
   ========================================================= */

.access-roles-theme {
  --admin-primary: #005baa;
  --admin-primary-soft: #eaf4ff;
  --admin-warning: #d97706;
  --admin-warning-soft: #fff7ed;

  --am-primary: #005baa;
  --am-primary-dark: #064b86;
  --am-primary-soft: #eaf4ff;
  --am-text: #172033;
  --am-muted: #667085;
  --am-border: #e3e9f0;
  --am-bg: #f6f8fb;

  --am-green: #16a34a;
  --am-green-soft: #ecfdf3;
  --am-orange: #ea580c;
  --am-orange-soft: #fff7ed;
  --am-red: #dc2626;
  --am-red-soft: #fef2f2;

  min-height: 100%;
  color: var(--am-text);
  background: var(--am-bg);
}

/* =========================================================
   HEADER
   ========================================================= */

.access-roles-theme > .unit-header {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  min-height: 128px;

  margin: 22px 24px 0 !important;
  padding: 24px 28px 24px 94px !important;

  overflow: hidden;

  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #d9e7f4;
  border-radius: 18px;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, .06),
    0 2px 7px rgba(15, 23, 42, .035);
}

.access-roles-theme > .unit-header::after {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 6px;

  background: var(--am-primary);
}

.access-roles-theme > .unit-header::before {
  content: "\f3ed";

  position: absolute;
  left: 25px;
  top: 50%;

  width: 54px;
  height: 54px;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(135deg, var(--am-primary), #1976c8);

  border-radius: 15px;

  box-shadow: 0 9px 18px rgba(0, 91, 170, .22);

  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

.access-roles-theme .unit-page-label {
  margin-bottom: 3px;

  color: var(--am-primary);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.access-roles-theme > .unit-header h2 {
  margin: 0 0 6px;

  color: #101828;

  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.access-roles-theme > .unit-header p {
  margin: 0;

  color: #667085;

  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   BODY / CARD
   ========================================================= */

.access-roles-theme .access-roles-body {
  padding: 18px 24px 24px !important;
}

.access-roles-theme .unit-card {
  overflow: hidden;

  background: #fff;

  border: 1px solid #dfe6ee;
  border-radius: 18px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, .055),
    0 2px 6px rgba(15, 23, 42, .03);
}

/* =========================================================
   MAIN TOOLBAR
   Major fix:
   filters first row, actions second row horizontally.
   ========================================================= */

.access-roles-theme .unit-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;

  padding: 16px 18px 14px !important;

  background: linear-gradient(180deg, #ffffff, #fbfdff);

  border-bottom: 1px solid #e7ecf2;
}

/* FILTER ROW */

.access-roles-theme .am-filters-group {
  display: grid !important;

  grid-template-columns:
    minmax(220px, 260px)
    minmax(320px, 1fr)
    minmax(180px, 210px);

  gap: 10px !important;
  align-items: center !important;

  width: 100%;
  min-width: 0;
}

/* remove inline widths effectively */
.access-roles-theme .am-role-select,
.access-roles-theme .am-status-select,
.access-roles-theme .unit-search {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ACTION ROW */

.access-roles-theme .unit-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 8px !important;
  flex-wrap: wrap !important;

  width: 100%;

  padding-top: 2px;
}

/* =========================================================
   FILTER CONTROLS
   ========================================================= */

.access-roles-theme .am-role-select,
.access-roles-theme .am-status-select {
  min-height: 40px;

  color: #344054;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 10.5px;
  font-weight: 600;
}

.access-roles-theme .am-role-select:focus,
.access-roles-theme .am-status-select:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .07) !important;
}

.access-roles-theme .unit-search .input-group-text {
  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #667085;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-right: 0;

  border-radius: 10px 0 0 10px;
}

.access-roles-theme .unit-search .form-control {
  min-height: 40px;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-left: 0;

  box-shadow: none !important;

  font-size: 10.5px;
}

.access-roles-theme .unit-search .form-control::placeholder {
  color: #98a2b3;
}

.access-roles-theme .unit-search .form-control:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .07) !important;
}

/* =========================================================
   ACTION BUTTONS
   Compact horizontal controls instead of full-width bars.
   ========================================================= */

.access-roles-theme .unit-btn,
.admin-teal-modal .unit-btn {
  min-height: 38px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 12px;

  border-radius: 9px !important;

  font-size: 9.5px;
  font-weight: 800;

  white-space: nowrap;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.access-roles-theme .unit-toolbar-actions .unit-btn {
  width: auto !important;
  min-width: 112px;
  flex: 0 0 auto;
}

.access-roles-theme .unit-toolbar-actions .unit-btn:last-child {
  min-width: 128px;
}

.access-roles-theme .unit-btn:hover:not(:disabled),
.admin-teal-modal .unit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.access-roles-theme .unit-btn-light,
.admin-teal-modal .unit-btn-light {
  color: #475467 !important;
  background: #fff !important;

  border: 1px solid #d7e0e8 !important;
}

.access-roles-theme .unit-btn-light:hover:not(:disabled) {
  color: var(--am-primary) !important;
  background: #f7fbff !important;

  border-color: #b8d9f3 !important;
}

.access-roles-theme .unit-btn-primary,
.admin-teal-modal .unit-btn-primary {
  color: #fff !important;

  background: linear-gradient(
    135deg,
    var(--am-primary),
    #1875c5
  ) !important;

  border: 1px solid var(--am-primary) !important;

  box-shadow: 0 5px 12px rgba(0, 91, 170, .17);
}

/* Disabled must look disabled, not visually dominant */
.access-roles-theme .unit-btn:disabled {
  color: #98a2b3 !important;
  background: #f8fafc !important;

  border-color: #e2e8f0 !important;

  box-shadow: none !important;

  opacity: 1 !important;

  cursor: not-allowed;
}

/* Save disabled is also subtle */
.access-roles-theme .unit-btn-primary:disabled {
  color: #98a2b3 !important;
  background: #eef2f6 !important;

  border-color: #dfe5ec !important;

  box-shadow: none !important;
}

/* =========================================================
   UNSAVED BANNER
   ========================================================= */

.access-roles-theme .am-unsaved-banner {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;

  padding: 10px 18px !important;

  color: #b54708 !important;
  background: #fffaeb !important;

  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #fedf89 !important;
  border-left: 4px solid #f79009 !important;

  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.access-roles-theme .am-unsaved-banner > i {
  color: #f79009;
}

.access-roles-theme .am-scope-warning {
  color: #b42318 !important;
  font-weight: 800;
}

.access-roles-theme .am-unsaved-banner .btn-link {
  margin-left: auto;

  color: #175cd3;

  text-decoration: none;

  font-size: 9px;
  font-weight: 800;
}

/* =========================================================
   EMPTY / ERROR / LOADING
   More compact than previous version.
   ========================================================= */

.access-roles-theme .am-empty {
  min-height: 220px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  padding: 30px 20px !important;

  color: #667085 !important;

  background: #fff;

  text-align: center;

  font-size: 11px !important;
}

.access-roles-theme .am-empty::before {
  content: "\f023";

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--am-primary);
  background: var(--am-primary-soft);

  border-radius: 15px;

  font-family: "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;
}

.access-roles-theme .am-error {
  color: #b42318 !important;
  background: #fffafa;
}

.access-roles-theme .am-error::before {
  content: "\f071";

  color: #b42318;
  background: #fef3f2;
}

.access-roles-theme .am-empty .spinner-border {
  color: var(--am-primary);
}

/* =========================================================
   MATRIX WRAPPER
   ========================================================= */

.access-roles-theme .am-matrix-wrapper {
  position: relative;

  max-height: 66vh !important;

  overflow: auto !important;

  scrollbar-color: #bdc8d5 #eef2f6;
  scrollbar-width: thin;
}

.access-roles-theme .am-matrix-wrapper::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.access-roles-theme .am-matrix-wrapper::-webkit-scrollbar-track {
  background: #eef2f6;
}

.access-roles-theme .am-matrix-wrapper::-webkit-scrollbar-thumb {
  background: #bdc8d5;
  border-radius: 999px;
}

/* =========================================================
   MATRIX TABLE
   ========================================================= */

.access-roles-theme table.am-matrix {
  width: 100%;
  min-width: 1260px !important;

  margin: 0;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: auto;

  vertical-align: middle;
}

.access-roles-theme table.am-matrix thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;

  min-width: 108px;

  padding: 11px 9px !important;

  color: #fff !important;
  background: var(--am-primary) !important;

  border-top: 0 !important;
  border-bottom: 1px solid #0a4e89 !important;

  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .35px;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;
}

.access-roles-theme table.am-matrix thead th:nth-child(1) {
  min-width: 235px;
}

.access-roles-theme table.am-matrix thead th:nth-child(2) {
  min-width: 200px;
  text-align: left;
}

.access-roles-theme table.am-matrix tbody td {
  min-height: 64px;

  padding: 10px 9px !important;

  color: #344054;
  background: #fff;

  border-bottom: 1px solid #edf0f4 !important;

  font-size: 9.5px;
  line-height: 1.4;
  vertical-align: middle;
}

.access-roles-theme table.am-matrix tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.access-roles-theme table.am-matrix tbody tr:hover td {
  background: #f5faff;
}

.access-roles-theme table.am-matrix tbody td:nth-child(2) {
  min-width: 200px;
}

.access-roles-theme table.am-matrix code {
  display: inline-flex;
  align-items: center;

  max-width: 240px;

  padding: 4px 7px;

  color: #475467;
  background: #f2f4f7;

  border: 1px solid #e4e7ec;
  border-radius: 7px;

  font-size: 8px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   STICKY MODULE COLUMN
   ========================================================= */

.access-roles-theme table.am-matrix .am-sticky-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;

  width: 235px;
  min-width: 235px !important;

  background: #fff !important;

  text-align: left !important;

  box-shadow: 6px 0 12px rgba(15, 23, 42, .035);
}

.access-roles-theme table.am-matrix thead .am-sticky-col {
  z-index: 8 !important;

  color: #fff !important;
  background: var(--am-primary) !important;
}

.access-roles-theme table.am-matrix tbody tr:nth-child(even) .am-sticky-col {
  background: #fbfdff !important;
}

.access-roles-theme table.am-matrix tbody tr:hover .am-sticky-col {
  background: #f5faff !important;
}

/* =========================================================
   MODULE CELL
   ========================================================= */

.access-roles-theme .am-expand-btn {
  width: 100%;

  display: flex !important;
  align-items: center !important;
  gap: 7px !important;

  padding: 0 !important;

  color: #101828 !important;
  background: transparent !important;

  border: 0 !important;

  cursor: pointer;

  text-align: left;

  font-size: 10px;
  font-weight: 800 !important;
}

.access-roles-theme .am-expand-btn svg {
  flex: 0 0 auto;

  color: var(--am-primary);

  font-size: 10px;
}

.access-roles-theme .am-module-actions {
  display: flex !important;
  align-items: center;
  gap: 3px !important;

  margin-top: 5px !important;
}

.access-roles-theme .am-module-actions .btn-link {
  padding: 2px 4px !important;

  color: #667085;

  text-decoration: none;

  font-size: 7.5px;
  font-weight: 800;
}

.access-roles-theme .am-module-actions .btn-link:first-child {
  color: #027a48;
}

.access-roles-theme .am-module-actions .btn-link:last-child {
  color: #b42318;
}

/* =========================================================
   PERMISSION CELLS
   ========================================================= */

.access-roles-theme .am-perm-cell {
  min-width: 112px !important;
  text-align: center;
}

.access-roles-theme .am-disabled-cell {
  min-width: 108px;

  color: #cbd5e1 !important;
  background: #f8fafc !important;

  text-align: center !important;

  font-size: 10px;
}

.access-roles-theme .am-muted {
  color: #98a2b3 !important;
}

.access-roles-theme .am-perm-cell .form-check {
  min-height: 22px;

  display: flex;
  justify-content: center;

  margin: 0;
  padding-left: 0;
}

.access-roles-theme .am-perm-cell .form-check-input {
  width: 17px;
  height: 17px;

  margin: 0;

  cursor: pointer;

  border: 1px solid #b8c2ce;

  box-shadow: none !important;
}

.access-roles-theme .am-perm-cell .form-check-input:checked {
  background-color: var(--am-primary);
  border-color: var(--am-primary);
}

.access-roles-theme .am-changed {
  outline: 3px solid rgba(0, 91, 170, .18) !important;
  outline-offset: 2px;

  border-radius: 4px !important;
}

/* scope */
.access-roles-theme .am-scope-select {
  width: 96px;
  height: 29px !important;

  margin: 5px auto 0 !important;
  padding: 2px 22px 2px 6px !important;

  color: #475467;
  background-color: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 7px;

  box-shadow: none !important;

  font-size: 8px !important;
  font-weight: 700;
}

.access-roles-theme .am-scope-select:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 2px rgba(0, 91, 170, .06) !important;
}

.access-roles-theme .am-scope-missing {
  border-color: #f04438 !important;
  background: #fff8f7 !important;

  box-shadow:
    0 0 0 2px rgba(240, 68, 56, .08) !important;
}

/* =========================================================
   INFO ICON
   ========================================================= */

.access-roles-theme .am-info {
  margin-left: 5px !important;

  color: #98a2b3 !important;

  cursor: help;

  font-size: 12px;
  vertical-align: middle;
}

/* =========================================================
   CONFIRM MODAL
   ========================================================= */

.modal-dialog.admin-teal-modal {
  width: calc(100% - 28px);
  max-width: 560px;
}

.admin-teal-modal .modal-content {
  overflow: hidden;

  border: 0;
  border-radius: 18px;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, .22);
}

.admin-teal-modal .modal-header {
  position: relative;

  padding: 18px 20px 18px 70px;

  background: linear-gradient(135deg, #f7fbff, #fff);

  border-bottom: 1px solid #e6edf5;
}

.admin-teal-modal .modal-header::before {
  content: "\f3ed";

  position: absolute;
  left: 20px;
  top: 50%;

  width: 38px;
  height: 38px;

  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--am-primary);
  background: var(--am-primary-soft);

  border-radius: 11px;

  font-family: "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
}

.admin-teal-modal .modal-title {
  color: #101828;

  font-size: 16px;
  font-weight: 800;
}

.admin-teal-modal .modal-body {
  padding: 20px;

  color: #475467;

  font-size: 11px;
  line-height: 1.6;
}

.admin-teal-modal .modal-footer {
  padding: 14px 20px;

  background: #fbfcfe;

  border-top: 1px solid #edf0f4;
}

.admin-teal-modal .am-modal-scope-select {
  min-height: 42px;

  margin-top: 13px !important;

  color: #344054;
  background: #fff;

  border: 1px solid #d7e0e8;
  border-radius: 10px;

  box-shadow: none !important;

  font-size: 10px;
}

.admin-teal-modal .am-modal-scope-select:focus {
  border-color: #8fc8f5;

  box-shadow:
    0 0 0 3px rgba(0, 91, 170, .07) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .access-roles-theme .am-filters-group {
    grid-template-columns:
      minmax(200px, 240px)
      minmax(240px, 1fr)
      minmax(160px, 190px);
  }
}

@media (max-width: 900px) {
  .access-roles-theme .am-filters-group {
    grid-template-columns: 1fr 1fr;
  }

  .access-roles-theme .unit-search {
    grid-column: 1 / -1;
  }

  .access-roles-theme .unit-toolbar-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  .access-roles-theme > .unit-header {
    margin: 14px 14px 0 !important;
    padding: 20px 20px 20px 78px !important;
  }

  .access-roles-theme > .unit-header::before {
    left: 18px;

    width: 46px;
    height: 46px;
  }

  .access-roles-theme > .unit-header h2 {
    font-size: 22px;
  }

  .access-roles-theme .access-roles-body {
    padding: 14px !important;
  }

  .access-roles-theme .am-filters-group {
    grid-template-columns: 1fr;
  }

  .access-roles-theme .unit-search {
    grid-column: auto;
  }

  .access-roles-theme .unit-toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .access-roles-theme .unit-toolbar-actions .unit-btn,
  .access-roles-theme .unit-toolbar-actions .unit-btn:last-child {
    width: 100% !important;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .access-roles-theme > .unit-header {
    padding: 82px 18px 18px !important;
  }

  .access-roles-theme > .unit-header::before {
    top: 18px;
    left: 18px;

    transform: none;
  }

  .access-roles-theme .unit-toolbar {
    padding: 14px !important;
  }

  .access-roles-theme .unit-toolbar-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-roles-theme *,
  .access-roles-theme *::before,
  .access-roles-theme *::after {
    transition: none !important;
  }
}


/* =========================================================
   AdminDashboardHome.css
   DashboardHeader / adh-* professional admin hero styling.
   Business logic remains in JSX and is unchanged.
   ========================================================= */

.adh-hero {
  --adh-primary: #005baa;
  --adh-primary-dark: #064b86;
  --adh-primary-soft: #eaf4ff;
  --adh-text: #101828;
  --adh-muted: #667085;
  --adh-border: #dbe8f4;

  position: relative;

  min-height: 150px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  padding: 26px 28px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(0, 91, 170, .08) 0,
      rgba(0, 91, 170, 0) 30%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 58%,
      #f1f8ff 100%
    );

  border: 1px solid var(--adh-border);
  border-left: 6px solid var(--adh-primary);
  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(15, 23, 42, .065),
    0 2px 8px rgba(15, 23, 42, .035);
}

/* subtle decorative icon */

.adh-hero-watermark {
  position: absolute;
  right: 34px;
  bottom: -24px;

  color: rgba(0, 91, 170, .05);

  font-size: 128px;

  pointer-events: none;
  user-select: none;
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.adh-hero-main {
  position: relative;
  z-index: 2;

  min-width: 0;

  display: flex;
  align-items: center;
  gap: 17px;
}

.adh-hero-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  background: linear-gradient(
    135deg,
    var(--adh-primary),
    #1776c7
  );

  border: 4px solid #fff;
  border-radius: 16px;

  box-shadow:
    0 8px 18px rgba(0, 91, 170, .22),
    0 0 0 1px rgba(0, 91, 170, .08);

  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.adh-hero-eyebrow {
  margin-bottom: 4px;

  color: var(--adh-primary);

  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.adh-hero-title {
  margin: 0 0 6px;

  color: var(--adh-text);

  font-size: 28px;
  font-weight: 850;
  line-height: 1.16;
}

.adh-hero-subtitle {
  max-width: 720px;

  margin: 0;

  color: var(--adh-muted);

  font-size: 13px;
  line-height: 1.55;
}

/* =========================================================
   RIGHT ACTIONS
   ========================================================= */

.adh-hero-actions {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.adh-hero-updated {
  min-height: 36px;

  display: inline-flex;
  align-items: center;

  padding: 8px 11px;

  color: #475467;
  background: rgba(255, 255, 255, .82);

  border: 1px solid #dfe6ee;
  border-radius: 10px;

  box-shadow: 0 2px 6px rgba(15, 23, 42, .025);

  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
}

.adh-hero-updated::before {
  content: "\f017";

  margin-right: 6px;

  color: var(--adh-primary);

  font-family: "Font Awesome 6 Free";
  font-size: 9px;
  font-weight: 900;
}

.adh-refresh-btn {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 8px 13px;

  color: #fff;
  background: linear-gradient(
    135deg,
    var(--adh-primary),
    #1776c7
  );

  border: 1px solid var(--adh-primary);
  border-radius: 10px;

  box-shadow: 0 6px 14px rgba(0, 91, 170, .18);

  cursor: pointer;

  font-size: 10px;
  font-weight: 850;
  line-height: 1;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.adh-refresh-btn:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow: 0 8px 17px rgba(0, 91, 170, .23);
}

.adh-refresh-btn:active:not(:disabled) {
  transform: translateY(0);
}

.adh-refresh-btn:disabled {
  color: #98a2b3;
  background: #eef2f6;

  border-color: #dfe5ec;

  box-shadow: none;

  cursor: not-allowed;
}

.adh-refresh-btn i {
  font-size: 9px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .adh-hero {
    align-items: flex-start;
    flex-direction: column;

    padding: 22px;
  }

  .adh-hero-actions {
    width: 100%;

    justify-content: flex-start;
  }

  .adh-hero-watermark {
    right: 16px;

    font-size: 110px;
  }
}

@media (max-width: 560px) {
  .adh-hero {
    min-height: auto;

    gap: 20px;

    padding: 19px 17px;

    border-radius: 15px;
  }

  .adh-hero-main {
    align-items: flex-start;
  }

  .adh-hero-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;

    border-radius: 13px;

    font-size: 17px;
  }

  .adh-hero-title {
    font-size: 22px;
  }

  .adh-hero-subtitle {
    font-size: 11.5px;
  }

  .adh-hero-actions {
    display: grid;
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .adh-hero-updated,
  .adh-refresh-btn {
    width: 100%;

    justify-content: center;
  }

  .adh-hero-watermark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adh-hero *,
  .adh-hero *::before,
  .adh-hero *::after {
    transition: none !important;
  }
}