/* SmartAI — thin bridge on top of official Tabler (v1.4+) */



:root {

  /* Legacy aliases for site.css; synced from Tabler theme in smartai-theme.js */

  --theme-primary: var(--tblr-primary, #066fd1);

  --theme-primary-dark: var(--tblr-primary-dark, #0559a8);

  --theme-primary-rgb: var(--tblr-primary-rgb, 6, 111, 209);

  /* Inter (Google Fonts) — Tabler defaults to "Inter Var", which we do not ship */
  --tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --tblr-body-font-family: var(--tblr-font-sans-serif);

  --tblr-body-font-size: var(--app-font-size, 0.875rem);

  --sa-canvas: var(--tblr-body-bg, #f6f8fb);

  --sa-surface: var(--tblr-bg-surface, #fff);

  --sa-border: var(--tblr-border-color, #e6e7e9);

}



body.smartai-app-shell,
body.account-layout {

  font-family: var(--tblr-body-font-family);

  font-size: var(--app-font-size, var(--tblr-body-font-size, 0.875rem));

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.theme-font-size-display {
  min-width: 4.5rem;
  text-align: center;
  font-size: var(--app-font-size, 0.875rem);
  font-weight: 600;
}

/* ===== Horizontal top navbar (Tabler index.html #navbar-menu) ===== */

body.smartai-app-shell .page-wrapper {

  width: 100%;

  margin-inline-start: 0 !important;

}



body.smartai-app-shell #navbar-menu .dropdown-menu {

  overflow: visible;

}



body.smartai-app-shell #navbar-menu .dropend > .dropdown-menu {

  top: 0;

  margin-top: 0;

}



/* ===== Page layout alignment ===== */

body.smartai-app-shell .page-body {

  padding-top: 1rem;

  padding-bottom: 1rem;

}



/* ===== Tabler page-header (used by dashboard and content pages) ===== */

.page-header {

  margin-bottom: 0;

  padding-top: 1.25rem;

}



.page-header + .page-body {

  padding-top: 1.25rem;

}



.card-header-actions-only {

  justify-content: flex-end;

}



.page-header .page-title {

  font-size: 1.25rem;

  font-weight: 600;

  line-height: 1.2;

  margin: 0;

}



.page-header .page-pretitle {

  margin-bottom: 0.25rem;

}



/* ===== Dashboard (Home/Index) ===== */

body.smartai-app-shell .dashboard-chart-wrap {

  position: relative;

  height: 280px;

}



body.smartai-app-shell a.dashboard-stat-card {

  color: inherit;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



body.smartai-app-shell a.dashboard-stat-card:hover {

  border-color: var(--tblr-primary);

  box-shadow: 0 0.25rem 0.75rem rgba(var(--tblr-primary-rgb, 6, 111, 209), 0.12);

}



body.smartai-app-shell a.dashboard-stat-card .avatar {

  --tblr-avatar-size: 2.75rem;

}



/* ===== Cards — Tabler theme radius/border (do not override border-radius) ===== */

body.smartai-app-shell .card:not(.no-smartai-surface) {
  border-color: var(--tblr-border-color);
}

body.smartai-app-shell .card.shadow {
  box-shadow: var(--tblr-box-shadow-card) !important;
}

body.account-layout .card {
  border-color: var(--tblr-border-color);
  background-color: var(--tblr-bg-surface);
}



body.smartai-app-shell .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-color: var(--tblr-border-color);
}



body.smartai-app-shell .card-header .card-title {

  font-size: 1rem;

  font-weight: 600;

  margin: 0;

}



/* ===== Legacy btn-icon-split → Tabler-like buttons ===== */

.btn-icon-split {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding-inline: 0.75rem;

}



.btn-icon-split .icon,

.btn-icon-split .text {

  display: inline-flex;

  align-items: center;

  background: none !important;

  border: none !important;

  padding: 0 !important;

  width: auto !important;

}



/* ===== Account pages (Tabler sign-in / forgot-password pattern) ===== */

body.account-layout .page-center {

  min-height: 100vh;

}

body.account-layout .account-illustration-wrap {

  max-width: 30rem;

  margin-inline: auto;

}

body.account-layout .account-illustration-image {

  width: min(100%, 28rem);

  max-height: 24rem;

  object-fit: contain;

}

body.account-layout .account-illustration-svg {

  width: min(100%, 28rem);

  max-height: 24rem;

}

body.account-layout .account-illustration-icon {

  width: 9rem;

  height: 9rem;

  margin-inline: auto;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--tblr-primary);

  background: rgba(var(--tblr-primary-rgb, 6, 111, 209), 0.12);

}

body.account-layout .account-illustration-icon i {

  font-size: 4rem;

  line-height: 1;

}



body.account-layout .account-logo-wrap {

  display: flex;

  justify-content: center;

  margin-bottom: 1.5rem;

}



body.account-layout .account-card-toolbar .account-logo-wrap {

  justify-content: flex-start;

  margin-bottom: 0;

}



body.account-layout .account-card-toolbar .account-lang-switch {

  flex-shrink: 0;

}



body.account-layout .account-logo-wrap .navbar-brand {

  margin: 0;

  padding: 0;

}



body.account-layout .navbar-brand .brand-mark {

  flex-shrink: 0;

}



body.account-layout .account-lang-switch .account-lang-toggle {

  width: 2.5rem;

  height: 2.5rem;

  font-size: 1.125rem;

}



body.account-layout .input-group-flat .input-group-text.p-0 {

  padding: 0;

  border: 0;

  background: transparent;

}



body.account-layout .input-group-flat .password-toggle {

  text-decoration: none;

}



[dir="rtl"] body.account-layout .form-label-description {

  float: inline-start;

}



/* ===== Toastr (showToast / SmartAINotify) — Tabler-aligned ===== */

#toast-container {
  z-index: 1090 !important;
}

#toast-container > div {
  position: relative;
  width: var(--tblr-toast-max-width, 350px) !important;
  max-width: 100%;
  opacity: 1;
  font-size: var(--tblr-toast-font-size, 0.875rem);
  box-shadow: var(--tblr-toast-box-shadow, var(--tblr-box-shadow)) !important;
  border-radius: var(--tblr-toast-border-radius, var(--tblr-border-radius)) !important;
  background-image: none !important;
  background-color: var(--tblr-toast-bg, var(--tblr-bg-surface)) !important;
  color: var(--tblr-body-color) !important;
  border: var(--tblr-toast-border-width, 1px) solid var(--tblr-toast-border-color, var(--tblr-border-color)) !important;
  border-inline-start-width: 3px !important;
  border-inline-start-style: solid !important;
  min-height: 3.25rem;
  padding-block: 0.875rem !important;
  padding-inline-start: 2.75rem !important;
  padding-inline-end: 2rem !important;
}

/* Type icon (Bootstrap Icons) — success / danger(error) / warning / info */
#toast-container > div::before {
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  line-height: 1;
  position: absolute;
  inset-inline-start: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.375rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#toast-container > .toast-success::before {
  content: "\f26a";
  color: var(--tblr-success);
}

#toast-container > .toast-error::before {
  content: "\f332";
  color: var(--tblr-danger);
}

#toast-container > .toast-warning::before {
  content: "\f33a";
  color: var(--tblr-warning);
}

#toast-container > .toast-info::before {
  content: "\f430";
  color: var(--tblr-info);
}

#toast-container > .toast-success {
  border-inline-start-color: var(--tblr-success) !important;
}

#toast-container > .toast-error {
  border-inline-start-color: var(--tblr-danger) !important;
}

#toast-container > .toast-warning {
  border-inline-start-color: var(--tblr-warning) !important;
}

#toast-container > .toast-info {
  border-inline-start-color: var(--tblr-info) !important;
}

#toast-container .toast-title {
  font-weight: 600;
  color: var(--tblr-body-color);
  line-height: 1.45;
  margin-bottom: 0.15rem;
}

#toast-container .toast-message {
  color: var(--tblr-secondary-color);
  word-break: break-word;
  line-height: 1.45;
}

#toast-container .toast-close-button {
  position: absolute !important;
  top: 50% !important;
  float: none !important;
  margin: 0 !important;
  transform: translateY(-50%);
  color: var(--tblr-secondary-color);
  opacity: 0.65;
  text-shadow: none;
  font-weight: 700;
  line-height: 1;
}

/* EN: close on the right; AR: close on the left (outer edge of corner toast) */
[dir="ltr"] #toast-container .toast-close-button,
#toast-container:not(.rtl) .toast-close-button {
  right: 0.625rem !important;
  left: auto !important;
}

[dir="rtl"] #toast-container .toast-close-button {
  left: 0.625rem !important;
  right: auto !important;
}

#toast-container.rtl .toast-close-button {
  left: 0.625rem !important;
  right: auto !important;
  float: none !important;
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
  color: var(--tblr-body-color);
  opacity: 1;
  transform: translateY(-50%);
}

#toast-container > .toast-success .toast-progress {
  background-color: var(--tblr-success) !important;
}

#toast-container > .toast-error .toast-progress {
  background-color: var(--tblr-danger) !important;
}

#toast-container > .toast-warning .toast-progress {
  background-color: var(--tblr-warning) !important;
}

#toast-container > .toast-info .toast-progress {
  background-color: var(--tblr-info) !important;
}

/* ===== SweetAlert2 modals (Tabler-aligned; corner msgs use toastr) ===== */

:root {
  --swal2-background: var(--tblr-bg-surface, #fff);
  --swal2-color: var(--tblr-body-color, #1e293b);
}

.swal2-container {
  z-index: 1100 !important;
}

.swal2-container.swal2-backdrop-show {
  background: color-mix(in srgb, var(--tblr-body-color, #000) 40%, transparent) !important;
}

.swal2-popup {
  z-index: 1101 !important;
  border-radius: var(--tblr-border-radius-lg, var(--tblr-border-radius, 0.5rem)) !important;
  box-shadow: var(--tblr-box-shadow-card, var(--tblr-box-shadow)) !important;
  border: 1px solid var(--tblr-border-color) !important;
  font-family: inherit !important;
  background: var(--swal2-background) !important;
  color: var(--swal2-color) !important;
}

.swal2-popup:not(.swal2-toast) {
  padding: 1.5rem !important;
  width: 28em;
  max-width: calc(100vw - 2rem);
}

.SmartAI-swal-popup.swal2-popup:not(.swal2-toast) {
  padding: 1.5rem !important;
}

.swal2-popup:not(.swal2-toast) .swal2-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--tblr-body-color) !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
  font-size: 0.9375rem !important;
  color: var(--tblr-secondary-color) !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon {
  width: 4rem !important;
  height: 4rem !important;
  margin: 0.5rem auto 1rem !important;
  border-width: 3px !important;
}

.swal2-icon.swal2-success {
  border-color: var(--tblr-success) !important;
  color: var(--tblr-success) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--tblr-danger) !important;
  color: var(--tblr-danger) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--tblr-warning) !important;
  color: var(--tblr-warning) !important;
}

.swal2-icon.swal2-info {
  border-color: var(--tblr-info) !important;
  color: var(--tblr-info) !important;
}

.swal2-icon.swal2-question {
  border-color: var(--tblr-primary) !important;
  color: var(--tblr-primary) !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon-content {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
}

.swal2-popup:not(.swal2-toast) .swal2-actions {
  margin-top: 1.25rem !important;
  gap: 0.5rem !important;
  flex-wrap: wrap;
  justify-content: center;
}

/* Tabler .btn on Swal buttons (buttonsStyling: false) — no gradients */
.swal2-popup:not(.swal2-toast) .swal2-actions .btn {
  margin: 0;
  min-width: 5rem;
}

.swal2-popup:not(.swal2-toast) .swal2-confirm.btn,
.swal2-popup:not(.swal2-toast) .swal2-cancel.btn,
.swal2-popup:not(.swal2-toast) .swal2-deny.btn {
  box-shadow: none;
}

.swal2-loader {
  width: 3rem !important;
  height: 3rem !important;
  border-width: 3px !important;
  border-color: var(--tblr-primary) !important;
  border-right-color: transparent !important;
}

.swal2-input,
.swal2-textarea,
.swal2-file {
  border-radius: var(--tblr-border-radius, 0.25rem) !important;
  border: 1px solid var(--tblr-border-color) !important;
  background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)) !important;
  color: var(--tblr-body-color) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-file:focus {
  border-color: var(--tblr-primary) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--tblr-primary) 25%, transparent) !important;
  outline: none !important;
}

.swal2-validation-message {
  background: var(--tblr-danger-bg-subtle, color-mix(in srgb, var(--tblr-danger) 12%, transparent)) !important;
  color: var(--tblr-danger) !important;
  border-radius: var(--tblr-border-radius, 0.25rem) !important;
  padding: 0.5rem 0.75rem !important;
  margin-top: 0.5rem !important;
  font-size: 0.875rem !important;
}

.swal2-success-ring {
  border-color: color-mix(in srgb, var(--tblr-success) 35%, transparent) !important;
}

.swal2-success-fix {
  background-color: transparent !important;
}

.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--tblr-danger) !important;
}

.swal2-warning [class^="swal2-warning-circular-line"] {
  background-color: var(--tblr-warning) !important;
}

.swal2-progress-step {
  background: var(--tblr-primary) !important;
  color: var(--tblr-primary-fg, #fff) !important;
  border-radius: var(--tblr-border-radius, 0.25rem) !important;
}

.swal2-active-progress-step {
  background: var(--tblr-success) !important;
}

.swal2-progress-step-line {
  background: var(--tblr-border-color) !important;
}

.swal2-footer {
  border-top: 1px solid var(--tblr-border-color) !important;
  color: var(--tblr-secondary-color) !important;
}

.swal2-timer-progress-bar-container {
  background: var(--tblr-border-color) !important;
}

.swal2-timer-progress-bar {
  background: var(--tblr-primary) !important;
}

.swal2-html-container p {
  margin-bottom: 0.5rem !important;
}

[dir="rtl"] .swal2-popup:not(.swal2-toast) {
  text-align: right !important;
}

[dir="rtl"] .swal2-popup:not(.swal2-toast) .swal2-html-container ul,
[dir="rtl"] .swal2-popup:not(.swal2-toast) .swal2-html-container ol {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}

@media (max-width: 768px) {
  .swal2-popup:not(.swal2-toast) {
    padding: 1.25rem !important;
    margin: 1rem !important;
    width: auto !important;
  }

  .swal2-popup:not(.swal2-toast) .swal2-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .swal2-popup:not(.swal2-toast) .swal2-actions .btn {
    width: 100% !important;
  }
}



/* ===== DataTable page header pattern ===== */

body.smartai-app-shell .card-header h6.font-weight-bold.text-primary {

  font-weight: 600;

  color: var(--tblr-body-color) !important;

  font-size: 1rem;

}



/* ===== Stat card with border-left (legacy compatibility) ===== */

.card.border-left-primary { border-left: 3px solid var(--tblr-primary) !important; }

.card.border-left-warning { border-left: 3px solid var(--tblr-warning, #f76707) !important; }

.card.border-left-success { border-left: 3px solid var(--tblr-success, #2fb344) !important; }

.card.border-left-info { border-left: 3px solid var(--tblr-info, #4299e1) !important; }



/* ===== Drawer forms (Tabler form-layout / form-elements bridge) ===== */

.drawer-form-container .drawer-form {

  display: flex;

  flex-direction: column;

  min-height: 0;

  height: auto;

  max-height: 100%;

  overflow: hidden;

}



.drawer-form-container .drawer-form-content {

  flex: 1 1 0;

  min-height: 0;

  overflow-y: auto;

}



.drawer-form-container .drawer-form-footer.form-footer {

  flex: 0 0 auto;

  margin-top: 0;

  padding-top: 1rem;

  border-top: 1px solid var(--tblr-border-color, #e6e7e9);

  background: var(--tblr-bg-surface, #fff);

}



.drawer-form-container label.form-label.required::after,

.drawer-form-container .col-form-label.required::after {

  content: " *";

  color: var(--tblr-danger, #d63939);

}



.drawer-form-container .form-hint {

  display: block;

  margin-top: 0.25rem;

}



.drawer-form-container .invalid-feedback {

  display: block;

}



.drawer-form-container .form-control.is-invalid,

.drawer-form-container .form-select.is-invalid {

  border-color: var(--tblr-danger, #d63939);

}

.drawer-form-container .was-validated .form-control:invalid,
.drawer-form-container .form-control.is-invalid,
.drawer-form-container .form-control.input-validation-error {
  background-image: none !important;
  padding-inline-end: 0.75rem;
}

.drawer-form-container .was-validated .form-select:invalid,
.drawer-form-container .form-select.is-invalid,
.drawer-form-container .form-select.input-validation-error {
  --bs-form-select-bg-icon: none;
  --tblr-form-select-bg-icon: none;
}



.drawer-form-container .input-group-flat .input-group-text.p-0 {

  padding: 0;

  border: 0;

  background: transparent;

}



.drawer-form-container .input-group-flat .password-toggle {

  text-decoration: none;

}



/* ===== Tabler alerts (app shell) ===== */

body.smartai-app-shell .alert-important .alert-icon .icon {

  width: 1.5rem;

  height: 1.5rem;

}



/* ===== Drawer forms — Tabler validation & required labels ===== */

.drawer-form-container .form-label.required::after,

.drawer-form-container label.form-label.required::after {

  content: " *";

  color: var(--tblr-danger, #d63939);

}



.drawer-form-container .invalid-feedback:not(:empty),

.drawer-form-container .field-validation-error:not(:empty) {

  display: block;

}



.drawer-form-container .input-group-flat .password-toggle {

  cursor: pointer;

  text-decoration: none;

}



.drawer-form-container .input-group-flat .password-toggle:hover {

  color: var(--tblr-primary);

}



/* ===== Legacy card headers → Tabler card-title ===== */

body.smartai-app-shell .card-header h6.font-weight-bold.text-primary {

  font-size: 1rem;

  font-weight: 600;

  color: var(--tblr-body-color) !important;

  margin: 0;

}



body.smartai-app-shell .card-header .btn-list {

  margin: 0;

}



.drawer-form-container .drawer-form-footer .btn-list {

  margin: 0;

}



/* Form record / designer status pills — white label on custom background color */
.form-status-badge {
  color: #fff !important;
  font-weight: 500;
  max-width: 100%;
}

.form-status-badge.text-white {
  --tblr-badge-color: #fff;
}