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

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
  --invoice-primary: #0d6efd;
  --invoice-secondary: #6c757d;
  --invoice-success: #198754;
  --invoice-danger: #dc3545;
  --invoice-bg: #f8f9fa;
  --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

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

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

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

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

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

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

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

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

.pagetitle-with-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Title sits left and takes the slack, pushing the page's single action control
   (an actions menu, or a lone reload button) to the right edge. */
.pagetitle-with-actions h1 {
  flex: 1;
  text-align: left;
}

.pagetitle-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #2c3e50;
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pagetitle-icon-btn:hover,
.pagetitle-icon-btn:active,
.pagetitle-icon-btn.show {
  background: #e2e8f0;
}

/* Page-level action menu, sitting in the title bar where a lone icon button
   would otherwise go. Groups the page's actions instead of stacking a button
   per action above the list. */
.pagetitle-actions {
  flex-shrink: 0;
}

.pagetitle-actions .dropdown-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: none;
  border-radius: 10px;
  padding: 6px;
  min-width: 210px;
  /* Above the fixed bottom nav (1000) and the back-to-top button (99999). */
  z-index: 100000;
}

.pagetitle-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #334155;
}

.pagetitle-actions .dropdown-item i {
  font-size: 1rem;
  color: #64748b;
  width: 18px;
  text-align: center;
}

.pagetitle-actions .dropdown-item:hover {
  background: #f1f5f9;
}

.pagetitle-actions .dropdown-item.is-primary,
.pagetitle-actions .dropdown-item.is-primary i {
  color: #0d6efd;
  font-weight: 500;
}

.pagetitle-actions .dropdown-item.is-primary:hover {
  background: #eff6ff;
}

.pagetitle-actions .dropdown-divider {
  margin: 6px 4px;
  border-color: #e2e8f0;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination {
  gap: 4px;
  flex-wrap: wrap;
}

.page-link {
  border: none;
  border-radius: 8px !important;
  padding: 6px 13px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  margin: 0;
  line-height: 1.4;
}

.page-link:hover,
.page-link:focus {
  background: #e2e8f0;
  color: #0d6efd;
  box-shadow: none;
}

.page-item.active .page-link {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
}

.page-item.disabled .page-link {
  background: transparent;
  color: #cbd5e1;
}

/*--------------------------------------------------------------
# List Search Bar
--------------------------------------------------------------*/
.list-search-form {
  margin-bottom: 16px;
}

/* Field and submit are one joined control rather than a fill plus a detached
   blue square: same white/#e2e8f0 outlined shell the row action buttons use,
   so the search bar reads as part of the card it sits in. */
.search-box-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-box-row:focus-within {
  border-color: #bfdbfe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: transparent;
  padding: 0 6px 0 14px;
}

.search-box-icon {
  color: #94a3b8;
  font-size: 14px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.search-box-row:focus-within .search-box-icon {
  color: #0d6efd;
}

.search-box-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 1rem;
  color: #1e293b;
  outline: none;
}

.search-box-input::placeholder {
  color: #94a3b8;
}

.search-box-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #94a3b8;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.search-box-clear:hover {
  background: #e2e8f0;
  color: #475569;
}

/* Attached segment on the trailing edge of the shell — the shell's own radius
   and overflow round it off, so it needs no corners of its own. Overrides the
   .btn .btn-primary the markup carries. */
.search-box-row .search-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #0d6efd;
  color: #fff;
  font-size: 0.95rem;
  transition: background-color 0.15s ease;
}

.search-box-row .search-submit-btn:hover,
.search-box-row .search-submit-btn:focus,
.search-box-row .search-submit-btn:active {
  background: #0b5ed7;
  color: #fff;
  box-shadow: none;
}

.search-result-note {
  margin-top: 8px;
  padding-left: 2px;
  font-size: 0.85rem;
  color: #6c757d;
}

/* A list page's primary action, sitting above the search bar. Full width so it
   spans the card, but kept shorter than the search field so it reads as a
   secondary strip rather than the loudest thing on the page. */
.list-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: #0d6efd;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.list-add-btn:hover,
.list-add-btn:focus,
.list-add-btn:active {
  background: #0b5ed7;
  color: #fff;
  box-shadow: none;
}

/* Green sibling for pages that offer a second add action (stocks, products). */
.list-add-btn.is-secondary {
  background: #198754;
}

.list-add-btn.is-secondary:hover,
.list-add-btn.is-secondary:focus,
.list-add-btn.is-secondary:active {
  background: #157347;
}

/* Inline variant for the button sitting beside content rather than spanning a
   strip of its own (the Add Stock picker panel). */
.list-add-btn.is-inline {
  width: auto;
  flex-shrink: 0;
  margin-bottom: 0;
}

.list-add-btn:disabled {
  background: #cbd5e1;
  color: #fff;
}

/* Two add actions share the strip, splitting it evenly. */
.list-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.list-add-row .list-add-btn {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.list-pagination {
  margin-top: 4px;
}

/*--------------------------------------------------------------
# Meta Row (icon + label secondary text, used across list/detail pages)
--------------------------------------------------------------*/
.meta-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14.5px;
  color: #6c757d;
  margin-top: 4px;
}

.meta-row i {
  color: #0d6efd;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.meta-row .text-success,
.meta-row .text-danger {
  font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

.dropdown-menu .dropdown-item:hover,
.header-nav .notifications .notification-item:hover,
.header-nav .messages .message-item:hover,
.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

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

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

  100% {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.card-body {
  padding: 15px;
}

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

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

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

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

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

.accordion-button:not(.collapsed) {
  color: #012970;
  background-color: #f6f9ff;
}

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

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

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

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

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

.breadcrumb a {
  transition: 0.3s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header-nav .messages .message-item h4 {
  color: #444444;
}

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

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

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

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

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

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

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

  .toggle-sidebar .sidebar {
    left: 0;
  }
}

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

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

@media (min-width: 1200px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dashboard .customers-card .card-icon {
  background: #fff3e0;
  color: #f57c00;
}

.dashboard .users-card .card-icon {
  background: #EFF0FE;
  color: #4154F1;
}

.dashboard .suppliers-card .card-icon {
  background: #e3f2fd;
  color: #1976d2;
}

.dashboard .bank-card .card-icon {
  background: #e8f5e9;
  color: #388e3c;
}

.dashboard .stocks-card .card-icon {
  background: #e1f5fe;
  color: #0288d1;
}

.dashboard .expenses-card .card-icon {
  background: #fff9c4;
  color: #fbc02d;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Recent Sales & Top Selling (shared) */
.dashboard .recent-sales,
.dashboard .top-selling {
  font-size: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.contact .php-email-form .error-message {
  background: #ed3c0d;
  text-align: left;
}

.contact .php-email-form .sent-message {
  background: #18d26e;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.footer .credits {
  padding-top: 5px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Select2 / DataTable
--------------------------------------------------------------*/
.select2-container .select2-selection--single {
  height: auto !important;
  padding: 4px !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.select2-container--default .select2-selection--multiple {
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  padding: 3px 4px !important;
  min-height: 40px !important;
}

.datatable-top {
  border-bottom: 1px solid #dee2e6;
  padding: 10px;
}

.datatable-container {
  border-bottom: none !important;
}

.table {
  font-size: 12px !important;
}

@media (max-width: 767px) {

  #stockItemsTable input.form-control,
  #otherItemsTable input.form-control {
    min-width: 100px;
    max-width: 100%;
  }

  #stockItemsTable,
  #otherItemsTable {
    font-size: 0.9rem;
  }

  .w-sm-100 {
    width: 100% !important;
    margin-top: 8px;
  }
}

/*--------------------------------------------------------------
# Navigation Loader Indication
--------------------------------------------------------------*/
.header-nav .nav-link-loading,
.dropdown-item.nav-link-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.header-nav .nav-link-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border: 2px solid rgba(1, 41, 112, 0.2);
  border-top-color: #4154f1;
  border-radius: 50%;
  animation: header-nav-spinner 0.6s linear infinite;
}

@keyframes header-nav-spinner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.dropdown-item.nav-link-loading::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(1, 41, 112, 0.2);
  border-top-color: #4154f1;
  border-radius: 50%;
  animation: dropdown-spinner 0.6s linear infinite;
}

@keyframes dropdown-spinner {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.header-nav .nav-link-loading i,
.dropdown-item.nav-link-loading i {
  opacity: 0;
}

/*--------------------------------------------------------------
# Customer Detail Page
--------------------------------------------------------------*/
.customer-info-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.customer-info-card-body {
  padding: 24px;
}

/* Shared info-box base (customer page) */
.info-box-blue,
.info-box-green,
.info-box-purple,
.info-box-orange,
.info-box-pink {
  background: #f8f9fa;
}

.info-box-blue {
  border-left: 4px solid #667eea;
}

.info-box-green {
  border-left: 4px solid #43e97b;
}

.info-box-purple {
  border-left: 4px solid #f093fb;
}

.info-box-orange {
  border-left: 4px solid #f39c12;
}

.info-box-pink {
  border-left: 4px solid #fa709a;
}

.info-box-yellow {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.info-box-cyan {
  background: #e8f4f8;
  border-left: 4px solid #17a2b8;
}

/* Shared label styles */
.info-box-label,
.info-box-yellow-label,
.info-box-cyan-label {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

.info-box-label {
  color: #6c757d;
}

.info-box-yellow-label {
  color: #856404;
}

.info-box-cyan-label {
  color: #0c5460;
}

/* Shared value styles */
.info-box-value,
.info-box-yellow-value {
  font-weight: 600;
  margin-top: 4px;
}

.info-box-value {
  color: #2c3e50;
}

.info-box-yellow-value {
  color: #856404;
}

.attachment-container {
  font-weight: 600;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-link {
  font-size: 14px;
  text-decoration: none;
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #b8daff;
}

/* Balance / Advance boxes */
.balance-due-box,
.advance-got-box {
  border-radius: 12px;
}

.balance-due-box {
  background: rgba(255, 71, 87, 0.1);
  border: 2px dashed #ff4757;
}

.advance-got-box {
  background: rgba(46, 213, 115, 0.1);
  border: 2px dashed #2ed573;
}

/* Balance / Advance text */
.balance-due-text,
.advance-got-text {
  font-weight: 800;
  font-size: 20px;
}

.balance-due-text {
  color: #ff4757;
}

.advance-got-text {
  color: #2ed573;
}

.ledger-entry-row {
  border-top: 20px solid #ececec;
  border-bottom: 3px solid #ced4da;
  border-left: 5px solid #0d6efd;
}

/* Shared 0.85rem font-size items */
.ledger-items-list,
.ledger-note-box,
.attachments-label,
.attachment-link-small {
  font-size: 0.85rem;
}

.attachment-link-small {
  text-decoration: none;
}

.user-badge {
  font-size: 0.75rem;
}

/*--------------------------------------------------------------
# Invoice Page Styles
--------------------------------------------------------------*/
.main-content {
  padding: 15px;
}

.invoice-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  border: none;
  margin-bottom: 2rem;
}

.invoice-header {
  background: #ffffff;
  text-align: center;
  position: relative;
}

.invoice-header .brand-area {
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

.invoice-header .logo-container {
  background: white;
  width: 90px;
  height: 90px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  padding: 5px;
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.12);
  border: 1px solid #f0f4f8;
}

.invoice-header img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.invoice-header .company-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a202c;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

.invoice-header .document-type {
  display: inline-block;
  padding: 4px 16px;
  background: #ebf4ff;
  color: #0d6efd;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 0.5rem;
  text-transform: uppercase;
}

.invoice-header .company-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 0.35rem;
}

.invoice-header .company-phone,
.invoice-header .company-address {
  font-size: 0.95rem;
  color: #4a5568;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.invoice-header .company-phone i,
.invoice-header .company-address i {
  color: #0d6efd;
  margin-right: 3px;
  font-size: 0.88rem;
}

.invoice-header .invoice-meta {
  margin-top: 1.5rem;
}

.invoice-header h2 {
  font-size: 1.75rem;
  color: #2d3748;
  font-weight: 300;
  margin: 0;
}

.invoice-header h2 span {
  font-weight: 800;
  color: #0d6efd;
}

.invoice-body {
  padding: 1.5rem;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Invoice info-box (overrides the contact page .info-box) */
.invoice-body .info-box {
  background: #fdfdfd;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}

.invoice-body .info-box label {
  display: block;
  font-size: 0.75rem;
  color: var(--invoice-secondary);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.invoice-body .info-box .value {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
}

.items-container {
  margin-bottom: 2rem;
}

/* Items breakdown heading */
.invoice-breakdown-title {
  color: #1e293b;
  font-size: 1.2rem;
}

.invoice-breakdown-divider {
  height: 2px;
  background: #f1f5f9;
}

/* Items Table */
.items-group {
  margin-bottom: 1.75rem;
}

.items-group-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.items-group-label .badge-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-type.stock {
  background: #ebf5fb;
  color: #1565c0;
  border: 1px solid #bbdefb;
}

.badge-type.manual {
  background: #fef3e2;
  color: #b45309;
  border: 1px solid #fde68a;
}

.items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
}

.items-table thead tr {
  background: linear-gradient(90deg, #1565c0 0%, #1976d2 100%);
  color: #fff;
}

.items-table.manual-table thead tr {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
}

.items-table th {
  padding: 9px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: none;
}

.items-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.items-table tbody tr:last-child td {
  border-bottom: none;
}

.items-table tbody tr:nth-child(odd) {
  background: #f8fafc;
}

.items-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.items-table .col-no {
  width: 36px;
  text-align: center;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.7rem;
}

.items-table .col-product {
  font-weight: 600;
  color: #1e293b;
}

.items-table .col-qty {
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

.items-table .col-rate {
  text-align: center;
  white-space: nowrap;
}

.items-table .col-amount {
  text-align: center;
  font-weight: 700;
  color: #1565c0;
  white-space: nowrap;
}

.items-table.manual-table .col-amount {
  color: #d97706;
}

.items-table tfoot td {
  padding: 8px 12px;
  background: #eef2f7;
  font-weight: 700;
  font-size: 0.8rem;
  color: #1e293b;
  border-top: 2px solid #cbd5e1;
}

.items-table tfoot .subtotal-label {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

.items-table tfoot .subtotal-value {
  text-align: center;
  color: #1565c0;
  font-size: 0.9rem;
}

.items-table.manual-table tfoot .subtotal-value {
  color: #d97706;
}

/* Subtotal label overrides */
.subtotal-label-left {
  text-align: left !important;
  color: #64748b !important;
}

.subtotal-label-right {
  text-align: right !important;
  color: #64748b !important;
}

.subtotal-label-orange {
  text-align: center !important;
  color: #d97706 !important;
  font-weight: 700 !important;
}

.subtotal-label-blue {
  text-align: center !important;
  color: #1565c0 !important;
  font-weight: 700 !important;
}

.subtotal-unit {
  font-size: 0.7rem;
  color: #94a3b8;
}

/* Images grid */
.images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 10px 2rem;
}

.image-item {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  background: #f8fafc;
}

.image-item img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  display: block;
}

/* Totals card */
.totals-card {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: #4a5568;
}

.total-row.grand-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #cbd5e0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--invoice-primary);
}

.total-row-orange {
  color: #b45309;
  font-weight: 600;
}

.total-row-green {
  color: #38a169;
  font-weight: 600;
}

/* Shared border for balance rows */
.total-row-balance-advance,
.total-row-balance-due {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px dashed #cbd5e0;
  font-size: 1.15rem;
  font-weight: 800;
}

.total-row-balance-advance {
  color: #38a169;
}

.total-row-balance-due {
  color: #e53e3e;
}

/* Summary section */
.summary-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
  background: #e2e8f0;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  display: inline-flex;
  align-items: center;
}

.total-row.summary-row {
  font-size: 0.875rem;
  padding-left: 0.25rem;
}

.summary-value {
  font-weight: 700;
  color: #1565c0;
}

/* Notes */
.notes-box {
  background: #fff8eb;
  border-left: 4px solid #f6ad55;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 2rem;
}

.invoice-notes-label {
  font-size: 0.75rem;
  color: #c05621;
}

.invoice-notes-value {
  font-size: 0.9rem;
  color: #744210;
}

.invoice-no-items {
  font-size: 0.875rem;
}

.invoice-photos-header {
  color: #2d3748;
  background: #eef2f7;
}

.btn-spinner-active {
  display: block !important;
}

/* Actions bar */
.actions-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  background: white;
  padding: 12px;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.btn-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  border: none;
  color: #ffffff !important;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.15s;
  position: relative;
}

.btn-icon:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: #ffffff !important;
}

.btn-icon:active {
  transform: translateY(0);
}

.btn-back {
  background: #6c757d;
}

.btn-edit {
  background: #f59e0b;
}

.btn-download {
  background: #0d6efd;
}

.btn-whatsapp {
  background: #25D366;
}

.btn-image {
  background: #6f42c1;
}

.btn-icon i,
.btn-icon .btn-label {
  transition: opacity 0.15s;
}

.btn-icon i {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.btn-icon .btn-spinner {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  margin-bottom: 4px;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-icon.loading .btn-spinner {
  display: block;
}

.btn-icon.loading i {
  display: none;
}

.btn-icon.loading .btn-label {
  opacity: 0.75;
}

/* Invoice mobile overrides */
@media (max-width: 768px) {

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

  .main {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .pagetitle {
    padding: 15px 15px 0 !important;
  }

  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  .table-scroll-wrapper .items-table {
    min-width: 480px;
  }
}

/* =====================================================
   Supplier / Customer Ledger Amount Add & Edit Forms
   ===================================================== */

/* Form labels */
.col-form-label,
.form-label {
    font-weight: 700 !important;
    color: #334155;
}

label[required]::after,
label.required::after,
.col-form-label:has(+ .col-sm-10 [required])::after,
.form-label:has(+ [required])::after {
    content: " *";
    color: #dc3545;
}

/* Select2 overrides */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #dee2e6 !important;
    padding: 5px 0px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px !important;
    color: #495057 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    float: left !important;
    margin-right: 8px !important;
    margin-left: 10px !important;
    font-weight: bold !important;
    color: #dc3545 !important;
}

/* Select2 invalid state */
.select2-container--default .select2-selection--single.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .select2-container--default .select2-selection--single:invalid,
.select2-container--default .select2-selection--single.is-invalid {
    border-color: #dc3545 !important;
}

/* Product & Resource list scrollable containers */
#productList,
#resourceList {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

#productList::-webkit-scrollbar,
#resourceList::-webkit-scrollbar {
    width: 5px;
}

#productList::-webkit-scrollbar-thumb,
#resourceList::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* Bill list scrollable container */
#billList {
    max-height: 400px;
    overflow-y: auto;
}

/* Picker Modal — Tab buttons (Products, Resources, Bills).
   Same white/#e2e8f0 outlined language as .list-action-btn, so the filters read
   as part of the system rather than as Bootstrap defaults. */
.pm-tab, .rm-tab, .bm-tab {
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff;
    color: #475569;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pm-tab:hover, .rm-tab:hover, .bm-tab:hover {
    background: #f8fafc;
    border-color: #cbd5e1 !important;
    color: #1e293b;
}

.pm-tab.active, .rm-tab.active, .bm-tab.active {
    background: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
}

/*--------------------------------------------------------------
# Form Fields (admin pages)
--------------------------------------------------------------*/
/* The Add Stock entry treatment applied everywhere: a quiet label above a
   tinted field that turns white on focus.
   Scoped to .main (the admin layout wrapper) rather than #main so the
   specificity stays at two classes — Bootstrap's own
   `.was-validated .form-control:invalid` is three, and must keep winning so the
   red/green validation states still show. The auth screens have no .main
   wrapper and keep their own card styling. */
.main .form-label,
.main .col-form-label {
  display: block;
  margin-bottom: 6px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.main .form-control,
.main .form-select {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #f8fafc;
  font-size: 0.95rem;
  color: #1e293b;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.main .form-control::placeholder {
  color: #94a3b8;
}

.main .form-control:focus,
.main .form-select:focus {
  background-color: #fff;
  border-color: #bfdbfe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
  color: #1e293b;
}

.main .form-control:disabled,
.main .form-select:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
}

/* Upload hints below file inputs: a hanging indent so a line that wraps sits
   under the text rather than sliding back under the leading icon. Done with
   indent rather than flex — flex would make each text run its own item and
   swallow the spaces around the <strong> parts. Pages that already build the
   row with .d-flex are left alone. */
.main .form-text > div:not(.d-flex) {
  padding-left: 1.3em;
  text-indent: -1.3em;
}

/* Prefix/suffix segments get the same treatment as the Add Stock unit suffix.
   Bootstrap zeroes the inner corners itself, so only the outer radius is set
   here — that keeps joined groups looking like one control. */
.main .input-group-text {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Select2 single-select is a div, not a control, so it needs the shell spelled
   out to sit level with the real inputs beside it. !important because several
   pages set its height and border inline with !important of their own. */
.main .select2-container--default .select2-selection--single {
  height: auto !important;
  min-height: 42px !important;
  padding: 4px 6px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background-color: #f8fafc !important;
}

.main .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b;
  line-height: 32px;
}

.main .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

.main .select2-container--default.select2-container--focus .select2-selection--single,
.main .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #bfdbfe !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/*--------------------------------------------------------------
# Form Action Bar (add/edit pages)
--------------------------------------------------------------*/
/* Submit and Back split the footer bar evenly, sized like the list pages' add
   button rather than as full-height Bootstrap buttons. The bar's own bleed
   (background, padding, negative margins) stays inline per page, since the
   card padding it has to cancel out differs between forms. */
.form-actions {
  display: flex;
  gap: 8px;
}

.form-actions.is-hidden {
  display: none;
}

.form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.form-btn.is-submit {
  background: #0d6efd;
  color: #fff;
}

.form-btn.is-submit:hover,
.form-btn.is-submit:focus,
.form-btn.is-submit:active {
  background: #0b5ed7;
  color: #fff;
  box-shadow: none;
}

.form-btn.is-back {
  background: #e2e8f0;
  color: #475569;
}

.form-btn.is-back:hover,
.form-btn.is-back:focus,
.form-btn.is-back:active {
  background: #cbd5e1;
  color: #334155;
  box-shadow: none;
}

/*--------------------------------------------------------------
# Stock Product Picker Panel (Add Stock page)
--------------------------------------------------------------*/
/* The slot products are picked into. Dashed and tinted so it reads as an empty
   container rather than another filled card like the entries below it. */
.stock-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 18px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.stock-picker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #e0f2fe;
  color: #0284c7;
  font-size: 1.15rem;
}

.stock-picker-text {
  flex: 1;
  min-width: 0;
}

.stock-picker-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

.stock-picker-sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*--------------------------------------------------------------
# Stock Entry Card (Add Stock page)
--------------------------------------------------------------*/
/* One card per product queued for stocking. Header identifies the product,
   body holds the entry fields — the same white/#e2e8f0 shell the list cards
   and search bar use, so the form reads as part of the app. */
.stock-entry {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.stock-entry-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}

/* Tinted tile carrying the unit's colour, matching the product picker cards. */
.stock-entry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.05rem;
}

.stock-entry-title {
  flex: 1;
  min-width: 0;
}

.stock-entry-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
}

.stock-entry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.stock-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.stock-chip.is-available {
  background: #dcfce7;
  color: #15803d;
}

.stock-chip.is-empty {
  background: #fee2e2;
  color: #b91c1c;
}

/* Quiet tinted square rather than a solid red block — removing a queued row is
   a small correction, not the page's main action. */
.stock-entry-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.8rem;
  transition: background-color 0.15s ease;
}

.stock-entry-remove:hover,
.stock-entry-remove:focus {
  background: #fee2e2;
  color: #b91c1c;
}

.stock-field + .stock-field {
  margin-top: 14px;
}

.stock-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
}

/* Field and unit suffix share one shell, same joined-control idea as the
   list search bar. */
.stock-input-wrap {
  display: flex;
  align-items: stretch;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.stock-input-wrap:focus-within {
  background: #fff;
  border-color: #bfdbfe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.stock-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #1e293b;
  outline: none;
}

.stock-input::placeholder {
  color: #94a3b8;
}

.stock-input-suffix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 12px;
  border-left: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}

.stock-field-hint {
  margin-top: 5px;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* The inputs are not .form-control, so Bootstrap's was-validated styling does
   not reach them; this restores the red state on a blocked submit. */
.was-validated .stock-input-wrap:has(.stock-input:invalid) {
  background: #fff;
  border-color: #dc3545;
}

.was-validated .stock-input-wrap:has(.stock-input:invalid) + .stock-field-hint {
  color: #dc3545;
}

/* Picker Modal — Selectable cards. Hover mirrors the blue-intent treatment the
   row action buttons use; no lift, so a long list does not jitter under the
   cursor. */
.pm-card, .rm-card, .bm-card {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pm-card:hover, .rm-card:hover, .bm-card:hover {
    border-color: #bfdbfe !important;
    background: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.08);
}

/* Picker Modal — modal-content border & shadow */
.picker-modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Picker Modal — header. Same tinted band and heading blue as the
   .bill-preview-modal previews, so every modal in the app opens the same way. */
.picker-modal-header {
    background: linear-gradient(135deg, #eef4ff, #e6eefc);
    border-radius: 16px 16px 0 0;
}

/* Picker Modal — title */
.picker-modal-title {
    color: #012970;
    font-size: 1.1rem;
}

/* Picker Modal — close button. Bootstrap's .btn-close is a 16px glyph that all
   but disappears on the tinted header, so it gets the same 36px circular
   treatment as .pagetitle-icon-btn and a real hit area. */
/* Scoped to .modal-header so it outranks Bootstrap's own
   `.modal-header .btn-close`, which sets padding: .5rem and a
   margin: -.5rem -.5rem -.5rem auto. Left alone, that padding inflates the
   circle by 8px on every side and the negative bottom margin drags it onto the
   header's bottom edge. */
.modal-header .picker-modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0 0 0 auto;
    border-radius: 50%;
    background-color: #fff;
    background-position: center;
    background-size: 11px 11px;
    opacity: 1;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(1, 41, 112, 0.1);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.modal-header .picker-modal-close:hover,
.modal-header .picker-modal-close:focus {
    background-color: #e2e8f0;
    opacity: 1;
    box-shadow: 0 2px 5px rgba(1, 41, 112, 0.14);
}

/* Picker Modal — search bar wrapper (positions the search icon) */
.picker-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Picker Modal — search input */
.picker-search-input {
    padding: 0 12px 0 40px !important;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    height: 45px;
    font-size: 0.95rem;
    line-height: normal;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Same focus lift as the list pages' .search-box-row. */
.picker-search-input:focus {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Picker Modal — reset button */
.picker-reset-btn {
    border-radius: 10px;
    height: 45px;
    flex-shrink: 0;
}

.picker-reset-icon {
    font-size: 1.25rem;
}

/* Picker Modal — "Add Selected" button */
.picker-add-btn {
    border-radius: 10px;
}

/* Picker Modal — section divider HR */
.picker-hr {
    border-top: 1.5px solid #f1f5f9;
}

/* Picker Modal — category filter pills.
   Wraps rather than overflowing: on a ~320px screen the four labels total more
   than the modal body's width, and the previous nowrap flex row pushed the last
   pill roughly 80px past the edge with no way to reach it. Each pill still keeps
   its own label on one line. */
.picker-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
}

.picker-tabs .rm-tab,
.picker-tabs .pm-tab,
.picker-tabs .bm-tab {
    white-space: nowrap;
}

/* The narrow-screen pill sizing lives at the end of this file — it has to come
   after the .amount-add-page .pm-tab/.rm-tab rules, which carry the same
   specificity and !important and would otherwise win on source order. */

/* Supplier info box on ledger-amount-add/edit */
.supplier-info-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border-left: 5px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.supplier-info-box .supplier-info-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.supplier-info-box .supplier-name {
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

.supplier-info-box .supplier-contacts {
    margin-top: 6px;
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.supplier-balance-box {
    background: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.supplier-balance-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.supplier-balance-advance {
    color: #198754;
    font-size: 1.2rem;
    font-weight: 800;
}

.supplier-balance-due {
    color: #dc3545;
    font-size: 1.2rem;
    font-weight: 800;
}

/* Form section divider */
.form-section-hr {
    border-top: 2px dashed #adb5bd;
}

/* Form submit footer bar */
.form-submit-footer {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 0 -24px -24px -24px;
    text-align: center;
}

.form-submit-footer .btn {
    min-width: 140px;
}

/* Image preview thumbnail */
.img-preview-wrapper {
    position: relative;
    width: 150px;
    margin-bottom: 8px;
}

.img-preview-wrapper img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.img-preview-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
    cursor: pointer;
    transition: transform 0.2s;
}

.img-preview-remove-btn:hover {
    transform: scale(1.1);
}

/* Mobile-responsive table (used in ledger amount add/edit) */
@media (max-width: 768px) {
    .mobile-responsive-table thead {
        display: none;
    }

    .mobile-responsive-table,
    .mobile-responsive-table tbody,
    .mobile-responsive-table tr,
    .mobile-responsive-table td {
        display: block;
        width: 100%;
    }

    .mobile-responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 10px;
        background: #f8f9fa;
    }

    .mobile-responsive-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #eee;
        min-height: 40px;
    }

    .mobile-responsive-table td:last-child {
        border-bottom: 0;
    }

    .mobile-responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

/* Resource Select Card (JS template).
   Laid out like a list row: icon, then name over its type chip, then the balance
   right-aligned with a caption. Outlined in the system's #e2e8f0 rather than the
   old heavy 2.5px grey, so the list reads as rows instead of stacked slabs. */
.rm-card-item,
.bm-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
}

.rm-card-item:last-child,
.bm-card-item:last-child {
    margin-bottom: 0;
}

.rm-card-icon-box,
.bm-card-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rm-card-icon,
.bm-card-icon {
    font-size: 1.1rem;
}

.rm-card-content,
.bm-card-content {
    flex: 1;
    min-width: 0;
}

.rm-card-title,
.bm-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.rm-card-subtitle,
.bm-card-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Type chip. Geometry matches .resource-tag / .user-permission-chip; the tint
   itself is per-group and set inline, since the groups come from data. */
.rm-card-badge {
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Bill card: the subtitle is plain text (date • total) rather than chips. */
.bm-card-subtitle {
    font-size: 0.78rem;
    color: #64748b;
}

/* Bill card actions. Sized to sit inside a row without stretching it, and
   colour-coded like the row action buttons: view blue, commit primary. */
.bm-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bm-card-actions .btn {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Balance column — the same value-over-caption pairing the list rows use. */
.rm-card-amount {
    text-align: right;
    flex-shrink: 0;
}

.rm-card-amount-value {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
    white-space: nowrap;
}

.rm-card-amount-value.is-negative {
    color: #dc2626;
}

.rm-card-amount-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: #94a3b8;
}

.rm-card-arrow {
    color: #cbd5e1;
    flex-shrink: 0;
}

/* Narrow phones: the balance column leaves too little room for a long name —
   an account number like "Meezan bank (01940101295764)" was breaking one
   character per line. Drop the balance onto its own row, indented to line up
   with the name, so the title keeps the full width of the card. */
@media (max-width: 420px) {
    .rm-card-item {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .rm-card-icon-box {
        order: 1;
    }

    .rm-card-content {
        order: 2;
        flex: 1 1 0;
    }

    .rm-card-arrow {
        order: 3;
    }

    .rm-card-amount {
        order: 4;
        flex: 1 1 100%;
        display: flex;
        align-items: baseline;
        gap: 6px;
        text-align: left;
        padding-left: 52px;
    }

    .rm-card-amount-label {
        order: -1;
    }
}

/* Scrollable results. The right padding keeps cards clear of the scrollbar
   instead of ending short of the search box above them. */
.picker-result-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}

.picker-result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.picker-result-empty i {
    font-size: 1.8rem;
    color: #cbd5e1;
}

/* Product Select Card (JS Template) */
/* Product Select Card (JS template) — same row geometry as the resource and
   bill cards, plus a selected state and a dimmed state for products already
   added to the entry. */
.pm-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
}

.pm-card-item:last-child {
    margin-bottom: 0;
}

.pm-card-item.is-selected {
    border-color: #0d6efd;
    background: #f0f6ff;
}

.pm-card-item.is-added {
    opacity: 0.5;
}

.pm-card-title {
    font-size: 0.9rem;
}

.pm-card-badge {
    font-size: 0.7rem;
}

/* Multi-select tick for pickers that add several products at once. */
.pm-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 0.75rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.pm-card-item.is-selected .pm-card-check {
    border-color: #0d6efd;
    background: #0d6efd;
}

/* Picker Search & Badges */
.selected-count-badge {
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 600;
    background: #e0e7ff !important;
    color: #4338ca !important;
}

.picker-search-group {
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #e2e8f0;
}

.picker-search-input-edit {
    box-shadow: none !important;
    font-size: 0.95rem;
}

.picker-cancel-btn {
    border-radius: 10px;
    color: #64748b;
}

.picker-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

/*--------------------------------------------------------------
# Customer Amount Add Page Styles
---------------------------------------------------------------*/

/* Form label styling */
.amount-add-page .col-form-label,
.amount-add-page .form-label {
    font-weight: 700 !important;
    color: #334155;
}

.amount-add-page label[required]::after,
.amount-add-page label.required::after,
.amount-add-page .col-form-label:has(+ .col-sm-10 [required])::after,
.amount-add-page .form-label:has(+ [required])::after {
    content: " *";
    color: #dc3545;
}

/* Select2 styling */
.amount-add-page .select2-container {
    width: 100% !important;
}

.amount-add-page .select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid #dee2e6 !important;
    padding: 5px 0px !important;
}

.amount-add-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.amount-add-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px !important;
    color: #495057 !important;
}

.amount-add-page .select2-container--default .select2-selection--single .select2-selection__clear {
    float: left !important;
    margin-right: 8px !important;
    margin-left: 10px !important;
    font-weight: bold !important;
    color: #dc3545 !important;
}

/* Select2 validation styling */
.amount-add-page .select2-container--default .select2-selection--single.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.amount-add-page .was-validated .select2-container--default .select2-selection--single:invalid,
.amount-add-page .select2-container--default .select2-selection--single.is-invalid {
    border-color: #dc3545 !important;
}

/* Product/resource list scrollbar */
.amount-add-page #productList,
.amount-add-page #resourceList {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

.amount-add-page #productList::-webkit-scrollbar,
.amount-add-page #resourceList::-webkit-scrollbar {
    width: 5px;
}

.amount-add-page #productList::-webkit-scrollbar-thumb,
.amount-add-page #resourceList::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* Picker Modal Tabs */
/* Matches the base .pm-tab/.rm-tab/.bm-tab rules above — kept only because these
   page-scoped selectors outrank them, so leaving the old capsule styling here
   would quietly undo the shared one. */
.amount-add-page .pm-tab,
.amount-add-page .rm-tab,
.amount-add-page .bm-tab {
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff;
    color: #475569;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.amount-add-page .pm-tab:hover,
.amount-add-page .rm-tab:hover,
.amount-add-page .bm-tab:hover {
    background: #f8fafc;
    border-color: #cbd5e1 !important;
    color: #1e293b;
}

.amount-add-page .pm-card,
.amount-add-page .rm-card,
.amount-add-page .bm-card {
    transition: all 0.2s;
}

/* Matches the base .pm-card/.rm-card/.bm-card hover above — kept only because
   these page-scoped selectors outrank it. No translateY: shifting a row under
   the cursor makes a long picker list jitter as you scan it. */
.amount-add-page .pm-card:hover,
.amount-add-page .rm-card:hover,
.amount-add-page .bm-card:hover {
    border-color: #bfdbfe !important;
    background: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.08);
}

.amount-add-page .pm-tab.active,
.amount-add-page .rm-tab.active,
.amount-add-page .bm-tab.active {
    background: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
}

/* Customer info card */
.amount-add-page .customer-info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border-left: 5px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.amount-add-page .customer-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amount-add-page .customer-name {
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

.amount-add-page .customer-contact {
    margin-top: 6px;
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amount-add-page .customer-balance-card {
    background: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
}

.amount-add-page .customer-balance-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.amount-add-page .customer-balance-amount {
    font-size: 1.2rem;
    font-weight: 800;
}

.amount-add-page .balance-advance {
    color: #198754;
}

.amount-add-page .balance-due {
    color: #dc3545;
}

/* Supplier info card (mirrors customer info card) */
.amount-add-page .supplier-info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border-left: 5px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.amount-add-page .supplier-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amount-add-page .supplier-name {
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

.amount-add-page .supplier-contact {
    margin-top: 6px;
    color: #6c757d;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amount-add-page .supplier-balance-card {
    background: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
}

.amount-add-page .supplier-balance-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.amount-add-page .supplier-balance-amount {
    font-size: 1.2rem;
    font-weight: 800;
}

/* Dashed hr */
.amount-add-page .hr-dashed {
    border-top: 2px dashed #adb5bd;
}

/* Submit button section */
.amount-add-page .submit-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 0 -24px -24px -24px;
}

.amount-add-page .submit-btn {
    min-width: 140px;
}

/* Modal styling */
.amount-add-page .modal-content-rounded {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.amount-add-page .modal-title-custom {
    color: #1a202c;
    font-size: 1.25rem;
}

.amount-add-page .resource-list-container {
    max-height: 400px;
    overflow-y: auto;
}

.amount-add-page .bill-list-container {
    max-height: 400px;
    overflow-y: auto;
}

/* Bill preview modal */
.amount-add-page .bill-preview-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px 16px 0 0;
}

.amount-add-page .bill-preview-title {
    color: #1a202c;
}

.amount-add-page .bill-preview-no {
    font-size: 0.85rem;
}

.amount-add-page .bill-preview-btn {
    border-radius: 10px;
}

/* Image preview */
.amount-add-page .image-preview-divider {
    border: none;
    border-top: 2px dashed #adb5bd;
    margin: 14px 0 12px;
}

.amount-add-page .image-preview-wrapper {
    position: relative;
    width: 150px;
    margin-bottom: 8px;
}

.amount-add-page .image-preview-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.amount-add-page .image-preview-img:hover {
    opacity: 0.85;
}

.amount-add-page .image-remove-btn {
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    min-height: 0;
    min-width: 0;
    line-height: 1;
    padding: 0 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    border: 2px solid white;
    cursor: pointer;
}

.amount-add-page .image-remove-btn:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* Mobile responsive table */
@media (max-width: 768px) {
    .amount-add-page .mobile-responsive-table thead {
        display: none;
    }

    .amount-add-page .mobile-responsive-table,
    .amount-add-page .mobile-responsive-table tbody,
    .amount-add-page .mobile-responsive-table tr,
    .amount-add-page .mobile-responsive-table td {
        display: block;
        width: 100%;
    }

    .amount-add-page .mobile-responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 10px;
        background: #f8f9fa;
    }

    .amount-add-page .mobile-responsive-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid #eee;
        min-height: 40px;
    }

    .amount-add-page .mobile-responsive-table td:last-child {
        border-bottom: 0;
    }

    .amount-add-page .mobile-responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

/* Picker card elements. Sized to match the .rm-card-icon-box used by the
   resource and bill pickers, so all three lists share one row rhythm.
   .rm-card-icon is deliberately NOT here: in the current resource/bill markup
   the box is .rm-card-icon-box and .rm-card-icon sits on the <i> glyph. */
.pm-card-icon,
.bill-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bill-card-icon {
    background: #f8fafc;
}

.bill-card-icon i {
    font-size: 1.2rem;
    color: #64748b;
}

.pm-card-icon i,
.bill-card-icon i {
    font-size: 1.1rem;
}

.pm-card-content,
.rm-card-content,
.bill-card-content {
    flex: 1;
    min-width: 0;
}

.pm-card-name,
.rm-card-name,
.bill-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.bill-card-date {
    font-size: 0.75rem;
    color: #64748b;
}

.pm-card-badges,
.rm-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Same chip geometry as .rm-card-badge / .resource-tag. */
.unit-badge,
.group-badge,
.stock-badge,
.balance-badge {
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.stock-available {
    background: #dcfce7;
    color: #16a34a;
}

.stock-unavailable {
    background: #fee2e2;
    color: #dc2626;
}

.date-badge {
    background: #f1f5f9;
    color: #64748b;
}

.amount-add-page .balance-badge {
    background: #f1f5f9;
    color: #64748b;
}

.amount-add-page .rm-card-chevron {
    color: #cbd5e1;
}

.amount-add-page .bill-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2.5px solid #f0f0f0;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fff;
}

.amount-add-page .bill-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Bill preview table */
.amount-add-page .bill-preview-table {
    font-size: 0.83rem;
}

/* Bill preview info cards */
.amount-add-page .bill-info-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 600;
}

.amount-add-page .bill-info-card {
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.amount-add-page .bill-notes {
    font-size: 0.85rem;
}

.amount-add-page .bill-items-title {
    font-size: 0.85rem;
}

/* ── Modal shared styles ── */
.amount-add-page .modal-content-rounded {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.amount-add-page .modal-title-custom {
    color: #1a202c;
    font-size: 1.25rem;
}

/* ── Selected count badge ── */
.amount-add-page .selected-count-badge {
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 600;
    background: #e0e7ff !important;
    color: #4338ca !important;
}

/* ── Resource / Bill list containers ── */
.amount-add-page .resource-list-container,
.amount-add-page .bill-list-container {
    max-height: 400px;
    overflow-y: auto;
}

/* ── Bill preview modal header ── */
.amount-add-page .bill-preview-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px 16px 0 0;
}

.amount-add-page .bill-preview-title {
    color: #1a202c;
}

.amount-add-page .bill-preview-no {
    font-size: 0.85rem;
}

.amount-add-page .bill-preview-btn {
    border-radius: 10px;
}

/* ── Bill card content ── */
.amount-add-page .bill-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #64748b;
}

.amount-add-page .bill-card-content {
    flex: 1;
    min-width: 0;
}

.amount-add-page .bill-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a202c;
}

.amount-add-page .bill-card-date {
    font-size: 0.75rem;
    color: #64748b;
}
/*--------------------------------------------------------------
# Bill / invoice preview modal (customer detail + invoice list)
# Opt-in via .bill-preview-modal on the modal root: the .amount-add-page
# bill-preview rules do not reach these pages.
--------------------------------------------------------------*/
.bill-preview-modal .modal-content-rounded {
  border-radius: 16px;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.bill-preview-modal .bill-preview-header {
  background: linear-gradient(135deg, #eef4ff, #e6eefc);
  border-radius: 16px 16px 0 0;
}

.bill-preview-modal .bill-preview-title {
  color: #012970;
  font-size: 1.1rem;
}

.bill-preview-modal .bill-preview-no {
  font-size: 0.8rem;
}

.bill-preview-modal .bill-preview-btn {
  border-radius: 10px;
}

/* Headline total, with the outstanding amount as a status chip so a
   settled bill reads as settled instead of as "Rs. 0 due". */
.bill-preview-modal .bill-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d6efd, #4c8dff);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.25);
}

.bill-preview-modal .bill-total-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}

.bill-preview-modal .bill-total-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.bill-preview-modal .bill-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.bill-preview-modal .bill-status-chip.is-paid {
  background: rgba(255, 255, 255, 0.9);
  color: #0f7b46;
}

/* Amount breakdown: label left / value right never wraps into a ragged
   grid the way the old fixed-width tiles did. */
.bill-preview-modal .bill-breakdown {
  margin-top: 12px;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.bill-preview-modal .bill-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  font-size: 0.85rem;
}

.bill-preview-modal .bill-breakdown-row + .bill-breakdown-row {
  border-top: 1px solid #f1f4f8;
}

.bill-preview-modal .bill-breakdown-label {
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bill-preview-modal .bill-breakdown-label i {
  color: #94a3b8;
  font-size: 0.9rem;
}

.bill-preview-modal .bill-breakdown-value {
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}

.bill-preview-modal .bill-breakdown-value.is-negative {
  color: #dc3545;
}

.bill-preview-modal .bill-breakdown-value.is-positive {
  color: #198754;
}

/* Who / when, kept small so it does not compete with the amounts. */
.bill-preview-modal .bill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.bill-preview-modal .bill-meta-item {
  flex: 1 1 140px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.bill-preview-modal .bill-meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: #94a3b8;
}

.bill-preview-modal .bill-meta-value {
  font-weight: 600;
  font-size: 0.88rem;
  color: #1e293b;
  overflow-wrap: anywhere;
}

.bill-preview-modal .bill-notes {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ffe8a3;
  background: #fffdf3;
  font-size: 0.83rem;
  color: #6b5900;
}

.bill-preview-modal .bill-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #64748b;
}

/* Items table: scrolls on its own instead of stretching the modal. */
.bill-preview-modal .bill-items-wrap {
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  overflow: hidden;
}

.bill-preview-modal .bill-items-table {
  margin: 0;
  font-size: 0.82rem;
}

.bill-preview-modal .bill-items-table thead th {
  background: #f5f8fc;
  color: #64748b;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  border-bottom: 1px solid #e6eaf0;
  white-space: nowrap;
  padding: 8px 10px;
}

.bill-preview-modal .bill-items-table tbody td {
  padding: 9px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f4f8;
  color: #334155;
}

.bill-preview-modal .bill-items-table tbody tr:last-child td {
  border-bottom: none;
}

.bill-preview-modal .bill-items-table .bill-item-index {
  color: #94a3b8;
  width: 28px;
}

.bill-preview-modal .bill-items-table .bill-item-name {
  font-weight: 600;
  color: #1e293b;
  min-width: 150px;
}

.bill-preview-modal .bill-items-table .bill-item-unit {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
}

.bill-preview-modal .bill-items-empty {
  padding: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* On narrow screens the six item columns would need a horizontal scroll that
   pushes Amount out of sight, so each row stacks into a labelled block. */
@media (max-width: 575.98px) {
  .bill-preview-modal .bill-items-table thead {
    display: none;
  }

  .bill-preview-modal .bill-items-table tbody tr {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f4f8;
  }

  .bill-preview-modal .bill-items-table tbody tr:last-child {
    border-bottom: none;
  }

  .bill-preview-modal .bill-items-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border: none;
    text-align: right;
  }

  .bill-preview-modal .bill-items-table tbody td[data-label]::before {
    content: attr(data-label);
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
  }

  .bill-preview-modal .bill-items-table tbody td.bill-item-index {
    display: none;
  }

  .bill-preview-modal .bill-items-table tbody td.bill-item-name {
    display: block;
    text-align: left;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #e6eaf0;
  }
}

/* Optional per-item columns (Pieces / CTN Qty) collapse to a dash on the
   invoice preview; in the stacked mobile layout they are just noise. */
@media (max-width: 575.98px) {
  .bill-preview-modal .bill-items-table tbody td.bill-item-blank {
    display: none;
  }
}

/*--------------------------------------------------------------
# Deleted tag
# Marks a record whose related row has been soft-deleted — e.g. an
# invoice whose customer is in the trash. The record still names them,
# with this chip saying why they no longer appear elsewhere.
--------------------------------------------------------------*/
.deleted-tag,
.resource-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

.deleted-tag {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

/* Says what kind of record a ledger entry's resource is (customer, supplier).
   Neutral slate on purpose: it classifies rather than warns, so it must not
   compete with the blue name link beside it or the red .deleted-tag. */
.resource-tag {
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #475569;
}

/*--------------------------------------------------------------
# User permissions (user info modal)
# One row per menu, listing the actions that menu grants. Sits in a
# .bill-items-wrap so it shares the items table's outlined card.
--------------------------------------------------------------*/
.user-permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
}

.user-permission-row:last-child {
  border-bottom: none;
}

.user-permission-menu {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.user-permission-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* Colour-coded by intent, matching the row action buttons: read is neutral
   blue, create green, update amber, delete red. */
.user-permission-chip {
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.user-permission-chip.is-create {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #059669;
}

.user-permission-chip.is-update {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.user-permission-chip.is-delete {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.user-permission-none {
  font-size: 0.75rem;
  color: #94a3b8;
}

.user-permission-full {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.85rem;
}

.user-permission-full i {
  font-size: 1.1rem;
  color: #2563eb;
  flex-shrink: 0;
}

/*--------------------------------------------------------------
# Picker Modal — narrow-screen pill sizing
# Kept at the end of the file on purpose: `.amount-add-page .pm-tab`
# (and siblings) set padding with the same specificity and !important,
# so this override only lands if it comes after them.
--------------------------------------------------------------*/
@media (max-width: 400px) {

  .picker-tabs .rm-tab,
  .picker-tabs .pm-tab,
  .picker-tabs .bm-tab {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
  }
}


/*--------------------------------------------------------------
# UI switch
# Same geometry as the .perm-switch toggles on the user permissions
# grid, in the app's blue rather than that screen's grant-green, and
# global so any page can use it. The native input is hidden and the
# slider is what you see, so the label stays clickable and keyboard
# focus still works.
--------------------------------------------------------------*/
.ui-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.ui-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ui-switch-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ui-switch-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.ui-switch input:checked + .ui-switch-slider {
  background: #0d6efd;
}

.ui-switch input:checked + .ui-switch-slider::before {
  transform: translateX(18px);
}

.ui-switch input:focus-visible + .ui-switch-slider {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* Row pairing a switch with its caption, e.g. "Save Email" on the login step.
   The password step uses .remember-row for the same job. */
.auth-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}

/* Deliberately unscoped: the two auth rows use different wrapper classes, and
   scoping this to one of them left the other on the page's default 16px/400
   body text — which also made it read as vertically misaligned beside the
   switch. Matches .forgot-link exactly (size, weight, colour) and inherits the
   same line-height, so the two sit on one line. */
.auth-switch-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #0d6efd;
  cursor: pointer;
  user-select: none;
}