:root {
      --litepicker-day-width: 47px;
      --litepicker-month-width: calc(var(--litepicker-day-width) * 7);
  }

  /*  */
  [x-cloak] {
      display: none;
  }

  .tooltip {
      position: relative;

      &::before {
          content: attr(title);
          color: white;
          display: inline-block;
          position: absolute;
          background-color: #6C7F95;
          border-radius: 4px;
          white-space: nowrap;
          padding: 6px 8px;
          font-weight: 600;
          font-size: 12px;
          line-height: 20px;
          text-transform: capitalize;
          visibility: collapse;
          opacity: 0;
          transition: all 500ms ease-in-out;
      }

      &.tooltip-left::before {
          left: 6px;
          right: auto;
          transform: translateX(-100%);
      }

      &.tooltip-bottom::before {
          top: 45px;
          left: 20px;
      }

      &:hover::before {
          visibility: visible;
          opacity: 1;
      }
  }

  .zoom-in {
      will-change: transform;
      transition-property: transform, box-shadow;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;

      &:hover {
          transform: scale(1.05);
      }
  }

  .arrow {
      background-image: var(--my-bg);
  }



  *:not(html) {
      scrollbar-width: thin;
      scrollbar-color: #a0aec0 #f1f5f9;
  }


  /* Webkit browsers (Chrome, Edge, Safari) */
  *:not(html) {
      &::-webkit-scrollbar {
          width: 2px;
          height: 2px;
      }

      &::-webkit-scrollbar-track {
          background: #f1f5f9;
          border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
          background-color: #191919;
      }
  }

  /* Firefox */



  /* ============================================================
   Tom Select – Custom Styles
   ------------------------------------------------------------
   Place all global Tom Select overrides here. 
   For component-specific adjustments, add styles in this section as well.
============================================================ */
  .ts-control,
  .ts-control input,
  .ts-dropdown {
      color: inherit;
      font-size: inherit;
      line-height: inherit;
  }

  .ts-wrapper.single .ts-control {
      background-color: unset;
      background-image: unset;
      box-shadow: none;
      background-repeat: unset;

  }

  .ts-dropdown.single,
  .ts-wrapper.single .ts-control {
      border-color: var(--color-neutralBorder-03);
  }

  .ts-wrapper.single .ts-control::after {
      border: none !important;
      content: " ";
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 16px !important;
      height: 16px !important;
      background: url("../images/angle-down-small-h6Tkp3t.svg");
      background-repeat: no-repeat;
      background-position: center center;
  }

  .ts-wrapper.single .ts-control:not(.rtl)::after {
      right: 12px;
  }

  .ts-wrapper.single .ts-control.rtl::after {
      left: 12px;
  }

  .ts-control {
      padding: 10px 12px;
  }

  .view-tom-select {
      position: relative;
  }


    .ts-control {
      background-color: #fff !important;
      background-image: none !important;
      box-shadow: none !important;
      border: 1px solid #DEE6ED !important;
      border-radius: 4px !important;
      padding-block: 6px;
      padding-inline: 16px;
      align-items: center;
  }

  .dropdown-input-wrap input,
    .ts-control:focus-visible {
      outline: none !important;
      /* border */
  }

    .ts-dropdown {
      border-color: #DEE6ED !important;
  }


  .view-tom-select .ts-wrapper {
      position: static !important;
      min-height: 25px !important;
  }

  .view-tom-select .ts-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
  }

  .view-tom-select .ts-control {
      background: #DDEBFB !important;
      border-radius: 130px !important;
      padding: 0 !important;
      padding-right: 0 !important;
      text-align: center !important;
      width: 70px !important;
      justify-content: center !important;
      align-items: center !important;
      position: static !important;
  }

  .view-tom-select .ts-control::before {
      content: "";
      position: absolute;
      inset: 0;
  }

  .filter-tom-select .tom-select {
      padding: 0 4px !important;
      width: 100% !important;
      outline: none !important;
  }

  .view-tom-select select,
  select {
      background-size: 16px;
  }

  .view-tom-select select {
      padding: 0 24px 0 3px !important;
      outline: 0 !important;
  }



  /* ============================================================
  Ends/ Tom Select – Custom Styles
============================================================ */

  /* ============================================================
  start/ base css – Custom Styles
============================================================ */
  .page-content-wrapper {
      height: calc(100vh - 65px);
      padding-bottom: 8px;
  }

  .date-input {
      background-image: url("../images/calendar-HCqSYvi.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .date-outline-input {
      background-image: url("../images/outline-calendar-icon-d-YbBHQ.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .time-input {
      background-image: url("../images/clock-icon-1ugP3oq.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .location-input {
      background-image: url("../images/location-icon-3DMAcVu.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .file-input {
      background-image: url("../images/file-upload-icon-pM1tw_q.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .search-input {
      background-image: url("../images/search-blue-icon-mFog1-_.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: right 10px center;
  }

  .search-input-left {
      background-image: url("../images/search-blue-icon-mFog1-_.svg");
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: left 10px center;
  }

  .ms-options-wrap>.ms-options>ul label {
      padding: 4px 4px 4px 26px !important;
  }

  .ms-options-wrap>.ms-options>ul input[type="checkbox"] {
      top: 5px !important;
  }

  .ms-options-wrap>button:after {
      content: "" !important;
      background-image: url("../images/angle-down-small-h6Tkp3t.svg") !important;
      background-repeat: no-repeat !important;
      width: 16px !important;
      height: 16px !important;
      display: inline-block;
      z-index: 999999;
      border: none !important;
  }

  .ms-options-wrap.ms-active>.ms-options {
      min-height: 150px !important;
  }

  .rules-container>div {
      display: flex;
      align-items: center;
      gap: 30px;
  }

  .rules-container>div>div:nth-child(2),
  .rules-container>div>div:last-child {
      width: 100px;
  }

  .custom-calendar .toastui-calendar-layout {
      border: 1px solid #F2F4F7;
  }

  .custom-calendar .toastui-calendar-day-names {
      background-color: #F9FAFB !important;
      padding: 0 0 !important;
  }

  .custom-calendar .toastui-calendar-day-names .toastui-calendar-day-name-container .toastui-calendar-day-name-item {
      border-right: 1px solid #EEF2F6 !important;
  }

  .custom-calendar .toastui-calendar-template-time,
  .custom-calendar .toastui-calendar-template-time strong {
      color: #6C7F95 !important;
      font-size: 12px !important;
      font-weight: 400 !important;
  }

  .custom-calendar .toastui-calendar-popup-container {
      box-shadow: none !important;
  }

  .cut-circle {
      background-color: var(--color);
      transform-style: preserve-3d;
  }

  .cut-circle:not(:first-child)::before {
      content: "";
      height: calc(100% + 2px);
      width: calc(100% + 2px);
      background-color: white;
      position: absolute;
      left: -4px;
      border-radius: 100%;
      top: 50%;
      transform: translateY(-50%) translateZ(-1px);
  }

  .time-picker-input select {
      border-radius: 4px !important;
  }

  .shadow-soft-lg {
      box-shadow:
          0px 10px 24px -2px #132D590F,
          0px 6px 7px -3px #132D5914;
  }

  /* toggle button extra design */
  .toggle-button p label {
      margin-bottom: 0 !important;
      cursor: pointer;
  }

  .user-search-form-control .ts-control {
      background: white !important;
      padding: 10px 12px !important;
      box-shadow: none !important;
      color: #475F7B !important;
      border-color: #DEE6ED !important;
  }

  .user-search-form-control .ts-wrapper.single {
      border-color: #DEE6ED !important;
  }

  .user-search-form-control .ts-dropdown {
      box-shadow: none !important;
      border-color: #DEE6ED !important;
  }

  .user-search-form-control .ts-dropdown .ts-dropdown-content {
      font-size: 13px !important;
      color: #475F7B !important;
  }

  .user-search-form-control .ts-control input,
  .user-search-form-control .ts-control .clear-button {
      display: none !important;
  }

  .ts-wrapper.single .ts-control:not(.rtl):after {
      margin: 0 !important;
  }

  /* loader css */
  .loader {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: block;
      margin: 15px auto;
      position: relative;
      color: #2E66B9;
      box-sizing: border-box;
      background: transparent;
      animation: animloader 1s linear infinite alternate;
  }

  @keyframes animloader {
      0% {
          box-shadow: -38px -6px, -14px 6px, 14px -6px;
      }

      33% {
          box-shadow: -38px 6px, -14px -6px, 14px 6px;
      }

      66% {
          box-shadow: -38px -6px, -14px 6px, 14px -6px;
      }

      100% {
          box-shadow: -38px 6px, -14px -6px, 14px 6px;
      }
  }

  /* glightbox content css */
  .gdesc-inner {
      padding: 12px 20px !important;
  }

  .gdesc-inner .gslide-title {
      margin-bottom: 0 !important;
  }

  table tbody tr:nth-last-child(-n+3) .dropdown-menu {
      bottom: 100%;
      transform: translateY(-100%);
      padding-top: 0;
      padding-bottom: 4px;
  }

  table tbody tr:nth-child(-n+3) .dropdown-menu {
      bottom: 0;
      transform: translateY(0);
      padding-top: 4px;
      padding-bottom: 0;
  }

  /* Default: open downward */
  .accordion-item .search-dropdown-menu {
      bottom: 0;
      transform: translateY(0);
      padding-top: 4px;
      padding-bottom: 0;
  }

  /* When there are 1 or 2 items → always open downward */
  .accordion-item:nth-child(-n+2):nth-last-child(-n+2) .search-dropdown-menu {
      bottom: 0 !important;
      transform: translateY(0) !important;
      padding-top: 4px !important;
      padding-bottom: 0 !important;
  }

  /* When there are exactly 3 items → all open upward */
  .accordion-item:nth-child(-n+3):nth-last-child(-n+3):not(:nth-child(-n+2):nth-last-child(-n+2)) .search-dropdown-menu {
      bottom: 100% !important;
      transform: translateY(-100%) !important;
      padding-top: 0 !important;
      padding-bottom: 4px !important;
  }

  /* 🩵 FIX: specifically for the 3-item case to ensure ALL 3 go upward */
  .accordion-item:nth-child(2):nth-last-child(2):nth-child(-n+3):nth-last-child(-n+3) .search-dropdown-menu {
      bottom: 100% !important;
      transform: translateY(-100%) !important;
      padding-top: 0 !important;
      padding-bottom: 4px !important;
  }

  /* When there are more than 3 items → last 3 open upward */
  .accordion-item:nth-last-child(-n+3):not(:nth-child(-n+3):nth-last-child(-n+3)) .search-dropdown-menu {
      bottom: 100%;
      transform: translateY(-100%);
      padding-top: 0;
      padding-bottom: 4px;
  }

  /* Remove default date icon */
  .date-input-default-icon::-webkit-calendar-picker-indicator {
      display: none !important;
      -webkit-appearance: none;
      appearance: none;
  }

  /* Remove spin buttons (Chrome, Edge) */
  .date-input-default-icon::-webkit-inner-spin-button {
      display: none;
  }

  /* Remove clear button (Edge) */
  .date-input-default-icon::-ms-clear {
      display: none;
  }

  .tomselect-edit-option .ts-control {
      background-color: #fff !important;
      background-image: none !important;
      box-shadow: none !important;
      border: 1px solid #DEE6ED !important;
      border-radius: 4px !important;
      padding-block: 6px;
      padding-inline: 16px;
      align-items: center;
  }

  .tomselect-edit-option .dropdown-input-wrap input,
  .tomselect-edit-option .ts-control:focus-visible {
      outline: none !important;
      /* border */
  }

  .tomselect-edit-option .ts-dropdown {
      border-color: #DEE6ED !important;
  }

  table.contact-list tbody tr:only-child .tomselect-position .ts-dropdown {
      top: 100%;
      bottom: auto;
  }

  table.contact-list tbody tr:nth-child(odd):nth-last-child(-n+6) .tomselect-position .ts-dropdown {
      margin-top: 0;
      top: auto;
      bottom: 100%;
      margin-bottom: 4px;
  }

  table.contact-list tbody:has(> tr:nth-of-type(2)):not(:has(> tr:nth-of-type(3))) tr:nth-child(odd) .tomselect-position .ts-dropdown {
      top: 100%;
      bottom: auto;
      margin-bottom: 0;
      margin-top: 4px;
  }

  table.contact-list tbody tr:nth-child(odd) td:nth-child(2),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(2),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(3),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(3),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(4),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(4),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(5),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(5),
  table.contact-list tbody tr:nth-child(odd) td:nth-child(6),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(6) {
      min-width: 200px;
  }

  table.contact-list tbody tr:nth-child(odd) td:nth-child(7),
  table.contact-list tbody tr:nth-child(odd) th:nth-child(7) {
      min-width: 200px;
  }

  table.contact-list tbody tr .tomselect-position .ts-dropdown .ts-dropdown-content {
      max-height: 120px;
  }

  table.contact-list tbody tr:nth-child(even):nth-last-child(-n+6) .tomselect-position .ts-dropdown {
      margin-top: 0;
      top: auto;
      bottom: 100%;
      margin-bottom: 4px;
  }

  /* ============================================================
    Ends/ base css – Custom Styles
============================================================ */




  /* ============================================================
  start lightpicker styles ( default css overrides and base css)
============================================================ */

  .litepicker {
      --litepicker-button-next-month-color: #2E66B9;
      --litepicker-button-next-month-color-hover: #2E66B9;
      --litepicker-button-prev-month-color: #2E66B9;
      --litepicker-button-prev-month-color-hover: #2E66B9;
      --litepicker-day-color: #6C7F95;
      --litepicker-month-header-color: #6C7F95;
      --litepicker-month-weekday-color: #D1D5DB;
      --litepicker-is-end-color-bg: #2E66B9;
      --litepicker-day-color-hover: #2E66B9;
      --litepicker-day-width: 44px;

      font-family: 'Inter';
      font-weight: 400;
      font-size: 13px;
      line-height: 20px;

  }

  .litepicker .container__months {
      box-shadow: 0px 10px 24px -2px #132D590F,
          0px 6px 7px -3px #132D5914;
  }

  .litepicker .container__days {
      width: calc(var(--litepicker-day-width) * 7);
  }

  .litepicker .container__months .month-item-header .button-previous-month,
  .litepicker .container__months .month-item-header .button-next-month {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #DEE6ED;
      position: relative;
      overflow: hidden;

      &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 20px;
      }

      &.button-next-month::before {
          transform: rotate(270deg);
      }

      &.button-previous-month::before {
          transform: rotate(90deg);
      }

      &:hover {
          background-color: #EEF2F6;

      }
  }

  .litepicker .container__months .month-item-header :is(.button-next-month, .button-previous-month)> :is(svg, img) {
      display: none;
  }

  .litepicker .container__months .month-item-header div>.month-item-name {
      font-weight: 500;
  }

  .litepicker .container__months .month-item-weekdays-row>div {
      padding: 12px 0px;
      /* height: 44px;
      padding: 4px;
      display: flex;
      justify-content: center;
      align-items: center; */
  }

  .litepicker .container__days>div,
  .litepicker .container__days>a {
      padding: 12px 0px;
      /* height: 44px;
      padding: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      background-clip: content-box; */
  }

  /* ============================================================
  ends lightpicker styles ( default css overrides and base css)
============================================================ */


  .dropdown {
      position: absolute;
      /* or 'fixed' to match strategy */
      top: 0;
      left: 0;
      width: max-content;
      z-index: 1000;
  }

  .arrow {
      position: absolute;
      width: 8px;
      height: 8px;
      transform: rotate(45deg);
  }

.holiday-highlight {
    background-color: #2C6DE9 !important;
    color: white !important;
/*     border-radius: 50%; */
  }


/* ============================================================
   Web Builder — Shared UI Styles
============================================================ */

/* Shared input field used across all web-builder pages */
.inp {
  padding: 7px 10px;
  font-size: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  outline: none;
  color: #0C2340;
  font-family: inherit;
  background: #fafafa;
  width: 100%;
  transition: border-color .12s;
}
.inp:focus {
  border-color: #378ADD;
  background: #fff;
}

/* Design-system panel uses purple focus to match its colour scheme */
#ds-form .inp:focus { border-color: #7F77DD; }

/* Page label style (new-page modal) */
.form-label {
  font-size: 11.5px;
  font-weight: 500;
  color: #444;
  letter-spacing: 0.02em;
}

/* New-page modal — larger inputs */
#new-page-modal .inp {
  padding: 7px 11px;
  font-size: 13px;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #fff;
}
#new-page-modal .inp:focus {
  border-color: #378ADD;
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.12);
}

/* New-page modal positioning */
#new-page-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: 92vh;
  overflow-y: auto;
}
#new-page-modal::backdrop { background: rgba(12, 35, 64, 0.35); }

/* Pages list — reveal row actions on row hover */
tr:hover .row-actions { opacity: 1 !important; }

/* Full-screen builder — hide chrome when .builder-shell is present */
body:has(.builder-shell) .top-menu-bar { display: none !important; }
body:has(.builder-shell) .page-content-wrapper { padding: 0 !important; }

/* Section builder animations */
@keyframes spin-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Section builder toolbar */
.page-section:hover .section-toolbar-inner { opacity: 1 !important; pointer-events: auto !important; }
.section-tb-hidden { opacity: 0; pointer-events: none; }
.insert-line:hover { opacity: 1 !important; }

/* ── Form Preview Overlay (library/index) ── */
.fpv-overlay { position: fixed; inset: 0; background: #e8edf4; z-index: 500; display: flex; flex-direction: column; overflow: hidden; }
.fpv-bar { height: 44px; background: #0C2340; display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; }
.fpv-bar-title { font-size: 12.5px; color: rgba(255,255,255,.6); flex: 1; }
.fpv-close { padding: 5px 14px; font-size: 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.65); cursor: pointer; font-family: inherit; transition: all .12s; }
.fpv-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.fpv-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 24px 40px; overflow: auto; }
.fpv-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 28px rgba(12,35,64,.15); width: 100%; max-width: 900px; }
.fpv-hdr { padding: 18px 22px 16px; }
.fpv-form-body { padding: 18px 22px; min-height: 240px; }
.fpv-foot { padding: 13px 22px; border-top: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: space-between; background: #fafafa; }
.fpv-sec-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.fpv-field { margin-bottom: 14px; }
.fpv-lbl { font-size: 12.5px; font-weight: 500; color: #374151; margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.fpv-req { color: #ef4444; font-size: 11px; }
.fpv-input { width: 100%; padding: 10px 13px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 7px; color: #9ca3af; background: #fafafa; font-family: inherit; box-sizing: border-box; }
.fpv-textarea { width: 100%; padding: 10px 13px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 7px; color: #9ca3af; background: #fafafa; font-family: inherit; resize: none; box-sizing: border-box; }
.fpv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fpv-cards { display: flex; flex-direction: column; gap: 8px; }
.fpv-card-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1.5px solid #e5e7eb; border-radius: 9px; cursor: default; }
.fpv-card-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d1d5db; flex-shrink: 0; margin-top: 2px; }
.fpv-card-name { font-size: 13px; color: #1e293b; }
.fpv-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.fpv-pill { padding: 7px 15px; border-radius: 7px; border: 1.5px solid #e5e7eb; font-size: 13px; color: #6b7280; cursor: default; }
.fpv-toggle { display: flex; gap: 8px; }
.fpv-toggle-opt { flex: 1; padding: 8px 12px; border: 1.5px solid #e5e7eb; border-radius: 7px; text-align: center; font-size: 13px; color: #6b7280; cursor: default; }
.fpv-step-track { display: flex; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.12); overflow-x: auto; gap: 0; }
.fpv-tb-heading { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 10px; }
.fpv-tb-body { font-size: 13.5px; color: #6b7280; line-height: 1.65; margin-bottom: 10px; }
.fpv-tb-hint { font-size: 12px; color: #9ca3af; font-style: italic; line-height: 1.5; margin-bottom: 8px; }
.fpv-spinner { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.fpv-spin { animation: fpv-spin .8s linear infinite; }
@keyframes fpv-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Ends/ Web Builder — Shared UI Styles
============================================================ */

/* ── Table grid-line modes (dt-gl-*) ──
   dt-gl-rows  → row borders only (default; <tr> already carries border-b via Tailwind)
   dt-gl-all   → full grid: row borders + vertical column dividers
   dt-gl-none  → no borders at all
*/
.dt-gl-all td,
.dt-gl-all th { border-right: 1px solid rgba(0,0,0,0.06); }
.dt-gl-all td:last-child,
.dt-gl-all th:last-child { border-right: none; }

.dt-gl-none tr { border-bottom-width: 0; }
.dt-gl-none td,
.dt-gl-none th { border: none; }

/* ============================================================
   Start/ AI Studio — Routing select styles
============================================================ */

/* ============================================================
   Wide comments panel — when a form layout has the Comments
   panel enabled, the right panel grows from 256px to 400px
   (.form-right-panel--wide, set in dynamic/form.html.twig).
   The popup/drawer shells below have fixed widths, so they must
   grow by the same +144px to keep the left form area unchanged.
============================================================ */

/* Popup shells (874px → 1018px) */
.new-contact-form:not([class*="w-400"]):has(.form-right-panel--wide),
.new-message-form:has(.form-right-panel--wide),
.panel-create:has(.form-right-panel--wide),
[class*="min-w-[874px]"]:has(.form-right-panel--wide) {
  width: 1018px;
  min-width: 1018px;
  max-width: 1018px;
}

/* Small popup shells (700px → 844px) */
[class*="min-w-[700px]"]:has(.form-right-panel--wide),
[class*="w-[700px]"]:has(.form-right-panel--wide) {
  width: 844px;
  min-width: 844px;
  max-width: 844px;
}

/* Drawer shells (790px → 934px) */
[class*="w-[790px]"]:has(.form-right-panel--wide) {
  width: 934px;
  max-width: 100%;
}