@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: "Poppins", sans-serif;
  padding: 0px;
  margin: 0px;
  background-color: #F8FAFC;
}

/* LAYOUT */
.LoginPage {
  display: flex;
  min-height: 100vh;
}

/* LEFT */
.LoginPage .left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.LoginPage .left img {
  max-width: 100%;
}

/* RIGHT PANEL */
.LoginPage .right {
  flex: 1;
  background: #eef1f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* CARD */
.LoginPage .card {
  width: 100%;
  max-width: 380px;
}

/* LOGO */
.LoginPage .logo {
  text-align: center;
}

.LoginPage .logo img {
  width: 250px;
}

/* TITLE */
.LoginPage h2 {
  text-align: center;
  color: #292731;
  font-size: 30px;
  margin-bottom: 10px;
}

.LoginPage .subtitle {
  text-align: center;
  font-size: 14px;
  color: #292731;
  margin-bottom: 45px;
}

/* FIELD */
.LoginPage .field {
  margin-bottom: 30px;
}

.LoginPage label {
  font-size: 14px;
  color: #455360;
  margin-bottom: 6px;
  display: block;
}

/* INPUT */
.LoginPage .input-box {
  position: relative;
}

.LoginPage input {
  width: calc(100% - 25px);
  padding: 0px 12px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #CAD5E2;
  background: none;
  font-size: 13px;
  color: #7B8389;
}

/* ICON */
.LoginPage .eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ICON STYLE */
.LoginPage .eye-icon {
  width: 20px;
  height: 20px;
  stroke: #6b7280;
  fill: none;
  stroke-width: 2.5;
}

/* FORGOT */
.LoginPage .forgot {
  font-size: 12px;
  color: #3b82f6;
  margin-bottom: 38px;
  margin-top: -25px;
  display: block;
  text-decoration: none;
}

/* BUTTON */
.LoginPage .btn {
  width: 100%;
  padding: 0px 12px;
  background: #0E2E5E;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  height: 44px;
}

.LoginPage .btn:hover {
  background: #162d49;
}

/* FOOTER */
.LoginPage .footer {
  text-align: center;
  margin-top: 15px;
  font-size: 13px;
  color: #292731;
}

.LoginPage .footer a {
  color: #3b82f6;
  text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .LoginPage {
    flex-direction: column;
  }

  .LoginPage .left {
    display: none;
  }
}

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

:root {
  --sidebar: #0E2E5E;
  --active: #2c4a73;
  --bg: #f5f7fb;
  --card: #fff;
  --border: #e5e7eb;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* LAYOUT */
.dashboard {
  display: flex;
  width: 100%
}

/* SIDEBAR */
.sidebar {
  width: 240px;
  background: var(--sidebar);
  color: #fff;
  padding: 15px;
  transition: .3s;
  z-index: 10;
}

.sidebar.collapsed {
  width: 70px
}

/* MOBILE */
@media(max-width:768px) {
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
  }

  .sidebar.active {
    left: 0;
  }
}

/* OVERLAY */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 5;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* LOGO */
.logo {
  background: #fff;
  padding: 0px 10px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
  color: #000;
  width: 95%;
}

.logo img.dasktop {
  width: 100%;
}

.logo img.mobile {
  width: 30px;
  display: none;
}

.sidebar.collapsed .logo {
  padding: 5px;
}

.sidebar.collapsed .logo img.dasktop {
  display: none;
}

.sidebar.collapsed .logo img.mobile {
  display: block;
}


/* MENU */
.menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  margin: 10px 0px;
}

.menu li a svg {
  width: 24px;
  stroke: #cbd5e1;
}

.menu li a:hover,
.menu li a.active {
  background: var(--active);
  color: #fff;
}

.menu a.active svg {
  stroke: #fff;
}

.sidebar.collapsed .text {
  display: none
}

/* MAIN */
.main {
  flex: 1;
  width: 100%;
}

/* HEADER */
.header {
  height: 64px;
  background: #eef1f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
}

.leftHeadeer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* TOGGLE */
.toggle {
  width: 34px;
  height: 34px;
  background: var(--sidebar);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  left: -35px;
  position: relative;
  z-index: 99;
}

.toggle svg {
  stroke: #fff;
  width: 16px;
}

/* SEARCH FIXED */
.search {
  flex: 1;
  max-width: 500px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #CAD5E2;
  color: #7B8389;
  padding: 0px 12px 0px 35px;
  background: url(../images/search.svg) 10px center no-repeat;
  background-size: 16px;
}

/* USER */
.user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  text-align: right;
}

.user h5 {
  color: #263238;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

.user h5 span {
  display: block;
  color: #7B8389;
  font-size: 14px;
  font-weight: 400;
}

.user img {
  width: 44px;
  border-radius: 50%;
}

/* CONTENT */
.content {
  padding: 20px;
  width: 100%;
  display: inline-block;
}

/* WELCOME */
.welcome {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

h3 {
  font-size: 24px;
  color: #292731;
  font-weight: 600;
}

p {
  font-size: 14px;
  color: #292731;
}


.viewbtn {
  background: #0E2E5E;
  color: #fff;
  padding: 0px 25px;
  border-radius: 6px;
  border: none;
  height: 44px;
  font-size: 15px;
}

.viewbtn:hover {
  background: #000;
}


/* RESPONSIVE */


@media(max-width:768px) {
  .search {
    max-width: 100%
  }
}


/* GRID */
.cards_4box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* CARD */
.cards_4box .card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* TEXT FIXED */
.cards_4box .card h4 {
  font-size: 13px;
  color: #292731;
  /* 🔥 fixed darker */
  font-weight: 500;
  margin-bottom: 6px;
}

.cards_4box .card h2 {
  font-size: 22px;
  font-weight: 600;
  color: #292731;
  margin-bottom: 6px;
}

.cards_4box .card p {
  font-size: 12px;
  color: #0D5DD6;
}

/* COLOR VARIANTS */
.cards_4box .card.blue p {
  color: #0D5DD6;
}

.cards_4box .card.green {
  border: 1px solid #E5E5E5;
}

.cards_4box .card.green h4 {
  color: #292731;
}

.cards_4box .card.green h2 {
  color: #292731;
}

.cards_4box .card.green p {
  color: #00A63E;
}

.cards_4box .card.orange {
  border: 1px solid #FFD7A8;
}

.cards_4box .card.orange h4 {
  color: #D95B00;
}

.cards_4box .card.orange h2 {
  color: #7E2A0C;
}

.cards_4box .card.orange p {
  color: #F74A29;
}

.cards_4box .card.red {
  border: 1px solid #FFC9C9;
}

.cards_4box .card.red h4 {
  color: #C10007;
}

.cards_4box .card.red h2 {
  color: #82181A;
}

.cards_4box .card.red p {
  color: #E7000B;
}

/* ICON */
.cards_4box .icon {
  width: 24px;
  height: 24px;
}

/* ICON COLORS */
.cards_4box .icon.blue svg {
  fill: #0D5DD6;
}

.cards_4box .icon.green svg {
  fill: #00A63E;
}

.cards_4box .icon.orange svg {
  fill: #D95B00;
}

.cards_4box .icon.red svg {
  fill: #E7000B;
}

/* SVG STYLE */
.cards_4box .icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 2;
}

/* RESPONSIVE */
@media(max-width:1024px) {
  .cards_4box {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .cards_4box {
    grid-template-columns: 1fr;
  }
}


/* MAIN BOX */
.all_products {
  background: #fff;
  border-radius: 12px;
  padding: 0px;
  border: 1px solid #e5e7eb;
  margin: 20px 0px;
}

/* FILTER ROW */
.all_products .filter-row {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  background: #F8FAFC;
  padding: 20px;
  border-radius: 12px 12px 0px 0px;
  border-bottom: #E5E5E5 1px solid;
}

.all_products .filter-row .title {
  width: 10%;
  float: left;
}

.all_products .filter-row select,
.all_products .filter-row .search-input {
  width: 23.6%;
  float: left;
  margin-right: 20px;
}

.all_products .filter-row .button.btn {
  float: left;
  width: 20%;
}

.all_products .title {
  font-size: 14px;
  font-weight: 600;
  margin-right: 10px;
  line-height: 44px;
}

/* INPUTS */
.all_products select,
.all_products input {
  height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  background: #f9fafb;
}

/* BUTTON */
.all_products .btn {
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: #0E2E5E;
  color: #fff;
  font-size: 13px;
  width: 120px;
}

.all_products .btn:hover {
  background: #000;
}

/* SECOND ROW (RIGHT ALIGN ICONS) */
.all_products .top-actions {
  display: flex;
  justify-content: flex-end;
  margin: 10px 20px 15px;
}

/* VIEW ICONS */
.all_products .view-toggle {
  display: flex;
  gap: 8px;
  border: 1px solid #E5E5E5;
  border-radius: 13px;
}

.all_products .view-btn {
  width: auto;
  height: 34px;
  border-radius: 8px;
  padding: 0px 15px;
  border: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none !important;
}

.all_products .view-btn.active {
  background: #D9D9D9 !important;
  border-radius: 13px 0px 0px 13px;
}

.all_products .view-btn:last-child.active {

  border-radius: 0px 13px 13px 0px;
}

.all_products .view-btn svg {
  width: 18px;
  height: 18px;
}

/* PRODUCTS */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0px 20px 20px;
}

.products.list {
  grid-template-columns: 1fr;
}

/* CARD */
.products .product {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  padding: 0px;
}

/* IMAGE */

.products .product .pro-img {
  width: 100%;
  display: inline-block;
  padding: 20px 0px;
  background: #F8FAFC;
  border-radius: 12px 12px 0px 0px;
  margin: 0px;
}


.products .product img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* TEXT */
.products .pro-txt {
  padding: 12px;
}

.products .code {
  font-size: 12px;
  color: #FE7614;
  margin-bottom: 6px;
}

.products .name {
  font-size: 15px;
  font-weight: 600;
  color: #292731;
  height: 50px;
}

.products .size {
  font-size: 12px;
  color: #7B8389;
  margin: 8px 0;
}

/* PRICE + BADGE */
.products .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.products .price {
  font-weight: 700;
  color: #0E2E5E;
  font-size: 18px;
  text-decoration: none;
}

.products .badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 20px;
  text-decoration: none;
}

.products .in {
  background: #B3E4C5;
  color: #00A63E;
}

.products .low {
  background: #F5D6BF;
  color: #D95B00;
}

.products .out {
  background: #F9BFC2;
  color: #E7000B;
}

/* RESPONSIVE */
@media(max-width:1024px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .products {
    grid-template-columns: 1fr;
  }
}

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


/* WRAPPER */
.alert-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* CARD BASE */
.alert-card {
  padding: 18px 0px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
}

.alert-card h5 {
  color: #D95B00;
  padding: 0px 25px 20px;
  font-size: 18px;
  font-weight: 600;
}

.out-stock h5 {
  color: #E7000B;
}

/* LOW STOCK */
.low-stock {
  background: #FFF1E6;
  color: #ea580c;
}

/* OUT OF STOCK */
.out-stock {
  background: #FFEAEC;
  color: #dc2626;
}

/* UNDERLINE STYLE */
.alert-card span {
  text-decoration: underline;
  text-decoration-color: #2563eb;
  /* blue underline */
  text-underline-offset: 4px;
}

/* RESPONSIVE */
@media(max-width:768px) {
  .alert-row {
    grid-template-columns: 1fr;
  }
}

a.all_btn {
  background: #D95B00;
  border: #D95B00 1px solid;
  display: inline-block;
  width: 200px;
  text-align: center;
  margin: 0px auto;
  padding: 0px;
  color: #fff;
  font-size: 14px;
  line-height: 34px;
  border-radius: 12px;
  text-decoration: none;
}

.center-btn {
  text-align: center;
}

footer {
  background: #0E2E5E;
  font-size: 12px;
  color: #fff;
  text-align: center;
  padding: 30px 0px;
}

footer p {
  font-size: 12px;
  color: #fff;
  margin: 0px;
  padding: 0px;
}

select {
  background: url(../images/dropdown.png) 95% center no-repeat !important;
  background-size: 18px !important;
  appearance: none;
}

/*---------Create Draft Invoice--------------*/

.createDraftInvoice {
  max-width: 860px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
}

/* SECTION */
.createDraftInvoice .section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

/* GRID */
.createDraftInvoice .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* LABEL */
.createDraftInvoice label {
  font-size: 12px;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

/* INPUT WRAP */
.createDraftInvoice .input-wrap {
  position: relative;
}

/* INPUT */
.createDraftInvoice .input {
  width: 100%;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 38px 0 12px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

/* REMOVE DEFAULT ICON */
.createDraftInvoice input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* CUSTOM ICON */
.createDraftInvoice .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.createDraftInvoice .icon svg {
  width: 18px;
  height: 18px;
  stroke: #6b7280;
  stroke-width: 2;
  fill: none;
}

/* SPACING */
.createDraftInvoice .mt {
  margin-top: 14px;
}

/* COMPANY */
.createDraftInvoice .company {
  background: #eef5ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

.createDraftInvoice .company h3 {
  font-size: 14px;
  margin-bottom: 14px;
}

/* TEXTAREA */
.createDraftInvoice textarea {
  width: 100%;
  height: 150px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  color: #6b7280;
  resize: none;
}

/* BOTTOM */
.createDraftInvoice .bottom {
  margin-top: 14px;
  font-size: 12px;
  color: #6b7280;
}

/* BUTTON */
.createDraftInvoice .btn {
  margin-top: 16px;
  background: #1e3a5f;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
}

/* RESPONSIVE */
@media(max-width:768px) {
  .createDraftInvoice .grid {
    grid-template-columns: 1fr;
  }
}

/*-----------Inventory page------------*/

.box_filtter {
  background: #fff;
  /* 🔥 fixed */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0px;
}

/* LEFT */
.box_filtter .leftside {
  display: flex;
  gap: 12px;
}

/* DROPDOWN FIXED */
.box_filtter .select {
  min-width: 220px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0 12px;
  font-size: 13px;
  background: #f9fafb;
  color: #6b7280;
  margin-right: 10px;
}

/* RIGHT */
.box_filtter .rightside {
  display: flex;
  gap: 10px;
}

/* BUTTON */
.box_filtter .btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  display: inline-block;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-left: 10px;
}

/* GREEN */
.box_filtter .green {
  background: #16a34a;
  color: #fff;
}

/* ORANGE */
.box_filtter .orange {
  background: #f97316;
  color: #fff;
}

/* ICON */
.box_filtter .btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/* RESPONSIVE */
@media(max-width:768px) {
  .box_filtter {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* TOP BAR */
.top-bar {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.top-bar select {
  width: 70px;
  height: 40px;
  padding: 0px 18px;
  border: #CAD5E2 1px solid;
  border-radius: 8px;
  margin: 0px 8px;
}

/* REMOVE DEFAULT UI */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  display: none;
}

/* SEARCH */
.search {
  position: relative;
  width: 320px;
  max-width: 320px;
  border: #CAD5E2 1px solid;
  border-radius: 8px;
}

.search input {
  height: 34px;
  width: 260px;
  border-radius: 8px;
  border: 0px;
  padding: 0px;
  background: none;
}

.search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
}

/* TABLE */
table.dataTable {
  border-collapse: separate;
  border-spacing: 0 10px;
  width: 100%;
  text-align: left;
}

/* HEADER */
table.dataTable thead th {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  border: none;
  padding: 5px 8px;

}

/* ROW CARD */
table.dataTable tbody tr {
  background: #fff;
}

/* CELLS */
table.dataTable tbody td {
  padding: 8px;
  font-size: 12px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

table.dataTable tbody td img {
  width: 70px;
  height: 70px;
  background: #F8FAFC;
  padding: 10px;
  border-radius: 8px;
}


table.dataTable tbody td a {
  text-decoration: none;
  padding: 4px 0px 0px;
  float: left;
  margin-right: 10px;
}

table.dataTable tbody td.actions a svg {
  width: auto;
  height: 14px;
}

table.dataTable tbody td span.draft {
  background: #F3F3F3;
  color: #263238;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
}

table.dataTable tbody td span.approved {
  background: #C7E8D4;
  color: #00A63E;
}

table.dataTable tbody td span.cancelled {
  color: #6E1AC7;
  background: #E4D9F8;
}

table.dataTable tbody td span.rejected {
  background: #FFE4E5;
  color: #E7000B;
}

table.dataTable tbody td span.in_process {
  background: #CEE1FF;
  color: #0D5DD6;
}

table.dataTable tbody td span.pending {
  background: #FFEADB;
  color: #FE7614;
}

table.dataTable tbody td span.Warehouse {
  background: #C7E8D4;
  color: #00A63E;
}

table.dataTable tbody td span.closed {
  background: #FFE4E5;
  color: #E7000B;
}


table.dataTable tbody td.name,
table.dataTable tbody td.price {
  font-weight: 600;
}

td.drag {
  text-align: center;
}

td.drag svg {
  padding-top: 6px;
}

/* ROUND */
table.dataTable tbody tr td:first-child {
  border-left: 1px solid #e5e7eb;
  border-radius: 12px 0 0 12px;
}

table.dataTable tbody tr td:last-child {
  border-right: 1px solid #e5e7eb;
  border-radius: 0 12px 12px 0;
}

/* PRODUCT */
.product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product img {
  width: 40px;
}

/* ACTIONS */
.actions svg {
  width: 14px;
  cursor: pointer;
}

.edit {
  stroke: #f97316;
}

.delete {
  stroke: #ef4444;
}

.view {
  stroke: #6b7280;
}

/* PAGINATION STYLE */
.dataTables_wrapper .dataTables_info {
  float: left;
  font-size: 13px;
  color: #374151;
  margin-top: 12px;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* BUTTON */
.dataTables_wrapper .paginate_button {
  border: 1px solid #e5e7eb !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 13px;
}

/* ACTIVE */
.dataTables_wrapper .paginate_button.current {
  background: #1e3a5f !important;
  color: #fff !important;
}

/* HOVER */
.dataTables_wrapper .paginate_button:hover {
  background: #e5e7eb !important;
}

/* DISABLED */
.dataTables_wrapper .paginate_button.disabled {
  opacity: 0.5;
}



/* ROUND */
tr td:first-child {
  border-radius: 12px 0 0 12px;
}

tr td:last-child {
  border-radius: 0 12px 12px 0;
}

/* DRAG HANDLE */
.drag {
  cursor: grab;
  font-size: 18px;
  color: #9ca3af;
}

/* BUTTONS */
.actions button {
  border: none;
  background: #f3f4f6;
  padding: 6px;
  margin: 2px;
  border-radius: 6px;
  cursor: pointer;
}

.actions button:hover {
  background: #e5e7eb;
}

.dataTables_wrapper {
  width: 100%;
  display: inline-block;
  overflow: auto;
}

.dataTables_wrapper {
  width: 100%;
  display: inline-block;
  overflow: auto;
}


/* OPEN BUTTON */
.open-btn {
  padding: 10px 16px;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* OVERLAY */
.overlay_popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
}

/* MODAL */
.overlay_popup .modal {
  width: 520px;
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* TITLE */
.overlay_popup .modal h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 22px;
}

/* CLOSE */
.overlay_popup .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 32px;
  color: #374151;
  cursor: pointer;
}

/* LABEL */
.overlay_popup label {
  font-size: 14px;
  font-weight: 500;
  color: #455360;
  margin-bottom: 8px;
  display: block;
}

/* FILE BOX */
.overlay_popup .file-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  height: 48px;
  padding: 0 14px;
}

/* HIDE INPUT */
.overlay_popup .file-box input {
  display: none;
}

/* BUTTON */
.overlay_popup .file-btn {
  background: #e5e7eb;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #111827;
  cursor: pointer;
  margin: 0px;
}

/* FILE TEXT */
.overlay_popup .file-text {
  font-size: 13px;
  color: #6b7280;
}

/* LINKS */
.overlay_popup .links {
  margin-top: 24px;
  display: flex;
  gap: 22px;
}

.overlay_popup .links a {
  font-size: 14px;
  color: #0E2E5E;
  text-decoration: underline;
  font-weight: 500;
}

/* DIVIDER */
.overlay_popup .divider {
  margin: 22px 0;
  border-top: 1px solid #e5e7eb;
}

/* BUTTON GROUP */
.overlay_popup .actions {
  display: flex;
  gap: 18px;
}

/* BUTTON */
.overlay_popup .btn {
  flex: 1;
  height: 46px;
  border-radius: 10px;
  border: none;
  font-size: 14dpx;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
}

.overlay_popup .btn:hover {
  background: #000;
}

/* IMPORT */
.overlay_popup .import {
  background: #16a34a;
  color: #fff;
}

.overlay_popup .import svg {
  width: 15px;
  height: 15px;
  display: inline-block;
}

/* DISCARD */
.overlay_popup .discard {
  background: #ea580c;
  color: #fff;
}

/* RESPONSIVE */
@media(max-width:600px) {
  .overlay_popup .modal {
    width: 90%;
    padding: 22px;
  }
}

/*---------Create inventory----------*/


/* CONTAINER */
.create_inventory {}

/* UPLOAD */
.create_inventory .upload-box {
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  padding: 0px;
  display: inline-block;
  float: left;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  background: #f9fafb;
  cursor: pointer;
  width: 44px;
  height: 44px;
  line-height: 54px;
  text-align: center;
  margin-right: 20px;
}

.create_inventory .upload-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: none;
  display: inline-block;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  font-weight: bold;
}

/* TITLE */
.create_inventory .section-title {
  font-size: 16px;
  color: #263238;
  font-weight: 600;
  margin-bottom: 12px;
}

/* GRID */
.create_inventory .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.create_inventory .full {
  grid-column: 1/3;
}

.create_inventory .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.create_inventory label {
  font-size: 12px;
  color: #374151;
}

/* INPUT */
.create_inventory input,
.create_inventory select,
.create_inventory textarea {
  width: 100%;
  height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding-left: 10px;
  font-size: 13px;
  background-position: 98% center !important;
  background: none;
}

.create_inventory textarea {
  height: 150px;
  padding: 10px;
}

/* ROW */
.create_inventory .row {
  display: flex;
  gap: 8px;
}

.create_inventory .row select {
  flex: 1;
}

.create_inventory .add-btn {
  background: #1e3a5f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  width: 180px;
  font-weight: 600;
  height: 44px;
}

.create_inventory .add-btn:hover {
  background: #000;
}

/* BOXES */
.create_inventory .blue {
  background: #EFF6FF;
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
  border: #BEDBFF 1px solid;
}

.create_inventory .blue label {
  color: #1C398E;
}

.create_inventory .blue input,
.create_inventory .blue select,
.create_inventory .blue textarea {
  width: 100%;
  height: 44px;
  border: 1px solid #8EC5FF;
  border-radius: 8px;
  padding-left: 10px;
  font-size: 13px;
  background-position: 98% center !important;
  background: none;
}

.create_inventory .pricing {
  background: #F8FAFC;
  padding: 20px;
  border-radius: 12px;
  margin: 15px 0px 10px;
}

.create_inventory .green {
  background: #C7E8D4;
  border: 1px solid #00A63E;
  border-radius: 10px;
  padding: 14px;
  margin-top: 16px;
}

.create_inventory .green .section-title {
  color: #00A63E;
}

.create_inventory .green label {
  color: #007D2F;
}

.create_inventory .green input,
.create_inventory .green select,
.create_inventory .green textarea {
  border: 1px solid #73E6A0;
  background-color: #fff !important;
}

/* CUSTOM CHECKBOX */
.create_inventory .check-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.create_inventory .custom-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  color: #374151;
  line-height: 24px;
}

.create_inventory .custom-check input {
  display: none;
}

.create_inventory .checkmark {
  width: 24px;
  height: 24px;
  border: 1.5px solid #CAD5E2;
  border-radius: 4px;
  background: #fff;
  position: relative;
  float: left;
  margin-right: 10px;
}

.create_inventory .custom-check input:checked+.checkmark {
  background: #1e3a5f;
  border-color: #1e3a5f;
}

.create_inventory .custom-check input:checked+.checkmark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* FOOTER */
.create_inventory .footer {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.create_inventory .save {
  background: #1e3a5f;
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
}

.create_inventory .discard {
  background: #fff;
  border: #7B8389 1px solid;
  color: #7B8389;
  padding: 15px 30px;
  border-radius: 8px;
}

/* RESPONSIVE */
@media(max-width:600px) {
  .create_inventory .grid {
    grid-template-columns: 1fr;
  }

  .create_inventory .full {
    grid-column: auto;
  }
}

.classification {
  background: #F8FAFC;
  padding: 20px;
  border-radius: 12px;
  margin: 15px 0px 10px;
}

.create_inventory .upload_txt {
  line-height: 40px;
}

.create_inventory .sku_div {
  width: 100%;
  border-top: #CAD5E2 1px solid;
  margin-top: 30px;
  padding: 20px 0px;

}

.heading {
  padding: 20px 0px 15px;
}

select.statuses_select {
  width: 160px;
}

a.download-btn {
  background: #00A63E;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  padding: 0px 20px;
  border-radius: 10px;
  text-decoration: none;
}

a.download-btn svg {
  width: 18px;
  float: left;
  margin-right: 5px;
  margin-top: 7px;
}


/* CUSTOM CHECKBOX */
.custom-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-check input {
  display: none;
}

.checkmark {
  width: 24px;
  height: 24px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.custom-check input:checked+.checkmark {
  background: #1e3a5f;
  border-color: #1e3a5f;
}

.custom-check input:checked+.checkmark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ROW SELECT EFFECT */
tr.selected {
  background: #eef5ff;
}

/*----------invoice_prev--------------*/


/* LAYOUT */
.invoice_prev {
  display: flex;
  gap: 14px;
  max-width: 1150px;
  margin: 0px 0px 20px;
}

/* LEFT */

/* MAIN CARD */
.invoice_prev .invoice {
  max-width: 1000px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #dbe1ea;
  overflow: hidden;
  flex: 1;
}

/* HEADER */
.header_prev {
  display: flex;
  justify-content: space-between;
  padding: 18px;
}

.logo_prev {
  font-size: 18px;
  font-weight: 600;
  color: #1e3a5f;
}

.logo_prev img {
  width: 160px;
  margin-top: 7px;
}

.invoice_prev .address {
  text-align: right;
  font-size: 12px;
  color: #263238;
  font-weight: 500;
  line-height: 1.5;
}

/* BAR */
.invoice_prev .bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: #cfd8e3;
  margin: 8px 0px;
}

.invoice_prev .bar {
  flex: 1;
  background: #cfd8e3;
  padding: 0px 10px;
  font-size: 12px;
  font-weight: 600;
}

.invoice_prev .title {
  font-size: 28px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 0px;
  background: #fff;
  padding: 0px 10px;
  line-height: 34px;
}

/* INFO */
.invoice_prev .info {
  display: flex;
  justify-content: space-between;
  padding: 18px;
  font-size: 13px;
  color: #7B8389;
}

.invoice_prev .info strong {
  display: block;
  margin-top: 6px;
  color: #263238;
}

.info_right {
  text-align: right;
}

/* BADGE */
.invoice_prev .badge {
  display: inline-block;
  background: #ede9fe;
  color: #7c3aed;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  margin-bottom: 10px;
}

.invoice_prev .badge.draft {
  color: ;
}

/* TABLE */
.invoice_prev .table {
  padding: 0 18px;
}

.invoice_prev table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.invoice_prev th {
  font-size: 12px;
  text-align: left;
  padding: 10px 6px;
  border-top: 2px solid #1e3a5f;
  border-bottom: 2px solid #1e3a5f;
  color: #0E2E5E;
}

.invoice_prev td {
  font-size: 13px;
  padding: 20px 6px;
  border-bottom: 1px solid #e5e7eb;
  color: #263238;
}

/* TOTAL */
.invoice_prev .total-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px;
}

.invoice_prev .total-box {
  width: 300px;
  font-size: 13px;
}

.invoice_prev .row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
}

.invoice_prev .row:last-child {
  border: none;
}

.invoice_prev .total {
  font-weight: 700;
  font-size: 14px;
}

.invoice_prev .balance {
  margin-top: 10px;
  background: #1e3a5f;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

.invoice_prev .balance .bigsize {
  font-size: 15px;
  font-weight: 700;
}

/* SECTIONS */
.invoice_prev .section {
  border-top: 1px solid #e5e7eb;
  padding: 14px 18px;
  font-size: 13px;
  color: #7B8389;
}

.invoice_prev .section strong {
  color: #263238;
}

/* PAYMENT */
.invoice_prev .payment {
  display: flex;
  justify-content: space-between;
}

.invoice_prev .payment-left {
  font-size: 13px;
}

/* THANK YOU */
.invoice_prev .thank {
  font-size: 28px;
  color: #e5e7eb;
  font-weight: 700;
  line-height: 130px;
}

/* NOTE */
.invoice_prev .note {
  border-top: 1px solid #e5e7eb;
  padding: 14px 18px;
  font-size: 12px;
  color: #5E6569;
  text-align: left;
}

.invoice_prev .note strong {
  display: block;
}

/* RESPONSIVE */
@media(max-width:425px) {
  .invoice_prev .info {
    flex-direction: column;
    gap: 12px;
  }



  .invoice_prev .title {
    font-size: 24px;
  }

  .header_prev {

    flex-direction: column;
  }

  .invoice_prev .address {
    text-align: left;
    font-size: 12px;
    color: #263238;
    font-weight: 500;
    line-height: 1.5;
  }

  .info_right {
    text-align: left;
  }
}

/* RIGHT */
.invoice_sidebar {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* RESPONSIVE */
@media(max-width:900px) {
  .invoice_prev {
    flex-direction: column;
  }
}


/* CARD */
.invoice_sidebar .card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 6px 0px 16px;
}

/* TITLE */
.invoice_sidebar .title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0px;
  padding: 0px 16px;
  margin-bottom: 12px;
}

/* INPUT */
.invoice_sidebar .select,
.invoice_sidebar .textarea {
  width: calc(100% - 32px);
  border: 1px solid #CAD5E2;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: #374151;
  padding: 10px 12px;
  outline: none;
  margin: 0px 16px;
}

/* SELECT */
.invoice_sidebar .select {
  height: 40px;
  margin-bottom: 10px;
}

/* TEXTAREA */
.invoice_sidebar .textarea {
  height: 90px;
  resize: none;
  margin-bottom: 12px;
}

/* BUTTON */
.invoice_sidebar .btn {
  width: calc(100% - 32px);
  height: 42px;
  background: #f97316;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 10px 16px;
}

/* RESPONSIVE */
@media(max-width:480px) {
  .invoice_sidebar .card {
    width: 100%;
  }
}


/* COLORS */
.invoice_sidebar .green {
  background: #16a34a;
}

.invoice_sidebar .green:hover {
  background: #15803d;
}

.invoice_sidebar .blue {
  background: #1e3a5f;
}

.invoice_sidebar .blue:hover {
  background: #1b3352;
}

/* FOOTER TEXT */
.invoice_sidebar .note {
  text-align: center;
  font-size: 12px;
  color: #5E6569;
  border: 0px;
  padding: 10px 0px;
}

/* TABLE HEADER */
.invoice_sidebar .table-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #f9fafb;
  border-bottom: 1px solid #0E2E5E;
  border-top: 1px solid #0E2E5E;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.table-head div {
  padding: 10px;
  border-right: 1px solid #e5e7eb;
}

.table-head div:last-child {
  border-right: none;
}

/* ROW */
.row_status {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: #374151;
}

.row_status div {
  padding: 10px;
}

/* BADGES */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

/* CANCELLED */
.cancelled {
  background: #ede9fe;
  color: #7c3aed;
}

/* DRAFT */
.draft {
  background: #e5e7eb;
  color: #374151;
}


/*---------popup------*/



/* OVERLAY */
.overlayP {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

.overlayP.active {
  opacity: 1;
  visibility: visible;
}

/* DRAWER */
.drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100%;
  background: #fff;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.15);
  transition: .3s;
  display: flex;
  flex-direction: column;
}

.drawer.active {
  right: 0;
}

/* HEADER */
.top_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.top_bar .title {
  font-size: 21px;
  font-weight: 500;
}

.close {
  cursor: pointer;
  font-size: 21px;
}

/* BODY */
.popup_area  {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

/* LABEL */
label {
  font-size: 12px;
  color: #314158;
  margin-bottom: 4px;
  display: block;
}

/* INPUT */
input,
textarea {
  width: 100%;
  border: 1px solid #CAD5E2;
  border-radius: 8px;
  padding: 0px 10px;
  height: 44px;
  font-size: 13px;
  margin-bottom: 12px;
  background: #fff;
  color: #7B8389  ;
}

textarea {
  height: 210px;
  resize: none;
}

/* FOOTER */
.footer {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}

/* BUTTON */
.btn {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
}

/* PRIMARY */
.primary {
  background: #1e3a5f;
  color: #fff;
}

/* CANCEL */
.cancel {
  background: #f3f4f6;
  color: #374151;
}

/* RESPONSIVE */
@media(max-width:480px) {
  .drawer {
    width: 100%;
  }
}

/*-----------------CreateCreditNote------------------*/


.cardbox{
    max-width:880px;
    margin:auto;
    background:#f7f9fc;
    border:1px solid #e4e7ec;
    border-radius:12px;
    padding:22px;
}

.header{
    font-size:15px;
    font-weight:600;
    margin-bottom:22px;
}

.group{
    margin-bottom:20px;
}

label{
    font-size:12px;
    color:#374151;
    margin-bottom:6px;
    display:block;
}

.input-wrap{
    position:relative;
}

input{
    width:100%;
    height:42px;
    border:1px solid #d0d5dd;
    border-radius:10px;
    padding:0 40px 0 12px;
    font-size:13px;
    background:#fff;
}

/* ICON */
.icon{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    pointer-events:none;
}

/* TEXTAREA */
textarea{
    width:100%;
    height:130px;
    border:1px solid #d0d5dd;
    border-radius:10px;
    padding:12px;
    font-size:13px;
}

/* FLATPICKR CUSTOM */
.flatpickr-calendar{
    border-radius:10px;
    border:1px solid #e5e7eb;
    box-shadow:0 8px 20px rgba(0,0,0,0.1);
}


/* CARD */
.card{
    max-width:900px;
    margin:auto;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:18px;
}

/* HEADER TEXT */
.title{
    font-size:13px;
    color:#374151;
    margin-bottom:10px;
}

/* TABLE */
table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

/* TABLE HEADER */
thead{
    background:#1e3a5f;
    color:#fff;
}

th{
    padding:12px;
    font-size:13px;
    text-align:left;
}

/* ROW */
td{
    padding:14px 12px;
    border-bottom:1px solid #e5e7eb;
    font-size:13px;
    color:#374151;
    vertical-align:middle;
}

/* CHECKBOX */
input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:#16a34a;
}

/* INPUT */
.qty{
    width:60px;
    height:34px;
    border:1px solid #d1d5db;
    border-radius:6px;
    text-align:center;
    font-size:13px;
}

/* BUTTON AREA */
.actions{
    display:flex;
    gap:12px;
    margin-top:18px;
}

/* BUTTON */
.btn{
    height:40px;
    padding:0 20px;
    border-radius:8px;
    font-size:14px;
    cursor:pointer;
    border:none;
}

/* PRIMARY */
.primary{
    background:#1e3a5f;
    color:#fff;
}

/* CANCEL */
.cancel{
    background:#fff;
    border:1px solid #d1d5db;
    color:#374151;
}

/* RESPONSIVE */
@media(max-width:768px){
    table{
        font-size:12px;
    }
    .qty{
        width:50px;
    }
}