/* -------------------------------------------------------------------------- */
/* 1. RESET & BASE STYLES                                                     */
/* -------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --white: #fff;
    --border: #E5E7EB;
    --primary-color: #016749;
    --secondary-color: #E8BB02;
    --background-color: #F5F7FA;
    --table-header-bg:#F9FAFB;
    --table-header:#4A5565;
    --text-color:#101828;
    --black: #000;
    --white: #fff;
    --primary: #4abd99;
    --secondary: #5ac4a3;
    --buttonGradientPrimary: #3ba986;
    --buttonGradientSecondary: #047e58;
    --modalHeading: #2d9e7a;
  }

  /* a {
      text-decoration: none !important;
      color: #fff !important;
  } */


  /* -------------------------------------------------------------------------- */
  /* 2. FONT DECLARATIONS                                                       */
  /* -------------------------------------------------------------------------- */
  @font-face {
    font-family: alexandriaFont-ExtraLight;
    src: url("../fonts/webfonts/Alexandria-ExtraLight.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: alexandriaFont-SemiBold;
    src: url("../fonts/webfonts/Alexandria-SemiBold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Thin;
    src: url("../fonts/webfonts/Poppins-Thin.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Light;
    src: url("../fonts/webfonts/Poppins-Light.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Regular;
    src: url("../fonts/webfonts/Poppins-Regular.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-Bold;
    src: url("../fonts/webfonts/Poppins-Bold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: poppinsFont-SemiBold;
    src: url("../fonts/webfonts/Poppins-SemiBold.ttf");
    font-display: swap;
  }

  @font-face {
    font-family: arial-regular;
    src: url("../fonts/webfonts/ARIAL-Regular.TTF");
  }
  @font-face {
    font-family: arial-Bold;
    src: url("../fonts/webfonts/ARIAL-Bold.TTF");
  }


  /* -------------------------------------------------------------------------- */
  /* 3. UTILITY CLASSES                                                         */
  /* -------------------------------------------------------------------------- */
  .fw-thin {
    font-weight: 100 !important;
  }

  .list-style {
    list-style-position: inside;
  }

  .fs-1-2 {
    font-size: 2.1875rem !important;
    /* 35px */
  }

  .error {
    font-size: 0.8125rem;
  }

  /* -------------------------------------------------------------------------- */
  /* 4. LAYOUT & CONTAINERS                                                     */
  /* -------------------------------------------------------------------------- */

  /* Main Page Backgrounds */

  .wrapper-container {
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(99, 61, 2, 0.1) 100%),
      url(../Images/login-bg-2.png);
  }

  /* Glassmorphism Form Section */
  .section-form {
    width: 660px;
    backdrop-filter: blur(15px);
    padding: 3.75rem 4.875rem;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.17);
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section-form #login-form {
    width: 100%;
  }


  /* -------------------------------------------------------------------------- */
  /* 5. ICON & DECORATION POSITIONING                                           */
  /* -------------------------------------------------------------------------- */
  .companyNameIcon,
  .firstNameIcon,
  .lastNameIcon,
  .contactNumberIcon,
  .emailIcon,
  .passwordIcon {
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
  }

  .eyeIcon {
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    cursor: pointer;
    z-index: 10;
  }

  /* Bottom line decorative element for headings */
  .signUpText::before {
    content: "";
    position: absolute;
    background-image: url("../img/bottom-line.png");
    width: 7.5rem;
    height: 5px;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background-size: cover;
    z-index: 1;
  }

  /* background image */
  .wrapper-container {
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(99, 61, 2, 0.1) 100%),
      url(../img/login-bg-2.png);
  }

  /* -------------------------------------------------------------------------- */
  /* 6. COMPONENT STYLES (BUTTONS, TEXT, LINKS)                                 */
  /* -------------------------------------------------------------------------- */

  /* Grouping subheading styles */
  :is(.signup-subheading,
    .reset-subheading,
    .login-subheading,
    .forgot-subheading) {
    margin-bottom: 40px;
    font-family: alexandriaFont-ExtraLight;
  }

  /* 1. Shared Button Base Styles */
  .signup-btn,
  .login-btn,
  .forgot-btn,
  .reset-btn {
    margin-top: 40px;
    background: linear-gradient(to right,
        var(--buttonGradientPrimary),
        var(--buttonGradientSecondary));
    font-family: alexandriaFont-SemiBold;
    border: none;
    color: var(--white);
    border-radius: 40px;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;

    &.signup-btn {
      padding-left: 7.9307rem;
      padding-right: 7.9307rem;
    }

    &.login-btn {
      padding-left: 8.63rem;
      padding-right: 8.63rem;
    }

    &.forgot-btn {
      padding-left: 5.974rem;
      padding-right: 5.974rem;
    }

    &.reset-btn {
      padding-left: 6.023rem;
      padding-right: 6.023rem;
    }
  }

  /* Nested Link & Text Groupings */
  .login-forgotLink {
    & a {
      color: var(--secondary);
      font-family: poppinsFont-SemiBold;
      text-decoration: none;

      &:hover {
        filter: brightness(1.2);
      }
    }
  }

  .agree-signUp {
    font-family: poppinsFont-Thin;

    &>span {
      font-family: poppinsFont-Bold;
    }
  }

  .already-signup,
  .already-login,
  .already-forgot {
    font-family: poppinsFont-Thin;

    & a {
      font-family: poppinsFont-Bold;
    }
  }

  /* Specific color overrides */
  #cs,
  #cs2 {
    color: var(--secondary);
  }

  :is(#forgot-account, #login-account, #signup-account) {
    & a {
      color: var(--primary);
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 7. LIST STYLES                                                             */
  /* -------------------------------------------------------------------------- */
  .list-reset {
    list-style-position: inside;
  }

  .reset-ul {
    font-family: poppinsFont-Light;
  }

  .reset-li {
    font-family: poppinsFont-Thin;
    font-size: 0.875rem;
  }

  /* -------------------------------------------------------------------------- */
  /* 8. FORM NORMALIZATION (SCOPED)                                             */
  /* -------------------------------------------------------------------------- */
  :is(.form-signup, .form-reset, .form-forgot, .form-login)>form {

    /* Generic Inputs & Form Controls */
    & input[type="text"],
    & input[type="email"],
    & input[type="number"],
    & input[type="password"],
    & .form-control {
      font-size: 1rem !important;
      font-family: alexandriaFont-ExtraLight;
      border-radius: 40px !important;
      border: 1px solid var(--white) !important;
      background-color: transparent !important;
      padding-left: 3.25rem !important;
      min-height: 60px !important;
      color: var(--white) !important;
      letter-spacing: 0.5px !important;

      &::placeholder {
        color: var(--white);
        opacity: 1;
        font-weight: 100;
      }

      &:focus {
        box-shadow: none;
        border: 1px solid var(--primary) !important;
        background-color: transparent !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:active {
        -webkit-text-fill-color: var(--white) !important;
        transition: background-color 5000s ease-in-out 0s;
      }
    }

    & .form-check-input {
      height: 20px !important;
      width: 20px !important;
      margin: 0;
      cursor: pointer;

      /* 1. Default State: Transparent background with primary border */
      background-color: transparent !important;
      border: 1px solid var(--primary) !important;

      /* 2. Focus State: Maintains primary border and removes Bootstrap shadow */
      &:focus {
        outline: 0;
        box-shadow: none;
        border-color: var(--primary) !important;
        /* Optional: background-color: rgba(74, 189, 153, 0.1) !important; */
      }

      /* 3. Checked State: Fills with primary color and shows checkmark */
      &:checked {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        outline: 0;
        box-shadow: none;
      }
    }

    /* Remove Number Input Spinners */
    & input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 9. MEDIA QUERIES (DESKTOP ENHANCEMENTS)                                    */
  /* -------------------------------------------------------------------------- */
  @media (min-width: 1920px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-xxxl {
      max-width: 1632px;
    }

    .signup-section {
      justify-content: end !important;
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 10. MODAL STYLES (PRIVACY POLICY & TERMS OF SERVICE)                        */
  /* -------------------------------------------------------------------------- */
  .modal-title {
    color: var(--modalHeading);
  }











  /* 25/12/2025 */

  /* ----------------Dashboard css---------------- */
  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .u-input {
    outline: 0;
    border: 1px solid #d0d0d0;
    padding: 5px 10px;
    height: 35px;
    font-size: 12px;
    border-radius: 10px;
    background-clip: padding-box;
  }

  .tooltip {
    width: auto;
    max-width: 300px;
  }

  .tooltip-inner {
    max-width: 300px;
    padding: 12px 16px;
    color: var(--white);
    text-align: left;
    background-color: #051835;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }

  .tooltip-arrow {
    border-right-color: #051835 !important;
  }

  .header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
  }

  .header-icon .fa-bars:before,
  .header-icon .fa-navicon:before {
    content: "\f0c9";
    color: var(--secondary-color);
    font-size: 1.4rem;
  }

  .top-header {
    z-index: 10;
    width: 100%;
    transition: 0.3s ease-in-out;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F5F7FA;
    /* padding: 2px 0px 10px 0px; */
  }

  .header-inner {
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 12px;
    background: var(--white);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
  }

  .sidebar {
    width: 260px;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--white);
    transition: 0.3s ease-in-out;
    border-right: 1px solid var(--sidebar-border);
  }

  .sidebar .logo {
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease-in-out;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .sidebar .logo img {
    transition: width 0.5s ease-in-out;
    max-width: 150px;
  }

  .sidebar .logo .col-logo {
    display: none;
  }

  .sidebar-expanded .logo .col-logo {
    display: block;
  }

  .sidebar-expanded .logo .main-logo {
    display: none;
  }

  .sidebar-expanded .logo img {
    max-width: 100%;
  }

  body.sidebar-expanded .sidebar .logo {
    padding: 14px 0px;
  }

  .sidebar-expanded .sidebar {
    width: 80px;
  }
  .sidebar-expanded .sidebar .menu-items.active .active_dot {
    display: none !important;
    margin-left: auto;
  }
  .menu-nav>ul {
    display: flex;
    flex-direction: column;
    /* Sprint A4 — let nav scroll when the viewport is too short to show
       every item (was clipping below the fold on small windows). */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
  .menu-nav>ul::-webkit-scrollbar { width: 4px; }
  .menu-nav>ul::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 4px; }

  .menu-nav>ul .menu-item {
    color: var(--white);
    max-width: 100%;
    overflow: hidden;
  }

  .menu-items span.items-name {
    text-wrap: nowrap;
  }

  .menu-nav>ul .menu-item-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 60px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }

  .menu-nav>ul .menu-item.is-active .menu-item-inner i {
    color: var(--white);
  }

  .menu-nav>ul .menu-item.is-active .menu-item-inner .menu-item-title span {
    color: var(--white);
  }

  .menu-nav>ul .menu-item.is-active .menu-item-inner:before {
    height: 36px;
    opacity: 1;
  }

  .menu-nav>ul .menu-item i {
    flex: 0 0 70px;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    transition: all 0.5s ease-in-out;
  }

  .menu-nav>ul .menu-item .menu-item-expand {
    position: relative;
    left: 100px;
    padding-right: 20px;
    margin-left: auto;
    transition: all 1s ease-in-out;
  }

  .sidebar-expanded .menu-nav>ul .menu-item .menu-item-expand {
    left: 0px;
  }

  .menu-nav>ul .menu-item .menu-item-title {
    flex-basis: 100%;
    padding-right: 10px;
    position: relative;
    transition: all 0.7s ease-in-out;
  }

  .sidebar-expanded .menu-nav>ul .menu-item .menu-item-title {
    left: 0px;
    opacity: 1;
  }

  .menu-nav>ul .menu-item .menu-submenu {
    background-color: #051835;
    padding: 15px;
    font-size: 12px;
    display: none;
  }

  .menu-nav>ul .menu-item .menu-submenu li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid;
    border-color: var(--secondary-color);
    color: #5f9cfd;
  }

  .menu-nav>ul .menu-item .menu-submenu li:last-child {
    margin: 0;
    padding: 0;
    border: 0;
  }

  main.main-body {
    width: calc(100% - 260px);
    height: 100%;
    transition: 0.3s ease-in-out;
    float: right;
    min-height: 100vh;
  }

  main.main-body .content-wrapper {
    padding: 16px 24px;
    height: 100%;
  }

  main.main-body .content-wrapper .page-content {
    border-top: 1px solid #d0d0d0;
    padding-top: 25px;
  }

  main.main-body .content-wrapper-bg .page-content {
    background: var(--white);
    border-radius: 3px;
    border: 1px solid #d0d0d0;
    padding: 25px;
  }

  main.main-body .page-title {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 25px;
  }

  .sidebar-expanded main.main-body {
    width: calc(100% - 80px);
  }

  .close-sidebar {
    display: none;
  }

  .hamburger-toggle img {
    height: 40px;
  }

  main.main-body {
    background: var(--background-color);
  }

  .menu-nav {
    position: relative;
    min-height: 100vh;
    background-color: #016749;
  }

  .log-out {
    position: absolute;
    bottom: 0;
  }

  /* div.container {
    max-width: 1200px;
  } */

  .dt-length>label {
    margin-left: 10px;
  }

  /* ------------Navbar----------- */
  .nav-right {
    gap: 20px;
  }

  .nav-right .notification i {
    font-size: 27px;
    color: var(--primary-color);
  }

  .profile {
    width: 39px;
  }

  .profile img {
    width: 100%;
  }

  .profile-name {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
  }

  .profile-name .name {
    font-size: 14px;
  }

  .profile-name .designation {
    font-size: 12px;
  }

  ul.dropdown-menu.show {
    border-radius: 6px;
  }

  .dropdown a i {
    color: var(--text-color);
    padding: 5px;
  }

  .main-profile {
    padding: 6px;
    border-radius: 50px;
    background-color: transparent;
    min-width: 124px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none !important;
  }

  /* -----------------Sidebar start-------- */

  ul.menu-item {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ul.menu-item li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 12px;
    gap: 12px;
    align-self: stretch;
  }

  ul.menu-item li a {
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    display: flex;
    gap: 13px;
    align-items: center;
  }


  ul.menu-item li span.items-name {
    color: rgba(255, 255, 255, 0.80);
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  ul.menu-item li.active span.items-name {
    color: #FFF;
    font-weight: 700;
  }

  ul.menu-item li.active {
    height: 56px;
    border: 1.4px solid #016749;
    background: #016749;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    color: #fff;
  }

  .ul.menu-item li .active_dot {
    display: none;
  }

  .menu-items.active .active_dot {
    display: block;
    margin-left: auto;
  }


  ul.menu-item li.active span svg path {
    stroke: var(--white);
  }


  ul.menu-item li.active a {
    color: var(--white);
    text-decoration: none;
    font-weight: normal;
  }

  .sidebar-expanded .items-name {
    display: none;
  }

  .sidebar-expanded ul.menu-item li {
    justify-content: center;
    width: 48px;
  }



  /* ---------------Task Management--------------- */



  .nav-pills-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-pills>li>a:has(:nth-child(2)) {
    color: var(--secondary-color);
  }

  .nav-pills {
    gap: 8px;
  }

  .task-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 0.5px solid var(--border);
    border-radius: 23px;
  }

  .task-input:focus {
    outline: none;
  }

  .nav-pills::before {
    display: none !important;
  }

  .nav-pills-right {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .filter-grp {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
  }

  .urgent-container {
    width: auto;
    padding-left: 15px;
    position: relative;
  }

  .urgent-container .flag,
  .nav-pills span {
    font-size: 16px;
    font-weight: 500;
  }

  .urgent-container .flag1 {
    color: red;
  }

  .urgent-container .flag2 {
    color: orangered;
  }

  .urgent-container .task-count,
  .urgent-btns {
    background-color: var(--primary-color);
    padding: 3px 15px !important;
    color: var(--white);
    font-weight: 400;
    border-radius: 20px !important;
  }

  .urgent-container::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 30px;
    width: 4px;
    background-color: red;
  }

  .high-container::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 30px;
    width: 4px;
    background-color: orangered !important;
  }

  #cstmr_table1>tbody>tr:nth-child(even) {
    background-color: var(--line1) !important;
    color: var(--text-color);
  }

  #cstmr_table1>tbody>tr:nth-child(odd) {
    background-color: var(--white) !important;
    color: var(--text-color);
  }


  #grid .urgent-container {
    background-color: var(--primary-color);
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    width: 100%;
  }

  #grid .urgent-container .urgent-btns,
  #grid .urgent-container .task-count {
    padding: 0 !important;
  }

  #grid .urgent-container .urgent-btns i {
    margin-right: 0;
  }

  #grid .urgent-container-last {
    width: fit-content;
  }

  #grid .urgent-container .grid-btn {
    padding: 4px;
    color: var(--white);
  }

  .grid-card-outer .grid-btn {
    border: none;
    background-color: transparent;
    font-size: 16px;
    padding: 5px;
    width: fit-content;
    margin-inline: auto;
  }

  #grid .urgent-container .grid-btn:focus {
    outline: none;
    box-shadow: none;
  }

  #grid .urgent-container::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    height: 46px;
    width: 4px;
    background-color: var(--secondary-color);
  }

  #grid .urgent-container .flag {
    color: var(--white);
  }

  .grid-card-inner {
    padding: 15px;
    background-color: var(--white);
    border-radius: 23px;
  }

  .grid-card-inner>span {
    font-size: 15px;
  }

  .grid-items span {
    font-size: 16px;
  }

  .grid-card-outer {
    border-radius: 25px;
    padding: 5px 5px;
    background-color: var(--white);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  .grid-card {
    border-radius: 25px;
    background-color: var(--secondary-color);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  .nav-pills .nav-link.active {
    background-color: var(--primary-color);
  }

  .nav-pills .nav-link.active .pill-icon path,
  .nav-pills .nav-link.active g rect {
    stroke: white;
  }

  .nav-pills .nav-link.active .cal path {
    fill: white;
  }






  /* today css started */

  .menu-items.active .side_menu_icon {
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05) inset;
  }

  .side_menu_icon {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
  }

  .items-name {
    flex-grow: 1;
  }

  .new-orders {
    align-items: center;
    gap: 8px;
    background-color: #e8bb02;
    border: 1px dashed #d5a416;
    padding: 6px 8px;
    border-radius: 16px;
    color: #fff;
  }

  .neworder-icon {
    padding: 6px 8px;
    background-color: #0a7736;
    border-radius: 18px;
  }

  .neworder-count {
    padding: 6px 8px;
    background-color: #d5a416;
    border-radius: 18px;
    border: 1px solid #e8bb02;
  }

  .on-hold {
    align-items: center;
    gap: 8px;
    background-color: #f5f7fa;
    border: 1px solid #e5e7eb;
    padding: 6px 12px;
    border-radius: 16px;
  }

  .onhold-icon {
    padding: 6px 8px;
    background-color: #fff;
    border-radius: 18px;
  }

  .onhold-count {
    padding: 5px 12px;
    background-color: #fff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
  }

  .dashboard-tabs {
    width: 100%;
    padding: 6px 8px;
    background-color: #fff;
    border-radius: 16px;
  }

  .table-icon {
    background-color: rgba(33, 164, 229, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

  .table-check {
    background-color: rgba(74, 189, 153, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

  .table-pause {
    background-color: rgba(213, 164, 22, 0.08);
    padding: 4px 7px;
    border-radius: 20px;
  }

.table-delete {
    background-color: rgba(255, 1, 1, 0.08);
    border-radius: 20px;
    display: flex;
    padding: 5px;
}

  table.dataTable>thead>tr {
    background-color: #f9fafb;
    /* border: 1px solid #e5e7eb; */
    /* height: 56px; */
  }

  /* table.dataTable>tbody>tr {
    height: 56px;
  } */

  table.dataTable>tbody>tr:nth-child(odd) {
    background-color: #ffffff;
  }

  table.dataTable>tbody>tr:nth-child(even) {
    background-color: #eff6f4 !important;
  }

  .data-table {
    background-color: #fff;
    border-radius: 16px;
  }

  .table-filter {
    display: flex;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .table-export {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  .table-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  table.dataTable.stripe>tbody>tr:nth-child(odd)>*,
  table.dataTable.display>tbody>tr:nth-child(odd)>* {
    box-shadow: none !important;
  }

  table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1,
  table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1 {
    box-shadow: none !important;
  }

  table.dataTable.order-column>tbody tr>.sorting_1,
  table.dataTable.order-column>tbody tr>.sorting_2,
  table.dataTable.order-column>tbody tr>.sorting_3,
  table.dataTable.display>tbody tr>.sorting_1,
  table.dataTable.display>tbody tr>.sorting_2,
  table.dataTable.display>tbody tr>.sorting_3 {
    box-shadow: none !important;
  }

  .serach input {
    border: none !important;
  }

  .nav-order {
    padding: 10px 24px;
    align-items: center;
  }

  div.dt-container div.dt-layout-row {
    padding: 0 24px 8px 24px;
  }

  #myTable th,
  td {
    border-right: 1px solid #E5E7EB;
  }

  #myTable th,
  td:last-child {
    border-right: none;
  }

  table.dataTable thead th {
    font-weight: 600;
    padding: 12px !important;
    border-top: 1px solid #E5E7EB !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-right: 1px solid #E5E7EB !important;
  }
  table.dataTable thead th:last-child {
    border-right: none !important;
  }

  div.dt-container .dt-paging .dt-paging-button.disabled,
  div.dt-container .dt-paging .dt-paging-button,
  div.dt-container .dt-paging .dt-paging-button.disabled:hover,
  div.dt-container .dt-paging .dt-paging-button.disabled:active {
    border-radius: 6px !important;
    padding: 6px 16px !important;
    color: #000 !important;
    font-size: 16px !important;
  }

  div.dt-container .dt-paging .dt-paging-button.current {
    color: #fff !important;
  }

  div.dt-container .dt-paging .dt-paging-button.current,
  div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: #fff !important;
    background: #016749 !important;
  }

  .div.dt-container div.dt-layout-row {
      margin: 0.25em 0;
  }




  /* Tab navigation for order listing */


  .nav-tab-wrapper {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 20px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
    border: 1px solid #E5E7EB;
  }

  .nav-tabs {
    border-bottom: none;
    gap: 20px;
  }

  .nav-tabs .nav-link {
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #F5F7FA;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 48px;
    padding: 16px;
    color: #101828;
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24.287px;
  }

  .nav-tabs .nav-link.active {
    /* Sprint F — bring .nav-tabs Active state into visual cohesion with
       Orders' .ug-pill-tab.active (solid border, yellow background,
       dark text). Was a dashed gold border + white text which looked
       loose against the cleaner Orders styling. */
    background-color: #FACC15;
    color: #1F2937;
    border: 1px solid #D4A20C;
    font-weight: 600;
  }
  .nav-tabs .nav-link.active:hover {
    background-color: #EAB308;
    color: #1F2937;
  }
  .nav-tabs .nav-link:hover {
    background-color: #f9fafb;
    color: #344054;
    text-decoration: none;
  }

  .nav-tabs .nav-link .tab_icons,
  .nav-tabs .nav-link .badge_styl {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #fff;
    border-radius: 100px;
    border: 1px solid #E5E7EB;
  }

  .nav-tabs .nav-link.active .tab_icons {
    background-color: #0A7736;
    border: none;
  }

  .nav-tabs .nav-link.active .badge_styl {
    border: 1px solid #C49303;
    background: #D5A416;
    color: #FFF;
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24.287px;
  }

  .nav-tabs .nav-link.active span svg path {
    stroke: var(--white);
  }

  /* Sprint CP5 — guarantee the icon strokes go white on every active
     tab regardless of where stroke was declared (svg parent vs path).
     Also covers <circle> + <polyline> + <line> elements so the My
     Account icons (Company Info / Location / Documents) all render
     white-on-green when active instead of dark/green-on-green. */
  .nav-tabs .nav-link.active .tab_icons svg,
  .nav-tabs .nav-link.active .tab_icons svg * {
    stroke: #fff !important;
    color: #fff !important;
  }



  .POS-btn{
   background-color: var(--primary-color);
   padding: 4px;
   border-radius: 8px;
  }
  .add-POS{
     color: #fff;
  }





  /* table custom styling */

  .table-wrapper {
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
  }

  .table-heading {
    margin: 0.25em 0;
    padding: 8px 24px;
  }

  table.dataTable>thead>tr>th,
  table.dataTable>thead>tr>td,
  th.dt-orderable-asc.dt-orderable-desc.dtfc-fixed-end.dtfc-fixed-right.dt-ordering-desc {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header);
  font-family: "Arial-Regular";
  font-style: Bold;
  font-size: 14px;
  line-height: 17.32px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  }


  table.dataTable tbody tr>.dtfc-fixed-start,
  table.dataTable tbody tr:nth-child(even)>.dtfc-fixed-end {
    background-color: #eff6f4 !important;
  }

  table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td
   {
  padding: 6px 10px;
  font-family: "Arial-Regular";
  font-weight: 400;
  font-size: 14px;
  line-height: 21.65px;
  letter-spacing: 0px;
  color: var(--text-color);
  ;

  }

  table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover, table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover {
      outline: none !important;
      outline-offset: inherit !important;
  }

  .span.dt-column-title {
      color: #4a5565;
  }


  /* previousone */

  .modal-footer .modalBtn {
    border-radius: 40px;
    background: linear-gradient(90deg, #3ba986 0%, #047e58 100%);
    display: inline-block;
    padding: 16px;
    width: 100%;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    text-align: center;
  }

  .modal-header .m-heading {
    color: #2d9e7a;
    font-size: 24px;
  }

  .successfullyOuterwrapper .modal-content {
    border-radius: 25px;
  }
  .successfullyOuterwrapper .modal-footer {
    padding: 0px 30px 30px 30px;
  }

  .successfullyOuterwrapper .modal-body {
    padding: 20px 70px;
  }
  .condition-wrapper .modal-content {
    padding: 30px;
    border-radius: 15px;
  }
  /* table export button */

  button.dt-button {
    border: 1.25px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: transparent !important;
    outline: 0 !important;
  }


  div.dt-container div.dt-layout-end input {
    border: 1.25px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: transparent !important;
    outline: 0 !important;
    padding: 6px 16px;
  }
  /* Table Search */
  .dt-search:after {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    left: 10px;
    top: 8px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.084 14.0967L16.6507 16.6634M15.8398 9.58008C15.8398 11.2377 15.1814 12.8274 14.0093 13.9995C12.8372 15.1716 11.2474 15.8301 9.58984 15.8301C7.93224 15.8301 6.34253 15.1716 5.17043 13.9995C3.99832 12.8274 3.33984 11.2377 3.33984 9.58008C3.33984 7.92247 3.99832 6.33276 5.17043 5.16066C6.34253 3.98856 7.93224 3.33008 9.58984 3.33008C11.2474 3.33008 12.8372 3.98856 14.0093 5.16066C15.1814 6.33276 15.8398 7.92247 15.8398 9.58008Z' stroke='%234A5565' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
  }
  .dt-search {
    position: relative;
  }
  .dt-search input {
    padding-left: 32px !important;
  }


  /* Loader CSS */

  .loader-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }




  /* HTML: <div class="loader"></div> */
  .spinner{
    width: 50px;
    aspect-ratio: 1;
    --_c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
    background:
      var(--_c) top,
      var(--_c) left,
      var(--_c) right,
      var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
  }
  @keyframes l7 {to{transform: rotate(.5turn)}}



  /* button */
  .btn:active{
      color: var(--white);
      background-color: var(--primary-color);
      border: 0;
  }
  .POS-btn .btn:hover{
    color: var(--white) !important;
  }



/* 14-01-2026 Company info */
.breadcrumb .breadcrumb-item a{
  text-decoration: none;
  color: #4D4D4D;
}

.breadcrumb .breadcrumb-item{
  text-decoration: none;
  color: #4D4D4D;
}

.input-field > label{
  font-size: 14px;
  color: #4A5565;
}

.input-field > input,
.group-type > select,
.credit-limit > input{
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
}

.input-field > input::placeholder{
  font-size: 16px;
  color: #101828;
}

.Company.Details,
.permission-settings {
    padding: 20px;
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
}

.labels > h6{
    font-weight: 400;
    color: #4A5565;
    margin-bottom: 13px;
}

.label.form-check-label{
  color: #101828;
  font-size: 16px;
  font-weight: 400;
}

.form-check.cstm-input {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cstm-input > input{
  width: 24px;
  height: 24px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
}

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


/* Edit customer user */

   .modal-backdrop.fade.show {
    z-index: 9;
}

.cstm-canvasbg{
    background-color: #F5F7FA;
}

.add-customer-admin div#offcanvasRight {
    max-width: 876px;
    width: 100%;
}
.add-customer-admin div#productOffcanvas {
    max-width: 876px;
    width: 100%;
}




.add-customer-admin div.useredit {
  max-width: 876px;
  width: 100%;
}



.cstm-header{
  background: #0D5143;
  background: linear-gradient(90deg, #0d5143 0%, #0d5143 90%);
  color: #fff;
}

.user-icon{
  position: absolute;
  top: 42px;
  right: 20px;
}

.btn-update,
.btn-update:hover,
.btn-update:focus,
.btn.btn-update:active{
  background-color: #016749;
  border-radius: 10px;
  padding: 8px 22px;
  color: #fff;
}

.btn-cancel,
.btn-cancel:hover,
.btn-cancel:focus,
.btn.btn-cancel:active{
  background-color:#FFF;
  color: #101828;
  border-radius: 10px;
  padding: 8px 22px;
  border: 1px solid #E5E7EB;
  margin-right: 5px;
}

.add-admin {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  margin-bottom: 30px;
}

.first-name > input,
.last-name > input,
.email > input,
.contact > input,
.role > select{
  padding: 12px;
  border-radius: 10px;
}

/* Mask the phone number by default */
/* .phone-number::before {
  content: "(###) ###-#### ";
} */

/* Show the full phone number on hover */
/* .phone-number:hover::before {
  content: attr(data-phone);
} */






   /* Inspired by WhiteHatDesigner Card Layout dummy csss */

   input[readonly] {
    /* Blur the text content */
    /* filter: blur(2px); */

    /* Greyed-out appearance */
    background-color: #f2f2f2; /* Light grey background */
    border: 1px solid #ccc;    /* Muted grey border */
    color: #777;               /* Muted text color */

    /* Optional: UI refinements */
    cursor: not-allowed;       /* Changes cursor to a "blocked" icon */
    pointer-events: none;      /* Prevents user interaction */
    user-select: none;         /* Prevents text highlighting */
  }

   .doc-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    margin: -40px auto 0; /* Overlaps the header */
    padding: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-icon-inner {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-content {
    padding: 0 20px 20px;
}

.doc-title {
    font-weight: 700;
    color: #333;
}

.doc-purpose {
    font-size: 0.9rem;
    min-height: 45px;
}

.btn-view {
    color: #555;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 5px 15px;
    border: 1.5px solid #eee;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-view:hover {
    background: #f8f9fa;
    border-color: #ddd;
}


/* // for customer model chnge pass */

.modal-overlaychnge {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-contentchnge {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 300px;
  font-family: sans-serif;
}

.input-group { margin-bottom: 15px; }

.input-group label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-save { background: #016749; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.btn-cancel { background: #eee; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

.password-wrapper {
  display: flex;
  align-items: center;
}
.password-wrapper input {
  flex: 1;
}


h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  color: #444;
  text-align: center;
  margin-bottom: 10px;
}

.dummylogo img,
.default-image img {
  height: 139px;
}

.default-image div {
  margin-bottom: 20px;
}

.color-box {
  background-color: #228B22;
  width: 50px;
  height: 50px;
  margin: 10px auto;
}

.company-info p {
  font-size: 16px;
  margin: 10px 0;
}

.company-info strong {
  color: #333;
}

.company-info {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.default-image div img {
  max-width: 200px;
  /* Add a max width for consistency */
}


.edit-size-btn, .delete-size-btn {
  text-decoration: none !important;
  border: none;
  outline: none;
  /* display: inline-flex; */
   /* Centers the SVG inside the link */
  align-items: center;
}


/* Creates space between text and dropdown */
.dt-length {
  display: flex !important;
  flex-direction: row;
}
.dt-length label {

  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
  margin-right: 6px;
}

/* Styles the dropdown itself */
.dt-length select {
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
    background-color: #fff;
}

/* Optional: Add spacing to the footer row */
.dt-layout-row:last-child {
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px solid #f3f4f6;
}

/* Ensures the Excel button looks clean */
.btn-export-excel {
  background: transparent !important;
  border: 1px solid #016749 !important;
  color: #016749 !important;
  border-radius: 4px;
  font-weight: bold;
}





#savePasswordBtn.disabled-btn,
#savePasswordBtn:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.required_asterisk {
    color: red; /* or any other color */
    margin-left: 2px;
}

.is-invalid {
    border-color: #dc3545;
}

.validation-error {
    font-size: 13px;
}




/* Customer-Group */

.cstmr-group {
  padding: 20px;
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
}


.draggable-section-wrap {
  margin-top: 20px;
}

.group-type>label {
  font-size: 14px;
  color: var(--label-text);
}

.cstmr-ul {
  border-radius: 8px;
  border: 1px solid #9D9D9D;
  overflow: hidden;
}

.cstmr-ul li {
  border-bottom: 1px solid #e5e7eb;
}

.cstmr-ul li:nth-child(odd) {
  display: flex;
  height: 48px;
  padding-left: 20px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--white);

}

.cstmr-ul li:nth-child(even) {
  display: flex;
  height: 48px;
  padding-left: 20px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--Bg-Light-Green, #EFF6F4);
}

.cstmr-head {
  display: flex;
  height: 45px;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  background: #007A55;
}

.cstmr-head h6,
.cstmr-head label {
  color: var(--white);
}

.cstmr-head p {
  color: var(--white);
}

.cstmr-ul li p {
  margin: 0;
}

.cstmr-ul li.selected {
  border: 1px solid #E8BB02;
  background: var(--Yellow-Gradient-Tab, linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%));
}

.cstmr-group .group-name input {
  max-width: 45%;
}

.move-button-wrap {
  display: flex;
  width: 48px;
  height: 440px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin: auto;
}

.forward-btn,
.backward-btn {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--Primary-color, #016749);

}

.customer-name.selected {
  background-color: #e8bb02;
  color: white;
  padding: 5px;
  border-radius: 4px;
}
.drag-text{
  font-size: 14px;
  color: var(--label-text);
  text-align: center;
  padding: 20px;
  display: block;
  font-weight: 500;
}

.state-scroll-wrapper {
    scrollbar-width: thin; /* Firefox */
    scrollbar-gutter: stable;
}

/* Chrome, Edge, and Safari */
.state-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}
.state-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

/* Custom Scrollbar for better UI */
div::-webkit-scrollbar {
    width: 8px;
}
div::-webkit-scrollbar-track {
    background: #f1f1f1;
}
div::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
div::-webkit-scrollbar-thumb:hover {
    background: #555;
}



.Product-info-wrapper{
  padding: 20px;
  gap: 20px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
  border: 1px solid var(--border);
}
.Product-info-wrapper h5{
  color: #0C0D0C;
  font-weight: 400;
  font-size: 1.125rem;

}
.Product-info-wrapper .input-field>label{
  color: #4A5565;
  font-size: 0.938rem;
}
.Product-info-wrapper .input-field>label>sup{
  color: #F02C2C;
}
.Product-info-wrapper .input-field .form-control ,.form-select{
  padding: 8px;
      border: 1px solid var(--border);
    border-radius: 10px;
}
.Label-content{
  padding: 20px;
  gap: 20px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
  border: 1px solid var(--border);
  margin-top: 16px;
}
.Label-content label>sup{
  color: #F02C2C;
}
.Mark-up{
  padding: 20px;
  gap: 20px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(240, 187, 32, 0.10);
  border: 1px solid var(--border);
  margin-top: 16px;
}
.Mark-up .form-control,
.Mark-up .form-select{
  background-color: #F5F7FA;
}

.Mark-up .table thead th{
  font-weight: 400;
  background-color: #016749;
  white-space: nowrap;
  color: white;
  border-left: 1px solid white;
}

iframe {
  width: 100% !important;
  margin: auto;
  display: block;

}
iframe{
  height:100px !important;

}
.rich-text-box{
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.rich-text-color{
  background-color: #EFF6F4;
  padding: 8px;
  border-radius: 8px 8px 0px 0px;
}
.rich-text-color button{
   border:none;
   background-color: transparent;

}
.rich-text-color .input-box{
  border: 1px solid #E5E7EB;
  background-color: white;
  width: 100px;
  border-radius: 5px;
  outline: none;

  padding-right: 8px;
}
.rich-text-color .input-search{
      border-right: 1px solid #4A5565;
    display: inline-block;
    padding-right: 10px;

}
.Label-content span{
  color: #4A5565;
  margin-top: 8px;
  display: block;
}
.border-inline{
  border-inline: 1px solid var(--black);
}


/* * document-detail screen */

.document-details .icon-info {
  display: flex;
   height: 52px;
  justify-content: space-between;
  align-items: center;
}



.document-details .card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--white);
}

.icon-info .docs_icons {
  border-radius: 100px;
  height: 48px;
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-info .docs_icons.first-icon {
  background: linear-gradient(180deg, #EFF6F4 0%, #D4EBE5 100%);
}

.icon-info .docs_icons.second-icon {
  background: linear-gradient(180deg, #FEF9E7 0%, #FCEDB3 100%);
}

.icon-info .docs_icons.third-icon {
  background: linear-gradient(180deg, #E5EBFF 0%, #C7D4F7 100%);
}

.icon-info .docs_icons.fourth-icon {
  background: var(--blue-light-8, rgba(33, 164, 229, 0.08));
}

.icon-info .tag-capsule {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--white);
}

.icon-info .tag-capsule.first-cap {
  background: var(--primary-color);
}

.icon-info .tag-capsule.second-cap {
  background: #E8BB02;
}

.icon-info .tag-capsule.third-cap {
  background: #253B80;
}

.icon-info .tag-capsule.fourth-cap {
  background: #21A4E5;
}

.document-details .docs-content h4 {
  color: #101828;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}

.document-details .docs-content p {
  color: #676C69;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.document-details .docs-card-footer {
  border-top: 1px solid var(--border);
  padding: 8px 0px;
}

.document-details .docs-card-footer span {
  color: #676C69;
}

.document-details .card {
  padding: 20px;
}


.drag-scroll table tbody tr td:first-child {
    width: 100px;
}

.product-preview {
    display: flex;
    justify-content: space-between;
}
.product-img{
  display: flex;
  gap:8px;
  flex-wrap: wrap;
  align-items: center;
}

.product-img img {
  width: 108px;
    border-radius: 8px;
    height: 72px;
    object-fit: contain;
}
.product-preview button{
  border: none;
    padding: 21px 4px;
    border-radius: 8px;
}



/************* product details offcanvas ********************/
.offcanvas-header p{
  opacity: .8;
}

h5.offcanvas-title{
  font-size: 20px;
}
.product-info {
    background: #F5F7FA;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    height: 76px;
}
.offcanvas-body .add-admin h5{
  font-size: 18px;
  font-weight: 400;
  color: #101828;
  margin-bottom: 16px;
}
.product-info p{
  margin-bottom: 4px;
  color: #4A5565;
  font-size: 12px;
}
.product-info h6{
  color: #101828;
  font-size: 16px;
  margin: 0;
}
p.small-para{
  color: #4A5565;
  font-size: 8px;
}
.product-container {
    background: #01674914;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #0A7736;
    margin-bottom: 20px;
}
.product-container h6{
  font-size: 12px;
  font-weight: 700;
}
.product-container img {
    background: #EFF6F4;
    padding: 5px 18px;
    border-radius: 8px;
}

.label-info {
    background: #F5F7FA;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
}
.label-info h6{
  font-size: 14px;
  font-weight: 700;
  color: #101828;
}
.label-info p{
  font-size: 14;
  margin-bottom: 8px;
  color: #364153;
}
.label-info span{
  font-style: italic;
  color: #6A7282;
}
.storage-info{
    background: linear-gradient(180deg,rgba(255, 251, 235, 1) 0%, rgba(254, 243, 199, 1) 100%);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
}
.storage-info h6{
  color: #101828;
}
.storage-info span{
  color: #A65F00;
}


/* -------------------------------------------------------------------------- */
/* Categories Page Styling                                                    */
/* -------------------------------------------------------------------------- */

.categories-wrapper {
  background-color: var(--background-color);
  padding: 24px;
}

/* Page Header */
.categories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.categories-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-color);
}

.categories-breadcrumb {
  font-size: 14px;
  color: #6B7280;
}

/* Search Box */
.category-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 6px 12px;
  max-width: 320px;
}

.category-search input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

/* Category Cards */
.category-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* Image Section */
.category-image {
  padding: 30px;
  background-color: #F9FAFB;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.category-image img {
  max-height: 90px;
  object-fit: contain;
}

/* Card Body */
.category-body {
  padding: 20px;
}

.category-body h6 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
}

/* View Button */
.btn-view-products {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s ease;
}

.btn-view-products:hover {
  background: var(--primary-color);
  color: #fff;
}

/* Grid Spacing */
.categories-grid {
  row-gap: 24px;
}



/* Product listing page css starts here 03/02/2026 */
.active.breadcrumb-item::before {
  color: #016749;
}

.breadcrumb-item.active a {
  color: #016749;
  font-weight: 600;
}

.view-btn,
.view-btn:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
  border-radius: 10px;
  padding: 11px;
}

.filter-tabs button,
.quantity-tabs button {
  width: 90px;
  height: 48px;
  border-color: #E5E7EB;
  background-color: #F5F7FA;
  font-size: 20px;
  border-radius: 10px;
}

.filter-tabs button.active {
  background-color: #EFF6F4;
  border-color: #016749;
}

.quantity-tabs button {
  width: 60px;
  height: 60px;
  font-size: 32px;
  line-height: 0px;
}

.quantity-tabs button:hover {
  border-color: var(--primary-color);
  background-color: #EFF6F4;
}

.quantity-tabs input[type="text"] {
  max-width: 200px;
  height: 60px;
  border-color: #E5E7EB;
  background-color: #ffffff;
  font-size: 20px;
  border-radius: 10px;
}

.product-detail {
  width: 100%;
}

.cart-btn,
.btn-addcart {
  font-size: 18px;
  padding: 12px;
  font-weight: 600;
}

.btn-addcart,
.btn-addcart:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}


.cart-btn,
.cart-btn:hover {
  background-color: var(--secondary-color);
  padding: 12px;
}

.checkout-tabs {
  border-radius: 15px;
  overflow: hidden;
}

.checkout-tabs .nav-tabs .nav-link {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0px;
  background-color: transparent;
  color: var(--text-secondary);
}

.checkout-tabs .nav-tabs .nav-link.active {
  background-color: #EFF6F4;
  border-color: var(--primary-color);
  color: var(--text-primary-950);
}

.bigimage-container {
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #F9FAFB;
  border-radius: 12px;
  padding: 16px;
}

.singleproduct-bigimage {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.smallcheckout-image button {
  width: 100%;
  min-width: 110px;
  max-width: 130px;
  height: 90px;
  padding: 6px;
  border: 2px solid #E5E7EB;
  background: #fff;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smallcheckout-image button > img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.smallcheckout-image button:hover {
  border: 2px solid #E5E7EB;
}

.smallcheckout-image button.active {
  border-color: var(--secondary-color);
}


/* Product listing page css ends here 03/02/2026 */



/* checkout page css starts here 03/06/2026 */


.checkout-price li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.checkout-price ul li:last-child {
  margin-bottom: 0px;
}

.checkout-price span {
  color: var(--Black-color-950, #0C0D0D);

}

.checkout-price li :is(h6, label) {
  color: var(--Black-color-800, #383B39);
}

.checkout-price li span.darkcolor {
  color: var(--primary-color);
}


/* stepper starts here */



.steps {
  display: flex;
  width: 100%;
  max-width: 560px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0px auto;
  margin-bottom: 28px;
}

.steps .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  color: var(--label-text);
  font-size: 16px;
  font-weight: 500;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid transparent;
  transition: all 200ms ease;
  transition-delay: 0s;
  z-index: 2;
  margin-bottom: 4px;
}

.steps .circle.active {
  transition-delay: 100ms;
  border-color: var(--secondary-color);
  color: var(--primary-color);
}


.steps .circle.completed {
  transition-delay: 50ms;
  color: var(--text-white);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}



.steps .progress-bar {
  position: absolute;
  height: 4px;
  width: 100%;
  background: var(--white);
  z-index: 0;
}

.progress-bar .indicator {
  position: absolute;
  height: 100%;
  width: 0%;
  background: var(--secondary-color);
  transition: all 500ms ease-in-out;
}

.buttons {
  display: flex;
  gap: 20px;
  padding-block: 12px;
}

.buttons :is(.tabbtn, .submitbtn) {
  padding: 8px 25px;
  background: var(--primary-color);
  border: none;
  border-radius: 8px;
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.buttons button:active {
  transform: scale(0.97);
}

.buttons .prebtn {
  background-color: var(--white);
  color: var(--text-primary);
}

.buttons button:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.submitbtn {
  display: none;
}

.stepper-container :is(h4, label) {
  color: var(--white);
}

.stepper-container h4 {
  text-align: left;
}



/* stepper ends here */
/* stepper form starts here */

.clientform {
  display: none;
  height: 100%;
  min-height: 500px;
}

.clientform.active {
  display: block;
}


.order-content {
  border-radius: 30px;
  text-align: center;
  padding: 20px 10px;
}

.modal-primarybtn {
  color: #ffffff;
  border-radius: 40px;
  background: linear-gradient(90deg, #3BA986 0%, #047E58 100%);
  padding: 10px 16px;
}

.modal-primarybtn:hover {
  color: #ffffff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.payment-msg {
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: none;
}

.icon-container {
  width: 100%;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  align-items: center;
  justify-content: center;
  max-width: 40px;
}

.default-badge {
  background: rgba(1, 118, 83, 0.08);
}

.border-dashed {
  border-style: dashed !important;
}

.form-check-input {
  --bs-form-check-bg: #F5F7FA;
}

.order-imge {
  width: 72px;
  height: 72px;
  min-width: 72px;
  flex: 0 0 72px;
  background-color: #F9FAFB;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  border-radius: 8px;
}

/* Constrain the jar image inside the cart-row tile so it letterboxes
   inside the 72px square instead of stretching the row to its native
   400-500px height (the bug visible 2026-05-28 where Cajun jar burst
   the second row in the cart drawer). */
.order-imge > img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.orderquantity-tabs {
  width: 90px;
  padding: 2px;
}

.orderquantity-tabs .btn {
  padding: 4px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-tab {
  position: relative;
  z-index: 1;
  /* Match the wizard header background (brand green #016749) so the tab
     blends into the strip instead of showing as a separate rectangle
     behind each circular step icon. */
  background-color: #016749;
  padding: 0px 12px;
}

.progress-tab p {
  position: absolute;
  white-space: nowrap;
  color: #ffffff;
  left: 50%;
  transform: translateX(-50%);
}

.progress-tab .circle.completed+p {
  font-weight: 600;
}

.order-deletebtn {
  cursor: pointer;
}

/* checkout page css ends here 03/06/2026 */



.emp-header-icon {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
}

/* ── Permissions wrapper card ── */
.perm-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
}

/* ── Permissions card header ── */
.perm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 14px 20px;
}

.perm-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #101828;
    line-height: 1.4;
}

.perm-card-sub {
    font-size: 13px;
    color: #4A5565;
    line-height: 1.4;
}

/* ── Restore Default — dark green filled ── */
.btn-restore,
.btn-restore:focus {
    background-color: #016749;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
    outline: none;
}
.btn-restore:hover {
    background-color: #014f38;
    color: #fff;
}

/* ── Table ── */
.perm-table {
    border-collapse: collapse;
    table-layout: fixed;
}

/* ── Head ── */
.perm-th {
    background-color: #F9FAFB;
    color: #4A5565;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 12px 16px;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
}
.perm-th:last-child { border-right: none; }

.perm-col-name  { width: 52%; }
.perm-col-check { width: 16%; }

/* ── Body rows — all white ── */
.perm-row { border-bottom: 1px solid #E5E7EB; }
.perm-row:last-child { border-bottom: none; }
.perm-row:nth-child(odd),
.perm-row:nth-child(even) { background-color: #ffffff; }

.perm-td {
    padding: 14px 16px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #101828;
    vertical-align: middle;
    border-right: 1px solid #E5E7EB;
}
.perm-td:last-child { border-right: none; }

/* ── Item label ── */
.perm-item-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.perm-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
}

/* ── Checkbox ── */
.perm-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #D1D5DB;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: background 0.15s, border-color 0.15s;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.perm-checkbox:checked {
    background-color: #016749;
    border-color: #016749;
}
.perm-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.perm-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 103, 73, 0.15);
}


/* Category Header */
 /* ── Page Wrapper ── */
        .categories-wrapper {
            background-color: #F5F7FA;
            padding: 20px 24px 32px;
            min-height: 100vh;
        }

        /* ── Page Header ── */
        .categories-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .categories-title {
            font-size: 22px;
            font-weight: 600;
            color: #101828;
            line-height: 1.3;
            margin-bottom: 4px;
        }

        .categories-breadcrumb .breadcrumb {
            font-size: 13px;
            color: #6B7280;
            margin: 0;
        }

        .breadcrumb-item a {
            color: #6B7280;
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: #016749;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: #9CA3AF;
        }

        /* ── Header Buttons ── */
        .btn-order-history {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 18px;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            background: #fff;
            color: #374151;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.2s, border-color 0.2s;
        }

        .btn-order-history:hover {
            background: #F9FAFB;
            border-color: #D1D5DB;
            color: #374151;
        }

        .btn-cart {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 16px;
            border-radius: 8px;
            background: #016749;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.2s;
        }

        .btn-cart:hover {
            background: #015f42;
            color: #fff;
        }

        /* ── Main Card ── */
        .categories-main-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid #E5E7EB;
            padding: 20px 20px 24px;
        }

        /* ── Card Header ── */
        .categories-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .categories-card-title {
            font-size: 16px;
            font-weight: 600;
            color: #101828;
        }

        /* ── Search Box ── */
        .category-search {
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #E5E7EB;
            border-radius: 10px;
            background: #fff;
            padding: 8px 14px;
            width: 280px;
        }

        .category-search input {
            border: none;
            outline: none;
            width: 100%;
            font-size: 14px;
            color: #374151;
            background: transparent;
        }

        .category-search input::placeholder {
            color: #9CA3AF;
        }

        /* ── Grid ── */
        .categories-grid {
            row-gap: 20px;
        }

        /* ── Category Card ── */
        .category-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid #E5E7EB;
            overflow: hidden;
            height: 100%;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
        }

        /* ── Card Image Area ── */
        .category-image {
            padding: 28px 24px;
            background-color: #F9FAFB;
            text-align: center;
            border-bottom: 1px solid #E5E7EB;
            min-height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Alternating pastel bg colours like the screenshot */
        .category-col:nth-child(4n+1) .category-image {
            background-color: #F0FFF4;
        }

        .category-col:nth-child(4n+2) .category-image {
            background-color: #FFF5F5;
        }

        .category-col:nth-child(4n+3) .category-image {
            background-color: #F0F5FF;
        }

        .category-col:nth-child(4n+0) .category-image {
            background-color: #FFFBF0;
        }

        .category-image img {
            max-height: 100px;
            max-width: 100%;
            object-fit: contain;
        }

        /* ── Card Body ── */
        .category-body {
            padding: 16px 20px 20px;
        }

        .category-body h6.category-name {
            font-size: 15px;
            font-weight: 600;
            color: #101828;
            margin-bottom: 14px;
        }

        /* ── View Products Button ── */
        .btn-view-products {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            border-radius: 10px;
            border: 1px solid #016749;
            background: transparent;
            color: #016749;
            padding: 9px 12px;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
            cursor: pointer;
        }

        .btn-view-products:hover {
            background: #016749;
            color: #fff;
        }

        /* ── Empty State ── */
        .no-categories-msg {
            text-align: center;
            padding: 40px;
            color: #9CA3AF;
            font-size: 15px;
        }




/* add to cart css starts  03/11/2026 */
.offcanvas {
  --bs-offcanvas-width: 1200px;
  border-radius: 8px 0px 0px 8px;
    overflow: hidden;
    background: var(--background-color);
}

.offcanvas-header {
  background-color: var(--primary-color);
  height: 100px;
}

.cart-icon {
  width: 40px;
    height: 40px;
    background: #d5a416;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-proceed , .btn-proceed:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 11px 16px;
}


.btn-continue , .btn-continue:hover {
  background-color: #F5F7FA;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0A0A0A;
  padding: 11px 16px;
}

.darkcolor {
  color: var(--primary-color);
}

.showmore-container .offcanvas-productimg {
  width: 320px;
height: 160px;
  background: linear-gradient(180deg, #FFF 0%, #EFF6F4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-scrollContainer {
width: fit-content;
}


.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.smallcheckout-image :is(.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active) {
  background-color: #E5E7EB;
  border-color: var(--secondary-color);
}

/* cart-badge css code  */

.cart-badge {
  background-color: var(--secondary-color);
  color: var(--white);
     width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewcart-border {
  border-left: 1px solid rgba(255,255,255,.3);
}
.viewcart {
border-radius: 8px;
    background-color: rgba(255,255,255,.08);
    margin-left: 8px;
    width: 28px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* add to cart css ends  03/11/2026 */


.productimage-container {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #F9FAFB;
  padding: 12px;
}
.productimage-container > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
 :root {
    --ug-brand-green: #016749;
    --ug-bg-gray: #f4f7f6;
    --ug-muted-text: #8898aa;
}

/* Card Styling to match image density */
.ug-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.25rem;
    background: #fff;
    padding: .2rem 1.5rem 1.5rem 1.5rem;
    border: 1px solid #E5E7EB;
}

.ug-card-title {
    font-size: 18px;
    font-weight: 500;
    color: #101828;
    margin: 15px 0 5px 0;
}

/* Form Controls */
.ug-card .form-label {
    font-size: 15px;
    color: #676C69;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.ug-card select.form-select {
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    font-size: 16px;
    padding: 0.5rem 0.75rem;
    height: 50px;
    color: #202221;

}

.ug-card textarea.form-control {
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    font-size: 13px;
    padding: 0.5rem 0.75rem;
    height: 90px;
    color: #202221;

}

/* Character Counters in Textareas */
.note-wrapper {
    position: relative;
}

.char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.7rem;
    color: var(--ug-muted-text);
}

/* Table Design — overridden by brand green block below */

.sort-arrows {
    font-size: 0.6rem;
    margin-left: 5px;
    opacity: 0.4;
}

/* Brand Buttons */
.btn-ug-green {
    background-color: var(--ug-brand-green);
    color: #fff;
    font-weight: 400;
    border-radius: 6px;
    border: none;
}

.btn-ug-green:hover {
    background-color: #004d29;
    color: #fff;
}

.TableNoItemText {
    font-size: 15px;
    color: #4F5351;
}

.TableSubNoItemText {
    font-size: 14px;
    color: #7F8481;
}

.txtGreen {
    color: #016749;
    font-size: 86px;
}

.SaveBtn {
    border: 1px solid #E5E7EB;
    font-size: 14px;
}

.PlaceOrderBtn {
    border: 1px solid #016749;
    background-color: #016749;
    border-radius: 10px;
    font-size: 14px;
    padding: 10px 24px;

}

.TotalCasesWrap {
    border-right: 1px solid #E5E7EB;
    margin-right: 30px;
    padding-right: 30px;
}

 /* --- CSS Scoped to Notes Page to avoid conflicts --- */
  .notes-page-wrapper {
      background-color: #f8fafc;
      min-height: 100vh;
      font-family: 'Inter', sans-serif;
  }

  /* Top Breadcrumb & Heading */
  .notes-breadcrumb {
      font-size: 13px;
      color: #94a3b8;
  }

  .notes-breadcrumb svg {
      margin-top: -2px;
  }

  /* Notes List Card */
  .notes-main-card {
      background: white;
      border-radius: 12px;
      border: 1px solid #eef2f6;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
  }

  .notes-item-row {
      padding: 30px;
      border-bottom: 1px solid #f1f5f9;
      display: flex;
      align-items: flex-start;
      transition: background 0.2s;
  }

  .notes-item-row:hover {
      background-color: #fafbfc;
  }

  .notes-item-row:last-child {
      border-bottom: none;
  }

  /* Large Icon Styling */
  .notes-icon-box {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 20px;
  }

  /* Date Section with Line Above (As requested) */
  .notes-date-section {
      border-top: 1px solid #f1f5f9;
      margin-top: 15px;
      padding-top: 12px;
      width: 100%;
      color: #94a3b8;
      font-size: 12px;
  }

  /* Action Buttons (Round) */
  .notes-action-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
  }

  .notes-action-btn:hover {
      background-color: #f8fafc;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  /* --- Offcanvas (Right Side Drawer) Styling --- */
  .notes-offcanvas-header {
      background-color: #004d3d !important;
      color: white !important;
      padding: 25px !important;
  }

  .notes-yellow-icon {
      background-color: #f1c40f;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* Selectable Note Type Cards */
  .note-type-option {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 15px;
      cursor: pointer;
      background: white;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      height: 100%;
  }

  .note-type-option:hover {
      border-color: #3b82f6;
      background-color: #f8fafc;
  }

  /* Hidden Radio logic to style cards */
  .note-type-radio {
      display: none;
  }

  .note-type-radio:checked+.note-type-option {
      border-color: #3b82f6 !important;
      background-color: #eff6ff !important;
      box-shadow: 0 0 0 1px #3b82f6;
  }

  .type-icon-circle {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      flex-shrink: 0;
  }

  /* Form Controls */
  .notes-form-label {
      font-weight: 600;
      color: #334155;
      font-size: 15px;
      margin-bottom: 8px;
  }

  .notes-input {
      border-radius: 10px !important;
      border: 1px solid #e2e8f0 !important;
      padding: 12px 15px !important;
      font-size: 14px !important;
  }

  .notes-input:focus {
      border-color: #3b82f6 !important;
      box-shadow: none !important;
  }

  .btn-save-notes {
      background-color: #007a5e !important;
      color: white !important;
      border: none !important;
      padding: 10px 35px !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
  }

  .btn-cancel-notes {
      background-color: #f1f5f9 !important;
      color: #64748b !important;
      border: none !important;
      padding: 10px 25px !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
  }

  .text-danger.small {
      color: #dc3545;
      font-size: 0.875em;
      font-weight: 500;
  }

  .is-invalid {
      border-color: #dc3545 !important;
  }

  #note_type-error-container span.text-danger {
      border-color: #dc3545 !important;
      color: #dc3545 !important;
      display: block;
      margin-top: 5px;
  }

  /* Rich HTML note content in notes list */
  .notes-item-row .text-muted p { margin-bottom: 4px; }
  .notes-item-row .text-muted p:last-child { margin-bottom: 0; }
  .notes-item-row .text-muted ul,
  .notes-item-row .text-muted ol { margin: 4px 0; padding-left: 20px; }
  .notes-item-row .text-muted strong,
  .notes-item-row .text-muted b { font-weight: 700; color: #1e293b; }
  .notes-item-row .text-muted em,
  .notes-item-row .text-muted i { font-style: italic; }
  .notes-item-row .text-muted blockquote {
      border-left: 3px solid #cbd5e1;
      padding-left: 10px;
      margin: 4px 0;
      color: #64748b;
  }

  /* Rich HTML note content in order flow */
  .note-html-content p { margin-bottom: 6px; }
  .note-html-content p:last-child { margin-bottom: 0; }
  .note-html-content ul,
  .note-html-content ol { margin: 4px 0; padding-left: 20px; }
  .note-html-content strong,
  .note-html-content b { font-weight: 700; color: #000; }
  .note-html-content em,
  .note-html-content i { font-style: italic; }
  .note-html-content blockquote {
      border-left: 3px solid #cbd5e1;
      padding-left: 10px;
      margin: 4px 0;
      color: #64748b;
  }

  /* Checkbox */
.ug-custom-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    cursor: pointer;
    border: 1.5px solid #d1d5db; /* Light grey border like selects */
    border-radius: 4px;
}

/* Checked state color (Green of theme) */
.ug-custom-check .form-check-input:checked {
    background-color: #00a65a;
    border-color: #00a65a;
}

/* Label alignment */
.ug-custom-check .form-check-label {
    cursor: pointer;
    padding-left: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.25rem;
    display: inline-block;
}

/* Disabled state */
.ug-custom-check .form-check-input:disabled {
    background-color: #f3f4f6;
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Product Catalog Sidebar — OOD Figma Alignment
   ============================================ */

/* Catalog overlay slides in from left */
.catalog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    z-index: 1050;
    padding: 80px 0 0 0;
    pointer-events: none;
}

.catalog-overlay .product-catalog-panel {
    pointer-events: all;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-catalog-panel {
    background: #fff;
    border-right: 1px solid #E5E7EB;
    box-shadow: 4px 0 24px rgba(0,0,0,0.08);
    overflow: hidden;
}

.product-catalog-panel .catalog-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #E5E7EB;
}

.product-catalog-panel .catalog-header h6 {
    font-size: 16px;
    font-weight: 600;
    color: #202221;
    margin-bottom: 2px;
}

.product-catalog-panel .catalog-header .product-count {
    font-size: 13px;
    color: var(--ug-muted-text);
}

.product-catalog-panel .catalog-search {
    padding: 8px 16px 12px;
    border-bottom: 1px solid #E5E7EB;
}

.product-catalog-panel .catalog-search input {
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    padding: 8px 12px 8px 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%238898aa' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.44.856a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.catalog-scroll-area {
    flex: 1;
    overflow-y: auto;
}

.catalog-footer {
    border-top: 1px solid #E5E7EB;
    padding: 12px 16px;
    background: #f9fafb;
}

/* Category Accordions */
.catalog-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.catalog-accordion .accordion-button {
    font-size: 14px;
    font-weight: 600;
    color: #202221;
    padding: 12px 16px;
    background: transparent;
    box-shadow: none;
}

.catalog-accordion .accordion-button:not(.collapsed) {
    color: var(--ug-brand-green);
    background: rgba(1, 103, 73, 0.04);
}

.catalog-accordion .accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
}

.catalog-accordion .accordion-body {
    padding: 4px 16px 12px;
}

/* Product Cards in Catalog */
.catalog-product-card {
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.catalog-product-card:last-child {
    border-bottom: none;
}

.catalog-product-card .product-name {
    font-size: 13px;
    font-weight: 600;
    color: #202221;
    margin-bottom: 6px;
    display: block;
}

.catalog-product-card .best-seller-badge {
    font-size: 10px;
    background: #FEF3C7;
    color: #92400E;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

/* Jar Size Pills */
.jar-size-btn {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    background: #fff;
    color: #4F5351;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.3;
}

.jar-size-btn:hover {
    border-color: var(--ug-brand-green);
    background: rgba(1, 103, 73, 0.06);
    color: var(--ug-brand-green);
}

.jar-size-btn:active {
    background: var(--ug-brand-green);
    color: #fff;
    border-color: var(--ug-brand-green);
}

.jar-size-btn .jar-price {
    font-weight: 600;
    display: block;
    font-size: 11px;
    color: var(--ug-brand-green);
}

.jar-size-btn:hover .jar-price {
    color: var(--ug-brand-green);
}

.jar-size-btn:active .jar-price {
    color: #fff;
}

/* Catalog empty/no-results state */
.catalog-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--ug-muted-text);
    font-size: 13px;
}

/* ============================================
   Order Success Modal — Figma Alignment
   ============================================ */

#orderSuccessModal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.success-checkmark-circle {
    width: 64px;
    height: 64px;
    background: var(--ug-brand-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.success-checkmark-circle svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    stroke-width: 3;
    fill: none;
}

/* Catalog close button (green circle with < arrow) */
.catalog-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ug-brand-green);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.catalog-close-btn:hover {
    background: #004d29;
}

/* ============================================
   Account Overview Cards — Figma Style
   ============================================ */

.ao-card {
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
}

.ao-card-label {
    font-size: 15px;
    margin-bottom: 4px;
}

.ao-card-value {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}

.ao-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ao-detail-label {
    font-size: 14px;
}

/* KPI card rows (dashboards): keep every card aligned regardless of how many
   lines the title wraps to (July 4). Reserve two title lines so the big
   numbers sit on the same baseline across cards, and pin the caption to the
   bottom so those align too. Scoped to .ug-kpi-cards so it never touches the
   Billing/A-R cards that also use .ao-card. */
.ug-kpi-cards .ao-card-label {
    min-height: 2.5em;
    display: flex;
    align-items: flex-start;
}
.ug-kpi-cards .ao-detail-label {
    margin-top: auto !important;
    padding-top: 6px;
}

.ao-detail-value {
    font-size: 14px;
    font-weight: 700;
}

/* Green — Credit Limit */
.ao-card-green {
    background: linear-gradient(180deg, #016749 0%, #0A7736 100%);
    color: #fff;
}
.ao-card-green .ao-card-label { color: rgba(255,255,255,0.8); }
.ao-card-green .ao-card-value { color: #fff; }
.ao-card-green .ao-detail-label { color: rgba(255,255,255,0.8); }
.ao-card-green .ao-detail-value { color: #fff; }
.ao-icon-green { background: rgba(255,255,255,0.2); }

/* Yellow — Open Invoices */
.ao-card-yellow {
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
    border-color: #FDE68A;
}
.ao-label-yellow { color: rgba(120,53,15,0.8); }
.ao-value-yellow { color: #78350F; }
.ao-icon-yellow { background: #FBBF24; }

/* Blue — Sales Rep */
.ao-card-blue {
    background: rgba(33,164,229,0.08);
    border-color: #BFDBFE;
}
.ao-label-blue { color: rgba(30,58,138,0.8); }
.ao-value-blue { color: #1E3A8A; font-size: 20px; }
.ao-icon-blue { background: #3B82F6; }

/* Emerald — Available Credit (light variant; pairs with bottom-row tiles) */
.ao-card-emerald {
    background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: #6EE7B7;
}
.ao-label-emerald { color: rgba(6,95,70,0.8); }
.ao-value-emerald { color: #065F46; }
.ao-icon-emerald { background: #059669; }
.ao-card-emerald .ao-card-label { color: rgba(6,95,70,0.85); }
.ao-card-emerald .ao-card-value { color: #065F46; }
.ao-card-emerald .ao-detail-label { color: rgba(6,95,70,0.7); }
.ao-card-emerald .ao-detail-value { color: #065F46; }

/* Rose — Open Invoices */
.ao-card-rose {
    background: linear-gradient(180deg, #FFF1F2 0%, #FFE4E6 100%);
    border-color: #FDA4AF;
}
.ao-label-rose { color: rgba(159,18,57,0.8); }
.ao-value-rose { color: #9F1239; }
.ao-icon-rose { background: #E11D48; }
.ao-card-rose .ao-card-label { color: rgba(159,18,57,0.85); }
.ao-card-rose .ao-card-value { color: #9F1239; }
.ao-card-rose .ao-detail-label { color: rgba(159,18,57,0.7); }
.ao-card-rose .ao-detail-value { color: #9F1239; }

/* Change Password modal — brand styling for buttons + requirement bullets. */
.custom_modal .modal-title {
    color: #016749;
    font-weight: 700;
}
.custom_modal .round_btn {
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.custom_modal .round_btn.cnfrm-btn {
    background: #016749;
    color: #fff;
    border-color: #016749;
}
.custom_modal .round_btn.cnfrm-btn:hover:not(:disabled) {
    background: #015a3e;
    border-color: #015a3e;
    box-shadow: 0 4px 12px rgba(1, 103, 73, 0.25);
}
.custom_modal .round_btn.cnfrm-btn:disabled {
    background: #d1d5db;
    border-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}
.custom_modal .round_btn.outline-btn {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}
.custom_modal .round_btn.outline-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.custom_modal .req-list {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0;
}
.custom_modal .req-item {
    font-size: 12px;
    color: #dc2626;
    line-height: 1.7;
}
.custom_modal .req-item.valid {
    color: #016749;
}
.custom_modal .toggle-password-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 4px;
    color: #6b7280;
    cursor: pointer;
}
.custom_modal .toggle-password-btn:hover {
    color: #016749;
}

/* Product Center /product/list grid — keep PRODUCT NAME column left-aligned
   even though the parent table uses text-center for every other column.
   Column 3 in this table after the ACTION column was moved to slot 0:
     1: ACTION  |  2: ITEM #  |  3: PRODUCT NAME  | 4: PRODUCT IMAGE | … */
#products td:nth-child(3),
#products th:nth-child(3) {
    text-align: left !important;
}

/* Indigo — Sales Rep */
.ao-card-indigo {
    background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%);
    border-color: #A5B4FC;
}
.ao-label-indigo { color: rgba(55,48,163,0.8); }
.ao-value-indigo { color: #3730A3; }
.ao-icon-indigo { background: #6366F1; }
.ao-card-indigo .ao-card-label { color: rgba(55,48,163,0.85); }
.ao-card-indigo .ao-card-value { color: #3730A3; }
.ao-card-indigo .ao-detail-label { color: rgba(55,48,163,0.7); }
.ao-card-indigo .ao-detail-value { color: #3730A3; }

.credit-progress-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    overflow: hidden;
}

.credit-progress-bar {
    height: 100%;
    background: #fff;
    border-radius: 100px;
    transition: width 0.3s ease;
}

/* Open Invoice list items (inside yellow ao-card) */
.oi-list {
    max-height: 90px;
    overflow-y: auto;
}

.oi-row {
    padding: 5px 0;
    border-bottom: 1px solid rgba(120,53,15,0.1);
}

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

.oi-order-num {
    font-size: 13px;
    font-weight: 600;
    color: #78350F;
}

.oi-order-total {
    font-size: 12px;
    color: rgba(120,53,15,0.6);
    margin-left: 8px;
}

.oi-status-badge {
    font-size: 11px;
    font-weight: 600;
    color: #92400E;
    background: rgba(146,64,14,0.12);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Product search dropdown card style */
#productSearchResults .product-result {
    border-bottom: 1px solid #f0f0f0;
    white-space: normal;
}

#productSearchResults .product-result:last-child {
    border-bottom: none;
}

#productSearchResults .product-result:hover {
    background: #f9fafb;
}

/* ============================================
   Company Details Header — Figma Alignment
   ============================================ */

.company-details-header {
    font-size: 16px;
    font-weight: 600;
    color: #202221;
    margin-bottom: 12px;
    padding-bottom: 0;
}

/* Notes section polish */
.note-display-box {
    min-height: 70px;
    font-size: 13px;
    line-height: 1.5;
    background: #f9fafb;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    padding: 10px 12px;
    color: #4F5351;
}

/* Item Details table header — brand green */
.ug-table thead th {
    background-color: var(--ug-brand-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.ug-table thead th:last-child {
    border-right: none;
}

.ug-table tbody td {
    font-size: 13px;
    color: #344054;
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #E5E7EB;
}

.ug-table tbody tr:hover {
    background-color: #f9fafb;
}

.ug-table .ug-cell-center {
    text-align: center;
}

.ug-table .ug-cell-link {
    color: #016749;
    font-weight: 600;
    text-decoration: none;
}

.ug-table .ug-cell-link:hover {
    color: #015a3f;
    text-decoration: underline;
}

.ug-table .ug-cell-muted {
    color: #667085;
}

/* -- Shared UG Buttons --------------------------------------------------- */
.ug-btn-primary {
    background: var(--ug-brand-green, #016749);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
}
.ug-btn-primary:hover { background: #015a3f; color: #fff; }

.ug-btn-outline-sm {
    border: 1px solid #D0D5DD;
    background: #fff;
    color: #344054;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
}
.ug-btn-outline-sm:hover { background: #f9fafb; }

/* -- Shared UG Search ---------------------------------------------------- */
.ug-search-wrap {
    position: relative;
    width: 180px;
}
.ug-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.ug-search-input {
    padding-left: 32px !important;
    height: 34px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid #D0D5DD;
}

/* -- Shared UG Action Icons ----------------------------------------------
   Tinted-chip action buttons per Figma. Each variant carries a persistent
   faded background that darkens on hover. Mix and match `.ug-action-icon`
   with a tone class (`.ug-action-view`, `.ug-action-approve`, etc.) — if
   no tone class is present the icon falls back to neutral gray. */
.ug-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .12s;
    padding: 0;
    background: #F2F4F7;
    color: #475467;
}
.ug-action-icon:hover { transform: translateY(-1px); }
.ug-action-icon svg { display: block; }

/* View / quick-look — soft blue */
.ug-action-view        { background: #EFF8FF; color: #175CD3; }
.ug-action-view:hover  { background: #D1E9FF; }
.ug-action-view svg    { stroke: #175CD3; }

/* Approve / advance — soft green */
.ug-action-approve       { background: #ECFDF3; color: #027A48; }
.ug-action-approve:hover { background: #D1FADF; }
.ug-action-approve svg   { stroke: #027A48; }

/* Hold / pause — soft amber */
.ug-action-hold       { background: #FFFAEB; color: #B54708; }
.ug-action-hold:hover { background: #FEF0C7; }
.ug-action-hold svg   { stroke: #B54708; }

/* Remove Hold / play — soft blue (advancement) */
.ug-action-remove-hold       { background: #EFF8FF; color: #175CD3; }
.ug-action-remove-hold:hover { background: #D1E9FF; }
.ug-action-remove-hold svg   { stroke: #175CD3; }

/* Cancel / delete — soft red */
.ug-action-delete       { background: #FEF3F2; color: #B42318; }
.ug-action-delete:hover { background: #FEE4E2; }
.ug-action-delete svg   { stroke: #B42318; }
.ug-action-cancel       { background: #FEF3F2; color: #B42318; }
.ug-action-cancel:hover { background: #FEE4E2; }
.ug-action-cancel svg   { stroke: #B42318; }

/* Pallets / details — soft orange */
.ug-action-pallets       { background: #FFF6ED; color: #C4320A; }
.ug-action-pallets:hover { background: #FDDCAB; }
.ug-action-pallets svg   { stroke: #C4320A; }

/* Edit / quick-edit — soft indigo (distinct from view but related) */
.ug-action-edit       { background: #F4F3FF; color: #5925DC; }
.ug-action-edit:hover { background: #E9E7FF; }
.ug-action-edit svg   { stroke: #5925DC; }

/* Invoice / detail / file — soft teal */
.ug-action-invoice       { background: #F0FDFA; color: #115E59; }
.ug-action-invoice:hover { background: #CCFBF1; }
.ug-action-invoice svg   { stroke: #115E59; }

/* -- Shared UG Pill Tabs ------------------------------------------------- */
.ug-order-tabs { margin-top: 4px; }

.ug-pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 14px;
    border: 1px solid #D0D5DD;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
    text-decoration: none;
    min-height: 48px;
}
.ug-pill-tab__icon {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.ug-pill-tab:hover { background: #f9fafb; color: #344054; text-decoration: none; }

.ug-pill-tab.active {
    background: #FACC15;
    border: 1px solid #D4A20C;
    color: #1F2937;
    font-weight: 600;
}
.ug-pill-tab.active:hover { background: #EAB308; color: #1F2937; text-decoration: none; }
.ug-pill-tab.active .ug-pill-badge {
    background: #B45309;
    color: #FFFFFF;
}

.ug-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #F2F4F7;
    color: #344054;
    margin-left: 0;
}

/* -- Shared UG Quantity Badge --------------------------------------------
   Figma case-quantity styling: light blue chip, dark blue numeral. */
.ug-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #EFF8FF;
    color: #175CD3;
}

/* -- Shared Quick-Edit Drawer -------------------------------------------
   Used by Sales Orders, Label Orders, and (when added) Warehouse Orders.
   Includes drawer shell + header + form layout + button tones. */
.ug-quick-drawer { width: 640px !important; max-width: 100vw; }
.ug-quick-drawer-header {
    background: linear-gradient(180deg, #016749 0%, #014a35 100%);
    color: #fff;
    padding: 16px 22px;
}
.ug-quick-drawer-titlewrap {
    display: flex; align-items: center; gap: 12px;
}
.ug-quick-drawer-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #FACC15;
    color: #1F2937;
    flex-shrink: 0;
}
.ug-quick-drawer-header .offcanvas-title { font-weight: 600; font-size: 16px; }
.ug-quick-drawer-body { padding: 22px 24px; }

/* June 17 Loom: the drawer's top sections (identity / Assignment / Order
   Detail / Next Steps) now use the SAME rounded green-header card chrome as
   the .ug-dcard summary cards (Fulfillment / Notes / Account), so every
   section in every dept drawer (Orders / Label / Warehouse, all stages)
   reads as one system. Each .ug-qd-section IS the card; .ug-qd-section-title
   becomes the green header bar (full-bleed via negative margins, clipped to
   the card radius by overflow:hidden). Matches .ug-dcard exactly. */
.ug-qd-section {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    padding: 0.875rem 1.25rem;
    margin-bottom: 16px;
}
.ug-qd-section:last-child { margin-bottom: 16px; }
.ug-qd-section-title {
    margin: -0.875rem -1.25rem 0.875rem;
    padding: 0.7rem 1.25rem;
    background: #016749;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.ug-qd-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.ug-qd-row .ug-qd-label { color: #667085; flex-shrink: 0; }
.ug-qd-row .ug-qd-value { color: #101828; font-weight: 500; text-align: right; }

.ug-qd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 10px;
}
.ug-qd-grid .ug-qd-cell { display: flex; flex-direction: column; gap: 2px; }
.ug-qd-grid .ug-qd-cell-label { font-size: 11px; color: #667085; text-transform: uppercase; letter-spacing: 0.04em; }
.ug-qd-grid .ug-qd-cell-value { font-size: 13.5px; color: #101828; font-weight: 500; }

.ug-qd-form-row { margin-bottom: 12px; }
.ug-qd-form-row label { font-size: 12px; color: #344054; margin-bottom: 4px; display: block; font-weight: 500; }
.ug-qd-form-row .form-control,
.ug-qd-form-row .form-select { font-size: 13px; padding: 8px 12px; }

.ug-qd-actions {
    margin-top: 16px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ug-qd-btn {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .12s ease;
}
.ug-qd-btn-primary  { background: #016749; color: #fff; }
.ug-qd-btn-primary:hover  { background: #014a35; }
.ug-qd-btn-success  { background: #ECFDF3; color: #027A48; border-color: #ABEFC6; }
.ug-qd-btn-success:hover  { background: #D1FADF; }
.ug-qd-btn-warning  { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }
.ug-qd-btn-warning:hover  { background: #FEF0C7; }
.ug-qd-btn-danger   { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.ug-qd-btn-danger:hover   { background: #FEE4E2; }
.ug-qd-btn-info     { background: #EFF8FF; color: #175CD3; border-color: #B2DDFF; }
.ug-qd-btn-info:hover     { background: #D1E9FF; }
.ug-qd-btn-secondary { background: #F9FAFB; color: #344054; border-color: #D0D5DD; }
.ug-qd-btn-secondary:hover { background: #F2F4F7; }
.ug-qd-readonly-banner {
    padding: 12px 16px;
    background: #F2F4F7;
    border-radius: 8px;
    font-size: 12.5px;
    color: #475467;
}

/* -- Cart drawer Featured Products carousel ----------------------------- */
#scrollContainer::-webkit-scrollbar { display: none; }
#scrollContainer { -ms-overflow-style: none; }

/* -- ASAP Pill (Orders tabs, drawer header, customer order list) -------- */
.ug-asap-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FACC15;
    color: #78350F;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* -- ASAP/Scheduled card option (customer Additional Info step) --------- */
.ug-asap-option {
    background: #fff;
    border-color: #E5E7EB !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ug-asap-option:hover { border-color: #98C8B6 !important; }
.ug-asap-option.is-active {
    border-color: var(--ug-brand-green, #016749) !important;
    box-shadow: 0 0 0 3px rgba(1, 103, 73, 0.12);
}

/* -- BOL Delivery-Mode Toggle (Order dept BOL workstation drawer) -------- */
.ug-bol-mode-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    overflow: hidden;
    background: #F9FAFB;
}
.ug-bol-mode-btn {
    flex: 1 1 auto;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475467;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.ug-bol-mode-btn:hover { background: #F2F4F7; color: #101828; }
.ug-bol-mode-btn.is-active {
    background: var(--ug-brand-green, #016749);
    color: #fff;
    font-weight: 600;
}
.ug-bol-mode-btn.is-active:hover { background: var(--ug-brand-green, #016749); }

/* -- Shared UG Priority Chip --------------------------------------------- */
.ug-priority-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.ug-priority-low    { background: #F2F4F7; color: #475467; border-color: #D0D5DD; }
.ug-priority-medium { background: #EFF8FF; color: #175CD3; border-color: #B2DDFF; }
.ug-priority-high   { background: #FFF6ED; color: #C4320A; border-color: #FDDCAB; }
.ug-priority-urgent { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }

/* -- Shared UG Pagination ------------------------------------------------ */
.ug-pagination-label {
    font-size: 13px;
    color: #667085;
}
.ug-page-size {
    width: 64px;
    height: 32px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #D0D5DD;
}
.ug-page-numbers .page-link {
    border: 1px solid #D0D5DD;
    color: #344054;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px !important;
    margin: 0 2px;
}
.ug-page-numbers .page-item.active .page-link {
    background: #016749;
    border-color: #016749;
    color: #fff;
}

/* ============================================================
   Phase D — Mobile responsive overhaul
   ============================================================
   Breakpoints:
     - ≤768px: phone. Sidebar becomes an off-canvas drawer (hidden by
       default, hamburger toggles it in). Content gets full viewport
       width. Tab pills scroll horizontally inside a single row.
     - 769–1024px: tablet. Existing icon-collapsed sidebar pattern
       stays as-is.
     - ≥1025px: desktop. Unchanged.
   No data model touched — pure CSS overrides + minor JS already in
   main.jsx that toggles `sidebar-expanded` + appends an overlay.
   ============================================================ */

/* Overlay (mobile + tablet — added by JS when sidebar-expanded) */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.overlay.overlay-active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    /* Sidebar off-canvas — fixed position, slides in from left */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .28s ease;
        overflow-y: auto;
    }
    body.sidebar-expanded .sidebar {
        transform: translateX(0);
    }
    body.sidebar-reduced .sidebar {
        transform: translateX(-100%);
    }

    /* Content always takes full width on phone */
    body.sidebar-reduced main.main-body,
    body.sidebar-expanded main.main-body {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Hamburger always visible on phone (it can be hidden on desktop in
       some templates — make sure it's a 44px tap target). */
    .header-icon.js-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
    }

    /* 2026-05-20 — mobile sidebar must ALWAYS have a visible close affordance.
       The .close-sidebar X is hidden globally (line 682) so without this
       override the user gets a stuck open state if the sidebar ever opens
       via any path other than the hamburger toggle (e.g. localStorage
       restore on first paint, see app.blade.php). The handler is already
       wired in main.jsx to remove sidebar-expanded + clear the overlay. */
    .close-sidebar {
        display: flex !important;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1052;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        cursor: pointer;
    }
    .close-sidebar:active {
        background: rgba(255, 255, 255, 0.22);
    }

    /* 2026-05-20 — the body class names are inverted from intuition:
       on desktop `sidebar-expanded` actually means "collapsed to icons
       only" (see lines 840-847 of this file — they hide .items-name
       and shrink each li to 48px). On MOBILE we reuse `sidebar-expanded`
       to mean "drawer is open and SHOULD show full labels", so we have
       to explicitly undo those desktop collapsed-mode rules inside the
       mobile media query, or the drawer looks like a stripped icon rail.
       Reported by Tab on iPhone 2026-05-20. */
    body.sidebar-expanded .items-name {
        display: inline !important;
    }
    body.sidebar-expanded ul.menu-item li {
        justify-content: flex-start !important;
        width: 100% !important;
    }
    body.sidebar-expanded .sidebar .logo {
        /* The desktop "expanded" (= collapsed) mode squeezes the logo
           down; the mobile drawer is full-width and should display the
           regular logo treatment. */
        padding: 16px;
    }
    body.sidebar-expanded .sidebar .logo img {
        max-width: 180px;
        height: auto;
    }

    /* Tab pill row — switch from wrap to horizontal scroll so the
       active pill stays visible without stacking everything. */
    .ug-order-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }
    .ug-order-tabs::-webkit-scrollbar { height: 4px; }
    .ug-order-tabs::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 2px; }
    .ug-pill-tab {
        flex-shrink: 0;
    }

    /* Page header — stack title + primary action on phone so the action
       button doesn't overflow. */
    .ug-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .ug-page-header > div:last-child {
        width: 100%;
    }

    /* Card header — let the toolbar wrap underneath the title rather
       than crowding the right edge. */
    .ug-customer-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ug-customer-card-header .d-flex {
        flex-wrap: wrap;
        width: 100%;
    }

    /* Quick-edit drawer — claim the whole viewport instead of 640px. */
    .ug-quick-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    /* Drawer 2-column grid collapses to single column on phone. */
    .ug-qd-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet polish — sidebar shows as icon-only column, tabs wrap normally. */
@media (min-width: 769px) and (max-width: 1024px) {
    .ug-order-tabs {
        flex-wrap: wrap;
    }
    .ug-quick-drawer {
        width: 540px !important;
    }
}