/* Dashboard theme (scoped to .app-dashboard). Every colour comes from theme_tokens.css (D-182). */

.app-dashboard,
.app-dashboard * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* App shell */
.app-dashboard {
  background-color: var(--app-content-bg);
  color: var(--app-text-primary);
}

.app-dashboard .app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar — fixed column; main content offset via --app-sidebar-width */
.app-dashboard .app-sidebar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 100;
  width: var(--app-sidebar-width);
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--app-sidebar-bg);
  border-inline-end: var(--app-sidebar-border-width) solid var(--app-sidebar-border);
  border-radius: 0;
  box-shadow: var(--app-sidebar-outer-shadow);
  scrollbar-width: none;
  transition: width 0.2s ease;
}

.app-dashboard .app-main-wrap {
  transition: margin-inline-start 0.2s ease;
}

.app-dashboard .app-sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-dashboard .app-sidebar__version {
  flex-shrink: 0;
  display: block;
  padding: 8px 20px 16px;
  border-top: 1px solid var(--app-border);
  font-size: 11px;
  color: var(--app-text-muted);
  line-height: 1.3;
}

.app-dashboard .app-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
  background: var(--app-sidebar-header-bg);
  border-bottom: none;
  flex-shrink: 0;
  position: relative;
}

.app-dashboard .app-sidebar__brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--app-sidebar-header-brand-fg);
  text-decoration: none;
}

.app-dashboard .app-sidebar__brand:hover {
  color: var(--app-sidebar-header-brand-fg);
  opacity: 0.92;
}

.app-dashboard .app-theme-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--app-icon);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.app-dashboard .app-theme-toggle:hover {
  background: color-mix(in srgb, var(--app-hover) 92%, var(--app-primary));
  color: var(--app-text-primary);
}

/* Collapsed sidebar — icon rail */
html[data-sidebar-collapsed] {
  --app-sidebar-width: var(--app-sidebar-width-collapsed);
}

html[data-sidebar-collapsed] .app-dashboard .app-sidebar__header {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 12px 8px;
}

html[data-sidebar-collapsed] .app-dashboard .app-sidebar__brand {
  font-size: 0;
  line-height: 1;
  width: 2rem;
  text-align: center;
  overflow: hidden;
}

html[data-sidebar-collapsed] .app-dashboard .app-sidebar__list--primary::before,
html[data-sidebar-collapsed] .app-dashboard .app-sidebar__footer::before,
html[data-sidebar-collapsed] .app-dashboard .app-sidebar__version,
html[data-sidebar-collapsed] .app-dashboard .app-sidebar__divider,
html[data-sidebar-collapsed] .app-dashboard .app-sidebar__section-label,
html[data-sidebar-collapsed] .app-dashboard .app-sidebar__sublist,
html[data-sidebar-collapsed] .app-dashboard .app-nav-link__end {
  display: none;
}

html[data-sidebar-collapsed] .app-dashboard .app-nav-link__title,
html[data-sidebar-collapsed] .app-dashboard .app-nav-link__suffix,
html[data-sidebar-collapsed] .app-dashboard .app-nav-link .app-nav-badge {
  display: none;
}

html[data-sidebar-collapsed] .app-dashboard .app-sidebar__item {
  margin: 2px 6px;
}

html[data-sidebar-collapsed] .app-dashboard .app-nav-link {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 0;
  min-height: 44px;
}

html[data-sidebar-collapsed] .app-dashboard .app-nav-link__icon {
  position: relative;
}

html[data-sidebar-collapsed] .app-dashboard .app-nav-link:has(.app-nav-badge) .app-nav-link__icon::after {
  content: "";
  position: absolute;
  top: -2px;
  inset-inline-end: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-nav-badge-bg);
  border: 2px solid var(--app-sidebar-bg);
  box-sizing: border-box;
}

html[data-sidebar-collapsed] .app-dashboard .app-nav-link:hover::before {
  content: attr(title);
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--app-theme-tooltip-fg);
  background: var(--app-theme-tooltip-bg);
  border: 1px solid var(--app-theme-tooltip-border);
  border-radius: 6px;
  box-shadow: var(--app-theme-tooltip-shadow);
  pointer-events: none;
}

html:not([data-theme="dark"]) .app-dashboard .app-theme-toggle:hover::after,
html[data-theme="light"] .app-dashboard .app-theme-toggle:hover::after,
html[data-theme="dark"] .app-dashboard .app-theme-toggle:hover::after {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  padding: 6px 10px;
  background: var(--app-theme-tooltip-bg);
  color: var(--app-theme-tooltip-fg);
  border: 1px solid var(--app-theme-tooltip-border);
  border-radius: 6px;
  box-shadow: var(--app-theme-tooltip-shadow);
  pointer-events: none;
  z-index: 1080;
}

html:not([data-theme="dark"]) .app-dashboard .app-theme-toggle:hover::after,
html[data-theme="light"] .app-dashboard .app-theme-toggle:hover::after {
  content: "Switch to dark mode";
}

html[data-theme="dark"] .app-dashboard .app-theme-toggle:hover::after {
  content: "Switch to light mode";
}

.app-dashboard .app-theme-toggle .ti {
  font-size: 1.35rem;
  line-height: 1;
}

.app-dashboard .app-theme-toggle__icon--light {
  display: inline-block;
}

.app-dashboard .app-theme-toggle__icon--dark {
  display: none;
}

[data-theme="dark"] .app-dashboard .app-theme-toggle__icon--light {
  display: none;
}

[data-theme="dark"] .app-dashboard .app-theme-toggle__icon--dark {
  display: inline-block;
}

.app-dashboard .app-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-dashboard .app-sidebar__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.app-dashboard .app-sidebar__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-dashboard .app-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-dashboard .app-sidebar__list--primary {
  flex: 0 0 auto;
}

.app-dashboard .app-sidebar__list--primary::before {
  content: attr(data-section-label);
  display: block;
  padding: 16px 20px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--app-text-muted);
  line-height: 1.2;
}

.app-dashboard .app-sidebar__footer::before {
  content: "SUPPORT";
  display: block;
  padding: 16px 20px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--app-text-muted);
  line-height: 1.2;
}

.app-dashboard .app-sidebar__item {
  margin: 2px 8px;
}

.app-dashboard .app-sidebar__divider {
  flex-shrink: 0;
  margin: 8px 16px;
  border: none;
  border-top: 1px solid var(--app-border);
  opacity: 0.6;
}

.app-dashboard .app-sidebar__footer {
  flex-shrink: 0;
  padding-bottom: 8px;
  background: var(--app-sidebar-bg);
}

/* Nav links */
.app-dashboard .app-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  color: var(--app-text-secondary);
  text-decoration: none;
  border-radius: 10px;
  border-inline-start: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-dashboard .app-nav-link:hover {
  background: var(--app-hover);
  color: var(--app-text-primary);
}

.app-dashboard .app-nav-link:hover .app-nav-link__icon .ti {
  color: var(--app-primary);
}

.app-dashboard .app-nav-link:hover .app-nav-link__title {
  color: var(--app-text-primary);
}

.app-dashboard .app-nav-link.active {
  background: var(--app-nav-link-active-bg);
  color: var(--app-nav-link-active-fg);
  font-weight: 600;
}

.app-dashboard .app-nav-link.active .app-nav-link__icon .ti {
  color: var(--app-nav-link-active-fg);
}

.app-dashboard .app-nav-link.active .app-nav-link__title {
  color: var(--app-nav-link-active-fg);
}

.app-dashboard .app-nav-link__icon {
  display: inline-flex;
  width: 24px;
  justify-content: center;
  flex-shrink: 0;
}

.app-dashboard .app-nav-link__icon .ti {
  font-size: 20px;
  line-height: 1;
  color: var(--app-icon);
}

.app-dashboard .app-nav-link__title {
  flex: 1;
  text-align: start;
  min-width: 0;
}

.app-dashboard .app-nav-link .app-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--app-nav-badge-size);
  height: var(--app-nav-badge-size);
  padding: 0 6px;
  border-radius: 999px;
  background: var(--app-nav-badge-bg);
  color: var(--app-nav-badge-fg) !important;
  font-size: var(--app-nav-badge-font-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
}

.app-dashboard .app-nav-link--section-active .app-nav-badge,
.app-dashboard .app-nav-link.active .app-nav-badge,
.app-dashboard .app-nav-link:hover .app-nav-badge {
  background: var(--app-nav-badge-bg);
  color: var(--app-nav-badge-fg) !important;
}

.app-dashboard .app-nav-link__end .app-nav-badge {
  margin-inline-start: 0;
}

.app-dashboard .app-nav-link__suffix {
  display: inline-flex;
  margin-inline-start: auto;
  opacity: 0.55;
}

.app-dashboard .app-nav-link__suffix .ti {
  font-size: 1rem;
  color: inherit;
}

/* Expandable nav sections (Billing, …) — single merged link row */
.app-dashboard .app-nav-link--expandable {
  cursor: pointer;
}

.app-dashboard .app-nav-link__end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.app-dashboard .app-nav-link__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text-muted);
  transition: transform 0.2s ease, color 0.15s ease;
}

.app-dashboard .app-nav-link__chevron .ti {
  font-size: 16px;
  line-height: 1;
}

.app-dashboard .app-nav-link--expandable:hover .app-nav-link__chevron,
.app-dashboard .app-nav-link--expandable.app-nav-link--section-active .app-nav-link__chevron {
  color: var(--app-nav-link-active-fg);
}

.app-dashboard .app-sidebar__item--expandable:not(.app-sidebar__item--expanded) .app-nav-link__chevron {
  transform: rotate(-90deg);
}

.app-dashboard .app-nav-link--section-active {
  color: var(--app-nav-link-active-fg);
  font-weight: 600;
}

.app-dashboard .app-nav-link--section-active .app-nav-link__icon .ti,
.app-dashboard .app-nav-link--section-active .app-nav-link__title {
  color: var(--app-nav-link-active-fg);
}

.app-dashboard .app-nav-link--section-active:not(:hover) {
  background: transparent;
}

.app-dashboard .app-sidebar__sublist {
  list-style: none;
  margin-block: 0 4px;
  margin-inline: 22px 8px;
  padding-block: 2px 4px;
  padding-inline: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-start: 2px solid var(--app-border);
}

.app-dashboard .app-sidebar__subitem {
  display: flex;
}

.app-dashboard .app-nav-sublink {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--app-text-secondary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-dashboard .app-nav-sublink__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
}

.app-dashboard .app-nav-sublink__icon .ti {
  font-size: 17px;
  line-height: 1;
  color: var(--app-icon);
  transition: color 0.15s ease;
}

.app-dashboard .app-nav-sublink:hover .app-nav-sublink__icon .ti {
  color: var(--app-primary);
}

.app-dashboard .app-nav-sublink.active .app-nav-sublink__icon .ti {
  color: var(--app-nav-link-active-fg);
}

.app-dashboard .app-nav-sublink__title {
  flex: 1;
  min-width: 0;
}

.app-dashboard .app-nav-sublink:hover {
  background: var(--app-hover);
  color: var(--app-text-primary);
}

.app-dashboard .app-nav-sublink.active {
  background: var(--app-nav-link-active-bg);
  color: var(--app-nav-link-active-fg);
  font-weight: 600;
}

.app-dashboard .app-nav-sublink.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--app-nav-link-active-fg);
}

.app-dashboard .app-sidebar__footer .app-nav-link {
  border-radius: 10px;
}

.app-dashboard .app-sidebar__footer .app-sidebar__item:last-child .app-nav-link {
  color: var(--app-text-secondary);
}

.app-dashboard .app-sidebar__footer .app-sidebar__item:last-child .app-nav-link .app-nav-link__icon .ti {
  color: var(--app-icon);
}

.app-dashboard .app-sidebar__footer .app-sidebar__item:last-child .app-nav-link:hover {
  background: var(--app-hover);
  color: var(--app-nav-signout-hover-fg);
}

.app-dashboard .app-sidebar__footer .app-sidebar__item:last-child .app-nav-link:hover .app-nav-link__icon .ti,
.app-dashboard .app-sidebar__footer .app-sidebar__item:last-child .app-nav-link:hover .app-nav-link__title {
  color: var(--app-nav-signout-hover-fg);
}

/* Main column */
.app-dashboard .app-main-wrap {
  flex: 1;
  min-width: 0;
  margin-inline-start: var(--app-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--app-content-bg);
}

.app-dashboard .app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background: var(--app-header-bg);
  border-bottom: 1px solid var(--app-border);
  flex-shrink: 0;
  overflow: visible;
  z-index: 1040;
}

.app-dashboard .app-topbar .dropdown {
  position: relative;
}

.app-dashboard .app-topbar__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--app-text-primary);
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--app-primary);
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1.3;
}

.app-dashboard .app-topbar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-dashboard .app-user-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: start;
  color: var(--app-text-primary);
}

.app-dashboard .app-user-avatar {
  width: var(--app-user-avatar-size);
  height: var(--app-user-avatar-size);
  min-width: var(--app-user-avatar-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  background: var(--app-primary);
  color: var(--app-user-avatar-fg);
  flex-shrink: 0;
}

.app-dashboard .app-user-meta-name {
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: 1.2;
}

.app-dashboard .app-user-meta-email {
  font-size: 0.8125rem;
  color: var(--app-text-secondary);
  line-height: 1.2;
}

.app-dashboard .app-page-body {
  flex: 1;
  background: var(--app-content-bg);
  animation: app-page-fade-in 0.2s ease;
}

.app-dashboard .app-page-body .container-xl {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Cards — Tabler/BS5 use --bs-card-border-color for outline + cap separators */
.app-dashboard .card {
  background: var(--app-card-bg);
  --bs-card-border-color: var(--app-card-border);
  --tblr-card-border-radius: var(--app-radius-card);
  --tblr-card-inner-border-radius: calc(var(--app-radius-card) - 1px);
  border: 1px solid transparent;
  border-radius: var(--app-radius-card);
  box-shadow: var(--app-shadow-card);
  color: var(--app-text-primary);
}

[data-theme="dark"] .app-dashboard .card {
  border: 1px solid var(--app-card-border);
  box-shadow: none;
}

.app-dashboard .card-header,
.app-dashboard .card-footer {
  background: var(--app-card-bg);
  --bs-card-border-color: var(--app-card-border);
  border-color: var(--app-card-border);
  color: var(--app-text-primary);
}

.app-dashboard .card-title {
  color: var(--app-text-primary);
}

/*
 * Section card titles: Tabler `text-primary` / `text-azure` read as blue; product
 * chrome uses the brand primary (`--app-primary`). Scoped to `.card-title` only so
 * icons in sibling header actions (e.g. outline buttons) keep normal button colors.
 * Auth cards use `.app-auth-card__title` rules below instead.
 */
.app-dashboard:not(.app-auth-page) .card-header .card-title .ti.text-primary,
.app-dashboard:not(.app-auth-page) .card-header .card-title .ti.text-azure {
  color: var(--app-primary) !important;
}

.app-dashboard:not(.app-auth-page) .card-header .card-title .ti:not([class*="text-"]) {
  color: var(--app-primary);
}

.app-dashboard .list-group {
  --bs-list-group-border-color: var(--app-card-border);
}

.app-dashboard .list-group-item {
  background: var(--app-card-bg);
  border-color: var(--app-card-border);
  color: var(--app-text-primary);
}

.app-dashboard .list-group-item:hover {
  background: var(--app-hover);
}

.app-dashboard .list-group-item-action:hover {
  background: var(--app-hover);
  color: var(--app-text-primary);
}

/* Tables (D-186): the look of the Orders table everywhere: a darker head band, row lines you
   can see and a light hover on rows that open something. Statements (no links in their rows)
   get no hover. Tabler/Bootstrap 5 draw the lines from --bs-table-border-color and the cell
   background from --bs-table-bg. */
.app-dashboard .table {
  color: var(--app-text-primary);
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text-primary);
  --bs-table-border-color: var(--app-list-line);
  border-color: var(--app-list-line);
}

.app-dashboard .table > :not(caption) > * > * {
  --bs-table-border-color: var(--app-list-line);
  border-color: var(--app-list-line);
}

.app-dashboard .table thead th {
  background: var(--app-list-head-bg);
  color: var(--app-list-head-fg);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-block-end: 1px solid var(--app-list-line);
}

[lang="ur"] .app-dashboard .table thead th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}

.app-dashboard .table tbody tr:has(a):hover > * {
  background-color: var(--app-list-hover);
  transition: background-color 0.12s;
}

/* Section rows (Tabler's table-light: "Sales", "Expenses" on a statement) take the date-row
   tint, in both themes. */
.app-dashboard .table .table-light,
.app-dashboard .table.table-light {
  --bs-table-bg: var(--app-list-date-bg);
  --bs-table-color: var(--app-text-primary);
  --bs-table-border-color: var(--app-list-line);
  color: var(--app-text-primary);
}

.app-dashboard .table .table-light > th,
.app-dashboard .table .table-light > td,
.app-dashboard .table.table-light th,
.app-dashboard .table.table-light td {
  background-color: var(--app-list-date-bg);
  color: var(--app-text-primary);
}

/* The rounded card clips the head band at its corners. */
.app-dashboard .card > .table-responsive:first-child,
.app-dashboard .card > .card-table:first-child {
  border-start-start-radius: var(--app-radius-card);
  border-start-end-radius: var(--app-radius-card);
}

.app-dashboard .card > .table-responsive:last-child {
  border-end-start-radius: var(--app-radius-card);
  border-end-end-radius: var(--app-radius-card);
}

/* Forms / text */
.app-dashboard .text-secondary {
  color: var(--app-text-secondary) !important;
}

.app-dashboard .text-muted {
  color: var(--app-text-muted) !important;
}

/* Bootstrap `.text-body` ties to `--bs-body-color-rgb`, which only flips when
   `data-bs-theme` is set. We drive dark mode via `html[data-theme]` for WA
   variables, so without this override feature lines (e.g. billing plan cards)
   keep near-black `!important` color on dark card surfaces. */
.app-dashboard .text-body {
  color: var(--app-text-primary) !important;
}

.app-dashboard .page-pretitle,
.app-dashboard .page-title {
  color: var(--app-text-primary);
}

/* Overview: separate welcome block from stat cards */
.app-dashboard .app-overview-welcome {
  border-bottom: 1px solid var(--app-border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.app-dashboard a:not(.app-nav-link):not(.app-sidebar__brand):not(.btn):not(.dropdown-item):not(.list-group-item-action):not(.page-link):not(.app-link-reset) {
  color: var(--app-link);
}

.app-dashboard a:not(.app-nav-link):not(.app-sidebar__brand):not(.btn):not(.dropdown-item):not(.list-group-item-action):not(.page-link):not(.app-link-reset):hover {
  color: var(--app-primary);
}

/* Buttons */
.app-dashboard .btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-on-primary);
  border-radius: 8px;
}

.app-dashboard .btn-primary:hover,
.app-dashboard .btn-primary:focus {
  background: var(--app-btn-primary-hover);
  border-color: var(--app-btn-primary-hover);
  color: var(--app-on-primary);
}

.app-dashboard .btn-outline-primary {
  color: var(--app-primary-dark);
  border-color: var(--app-primary);
  border-radius: 8px;
}

.app-dashboard .btn-outline-primary:hover {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-on-primary);
}

.app-dashboard .btn-outline-danger {
  border-radius: 8px;
}

/* Stat cards (overview) */
.app-dashboard a.dashboard-stat-card {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--app-text-primary) 8%, transparent);
}

[data-theme="dark"] .app-dashboard a.dashboard-stat-card {
  box-shadow: none;
}

.app-dashboard a.dashboard-stat-card:hover {
  transform: translateY(var(--app-stat-hover-lift));
  box-shadow: var(--app-stat-hover-shadow);
  background: var(--app-stat-card-hover-bg) !important;
  border-color: var(--app-card-border);
}

[data-theme="dark"] .app-dashboard a.dashboard-stat-card:hover {
  box-shadow: var(--app-stat-hover-shadow);
}

.app-dashboard .app-stat-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-dashboard .app-stat-icon .ti {
  font-size: 24px;
  line-height: 1;
}

.app-dashboard .app-stat-icon--plan {
  background: var(--app-primary-light);
  color: var(--app-primary-dark);
}

.app-dashboard .app-stat-icon--messages {
  background: var(--app-stat-messages-icon-bg);
  color: var(--app-stat-messages-icon-color);
}

/* Progress (usage) */
.app-dashboard .progress {
  background-color: var(--app-border);
}

.app-dashboard .app-dashboard-usage-progress {
  height: 8px !important;
  min-height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.app-dashboard .app-dashboard-usage-progress .dashboard-usage-progress-bar {
  transition: width 0.6s ease;
}

.app-dashboard .app-dashboard-usage-progress-zero .dashboard-usage-progress-bar {
  min-width: 6px;
}

.app-dashboard .app-dashboard-usage-progress .progress-bar.bg-success {
  background-color: var(--app-usage-progress-success) !important;
}

.app-dashboard .app-dashboard-usage-progress .progress-bar.bg-warning {
  background-color: var(--app-progress-warning) !important;
}

.app-dashboard .app-dashboard-usage-progress .progress-bar.bg-danger {
  background-color: var(--app-progress-danger) !important;
}

.app-dashboard .progress-bar.bg-success {
  background-color: var(--app-primary) !important;
}

.app-dashboard .progress-bar.bg-warning {
  background-color: var(--app-progress-warning) !important;
}

.app-dashboard .progress-bar.bg-danger {
  background-color: var(--app-progress-danger) !important;
}

/* Dropdown */
.app-dashboard .dropdown-menu {
  background: var(--app-dropdown-bg);
  border: 1px solid var(--app-dropdown-border);
  box-shadow: none;
  border-radius: 8px;
}

[data-theme="dark"] .app-dashboard .dropdown-menu {
  box-shadow: var(--app-stat-hover-shadow);
}

.app-dashboard .dropdown-item {
  color: var(--app-text-primary);
}

.app-dashboard .dropdown-item:hover {
  background: var(--app-hover);
  color: var(--app-text-primary);
}

/* Alerts — Part 5 (Tabler-style + auto fade) */
.app-dashboard .alert.alert-dismissible {
  border-radius: 8px;
  border-width: 1px;
  animation: app-flash-dismiss var(--app-flash-dismiss-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.app-dashboard .alert.alert-success.alert-dismissible {
  background: var(--app-flash-success-bg);
  color: var(--app-flash-success-fg);
  border-color: color-mix(in srgb, var(--app-flash-success-accent) 28%, var(--app-border));
  border-inline-start-width: 4px;
  border-inline-start-color: var(--app-flash-success-accent);
}

.app-dashboard .alert.alert-danger.alert-dismissible {
  background: var(--app-flash-danger-bg);
  color: var(--app-flash-danger-fg);
  border-color: color-mix(in srgb, var(--app-flash-danger-accent) 28%, var(--app-border));
  border-inline-start-width: 4px;
  border-inline-start-color: var(--app-flash-danger-accent);
}

.app-dashboard .alert.alert-info.alert-dismissible {
  background: var(--app-flash-info-bg);
  color: var(--app-flash-info-fg);
  border-color: color-mix(in srgb, var(--app-flash-info-accent) 28%, var(--app-border));
  border-inline-start-width: 4px;
  border-inline-start-color: var(--app-flash-info-accent);
}

/* Billing — payment submitted flash (8s dismiss) */
.app-dashboard .alert.app-billing-payment-flash {
  background: var(--app-flash-success-bg);
  color: var(--app-flash-success-fg);
  border-color: color-mix(in srgb, var(--app-flash-success-accent) 28%, var(--app-border));
  border-inline-start-width: 4px;
  border-inline-start-color: var(--app-flash-success-accent);
}

.app-dashboard .alert.alert-dismissible.app-flash-dismiss--8s {
  animation: app-flash-dismiss-8s 9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* API keys — one-time full secret: compact key + adjacent copy (no stretched dead space) */
.app-dashboard .alert.app-api-key-flash .app-api-key-reveal {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.375rem;
  max-width: 100%;
}

.app-dashboard .alert.app-api-key-flash .app-api-key-plain {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
  border-radius: 8px;
  background: var(--app-input-bg);
  border: 1px solid var(--app-input-border);
  color: var(--app-input-fg);
}

.app-dashboard .alert.app-api-key-flash .app-api-key-copy-btn {
  padding: 0.45rem 0.85rem;
  font-weight: 600;
  font-size: 0.8125rem;
  min-height: 2.25rem;
  border-radius: 8px;
  box-shadow: none;
}

.app-dashboard .alert.app-api-key-flash .app-api-key-copy-btn .ti {
  flex-shrink: 0;
  font-size: 1rem;
}

/* Semantic badges */
.app-dashboard .app-badge {
  display: inline-block;
  padding: 0.25em 0.55em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
}

.app-dashboard .app-badge--connected {
  background: var(--app-badge-connected-bg);
  color: var(--app-badge-connected-fg);
}

.app-dashboard .app-badge--connecting {
  background: var(--app-badge-connecting-bg);
  color: var(--app-badge-connecting-fg);
}

.app-dashboard .app-badge--disconnected {
  background: var(--app-badge-disconnected-bg);
  color: var(--app-badge-disconnected-fg);
}

.app-dashboard .app-badge--outbound {
  background: var(--app-badge-outbound-bg);
  color: var(--app-badge-outbound-fg);
}

.app-dashboard .app-badge--inbound {
  background: var(--app-badge-inbound-bg);
  color: var(--app-badge-inbound-fg);
}

.app-dashboard .app-badge--sent {
  background: var(--app-badge-sent-bg);
  color: var(--app-badge-sent-fg);
}

.app-dashboard .app-badge--delivered {
  background: var(--app-badge-delivered-bg);
  color: var(--app-badge-delivered-fg);
}

.app-dashboard .app-badge--read {
  background: var(--app-badge-read-bg);
  color: var(--app-badge-read-fg);
}

.app-dashboard .app-badge--failed {
  background: var(--app-badge-failed-bg);
  color: var(--app-badge-failed-fg);
}

.app-dashboard .app-badge--neutral {
  background: var(--app-badge-neutral-bg);
  color: var(--app-badge-neutral-fg);
}

.app-dashboard .app-badge--current {
  background: var(--app-badge-current-bg);
  color: var(--app-badge-current-fg);
}

.app-dashboard .app-badge--success-ui {
  background: var(--app-badge-connected-bg);
  color: var(--app-badge-connected-fg);
}

.app-dashboard .app-badge--danger-ui {
  background: var(--app-badge-disconnected-bg);
  color: var(--app-badge-disconnected-fg);
}

.app-dashboard .app-badge--warning-ui {
  background: var(--app-badge-connecting-bg);
  color: var(--app-badge-connecting-fg);
}

/* Forms — Part 2: visible inputs in light & dark */
.app-dashboard .form-control,
.app-dashboard .form-select,
.app-dashboard input[type="text"],
.app-dashboard input[type="email"],
.app-dashboard input[type="password"],
.app-dashboard input[type="url"],
.app-dashboard input[type="tel"],
.app-dashboard input[type="number"],
.app-dashboard textarea {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-fg) !important;
  border: 1px solid var(--app-input-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.4;
  box-shadow: none;
}

.app-dashboard textarea {
  min-height: calc(1.4em + 20px);
}

.app-dashboard .form-control::placeholder {
  color: var(--app-input-placeholder) !important;
  opacity: 1;
}

.app-dashboard .form-control:focus,
.app-dashboard .form-select:focus,
.app-dashboard input[type="text"]:focus,
.app-dashboard input[type="email"]:focus,
.app-dashboard input[type="password"]:focus,
.app-dashboard input[type="url"]:focus,
.app-dashboard input[type="tel"]:focus,
.app-dashboard input[type="number"]:focus,
.app-dashboard textarea:focus {
  background-color: var(--app-input-bg) !important;
  color: var(--app-input-fg) !important;
  border-color: var(--app-input-focus-border) !important;
  box-shadow: 0 0 0 2px var(--app-input-focus-ring) !important;
  outline: none !important;
}

.app-dashboard .form-control:disabled,
.app-dashboard .form-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Input groups: keep flush join with attached buttons */
.app-dashboard .input-group > .form-control:not(:last-child) {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.app-dashboard .input-group > .form-control:not(:first-child) {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}

.app-dashboard .input-group > .input-group-text {
  background-color: color-mix(in srgb, var(--app-input-bg) 72%, var(--app-border) 28%) !important;
  color: var(--app-text-secondary) !important;
  border: 1px solid var(--app-input-border) !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 12px !important;
  border-start-start-radius: 8px !important;
  border-end-start-radius: 8px !important;
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

/* Select: custom chevron, match inputs */
.app-dashboard select.form-select,
.app-dashboard select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: 2.5rem !important;
  background-image: var(--app-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
}

.app-dashboard .form-label {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: var(--app-text-secondary) !important;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.app-dashboard .form-text {
  color: var(--app-text-secondary);
}

.app-dashboard .list-group-item .avatar.bg-green-lt.text-green {
  background: var(--app-primary-light) !important;
  color: var(--app-primary-dark) !important;
}

.app-dashboard .card.border-primary {
  border-color: var(--app-primary) !important;
}

.app-dashboard .table-danger,
.app-dashboard .table-danger > td,
.app-dashboard .table-danger > th {
  background-color: var(--app-badge-disconnected-bg) !important;
  color: var(--app-text-primary);
  border-color: var(--app-border);
}

.app-dashboard tr.app-table-row-muted {
  background: var(--app-hover) !important;
}

.app-dashboard .app-badge .ti-circle-filled {
  font-size: 0.5rem;
  line-height: 1;
}

/* Part 5 — page enter, flash collapse, scrollbars */
@keyframes app-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes app-flash-dismiss {
  /* First 4s of 5s total: full visibility; then fade + collapse */
  0%,
  80% {
    opacity: 1;
    max-height: 12rem;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    overflow: hidden;
    min-height: 0 !important;
    visibility: hidden;
  }
}

@keyframes app-flash-dismiss-8s {
  /* ~8s visible of 9s total, then fade + collapse */
  0%,
  88.888% {
    opacity: 1;
    max-height: 12rem;
  }

  93% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    overflow: hidden;
    min-height: 0 !important;
    visibility: hidden;
  }
}

/* Billing page — payment instructions (pre-line in table), status badges */
.app-dashboard .app-billing-instructions-text {
  white-space: pre-line;
  line-height: 1.6;
}

/* Billing — payment instructions row highlight.
   The row matching the gateway picked in the "Submit payment" form's
   Payment-method <select> gets `.app-billing-method-row--active` toggled
   on it by inline JS so it's visually prominent: a left accent bar in
   the brand color, a soft tinted background, and the small "Selected"
   pill (hidden by default) becomes visible. Toggles also flip
   aria-current for screen readers — see initializeBillingGatewaySelection
   in app/views/dashboard/billing/show.html.erb. */
.app-dashboard .app-billing-method-row {
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.app-dashboard .app-billing-method-row__selected-badge {
  display: none;
  align-self: flex-start;
}

.app-dashboard .app-billing-method-row--active > td {
  background: var(--app-badge-current-bg);
  box-shadow: inset 4px 0 0 0 var(--app-primary);
}

.app-dashboard .app-billing-method-row--active .app-billing-method-row__selected-badge {
  display: inline-flex;
}

.app-dashboard .app-badge.app-badge--payment-approved {
  background: var(--app-payment-badge-approved-bg);
  color: var(--app-payment-badge-approved-fg);
}

.app-dashboard .app-badge.app-badge--payment-pending {
  background: var(--app-payment-badge-pending-bg);
  color: var(--app-payment-badge-pending-fg);
}

.app-dashboard .app-badge.app-badge--payment-rejected {
  background: var(--app-payment-badge-rejected-bg);
  color: var(--app-payment-badge-rejected-fg);
}

/* Auth (Devise) — same design tokens + header as dashboard; centered form */
.app-dashboard.app-auth-page .app-auth-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-dashboard.app-auth-page .app-auth-topbar.app-sidebar__header {
  position: sticky;
  top: 0;
  z-index: 1020;
  flex-shrink: 0;
}

.app-dashboard.app-auth-page .app-auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.95;
}

.app-dashboard.app-auth-page .app-auth-container {
  max-width: 28rem;
}

.app-dashboard.app-auth-page .app-auth-panel {
  max-width: 26.25rem;
}

.app-dashboard.app-auth-page .app-auth-hero__product {
  font-weight: 700;
  color: var(--app-text-primary);
  letter-spacing: 0.02em;
}

.app-dashboard.app-auth-page .app-auth-hero__tagline {
  font-size: 0.9375rem;
}

.app-dashboard.app-auth-page .app-auth-hero__avatar {
  width: 4rem;
  height: 4rem;
}

.app-dashboard.app-auth-page .app-auth-hero__avatar .ti {
  font-size: 1.75rem;
}

.app-dashboard.app-auth-page .app-auth-card {
  border: 1px solid var(--app-card-border);
  background: var(--app-card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--app-text-primary) 6%, transparent);
}

[data-theme="dark"] .app-dashboard.app-auth-page .app-auth-card {
  box-shadow: 0 2px 12px color-mix(in srgb, var(--app-text-primary) 20%, transparent);
}

.app-dashboard.app-auth-page .app-auth-card .card-header {
  background: var(--app-card-bg);
  border-bottom-color: var(--app-card-border);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.app-dashboard.app-auth-page .app-auth-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--app-text-primary);
}

.app-dashboard.app-auth-page .app-auth-card__title .ti {
  font-size: 1.25rem;
  color: var(--app-primary-dark);
}

.app-dashboard.app-auth-page .app-auth-links {
  border-top: 1px solid var(--app-card-border);
  padding-top: 1rem;
  margin-top: 0;
}

.app-dashboard.app-auth-page .app-auth-footer {
  border-top: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-card-bg) 92%, var(--app-content-bg));
  flex-shrink: 0;
}

.app-dashboard.app-auth-page .app-auth-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

.app-dashboard.app-auth-page .app-auth-link-row a {
  color: var(--app-link);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.app-dashboard.app-auth-page .app-auth-link-row a:hover {
  text-decoration: underline;
}

.app-dashboard.app-auth-page .app-auth-flash__icon {
  font-size: 1.25rem;
  margin-top: 0.1rem;
}

.app-dashboard.app-auth-page .app-auth-label-icon {
  font-size: 1rem;
  opacity: 0.85;
}

body.app-dashboard::-webkit-scrollbar {
  width: var(--app-scrollbar-size);
  height: var(--app-scrollbar-size);
}

body.app-dashboard::-webkit-scrollbar-track {
  background: var(--app-content-bg);
}

body.app-dashboard::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border-radius: var(--app-scrollbar-radius);
}

body.app-dashboard::-webkit-scrollbar-thumb:hover {
  background: var(--app-scrollbar-thumb-hover);
}

/* ---------------------------------------------------------------------------
 * Mobile / small-tablet responsive layout.
 *
 * Desktop default: fixed 300px sidebar on the left, main content offset by
 * the same width via margin-inline-start. Below 992px (Bootstrap's lg breakpoint,
 * matching the Tabler `d-xl-block` user-meta toggle in dashboard.html.erb)
 * we flip to an off-canvas drawer:
 *   - hamburger button appears in the topbar
 *   - sidebar translates off-screen by default
 *   - .app-shell--sidebar-open slides it back in and shows the backdrop
 *   - main content reclaims the full viewport width
 * The toggle wiring lives inline at the bottom of dashboard.html.erb.
 * ------------------------------------------------------------------------- */

.app-dashboard .app-topbar__menu-toggle {
  display: inline-flex; /* ≡: collapses the sidebar on a wide screen, opens the drawer on a phone */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-end: 0.5rem;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-header-bg);
  color: var(--app-text-primary);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-dashboard .app-topbar__menu-toggle:hover,
.app-dashboard .app-topbar__menu-toggle:focus-visible {
  background: var(--app-content-bg);
  color: var(--app-primary);
  outline: none;
}

.app-dashboard .app-sidebar-backdrop {
  display: none; /* shown only on mobile when drawer is open */
  position: fixed;
  inset: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--app-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

body.app-dashboard.app-scroll-lock {
  overflow: hidden;
}

@media (max-width: 991.98px) {

  /* Mobile drawer always shows full labels regardless of desktop collapse preference */
  html[data-sidebar-collapsed] {
    --app-sidebar-width: var(--app-sidebar-width-expanded);
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__header {
    flex-direction: row;
    align-items: center;
    height: 64px;
    padding: 0 20px;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__brand {
    font-size: 17px;
    width: auto;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__list--primary::before,
  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__footer::before {
    display: block;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__version,
  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__divider {
    display: block;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__sublist {
    display: flex;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-nav-link__end {
    display: inline-flex;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__sublist[hidden] {
    display: none !important;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-nav-link__title,
  html[data-sidebar-collapsed] .app-dashboard .app-nav-link__suffix,
  html[data-sidebar-collapsed] .app-dashboard .app-nav-link .app-nav-badge {
    display: inline-flex;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-nav-link__title {
    display: block;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-sidebar__item {
    margin: 2px 8px;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-nav-link {
    justify-content: flex-start;
    gap: 14px;
    padding: 0 20px;
    min-height: 48px;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-nav-link:hover::before {
    content: none;
  }

  html[data-sidebar-collapsed] .app-dashboard .app-nav-link:has(.app-nav-badge) .app-nav-link__icon::after {
    content: none;
  }

  /* Off-canvas sidebar — slides in from the left when the app shell gains
     .app-shell--sidebar-open. We give it a slightly higher z-index than the
     backdrop and a subtle shadow for separation. */
  .app-dashboard .app-sidebar {
    z-index: 1060;
    width: min(85vw, var(--app-sidebar-width));
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    box-shadow: var(--app-shadow-drawer);
  }

  .app-dashboard .app-shell--sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  /* Backdrop becomes interactive only while the drawer is open. */
  .app-dashboard .app-sidebar-backdrop {
    display: block;
  }

  .app-dashboard .app-shell--sidebar-open .app-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main column reclaims the viewport. */
  .app-dashboard .app-main-wrap {
    margin-inline-start: 0;
  }

  /* Tighter chrome on small screens — the page header was tuned for desktop. */
  .app-dashboard .app-topbar {
    padding: 0 12px;
    gap: 0.5rem;
  }

  .app-dashboard .app-topbar__title {
    font-size: 16px;
    padding-inline-start: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-dashboard .app-topbar__actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }

  /* Reduce the content gutter so cards don't feel cramped. */
  .app-dashboard .app-page-body .container-xl {
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Right-to-left languages (Urdu). Layout flips come from three places:
 *   1. <html dir="rtl"> plus Tabler's mirrored stylesheet (tabler.rtl.min.css),
 *   2. the logical properties used throughout this file (margin-inline-start, ...),
 *   3. the few rules below that logical properties cannot express.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-weight: 400;
  font-display: swap;
  src: url(/vendor/fonts/noto-naskh-arabic-400.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-weight: 700;
  font-display: swap;
  src: url(/vendor/fonts/noto-naskh-arabic-700.woff2) format("woff2");
}

html[lang="ur"] {
  --tblr-font-sans-serif: "Noto Naskh Arabic", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", Tahoma, system-ui, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  font-size: 105%;
}
html[lang="ur"] body { line-height: 1.7; }

/* Arrows and "collapse sidebar" glyphs point the wrong way once mirrored. */
[dir="rtl"] .ti-arrow-left,
[dir="rtl"] .ti-arrow-right,
[dir="rtl"] .ti-chevron-left,
[dir="rtl"] .ti-chevron-right,
[dir="rtl"] .ti-arrow-narrow-left,
[dir="rtl"] .ti-arrow-narrow-right,
[dir="rtl"] .ti-layout-sidebar-left-collapse,
[dir="rtl"] .ti-layout-sidebar-left-expand,
[dir="rtl"] .ti-layout-sidebar-right-collapse,
[dir="rtl"] .ti-layout-sidebar-right-expand {
  transform: scaleX(-1);
}

/* Emails, API keys, URLs and numbers stay left-to-right inside RTL text. */
[dir="rtl"] code,
[dir="rtl"] .app-ltr,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="password"] {
  direction: ltr;
  unicode-bidi: plaintext;
}
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"] { text-align: end; }

/* The mobile drawer slides in from the right edge. */
@media (max-width: 991.98px) {
  [dir="rtl"] .app-dashboard .app-sidebar {
    transform: translateX(100%);
    box-shadow: var(--app-shadow-drawer-rtl);
  }
  [dir="rtl"] .app-dashboard .app-shell--sidebar-open .app-sidebar {
    transform: translateX(0);
  }
}

/* The narrowest phones (320 px, U-6): the language button moves into the account menu. */
.app-topbar__lang { display: contents; }
.app-topbar__lang-item { display: none; }
@media (max-width: 359.98px) {
  .app-topbar__lang { display: none; }
  .app-topbar__lang-item { display: block; }
}

/* Tabler 1.4 lays every alert out as a flex row, which put an alert's two lines side by
   side and opened gaps around bold words in a sentence. Ours are plain blocks (U-6). */
.app-dashboard .alert:not(.alert-dismissible) { display: block; }

/* A page title keeps at least 12rem; its buttons go under it when there is no room beside
   it (Our bottles, statements, Cash collected, a deposit with Print receipt on 320 px). */
.app-dashboard .page-header .row > .col { min-inline-size: min(100%, 12rem); }
.app-dashboard .page-header > .d-flex { flex-wrap: wrap; }
.app-dashboard .page-header > .d-flex > .min-w-0 { flex: 1 1 10rem; }