:root {
  /* Invoice theme (orange) */
  --invoice-color-main: #f97316;
  --invoice-color-light: #fff7ed;
  --invoice-color-hover: #ea580c;

  /* Quote theme (blue) */
  --quote-color-main: #0c78ac;
  --quote-color-light: #eff6ff;
  --quote-color-hover: #1e40af;

  /* Bill theme (green) */
  --bill-color-main: #16a34a;
  --bill-color-light: #f0fdf4;
  --bill-color-hover: #15803d;

  --main-blue: #007bff; 
  --steel-blue: #b0c4de;

  --main-green: #28a745; /* vivid emerald green, pairs well with main blue */ 
  --teal-green: #20c997; /* lighter, teal‑ish green */ 
  --soft-green: #2ecc71; /* jade green, modern UI feel */
  --ve-orange: #ff6633;
  --ve-orange: #ff6633;
   --ve-orange-2: #e65a2d;;
  --ve-gold: #d4a017;

  --main-white: #fff;
  --main-white-1: #f3f3f4;
  --main-white-2: #ebebed;
  --main-white-3: #d7d7d9;
  --main-white-4: #e8e8e9;
  --main-white-5: #f3f3f7;
 --nav-bar-height: 4rem;
  --nav-bar-height-sm: 3rem;
 
  --main-grey-1: #333333;   /* darkest */
  --main-grey-2: #4b4b57;   /* slightly lighter */
  --main-grey-3: #6b6b75;   /* mid grey */
  --main-grey-4: #8c8c91;   /* lighter */
  --main-grey-5: #b0b0b5;   /* lightest */

    --font-weight: 400;
    --font-size-1: 14px;
    --font-size-2: 13px;
    --font-size-3: 15px;

  --input-border-color: #ced4da;
  --input-focus-border-color: #999fa5;
  --inv-input-b-radius: 0.25rem;
  --input-height: 2.25rem;
  --input-height-sm:  2.0rem;
  --primary-blue:  #007bff;
  --zf-grey-1: #fbfafa;
  --zf-grey-2: #f7f7f7;
  --zf-grey-3: #f3f4f8;
  --zf-grey-4: #fafafa;
  --sidebar-font-color: #f0f0f0;
  --log-container-bg: #21263c;
  /* Text colors */
  --mpesa-green: #35A839;


 
  /* Primary error red */
  --text-error: #E35256;

  /* Softer muted variants */
  --text-error-soft: #EC9A9D;   /* medium muted red */
  --text-error-lighter: #F5B5B7; /* lighter red */
  --text-error-faint: #FADCDC;   /* very pale red */
 
  --text-dark: #212529;      /* main body text (almost black) */
  --text-normal: #343a40;    /* default grayish body */
  --text-muted: #6c757d;     /* muted/secondary text */
  --text-light: #adb5bd;     /* very light gray text */
  --primary: #0d6efd;  /* bootstrap primary blue, change as needed */
  --primary-1: #2676a5;      
  --primary-hover: #2676a5;

}

@font-face {
  font-family: "Friendly Font";
  src: url("../fonts/Friendly/FriendlyFont.eot") format("embedded-opentype"), 
       url("../fonts/Friendly/FriendlyFont.woff") format("woff"), 
       url("../fonts/Friendly/FriendlyFont.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}


/* === Global Page Loader Bar === */
#page-loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #007bff, #00bfff);
  z-index: 3000;
  opacity: 1;
  transition: width 0.4s ease, opacity 0.4s ease;
}

#page-loader-bar.hide {
  opacity: 0;
  pointer-events: none;
}

.main-panel {
      background: var(--main-white-1);
}

/*main panel bg classes*/
.main-panel.invoicely-black{
    background-color: transparent !important;
}
body {

    background: #363B4D;
    background-size: cover;
}
body.body_doc_view.headless{
    background-color: var(--main-white-1);
}

body.headless .site-logo {
  max-width: 180px;   /* set desired width */
}

body.headless .site-logo svg {
  width: 100%;
  height: auto;   /* keeps aspect ratio */
}

.form-group.position-relative {
  position: relative;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 38px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-btn i {
  font-size: 18px;
}

.text-mpesa{
    color: var(--mpesa-green);
}


.base-page.checkout .board {
  border: 1px solid var(--main-white-3);
  border-radius: 6px;
  background: var(--main-white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.base-page.checkout .board .box_header {
  border-bottom: 1px solid var(--main-white-3);
  padding: .75rem 1rem;
  background: var(--main-white-5);
}

.base-page.checkout .board-body {
  padding: 1rem;
}

.base-page.checkout .settings-section label.ninety {
  display: inline-block;
  width: 90px;
  font-weight: 600;
  color: var(--main-grey-2);
}

.base-page.checkout .features {
  list-style: none;
  padding-left: 0;
  margin: .5rem 0;
}
.base-page.checkout .features li {
  padding: .25rem 0;
  color: var(--main-grey-3);
}

.base-page.checkout .duration-options select {
  width: 100%;
  padding: .5rem;
  border-radius: 4px;
  border: 1px solid var(--input-border-color);
}


.base-page.checkout .coupon-field {
  display: none; /* hidden initially */
  transition: all 0.3s ease;
}

.base-page.checkout .coupon-field.active {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.base-page.checkout .coupon-field input {
  flex: 1;
}

.base-page.checkout .coupon-toggle {
  color: var(--primary);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: underline;
}

.base-page.checkout .coupon-toggle:hover {
  color: var(--primary-dark);
}


.base-page.checkout .custom-radio .form-check-input {
  accent-color: var(--primary);
}
.base-page.checkout .custom-radio {
  padding: .25rem 0;
}

.base-page.checkout .total-price {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
}

.base-page.checkout .pay-action button {
  font-size: 1rem;
  padding: .75rem;
}


.base-page.checkout  .total-price-cont{
    background: #fafafa;
    border: 1px solid var(--input-border-color);
    /* border-radius: 6px; */
    padding: .75rem 1rem;
}

.base-page.checkout  .duration-dropdown {
  position: relative;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background: var(--main-white);
  cursor: pointer;
}

.base-page.checkout .duration-dropdown .selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem .75rem;
  font-weight: 500;
  color: var(--main-dark-1);
}

.base-page.checkout .duration-dropdown .selected .arrow {
  font-size: 1.2rem;
  color: var(--main-grey-3);
  transition: transform 0.2s ease;
}

.base-page.checkout .duration-dropdown.open .selected .arrow {
  transform: rotate(180deg); /* caret flips up */
}

.base-page.checkout .duration-dropdown .options {
  list-style: none;
  margin: .25rem 0 0 0; /* margin-top like Bootstrap dropdown */
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background: var(--main-white);
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 10;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* Bootstrap-like shadow */
}

.base-page.checkout .duration-dropdown.open .options {
  display: block;
}

.base-page.checkout .duration-dropdown .options li {
  display: flex;
  justify-content: space-between;
  padding: .5rem .75rem;
  transition: background 0.2s ease;
}

.base-page.checkout .duration-dropdown .options li:hover {
  background: var(--main-white-5);
}

.base-page.checkout .duration-dropdown .options li.active {
  background: var(--primary-light, #e6f0fb);
  font-weight: 600;
}

.base-page.checkout .duration-dropdown .left {
  font-weight: 600;
  color: var(--main-dark-1);
}

.base-page.checkout .duration-dropdown .right {
  color: var(--main-grey-3);
  font-size: .9rem;
}

.base-page.checkout .payment-option {
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  padding: .5rem .75rem;
  background: var(--main-white);
}

.base-page.checkout .payment-option:hover {
  background: var(--main-white-5);
}

.base-page.checkout .payment-logo {
  height: 24px;
  width: auto;
}

.base-page.checkout .form-check-input {
  margin-right: .5rem;
}

.base-page.checkout .input-helper {
  margin-left: .5rem;
  color: var(--main-grey-3);
}
 
.base-page.checkout .payment_box {
  display: none; /* hidden by default */
  position: relative;
  background: #fafafa; /* outer background */
  border-radius: 6px;
  margin-top: 1rem;
  padding: 1rem;
}

/* Arrow triangle */
.base-page.checkout .payment_box::before {
  content: "";
  display: block;
  position: absolute;
  top: -1.85em;
  left: 2em;
  border: 1em solid  #f8f6fa;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}

/* Inner white container */
.base-page.checkout .payment_box_inner {
  background: #fff;
  border-radius: 4px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.base-page.checkout .payment-logo-lg {
  height: 40px;
  width: auto;
}

.base-page.checkout .mpesa-checkout-header h3 {
  font-size: 1.25rem;
  margin: 0;
}

.base-page.checkout .mpesa-checkout-field input {
  padding: .6rem;
  font-size: 1rem;
}


.base-page.checkout .order-details {
  background: #fafafa;
  border: 1px solid var(--input-border-color);
 /* border-radius: 6px;*/
  padding: .75rem 1rem;
}

.base-page.checkout .order-header {
  border-bottom: 1px solid var(--input-border-color);
  padding-bottom: .4rem;
}
.base-page.checkout .plan-title {
  font-weight: 600;
  color: #2A6FDB; /* SaaS blue accent */
}

.base-page.checkout .plan-label {
  font-weight: 600;
  color: var(--main-dark-1);
  margin-right: .25rem;
}

.base-page.checkout .plan-price {
  font-size: .9rem;
  color: var(--main-grey-3);
}

/* Features list */
.base-page.checkout .order-features {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .25rem .5rem;
}

.base-page.checkout .order-features li {
  font-size: .85rem;
  color: var(--main-dark-2);
  display: flex;
  align-items: center;
  line-height: 1.4;
}

/* Use mdi icons as bullets */
.base-page.checkout .order-features li::before {
  font-family: "Material Design Icons";
  font-size: 1rem;
  margin-right: .4rem;
  color: var(--primary-color, #007bff);
  display: inline-block;
}

/* Specific icons */
.base-page.checkout .order-features li.mdi-file-document-outline::before { content: "\F0219"; }
.base-page.checkout .order-features li.mdi-account-multiple-outline::before { content: "\F000C"; }
.base-page.checkout .order-features li.mdi-package-variant::before { content: "\F03D3"; }
.base-page.checkout .order-features li.mdi-star-outline::before { content: "\F04D2"; }
.base-page.checkout .order-features li.mdi-headset::before { content: "\F0255"; }


.checkout .form-check .form-check-label input[type="radio"] + .input-helper:before {
    position: absolute;
    top: 5px;
}

.checkout .form-check .form-check-label input[type="radio"] + .input-helper:after{
    top: 11px;
}


.checkout .total-price-cont {
  border: 1px solid var(--input-border-color);
  border-radius: 6px;
  padding: 1rem;
  background: #f8f9fa; /* light background */
  font-size: 0.95rem;
}

.base-page.checkout .total-price-cont .label {
  font-weight: 500;
  color: var(--main-dark-2);
}

.checkout .total-price-cont .amount {
  font-weight: 600;
  color: var(--main-dark-1);
}

.checkout .total-price-cont #adjustments {
  margin: 0.25rem 0;
}

.checkout .total-price-cont #adjustments .discount-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #4CAF50; /* green for discount */
  font-weight: 500;
}

.checkout .total-price-cont .total-line {
  border-top: 1px solid var(--input-border-color);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.checkout .total-price-cont .total {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2A6FDB; /* SaaS blue accent */
}



.checkout #durationDesc {
  font-size: 0.78rem;
  color: var(--main-grey-3);
}

.checkout #durationDesc .text-success {
  color: #4CAF50; /* SaaS green accent */
  font-weight: 500;
}

/* Scope all signup styles to .auth-page */
.auth-page {
  color: #fff; /* default text color outside card */
  margin-bottom: 3rem;
}

/* Header section */
.auth-page .auth-header {
  text-align: center;
  margin-bottom: 2rem;
}
.auth-page .auth-header .site-logo {
    margin: 2.55rem auto;
    color: #fff;
}

/* Header text defaults */
.auth-page .auth-header .signup-title {
  color: #fff;
  font-size: 2rem; /* default size */
  font-weight: 600;
}

.auth-page .auth-header .signup-subtitle {
  color: #fff;
  font-size: 1rem;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .auth-page .auth-header .auth-title {
    font-size: 1.2rem; /* smaller on mobile */
    font-weight: 500;
  }

  .auth-page .auth-header .site-logo {
    margin: 2.5rem auto;
    }

  .auth-page .auth-header .auth-subtitle {
    display: none; /* hide paragraph on mobile */
  }
}

.auth-page #step_container{
    /*background-color: rgb(243,243,244);*/ /* light background */
    min-height: 300px;
   
}

/* Signup card */
.auth-page .auth-card {
  /*max-width: 500px;*/
  width: 100%;
  margin: 3rem auto;
  border-radius:0.375rem;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
  background-color: rgb(243,243,244); /* light background */
  color: #212529; /* dark text inside card */
}

.auth-page .auth-card .form-label {
  color: #212529; /* dark labels */
  font-weight: 600;
}
.auth-page .auth-card input.invoicely-input,
.auth-page .auth-card input.form-control {
  background: #fff;
  color: #212529;
  border: 1px solid #ced4da;
}
.auth-page .auth-card input::placeholder {
  color: #6c757d;
}


/* Signup flow base */
.auth-page .signup-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 4rem auto 3rem auto;
}

.auth-page .flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 36px;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.25rem;
  border: 2px solid transparent;
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease-in-out;
}

.auth-page .flow-step.active {
  border: 2px solid #fff;
  color: #fff;
}

.auth-page .flow-divider {
  flex: 0 0 auto;
  width: 60px;
  height: 2px;
  background: rgba(255,255,255,0.4);
}
.auth-page .flow-step i {
    margin-right: .3rem;
  }

.auth-page .else-code .btn-outline-secondary {
  display: inline-flex;          /* align icon + text horizontally */
  align-items: center;           /* vertical centering */
  gap: 0.4rem;                   /* space between icon and text */
  color: #fff;                   /* black text */
  background-color: transparent; /* outline style */
  border: 2px solid #fff;        /* black border */
  padding: 0.5rem 1rem;          /* breathing room */
}

/* Hover state */
.auth-page .else-code .btn-outline-secondary:hover {
  color: #fff;                   /* switch to white text */
  border-color: var(--main-white-1);            /* keep border consistent */
}


.auth-page .else-code .btn-secondary {
  display: inline-flex;          /* align icon + text horizontally */
  align-items: center;           /* vertical centering */
  gap: 0.4rem;                   /* space between icon and text */
  color: #fff;
  background-color: #000;        /* solid black background */
  border-color: #000;
  padding: 0.5rem 1rem;          /* add some breathing room */
}

/* Hover state */
.auth-page .else-code .btn-secondary:hover {
  color: #fff;
  background-color: #333;        /* lighter black/gray on hover */
  border-color: #333;
}


/* Small screen adjustments */
@media (max-width: 767.98px) {
  .auth-page .signup-flow {
    margin: 2rem auto 1.5rem auto; /* reduce margins */
    gap: 0.5rem;
  }

  .auth-page .flow-step {
    min-width: 80px;       /* narrower steps */
    font-size: 0.75rem;    /* smaller text */
    height: 30px;
  }

  .auth-page .flow-step i {
    display: none;         /* hide icons */
  }

  .auth-page .flow-divider {
    width: 30px;           /* shorter divider */
  }

  /* Signup card dissolves */
  .auth-page .auth-card {
    background: transparent;
    box-shadow: none;
    border: none;
    color: #fff;           /* switch text to white */
    margin: 2rem auto;
  }

  .auth-page .auth-card .form-label {
    color: #fff;
  }

  .auth-page .auth-card input.invoicely-input,
  .auth-page .auth-card .invoicely-select,
  .auth-page .signupauth-card input.form-control {
    background: rgba(255,255,255,0.1); /* subtle transparent bg */
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
  }

  .auth-page .auth-card input::placeholder {
    color: rgba(255,255,255,0.6);
  }
}



/* Footer text */
.auth-page .css-cg0281 {
  font-size: 1.25rem;
  font-weight: 300;
  font-family: "Friendly Font";
  color: #fff;
  text-align: center;
}



.base-page.dashboard{
    padding-bottom: 100px;
}

.base-page.dashboard .board ul.linked_list{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.base-page.dashboard .board ul.linked_list li {
  padding: 10px 20px;
  border-top: 1px solid var(--main-white-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* truncate anchor text too */
.base-page.dashboard .board ul.linked_list a {
  display: block;
  color: var(--text-normal);
  text-decoration: none;
}

.base-page.dashboard .board ul.linked_list a:hover {
  background: var(--main-white-1);
}
 
.dashboard .linked_list li:last-child {
  border-bottom: none;      /* clean end */
}
.dashboard .linked_list .contact-name {
  font-weight: 600;
  margin-right: 6px;
}

.dashboard .linked_list .contact-type {
  font-size: 0.85rem;
  color: #6b7280;           /* muted gray */
  margin-left: 4px;
}

.dashboard .linked_list .text-muted {
  margin-left: auto;        /* push email to the right */
  font-size: 0.85rem;
  color: #9ca3af;           /* lighter gray */
}
.base-page.dashboard .box_header{
    font-size: var(--font-size-1);
}
.base-page.dashboard .box_header .htitle{
   font-size: 0.95rem;
}

.base-page.dashboard .box_header span.right{
   font-size: 0.85rem;
}
/* Date styling */
.base-page.dashboard .board .doc-date {
  color: var(--text-muted);
  font-weight: var(--font-weight);
  margin-right: 0.25rem;
}

/* Document type colors */
.base-page.dashboard .board .linked_list .doc-type{
    font-weight: 600;
}
.base-page.dashboard .board .doc-type-invoice {
  color: var(--invoice-color-main);
}
.base-page.dashboard .board .doc-type-quote {
  color: var(--quote-color-main);
}
.base-page.dashboard .board .doc-type-bill {
  color: var(--bill-color-main);
}
.base-page.dashboard .board .doc-type-receipt {
  color: var(--main-green);
}

/* Contact name muted */
.base-page.dashboard .board .doc-contact {
  margin-left: 0.25rem;
}

.base-page.dashboard .board .box_header .more-link {
    color: var(--main-blue);
    text-decoration: none;
}
.base-page.dashboard .board .box_header .more-link:hover{
    text-decoration: underline;
}
 /* Remove overflow hidden so dropdown can escape */

/* Only affect the graph board */
.grapgh-board.board {
  background: white;
  margin-bottom: 15px;
  border: 2px solid var(--main-white-3);
  overflow: visible !important; /* allow dropdown menu to show */
}
.base-page.dashboard .board .box_header .actn-btn.dropdown-toggle {
  width: 55px;
  height: 35px;
  margin-top: -5px;
  border-radius: 2px;
  background: var(--main-white-4);
  border: 2px solid var(--main-white-3);
  color: #444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0; /* keep compact */
}

/* Gear icon before */
.base-page.dashboard .board .box_header .actn-btn.dropdown-toggle::before {
  font-family: "Material Design Icons";
  content: "\F0493"; /* mdi-cog unicode */
  font-size: 18px;
  line-height: 1;
}

/* Replace Bootstrap caret with custom caret after */
.base-page.dashboard .board .box_header .actn-btn.dropdown-toggle::after {
  font-family: "Material Design Icons";
  content: "\F0140"; /* mdi-menu-down unicode (caret) */
  font-size: 14px;
  margin-left: 4px;
  border: none; /* remove Bootstrap’s default caret styling */
}

.dashboard .main-grapgh-dropdown .dropdown-menu {
    min-width: 17rem;
}

/* Scope to .board and the graph_params form */
.base-page.dashboard .board form#graph_params .custom-dates {
  display: flex;
  flex-wrap: wrap;       /* allow wrapping when needed */
  gap: .8rem;             /* space between inputs */
}

/* Scope to .board and the graph_params form */
.base-page.dashboard .board form#graph_params .custom-dates {
  display: flex;
  justify-content: space-between; /* push inputs apart */
  gap: 0.8rem;                     /* consistent spacing */
}

/* Inputs side by side at 50% width */
.base-page.dashboard .board form#graph_params .custom-dates .datepicker {
  flex: 0 0 calc(50% - 0.4rem); /* half width minus half the gap */
  box-sizing: border-box;
  min-width: 100px;
  height: 35px;
  padding: 0 5px;
  outline: none;
  font-weight: var(--font-weight);
  color: var(--main-grey-2);
  border: 1px solid var(--main-white-3);
  border-radius: 2px;
  background: var(--main-white-1);
}

/* On small screens, stack vertically */
@media (max-width: 576px) {
 .base-page.dashboard .board form#graph_params .custom-dates {
    flex-direction: column;
  }
  .base-page.dashboard .board form#graph_params .custom-dates .datepicker {
    flex: 1 1 100%;
  }
}

/* Layout: chart left, list right */
.base-page.dashboard .invoice-summary-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.base-page.dashboard .summary-chart {
  flex: 0 0 40%;
  min-width: 180px;
}
.base-page.dashboard .dashboard ul.summary-list {
  list-style: none;
  padding-left: 0;
  flex: 0 0 50%;
}

/* Base style for the legend list */
.dashboard ul.summary-list li {
    cursor: pointer;
  display: flex;                  /* 👈 flex layout */
  justify-content: space-between; /* label left, value right */
  align-items: center;
  padding: 7px 10px;
  background: var(--main-white-4);
  margin-bottom: 7px;
  color: var(--main-grey-2);
  position: relative;
  max-width: 260px;
  border-left: 10px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dashboard .board .no_data {
    font-size: .9rem;
    padding: .5rem;
    display: flex;
    justify-items: center;
    color: var(--main-white-3);
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.dashboard ul.legend {
    /* float: right; */
    height: 160px;
    width: 54%;
    padding-top: 20px;
}


/* Stack vertically on small screens */
@media (max-width: 768px) {
  .base-page.dashboard .invoice-summary-section {
    flex-direction: column;
    align-items: stretch; /* full width stacking */
  }

  .base-page.dashboard .summary-chart,
  .dashboard ul.legend.summary-list {
    flex: 1 1 auto;
    min-width: unset;     /* remove fixed min-width */
    height: auto;         /* let content define height */
    padding: 25px 0;
    width: 90%;
    float: none;
    margin: 0 auto;
}

.dashboard ul.summary-list li {
    max-width: 100%;
}

}

/* Ensure the right span aligns right */
.dashboard ul.summary-list li .right {
  text-align: right;
  font-weight: 500;
  opacity: 0.85;
}
.base-page.dashboard .board {
    background: white;
    /* box-shadow: 0 1px 2px rgba(0,0,0,0.1); */
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid var(--main-white-3);
}
.dashboard .base-stats {
  margin-bottom: 15px;
}
.dashboard .stat-card {
  display: flex;
  align-items: center;
  background: white;
  /*border: 1px solid var(--main-white-3);*/
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

.dashboard .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 85px;
  padding: 20px;
  font-size: 2rem;
  color: #fff;
}
.dashboard .stat-info {
  flex: 1;
  padding: 0 10px;
}

.dashboard .stat-title {
  font-size: 0.85rem; /* reduced for compactness */
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #374151;
}

.dashboard .stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: baseline; /* ensures currency aligns neatly */
  gap: 4px;
}

.dashboard .stat-value .curr {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280; /* muted gray for currency */
}

/* SaaS-inspired color themes */
.dashboard .stat-outstanding .stat-icon {
  background-color: #3B82F6; /* SaaS blue for financial outstanding */
}

.dashboard .stat-overdue .stat-icon {
  background-color: #EF4444; /* SaaS red for overdue/alerts */
}

.dashboard .stat-collected .stat-icon {
  background-color: #10B981; /* SaaS green for success/collected */
}

.dashboard .stat-items .stat-icon {
  background-color: #F59E0B; /* SaaS amber for items/inventory */
}




/* Base wrapper */
.container-loader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px; /* default for full loader */
  position: relative;
  font-family: Arial, sans-serif;
  color: #333;
}
/* Reset min-height for small loaders */ 
.container-loader-wrapper.small { 
  min-height: auto; 
}
/* Reset min-height for small loaders */
.container-loader-wrapper.small {
  min-height: auto;
}

/* Loader card style */
.container-loader-card {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  text-align: center;
  min-width: 200px;
  z-index: 10000;
}

/* Centered loader layout */
.container-loader-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Default spinner */
.container-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: container-spin 1s linear infinite;
  margin-bottom: 10px;
  border-bottom-width: 4px !important;
}

/* Small inline loader layout */
.container-loader-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between spinner and text */
}

/* Small spinner variant */
.container-loader-spinner.small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: container-spin 0.8s linear infinite;
  margin: 0; /* inline alignment */
  border-bottom-width: 2px !important;
}

/* Inline loader text */
.container-loader-inline .loader-text,
.container-loader-center p {
  margin: 0;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.2;
  background: inherit !important;
}

/* Overlay wrapper */
.container-loader-wrapper.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  z-index: 9999;
}

/* Spinner animation */
@keyframes container-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.modal.modal-add-client .modal-body, .modal-edit-contact .modal-body{
  max-height: calc(100vh - 120px); /* subtract header/footer height */
  overflow-y: auto;
}


.add-team-member .business-checkboxes {
  background-color: #f9f9f9;
  border-radius: 6px;
}
.add-team-member .business-checkboxes .form-check {
  margin-bottom: 0.5rem;
}
.add-team-member .business-checkboxes .form-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.add-team-member .business-checkboxes small {
  font-size: 0.8rem;
  color: #6c757d;
}

.standard-table-container .standard_table_wrapper_inner{
   /* responnsive table, and comes with main border*/
    border: 2px solid var(--main-white-3);
    min-height: 200px; /* ensures space reserved before table loads */
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.standard-table-container .table-empty{
    color: var(--text-error-soft);
}

.standard-table-container .standard_table_wrapper_inner{
     display: flex;
    flex-direction: column;
    justify-content: center;
}
 

/* Loader container */
.standard-table-container .standard_table_wrapper_inner .table-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px; /* vertically center spinner */
  color: #6c757d; /* Bootstrap secondary text */
}

/* Spinner styling */
.standard-table-container .standard_table_wrapper_inner .table-loading .spinner  {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}
/* Optional loading text */
.standard-table-container .standard_table_wrapper_inner .table-loading span.visually-hidden {
  font-size: 0.875rem;
  color: #6c757d;
}

/* Transition when replacing loader with table */
.standard_table_wrapper_inner .table {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Wrapper for action button */
table.standard-table td .act-btn-holder {
  display: inline-block;
  position: relative;
}

/* Square icon button (three dots) */
table.standard-table td button.act-btn,
table.standard-table td div.btn-single 
{
  height: 39px;
  width: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--main-white-4);
  border: none;
  /*border-radius: 4px;*/
  color: #444;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Three-dot icon injected via pseudo-element */
table.standard-table td button.act-btn::before {
  font-family: "Material Design Icons";
  content: "\F01D8"; /* mdi-dots-vertical */
  font-size: 20px;
  color: #666;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

table.standard-table td div.btn-single .icon {
    font-size: 20px;
    color: #666;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

 
/* Hover effect */
table.standard-table td button.act-btn:hover,
table.standard-table td div.btn-single:hover 
 {
  background-color: #e9ecef;
  color: #222;
}

/* Dropdown menu styling */
table.standard-table td .dropdown-menu {
  font-size: 0.85rem;
  border-radius: 4px;
  padding: 0.25rem 0;
}

table.standard-table td .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.35rem 1rem;
  color: #444;
  transition: background-color 0.2s ease;
}

table.standard-table td .dropdown-menu .dropdown-item:hover {
  background-color: #f5f5f5;
  color: #222;
}

table.standard-table td .dropdown-menu .dropdown-item.text-danger {
  color: #dc3545; /* Bootstrap danger red */
}

table.standard-table td .dropdown-menu .dropdown-item.text-danger:hover {
  background-color: #f8d7da;
  color: #b71c1c;
}



table.standard-table {
   /* width: 100% !important;
    text-align: left;*/
    min-height: 150px;
    font-size: var(--font-size-1);
   /* border: 2px solid var(--main-white-3);*/
}

 


table.standard-table td.check_box, table.standard-table th.check_box {
    text-align: center;
    width: 50px;
    background: var(--main-white-5);
}

table.standard-table .item_name span.name, 
table.standard-table .name_desc_col span.name,
table.standard-table .expense_name_desc span.name 
{
    display: block;
    font-weight: 600;
}
table.standard-table .name_desc_col span.desc,
table.standard-table .item_name span.item_description, 
table.standard-table .expense_name_desc span.desc
{
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 10px;
    position: relative;
    bottom: -3px;
}

table.standard-table .price {
    width: 225px;
}

table.standard-table td.actions {
    width: 75px;
}

table.standard-table td .button {
    cursor: pointer !important;
    text-align: center;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: var(--main-white-4);
    border: 2px solid var(--main-white-3);
    color: #444;
}

table.standard-table td .button.edit {
    height: 39px;
    width: 39px;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    background: #f5f5f5;
}



table.standard-table td .button.edit:before {
  
    color: #999;
    font-family: "Material Design Icons";
    content: "\F03EB";
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 10px;
    margin-top: 9px;
    display: inline-block;
    font-weight: var(--font-weight);
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Base header styling */

/* Base header styling */
table.standard-table thead th {
  text-transform: uppercase;
  color: var(--main-text-2);
  font-weight: 600;
  font-size: var(--font-size-1);
  padding: 10px 12px;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 2px solid var(--main-white-4);
  border-left: none;
  border-right: none;
}

/* Left border ONLY on first header cell */
table.standard-table thead th{
 background: var(--main-white-5);
}

/* Right border ONLY on last header cell */
/*table.standard-table thead th:last-child {
  background: var(--main-white-5);
}*/


/* Optional: right-align actions column */
table.standard-table thead th.actions {
  text-align: right;
}

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


/* Apply hover background to all cells in the row */
table.standard-table tbody tr:hover td {
  background-color: var(--main-white-4); /* subtle hover background */
  transition: background-color 0.2s ease;
}


/* Selected row (when checkbox is checked) */
 
/* Optional: stronger border for selected row */
table.standard-table tbody tr.selected td {
 background-color: #e0f3ff; /* light blue highlight */
}


.standard-table-container .options-btn-base .options-menu.table_exporting {
    width: auto;          /* shrink/grow to fit content */
    min-width: unset;     /* remove the inherited minimum */
    max-width: 240px;     /* cap the width so it doesn’t get too wide */
    white-space: nowrap;  /* keep labels on one line */
    overflow-x: hidden;   /* hide horizontal overflow if text is too long */
    text-overflow: ellipsis; /* optional: add … if text is clipped */
}


.standard-table-container .pagination-controls .pagination-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
}
.standard-table-container .pagination-controls .right-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}

@media (min-width: 768px) {
  .standard-table-container .pagination-controls .pagination-strip {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 0;
  }

.standard-table-container .pagination-controls .right-controls {
    justify-content: flex-end;
    width: auto;
}

}


.standard-table-container ul.tabs.general {
    margin-bottom: 20px;
    margin-top: 0;
    border-bottom: 2px solid var(--main-white-4);
    padding-bottom: 20px;
}


 
@media screen and (max-width: 800px) {
    .standard-table-container ul.tabs.general {
        padding-bottom: 14px;
        margin-bottom: 14px;
        overflow: hidden;
        overflow-x: scroll;
    }
 
    .standard-table-container ul.tabs, .dataTables_paginate{
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        display: -webkit-flex;
    }

    .standard-table-container ul.tabs.general {
      margin-bottom: 20px;
      margin-top: 0;
      border-bottom: 2px solid var(--main-white-4);
      padding-bottom: 20px;
  }

}
.standard-table-container ul.tabs {
    width: 100%;
    list-style: none;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 0;
}




 
@media screen and (min-width: 801px) {
    .standard-table-container ul.tabs a:first-child li {
        margin-left: 0;
    }
}
.standard-table-container ul.tabs li.current {
    background: var(--main-white);
}
@media screen and (min-width: 801px) {
    .standard-table-container ul.tabs li {
        width: 175px;
        display: inline-block;
        padding: 12px 15px;
        margin-left: 5px;
        border: 2px solid var(--main-white-3);
        background: var(--main-white-4);
        color: #444;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }
}


@media screen and (max-width: 800px) {
    .standard-table-container ul.tabs a {
        width: 50%;
        box-sizing: border-box;
        display: inline-block;
        padding: 0;
        margin-left: 5px;
        border: 2px solid var(--main-white-3);
        background: var(--main-white-4);
        color: #444;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }
}

 
@media screen and (max-width: 800px) {
    .standard-table-container ul.tabs li {
        padding: 10px;
        width: auto;
        white-space: nowrap;
        height: 40px;
    }
}


 

.standard-table-container .table_tabs .meta {
    font-size: 13px;
}


 
/* Base badge style for consistency */
.standard-table .contact_type{
  margin-top: 10px;
}



/* Base badge style */
.standard-table .cont-badge {
  display: inline-block;
  min-width: 100px;       /* consistent width */
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.6em;
}

/* Default / Client badge (grey muted) */
.standard-table .badge-client {
  background-color: #f3f4f6;   /* light grey background */
            /* muted dark grey text */
}

/* Business badge (blue muted) */
.standard-table .badge-business {
  background-color: #e0f2fe;   /* light blue background */
  color: var(--text-muted);               
 
}

/* Individual badge (brown/orange muted) */
.standard-table .badge-individual {
  background-color: #fff7ed;   /* very light orange background */
   color: var(--text-muted);                 
 
}

/* Invoice/Bill badges (soft neutral look) */
.standard-table .badge-invoice {
  background-color: #f9fafb;   /* pale neutral */
  color: #166534;              /* muted green text */
  
}

.standard-table .badge-bill {
  background-color: #f9fafb;   /* pale neutral */
  color: #92400e;              /* muted brown text */
 
}



.standard-table td .contact_wrapper {
  display: flex;          /* enable flex */
  flex-direction: column;    /* children side by side */
  gap: 2px;               /* spacing between name and badge */
  white-space: nowrap;    /* prevent text wrapping */
}

.standard-table td .contact_wrapper .name {
  white-space: nowrap;    /* keep name on one line */
}

.standard-table .contact_name .name {
  font-weight: 600;
  color: #111827; /* dark muted text */
}

.standard-table .contact_name .contact_email {
  font-size: 0.85rem;
  color: #6b7280; /* muted grey */
}


/* Scoped to Teams page table */
.team-settings.teams .standard-table .member_labels .member-status {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.6em;
  border-radius: 4px;
  background-color: #fff7ed;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.team-settings.teams .standard-table .member_labels .user-status {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.6em;
  border-radius: 4px;
  background-color: #f3f4f6; /* neutral gray */
  color: #374151;
  margin-right: 0.25rem;
}

.team-settings.teams .standard-table .member_labels .user-status.is_active,
.team-settings.teams .standard-table .member_labels .member-status.active {
  background-color: #e6ffed;
  color: #1a7f37; /* green */
}

/* Role badges — text color only, no background */
.team-settings.teams .standard-table .member_role {
  font-size: 0.75rem;
  font-weight: 600;
}

.team-settings.teams .standard-table .member_role.admin {
  color: #2563eb; /* blue */
}

.team-settings.teams .standard-table .member_role.owner {
  color: #d97706; /* amber/gold */
}

.team-settings.teams .standard-table .member_role.manager {
  color: #059669; /* green */
}

.team-settings.teams .standard-table .member_role.accountant {
  color: #0d9488; /* teal */
}

.team-settings.teams .standard-table .member_role.viewer {
  color: #6b7280; /* gray */
}

.team-settings.teams .standard-table .member_identity .identity-link {
  color: #333;              /* light black */
  font-weight: 600;         /* bold */
  
}

.team-settings.teams .standard-table .member_identity .identity-link:hover {
  color: #222;              /* darker on hover */
  text-decoration: underline; /* keep underline */
}

/* Highlight rows based on mime type (optional) */
.file-settings .standard-table tr[data-file-type^="application/pdf"] td {
  background-color: #fff3f3;   /* soft red tint for PDFs */
  font-weight: 600;
}



.files_area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--main-white-1);
}

.files_area .file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--main-white);
  border: 1px solid var(--input-border-color);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  position: relative;
}

.files_area .file-item .status {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.files_area .file-item .filename {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--text-dark);
  margin-right: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files_area .file-item .status .green{
    color: var(--success);
}
.files_area .file-item .progress-holder {
  flex: 0 0 150px;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 0.75rem;
}

.files_area .file-item .progress-holder .progress-bar {
  height: 100%;
  width: 0%;
  background: #4caf50;
  transition: width 0.3s ease;
}

.files_area .file-item .fileinfo {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-right: 0.75rem;
}

.files_area .file-item .cancel-upload {
  flex: 0 0 auto;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.files_area .file-item .cancel-upload:hover {
  color: #d32f2f; /* red on hover */
}

.file-settings .standard-table tr[data-file-type^="image/"] td {
  background-color: #f3fff3;   /* soft green tint for images */
}
.headline_main_button .files-attach{
    width: 150px;
    position: relative;
}
.mobile-footer-fixed .files-attach{
    width: 100%;
    position: relative;
}
.files-attach .headline_main_button .main_button {
    margin-top: var(--font-size-1);
    margin-left: 0; 
}

.file-settings table.standard-table .list-file-info {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.file-settings table.standard-table span.date {
    color: rgba(0, 0, 0, .3);
    background: var(--main-white-4);
    font-size: 13px;
    padding: 3px 4px 2px 4px;
    min-width: 70px;
    display: inline-block;
    text-align: center;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
    
}
.file-settings table.standard-table .name span.uploader {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-family: "pn-r", "Open Sans", "Gill Sans MT", "Gill Sans", Corbel, Arial, sans-serif;
   
    position: relative;
    
}
.file-settings table.standard-table .name span.uploader b{
    font-weight: 600;
    color: var(--text-normal);
}

/*view modal css*/



/* 🔑 Contact View Modal Styling */
.contact-view-modal {
  color: var(--text-normal);
  font-size: var(--font-size-1);
}

.contact-view-modal .custom-fields-section {
  border-top: 1px solid #e0e0e0;
  padding-top: 1rem;
}

.contact-view-modal .custom-fields-section .section-heading {
  font-weight: 600;
  color
}
/* Tabs */
.contact-view-modal .nav-tabs .nav-link {
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  padding: 0.6rem 1rem;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.contact-view-modal .nav-tabs .nav-link.active {
  background-color: var(--main-white-3);
  color: var(--text-dark);
  font-weight: 600;
}

/* Overview card */
.contact-view-modal .overview-card {
  border: 1px solid var(--main-white-2);
  padding: 1rem;
}
.contact-view-modal .overview-card h6 {
  font-weight: 600;
  color: var(--text-dark);
}
.contact-view-modal .overview-card .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
}

/* Contact Info section (table-like alignment) */
.contact-view-modal .contact-info .tab-items-cont {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-view-modal .contact-info .cont-item {
  display: table;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}
.contact-view-modal .contact-info .cont-item + .cont-item {
  margin-top: 0.4rem;
}
.contact-view-modal .contact-info .cont-item-info,
.contact-view-modal .contact-info .details {
  display: table-cell;
  vertical-align: middle;
}
.contact-view-modal .contact-info .cont-item-info {
  width: 35%;
  min-width: 120px;
  font-weight: 500;
  color: var(--main-grey-3);
}
.contact-view-modal .contact-info .details {
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Contact Summary section (Financial Snapshot table) */
.contact-view-modal .contact-summary .table-responsive {
  
 
}
.contact-view-modal .contact-summary-table {

  margin-bottom: 0;
}
.contact-view-modal .contact-summary-table th {
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 2px solid var(--main-white-2);
}
.contact-view-modal .contact-summary-table td {
  font-weight: 500;
   background-color: var(--main-white-2);
  color: var(--text-dark);
  vertical-align: middle;
  padding: 0.5rem 0.75rem;
}
.contact-view-modal .contact-summary-table td:first-child span{
  color: var(--main-grey-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.contact-view-modal .contact-summary-table td:last-child {
  font-weight: 600;
}

/* Role-specific accents for summary values */
.contact-view-modal .contact-summary-table td:last-child.client {
  color: var(--invoice-color-main);
}
.contact-view-modal .contact-summary-table td:last-child.vendor {
  color: var(--bill-color-main);
}

/* Tables inside statements */
.contact-view-modal table {
  font-size: 0.875rem;
}
.contact-view-modal table thead {
  background: var(--main-white-5);
}
.contact-view-modal table th {
  font-weight: 600;
  color: var(--text-dark);
}
.contact-view-modal table td a {
  color: var(--primary);
  text-decoration: none;
}
.contact-view-modal table td a:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

/* Pagination */
.contact-view-modal .pagination {
  margin-top: 0.75rem;
}
.contact-view-modal .pagination .page-link {
  color: var(--primary);
}
.contact-view-modal .pagination .page-link:hover {
  background-color: var(--main-white-3);
}

/* 🔑 Type Badge Styling */
.contact-view-modal .type-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  text-transform: capitalize;
}

/* Individual → grey background */
.contact-view-modal .type-badge.individual {
  background-color: var(--main-white-3);
  color: var(--text-dark);
  border: 1px solid var(--main-white-2);
}

/* Business → blue background */
.contact-view-modal .type-badge.business {
  background-color: #e0f2fe;
    color: #1e40af;
    border: 1px solid #93c5fd;
  border: 1px solid var(--primary-hover);
}

.contact-view-modal .basic-info-cont .cont-item-info i { 
  font-size: 1rem; 
  opacity: 0.85;
}

 



 .send-page-wrapper .send_doc .form-group label{
    font-weight: 600;
  }
  .send-page-wrapper .send_doc {
    padding: 1.5rem;
  }

  .send-page-wrapper .send_doc #send_statement textarea {
    resize: vertical;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .send-page-wrapper .send_doc #alerts p.alert {
    margin-bottom: 1rem;
  }

  .send-page-wrapper .send_doc .page-header h4 {
    display: flex;
    align-items: center;
  }

  .send-page-wrapper .send_doc .page-header a.btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }


  .send-page-wrapper .send_doc .card p {
    margin-bottom: 0.5rem;
  }

  /* Wrapper when invalid */
.email-tags-wrapper.is-invalid {
    border: 1px solid #dc3545; /* Bootstrap red */
    border-radius: 0.25rem;
    padding: 0.25rem;
    background-color: #fff5f5; /* subtle red background */
}

/* Ensure pills inside still look normal */
.email-tags-wrapper.is-invalid .email-pill {
    background-color: #f8d7da; /* light red */
    color: #842029;
    padding: 0.25rem 0.5rem;
    margin: 0.1rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
}

/* Remove button styling */
.email-tags-wrapper.is-invalid .pill-remove {
    margin-left: 0.25rem;
    cursor: pointer;
    color: #842029;
}

/* Input inside wrapper */
.email-tags-wrapper.is-invalid input[type="text"] {
    border: none; /* remove default border inside wrapper */
    outline: none;
    background: transparent;
    color: #842029;
}

 
.email-tags-wrapper { 
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid var(--input-border-color);
    border-radius: 0.25rem;
    border-radius: 0.25rem;
    padding: 3px 5px;
    background: #fff;
    min-height: 2.7rem;

}

.email-tags-wrapper input.custom-email-input {
    flex: 1 1 auto;           /* occupy all remaining width */
    min-width: 30px;        /* optional minimum */
    border: none;
    outline: none;
    background: transparent;
    white-space: nowrap;
}

/* Small screens: force tiny input width */
@media (max-width: 576px) {
    .email-tags-wrapper input.custom-email-input {
        max-width: 40px;    /* small fixed width */
    }
}

.email-tags-wrapper .pills-container {
    display: inline-flex;   /* pills in one line */
    gap: 4px;
    flex: 0 1 auto;         /* take available space */
    overflow-x: auto;       /* scroll if too many pills */
}
.email-tags-wrapper .email-pill {
  background: #e0f0ff;
  padding: 2px 6px;         /* reduced from 3px 8px */
  border-radius: 4px;       /* slightly tighter */
  display: flex;
  align-items: center;
  font-size: 0.85em;        /* smaller text */
  line-height: 1;         /* keeps pill compact vertically */
}

.email-tags-wrapper .pill-remove {
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
}
.email-tags-wrapper input {
    flex: 1;
    border: none;
    min-width: 150px;
    font-size: 0.95em;
    outline: none;
}

.offline_autocomplete {
    position: absolute;
    background: var(--main-white-1);
    border: 1px solid #ccc;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    display: none;
     
    top: 100%; /* just below the input */
    left: 0;
     
}

.offline_autocomplete ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offline_autocomplete li {
    padding: 8px 10px;
    cursor: pointer;
}

.offline_autocomplete li:hover {
    background-color: var(--main-white-3);
}

.send_doc .send_email_content{
     width: 100%;
    min-height: 300px; /* initial height */
    background: var(--main-white-1);
    border: none; /* no border by default */
    border-radius: 0.25rem;
    resize: none; /* optional, prevent manual resize */
    overflow: hidden; /* hide scrollbars */
    padding: 5px 10px;
    box-sizing: border-box;
}

/* Show border on focus */
.send_doc .send_email_content :focus {
    outline: none; /* remove default focus outline */
    border: 2px solid var(--input-border-color);
}


.send-page-wrapper .send_doc .card-main {
    padding: 1.5rem; /* default */
}

@media (max-width: 991.98px) { /* lg and below */
    .send-page-wrapper .send_doc .card-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767.98px) { /* md and below */
    .send-page-wrapper .send_doc .card-main {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}


.send-page-wrapper .send_doc .upgrade-text {
    color: #6c757d; /* low-tone / muted gray */
    font-size: 0.85rem;
}

.send-page-wrapper .send_doc .upgrade-text a {
     
    text-decoration: none; /* remove underline */
}

.send-page-wrapper .send_doc .upgrade-text a:hover {
    text-decoration: underline; /* optional: underline on hover */
}

/* Small screens (up to 576px) */
@media (max-width: 576px) {
  .send-page-wrapper .send_doc .page-header {
    flex-wrap: wrap; /* allow wrapping if needed */
    gap: 0.25rem;    /* minimal spacing between elements */
  }

  .send-page-wrapper .send_doc .page-header h4 {
    display: flex;
    align-items: center;
    font-size: 1rem; /* reduce title font size */
    margin-bottom: 0.25rem; /* small spacing below title */
  }

  .send-page-wrapper .send_doc .page-header h4 i.mdi {
    font-size: 1rem; /* icon smaller */
    margin-right: 0.25rem;
  }

  .send-page-wrapper .send_doc .page-header a.btn {
    flex-shrink: 1;
    font-size: 0.85rem; /* smaller button text */
    padding: 0.25rem 0.5rem; /* reduce padding */
    gap: 0.2rem; /* smaller gap between icon and text */
    border: none; /* remove button border */
    min-width: auto; /* allow button to shrink */
  }

  .send-page-wrapper .send_doc .page-header h4 i.mdi {
    display: none;
  }
  .send-page-wrapper .send_doc .page-header a.btn i.mdi {
    font-size: 0.9rem; /* smaller icon */
  }
  .send-page-wrapper .send_doc {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .send-page-wrapper .send_doc .upgrade-text {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .send-page-wrapper .send_doc .upgrade-text a {
    font-size: 0.75rem;
  }

}

.send-page-wrapper .send_doc #custom_email_content {
    padding: 0.75rem 1rem;      /* top/bottom and left/right padding */
    line-height: 1.2;           /* spacing between lines */
    font-family: monospace;     /* optional: preserves alignment */
    font-size: 0.95rem;         /* slightly smaller, readable font */
    white-space: pre-wrap;      /* ensures multiple spaces are respected */
     
}
/* Main editor wrapper */
.send-page-wrapper .send_doc .trumbowyg-box {
  border: 2px solid var(--input-border-color); /* your color */
  border-radius: 0.25rem; /* or whatever you prefer */
}

/* Ensure toolbar follows same radius at the top */
.send-page-wrapper .send_doc .trumbowyg-button-pane {
  border-radius: 0.25rem 0.25rem 0 0;  /* round top corners only */
}

/* Content area gets bottom rounding */
.send-page-wrapper .send_doc .trumbowyg-editor,
.send-page-wrapper .send_doc .trumbowyg-textarea {
  border-radius: 0 0 0.25rem 0.25rem;
}

/* Style the readonly editor box */
.trumbowyg-box.readonly .trumbowyg-editor {
    background-color: #f5f5f5;  /* light grey */
    cursor: not-allowed;
    color: #555;                /* slightly dim text */
}

/* Optional: hide toolbar buttons when readonly */
.trumbowyg-box.readonly .trumbowyg-button-pane {
    display: none;
}



.form-check .form-check-label input[type="checkbox"] + .input-helper:after {
    content: '\F012C';
    font-size: .9375rem;
    font-weight: bold;
    color: #ffffff;
}



.smart-dropdown .dropdown-item .attachment-dropdown-item {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
 align-items: flex-start;
}

.smart-dropdown .dropdown-item .attachment-dropdown-item .file-name {
  font-weight: 500;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smart-dropdown .dropdown-item .attachment-dropdown-item .file-meta {
  font-size: 0.75rem;
  color: #6c757d;
}

.smart-dropdown .dropdown-item .attachment-dropdown-item .file-meta .label {
  font-weight: 600;
  margin-right: 2px;
}


.new-document .tds-item .smt-dropdown-tds .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.new-document .tds-item .dropdown-item.add-new-tds{
   display: block;
   align-items: left;
   background-color: var(--zf-grey-1);
   cursor: pointer;
}
.new-document .tds-item .dropdown-item.add-new-tds:hover{
  background-color: var(--zf-grey-3);
}
.new-document .tds-item .smt-wrapper-tds {
    
    border-radius: 6px;
    background-color: inherit;
    position: relative;
    display: flex;
    align-items: center;
   background: #fff;
   border: solid 1px var(--input-border-color);
  height: calc(var(--input-height) + 4px);
    
}


.new-document .tds-item .input-group_wrap {
  display: flex;
  border: 1px solid var(--input-border-color, #ced4da);
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #fff;
  height: var(--input-height-sm, 2rem); /* Or use 2.25rem if needed */
  border: solid 1px var(--input-border-color);
  height: calc(var(--input-height) + 4px);
}

/* Ensure both select and input match height */
.new-document .tds-item .input-group_wrap select,
.new-document .tds-item .input-group_wrap input {
  border: none;
  height: 100%;
  box-shadow: none;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}

/* Style select */
.new-document .tds-item .input-group_wrap select {
  max-width: 80px;
  min-width: 60px;
  background-color: #f5f5f5;
  border-right: 1px solid #ccc;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

/* Style input */
.new-document .tds-item .input-group_wrap input {
  flex-grow: 1;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

/* Remove spin buttons on number inputs */
.new-document .tds-item .input-group_wrap input::-webkit-outer-spin-button,
.new-document .tds-item .input-group_wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.new-document .tds-item .input-group_wrap input[type="number"] {
  -moz-appearance: textfield;
}

.new-document .file-act-btn .dropdown-divider {
    height: 0;
    margin: 0;
    overflow: hidden;
    border-top: 1px solid #f3f3f3;
}

.headline_main_button {
  /*  margin-top: var(--font-size-1);*/
}

  /* Base button styling */
.headline_main_button .main_button,
.footline_main_button .main_button,
.headline_main_button .save-button {
  font-weight: var(--font-weight);
  min-width: 135px !important;
  padding: 11px 16px;
  font-size: 15px;
  text-align: center;
  outline: none;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  color: #fff; /* white text */
  background-color: var(--bs-primary); /* Bootstrap primary blue */
  border-radius: 4px;
  border: none;
/*  margin-left: 10px;*/
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease-in-out;
}

/* Hover / focus states */
.headline_main_button .main_button:hover,
.footline_main_button .main_button:hover,
.headline_main_button .main_button:focus {
  background-color: #0b5ed7; /* darker blue */
  color: #fff;
}

/* Dropdown menu styling */
.headline_main_button .dropdown-menu {
  min-width: 135px !important;
  right: 0;
  left: inherit;
  float: none !important;
  border-radius: 4px;
  padding: 0;
  background-color: #f8f9fa; /* light background for menu */
  border: 2px solid var(--input-border-color);
}


.dropdown.headline_main_button .dropdown-menu {
    margin-top: .45rem!important;
}
   
/* Dropdown items */
.headline_main_button .dropdown-menu > li a,
.headline_main_button .dropdown-menu.contains_buttons > li button {
  display: block;
  padding: 10px!important;
  clear: both;
  font-weight: var(--font-weight);
  line-height: 20px;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  width: 100% !important;
  transition: background-color 0.2s ease-in-out;
}


.dropdown.headline_main_button .dropdown-toggle:after {
    font-family: 'Material Design Icons';
    content: "\F035D";
    font-weight: normal;
    color: inherit;
    font-size: 18px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    font-weight: var(--font-weight);
    font-variant: normal;
    text-transform: none;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
}

.dropdown.headline_main_button .dropdown-divider {
     height: 0; 
     margin:0; 
    overflow: hidden;
    border-top: 1px solid #e9e2e2;
}

/* Rotate or change when open */
.dropdown.headline_main_button .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  color: #ffd700; /* optional highlight */
}


/* Hover effect for dropdown items */
.headline_main_button .dropdown-menu > li a:hover,
.headline_main_button .dropdown-menu.contains_buttons > li button:hover {
    background: rgba(0, 0, 0, .05)
}
/* Ensure single button aligns like dropdown trigger */
.headline_main_button .main_button {
 /* margin-top: var(--font-size-1);*/
  margin-left: 10px;
}

/* Optional: remove caret icon spacing if not dropdown */
.headline_main_button .main_button:not(.dropdown-toggle)::after {
  content: none;
}


a.btn.with-icon, button.with-icon {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

button.with-icon-left{
  display: flex !important;
  align-items: center;
  flex-direction: row;
}
button.with-icon-left i{
  display: block;
  margin-right: 0.2rem;
}
.modal.modal-slide-right .modal-dialog {
  position: fixed;
  right: 0;
  margin: 0;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  max-width: 400px;
  top: 0;
}

.modal.modal-slide-right.show .modal-dialog {
  transform: translateX(0);
}

/* Item Details Tab Styling */
.modal-view-item #details {
  background-color: #fff;
  border-radius: 6px;
}

.modal-view-item #details h6 {
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.modal-view-item .detail-row {
  padding: 0.5rem 0;
  border-bottom: 1px dashed #dee2e6;
}

.modal-view-item .detail-row:last-child {
  border-bottom: none;
}

.modal-view-item .detail-row .mdi {
  font-size: 1rem;
  color: #adb5bd; /* subtle icon */
}

.modal-view-item #details label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
}

.modal-view-item #details p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #343a40;
}

/* Description block styling */
.modal-view-item .item-description-wrapper {
  margin-top: 1rem;
}

.modal-view-item .item-description {
  background-color: #f8f9fa;   /* light gray background */
  border: 1px solid #e9ecef;   /* subtle border */
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.9rem;           /* slightly smaller text */
  line-height: 1.4;
  color: #343a40;              /* dark readable text */
  max-height: 160px;           /* limit height */
  overflow-y: auto;            /* scroll if too long */
 /* white-space: pre-wrap;  */     /* preserve line breaks */
  word-wrap: break-word;       /* wrap long words */
}

/* Add subtle scrollbar styling */
.modal-view-item .item-description::-webkit-scrollbar {
  width: 6px;
}
.modal-view-item .item-description::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}
.modal-view-item .item-description::-webkit-scrollbar-track {
  background-color: transparent;
}


@keyframes flashHighlight {
  0%   { background-color: #fff8b3; }  /* light yellow */
  50%  { background-color: #fff1a8; }
  100% { background-color: transparent; }
}

.flash-highlight {
  animation: flashHighlight 1s ease-in-out;
}

@keyframes inputErrorFlash {
  0%   { background-color: #ffd6d6; }
  100% { background-color: transparent; }
}

.input-flash-error {
  animation: inputErrorFlash 0.5s ease-in-out;
}

@keyframes inputInfoFlash {
  0%   { background-color: #e0f3ff; }
  100% { background-color: transparent; }
}

.input-flash-info {
  animation: inputInfoFlash 0.5s ease-in-out;
}

 

.new-document input[type="text"]:not(.no_input),
.new-document input[type="number"]:not(.no_input),
.new-document textarea:not(.no_input),
.new-document select:not(.no_input) {
  border: 2px solid var(--input-border-color);
  border-radius: 0.25rem; /* Optional for consistent rounding */

}


.new-document input[type="text"]:not(.no_input),
.new-document input[type="number"]:not(.no_input),
.new-document select:not(.no_input) {
  height: calc(var(--input-height) + 4px);
}





.new-document .itemz-table input[type="text"],
.new-document .itemz-table input[type="number"],
.new-document .itemz-table textarea
{
  border: 1px solid;
  border-color: transparent;
  border-radius: 0.25rem; /* Optional for consistent rounding */

}


.itemz-table .new-item_desc{
  background-color: var(--zf-grey-1);
  min-height: 3.5rem;
  max-height: 10rem;
  resize: vertical;
}
 

.new-document .itemz-table textarea:focus:not([readonly]),
.new-document .itemz-table input:focus:not([readonly]),
.new-document .itemz-table select:focus:not([readonly]) {
  border-color: var(--input-border-color) !important;
}

.new-document .itemz-table textarea:hover:not([readonly]),
.new-document .itemz-table input:hover:not([readonly]),
.new-document .itemz-table select:hover:not([readonly]) {
  border-color: var(--input-border-color) !important;
}

.new-document .itemz-table input,
.new-document .itemz-table select:not(.no_input) {
  height: calc(var(--input-height-sm) + 4px);
}

.new-document .itemz-table .spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.25); /* bg-white with opacity */
  z-index: 10; /* Optional: ensure it appears above row content */
}



.smt-dropdown_custom{
  border: solid 2px var(--input-border-color);
  padding: 5px;
}
.smt-dropdown_custom .dropdown-item{
  margin-top: 2px;
}
.smt-dropdown_custom .dropdown-item.active{
  background-color: var(--main-blue);
}
.smt-dropdown_custom .dropdown-item.active:hover{
  background-color: var( --main-white-3);
  color: #fff;
}
.resize-vertical {
  resize: vertical;
}

  .invoice-main-wrapper .header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    width: 100%;
    height: 65px;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 10;
    flex-wrap: wrap;
  }

  .invoice-wrapper {
    max-height: calc(100vh - 140px); /* adjust as needed */
    overflow-y: auto;
    padding-bottom: 100px; /* space for sticky footer */
  }

  .invoice-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 1rem;
    z-index: 20;
  }

  .dropdown-menu li {
    font-size: 0.9rem;
  }

 
  .statmentPage header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E7E7E7;
  }

  .statmentPage .form_row {
    margin-bottom: 10px;
  }


  .statmentPage .form_row.contact-input-wrap{
    min-height: 115px;
  }


  .statmentPage .action-link{
    font-weight: normal;
    cursor: pointer;
    font-size: var(--font-size-2);
    color: var(--primary-1);
    display: inline-block !important;
  }
  .statmentPage .action-link:hover{
    text-decoration: underline;
    color: var(--primary-hover);
  }
 
 .statmentPage .statement_status {
    font-size: 1.2em;
    color: var(--main-white-1);
    border-radius: 2px;
    font-weight: 400;
    background-color: #ddd;
    color: #ccc;
    padding: 1px 10px;
    font-family: "pn-r", "Open Sans", "Gill Sans MT", "Gill Sans", Corbel, Arial, sans-serif;
    height: calc(var(--input-height) + 4px);
    display: flex;
    align-items: center;
  }
 
.statmentPage .tax_discount_shipping  {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
    align-items: center;
    justify-content: space-between;
}
 

.statmentPage .statement-footer {
  display: flex;
  flex-direction: row;      /* default: row on desktop */
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* On small screens, stack vertically */
@media (max-width: 576px) {
  .statmentPage .statement-footer {
    flex-direction: column; /* switch to column */
    flex-wrap: wrap;        /* allow wrapping if needed */
    align-items: stretch;   /* make children full width */
    gap: 1rem;              /* optional spacing between items */
  }
}

.new-document .invoice-title-input {
  border: 2px solid #333;  /* customize color */
  padding: 0 5px;
  outline: none;
  font-weight: 400;
  height: 35px;
  min-width: 0; /* prevents overflow in flex containers */
}

.new-document  .smt-wrapper_custom{
  height: calc(var(--input-height) + 4px);
      border: 2px solid var(--input-border-color);
    border-radius: 0.25rem;
}

.statement_logo_container a {
  padding: 15px;
  border: 2px dotted var(--main-white-2);
  border-radius: 3px;
  position: relative;
  width: 225px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: border 0.2s ease;
}

/* Image scaling remains consistent */
.statement_logo_container img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Hover effect */
.statement_logo_container a:hover {
  border: 2px dashed var(--main-grey-5);
}

/* ✅ Mobile screen adjustments */
@media (max-width: 767.98px) {
  .statement_logo_container a {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 15px;
  }

  
  .statement_logo_container img {
    max-height: 50px; /* Adjust as needed for your design */
  }
}






.invoice-number-wrapper .input-group-text {
   height: calc(var(--input-height) + 4px);
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;

}

.invoice-number-wrapper .input-group-text {
  border: 2px solid var(--input-border-color);
}


/* === Main Select2 Container === */
.custom-select2 .select2-selection--single {
  border: 2px solid var(--input-border-color, #ced4da);
   height: calc(var(--input-height) + 4px);
  padding: 0 0.75rem;
  font-size: 1rem;
  border-radius: var(--inv-input-b-radius, 0.375rem);
  background-color: #fff;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

/* === Dropdown Arrow === */
.custom-select2 .select2-selection__arrow {
  height: 100%;
  right: 0.75rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.custom-select2 .select2-selection__arrow b {
  border-color: #495057 transparent transparent transparent;
  border-width: 0.45em 0.45em 0 0.45em;
}

/* === Focus State === */
.custom-select2.select2-container--focus .select2-selection--single {
  border-color: var(--input-focus-border-color, #86b7fe);
  box-shadow: 0 0 0 0.25rem var(--input-focus-shadow, rgba(13, 110, 253, 0.25));
  outline: 0;
}

/* === Disabled State === */
.custom-select2.select2-container--disabled .select2-selection--single {
  background-color: var(--bs-secondary-bg, #e9ecef);
  opacity: 1;
}

/* === Dropdown Panel === */
.custom-select2-dropdown {
  border: 2px solid var(--input-border-color, #ced4da) !important;
  border-top: 0 solid transparent;
  
}

/* === Dropdown Search Field === */
.custom-select2-dropdown .select2-search {
  padding: 8px !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.custom-select2-dropdown .select2-search__field {
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  padding: 6px 12px !important;
  width: 100% !important;
}

/* === Dropdown Items === */
.custom-select2-dropdown .select2-results__option {
  padding: 8px 12px;
}

.custom-select2-dropdown .select2-results__option--highlighted {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

.custom-select2-dropdown .select2-results__option--selected {
  background-color: #e9ecef !important;
  color: #212529 !important;
}


.custom-select2.select2-container--focus .select2-selection--single {
  border-color: #adb5bd; /* light gray */
  box-shadow: 0 0 0 0.25rem rgba(173, 181, 189, 0.25); /* soft gray glow */
  outline: 0;
}












 

/* Rate unit style */
.row-unit {
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
}

/* Column consistency */
.item-row .form-control {
  font-size: 0.875rem;
  padding: 0.3rem 0.5rem;
}



/* Rate column wrapper */
.rate-col {
  text-align: right;
}

/* Input styling */
.rate-col .form-control {
  text-align: right;
  font-weight: 500;
  padding: 0.3rem 0.5rem;
  font-size: 0.875rem;
}

/* Unit display under input */
.row-unit {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.15rem;
  white-space: nowrap;
  line-height: 1;
}

.rate-col .row-unit b {
  font-weight: 600;
  margin-right: 2px;
  color: #495057;
}

.btn-invoicely-orange {
  display: inline-flex;            /* flex for icon + text alignment */
  align-items: center;
  justify-content: center;                  /* full width */
  min-width: 125px;                /* minimum width */
  height: 2.75rem;                    /* consistent button height */
  padding: 0 1.5rem;               /* left/right padding */
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  border: none;
  border-radius: 0.25rem;
  background-color: rgb(255, 102, 51); /* custom orange */
  color: rgb(255, 255, 255);                         /* white text */
  text-align: center;
  white-space: nowrap;
  user-select: none;
  position: relative;
  appearance: none;
  outline: none;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

.btn-invoicely-orange:hover {
  background-color: rgb(230, 92, 46);  /* darker orange on hover */
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
  color: rgb(255, 255, 255,0.7);
}

.btn-invoicely-orange:active {
  background-color: rgb(200, 80, 40);  /* pressed state */
}

.else-code .btn-outline-secondary {
    color: #fff;
    border-color: #fff;
}


.btn-flat { /*just button with no styles*/
  background: none;
  border: none;
  padding: 0; /* remove extra space */
  margin: 0;
  width: auto;
  height: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
}

.item-wrap .drag-handle {
  position: absolute;
  top: 8px;
  left: -24px; /* adjust as needed */
  padding: 0;
  border: none;
  background: transparent;
  color: #888;
  cursor: move;
  z-index: 10;
}

.item-wrap .drag-handle:hover {
  color: #000;
}

.item-wrap .drag-handle {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.item-wrap .item-row:hover .drag-handle {
  opacity: 1;
}






.itemz-table .item-row .icon-button i {
  font-size: 1.1rem; /* adjust as needed */
}

.itemz-table .item-name{
  font-weight: 600;
}
.itemz-table .item-name.form-control[readonly] {
    background-color: transparent;
    height: calc(var(--input-height-sm) + 4px);
     
}
.itemz-table .item-name.form-control[readonly]:focus {
    border-color: transparent;
     
}
.itemz-table .item-ac-actions .mdi{
  color: var(--steel-blue);
}

.smart-dropdown.no-results{
  padding: 20px;
}
.smt-dropdown_items .no-results{
  padding: 20px;
  min-height: 30px;
}


.form_heading {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    display: inline-block;
    color: #333;
  }

  .input-group-text,
  .form-control,
  .form-select {
    height: 38px; /* Equal height for all inputs/selects */
    font-size: 0.95rem;
  }

  .input-group-text.bg-ddd {
    background-color: #ddd;
  }

.statement_contacts .address-box-base {
  padding: 1rem;
  border: 1px solid #ddd;
  /*border-radius: 0.4rem;*/
  font-size: 0.95rem;
  color: #444;
  position: relative;
}

 .statement_contacts .address-box {
  background: #eee;
  padding: 1rem;
  border: 1px solid #ddd;
 /* border-radius: 0.4rem;*/
  font-size: 0.95rem;
  color: #444;
  position: relative;
}

.statement_contacts .address-box .close_icon {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 1rem;
  color: #666;
}

.statement_contacts .address-box. p {
  margin: 0;
}



.statement_amount_container {
  margin-bottom: 1rem;
}

.statement_amount {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.statement_total {
  padding: 8px 0;
  border-bottom: 2px solid #ccc;
}

.no_input {
  border: none;
  background: transparent;
  width: 100px;
}

.statement_amount_container .no_input{
    width: auto;
}
.bold {
  font-weight: 700;
}

.status_line {
  color: #333;
}

.attach_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #333;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.attach_button:hover {
  background-color: #e0e0e0;
}
.totals-container {
  padding-top: 2rem;
  margin-top: 3rem;
  border-top: solid 1px #ddd;
}
.tax_discount_shipping_wrapper .form-select{
  width: auto;
}
.tax_discount_shipping_wrapper  .tds-item{

}

.item-row .units-select{
  background-color: #eee;
  border-color: #eee;
}

@media (min-width: 767.98px) {
    /* Item rows (large screens) */
    .itemz-table .item-wrap .item-row > [class*="col"] {
      background-color: #f0f8ff; /* light blue */
      transition: background-color 0.3s ease;
    }

    /* Expense rows (large screens) */
    .itemz-table .item-wrap.expense-wrap .item-row > [class*="col"] {
      background-color: #fff5f5; /* soft red/pink */
      transition: background-color 0.3s ease;
    }

    /* Hover effect for items */
    .itemz-table .item-wrap .item-row:hover > [class*="col"] {
      background-color: #e0f0ff; /* slightly darker blue */
    }

    /* Hover effect for expenses */
    .itemz-table .item-wrap.expense-wrap .item-row:hover > [class*="col"] {
      background-color: #ffecec; /* slightly darker pink */
    }

}
/* Small screens: apply background to inner wrapper */
@media (max-width: 767.98px) {
  .itemz-table .item-wrap.item-row-inner {
    border: 1px solid #dee2e6;
    background-color: #f0f8ff; /* item background */
    padding: 1rem;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
  }

  .itemz-table .expense-wrap.item-row-inner {
    border: 1px solid #dee2e6;
    background-color: #fff5f5; /* expense background */
    padding: 1rem;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
  }

  /* Optional hover for small screens */
  .itemz-table .item-wrap.item-row-inner:hover {
    background-color: #e0f0ff;
  }

  .itemz-table .expense-wrap.item-row-inner:hover {
    background-color: #ffecec;
  }
 

  .item-row .col-md-5,
  .item-row .col-md-2,
  .item-row .col-md-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .item-row input,
  .item-row .dropdown {
    width: 100%;
    margin-bottom: 0.75rem;
  }



.card-header-responsive {
    padding: 0.5rem !important;
    text-align: center;
    border : 1px solid #e7eaed;
    background: #eee;
    border-radius: 0;
  }

.itemz-table .card-header{
  border-radius: 0;
}


.itemz-table .item-row{
  padding-top: 1.5rem;
}
.itemz-table .item-row .td-col::before {
    content: attr(data-label);
    font-weight: 500;
    padding-bottom: .2rem;
    flex: 0 0 40%;
    color: #6c757d;
    display: block;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
     
}
.names-header{
  display: none;
 }

.itemz-table .main-head{
  display: none;
}

.itemz-table #itemsContainer:before{
    display: block;
    text-align: left;
    margin-bottom: 10px;
    font-family: "pn-sb", "Open Sans", "Gill Sans MT", "Gill Sans", Corbel, Arial, sans-serif;
    background: rgba(0,0,0,.05);
    border-radius: 3px;
    padding: 5px;
}

.itemz-table #itemsContainer:before {
    content: "Items";
    text-align: center;
}

.itemz-table .item-row .td-col{
  margin-top: 0.3rem; 
}
.itemz-table .item-wrap .act-btn {
    padding: 10px 0;
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    color: var(--main-blue);
    cursor: pointer;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    justify-content: flex-end;
    flex-direction: row;
}
}
@media (min-width: 768px) {
  .card-header-responsive {
    padding: 1rem !important;
    text-align: left;
  }

  .itemz-table .item-row{
    border-bottom: solid 1px #eee ;
  }


  .itemz-table .item-wrap .act-btn {
      padding: 10px;
      font-weight: 600;
      font-size: 1.5rem;
      position: absolute;
      top: 0;
      /*transform: translateY(-50%);*/
      color: var(--main-blue);
      cursor: pointer;
      right: 0;
      margin-right: -3rem;
       
      -webkit-font-smoothing: antialiased;
  }
  .itemz-table .item-wrap .act-btn i{
    color: var(--main-blue);
  }

  .itemz-table .item-row > [class*="col"] {
    border-right: 1px solid #dee2e6; /* Light grey, like Bootstrap tables */
    padding: 0.5rem;
   
  }

  .itemz-table .item-row > [class*="col"]:last-child {
    border-right: none; /* No border on the last column */
  }

  .itemz-table  .names-header>.row{
     border-bottom: solid 1px #eee ;
  }

  .itemz-table .names-header>.row > [class*="col"] {
    border-right: 1px solid #dee2e6; /* Light grey, like Bootstrap tables */
    padding: 0.6rem 0.5rem;
   
  }
  .itemz-table .names-header>.row >  [class*="col"]:last-child {
    border-right: none; /* No border on the last column */
    
  }

  .itemz-table .names-header .row > [class*="col"] {
    text-align: right;
  }

  .itemz-table .names-header .row > .col-md-6 {
    text-align: left; /* Keep 'Item Name & Description' left-aligned */
  }
  .itemz-table .main-head{
     border-bottom: solid 1px #eee ;
     padding: 15px;
     background-color: #f3f3f3;
  }

    .itemz-table #itemsContainer{
     
    /*padding: 15px;*/
  }
    

}


/* Scoped to .statmentPage */
.statmentPage .custom-add-row-btn {
  width: auto;
  padding-inline: 0.75rem; /* px-3 */
  height: auto;
  border: 1px solid #66b2ff;
  border-radius: 0.375rem;
  white-space: nowrap;
  box-shadow: none;
  transition: all 0.2s ease-in-out;

  background-color: #e6f0ff;
  color: #004080;
  justify-content: center;
}

/* Hover state */
.statmentPage .custom-add-row-btn:hover {
  border-color: #3399ff;
  background-color: #d0e5ff; /* lighter hover */
  color: #003366;
}

/* Focus state */
.statmentPage .custom-add-row-btn:focus {
  outline: none;
  box-shadow: none;
  border-color: #3399ff;
}

/* Icon color */
.statmentPage .icon-blue {
  color: #007bff;
}

/* Dropdown menu styling */
.statmentPage .dropdown-menu {
  border-radius: 0.375rem;
  border: 1px solid #66b2ff;
  background-color: #f8fbff;
  padding: 0.25rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Dropdown items */
.statmentPage .dropdown-item {
  color: #004080;
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.statmentPage .dropdown-item:hover {
  background-color: #e6f0ff;
  color: #003366;
}

.statmentPage .dropdown-item i {
  color: #004080;
}

.itemz-table .item-wrap .act-btn i{
  color: var(--steel-blue);
}

/* Dropdown container */
.custom-unit-dropdown {
  margin-top: 10px !important;
  border-radius: 3px;
  padding: 20px;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
  border: none !important;
}

.custom-unit-dropdown .option {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 2px;
  margin-top: 0.3rem;
}

.custom-unit-dropdown .option:hover {
  background-color: #ececfa;
}

.custom-unit-dropdown .selectize-dropdown-content {
  padding-right: 15px;
}

.custom-unit-dropdown .option.selected {
  background-color: #408dfb;
  color: #fff;
}

.statement_amount-adons{
  padding: 10px;
}
 
/* Remove number input arrows for all browsers */
.statement_amount-adons .tds-value::-webkit-outer-spin-button,
.statement_amount-adons .tds-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  text-align: center;
}

/* Hide number input spinners (Chrome, Safari, Edge) */
.item-row input[type="number"]::-webkit-outer-spin-button,
.item-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input spinners (Firefox) */
.item-row input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Modern browsers */
  text-align: center;
}
.item-row input[type="number"].amount{
  text-align: right;
}
.item-row input[type="number"].rate{
  text-align: right;
}

.tds-value {
  -moz-appearance: textfield;
}
.statement_amount-adons .close_icon::before {
  font-family: 'Material Design Icons';
  content: "\F015A"; /* Corrected to uppercase A */
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #e06a6ad6;
  cursor: pointer;
  left: 0; /* Pushes it to the right edge of parent */
  margin-left: -25px; /* Small gap to separate it from content */
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767.98px) {

  .statement_amount-adons .close_icon::before {

    top: 5px !important;
    left: 15px !important;
    /*left: auto;*/
    content: "\F015A"; /* Corrected to uppercase A */
  }
}
.statement_amount-adons .type-sel  .form-control,
.statement_amount-adons .type-sel  .form-select {
  height: calc(1.5em + .5rem + 2px); /* match heights */
}

 
.spinner-dots-grow {
  gap: 0.5rem;
}

.spinner-dots-grow .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: growDot 1.2s infinite ease-in-out;
}

.spinner-dots-grow .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.spinner-dots-grow .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes growDot {
  0%, 80%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.5);
    opacity: 1;
  }
}


.notyf__toast--bootstrap-success {
  border: 1px solid #d6e9c6;
}

.notyf__toast--bootstrap-success .notyf__message {
  color: #3c763d;
  font-weight: 500;
}

.notyf__toast--bootstrap-success i.bi {
  color: #3c763d !important;
}


/* SUCCESS */
.notyf__toast--success {
  color: #3c763d;
  border: 1px solid #d6e9c6;
}
.notyf__toast--success i.mdi {
  color: #3c763d;
}

/* WARNING */
.notyf__toast--warning {
  color: #8a6d3b;
  border: 1px solid #faebcc;
}
.notyf__toast--warning i.mdi {
  color: #8a6d3b;
}

/* DANGER */
.notyf__toast--danger {
  color: #a94442;
  border: 1px solid #ebccd1;
}
.notyf__toast--danger i.mdi {
  color: #a94442;
}

/* INFO */
.notyf__toast--info {
  color: #31708f;
  border: 1px solid #bce8f1;
}
.notyf__toast--info i.mdi {
  color: #31708f;
}



 
 



/* Scrollable content wrapper */
.content-wrapper {
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 80px; /* leave room for fixed footer */
}

 


.product-content-container, .product-wrapper, .settings-content-wrapper {
    display: flex;
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
}
 
.new-document {
    position: relative;
    background-color: #fff;
    flex-grow: 1;
}
.fixed-actions-bottom {
    box-shadow: 0 -4px 5px -3px rgba(0,0,0,.1);
    z-index: 1;
}

.column .content-body {
    flex-grow: 1;
    position: relative;
    
}
.new-document .content-body {
    padding: 0 20px 50px;
    overflow-x: auto;
}

.new-document .scrollbox {
    background: linear-gradient(#fff 30%,rgba(255,255,255,0)),0 100%,radial-gradient(farthest-corner at 50% 0,rgba(0,0,0,.1),transparent),0 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 100% 40px,100% 40px,100% 4px,100% 4px;
    background-attachment: local,local,scroll,scroll;
}

.column .fill {
    left: 0;
    right: 0;
}



 


 

.menu-title {
  font-weight: 500;
}

.add-btn {
  font-size: 1.25rem;
  color: #007bff;
  font-weight: bold;
  margin-left: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.add-btn:hover {
  background-color: #e6f0ff; /* soft blue-gray */
  color: #0056b3;           /* darker blue on hover */
  text-decoration: none;    /* ensure no underline */
}


@media (max-width: 991px) {
  .main-panel {
    margin-left: 0;
    width: 100%;
  }
}




.dropdown-toggle.no-caret::after {
  display: none !important;
}


.navbar .quick-create-btn {
  background-color: #0d6efd; /* Bootstrap primary blue */
  color: white;
  border: none;
  padding: 0.35rem 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar .quick-create-btn:hover {
  background-color: #0b5ed7; /* darker shade on hover */
  color: white;
}

 

.navbar .quick-create-btn .mdi-plus {
  font-size: 1.4rem; /* same as fs-1; adjust if needed */
  line-height: 1;
}

@media (max-width: 575.98px) {
  .navbar .quick-create-btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.9rem;
  }

  .navbar .quick-create-btn .mdi-plus {
    font-size: 1.1rem; /* slightly smaller icon for small screens */
  }
}


.navbar .navbar-menu-wrapper {
    background-color: #f7f7fe;
    border-bottom: 1px solid #f0f0f0;
}




.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    position: absolute;
    top: 50px;
}

@media (max-width: 991px) {
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
        width: calc(100% - 80px);
        left: auto !important;
        right: 10px !important;
    }
}

.quick-create-btn.dropdown-toggle::after {
  display: none !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .quick-create-btn i {
    margin-right: 0;
    vertical-align: middle;
}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown

.dropdown-item.biz-mg {
  display: flex;
  align-items: center;

  font-weight: 500;
  color: #0d6efd; /* Bootstrap primary */
  border-radius: 0.4rem;
  transition: all 0.2s ease-in-out;
   
}

 .dropdown-item.biz-mg i {
  font-size: 1.1rem;
  color: #0d6efd;
  transition: transform 0.2s ease, color 0.2s ease;
}

 .dropdown-item.biz-mg:hover {
  background-color: #e9f2ff;
  color: #084298;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

 .dropdown-item.biz-mg:hover i {
  transform: rotate(15deg) scale(1.1);
  color: #084298;
}


/* Show on medium and larger (≥768px), hide on small (<768px) */
 
/* Show on small screens (<768px), hide on medium and larger */
.business-sm-mgt {
  display: none;
}

@media (max-width: 768px) {
  .business-md-mgt   {
    display: none; !important;
  }
  .business-sm-mgt {
    display: block !important;
  }

}

.sidebar .nav:not(.sub-menu) {
    padding-bottom: 3rem;
}

 .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
    margin-left: 0; 
    margin: 0;
    border-radius: 0;
}
body:not(.sidebar-icon-only) .sidebar .nav-item.active .nav-link {
    color: #fff !important;
    background-color: #181c2e;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
     
    margin-right: auto;
    padding: 0.65rem 1rem;
    text-decoration: none;
}

.sidebar .business-logo-wrapper {
    max-width: 80%;
    padding: .3rem;
  margin: 30px auto;
  max-height: 100px;
  overflow: hidden;
  background-color: transparent; /* fallback if no image */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
}


/* Logo image */
.sidebar .business-logo {
  max-width: 100%;              /* never exceed wrapper width */
  max-height: 100%;             /* never exceed wrapper height */
  object-fit: contain;          /* keep full image visible */
  display: block;
  border-radius: 0;             /* no circular clipping */
  border: none;
}




 

/*nnvvvvvvvvvvvvv*/
 


.navbar .navbar-brand-wrapper {
  overflow: visible;
}


/* Business Switcher Styles scoped to navbar-brand-wrapper */


/* ================================================
   Sidebar Business Switcher Menu Styling
   ================================================ */

.navbar-brand-wrapper .business-toggler {
  cursor: pointer;
  color: #fff;
}

.navbar-brand-wrapper .business-avatar {
  width: 32px;
  height: 32px;
  background-color: #2d334c;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.navbar-brand-wrapper .business-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.navbar-brand-wrapper .business-avatar span {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #fff;
}

.navbar-brand-wrapper .business-name {
  font-weight: 600;
}

#sidebar .business-switcher-menu {
  width: 100%;
  max-height: 0; /* start hidden */
  overflow-y: hidden; /* hide content when collapsed */
  background-color: #212529; /* dark menu matching sidebar */
  color: #f8f9fa; /* light text for readability */
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
  padding: 0; /* remove padding when collapsed */
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
}

#sidebar .business-switcher-menu.show {
  max-height: 400px; /* or adjust based on menu content height */
  overflow-y: auto; /* enable scroll when expanded */
  padding: 0.5rem 0;
  opacity: 1;
}

/* WebKit (Chrome/Safari) */
#sidebar .business-switcher-menu::-webkit-scrollbar {
  width: 6px;
}
#sidebar .business-switcher-menu::-webkit-scrollbar-track {
  background: transparent;
}
#sidebar .business-switcher-menu::-webkit-scrollbar-thumb {
  background-color: rgba(100,100,100,0.5);
  border-radius: 4px;
}

/* Each business entry item */
#sidebar .business-switcher-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
 
  color: #f8f9fa;
  text-decoration: none;
}

#sidebar .business-switcher-menu .dropdown-item:hover,
#sidebar .business-switcher-menu .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.1); /* subtle highlight */
  color: #fff;
}

/* Business avatar inside menu item */
#sidebar .business-switcher-menu .business-avatar {
  width: 32px;
  height: 32px;
  background-color: #2d334c;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#sidebar .business-switcher-menu .business-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#sidebar .business-switcher-menu .business-avatar span {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #fff;
}

/* Business info container */
#sidebar .business-switcher-menu .business-info {
  flex: 1;
  overflow: hidden;
}

#sidebar .business-switcher-menu .business-display-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



#sidebar .business-switcher-menu .business-id {
  font-size: 0.75rem;
  color: #adb5bd; /* muted gray for IDs */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Manage Businesses link at bottom of menu */
#sidebar .business-switcher-menu .manage-businesses {
  display: block;
  padding: 0.5rem 1rem;
  color: #0d6efd; /* Bootstrap primary blue */
  text-decoration: none;
}

#sidebar .business-switcher-menu .manage-businesses:hover {
  background-color: rgba(13, 110, 253, 0.1);
}


body.sidebar-icon-only .navbar-brand-wrapper .business-name,
body.sidebar-icon-only .navbar-brand-wrapper #businessMenuCaret,
body.sidebar-icon-only #businessMenu {
  display: none !important;
}

body.sidebar-icon-only .navbar-brand-wrapper .business-avatar {
  margin: 0 auto;
}


 


.sidebar .nav {
  flex-wrap: nowrap;
}

.navbar-upgrade .upgrade-btn {
  border-width: 1px;
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  background-color: rgba(255, 193, 7, 0.1); /* light warning bg */
  height: 2.2rem; /* slightly less than 3rem navbar for spacing */
  font-weight: 500;
  white-space: nowrap;
}

.navbar-upgrade .upgrade-btn:hover {
  background-color: rgba(255, 193, 7, 0.2);
}

.navbar-upgrade .upgrade-btn i {
  font-size: 1rem;
}

/* Small screens: make text hidden, show only icon if needed */
@media (max-width: 576px) {
  .navbar-upgrade .upgrade-text {
    display: none;
  }
  .navbar-upgrade .upgrade-btn {
    padding: 0.3rem 0.5rem;
  }
}

.sidebar .mb-navbar-brand-hsc {
    color: var(--main-white);
    margin-right: 0;
     
    font-weight: 500;
    display: flex;
    align-items: center;
}
.sidebar .mb-navbar-brand-hsc .mb-app-title {
  display: inline-block;       /* or flex item */
  max-width: 100%;             /* respect parent width */
  white-space: nowrap;         /* prevent wrapping */
  overflow: hidden;            /* hide overflowed text */
  text-overflow: ellipsis;     /* add "…" when truncated */
  vertical-align: middle;
}


.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand-hsc {
    color: var(--main-white);
    margin-right: 0;
    width: 100%;
    padding: .25rem .85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.navbar-brand-hsc.business {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

/* Add mdi chevron-down via :after */
.mb-navbar-brand-hsc.business:after, .navbar-brand-hsc.business:after {
  font-family: "Material Design Icons";
  content: "\F0140"; /* mdi-chevron-down */
  font-size: 1rem;
  color: #fff;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

/* Rotate arrow when active */
.mb-navbar-brand-hsc.business.active:after, .navbar-brand-hsc.business.active:after {
  transform: rotate(180deg); /* points up */
}

 

.navbar-brand-hsc .app-icon {
  height: 30px; /* adjust as needed to fit within 70px navbar */
  width: 30px;
 margin-right: 0.5rem;
 flex-shrink: 0;       /* prevent icon from shrinking */
}

 
.navbar-brand-hsc .business_name {
  margin-left: 0.25rem;
  font-size: .95rem;
  margin-right: 0.5rem;
  color: #fff; /* adjust for your theme */
  white-space: nowrap;       /* ✅ prevent wrapping */
  overflow: hidden;          /* ✅ hide overflow */
  text-overflow: ellipsis;   /* ✅ show "..." when truncated */
  max-width: 180px;          /* ✅ adjust based on navbar width */
  display: inline-block;     /* required for ellipsis */
}

.sidebar .account-menu{
    position: relative;
    display: block;
}

/* Dropdown menu container */
ul.dropdown-menu-account {
  background-color: #e1e1e2;   /* light grey surface */
  border: 0;
  border-radius: 6px;
  padding: 0;
  border-radius: 0;
  max-width: var(--sidebar-width);
  overflow: hidden;
  min-width: 220px;
  margin-top: 0;
  box-shadow: 0 10px 16px -6px rgba(0,0,0,0.25);
  color: var(--main-grey-2, #333); /* fallback if variable not set */
  position: relative;           /* not absolute */
  display: none;                /* hidden by default */
}

/* Mobile sidebar override */
.sidebar.sidebar-offcanvas.active ul.dropdown-menu-account {
  max-width: var(--sidebar-width-sm); /* use mobile width variable */
}

/* Show state */
ul.dropdown-menu-account.show {
  display: block;               /* expands naturally in sidebar */
}
/* Each list item */
ul.dropdown-menu-account li {
  list-style: none;
  margin: 0;
}

/* Links inside items */
ul.dropdown-menu-account li a {
  display: block;
  padding: 0.6rem 1rem;
  color: #21263c;              /* dark text for contrast */
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
}


/* Hover effect */
ul.dropdown-menu-account li a:hover {
  background-color: #d0d0d2;   /* slightly darker grey on hover */
  color: #000;
}

/* Special heading item */
ul.dropdown-menu-account li.heading {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  background-color: #f0f0f0;
  cursor: default;
   border-bottom: 1px solid #ccc;
}
ul.dropdown-menu-account li.heading .user-name{
    color: var(--primary);
}

/* Differentiate key actions */

/* Logout item styling */
ul.dropdown-menu-account li.logout a {
  border-top: 1px solid #e35256;   /* subtle divider */
  background: #e35256;             /* strong red background */
  color: var(--main-white-1, #fff);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;                     /* space between icon and text */
  transition: background-color 0.2s ease;
}

/* Hover effect */
ul.dropdown-menu-account li.logout a:hover {
  background: #c0392b;             /* darker red on hover */
  color: #fff;
}





/* Common icon style */
ul.dropdown-menu-account li a:before {
  font-family: "Material Design Icons";
  font-size: 16px;
  line-height: 1;
  color: inherit; /* match text color */
  margin-right: 0.5rem;
}

/* Switch Business */
ul.dropdown-menu-account li.switch_business a:before {
  content: "\F1A8D"; /* mdi-briefcase-arrow-left (exit business) */
}

/* Account */
ul.dropdown-menu-account li.account a:before {
  content: "\F0006"; /* mdi-account */
}

/* Subscription */
ul.dropdown-menu-account li.subscription a:before {
  content: "\F0FEF"; /* mdi-credit-card-multiple-outline (subscription) */
}

/* Billing */
ul.dropdown-menu-account li.billing a:before {
  content: "\F19DC"; /* mdi-receipt-text-outline (billing) */
}

/* Logout */
ul.dropdown-menu-account li.logout a:before {
  content: "\F0343"; /* mdi-logout */
  color: var(--main-white-1, #fff);
}


/* Optional: subtle divider between groups */
ul.dropdown-menu-account li.switch_business {
  border-bottom: 1px solid #ccc;
}
ul.dropdown-menu-account li.subscription,
ul.dropdown-menu-account li.billing {
  border-top: 1px solid #ccc;
}



 

body.sidebar-icon-only .navbar-brand-hsc .app-title {
  display: none !important;
}

.fixed-actions-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1030;
  padding-top: 0.5rem; /* smaller vertical padding */
  padding-bottom: 0.5rem;
}

.fixed-actions-bottom .container-fluid {
  flex-wrap: wrap;
}

/* Adjust button font-size and padding for minimal height */
.fixed-actions-bottom .btn {
  font-size: 0.85rem;
  padding: 0.495rem 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 576px) {
 

  .app-title {
    display: none !important;
  }
  

  #fixed-actions-bottom .container-fluid {
    flex-direction: row;
    justify-content: space-between;
  }

  #fixed-actions-bottom .btn,
  #fixed-actions-bottom .btn-group {
    width: auto;
    flex: 1 0 auto;
  }

}




/* Default: hide mobile_header, show invoice-header */
.mobile_header {
  display: none;
}

.invoice-header {
  display: flex; /* or your default display value */
}

/* For small screens only (below md) */
@media (max-width: 767.98px) {
  .mobile_header {
    display: block;
  }

  .invoice-header {
    display: none;
  }
}


.invoice-header .btn-invoice-settings {
  background-color: transparent;
  color: #3f8cfb;
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size: 0.85rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.invoice-header .btn-invoice-close {
  background-color: transparent;
  color: #3f8cfb;
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size: 0.85rem;
  align-items: center;
}

.invoice-header .btn-invoice-close:hover{
  color: #111;
}

.invoice-header .btn-invoice-settings:hover {
  border-color: #3f8cfb;
  background-color: transparent;
  color: #3f8cfb;
}

@media (max-width: 575.98px) {
  .invoice-header h5 {
    margin-left: 0.5rem;
  }
}


.new-document .mobile_header {
    border-bottom: 1px solid #ddd;
    width: 100%;
}
 

.new-document .mobile_header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--main-white-3);
  font-size: 14px;
  text-align: center;
}

.new-document .mobile_header .title {
  font-weight: 500;
  font-size: 1rem;
}

.new-document .mobile_header .btn-invoice-settings {
  border: none;
  background: transparent;
  color: #3f8cfb;
  padding: 0.25rem 0.5rem;
}

.new-document .mobile_header .btn-invoice-settings:hover {
  background: rgba(63, 140, 251, 0.1);
  border-radius: 4px;
}

.new-document .mobile_header .btn-close-invoice {
  border: none;
  background: transparent;
  color: #a8a3a3;
}

.new-document .mobile_header .btn-close-invoice:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}





/* Mobile fixed footer for buttons */
.mobile-footer-fixed {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-footer-fixed {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
        background-color: #fff;
        border-top: 1px solid #e0e0e0;
        padding: 0.5rem 1rem;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 -1px 2px rgba(0,0,0,0.08);
    }

    .mobile-footer-fixed .btn {
        flex: 1;
        margin: 0 0.25rem;
    }
}



@media (max-width: 767.98px) {
  .nav-profile .dropdown-toggle::after {
    display: none !important;
  }
}


/* Desktop: show sidebar brand, hide mobile brand */
.navbar-brand-wrapper {
  display: flex;
}

.navbar-brand-mobile {
  display: none;
}



/* HEADER WRAPPER */
.nav-header-content {
    background: #f7f7fe;
    padding: 0 1rem;
    
}

/* On small screens (≤ 576px) */
@media (max-width: 576px) {
  .nav-header-content {
    padding-top: 0;       /* reduce top padding */
    padding-right: 1rem;  /* keep side padding if needed */
   /* padding-bottom: 0.8rem; *//* optional, adjust as desired */
    padding-left: 1rem;
  }
}


/* TITLE */
.nav-header-content .page-title {
    font-weight: 600;
    color: #2b2b42;
    font-size: 1.38rem; /* default */
}

/* BACK BUTTON */
.nav-header-content .back-btn {
    background: #ffffff;
    border: 1px solid #dcdced;
    color: #4a4a6a;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.nav-header-content .back-btn i {
    font-size: 1.1rem;
}

/* HEADER ACTION BUTTONS (desktop only) */
.nav-header-content .header-actions {
    display: flex;
}

/* BUTTON STYLES */
.nav-header-content .btn-primary {
    background: #4a4cf0;
    border-color: #4a4cf0;
}

.nav-header-content .btn-secondary {
    background: #c8c9dd;
    border-color: #c8c9dd;
    color: #fff;
}

/* ----------------------------- */
/* RESPONSIVE BEHAVIOR           */
/* ----------------------------- */

/* Small Screens */
@media (max-width: 576px) {

    /* Make title smaller */
    .nav-header-content .page-title {
        font-size: 1.15rem;
    }

    /* Hide right-side buttons */
    .nav-header-content .header-actions {
        display: none;
    }

    /* Make the back button icon-only (Bootstrap classes already help) */
    .nav-header-content .back-btn {
        padding: 0.3rem 0.4rem;
    }
}

/* Medium Screens */
@media (min-width: 577px) and (max-width: 991px) {

    .nav-header-content .page-title {
        font-size: 1.12rem;
    }
}

/* Large Screens */
@media (min-width: 992px) {

    .nav-header-content .page-title {
        font-size: 1.3rem;
    }
}




/* Mobile styles */
@media (max-width: 767.98px) {

  /* Hide desktop brand wrapper on small screens */
  .navbar-brand-wrapper {
    display: none !important;
  }

  /* Show mobile brand inside navbar-menu-wrapper */
  .navbar-brand-mobile {
    display: flex !important;
    align-items: center;
  }

  .navbar-brand-mobile .app-icon {
    height: 30px;
    width: auto;
    margin-right: 5px;
  }

  
  /* Adjust navbar-menu-wrapper width for full screen */
  .navbar-menu-wrapper {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    height: var(--nav-bar-height-sm);
  }

  /* Adjust toggle button margin */
  .navbar-toggler {
    margin-right: 10px;
  }
}

.navbar-menu-wrapper .mobile-sidenav-toggler{
  display: none;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1049; /* one less than sidebar z-index */
}
.mobile-side-brand{
    display: none;
  }

@media (max-width: 767.98px) {
  .navbar-menu-wrapper .mobile-sidenav-toggler{
    display: block;
  }

 .mobile-side-brand{
    display: flex;
  }

.sidebar-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0; /* keep it at left, transform handles hiding */
    width: var(--sidebar-width-sm);
    max-height: 100vh;
    overflow: auto;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
  }
 .sidebar-offcanvas.active {
    transform: translateX(0);
  }

  /* Show backdrop when sidebar is active */
  .sidebar-offcanvas.active ~ .sidebar-backdrop {
    display: block;
  }

} 

.mobile-brand-nav{
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mobile-side-brand {
  background-color: var(--sidebar-bg, #2b2b2b); /* Fallback to dark grey */
  color: #fff;
  border-bottom: 1px solid #0c0c2d;
  padding: 0.5rem 1rem;
  height: 56px;
  z-index: 1051;
}

.mobile-side-brand .mb-app-title {
  font-size: 1rem;
  font-weight: 600;
  margin-left: 8px;
  color: #fff;
}

.mobile-side-brand .app-icon {
  width: 40px;
  height: 40px;
}

.mobile-side-brand .btn-flat {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-side-brand .btn-flat:hover {
  color: #ddd;
}



/* Invoicely input group wrapper */
.invoicely-input-group {
    height: calc(var(--input-height, 38px) + 4px);
    display: flex;
    align-items: stretch; /* ensures children fill vertical space */
    border: 2px solid var(--input-border-color, #d7d7d9);
    border-radius: 0;
    overflow: hidden;
    background-color: var(--input-bg, #fff);
    transition: border-color 0.2s ease; /* no shadow */
    width: 100%;
}



/* Input inside group */
.invoicely-input-group input {
    border: none !important;
    outline: none;
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    background-color: transparent;
    color: var(--input-text-color, #333);
}

/* Reusable addon (prefix/suffix) */
.invoicely-input-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background-color: var(--input-border-color, #d7d7d9);
    font-size: 1rem;
    border-top: 0; /* wrapper border already handles top/bottom */
    border-bottom: 0;
}

/* Left addon: only right border */
.invoicely-input-addon:first-child {
    border-right: 2px solid var(--input-border-color, #d7d7d9);
}

/* Right addon: only left border */
.invoicely-input-addon:last-child {
    border-left: 2px solid var(--input-border-color, #d7d7d9);
}

/* Focus state: wrapper only, no shadow */
.invoicely-input-group:focus-within  {
    border-color: var(--input-focus-border-color, #adb5bd);
    outline: none;
    box-shadow: none;
}

/* Responsive: smaller border on small screens */
@media (max-width: 767.98px) {
    .invoicely-input-group {
        border-width: 1px;
    }
    .invoicely-input-addon:first-child {
        border-right-width: 1px;
    }
    .invoicely-input-addon:last-child {
        border-left-width: 1px;
    }
}



/* Base style for both input & textarea */
.invoicely-input,
.invoicely-textarea {
  border: 2px solid var(--input-border-color);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  width: 100%;
  color: var(--input-text-color, #333);
  background-color: var(--input-bg, #fff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Input specific */
.invoicely-input {
  height: calc(var(--input-height, 38px) + 4px);
}

/* Textarea specific */
.invoicely-textarea {
  min-height: 100px;
  resize: vertical; /* allow resizing only vertically */
}


/* Base invoicely textarea */
.invoicely-textarea {
  border: 2px solid var(--input-border-color);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  width: 100%;
  color: var(--input-text-color, #333);
  background-color: var(--input-bg, #fff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: none; /* disable manual resizing */
  overflow: hidden; /* hide scrollbars */
}

/* Optional autogrow addon */
.invoicely-autogrow {
  min-height: 60px;
  height: auto;
}

/* Focus states */
.invoicely-input:focus,
.invoicely-textarea:focus {
  border-color: var(--input-focus-border-color, #adb5bd);
  outline: none;
  box-shadow: none;
}


/* Base style for select */
.invoicely-select {
    -webkit-appearance: none; /* Remove default arrow on Safari/Chrome */
    -moz-appearance: none;    /* Remove default arrow on Firefox */
    appearance: none;
    border: 2px solid var(--input-border-color, #d7d7d9);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    width: 100%;
    height: calc(var(--input-height, 38px) + 4px);
    color: var(--input-text-color, #333);
    background-color: var(--input-bg, #fff);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='5' viewBox='0 0 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 10px 5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state */
.invoicely-select:focus {
    border-color: var(--input-focus-border-color, #adb5bd);
    outline: none;
    box-shadow: none;
}

/* Optional responsive: smaller border on small screens */
@media (max-width: 767.98px) {
    .invoicely-select {
        border-width: 1px;
    }
}





/* Optional: Match Select2 with invoicely-input style */
.invoicely-select + .select2-container .select2-selection {
  border: 2px solid var(--input-border-color, #ccc);
  border-radius: 0;
  height: calc(var(--input-height, 38px) + 4px);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  background-color: var(--input-bg, #fff);
  box-sizing: border-box;
}

.invoicely-select + .select2-container--default .select2-selection__rendered {
  line-height: 1.5; /* vertically center text */
}

.invoicely-select + .select2-container--default .select2-selection__arrow {
  height: 100%; 
}

.invoicely-select + .select2-container--bootstrap-5.select2-container--focus .select2-selection, 
.invoicely-select + .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--input-focus-border-color, #adb5bd);
    box-shadow: none;
}

/* Make placeholder text lighter */
.invoicely-input::placeholder {
  color: #adb5bd;   /* Bootstrap’s gray-500 */
  opacity: 1;       /* Ensure full visibility of chosen color */
  font-weight: 300; /* Optional: thinner weight for lighter feel */
}



.fixed-actions-bottom .btn-doc {
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem; /* btn-sm style */
  transition: background-color 0.2s ease;
}

.fixed-actions-bottom .btn-doc:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/*>>>>>>>>customize by doc type eg bill,invoice,*/
/* Document-type colors */





.bill-page .fixed-actions-bottom .btn-doc {
  background-color: var(--bill-color-main);
}
.bill-page .fixed-actions-bottom .btn-doc:hover {
  background-color: var(--bill-color-hover);
}

.quote-page .fixed-actions-bottom .btn-doc {
  background-color: var(--quote-color-main);
}
.quote-page .fixed-actions-bottom .btn-doc:hover {
  background-color: var(--quote-color-hover);
}
.invoice-page .fixed-actions-bottom .btn-doc {
  background-color: var(--invoice-color-main);
}
.invoice-page .fixed-actions-bottom .btn-doc:hover {
  background-color: var(--invoice-color-hover);
}


.statement_adons .note-box {
  background-color: #f0f5fa;
  
}
.statement_adons .custom-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: #686868; /* Bootstrap's red */
  font-size: 1.5rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  z-index: 10;
}

.statement_adons .custom-close-btn:hover {
  color: #222; /* darker red */
  opacity: 1;
}
 
 
 
.statement_adons .minimal-btn {
  background-color: #f9f9fb;
  border: transparent;
  color:#495057;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.statement_adons .minimal-btn:hover {
  background-color: #f0f2f4;
  color: #0a58ca;
  text-decoration: none;
}

.statement_adons .minimal-btn i {
  font-size: 1.1rem;
  line-height: 1;
  color: #0d6efd;
}
 
 /* Smooth slide animation */
.statmentPage .slide-toggle {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}

.statmentPage .slide-toggle.show {
  max-height: 500px; /* Should be greater than the content's height */
  opacity: 1;
}

.statmentPage .bill-attachments .slide-toggle {
  overflow: visible;
}

/* Attach Files Container */
.statmentPage .attach-files-container {
   min-height: 120px;
  background: #f9fbfc;
  padding: 20px 15px;
  transition: border-color 0.25s, background 0.25s;
  display: flex;
  flex-direction: column;
   
 
}
 
.statmentPage .attach-files-container .attach-files-label {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
}
.statmentPage .attach-files-container .attach-files-label .label-name{
    font-weight: 600;
}
.statmentPage .attach-files-container .attach-files-label .action-link{
    color: var(--text-muted);
    font-size: var(--font-size-2);
    color: var(--main-blue);
    text-decoration: underline;
}

.statmentPage .attach-files-container #queue_file_upload,
.statmentPage .attach-files-container #queue_file_upload_mobile {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 10px;
  padding-bottom: 10px;

  /* Optional smooth scrolling */
  scroll-behavior: smooth;
}

/* 🔹 Webkit browsers (Chrome, Edge, Safari) */
.statmentPage .attach-files-container #queue_file_upload::-webkit-scrollbar,
.statmentPage .attach-files-container #queue_file_upload_mobile::-webkit-scrollbar {
  width: 6px; /* thinner scrollbar */
}

.statmentPage .attach-files-container #queue_file_upload::-webkit-scrollbar-thumb,
.statmentPage .attach-files-container #queue_file_upload_mobile::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25); /* thumb color */
  border-radius: 4px;
}

.statmentPage .attach-files-container #queue_file_upload::-webkit-scrollbar-thumb:hover,
.statmentPage .attach-files-container #queue_file_upload_mobile::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4); /* darker on hover */
}

.statmentPage .attach-files-container #queue_file_upload::-webkit-scrollbar-track,
.statmentPage .attach-files-container #queue_file_upload_mobile::-webkit-scrollbar-track {
  background: transparent; /* optional */
}

/* 🔹 Firefox (uses different properties) */
.statmentPage .attach-files-container #queue_file_upload,
.statmentPage .attach-files-container #queue_file_upload_mobile {
  scrollbar-width: thin; /* makes it thinner */
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}


.statmentPage .attach-files-container .files-attach{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
/* The clickable/active area */

.statmentPage .attach-files-container .file-container{
  width: 100%;
}

.uploadifive-button.upload-box {
  border: 2px dashed #ccc;
  border-radius: 6px;
  background: #fafafa;
  position: relative;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in-out; /* smooth effect */
}

.uploadifive-button.upload-box:hover {
  border-color: #0d6efd;       /* Bootstrap primary */
  background: #f0f8ff;         /* light blue tint */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.uploadifive-button.upload-box .attach-inner {
  position: absolute;
  right: 0;
  left: 0;
  line-height: normal !important; /* reset */
  pointer-events: none; /* let clicks go to invisible file input */
}

.uploadifive-button.upload-box .attach-inner {
  display: flex;
  flex-direction: column; /* icon on top, text below */
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}

.uploadifive-button.upload-box .attach-text {
  font-size: 15px;
  font-weight: 500;
  color: #555;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px; /* space between icon & text */
}

.uploadifive-button.upload-box .attach-text i {
  font-size: 20px;
  color: #888;
}

#uploadifive-file_upload input[type=file] {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  right: 0 !important;
  font-size: inherit !important; /* or tie to parent height in JS */
  opacity: 0 !important;
  cursor: pointer;
}

/* Upload queue styling */
.file-container {
  margin-top: 12px;
}

.attach-inner .upload-box input{
  width: 100%;
}
/* Queue items */
.file-container .file-item {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-container .file-item.error{
    
    border: 1px solid #ee3c2a;
}
.file-container .filename {
  flex: 1;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Progress bar */
.file-container .progress-holder {
  flex: 1;
  margin: 0 0.5rem;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}
.file-container .progress-bar {
  height: 6px;
  width: 0%;
  background: #0d6efd;
  transition: width 0.3s ease;
}

/* Status + delete icon */
.file-container .status {
  margin-right: 0.5rem;
}
.file-container .cancel-file {
  color: #dc3545;
  cursor: pointer;
  font-size: 1.2rem;
}
.file-container .cancel-file:hover {
  color: #a71d2a;
}
.file-container .status .green{
  color: var(--bs-success);
}

 
/* Small screens (mobile) */
@media (max-width: 767.98px) {
  #addRowBtn {
    background-color: #f9f9fb;
    border: none !important;  /* no border */
    width: 100% !important;   /* full width */
    border-radius: 0.5rem;    /* softer corners if you like */
  }
}


/*  end >>>>>>>>>>><customize by doc type eg bill,invoice,*/




/*statement table listing styles */

 
 

.statement-table-container #options-strip .left,
.statement-table-container #options-strip .right {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* spacing between button groups */
  justify-content: flex-start;
}


/* ==============================
   BASE WRAPPER
================================ */

 


.statement-table-container .options-btn-base.active:hover {
  border-color: #bbb;
  background: #f7f7f7;
}

.statement-table-container .options-btn-base {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 2px solid #d1d5db; /* light grey (Tailwind gray-300) */
  border-radius: 4px;
  height: 38px;
  font-size: 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Active (when checkboxes selected) */
.statement-table-container .options-btn-base.active {
  background-color: #f9fafb; /* light grey background */
  border-color: #6b7280;     /* darker grey (gray-500) */
}

/* Optional: tweak icon color when active */
.statement-table-container .options-btn-base.active .btn-action i {
  color: #374151;                   /* slightly darker blue icon */
}


/* ==============================
   INNER <a> ACTION
================================ */
.statement-table-container .options-btn-base .btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  height: 100%;
  transition: background 0.2s;
  cursor: pointer;
}

.statement-table-container .options-btn-base .dropper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  height: 100%;
  transition: background 0.2s;
  cursor: pointer;
}

.statement-table-container .options-btn-base .btn-action.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.statement-table-container .options-btn-base .btn-action:hover {
  /*background: #f1f1f1;*/
}

/* ==============================
   1. DROPDOWN
================================ */
.statement-table-container .options-btn-base.btn-dropdown {
  position: relative;
}

.statement-table-container .options-btn-base.btn-dropdown .btn-action,
 .statement-table-container .options-btn-base.btn-dropdown .dropper {
  gap: 4px;
  min-width: 20px;
}
.statement-table-container .options-btn-base.btn-dropdown .dropper{
  background: #d7d7d9;
}
.statement-table-container .options-btn-base.btn-dropdown input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.statement-table-container .options-btn-base.btn-dropdown i {
  font-size: 18px;
  color: #666;
  transition: transform 0.2s;
}

.statement-table-container .dropper .mdi {
  transition: transform 0.25s ease; /* smooth rotation */
}

/* Dropdown menu */
.statement-table-container .options-btn-base .options-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  padding: 6px 0;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: none;
  -webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}



.statement-table-container .options-btn-base .options-menu a:hover {
  background: #f1f1f1;
}

.statement-table-container .options-btn-base.btn-dropdown.open .options-menu {
  display: block;
}


.btn-dropdown.menu-open .options-menu { display: block; }

/* ==============================
   2. DOUBLE BUTTONS
================================ */
.statement-table-container .options-btn-base.btn-double .btn-action {
  border-right: 1px solid #ccc;
  min-width: 54px;
}

.statement-table-container .options-btn-base.btn-double.active .btn-action {
  border-right: 1px solid #6b7280;
}

.statement-table-container .options-btn-base.btn-double .btn-action:last-child {
  border-right: none; /* no separator on last */
}

/* ==============================
   3. SINGLE BUTTON
================================ */
.statement-table-container .options-btn-base.btn-single .btn-action {
  min-width: 54px;
}

/* ==============================
   ICONS
================================ */
.statement-table-container .options-btn-base .btn-action i {
  font-size: 18px;
  line-height: 1;
}



/* Dropdown menu container */
.statement-table-container .options-menu.table_sorting {
  
  min-width: 220px;
  
}

/* Show when active (toggle via JS) */
.statement-table-container .options-btn-base .options-menu.show {
  display: block;
}
 

/* Menu heading */
.statement-table-container .options-btn-base .options-menu .menu-heading {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  color: #495057;
}

/* List reset */
.statement-table-container .options-btn-base .options-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menu items */
.statement-table-container .options-btn-base .options-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  font-size: 0.85rem;
  transition: background 0.2s ease;
}

/* Hover effect */
.statement-table-container .options-btn-base .options-menu ul li a:hover {
  background: #f8f9fa;
}

/* Sort icons (asc/desc) */
.statement-table-container .options-btn-base .options-menu .asc,
.statement-table-container .options-btn-base .options-menu .desc {
  margin-left: 6px;
  font-size: 0.85rem;
  color: #6c757d;
  cursor: pointer;
}

.statement-table-container .options-btn-base .options-menu .asc:hover,
.statement-table-container .options-btn-base .options-menu .desc:hover {
  color: #000;
}




/* Each button+input group */
.statement-table-container .options-btn-base.btn-double .btn-cup {
  display: flex;
  align-items: center;
  position: relative; 
}
.statement-table-container .options-btn-base.btn-double .btn-cup:first-child {
  border-left: none; /* no border on first */
}

/* Fix: allow SmartDropdownInput dropdown to expand */
.statement-table-container .options-btn-base.btn-double .btn-cup.has-input {
  overflow: visible !important;
  z-index: 10;
}



 

.statement-table-container .options-btn-base.btn-double .btn-cup .close-btn {
  position: absolute;
  right: 6px;        /* adjust as needed */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.statement-table-container .options-btn-base.btn-double .btn-cup .close-btn:hover {
  opacity: 1;
  color: #000;
}
 
.statement-table-container .btn-cup.has-input.expanded {
  width: 220px; /* expanded width */
  background: #fff;
  border-radius: 6px;
  padding-right: 25px; /* space for close btn */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.statement-table-container .btn-cup .smart-input-wrapper{
  border-color: transparent;

}
.statement-table-container .btn-cup.has-input .input-field {
  width: 0;
  opacity: 0;
  border: none;
  outline: none;
  background: transparent;
  flex-grow: 1;
  transition: all 0.25s ease;
  font-size: 14px;
}

.statement-table-container .btn-cup.has-input.expanded .input-field {
  width: 100%;
  opacity: 1;
  padding: 6px 8px;
}

.statement-table-container .btn-cup.has-input .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  cursor: pointer;
}

.statement-table-container .btn-cup.has-input .close-btn {
  position: absolute;
  right: 5px;
  background: none;
  border: none;
  color: #777;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.statement-table-container .btn-cup.has-input.expanded .close-btn {
  opacity: 1;
  pointer-events: auto;
}


/* Button (icon part) */
 

/* Input field (collapsed by default) */
.statement-table-container .btn-double .input-field {
  width: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
  outline: none;
  transition: width 0.3s ease, opacity 0.3s ease;
  font-size: 14px;
  padding: 4px 8px;
  padding: 0;
  background: transparent;
  height: 100%;
}



/* Expanded state */
.statement-table-container .btn-double .btn-cup.active .input-field {
  width: 160px;  /* expand to usable width */
  opacity: 1;
  padding: 0 8px;
}

/* Consistent height */
.statement-table-container .btn-double input,
.statement-table-container .btn-double .btn-action {
  height: 36px;
  line-height: 36px;
}


/* Expanded state */
.statement-table-container .options-btn-base .has_input.active .input-field {
  width: 160px;  /* expanded default width */
  opacity: 1;
  padding: 0 8px;
  border-left: 1px solid #ccc;
}

 


.statement-table-container .options-btn-base .options-btn-base.btn-dropdown .btn-action{
  background: #eee;
}


.statement-table-container .options-btn-base.btn-double .btn-cup {
  display: flex;
  align-items: stretch; /* stretch children to same height */
  position: relative;
  /*border: 2px solid #ccc;*/
  height: 100%;
  overflow: hidden;
}
/* Separator between btn-cups */
.statement-table-container .options-btn-base.btn-double .btn-cup + .btn-cup {
  border-left: 1px solid #ccc;
}

/* Icon wrapper full height */
.statement-table-container .options-btn-base .btn-cup .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 100%;  
  background: #d7d7d9;
}
 
 
.statement-table-container .btn-cup .icon-wrap i {
  font-size: 18px;
  color: #333;
}

 
.statement-table-container .options-btn-base .btn-cup.active{
  background: #f3f3f4;
 }

/* On input focus inside */
.statement-table-container .options-btn-base .btn-cup.active:focus-within {
  background: #fff;
}






/* Outer wrapper for tabs + table */
.statement-table-container .statement_table_wrapper {
  overflow: hidden; /* keeps radius clean */
}

/* Tabs bar shares wrapper border */
.statement-table-container .statement_table_wrapper .table_tabs {
  /*background-color: #f8f9fa;*/
  margin: 0;
}

/* Tabs container smaller width */
.statement-table-container .statement_table_wrapper .table_tabs .tabs-cont {
  border: 2px solid #dee2e6;
  border-bottom: none;
}

/* Nav links styled as segmented buttons */

.tds-settings .table_tabs .nav-link {
  min-width: 120px;
}
.statement_table_wrapper .table_tabs .nav-link {
    display: flex;
    text-align: center;
    border-right: 1px solid #dee2e6;
    border-radius: 0;
    padding: 0.84rem 0.75rem;
    font-size: 0.9rem;
    color: #495057;
    background-color: #f8f9fa;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.statement_table_wrapper .table_tabs .nav-link .info {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0.15rem 0.4rem;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #fff;
  background-color: #6c757d; /* default muted badge */
  border-radius: 999px;      /* pill shape */
}

.statement_table_wrapper .table-responsive{
  border: 2px solid var(--main-white-3);
}

/* Table border shares wrapper */
.statement_table_wrapper .table-responsive .table {
  margin-bottom: 0;
}



.statement_table_wrapper .table_tabs .nav-link:hover {
  background-color: #e9ecef;
}

.statement_table_wrapper .table_tabs .nav-link.active {
  background-color: #d1d1d2;
  
  font-weight: 500;
}







/* Container cell */
.statement-table-container table.statement-table td.statement_id {
  vertical-align: top;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* Date pill */
.statement-table-container table.statement-table td.statement_id span.date {
  background: var(--main-white-4);
  font-size: 12px;
  padding: 3px 6px 2px;
  min-width: 70px;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  margin-top: -2px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Document number (link as title) */
.statement-table-container table.statement-table td.statement_id a.title {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  margin-right: 6px;
}

.statement-table-container table.statement-table td.statement_id a.title:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

/* Custom title / description */
 

.statement-table-container table.statement-table td.statement_id .custom_title_meta {
  color: var(--text-dark);
}

/* Ensure long description breaks nicely */
.statement-table-container table.statement-table td.statement_id .description_meta {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  
  margin-top: 5px;
  white-space: normal;
  word-break: break-word;
}

/* Contact / recipient line */
.statement-table-container table.statement-table td.statement_id .title_meta {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.statement-table-container table.statement-table td.statement_id .title_meta a {
  color: var(--text-normal);
  text-decoration: none;
  cursor: pointer;
}

.statement-table-container table.statement-table td.statement_id .title_meta a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}


.statement-table-container table.statement-table td.statement_hash  {
    text-align: center;
    width: 50px;
    background: var(--main-white-5);
}
.statement-table-container table.statement-table tr {
    background: var(--main-white-1);
}

.statement-table-container table.statement-table tbody tr:last-child td {
    border-bottom: 0;
}
.statement-table-container table.statement-table tbody tr:first-child td{
    border-top: 0;
}


/* Limit width and truncate with ellipsis */
.statement-table-container table.statement-table td.statement_id a.title,
.statement-table-container table.statement-table td.statement_id .custom_title_meta,
.statement-table-container table.statement-table td.statement_id .description_meta {
  display: inline-block;        /* required for text-overflow */
  max-width: 220px;             /* adjust as needed */
  overflow: hidden;             /* hides extra text */
  white-space: nowrap;          /* single line only */
  text-overflow: ellipsis;      /* adds "…" */
  vertical-align: middle;
}

/* If you want description to wrap but limit lines instead */
.statement-table-container table.statement-table td.statement_id .description_meta {
  display: block;
  max-width: 300px;             /* optional width constraint */
}


.statement-table-container table.statement-table .fade {
    color: #a1a1a1;
    opacity: 1;
}

.statement-table-container table.statement-table td span.tag_meta {
    display: inline-block;
    font-size: 13px;
    font-family: "pn-r", "Open Sans", "Gill Sans MT", "Gill Sans", Corbel, Arial, sans-serif;
    position: relative;
    margin-left: 15px;
    min-width: 125px;
    text-align: left;
}






/* Pagination strip inside table container */
.statement-table-container .pagination-strip {
  border-top: 1px solid var(--border-color, #e0e0e0);
  background: var(--bg-light, #f9f9f9);
  padding: 10px 12px;
  font-size: 14px;
}

/* Pagination section */
.statement-table-container .pagination-section {
  flex-shrink: 0;
}

/* Page links */
.statement-table-container .pagination .page-link {
  color: var(--text-dark, #444);
  border-color: var(--border-color, #ddd);
}

.statement-table-container .pagination .page-item.active .page-link {
  background: var(--grey-700, #555);
  border-color: var(--grey-700, #555);
  color: #fff;
}

.statement-table-container .pagination .page-item.disabled .page-link {
  color: var(--text-muted, #aaa);
  background: var(--bg-light, #f5f5f5);
  pointer-events: none;
}

/* Results per page dropdown */
.statement-table-container .inline select {
  margin-left: 5px;
}

/* Export dropdown menu */
.statement-table-container .dropdown-menu {
  min-width: 130px;
  font-size: 14px;
  border-color: var(--border-color, #ddd);
}

.statement-table-container .dropdown-item {
  color: var(--text-dark, #444);
}

.statement-table-container .dropdown-item:hover {
  background: var(--bg-light, #f2f2f2);
}


.statement-table-container .table-loading {
  transition: opacity 0.3s ease;
}
.statement-table-container .table-loading.d-none {
  opacity: 0;
  visibility: hidden;
}


.statement-table-container .pre-list-table {
  position: relative; /* needed so loader can absolutely position inside */
  min-height: 200px;  /* ensures a min height while loading */
  background: #f8f9fa;
}

.statement-table-container .table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7); /* semi-transparent white overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* sits above table content */
}


.statement-table-container .options-btn-base.btn-double .btn-cup.search-wrap {
    display: flex;
    align-items: center;
    position: relative;
  }


#options-strip {
  flex-wrap: wrap; /* allows stacking on small screens */
}

/* Ensure sections behave properly */
#options-strip .left,
#options-strip .right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Hide mobile version by default */
.statement-table-container .options-btn-base.mobile {
  display: none;
}




@media (min-width: 768px) {
  /*for large screens*/


  .statement-table-container .tabs-responsive {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 70%;
    justify-content: flex-end;
}



}
/* Small screens: stack vertically */
@media (max-width: 768px) {
  #options-strip .left,
  #options-strip .right {
    width: 100%;           /* full width each */
    justify-content: center;
  }

  #options-strip {
    justify-content: center;
  }

  /* Optional: add spacing between the two stacked rows */
  #options-strip .left {
    margin-bottom: 0.75rem;
  }

  .statement-table-container .options-btn-base.desktop {
    display: none;
  }
  .statement-table-container .options-btn-base.mobile {
    display: flex;
     
  }

   .statement-table-container .search-b-wrap {
    width: 100%;
  
  }

 
 
 .statement-table-container .options-btn-base.search-b-wrap {
    flex-direction: column;          /* Stack vertical */
    align-items: stretch;            /* Stretch full width */
    width: 100%;                     /* Fill container */
    height: auto;                    /* Allow natural height */
    border: none;              /* ensure no wrapper border */
    background: transparent;
  }



  /* Optional: tighten icon spacing on mobile */
  .statement-table-container .options-btn-base.search-b-wrap .icon-wrap {
    width: 60px;
  }

  /* Optional: input expands fully beside icon */
  .statement-table-container .options-btn-base.search-b-wrap .input-field {
    flex: 1;
    width: 100%;
  }

  .statement-table-container .options-btn-base.search-b-wrap .btn-cup.has-input {
    width: 100%;
    height: 44px; /* taller for touch devices */
    margin-bottom: 8px;              /* Space between rows */
    border: solid 2px #ddd;
    margin-bottom: 10px;
  }

  .statement-table-container .options-btn-base.search-b-wrap .icon-wrap {
    width: 60px;
    min-width: 50px;
    height: 100%;
  }

  .statement-table-container .options-btn-base.search-b-wrap .input-field {
    font-size: 15px;
    padding: 8px 10px;
  }


  

  .tabs-responsive .dropdown-toggle {
    border: 2px solid #d1d5db;
    height: 38px;
    font-size: 14px;
    border-radius: 0;
    border-bottom: none;
    background-color: #transparent;
    color: #222;
  }

  .tabs-responsive .dropdown-menu {
    max-height: 260px;
    overflow-y: auto;
  }

  .tabs-responsive .dropdown-item.active {
    background-color: #0d6efd;
    color: #fff;
  }
}




/* Container above each target form/board */
.aside_alerts-container {
    margin-bottom: 15px;
}

/* Base alert */
.aside_alert-item {
    padding: 12px 14px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* When JS activates visibility */
.aside_alert-item.aside_show {
    opacity: 1;
    transform: translateY(0);
}

/* Success */
.aside_alert-success {
    background: #e8f6eb;
    border-left: 4px solid #28a745;
    color: #176c2f;
}

/* Info Alert */
.aside_alert-info {
    background: #e8f4fb;              /* light blue background */
    border-left: 4px solid #17a2b8;   /* blue accent border */
    color: #0c5460;                   /* dark teal text */
     
}

/* Error */
.aside_alert-error {
    background: #fdeaea;
    border-left: 4px solid #dc3545;
    color: #b10014;
}
/* Warning */
.aside_alert-warning {
    background: #fff8e5;              /* soft yellow background */
    border-left: 4px solid #ffc107;   /* amber accent border */
    color: #856404;                   /* dark golden text */
}


/* Close button */
.aside_alert-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    padding: 0;
    opacity: 0.7;
}

.aside_alert-close:hover {
    opacity: 1;
}


/* Scrollable content container below header */
.settings-page, .base-page {
    height: calc(100vh - 56px); /* adjust for header height */
    overflow-y: auto;
    padding-bottom: 60px; /* space for mobile footer */
}


.settings-page .iti, .base-page. iti{ width: 100%; }



  .settings-page .board, .base-page .board {
        background: white;
        /*box-shadow: 0 1px 2px rgba(0,0,0,0.1);*/
        margin-bottom: 15px;
        overflow: hidden;
        border: 2px solid var(--main-white-3); /* default: 1px for small screens */
    }

    .settings-page .invoicely-input, .settings-page .invoicely-textarea {
        border-radius: 0; 
        /*width: auto; */
        
    }



p.error {
    color: #dc3545;
}
.settings-page form p.error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    position: relative;
    padding-left: 1.25rem; /* space for icon */
    line-height: 1.2;
}

/* Add icon via ::before */
.settings-page form p.error::before {
    content: "\f071"; /* Unicode for mdi-alert-circle-outline */
    font-family: "Material Design Icons"; /* Ensure MDI font is loaded */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #dc3545;
}

/* Input with error border */
.settings-page form input.is-invalid,
.settings-page form textarea.is-invalid,
.settings-page form select.is-invalid,
.settings-page form .invoicely-input-group.is-invalid {
    border-color: #dc3545;
}

/* Optional: maintain red border on focus */
.settings-page form input.is-invalid:focus,
.settings-page form textarea.is-invalid:focus,
.settings-page form select.is-invalid:focus,
.settings-page form .invoicely-input-group.is-invalid:focus {
    outline: none;
    box-shadow: none;
    border-color: #dc3545;
}

 
     
   

    .settings-page .box_header, .base-page .box_header {
        padding: 12px 16px;
        display: flex;
        border-bottom: 1px solid var(--main-white-4);
        background-color: var(--main-white-4);
        justify-content: space-between;
    }

    .settings-section, .base-page .board-section{
        padding: 12px 16px; /* reduced padding */
        border-bottom: 1px solid #eee;
        transition: background-color 0.2s;
    }
    .settings-section-nb, .base-page .board-section-nb {
        padding: 12px 16px; /* reduced padding */
        transition: background-color 0.2s;
    }

    .settings-section.section-link:hover {
        background-color: #f8f9fa;
    }

    .settings-section a.section-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
        text-decoration: none;
    }

    .settings-section .right {
        color: #6c757d;
        font-size: 13px; /* slightly smaller for mobile */
        font-weight: normal;
    }

    .settings-page .delete-business, .settings-page .delete-team-member{
        font-size: 13px;
        font-weight: normal;
    }

    .settings-page .form-label {
        font-weight: 500;
    }

    .settings-page  .required-field::after {
        content: " *";
        color: #dc3545;
    }

    .settings-page .url-prefix-suffix {
        background-color: #e9ecef;
        padding: 6px 10px; /* reduced padding */
        border: 1px solid #ced4da;
        font-size: 14px;
    }

    

    /* Responsive adjustments for small screens */
    @media (max-width: 767.98px) {
        .settings-page .board {
            margin-bottom: 12px;
        }
        .settings-page .invoicely-input, .settings-page .invoicely-textarea {
            border-width: 1px;
            
        }


        .settings-page .board {
            border: 1px solid var(--main-white-3);
        }
       
        .settings-section {
            padding: 10px 12px;
        }
        .settings-section .right {
            font-size: 12px;
        }
        .settings-page .url-prefix-suffix {
            padding: 5px 8px;
            font-size: 13px;
        }
        .settings-page .d-grid > button {
            width: 100%; /* ensure buttons stay full-width on small screens */
        }
         
    }




/* Small-screen override for the Vanity URL input group */
@media (max-width: 767.98px) {
    .settings-page .vanity-url-group {
        /*width: 100%;
        margin-left: 0.5rem;
        margin-right: 0.5rem;*/
    }

    .settings-page .vanity-url-group .invoicely-input-group {
        width: 100% !important;   /* expand on small screens */
        max-width: 100% !important;
    }

    .settings-page .vanity-url-group .invoicely-input-group input {
        flex: 1 1 auto !important;  /* ensure proper stretch on small screens */
        width: 100% !important;
    }



}


 
 .settings-page .board label.form-label:not(.custom-label) {
    color: var(--main-grey-2);
    font-size: var(--font-size-1);
    margin-bottom: 5px;
    display: block;
}


.settings-page .section-link a{
    text-decoration: none;
    font-weight: 400;
}
.settings-page .section-link a:hover{
    text-decoration: none;
}
/* Flex container for left side */
.settings-page .section-link .left {
    display: flex;
    align-items: center;
    gap: 10px; /* space between icon and title */
    flex: 1;   /* take available space */
    color: var(--primary-1, #2676a5);
}

/* Icon container */
.settings-page .section-link .left .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;  /* fixed width for alignment */
    height: 22px;
}

/* Icon styling */
.settings-page .section-link .left .mdi {
    font-size: 20px;
    color: var(--main-grey, #6c757d);
}

/* Title styling */
.settings-page .section-link .left .title {
    font-weight: 500;
    line-height: 1.3;
}

/* Right side description */
.settings-page .section-link .right {
    color: #6c757d;
    font-size: 14px;
    white-space: nowrap;
}

/* Hide description on mobile */
@media (max-width: 600px) {
    .settings-page .section-link .right {
        display: none;
    }

    

    .settings-page .section-link .left .title {
        font-size: 16px;
    }

    .settings-page .section-link .left .icon {
        width: 24px;
        height: 24px;
    }

    .settings-page .section-link .left .mdi {
        font-size: 22px;
    }
}



.settings-page .invoicely-input-addon:first-child {
    border-right: none;
}

/* Right addon: only left border */
.settings-page .invoicely-input-addon:last-child {
    border-left: none;
}

/* Align label + info icon */
.settings-page .label-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-direction: row;
}

/* Make the icon clickable + positioned nicely */
.settings-page .label-row .info-icon {
    font-size: 16px;
    cursor: pointer;
    color: #6c757d;
}

.settings-page .label-row .info-icon:hover {
    color: #495057;
}


/* Large screen title row */
.settings-page .page-title-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* Page title text - minimal and smaller */
.settings-page .page-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-1);
    margin: 0;
}

.settings-page .box_header .htitle,.base-page .box_header .htitle{
  font-size: 1.2rem;
  margin-bottom: 0;
}
/* Back button styling */
.settings-page .back-btn {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.settings-page .back-btn i {
    font-size: 1rem;
}

/* Responsive icon/text inside back button */
.settings-page .back-btn .mdi-chevron-double-left {
    display: inline-block;
}
.settings-page .back-btn .mdi-arrow-left,
.settings-page .back-btn span {
    display: none;
}

/* Show full back text on medium and up */
@media (min-width: 768px) {
    .settings-page .back-btn .mdi-chevron-double-left {
        display: none;
    }
    .settings-page .back-btn .mdi-arrow-left,
    .settings-page .back-btn span {
        display: inline-block;
    }
}

/* Small screen title box (if used separately) */
.settings-page .page-title-sm {
    font-size: 0.85rem;
    font-weight: 500;
    color: #212529;
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}



.settings-page .invoicely-textarea {
    min-height: 110px;
    resize: vertical;
}

.settings-page .settings-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-1);
}








.settings-page  #settings_content{
   min-height: 250px;
}

.settings-page .preloader-board {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    overflow: hidden;
    border: 2px solid var(--main-white-3);
   
}


/* MAIN WRAPPER (IMAGE LEFT + OPTIONS RIGHT) */
.settings-page .client-type-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* IMAGE COLUMN */
.settings-page .client-image {
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-page .client-image img {
    display: none;
}

/* SHOW ONLY THE ACTIVE IMAGE */
.settings-page form[data-client-type="individual"] .client-image img.individual { display: block; }
.settings-page form[data-client-type="organization"] .client-image img.organization { display: block; }

 
/* OUTER BOX */
.settings-page .client-type-box {
    border: 2px solid #d3d3d3;
    width: 330px;
    border-radius: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* EACH ROW */
.settings-page .client-type-row {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    height: 40px;
    border-bottom: 1px solid #e0e0e0;
}

.settings-page .client-type-row:last-child {
    border-bottom: none;
}

/* HIDE REAL RADIO */
.settings-page .client-type-row input[type="radio"] {
    display: none;
}

/* LABEL TEXT */
.settings-page .label-text {
    flex: 0 0 90%;
    padding: 6px 12px;
    font-size: 15px;
    color: #333;
}

/* CHECKBOX AREA */
.settings-page .label-check {
    flex: 0 0 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #e0e0e0;
    height: 100%;  
}

/* TICK ICON */
.settings-page .tick-icon::before {
    content: "✔";
    font-size: 16px;
    color: #555;
    visibility: hidden;
}

/* SELECTED STYLE */
.settings-page .client-type-row input[type="radio"]:checked + .label-text {
    background: #fffacd; /* soft yellow */
    font-weight: 500;
}

.settings-page .client-type-row input[type="radio"]:checked ~ .label-check .tick-icon::before {
    visibility: visible;
}

/* HOVER */
.settings-page .client-type-row:hover .label-text {
    background: #f7f7f7;
}


.settings-page .client-type-wrapper[data-client-type="individual"] .client-image img.individual { display: block; }
.settings-page .client-type-wrapper[data-client-type="organization"] .client-image img.organization { display: block; }


/* Hide left-side images on small screens */
@media (max-width: 767.98px) {
    .settings-page .client-image {
        display: none !important;
    }

    /* Optional: Let the radio box fill full width */
    .settings-page .client-type-wrapper {
        justify-content: center;
    }
}


.settings-page .sub_notice {
    font-size: 14px;
    color: #555;
    margin-top: 20px;
    margin-bottom: 0;
}

.settings-page .sub_notice a {
    color: var(--primary-1);         /* Bootstrap primary link color */
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
}

.settings-page .sub_notice a:hover {
    text-decoration: underline;
    color: var(--primary-hover);         /* darker shade */
}
 

.settings-page .custom-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0.5rem;
    position: relative;
}

/* Inputs stretch equally */
.settings-page .custom-field-key,
.settings-page .custom-field-value {
    flex: 1;
}

/* Remove button for large screens */
.settings-page .custom-item-remove-btn {
    flex: 0 0 auto;
    
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #dc3545;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

/* Hover effect for large screens */
@media (min-width: 768px) {
    .settings-page .custom-item-remove-btn:hover {
        background-color: #f5c2c7; /* slightly darker on hover */
    }
}

/* Small screens */
@media (max-width: 767.98px) {
    .settings-page .custom-field-row {
        flex-direction: column;
        padding: 0.75rem;
        padding-top: 2rem;
        background-color: #f9f9f9;
        border-radius: 6px;
    }

    .settings-page .custom-item-remove-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        padding: 0;
        width: 24px;
        height: 24px;
        font-size: 1rem;
        line-height: 1;
        text-align: center;
        border-radius: 50%;
        background-color: transparent; /* no bg on small screens */
        color: #dc3545;
        font-weight: bold;
        cursor: pointer;
    }

    /* Show × symbol instead of text */
    .settings-page .custom-item-remove-btn::after {
      font-family: 'Material Design Icons';
         content: "\F0156";
      font-weight: 400;
    }

    .settings-page .custom-item-remove-btn span {
        display: none; /* hide inner text */
    }

    /* Remove hover bg on small screens */
    .settings-page .custom-item-remove-btn:hover {
        background-color: transparent;
    }

    .settings-page .custom-field-key,
    .settings-page .custom-field-value {
        width: 100%;
    }
}



.customize-settings-tabs {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;        /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    padding-bottom: 0.25rem; /* space for scroll bar */
    border-bottom: solid 2px #eee;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
}

.customize-settings-tabs .tab-btn {
    flex: 0 0 auto;          /* prevent buttons from shrinking */
    white-space: nowrap;     /* keep text on one line */
    border-radius: 0px;
    padding: 0.7rem 1.2rem;
}

/* Active tab styling */
.customize-settings-tabs .tab-btn.active {
    font-weight: 600;
    border-bottom: 2px solid #007bff;
    color: #007bff;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .customize-settings-tabs  {
        gap: 0.55rem;
    }
    .customize-settings-tabs .tab-btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }
}


.swatch-square {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.hex {
  font-size: 0.85rem;
  color: #555;
}
#schemePreview .d-flex {
  padding: 4px 0;
}



.payment-settings .form-check-label .mdi-information-outline {
    margin-left: 6px;
    cursor: pointer;
    font-size: 16px;
    vertical-align: middle;
}


.payment-settings .existing-accounts .account-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #ddd;
 
  margin-bottom: 12px;
  background: #f9f9f9;
}
.payment-settings .existing-accounts .account-row.default-account {
    border: 1px solid #4caf50;          /* green border */
    background: #f3fff5;                /* soft green background */
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.25);
    position: relative;
    transition: all 0.25s ease;
}

.payment-settings .account-info {
  flex: 1;
  font-size: 0.95rem;
}

.payment-settings .account-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.payment-settings .account-provider {
  color: #666;
  font-style: italic;
  margin-bottom: 4px;
}

.payment-settings .account-identifier {
  color: #333;
}

.payment-settings .account-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.payment-settings .default-radio {
  font-size: 0.85rem;
  color: #444;
}

.payment-settings .default-radio input[type="radio"] {
  margin-right: 4px;
}

.payment-settings .gateway {
  color: var(--main-green);
  font-weight: bold;
}

/* Default (desktop / larger screens) */
.payment-settings .default-switch {
    margin-top: 10px;
    display: flex;
    align-items: center;   /* keep label inline with switch */
    gap: 6px;
    flex-direction: row;   /* inline by default */
}

/* Small screens (mobile) */
@media (max-width: 767.98px)  {
  .payment-settings .default-switch {
      margin-top: 10px;
      display: flex;
      align-items: flex-end;  /* stack neatly */
      gap: 6px;
      flex-direction: column;   /* switch above label */
  }
}

/* Container for the toggle */
.payment-settings .toggle-switch {
    position: relative;
    display: inline-flex;   /* inline-flex keeps label inline */
    align-items: center;    /* vertically center slider + text */
    gap: 6px;               /* space between slider and label */
    cursor: pointer;
}

/* Smaller dimensions */
.payment-settings .toggle-switch {
    width: 44px;   /* reduced width */
    height: 18px;  /* reduced height */
}

/* Hide default radio */
.payment-settings .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track */
.payment-settings .slider {
    position: relative;
    background-color: #ccc;
    border-radius: 18px;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s;
}

/* The knob */
.payment-settings .slider::before {
    content: "";
    position: absolute;
    height: 14px;   /* smaller knob */
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Checked state */
.payment-settings .toggle-switch input:checked + .slider {
    background-color: var(--main-blue);
}

.payment-settings .toggle-switch input:checked + .slider::before {
    transform: translateX(18px); /* adjusted for smaller width */
}

/* Inline label */
.payment-settings .toggle-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

 

.payment-settings .payment-providers .info-icon {
   font-size: 0.9rem;
  color: #007bff;
  margin-left: 4px;
}


/* Integration info styling */
.payment-settings .integration-info {
  display: block;
  padding: 6px 10px;
  border-left: 3px solid #ccc;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: .7rem;
}

/* Highlight auto/gateway providers */
.payment-settings .integration-info.auto-mode {
  border-left-color: #28a745;
  color: #1e7e34;
  font-weight: 500;
}

/* Highlight auto providers inside dropdown */
.payment-settings #provider option[data-supports="true"] {
  font-weight: 600;
  color: #1e7e34;
}

/* Tooltip icon styling */
.payment-settings .info-icon {
  cursor: pointer;
  font-size: 1rem;
  color: #6c757d;
  margin-left: 4px;
}

.payment-settings .info-icon:hover {
  color: #000;
}





/* Scope everything to the statement templates form */
.statement-templates-form .template-board {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}


.statement-templates-form .template-option {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 2px solid transparent;
  
  padding: 12px;
  transition: all 0.25s ease;
  background-color: #f9f9f9;
}


.statement-templates-form .template-option input[type="radio"] {
    display: none;
}

.statement-templates-form .template-option .thumb {
    width: 160px;
    aspect-ratio: 248 / 351;   /* maintain PDF portrait ratio */
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.statement-templates-form .template-option .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.statement-templates-form .template-option .template-label {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    color: #333;
}

.statement-templates-form .template-option:hover {
    border-color: #bbb;
    background-color: #f0f8ff; /* light hover background */
}

/* ✅ Selected option more pronounced */

/* ✅ Enhance the whole option when selected */

/* Hover effect */
.statement-templates-form .template-option:hover {
  border-color: #bbb;
  background-color: #f0f8ff;
}

/* Selected state — apply to the whole card */
.statement-templates-form .template-option input[type="radio"]:checked ~ .template-label,
.statement-templates-form .template-option input[type="radio"]:checked ~ .thumb {
  /* keep thumb/label tweaks if you want */
}

.statement-templates-form .template-option input[type="radio"]:checked {
  /* nothing here, but we need a hook */
}

/* Use :has() to style the parent when its radio is checked */
.statement-templates-form .template-option:has(input[type="radio"]:checked) {
  background-color: #eaf3ff;
  box-shadow: 0 0 0 3px #007bff33;
   
}



/* ✅ Small screens: horizontal scroll */
@media (max-width: 768px) {
    .statement-templates-form .template-board {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    .statement-templates-form .template-option {
        flex: 0 0 auto;
        margin-right: 1rem;
    }
}

 




/* Branding row: flex horizontal by default */
.graphics-form .branding-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* On small screens, stack vertically and center */
@media (max-width: 767px) {
 .graphics-form .branding-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .2rem;
    margin-bottom: 0.2rem;
  }
}

/* Image containers */
.graphics-form .icon_container,
.graphics-form .logo_container,
.graphics-form .logo_statement_container {
  border: 1px solid var(--input-border-color);
  background: url(../images/assets/transparent_bg_bit.png) repeat;
  box-shadow: inset 0 0 8px #ccc;
  -moz-box-shadow: inset 0 0 10px #ccc;
  display: block; /* block instead of inline-block */
 overflow: hidden;
  margin-right: 0;
}

.graphics-form .icon_container img,
.graphics-form .logo_container img,
.graphics-form .logo_statement_container img {
  max-width: 100%;
  max-height: 100%;
       /* fills box, cropping if needed */
  display: inline-block;
}


/* On large screens (≥992px), add right margin */
@media (min-width: 767px) {
  .graphics-form .logo_container,
  .graphics-form .icon_container,
  .graphics-form .logo_statement_container {
   /* margin-right: 1rem;*/ /* same as Bootstrap's .me-3 */
      display: inline-block;
    text-align: right;

  }


}

 
 /* Center images inside containers */
.graphics-form .icon_container img,
.graphics-form .logo_container img,
.graphics-form .logo_statement_container img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* On large screens (≥992px), add right margin and align right */
@media (min-width: 992px) {
  .graphics-form .logo_container,
  .graphics-form .icon_container,
  .graphics-form .logo_statement_container {
   /* margin-right: 1rem;*/ /* same as Bootstrap's .me-3 */
    display: inline-block;
    text-align: right;
  }
}

/* On small screens (<992px), center containers */
@media (max-width: 991px) {
  .graphics-form .logo_container,
  .graphics-form .icon_container,
  .graphics-form .logo_statement_container {
    display: block;
   /* margin: 0 auto 1rem auto;*/ /* center + add bottom spacing */
    text-align: center;

  }


}


 


/* Specific sizes */
.graphics-form .icon_container {
  width: 64px;
  height: 64px;
}

.graphics-form .logo_container {
  width: 225px;
  height: 225px;
  max-width: 100%;
}

.graphics-form .logo_statement_container {
  width: 450px;
  height: 225px;
  max-width: 100%;
}



/* Controls area */
.graphics-form .branding-controls {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;   /* align items to the left */
  flex-wrap: wrap;               /* allow wrapping on small screens */
  gap: 12px;                     /* ✅ consistent gap between children */
}

/* Remove button */
.graphics-form .remove_btn {
  display: inline-block;
  background: #e35256;
  width: 100px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #d43f3a;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover state */
.graphics-form .remove_btn:hover {
  background: #c9302c;
  border-color: #ac2925;
}



/* Size notes */
.graphics-form small {
  display: block;
  margin-top: 5px;
  color: #666;
 
}


@media (max-width: 767px) {
  .graphics-form .branding-controls {
    align-items: center;
    margin-top: 10px;
  }
  .graphics-form small {  text-align: center; }
 
  .graphics-form .branding-controls {
    flex-direction: column;   /* stack vertically on small screens */
    align-items: stretch;     /* buttons take full width */
    gap: 8px;                 /* slightly smaller gap */
  }

  .graphics-form .remove_btn {
    width: 100%;              /* full width button on mobile */
    margin-left: 0;
  }
}


/* Upload button */
.graphics-form .upload-btn {
  display: inline-block;
  padding: 0 auto;
  font-size: 0.9rem;
  border: 1px solid #007bff;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  position: relative;
}

.graphics-form .upload-btn:hover {
  background-color: #0056b3;
}

.graphics-form .upload-btn .attach-inner {
  position: absolute;
  right: 0;
  left: 0;
  line-height: normal !important; /* reset */
  pointer-events: none; /* let clicks go to invisible file input */
}

.graphics-form .upload-btn .attach-inner {
  display: flex;
  flex-direction: column; /* icon on top, text below */
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}

.graphics-form .upload-btn .attach-text {
  font-size: 14px;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px; /* space between icon & text */
}

.graphics-form .upload-btn .attach-text i {
 
  color: #fff;
}

/* Spinner indicator */

.graphics-form  .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid #fff;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.graphics-form  .spinner.hidden {
  display: none;
}

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


/* Target only subscription-required modals */
 
.visibility_hidden_absolute{
  display: none;
  position: absolute;
}

.modal .subscription-required .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
   
}
.modal .subscription-required .text_info{
  color: var(--text-muted);
}

.modal .subscription-required .modal-body .list-group {
  border: none;
  border-radius: 0;
}

.modal .subscription-required .list-group-item {
  border: none;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}

.modal .subscription-required .list-group-item i.mdi {
  font-size: 1.21rem;
  color: var(--primary); /* green check */
  margin-right: 0.5rem;
}

.modal .subscription-required .btn-primary {
  background: #007bff;
  border: none;
  font-weight: 500;
  transition: background 0.2s ease-in-out;
}

.modal .subscription-required .btn-primary:hover {
  background: #0056b3;
}

.modal .subscription-required .btn-secondary {
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
}

.modal .subscription-required .sbd_text {
  font-size: 0.85rem;
  margin-left: 0.5rem;
  color: var(--text-muted);
}
.modal .subscription-required .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}



.notes_emails .email-item {
    display: flex;
    justify-content: space-between;
    
    align-items: center;
    flex-wrap: wrap;
    
    border-bottom: 1px solid #eee;
    padding: 1.25rem 1.0rem;
}
 
/* Remove border if it's the last item in a board */
.notes_emails .board .email-item:last-child {
    border-bottom: none;
}

/* Also works if there's only one item */
.notes_emails .board .email-item:only-child {
    border-bottom: none;
}


.notes_emails .email-info {
    flex: 1 1 auto;
    max-width: calc(100% - 100px); /* leave space for button */
}

.notes_emails .email-title {
    font-weight: 400;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--primary-1);
}

.notes_emails .email-info p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    word-wrap: break-word;
}

.notes_emails .email-action {
    flex: 0 0 auto;
    margin-left: 1rem;
}

.notes_emails .email-action .btn {
    min-width: 80px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .notes_emails .email-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .notes_emails .email-action {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    .notes_emails .email-action .btn {
        min-width: auto;
        padding: 0.25rem 0.5rem;
        border: none;
        background: #f1f1f1;
    }
}

/* Optional hover effect */
.notes_emails .email-item:hover {
    background-color: #f9f9f9;
}


/* Right-align the entire switch block */
.enm_modal .form-check.preview-toggle {
  display: flex;
  justify-content: flex-end;     /* push to the right */
  align-items: center;
  gap: 0.5rem;
}

/* Reset Bootstrap's absolute/negative margins so we can control position */
.enm_modal .form-check-input {
  position: static;
  margin-left: 0;
}

/* Also reset the extra negative margin applied by .form-switch */
.enm_modal  .form-switch .form-check-input {
  margin-left: 0;
}

/* Make label clean beside switch */
.enm_modal  .form-check-label {
  margin-left: 0;
  color: var(--text-muted);
  font-weight: 500;
}



/* Base style for clickable placeholder badges */
.enm_modal .placeholder-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  background-color: transparent;      /* transparent background */
  color: #495057;                      /* neutral text */
  border: 1px solid #ced4da;           /* subtle border */
  border-radius: 999px;                /* pill shape */

  padding: 0.25rem 0.5rem;             /* compact spacing */
  line-height: 1;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

/* Hover/focus states */
.enm_modal .placeholder-btn:hover,
.enm_modal .placeholder-btn:focus {
  color: #212529;
  border-color: #adb5bd;
  background-color: rgba(0,0,0,0.03);
  outline: 0;
}

/* Active (pressed) state */
.enm_modal .placeholder-btn:active {
  background-color: rgba(0,0,0,0.06);
  border-color: #9aa1a7;
}

/* Optional: make them look consistent inside flex-wrap containers */
.enm_modal #placeholderList .placeholder-btn {
  margin: 0.125rem;
}

/* Optional: icon slot support (if you add an icon later) */
.enm_modal .placeholder-btn .icon {
  font-size: 0.9em;
  opacity: 0.7;
}


.enm_modal .placeholders-list {
    padding: 10px;
    background: #f1f2f27d;
}

.hidden{
  display: none!important;
}
.visible{
  display: block!important;
}


#add-payment-account-form .provider-details {
  margin-top: 1rem;
}

#add-payment-account-form .provider-details h6 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

#add-payment-account-form .provider-details ul {
  padding-left: 1.2rem;
}

#add-payment-account-form .provider-details p {
  margin-bottom: 0.5rem;
}






/* Shared style for all status tags */

.statement-table .tag.clean {
  padding: 8px 5px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  text-align: center;
  min-width: 65px;

  /* fallback background */
  background-color: #222;  
  /* fallback text color */
  color: #fff;

  /* ensure smooth override transition */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ✅ Status-specific overrides */
.statement-table .tag.clean.doc-status-draft, .statmentPage .statement_status.doc-status-draft { background: #9e9e9e; color: #fff; }
.statement-table .tag.clean.doc-status-sent, .statmentPage .statement_status.doc-status-sent { background: #2196f3; color: #fff; }
.statement-table .tag.clean.doc-status-viewed, .statmentPage .statement_status.doc-status-viewed { background: #03a9f4; color: #fff; }
.statement-table .tag.clean.doc-status-partially_paid, .statmentPage .statement_status.doc-status-partially_paid { background: #ffb300; color: #000; }
.statement-table .tag.clean.doc-status-paid, .statmentPage .statement_status.doc-status-paid { background: #4caf50; color: #fff; }
.statement-table .tag.clean.doc-status-overdue, .statmentPage .statement_status.doc-status-overdue { background: #d32f2f; color: #fff; }
.statement-table .tag.clean.doc-status-void, .statmentPage .statement_status.clean.doc-status-void { background: #795548; color: #fff; }
.statement-table .tag.clean.doc-status-accepted, .statmentPage .statement_status.doc-status-accepted{ background: #4caf50; color: #fff; }
.statement-table .tag.clean.doc-status-rejected, .statmentPage .statement_status.doc-status-rejected{ background: #ff9800; color: #000; }
.statement-table .tag.clean.doc-status-expired, .statmentPage .statement_status.doc-status-expired { background: #e35256; color: #fff; }


/*end statement listing table styles */


/* M-Pesa Button */
.mpesaButton {
  background: #6AAE2D;       /* Safaricom green */
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 6px;        /* reduced radius */
  font-size: 18px;
  border: 1px solid #5c9a27; /* subtle border */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* softer shadow */
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.mpesaButton:hover {
  background: #78b738;       /* lighter green on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.mpesaButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* PayPal Button */
.paypalButton {
  background: #003087;       /* PayPal deep blue */
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 6px;        /* reduced radius */
  font-size: 18px;
  border: 1px solid #002570; /* subtle border */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.paypalButton:hover {
  background: #0043a6;       /* lighter blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.paypalButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


    body.body_pay_invoice{
        background: #f1f2f7;
    }



.pay_invoice .business-card {
  display: flex;
  align-items: center;
  justify-content: center; /* center horizontally */
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 0.5rem 0;
}

.pay_invoice .business-card img {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  margin-right: 0.75rem;
  object-fit: cover;
}

.pay_invoice .business-card .business-name {
  font-weight: 600;
  font-size: 1.3rem;
  color: #333;
}

/* Responsive tweak */
@media (max-width: 576px) {
  .pay_invoice .business-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pay_invoice .business-card img {
    margin: 0 0 0.5rem 0;
  }
}


  .pay_invoice .payment-card {
    max-width: 720px;
    margin: 0 auto;
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  
.pay_invoice .pay-invoice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* allows stacking on small screens */
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.pay_invoice .pay-invoice-head a.btn {
  margin-right: auto; /* push link to the far left */
}

.pay_invoice .pay-invoice-head h2 {
  margin: 0;
  font-weight: 600;
  font-size: 1.4rem;
  color: #333;
  text-align: right;
}

/* Responsive tweak: stack on small screens */
@media (max-width: 576px) {
  .pay_invoice .pay-invoice-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .pay_invoice .pay-invoice-head h2 {
    text-align: left;
    margin-top: 0.75rem;
    font-size: 1.2rem;
  }
}

  .pay_invoice .amount-display {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.5rem;
  }
  

.pay_invoice .status-text {
  font-weight: 600;
}

.pay_invoice .status-paid {
  color: #2e7d32; /* green */
}

.pay_invoice .status-partial {
  color: #1e88e5; /* blue */
}

.pay_invoice .status-pending {
  color: #856404; /* amber/brown */
}

.pay_invoice .status-overdue {
  color: #c62828; /* red */
}

.pay_invoice .status-cancelled {
  color: #6c757d; /* gray */
}

.pay_invoice .status-other {
  color: #555; /* neutral */
}


.pay_invoice .payment_options {
  margin-top: 2rem;
}
.pay_invoice .payment-option {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.pay_invoice .payment-option h5 {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.pay_invoice .partial-pay-info{
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}
.pay_invoice .head-info {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.pay_invoice .head-info p {
  margin: 0.25rem 0;
  font-size: 0.95rem;
  color: #555;
}

.pay_invoice .head-info .from-line,
.pay_invoice .head-info .invoice-line {
  font-weight: 500;
  color: #333;
}

.pay_invoice .amount-display {
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: 0.75rem;
  color: #222;
}

.pay_invoice .amount-display {
  background: #fdfdfd;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.95rem;
}

 
.pay_invoice .amount-display p {
  margin: 0.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pay_invoice .amount-display strong {
  color: #333;
}

.pay_invoice .amount-display .invoice-total {
  color: #555;
}

.pay_invoice .amount-display .paid-to-date {
  color: #2e7d32; /* green tone */
  font-weight: 600;
}

.pay_invoice .amount-display .amount-due {
  color: #c62828; /* red tone */
  font-weight: 700;
}


body.headless .page-body-wrapper {
    padding-top: 0;
}