@import url("./assets/fonts/Indivisible/stylesheet.css");
@import url("./assets/fonts/Almarai/stylesheet.css");

html[dir="ltr"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(mat-icon):not(.e-icons):not(svg) {
    font-family: "Indivisible";
}

html[dir="rtl"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(mat-icon):not(.e-icons):not(svg) {
    font-family: "Almarai", sans-serif;
}

a,
.btn-link {
  color: #006bb7;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.action-btn svg {
  width: 1rem;
}

.svg-20 svg {
  width: 20px;
}

.card.col-card-input {
  border: 2px dashed lightgrey;
  border-radius: 5px;
  padding: 7px;
  margin-bottom: 7px;
}

.card.col-card {
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding: 7px;
  margin-bottom: 7px;
}

.btn-round {
  border-radius: 15px !important;
}

.chat-container {
  max-width: 1200px;
  margin: auto;
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 15px;
  font-family: "Indivisible-Regular";
}

@media (max-width: 600px) {
  .chat-container {
    padding: 1rem;
  }
}

.sailor-logo {
  max-height: 2.5rem;
  max-width: 10rem;
}

.chat-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 10px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
  max-width: 75%;
  min-width: 50%;
}

@media (max-width: 991.9px) {
  .chat-message {
    max-width: 100%;
    min-width: 100%;
  }
}

/* Hover animation for messages */
.chat-message:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* For messages from the user */
.user-message {
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/* For messages from the AI */
.ai-message {
  -ms-flex-item-align: start;
  align-self: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.message-content {
  padding: 12px 18px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;  
}

.message-content pre {
    white-space: break-spaces;
}

.message-content-inner {
  line-break: auto;
}

.message-content h3,
.message-content .h3 {
  font-size: 1.25rem;
}

.message-content ul {
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.message-content p {
  margin-bottom: 0;
}

.user-message .message-content {
  background-color: #dcf8c6; /* light green */
  color: #333;
}

.ai-message .message-content {
  background-color: #ffffff; /* white */
  color: #333;
  border: 1px solid #e0e0e0;
}

.message-content .multiselect-dropdown {
  min-width: 230px;
}

@media (min-width: 769px) {
  .message-content .multiselect-dropdown {
    min-width: 350px;
  }
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ddd;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.avatar img {
  width: 100%;
  height: 100%;
}

/* Plan progress panel — system-status UI that flows inline right after
   the last chat message. No sticky / absolute positioning: those pinned
   the panel to the bottom of the chat container even when content was
   short, leaving an awkward empty gap between the last message and the
   panel. Inline flow keeps the panel attached to the conversation so it
   appears exactly where the user is reading. The chat container's
   auto-scroll-to-bottom on new messages still keeps it visible. */
.plan-progress-panel {
  /* The chat-container is display:flex column, so without flex-shrink:0
     the panel gets squashed to a few px when the messages column is
     long. Lock the panel to its content height. */
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0.5rem 0 0.25rem 0;
  padding: 0.4rem 0.7rem;
  background-color: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
  max-height: 7.5rem;
  overflow-y: auto;
}

.plan-progress-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.plan-progress-status-text {
  color: #4b5563;
  font-style: italic;
}

.plan-progress-spinner {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid #d1d5db;
  border-top-color: #2563eb;
  border-radius: 50%;
  flex-shrink: 0;
}

.plan-progress-spinner.spinning {
  -webkit-animation: plan-progress-spin 0.9s linear infinite;
  animation: plan-progress-spin 0.9s linear infinite;
}

@-webkit-keyframes plan-progress-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes plan-progress-spin { to { transform: rotate(360deg); } }

.plan-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.plan-progress-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.05rem 0.2rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-progress-step-running {
  background: rgba(37, 99, 235, 0.08);
  color: #1e40af;
}

.plan-progress-step-done {
  color: #047857;
}

.plan-progress-step-failed {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.05);
}

.plan-progress-step-skipped {
  opacity: 0.45;
  text-decoration: line-through;
}

.plan-progress-step-icon {
  flex-shrink: 0;
  width: 0.9rem;
  text-align: center;
  font-size: 0.72rem;
}

.plan-progress-step-body {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-progress-step-title {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-progress-step-number {
  font-weight: 600;
  margin-right: 0.25rem;
}

.plan-progress-step-tool {
  display: inline;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  opacity: 0.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Live intra-call progress for the running step (issue #21) — kept on its
   own line so the action ticker doesn't clobber the step description.
   Headless tools like replay_recording would otherwise leave the user
   staring at "running" for tens of seconds with no signal. */
.plan-progress-step-progress {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #4d6273;
}

.plan-progress-step-progress.stalled {
  color: #b15a00;
  font-weight: 600;
}

/* Reason is hidden by default — too verbose for the always-visible
   panel. Power-users can still find the full plan in the diagnostic
   Logs pane. */
.plan-progress-step-reason {
  display: none;
}

.chat-form-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chat-form-container label {
  font-weight: 600;
  margin-bottom: 5px;
}

.chat-form-container .form-control {
  border-radius: 25px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.chat-form-container .form-control:focus {
  border-color: #80bdff;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
  box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
}

.chat-form-container .btn {
  border-radius: 25px;
  padding: 10px 20px;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.ai-icon {
  width: 4rem;
  height: 4rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
}

.ai-icon.thinking {
  -webkit-animation: thinkingAnimation 1s ease-in-out infinite;
  animation: thinkingAnimation 1s ease-in-out infinite;
}

@-webkit-keyframes thinkingAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes thinkingAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/* Animated Thinking Text */
.thinking-text {
  font-size: 18px;
  color: #666;
  font-style: italic;
  display: inline-block;
}

.dot {
    opacity: 0;
    animation: blink 1s infinite;
}
.dot:nth-child(1) {
    animation-delay: 0s;
}
.dot:nth-child(2) {
    animation-delay: 0.3s;
}
.dot:nth-child(3) {
    animation-delay: 0.6s;
}
@keyframes blink {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.sidebar {
  position: fixed;
  inset-inline-start: 0;
  height: calc(100% - 75px);
  overflow-y: auto;
  top: 75px;
  width: 250px;
  padding: 0.75rem;
  background-color: var(--bs-white);
  z-index: 1040;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 991.9px) {
  .sidebar {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    top: 0;
    height: 100%;
  }
}

.sidebar + main {
  width: calc(100% - 250px);
  -webkit-padding-start: 250px;
  padding-inline-start: 250px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar {
  margin: 0;
  padding: 0;
  display: block;
}

@media (max-width: 991.9px) {
  .sidebar + main {
    width: 100%;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
  }
}

.sidebar .nav-title {
  -webkit-padding-start: 0.5rem;
  padding-inline-start: 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  color: #424242;
}

.sidebar .navbar-nav.mmenu {
  margin-bottom: 1.5rem;
  width: 100%;
}

.sidebar .navbar-nav.mmenu li {
  padding: 0.25rem 0;
  display: block;
  width: 100%;
}

.sidebar .navbar-nav.mmenu li a {
  cursor: pointer;
  display: block;
  width: 100%;
  letter-spacing: -0.1px;
  overflow: hidden;
  background-size: 0.7rem;
  background-repeat: no-repeat;
  background-position: 95% 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  padding: 0.5rem;
  font-size: 0.813rem;
  position: relative;
}

.sidebar .navbar-nav.mmenu .dropdown li a {
  -webkit-padding-start: 1.5rem;
  padding-inline-start: 1.5rem;
}

.sidebar .navbar-nav.mmenu .dropdown li a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  background: currentColor;
  border-radius: 50%;
}

@media (min-width: 992px) {
  .sidebar .navbar-nav.mmenu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.page {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.page .content {
  padding-inline: 1.5rem 0.75rem;
  min-height: calc(100vh - 80px);
}

@media (max-width: 578.9px) {
  .page .content {
    padding-inline: 0.75rem 0.75rem;
  }
}

.page.sidebar-expanded .overlay-btn {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  z-index: 1040;
}

@media (min-width: 991.9px) {
  .page.sidebar-expanded .overlay-btn {
    display: none;
  }
}

.page.sidebar-expanded .sidebar:hover {
  width: 250px;
  position: fixed;
  top: 75px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-border-end: 1px solid #eae8e8;
  border-inline-end: 1px solid #eae8e8;
}

.page.sidebar-expanded .sidebar + main {
  width: calc(100% - 72px);
  -webkit-padding-start: 72px;
  padding-inline-start: 72px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 991.9px) {
  .page.sidebar-expanded .sidebar + main {
    width: 100%;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
  }
}

@media (max-width: 991.9px) {
  .page.sidebar-expanded .sidebar {
    width: 250px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    top: 0;
  }

  .page.sidebar-expanded .sidebar:hover {
    top: 0;
  }

  .page.sidebar-expanded .sidebar .nav-title {
    display: block;
  }

  .page.sidebar-expanded .sidebar .mmenu li a.nav-link .text {
    display: inline-block;
  }

  .page.sidebar-expanded .sidebar .mmenu li a.nav-link .svg-icon {
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
  }

  .page.sidebar-expanded .sidebar .mmenu li a.dropdown-toggle {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11.499" height="6.504" viewBox="0 0 11.499 6.504"><path id="Path_123721" data-name="Path 123721" d="M6.469-3.468a.747.747,0,0,0,1.059,0l5-5a.747.747,0,0,0,0-1.06.75.75,0,0,0-1.059,0L7-5.059,2.531-9.531a.747.747,0,0,0-1.059,0,.75.75,0,0,0,0,1.06l5,5Z" transform="translate(-1.253 9.752)" fill="rgba(0,0,0,0.5)"/></svg>');
  }
}

.top-menu {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(var(--bs-white-rgb), 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid #eae8e8;
}

.top-menu .start {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 240px;
  position: relative;
}

.top-menu .start::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 1.4rem;
  width: 1px;
  background-color: #eae8e8;
  inset-inline-end: 0;
}

.top-menu .start .logo {
  max-height: 2.5rem;
}

@media (max-width: 500px) {
  .top-menu .start .logo {
    max-height: 2rem;
  }
}

.top-menu .start .btn-menu-collapse {
  width: 48px;
  height: 48px;
  background-color: rgba(var(--bs-dark-rgb), 0.05);
  color: rgba(var(--bs-dark-rgb), 0.75);
  border-radius: 50%;
  border: none;
}

.top-menu .start .btn-menu-collapse svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 500px) {
  .top-menu .start .btn-menu-collapse {
    width: 40px;
    height: 40px;
  }

  .top-menu .start .btn-menu-collapse svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (max-width: 991.9px) {
  .top-menu .start {
    min-width: auto;
    -webkit-padding-end: 0.75rem;
    padding-inline-end: 0.75rem;
    -webkit-border-end: none;
    border-inline-end: none;
  }
}

.top-menu .end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.top-menu .end .user-dropdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #eae8e8;
  gap: 0.5rem;
}
.top-menu .dropdown-menu {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.01) !important;
    border-radius: 0.5rem !important;
    -webkit-box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
    box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
}
.top-menu .dropdown-item:hover::before {
    content: none !important;
}
.top-menu .dropdown-item:hover,
.top-menu .dropdown-item:focus {
    color: var(--bs-primary) !important;
    font-weight: bold;
}
@media (max-width: 557.9px) {
  .top-menu .end .user-dropdown {
    border: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

.top-menu .end .user-dropdown .user-image {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
}

.top-menu .end .user-dropdown .sting-logo svg {
  height: 1.5rem;
}

@media (max-width: 557.9px) {
  .top-menu .end .user-dropdown .sting-logo {
    display: none;
  }
}

@media (max-width: 500px) {
  .top-menu {
    gap: 0.5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .top-menu .start {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    -webkit-padding-end: 0;
    padding-inline-end: 0;
  }

  .top-menu .start::after {
    display: none;
  }
}

.top-menu .dropdown-menu {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.01) !important;
  border-radius: 0.5rem !important;
  -webkit-box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
  box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
}

.top-menu .dropdown-item:hover::before {
  content: none !important;
}

.top-menu .dropdown-item:hover,
.top-menu .dropdown-item:focus {
  color: var(--bs-primary) !important;
  font-weight: bold;
}

.top-menu .notifcation-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  color: #56617d;
}

.top-menu .notifcation-btn .bell-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.lang-selector {
  position: relative;
  color: rgba(var(--bs-dark-rgb), 0.75);
}

.lang-selector select {
  padding-inline: 2rem 2.5rem;
  background-image: none;
  border: 0;
  background-color: transparent;
    position: relative ;
    z-index: 2;
}

@media (max-width: 500px) {
  .lang-selector .form-select {
    --bs-form-select-bg-img: none !important;
    background-image: none !important;
  }
}

.lang-selector::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 1.4rem;
  width: 1px;
  background-color: #eae8e8;
  inset-inline-end: 0;
}

.lang-selector .icon {
  position: absolute;
  z-index: -1;
  width: 1.5rem;
  height: 1.5rem;
  inset-inline-start: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.lang-selector .icon {
  position: absolute;
  z-index: 0;
  width: 1.5rem;
  height: 1.5rem;
  inset-inline-start: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.lang-selector .arrow-down svg {
  position: absolute;
  width: 1rem;
  height: 1rem;
  inset-inline-end: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 0;
}

.mmenu li a.nav-link .svg-icon svg {
  width: 1.125rem;
  height: 1.25rem;
}
.white-space-nowrap {
  white-space: nowrap;
}

.filetype-add {
  height: 30px;
  margin-top: 2px;
  white-space: nowrap;
}
/* strat table*/

.table-responsive {
  margin-bottom: 0.5rem;
}

.table-responsive.sticky-header-custom .table {
  position: relative;
}

.table-responsive.sticky-header-custom thead tr {
  background-color: var(--bs-white);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-responsive.sticky-header-custom thead tr th {
  position: relative;
}

.table-responsive.sticky-header-custom thead tr th:first-child::after {
  border-start-start-radius: 0.25rem;
  border-inline-start: 1px solid #eae8e8;
}

.table-responsive.sticky-header-custom thead tr th:last-child::after {
  inset-inline-start: 1px;
  border-start-end-radius: 0.25rem;
  border-inline-end: 1px solid #eae8e8;
}

/* ================= TABLE ================= */

.table {
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  position: relative;
  z-index: 2;
}

@media (min-width: 1366px) {
  .table .w-col-500-lg {
    width: 500px;
  }
}

.table .td-wrap-cell {
  min-width: 150px;
}

.table .td-wrap-cell.date {
  min-width: 120px;
}

.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
}

.table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: transparent;
}

.table > :not(caption) > * > * {
  background-color: transparent;
}

.table .td-content .icon,
.table .td-content .title,
.table .td-content .no-desc {
  display: none;
}

.table .task-depancy-number {
  display: inline-flex;
  color: var(--dark-700);
}

.table .task-depancy-number svg {
  width: 1rem;
  height: 1rem;
}

.table .mx-w-300 {
  max-width: 300px;
}

.table .task-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  width: 300px;
}

/* ================= THEAD ================= */

.table thead th {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-800);
  white-space: nowrap;
  background-color: transparent;
  padding-top: 1rem;
  border-inline-width: 0;
  border-bottom: 0;
}

.table thead th:first-child {
  padding-inline-start: 1rem;
}

.table thead th:last-child {
  padding-inline-end: 1rem;
}

/* ================= TBODY ================= */

.table tbody {
  position: relative;
  z-index: 1;
}

.table tbody tr {
  position: relative;
}

.table tbody tr td {
  font-size: 0.875rem;
  color: var(--dark-800);
  background-color: transparent !important;
}
.btn-table-action {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.btn-table-action .action-btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background-color: transparent;
  border: 1px solid #eae8e8;
  color: var(--dark-800);
  transition: all 0.2s ease;
}

.btn-table-action .action-btn:hover {
  background-color: var(--light-200);
  border-color: var(--dark-300);
  color: var(--primary);
}

.table thead th {
  vertical-align: middle;
  border-bottom: 2px solid #eae8e8;
  padding: 1rem 0.5rem;
}

.table tbody td {
  vertical-align: middle;
  padding: 1rem 0.5rem;
}

.table th.actions-column,
.table td.actions-column {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 1rem !important;
}
div.dt-scroll-body {
  border-width: 1px !important ;
  border-color: #eae8e8;
  border-top-width: 0 !important ;
  border-radius: 0 0 0.375rem 0.375rem;
}
.dt-scroll-head {
  border: 1px solid #eae8e8 !important;
  border-bottom-width: 0 !important ;
  border-radius: 0.375rem 0.375rem 0 0;
}
.table tbody tr td:first-child,
.table tbody tr th:first-child {
  padding-inline-start: 1rem;
}

.table tbody tr td:last-child,
.table tbody tr th:last-child {
  padding-inline-end: 1rem;
}

.table tbody tr td,
.table tbody tr th {
  border-bottom: 0;
}

/* Ensure DataTables sort icon is always on the right */
table.dataTable thead tr th div.dt-column-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

table.dataTable thead tr th div.dt-column-header span.dt-column-title {
    flex: 1 !important;
    text-align: start !important;
}

table.dataTable thead tr th div.dt-column-header span.dt-column-order {
    margin-inline-start: auto !important;
}

/* Align length menu and pagination at the bottom end */
.dt-layout-row:last-child .dt-layout-end {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.dt-layout-row:last-child .dt-layout-end .dt-length {
    margin-bottom: 0 !important;
}

.width-2rem{
    width: 2rem;
}
.table tbody tr::after {
  content: "";
  position: absolute;
  height: 0.5px;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, 0);
  background: #eae8e8;
  width: calc(100% - 2rem);
}

.table tbody tr:hover::after {
  height: 100%;
  width: calc(100% - 2px);
  background-color: var(--light-200);
}

.table tbody tr:last-child td {
  padding-bottom: 1rem;
}

.table tbody tr:last-child::after {
  display: none;
  border-end-end-radius: 0.375rem;
}

.table tbody tr:last-child:hover::after {
  display: block;
  opacity: 1;
  height: calc(100% - 1px);
  width: calc(100% - 2px);
  background-color: var(--light-200);
  top: 0;
  border-end-end-radius: 0.375rem;
  border-end-start-radius: 0.375rem;
  transform: translate(-50%, 0);
}

/* ================= SEPARATED TABLE ================= */

.table.separated-table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.table.separated-table::after {
  display: none;
}

.table.separated-table tbody tr::after,
.table.separated-table tbody tr:last-child::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--bs-border-radius);
  background-color: transparent;
  border: 1px solid #eae8e8;
}

.table.separated-table tbody tr td {
  vertical-align: middle;
}

.table.separated-table thead th {
  padding-block: 0;
}

/* end table*/
.auth-container .start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f5fa;
    background: linear-gradient(40.9deg, #f4f5fa 0%, #f5f8fd 99.02%);
}
@media (max-width: 991.9px) {
    .auth-container .start {
        display: none;
    }
}
.auth-container .end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2rem;
    height: 100vh;
}
.auth-container .end .form-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}
.auth-container .end .form-content .logo {
    max-height: 4.5rem;
    margin-bottom: 2rem;
}
.auth-container .end .form-content .heading {
    font-size: 1.5rem;
    border-bottom: 1px solid #eae8e8;
    padding-bottom: 0.5rem;
    position: relative;
}
.auth-container .end .form-content .heading:after {
    content: "";
    width: 1.5rem;
    height: 1px;
    background-color: var(--bs-primary);
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
}
.auth-container .end .form-content form {
    padding-block: 1rem;
}
.auth-container .end .form-content .form-group {
    margin-bottom: 0.75rem;
}
.auth-container .end .form-content .form-group .form-label {
    color: #757575;
    font-size: 0.875rem;
}
.auth-container .end .form-content .form-group .input-icon {
    position: relative;
}
.auth-container .end .form-content .form-group .input-icon .form-control {
    padding-block: 0.625rem;
    -webkit-padding-start: 2.85rem;
    padding-inline-start: 2.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #757575;
}
.auth-container .end .form-content .form-group .start-icon {
    position: absolute;
    width: 2.5rem;
    height: 1.5rem;
    inset-inline-start: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #757575;
    -webkit-border-end: 1px solid #757575;
    border-inline-end: 1px solid #757575;
}
.auth-container .end .form-content .form-group .start-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.auth-container .end .form-content .btn-primary {
    font-size: 0.875rem;
    padding: 0.75rem;
}

.rounded-pill, .auth-container .end .form-content .btn-primary, .auth-container .end .form-content .form-group .input-icon .form-control {
    border-radius: var(--bs-border-radius-pill) !important;
}

.w-100, .auth-container .end .form-content .btn-primary, .auth-container .end .form-content form, .auth-container .end .form-content .heading {
    width: 100% !important;
}

/* ----- TL.7 (#125) Markdown polish ----------------------------------
   Styles for MarkdownRenderer's code blocks (highlight.js + Copy
   button) and inline-table polish. Renderer-level — applies wherever
   MarkdownRenderer is used (chat bubbles + WorkflowCard examples).
   ------------------------------------------------------------------ */

.markdown-content pre.sm-codeblock {
    position: relative;
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
}

.markdown-content pre.sm-codeblock > code {
    /* Reset Bootstrap reboot pre/code padding so highlight.js's theme
       paint isn't double-inset. */
    padding: 0;
    background: transparent;
    font-size: 0.875em;
}

.markdown-content pre.sm-codeblock > .sm-copy-btn {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;          /* RTL-aware via logical property */
    padding: 2px 8px;
    font-size: 0.7rem;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.markdown-content pre.sm-codeblock:hover > .sm-copy-btn,
.markdown-content pre.sm-codeblock:focus-within > .sm-copy-btn {
    opacity: 1;
}

.markdown-content pre.sm-codeblock > .sm-copy-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Inline code (single-backtick) — leave to Bootstrap reboot but
   tighten the contrast inside message bubbles. */
.markdown-content code:not(pre code) {
    padding: 0.1em 0.35em;
    font-size: 0.875em;
    border-radius: 3px;
    background: rgba(135, 131, 120, 0.15);
}

/* Markdown tables — Bootstrap's .table classes handle most of it; this
   just makes sure they breathe inside narrow message bubbles. */
.markdown-content table.markdown-table {
    margin: 0.5rem 0;
    font-size: 0.875em;
}

/* RTL-aware: code is always LTR even inside RTL paragraphs. inset-inline-end
   above handles the Copy button direction; this flips the block's text
   direction so the syntax tokens still align correctly. */
[dir="rtl"] .markdown-content pre.sm-codeblock {
    direction: ltr;
    text-align: start;
}

/* ----- TL.7 (#145 Phase C) ChartBlock sizing --------------------------
   ApexCharts needs an explicit width on its container or it renders
   into a 0-width div + nothing appears. The host wrapper claims full
   parent width; the chart canvas inside gets a min-height so the
   chart paints into a sane box even when ApexCharts hasn't computed
   its dimensions yet (first paint, theme switch, etc.).
   ------------------------------------------------------------------- */
.sm-chartblock-host {
    width: 100%;
}

.sm-chartblock {
    width: 100%;
    min-height: 320px;
}